/* Clear, unboxed navigation on the SoulTime homepage. */
body.home-page > header{
 position:relative;inset:auto;height:auto;min-height:0;flex-wrap:wrap;
 gap:18px 28px;padding:22px 5%;background:#111613;
}
body.home-page > header .menu-toggle{display:none}
body.home-page > header nav,body.home-page > header nav.open{
 display:flex;position:static;inset:auto;flex-wrap:wrap;justify-content:center;
 gap:4px 16px;padding:0;max-height:none;overflow:visible;background:transparent;border:0;
}
body.home-page > header nav a,body.home-page > header nav a.nav-book{
 display:flex;align-items:center;justify-content:center;min-height:44px;
 padding:10px 6px!important;margin:0;border:0;background:transparent;
 font-size:14px;line-height:1.4;text-align:center;
}
body.home-page > header nav a:hover{color:var(--gold)}

/* Full widescreen film, with the opening title and logo over its right side. */
body.home-page .hero{display:block;height:auto;min-height:0;max-height:none;background:#111613}
body.home-page .hero .hero-film{
 position:absolute;inset:0 0 auto;width:100%;height:auto;aspect-ratio:16/9;
 object-fit:contain;object-position:center;background:#000;
}
body.home-page .hero .hero-shade{
 display:block;inset:0 0 auto;height:56.25vw;
 background:linear-gradient(270deg,#07100b9e,transparent 75%);pointer-events:none;
}
body.home-page .hero .hero-copy{
 position:static;inset:auto;width:100%;margin:0;
 padding:56.25vw 0 0;text-align:right;display:block;
}
body.home-page .hero .hero-headline{
 position:absolute;inset:0 0 auto auto;width:60%;height:56.25vw;
 display:flex;align-items:center;justify-content:flex-end;
 padding:24px 6% 28px 16px;transform:translate(-4vw,-2vw);text-align:right;
 opacity:1;pointer-events:none;
}
body.home-page .hero .hero-headline.is-faded{opacity:0}
body.home-page .hero .hero-headline h1{
 font-size:clamp(32px,5.5vw,80px);line-height:1.04;letter-spacing:-1px;
 text-shadow:0 2px 12px #0009;
}
body.home-page .hero .hero-logo{width:100%;height:auto;max-width:360px;margin:14px 0 0 auto}
body.home-page .hero .hero-description{
 position:relative;inset:auto;transform:none;margin:0;padding:26px 6%;
 font-size:clamp(16px,1.7vw,22px);line-height:1.65;text-align:center;
}
body.home-page .hero .hero-bottom{display:none}
body.home-page .hero .opening-play{top:18px;left:18px;max-width:calc(100% - 36px)}

/* An uninterrupted introduction with the complete group photo beside readable copy. */
body.home-page #about{
 grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(28px,5vw,76px);
 align-items:center;padding:64px 6% 48px;
 background-image:linear-gradient(90deg,rgba(4,10,22,.25),rgba(4,10,22,.38)),url('assets/meet-soultime-party-soft.webp');
 background-position:center;background-size:cover;
}
body.home-page #about .about-image,body.home-page #about .about-copy{min-width:0}
body.home-page #about .about-image img{
 display:block;width:100%;height:auto;max-height:none;aspect-ratio:auto;object-fit:contain;background:transparent;
}
body.home-page #about .about-copy{background:transparent;padding:0;border:0;border-radius:0;box-shadow:none}
body.home-page #about .image-note{background:transparent;padding:0;line-height:1.7}
body.home-page #about .about-copy h2{font-size:clamp(38px,4.5vw,68px);line-height:1.1;letter-spacing:-1.5px}
body.home-page #about .about-copy p:not(.eyebrow){max-width:none;font-size:17px;line-height:1.8}
body.home-page #about .meet-soultime{font-size:clamp(26px,2.8vw,38px);line-height:1.3}

