@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Italiana&display=swap');
:root{--bg:#111613;--panel:#19201b;--cream:#f3efdf;--gold:#ed454a;--muted:#a8b0a7;--line:#ffffff24}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--bg);color:var(--cream);font-family:'DM Sans',Arial,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button,a,summary{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:6px}img{max-width:100%;display:block}header{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:30px 5%;border-bottom:1px solid var(--line);background:linear-gradient(#0007,transparent)}.wordmark{font-size:28px;letter-spacing:-1.4px;font-weight:700;line-height:1}.wordmark span{color:var(--gold);font-weight:400}.wordmark small{display:block;font-size:8px;letter-spacing:2.3px;font-weight:500;margin-top:9px}nav{display:flex;gap:32px;align-items:center;font-size:12px}.nav-book{border:1px solid #ed454a88;padding:13px 21px}.nav-book span{margin-left:22px}nav a:hover,.text-link:hover{color:var(--gold)}.menu-toggle{display:none}.hero{height:100svh;min-height:720px;max-height:1180px;position:relative;display:flex;align-items:center;overflow:hidden;background:#171b18}.hero-film{position:absolute;width:100%;height:100%;inset:0;object-fit:cover;object-position:center}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,13,11,.87),rgba(7,13,11,.55) 45%,rgba(7,13,11,.12)),linear-gradient(0deg,#111613,transparent 30%,#0001)}.hero-copy{position:relative;z-index:1;padding:160px 7% 120px;width:100%}.eyebrow{text-transform:uppercase;font-size:10px;font-weight:500;letter-spacing:2.7px;color:var(--gold);line-height:1.8;margin:0 0 26px}.live-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--gold);margin-right:10px;vertical-align:2px}h1,h2{font-family:'Italiana',Georgia,serif;font-weight:400;letter-spacing:-3px;margin:0;line-height:1.02}h1{font-size:clamp(72px,7.8vw,126px)}em{font-family:Georgia,serif;font-weight:400;color:var(--gold)}h1 em{font-size:.93em}p{font-size:15px;line-height:1.85;color:var(--muted)}.hero-description{font-size:15px;color:#e6e6db;line-height:1.7;margin:24px 0 28px}.hero-actions{display:flex;gap:30px;align-items:center}.button{display:inline-flex;align-items:center;justify-content:center;gap:30px;font-size:12px;font-weight:600;padding:19px 25px;border:1px solid var(--gold);transition:background .2s,transform .2s}.gold{color:#171c16;background:var(--gold)}.gold:hover{background:#ff696d;transform:translateY(-2px)}.play-small{font-size:10px}.text-link{font-size:12px;border-bottom:1px solid #ed454a55;padding-bottom:9px;display:inline-flex;gap:25px;align-items:center}.hero-bottom{position:absolute;bottom:28px;left:5%;right:5%;display:flex;justify-content:space-between;align-items:center;z-index:2;font-size:8px;letter-spacing:1.8px;color:#d3d6cc}.hero-bottom a span{margin-left:20px;font-size:15px}.hero-bottom button{border:1px solid var(--line);background:#0003;padding:10px 13px;font-size:12px}.hero-bottom button span{font-size:9px;letter-spacing:.5px;margin-left:6px}.genre-strip{display:flex;align-items:center;justify-content:space-evenly;gap:20px;padding:30px 5%;background:#ed454a;color:#182019;font-size:11px;letter-spacing:3px;font-weight:600}.genre-strip i{font-style:normal}.section{padding:110px 7%;scroll-margin-top:10px}.about{display:grid;grid-template-columns:1.12fr 1fr;gap:9%;align-items:center}.about-image{position:relative}.about-image img{width:100%;aspect-ratio:1.08;object-fit:cover}.image-note{display:block;font-size:8px;letter-spacing:2.5px;color:var(--muted);margin-top:18px}.about-copy h2{font-size:clamp(45px,4.8vw,76px);margin-bottom:28px}.about-copy p:not(.eyebrow){max-width:450px}.about-copy .text-link{margin-top:15px}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:44px;gap:30px}.section-heading h2{font-size:clamp(45px,5.5vw,78px)}.section-heading .eyebrow{margin-bottom:17px}.section-heading>p{margin:0 0 5px}.watch{background:#ece7d9;color:#19211b}.watch p{color:#647064}.watch .eyebrow{color:#a42d32}.feature-video{aspect-ratio:16/9;background:#101512}.feature-video iframe{width:100%;height:100%;border:0;display:block}.video-caption{display:flex;justify-content:space-between;padding:18px 0 25px;font-size:9px;letter-spacing:1.6px;border-bottom:1px solid #19211b30}.singles{display:grid;grid-template-columns:1fr 2fr;padding-top:40px}.track-list{display:grid;grid-template-columns:1fr 1fr;column-gap:40px}.track-list button{border:0;border-bottom:1px solid #19211b30;background:none;padding:20px 0;text-align:left;font-size:13px;display:flex;gap:20px;align-items:center}.track-list button span{font-size:9px;color:#a42d32}.track-list button i{margin-left:auto;font-style:normal}.track-list button:hover{color:#a42d32}.member-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}.member-grid img{width:100%;aspect-ratio:.8;object-fit:cover;filter:saturate(.7)}.member-grid .eyebrow{font-size:8px;letter-spacing:1.7px;margin:24px 0 10px}.member-grid h3{font-family:Georgia,serif;font-size:21px;font-weight:400;margin:0 0 21px}.member-grid details{border-top:1px solid var(--line);padding-top:17px}.member-grid summary{list-style:none;cursor:pointer;font-size:10px;color:var(--muted);display:flex;justify-content:space-between}.member-grid summary::-webkit-details-marker{display:none}.member-grid details p{font-size:12px}.shows{display:grid;grid-template-columns:1fr 1fr;align-items:center;background:#202b23;overflow:hidden}.shows h2{font-size:clamp(50px,5.5vw,85px)}.shows .button{margin-top:20px}.record-art{display:flex;align-items:center;justify-content:center}.record{width:min(35vw,480px);aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(circle,#121612 0px,#121612 2px,#232b22 3px,#111611 4px);box-shadow:0 20px 50px #0005;display:flex;justify-content:center;align-items:center;transform:rotate(-15deg);border:1px solid #4b5443}.record-label{border-radius:50%;width:40%;height:40%;background:var(--gold);color:#283024;display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:clamp(18px,2.7vw,40px);line-height:.95;letter-spacing:-1px;font-weight:bold}.record-label em{color:inherit}.record-label small{font-size:5px;letter-spacing:1px;margin-top:15px}.gallery{padding-bottom:120px}.gallery-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px}.photo{position:relative;border:0;background:#202a22;padding:0;overflow:hidden;text-align:left;min-height:300px}.photo.wide{grid-column:span 2}.photo img{width:100%;height:360px;object-fit:cover;transition:transform .5s}.photo:hover img{transform:scale(1.035)}.photo span{position:absolute;bottom:0;left:0;right:0;padding:60px 24px 22px;background:linear-gradient(transparent,#000b);font-size:11px;letter-spacing:.5px}.booking{text-align:center;background:linear-gradient(#111a16b0,#111a16ec),url('assets/hero.avif') center/cover}.booking h2{font-size:clamp(64px,8vw,112px)}.booking p:not(.eyebrow){margin:28px 0}.booking-actions{display:flex;justify-content:center;align-items:center;gap:35px;margin:34px 0 24px}.phone{font-size:19px;letter-spacing:1px}.email{font-size:12px;color:var(--muted)}footer{padding:55px 7% 25px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px}footer>span,footer a:not(.wordmark){font-size:10px;color:var(--muted)}footer>div{display:flex;gap:26px}footer>p{width:100%;font-size:9px;border-top:1px solid var(--line);padding-top:20px;margin-top:14px}.skip{position:fixed;left:10px;top:-100px;z-index:99;background:var(--gold);color:#111;padding:15px}.skip:focus{top:10px}dialog{background:#121713;color:var(--cream);border:1px solid var(--line);padding:55px 20px 15px;width:min(1000px,94vw);max-height:94svh}dialog::backdrop{background:#000d;backdrop-filter:blur(8px)}.dialog-close{position:absolute;right:15px;top:12px;background:none;border:0;font-size:20px;padding:5px}#dialog-content iframe{width:100%;aspect-ratio:16/9;border:0}#dialog-content img{width:100%;max-height:73svh;object-fit:contain}#dialog-caption{margin:15px 0 0;font-size:12px}.menu-toggle{background:none;border:1px solid var(--line);padding:10px;font-size:11px}
@media(min-width:1500px){.section{padding-left:max(7%,calc((100vw - 1400px)/2));padding-right:max(7%,calc((100vw - 1400px)/2))}}@media(max-width:1000px){nav{gap:18px}.hero-bottom>span{display:none}.hero{min-height:730px}.about{gap:6%}.member-grid{grid-template-columns:1fr 1fr;row-gap:45px}.member-grid img{aspect-ratio:1}.section{padding:80px 6%}.member-grid h3{font-size:24px}.gallery-grid .photo img{height:300px}.singles{grid-template-columns:1fr}.hero-copy{padding-left:6%}.section-heading h2{letter-spacing:-2px}}@media(max-width:680px){header{padding:23px 6%}.wordmark{font-size:25px}.wordmark small{font-size:6px;letter-spacing:1.8px}.menu-toggle{display:block}nav{display:none;position:absolute;top:87px;left:0;right:0;background:#111a15f7;padding:25px 6%;flex-direction:column;align-items:stretch;gap:0;border-bottom:1px solid var(--line)}nav.open{display:flex}nav a{padding:16px 0}.nav-book{padding:16px!important;text-align:center;margin-top:12px}.hero{min-height:720px;height:100svh;max-height:950px}.hero-copy{padding:140px 6% 120px}.hero-film{object-position:60% center}.hero-shade{background:linear-gradient(90deg,#09110de8,#09110d65),linear-gradient(0deg,#111613,transparent 65%)}h1{font-size:clamp(64px,15vw,92px);letter-spacing:-2.7px}.hero .eyebrow{font-size:8px;letter-spacing:2px}.hero-description{font-size:13px}.hero-actions{align-items:flex-start;flex-direction:column;gap:23px}.button{padding:17px 20px;font-size:11px;gap:22px}.hero-bottom{bottom:22px;left:6%;right:6%}.hero-bottom a{font-size:7px;letter-spacing:1px}.hero-bottom button{padding:9px}.genre-strip{padding:22px 4%;font-size:8px;letter-spacing:1px;gap:7px}.genre-strip i{font-size:7px}.genre-strip span:last-child{display:none}.genre-strip i:nth-last-child(2){display:none}.section{padding:65px 6%}.about{grid-template-columns:1fr;gap:45px}.about-image img{aspect-ratio:1.2;object-fit:contain;background:#1b221d}.about-copy h2{font-size:51px;letter-spacing:-2px}.section-heading{display:block;margin-bottom:30px}.section-heading>p{margin-top:22px;font-size:13px}.section-heading h2{font-size:48px}.feature-video{margin:0 -3%}.video-caption{font-size:7px;letter-spacing:1px;gap:15px}.singles{padding-top:27px}.track-list{grid-template-columns:1fr;gap:0}.track-list button{padding:18px 0}.member-grid{gap:30px 16px}.member-grid img{aspect-ratio:.8}.member-grid h3{font-size:19px;line-height:1.2;min-height:46px;margin-bottom:14px}.member-grid .eyebrow{font-size:7px;letter-spacing:1px;margin-top:18px}.member-grid details p{font-size:11px}.member-grid summary{font-size:9px}.shows{grid-template-columns:1fr}.shows h2{font-size:55px;letter-spacing:-2px}.record-art{margin-top:48px}.record{width:65vw}.record-label{font-size:28px}.record-label small{font-size:4px}.gallery-grid{grid-template-columns:1fr 1fr;gap:13px}.photo{min-height:0}.photo img,.gallery-grid .photo img{height:220px}.photo.wide img{height:auto;aspect-ratio:1.65}.photo span{font-size:9px;padding:45px 13px 15px}.booking h2{font-size:58px;letter-spacing:-2px}.booking-actions{flex-direction:column;gap:27px}.booking p:not(.eyebrow){font-size:13px}.booking{background-position:60% center}footer{padding:40px 6% 20px}footer>span{display:none}footer>div{gap:20px}.desktop{display:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}

.videos-page header{position:relative;background:var(--bg)}.videos-page .watch{min-height:70svh}.videos-page nav a[aria-current="page"]{color:var(--gold)}

.live-film{margin-top:36px}.live-film video{display:block;width:100%;max-height:75svh;background:#101512}.live-film .eyebrow{margin-bottom:16px}

/* Smaller opening typography, aligned to the right of the cinematic film. */
.hero-shade{background:linear-gradient(270deg,rgba(7,13,11,.87),rgba(7,13,11,.55) 45%,rgba(7,13,11,.12)),linear-gradient(0deg,#111613,transparent 30%,#0001)}
.hero-copy{width:53%;margin-left:auto;padding:150px 7% 115px 2%;text-align:right}
.hero h1{font-size:clamp(54px,5.8vw,88px);letter-spacing:-2px}
.hero-actions{justify-content:flex-end;flex-wrap:wrap;gap:22px}
.hero .gold{color:#fff}
@media(max-width:1000px){.hero-copy{width:59%;padding-right:6%;padding-left:2%}.hero h1{font-size:clamp(50px,6.4vw,68px)}}
@media(max-width:680px){.hero-copy{width:91%;padding:140px 6% 120px 4%}.hero h1{font-size:clamp(44px,10.8vw,68px);letter-spacing:-1.6px}.hero .eyebrow{font-size:7px;letter-spacing:1.5px}.hero-description{font-size:12px}.hero-actions{align-items:flex-end;gap:20px}.hero-shade{background:linear-gradient(270deg,#09110de8,#09110d35),linear-gradient(0deg,#111613,transparent 65%)}}

/* Keep Cherry’s face visible in the wide gallery crop on every screen. */
.photo[data-image="assets/singer.avif"] img{object-position:center 25%}

.hero-still{object-position:right top;pointer-events:none}.hero-still[hidden]{display:none}

/* Hold the opening frame after one complete video play. */
.hero-still{opacity:0;transition:none}.hero-still.is-visible{opacity:1}

/* A steady turntable spin, shared by desktop and phone layouts. */
@keyframes record-spin{from{transform:rotate(-15deg)}to{transform:rotate(345deg)}}
.record{animation:record-spin 8s linear infinite;transform-origin:center}
@media(prefers-reduced-motion:reduce){.record{animation:none}}

/* Frame Dave from the top so his face stays in the gallery crop. */
.photo[data-image="assets/guitar.avif"] img{object-position:center top}

/* Balance Pete’s full head with more of his body in the gallery crop. */
.photo[data-image="assets/bass.avif"] img{object-position:center 25%}

/* Red band artwork replaces the opening title and header wordmark. */
.header-logo{width:150px;height:auto}
.hero-logo{display:block;width:min(100%,480px);height:auto;margin:14px 0 0 auto}
@media(max-width:1000px){.hero-logo{width:100%;max-width:430px}}
@media(max-width:680px){.header-logo{width:125px}.hero-logo{width:100%;max-width:360px;margin-top:14px}}

/* Give the band introduction a clear, larger heading. */
.about-copy .meet-soultime{font-size:clamp(24px,2.8vw,38px);line-height:1.25;letter-spacing:1.5px;margin-bottom:26px}

/* Match the larger band-introduction heading across screen sizes. */
.members .section-heading .band-heading{font-size:clamp(28px,3.3vw,44px);line-height:1.25;letter-spacing:1.5px;margin-bottom:26px}

.members .section-heading .band-heading em{font-family:inherit;font-weight:inherit;font-style:italic}

.members .section-heading h2.band-heading{font-family:Georgia,serif;font-weight:400;font-style:italic;text-transform:none}

/* Larger, readable names and instrument headings beneath band portraits. */
.member-grid h3{font-size:28px;line-height:1.2;overflow-wrap:break-word}
.member-grid .eyebrow{font-size:12px;letter-spacing:1.2px;line-height:1.5}
@media(max-width:680px){.member-grid h3{font-size:23px;min-height:56px}.member-grid .eyebrow{font-size:10px;letter-spacing:.7px}}

/* Taller biography strips with larger labels and clear tap targets. */
.member-grid details{padding-top:0}
.member-grid summary{font-size:16px;line-height:1.4;min-height:62px;padding:18px 0;align-items:center;gap:12px}
.member-grid summary span{font-size:24px;line-height:1;flex-shrink:0}
@media(max-width:680px){.member-grid summary{font-size:14px;min-height:60px;padding:17px 0;gap:8px}.member-grid summary span{font-size:22px}}

/* Slightly larger biography strips; keep the first plus clearly visible. */
.member-grid summary{font-size:18px;min-height:70px;padding:22px 0}
.member-grid summary .strip-label{font-size:inherit;line-height:inherit;flex:1;min-width:0;white-space:normal}
.member-grid summary span:not(.strip-label){font-size:27px;min-width:20px;text-align:center}
@media(max-width:680px){.member-grid summary{font-size:16px;min-height:68px;padding:21px 0}.member-grid summary span:not(.strip-label){font-size:25px}}

.member-grid summary.voice-strip{display:block;color:var(--cream);overflow:visible}

/* Band artwork in the footer. */
footer .footer-logo{width:180px;height:auto}
@media(max-width:680px){footer .footer-logo{width:155px}}

/* Readable caption beneath the Meet SoulTime band photo. */
.about .image-note{font-size:18px;line-height:1.5;letter-spacing:1.8px;margin-top:20px}
@media(max-width:680px){.about .image-note{font-size:16px;letter-spacing:1.2px}}

/* Larger track-selection heading on the Videos page. */
.videos-page .singles>.eyebrow{font-size:clamp(22px,2.3vw,30px);line-height:1.35;letter-spacing:1.5px;padding-right:24px}

/* Match the red italic accent headings throughout the site. */
.videos-page .section-heading .get-into-it{font-family:Georgia,serif;font-style:italic;font-weight:400;color:#b21f26}

/* Use one deep saturated red for the requested Videos page headings. */
.videos-page .singles>.eyebrow{color:#b21f26}

/* Larger navigation links with room to fit tablet widths. */
header nav a{font-size:17px;font-weight:500}
@media(min-width:681px) and (max-width:1000px){header nav{gap:16px}header nav a{font-size:16px}header .nav-book{padding:13px 15px}header .nav-book span{margin-left:10px}}
@media(max-width:680px){header nav a{font-size:18px;min-height:50px}header .menu-toggle{font-size:15px}}

/* Larger scroll invitation on the opening screen. */
.hero .hero-bottom>a{font-size:14px;line-height:1.4;font-weight:500;letter-spacing:1.2px}
.hero .hero-bottom>a span{font-size:22px;margin-left:14px}
@media(max-width:680px){.hero .hero-bottom>a{font-size:11px;letter-spacing:.8px}.hero .hero-bottom>a span{font-size:20px;margin-left:8px}.hero .hero-bottom{gap:12px}}

/* Match the opening-screen musician line to the scroll invitation. */
.hero .hero-bottom>span{font-size:14px;line-height:1.4;font-weight:500;letter-spacing:1.2px;text-align:right}

/* Give the opening description the same clearer, stronger treatment. */
.hero .hero-description{font-size:18px;line-height:1.7;font-weight:500;letter-spacing:1.2px;color:#d3d6cc}
@media(max-width:680px){.hero .hero-description{font-size:16px;letter-spacing:.8px}}

/* Match Meet SoulTime copy to the larger homepage description. */
.about .about-copy p:not(.eyebrow){font-size:18px;line-height:1.7;font-weight:500;letter-spacing:1.2px;color:#d3d6cc}
@media(max-width:680px){.about .about-copy p:not(.eyebrow){font-size:16px;letter-spacing:.8px}}

/* Larger gallery introduction. */
.gallery .section-heading>.gallery-intro{font-size:20px;line-height:1.5}
@media(max-width:680px){.gallery .section-heading>.gallery-intro{font-size:18px}}

/* Readable closing tagline on every screen. */
footer>.footer-tagline{display:block;font-size:17px;line-height:1.5}
@media(max-width:680px){footer>.footer-tagline{font-size:16px}}

/* Larger introduction beside The Band heading. */
.members .section-heading>.members-intro{font-size:20px;line-height:1.6}
@media(max-width:680px){.members .section-heading>.members-intro{font-size:18px}}

/* Larger biographies across all screen sizes. */
.members .member-grid details p{font-size:18px;line-height:1.8}

/* Preserve the full portrait framing from Soul Gallery. */
.gallery-grid .soul-gallery-photo img{width:100%;height:auto;aspect-ratio:2/3;object-fit:contain}

/* A separate titled player for every performance video. */
.video-library{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 28px}
.video-card{min-width:0}.video-card h3{font-size:22px;line-height:1.35;font-weight:500;margin:0 0 16px;color:#19211b}
.video-player{aspect-ratio:16/9;background:#101512}.video-player iframe,.video-player video{display:block;width:100%;height:100%;border:0;object-fit:contain}
.videos-page .video-library-heading{font-family:DM Sans,Arial,sans-serif;font-size:clamp(22px,2.3vw,30px);line-height:1.35;letter-spacing:1.5px;color:#b21f26;margin:56px 0 28px}
.documentary-library{grid-template-columns:minmax(0,1fr);max-width:900px}
@media(max-width:680px){.video-library{grid-template-columns:minmax(0,1fr);gap:32px}.video-card h3{font-size:20px}}

/* Larger text throughout the video collection. */
.videos-page .watch>.section-heading>p{font-size:20px;line-height:1.7}
.videos-page .watch>.section-heading .eyebrow{font-size:16px;line-height:1.5}
.videos-page .video-card h3{font-size:28px;line-height:1.35}
.videos-page .video-library-heading{font-size:clamp(26px,2.8vw,36px)}
@media(max-width:680px){.videos-page .watch>.section-heading>p{font-size:18px}.videos-page .watch>.section-heading .eyebrow{font-size:14px}.videos-page .video-card h3{font-size:24px}}

/* Match the spinning-record section background on the Videos page. */
.videos-page .watch{background:#202b23;color:var(--cream)}
.videos-page .watch p{color:var(--muted)}
.videos-page .video-card h3{color:var(--cream)}

/* Large, direct gallery heading. */
.gallery .section-heading .gallery-title{font-size:clamp(64px,7vw,100px);line-height:1.05}
@media(max-width:680px){.gallery .section-heading .gallery-title{font-size:60px}}

/* Match Gallery to the other red italic homepage headings. */
.gallery .section-heading .gallery-title{font-family:Georgia,serif;font-style:italic;font-weight:400;color:var(--gold)}

/* Gallery starts at the top of the viewport, with no preceding section visible. */
#gallery{scroll-margin-top:-100px}
@media(max-width:680px){#gallery{scroll-margin-top:-24px}}

/* Show uploaded gallery images in their complete original framing. */
.gallery-grid .uploaded-gallery-photo{align-self:start;min-height:0}
.gallery-grid .uploaded-gallery-photo img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain}
.gallery-grid .uploaded-gallery-photo span{position:static;display:block;padding:16px 18px;background:#19201b;line-height:1.5}

/* Flow mixed photo sizes into packed columns with no empty grid cells. */
.gallery .gallery-grid{display:block;column-count:3;column-gap:16px}
.gallery .gallery-grid .photo{display:inline-block;vertical-align:top;break-inside:avoid;page-break-inside:avoid;width:100%;min-height:0;margin:0 0 16px;padding:0;grid-column:auto;overflow:hidden}
.gallery .gallery-grid .photo img{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain}
.gallery .gallery-grid .photo span{position:static;display:block;padding:14px 16px;background:#19201b;line-height:1.5}
@media(max-width:1000px){.gallery .gallery-grid{column-count:2}}
@media(max-width:680px){.gallery .gallery-grid{column-count:1;column-gap:0}}

/* Dedicated booking page opens directly on contact information. */
.booking-page header{position:relative;background:var(--bg)}
.booking-page .booking{min-height:75svh}
.booking-page nav a[aria-current="page"]{color:var(--gold)}

/* Larger invitation above the show calendar. */
.shows .shows-intro{font-size:24px;line-height:1.4;letter-spacing:1.5px}
@media(max-width:680px){.shows .shows-intro{font-size:21px;letter-spacing:1px}}

/* Clear end to the show-dates section, with a Home control. */
.shows{border-bottom:1px solid var(--line)}
.shows-page-end{grid-column:1/-1;display:flex;justify-content:center;border-top:1px solid var(--line);padding-top:28px;margin-top:48px}
.shows-home{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-width:68px;min-height:68px;color:var(--gold);font-size:15px}
.shows-home:hover{color:var(--cream)}
@media(max-width:680px){.shows-page-end{margin-top:36px;padding-top:24px}}

/* SoulTime logo serves as the show-section Home button. */
.shows-home .shows-home-logo{width:180px;height:auto}
@media(max-width:680px){.shows-home .shows-home-logo{width:160px}}

/* Biographies always accompany their portraits, without disclosure controls. */
.member-grid .member-bio{border-top:1px solid var(--line)}
.member-grid .bio-label{font:inherit;font-size:18px;font-weight:400;color:var(--muted);line-height:1.4;margin:0;padding:22px 0}
.member-grid .member-bio p{font-size:18px;line-height:1.8;margin-top:0}
@media(max-width:680px){.member-grid .bio-label{font-size:16px;padding:21px 0}.member-grid .member-bio p{line-height:1.75}}

/* Balance the remaining band portraits across the desktop row. */
@media(min-width:1001px){.members .member-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Let the edited film's animated logo take over from the opening title. */
.hero .hero-headline,.hero .hero-shade{transition:opacity .8s ease}
.hero .hero-headline.is-faded,.hero .hero-shade.is-faded{opacity:0;pointer-events:none}
.hero .hero-still{object-fit:contain;object-position:center;background:#000}
@media(prefers-reduced-motion:reduce){.hero .hero-headline,.hero .hero-shade{transition:none}}

/* More breathing room between the homepage logo and supporting copy. */
@media(min-width:681px){.hero .hero-description{margin-top:128px}}

/* The animated and frozen logos use exactly the same framing. */
.hero video.hero-film.is-logo-phase{object-fit:contain;object-position:center;background:#000}

/* Plain header booking link. */
body header nav a.nav-book{border-color:transparent}

/* Lower the opening lettering below the bass-drum wordmark. */
.hero .hero-headline{transform:translateY(50px)}
@media(max-width:680px){.hero .hero-headline{transform:translateY(-8px)}}

/* Lower the supporting homepage copy. */
.hero .hero-description{transform:translateY(110px)}


/* Bring the band portraits closer to the introduction. */
.about.section{padding-bottom:50px}
.members.section{padding-top:50px}
@media(max-width:680px){.about.section{padding-bottom:28px}.members.section{padding-top:28px}}

/* Use the group portrait behind event inquiries, without the promotional footer. */
.booking{background-image:linear-gradient(#111a1699,#111a16e6),url('assets/soultime-gallery-1402.jpeg');background-position:center,center 64px;background-size:cover,min(80%, 480px) auto;background-repeat:no-repeat;background-color:#211d1e}
@media(max-width:680px){.booking{background-position:center,center 64px}}

/* Show the full group portrait with room above every head. */
.about .about-image img{height:auto;aspect-ratio:auto;object-fit:contain;object-position:center top}

/* Place the booking introduction above the graphic. */
.booking{position:relative}
.booking>.eyebrow{position:absolute;top:20px;left:16px;right:16px;margin:0;font-size:clamp(16px,2vw,22px);letter-spacing:1.5px;line-height:1.5}

/* Bright booking details over the background artwork. */
.booking p:not(.eyebrow){color:#fff}

/* Reserve the full artwork height before the booking links. */
/* Center the headline inside the artwork, with details and links beneath it. */
.booking.section{--booking-art-size:min(80vw,480px);padding-top:64px}
.booking-copy{min-height:0;padding-top:0}
.booking .booking-copy h2{height:var(--booking-art-size);display:flex;align-items:center;justify-content:center;font-size:clamp(38px,8vw,72px);line-height:1.08;letter-spacing:-1.5px}
.booking .booking-copy>p{margin:18px 0 0}
.booking .booking-actions{margin:18px 0 4px}

/* Softer red for the broad color bar and filled links. */
.genre-strip,.button.gold{background:#ec3639;color:#fff}
.button.gold{border-color:#ec3639}
.button.gold:hover{background:#d62e31}

/* Make the Facebook footer link easier to read and tap. */
footer a[href*="facebook.com"]{font-size:20px;font-weight:500;line-height:1.4;min-height:44px;display:inline-flex;align-items:center}

/* Dance-party atmosphere behind the Meet SoulTime introduction. */
.home-page #about{background-image:linear-gradient(90deg,rgba(4,10,22,.26),rgba(4,10,22,.38)),url('assets/meet-soultime-party-bright.webp');background-position:center;background-size:cover;background-repeat:no-repeat;background-attachment:scroll}
.home-page #about .about-copy p:not(.eyebrow),.home-page #about .image-note{color:#f3efdf;text-shadow:0 1px 5px #000}
.home-page #about .about-copy h2{text-shadow:0 2px 12px #0009}
@media(max-width:680px){.home-page #about{background-image:linear-gradient(rgba(4,10,22,.24),rgba(4,10,22,.36)),url('assets/meet-soultime-party-bright.webp');background-position:center}}

/* Slightly larger white lettering on the show-calendar section. */
#shows .shows-white-heading{font-size:1.1em}
#shows>div>p:not(.eyebrow){font-size:18px;line-height:1.7}

/* Shade the copy locally so the party background stays bright. */
.home-page #about .about-copy{background:rgba(4,10,22,.80);padding:26px;border-radius:8px}
.home-page #about .image-note{display:table;background:rgba(4,10,22,.80);padding:8px 12px}
@media(max-width:680px){.home-page #about .about-copy{padding:22px 18px}}

/* Vintage stage atmosphere behind Cherry and Vinny's biographies. */
.home-page #members{background-color:#060d1b;background-image:linear-gradient(180deg,rgba(5,11,24,.20),rgba(5,11,24,.42) 65%,#060d1b),url('assets/band-stage-background.webp');background-position:center,center top;background-size:cover,100% var(--band-stage-height,auto);background-repeat:no-repeat;background-attachment:scroll}
.home-page #members .members-intro,.home-page #members .bio-label,.home-page #members .member-bio p{color:#e6e7e5;text-shadow:0 1px 5px #000}
.home-page #members h3{text-shadow:0 2px 8px #000}

/* Feather portrait edges into the stage without blurring faces. */
.home-page #members .member-grid>article>img{
 border-radius:18px;
 -webkit-mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent),linear-gradient(to bottom,transparent,#000 3%,#000 94%,transparent);
 -webkit-mask-composite:source-in;
 mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent),linear-gradient(to bottom,transparent,#000 3%,#000 94%,transparent);
 mask-composite:intersect;
}

/* A featured live show, followed by mixed-size photo collections. */
.home-page #gallery{background:radial-gradient(ellipse at top left,#391b244d,transparent 55%),#090e13}
#gallery .gallery-intro{max-width:340px;color:#d0d1d0}
.gallery-feature{margin:0 0 54px}
.gallery-feature .photo{display:block;width:100%;min-height:0;background:#111820;border:1px solid #ffffff1c}
.gallery-feature .photo img{width:100%;height:auto;aspect-ratio:auto;object-fit:contain}
.gallery-feature .photo span{position:static;display:block;padding:19px 22px;background:#151c24;font-size:17px;line-height:1.5}
.gallery-group{margin-top:46px}
.gallery-group>h3{margin:0 0 24px;font:italic 32px Georgia,serif;color:var(--cream)}
#gallery .gallery-grid{column-count:3;column-gap:22px}
#gallery .gallery-grid .photo{margin-bottom:22px;border:1px solid #ffffff1c;border-radius:4px;background:#151c24;box-shadow:0 10px 24px #0003}
#gallery .gallery-grid .photo span{background:#151c24;font-size:13px;padding:15px 16px;color:#eee}
#gallery .photo:hover{border-color:#ed454a99}
#gallery .photo:hover img{transform:scale(1.02)}
.photo-navigation{display:flex;align-items:center;justify-content:center;gap:28px;padding:8px 0 4px}
.photo-navigation[hidden]{display:none}
.photo-navigation button{display:inline-flex;justify-content:center;align-items:center;min-width:48px;min-height:48px;border:1px solid #ffffff66;background:#ffffff0d;border-radius:50%;font-size:24px;color:#fff}
.photo-navigation button:hover{background:#ed454a33;border-color:var(--gold)}
.photo-navigation span{font-size:13px;color:#ddd;min-width:60px;text-align:center}
#media-dialog #dialog-content img{max-height:65svh}
@media(max-width:1000px){#gallery .gallery-grid{column-count:2}}
@media(max-width:680px){#gallery .gallery-grid{column-count:2;column-gap:12px}#gallery .gallery-grid .photo{margin-bottom:12px}#gallery .gallery-grid .photo span{font-size:11px;padding:12px 10px}.gallery-group>h3{font-size:27px}.gallery-feature{margin-bottom:34px}.gallery-feature .photo span{font-size:15px;padding:15px}.gallery-group{margin-top:34px}}
@media(max-width:360px){#gallery .gallery-grid{column-count:1}}

/* Subdued red concert lights and haze frame the gallery photographs. */
.home-page #gallery{
 background-color:#090e13;
 background-image:linear-gradient(180deg,#090e132e 0%,#090e133d 48%,#090e133d 100%),url('assets/gallery-concert-haze.webp');
 background-position:center top,center top;
 background-size:100% 100%,100% 100%;
 background-repeat:no-repeat;
 background-attachment:scroll;
 position:relative;
 isolation:isolate;
}
.home-page #gallery::before{
 content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
 background:linear-gradient(90deg,#3c10192b,transparent 20%,transparent 80%,#3c10192b);
}
@media(max-width:680px){.home-page #gallery{background-size:100% 100%,100% 100%;background-position:center top,center top}}

/* A still concert stage frames the video collection with soft red light. */
.videos-page .watch{
 background-color:#080c10;
 background-image:linear-gradient(90deg,#080c1038 0%,#080c10b8 28%,#080c10b8 72%,#080c1038 100%),url('assets/gallery-concert-haze.webp');
 background-position:center top;
 background-size:100% 100%;
 background-repeat:no-repeat;
 background-attachment:scroll;
}
.videos-page .watch p{color:#d0d1d0;text-shadow:0 1px 6px #000}
.videos-page .watch .eyebrow,.videos-page .watch .get-into-it,.videos-page .video-library-heading{color:var(--gold)}
.videos-page .video-card h3{color:var(--cream);text-shadow:0 2px 8px #000}
.videos-page .video-player{background:#05080b;box-shadow:0 10px 30px #0006;border:1px solid #ffffff20}

/* Warm evening celebration around a quiet, readable booking-page center. */
body.booking-page{
 background-color:#100c0d;
 background-image:linear-gradient(90deg,#09090c45 0%,#09090cb3 32%,#09090cb3 68%,#09090c45 100%),linear-gradient(180deg,#08080b33,#08080b88),url('assets/booking-evening-dance-floor-v187.webp');
 background-position:center top;
 background-size:cover;
 background-repeat:no-repeat;
 background-attachment:scroll;
}
.booking-page .booking{background:none}
.booking-page footer{background:transparent}
.booking-page .booking p,.booking-page .booking .phone,.booking-page .booking .email{color:#fff;text-shadow:0 1px 6px #000}

@media(max-width:680px){
 body.booking-page{
  background-image:linear-gradient(90deg,#09090c33 0%,#09090c99 32%,#09090c99 68%,#09090c33 100%),linear-gradient(180deg,#08080b22,#08080b88),url('assets/booking-evening-dance-floor-phone-v187.webp');
 }
}