/* ============ TOKENS — single committed dark world ============ */
:root, :root[data-theme="light"], :root[data-theme="dark"]{
  --ink:#08070A; --ink-1:#0C0A0F; --ink-2:#131017; --ink-3:#1B161E;
  --line:#272029; --line-hot:#4A1520;
  --ember:#D8102A; --flare:#FF5A2C; --glow:#FF2E3A;
  --bone:#F4EFEB; --ash:#9C9198; --dim:#6A616C;
  --seam:linear-gradient(90deg,transparent,var(--ember) 18%,var(--flare) 50%,var(--ember) 82%,transparent);
  --pad:clamp(20px,5vw,72px);
  --maxw:1360px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
/* Every img carries width/height so the page reserves its space before the file
   loads - without that, lazy images grow the document mid-scroll and anchor links
   land short of their target. height:auto keeps those attributes as a ratio hint
   rather than a fixed height, so CSS aspect-ratio still governs. Rules that set an
   explicit height (.live-shot img) are more specific and still win. */
img{height:auto}
html{scroll-behavior:smooth;scroll-padding-top:78px;-webkit-text-size-adjust:100%;overflow-x:clip}
body{
  /* overflow-x must stay `clip`, never `hidden`: `hidden` forces overflow-y to compute
     as `auto`, which makes body a scroll container. The sticky nav would then stick to
     body instead of the viewport and scroll away, and the store embed - which measures
     the nav to know where to pin its category bar - would be told nonsense. */
  margin:0; overflow-x:clip; background:var(--ink); color:var(--bone);
  font-family:"Barlow",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:var(--ember);color:#fff}
:focus-visible{outline:2px solid var(--flare);outline-offset:3px;border-radius:2px}

/* ============ TYPE ============ */
h1,h2,h3{font-family:"Big Shoulders Display","Barlow Condensed",Impact,sans-serif;font-weight:800;
  text-transform:uppercase;line-height:.9;letter-spacing:.01em;text-wrap:balance;margin:0}
.h-sec{font-size:clamp(2.9rem,7.5vw,6rem)}
.eyebrow{font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;
  letter-spacing:.34em;font-size:.72rem;color:var(--flare);display:flex;align-items:center;gap:.85rem;margin:0 0 .9rem}
.eyebrow::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,var(--line-hot),transparent);max-width:180px}
.lede{font-size:clamp(1.05rem,1.6vw,1.28rem);color:var(--ash);max-width:62ch}
.num{font-variant-numeric:tabular-nums}

/* ============ LAYOUT ============ */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
section{position:relative}
.band{padding-block:clamp(72px,11vw,150px)}
.seam{height:1px;background:var(--seam);opacity:.55}
.wm{width:100%;height:auto;color:var(--bone)}

/* ============ NAV ============ */
.nav{position:sticky;top:0;inset-inline:0;z-index:60;margin-bottom:-68px;display:flex;align-items:center;gap:clamp(12px,3vw,40px);
  padding:14px var(--pad);transition:background .35s ease,backdrop-filter .35s ease,border-color .35s ease;
  border-bottom:1px solid transparent}
.nav.stuck{background:rgba(8,7,10,.82);backdrop-filter:blur(14px) saturate(1.3);border-bottom-color:var(--line)}
/* The home page leaves the nav transparent so the hero shows through, and adds
   .stuck on scroll. The store page has no hero - the store sits directly under the
   nav - so it carries that treatment from the start, or the links sit unreadable on
   top of product photos. */
