/* Frameball landing page. One file, in page order.
   Brand route "On the Record": fight poster, broadcast graphics, pub chalkboard. */

/* ---------- 1. Fonts ---------- */
@font-face { font-family: 'Big Shoulders'; src: url('../fonts/big-shoulders-latin-900-normal.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Big Shoulders'; src: url('../fonts/big-shoulders-latin-800-normal.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'Atkinson Hyperlegible Next'; src: url('../fonts/atkinson-hyperlegible-next-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Atkinson Hyperlegible Next'; src: url('../fonts/atkinson-hyperlegible-next-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Atkinson Hyperlegible Next'; src: url('../fonts/atkinson-hyperlegible-next-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('../fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url('../fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Caveat'; src: url('../fonts/caveat-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

/* ---------- 2. Tokens ---------- */
:root {
  --yellow: #F4C430;
  --yellow-edge: #B38B12;
  --slate: #1C242C;
  --slate-raised: #26313B;
  --slate-deep: #151B21;
  --backdrop: #10161B;
  --bezel: #0F1418;
  --line: #34414D;
  --ring: #4A5866;
  --cue: #F3F0E8;
  --cue-2: #C9CFD5;
  --muted: #9AA6B2;
  --red: #D9412E;
  --red-ink: #B5301F;
  --red-text: #F07A69;
  --blue: #5BA3EC;

  --f-display: 'Big Shoulders', 'Arial Narrow', Impact, sans-serif;
  --f-read: 'Atkinson Hyperlegible Next', 'Segoe UI', Verdana, sans-serif;
  --f-mono: 'IBM Plex Mono', Consolas, 'Courier New', monospace;
  --f-chalk: 'Caveat', 'Segoe Print', 'Comic Sans MS', cursive;

  /* Plan: clamp(3.4rem, 14.5vw, 12.5rem). Min 3.2rem keeps "ON THE RECORD." on one line at 360px;
     the 23vh cap keeps the hero button above the fold on a 720px-tall laptop. */
  --t-h1: clamp(3.2rem, min(14.5vw, 23vh), 12.5rem);
  --t-h2: clamp(2.6rem, 7vw, 6.75rem);
  --t-h3: clamp(1.5rem, 2.6vw, 2.4rem);
  --t-lead: clamp(1.2rem, 1.7vw, 1.6rem);
  --t-body: clamp(1.0625rem, 0.3vw + 1rem, 1.125rem);
  --t-mono: clamp(0.8125rem, 0.25vw + 0.75rem, 1rem);

  --gutter: clamp(20px, 5vw, 72px);
  --wrap: 1320px;
  --pad: clamp(72px, 11vw, 176px);

  --vf-stroke: clamp(6px, 0.9vw, 14px);
  --vf-off: clamp(10px, 2vw, 28px);

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --bug-h: 56px;
  --focus: var(--blue);
  --ink: var(--cue);
}
@media (min-width: 720px) { :root { --bug-h: 64px; } }

/* ---------- 3. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-bottom: calc(var(--bug-h) + env(safe-area-inset-bottom) + 16px);
  background: var(--slate-deep);
}
body {
  margin: 0;
  font-family: var(--f-read);
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--cue);
  background: var(--slate-deep);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  transition: padding-bottom 0s;
}
body.has-bug { padding-bottom: calc(var(--bug-h) + env(safe-area-inset-bottom)); }
[hidden] { display: none !important; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ol, ul, dl, dd, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
em { font-style: normal; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
@media (min-width: 480px) { .nobr { white-space: nowrap; } }
.nw { white-space: nowrap; }
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.ico { width: 1em; height: 1em; flex: none; }

/* Grounds. Each sets its own ink and its focus-ring colour. */
.on-yellow { background: var(--yellow); color: var(--slate); --ink: var(--slate); --focus: var(--slate); }
.on-slate { background: var(--slate); color: var(--cue); }
.on-deep { background: var(--slate-deep); color: var(--cue); }
.on-backdrop { background: var(--backdrop); color: var(--cue); }

:focus { outline: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
main:focus-visible { outline: none; }

.skip {
  position: absolute; left: 12px; top: -200px; z-index: 100;
  background: var(--slate); color: var(--cue); padding: 14px 20px; border-radius: 10px;
  font-weight: 700; text-decoration: none; --focus: var(--blue);
}
.skip:focus { top: 12px; }

/* ---------- 4. Type ---------- */
.h1, .h2, .h3, .wordmark, .btn, .part-num, .beat-num, .story-line, .bug-name {
  font-family: var(--f-display);
  text-transform: uppercase;
}
.h1 { font-size: var(--t-h1); font-weight: 900; line-height: 0.88; letter-spacing: -0.012em; }
/* break-word: a long word (COMMENTATOR.) breaks rather than running off a 320px screen when the
   reader widens the letter spacing. At normal spacing every word fits. */
.h2 { font-size: var(--t-h2); font-weight: 900; line-height: 0.97; letter-spacing: 0; text-wrap: balance; overflow-wrap: break-word; }
.h3 { font-size: var(--t-h3); font-weight: 800; line-height: 1.02; letter-spacing: 0.005em; overflow-wrap: break-word; }
.lead { font-size: var(--t-lead); line-height: 1.4; font-weight: 600; max-width: 34ch; text-wrap: pretty; }
p { max-width: 62ch; text-wrap: pretty; }
.mono {
  font-family: var(--f-mono); font-weight: 500; font-size: var(--t-mono);
  text-transform: uppercase; letter-spacing: 0.08em; line-height: 1.4;
}
.hl { color: var(--yellow); }
.on-dark-text p { color: var(--cue-2); }

/* ---------- 5. Buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 64px; padding: 0 30px; border: 0; border-radius: 14px;
  font-weight: 900; font-size: clamp(1.375rem, 1.2vw + 1rem, 1.75rem); line-height: 1; letter-spacing: 0.02em;
  text-decoration: none; cursor: pointer; text-align: center;
  transition: transform 90ms ease-out, box-shadow 90ms ease-out, background-color 150ms;
  -webkit-tap-highlight-color: transparent;
}
.btn--slate { background: var(--slate); color: var(--cue); box-shadow: 0 6px 0 var(--backdrop); --focus: var(--slate); }
.btn--yellow { background: var(--yellow); color: var(--slate); box-shadow: 0 6px 0 var(--yellow-edge); }
.btn--ghost { background: transparent; color: var(--cue); box-shadow: inset 0 0 0 3px var(--ring); }
.btn--sm { min-height: 56px; padding: 0 22px; font-size: 1.375rem; }
@media (hover: hover) {
  .btn--slate:hover { background: #26313B; }
  .btn--yellow:hover { background: #F7CF4E; }
  .btn--ghost:hover { box-shadow: inset 0 0 0 3px var(--cue-2); }
}
.btn--slate:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--backdrop); }
.btn--yellow:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--yellow-edge); }

.text-link {
  display: inline-flex; align-items: center; gap: 0.45em; min-height: 48px;
  font-weight: 700; font-size: 1.125rem; text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}
.text-link .ico { width: 1.1em; height: 1.1em; transition: transform 200ms var(--ease); }
@media (hover: hover) { .text-link:hover .ico { transform: translateY(3px); } }

.tag {
  display: inline-flex; align-items: center; vertical-align: middle;
  font-family: var(--f-mono); font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.3em 0.6em 0.25em; border-radius: 6px; line-height: 1.1;
}
.tag--opt { box-shadow: inset 0 0 0 2px var(--yellow); color: var(--yellow); }

/* ---------- 6. Signature devices ---------- */
/* 6a. Lockup */
.lockup { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; min-height: 48px; }
.lockup .mark { width: 40px; height: 40px; }
.lockup .wordmark { font-weight: 900; font-size: 34px; line-height: 1; letter-spacing: 0.01em; }
.lockup--on-yellow { color: var(--slate); --ball: var(--red); --hl: transparent; }
.lockup--on-dark { color: var(--cue); --ball: var(--yellow); --hl: rgb(243 240 232 / 0.85); }

/* 6b. Viewfinder corners */
.vf { position: relative; }
.vf-c {
  position: absolute; width: clamp(28px, 9%, 132px); aspect-ratio: 1;
  border: 0 solid currentColor; pointer-events: none;
}
.vf--slate { color: var(--slate); }
.vf--cue { color: var(--cue); }
.vf-tl { top: calc(-1 * (var(--vf-off) + var(--vf-stroke))); left: calc(-1 * (var(--vf-off) + var(--vf-stroke))); border-top-width: var(--vf-stroke); border-left-width: var(--vf-stroke); --dx: -1; --dy: -1; }
.vf-tr { top: calc(-1 * (var(--vf-off) + var(--vf-stroke))); right: calc(-1 * (var(--vf-off) + var(--vf-stroke))); border-top-width: var(--vf-stroke); border-right-width: var(--vf-stroke); --dx: 1; --dy: -1; }
.vf-br { bottom: calc(-1 * (var(--vf-off) + var(--vf-stroke))); right: calc(-1 * (var(--vf-off) + var(--vf-stroke))); border-bottom-width: var(--vf-stroke); border-right-width: var(--vf-stroke); --dx: 1; --dy: 1; }
.vf-bl { bottom: calc(-1 * (var(--vf-off) + var(--vf-stroke))); left: calc(-1 * (var(--vf-off) + var(--vf-stroke))); border-bottom-width: var(--vf-stroke); border-left-width: var(--vf-stroke); --dx: -1; --dy: 1; }

/* 6c. Devices: wall screen, phone, TV. Hard slab under each, no blur. */
.screen {
  position: relative;
  background: var(--bezel);
  padding: clamp(5px, 0.7vw, 12px);
  border-radius: clamp(10px, 1.1vw, 18px);
  box-shadow: 0 clamp(8px, 0.9vw, 14px) 0 var(--backdrop);
}
.screen img, .tv-frame img {
  width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  background: var(--slate); border-radius: clamp(4px, 0.4vw, 8px);
  color: var(--muted); font-size: 0.875rem;
}

.phone-wrap { container-type: inline-size; }
.phone {
  background: var(--bezel);
  padding: 3.4cqw;
  border-radius: 15cqw;
  box-shadow: 0 4cqw 0 var(--backdrop), inset 0 0 0 0.8cqw #1E262E;
}
.phone-screen { position: relative; border-radius: 11.6cqw; overflow: hidden; background: var(--slate); }
.phone-status {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  height: 12.5cqw; padding: 0.6cqw 7.5cqw 0 9cqw; background: var(--slate-deep); color: var(--cue);
}
.ps-clock { font-family: var(--f-read); font-weight: 700; font-size: 4.3cqw; letter-spacing: 0.01em; line-height: 1; }
.ps-island {
  position: absolute; left: 50%; top: 2.2cqw; width: 30cqw; height: 8.4cqw; transform: translateX(-50%);
  background: var(--bezel); border-radius: 5cqw;
}
.ps-icons svg { width: 15cqw; height: auto; fill: currentColor; }
.phone-screen img { width: 100%; aspect-ratio: 390 / 844; object-fit: cover; object-position: top; background: var(--slate); color: var(--muted); font-size: 0.75rem; }

/* 6d. Chalk notes (desktop only, decorative) */
.chalk { display: none; position: absolute; z-index: 3; pointer-events: none; font-family: var(--f-chalk); font-weight: 700; line-height: 1; white-space: nowrap; }
.chalk span { font-size: clamp(1.9rem, 2.2vw, 2.75rem); display: block; letter-spacing: 0.005em; }
.chalk .chalk-arrow--dl { width: clamp(64px, 5.4vw, 92px); aspect-ratio: 90 / 150; }
.chalk .chalk-arrow--up { width: clamp(56px, 4.6vw, 78px); aspect-ratio: 90 / 110; }
.chalk-arrow { flex: none; width: clamp(70px, 6.5vw, 110px); height: auto; aspect-ratio: 2 / 1; overflow: visible; }
.chalk--slate { color: var(--slate); }
.chalk--yellow { color: var(--yellow); }
@media (min-width: 1100px) { .chalk { display: block; } }

/* ---------- 7. Masthead + hero (#top, yellow) ---------- */
.masthead { position: relative; z-index: 3; }
.masthead-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: max(12px, env(safe-area-inset-top)); padding-bottom: 4px; min-height: 72px; }
@media (min-width: 1000px) { .masthead-row { min-height: 64px; padding-top: max(10px, env(safe-area-inset-top)); } }
.masthead-cta {
  display: inline-flex; align-items: center; min-height: 48px;
  font-weight: 700; font-size: 1rem; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.25em;
  text-align: right;
}
@media (max-width: 479px) { .lockup { gap: 9px; } .lockup .wordmark { font-size: 28px; } .lockup .mark { width: 32px; height: 32px; } .masthead-cta { font-size: 0.9375rem; } }

.hero { position: relative; z-index: 2; padding-top: clamp(20px, 3vw, 48px); padding-bottom: clamp(56px, 9vw, 150px); overflow: clip; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: clamp(48px, 7vw, 80px); }
.pill {
  display: inline-flex; align-items: center; gap: 10px; width: fit-content;
  background: var(--slate); color: var(--cue); border-radius: 999px; padding: 9px 18px 9px 14px;
  font-family: var(--f-mono); font-weight: 600; font-size: 0.9375rem; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1;
}
.pill-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--red); flex: none; }
.h1 { margin-top: clamp(18px, 2.4vw, 36px); margin-left: -0.03em; }
/* The clip box reaches below the baseline so commas are never cut; layout height is unchanged. */
.h1-line { display: block; overflow: clip; padding-bottom: 0.2em; margin-bottom: -0.2em; }
.h1-line > span { display: block; }
.hero-lead { margin-top: clamp(22px, 2.6vw, 40px); max-width: 30ch; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: clamp(26px, 3vw, 40px); }
.hero-kit { margin-top: 22px; color: var(--slate); font-weight: 600; }

.hero-visual { position: relative; padding: var(--vf-off); padding-right: calc(var(--vf-off) + 4%); margin-inline: calc(-1 * var(--vf-off) + 4px); }
.hero-kiosk { width: 100%; }
.hero-phone { position: absolute; width: clamp(96px, 25%, 210px); right: 0; bottom: -8%; z-index: 2; }
@media (max-width: 719px) {
  .hero-actions .btn { width: 100%; }
  .hero-visual { margin-bottom: 8%; }
}

@media (min-width: 1000px) {
  .hero { padding-top: clamp(4px, 0.8vw, 16px); }
  .hero-grid {
    grid-template-columns: minmax(0, 4.7fr) minmax(0, 7.3fr);
    grid-template-rows: auto auto auto auto auto 1fr;
    column-gap: clamp(32px, 3.5vw, 64px); row-gap: 0;
  }
  .hero-copy { display: contents; }
  .pill { grid-column: 1 / -1; grid-row: 1; }
  .h1 { grid-column: 1 / -1; grid-row: 2; margin-top: clamp(14px, 1.6vh, 28px); }
  .hero-lead { grid-column: 1; grid-row: 3; margin-top: clamp(22px, 3.4vh, 52px); max-width: 33ch; font-size: clamp(1.2rem, min(1.5vw, 2.7vh), 1.6rem); }
  .hero-actions { grid-column: 1; grid-row: 4; margin-top: clamp(22px, 3.2vh, 40px); }
  .hero-kit { grid-column: 1; grid-row: 5; margin-top: clamp(14px, 2.2vh, 22px); }
  .hero-visual { grid-column: 2; grid-row: 3 / span 4; margin-top: clamp(64px, 6vw, 112px); margin-right: calc(-1 * var(--gutter) + 8px); margin-left: 0; padding-right: calc(var(--vf-off) + 3%); }
  .hero-phone { width: 21%; right: 0; bottom: -13%; }
  .hero { padding-bottom: clamp(110px, 10vw, 170px); }
}

@media (min-width: 1100px) {
  /* Tip of each arrow lands on the thing it names. */
  .chalk-headline { display: flex; align-items: flex-start; gap: 6px; top: calc(var(--vf-off) - 0.9 * clamp(44px, 3.6vw, 60px) * 5 / 3 - 4px); left: calc(15% - 8px); }
  .chalk .chalk-headline-a, .chalk-headline .chalk-arrow--dl { width: clamp(44px, 3.6vw, 60px); }
  .chalk-headline span { margin-top: -18px; }
  .chalk-taps { display: flex; align-items: center; gap: 4px; top: calc(71% - 20px); right: calc(100% - var(--vf-off) - 3.4%); }
  .chalk-taps .chalk-arrow { width: clamp(70px, 5.6vw, 96px); transform: rotate(-14deg); --halo: var(--cue); }
  .chalk-pocket { display: flex; align-items: center; gap: 6px; right: 26%; bottom: calc(-1 * clamp(64px, 5.4vw, 92px)); }
  .chalk-pocket .chalk-arrow { transform: rotate(-6deg); }
}

/* Hero entrance (JS only, never under reduced motion) */
@media (prefers-reduced-motion: no-preference) {
  .js .hero .h1-line > span { animation: rise 760ms var(--ease) both; }
  .js .hero .h1-line:nth-child(2) > span { animation-delay: 110ms; }
  .js .hero .vf-c { animation: pull 820ms var(--ease) both; }
  .js .hero .screen { animation: settle 820ms var(--ease) 60ms both; }
  .js .hero .hero-phone { animation: settle 860ms var(--ease) 180ms both; }
  .js .hero .pill-dot { animation: rec 1.2s steps(1, end) 900ms 4; }
}
@keyframes rise { from { transform: translateY(105%); } to { transform: none; } }
@keyframes pull {
  from { opacity: 0; transform: translate(calc(var(--dx) * 22px), calc(var(--dy) * 22px)); }
  40% { opacity: 1; }
  to { opacity: 1; transform: none; }
}
@keyframes settle { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes rec { 0% { opacity: 1; } 50% { opacity: 0.25; } }

/* ---------- 8. What it is (#what, slate) ---------- */
.what { padding-top: clamp(96px, 12vw, 192px); padding-bottom: clamp(80px, 10vw, 160px); }
.what-title { max-width: 19ch; line-height: 0.94; }
.what-tail { color: var(--cue-2); }
.parts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: clamp(56px, 7vw, 112px); counter-reset: part; }
.part {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 20px; align-content: start;
  padding: 28px 0 32px; border-top: 2px solid var(--line); text-decoration: none; color: var(--cue);
}
.part-num { grid-row: 1 / span 3; font-weight: 900; font-size: clamp(4.5rem, 8vw, 8.5rem); line-height: 0.8; color: var(--yellow); min-width: 0.62em; }
.part-title { margin-top: 2px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.part p { margin-top: 12px; color: var(--cue-2); max-width: 30ch; }
.part-go { margin-top: 18px; display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--ring); color: var(--yellow); transition: transform 200ms var(--ease), background-color 200ms; }
.part-go .ico { width: 20px; height: 20px; }
@media (hover: hover) {
  .part:hover .part-title { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.12em; text-decoration-color: var(--yellow); }
  .part:hover .part-go { transform: translateX(6px); background: var(--yellow); color: var(--slate); box-shadow: none; }
}
@media (min-width: 800px) {
  .parts { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(24px, 3.5vw, 56px); }
  .parts li:nth-child(2) { margin-top: clamp(40px, 5vw, 80px); }
  .parts li:nth-child(3) { margin-top: clamp(80px, 10vw, 160px); }
  .part { grid-template-columns: minmax(0, 1fr); }
  .part-num { grid-row: auto; margin-bottom: 18px; }
}
/* Two plain facts under the parts: the game it is made for, and the job it leaves to the players. */
.knows { display: grid; gap: 28px; margin-top: clamp(56px, 7vw, 104px); padding-top: 28px; border-top: 2px solid var(--line); }
.knows-label { color: var(--muted); font-weight: 600; }
.know p { margin-top: 10px; color: var(--cue-2); max-width: 34ch; }
@media (min-width: 800px) {
  .knows { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(24px, 3.5vw, 56px); }
  .knows-label { padding-top: 0.5em; }
}

/* ---------- 9. A night (#night, slate-deep) ---------- */
.night { padding-top: clamp(80px, 9vw, 144px); padding-bottom: clamp(88px, 10vw, 160px); }
.night-head { display: grid; gap: 20px; }
.night-head .lead { color: var(--cue-2); }
@media (min-width: 1000px) {
  .night-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; column-gap: 48px; }
  .night-head .lead { justify-self: end; padding-bottom: 0.4em; }
}
.stepper { margin-top: clamp(56px, 7vw, 112px); position: relative; }
.step-toggle {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin: 0 0 14px; padding: 0 16px 0 12px;
  border: 0; border-radius: 10px; background: transparent; color: var(--cue-2); cursor: pointer;
  box-shadow: inset 0 0 0 2px var(--line);
  font-family: var(--f-mono); font-weight: 600; font-size: 0.875rem; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1;
}
@media (hover: hover) { .step-toggle:hover { color: var(--cue); box-shadow: inset 0 0 0 2px var(--muted); } }
.step-toggle-ico { width: 12px; height: 12px; flex: none; background: var(--yellow); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.step-toggle.is-running .step-toggle-ico { clip-path: none; background: transparent; box-shadow: inset 4px 0 0 var(--yellow), inset -4px 0 0 var(--yellow); }

/* Without JS: a plain vertical list. */
.steps { display: grid; gap: clamp(48px, 6vw, 80px); }
.step { display: grid; gap: 10px; position: relative; }
.step-time { color: var(--yellow); }
.step-title { font-family: var(--f-display); font-weight: 900; font-size: var(--t-h3); text-transform: uppercase; line-height: 1; }
.step-text { color: var(--cue-2); }
.step-shot { margin-top: 12px; }
.chalk-undo { display: none !important; }
@media (min-width: 1000px) {
  .steps { gap: 72px; }
  .step { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 48px; align-items: start; }
  .step > :not(.step-shot):not(.chalk) { grid-column: 1; }
  .step-shot { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
}

/* With JS: tabs. */
.is-tabs .steps { display: block; }
.is-tabs .step-time, .is-tabs .step-title { display: none; }
.is-tabs .step { display: flex; flex-direction: column; }
.is-tabs .step-shot { order: -1; }
.is-tabs .step-text { margin-top: 30px; font-size: var(--t-lead); font-weight: 600; line-height: 1.4; color: var(--cue); max-width: 36ch; }
.is-tabs .step-shot { margin-top: 0; }
.is-tabs .step:focus-visible { outline-offset: 8px; }

.tabs { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 22px; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  position: relative; flex: none; scroll-snap-align: start; display: grid; gap: 4px; text-align: left;
  min-height: 64px; padding: 10px 16px 12px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--slate-raised); color: var(--cue-2);
  -webkit-tap-highlight-color: transparent;
}
.tab-time { font-family: var(--f-mono); font-weight: 600; font-size: 0.875rem; letter-spacing: 0.08em; line-height: 1; color: var(--muted); }
.tab-title { font-family: var(--f-display); font-weight: 800; font-size: 1.25rem; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.tab-text { display: none; }
.tab-bar { position: absolute; left: 12px; right: 12px; bottom: 6px; height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; display: none; }
.tab-bar i { display: block; height: 100%; background: var(--yellow); transform-origin: left; transform: scaleX(1); }
.tab[aria-selected="true"] { background: var(--yellow); color: var(--slate); }
.tab[aria-selected="true"] .tab-time { color: var(--slate); }
.tab:focus-visible { outline-color: var(--blue); }
@media (hover: hover) { .tab[aria-selected="false"]:hover { background: #2E3A45; color: var(--cue); } }

.is-auto .tab[aria-selected="true"] .tab-bar { display: block; }
.is-auto .tab[aria-selected="true"] .tab-bar i { animation: progress 6s linear both; animation-play-state: paused; }
.is-auto.is-playing .tab[aria-selected="true"] .tab-bar i { animation-play-state: running; }
@keyframes progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.is-auto .tab[aria-selected="true"] { padding-bottom: 18px; }
.is-auto .tab[aria-selected="true"] .tab-bar { background: rgb(28 36 44 / 0.25); }
.is-auto .tab[aria-selected="true"] .tab-bar i { background: var(--slate); }

@media (min-width: 1100px) {
  .is-tabs { display: grid; grid-template-columns: minmax(0, 3.6fr) minmax(0, 8.4fr); column-gap: clamp(40px, 4vw, 72px); align-items: start; }
  .step-toggle { grid-column: 1; grid-row: 1; justify-self: start; }
  .is-tabs .tabs { grid-column: 1; grid-row: 2; }
  .is-tabs .steps { grid-column: 2; grid-row: 1 / span 2; }
  .tabs { flex-direction: column; overflow: visible; margin: 0; padding: 0; gap: 0; border-top: 2px solid var(--line); }
  .tab {
    grid-template-columns: 4.2em minmax(0, 1fr); column-gap: 14px; align-items: baseline;
    background: transparent; border-radius: 0; border-bottom: 2px solid var(--line); padding: 16px 4px 16px 0; min-height: 60px; color: var(--cue-2);
  }
  .tab-time { font-size: 0.9375rem; }
  .tab-title { font-size: 1.75rem; }
  .tab[aria-selected="true"] { background: transparent; color: var(--cue); padding-bottom: 22px; }
  .tab[aria-selected="true"] .tab-time { color: var(--yellow); }
  .tab[aria-selected="true"] .tab-title { color: var(--yellow); font-size: 2.25rem; font-weight: 900; }
  .tab[aria-selected="true"] .tab-text { display: block; grid-column: 2; margin-top: 10px; font-family: var(--f-read); font-weight: 400; font-size: 1.0625rem; line-height: 1.5; color: var(--cue-2); white-space: normal; }
  .tab .tab-bar { left: calc(4.2em + 14px); right: 0; bottom: -2px; height: 4px; border-radius: 0; background: transparent; }
  .tab[aria-selected="true"] .tab-bar { display: block; }
  .tab[aria-selected="true"] .tab-bar i { background: var(--yellow); }
  .is-auto .tab[aria-selected="true"] { padding-bottom: 22px; }
  .is-auto .tab[aria-selected="true"] .tab-bar { background: var(--line); }
  .is-auto .tab[aria-selected="true"] .tab-bar i { background: var(--yellow); }
  @media (hover: hover) { .tab[aria-selected="false"]:hover { background: transparent; color: var(--cue); } .tab[aria-selected="false"]:hover .tab-title { text-decoration: underline; text-decoration-color: var(--yellow); text-underline-offset: 0.12em; } }
  .is-tabs .step-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0; }
  .is-tabs .step-shot { margin-right: calc(-1 * var(--gutter) + 8px); }
  .is-tabs .chalk-undo { display: flex !important; position: absolute; align-items: flex-start; gap: 6px; right: 8%; top: calc(-1 * clamp(44px, 3.6vw, 56px) * 5 / 3 + 6px); }
  .is-tabs .chalk-undo .chalk-arrow { width: clamp(44px, 3.6vw, 56px); transform: scaleX(-1); }
  .is-tabs .chalk-undo span { order: -1; margin-top: -12px; }
}

/* ---------- 10. The record (#record, slate) ---------- */
.record { padding-top: clamp(96px, 12vw, 192px); padding-bottom: clamp(96px, 11vw, 176px); overflow: clip; }
.record-head .h2 { max-width: 13ch; }
.record-head .lead { margin-top: 24px; color: var(--cue-2); }

/* A: the headline, typeset on a darker strip that runs off the left edge */
.rec-a { display: grid; gap: 28px; margin-top: clamp(56px, 7vw, 104px); }
.story {
  background: var(--backdrop); color: var(--cue);
  padding: clamp(28px, 4vw, 56px) var(--gutter) clamp(30px, 4vw, 56px);
}
.story-line { font-weight: 900; font-size: clamp(2.6rem, 6.6vw, 7rem); line-height: 0.96; max-width: none; }
.story-sub { margin-top: 16px; font-size: clamp(1.125rem, 1.6vw, 1.5rem); color: var(--cue-2); max-width: 40ch; }
.rec-a-cap { padding-inline: var(--gutter); }
.rec-a-cap p { margin-top: 12px; color: var(--cue-2); }
@media (min-width: 1000px) {
  .rec-a { grid-template-columns: minmax(0, 8.4fr) minmax(0, 3.6fr); align-items: end; column-gap: clamp(32px, 4vw, 64px); }
  .story { padding-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2)); padding-right: clamp(32px, 4vw, 64px); }
  .rec-a-cap { padding-left: 0; padding-right: max(var(--gutter), calc((100vw - var(--wrap)) / 2)); padding-bottom: 8px; }
}

/* B: who owns who */
.rec-b { display: grid; gap: 32px; margin-top: clamp(96px, 11vw, 176px); }
.rec-b-text p { margin-top: 12px; color: var(--cue-2); }
.rec-b-shots { position: relative; }
.rec-b-side { width: 100%; margin-top: 28px; position: relative; z-index: 1; }
@media (min-width: 1000px) {
  .rec-b { grid-template-columns: minmax(0, 8.6fr) minmax(0, 3.4fr); column-gap: clamp(32px, 4vw, 64px); align-items: start; }
  .rec-b-shots { grid-column: 1; grid-row: 1; margin-left: calc(-1 * var(--gutter) + 8px); }
  .rec-b-text { grid-column: 2; grid-row: 1; padding-top: 12%; }
  /* At least 560px wide; it overlaps the big one and runs on under the text column. */
  .rec-b-side { width: max(560px, 64%); margin-left: auto; margin-top: -9%; margin-right: calc(-1 * min(44%, 400px)); }
}

/* C: badges */
.rec-c { display: grid; gap: 40px; margin-top: clamp(112px, 12vw, 200px); }
.rec-c-title { font-size: clamp(2.4rem, 5.4vw, 5.25rem); font-weight: 900; line-height: 0.94; max-width: 14ch; }
.rec-c-text > p { margin-top: 20px; color: var(--cue-2); }
.badges { margin-top: 32px; display: grid; gap: 28px; }
.badge-group { display: grid; gap: 12px; align-content: start; }
.badge-group .badge-list { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .badges { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; } }
.badges-label { color: var(--muted); font-weight: 600; }
.badge-list { display: flex; flex-wrap: wrap; gap: 10px; }
.badge {
  display: grid; gap: 3px; align-content: start;
  padding: 10px 14px 11px; border-radius: 10px; font-size: 0.9375rem; line-height: 1.3;
}
.badge-name { font-family: var(--f-mono); font-weight: 600; font-size: 0.875rem; letter-spacing: 0.08em; text-transform: uppercase; }
.badge--honour { background: var(--yellow); color: var(--slate); }
.badge--shame { box-shadow: inset 0 0 0 2px var(--red); color: var(--red-text); }
.badge--shame .badge-how { color: var(--cue-2); }
.rec-c-shot .screen { transform: rotate(1.6deg); }
@media (min-width: 1000px) {
  .rec-c { grid-template-columns: minmax(0, 6.6fr) minmax(0, 5.4fr); column-gap: clamp(40px, 4vw, 72px); align-items: start; }
  .rec-c-shot { margin-top: clamp(40px, 6vw, 96px); margin-right: calc(-1 * var(--gutter) + 8px); position: sticky; top: 64px; }
}

/* D: the commentator */
.rec-d { display: grid; gap: 32px; margin-top: clamp(112px, 12vw, 200px); }
.rec-d-title { font-size: clamp(2.4rem, 5.4vw, 5.25rem); font-weight: 900; line-height: 0.97; }
.rec-d-text p { margin-top: 18px; max-width: 40ch; color: var(--cue-2); }
.quotes { display: grid; gap: 22px; }
.quote {
  background: var(--backdrop); color: var(--cue);
  box-shadow: inset 0 0 0 3px var(--blue);
  border-radius: 16px; padding: clamp(22px, 2.6vw, 36px) clamp(22px, 2.8vw, 40px);
}
.quote p { font-weight: 700; font-size: clamp(1.25rem, 1.9vw, 1.875rem); line-height: 1.3; max-width: 34ch; text-indent: -0.42em; }
.quote figcaption { margin-top: 14px; color: var(--blue); font-weight: 600; }
@media (min-width: 1000px) {
  .rec-d { grid-template-columns: minmax(0, 4.4fr) minmax(0, 7.6fr); column-gap: clamp(40px, 5vw, 88px); align-items: start; }
  .quote--b { width: 72%; margin-left: auto; transform: rotate(-1.2deg); }
}

/* E: ways to play */
.rec-e { margin-top: clamp(112px, 12vw, 200px); border-top: 2px solid var(--line); padding-top: 28px; }
.rec-e-title { font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 900; }
.modes { margin-top: 28px; display: grid; }
.mode { display: grid; gap: 4px; padding: 16px 0 18px; border-bottom: 2px solid var(--line); }
.mode dt { font-family: var(--f-display); font-weight: 900; font-size: clamp(1.5rem, 2.2vw, 2rem); text-transform: uppercase; line-height: 1; }
.mode dd { margin: 0; max-width: 46ch; color: var(--cue-2); }
.rec-e-close { margin-top: 22px; font-weight: 700; font-size: 1.25rem; }
.mode-shots { display: flex; gap: 18px; margin-top: 40px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 22px; scrollbar-width: thin; }
.mode-shots li { flex: 0 0 78%; scroll-snap-align: start; }
@media (min-width: 800px) {
  .mode { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: baseline; column-gap: 32px; }
}
@media (min-width: 900px) {
  .mode-shots { overflow: visible; margin-inline: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2vw, 32px); }
  .mode-shots li:nth-child(2) { transform: translateY(24px); }
}

/* ---------- 11. The phone (#phone, yellow) ---------- */
.phones { padding-top: clamp(88px, 10vw, 160px); padding-bottom: clamp(96px, 11vw, 176px); overflow: clip; }
.phones-grid { display: grid; gap: 56px; }
.phones-copy .h2 { max-width: 12ch; }
.phones-copy .lead { margin-top: 24px; }
.points { margin-top: 36px; display: grid; border-top: 3px solid var(--slate); }
.points li { padding: 16px 0 18px; border-bottom: 2px solid var(--yellow-edge); }
.points h3 { font-family: var(--f-display); font-weight: 900; font-size: clamp(1.5rem, 2vw, 1.875rem); line-height: 1; text-transform: uppercase; }
.points p { margin-top: 6px; }
.phones-close { margin-top: 24px; font-weight: 700; }
.phones-visual { position: relative; }
.phone-row {
  display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory;
  margin-inline: calc(-1 * var(--gutter)); padding: 8px var(--gutter) 28px; scrollbar-width: none;
}
.phone-row::-webkit-scrollbar { display: none; }
.phone-row > li { flex: 0 0 68%; max-width: 300px; scroll-snap-align: center; }
.phone-row .pr-front { order: -1; }
@media (min-width: 640px) and (max-width: 999px) {
  .phone-row { overflow: visible; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; }
  .phone-row > li { max-width: none; }
  .phone-row .pr-front { order: 0; }
}
@media (min-width: 1000px) {
  .phones-grid { grid-template-columns: minmax(0, 5.2fr) minmax(0, 6.8fr); column-gap: clamp(32px, 4vw, 72px); align-items: center; }
  .phone-row { overflow: visible; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: center; gap: 0; }
  .phone-row > li { max-width: none; }
  .phone-row .pr-front { order: 0; position: relative; z-index: 2; }
  .pr-left { transform: translateX(14%) rotate(-5deg) translateY(4%); }
  .pr-right { transform: translateX(-14%) rotate(5deg) translateY(6%); }
  .chalk-appstore { display: flex; align-items: flex-start; gap: 4px; top: -104px; right: -1%; }
  .chalk-appstore span { margin-top: -6px; }
}

/* ---------- 12. Frameball TV (#tv, slate-deep with red) ---------- */
.tv { padding-top: clamp(96px, 12vw, 192px); padding-bottom: clamp(96px, 11vw, 176px); overflow: clip; }
.tv-lockup { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.tv-wm { font-family: var(--f-display); font-weight: 900; font-size: clamp(2rem, 3vw, 2.75rem); line-height: 1; text-transform: uppercase; }
.tv-tag { font-family: var(--f-display); font-weight: 900; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1; background: var(--yellow); color: var(--slate); padding: 4px 10px 3px; border-radius: 6px; }
.tv-head .h2 { margin-top: clamp(28px, 3vw, 44px); max-width: 14ch; }
.tv-head .lead { margin-top: 24px; color: var(--cue-2); max-width: 40ch; }
.tv-set { position: relative; padding: var(--vf-off); margin-inline: calc(-1 * var(--vf-off) + 4px); margin-top: clamp(56px, 7vw, 104px); }
.tv-frame { position: relative; background: var(--bezel); padding: clamp(4px, 0.45vw, 8px); border-radius: 8px; box-shadow: 0 0 0 1px #222C35; }
.tv-frame img { border-radius: 2px; }
.tv-stand { display: block; width: 26%; height: clamp(12px, 1.4vw, 22px); margin: calc(var(--vf-off) + var(--vf-stroke) + 6px) auto 0; background: var(--bezel); border-radius: 4px 4px 0 0; box-shadow: 0 clamp(6px, 0.7vw, 10px) 0 var(--backdrop); position: relative; }
.tv-stand::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 14%; height: calc(var(--vf-off) + var(--vf-stroke) + 6px); transform: translateX(-50%); background: var(--bezel); }
.live-tag {
  position: absolute; top: clamp(12px, 1.8vw, 28px); left: clamp(12px, 1.8vw, 28px);
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--red-ink); color: var(--cue); border-radius: 6px; padding: 6px 12px 5px;
  font-family: var(--f-mono); font-weight: 600; font-size: clamp(0.8125rem, 1vw, 1rem); letter-spacing: 0.1em; text-transform: uppercase; line-height: 1;
}
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cue); }
.beats { display: grid; margin-top: clamp(72px, 8vw, 128px); }
.beat { display: grid; gap: 28px; padding-block: clamp(32px, 4vw, 56px); border-top: 2px solid var(--line); }
.beat-text { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(16px, 2vw, 28px); align-items: start; }
.beat-num { font-weight: 900; font-size: clamp(5rem, 9vw, 9.5rem); line-height: 0.74; color: var(--red); min-width: 0.55em; }
.beat p { margin-top: 12px; color: var(--cue-2); max-width: 40ch; }
.beat-shot figcaption { margin-top: 20px; color: var(--cue-2); font-weight: 600; }
.browser { background: var(--slate-raised); border-radius: clamp(8px, 0.9vw, 14px); overflow: hidden; box-shadow: 0 0 0 1px #34414D, 0 clamp(8px, 0.9vw, 14px) 0 var(--backdrop); }
.browser-bar { display: flex; align-items: center; gap: 14px; height: clamp(26px, 2.4vw, 38px); padding-inline: clamp(10px, 1.1vw, 16px); }
.browser-dots { display: flex; gap: 6px; }
.browser-dots i { width: clamp(8px, 0.7vw, 11px); aspect-ratio: 1; border-radius: 50%; background: var(--ring); }
.browser-dots i:first-child { background: var(--red); }
.browser-dots i:nth-child(2) { background: var(--yellow); }
.browser-url { flex: 1; max-width: 46%; height: 56%; margin-inline: auto; border-radius: 999px; background: var(--backdrop); transform: translateX(-22px); }
.browser img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; background: var(--slate); color: var(--muted); font-size: 0.875rem; }
.tv-foot { border-top: 2px solid var(--line); padding-top: 28px; }
.tv-small { color: var(--cue-2); font-weight: 600; font-size: 1.125rem; }
.ext-link {
  display: inline-block; margin-top: 18px; padding-block: 10px; line-height: 1.5;
  font-weight: 700; font-size: 1.125rem; color: var(--cue); text-decoration: underline; text-decoration-color: var(--red); text-decoration-thickness: 3px; text-underline-offset: 0.3em;
}
.ext-link .ico { display: inline-block; vertical-align: -0.1em; width: 18px; height: 18px; color: var(--red-text); }
@media (hover: hover) { .ext-link:hover { text-decoration-color: var(--cue); } }
.tag--on-dark { color: var(--yellow); }
@media (min-width: 1100px) {
  .tv-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 48px; align-items: end; }
  .tv-head .tv-lockup { grid-column: 1 / -1; }
  .tv-head .lead { grid-column: 2; grid-row: 2; padding-bottom: 0.4em; }

}

