/* ═══════════════════════════════════════════════════════════════════
   NULL CARNIVAL — Edition VII
   Fairground print gone nocturnal. Every plate is painted metal,
   every rule is gilt hairline, and the accent colour is a channel
   the whole page switches together.
   ═══════════════════════════════════════════════════════════════════ */

/* Registered so the channel crossfade is animatable rather than a cut. */
@property --acc   { syntax: "<color>"; inherits: true; initial-value: #FF8A2B; }
@property --acc-2 { syntax: "<color>"; inherits: true; initial-value: #E0B457; }

:root {
  --pitch:  #050309;
  --ink:    #0A0711;
  --ink-2:  #150D1F;
  --ink-3:  #1E1329;
  --bone:   #F4EADA;
  --dim:    #A2937F;
  --faint:  #6F6355;

  --sodium:  #FF8A2B;
  --gilt:    #E0B457;
  --gilt-d:  #8A6B2E;
  --mercury: #6FF2C4;
  --carmine: #FF2D55;

  --rule:   rgba(224, 180, 87, 0.22);
  --rule-2: rgba(244, 234, 218, 0.10);
  --plate:  linear-gradient(178deg, rgba(30, 19, 41, 0.80), rgba(10, 7, 17, 0.88));

  --f-disp: "Bodoni Moda", Didot, "Playfair Display", Georgia, serif;
  --f-body: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "Space Mono", ui-monospace, Consolas, monospace;

  --gut: clamp(20px, 4vw, 64px);
  --max: 1280px;

  /* the null — document-space pointer, radius, strength. app.js writes these. */
  --pxd: -9999px;
  --pyd: -9999px;
  --nr: 0px;

  --acc:   #FF8A2B;
  --acc-2: #E0B457;
}

body[data-ch="sodium"]  { --acc: #FF8A2B; --acc-2: #E0B457; }
body[data-ch="mercury"] { --acc: #6FF2C4; --acc-2: #9DF6DA; }
body[data-ch="carmine"] { --acc: #FF2D55; --acc-2: #FF9DAF; }
body[data-ch="gilt"]    { --acc: #E0B457; --acc-2: #F2D79A; }

body { transition: --acc 620ms ease, --acc-2 620ms ease; }

/* ── reset ─────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--ink);
}
body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--f-body);
  font-size: clamp(16px, 1.05vw, 18px);
  line-height: 1.62;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea { font: inherit; color: inherit; }

.vh {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: 12px; top: -60px; z-index: 200;
  padding: 10px 16px; background: var(--gilt); color: var(--pitch);
  font: 600 13px/1 var(--f-mono); letter-spacing: 0.08em;
  text-transform: uppercase; text-decoration: none;
  transition: top 0.2s ease;
}
.skip:focus { top: 12px; }
:focus-visible {
  outline: 2px solid var(--acc);
  outline-offset: 3px;
}

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }

/* ── the stage ─────────────────────────────────────────────────── */
.stage {
  position: fixed; inset: 0; z-index: 0;
  background: var(--ink);
  contain: strict;
}
#gl { width: 100%; height: 100%; display: block; }
.no3d-back {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity 1.1s ease;
  pointer-events: none;
}
.no3d-back svg { width: 100%; height: 100%; }
body.no3d .no3d-back { opacity: 1; }
body.no3d #gl { opacity: 0; }

/* texture veil — always faintly present, carries the whole look when no3d */
.veil {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  background:
    repeating-linear-gradient(180deg,
      rgba(244, 234, 218, 0.022) 0 1px,
      transparent 1px 3px);
  mix-blend-mode: screen;
  opacity: 0.5;
}
body.no3d .veil { opacity: 1; }
.vignette {
  position: fixed; inset: 0; z-index: 3; pointer-events: none;
  background:
    radial-gradient(130% 96% at 50% 46%, transparent 38%, rgba(5, 3, 9, 0.62) 100%),
    linear-gradient(180deg, rgba(5, 3, 9, 0.55) 0%, transparent 22%, transparent 74%, rgba(5, 3, 9, 0.72) 100%);
}
body.no3d .vignette { opacity: 0.75; }

/* the mobile null band — a fixed lens content is scrolled through */
.nullband {
  position: fixed; left: 0; right: 0; z-index: 4;
  top: 50%; height: 34vh; transform: translateY(-50%);
  pointer-events: none;
  border-top: 1px solid rgba(111, 242, 196, 0.20);
  border-bottom: 1px solid rgba(111, 242, 196, 0.20);
  background: linear-gradient(180deg,
    rgba(111, 242, 196, 0.055), transparent 22%, transparent 78%, rgba(111, 242, 196, 0.055));
}
.nullband::before,
.nullband::after {
  content: ""; position: absolute; left: var(--gut); width: 10px; height: 10px;
  border: 1px solid var(--mercury); opacity: 0.55;
}
.nullband::before { top: -5px; border-right: 0; border-bottom: 0; }
.nullband::after  { bottom: -5px; border-right: 0; border-top: 0; }

/* ── the null (DOM half of the mechanic) ───────────────────────── */
.nul { position: relative; display: inline-block; }
/* Masked to the hole, this layer paints an ink void over the public name
   with the crew's own name for the booth stencilled in it — so the swap
   reads as something punched through the type, not two texts colliding. */
.nul-b {
  position: absolute; inset: -0.18em -0.5em;
  display: flex; align-items: center; justify-content: center;
  white-space: nowrap; pointer-events: none;
  background: rgba(5, 3, 9, 0.93);
  font-family: var(--f-mono); font-weight: 700;
  font-size: 0.40em; letter-spacing: 0.18em; line-height: 1;
  text-transform: uppercase;
  color: var(--mercury);
}
html.js-nul .nul-a,
html.js-nul .nul-b {
  -webkit-mask-image: var(--nulm);
  mask-image: var(--nulm);
}
html.js-nul .nul-a {
  --nulm: radial-gradient(circle var(--nr) at
    calc(var(--pxd) - var(--ex, 0px)) calc(var(--pyd) - var(--ey, 0px)),
    transparent 50%, rgba(0, 0, 0, 0.4) 74%, #000 100%);
}
/* The crew label sits on one line at the element's vertical centre, so
   its window has to be wider than the hole itself — otherwise the null
   erases the public name over a word the label never reaches. */
html.js-nul .nul-b {
  --nulm: radial-gradient(circle calc(var(--nr) * 1.4) at
    calc(var(--pxd) - var(--ex, 0px)) calc(var(--pyd) - var(--ey, 0px)),
    #000 34%, rgba(0, 0, 0, 0.62) 64%, transparent 88%);
}

/* ── HUD ───────────────────────────────────────────────────────── */
.hud {
  position: fixed; right: var(--gut); bottom: 18px; z-index: 40;
  display: flex; align-items: center; gap: 12px;
  padding: 7px 12px;
  background: rgba(5, 3, 9, 0.93);
  border: 1px solid var(--rule);
  font: 400 11px/1 var(--f-mono); letter-spacing: 0.14em;
  color: var(--faint); text-transform: uppercase;
  pointer-events: none;
}
.hud-turn { display: flex; align-items: center; gap: 8px; color: var(--dim); }
.turn-dial {
  position: relative; width: 18px; height: 18px; border-radius: 50%;
  border: 1px solid var(--rule); display: block;
}
.turn-hand {
  position: absolute; left: 50%; top: 50%; width: 1px; height: 7px;
  background: var(--acc); transform-origin: 50% 100%;
  transform: translate(-50%, -100%) rotate(0deg);
}
.hud-sep { width: 14px; height: 1px; background: var(--rule); }
.hud-station { color: var(--acc); }
.hud-count { font-variant-numeric: tabular-nums; }

/* ── header ────────────────────────────────────────────────────── */
.top {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; gap: 18px;
  padding: 14px var(--gut);
  background: linear-gradient(180deg, rgba(5, 3, 9, 0.97) 0%, rgba(5, 3, 9, 0.93) 58%, rgba(5, 3, 9, 0.72) 82%, transparent);
}
.brand {
  display: flex; align-items: center; gap: 9px;
  text-decoration: none; color: var(--bone);
  font: 700 13px/1 var(--f-mono); letter-spacing: 0.2em;
  flex: 0 0 auto;
}
.brand-mark { width: 22px; height: 22px; color: var(--acc); }
.brand-mark svg { width: 100%; height: 100%; }
.brand:hover .brand-mark { color: var(--gilt); }

.ring-nav { display: flex; gap: 2px; margin-left: auto; }
.stn {
  position: relative; padding: 8px 13px;
  font: 400 11px/1 var(--f-mono); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--faint);
  transition: color 0.28s ease;
}
.stn::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 3px;
  height: 1px; background: var(--acc);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 0.34s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.stn:hover { color: var(--bone); }
.stn.is-on { color: var(--bone); }
.stn.is-on::after, .stn:hover::after { transform: scaleX(1); }

.top-act { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.snd {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 12px; border: 1px solid var(--rule);
  font: 400 10px/1 var(--f-mono); letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--dim);
  transition: border-color 0.3s ease, color 0.3s ease;
}
.snd:hover { color: var(--bone); border-color: var(--acc); }
.snd-eq { display: flex; align-items: flex-end; gap: 2px; height: 10px; }
.snd-eq i { width: 2px; height: 3px; background: currentColor; display: block; }
.snd[aria-pressed="true"] { color: var(--acc); border-color: var(--acc); }
.snd[aria-pressed="true"] .snd-eq i { animation: eq 0.9s ease-in-out infinite; }
.snd[aria-pressed="true"] .snd-eq i:nth-child(2) { animation-delay: 0.14s; }
.snd[aria-pressed="true"] .snd-eq i:nth-child(3) { animation-delay: 0.28s; }
.snd[aria-pressed="true"] .snd-eq i:nth-child(4) { animation-delay: 0.42s; }
@keyframes eq { 0%, 100% { height: 3px; } 50% { height: 10px; } }

.burger {
  display: none; width: 38px; height: 34px;
  border: 1px solid var(--rule);
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.burger span[aria-hidden] { width: 15px; height: 1px; background: var(--bone); display: block; }

/* ── CTA ───────────────────────────────────────────────────────── */
.cta {
  position: relative; display: inline-flex; align-items: center; gap: 9px;
  text-decoration: none; white-space: nowrap;
  font-family: var(--f-mono); letter-spacing: 0.14em; text-transform: uppercase;
  border: 1px solid var(--gilt); color: var(--gilt);
  padding: 11px 20px; font-size: 11px;
  transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
  overflow: hidden;
}
.cta::before {
  content: ""; position: absolute; inset: 0; background: var(--gilt);
  transform: scaleY(0); transform-origin: 50% 100%; z-index: -1;
  transition: transform 0.36s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cta:hover { color: var(--pitch); }
.cta:hover::before { transform: scaleY(1); }
.cta-sm { padding: 8px 14px; font-size: 10px; }
.cta-lg { padding: 15px 26px; font-size: 12px; }
.cta-ghost { border-color: var(--rule-2); color: var(--dim); }
.cta-ghost::before { background: var(--bone); }
.cta-ghost:hover { border-color: var(--bone); color: var(--pitch); }
.cta-x { font-size: 13px; }

/* ── ribbon ────────────────────────────────────────────────────── */
.ribbon {
  position: fixed; top: 62px; left: 0; right: 0; z-index: 45;
  overflow: hidden;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: rgba(5, 3, 9, 0.55);
  padding: 6px 0;
}
.ribbon-track { display: flex; width: max-content; animation: ribbonRun 42s linear infinite; }
.ribbon-row {
  display: flex; flex-shrink: 0; align-items: center; gap: 2rem; padding-right: 2rem;
  font: 400 10px/1 var(--f-mono); letter-spacing: 0.26em;
  color: var(--dim); text-transform: uppercase; white-space: nowrap;
}
.ribbon-row i { color: var(--acc); font-style: normal; font-size: 8px; }
@keyframes ribbonRun { to { transform: translate3d(-50%, 0, 0); } }

/* ── sections ──────────────────────────────────────────────────── */
main { position: relative; z-index: 5; }
.stn-sec { position: relative; padding: clamp(96px, 15vh, 190px) 0; }
/* every content station stands on a soft ink floor so the world can be
   as loud as it likes behind it without ever taking the copy with it */
.stn-sec::before {
  content: ""; position: absolute; inset: -6vh 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(106% 62% at 50% 52%, rgba(5, 3, 9, 0.50) 0%, rgba(5, 3, 9, 0.24) 52%, rgba(5, 3, 9, 0) 100%),
    linear-gradient(180deg, transparent, rgba(5, 3, 9, 0.16) 18%, rgba(5, 3, 9, 0.16) 82%, transparent);
}
.sec-gate::before { display: none; }
.sec-head { position: relative; margin-bottom: clamp(34px, 5vw, 64px); }
.sec-no {
  display: block; margin-bottom: 12px;
  font: 400 11px/1 var(--f-mono); letter-spacing: 0.3em; color: var(--acc);
}
.sec-h {
  font-family: var(--f-disp); font-weight: 900;
  font-size: clamp(44px, 8.2vw, 128px); line-height: 0.84;
  letter-spacing: -0.02em; color: var(--bone);
  text-wrap: balance;
}
.sec-h .ch { display: inline-block; will-change: transform; }
.sec-h .ch.tear { animation: tear 0.4s steps(3, end) both; }
@keyframes tear {
  0%   { transform: translate3d(0, 0, 0) skewX(0deg); }
  35%  { transform: translate3d(0.16em, -0.06em, 0) skewX(-11deg); }
  70%  { transform: translate3d(-0.09em, 0.04em, 0) skewX(6deg); }
  100% { transform: translate3d(0, 0, 0) skewX(0deg); }
}
.sec-sub {
  margin-top: 18px; max-width: 46ch;
  color: var(--dim); font-size: 1.02rem;
}

/* ── 01 gate ───────────────────────────────────────────────────── */
.sec-gate {
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: 130px; padding-bottom: 92px;
}
.gate-in {
  position: relative; z-index: 1;
  width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut);
}
/* the gate keeps its own floor, softer than the content stations */
.sec-gate::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
  z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(5, 3, 9, 0.72) 46%, rgba(5, 3, 9, 0.9) 100%);
}
.eyebrow {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font: 400 11px/1 var(--f-mono); letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--dim); margin-bottom: 22px;
}
.ey-mark { color: var(--acc); font-size: 8px; }
.ey-sep { color: var(--faint); }

.wordmark { position: relative; }
.wm-plate {
  display: flex; justify-content: center; width: 100%;
  filter: drop-shadow(0 26px 60px rgba(5, 3, 9, 0.72));
  transform: translate3d(calc(var(--gx, 0) * 7px), calc(var(--gy, 0) * 5px), 0)
             rotate(calc(var(--gx, 0) * 0.32deg));
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* the banner is a sign hung in front of the booth, not a backdrop —
   it has to leave the arch and the portal behind it visible */
.wm-plate svg { height: clamp(132px, 27vh, 268px); width: auto; max-width: 100%; }
.cutword {
  font-family: var(--f-disp); font-weight: 900;
  font-size: 250px; letter-spacing: 12px; fill: #000;
}
/* the cut edge of the letterforms catches the gilt of the painted plate */
.cut-edge { fill: none; stroke: var(--gilt); stroke-width: 3.2; opacity: 0.9; }
.plate-rule { stroke: var(--gilt); stroke-width: 1.6; opacity: 0.42; }
.plate-rule-in { stroke: var(--gilt); stroke-width: 1; opacity: 0.26; }
.bulbs {
  fill: none; stroke: var(--gilt); stroke-width: 10;
  stroke-linecap: round; stroke-dasharray: 0 46;
  animation: bulbChase 2.6s linear infinite;
}
.bulbs-glow {
  stroke: var(--acc); stroke-width: 21; opacity: 0.30;
  filter: blur(7px); animation-duration: 2.6s;
}
@keyframes bulbChase { to { stroke-dashoffset: -46; } }

.wm-word {
  display: block; margin-top: clamp(6px, 1vw, 16px);
  font-family: var(--f-disp); font-weight: 400;
  font-size: clamp(30px, 6.6vw, 96px); line-height: 0.9;
  letter-spacing: clamp(0.08em, 1.4vw, 0.28em);
  text-indent: clamp(0.08em, 1.4vw, 0.28em);
  color: var(--gilt); text-align: center;
  text-shadow: 0 2px 26px rgba(5, 3, 9, 0.95), 0 0 92px rgba(5, 3, 9, 0.85);
}
.wm-word .ch {
  display: inline-block;
  animation: wmFloat 5.4s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -0.44s);
  will-change: transform;
}
@keyframes wmFloat {
  0%, 100% { transform: translate3d(0, 0.03em, 0); }
  50%      { transform: translate3d(0, -0.055em, 0); }
}

.gate-meta { margin-top: clamp(26px, 4vw, 44px); }
.gm-line { font-size: 1.06rem; color: var(--bone); }
.gm-line b { font-weight: 700; }
.gm-sep { color: var(--acc); padding: 0 6px; }
.gm-site { color: var(--dim); margin-top: 4px; }
.gate-act { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(24px, 3.4vw, 38px); }
.gate-note {
  margin-top: 20px; max-width: 44ch;
  font: 400 11px/1.7 var(--f-mono); letter-spacing: 0.06em; color: var(--faint);
}

.scroll-cue {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font: 400 9px/1 var(--f-mono); letter-spacing: 0.4em; color: var(--faint);
}
.scroll-cue i {
  width: 1px; height: 40px; display: block;
  background: linear-gradient(180deg, transparent, var(--acc));
  animation: cueDrop 2.4s ease-in-out infinite;
  transform-origin: 50% 0;
}
@keyframes cueDrop { 0%, 100% { transform: scaleY(0.35); opacity: 0.4; } 50% { transform: scaleY(1); opacity: 1; } }

/* ── plates ────────────────────────────────────────────────────── */
.plate-box {
  position: relative;
  background: var(--plate);
  border: 1px solid var(--rule-2);
  backdrop-filter: blur(1.5px);
}
.plate-box::after {
  content: ""; position: absolute; inset: 6px; pointer-events: none;
  background-image:
    radial-gradient(circle 1.6px at 0 0,       var(--gilt-d) 99%, transparent 100%),
    radial-gradient(circle 1.6px at 100% 0,    var(--gilt-d) 99%, transparent 100%),
    radial-gradient(circle 1.6px at 0 100%,    var(--gilt-d) 99%, transparent 100%),
    radial-gradient(circle 1.6px at 100% 100%, var(--gilt-d) 99%, transparent 100%);
  background-repeat: no-repeat;
  opacity: 0.7;
}

/* ── 02 premise ────────────────────────────────────────────────── */
.premise-grid {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(28px, 4vw, 64px); align-items: start;
}
.premise-body p { max-width: 56ch; }
.premise-body p + p { margin-top: 18px; color: var(--dim); }
.lede {
  font-size: clamp(19px, 1.65vw, 25px); line-height: 1.44;
  color: var(--bone); font-weight: 500;
}
.facts { display: grid; gap: 1px; background: var(--rule-2); border: 1px solid var(--rule-2); }
.facts li {
  position: relative; display: grid;
  grid-template-columns: 42px 1fr; gap: 4px 14px;
  padding: 20px 22px;
  background: linear-gradient(178deg, rgba(30, 19, 41, 0.72), rgba(10, 7, 17, 0.86));
  transition: background-color 0.4s ease;
}
.facts li:hover { background-color: rgba(224, 180, 87, 0.05); }
.facts b {
  grid-row: span 2; font: 400 11px/1 var(--f-mono);
  letter-spacing: 0.16em; color: var(--acc); padding-top: 5px;
}
.facts span { font-weight: 700; font-size: 1rem; letter-spacing: 0.01em; }
.facts em {
  font-style: normal; color: var(--dim);
  font-size: 0.86rem; line-height: 1.6;
}

/* ── 03 midway ─────────────────────────────────────────────────── */
.booths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--rule-2); border: 1px solid var(--rule-2); }
.booth {
  position: relative; padding: clamp(24px, 2.4vw, 36px);
  background: linear-gradient(178deg, rgba(30, 19, 41, 0.74), rgba(10, 7, 17, 0.9));
  transition: background-color 0.5s ease, transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  cursor: crosshair; outline-offset: -3px;
}
.booth::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--acc); transform: scaleY(0); transform-origin: 50% 0;
  transition: transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.booth:hover, .booth:focus-visible { background-color: rgba(224, 180, 87, 0.045); }
.booth:hover::before, .booth:focus-visible::before { transform: scaleY(1); }
.booth-no {
  display: block; font: 400 10px/1 var(--f-mono);
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--faint);
  margin-bottom: 14px;
}
.booth-h {
  font-family: var(--f-disp); font-weight: 700;
  font-size: clamp(23px, 2.1vw, 33px); line-height: 1.06;
  letter-spacing: -0.01em; margin-bottom: 14px;
  transition: transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.booth:hover .booth-h, .booth:focus-visible .booth-h { transform: translateX(9px); }
.booth p { color: var(--dim); font-size: 0.93rem; line-height: 1.66; }
.booth-foot {
  display: flex; align-items: center; gap: 8px; margin-top: 20px;
  font: 400 10px/1 var(--f-mono); letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--faint);
}
.booth-foot i { color: var(--acc); font-style: normal; font-size: 7px; }

/* ── 04 program ────────────────────────────────────────────────── */
/* the running order as it exists on the night: a punched sheet off the
   production clipboard, ruled, stamped and hole-fed */
.program {
  position: relative;
  border: 1px solid var(--rule);
  background: linear-gradient(178deg, rgba(30, 19, 41, 0.80), rgba(10, 7, 17, 0.94));
  padding: 6px clamp(14px, 1.8vw, 26px) 6px 54px;
}
.program::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 42px;
  border-right: 1px dashed var(--rule);
  background-image: radial-gradient(circle 5px at 21px 17px, var(--pitch) 96%, transparent 100%);
  background-size: 42px 38px;
  pointer-events: none;
}
.program::after {
  content: "SHEET 1/1 \2014  PRODUCTION COPY";
  position: absolute; right: 14px; top: -9px;
  padding: 3px 8px; background: var(--ink);
  font: 400 8.5px/1 var(--f-mono); letter-spacing: 0.2em;
  color: var(--faint); text-transform: uppercase;
}
.prg {
  display: grid; grid-template-columns: 120px minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 18px; align-items: baseline;
  padding: 20px 4px; border-bottom: 1px solid var(--rule-2);
  transition: background-color 0.4s ease, padding-left 0.4s ease;
  outline-offset: -2px;
}
.prg:hover, .prg:focus-visible { background-color: rgba(224, 180, 87, 0.045); padding-left: 14px; }
.prg-t {
  font-family: var(--f-mono); font-size: 0.9rem; letter-spacing: 0.06em;
  color: var(--acc); font-variant-numeric: tabular-nums;
  border: 1px solid var(--rule); padding: 3px 7px; align-self: start;
  transition: transform 0.42s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.4s ease;
}
.prg:hover .prg-t, .prg:focus-visible .prg-t { background: rgba(224, 180, 87, 0.10); }
.prg:hover .prg-t, .prg:focus-visible .prg-t { transform: translateX(6px) skewX(-8deg); }
.prg-n {
  font-family: var(--f-disp); font-weight: 700;
  font-size: clamp(19px, 1.8vw, 27px); line-height: 1.14; color: var(--bone);
}
.prg-d { color: var(--dim); font-size: 0.9rem; }
.prg-key { background: rgba(111, 242, 196, 0.05); }
.prg-key .prg-n { color: var(--mercury); }
.prg-end .prg-n, .prg-end .prg-t { color: var(--faint); }
.prg-end { opacity: 0.72; }

