/* ==========================================================================
   STRUCTURE FESTIVAL — 29 · 30 · 31 OCTOBER
   Dark / brutalist / cinematic. Bootstrap 5 is used for the grid + reset only;
   everything visual below is bespoke.

   Contents
   01  Tokens
   02  Base + typography
   03  Utilities / shared components
   04  Texture + cursor + progress
   05  Preloader
   06  Header + register button
   07  Menu overlay
   08  Hero
   09  Ticker
   10  Intro
   11  Artists
   12  Program
   13  Experience
   14  Tickets
   15  Investors
   16  Logo walls
   17  Register
   18  Finale
   19  Footer
   20  Reveal / motion system
   21  Responsive
   22  Reduced motion + print
   ========================================================================== */

/* ── 01 · TOKENS ────────────────────────────────────────────────────────── */
:root{
  /* ── Strcture brand palette (Brand Guidelines, p.25 primary / p.26 extended)
     Primary:  brown, cream, forest green, red
     Extended: cream, sand, orange, deep brown
     The site runs a brown ground with cream type; red is the action colour. */
  /* ── Strcture brand palette ────────────────────────────────────────────
     Ground is the brand brown, type is brand cream, and the forest green
     carries every action surface. */
  --cream:  #F1ECD9;   /* type + logo artwork        */
  --brown:  #3D2A1F;   /* ground                     */
  --green:  #3A6352;   /* action surfaces            */
  --red:    #C93C44;   /* reserved, sparing accent   */
  --sand:   #DFC191;
  --orange: #E3814F;

  /* Ground reads as near-black with a brown cast; the brand brown itself
     steps up to be a surface tone rather than the page background. */
  --bg:        #1B130E;
  --bg-2:      #221810;   /* alternating band, a shade lifted */
  --surface:   #2B1F16;
  --surface-2: var(--brown);
  --line:      #3B2C20;
  --line-2:    #54402F;

  --text:      var(--cream);
  --muted:     #B5A188;
  --stone:     #D3C3A6;

  --accent:    var(--green);
  --accent-lo: #2B4B3E;
  --accent-2:  var(--sand);
  --accent-ink: var(--sand);   /* accent text + rules on brown */

  /* Darker Grotesque is the brand's only approved typeface, so display, body
     and label all draw from it — weights Medium (500) and Bold (700). */
  /* Darker Grotesque carries the display voice; Jost handles body and UI,
     where its wider geometric forms stay legible at small sizes. */
  --ff-display: 'Darker Grotesque', 'Arial Narrow', Haettenschweiler, sans-serif;
  --ff-body:    'Jost', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ff-mono:    'Jost', ui-sans-serif, system-ui, sans-serif;

  /* leading + tracking per the guidelines (p.35 / p.36) */
  --lead-head: .9;
  --lead-sub:  1;
  --lead-body: 1.2;
  --track-head: -.03em;
  --track-sub:  -.02em;
  --track-body: -.01em;

  --pad:  clamp(1.25rem, 4vw, 4.5rem);
  --gap:  clamp(1rem, 2vw, 2rem);
  --sec:  clamp(5rem, 12vh, 10rem);

  --head-h: 76px;

  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.76,0,.24,1);

  --dur: .6s;
}

*,*::before,*::after{ box-sizing:border-box; }

/* sections held back until their assets exist */
[hidden]{ display:none !important; }

/* ── 02 · BASE + TYPOGRAPHY ─────────────────────────────────────────────── */
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--ff-body);
  font-weight:400;
  font-size:clamp(.95rem,1.02vw,1.05rem);
  line-height:var(--lead-body);
  letter-spacing:var(--track-body);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
body.is-loading{ overflow:hidden; }
body.menu-open{ overflow:hidden; }

img,video{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul,ol{ list-style:none; margin:0; padding:0; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
h1,h2,h3,h4{ margin:0; font-weight:800; }
p{ margin:0 0 1em; }
s{ text-decoration:none; color:var(--accent-ink); }

.mono{
  font-family:var(--ff-mono);
  text-transform:capitalize;
  font-weight:600;
  font-size:.82rem;
  letter-spacing:-.01em;
  font-weight:400;
}

::selection{ background:var(--accent); color:var(--cream); }

/* focus — always visible, never removed */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}

.skip-link{
  position:fixed; top:-100px; left:1rem; z-index:9999;
  background:var(--accent); color:var(--cream);
  padding:.75rem 1.25rem; font-family:var(--ff-mono); font-size:.75rem;
  letter-spacing:-.01em;
  transition:top .25s var(--ease);
}
.skip-link:focus{ top:1rem; }

.visually-hidden{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ── 03 · SHARED ────────────────────────────────────────────────────────── */
.container-x{
  width:100%;
  max-width:1680px;
  margin-inline:auto;
  padding-inline:var(--pad);
}

.eyebrow{
  display:inline-flex; align-items:center; gap:.75rem;
  color:var(--muted);
  margin-bottom:1.5rem;
}
.eyebrow i{
  display:block; width:clamp(24px,4vw,56px); height:1px;
  background:var(--accent-ink);
  transform-origin:left;
}
.accent{ color:var(--accent-ink); }
.muted{ color:var(--muted); }
.lead{ font-size:clamp(1.2rem,1.8vw,1.7rem); line-height:var(--lead-body); color:var(--text); font-weight:500; }

.sec-head{ margin-bottom:clamp(2.5rem,5vw,4.5rem); }
.sec-head--row{
  display:flex; flex-wrap:wrap; align-items:flex-end;
  justify-content:space-between; gap:2rem;
}
.sec-note{ max-width:38ch; margin-top:1.25rem; }

.sec-title{
  font-family:var(--ff-display); text-transform:capitalize; font-weight:800;
  font-size:clamp(3rem,11vw,9.5rem);
  line-height:var(--lead-head);
  letter-spacing:var(--track-head);
}
.sec-title--sm{ font-size:clamp(2.25rem,6vw,5rem); }

/* buttons ---------------------------------------------------------------- */
.btn-x{
  --bx: var(--accent);
  position:relative;
  display:inline-flex; align-items:center; gap:.9rem;
  padding:1.05rem 1.9rem;
  font-family:var(--ff-mono); font-size:.72rem; font-weight:700;
  letter-spacing:-.01em;
  border:1px solid var(--line-2);
  overflow:hidden;
  isolation:isolate;
  transition:color .4s var(--ease), border-color .4s var(--ease);
  will-change:transform;
  text-transform:capitalize;
}
.btn-x > span,.btn-x > i{ position:relative; z-index:2; }
.btn-x > i{ transition:transform .45s var(--ease-out); }
.btn-x::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:var(--bx);
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .45s var(--ease-out);
}
.btn-x:hover::before,.btn-x:focus-visible::before{ transform:scaleY(1); transform-origin:top; }
.btn-x:hover > i,.btn-x:focus-visible > i{ transform:translate(3px,-3px); }
.btn-x--ghost:hover,.btn-x--ghost:focus-visible{ color:var(--cream); border-color:var(--accent-ink); }

.btn-x--solid{ background:var(--accent); border-color:var(--accent); color:var(--cream); --bx:var(--cream); }
.btn-x--solid:hover,.btn-x--solid:focus-visible{ color:#000; }

.btn-x--big{ padding:1.35rem 2.6rem; font-size:.8rem; }

.link-x{
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--ff-mono); font-size:.72rem; font-weight:700;
  letter-spacing:-.01em;
  padding-bottom:.4rem;
  background-image:linear-gradient(var(--accent),var(--accent));
  background-size:0% 1px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size .5s var(--ease-out), color .3s;
  text-transform:capitalize;
}
.link-x:hover,.link-x:focus-visible{ background-size:100% 1px; color:var(--accent-ink); }
.link-x i{ transition:transform .4s var(--ease-out); }
.link-x:hover i{ transform:translateX(5px); }

.social{ display:flex; gap:.5rem; }
.social a{
  display:grid; place-items:center; width:42px; height:42px;
  border:1px solid var(--line-2); font-size:1rem;
  transition:background .35s var(--ease), color .35s, border-color .35s, transform .35s var(--ease-out);
}
.social a:hover,.social a:focus-visible{
  background:var(--accent); border-color:var(--accent); color:var(--cream); transform:translateY(-3px);
}

/* ── 04 · TEXTURE / CURSOR / PROGRESS ───────────────────────────────────── */
.fx{ position:fixed; inset:0; pointer-events:none; z-index:400; }

.fx--grain{
  z-index:401; opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 700ms steps(4) infinite;
}
@keyframes grainShift{
  0%{ transform:translate(0,0) }      25%{ transform:translate(-3%,2%) }
  50%{ transform:translate(2%,-3%) }  75%{ transform:translate(-2%,-2%) }
  100%{ transform:translate(0,0) }
}

.fx--scan{
  opacity:.5;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,.014) 0 1px, transparent 1px 3px);
}