@media (min-width: 1000px) {
  .beat { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 5vw, 96px); align-items: start; }
  .beat:nth-child(2) .beat-shot { margin-right: calc(-1 * var(--gutter) + 8px); }
  .beat:nth-child(2) { grid-template-columns: minmax(0, 4.6fr) minmax(0, 7.4fr); }
  .tv-foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 40px; }
  .tv-foot .ext-link { margin-top: 0; }
}

/* ---------- 13. Questions (#questions, slate) ---------- */
.questions { padding-top: clamp(88px, 10vw, 160px); padding-bottom: clamp(88px, 10vw, 152px); }
.questions > .wrap > .h2 { max-width: 15ch; }
.rooms { display: grid; gap: 32px; margin-top: clamp(40px, 5vw, 72px); }
.room h3 { color: var(--yellow); }
.room p { margin-top: 12px; color: var(--cue-2); max-width: 34ch; }
@media (min-width: 800px) { .rooms { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(24px, 3.5vw, 56px); } }
.faq { display: grid; gap: 28px; margin-top: clamp(88px, 10vw, 160px); }
.faq-title { font-size: clamp(2.4rem, 5vw, 4.75rem); }
.faq-list { border-top: 2px solid var(--line); }
.faq-list details { border-bottom: 2px solid var(--line); }
.faq-list summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  min-height: 72px; padding: 16px 0; cursor: pointer; list-style: none;
  font-weight: 700; font-size: clamp(1.1875rem, 1.6vw, 1.5rem); line-height: 1.25;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-sign { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--ring); }