.store-page .nav{background:rgba(8,7,10,.82);backdrop-filter:blur(14px) saturate(1.3);border-bottom-color:var(--line)}
.nav .wm{width:118px;flex:none}
.nav-home{display:flex;align-items:center;line-height:0}
.nav-links{display:flex;gap:clamp(14px,2.2vw,30px);margin-left:auto;list-style:none;padding:0;margin-block:0}
.nav-links a{font-family:"Barlow Condensed",sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.18em;font-size:.79rem;text-decoration:none;color:var(--ash);position:relative;padding-block:4px;transition:color .2s}
.nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--ember);transition:right .28s ease}
.nav-links a:hover{color:var(--bone)} .nav-links a:hover::after{right:0}
.nav-cta{margin-left:clamp(10px,2vw,24px)}
.menu-btn{display:none;margin-left:auto;background:none;border:1px solid var(--line);color:var(--bone);
  width:40px;height:36px;border-radius:2px;cursor:pointer;align-items:center;justify-content:center}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{content:"";display:block;width:17px;height:1.5px;background:currentColor;position:relative}
.menu-btn span::before{position:absolute;top:-5.5px} .menu-btn span::after{position:absolute;top:5.5px}

/* ============ BUTTONS ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.2em;
  font-size:.82rem;padding:.86em 1.7em;text-decoration:none;border:1px solid var(--line);
  color:var(--bone);background:transparent;border-radius:2px;cursor:pointer;
  transition:border-color .25s,color .25s,background .25s,box-shadow .25s;white-space:nowrap}
.btn:hover{border-color:var(--glow);color:#fff;box-shadow:0 0 0 1px rgba(255,46,58,.25),0 8px 30px -12px rgba(216,16,42,.8)}
.btn-hot{background:linear-gradient(120deg,var(--ember),var(--flare));border-color:transparent;color:#fff}
.btn-hot:hover{box-shadow:0 10px 34px -10px rgba(255,90,44,.75);color:#fff}
.btn-sm{font-size:.72rem;padding:.6em 1.15em;letter-spacing:.16em}

/* ============ HERO ============ */
.hero{min-height:min(100svh,940px);display:grid;align-items:end;position:relative;overflow:hidden;isolation:isolate}
.hero-img{position:absolute;inset:-4% -2%;z-index:-2;background:#000}
.hero-img picture{display:contents}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:56% 26%;
  animation:drift 26s ease-in-out infinite alternate;opacity:.92}
@keyframes drift{from{transform:scale(1.05) translate3d(0,0,0)}to{transform:scale(1.13) translate3d(-1.6%,-1.4%,0)}}
.hero-scrim{position:absolute;inset:0;z-index:-1;
  background:
   radial-gradient(115% 78% at 62% 34%,rgba(8,7,10,0) 0%,rgba(8,7,10,.42) 52%,rgba(8,7,10,.9) 100%),
   linear-gradient(180deg,rgba(8,7,10,.7) 0%,rgba(8,7,10,0) 30%,rgba(8,7,10,.3) 64%,var(--ink) 100%)}
.hero-inner{padding-block:clamp(90px,14vh,150px) clamp(56px,10vh,96px);width:100%}
.hero .wm{max-width:min(900px,100%);filter:drop-shadow(0 18px 60px rgba(0,0,0,.8))}
.hero-eyebrow{letter-spacing:.42em;color:var(--bone);opacity:.85;margin-bottom:1.5rem}
.hero-eyebrow::after{background:linear-gradient(90deg,rgba(244,239,235,.35),transparent)}
.hero-tag{font-family:"Barlow Condensed",sans-serif;font-weight:500;text-transform:uppercase;
  letter-spacing:.14em;font-size:clamp(.95rem,1.75vw,1.3rem);color:var(--bone);opacity:.92;margin:1.35rem 0 0;max-width:34ch}
.hero-tag b{color:var(--flare);font-weight:700}
.hero-cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.1rem}
.credit{font-family:"Barlow Condensed",sans-serif;letter-spacing:.2em;text-transform:uppercase;
  font-size:.66rem;color:var(--dim);margin-top:2.4rem}
.scroll-cue{position:absolute;right:var(--pad);bottom:clamp(48px,9vh,86px);display:flex;align-items:center;gap:.7rem;
  font-family:"Barlow Condensed",sans-serif;font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;color:var(--dim)}