.fx--vignette{
  background:radial-gradient(120% 90% at 50% 45%, transparent 42%, rgba(28,19,13,.72) 100%);
}

.scroll-progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:500;
  background:rgba(255,255,255,.05);
}
.scroll-progress i{
  display:block; height:100%; width:0%;
  background:linear-gradient(90deg,var(--accent),var(--accent-ink));
  box-shadow:0 0 14px rgba(223,193,145,.4);
}

/* custom cursor — fine pointers only */
.cursor{ display:none; }
@media (hover:hover) and (pointer:fine){
  .cursor{
    display:block; position:fixed; top:0; left:0; z-index:600;
    pointer-events:none; mix-blend-mode:difference;
    will-change:transform;
    transition:opacity .3s var(--ease);
  }
  .cursor__dot{
    position:absolute; width:6px; height:6px; border-radius:50%;
    background:#fff; transform:translate(-50%,-50%);
    transition:width .3s var(--ease-out), height .3s var(--ease-out), opacity .3s;
  }
  .cursor__ring{
    position:absolute; width:34px; height:34px; border-radius:50%;
    border:1px solid rgba(255,255,255,.55);
    transform:translate(-50%,-50%) scale(1);
    transition:width .35s var(--ease-out), height .35s var(--ease-out),
               border-color .35s, opacity .3s, background .35s;
  }
  .cursor__label{
    position:absolute; transform:translate(-50%,-50%);
    font-family:var(--ff-mono); font-size:.7rem; font-weight:700;
    letter-spacing:-.01em; color:var(--cream);
    opacity:0; transition:opacity .25s;
    white-space:nowrap;
  }
  .cursor.is-hot .cursor__ring{ width:78px; height:78px; border-color:transparent; background:rgba(255,255,255,.92); }
  .cursor.is-hot .cursor__dot{ width:0; height:0; }
  .cursor.is-hot .cursor__label{ opacity:1; }
  .cursor.is-down .cursor__ring{ transform:translate(-50%,-50%) scale(.82); }
  .cursor.is-hidden{ opacity:0; }
}

/* ── 05 · PRELOADER ─────────────────────────────────────────────────────── */
.preloader{
  position:fixed; inset:0; z-index:900;
  background:var(--bg);
  display:grid; place-items:center;
  transition:opacity .7s var(--ease), visibility .7s;
}
.preloader.is-done{ opacity:0; visibility:hidden; }
.preloader__inner{ width:min(560px,84vw); text-align:center; }

.preloader__mark{
  width:clamp(64px,9vw,110px); height:auto; margin-inline:auto;
  opacity:0; filter:grayscale(1) contrast(1.15);
  animation:markIn 1.1s var(--ease-out) .1s forwards;
}
@keyframes markIn{
  from{ opacity:0; transform:scale(.72) rotate(-38deg); filter:blur(8px) grayscale(1); }
  to  { opacity:1; transform:scale(1) rotate(0deg);     filter:blur(0)   grayscale(1); }
}

.preloader__word{
  display:flex; justify-content:center; gap:.02em;
  font-family:var(--ff-display); text-transform:capitalize; font-weight:800;
  font-size:clamp(1.6rem,5.5vw,3.2rem);
  letter-spacing:var(--track-head);
  margin:1.5rem 0 1.75rem;
}
.preloader__word span{
  display:block; opacity:0; transform:translateY(85%);
  animation:letterUp .8s var(--ease-out) forwards;
}
.preloader__word span:nth-child(1){ animation-delay:.30s }
.preloader__word span:nth-child(2){ animation-delay:.36s }
.preloader__word span:nth-child(3){ animation-delay:.42s }
.preloader__word span:nth-child(4){ animation-delay:.48s }
.preloader__word span:nth-child(5){ animation-delay:.54s }
.preloader__word span:nth-child(6){ animation-delay:.60s }
.preloader__word span:nth-child(7){ animation-delay:.66s }
.preloader__word span:nth-child(8){ animation-delay:.72s }
.preloader__word span:nth-child(9){ animation-delay:.78s }
@keyframes letterUp{ to{ opacity:1; transform:translateY(0); } }

.preloader__meta{
  display:flex; justify-content:space-between; color:var(--muted);
  margin-bottom:.9rem; opacity:0; animation:fadeIn .6s .9s forwards;
}
@keyframes fadeIn{ to{ opacity:1 } }
.preloader__count{ color:var(--accent-ink); }
.preloader__bar{ height:1px; background:var(--line-2); overflow:hidden; }
.preloader__bar i{ display:block; height:100%; width:0%; background:var(--accent-ink); transition:width .3s linear; }

/* ── 06 · HEADER ────────────────────────────────────────────────────────── */
.site-head{
  position:fixed; top:0; left:0; right:0; z-index:500;
  transition:transform .5s var(--ease), background .5s, border-color .5s, backdrop-filter .5s;
  border-bottom:1px solid transparent;
}
.site-head.is-stuck{
  background:rgba(27,19,14,.72);
  backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  border-bottom-color:var(--line);
}

.site-head__inner{
  height:var(--head-h);
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  padding-inline:var(--pad);
  gap:1rem;
}

.brand{ display:inline-flex; align-items:center; justify-self:start; }
.brand__lockup{
  height:26px; width:auto;
  transition:opacity .4s var(--ease), transform .6s var(--ease-out);
}
.brand__icon{ display:none; height:30px; width:auto; }
.brand:hover .brand__lockup,
.brand:hover .brand__icon{ opacity:.72; transform:translateX(2px); }

.head-center{ justify-self:center; }

/* REGISTER — the deliberate focal point of the header */
.btn-headcta{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  padding:.85rem 2.1rem;
  border:1px solid var(--accent-ink);
  color:var(--cream); overflow:hidden; isolation:isolate;
  font-family:var(--ff-mono); font-size:.72rem; font-weight:700;
  letter-spacing:-.01em;
  text-transform:capitalize;
}
.btn-headcta::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:var(--accent);
  transform:translateY(0); transition:transform .5s var(--ease-out);
}
.btn-headcta:hover::before,.btn-headcta:focus-visible::before{ transform:translateY(-101%); }
.btn-headcta:hover,.btn-headcta:focus-visible{ color:var(--accent-ink); }

.btn-headcta__pulse{
  position:absolute; inset:-1px; z-index:-2; border:1px solid var(--accent-ink);
  animation:pulseOut 2.6s var(--ease-out) infinite;
}
@keyframes pulseOut{
  0%  { transform:scale(1);    opacity:.85 }
  70% { transform:scale(1.28); opacity:0   }
  100%{ transform:scale(1.28); opacity:0   }
}
/* The clip box must equal the row height exactly: at height:1em with an
   inherited line-height of 1.62 the glyphs were sheared in half. */
.btn-headcta__label{ display:block; height:1.25em; line-height:1.25; overflow:hidden; }
.btn-headcta__row{ display:block; height:1.25em; transition:transform .5s var(--ease-out); }
.btn-headcta:hover .btn-headcta__row,
.btn-headcta:focus-visible .btn-headcta__row{ transform:translateY(-100%); }