.faq-sign::before, .faq-sign::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 3px; background: var(--yellow); transform: translate(-50%, -50%); transition: transform 200ms var(--ease); }
.faq-sign::after { transform: translate(-50%, -50%) rotate(90deg); }
details[open] .faq-sign::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-list details p { padding: 0 52px 24px 0; color: var(--cue-2); }
@media (hover: hover) { .faq-list summary:hover span:first-child { text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: 0.2em; } }
@media (min-width: 1000px) {
  .faq { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(40px, 5vw, 88px); align-items: start; }
  .faq-title { position: sticky; top: 40px; }
}

/* ---------- 14. The board (#board, backdrop) ---------- */
.board-sec { padding-top: clamp(88px, 10vw, 160px); padding-bottom: clamp(96px, 11vw, 168px); }
.board-head .h2 { max-width: 11ch; }
.board-head .lead { margin-top: 24px; color: var(--cue-2); }
.board-grid { display: grid; gap: 40px; margin-top: clamp(40px, 5vw, 72px); }
@media (min-width: 1000px) {
  .board-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 48px; align-items: end; }
  .board-head .lead { padding-bottom: 0.4em; }
  .board-grid { grid-template-columns: minmax(0, 6.6fr) minmax(0, 5.4fr); column-gap: clamp(40px, 5vw, 88px); align-items: start; }
  .board { grid-column: 2; grid-row: 1; position: sticky; top: 32px; }
  .board-form { grid-column: 1; grid-row: 1; }
}

