@font-face {
  font-family: 'Michroma';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('assets/fonts/michroma-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 300;
  font-display: block;
  src: url('assets/fonts/ibm-plex-mono-300-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('assets/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url('assets/fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
}

@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('assets/fonts/anton-latin.woff2') format('woff2');
}

:root {
  --gold: #e06c26;
  --gold-dim: rgba(224, 108, 38, 0.55);
  --spray: #ff2e4d;
  --ink: #f6f1e7;
  --ink-dim: rgba(246, 241, 231, 0.55);
  --smoke: #140b06;
  --font-display: 'Michroma', sans-serif;
  --font-kinetic: 'Anton', Impact, 'Haettenschweiler', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  background: #000;
  color: var(--ink);
  font-family: var(--font-mono);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--gold); color: #000; }

/* ---------- GLOBAL ERROR FALLBACK ---------- */
#app-error-fallback {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(8, 4, 0, 0.9);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

#app-error-fallback.visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.fallback-panel {
  width: min(460px, 100%);
  border: 1px solid rgba(224, 108, 38, 0.35);
  background: rgba(12, 7, 2, 0.94);
  padding: 34px;
  text-align: center;
  box-shadow: 0 0 42px rgba(224, 108, 38, 0.14);
}

.fallback-kicker {
  margin-bottom: 18px;
  color: var(--gold);
  font-size: 10px;
  letter-spacing: 0.34em;
}

.fallback-panel h2 {
  font-size: 22px;
}

.fallback-panel p {
  margin-top: 18px;
  color: var(--ink-dim);
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: 0.12em;
}

.fallback-panel button {
  margin-top: 24px;
  border: 0;
  background: var(--gold);
  color: #1a1000;
  padding: 14px 18px;
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 0.28em;
}

/* ---------- LOADER ---------- */
#loader {
  position: fixed; inset: 0; z-index: 100;
  background: #0a0603;
  display: flex; align-items: center; justify-content: center;
  transition: opacity 0.9s ease, visibility 0.9s;
}
#loader.done { opacity: 0; visibility: hidden; }
.loader-inner { width: min(420px, 80vw); text-align: center; }
.loader-ring {
  width: 74px; height: 74px; margin: 0 auto 28px;
  border-radius: 50%;
  border: 1px solid rgba(224, 108, 38, 0.25);
  position: relative;
  animation: spin 3.2s linear infinite;
}
.loader-ring-fill {
  position: absolute; inset: -1px; border-radius: 50%;
  border: 1px solid transparent;
  border-top-color: var(--gold);
}
@keyframes spin { to { transform: rotate(360deg); } }
.loader-brand {
  font-family: var(--font-display);
  letter-spacing: 0.4em; text-indent: 0.4em;
  font-size: 24px; margin-bottom: 26px;
}
.loader-status {
  display: flex; justify-content: space-between;
  font-size: 10px; letter-spacing: 0.25em;
  color: var(--gold-dim); margin-bottom: 10px;
}
.loader-bar {
  height: 1px; background: rgba(224, 108, 38, 0.15);
  overflow: hidden;
}
#loader-bar-fill {
  height: 100%; width: 0%;
  background: var(--gold);
  box-shadow: 0 0 12px var(--gold);
  transition: width 0.2s ease;
}

/* ---------- VIDEO + GRADE ---------- */
#reel {
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  z-index: 1;
  object-fit: cover;
}
#grade {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background: var(--smoke);
  opacity: 0;
  mix-blend-mode: multiply;
}
#vignette {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.62) 100%);
}