/* MENU trigger */
.menu-trigger{
  justify-self:end; display:inline-flex; align-items:center; gap:.85rem;
  padding:.65rem .25rem .65rem 1rem;
}
/* Both words share one grid cell so the box is as wide as the LONGER of them
   ("CLOSE"), otherwise "MENU" sets the width and CLOSE gets sheared off. */
.menu-trigger__text{
  display:grid; overflow:hidden; line-height:1.25;
  font-family:var(--ff-mono); font-size:.72rem; font-weight:700;
  letter-spacing:-.01em;
  text-transform:capitalize;
}
.menu-trigger__on,.menu-trigger__off{
  grid-area:1 / 1; display:block; height:1.25em;
  transition:transform .45s var(--ease-out);
}
.menu-trigger__off{ color:var(--accent-ink); transform:translateY(100%); }
.menu-trigger:hover .menu-trigger__on{ color:var(--accent-ink); }
body.menu-open .menu-trigger__on{ transform:translateY(-100%); }
body.menu-open .menu-trigger__off{ transform:translateY(0); }

.menu-trigger__icon{ position:relative; display:block; width:30px; height:14px; }
.menu-trigger__icon i{
  position:absolute; left:0; height:1.5px; background:currentColor;
  transition:transform .45s var(--ease-in-out), width .45s var(--ease-in-out), opacity .3s;
}
.menu-trigger__icon i:nth-child(1){ top:0;  width:30px }
.menu-trigger__icon i:nth-child(2){ top:6px; width:20px }
.menu-trigger__icon i:nth-child(3){ top:12px; width:26px }
.menu-trigger:hover .menu-trigger__icon i:nth-child(2){ width:30px }
body.menu-open .menu-trigger__icon i:nth-child(1){ transform:translateY(6px) rotate(45deg);  width:30px }
body.menu-open .menu-trigger__icon i:nth-child(2){ opacity:0; transform:scaleX(0) }
body.menu-open .menu-trigger__icon i:nth-child(3){ transform:translateY(-6px) rotate(-45deg); width:30px }

/* ── 07 · MENU OVERLAY ──────────────────────────────────────────────────── */
.nav-overlay{
  position:fixed; inset:0; z-index:490;
  visibility:hidden; pointer-events:none;
}
.nav-overlay.is-open{ visibility:visible; pointer-events:auto; }

.nav-overlay__bg{
  position:absolute; inset:0;
  background:var(--bg-2);
  clip-path:circle(0% at calc(100% - 5rem) 2.4rem);
  transition:clip-path .85s var(--ease-in-out);
}
.nav-overlay.is-open .nav-overlay__bg{ clip-path:circle(150% at calc(100% - 5rem) 2.4rem); }
.nav-overlay__bg::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(70% 60% at 80% 20%, rgba(58,99,82,.13), transparent 65%);
}

.nav-overlay__body{
  position:relative; height:100%;
  display:grid; grid-template-columns:1.45fr .55fr; align-items:center;
  gap:var(--gap);
  padding:calc(var(--head-h) + 3rem) var(--pad) var(--pad);
  overflow-y:auto;
}

.nav-list li{ overflow:hidden; border-bottom:1px solid var(--line); }
.nav-list li:first-child{ border-top:1px solid var(--line); }
.nav-list a{
  position:relative;
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:clamp(.5rem,1.4vh,1.1rem) 0;
  font-family:var(--ff-display); text-transform:capitalize; font-weight:800;
  font-size:clamp(2.4rem,8vw,7rem);
  line-height:var(--lead-sub); letter-spacing:var(--track-head);
  transform:translateY(105%);
  transition:transform .8s var(--ease-out), color .35s;
}
.nav-overlay.is-open .nav-list a{
  transform:translateY(0);
  transition-delay:calc(.28s + var(--i) * .06s);
}
.nav-list a em{
  font-family:var(--ff-mono); font-style:normal; font-size:.74rem;
  color:var(--muted); letter-spacing:-.01em;
  transition:color .35s, transform .5s var(--ease-out);
}
.nav-list a::after{
  content:''; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:var(--accent-ink); transform:scaleX(0); transform-origin:right;
  transition:transform .55s var(--ease-out);
}
.nav-list a:hover,.nav-list a:focus-visible{ color:var(--accent-ink); }
.nav-list a:hover::after,.nav-list a:focus-visible::after{ transform:scaleX(1); transform-origin:left; }
.nav-list a:hover em{ color:var(--accent-ink); transform:translateX(-8px); }

.nav-aside{ display:grid; gap:2.25rem; align-content:center; }
.nav-aside__block,.nav-aside__cta{
  opacity:0; transform:translateY(24px);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
.nav-overlay.is-open .nav-aside__block,
.nav-overlay.is-open .nav-aside__cta{
  opacity:1; transform:none;
  transition-delay:calc(.32s + var(--i) * .06s);
}
.nav-aside__dates{
  font-family:var(--ff-display); text-transform:capitalize; font-weight:800; font-size:clamp(1.5rem,2.4vw,2.4rem);
  line-height:var(--lead-sub); letter-spacing:var(--track-head); margin:0;
}
.nav-aside__cta{
  display:inline-flex; align-items:center; gap:.9rem;
  font-family:var(--ff-mono); font-size:.75rem; font-weight:700;
  letter-spacing:-.01em;
  color:var(--accent-ink); padding-top:1.5rem; border-top:1px solid var(--line);
}
.nav-aside__cta i{ transition:transform .4s var(--ease-out); }
.nav-aside__cta:hover i{ transform:translateX(6px); }

/* ── 08 · HERO ──────────────────────────────────────────────────────────── */
.hero{
  position:relative;
  min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding:calc(var(--head-h) + 2rem) var(--pad) clamp(3rem,7vh,5.5rem);
  overflow:hidden;
  isolation:isolate;
}

.hero__media{ position:absolute; inset:0; z-index:-2; background:#000; }

.hero__video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0;
  transition:opacity 1.2s var(--ease);
}
.hero__video.is-live{ opacity:1; }
/* when a real video takes over, retire the still sequence */
.hero__media.has-video .hero__seq{ opacity:0; transition:opacity 1.2s var(--ease); }

.hero__seq{ position:absolute; inset:0; }
.hero__frame{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  filter:sepia(.5) saturate(1.15) hue-rotate(-8deg) brightness(.72) contrast(1.06);
  opacity:0;
  will-change:opacity, transform;
  animation:heroFrame 48s var(--ease-in-out) infinite;
  animation-delay:calc(var(--f) * 8s);
}
/* Ken-Burns crossfade: each frame holds ~8s of a 48s loop */
@keyframes heroFrame{
  0%   { opacity:0; transform:scale(1.16) translate3d(0,0,0); }
  2.5% { opacity:1; }
  15%  { opacity:1; }
  18%  { opacity:0; transform:scale(1.03) translate3d(0,0,0); }
  100% { opacity:0; transform:scale(1.16) translate3d(0,0,0); }
}
.hero__media.is-paused .hero__frame{ animation-play-state:paused; }

/* cinematic wash so the type always clears contrast */
.hero__wash{
  position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgba(27,19,14,.80) 0%, rgba(27,19,14,.18) 28%, rgba(27,19,14,.34) 58%, rgba(27,19,14,.93) 100%),
    radial-gradient(95% 75% at 50% 40%, transparent 34%, rgba(27,19,14,.55) 100%);
}
/* slow drifting ember glow */
.hero__beam{
  position:absolute; inset:-20%;
  background:radial-gradient(38% 30% at 30% 62%, rgba(58,99,82,.20), transparent 62%),
             radial-gradient(30% 26% at 74% 36%, rgba(223,193,145,.13), transparent 65%);
  animation:beamDrift 26s ease-in-out infinite alternate;
  mix-blend-mode:screen;
}
@keyframes beamDrift{
  from{ transform:translate3d(-3%,2%,0) scale(1);    opacity:.8 }
  to  { transform:translate3d(4%,-3%,0) scale(1.12); opacity:1  }
}