/* The board itself: the app's Order of play */
.board { background: var(--slate-raised); border-radius: 20px; padding: clamp(16px, 2.4vw, 34px); box-shadow: 0 10px 0 var(--slate-deep); }
.board-top { color: var(--muted); font-weight: 600; letter-spacing: 0.14em; }
.board-rows { margin-top: 14px; display: grid; grid-template-columns: max-content minmax(0, 1fr) auto; column-gap: 14px; }
.board-rows li { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; align-items: center; min-height: 72px; padding: 10px 0; border-top: 2px solid var(--line); }
.btag {
  justify-self: start; font-family: var(--f-mono); font-weight: 600; font-size: 0.8125rem; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1;
  padding: 6px 8px 5px; border-radius: 5px; white-space: nowrap;
}
.btag--play { box-shadow: inset 0 0 0 2px var(--cue); color: var(--cue); }
.btag--next { background: var(--yellow); color: var(--slate); }
.btag--then { box-shadow: inset 0 0 0 2px var(--ring); color: var(--muted); }
.board-name { font-family: var(--f-display); font-weight: 900; font-size: clamp(2rem, 3vw, 2.75rem); line-height: 1; text-transform: uppercase; }
.board-chalk { display: grid; min-width: 0; }
.chalk-name { font-family: var(--f-chalk); font-weight: 700; font-size: clamp(1.9rem, 3.2vw, 2.9rem); line-height: 1; color: var(--yellow); overflow-wrap: anywhere; }
.chalk-name[data-empty] { color: var(--muted); }
.chalk-venue { font-family: var(--f-chalk); font-weight: 700; font-size: 1.5rem; line-height: 1.1; color: var(--cue-2); overflow-wrap: anywhere; }
.chalk-venue[data-empty] { display: none; }
.board-you { position: relative; }
.board-tick { width: 40px; height: 34px; color: var(--yellow); display: none; }
.board-tick path { stroke-dasharray: 1; stroke-dashoffset: 1; }
[data-board][data-state="sent"] .board-tick { display: block; }
[data-board][data-state="sent"] .board-tick path { stroke-dashoffset: 0; transition: stroke-dashoffset 700ms var(--ease) 200ms; }
[data-board][data-state="sent"] .btag--next { background: var(--cue); }
/* Narrow screens: the tick goes under the tag so the chalked name keeps its width. */
@media (max-width: 599px) {
  .board-rows { grid-template-columns: max-content minmax(0, 1fr); }
  .board-you .btag { grid-column: 1; grid-row: 1; align-self: end; }
  .board-you .board-chalk { grid-column: 2; grid-row: 1 / span 2; }
  .board-tick { grid-column: 1; grid-row: 2; align-self: start; width: 32px; height: 28px; margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) { [data-board][data-state="sent"] .board-tick path { transition: none; } }

/* The form */
#inquiry-form { display: grid; gap: 26px; }
.f-row { display: grid; gap: 26px; }
@media (min-width: 720px) { .f-row { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; } }
.field { display: grid; gap: 8px; align-content: start; }
.field label, .choices legend { font-weight: 700; font-size: 1.0625rem; color: var(--cue); }
.field input, .field textarea {
  width: 100%; min-height: 56px; padding: 14px 16px; border: 0; border-radius: 12px;
  background: var(--slate-raised); color: var(--cue); font-size: 1.125rem; line-height: 1.4;
  box-shadow: inset 0 0 0 2px var(--muted);
  transition: box-shadow 150ms;
}
.field textarea { resize: vertical; min-height: 128px; }
.field input:hover, .field textarea:hover { box-shadow: inset 0 0 0 2px var(--cue-2); }
.field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; box-shadow: inset 0 0 0 2px var(--cue-2); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { box-shadow: inset 0 0 0 3px var(--red-text); }
.field-err { display: flex; align-items: center; gap: 8px; color: var(--red-text); font-weight: 700; font-size: 1rem; }
.field-err::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--red-text); }