.scroll-cue i{display:block;width:1px;height:54px;background:linear-gradient(180deg,var(--line),var(--flare));position:relative;overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;inset:0;background:var(--bone);animation:cue 2.4s ease-in-out infinite}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ============ MARQUEE ============ */
.marquee{border-block:1px solid var(--line);background:var(--ink-1);overflow:hidden;padding-block:16px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;width:max-content;animation:slide 46s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee ul{display:flex;gap:2.6rem;list-style:none;margin:0;padding:0 1.3rem;align-items:center}
.marquee li{font-family:"Barlow Condensed",sans-serif;font-weight:600;text-transform:uppercase;
  letter-spacing:.24em;font-size:.8rem;color:var(--ash);white-space:nowrap;display:flex;align-items:center;gap:2.6rem}
.marquee li::after{content:"";width:5px;height:5px;background:var(--ember);transform:rotate(45deg);flex:none}
@keyframes slide{to{transform:translateX(-50%)}}

/* ============ MUSIC ============ */
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.78fr);align-items:end;
  column-gap:clamp(28px,5vw,72px);row-gap:1.2rem;margin-bottom:clamp(34px,5vw,62px)}
.sec-head > :last-child:not(:only-child){justify-self:end}
.sec-head .lede{padding-bottom:.5rem}
@media (max-width:900px){.sec-head{grid-template-columns:1fr}.sec-head > :last-child:not(:only-child){justify-self:start}}
.releases{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:clamp(16px,2.4vw,30px)}
.rel{position:relative;border:1px solid var(--line);background:var(--ink-1);border-radius:3px;overflow:hidden;
  transition:border-color .3s,transform .45s cubic-bezier(.2,.7,.3,1)}
.rel:hover{border-color:var(--line-hot);transform:translateY(-5px)}
.rel-art{position:relative;aspect-ratio:1;overflow:hidden;background:#000}
.rel-art img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.3,1),filter .5s;filter:saturate(1.02)}
.rel:hover .rel-art img{transform:scale(1.06);filter:saturate(1.18)}
.rel-art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(8,7,10,.88));opacity:.9}
.rel-body{padding:1.15rem 1.25rem 1.35rem;display:flex;flex-direction:column;gap:.7rem}
.rel-body h3{font-size:1.85rem}
.rel-meta{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.2em;
  font-size:.7rem;color:var(--dim)}