/* ── 05 sites ──────────────────────────────────────────────────── */
.sites {
  border: 1px solid var(--rule-2);
  background: linear-gradient(178deg, rgba(30, 19, 41, 0.72), rgba(10, 7, 17, 0.90));
  padding: 4px clamp(14px, 1.8vw, 26px);
}
.site {
  display: grid; grid-template-columns: 58px 66px minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 18px; align-items: baseline;
  padding: 18px 4px; border-bottom: 1px solid var(--rule-2);
  transition: background-color 0.4s ease;
}
.site:hover { background-color: rgba(224, 180, 87, 0.04); }
.site-n {
  font-family: var(--f-disp); font-weight: 900; font-size: 1.35rem;
  color: var(--gilt); letter-spacing: 0.04em;
}
.site-y { font-family: var(--f-mono); font-size: 0.85rem; color: var(--faint); }
.site-p { font-weight: 600; font-size: 1.02rem; }
.site-s { color: var(--dim); font-size: 0.85rem; }
.site-void { opacity: 0.55; }
.site-void .site-n, .site-void .site-p { color: var(--faint); }
.site-void .site-s { color: var(--carmine); }
.site-now { background: rgba(255, 138, 43, 0.055); }
.site-now .site-n { color: var(--sodium); }
.site-now .site-p { color: var(--bone); }