/* ---------- TOP BAR ---------- */
#topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 36px;
  font-size: 10px; letter-spacing: 0.3em;
}
.brand {
  font-family: var(--font-display);
  font-size: 17px; letter-spacing: 0.3em;
}
.brand-dot {
  color: var(--spray); font-size: 7px;
  vertical-align: middle; margin: 0 3px;
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
.topbar-meta { color: var(--ink-dim); display: flex; gap: 12px; }
.topbar-meta .sep { color: var(--gold-dim); }
.topbar-cta {
  color: var(--gold); text-decoration: none;
  border: 1px solid rgba(224, 108, 38, 0.4);
  padding: 9px 18px;
  transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}
.topbar-cta:hover {
  background: var(--gold); color: #1a1000;
  box-shadow: 0 0 24px rgba(224, 108, 38, 0.5);
}

/* ---------- HUD ROUND METER ---------- */
/* The rail is navigation now, so it stays visible the whole way down — it is no
   longer gated to the track. (.hud-off / .hud-over-panel are retired.) */
#hud {
  position: fixed; right: 30px; top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 14px;
  font-size: 9px; letter-spacing: 0.28em;
  color: var(--gold-dim);
  text-align: right;
  pointer-events: auto;           /* it's real navigation now, not a readout */
  transition: opacity 0.4s ease;
}
/* right-rail section nav: labels sit left of a dot, active one lights up */
.nav-list { list-style: none; display: flex; flex-direction: column; gap: 13px; align-items: flex-end; }
.nav-link {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  text-decoration: none; color: var(--ink-dim);
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .26em; text-transform: uppercase;
  padding: 3px 0; cursor: pointer;
  transition: color .25s ease;
}
.nav-label {
  /* hidden until hover/active so the rail stays quiet, but kept in the DOM for a11y */
  opacity: 0; transform: translateX(6px);
  transition: opacity .25s ease, transform .25s ease;
  white-space: nowrap;
  text-shadow: 0 1px 6px rgba(0,0,0,.9);
}
.nav-dot {
  width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%;
  border: 1px solid rgba(246,241,231,.45); background: transparent;
  box-shadow: 0 1px 5px rgba(0,0,0,.7);
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.nav-link:hover, .nav-link:focus-visible { color: var(--ink); outline: none; }
.nav-link:hover .nav-label, .nav-link:focus-visible .nav-label { opacity: 1; transform: translateX(0); }
.nav-link:hover .nav-dot, .nav-link:focus-visible .nav-dot { border-color: var(--gold); transform: scale(1.25); }
/* current section */
.nav-link.is-active { color: var(--gold); }
.nav-link.is-active .nav-label { opacity: 1; transform: translateX(0); }
.nav-link.is-active .nav-dot { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 10px rgba(224,108,38,.8); }
/* the whole rail reveals its labels while the pointer is anywhere over it */
#hud:hover .nav-label { opacity: 1; transform: translateX(0); }

@media (max-width: 860px) { #hud { right: 14px; } .nav-list { gap: 15px; } .nav-label { display: none; } }
@media (prefers-reduced-motion: reduce) { .nav-link, .nav-label, .nav-dot { transition: none; } }

/* ---------- SCROLL TRACK ---------- */
/* ~1700vh keeps the scrub speed comfortable across the ~29s reel */
#track { position: relative; z-index: 3; height: 1360vh; pointer-events: none; }

/* ---------- OVERLAY PANELS ---------- */
.panel {
  position: fixed; inset: 0; z-index: 10;
  display: flex; align-items: center;
  padding: 0 8vw;
  opacity: 0; visibility: hidden;
  pointer-events: none;
}
.panel-inner { max-width: 720px; }
.panel-inner.center { margin: 0 auto; text-align: center; }
.panel-inner.wide { max-width: 980px; }
.panel-inner.right { margin-left: auto; margin-right: max(6vw, 130px); text-align: right; }

.kicker, .zone-tag {
  font-size: 10px; letter-spacing: 0.42em;
  color: var(--gold); margin-bottom: 26px;
}
.zone-tag::before { content: '— '; }

h1 {
  font-family: var(--font-display);
  font-size: clamp(38px, 6.4vw, 88px);
  line-height: 1.12; letter-spacing: 0.06em;
  text-shadow: 0 4px 40px rgba(0, 0, 0, 0.85);
}
.hero-logo-wrap { margin: 0; }
.hero-logo {
  display: block;
  width: min(660px, 82vw);
  height: auto;
  margin: 0 auto;
  filter: drop-shadow(0 8px 34px rgba(0, 0, 0, 0.75));
}
h2 {
  font-family: var(--font-kinetic);
  font-size: clamp(30px, 4.7vw, 68px);
  line-height: 1.06; letter-spacing: 0.02em;
  text-shadow: 0 4px 40px rgba(0, 0, 0, 0.88);
}
.sub {
  margin-top: 28px; font-size: 13px; letter-spacing: 0.28em;
  color: var(--ink-dim);
}
.fact {
  margin-top: 30px; font-size: 14px; line-height: 2;
  letter-spacing: 0.06em; color: var(--ink-dim);
  max-width: 480px;
}
.panel-inner.right .fact { margin-left: auto; }
.fact-num { color: var(--gold); font-size: 17px; }

.scroll-cue {
  margin-top: 64px;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  font-size: 9px; letter-spacing: 0.4em; color: var(--gold-dim);
}
.cue-line {
  width: 1px; height: 56px;
  background: linear-gradient(var(--gold), transparent);
  animation: cue 2s ease-in-out infinite;
  transform-origin: top;
}
@keyframes cue { 0% { transform: scaleY(0); } 55% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* judges grid */
/* enclosing frosted-glass box so the prize text reads over the busy hero */
.specs {
  margin: 48px auto 0;
  max-width: 840px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px;                                  /* the 1px gaps become the divider lines */
  text-align: left;
  background: rgba(246, 241, 231, 0.16);     /* divider colour shows through the gaps + outline */
  border: 1px solid rgba(246, 241, 231, 0.55);
  border-radius: 18px;
  overflow: hidden;                           /* clip cell corners to the rounded box */
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  backdrop-filter: blur(16px) saturate(1.1);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
}
.spec {
  padding: 22px 20px 24px;
  background: rgba(8, 5, 3, 0.56);            /* dark tint over the blur so the text pops */
}
.spec-line { height: 2px; width: 34px; background: var(--gold); margin-bottom: 14px; border-radius: 2px; }
.spec-k { font-size: 12px; letter-spacing: 0.16em; color: var(--ink); font-weight: 600; margin-bottom: 10px; }
.spec-v { font-size: 19px; letter-spacing: 0.02em; color: var(--gold); font-family: var(--font-kinetic); }
.spec-2nd { color: var(--ink-dim); font-size: 12px; }
.specs-note {
  margin-top: 30px; font-size: 10px; letter-spacing: 0.28em;
  color: var(--ink-dim); text-align: center;
}

/* hosts panel as full-bleed video: the clip replaces the scrub reel for this beat.
   It lives inside .panel, so it crossfades with the reel on the panel's own opacity. */
.hosts-bg{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%; object-fit:cover; display:block;
}
/* scrim so the display type still reads over the busy paint */
#p-hosts::after{
  content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  /* weighted to the foot of the frame, where the type now sits — the faces stay clear */
  background:
    linear-gradient(rgba(6,4,2,.30) 0%, rgba(6,4,2,.10) 34%, rgba(6,4,2,.52) 72%, rgba(6,4,2,.82) 100%);
}
/* type sits low so it clears all three faces instead of landing on the middle host */
#p-hosts{ align-items:flex-end; }
#p-hosts .panel-inner{ position:relative; z-index:2; margin-bottom:9vh; }
#p-hosts .zone-tag{ margin-bottom:14px; }

/* hosts panel: group shot between the "HOSTED BY" line and the names.
   Sized off height so it always fits the pinned panel; <img> swaps to <video> later. */
.hosts-media{
  display:block; margin:2.2vh auto 1.8vh;
  height:min(56vh, 46vw); aspect-ratio:5/4; width:auto;  /* 5:4 = the extended artwork's native ratio, so nothing is cropped */
  overflow:hidden; border-radius:10px;
  border:1px solid rgba(246,241,231,.18); background:#0a0603;
  box-shadow:0 26px 70px -28px rgba(0,0,0,.95);
}
.hosts-media img, .hosts-media video{ width:100%; height:100%; object-fit:cover; display:block; }
/* The Higgsfield clip carries its own camera push-in, so no CSS zoom on the video —
   stacking both read as a lurch. A still fallback still gets the scroll-driven push-in
   via --pp (this panel's own 0→1 scroll position, set in main.js). */
.hosts-media img{
  transform:scale(calc(1.03 + var(--pp, 0) * 0.15));
  transform-origin:50% 38%;
  will-change:transform;
}
@media (prefers-reduced-motion: reduce){
  .hosts-media img{ transform:scale(1.03); }
}
.hosts-names{
  font-family:var(--font-mono); font-size:clamp(10px,1.3vw,13px);
  letter-spacing:.26em; text-transform:uppercase; color:var(--ink);
}

.exp-line { margin: 10px 0; }
.exp-line:last-child { color: var(--gold); }

/* ---------- INTRO REEL (Option A: scroll-scrubbed intro pinned at the top) ---------- */
#intro{
  position:relative; z-index:50;
  height:360vh;
  background:radial-gradient(120% 90% at 50% 38%, #1b0f07 0%, #0a0603 62%, #050302 100%);
}
.intro-sticky{ position:sticky; top:0; height:100vh; overflow:hidden; }
.intro-skip{
  position:absolute; z-index:4; right:5cqmin; bottom:5cqmin;
  font-family:var(--font-mono); font-size:clamp(10px,1.6cqmin,14px); letter-spacing:.28em; text-transform:uppercase;
  color:var(--ink-dim); background:transparent; border:1px solid rgba(246,241,231,.28);
  padding:10px 16px; border-radius:999px; cursor:pointer; transition:.2s;
}
.intro-skip:hover{ color:var(--gold); border-color:var(--gold); }
.intro-hint{
  position:absolute; z-index:4; left:0; right:0; bottom:15cqh; text-align:center; pointer-events:none;
  font-family:var(--font-mono); font-size:clamp(11px,1.9cqmin,16px); letter-spacing:.34em; text-transform:uppercase; color:var(--ink-dim);
}
.intro-hint .arr{ display:inline-block; margin-left:.5em; animation:introArrow 1.6s ease-in-out infinite; }
@keyframes introArrow{ 0%,100%{ transform:translateY(0); opacity:.55; } 50%{ transform:translateY(5px); opacity:1; } }
/* logo title card that opens the intro before it dissolves into the beats */
.intro-card{ gap:3.2cqh; position:relative; }
.intro-card .h-logo{ width:min(720px,80cqw); }
.intro-card .h-eyebrow{ font-size:clamp(11px,1.9cqmin,17px); letter-spacing:.42em; }
/* hero image behind the opening logo card, with a scrim so the logo reads */
/* persistent hero image behind the WHOLE intro (flat, under the 3D beats) */
/* .intro-bg = the drift LAYER (gsap tilts/translates it — positive transforms only,
   so no negative-determinant flip for gsap to mis-decompose).
   .intro-bg-img = the actual image inside it: flip + overscan live here, untouched. */
.intro-bg{
  position:absolute; inset:0; z-index:0; will-change:transform;
  transform-origin:50% 64%;
}
.intro-bg-img{
  position:absolute; inset:0;
  transform:scaleX(-1) scale(1.26);    /* flip (face clear of the B) + enlarge (1.26 = overscan so the stronger tilt never reveals edges) */
  transform-origin:50% 64%;            /* zoom from lower-center so his face rises up, clear of the logo */
  background:
    radial-gradient(62% 56% at 50% 44%, rgba(6,4,2,.5) 0%, rgba(6,4,2,.3) 46%, rgba(6,4,2,.12) 78%),
    linear-gradient(rgba(6,4,2,.34), rgba(6,4,2,.62)),
    url('assets/hero-breaker.jpg?v=1') center 42%/cover no-repeat;
}
.intro-card .h-logo, .intro-card .h-eyebrow{ position:relative; z-index:1; }

/* ---------- HYPE REEL (Option B: autoplay 3D kinetic section) ---------- */
#hype{
  position:relative; z-index:10;
  min-height:100vh;
  overflow:hidden;
  background:radial-gradient(120% 90% at 50% 38%, #1b0f07 0%, #0a0603 62%, #050302 100%);
}
.hype-stage{
  position:relative; width:100%; height:100vh;
  container-type:size;
  perspective:1000px; perspective-origin:50% 50%;
  overflow:hidden;
}
.hype-world{ position:absolute; inset:0; transform-style:preserve-3d; will-change:transform; z-index:2; }

/* floating embers over the hero — same effect as the Gorilla War 52 hero, recoloured to the BotB orange */
.intro-embers{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.intro-embers i{
  position:absolute; bottom:-10px; width:4px; height:4px; border-radius:50%;
  background:#ffb02e; box-shadow:0 0 8px 2px var(--gold);
  opacity:0; animation:introRise linear infinite;
}
@keyframes introRise{
  0%   { transform:translateY(0) translateX(0); opacity:0; }
  10%  { opacity:.9; }
  100% { transform:translateY(-95vh) translateX(var(--dx)); opacity:0; }
}
@media (prefers-reduced-motion: reduce){ .intro-embers{ display:none; } }
.hbeat{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2.6cqh; text-align:center; padding:0 6vw; opacity:0;
  will-change:opacity, transform;
}
.h-eyebrow{ font-family:var(--font-mono); font-size:clamp(10px,1.7cqmin,15px); letter-spacing:.4em; text-transform:uppercase; color:var(--gold); }
.h-big{
  font-family:var(--font-kinetic);
  font-size:clamp(40px,10cqmin,128px); line-height:1.0; letter-spacing:.01em;
  color:var(--ink); text-shadow:0 6px 44px rgba(0,0,0,.72);
}
.h-big .hword{ display:inline-block; }
.h-sub{ font-family:var(--font-mono); font-size:clamp(11px,2cqmin,19px); letter-spacing:.24em; text-transform:uppercase; color:var(--ink-dim); }
.h-sub.accent, .h-big .accent{ color:var(--gold); }
.h-row{ display:flex; gap:3cqw; flex-wrap:wrap; justify-content:center; align-items:baseline; }
.hchip{
  font-family:var(--font-kinetic); font-size:clamp(34px,9cqmin,120px); color:var(--ink);
  border-bottom:.6cqh solid var(--gold); padding-bottom:.4cqh; line-height:1;
}
.h-money{
  font-family:var(--font-kinetic); font-size:clamp(80px,25cqmin,320px); line-height:.82;
  color:var(--gold); text-shadow:0 0 70px rgba(224,108,38,.4);
}
.h-logo{ width:min(640px,76cqw); height:auto; filter:drop-shadow(0 12px 46px rgba(0,0,0,.6)); }
.h-cue{ margin-top:1cqh; font-family:var(--font-mono); font-size:clamp(10px,1.7cqmin,15px); letter-spacing:.3em; text-transform:uppercase; color:var(--ink-dim); }
.hype-frame span{ position:absolute; width:3.4cqmin; height:3.4cqmin; border:1px solid rgba(246,241,231,.4); z-index:3; }
.hype-frame span:nth-child(1){ left:3.4cqmin; top:3.4cqmin; border-right:0; border-bottom:0; }
.hype-frame span:nth-child(2){ right:3.4cqmin; top:3.4cqmin; border-left:0; border-bottom:0; }
.hype-frame span:nth-child(3){ left:3.4cqmin; bottom:3.4cqmin; border-right:0; border-top:0; }
.hype-frame span:nth-child(4){ right:3.4cqmin; bottom:3.4cqmin; border-left:0; border-top:0; }
.hype-grain{
  position:absolute; inset:-40%; z-index:2; pointer-events:none; opacity:.05; 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='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- LINEUP (DJs / Judges — reusable cards) ---------- */
.lineup{
  position:relative; z-index:10;
  background:radial-gradient(120% 90% at 50% 0%, #160c05 0%, #0a0603 60%, #050302 100%);
  padding:12vh 6vw;
}
.lineup + .lineup{ padding-top:2vh; }
.lineup-inner{ max-width:1100px; margin:0 auto; }
.lineup-head{ text-align:center; margin-bottom:6vh; }
.lineup-head h2{ margin-top:1.4vh; }
.lineup-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:3vw; }
.lineup-card{ margin:0; }
.lineup-media{
  position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:8px;
  border:1px solid rgba(246,241,231,.14); background:#0a0603;
  box-shadow:0 18px 50px -24px rgba(0,0,0,.9);
}
.lineup-video{ width:100%; height:100%; object-fit:cover; display:block; }
.lineup-badge{
  position:absolute; top:12px; left:12px; z-index:2;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.28em; text-transform:uppercase;
  color:#1a1000; background:var(--gold); padding:5px 10px; border-radius:3px;
}
.lineup-cap{ display:flex; flex-direction:column; gap:5px; padding:16px 4px 0; }
.lineup-name{ font-family:var(--font-kinetic); font-size:clamp(24px,3.4vw,42px); letter-spacing:.01em; color:var(--ink); line-height:1; }
.lineup-role{ font-family:var(--font-mono); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-dim); }
/* judges: same card pattern, portrait crops, 4-up */
.lineup-grid.is-judges{ grid-template-columns:repeat(4,1fr); gap:1.8vw; }
.is-judges .lineup-media{ aspect-ratio:2/3; }
.is-judges .lineup-cap{ padding:12px 2px 0; }
.is-judges .lineup-name{ font-size:clamp(17px,1.9vw,26px); }
/* special guests: static portraits, slightly wider crop than the judges.
   flex rather than grid so an incomplete final row CENTRES instead of hanging
   left — the guest count keeps changing (8 → 9 → more). */
.lineup-grid.is-guests{
  display:flex; flex-wrap:wrap; justify-content:center; gap:1.8vw;
}
.is-guests .lineup-card{ flex:0 1 calc((100% - 3 * 1.8vw) / 4); }
.is-guests .lineup-media{ aspect-ratio:3/4; }
.is-guests .lineup-cap{ padding:12px 2px 0; }
.is-guests .lineup-name{ font-size:clamp(17px,1.9vw,26px); }
.is-guests .lineup-role{ font-size:10px; letter-spacing:.14em; line-height:1.5; }
.lineup-photo{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:860px){
  .lineup-grid.is-judges{ grid-template-columns:repeat(2,1fr); gap:4vw; }
  .lineup-grid.is-guests{ gap:4vw; }
  .is-guests .lineup-card{ flex-basis:calc((100% - 4vw) / 2); }
}

/* ---------- PROMO (click-to-play) ---------- */
.promo-player{
  position:relative; max-width:900px; margin:0 auto;
  aspect-ratio:16/9; overflow:hidden; border-radius:10px;
  border:1px solid rgba(246,241,231,.18); background:#0a0603;
  box-shadow:0 26px 70px -28px rgba(0,0,0,.95);
}
.promo-poster, .promo-media{ width:100%; height:100%; object-fit:cover; display:block; border:0; }
.promo-player::after{   /* scrim so the button reads over any frame */
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(60% 60% at 50% 50%, rgba(6,4,2,.30), rgba(6,4,2,.60));
  transition:opacity .3s ease;
}
.promo-player.is-playing::after{ opacity:0; }
.promo-play{
  position:absolute; inset:0; z-index:2; margin:0; width:100%; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  background:none; border:0; cursor:pointer; color:var(--ink);
  font-family:var(--font-mono); font-size:10px; letter-spacing:.28em; text-transform:uppercase;
}
.promo-play-icon{
  width:74px; height:74px; border-radius:50%;
  border:1px solid rgba(246,241,231,.55); background:rgba(6,4,2,.45);
  position:relative; transition:transform .25s ease, border-color .25s ease, background .25s ease;
}
.promo-play-icon::before{   /* triangle, nudged right so it looks optically centred */
  content:''; position:absolute; top:50%; left:52%; transform:translate(-50%,-50%);
  border-style:solid; border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent var(--ink);
}
.promo-play:hover .promo-play-icon, .promo-play:focus-visible .promo-play-icon{
  transform:scale(1.08); border-color:var(--gold); background:rgba(224,108,38,.22);
}
.promo-play:focus-visible{ outline:none; }
.promo-play-label{ text-shadow:0 1px 6px rgba(0,0,0,.9); }
@media (prefers-reduced-motion: reduce){ .promo-play-icon{ transition:none; } }

.lineup-tba{
  text-align:center; font-family:var(--font-mono); font-size:clamp(12px,1.6vw,16px);
  letter-spacing:.24em; text-transform:uppercase; color:var(--ink-dim);
  border:1px dashed rgba(246,241,231,.2); border-radius:8px; padding:8vh 6vw;
}

/* ---------- GET INVOLVED ---------- */
.involved-inner{ max-width:980px; width:100%; margin:0 auto; }
.involved-head{ text-align:center; margin-bottom:5vh; }
.involved-head .tickets-sub{ margin-top:2vh; }
.involved-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:2.4vw; text-align:left; }
.involved-card{
  border:1px solid rgba(224,108,38,.28); border-radius:10px; padding:30px;
  background:rgba(224,108,38,.05);
}
.involved-title{ font-family:var(--font-kinetic); font-size:clamp(22px,2.6vw,34px); color:var(--ink); letter-spacing:.01em; }
.involved-note{ margin:10px 0 22px; font-family:var(--font-mono); font-size:12px; line-height:1.9; letter-spacing:.05em; color:var(--ink-dim); }
.io-form{ display:flex; flex-direction:column; gap:13px; }
.io-form input, .io-form select, .io-form textarea{
  background:transparent; border:1px solid rgba(224,108,38,.28); border-radius:5px;
  padding:14px 16px; color:var(--ink);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.2em; outline:none; transition:border-color .3s;
}
.io-form textarea{ resize:vertical; letter-spacing:.1em; line-height:1.6; }
/* Native select arrows sit at a fixed offset from the border and ignore padding, so
   drop the OS widget and draw our own chevron — inset to match the 16px text padding. */
.io-form select{
  text-transform:uppercase; cursor:pointer;
  -webkit-appearance:none; appearance:none; padding-right:40px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23F6F1E7' stroke-opacity='0.65' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 16px center;
}
.io-form option{ background:#140b06; color:var(--ink); letter-spacing:normal; }
.io-form input:focus, .io-form select:focus, .io-form textarea:focus{ border-color:var(--gold); box-shadow:0 0 18px rgba(224,108,38,.15); }
.io-form input::placeholder, .io-form textarea::placeholder{ color:rgba(246,241,231,.3); }
.io-form button{
  background:var(--gold); border:0; color:#1a1000; padding:16px; border-radius:5px;
  font-family:var(--font-kinetic); font-size:14px; letter-spacing:.16em; cursor:pointer;
  transition:box-shadow .3s, transform .3s;
}
.io-form button:hover{ box-shadow:0 0 40px rgba(224,108,38,.5); transform:translateY(-1px); }
.io-form button:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.io-done{ font-family:var(--font-mono); font-size:11px; letter-spacing:.12em; color:var(--gold); margin:2px 0 0; }
.contact-alt{ margin-top:18px; font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; color:var(--ink-dim); }
.contact-mail{ background:none; border:0; color:var(--gold); cursor:pointer; font:inherit; letter-spacing:.06em; text-decoration:underline; padding:0; }

@media (max-width:820px){
  .lineup-grid{ grid-template-columns:1fr; gap:6vw; }
  .involved-grid{ grid-template-columns:1fr; gap:6vw; }
}

/* ---------- REGISTER / CTA ---------- */
#register {
  position: relative; z-index: 10;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(rgba(0,0,0,0) 0%, #000 18%);
  padding: 12vh 6vw 9vh;
}
.tickets-inner { text-align: center; max-width: 640px; width: 100%; }
#register h2 { font-size: clamp(34px, 5.4vw, 72px); }
.tickets-sub {
  margin-top: 30px; font-size: 12px; line-height: 2.2;
  letter-spacing: 0.2em; color: var(--ink-dim);
}
.tickets-form {
  margin-top: 54px;
  display: flex; flex-direction: column; gap: 16px;
  max-width: 380px; margin-left: auto; margin-right: auto;
}
.tickets-form input {
  background: transparent; border: 1px solid rgba(224, 108, 38, 0.28);
  padding: 16px 18px; color: var(--ink);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.3em;
  outline: none; transition: border-color 0.3s;
}
.tickets-form input:focus { border-color: var(--gold); box-shadow: 0 0 20px rgba(224,108,38,0.15); }
.tickets-form input::placeholder { color: rgba(246, 241, 231, 0.3); }
.tickets-form button {
  background: var(--gold); border: none; color: #1a1000;
  padding: 18px; font-family: var(--font-display);
  font-size: 12px; letter-spacing: 0.32em; cursor: pointer;
  transition: box-shadow 0.3s, transform 0.3s;
}
.tickets-form button:hover { box-shadow: 0 0 44px rgba(224, 108, 38, 0.55); transform: translateY(-1px); }
.tickets-alt {
  margin-top: 26px; font-size: 11px; letter-spacing: 0.16em;
}
.tickets-alt a { color: var(--spray); text-decoration: none; }
.tickets-alt a:hover { text-decoration: underline; }
#register footer {
  margin-top: 90px;
  display: flex; justify-content: space-between;
  font-size: 9px; letter-spacing: 0.28em; color: rgba(246, 241, 231, 0.3);
}

@media (max-width: 820px) {
  #hud { right: 14px; }
  .hud-rail { height: 24vh; }
  .topbar-meta { display: none; }
  .specs { grid-template-columns: repeat(2, 1fr); }
  #register footer { flex-direction: column; gap: 10px; align-items: center; }
}