.rel-links{display:flex;gap:.5rem;flex-wrap:wrap;margin-top:.15rem}
.tag-new{position:absolute;top:12px;left:12px;z-index:2;background:linear-gradient(120deg,var(--ember),var(--flare));
  color:#fff;font-family:"Barlow Condensed",sans-serif;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  font-size:.62rem;padding:.4em .85em;border-radius:2px}

.two-col{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(34px,5vw,74px);margin-top:clamp(48px,7vw,96px)}
.disco{list-style:none;margin:0;padding:0}
.disco li{display:flex;align-items:baseline;gap:1rem;padding:.9rem 0;border-bottom:1px solid var(--line)}
.disco .yr{font-family:"Barlow Condensed",sans-serif;font-weight:700;color:var(--flare);font-size:.9rem;
  letter-spacing:.12em;flex:none;width:3.4em}
.disco .ttl{font-family:"Big Shoulders Display",sans-serif;font-weight:700;text-transform:uppercase;
  font-size:1.45rem;line-height:1;flex:1 1 auto}
.disco .lbl{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.16em;
  font-size:.7rem;color:var(--dim);text-align:right}
.chart{border:1px solid var(--line);border-radius:3px;background:var(--ink-1);padding:clamp(20px,3vw,34px)}
.chart h3{font-size:1.5rem;margin-bottom:1.1rem}
.chart table{width:100%;border-collapse:collapse}
.chart td{padding:.62rem 0;border-bottom:1px solid var(--line);vertical-align:middle}
.chart tr:last-child td{border-bottom:0}
.chart .song{font-weight:500}
.chart .pos{text-align:right;font-family:"Big Shoulders Display",sans-serif;font-weight:800;font-size:1.5rem;
  color:var(--bone);width:3.4em}
.chart .bar{width:38%;padding-left:1rem}
.chart .bar i{display:block;height:3px;background:linear-gradient(90deg,var(--ember),var(--flare));
  border-radius:2px;transform-origin:left;transform:scaleX(0);transition:transform 1.1s cubic-bezier(.2,.7,.3,1)}
.chart.in .bar i{transform:scaleX(1)}

/* ============ VIDEO ============ */
.vid-grid{display:grid;grid-template-columns:1.5fr 1fr;grid-auto-rows:minmax(0,auto);gap:clamp(14px,2vw,22px)}
.vid-lead{grid-row:span 3}
.vid-lead img{aspect-ratio:4/3.1}
.vid-lead .vid-cap h3{font-size:clamp(1.8rem,3.4vw,3rem)}
.vid{position:relative;display:block;overflow:hidden;border:1px solid var(--line);border-radius:3px;
  text-decoration:none;background:#000;transition:border-color .3s}
.vid:hover{border-color:var(--line-hot)}
.vid img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/9;opacity:.62;
  transition:transform .8s cubic-bezier(.2,.7,.3,1),opacity .4s}
.vid:hover img{transform:scale(1.05);opacity:.78}
.vid-cap{position:absolute;inset:auto 0 0;padding:clamp(16px,2.4vw,28px);
  background:linear-gradient(180deg,transparent,rgba(8,7,10,.92))}
.vid-cap h3{font-size:clamp(1.4rem,2.6vw,2.3rem)}
.vid-cap p{margin:.3rem 0 0;font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;
  letter-spacing:.2em;font-size:.7rem;color:var(--ash)}
.play{position:absolute;top:50%;left:50%;translate:-50% -50%;width:74px;height:74px;border-radius:50%;
  border:1px solid rgba(244,239,235,.5);display:grid;place-items:center;backdrop-filter:blur(3px);
  background:rgba(8,7,10,.3);transition:background .3s,border-color .3s,scale .3s}
.play::after{content:"";border-left:15px solid var(--bone);border-block:9px solid transparent;margin-left:4px}
.vid:hover .play{background:linear-gradient(120deg,var(--ember),var(--flare));border-color:transparent;scale:1.08}
.vid:hover .play::after{border-left-color:#fff}

/* ============ TOUR ============ */
#tour{background:var(--ink-1)}
.dates{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.date{display:grid;grid-template-columns:6.5rem 1fr auto;align-items:center;gap:clamp(12px,2.5vw,32px);
  padding:clamp(15px,2vw,22px) clamp(10px,1.6vw,20px);border-bottom:1px solid var(--line);
  position:relative;transition:background .3s,padding-left .3s}
.date::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:linear-gradient(180deg,var(--ember),var(--flare));transform:scaleY(0);transform-origin:top;transition:transform .3s ease}
.date:hover{background:var(--ink-2)}
.date:hover::before{transform:scaleY(1)}
.d-when{font-family:"Big Shoulders Display",sans-serif;font-weight:800;line-height:.86;color:var(--bone)}
.d-when b{display:block;font-size:.72rem;font-family:"Barlow Condensed",sans-serif;font-weight:700;
  letter-spacing:.24em;color:var(--flare);margin-bottom:.22rem}
.d-when span{font-size:2.05rem;white-space:nowrap}
.d-where{min-width:0}
.d-where h3{font-size:1.35rem;font-weight:700}
.d-where p{margin:.15rem 0 0;font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;
  letter-spacing:.2em;font-size:.74rem;color:var(--ash)}
.d-act{display:flex;gap:.5rem;align-items:center}
.btn.is-out{border-color:var(--line);color:var(--dim);cursor:default;background:transparent}
.tour-foot{display:grid;grid-template-columns:1fr minmax(0,520px);gap:clamp(28px,5vw,64px);
  align-items:stretch;margin-top:clamp(40px,6vw,72px)}
.h-sub{font-size:clamp(1.9rem,3.4vw,3rem);margin-bottom:.7rem}
.tour-foot .lede{margin:0 0 1.5rem}

/* ---- embedded CRM forms ---- */
.form-panel{border:1px solid var(--line);border-radius:4px;background:var(--ink-2);overflow:hidden;
  box-shadow:0 24px 60px -30px rgba(0,0,0,.9)}
.form-panel iframe{display:block;width:100%;border:0;background:transparent;color-scheme:dark}
.form-fallback{padding:clamp(24px,3.4vw,38px);display:flex;flex-direction:column;gap:.85rem;align-items:flex-start}
.form-fallback h3{font-size:1.9rem}
.form-fallback p{margin:0;color:var(--ash);max-width:44ch}
.form-fallback ul{margin:.2rem 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.4rem}
.form-fallback li{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.16em;
  font-size:.7rem;color:var(--dim);border:1px solid var(--line);border-radius:2px;padding:.3em .7em}
.form-fallback .btn{margin-top:.6rem}

/* ---- mailing list band ---- */
#list{position:relative;overflow:hidden;background:var(--ink-1)}
.list-bg{position:absolute;inset:0;z-index:0}
.list-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;opacity:.13;filter:grayscale(.4)}
.list-bg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(85% 70% at 30% 45%,rgba(12,10,15,.6),var(--ink-1) 90%)}
#list .wrap{position:relative;z-index:1}
.list-grid{display:grid;grid-template-columns:1fr minmax(0,520px);gap:clamp(28px,5vw,64px);align-items:center}