/* Portrait tablets get a full photograph above the introduction, with no squeezed columns. */
@media(min-width:681px) and (max-width:1000px){
 body.home-page > header{justify-content:center}
 body.home-page > header nav{width:100%;gap:4px 24px}
 body.home-page #about{grid-template-columns:minmax(0,1fr);gap:34px}
 body.home-page #about .about-image{width:100%;max-width:680px;margin-inline:auto}
 body.home-page #about .about-copy{max-width:760px;width:100%;margin-inline:auto}
}
@media(max-width:680px){
 body.home-page > header{padding:16px 20px 12px;gap:12px}
 body.home-page > header nav,body.home-page > header nav.open{
 display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:4px 8px;
 }
 body.home-page > header nav a.nav-book{grid-column:span 2}
 body.home-page .hero .hero-copy{padding:56.25vw 0 0}
 body.home-page .hero .hero-headline{padding:10px 16px 10px 10px}
 body.home-page .hero .hero-headline h1{font-size:clamp(22px,6.4vw,42px);letter-spacing:-.6px}
 body.home-page .hero .hero-logo{width:100%;max-width:220px;margin:8px 0 0 auto}
 body.home-page .hero .hero-description{font-size:16px;padding:24px 18px}
 body.home-page #about{grid-template-columns:minmax(0,1fr);padding:44px 24px 28px;gap:28px}
 body.home-page #about .about-copy h2{font-size:clamp(36px,9vw,48px)}
 body.home-page #about .about-copy p:not(.eyebrow){font-size:16px;line-height:1.8}
}

/* Feather the Meet SoulTime portrait into the party background. */
body.home-page #about .about-image 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 96%,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 96%,transparent);
 mask-composite:intersect;
}

/* Fit the complete opening and its white supporting script into the first screen. */
body.home-page .hero{--opening-media-height:56.25vw;--opening-media-width:100vw}
body.home-page .hero .hero-film{height:var(--opening-media-height);aspect-ratio:auto}
body.home-page .hero .hero-shade{height:var(--opening-media-height)}
body.home-page .hero .hero-copy{padding-top:var(--opening-media-height)}
body.home-page .hero .hero-headline{
 height:var(--opening-media-height);width:calc(var(--opening-media-width)*.6);
 right:calc((100% - var(--opening-media-width)) / 2 + var(--opening-media-width)*.04);
 transform:translateY(calc(var(--opening-media-height)*-.035));
 padding:12px calc(var(--opening-media-width)*.06) 12px 10px;
}
body.home-page .hero .hero-headline h1{font-size:min(clamp(22px,5.5vw,80px),calc(var(--opening-media-height)*.14))}
body.home-page .hero .hero-logo{max-width:min(360px,calc(var(--opening-media-width)*.28));margin-top:10px}
@media(max-width:680px){body.home-page .hero .hero-headline h1{font-size:min(clamp(22px,6.4vw,42px),calc(var(--opening-media-height)*.14))}body.home-page .hero .hero-logo{margin-top:8px}}

/* Match the iPad opening title on phones, overriding the older bottom-aligned overlay. */
@media(max-width:680px){
 body.home-page .hero .hero-headline{
  display:flex;flex-direction:row;align-items:center;justify-content:flex-end;
  padding:8px calc(var(--opening-media-width)*.06) 8px 8px;
  text-align:right;
 }
 body.home-page .hero .hero-headline h1{
  display:block;margin:0;color:var(--cream);font-family:'Italiana',Georgia,serif;
  font-size:min(6.4vw,calc(var(--opening-media-height)*.14));
  font-weight:400;line-height:1.04;letter-spacing:-.6px;
 }
 body.home-page .hero .hero-headline .hero-logo{
  display:block;width:calc(var(--opening-media-width)*.28);max-width:100%;
  height:auto;margin:6px 0 0 auto;
 }
}

/* The title must stack above the video even when its copy wrapper is static. */
body.home-page .hero .hero-headline{z-index:3}

/* Thin white navigation outlines on phones and iPads in both orientations. */
@media(max-width:1366px){
 body.home-page > header nav a,
 body.home-page > header nav a.nav-book{
  border:1px solid #ffffff30;
  padding:10px 9px!important;
 }
}

