/* =============================================================
   That Game Show Place
   1 tokens · 2 base · 3 type · 4 layout · 5 buttons · 6 header
   7 hero · 8 sections · 9 forms · 10 footer · 10b page fx
   11 overlays · 12 motion · 13 print

   The brief is an arcade cabinet with a game show host standing in front
   of it. That means hard edges, bevelled chrome, bulb marquees, scanlines
   and saturated light on black, not a dark marketing page.

   Colours come off their own logo: the green bulb-lined shield, the purple
   rays, and the red/yellow/blue stars.
   ============================================================= */

/* ---------- 1. tokens ---------------------------------------- */
:root {
  /* surface, cabinet black, warmed toward the purple of the shield */
  --ink:     #0a0518;
  --ink-1:   #140a2b;
  --ink-2:   #1d1040;
  --ink-3:   #2a1a55;
  --ink-4:   #3d2878;
  --paper:   #ffffff;

  /* text */
  --fg:        #ffffff;
  --fg-muted:  rgba(232, 224, 255, .72);
  --fg-faint:  rgba(232, 224, 255, .54);

  /* line, cabinet seams, not hairlines */
  --line:    rgba(168, 133, 255, .22);
  --line-2:  rgba(168, 133, 255, .38);
  --line-3:  rgba(168, 133, 255, .60);

  /* brand, every one of these is in the logo, pushed to arcade saturation */
  --lime:     #3ef53e;   /* the bulb-lined shield */
  --lime-hi:  #8cff8c;
  --grape:    #b14dff;   /* the rays behind the type */
  --grape-hi: #d093ff;
  --buzzer:   #ff1f4b;   /* the red star */
  --buzzer-hi:#ff6b86;
  --volt:     #12a8ff;   /* the blue star */
  --volt-hi:  #6fd0ff;
  --gold:     #ffc400;   /* the yellow star, and every bulb */
  --gold-hi:  #ffe066;
  --bulb:     #fff6dc;   /* a lit filament */

  /* accent contract: THREE values, always. --on-accent is the ink that
     sits ON the accent; white on gold is unreadable, and a section that
     sets only two silently inherits the last one. */
  --accent:     var(--lime);
  --accent-hi:  var(--lime-hi);
  --on-accent:  #04140a;

  /* glow, one switch kills every glow on the site */
  --glow-a: .55;
  --glow-r: 22px;

  /* geometry, a cabinet has corners */
  --r-xs:  0px;
  --r-sm:  2px;
  --r:     4px;
  --r-lg:  6px;
  --r-xl:  8px;
  --r-buzz: 999px;        /* buzzers and pill buttons only */
  --bez:   4px;           /* cabinet bezel thickness */
  --maxw:  1440px;
  --gut:   clamp(18px, 3.6vw, 64px);
  --sec:   clamp(64px, 8.4vw, 132px);
  --sec-t: clamp(40px, 5vw, 72px);
  --bulb-h: 16px;

  /* motion */
  --ease:      cubic-bezier(.2, .9, .25, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  --ease-snap: cubic-bezier(.34, 1.56, .64, 1);

  /* type */
  --display: "Bungee", "Anybody", Impact, "Haettenschweiler", sans-serif;
  --shade:   "Bungee Shade", "Bungee", Impact, sans-serif;
  --sans:    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --led:     "Doto", ui-monospace, "SF Mono", monospace;

  /* ---- reusable cabinet surfaces ----
     Static gradients. They rasterise once and cost nothing per frame; the
     thing PERFORMANCE.md bans is a full-screen translucent layer over the
     hero and backdrop-filter, neither of which appears anywhere here. */
  --scan: repeating-linear-gradient(180deg,
            rgba(255,255,255,.045) 0 1px, transparent 1px 3px);
  --marq-static: linear-gradient(90deg,
    rgba(255,246,220,.40), rgba(255,246,220,.14) 22%,
    rgba(255,196,0,.36) 48%, rgba(255,246,220,.16) 71%,
    rgba(255,246,220,.36));
}

/* Machines that can't keep up lose every glow in one declaration. */
html[data-perf="low"] { --glow-a: 0; }

/* ---------- 2. base ------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--fg);
  font-family: var(--sans);
  font-size: clamp(16px, .5vw + 14.6px, 17px);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
body.is-locked { overflow: hidden; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: var(--accent-hi); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--fg); }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--on-accent); }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 999;
  background: var(--gold); color: #1a1200; padding: 12px 18px;
  border-radius: var(--r); font-weight: 800; text-decoration: none;
  transition: top .18s var(--ease);
}
.skip:focus { top: 12px; color: #1a1200; }

/* ---- the cabinet panel ----
   Bevelled like moulded plastic: light off the top-left, shadow into the
   bottom-right, scanlines across the face. One background, one box-shadow,
   no extra elements and nothing animating. */
.cab {
  position: relative;
  background: var(--scan), linear-gradient(180deg, var(--ink-1), var(--ink-2));
  border: var(--bez) solid var(--ink-3);
  border-radius: var(--r-lg);
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, .10),
    inset -2px -2px 0 rgba(0, 0, 0, .55),
    0 18px 44px -20px #000;
}
/* corner rivets, four dots from one background, no elements */
.cab--rivet::before {
  content: ""; position: absolute; inset: 8px; pointer-events: none;
  background:
    radial-gradient(circle at 0 0,       var(--line-3) 2.5px, transparent 3px),
    radial-gradient(circle at 100% 0,    var(--line-3) 2.5px, transparent 3px),
    radial-gradient(circle at 0 100%,    var(--line-3) 2.5px, transparent 3px),
    radial-gradient(circle at 100% 100%, var(--line-3) 2.5px, transparent 3px);
}

/* ---------- 3. type ------------------------------------------ */
.d1, .d2, .d3 { font-family: var(--display); margin: 0; text-wrap: balance; }

/* Bungee is all-caps by design and tight-set. It needs air between lines
   and none between letters. */
.d1 {
  font-size: clamp(2rem, 5.2vw, 4.4rem);
  line-height: 1.02; letter-spacing: -.005em;
  text-shadow:
    0 0 calc(var(--glow-r) * 1.4) rgb(from var(--accent) r g b / calc(var(--glow-a) * .55)),
    4px 4px 0 var(--ink-3);
}
.d2 {
  font-size: clamp(1.6rem, 3.4vw, 2.8rem);
  line-height: 1.06; letter-spacing: -.005em;
  text-shadow: 3px 3px 0 var(--ink-3);
}
.d3 { font-size: clamp(1.02rem, 1.5vw, 1.24rem); line-height: 1.24; }

/* the marquee headline, bevelled cabinet lettering, one page only */
.d0 {
  font-family: var(--shade); margin: 0;
  font-size: clamp(2.4rem, 7vw, 6rem);
  line-height: 1.0; color: var(--accent);
  text-shadow: 0 0 calc(var(--glow-r) * 2) rgb(from var(--accent) r g b / var(--glow-a));
}

.lede {
  font-size: clamp(1.06rem, 1.3vw, 1.28rem);
  line-height: 1.6; color: var(--fg-muted);
  max-width: 58ch; margin: 20px 0 0;
}
.accent { color: var(--accent); }

/* eyebrow, a lit tally on the front of the cabinet */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--display); font-size: .66rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--accent);
  margin: 0 0 16px;
}
.eyebrow::before {
  content: ""; width: 10px; height: 10px; flex: none;
  background: var(--accent);
  box-shadow: 0 0 12px rgb(from var(--accent) r g b / var(--glow-a));
}

.label {
  font-family: var(--display); font-size: .6rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--fg-faint);
}
.meta { font-size: .84rem; font-weight: 600; color: var(--fg-muted); }

/* ---- LED scoreboard numerals ----
   Two layers: a full field of unlit dots, and the lit value on top. The
   ghost is what makes it a display instead of a funny font. */
.led {
  position: relative; display: inline-grid; justify-items: end;
  font-family: var(--led); font-variant-numeric: tabular-nums;
  letter-spacing: .06em; font-weight: 900; line-height: 1;
}
/* Right-aligned, like every real readout, a 2-digit value in a 4-digit
   field has to sit in the last two cells. */
.led__ghost, .led__on { grid-area: 1 / 1; text-align: right; }
.led__ghost { color: rgba(168, 133, 255, .13); }
.led__on {
  color: var(--accent);
  text-shadow: 0 0 18px rgb(from var(--accent) r g b / var(--glow-a));
}
/* If Doto didn't load, site.js sets data-led="off", otherwise the ghost
   8888 sits visibly behind the value in a proportional face. */
html[data-led="off"] .led { font-family: var(--display); }
html[data-led="off"] .led__ghost { display: none; }

.led-xl { font-size: clamp(3rem, 7.4vw, 5.6rem); }
.led-lg { font-size: clamp(2rem, 4.4vw, 3.2rem); }
.led-md { font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.led-sm { font-size: 28px; }   /* the floor, below this the dots stop resolving */

/* ---------- 4. layout ---------------------------------------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut); }
.section { padding-block: var(--sec); }
.section--flush-top { padding-top: 0; }
.section--tight { padding-block: var(--sec-t); }
.section--band { background: var(--ink-1); border-block: 1px solid var(--line); }

.section-head { max-width: 62ch; margin-bottom: clamp(30px, 4vw, 52px); }

.split {
  display: grid; gap: clamp(28px, 4vw, 68px);
  grid-template-columns: 1fr;
}
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; align-items: center; } }
.split__media img {
  width: 100%; border-radius: var(--r); border: 10px solid var(--ink-3);
  box-shadow: inset 0 0 0 3px #000, 0 20px 50px -24px #000;
}

.note {
  background: var(--scan), linear-gradient(180deg, var(--ink-1), var(--ink-2));
  border: 3px solid var(--ink-3); border-left: 8px solid var(--accent);
  border-radius: var(--r); padding: 20px 24px;
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.07), inset -2px -2px 0 rgba(0,0,0,.45);
}
.note--warn { border-left-color: var(--buzzer); }

.checks { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; }
.checks li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; }
.checks svg { width: 22px; height: 22px; color: var(--accent); margin-top: 2px; }

/* ---------- 5. buttons ---------------------------------------
   There is no small filled-accent button on this site. 18.9px/800 crosses
   WCAG's large-text threshold, which is what makes every accent in the
   palette legal as a fill. Anything smaller is a ghost. */
/* A cabinet button: solid slab, hard bevel, no blur on the shadow. It
   physically depresses on :active, the offset shadow collapses and the
   button moves into it. */
.btn {
  --btn-bg: var(--accent);
  --btn-fg: var(--on-accent);
  --btn-edge: #000;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 58px; padding: 17px 30px;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 3px solid var(--btn-edge); border-radius: var(--r);
  font-family: var(--display); font-size: 1rem; letter-spacing: .01em;
  line-height: 1; text-decoration: none; cursor: pointer;
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, .45),
    inset -2px -3px 0 rgba(0, 0, 0, .30),
    5px 5px 0 var(--btn-edge),
    0 0 var(--glow-r) rgb(from var(--accent) r g b / var(--glow-a));
  transition: transform .08s var(--ease), box-shadow .08s var(--ease), filter .14s var(--ease);
}
.btn:hover { color: var(--btn-fg); filter: brightness(1.1); }
.btn:active {
  transform: translate(5px, 5px);
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, .30),
    inset -2px -3px 0 rgba(0, 0, 0, .35),
    0 0 0 var(--btn-edge),
    0 0 var(--glow-r) rgb(from var(--accent) r g b / var(--glow-a));
}