/* ============ STORY ============ */
.story{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(30px,5vw,80px);align-items:start}
.story-fig{position:relative;border:1px solid var(--line);border-radius:3px;overflow:hidden}
/* Live shots bracketing the show-request copy, in the column beside the form.
   The images flex to share whatever height the copy leaves, so the top of the
   first and the bottom of the second land exactly on the form's edges. */
.req-col{display:flex;flex-direction:column;gap:clamp(18px,2.5vw,30px);min-height:0}
.req-copy{flex:0 0 auto}
.live-shot{flex:1 1 0;min-height:130px;margin:0;border:1px solid var(--line);
  border-radius:3px;overflow:hidden;line-height:0}
.live-shot img{width:100%;height:100%;object-fit:cover;display:block}
.story-fig img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 22%}
.story-fig figcaption{position:absolute;inset:auto 0 0;padding:1rem 1.1rem;
  background:linear-gradient(180deg,transparent,rgba(8,7,10,.9));font-family:"Barlow Condensed",sans-serif;
  text-transform:uppercase;letter-spacing:.2em;font-size:.68rem;color:var(--ash)}
.story-body p{margin:0 0 1.15rem;max-width:64ch;color:#D9D2D6}
.story-body p:first-of-type{font-size:1.2rem;color:var(--bone)}
.story-body p:first-of-type::first-letter{font-family:"Big Shoulders Display",sans-serif;font-weight:900;
  font-size:3.6rem;line-height:.8;float:left;margin:.08em .18em 0 0;color:var(--flare)}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:3px;margin-top:2.2rem;overflow:hidden}
.stat{background:var(--ink-1);padding:1.1rem 1rem;text-align:center}
.stat b{display:block;font-family:"Big Shoulders Display",sans-serif;font-weight:800;font-size:2.5rem;line-height:1;
  background:linear-gradient(150deg,var(--bone),var(--flare));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.18em;
  font-size:.66rem;color:var(--dim);display:block;margin-top:.35rem}
.shared{margin-top:2.2rem}
.shared h3{font-size:1.15rem;letter-spacing:.2em;font-family:"Barlow Condensed",sans-serif;font-weight:700;color:var(--ash)}
.chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.8rem;padding:0;list-style:none}
.chips li{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.14em;font-size:.74rem;
  color:var(--ash);border:1px solid var(--line);border-radius:100px;padding:.35em .95em;transition:border-color .25s,color .25s}
.chips li:hover{border-color:var(--line-hot);color:var(--bone)}