.hero__content{ position:relative; }

.hero__rail{
  position:absolute; top:50%; color:var(--muted);
  writing-mode:vertical-rl; font-size:.72rem;
  display:flex; align-items:center; gap:1rem;
}
.hero__rail--l{ left:calc(var(--pad) * -1 + .25rem); transform:translateY(-70%) rotate(180deg); }
.hero__rail--r{ right:calc(var(--pad) * -1 + .25rem); transform:translateY(-70%); }
.hero__rail span::before{
  content:''; display:block; width:1px; height:36px; background:var(--line-2); margin:0 auto .9rem;
}
@media (max-width:1199px){ .hero__rail{ display:none } }

.hero__eyebrow{
  display:flex; align-items:center; gap:1rem;
  color:var(--stone); margin:0 0 1.25rem;
}
.hero__eyebrow i{ display:block; width:44px; height:1px; background:var(--accent-ink); }

.hero__title{
  font-family:var(--ff-display); text-transform:capitalize; font-weight:800;
  
  line-height:var(--lead-head);
  letter-spacing:var(--track-head);
  margin:0 0 1.5rem;
  will-change:transform;
}
.hero__title .line{
  display:block; overflow:hidden;
  padding-top:.14em; margin-top:-.14em;
  padding-bottom:.06em; margin-bottom:-.06em;
}
.hero__title .line__in{
  display:block;
  transform:translateY(105%);
  transition:transform 1.15s var(--ease-out);
}
.hero__title .line__in--out{
  color:transparent;
  -webkit-text-stroke:1.5px rgba(242,240,236,.62);
  transition-delay:.1s;
}
body.is-ready .hero__title .line__in{ transform:translateY(0); }

.hero__logo{
  display:block;
  width:min(92vw, 1180px);
  height:auto;
  margin-bottom:.4rem;
}

.hero__tagline{
  max-width:34ch;
  font-size:clamp(1.15rem,1.9vw,1.7rem);
  line-height:var(--lead-sub);
  letter-spacing:var(--track-sub);
  color:var(--cream);
  margin:0 0 1.75rem;
}

.hero__dates{
  display:flex; align-items:baseline; gap:clamp(.5rem,1.4vw,1.1rem);
  font-family:var(--ff-display); text-transform:capitalize; font-weight:800;
  font-size:clamp(1.5rem,4.2vw,3.4rem);
  line-height:var(--lead-sub); letter-spacing:var(--track-head);
  margin:0 0 2.25rem;
}
.hero__dates i{ font-style:normal; color:var(--accent-ink); }
.hero__dates .d{ position:relative; }
.hero__dates em{
  font-family:var(--ff-mono); font-style:normal; font-size:.76rem;
  color:var(--muted); letter-spacing:-.01em; margin-left:.75rem;
}

.hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; }

.hero__scroll{
  position:absolute; left:50%; bottom:1.1rem; transform:translateX(-50%);
  display:grid; justify-items:center; gap:.65rem; color:var(--muted);
  transition:color .3s;
}
.hero__scroll:hover{ color:var(--accent-ink); }
.hero__scroll-line{ display:block; width:1px; height:48px; background:var(--line-2); overflow:hidden; position:relative; }
.hero__scroll-line::after{
  content:''; position:absolute; inset:0; background:var(--accent-ink);
  animation:scrollTrace 2.1s var(--ease-in-out) infinite;
}
@keyframes scrollTrace{
  0%  { transform:translateY(-100%) }
  55% { transform:translateY(0) }
  100%{ transform:translateY(100%) }
}
@media (max-width:767px){ .hero__scroll{ display:none } }

/* ── 09 · TICKER ────────────────────────────────────────────────────────── */
.ticker{
  border-block:1px solid var(--line);
  background:var(--surface);
  overflow:hidden; padding:.85rem 0;
}
.ticker__track{
  display:flex; width:max-content;
  animation:tickerRun 38s linear infinite;
  will-change:transform;
}
.ticker__track span{
  font-family:var(--ff-display); text-transform:capitalize; font-weight:800;
  font-size:clamp(1.1rem,2.4vw,2rem);
  letter-spacing:var(--track-head);
  padding-right:1.5rem; white-space:nowrap; color:var(--stone);
}
.ticker__track i{ color:var(--accent-ink); font-style:normal; padding-inline:.75rem; }
@keyframes tickerRun{ to{ transform:translate3d(-33.333%,0,0) } }

/* ── 10 · INTRO ─────────────────────────────────────────────────────────── */
.intro{ padding-block:var(--sec); position:relative; }

/* Sized by the fitText module in js/main.js so the statement always occupies
   exactly one full-width line. The font-size here is only the pre-fit value
   used before the script measures (and the fallback if JS is unavailable). */
.intro__statement{
  font-family:var(--ff-display); text-transform:capitalize; font-weight:800;
  font-size:clamp(2.5rem,8.2vw,8.5rem);
  line-height:var(--lead-sub); letter-spacing:var(--track-head);
  white-space:nowrap;
  margin:0 0 clamp(2.5rem,6vw,5rem);
}

.intro__grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,5rem); align-items:center;
}
.intro__copy p{ max-width:44ch; }
.intro__copy p.muted{ font-size:clamp(1.02rem,1.3vw,1.25rem); line-height:var(--lead-body); }
.intro__copy .link-x{ margin-top:1.4rem; }

.intro__media{ margin:0; position:relative; }
.intro__media figcaption{ margin-top:.9rem; color:var(--muted); }

/* image mask reveal */
.mask{ overflow:hidden; position:relative; }
.mask img{
  width:100%; height:auto;
  transform:scale(1.28);
  transition:transform 1.5s var(--ease-out);
  filter:grayscale(.5) sepia(.4) saturate(1.3) contrast(1.04);
}
.mask::after{
  content:''; position:absolute; inset:0; background:var(--bg);
  transform-origin:right;
  transition:transform 1.15s var(--ease-in-out);
}
.mask.is-in img{ transform:scale(1); }
.mask.is-in::after{ transform:scaleX(0); }

.intro__marquee{ margin-top:clamp(3rem,7vw,6rem); overflow:hidden; }
.intro__marquee-track{
  display:flex; gap:clamp(1.5rem,4vw,4rem); width:max-content;
  font-family:var(--ff-display); text-transform:capitalize; font-weight:800;
  font-size:clamp(2.5rem,9vw,8rem);
  line-height:var(--lead-sub); letter-spacing:var(--track-head);
  will-change:transform;
}
/* Outlined by default, flooding with colour on hover:
   grey outline -> solid white, orange outline -> solid ember. */
.intro__marquee-track span{
  color:var(--surface-2);
  -webkit-text-stroke:1px var(--line-2);
  cursor:default;
  transition:color .45s var(--ease), -webkit-text-stroke-color .45s var(--ease);
}
.intro__marquee-track span:hover{
  color:var(--text);
  -webkit-text-stroke-color:var(--text);
}
.intro__marquee-track .o{ color:transparent; -webkit-text-stroke:1px rgba(58,99,82,.5); }
.intro__marquee-track .o:hover{
  color:var(--accent-ink);
  -webkit-text-stroke-color:var(--accent-ink);
}

/* ── 11 · ARTISTS ───────────────────────────────────────────────────────── */
.artists{ padding-block:var(--sec); background:var(--bg-2); border-block:1px solid var(--line); }

.lineup-bar{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1rem; margin-bottom:clamp(1.75rem,3.5vw,3rem);
}
.filters{ display:flex; flex-wrap:wrap; gap:.6rem; }