.btn--ghost {
  --btn-bg: var(--ink-2);
  --btn-fg: var(--fg);
  --btn-edge: var(--ink-3);
  box-shadow:
    inset 2px 2px 0 rgba(255, 255, 255, .10),
    inset -2px -3px 0 rgba(0, 0, 0, .40),
    5px 5px 0 var(--ink-3);
}
.btn--ghost:hover { --btn-edge: var(--accent); filter: none; }
.btn--light { --btn-bg: #fff; --btn-fg: var(--ink); }
.btn--lg { min-height: 62px; padding: 19px 38px; font-size: 1.24rem; }
.btn--block { width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; align-items: center; }

.link {
  font-family: var(--display); font-size: .82rem;
  color: var(--fg-muted); text-decoration: none;
  border-bottom: 2px solid var(--line-2); padding-bottom: 3px;
}
.link:hover { color: var(--fg); border-color: var(--accent); }

/* ---------- 6. header ---------------------------------------- */
.hdr {
  position: fixed; inset: 0 0 auto; z-index: 200;
  transition: background .25s var(--ease), border-color .25s var(--ease);
  border-bottom: 1px solid transparent;
}
/* Solid, not translucent. A blurred bar over the page costs 19fps without
   a GPU and this one spans the viewport. */
.hdr.is-stuck { background: var(--ink); border-bottom-color: var(--ink-3); border-bottom-width: 3px; }

.hdr__in {
  max-width: var(--maxw); margin-inline: auto;
  padding: 14px var(--gut);
  display: flex; align-items: center; gap: clamp(14px, 2vw, 34px);
}
.brand { flex: none; display: block; line-height: 0; }
.brand__logo { width: clamp(112px, 11vw, 152px); height: auto; }

.nav { display: none; align-items: center; gap: 4px; margin-left: auto; }
@media (min-width: 1100px) { .nav { display: flex; } }
.nav > a, .nav__btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 13px; border-radius: var(--r-sm);
  background: none; border: 0; cursor: pointer;
  color: var(--fg-muted); font-family: var(--display);
  font-size: .74rem; letter-spacing: .01em; text-decoration: none;
  transition: color .16s var(--ease), background .16s var(--ease);
}
.nav > a:hover, .nav__btn:hover { color: var(--fg); background: rgba(255, 255, 255, .05); }
.nav > a[aria-current="page"] { color: var(--fg); }
.nav__btn svg { width: 13px; height: 13px; transition: transform .18s var(--ease); }
.nav__group { position: relative; }
.nav__group[data-open="true"] .nav__btn svg { transform: rotate(180deg); }

.nav__menu {
  position: absolute; top: calc(100% + 8px); left: 0; min-width: 232px;
  background: var(--ink-1); border: 1px solid var(--line-2);
  border-radius: var(--r); padding: 8px;
  box-shadow: 0 26px 60px -24px #000;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
}
.nav__group[data-open="true"] .nav__menu { opacity: 1; visibility: visible; transform: none; }
.nav__menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 12px; border-radius: var(--r-sm);
  color: var(--fg-muted); font-size: .95rem; font-weight: 700; text-decoration: none;
}
.nav__menu a:hover { background: rgba(255, 255, 255, .06); color: var(--fg); }
.dot { width: 8px; height: 8px; flex: none; border-radius: 2px; background: var(--dot, var(--accent)); }

.hdr__cta { display: none; align-items: center; gap: 16px; }
@media (min-width: 1100px) { .hdr__cta { display: flex; } }
.hdr__tel {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--fg-muted); font-weight: 700; font-size: .95rem; text-decoration: none;
}
.hdr__tel svg { width: 16px; height: 16px; }
.hdr__tel:hover { color: var(--fg); }
.hdr__cta .btn { min-height: 46px; padding: 13px 22px; font-size: .8rem; }

.burger {
  margin-left: auto; width: 46px; height: 46px; flex: none;
  display: grid; place-content: center; gap: 5px;
  background: none; border: 1px solid var(--line-2); border-radius: var(--r-sm);
  cursor: pointer;
}
@media (min-width: 1100px) { .burger { display: none; } }
.burger i { display: block; width: 20px; height: 2px; background: var(--fg); border-radius: 2px; }

.drawer {
  position: fixed; inset: 0; z-index: 210;
  background: var(--ink); padding: 88px var(--gut) 32px;
  overflow-y: auto;
  opacity: 0; visibility: hidden; transition: opacity .24s var(--ease), visibility .24s;
}
.drawer[data-open="true"] { opacity: 1; visibility: visible; }
.drawer__in { max-width: 560px; margin-inline: auto; }
.drawer__link {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 0; border-bottom: 2px solid var(--line);
  color: var(--fg); font-family: var(--display);
  font-size: 1.05rem; text-decoration: none;
}
.drawer__foot { margin-top: 30px; display: grid; gap: 12px; }
.drawer__meta { color: var(--fg-faint); font-size: .85rem; text-align: center; margin: 6px 0 0; }

/* ---------- 7. hero ------------------------------------------
   Split stage: type on flat ink, media inside its own panel. There is no
   layer above the media anywhere, which is how the scrim problem gets
   removed rather than managed. */
.hero { position: relative; padding: 132px 0 0; }
.hero__in {
  max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gut);
  display: grid; gap: clamp(30px, 5vw, 76px); align-items: center;
}
@media (min-width: 1080px) {
  .hero { min-height: 100svh; display: grid; align-content: center; padding-top: 96px; }
  .hero__in { grid-template-columns: 1.05fr .95fr; }
}

.hero__kick { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px; }
/* A real ON AIR sign is steady. The truthful version is also the free one. */
.hero__lamp {
  width: 9px; height: 9px; border-radius: 2px; background: var(--buzzer);
  box-shadow: 0 0 14px rgba(255, 42, 77, .55);
}

.hero__board {
  display: flex; flex-wrap: wrap; margin: 34px 0 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.hero__cell { padding: 18px 26px 16px; border-left: 1px solid var(--line); }
.hero__cell:first-child { border-left: 0; padding-left: 0; }
.hero__cell .label { display: block; margin-top: 8px; }

.hero__foot {
  margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line);
  color: var(--fg-faint); font-size: .86rem;
}

/* the monitor */
/* a CRT in a moulded bezel */
.hero__panel {
  position: relative; overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--ink-2);
  border: 12px solid var(--ink-3);
  border-radius: var(--r-lg);
  box-shadow:
    inset 0 0 0 3px #000,
    inset 3px 3px 0 rgba(255,255,255,.10),
    inset -3px -3px 0 rgba(0,0,0,.55),
    0 24px 60px -26px #000;
}
/* scanlines on the tube itself, static, one paint, sits inside the panel
   and never over the page */
.hero__panel::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: var(--scan);
}
@media (min-width: 1080px) { .hero__panel { aspect-ratio: 4 / 5; } }
.hero__panel img, .hero__panel video { width: 100%; height: 100%; object-fit: cover; }
/* Local, inside the panel only, a few hundred px, not a full-screen layer. */
.hero__panel::after {
  content: ""; position: absolute; inset: auto 0 0; height: 38%;
  background: linear-gradient(180deg, transparent, rgba(7, 6, 14, .88));
  pointer-events: none;
}
.hero__tally {
  position: absolute; top: 14px; left: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
}
.hero__tally i { width: 10px; height: 10px; background: var(--buzzer); border-radius: 2px; }
.hero__cap {
  position: absolute; left: 14px; bottom: 14px; z-index: 2;
  background: var(--ink); border: 1px solid var(--line-2);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-xs); padding: 7px 12px;
  font-size: .76rem; font-weight: 700; color: var(--fg-muted);
}

/* short hero, flat, no photograph, one readout */
.hero--short { padding: 150px 0 clamp(46px, 6vw, 84px); min-height: 0; }
@media (min-width: 1080px) { .hero--short { min-height: min(58svh, 560px); display: block; } }
.hero--short .hero__in { grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .hero--short .hero__in {
    grid-template-columns: 1fr auto; align-items: end;
  }
}
.hero__stat { text-align: right; }
.hero__stat .label { display: block; margin-top: 8px; }
@media (max-width: 899px) { .hero__stat { text-align: left; } }

/* ---------- 8. sections -------------------------------------- */

/* ---- the marquee ----
   A row of thirty pulsing bulbs is thirty forever-animations, which is more
   than the equaliser ticks that cost the sibling site 11fps. So: the bulbs
   are a static mask on the parent, and one gradient slides underneath it.
   One animation, any number of bulbs, transform-only. */
.marq {
  position: relative; height: var(--bulb-h); overflow: hidden;
  background: rgba(255, 246, 220, .22);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0 30%, transparent 34%);
          mask-image: radial-gradient(circle at 50% 50%, #000 0 30%, transparent 34%);
  -webkit-mask-size: calc(100% / var(--bulbs, 48)) 100%;
          mask-size: calc(100% / var(--bulbs, 48)) 100%;
  -webkit-mask-repeat: repeat-x;
          mask-repeat: repeat-x;
}
.marq__run {
  position: absolute; inset: 0 -100%;
  background: linear-gradient(90deg,
    transparent 0 34%, var(--gold) 42%, var(--bulb) 47%, var(--gold) 52%, transparent 60% 100%);
  transform: translate3d(-33.333%, 0, 0);
}
.marq--live .marq__run { animation: marqRun 3.4s linear infinite; }
@keyframes marqRun { to { transform: translate3d(33.333%, 0, 0); } }
.marq[data-idle="1"] .marq__run { animation-play-state: paused; }
.marq--thin { --bulb-h: 8px; }