/* Move the opening lettering and logo inward from the drum-head edge. */
body.home-page .hero .hero-headline{
 right:calc((100% - var(--opening-media-width)) / 2 + var(--opening-media-width)*.09);
}

/* Keep the title at the approved freeze position; only its opacity may animate. */
body.home-page .hero .hero-headline{
 transition:opacity .8s ease;animation:none;
}

/* Fill the ending frame and fit the logo on the curtain beside Cherry in the lower-right corner. */
body.home-page .hero .hero-still{width:100%;object-fit:cover;object-position:center 25%;background:#000}
body.home-page .hero:has(.hero-still.is-visible) .opening-script{display:none}
body.home-page .hero:has(.hero-still.is-visible) .hero-headline{
 inset:0 auto auto 0;width:100%;height:var(--opening-media-height);
 transform:none;padding:0 2% calc(var(--opening-media-height)*.01) 0;
 align-items:flex-end;justify-content:flex-end;text-align:right;
}
body.home-page .hero:has(.hero-still.is-visible) .hero-headline h1{
 width:17%;max-width:260px;margin:0;font-size:0;line-height:0;
}
body.home-page .hero:has(.hero-still.is-visible) .hero-logo{
 display:block;width:100%;max-width:100%;height:auto;margin:0;
}
body.home-page .hero:has(.hero-still.is-visible) .hero-shade{opacity:0}

/* Align the stage microphone with the left edge of Cherry’s portrait on phones. */
@media(max-width:680px){
 body.home-page #members{background-image:linear-gradient(180deg,rgba(5,11,24,.20),rgba(5,11,24,.42) 65%,#060d1b),url('assets/band-stage-mic-inset-v206.webp');background-position:center,-7px top;background-size:cover,calc(100% + 7px) var(--band-stage-height,auto)}
}

/* Keep desktop playback and its ending portrait uncropped at full page width. */
@media(min-width:1001px) and (hover:hover) and (pointer:fine){
 body.home-page .hero .hero-film{width:100%;max-width:none;object-fit:contain;object-position:center}
 body.home-page .hero .hero-still{object-fit:contain;object-position:center}
}

/* Show the unaltered portrait at its natural proportions on desktop. */
@media(min-width:1001px) and (hover:hover) and (pointer:fine){
 body.home-page .hero{background:#000}
 body.home-page .hero .hero-still{inset:0 auto auto 50%;width:auto;height:var(--opening-media-height);max-width:100%;aspect-ratio:auto;transform:translateX(-50%);object-fit:contain;object-position:center;background:transparent}
}

/* Fit PC playback inside the available window while preserving its 16:9 frame. */
@media(min-width:1001px) and (hover:hover) and (pointer:fine){
 body.home-page .hero video.hero-film{inset:0 auto auto 50%;width:var(--opening-media-width);height:var(--opening-media-height);transform:translateX(-50%);object-fit:contain}
}

/* One complete PC ending image keeps the curtain uniform throughout. */
@media(min-width:1001px) and (hover:hover) and (pointer:fine){
 body.home-page .hero .hero-still{
  inset:0 0 auto;width:100%;height:var(--opening-media-height);max-width:none;
  transform:none;object-fit:cover;object-position:center top;
  -webkit-mask-image:none;mask-image:none;
 }
}

/* A still, dim blue curtain frames PC playback and fades at the ending. */
@media(min-width:1001px) and (hover:hover) and (pointer:fine){
 body.home-page .hero::before{
  content:"";position:absolute;inset:0 0 auto;height:var(--opening-media-height);
  z-index:0;pointer-events:none;opacity:1;transition:opacity .8s ease;
  background-image:radial-gradient(ellipse at center,#071c3c18,#0008 85%),linear-gradient(#03060dbc,#03060dbc),url('assets/continuous-curtain-v224.png');
  background-position:center;background-size:cover;background-repeat:no-repeat;
 }
 body.home-page .hero:has(.hero-still.is-visible)::before{opacity:0}
}

/* Restore a little color to the PC ending portrait. */
@media(min-width:1001px) and (hover:hover) and (pointer:fine){
 body.home-page .hero .hero-still{filter:saturate(1.15)}
}

/* Give the PC corner logo the header logo's visual strength against the curtain. */
@media(min-width:1001px) and (hover:hover) and (pointer:fine){
 body.home-page .hero:has(.hero-still.is-visible) .hero-logo{
  opacity:1;filter:brightness(1.12) saturate(1.15) drop-shadow(0 1px 3px #0009);
 }
}

/* Keep the PC ending logo inward, below Vinny’s hand. */
@media(min-width:1001px) and (hover:hover) and (pointer:fine){
 body.home-page .hero:has(.hero-still.is-visible) .hero-headline{
  padding-right:5%;padding-bottom:calc(var(--opening-media-height)*.01);
 }
}

/* Reveal PC playback only once its curtain image has loaded and decoded. */
@media(min-width:1001px) and (hover:hover) and (pointer:fine){
 body.home-page .hero:not(.pc-opening-ready) video.hero-film{visibility:hidden}
}

/* Align The Band section to the top of the PC viewport on navigation. */
@media(min-width:1001px) and (hover:hover) and (pointer:fine){
 body.home-page #members{scroll-margin-top:-100px}
}

/* Align Shows with the top of the PC window when its link is selected. */
@media(min-width:1001px) and (hover:hover) and (pointer:fine){
 body.home-page #shows{scroll-margin-top:-100px}
}

/* Lift the spinning record slightly within the PC Shows view. */
@media(min-width:1001px) and (hover:hover) and (pointer:fine){
 body.home-page #shows .record-art{transform:translateY(-32px)}
}

/* A large 45-rpm center opening, with the yellow insert seated inside it. */
@media(min-width:1001px) and (hover:hover) and (pointer:fine){
 body.home-page #shows .record{position:relative;background:none;isolation:isolate}
 body.home-page #shows .record::before{
  content:"";position:absolute;inset:0;border-radius:50%;z-index:-1;
  background:repeating-radial-gradient(circle,#121612 0px,#121612 2px,#232b22 3px,#111611 4px);
  -webkit-mask-image:radial-gradient(circle closest-side,transparent 21.4%,#000 21.8%);
  mask-image:radial-gradient(circle closest-side,transparent 21.4%,#000 21.8%);
 }
 body.home-page #shows .record-label{
  background:radial-gradient(circle closest-side,transparent 53.5%,var(--gold) 54.5%);
 }
 body.home-page #shows .record-label::before{
  content:"";position:absolute;left:50%;top:50%;width:54%;height:54%;
  transform:translate(-50%,-50%);border-radius:50%;border:1px solid #0009;
  box-shadow:0 0 2px #0008;pointer-events:none;
 }
 body.home-page #shows .record-adapter{width:70%;height:70%}
}

/* Bring the gallery title and complete featured photo into the first PC view. */
@media(min-width:1001px) and (hover:hover) and (pointer:fine){
 body.home-page #gallery{padding-top:32px;scroll-margin-top:-100px}
 body.home-page #gallery > .section-heading{margin-bottom:22px}
 body.home-page #gallery .gallery-feature{
  width:min(100%,max(440px,calc((100svh - 230px)*2.24)));margin-inline:auto;
 }
}

/* Move only the white PC gallery introduction up and right. */
@media(min-width:1001px) and (hover:hover) and (pointer:fine){
 body.home-page #gallery .gallery-intro{transform:translate(24px,-18px)}
}

/* Nudge The Band heading right on PC. */
@media(min-width:1001px) and (hover:hover) and (pointer:fine){
 body.home-page #members .band-heading{transform:translateX(24px)}
}

/* Nudge the white band introduction left on PC. */
@media(min-width:1001px) and (hover:hover) and (pointer:fine){
 body.home-page #members .members-intro{transform:translateX(-24px)}
}

/* Align the PC band headings with Cherry and Vinny's portrait columns. */
@media(min-width:1001px) and (hover:hover) and (pointer:fine){
 body.home-page #members > .section-heading{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:center;
 }
 body.home-page #members .band-heading{
  transform:translateX(-20px);text-align:center;width:100%;margin:0;
 }
 body.home-page #members .members-intro{
  transform:none;text-align:center;width:100%;margin:0;
 }
}