.slider-nav{ display:flex; gap:.5rem; }
.slider-btn{
  width:52px; height:52px; display:grid; place-items:center;
  border:1px solid var(--line-2); font-size:1.05rem; color:var(--text);
  transition:background .35s var(--ease), border-color .35s, color .35s, transform .35s var(--ease-out);
}
.slider-btn:hover:not(:disabled),
.slider-btn:focus-visible:not(:disabled){
  background:var(--accent); border-color:var(--accent); color:var(--cream);
}
.slider-btn[data-slide="prev"]:hover:not(:disabled){ transform:translateX(-3px); }
.slider-btn[data-slide="next"]:hover:not(:disabled){ transform:translateX(3px); }
.slider-btn:disabled{ opacity:.28; cursor:not-allowed; }

/* 3.5 cards in view, so the cut-off fourth signals there is more to slide */
.artist-slider{
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  cursor:grab;
  scroll-behavior:smooth;
}
.artist-slider::-webkit-scrollbar{ display:none; }
.artist-slider.is-dragging{ cursor:grabbing; scroll-snap-type:none; scroll-behavior:auto; }

/* Stop the browser picking the image/link up as a native drag payload, and
   stop text selecting while the track is being dragged. */
.artist-slider img{ -webkit-user-drag:none; user-select:none; }
.artist-slider.is-dragging{ user-select:none; }

.slider-hint{
  display:none; align-items:center; gap:.6rem;
  color:var(--muted); margin:1.5rem 0 0;
}
.slider-hint i{ color:var(--accent-ink); }
.chip{
  padding:.6rem 1.35rem; border:1px solid var(--line-2);
  font-family:var(--ff-mono); font-size:.76rem; font-weight:700;
  letter-spacing:-.01em; color:var(--muted);
  transition:color .3s, border-color .3s, background .3s;
  text-transform:capitalize;
}
.chip:hover{ color:var(--text); border-color:var(--stone); }
.chip.is-active{ background:var(--accent); border-color:var(--accent); color:var(--cream); }

/* Uniform lineup track — every act gets identical weight and image size.
   Percentage flex-basis resolves against the track's width, which equals the
   visible scroller width, so "3.5 cards" holds at every viewport. */
.artist-grid{
  display:flex;
  gap:var(--gap);
}
.artist{
  flex:0 0 calc((100% - 3 * var(--gap)) / 3.5);
  scroll-snap-align:start;
  transition:opacity .5s var(--ease), filter .5s;
}
.artist.is-hidden{ display:none; }

.artist a{ display:block; position:relative; }

.artist__img{
  display:block; position:relative; overflow:hidden;
  background:var(--surface);
  aspect-ratio:4/5;
}

.artist__img img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) sepia(.62) saturate(1.7) hue-rotate(-12deg) contrast(1.06) brightness(.92);
  transform:scale(1.02);
  transition:transform 1.1s var(--ease-out), filter .7s var(--ease);
}
.artist__img::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,transparent 35%,rgba(27,19,14,.85));
  opacity:.9; transition:opacity .5s;
}
.artist a:hover .artist__img img,
.artist a:focus-visible .artist__img img{
  transform:scale(1.09);
  filter:grayscale(.15) sepia(.25) saturate(1.25) contrast(1.04) brightness(1);
}
.artist a:hover .artist__img::after{ opacity:.65; }

.artist__meta{
  position:absolute; left:0; right:0; bottom:0;
  padding:1.1rem 1.2rem;
  display:grid; gap:.35rem;
}
.artist__meta em{
  font-family:var(--ff-mono); font-style:normal; font-size:.72rem;
  letter-spacing:-.01em; color:var(--stone);
  transition:color .4s;
}
.artist__meta strong{
  font-family:var(--ff-display); text-transform:capitalize; font-weight:800;
  font-size:clamp(1.05rem,1.75vw,1.85rem);
  line-height:.98; letter-spacing:var(--track-head);
  transition:transform .55s var(--ease-out);
}
.artist a:hover .artist__meta strong{ transform:translateX(9px); }
.artist a:hover .artist__meta em{ color:var(--accent-ink); }

.tag{
  justify-self:start;
  font-family:var(--ff-mono); font-size:.7rem; font-weight:700;
  letter-spacing:-.01em; padding:.2rem .5rem; margin-top:.15rem;
  border:1px solid var(--accent-ink); color:var(--accent-ink);
  text-transform:capitalize;
}
.tag--tbc{ border-color:var(--line-2); color:var(--muted); }

/* ── 12 · PROGRAM ───────────────────────────────────────────────────────── */
.program{ padding-block:var(--sec); }

.day-tabs{
  position:relative; display:flex; gap:0;
  border-block:1px solid var(--line);
  margin-bottom:clamp(2rem,4vw,3.5rem);
  overflow-x:auto; scrollbar-width:none;
}
.day-tabs::-webkit-scrollbar{ display:none; }
.day-tab{
  flex:1 0 auto; min-width:150px;
  display:grid; gap:.5rem; justify-items:start;
  padding:1.4rem clamp(1rem,2.5vw,2rem);
  border-right:1px solid var(--line);
  color:var(--muted);
  transition:color .4s var(--ease), background .4s;
}
.day-tab:last-of-type{ border-right:0; }
.day-tab span{
  font-family:var(--ff-display); text-transform:capitalize; font-weight:800; font-size:clamp(1.6rem,4vw,3rem);
  line-height:var(--lead-head); letter-spacing:var(--track-head);
}
.day-tab span b{ font-weight:400; font-size:.42em; letter-spacing:-.01em; }
.day-tab:hover{ color:var(--text); }
.day-tab.is-active{ color:var(--text); }
.day-tab.is-active em{ color:var(--accent-ink); }

.day-tabs__ink{
  position:absolute; bottom:-1px; left:0; height:2px; width:0;
  background:var(--accent-ink); box-shadow:0 0 18px rgba(223,193,145,.45);
  transition:transform .6s var(--ease-out), width .6s var(--ease-out);
}

.program__panels{ position:relative; }
.slot-list{ display:none; }
.slot-list.is-active{ display:block; }

.slot-list__head{
  display:flex; justify-content:space-between;
  color:var(--muted); padding-bottom:1rem; border-bottom:1px solid var(--line);
}

.slot{
  display:grid;
  grid-template-columns:130px 1fr auto;
  align-items:center; gap:1.5rem;
  padding:clamp(1.1rem,2.4vw,1.9rem) 0;
  border-bottom:1px solid var(--line);
  position:relative;
  opacity:0; transform:translateY(28px);
}
.slot-list.is-active .slot{
  animation:slotIn .7s var(--ease-out) forwards;
  animation-delay:calc(var(--i) * .07s);
}
@keyframes slotIn{ to{ opacity:1; transform:none } }

.slot::before{
  content:''; position:absolute; left:0; right:0; top:0; bottom:0; z-index:-1;
  background:linear-gradient(90deg, rgba(58,99,82,.10), transparent 55%);
  transform:scaleX(0); transform-origin:left;
  transition:transform .6s var(--ease-out);
}
.slot:hover::before{ transform:scaleX(1); }

.slot__time{ color:var(--accent-ink); font-style:normal; }
.slot h3{
  font-family:var(--ff-display); text-transform:capitalize; font-weight:800;
  font-size:clamp(1.4rem,4.2vw,3.2rem);
  line-height:var(--lead-sub); letter-spacing:var(--track-head);
  transition:transform .5s var(--ease-out), color .4s;
}
.slot:hover h3{ transform:translateX(14px); }
.slot__tag{ color:var(--muted); border:1px solid var(--line-2); padding:.3rem .65rem;   text-transform:capitalize;
}
.slot__tag.is-live{ color:var(--accent-ink); border-color:var(--accent-ink); }
.slot__tag.is-tbc{ opacity:.6; }

.program__foot{
  display:inline-flex; align-items:center; gap:.6rem;
  margin-top:2rem; color:var(--muted);
}

/* ── 13 · EXPERIENCE ────────────────────────────────────────────────────── */
.exp{ padding-block:var(--sec) 0; background:var(--bg-2); border-top:1px solid var(--line); }