/* ── 06 access ─────────────────────────────────────────────────── */
/* Three stubs torn off a roll, not three cards: notched flanks, a
   perforated counterfoil, a serial down the edge and a struck stamp. */
.tiers {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 22px);
}
.tier {
  position: relative; display: flex; flex-direction: column;
  padding: clamp(22px, 2.2vw, 30px) clamp(20px, 2vw, 28px) clamp(22px, 2.2vw, 30px) 46px;
  background:
    repeating-linear-gradient(90deg, rgba(244,234,218,0.018) 0 1px, transparent 1px 4px),
    linear-gradient(172deg, rgba(38, 25, 52, 0.92), rgba(12, 8, 20, 0.96));
  border: 1px solid var(--rule);
  outline-offset: -3px;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.4s ease;
  clip-path: polygon(
    0 0, 100% 0,
    100% calc(50% - 13px), calc(100% - 9px) 50%, 100% calc(50% + 13px),
    100% 100%, 0 100%,
    0 calc(50% + 13px), 9px 50%, 0 calc(50% - 13px));
}
.tier:nth-child(1) { transform: rotate(-0.5deg); }
.tier:nth-child(2) { transform: rotate(0.35deg); }
.tier:nth-child(3) { transform: rotate(-0.2deg); }
.tier:hover, .tier:focus-visible { border-color: var(--acc); transform: rotate(0deg) translateY(-4px); }
/* the counterfoil: a punched, dashed tear line down the inside edge */
.tier::before {
  content: ""; position: absolute; left: 30px; top: 12px; bottom: 12px; width: 1px;
  background-image:
    linear-gradient(180deg, var(--rule) 0 6px, transparent 6px 12px);
  background-size: 1px 12px;
  pointer-events: none;
}
.tier::after {
  content: ""; position: absolute; left: 26px; top: 12px; bottom: 12px; width: 9px;
  background-image: radial-gradient(circle 2.6px at 4.5px 9px, var(--pitch) 96%, transparent 100%);
  background-size: 9px 22px;
  pointer-events: none;
}
.tier-serial {
  position: absolute; left: 4px; bottom: 22px;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font: 400 9px/1 var(--f-mono); letter-spacing: 0.22em;
  color: var(--faint); text-transform: uppercase; pointer-events: none;
}
/* the stamp owns the top-right corner, so the fare drops below the name
   where it reads like a printed fare rather than a price tag */