.choices { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.choices legend { padding: 0; margin-bottom: 10px; float: left; width: 100%; }
.choices label, .check {
  position: relative; display: inline-flex; align-items: center; gap: 12px; min-height: 52px;
  padding: 10px 18px 10px 14px; border-radius: 12px; cursor: pointer;
  background: var(--slate-raised); box-shadow: inset 0 0 0 2px var(--muted); font-weight: 600;
  transition: box-shadow 150ms, background-color 150ms;
}
.choices input, .check input { width: 22px; height: 22px; margin: 0; accent-color: var(--yellow); flex: none; cursor: pointer; }
.choices input:focus-visible, .check input:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.choices label:has(:checked), .check:has(:checked) { box-shadow: inset 0 0 0 3px var(--yellow); background: #2C3741; }
@media (hover: hover) { .choices label:hover, .check:hover { box-shadow: inset 0 0 0 2px var(--cue-2); } .choices label:has(:checked):hover, .check:has(:checked):hover { box-shadow: inset 0 0 0 3px var(--yellow); } }
.check { justify-self: start; }
.choices-note { flex-basis: 100%; color: var(--cue-2); font-size: 1rem; }

.form-note { color: var(--cue-2); font-size: 1rem; }
.form-note a { color: var(--cue); text-decoration-color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: 0.2em; display: inline-block; padding-block: 10px; }
.btn--submit { justify-self: start; min-width: 260px; min-height: 72px; font-size: clamp(1.625rem, 1.4vw + 1.1rem, 2.125rem); }
@media (max-width: 719px) { .btn--submit { width: 100%; } }
form[data-state="sending"] .btn--submit { background: var(--yellow-edge); box-shadow: 0 2px 0 #7E620C; transform: translateY(4px); cursor: progress; }
form[data-state="sending"] .field input, form[data-state="sending"] .field textarea { box-shadow: inset 0 0 0 2px var(--line); }
form[data-state="error"] .btn--submit { box-shadow: 0 6px 0 var(--yellow-edge); }
[data-submit][aria-disabled="true"] { background: var(--yellow-edge); box-shadow: 0 2px 0 #7E620C; transform: translateY(4px); cursor: progress; }
/* Shipped disabled; inquiry.js switches it on. Without JS it must look plainly unavailable. */
.btn--submit:disabled { background: var(--slate-raised); color: var(--muted); box-shadow: inset 0 0 0 2px var(--ring); transform: none; cursor: not-allowed; }
.form-status { min-height: 0; font-weight: 600; color: var(--cue-2); }
.form-status:empty { display: none; }

.inq-success {
  background: var(--slate-raised); border-radius: 20px; padding: clamp(28px, 3.4vw, 48px);
  box-shadow: inset 0 0 0 3px var(--yellow), 0 10px 0 var(--slate-deep);
}
.inq-success h3 { font-family: var(--f-display); font-weight: 900; font-size: clamp(2.6rem, 5vw, 4.5rem); line-height: 0.97; text-transform: uppercase; color: var(--yellow); }
.inq-success p { margin-top: 16px; font-size: var(--t-lead); font-weight: 600; line-height: 1.4; }
.inq-success:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }
.inq-error {
  margin-top: 24px; padding: 22px 24px; border-radius: 16px; background: var(--slate-raised);
  box-shadow: inset 0 0 0 3px var(--red-text);
}
.inq-error p { font-weight: 700; font-size: 1.125rem; }
.inq-error-actions { display: flex; flex-wrap: wrap; gap: 14px 16px; margin-top: 18px; }

/* ---------- 15. Footer ---------- */
.foot { padding-top: clamp(56px, 6vw, 88px); padding-bottom: calc(clamp(48px, 5vw, 72px) + env(safe-area-inset-bottom)); border-top: 2px solid var(--line); }
.foot-grid { display: grid; gap: 22px; }
.foot-soon { margin-top: 10px; font-family: var(--f-display); font-weight: 900; font-size: 2rem; line-height: 1; text-transform: uppercase; color: var(--yellow); }
.foot-built { color: var(--cue-2); max-width: 32ch; }
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 28px; }
.foot-links a { display: inline-flex; align-items: center; min-height: 48px; font-weight: 700; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
.foot-copy { color: var(--muted); }
@media (min-width: 900px) {
  .foot-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 4fr); align-items: start; column-gap: 40px; }
  .foot-copy { grid-column: 1 / -1; padding-top: 22px; border-top: 2px solid var(--line); }
}

/* ---------- 16. The scorebug ---------- */
.bug {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch;
  height: calc(var(--bug-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  background: var(--slate-deep); color: var(--cue);
  border-top: 2px solid var(--line);
  transform: translateY(110%); visibility: hidden;
  transition: transform 380ms var(--ease), visibility 0s linear 380ms;
}
.bug::after { content: ""; position: absolute; left: 0; width: 50%; bottom: env(safe-area-inset-bottom); height: 4px; background: var(--yellow); pointer-events: none; }
.bug.is-on { transform: none; visibility: visible; transition: transform 420ms var(--ease), visibility 0s; }
.bug-rec { justify-self: start; display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; min-height: 44px; margin: 0; border: 0; background: transparent; color: var(--cue); cursor: pointer; padding: 0 12px 0 max(var(--gutter), env(safe-area-inset-left)); font-family: var(--f-mono); font-weight: 600; font-size: 0.875rem; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.bug-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--red); flex: none; }
.bug-label { color: var(--cue); }
.bug-time { color: var(--cue-2); font-variant-numeric: tabular-nums; }
.bug-mid { display: none; }
.bug-cta { align-self: center; margin-right: max(12px, env(safe-area-inset-right)); min-height: 44px; height: calc(var(--bug-h) - 14px); padding: 0 14px; font-size: 1.125rem; border-radius: 10px; box-shadow: 0 4px 0 var(--yellow-edge); --focus: var(--blue); }
.bug-cta:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--yellow-edge); }
@media (min-width: 720px) {
  .bug-cta { justify-self: end; margin-right: max(var(--gutter), env(safe-area-inset-right)); padding: 0 24px; font-size: 1.375rem; }
}
@media (min-width: 960px) {
  .bug { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .bug-mid { display: flex; align-items: center; gap: 16px; padding: 0 28px; background: var(--backdrop); white-space: nowrap; }
  .bug-frame { color: var(--muted); font-weight: 600; }
  .bug-name { font-weight: 900; font-size: 1.75rem; line-height: 1; }
}
@media (max-width: 389px) { .bug-label { display: none; } }
@media (min-width: 720px) { .bug-rec { gap: 10px; font-size: 0.9375rem; } }
@media (prefers-reduced-motion: no-preference) { .js .bug:not(.is-paused) .bug-dot { animation: rec 1.2s steps(1, end) infinite; } }
.bug-rec:focus-visible { outline-offset: -3px; }
@media (hover: hover) { .bug-rec:hover .bug-label { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; } }
/* Paused: steady dot and frozen time, with a pause mark so the state is visible. */
.bug.is-paused .bug-dot { border-radius: 2px; background: transparent; box-shadow: inset 4px 0 0 var(--red), inset -4px 0 0 var(--red); }
.bug.is-paused .bug-time { color: var(--muted); }

/* ---------- 17. Reveal on scroll (JS only) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .rv { opacity: 0; transform: translateY(28px); transition: opacity 700ms var(--ease), transform 800ms var(--ease); }
  .js .rv.is-in { opacity: 1; transform: none; }
  .js .rec-c-shot.rv.is-in .screen { transition: transform 900ms var(--ease); }
}

/* ---------- 18. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bug, .bug.is-on { transition: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* ---------- 19. Simple documents (privacy.html) and 404 ---------- */
.doc { background: var(--slate); color: var(--cue); }
.doc-header { background: var(--slate-deep); border-bottom: 2px solid var(--line); }
.doc-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 80px; padding-top: max(12px, env(safe-area-inset-top)); padding-bottom: 12px; }
.doc-header .lockup { color: var(--cue); --ball: var(--yellow); --hl: rgb(243 240 232 / 0.85); }
.doc-header a:not(.lockup) { font-weight: 700; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: 0.25em; display: inline-flex; align-items: center; min-height: 48px; }
.doc-main { padding-block: clamp(56px, 8vw, 120px); }
.doc-main > * , .doc-body > * { max-width: 68ch; }
.doc h1 { font-family: var(--f-display); font-weight: 900; text-transform: uppercase; font-size: clamp(3rem, 8vw, 6rem); line-height: 0.97; max-width: 14ch; }
.doc h2 { font-family: var(--f-read); font-weight: 700; font-size: clamp(1.25rem, 1.8vw, 1.5rem); line-height: 1.3; margin-top: 2.2em; }
.doc h3 { font-family: var(--f-read); font-weight: 700; font-size: 1.125rem; margin-top: 1.6em; }
.doc p, .doc li { color: var(--cue-2); }
.doc p { margin-top: 1em; }
.doc ul, .doc ol { margin-top: 1em; padding-left: 1.3em; list-style: disc; }
.doc ol { list-style: decimal; }
.doc li + li { margin-top: 0.4em; }
.doc strong { color: var(--cue); }
.doc a { color: var(--cue); text-decoration-color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.doc .doc-lead { font-size: var(--t-lead); font-weight: 600; line-height: 1.4; color: var(--cue); margin-top: 24px; }
.doc-footer { background: var(--slate-deep); border-top: 2px solid var(--line); padding-block: 32px calc(32px + env(safe-area-inset-bottom)); color: var(--cue-2); }
.doc-footer .wrap { display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: center; justify-content: space-between; }
.doc-footer a { color: var(--cue); font-weight: 700; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; text-underline-offset: 0.25em; display: inline-flex; align-items: center; min-height: 48px; }

.nf { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.nf-main { flex: 1; display: flex; align-items: center; padding-block: clamp(40px, 8vw, 120px); }
.nf h1 { font-size: clamp(5rem, 24vw, 20rem); line-height: 0.9; margin-left: -0.04em; }
.nf p { margin-top: 24px; font-size: var(--t-lead); font-weight: 600; }
.nf .btn { margin-top: 36px; }