/* ── MOSAIC ──
   Edge-to-edge tiled sheet. The 1px grid gap lets the section background show
   through as hairline rules, so the block reads as one dense surface.
   Mobile-first: a plain stack, promoted to 6 then 12 columns further up. */
.mosaic{
  display:grid;
  grid-template-columns:1fr;
  gap:1px;
  background:var(--line);
  border-block:1px solid var(--line);
  margin-top:clamp(2.5rem,5vw,4rem);
}

.mos{
  position:relative;
  background:var(--bg-2);
  min-width:0;
  opacity:0; transform:translateY(22px);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
}
.mos.is-in{ opacity:1; transform:none; }

/* image tiles */
.mos--img{ overflow:hidden; aspect-ratio:3/2; }
.mos--img img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) sepia(.62) saturate(1.7) hue-rotate(-12deg) contrast(1.05) brightness(.85);
  transform:scale(1.04);
  transition:transform 1.1s var(--ease-out), filter .6s var(--ease);
}
.mos--img::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(27,19,14,.42) 0%, transparent 34%, rgba(27,19,14,.78) 100%);
  transition:opacity .5s var(--ease);
}
.mos--img:hover img{ transform:scale(1.1); filter:grayscale(.15) sepia(.25) saturate(1.25) contrast(1.04) brightness(1); }
.mos--img:hover::after{ opacity:.6; }

.mos__no{
  position:absolute; top:0; left:0; z-index:2;
  padding:.45rem .75rem;
  background:var(--accent); color:var(--cream); font-weight:700;
}
.mos__word{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  margin:0; padding:1rem 1.1rem;
  font-family:var(--ff-display); text-transform:capitalize; font-weight:800;
  font-size:var(--ws, 2rem);
  line-height:.92; letter-spacing:var(--track-head);
  transition:transform .55s var(--ease-out);
}
.mos--img:hover .mos__word{ transform:translateX(10px); }

/* Decorative filler strips. They only earn their place in the wide 12-column
   layout; below that they'd interrupt the image -> copy pairing. */
.mos--d,.mos--h{ display:none; }
.mos--strip{ aspect-ratio:21/9; }
.mos--strip::after{ background:linear-gradient(180deg, transparent, rgba(27,19,14,.5)); }

/* copy tiles */
.mos--copy{
  display:flex; flex-direction:column; justify-content:flex-end; gap:1rem;
  padding:clamp(1.6rem,5vw,2rem);
}
.mos--copy p{
  margin:0; color:var(--muted);
  font-size:clamp(1rem,1.15vw,1.15rem); line-height:var(--lead-body);
  max-width:34ch;
}
.mos__rule{
  display:block; width:44px; height:2px; background:var(--accent-ink);
  transform:scaleX(0); transform-origin:left;
  transition:transform .8s var(--ease-out) .15s;
}
.mos--copy.is-in .mos__rule{ transform:scaleX(1); }
.mos--accent{ background:linear-gradient(150deg, rgba(58,99,82,.12), transparent 62%), var(--bg-2); }
.mos--accent p{ color:var(--text); }

/* ── 6-column mosaic ── */
@media (min-width:768px){
  /* minmax(...,auto) so a tile whose copy runs long grows its row instead of
     spilling its content out of the tile — the CTA tile does exactly that */
  .mosaic{ grid-template-columns:repeat(6,1fr); grid-auto-rows:minmax(clamp(120px,13vw,190px),auto); }
  .mos--img,.mos--strip{ aspect-ratio:auto; }

  .mos--a{ grid-column:1/4; grid-row:1/3; }
  .mos--c{ grid-column:4/7; grid-row:1/3; }
  .mos--b{ grid-column:1/4; grid-row:3/4; }
  .mos--e{ grid-column:4/7; grid-row:3/4; }
  .mos--f{ grid-column:1/4; grid-row:4/6; }
  .mos--i{ grid-column:4/7; grid-row:4/6; }
  .mos--g{ grid-column:1/4; grid-row:6/7; }
  .mos--j{ grid-column:4/7; grid-row:6/7; }
}

/* ── 12-column mosaic ── */
@media (min-width:1200px){
  .mosaic{ grid-template-columns:repeat(12,1fr); grid-auto-rows:minmax(clamp(140px,11vw,185px),auto); }
  .mos--d,.mos--h{ display:block; }

  .mos--a{ grid-column:1/6;   grid-row:1/4; }   /* SOUND      */
  .mos--b{ grid-column:6/9;   grid-row:1/3; }   /* copy       */
  .mos--c{ grid-column:9/13;  grid-row:1/3; }   /* SPACE      */
  .mos--d{ grid-column:6/9;   grid-row:3/4; }   /* strip      */
  .mos--e{ grid-column:9/13;  grid-row:3/4; }   /* copy       */
  .mos--f{ grid-column:1/4;   grid-row:4/7; }   /* MOVEMENT   */
  .mos--g{ grid-column:4/7;   grid-row:4/6; }   /* copy       */
  .mos--h{ grid-column:4/7;   grid-row:6/7; }   /* strip      */
  .mos--i{ grid-column:7/11;  grid-row:4/7; }   /* STRUCTURE  */
  .mos--j{ grid-column:11/13; grid-row:4/7; }   /* copy + CTA */
}

/* ── 14 · TICKETS ───────────────────────────────────────────────────────── */
.tickets{ position:relative; padding-block:clamp(6rem,16vh,12rem); overflow:hidden; isolation:isolate; }
.tickets__bg{ position:absolute; inset:0; z-index:-1; }
.tickets__bg img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) sepia(.62) saturate(1.7) hue-rotate(-12deg) brightness(.42) contrast(1.1);
}
.tickets__bg::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(70% 70% at 50% 50%, rgba(27,19,14,.55), rgba(27,19,14,.95));
}
.tickets__inner{ text-align:center; display:grid; justify-items:center; }
.tickets__title{
  font-family:var(--ff-display); text-transform:capitalize; font-weight:800;
  font-size:clamp(2.4rem,9vw,7.5rem);
  line-height:var(--lead-head); letter-spacing:var(--track-head);
  max-width:15ch; margin-bottom:1.25rem;
}
.tickets__inner > .muted{ max-width:44ch; margin-bottom:3rem; }
.tickets__note{ color:var(--muted); margin-top:2rem; }

.btn-mega{
  position:relative; display:inline-flex; align-items:center; gap:1.25rem;
  padding:clamp(1.4rem,3vw,2.2rem) clamp(2.5rem,6vw,5rem);
  background:var(--accent);
  border:1px solid var(--accent);
  font-family:var(--ff-display); text-transform:capitalize; font-weight:800;
  font-size:clamp(1.5rem,4.5vw,3.5rem);
  line-height:var(--lead-sub); letter-spacing:var(--track-head);
  color:var(--cream); overflow:hidden; isolation:isolate;
  transition:color .45s var(--ease);
}
.btn-mega__fill{
  position:absolute; inset:0; z-index:-1; background:var(--cream);
  transform:translateY(101%); transition:transform .6s var(--ease-out);
}
.btn-mega:hover{ color:var(--brown); }
.btn-mega:hover .btn-mega__fill,
.btn-mega:focus-visible .btn-mega__fill{ transform:translateY(0); }
.btn-mega__text{ display:block; height:1.12em; line-height:1.12; overflow:hidden; }
.btn-mega__row{ display:block; height:1.12em; transition:transform .6s var(--ease-out); }
.btn-mega:hover .btn-mega__row,
.btn-mega:focus-visible .btn-mega__row{ transform:translateY(-100%); }
.btn-mega i{ font-size:.5em; transition:transform .5s var(--ease-out); }
.btn-mega:hover i{ transform:translate(6px,-6px); }

/* ── 15 · INVESTORS ─────────────────────────────────────────────────────── */
.investors{ padding-block:var(--sec); border-block:1px solid var(--line); background:var(--bg-2); }
.investors__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,5rem);
  align-items:center;
}
.investors__copy p{ max-width:46ch; }
.investors__copy .btn-x{ margin-top:1rem; }