/* When the run is gone the strip must not look dead, an uneven static
   gradient reads as a bulb row with some old filaments. Same move as the
   frozen equaliser next door. */
@media (prefers-reduced-motion: reduce) { .marq__run { display: none; } }
html[data-perf="low"] .marq__run { display: none; }
@media (prefers-reduced-motion: reduce) { .marq { background: var(--marq-static); } }
html[data-perf="low"] .marq { background: var(--marq-static); }
:root {
  --marq-static: linear-gradient(90deg,
    rgba(255, 243, 210, .34), rgba(255, 243, 210, .12) 22%,
    rgba(255, 194, 31, .30) 48%, rgba(255, 243, 210, .14) 71%,
    rgba(255, 243, 210, .30));
}

/* ---- scoreboard row ---- */
.board {
  display: grid; gap: 3px; background: var(--ink-3);
  grid-template-columns: repeat(2, 1fr);
  border: 3px solid var(--ink-3); border-radius: var(--r);
  overflow: hidden;
  box-shadow: 0 16px 40px -22px #000;
}
@media (min-width: 760px) { .board { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .board { grid-template-columns: repeat(var(--cols, 4), 1fr); } }
.board__cell {
  background: var(--scan), linear-gradient(180deg, var(--ink-1), var(--ink-2));
  padding: clamp(20px, 2.6vw, 32px);
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.06);
}
.board__cell .label { display: block; margin-top: 10px; }
.board__cell p { margin: 8px 0 0; font-size: .88rem; color: var(--fg-muted); }