.tier > header { display: flex; flex-direction: column; gap: 6px; padding-right: 86px; }
.tier h3 {
  font-family: var(--f-disp); font-weight: 700; font-size: clamp(26px, 2.4vw, 38px);
  line-height: 1;
}
.tier-p b {
  font-family: var(--f-mono); font-size: 1.05rem; color: var(--acc); font-weight: 700;
  letter-spacing: 0.04em;
}
.tier-p::after {
  content: " \2014  one night, one entry";
  font: 400 9px/1 var(--f-mono); letter-spacing: 0.14em;
  color: var(--faint); text-transform: uppercase;
}
.tier ul { margin: 22px 0 26px; display: grid; gap: 11px; }
.tier li {
  position: relative; padding-left: 20px; color: var(--dim);
  font-size: 0.9rem; line-height: 1.55;
}
.tier li::before {
  content: "\25C6"; position: absolute; left: 0; top: 0.14em;
  font-size: 7px; color: var(--acc);
}
.tier .cta { margin-top: auto; align-self: flex-start; }
/* struck, not printed: a stamp landed on the stub at an angle */
.tier-flag {
  position: absolute; top: 14px; right: 12px;
  padding: 5px 9px;
  border: 2px solid var(--acc); color: var(--acc);
  font: 700 9px/1 var(--f-mono); letter-spacing: 0.22em; text-transform: uppercase;
  transform: rotate(-7deg); opacity: 0.85;
}
.tier-mid {
  background:
    repeating-linear-gradient(90deg, rgba(244,234,218,0.018) 0 1px, transparent 1px 4px),
    linear-gradient(172deg, rgba(54, 38, 16, 0.90), rgba(12, 8, 20, 0.96));
}
.tier-null {
  background:
    repeating-linear-gradient(90deg, rgba(244,234,218,0.018) 0 1px, transparent 1px 4px),
    linear-gradient(172deg, rgba(14, 46, 38, 0.82), rgba(10, 7, 17, 0.96));
}
.tier-null h3 { color: var(--mercury); }