/* ── 16 · LOGO WALLS ────────────────────────────────────────────────────── */
.logos{ padding-block:var(--sec); }
.logos--alt{ background:var(--bg-2); border-block:1px solid var(--line); }

.logo-wall{
  display:grid; grid-template-columns:repeat(6,1fr);
  border:1px solid var(--line); border-right:0; border-bottom:0;
}
.logo-cell{
  aspect-ratio:16/9;
  display:grid; place-items:center; padding:1rem;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  position:relative; overflow:hidden;
  transition:background .45s var(--ease);
}
.logo-cell::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(140deg, rgba(58,99,82,.14), transparent 60%);
  opacity:0; transition:opacity .45s var(--ease);
}
.logo-cell:hover{ background:var(--surface); }
.logo-cell:hover::before{ opacity:1; }
.logo-cell span{
  position:relative;
  font-family:var(--ff-mono); font-size:.76rem; font-weight:700;
  letter-spacing:-.01em; color:var(--muted);
  text-align:center;
  transition:color .4s var(--ease), transform .5s var(--ease-out);
}
.logo-cell:hover span{ color:var(--text); transform:translateY(-3px); }
/* when a real logo is dropped in */
.logo-cell img{
  max-height:52%; width:auto; object-fit:contain;
  filter:grayscale(1) brightness(1.7); opacity:.55;
  transition:filter .45s, opacity .45s, transform .5s var(--ease-out);
}
.logo-cell:hover img{ filter:grayscale(.15) sepia(.25) saturate(1.25) contrast(1.04) brightness(1); opacity:1; transform:scale(1.05); }

/* ── 17 · REGISTER ──────────────────────────────────────────────────────── */
.register{ padding-block:var(--sec); }
.register__inner{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,5rem); align-items:end;
}
.register__form{ display:flex; flex-wrap:wrap; gap:.75rem; position:relative; }
.register__form input{
  flex:1 1 240px;
  background:transparent; border:1px solid var(--line-2); color:var(--text);
  padding:1.05rem 1.25rem;
  font-family:var(--ff-mono); font-size:.75rem; letter-spacing:-.01em;
  transition:border-color .35s;
  text-transform:capitalize;
}
.register__form input::placeholder{ color:var(--muted); }
.register__form input:focus{ outline:none; border-color:var(--accent-ink); }
.register__msg{
  flex:1 0 100%; margin:.35rem 0 0; min-height:1.2em; color:var(--accent-ink);
}

/* ── 18 · FINALE ────────────────────────────────────────────────────────── */
.finale{
  position:relative; min-height:100svh;
  display:grid; place-items:center; text-align:center;
  padding:var(--sec) var(--pad);
  overflow:hidden; isolation:isolate;
}
.finale__bg{ position:absolute; inset:-10%; z-index:-1; }
.finale__bg img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) sepia(.62) saturate(1.7) hue-rotate(-12deg) brightness(.46) contrast(1.1);
  will-change:transform;
}
.finale__bg::after{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(75% 65% at 50% 50%, rgba(27,19,14,.35), rgba(27,19,14,.92)),
    linear-gradient(180deg, rgba(27,19,14,.9), transparent 30%, transparent 70%, rgba(27,19,14,.95));
}
.finale__inner{ display:grid; justify-items:center; }
.finale__title{
  font-family:var(--ff-display); text-transform:capitalize; font-weight:800;
  font-size:clamp(2.8rem,13vw,12rem);
  line-height:var(--lead-head); letter-spacing:var(--track-head);
  margin-bottom:1.5rem;
}
.finale__dates{
  font-family:var(--ff-display); text-transform:capitalize; font-weight:800;
  font-size:clamp(1.3rem,3.6vw,2.8rem);
  letter-spacing:var(--track-head); margin-bottom:2.5rem;
}
.finale__dates em{
  font-family:var(--ff-mono); font-style:normal; font-size:.35em;
  color:var(--accent-ink); letter-spacing:-.01em; margin-left:.75rem;
}

/* ── 19 · FOOTER ────────────────────────────────────────────────────────── */
.site-foot{ border-top:1px solid var(--line); padding-top:clamp(3rem,6vw,5rem); background:var(--bg); }

.site-foot__top{
  display:grid; grid-template-columns:1.2fr 1fr .8fr;
  gap:clamp(2rem,4vw,4rem);
  padding-bottom:clamp(3rem,6vw,5rem);
}
.site-foot__brand img{ filter:grayscale(1) brightness(1.25); margin-bottom:1.25rem; }
.site-foot__name{
  font-family:var(--ff-display); text-transform:capitalize; font-weight:800; letter-spacing:var(--track-head); font-size:clamp(1.5rem,2.6vw,2.4rem);
  line-height:.94; margin:0 0 .75rem;
}
.site-foot__dates{ color:var(--accent-ink); margin:0; }

.site-foot__nav{ display:flex; gap:clamp(2rem,5vw,4rem); }
.site-foot__nav ul{ display:grid; gap:.7rem; align-content:start; }
.site-foot__nav a{
  font-family:var(--ff-mono); font-size:.72rem; letter-spacing:-.01em; color:var(--muted);
  transition:color .3s, padding-left .35s var(--ease-out);
  text-transform:capitalize;
}
.site-foot__nav a:hover,.site-foot__nav a:focus-visible{ color:var(--accent-ink); padding-left:.5rem; }

.site-foot__social{ display:grid; gap:1rem; align-content:start; }
.site-foot__social .eyebrow{ margin:0; }

.site-foot__word{
  font-family:var(--ff-display); text-transform:capitalize; font-weight:800;
  font-size:clamp(3.5rem,19vw,17rem);
  line-height:var(--lead-head); text-align:center; letter-spacing:var(--track-head);
  color:transparent; -webkit-text-stroke:1px var(--line-2);
  margin:0; user-select:none;
}

.site-foot__base{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem;
  padding-block:1.5rem; border-top:1px solid var(--line);
  color:var(--muted); margin-top:2rem;
}
.to-top{
  display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--ff-mono); font-size:.76rem; letter-spacing:-.01em; color:var(--muted); transition:color .3s;
  text-transform:capitalize;
}
.to-top:hover{ color:var(--accent-ink); }
.to-top i{ transition:transform .4s var(--ease-out); }
.to-top:hover i{ transform:translateY(-4px); }