/* Nudge only the opening words on PC; retain the logo's coordinates. */
@media(min-width:1001px) and (hover:hover) and (pointer:fine){
 body.home-page .hero .opening-script{position:relative;top:8px;left:12px}
}

/* Keep the portrait opaque over both outer arms; fade only the empty image edges. */
body.home-page .hero > picture{
 position:absolute;inset:0 0 auto;height:56.25vw;z-index:0;pointer-events:none;
 background:linear-gradient(#03060dd6,#03060dd6),url('assets/continuous-curtain-v224.png') center/cover no-repeat;
 opacity:0;transition:opacity .8s ease;
}
body.home-page .hero:has(.hero-still.is-visible) > picture{opacity:1}
body.home-page .hero > picture .hero-still{
 inset:0 auto auto 50%;width:auto;height:100%;max-width:100%;aspect-ratio:auto;
 transform:translateX(-50%);object-fit:contain;object-position:center;
 background:transparent!important;
 -webkit-mask-image:linear-gradient(to right,transparent,#000 .4%,#000 99.6%,transparent)!important;
 mask-image:linear-gradient(to right,transparent,#000 .4%,#000 99.6%,transparent)!important;
}
@media(min-width:1001px) and (hover:hover) and (pointer:fine){
 body.home-page .hero > picture{height:var(--opening-media-height)}
}

/* Subtle side drapes also frame the opening motion, fading into the picture. */
body.home-page .hero::after{
 content:"";position:absolute;inset:0 0 auto;height:56.25vw;z-index:2;
 pointer-events:none;opacity:1;transition:opacity .8s ease;
 background:linear-gradient(#03060dd6,#03060dd6),url('assets/continuous-curtain-v224.png') center/cover no-repeat;
 -webkit-mask-image:linear-gradient(to right,#000,transparent 15%,transparent 85%,#000);
 mask-image:linear-gradient(to right,#000,transparent 15%,transparent 85%,#000);
}
body.home-page .hero:has(.hero-still.is-visible)::after{opacity:0}
@media(min-width:1001px) and (hover:hover) and (pointer:fine){
 body.home-page .hero::after{height:var(--opening-media-height)}
}

/* Give Vinny's left hand clear space above the complete ending logo. */
body.home-page .hero:has(.hero-still.is-visible) .hero-logo{
 transform:translateY(clamp(24px,3vw,40px));
}
body.home-page .hero:has(.hero-still.is-visible) .hero-description{
 padding-top:calc(26px + clamp(24px,3vw,40px));
}

/* Anchor the ending logo directly to the lower-right edge on every screen. */
body.home-page .hero:has(.hero-still.is-visible) .hero-headline h1{position:static}
body.home-page .hero:has(.hero-still.is-visible) .hero-logo{
 position:absolute;top:calc(var(--opening-media-height) + 31px);right:calc(3% - 5px);bottom:auto;left:auto;
 width:17%;max-width:260px;height:auto;margin:0;transform:none;
}

/* Continue the subdued curtain behind and beneath the complete opening. */
body.home-page .hero{
 background:linear-gradient(#03060dd6,#03060dd6),url('assets/continuous-curtain-v224.png') center/cover no-repeat;
}
body.home-page .hero > picture{background:transparent}
body.home-page .hero::before{background:none}
body.home-page .hero .hero-description{padding-bottom:44px}

/* Match the music bar to the header buttons. */
body.home-page .genre-strip{background:#bd202b;color:#fff}

/* Keep the stage details inside the individual portraits only. */
body.home-page #members{background:#101012 url('assets/band-bios-charcoal-smoke.webp') center/100% 100% no-repeat}