.ballot {
  margin-top: clamp(30px, 4vw, 56px);
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(24px, 3vw, 48px);
  padding: clamp(26px, 3vw, 44px);
  background: var(--plate); border: 1px solid var(--rule);
}
.ballot-copy h3 {
  font-family: var(--f-disp); font-weight: 700;
  font-size: clamp(24px, 2.4vw, 36px); line-height: 1.04; margin-bottom: 14px;
}
.ballot-copy p { color: var(--dim); font-size: 0.94rem; max-width: 36ch; }
.ballot-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-content: start; }
.fld { display: flex; flex-direction: column; gap: 7px; }
.fld-full { grid-column: 1 / -1; }
.fld label {
  font: 400 10px/1.4 var(--f-mono); letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--faint);
}
.fld-opt { text-transform: none; letter-spacing: 0.04em; color: var(--gilt-d); }
.fld input, .fld textarea {
  background: rgba(5, 3, 9, 0.6); border: 1px solid var(--rule-2);
  padding: 12px 13px; font-size: 0.94rem; color: var(--bone);
  transition: border-color 0.3s ease, background-color 0.3s ease;
  resize: vertical; width: 100%;
}
.fld input:focus, .fld textarea:focus {
  outline: none; border-color: var(--acc); background: rgba(5, 3, 9, 0.85);
}
.fld input::placeholder, .fld textarea::placeholder { color: var(--faint); }
.fld-err { font: 400 10px/1.3 var(--f-mono); letter-spacing: 0.08em; color: var(--carmine); min-height: 13px; }
.fld.is-bad input, .fld.is-bad textarea { border-color: var(--carmine); }
.ballot-form > .cta { grid-column: 1 / -1; justify-self: start; }
.ballot-out {
  grid-column: 1 / -1; min-height: 20px;
  font: 400 11px/1.6 var(--f-mono); letter-spacing: 0.08em; color: var(--mercury);
}
.ballot-ns { grid-column: 1 / -1; color: var(--dim); font-size: 0.88rem; }