/* ============ GALLERY ============ */
.gal{columns:3;column-gap:14px}
.gal button{display:block;width:100%;margin:0 0 14px;padding:0;border:1px solid var(--line);background:#000;
  border-radius:3px;overflow:hidden;cursor:pointer;position:relative;break-inside:avoid;transition:border-color .3s}
.gal button img{width:100%;transition:transform .8s cubic-bezier(.2,.7,.3,1),opacity .4s;opacity:.88}
.gal button:hover{border-color:var(--line-hot)}
.gal button:hover img{transform:scale(1.045);opacity:1}
.lightbox{position:fixed;inset:0;z-index:100;max-height:min(100vh,1000px);background:rgba(4,3,5,.96);backdrop-filter:blur(8px);
  display:none;place-items:center;padding:clamp(16px,4vw,60px)}
.lightbox[open]{display:grid}
.lightbox img{max-width:100%;max-height:min(86vh,900px);object-fit:contain;border:1px solid var(--line)}
.lb-close,.lb-nav{position:absolute;background:rgba(8,7,10,.6);border:1px solid var(--line);color:var(--bone);
  width:46px;height:46px;border-radius:50%;cursor:pointer;display:grid;place-items:center;font-size:1.3rem;
  line-height:1;transition:border-color .25s,background .25s}
.lb-close:hover,.lb-nav:hover{border-color:var(--flare);background:var(--ink-2)}
.lb-close{top:clamp(12px,3vw,28px);right:clamp(12px,3vw,28px)}
.lb-nav.prev{left:clamp(10px,2.5vw,28px);top:50%;translate:0 -50%}
.lb-nav.next{right:clamp(10px,2.5vw,28px);top:50%;translate:0 -50%}
.lb-count{position:absolute;bottom:clamp(12px,3vw,26px);left:50%;translate:-50% 0;
  font-family:"Barlow Condensed",sans-serif;letter-spacing:.24em;font-size:.7rem;color:var(--dim)}

/* ============ BOOKING ============ */
#booking{position:relative;overflow:hidden}
.book-bg{position:absolute;inset:0;z-index:-1}
.book-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 28%;opacity:.15;filter:grayscale(.45)}
.book-bg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(90% 70% at 50% 40%,rgba(8,7,10,.55),var(--ink) 88%)}
.book-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,80px);align-items:center}
.contact-rows{list-style:none;margin:2rem 0 0;padding:0;border-top:1px solid var(--line)}
.contact-rows li{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;align-items:baseline;justify-content:space-between;
  padding:1rem .2rem;border-bottom:1px solid var(--line)}
.contact-rows dt,.c-label{font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.22em;
  font-size:.72rem;color:var(--dim)}
.contact-rows a{font-family:"Big Shoulders Display",sans-serif;font-weight:700;text-transform:uppercase;
  font-size:1.5rem;text-decoration:none;color:var(--bone);transition:color .25s}
.contact-rows a:hover{color:var(--flare)}
.socials{display:flex;flex-wrap:wrap;gap:.55rem;list-style:none;padding:0;margin:1.6rem 0 0}
.socials a{display:inline-flex;align-items:center;gap:.5rem;border:1px solid var(--line);border-radius:100px;
  padding:.5em 1.1em;text-decoration:none;font-family:"Barlow Condensed",sans-serif;font-weight:600;
  text-transform:uppercase;letter-spacing:.16em;font-size:.74rem;color:var(--ash);transition:.25s}
.socials a:hover{border-color:var(--glow);color:var(--bone)}
.socials svg{width:15px;height:15px;fill:currentColor;flex:none}

/* ============ FOOTER ============ */
footer{border-top:1px solid var(--line);padding:clamp(34px,5vw,54px) var(--pad);background:var(--ink-1)}
.foot{max-width:var(--maxw);margin-inline:auto;display:flex;flex-wrap:wrap;gap:1.4rem;
  align-items:center;justify-content:space-between}
.foot .wm{width:132px;opacity:.75}
.foot p{margin:0;font-family:"Barlow Condensed",sans-serif;text-transform:uppercase;letter-spacing:.2em;
  font-size:.68rem;color:var(--dim)}