/* ── 20 · REVEAL / MOTION SYSTEM ────────────────────────────────────────── */
.reveal{
  opacity:0; transform:translateY(34px);
  transition:opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.reveal.is-in{ opacity:1; transform:none; }

/* Scroll-linked copy: words brighten one by one as the block travels up the
   viewport, so the paragraph reads as it is revealed rather than all at once. */
[data-scroll-fade] .sw{
  opacity:.13;
  transition:opacity .5s var(--ease);
}
[data-scroll-fade] .sw.is-on{ opacity:1; }

/* split-text headings.
   The .w spans do the clipping, not the heading itself, and each carries
   padding cancelled by a negative margin so tight line-heights never shear
   the caps off the display face. */
[data-split] .w{
  display:inline-block; overflow:hidden; vertical-align:bottom;
  padding-top:.16em; margin-top:-.16em;
  padding-bottom:.08em; margin-bottom:-.08em;
}
[data-split] .w > i{
  display:inline-block; font-style:inherit;
  transform:translateY(105%);
  transition:transform 1s var(--ease-out);
  transition-delay:calc(var(--w) * .045s);
}
[data-split].is-in .w > i{ transform:translateY(0); }

[data-stagger] > *{
  opacity:0; transform:translateY(26px);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
}
[data-stagger].is-in > *{ opacity:1; transform:none; }
[data-stagger].is-in > *:nth-child(1){ transition-delay:.00s }
[data-stagger].is-in > *:nth-child(2){ transition-delay:.06s }
[data-stagger].is-in > *:nth-child(3){ transition-delay:.12s }
[data-stagger].is-in > *:nth-child(4){ transition-delay:.18s }
[data-stagger].is-in > *:nth-child(5){ transition-delay:.24s }
[data-stagger].is-in > *:nth-child(6){ transition-delay:.30s }

[data-parallax]{ will-change:transform; }

/* ── 21 · RESPONSIVE ────────────────────────────────────────────────────── */
@media (max-width:1199px){
  .artist{ flex-basis:calc((100% - 2 * var(--gap)) / 2.5); }
}

@media (max-width:1199px){
  .nav-overlay__body{ grid-template-columns:1fr; align-content:center; gap:2.5rem; }
  .nav-aside{ grid-template-columns:1fr 1fr; align-items:center; }
  .nav-aside__cta{ grid-column:1 / -1; }
}

/* ── tablet ── */
@media (max-width:991px){
  :root{ --head-h:66px; }

  .site-head__inner{ grid-template-columns:auto 1fr auto; }
  .btn-headcta{ padding:.7rem 1.4rem; letter-spacing:-.01em; font-size:.74rem; }

  .intro__grid{ grid-template-columns:1fr; }
  .intro__media{ order:-1; }

  .investors__grid,
  .register__inner{ grid-template-columns:1fr; align-items:start; }


  .logo-wall{ grid-template-columns:repeat(3,1fr); }

  .artist{ flex-basis:calc((100% - 1.5 * var(--gap)) / 2.2); }

  .slot{ grid-template-columns:88px 1fr auto; gap:1rem; }

  .site-foot__top{ grid-template-columns:1fr 1fr; }
  .site-foot__social{ grid-column:1 / -1; }
}

/* ── mobile ── */
@media (max-width:767px){
  :root{ --head-h:62px; }

  /* Header keeps logo + REGISTER + MENU, but REGISTER compresses so all three
     stay on one line and every target stays >=44px tall. */
  .site-head__inner{ gap:.5rem; }
  .btn-headcta{ padding:.7rem 1rem; font-size:.72rem; letter-spacing:-.01em; }
  .btn-headcta__pulse{ animation:none; }
  .brand__lockup{ display:none; }
  .brand__icon{ display:block; height:26px; }

  .menu-trigger{ padding-left:.5rem; gap:.5rem; }
  .menu-trigger__text{ display:none; }
  .menu-trigger__icon{ width:26px; }
  .menu-trigger__icon i:nth-child(1){ width:26px }
  .menu-trigger__icon i:nth-child(3){ width:22px }

  .nav-overlay__body{ align-content:start; padding-top:calc(var(--head-h) + 2rem); }
  .nav-list a{ font-size:clamp(2rem,11vw,3.2rem); }
  .nav-aside{ grid-template-columns:1fr; gap:1.75rem; }

  .hero{ justify-content:flex-end; padding-bottom:2.5rem; }
  .hero__title{  }
  .hero__actions{ flex-direction:column; align-items:stretch; }
  .hero__actions .btn-x{ justify-content:space-between; }

  .intro__statement{ max-width:100%; }

  /* one full card plus a peek, so the swipe affordance survives on phones */
  .artist{ flex-basis:calc((100% - .6 * var(--gap)) / 1.25); }
  .artist__img img{ filter:grayscale(0) contrast(1.05) brightness(.85); }
  .artist__meta strong{ font-size:1.35rem; }

  .lineup-bar{ align-items:flex-start; }
  .slider-nav{ display:none; }          /* swipe replaces the arrows */
  .slider-hint{ display:flex; }

  .day-tab{ min-width:128px; padding:1.1rem 1.1rem; }
  .slot{ grid-template-columns:1fr auto; gap:.5rem 1rem; }
  .slot__time{ grid-column:1; }
  .slot__tag{ grid-column:2; grid-row:1; justify-self:end; }
  .slot h3{ grid-column:1 / -1; font-size:1.6rem; }

  .site-foot__top{ grid-template-columns:1fr; }
  .site-foot__nav{ gap:3rem; }
  .site-foot__base{ justify-content:center; text-align:center; }
}

@media (max-width:420px){
  .logo-wall{ grid-template-columns:repeat(2,1fr); }
}

/* pointer-coarse: no hover-dependent affordances left behind */
@media (hover:none){
  .artist__img img{ filter:grayscale(0) brightness(.85); }
  .mos--img img{ filter:grayscale(0) brightness(.85); }
}

/* ── 22 · REDUCED MOTION + PRINT ────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }

  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }

  /* everything that animates in must be visible at rest */
  .reveal{ opacity:1; transform:none; }
  [data-scroll-fade] .sw{ opacity:1; }
  [data-split] .w > i{ transform:none; }
  [data-stagger] > *{ opacity:1; transform:none; }
  .hero__title .line__in{ transform:none; }
  .nav-list a{ transform:none; }
  .nav-aside__block,.nav-aside__cta{ opacity:1; transform:none; }
  .slot{ opacity:1; transform:none; }
  .mask::after{ transform:scaleX(0); }
  .mask img{ transform:scale(1); }
  .preloader__mark,.preloader__word span,.preloader__meta{ opacity:1; transform:none; }

  /* hold the hero on a single frame instead of cycling */
  .hero__frame{ animation:none; opacity:0; transform:none; }
  .hero__frame[style*="--f:0"]{ opacity:1; }
  .hero__beam,.fx--grain,.ticker__track,.hero__scroll-line::after,
  .btn-headcta__pulse{ animation:none; }
  .ticker__track{ transform:none; }
  .cursor{ display:none!important; }
  .mos{ opacity:1; transform:none; }
  .mos--img img{ transform:scale(1); }
  .mos__rule{ transform:scaleX(1); }
}

@media print{
  .fx,.cursor,.preloader,.site-head,.nav-overlay,.scroll-progress{ display:none!important; }
  body{ background:#fff; color:#000; }
}


/* ── 23 · CALL DIALOG ───────────────────────────────────────────────────── */
.cdlg{ position:fixed; inset:0; z-index:700; display:grid; place-items:center; padding:var(--pad); }
.cdlg__scrim{
  position:absolute; inset:0;
  background:rgba(15,10,7,.78);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  animation:cdlgFade .35s var(--ease) both;
}
@keyframes cdlgFade{ from{ opacity:0 } to{ opacity:1 } }

.cdlg__panel{
  position:relative;
  width:min(560px, 100%);
  background:var(--surface);
  border:1px solid var(--line-2);
  padding:clamp(2rem,5vw,3.25rem);
  display:grid; gap:.5rem;
  animation:cdlgIn .45s var(--ease-out) both;
}
@keyframes cdlgIn{
  from{ opacity:0; transform:translateY(20px) scale(.98) }
  to  { opacity:1; transform:none }
}

.cdlg__title{
  font-family:var(--ff-display); font-weight:800;
  font-size:clamp(2rem,4.5vw,3rem);
  line-height:var(--lead-head); letter-spacing:var(--track-head);
  text-transform:capitalize;
  margin:0;
}
.cdlg__body{ margin:.25rem 0 1.5rem; max-width:44ch; }
/* a phone number must render exactly as written - the global
   capitalize rule was turning "xxx11" into "Xxx11" */
.cdlg__call{ justify-self:start; font-size:.95rem; text-transform:none; }

.cdlg__close{
  position:absolute; top:1rem; right:1rem;
  width:42px; height:42px; display:grid; place-items:center;
  border:1px solid var(--line-2);
  transition:background .3s var(--ease), border-color .3s, transform .3s var(--ease-out);
}
.cdlg__close span{
  position:absolute; width:16px; height:1.5px; background:var(--text);
  transition:background .3s;
}
.cdlg__close span:first-child{ transform:rotate(45deg) }
.cdlg__close span:last-child{ transform:rotate(-45deg) }
.cdlg__close:hover{ background:var(--accent); border-color:var(--accent); transform:rotate(90deg); }
.cdlg__close:hover span{ background:var(--cream); }

@media (prefers-reduced-motion:reduce){
  .cdlg__scrim,.cdlg__panel{ animation:none; }
}