/* ── 07 rules ──────────────────────────────────────────────────── */
/* a bill pasted to the tiles by the door, taped at the corners and
   already going soft at the edges */
.rules {
  position: relative;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px; background: var(--rule-2);
  border: 1px solid var(--rule);
  transform: rotate(-0.35deg);
  box-shadow: 0 18px 44px rgba(5, 3, 9, 0.6);
}
.rules::before, .rules::after {
  content: ""; position: absolute; top: -11px; width: 74px; height: 22px;
  background: rgba(224, 180, 87, 0.14);
  border-left: 1px solid rgba(224, 180, 87, 0.22);
  border-right: 1px solid rgba(224, 180, 87, 0.22);
  pointer-events: none;
}
.rules::before { left: 26px; transform: rotate(-4deg); }
.rules::after { right: 26px; transform: rotate(3.2deg); }
.rule {
  display: grid; grid-template-columns: 46px 1fr; gap: 16px;
  padding: 24px clamp(20px, 2.2vw, 30px);
  background: linear-gradient(178deg, rgba(30, 19, 41, 0.80), rgba(10, 7, 17, 0.93));
  transition: background-color 0.4s ease;
}
.rule:hover { background-color: rgba(224, 180, 87, 0.05); }
.rule > b {
  border: 1px solid var(--rule); align-self: start;
  text-align: center; padding: 3px 0;
}
.rule > b {
  font: 400 11px/1.5 var(--f-mono); letter-spacing: 0.18em; color: var(--acc);
}
.rule p { color: var(--dim); font-size: 0.92rem; line-height: 1.68; }
.rule p b { color: var(--bone); font-weight: 700; }
.rules-foot {
  margin-top: 26px; color: var(--faint);
  font: 400 11px/1.8 var(--f-mono); letter-spacing: 0.06em; max-width: 62ch;
}
.rules-foot a { color: var(--gilt); text-decoration: underline; text-underline-offset: 3px; }