/* ---- the name-tag grid ---- */
.tags { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); }
.tag {
  background: var(--paper); color: var(--ink);
  border: 3px solid #000; border-radius: var(--r-sm); overflow: hidden;
  box-shadow: 4px 4px 0 rgba(0,0,0,.55);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
/* static rotations, a grid of these reads as pinned to a board, and costs
   nothing because nothing is animating */
.tag:nth-child(3n)   { transform: rotate(-1.2deg); }
.tag:nth-child(3n+1) { transform: rotate(1.4deg); }
.tag:nth-child(3n+2) { transform: rotate(-.6deg); }
.tag:hover { transform: rotate(0) translateY(-4px); box-shadow: 6px 8px 0 rgba(0,0,0,.55); }
.tag__band {
  background: var(--accent); color: var(--on-accent);
  padding: 8px 12px; font-family: var(--display); font-size: .56rem;
  letter-spacing: .1em; text-transform: uppercase;
  border-bottom: 3px solid #000;
}
.tag__name {
  display: block; padding: 15px 12px 17px;
  font-family: var(--display); font-size: .96rem; line-height: 1.24; color: #120a22;
}

/* ---- the rundown ---- */
.run { border-top: 3px solid var(--ink-3); }
.run__row {
  display: grid; gap: 4px 20px; align-items: start;
  grid-template-columns: 54px 1fr;
  padding: clamp(20px, 2.4vw, 28px) 0;
  border-bottom: 2px solid var(--line);
}
@media (min-width: 820px) {
  .run__row { grid-template-columns: 88px 62px 1fr 168px; align-items: center; }
}
.run__cue { color: var(--fg-faint); }
@media (max-width: 819px) { .run__cue { grid-column: 2; font-size: 1.1rem; } }
.run__n { color: var(--accent); }
.run__body h3 { margin: 0 0 6px; font-family: var(--display); font-size: .94rem; line-height: 1.2; }
.run__body p { margin: 0; color: var(--fg-muted); font-size: .93rem; }
@media (max-width: 819px) { .run__body { grid-column: 2; } }
.run__shot { border-radius: var(--r-sm); border: 3px solid var(--ink-3); }
@media (max-width: 819px) { .run__shot { display: none; } }

/* ---- sponsors ---- */
.spon { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px)  { .spon { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .spon { grid-template-columns: repeat(5, 1fr); } }
.spon__i {
  display: grid; place-content: center; min-height: 96px; padding: 18px;
  background: var(--ink-2); border: 3px solid var(--ink-3); border-radius: var(--r-sm);
  /* opacity, not grayscale, a filter forces a layer per plate */
  opacity: .72;
  transition: opacity .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
.spon__i:hover { opacity: 1; border-color: var(--line-2); transform: translateY(-3px); }
.spon__i img { max-height: 54px; width: auto; object-fit: contain; }

/* ---- press ---- */
.press {
  display: flex; flex-wrap: wrap; justify-content: center;
  border-top: 3px solid var(--gold);
}
.press__i {
  flex: 1 1 200px; padding: 24px 26px; text-align: center;
  border-left: 1px solid var(--line); text-decoration: none;
}
.press__i:first-child { border-left: 0; }
.press__n {
  display: block; font-family: var(--display);
  font-size: .92rem; color: var(--fg);
}
.press__s { display: block; margin-top: 5px; font-size: .8rem; color: var(--fg-faint); }
.press__i:hover .press__n { color: var(--gold); }

/* ---- FAQ ---- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 2px solid var(--line); }
.faq summary {
  display: flex; align-items: center; gap: 16px;
  padding-block: 21px; cursor: pointer; list-style: none;
  font-family: var(--display); font-size: .92rem; line-height: 1.35;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; order: -1; flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, var(--buzzer-hi), var(--buzzer) 55%, #8d0a1c);
  border: 3px solid #000;
  box-shadow: 0 3px 0 #000, inset 0 -3px 6px rgba(0,0,0,.5);
  transition: transform .12s var(--ease-snap), box-shadow .12s var(--ease), background .16s var(--ease);
}
.faq details[open] summary::after {
  background: radial-gradient(circle at 36% 30%, var(--accent-hi), var(--accent) 55%, #0c3d0c);
  transform: translateY(3px); box-shadow: 0 0 0 #000, inset 0 -3px 6px rgba(0,0,0,.5);
}
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .26s var(--ease); }
.faq details[open] .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { margin: 0 0 18px; color: var(--fg-muted); max-width: 74ch; }
.faq__a p:first-child { padding-top: 2px; }

/* ---- partner coupons ---- */
.perks { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 700px)  { .perks { grid-template-columns: repeat(2, 1fr); } }
/* --cols so a set of six lays out 3x2 instead of leaving two orphans on a
   four-wide row. Defaults to 4, which is what win-stuff.html expects. */
@media (min-width: 1080px) { .perks { grid-template-columns: repeat(var(--cols, 4), 1fr); } }
.perk {
  position: relative; padding: 24px 24px 22px 42px;
  background:
    radial-gradient(circle at 22px 0, transparent 5px, var(--ink-1) 5.5px) top left / 100% 51% no-repeat,
    radial-gradient(circle at 22px 100%, transparent 5px, var(--ink-2) 5.5px) bottom left / 100% 51% no-repeat;
  border: 3px solid var(--ink-3); border-left: 8px solid var(--gold);
  border-radius: var(--r);
}
.perk::before {
  content: ""; position: absolute; left: 22px; top: 12px; bottom: 12px;
  border-left: 1px dashed var(--line-2);
}
.perk__off { color: var(--gold); }
.perk h3 { margin: 10px 0 6px; font-family: var(--display); font-size: 1.1rem; font-weight: 800; }
.perk p { margin: 0; font-size: .89rem; color: var(--fg-muted); }
.perk .label { display: block; margin-top: 14px; }

/* ---- gallery ---- */
.gal { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px)  { .gal { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1080px) { .gal { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1500px) { .gal { grid-template-columns: repeat(6, 1fr); } }
.gal__item {
  position: relative; padding: 0; margin: 0; overflow: hidden; cursor: zoom-in;
  aspect-ratio: 4 / 3; background: var(--ink-2);
  border: 3px solid var(--ink-3); border-radius: var(--r-sm);
  transition: border-color .16s var(--ease), transform .16s var(--ease);
}
.gal__item:hover { border-color: var(--accent); transform: translateY(-3px); }
.gal__item.tall { aspect-ratio: 3 / 4; grid-row: span 2; }
.gal__item img { width: 100%; height: 100%; object-fit: cover; }
/* tally light, not a light sweep, one property, no gradient repaint */
.gal__item::after {
  content: ""; position: absolute; top: 10px; right: 10px;
  width: 8px; height: 8px; background: var(--buzzer); border-radius: 2px;
  opacity: 0; transition: opacity .18s var(--ease);
}
.gal__item:hover::after, .gal__item:focus-visible::after { opacity: 1; }

/* ---- fact band ---- */
.band {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 30px;
  padding: 16px var(--gut); background: var(--scan), var(--ink-1);
  border-block: 3px solid var(--ink-3);
  font-family: var(--display); font-size: .68rem; letter-spacing: .02em;
  text-transform: uppercase; color: var(--fg-muted);
}
.band span { display: inline-flex; align-items: center; gap: 9px; }
.band span::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--accent); }

/* ---- technical rider ---- */
.rider {
  display: grid; gap: 1px; background: var(--line);
  grid-template-columns: 1fr; border: 1px solid var(--line);
  border-top: 3px solid var(--gold); border-radius: var(--r); overflow: hidden;
}
@media (min-width: 760px) { .rider { grid-template-columns: repeat(3, 1fr); } }
.rider__i { background: var(--ink-2); padding: clamp(20px, 2.4vw, 30px); }
.rider__i h3 { margin: 12px 0 4px; font-family: var(--display); font-size: 1.05rem; font-weight: 800; }
.rider__i p { margin: 0; font-size: .88rem; color: var(--fg-muted); }

/* ---- reveal ----
   On containers, never on grid children. Twelve reveals for one gallery is
   twelve entries in document.getAnimations(); one is one. */
.reveal { opacity: 0; transform: translateY(22px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      opacity: 1; transform: none;
      animation: revealIn linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 26%;
    }
  }
}
@keyframes revealIn { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* ---------- 9. forms ----------------------------------------- */
.form { display: grid; gap: 18px; max-width: 620px; }
.field { display: grid; gap: 7px; }
.field > label { font-family: var(--display); font-size: .68rem; letter-spacing: .02em; color: var(--fg-muted); }
.field input, .field select, .field textarea {
  width: 100%; padding: 15px 16px;
  background: var(--ink); color: var(--fg);
  border: 3px solid var(--ink-3); border-radius: var(--r-sm);
  box-shadow: inset 2px 2px 0 rgba(0,0,0,.5);
  font-family: var(--sans); font-size: 1rem;
}
.field textarea { min-height: 132px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
.field[data-bad] input, .field[data-bad] select, .field[data-bad] textarea { border-color: var(--buzzer); }
.field__err { color: var(--buzzer-hi); font-size: .82rem; }
.field__err[hidden] { display: none; }

.form__aside {
  background: var(--scan), linear-gradient(180deg, var(--ink-1), var(--ink-2));
  border: 3px solid var(--ink-3); border-top: 8px solid var(--accent);
  border-radius: var(--r); padding: 26px;
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.07);
}
.form__aside h3 { margin: 0 0 8px; font-family: var(--display); font-size: 1rem; line-height: 1.2; }
.form__aside p { margin: 0 0 14px; color: var(--fg-muted); font-size: .92rem; }

/* ---------- 10. footer --------------------------------------- */
.ftr { background: var(--ink-1); border-top: 1px solid var(--line); padding-top: clamp(46px, 6vw, 76px); }
.ftr__top { display: grid; gap: 38px; grid-template-columns: 1fr; }
@media (min-width: 760px)  { .ftr__top { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .ftr__top { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; } }
.ftr__brand img { width: 168px; height: auto; }
.ftr__tag { margin: 16px 0 0; font-weight: 700; }
.ftr__promo { margin: 8px 0 0; color: var(--fg-muted); font-size: .9rem; max-width: 34ch; }
.ftr__h { margin: 0 0 14px; font-family: var(--display); font-size: .66rem; letter-spacing: .04em; text-transform: uppercase; color: var(--gold); }
.ftr__col { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.ftr__col a { color: var(--fg-muted); text-decoration: none; font-size: .95rem; font-weight: 600; }
.ftr__col a:hover { color: var(--fg); }
.ftr__addr { margin: 0 0 4px; color: var(--fg-muted); font-size: .95rem; }
.ftr__tel { font-family: var(--display); font-size: 1.05rem; color: var(--fg) !important; }
.ftr__social { display: flex; gap: 8px; margin-top: 14px; }
.ftr__social a {
  display: grid; place-content: center; width: 40px; height: 40px;
  border: 1px solid var(--line-2); border-radius: var(--r-sm); color: var(--fg-muted);
}
.ftr__social a:hover { color: var(--fg); border-color: var(--accent); }
.ftr__social svg { width: 19px; height: 19px; }
.ftr__venue {
  margin: 38px 0 0; padding-top: 22px; border-top: 1px solid var(--line);
  color: var(--fg-faint); font-size: .88rem; max-width: 70ch;
}
.ftr__bar { margin-top: 30px; border-top: 1px solid var(--line); }
.ftr__bar-in {
  display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: space-between;
  padding-block: 18px; font-size: .82rem; color: var(--fg-faint);
}
.ftr__bar-in p { margin: 0; }
.ftr__note { color: var(--gold); font-weight: 700; }

/* ---------- 11. overlays ------------------------------------- */
.callbar {
  position: fixed; inset: auto 0 0; z-index: 190;
  display: flex; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: var(--ink-1); border-top: 1px solid var(--line-2);
  transform: translateY(105%); transition: transform .28s var(--ease);
}
.callbar.is-on { transform: none; }
@media (min-width: 1100px) { .callbar { display: none; } }
.callbar__tel {
  flex: 1; display: grid; place-content: center;
  border: 1px solid var(--line-2); border-radius: var(--r-buzz);
  color: var(--fg); font-weight: 800; text-decoration: none; font-size: .98rem;
}
.callbar__btn { flex: 1; min-height: 50px; padding: 12px 18px; font-size: 1.02rem; }

.lb { position: fixed; inset: 0; z-index: 300; background: rgba(4, 3, 9, .96); display: grid; place-content: center; }
.lb[hidden] { display: none; }
.lb__fig { margin: 0; padding: var(--gut); }
.lb__img { max-width: min(94vw, 1500px); max-height: 88vh; width: auto; border-radius: var(--r-sm); }
.lb__x, .lb__nav {
  position: absolute; display: grid; place-content: center;
  width: 52px; height: 52px; background: rgba(255, 255, 255, .07);
  border: 1px solid var(--line-2); border-radius: 50%; color: var(--fg); cursor: pointer;
}
.lb__x { top: 20px; right: 20px; }
.lb__nav { top: 50%; transform: translateY(-50%); }
.lb__nav--prev { left: 18px; }
.lb__nav--next { right: 18px; }
.lb__x svg, .lb__nav svg { width: 22px; height: 22px; }

/* demo curtain */
.sent { position: fixed; inset: 0; z-index: 400; background: rgba(4, 3, 9, .92); display: grid; place-content: center; padding: var(--gut); }
.sent[hidden] { display: none; }
.demo__card {
  max-width: 470px;
  background: var(--scan), linear-gradient(180deg, var(--ink-1), var(--ink-2));
  border: 4px solid var(--ink-3); border-top: 8px solid var(--gold);
  border-radius: var(--r-lg); padding: clamp(26px, 4vw, 40px); text-align: center;
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.08), 0 30px 70px -30px #000;
}
.demo__lamp {
  display: inline-block; width: 11px; height: 11px; border-radius: 2px;
  background: var(--gold); box-shadow: 0 0 16px rgba(255, 194, 31, .6);
}
.demo__l { margin: 14px 0 0; font-size: .7rem; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-faint); }
.demo__h { margin: 10px 0 12px; font-family: var(--display); font-size: 1.5rem; line-height: 1.1; }
.demo__p { margin: 0 0 16px; color: var(--fg-muted); font-size: .96rem; }
.demo__real { margin: 0 0 24px; font-size: .92rem; font-weight: 600; }
.demo__close { --accent: var(--gold); --on-accent: #1a1200; }

/* intro curtain
   Their logo sting fills the screen; the still logo is the fallback when the
   video can't play. Exactly one of the two is ever visible. */
.intro { position: fixed; inset: 0; z-index: 500; background: #000; display: grid; place-items: center; }
/* Full bleed. Framing it in a window made it look small and apologetic. What
   takes the edge off the burst is the run up: two drops fall and collide for
   a second and a half before anything explodes, so it lands as a build rather
   than a flash in the face. */
.intro__vid {
  display: none; width: 100%; height: 100%;
  object-fit: cover; max-width: none;
}
.intro[data-mode="video"] .intro__vid { display: block; }
.intro[data-mode="video"] .intro__logo,
.intro[data-mode="video"] .intro__bar { display: none; }
.intro[data-mode="video"] .intro__in { padding: 0; width: 100%; height: 100%; }
.intro__skip {
  position: absolute; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 2;
  padding: 11px 20px; cursor: pointer;
  background: rgba(10, 5, 24, .72); color: #fff;
  border: 3px solid #000; border-radius: var(--r);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, .6);
  font-family: var(--display); font-size: .66rem; letter-spacing: .04em;
}
.intro__skip:hover { border-color: var(--lime); }
html.no-intro .intro { display: none; }
.intro[data-done="true"] { opacity: 0; visibility: hidden; transition: opacity .6s var(--ease), visibility .6s; }
.intro__in { display: grid; justify-items: center; gap: 26px; padding: var(--gut); }
.intro__logo { width: min(58vw, 380px); height: auto; }
.intro__bar { display: block; width: min(52vw, 240px); height: 6px; background: var(--ink-3); border: 2px solid #000; overflow: hidden; }
.intro__bar i { display: block; height: 100%; width: 100%; background: var(--gold); box-shadow: 0 0 14px var(--gold); transform-origin: left; animation: introBar 1.5s var(--ease) both; }
@keyframes introBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* preview password curtain */
#gate { position: fixed; inset: 0; z-index: 600; background: var(--ink); display: grid; place-content: center; padding: var(--gut); }
.gate__card { display: grid; gap: 12px; max-width: 400px; text-align: center; }
.gate__l { margin: 0; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-faint); }
.gate__h { margin: 0; font-family: var(--display); font-size: 1.5rem; line-height: 1.1; }
.gate__p { margin: 0 0 8px; color: var(--fg-muted); font-size: .94rem; }
.gate__in { padding: 14px 16px; background: var(--ink-2); color: var(--fg); border: 1px solid var(--line-2); border-radius: var(--r-sm); font-size: 1rem; }
.gate__btn { min-height: 54px; background: var(--gold); color: #1a1200; border: 0; border-radius: var(--r-buzz); font-family: var(--sans); font-size: 1.1rem; font-weight: 800; cursor: pointer; }
.gate__err { margin: 0; color: var(--buzzer-hi); font-size: .86rem; }

/* ---------- 12. motion --------------------------------------- */
@view-transition { navigation: auto; }

/* scroll progress hairline */
.sprog {
  position: fixed; inset: 0 0 auto; height: 2px; z-index: 250;
  background: linear-gradient(90deg, var(--accent), var(--accent-hi));
  transform-origin: left; transform: scaleX(0);
}
@supports (animation-timeline: scroll()) {
  .sprog { animation: sprog linear both; animation-timeline: scroll(); }
}
@keyframes sprog { to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- 13. print ---------------------------------------- */
@media print {
  .hdr, .drawer, .callbar, .intro, .lb, .sent, .marq, .sprog { display: none !important; }
  body { background: #fff; color: #000; }
  .btn { border: 1px solid #000; }
}

/* ---------- 10b. per-page signature elements ------------------
   One per page, wired by fx.js. All pointer-driven: none of them run at
   rest, and none use a looping animation. */

/* ---- the buzzer ---- */
.fx-buzz {
  display: grid; gap: clamp(24px, 4vw, 52px); align-items: center;
  grid-template-columns: 1fr;
  background: var(--scan), linear-gradient(180deg, var(--ink-1), var(--ink-2));
  border: var(--bez) solid var(--ink-3); border-radius: var(--r-lg);
  padding: clamp(26px, 4vw, 48px);
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.10), inset -2px -2px 0 rgba(0,0,0,.55),
              0 18px 44px -20px #000;
}
@media (min-width: 820px) { .fx-buzz { grid-template-columns: auto 1fr; } }

.fx-buzz__stage { display: grid; justify-items: center; gap: 22px; }
.fx-buzz__lamp {
  width: 74px; height: 12px; border-radius: 3px;
  background: var(--ink-3); border: 1px solid var(--line-2);
  transition: background .1s linear, box-shadow .1s linear;
}
.fx-buzz__lamp[data-state="wait"] { background: var(--gold); box-shadow: 0 0 22px rgba(255,194,31,.5); }
.fx-buzz__lamp[data-state="go"]   { background: var(--lime); box-shadow: 0 0 30px rgba(62,207,62,.75); }

.fx-buzz__dome {
  width: clamp(150px, 26vw, 200px); aspect-ratio: 1;
  padding: 14px; cursor: pointer;
  background: var(--ink-3);
  border: 1px solid var(--line-2); border-radius: 50%;
  box-shadow: inset 0 -6px 14px rgba(0,0,0,.6), 0 18px 40px -18px #000;
  transition: transform .09s var(--ease-snap);
}
.fx-buzz__dome:active { transform: translateY(4px) scale(.985); }
.fx-buzz__cap {
  display: block; width: 100%; height: 100%; border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.55), transparent 42%),
    radial-gradient(circle at 50% 62%, var(--buzzer), #8d0a1c 78%);
  box-shadow: inset 0 -8px 18px rgba(0,0,0,.45);
}

.fx-buzz__panel { display: grid; gap: 16px; justify-items: start; }
.fx-buzz__out { margin: 0; font-size: 1.05rem; color: var(--fg-muted); min-height: 3em; }
.fx-buzz__read .label { display: block; margin-top: 8px; }
.fx-buzz__runs { display: flex; flex-wrap: wrap; gap: 8px; }
.fx-buzz__run {
  font-family: var(--led); font-size: 15px; font-weight: 800;
  padding: 6px 11px; border-radius: var(--r-xs);
  background: var(--ink-3); border: 1px solid var(--line); color: var(--fg-muted);
}

/* ---- bang the buzzer ---- */
.fx-board {
  display: grid; gap: clamp(24px, 4vw, 44px); align-items: center;
  grid-template-columns: 1fr;
  background: var(--scan), linear-gradient(180deg, var(--ink-1), var(--ink-2));
  border: var(--bez) solid var(--ink-3); border-radius: var(--r-lg);
  padding: clamp(26px, 4vw, 44px);
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.10), inset -2px -2px 0 rgba(0,0,0,.55);
}
@media (min-width: 820px) { .fx-board { grid-template-columns: 1fr auto; } }
.fx-board__main { display: grid; gap: 18px; justify-items: start; }
.fx-board__lamp {
  width: 100%; max-width: 320px; height: 14px; border-radius: 3px;
  background: var(--ink-3); border: 1px solid var(--line-2);
  transition: background .1s linear, box-shadow .1s linear;
}
.fx-board__lamp[data-state="wait"] { background: var(--gold); box-shadow: 0 0 22px rgba(255,194,31,.5); }
.fx-board__lamp[data-state="go"]   { background: var(--lime); box-shadow: 0 0 30px rgba(62,207,62,.75); }
.fx-board__hit {
  min-height: 74px; min-width: 230px; padding: 20px 40px; cursor: pointer;
  background: var(--buzzer); color: #fff;
  border: 3px solid #000; border-radius: var(--r);
  font-family: var(--display); font-size: 1.1rem;
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.35), inset -2px -3px 0 rgba(0,0,0,.3),
              6px 6px 0 #000, 0 0 var(--glow-r) rgb(255 31 75 / var(--glow-a));
  transition: transform .08s var(--ease), box-shadow .08s var(--ease);
}
.fx-board__hit:active {
  transform: translate(6px, 6px);
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.25), inset -2px -3px 0 rgba(0,0,0,.35),
              0 0 0 #000, 0 0 var(--glow-r) rgb(255 31 75 / var(--glow-a));
}
.fx-board__out { margin: 0; color: var(--fg-muted); min-height: 3em; max-width: 52ch; }

.fx-board__side { display: grid; grid-template-columns: auto auto; gap: 26px; align-items: end; }
.fx-board__scale { position: relative; padding-top: 14px; }
.fx-board__bar {
  position: relative; width: 44px; height: 190px;
  background: var(--ink-3); border: 1px solid var(--line-2); border-radius: var(--r-sm);
  overflow: hidden;
}
.fx-board__fill {
  position: absolute; inset: 0; transform-origin: bottom; transform: scaleY(0);
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  transition: transform .4s var(--ease-out);
}
/* the record is the top of the bar, a high-water line you can see from
   the first glance, before you've scored anything */
.fx-board__mark { position: absolute; inset: 14px 0 auto 0; border-top: 2px solid var(--buzzer); }
.fx-board__mark b {
  position: absolute; left: calc(100% + 9px); top: -11px; white-space: nowrap;
  font-family: var(--led); font-size: 16px; color: var(--buzzer-hi);
}
.fx-board__score .label { display: block; margin-top: 8px; }

html[data-perf="low"] .fx-board__bar { display: none; }
html[data-perf="low"] .fx-board__side { grid-template-columns: auto; }
@media (prefers-reduced-motion: reduce) {
  .fx-board__fill { transition: none; }
  .fx-buzz__dome:active, .fx-board__hit:active { transform: none; }
}

/* ---------- 14. arcade extras --------------------------------- */
.hero__welcome {
  margin: 0 0 6px; font-family: var(--display);
  font-size: clamp(.8rem, 1.6vw, 1.05rem); color: var(--gold);
  letter-spacing: .04em;
}

/* The claim under the name. It's the one line on the site that states the
   thing they're proudest of, so it gets display type and the accent glow,
   sized to read as a subtitle to the h1 rather than competing with it.
   Static shadow, no animation: see PERFORMANCE.md before adding one. */
.hero__tag {
  margin: 18px 0 0; font-family: var(--display);
  font-size: clamp(1.1rem, 2.4vw, 1.85rem); line-height: 1.15;
  color: var(--gold); letter-spacing: .01em; text-wrap: balance;
  text-shadow: 0 0 calc(var(--glow-r) * 1.2) rgb(from var(--gold) r g b / var(--glow-a));
}

/* the hero kicker is a lit tally strip, not a dot */
.hero__kick {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 20px;
  padding: 7px 13px 7px 10px;
  background: var(--ink-2); border: 3px solid #000; border-radius: var(--r);
  box-shadow: 3px 3px 0 var(--ink-3);
}
.hero__lamp {
  width: 11px; height: 11px; border-radius: 50%; background: var(--buzzer);
  box-shadow: 0 0 12px rgb(255 31 75 / var(--glow-a));
}

/* the hero readout row sits in a scoreboard housing */
.hero__board {
  display: flex; flex-wrap: wrap; margin: 32px 0 0;
  background: var(--scan), var(--ink-1);
  border: 3px solid var(--ink-3); border-radius: var(--r);
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.07), inset -2px -2px 0 rgba(0,0,0,.5);
}
.hero__cell { padding: 16px 24px 14px; border-left: 3px solid var(--ink-3); }
.hero__cell:first-child { border-left: 0; }
.hero__cell .label { display: block; margin-top: 8px; }

.hero__foot {
  margin-top: 26px; padding-top: 16px; border-top: 2px solid var(--line);
  color: var(--fg-faint); font-size: .84rem;
}
.hero__tally {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 9px; background: rgba(10,5,24,.85); border: 2px solid #000;
}
.hero__tally i { width: 9px; height: 9px; background: var(--buzzer); border-radius: 50%; }
.hero__cap {
  position: absolute; left: 12px; bottom: 12px; z-index: 2;
  background: var(--ink); border: 2px solid #000; border-left: 5px solid var(--accent);
  padding: 7px 12px; font-family: var(--display); font-size: .62rem; color: var(--fg-muted);
}
.hero__stat .label { display: block; margin-top: 8px; }

/* section headings get a marquee rule under them */
.section-head { position: relative; }

/* the tag grid keeps its pinned-to-a-board rotations */
.tags { padding-block: 6px; }

/* buzzer dome: bigger, on a chrome collar */
.fx-buzz__dome {
  border: 4px solid #000;
  box-shadow: inset 0 -8px 18px rgba(0,0,0,.65), 0 8px 0 #000, 0 22px 44px -18px #000;
}
.fx-buzz__dome:active { transform: translateY(6px); box-shadow: inset 0 -8px 18px rgba(0,0,0,.65), 0 2px 0 #000; }
.fx-buzz__lamp {
  width: 92px; height: 14px; border: 3px solid #000; border-radius: var(--r-sm);
  background: var(--ink-3);
}
.fx-buzz__run {
  font-family: var(--led); font-size: 16px;
  border: 2px solid var(--ink-3); border-radius: var(--r-sm);
}
.fx-buzz__out { font-size: 1rem; }

/* the score bar is a tube */
.fx-board__bar {
  border: 3px solid #000; border-radius: var(--r-sm);
  box-shadow: inset 2px 2px 0 rgba(0,0,0,.6);
  background: var(--scan), var(--ink-3);
}
.fx-board__out { font-size: .96rem; }

/* the buzzer panel stretched to full width leaves a dead half; it reads as
   one machine when it's capped */
.fx-buzz { max-width: 860px; }
@media (min-width: 820px) { .fx-buzz { grid-template-columns: auto 1fr; } }
.fx-board { max-width: 980px; }

/* ---- the shop counter ----
   Product cards, not a link-out. Real anchors to their real Square and Etsy
   shops, only forms are dead on this build, navigation works. */
.shop { display: grid; gap: 16px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 860px)  { .shop { grid-template-columns: repeat(4, 1fr); } }

.prod {
  display: flex; flex-direction: column; text-decoration: none; overflow: hidden;
  background: var(--scan), linear-gradient(180deg, var(--ink-1), var(--ink-2));
  border: 3px solid var(--ink-3); border-radius: var(--r);
  box-shadow: 5px 5px 0 rgba(0,0,0,.5);
  transition: transform .14s var(--ease), box-shadow .14s var(--ease), border-color .14s var(--ease);
}
.prod:hover {
  transform: translate(-2px, -3px); border-color: var(--accent);
  box-shadow: 8px 10px 0 rgba(0,0,0,.5);
}
.prod__pic {
  display: grid; place-items: center; overflow: hidden;
  aspect-ratio: 1; background: #fff; border-bottom: 3px solid var(--ink-3);
}
/* contain, not cover, these are tall product shots and cover crops the
   product out of its own card */
.prod__pic img { width: auto; height: 92%; max-width: 92%; object-fit: contain; }
.prod__pic--mark { background: linear-gradient(160deg, #fff, #dfd8ef); }
.prod__pic--mark img { width: 68%; height: auto; object-fit: contain; }
.prod__body { display: flex; flex-direction: column; gap: 6px; padding: 16px 16px 18px; }
.prod__name { font-family: var(--display); font-size: .88rem; line-height: 1.2; color: var(--fg); }
.prod__note { font-size: .84rem; color: var(--fg-muted); flex: 1; }
.prod__cta {
  margin-top: 8px; align-self: flex-start;
  font-family: var(--display); font-size: .62rem; letter-spacing: .04em;
  color: var(--on-accent); background: var(--accent);
  border: 2px solid #000; padding: 8px 12px; border-radius: var(--r-sm);
  box-shadow: 3px 3px 0 #000;
}
.prod:hover .prod__cta { filter: brightness(1.1); }

/* Sponsor marks arrive on white. On a dark page they need a plate, or every
   one of them shows as a white rectangle with a logo somewhere inside it. */
.spon__i {
  background: #fff; border: 3px solid #000; box-shadow: 4px 4px 0 var(--ink-3);
  opacity: .88;
}
.spon__i:hover { opacity: 1; transform: translate(-2px, -3px); box-shadow: 6px 7px 0 var(--ink-3); }
.spon__i--wide { grid-column: span 2; }
@media (max-width: 699px) { .spon__i--wide { grid-column: span 2; } }

.press__link { color: var(--fg); text-decoration: none; display: block; }
.press__link:hover { color: var(--accent); }

/* =============================================================
   15. the arcade layer

   Rules this obeys, from PERFORMANCE.md:
   · nothing loops forever except the bulb chases, and those pause off screen
   · every chase is ONE animation regardless of bulb count
   · everything else is finite or pointer-driven
   · no backdrop-filter, and no translucent layer spanning the viewport
   ============================================================= */

/* ---- CRT power-on ----
   A cabinet snaps on. Two finite animations, once a session, then the
   element removes itself. */
.intro--crt .intro__in { animation: crtIn .62s cubic-bezier(.2,.9,.25,1) .12s both; }
.intro--crt::after {
  content: ""; position: absolute; inset: 50% 0 auto; height: 3px;
  background: var(--bulb); box-shadow: 0 0 30px var(--bulb);
  animation: crtLine .5s cubic-bezier(.16,1,.3,1) both;
}
@keyframes crtLine {
  0%   { transform: scaleX(0); opacity: 0; }
  38%  { transform: scaleX(1); opacity: 1; }
  100% { transform: scaleX(1); opacity: 0; }
}
@keyframes crtIn {
  0%   { transform: scaleY(.004); opacity: .4; filter: brightness(3); }
  55%  { transform: scaleY(1.04); opacity: 1; filter: brightness(1.5); }
  100% { transform: scaleY(1); opacity: 1; filter: none; }
}

/* ---- bulb chase around a panel ----
   Their logo has bulbs around its shield, so panels do too. Same trick as
   the marquee strip: the bulbs are a static mask, one gradient sweeps
   under it. ONE animation per border, whatever the bulb count. */
[data-bulbs] { position: relative; }
/* Two strips rather than a ring: mask-composite for a hollow rectangle is
   patchy across engines, and the marquee technique already works. Same
   guarantee either way: ONE animation per strip, whatever the bulb count. */
.bulbs { position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; }
.bulbs::before, .bulbs::after {
  content: ""; position: absolute; left: 6px; right: 6px; height: 11px; overflow: hidden;
  background: rgba(255, 246, 220, .20);
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0 32%, transparent 36%);
          mask-image: radial-gradient(circle at 50% 50%, #000 0 32%, transparent 36%);
  -webkit-mask-size: 15px 100%; mask-size: 15px 100%;
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
}
.bulbs::before { top: -7px; }
.bulbs::after  { bottom: -7px; }
.bulbs i {
  position: absolute; left: 6px; right: 6px; top: -7px; bottom: -7px;
  background:
    linear-gradient(90deg, transparent 0 38%, var(--gold) 45%, var(--bulb) 50%, var(--gold) 55%, transparent 62% 100%) top    / 300% 11px no-repeat,
    linear-gradient(90deg, transparent 0 38%, var(--gold) 45%, var(--bulb) 50%, var(--gold) 55%, transparent 62% 100%) bottom / 300% 11px no-repeat;
  -webkit-mask-image:
    radial-gradient(circle at 50% 50%, #000 0 32%, transparent 36%),
    radial-gradient(circle at 50% 50%, #000 0 32%, transparent 36%);
          mask-image:
    radial-gradient(circle at 50% 50%, #000 0 32%, transparent 36%),
    radial-gradient(circle at 50% 50%, #000 0 32%, transparent 36%);
  -webkit-mask-size: 15px 11px, 15px 11px;  mask-size: 15px 11px, 15px 11px;
  -webkit-mask-position: top, bottom;       mask-position: top, bottom;
  -webkit-mask-repeat: repeat-x;            mask-repeat: repeat-x;
  animation: bulbRun 2.8s linear infinite;
}
@keyframes bulbRun { to { background-position-x: 200%, 200%; } }
[data-bulbs][data-idle="1"] .bulbs i { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .bulbs i { animation: none; opacity: .55; } }
html[data-perf="low"] .bulbs i { animation: none; opacity: .55; }

/* ---- split-flap digits ---- */
.flap { display: inline-block; font-style: normal; transform-origin: 50% 0; }
.flap.is-flip { animation: flapDown .19s cubic-bezier(.3,.9,.3,1) both; }
@keyframes flapDown {
  0%   { transform: rotateX(-88deg); filter: brightness(2.4); }
  70%  { transform: rotateX(8deg); }
  100% { transform: none; filter: none; }
}

/* ---- point burst ---- */
.burst {
  position: absolute; left: 50%; top: 44%; z-index: 6;
  transform: translate(-50%, -50%); pointer-events: none; white-space: nowrap;
  font-family: var(--display); font-size: clamp(1.1rem, 2.6vw, 1.9rem);
  color: var(--gold);
  text-shadow: 0 0 20px rgba(255,196,0,.8), 3px 3px 0 #000;
  animation: burstUp 1.1s cubic-bezier(.16,1,.3,1) both;
}
@keyframes burstUp {
  0%   { opacity: 0; transform: translate(-50%, -20%) scale(.5); }
  22%  { opacity: 1; transform: translate(-50%, -60%) scale(1.14); }
  70%  { opacity: 1; transform: translate(-50%, -92%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -128%) scale(.94); }
}

/* ---- cabinet shake, and the wheel's peg tick ---- */
.is-shake { animation: shake .3s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes shake {
  10%, 90% { transform: translate(-2px, 1px); }
  20%, 80% { transform: translate(4px, -2px); }
  30%, 50%, 70% { transform: translate(-6px, 2px); }
  40%, 60% { transform: translate(6px, -1px); }
}
.is-tick { animation: tick .09s linear both; }
@keyframes tick { 50% { transform: translateX(1.5px); } }

/* ---- confetti ---- */
.confetti { position: absolute; inset: 0; z-index: 7; pointer-events: none; width: 100%; height: 100%; }

/* ---- hero spotlight ----
   A radial in the hero's OWN background, not a layer over the page. What
   PERFORMANCE.md bans is a translucent element spanning the viewport;
   this is one paint on an element that was already painting. */
.hero--lit {
  background:
    radial-gradient(38rem 30rem at var(--sx, 50%) var(--sy, 40%),
      rgba(177, 77, 255, .17), transparent 68%),
    radial-gradient(22rem 18rem at var(--sx, 50%) var(--sy, 40%),
      rgba(62, 245, 62, .10), transparent 70%);
}
html[data-perf="low"] .hero--lit { background: none; }

/* ---- tile-flip name tags ----
   Scroll-driven, so the compositor runs it and only inside the view range.
   The stagger is a per-tile delay on the same timeline, not a timer. */
.tags--flip .tag:nth-child(3n)   { --rot: -1.2deg; }
.tags--flip .tag:nth-child(3n+1) { --rot: 1.4deg; }
.tags--flip .tag:nth-child(3n+2) { --rot: -.6deg; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .tags--flip .tag {
      transform-origin: 50% 100%;
      animation: tagFlip linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 24%;
      animation-delay: calc(var(--fi, 0) * -0.015s);
    }
  }
}
@keyframes tagFlip {
  from { opacity: 0; transform: perspective(700px) rotateX(-84deg) translateY(14px); }
  to   { opacity: 1; transform: perspective(700px) rotateX(0) rotate(var(--rot, 0deg)); }
}
html[data-perf="low"] .tags--flip .tag { animation: none; opacity: 1; }

/* ---- the prize wheel ---- */
.fx-wheel {
  display: grid; gap: clamp(24px, 4vw, 48px); align-items: center;
  grid-template-columns: 1fr; max-width: 1040px;
  background: var(--scan), linear-gradient(180deg, var(--ink-1), var(--ink-2));
  border: var(--bez) solid var(--ink-3); border-radius: var(--r-lg);
  padding: clamp(24px, 3.4vw, 42px);
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.10), inset -2px -2px 0 rgba(0,0,0,.55);
}
@media (min-width: 900px) { .fx-wheel { grid-template-columns: auto 1fr; } }

.fx-wheel__stage { position: relative; width: min(100%, 400px); margin-inline: auto; }
.fx-wheel__cv {
  width: 100%; height: auto; border-radius: 50%; cursor: grab; touch-action: none;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.6));
}
.fx-wheel__cv:active { cursor: grabbing; }
.fx-wheel__peg {
  position: absolute; left: 50%; top: -12px; z-index: 4;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 15px solid transparent; border-right: 15px solid transparent;
  border-top: 32px solid var(--buzzer);
  filter: drop-shadow(0 3px 0 #000);
}
.fx-wheel__hub {
  position: absolute; left: 50%; top: 50%; z-index: 3;
  width: 17%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; background: radial-gradient(circle at 36% 30%, var(--ink-4), var(--ink-2));
  border: 5px solid #000;
  box-shadow: inset 0 -5px 12px rgba(0,0,0,.7);
}
.fx-wheel__side { display: grid; gap: 16px; justify-items: start; }
.fx-wheel__out { margin: 0; color: var(--fg-muted); min-height: 3.4em; font-size: 1rem; }
.fx-wheel__go {
  min-height: 62px; padding: 18px 34px; cursor: pointer;
  background: var(--gold); color: #1a1200;
  border: 3px solid #000; border-radius: var(--r);
  font-family: var(--display); font-size: 1rem;
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.45), inset -2px -3px 0 rgba(0,0,0,.3),
              5px 5px 0 #000, 0 0 var(--glow-r) rgb(255 196 0 / var(--glow-a));
  transition: transform .08s var(--ease), box-shadow .08s var(--ease);
}
.fx-wheel__go:active:not(:disabled) {
  transform: translate(5px, 5px);
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.35), 0 0 0 #000;
}
.fx-wheel__go:disabled { opacity: .6; cursor: default; }
.fx-wheel__fine { margin: 0; font-size: .8rem; color: var(--fg-faint); max-width: 46ch; }

/* ---- the site-wide sound switch ---- */
.soundbtn {
  position: fixed; right: 14px; bottom: 78px; z-index: 195;
  padding: 9px 14px; cursor: pointer;
  background: var(--ink-2); color: var(--fg-muted);
  border: 3px solid #000; border-radius: var(--r);
  box-shadow: 3px 3px 0 var(--ink-3);
  font-family: var(--display); font-size: .6rem; letter-spacing: .04em;
}
.soundbtn:hover { color: var(--fg); border-color: var(--accent); }
@media (min-width: 1100px) { .soundbtn { bottom: 18px; } }

/* ---------- 15. party packages comparison ---------------------
   Their artwork is one wide image: four colour-coded columns, eight rows.
   An image of a table is unreadable at 390px, invisible to a screen reader,
   costs 2.5 MB, and can't be corrected without re-opening Photoshop. So it's
   rebuilt as markup, keeping the artwork's colours and wording exactly.

   One card per package: stacks on a phone, sits four-across on a desktop.
   No animation of its own; the container carries a single .reveal.
   ------------------------------------------------------------ */
.pkgs { display: grid; gap: 18px; margin-top: 30px; }
@media (min-width: 700px)  { .pkgs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1120px) { .pkgs { grid-template-columns: repeat(4, 1fr); } }

.pkg {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--scan), linear-gradient(180deg, var(--ink-1), var(--ink-2));
  border: 3px solid #000; border-radius: var(--r);
  box-shadow: 4px 4px 0 var(--ink-3), 0 16px 40px -24px #000;
}

.pkg__head {
  padding: 16px 18px 14px; text-align: center;
  background: linear-gradient(180deg, var(--accent-hi), var(--accent));
  color: var(--on-accent); border-bottom: 3px solid #000;
}
.pkg__hrs {
  display: block; font-family: var(--display); line-height: 1;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  text-shadow: 0 2px 0 rgb(255 255 255 / .3);
}
.pkg__word {
  display: inline-block; margin-top: 9px; padding: 4px 13px 3px;
  background: rgb(0 0 0 / .74); color: #fff; border-radius: 999px;
  font-family: var(--display); font-size: .58rem; letter-spacing: .14em;
  text-transform: uppercase;
}

.pkg__list { margin: 0; padding: 0; display: grid; }
.pkg__row { padding: 13px 18px 15px; border-top: 2px solid var(--line); }
.pkg__row:first-child { border-top: 0; }
.pkg__list dt {
  font-family: var(--display); font-size: .6rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent-hi);
}
.pkg__list dd { margin: 7px 0 0; font-size: .94rem; line-height: 1.5; }
/* "Not included" is information, not an error. Dimmed, never red. */
.pkg__no { color: var(--fg-faint); }

.pkg__x { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pkg__x li { position: relative; padding-left: 17px; font-size: .89rem; line-height: 1.45; }
.pkg__x li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}

.pkgs__foot {
  margin: 28px 0 0; text-align: center; text-wrap: balance;
  font-family: var(--display); line-height: 1.4;
  font-size: clamp(.95rem, 1.7vw, 1.2rem);
}

/* Rows line up across the four columns, which is the whole point of a
   comparison: "Bring Food" should sit at the same height in all four. Only
   applied where all four are genuinely side by side. Without subgrid each
   card just sizes itself and stays readable, so this degrades quietly. */
@media (min-width: 1120px) {
  @supports (grid-template-rows: subgrid) {
    .pkgs { grid-template-rows: auto repeat(8, auto); }
    .pkg { grid-row: 1 / span 9; display: grid; grid-template-rows: subgrid; }
    .pkg__list { grid-row: 2 / span 8; grid-template-rows: subgrid; }
  }
}

/* ---------- 16. the drinks board ------------------------------
   Their list is a picture on /plan-your-visit, so the prices are invisible to
   search, to a screen reader, and to anyone who zooms. A real table, in their
   two-panel green/blue split, with the same wording.
   Transcript: capture/from-client/2026-09-10-drinks-list.txt
   ------------------------------------------------------------ */
.drinks { display: grid; gap: 18px; margin-top: 30px; }
@media (min-width: 960px) { .drinks { grid-template-columns: repeat(2, 1fr); } }

.drinks__panel {
  overflow: hidden; padding: 4px;
  background: var(--scan), linear-gradient(180deg, var(--ink-1), var(--ink-2));
  border: 3px solid var(--accent); border-radius: var(--r);
  box-shadow: 0 0 0 3px #000, 4px 4px 0 var(--ink-3), 0 16px 40px -24px #000;
}

.drinks__t { width: 100%; border-collapse: collapse; font-size: .93rem; }
.drinks__t thead th {
  padding: 10px 12px 9px; text-align: right;
  font-family: var(--display); font-size: .6rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent);
}
.drinks__t thead th:first-child { text-align: left; }
.drinks__t tbody th {
  padding: 9px 12px; text-align: left; font-weight: 600; color: var(--fg);
}
/* the "(bottle)", "16oz", "(Belgian white)" qualifiers ride smaller, as they do
   on their board, so the drink name stays the thing you scan */
.drinks__t tbody th span {
  font-weight: 500; font-size: .82em; color: var(--fg-faint); white-space: nowrap;
}
.drinks__t td {
  padding: 9px 12px; text-align: right; color: var(--fg-muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.drinks__t tbody tr + tr th, .drinks__t tbody tr + tr td { border-top: 1px solid var(--line); }
/* the price chip, their green/blue pill */
.drinks__t td b {
  display: inline-block; min-width: 58px; padding: 3px 9px 2px;
  background: var(--accent); color: var(--on-accent, #04140a);
  border: 2px solid #000; border-radius: var(--r-xs, 4px);
  font-weight: 800; font-size: .86rem;
}
.drinks__panel:nth-child(2) .drinks__t td b { color: #04122b; }

.drinks__foot {
  margin: 26px 0 0; text-align: center;
  font-family: var(--display); font-size: clamp(.85rem, 1.5vw, 1.05rem);
  letter-spacing: .02em;
}

/* 390px: the qualifiers wrap rather than shoving the price column off-screen */
@media (max-width: 420px) {
  .drinks__t { font-size: .86rem; }
  .drinks__t tbody th, .drinks__t td, .drinks__t thead th { padding-inline: 8px; }
  .drinks__t tbody th span { display: block; white-space: normal; }
  .drinks__t td b { min-width: 52px; }
}

/* ---------- 17. the promo panel -------------------------------
   For a dated offer that arrives as artwork. Built so the words are real text:
   a $500 prize and a 3-8 player limit are the two things a visitor actually
   needs, and inside a PNG neither is searchable, selectable or readable to a
   screen reader. Static shadows only, nothing animates.
   ------------------------------------------------------------ */
.promo {
  padding: clamp(26px, 4vw, 44px) clamp(20px, 3vw, 38px);
  text-align: center;
  background: var(--scan), linear-gradient(180deg, #120309, var(--ink-1));
  border: 3px solid #000; border-radius: var(--r);
  box-shadow: inset 0 0 0 3px var(--accent), 5px 5px 0 var(--ink-3), 0 20px 50px -26px #000;
}
.promo__kick {
  display: inline-block; padding: 6px 16px 5px;
  background: var(--accent); color: var(--on-accent);
  border: 3px solid #000; border-radius: var(--r);
  font-family: var(--display); font-size: clamp(.72rem, 1.5vw, .95rem);
  letter-spacing: .16em; text-transform: uppercase;
}
.promo__title {
  margin: 18px 0 0; font-family: var(--display); line-height: 1.05;
  font-size: clamp(1.5rem, 4.4vw, 3rem); text-wrap: balance;
}
.promo__facts {
  display: grid; gap: 20px; margin-top: 30px; justify-content: center;
}
@media (min-width: 640px) { .promo__facts { grid-auto-flow: column; gap: clamp(28px, 6vw, 72px); } }
.promo__fact .label { display: block; margin-top: 10px; text-wrap: balance; }
/* The cash figure reads green, the way it does on their artwork. Rebind the
   token rather than setting `color`: .led__on draws its glow from --accent too,
   so overriding colour alone gives you a green numeral with a red halo. */
.promo__cash { --accent: var(--lime); }
/* the date, once he gives us one. Hidden until then rather than invented. */
.promo__when { display: block; margin-top: 16px; color: var(--fg-muted); font-size: .92rem; }

/* ---------- 18. youtube facade --------------------------------
   A poster and a play button; the real iframe is built on click (site.js).
   Half a megabyte of third-party player and its cookies shouldn't load on
   every visit for a video most visitors never press. Looks the same.
   ------------------------------------------------------------ */
.ytf {
  position: relative; overflow: hidden; margin-top: 26px;
  aspect-ratio: 16 / 9; max-width: 980px; margin-inline: auto;
  background: var(--ink-1);
  border: 3px solid #000; border-radius: var(--r);
  box-shadow: inset 0 0 0 3px var(--accent), 5px 5px 0 var(--ink-3), 0 20px 50px -26px #000;
}
.ytf__poster, .ytf__frame {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.ytf__poster { object-fit: cover; }
.ytf__play {
  position: absolute; inset: 0; display: grid; place-items: center;
  width: 100%; height: 100%; padding: 0; cursor: pointer;
  background: rgb(5 3 15 / .34); border: 0; color: #fff;
  transition: background .18s var(--ease);
}
.ytf__play svg {
  width: clamp(58px, 9vw, 88px); height: clamp(58px, 9vw, 88px);
  padding: clamp(13px, 2vw, 20px);
  background: var(--accent); color: var(--on-accent);
  border: 3px solid #000; border-radius: 50%;
  box-shadow: 4px 4px 0 rgb(0 0 0 / .55);
  transition: transform .18s var(--ease);
}
.ytf__play:hover { background: rgb(5 3 15 / .16); }
.ytf__play:hover svg, .ytf__play:focus-visible svg { transform: scale(1.08); }

/* Second and subsequent links inside a press cell, e.g. FLA10's write-up and
   its newscast. Chips rather than inline links, so it's clear they go to two
   different places. */
.press__also { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.press__also a {
  padding: 5px 11px 4px;
  background: var(--ink-2); border: 2px solid var(--line-2); border-radius: 999px;
  font-family: var(--display); font-size: .6rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--fg-muted); text-decoration: none;
}
.press__also a:hover { color: var(--fg); border-color: var(--accent); }

/* ---------- 19. the booking widget ----------------------------
   Bookeo renders its own markup inside .booking, so this only gives it a
   readable surface: a light card, because their widget draws dark text and
   would be unreadable straight onto the cabinet, and room to breathe.
   Don't style their internals; they change them without telling anyone.
   ------------------------------------------------------------ */
.booking {
  margin-top: 28px; padding: clamp(14px, 2.4vw, 26px);
  background: #fff; color: #111;
  border: 3px solid #000; border-radius: var(--r);
  box-shadow: inset 0 0 0 3px var(--accent), 5px 5px 0 var(--ink-3), 0 20px 50px -26px #000;
  /* their widget is a wide table on desktop and must not push the page out */
  overflow-x: auto;
}
.booking a { color: #0b57c4; }
.booking__fallback { margin: 0; padding: 20px; text-align: center; }
.booking__alt {
  margin: 20px 0 0; text-align: center; color: var(--fg-muted); font-size: .92rem;
}

/* ---------- 20. the press release ----------------------------
   A document, not a photograph, so it keeps its page shape instead of being
   cropped to the gallery's 4:3. Sits beside its own date and caption, because
   the thing that matters about it is WHEN it was written: it describes the
   studio before it opened and its numbers no longer match.
   ------------------------------------------------------------ */
.release { display: grid; gap: 22px; margin-top: 34px; align-items: center; }
@media (min-width: 800px) { .release { grid-template-columns: minmax(0, 280px) 1fr; gap: 34px; } }

/* override the gallery crop; a page of text must not be cut off */
.release__doc { aspect-ratio: 1415 / 2000; cursor: zoom-in; }
.release__doc img { object-fit: contain; background: #fff; }

.release__side p { margin: 10px 0 0; color: var(--fg-muted); max-width: 56ch; }

/* ---------- 30. content that outgrows the screen ------------
   The reveal above runs on a view() timeline, and a view() timeline measures
   progress across the SUBJECT. So an element far taller than the viewport
   renders its own top near the start of its own fade, and keeps rendering it
   that way until you have scrolled well into the element.

   Measured on the booking page: .booking at 288px computes to opacity 1, and
   the identical element at 4288px computes to 0.67 at its top. That is what a
   visitor sees the moment they expand a product in the booking widget — a
   white panel that reads as flat grey, over a near-black page. On a phone the
   element is taller relative to the screen, so it is dimmer again.

   Anything that big is content somebody is trying to read, not decoration
   arriving. It opts out of the animation and simply shows.

   .reveal--static is applied by site.js, which measures against the live
   viewport and re-measures when an element grows — the booking widget only
   becomes tall after a visitor interacts with it. The two named containers
   below are the ones known to do it and are pinned here as well, so the fix
   holds even with no JavaScript.
   ------------------------------------------------------------ */
.reveal.reveal--static,
.reveal.booking,
.reveal.pkgs {
  opacity: 1;
  transform: none;
  animation: none;
}

/* ---------- 31. anchored content clears the fixed header ----
   .hdr is fixed and turns solid #0a0518 as soon as the page scrolls, so a jump
   to an in-page anchor lands that content at y=0 — underneath a bar 99px tall
   on a phone and 123px on desktop. Measured: #booking arrives with its heading
   entirely covered, which reads as the section beginning with a dark band.

   scroll-margin-top moves where each target comes to rest; scroll-padding-top
   on the scroller catches anything scrolled into view that carries no id.
   ------------------------------------------------------------ */
html { scroll-padding-top: clamp(116px, 1.4vw + 108px, 142px); }
[id] { scroll-margin-top: clamp(116px, 1.4vw + 108px, 142px); }


/* ---- 32. the pages recovered from the old Duda site ---------------------
   Seven pages were missed in the migration. They are unlinked utility pages —
   the rules sheet sent with every booking, the venue check-in screen, the
   post-visit review pages, the sponsor walls — and the owner asked for them
   back exactly as they were, not redesigned.

   So the sizes and colours here are carried over from his Duda page: each run
   sets --d and --m inline for its desktop and mobile size, and its own colour.
   Everything is scoped under body.legacy so none of it can reach the other
   eleven pages. No animation at all on these — they are read, not browsed,
   and one of them is held up to a lobby attendant.
   ------------------------------------------------------------ */
body.legacy .lg {
  max-width: 74ch;
  margin-inline: auto;
  padding: clamp(26px, 5vw, 56px) clamp(18px, 5vw, 28px) clamp(48px, 8vw, 96px);
}
body.legacy .lg--narrow { max-width: 62ch; }

body.legacy .lg p {
  margin: 0 0 0.95em;
  line-height: 1.6;
  color: #e9e9ec;
  font-size: var(--m, 16px);
}
@media (min-width: 760px) {
  body.legacy .lg p { font-size: var(--d, 17px); line-height: 1.62; }
}
body.legacy .lg .c { text-align: center; }
body.legacy .lg .r { text-align: right; }

/* A run keeps its own size as well as its own colour: on the check-in screen
   the code is deliberately far larger than the line above it. */
body.legacy .lg span,
body.legacy .lg strong,
body.legacy .lg em { font-size: var(--m, inherit); }
@media (min-width: 760px) {
  body.legacy .lg span,
  body.legacy .lg strong,
  body.legacy .lg em { font-size: var(--d, inherit); }
}

body.legacy .lg a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
body.legacy .lg a:hover { text-decoration-thickness: 2px; }
body.legacy .lg img { display: block; max-width: 100%; height: auto; margin: 1.5em auto; }

/* The sponsor wall: the same grid treatment win-stuff already uses. */
body.legacy .lg-spon {
  display: grid; gap: clamp(14px, 3vw, 26px);
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  align-items: center; margin: 2em 0;
}
body.legacy .lg-spon img { margin: 0; }

/* /land was the one light page on his dark site — black text on white, with a
   hairline above it. Reproduced rather than "fixed", because black text on the
   dark theme would simply be an invisible page. */
body.legacy--light .lg {
  background: #fff;
  border-top: 1px solid #e2e2e2;
  max-width: none;
  padding-inline: clamp(18px, 6vw, 40px);
}
body.legacy--light .lg > * { max-width: 74ch; margin-inline: auto; }
body.legacy--light .lg p { color: #000; }

/* These pages never animate. One of them is a check-in screen. */
body.legacy .reveal,
body.legacy .reveal.reveal--static { opacity: 1; transform: none; animation: none; }
@media (prefers-reduced-motion: reduce) {
  body.legacy * { animation: none !important; transition: none !important; }
}

/* ---- 33. the check-in screen, and the review page -----------------------
   Two of the recovered pages are not documents, they are single-purpose
   screens: /tag is held up to a lobby attendant, /reviews exists to get one
   tap onto Google. Both get their own treatment rather than the plain
   document flow in 32, which the other recovered pages still use.

   NOTE for /tag: do NOT reach for .led here. The Doto readout face is loaded
   subset to digits (&text=0123456789...), so "Apprvd-902 GSP" would fall back
   mid-string and render as two different fonts. Bungee is the display face and
   has the whole alphabet.
   ------------------------------------------------------------ */

/* ---- the check-in screen ---- */
.chk { text-align: center; padding: clamp(30px, 7vw, 76px) 0 clamp(40px, 8vw, 90px); }
.chk__warn {
  font-family: var(--display); color: var(--buzzer);
  font-size: clamp(30px, 8.5vw, 56px); line-height: 1.02; margin: 0 0 10px;
  text-shadow: 0 0 22px rgba(255, 31, 75, .38);
}
.chk__lead {
  color: var(--gold); font-weight: 800; margin: 0 0 24px;
  font-size: clamp(15px, 3.4vw, 22px); letter-spacing: .01em;
}
/* The one thing on the page that has to read across a lobby. */
.chk__code {
  display: inline-block; font-family: var(--display);
  font-size: clamp(34px, 11vw, 78px); line-height: 1; letter-spacing: .02em;
  color: #ccE310; padding: clamp(18px, 4vw, 30px) clamp(20px, 6vw, 46px);
  border: 3px solid rgba(204, 227, 16, .55); border-radius: var(--r);
  background: linear-gradient(180deg, rgba(204,227,16,.10), rgba(204,227,16,.03));
  box-shadow: 0 0 34px rgba(204, 227, 16, .22), inset 0 0 30px rgba(204, 227, 16, .07);
  word-break: break-word;
}
.chk__hr { border: 0; border-top: 1px solid var(--line); margin: clamp(34px, 7vw, 58px) auto; max-width: 460px; }
.chk__h { font-family: var(--display); font-size: clamp(20px, 5vw, 30px); margin: 0 0 14px; }
.chk__p { color: var(--fg-muted); font-size: clamp(15px, 3.2vw, 19px); line-height: 1.55; margin: 0 auto 8px; max-width: 46ch; }
.chk__p em { color: var(--fg); font-style: italic; }
.chk__teams {
  display: flex; flex-wrap: wrap; gap: .5em; justify-content: center; align-items: baseline;
  font-family: var(--display); font-size: clamp(28px, 8vw, 52px); margin: 18px 0 6px;
}
.chk__blue  { color: #2c78f3; }
.chk__green { color: #18ed31; }
.chk__egg { color: var(--fg-faint); font-size: 14px; margin-top: clamp(30px, 6vw, 52px); }

/* ---- the review page ---- */
.rev { text-align: center; }
/* His Google badge is a 1920x1080 asset; unconstrained it swallowed the page. */
.rev__badge { display: block; width: min(260px, 62vw); height: auto; margin: 0 auto 6px; }
.rev__card {
  display: inline-flex; flex-direction: column; align-items: center; gap: 10px;
  padding: clamp(20px, 4vw, 30px) clamp(24px, 6vw, 44px); text-decoration: none;
  border: 2px solid var(--line-2); border-radius: var(--r); color: inherit;
  background: rgba(255, 255, 255, .03);
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.rev__card:hover { border-color: var(--accent); transform: translateY(-2px); }
.rev__social { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 22px; }
.rev__note { color: var(--fg-muted); max-width: 52ch; margin: 26px auto 0; line-height: 1.6; }