/* ============ REVEAL ============ */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.3,1),transform .8s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}

/* ============ RESPONSIVE ============ */
@media (max-width:1080px){
  .two-col,.story,.book-grid,.tour-foot,.list-grid{grid-template-columns:1fr}
  /* stacked: no form alongside to match, so the shots keep their own 16:9 */
  .live-shot{flex:0 0 auto}
  .live-shot img{height:auto;aspect-ratio:16/9}
  .vid-grid{grid-template-columns:1fr}
  .vid-lead{grid-row:auto}
  .vid-lead img{aspect-ratio:16/9}
  .gal{columns:2}
}
/* ---- stacked hero: phone + small tablet ---- */
@media (max-width:900px){
  .hero{min-height:0;display:block;overflow:visible}
  .nav{margin-bottom:0}
  .hero-img{position:relative;inset:auto;margin:0;z-index:0;padding-top:0}
  .hero-img img{width:100%;height:auto;object-fit:fill;animation:none;opacity:1}
  .hero-img::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:26%;pointer-events:none;
    background:linear-gradient(180deg,rgba(8,7,10,0),rgba(8,7,10,.55) 55%,var(--ink) 97%)}
  .hero-scrim{display:none}
  .hero-inner{position:relative;z-index:2;padding-block:0 clamp(46px,8vh,72px);margin-top:-4%}
  .hero .wm{max-width:100%}
  .hero-eyebrow{margin-bottom:1.15rem;letter-spacing:.3em;font-size:.66rem}
  .hero-tag{max-width:30ch}
  .hero-cta .btn{flex:1 1 auto;justify-content:center}
  .credit{margin-top:1.7rem}
  .scroll-cue{display:none}
}

@media (max-width:1000px){
  .nav-links{position:absolute;inset:100% 0 auto;flex-direction:column;gap:0;background:rgba(8,7,10,.97);
    backdrop-filter:blur(16px);border-bottom:1px solid var(--line);padding:.5rem var(--pad) 1.4rem;
    display:none;margin-left:0}
  .nav-links.open{display:flex}
  .nav-links li{border-bottom:1px solid var(--line)}
  .nav-links a{display:block;padding:.95rem 0;font-size:1rem;letter-spacing:.24em}
  .menu-btn{display:flex}
  .nav-cta{display:none}
  .nav.stuck,.nav{background:rgba(8,7,10,.82);backdrop-filter:blur(14px)}
}

@media (max-width:760px){
  body{font-size:16px}
  .scroll-cue{display:none}
  .date{grid-template-columns:5.5rem 1fr;row-gap:.9rem}
  .d-act{grid-column:1/-1}
  .d-when span{font-size:1.6rem}
  .stats{grid-template-columns:repeat(2,1fr)}
  .disco li{display:grid;grid-template-columns:3.4em minmax(0,1fr);align-items:baseline;gap:.2rem .9rem}
  .disco .yr{width:auto;grid-row:span 2}
  .disco .ttl{font-size:1.25rem}
  .disco .lbl{text-align:left;grid-column:2}
  .gal{columns:1}
  .chart .bar{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none}
  .chart .bar i{transform:scaleX(1)}
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- merch store page ---------- */
/* the nav pulls content up by 68px so the home hero can sit under it;
   the store page has no hero, so it opts out and keeps real breathing room */
.store-page .nav{margin-bottom:0}
.band-store{padding-block:clamp(34px,5vw,60px) clamp(40px,6vw,72px)}
.band-tight{padding-block:clamp(44px,6vw,80px)}
.store-cta{display:flex;align-items:center;justify-content:space-between;gap:clamp(18px,3vw,40px);flex-wrap:wrap}
.store-cta .lede{margin-top:.5rem;max-width:52ch}
.store-cta .h-sub{margin-top:.3rem}
@media (max-width:640px){ .store-cta{flex-direction:column;align-items:flex-start} }