/* ── footer ────────────────────────────────────────────────────── */
.foot {
  position: relative; z-index: 5;
  border-top: 1px solid var(--rule);
  background: linear-gradient(180deg, transparent, rgba(5, 3, 9, 0.92));
  padding: 34px 0 40px;
}
.foot-in {
  display: flex; flex-wrap: wrap; gap: 14px 26px;
  align-items: baseline; justify-content: space-between;
  font: 400 10px/1.6 var(--f-mono); letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--faint);
}
.foot-mark { color: var(--bone); letter-spacing: 0.26em; }
.foot-end { color: var(--acc); }

/* ── drawer ────────────────────────────────────────────────────── */
.drawer {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(5, 3, 9, 0.96);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.36s ease;
}
.drawer[hidden] { display: none; }
.drawer.is-open { opacity: 1; }
.drawer-in { width: 100%; max-width: 560px; padding: 0 var(--gut); }
.drawer-x {
  position: absolute; top: 16px; right: var(--gut);
  width: 40px; height: 40px; border: 1px solid var(--rule);
  font-size: 22px; line-height: 1; color: var(--bone);
}
.drawer nav { display: grid; gap: 2px; }
.drawer nav a {
  display: flex; align-items: baseline; gap: 16px;
  padding: 15px 4px; text-decoration: none;
  border-bottom: 1px solid var(--rule-2);
  font-family: var(--f-disp); font-weight: 700; font-size: clamp(24px, 5.6vw, 40px);
  line-height: 1; color: var(--bone);
  transition: color 0.3s ease, padding-left 0.3s ease;
}
.drawer nav a b {
  font: 400 11px/1 var(--f-mono); letter-spacing: 0.16em; color: var(--acc);
}
.drawer nav a:hover { color: var(--acc); padding-left: 14px; }
.drawer-note {
  margin-top: 26px; font: 400 11px/1.9 var(--f-mono);
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint);
}

/* ── reveal (house pattern — opacity only ever under .js-anim) ──── */
.js-anim .reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.72s ease, transform 0.72s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.js-anim .reveal.is-in { opacity: 1; transform: none; }
.js-anim .d1 { transition-delay: 0.09s; }
.js-anim .d2 { transition-delay: 0.18s; }
.js-anim .d3 { transition-delay: 0.27s; }

/* ═══════════ responsive ═══════════════════════════════════════ */
@media (max-width: 1080px) {
  .ring-nav { display: none; }
  .burger { display: flex; }
  .premise-grid { grid-template-columns: 1fr; }
  .booths { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiers { grid-template-columns: 1fr; }
  .ballot { grid-template-columns: 1fr; }
  .cutword { font-size: 262px; }
}

@media (max-width: 860px) {
  .booths { grid-template-columns: 1fr; }
  .rules { grid-template-columns: 1fr; }
  .prg { grid-template-columns: 82px minmax(0, 1fr); }
  .prg-d { grid-column: 2; color: var(--faint); font-size: 0.86rem; }
  .site { grid-template-columns: 38px 54px minmax(0, 1fr); row-gap: 4px; }
  .site-s { grid-column: 3; }
}

/* ── the mobile reinterpretation ───────────────────────────────── */
@media (max-width: 720px) {
  :root { --gut: 20px; }
  .top { padding: 11px var(--gut); }
  .brand-text { font-size: 11px; letter-spacing: 0.16em; }
  .snd-lbl { display: none; }
  .snd { padding: 8px 10px; }
  .cta-sm { display: none; }
  .ribbon { top: 54px; }
  .ribbon-row { font-size: 9px; letter-spacing: 0.2em; }
  /* the fixed chrome shrinks out of the way: one thin line, no dial,
     and low enough contrast that the copy always wins */
  .hud {
    left: var(--gut); right: var(--gut); bottom: 8px;
    gap: 8px; font-size: 9px; padding: 5px 9px;
    background: rgba(5, 3, 9, 0.72);
    border-color: var(--rule-2);
    letter-spacing: 0.10em;
  }
  .turn-dial { display: none; }
  .hud-sep { width: 9px; }
  .hud-count { margin-left: auto; opacity: 0.72; }
  .ribbon { padding: 4px 0; }
  .ribbon-row { font-size: 8.5px; letter-spacing: 0.16em; gap: 1.4rem; padding-right: 1.4rem; }
  .nullband {
    height: 30vh;
    border-top-color: rgba(111, 242, 196, 0.12);
    border-bottom-color: rgba(111, 242, 196, 0.12);
    background: linear-gradient(180deg,
      rgba(111, 242, 196, 0.03), transparent 20%, transparent 80%, rgba(111, 242, 196, 0.03));
  }
  .nullband::before, .nullband::after { opacity: 0.3; width: 7px; height: 7px; }

  /* the artifacts restack rather than shrink */
  .tier { padding: 20px 18px 20px 42px; }
  .tier-serial { font-size: 8px; bottom: 16px; }
  .program { padding-left: 44px; }
  .program::before { width: 34px; background-size: 34px 34px;
    background-image: radial-gradient(circle 4px at 17px 15px, var(--pitch) 96%, transparent 100%); }
  .program::after { right: 8px; font-size: 7.5px; letter-spacing: 0.14em; }
  .rules { transform: none; }
  .rules::before, .rules::after { width: 54px; }

  /* the gate is recomposed vertically: the plate goes tall and the
     wordmark stacks, so NULL still reads as a hole punched in a banner */
  .sec-gate { padding-top: 112px; padding-bottom: 76px; min-height: 100svh; }
  .cutword { font-size: 300px; letter-spacing: 4px; }
  .wm-word { font-size: clamp(26px, 9.4vw, 44px); letter-spacing: 0.2em; text-indent: 0.2em; }
  .eyebrow { font-size: 9.5px; letter-spacing: 0.2em; gap: 7px; }
  .gm-line { font-size: 0.96rem; }
  .gm-line b { display: block; }
  .gm-sep { display: none; }
  .gm-site { margin-top: 10px; }
  /* the vertical gate puts copy right over the brightest part of the deck */
  .sec-gate::after {
    height: 58%;
    background: linear-gradient(180deg, transparent, rgba(5, 3, 9, 0.86) 38%, rgba(5, 3, 9, 0.96) 100%);
  }
  .gate-act { gap: 9px; }
  .gate-act .cta { flex: 1 1 100%; justify-content: center; }
  .gate-note { font-size: 10px; }
  .scroll-cue { display: none; }

  .stn-sec { padding: 78px 0; }
  .sec-h { font-size: clamp(38px, 12.5vw, 62px); }
  .sec-sub { font-size: 0.94rem; }
  .lede { font-size: 1.06rem; }
  .booth { padding: 22px 20px; }
  .booth-h { font-size: 1.42rem; }
  .prg { grid-template-columns: 68px minmax(0, 1fr); padding: 15px 2px; gap: 12px; }
  .prg-n { font-size: 1.1rem; }
  .site { grid-template-columns: 30px 48px minmax(0, 1fr); padding: 14px 2px; }
  .site-n { font-size: 1.1rem; }
  .site-p { font-size: 0.94rem; }
  .ballot-form { grid-template-columns: 1fr; }
  .ballot { padding: 22px 20px; }
  .rule { padding: 20px; grid-template-columns: 34px 1fr; gap: 12px; }
  .foot-in { flex-direction: column; gap: 8px; }
}

@media (hover: none) {
  .booth { cursor: default; }
}

/* ── reduced motion ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001s !important;
  }
  .js-anim .reveal { opacity: 1 !important; transform: none !important; }
  .wm-plate { transform: none !important; }
  .wm-word .ch { transform: none !important; }
  .nullband { display: none; }
}