/* goddesign | structures: Split Studio (Home), Stat-Led (Bio), Specimen (Video page), Catalogue (Video archive), Specimen question sheet (About), Stat-Led column (Topic hubs) | direction: Cinematic Dark | accent: 329 */
/* LOCK: Seed 95722720 | Tokens --bg #0A0612 --surface #160E24 --text #F7EEFA --muted #A99FBF --accent #F450F1 | Jitter h+0 L+0 r+0 | Montserrat 800 / Public Sans 400 / Public Sans 600 caps +10% | radius 8px | motion: neon flicker once, 600ms entrances 40ms stagger, 2% thumb lift */
/* Self-hosted faces of the lock (OFL licenses beside the files). Public Sans is one variable file for 400 to 600. */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/montserrat-800-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/fonts/montserrat-800-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/public-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/public-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
  --bg: #0A0612;
  --surface: #160E24;
  --surface-dream: #100A4E;
  --text: #F7EEFA;
  --muted: #A99FBF;
  --accent: #F450F1;
  --hot: #F5231B;
  --dream-ink: #6545EA;

  --accent-hover: color-mix(in oklch, var(--accent) 85%, var(--text));
  --letterbox: color-mix(in oklch, var(--bg) 35%, black);
  --line: color-mix(in oklch, var(--muted) 22%, transparent);
  --muted-bar: color-mix(in oklch, var(--muted) 28%, transparent);

  --font-display: "Montserrat", "Avenir Next", system-ui, sans-serif;
  --font-body: "Public Sans", system-ui, sans-serif;

  --radius: 8px;
  --shadow: 0 1px 2px color-mix(in oklch, var(--bg) 60%, transparent), 0 12px 32px color-mix(in oklch, var(--bg) 80%, transparent);

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
  --gutter: 16px;
  --rail: 440px;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  overflow-x: clip;
}
@media (min-width: 900px) { body { font-size: 17px; } }

/* Atmosphere: vignette and film grain over the whole page */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 35%, var(--surface) 0%, var(--bg) 75%);
}
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 50; pointer-events: none;
  opacity: 0.06;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.split, header, main, footer, body > p { position: relative; z-index: 1; }

h1, h2, p, ul, ol, blockquote, figure, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-hover); }
a:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius);
}
p { text-wrap: pretty; max-width: 62ch; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.label, h2.label, .stamp, .platform-name, th {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.display {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h2.sec-title { font-size: clamp(24px, 3vw, 32px); margin-bottom: var(--s5); }
.num { font-variant-numeric: tabular-nums; }

/* ---------- Bio: one narrow column, the count first ---------- */
.bio { padding-bottom: var(--s7); }
.bio header { padding: var(--s2) var(--gutter) 0; }
.bio nav { display: flex; gap: var(--s5); max-width: 560px; margin-inline: auto; }
.bio nav a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.bio main > section, .bio main > .cta, .bio footer { width: 100%; max-width: 560px; margin-inline: auto; padding-inline: var(--gutter); }
.bio .stat { padding-top: var(--s7); padding-bottom: var(--s6); }
.bio .stat h1 { margin-bottom: var(--s3); }
.stat-line { margin: 0; line-height: 1; max-width: none; }
.stat-num { display: block; font-size: clamp(76px, 25vw, 128px); letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.stat-unit { display: block; margin-top: var(--s3); font-weight: 600; font-size: 18px; line-height: 1.3; }
.stat-asof { margin-top: var(--s2); color: var(--muted); font-size: 15px; }
.lead { margin-top: var(--s5); font-size: 17px; }
.lead.is-placeholder { color: var(--muted); border: 1px dashed var(--muted-bar); border-radius: var(--radius); padding: var(--s3) var(--s4); }
.bio .about { margin-top: var(--s4); }
.bio .feature { padding-top: var(--s4); padding-bottom: var(--s7); }
.bio .frame { margin-bottom: 0; }
.bio .start { padding-bottom: var(--s7); }
.bio .start .sec-title { margin-bottom: var(--s4); }
.bio .credit { margin-top: var(--s5); color: var(--muted); font-size: 15px; }
.bio .videos { grid-template-columns: 1fr; }
.bio .find { background: var(--surface); max-width: none; padding-inline: 0; padding-block: var(--s6); }
.bio .find .col { margin-inline: auto; max-width: 560px; }
.bio .business { padding-top: var(--s7); }
.bio .business h2 { margin-bottom: var(--s2); }
.bio .business a { display: inline-block; padding-block: var(--s3); }
.bio .cta { padding-block: var(--s2) var(--s6); }
.bio footer { padding-top: var(--s5); }
.bio .stamp { text-transform: none; letter-spacing: 0.02em; font-size: 13px; max-width: none; }
.bio .signoff { font-size: 24px; margin-top: var(--s4); }
.bio .platform { grid-template-columns: 1fr auto; }

/* ---------- Home: the split ---------- */
/* Phone: one column. The identity and stage wrappers dissolve so the sections can be reordered. */
.split { display: flex; flex-direction: column; }
.identity, .stage, .stage > main { display: contents; }
.who { order: 1; padding: var(--s7) var(--gutter) var(--s5); }
.feature { order: 2; position: relative; z-index: 3; padding-inline: var(--gutter); padding-bottom: 0; }
.find { order: 3; padding: calc(var(--s8) + var(--s6)) var(--gutter) var(--s7); background: var(--surface); }
.stage > main > section:not(.feature) { order: 4; }
.stage > footer { order: 5; }

.mark { font-size: clamp(36px, 12vw, 52px); margin: 0 0 var(--s5); color: var(--text); }
.neon {
  text-shadow: 0 0 6px var(--accent), 0 0 24px var(--accent);
}
.neon::after {
  content: "Zzz";
  content: "Zzz" / "";
  color: var(--accent);
  font-size: 0.4em;
  vertical-align: 0.9em;
  margin-left: 0.12em;
  letter-spacing: 0;
}
.avatar {
  display: grid; place-items: center;
  width: 160px; height: 160px;
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
  text-align: center;
  padding: var(--s3);
}
.about { margin-top: var(--s5); font-size: 18px; max-width: 28ch; }
.about p::before { content: "\201C"; }
.about p::after { content: "\201D"; }
.about-credit { margin-top: var(--s2); }

/* ---------- Bands ---------- */
.band { padding-block: var(--s7); }
.band.surface { background: var(--surface); }
.band.after-overlap { padding-top: calc(var(--s8) + var(--s7)); }
.band.road { padding-block: var(--s8); }
.col { width: 100%; max-width: 780px; padding-inline: var(--gutter); }
.notice { color: var(--muted); font-size: 14px; line-height: 1.4; margin-bottom: var(--s4); max-width: none; }
.empty { color: var(--muted); }

/* ---------- Feature frame ---------- */
.trail { display: flex; align-items: flex-end; gap: var(--s2); margin-bottom: var(--s3); }
.trail i { display: block; border-radius: 50%; background: var(--dream-ink); }
.trail i:nth-child(1) { width: 8px; height: 8px; }
.trail i:nth-child(2) { width: 14px; height: 14px; }
.trail i:nth-child(3) { width: 24px; height: 24px; }
.trail.up { transform: rotate(-12deg); transform-origin: left bottom; margin-left: var(--s3); }
.frame {
  display: grid;
  grid-template-rows: auto auto auto;
  background: var(--letterbox);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  color: var(--text);
  text-decoration: none;
  isolation: isolate;
  margin-bottom: calc(var(--s8) * -1);
}
.frame-bar { padding: var(--s2) var(--s4); background: var(--letterbox); position: relative; z-index: 2; }
.frame-bar.top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--s3); }
.frame-bar.top .views { white-space: nowrap; margin-left: auto; }
.frame-bar.top .label time { display: inline-block; white-space: nowrap; }
.frame-bar.bottom { text-align: center; font-size: clamp(13px, 1.7vw, 18px); line-height: 1.35; padding-block: var(--s3); }
.frame-bar .notice { color: var(--text); margin: 0; font-size: 14px; }
.frame-bar .label time::before { content: "\00B7"; margin-inline: var(--s2); }
.frame-pic { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--letterbox); }
.frame-pic img { width: 100%; height: 100%; object-fit: contain; }
a.frame:hover, a.frame:focus-visible { transform: scale(1.02); }
a.frame:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.frame.is-empty .frame-pic { display: grid; place-items: center; padding: var(--s4); text-align: center; color: var(--text); font-size: 15px; }
.frame.is-empty .frame-pic a { display: inline-block; padding-block: var(--s2); }

/* ---------- Broadcast readout ---------- */
.readout { background: var(--bg); border-radius: var(--radius); padding: var(--s5); display: grid; gap: var(--s2); box-shadow: var(--shadow); align-content: start; }
.pill { display: inline-flex; align-items: center; justify-self: start; border-radius: 999px; padding: 2px var(--s3); font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
.pill.live { background: var(--hot); color: var(--bg); }
.ro-title { font-weight: 600; font-size: 18px; line-height: 1.35; }
.ro-meta { color: var(--muted); font-size: 15px; }
.ro-meta a { display: inline-block; padding-block: var(--s3); }
.ro-link { display: inline-flex; align-items: center; min-height: 44px; justify-self: start; }

/* ---------- Video lists ---------- */
.videos { display: grid; gap: var(--s5) var(--s4); }
.video { display: grid; grid-template-columns: 128px 1fr; column-gap: var(--s4); align-content: start; }
.video > a { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: start; text-decoration: none; color: var(--text); }
.video > a:hover .video-title { text-decoration: underline; text-underline-offset: 3px; }
.video-title { font-weight: 600; line-height: 1.35; padding-block: var(--s1); }
.thumb { aspect-ratio: 16 / 9; background: var(--letterbox); border-radius: var(--radius); overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: contain; }
.meta { grid-column: 2; color: var(--muted); font-size: 14px; display: flex; flex-wrap: wrap; gap: 0 var(--s3); }
@media (min-width: 700px) {
  .videos.three { grid-template-columns: repeat(3, 1fr); }
  .videos.two { grid-template-columns: repeat(2, 1fr); }
  .video { grid-template-columns: 1fr; row-gap: var(--s2); }
  .video > a { grid-template-columns: 1fr; row-gap: var(--s2); }
  .meta { grid-column: 1; }
}

/* ---------- Road to 5K ---------- */
.road .col { display: grid; gap: var(--s3); justify-items: start; }
.road h2 { margin-bottom: var(--s2); }
.road-count { font-weight: 600; }
.road-bar { width: 100%; max-width: 560px; height: 14px; appearance: none; border: 0; border-radius: 7px; overflow: hidden; background: var(--muted-bar); }
.road-bar::-webkit-progress-bar { background: var(--muted-bar); border-radius: 7px; }
.road-bar::-webkit-progress-value { background: var(--accent); border-radius: 7px; }
.road-bar::-moz-progress-bar { background: var(--accent); border-radius: 7px; }
.road-pct { color: var(--muted); font-size: 15px; }
.goal { margin-top: var(--s4); font-family: var(--font-display); font-weight: 800; font-size: clamp(22px, 2.6vw, 28px); line-height: 1.15; }
.goal p::before { content: "\201C"; }
.goal p::after { content: "\201D"; }

/* ---------- Dream band: full-bleed, escapes the column, halftone ---------- */
.dream { position: relative; background: var(--surface-dream); overflow: hidden; isolation: isolate; width: 100%; }
.dream-art { position: absolute; inset: 0; z-index: -2; background: var(--surface-dream); }
.dream-dots {
  position: absolute; inset: 0; z-index: -1; opacity: 0.22;
  background-image: radial-gradient(circle at center, var(--dream-ink) 0 2.5px, transparent 3px);
  background-size: 14px 14px;
}
.dream-body { padding-block: var(--s9); display: grid; gap: var(--s4); }
.dream-body h2 { margin-bottom: 0; }
.dream-links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }
.dream-links a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- Platform list ---------- */
.find h2 { margin-bottom: var(--s2); }
.platforms { list-style: none; padding: 0; margin: 0; display: grid; }
.platform { display: grid; grid-template-columns: 1fr auto; column-gap: var(--s4); align-items: center; padding-block: var(--s2); border-bottom: 1px solid var(--line); min-height: 48px; }
.platform a { grid-row: 1 / span 2; display: block; padding-block: var(--s2); text-decoration: none; }
.platform a:hover .platform-handle { text-decoration: underline; text-underline-offset: 3px; }
.platform-name { display: block; }
.platform-handle { display: block; font-size: 16px; }
.platform-count { font-variant-numeric: tabular-nums; text-align: right; font-size: 15px; color: var(--text); }
.platform-asof { text-align: right; font-size: 13px; color: var(--muted); }
.platform:first-child { padding-block: var(--s3); }
.platform:first-child .platform-handle { font-family: var(--font-display); font-weight: 800; font-size: clamp(24px, 3vw, 28px); letter-spacing: -0.01em; line-height: 1.1; }
.platform:first-child .platform-count { font-size: 17px; }
.find .btn { margin-top: var(--s5); }
.find .stamp { margin-top: var(--s4); text-transform: none; letter-spacing: 0.02em; font-size: 13px; max-width: none; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 var(--s5);
  background: var(--accent); color: var(--bg);
  font-family: var(--font-body); font-weight: 600; font-size: 16px;
  border: 0; border-radius: var(--radius);
  text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--accent-hover); color: var(--bg); }
.btn:active { transform: translateY(1px); }
.btn:disabled { background: var(--muted); color: var(--bg); opacity: 0.6; pointer-events: none; cursor: default; }

/* ---------- Bracket ledger ---------- */
.table-wrap { overflow-x: auto; position: relative; }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th { text-align: left; padding: var(--s2) var(--s3) var(--s2) 0; border-bottom: 1px solid var(--line); }
td { padding: var(--s3) var(--s3) var(--s3) 0; border-bottom: 1px solid var(--line); vertical-align: top; }
td:last-child, th:last-child { padding-right: 0; }
.event-sub { display: block; color: var(--muted); font-size: 13px; }
.event-name { display: inline; }
.ledger td > a { display: inline-block; padding-block: var(--s2); }
@media (max-width: 599px) {
  .ledger, .ledger tbody { display: block; }
  .ledger thead, .ledger thead tr, .ledger th { display: block; position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .ledger tr { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); padding-block: var(--s3); border-bottom: 1px solid var(--line); }
  .ledger td { display: block; padding: 0; border: 0; }
  .ledger td:first-child { flex: 0 0 100%; }
  .ledger td:not(:first-child) { color: var(--muted); font-family: var(--font-body); font-weight: 600; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; }
}

/* ---------- Footer ---------- */
.stage > footer { padding-block: var(--s9) var(--s8); background: var(--surface); }
.foot-grid { display: grid; gap: var(--s6); }
.stage > footer p { font-size: 15px; }
.stage > footer h2.label { margin-bottom: var(--s2); }
.stage > footer p a { display: inline-block; padding-block: var(--s3); }
.signoff { font-size: clamp(24px, 3vw, 32px); margin-top: var(--s7); }

/* ---------- Desktop: sticky identity rail on the left, stage on the right ---------- */
@media (min-width: 960px) {
  :root { --gutter: 32px; }
  .split { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); align-items: start; }
  /* one panel down the whole left column: the rail is sticky inside it */
  .split::before { content: ""; grid-column: 1; grid-row: 1; align-self: stretch; background: var(--surface); box-shadow: var(--shadow); }
  .identity {
    grid-column: 1; grid-row: 1;
    display: flex; flex-direction: column; justify-content: space-between;
    position: sticky; top: 0; height: 100vh; overflow-y: auto; scrollbar-width: none;
  }
  .identity::-webkit-scrollbar { display: none; }
  .stage { display: block; min-width: 0; grid-column: 2; grid-row: 1; }
  .stage > main { display: block; }
  .who, .find { order: 0; }
  .who { padding: var(--s6) var(--gutter) var(--s3); }
  .find { padding: var(--s3) var(--gutter) var(--s5); background: transparent; }
  .mark { font-size: 44px; margin-bottom: var(--s4); }
  .avatar { width: 88px; height: 88px; padding: var(--s2); }
  .about { margin-top: var(--s3); max-width: none; font-size: 17px; line-height: 1.4; }
  .about-credit { margin-top: 0; }
  .find h2 { margin-bottom: 0; }
  .platform { min-height: 0; padding-block: 0; line-height: 1.3; }
  .platform:first-child { padding-block: var(--s1); }
  .platform a { padding-block: calc(var(--s1) + 2px); }
  .find .btn { margin-top: var(--s4); }
  .find .stamp { margin-top: var(--s3); }
  .feature { padding: var(--s7) var(--gutter) 0; }
  .feature .frame { max-width: 780px; }
  .band.after-overlap { padding-top: calc(var(--s8) + var(--s7)); }
  .dream-body { max-width: 780px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-grid > div:last-child { grid-column: 1 / -1; }
}

/* ---------- 404: one short column ---------- */
.lost header { padding: var(--s2) var(--gutter) 0; }
.lost nav { display: flex; gap: var(--s5); max-width: 560px; margin-inline: auto; }
.lost nav a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.lost main { display: grid; gap: var(--s4); justify-items: start; width: 100%; max-width: 560px; margin-inline: auto; padding: var(--s8) var(--gutter) var(--s7); }
.lost h1 { font-size: clamp(36px, 9vw, 56px); }
.lost .actions { display: grid; gap: var(--s3); justify-items: start; margin-top: var(--s3); }
.lost .btn { height: auto; padding-block: var(--s3); text-align: left; }
.lost .back { display: inline-flex; align-items: center; min-height: 44px; }
.lost footer { width: 100%; max-width: 560px; margin-inline: auto; padding: var(--s5) var(--gutter); }

/* ---------- Video pages and the archive (slice 7a) ---------- */
.vpage header, .varchive header { padding: var(--s2) var(--gutter) 0; }
.vpage nav[aria-label="Main"], .varchive nav[aria-label="Main"] { display: flex; gap: var(--s5); max-width: 780px; margin-inline: auto; }
.vpage nav[aria-label="Main"] a, .varchive nav[aria-label="Main"] a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.crumbs { display: flex; flex-wrap: wrap; gap: 0 var(--s3); max-width: 780px; margin: var(--s4) auto 0; padding-inline: var(--gutter); font-size: 14px; color: var(--muted); }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; }
.crumbs a::after { content: "/"; margin-left: var(--s3); color: var(--muted); }
.crumbs span { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }
.vpage main > article, .varchive .archive-head, .varchive .empty, .vpage footer, .varchive footer { max-width: 780px; margin-inline: auto; padding-inline: var(--gutter); }
.vpage .video-main { display: grid; gap: var(--s5); padding-top: var(--s4); padding-bottom: var(--s7); }
.vpage h1 { font-size: clamp(28px, 4.5vw, 48px); overflow-wrap: anywhere; }
.video-head { display: flex; flex-wrap: wrap; gap: 0 var(--s3); color: var(--muted); font-size: 15px; margin-top: calc(var(--s3) * -1); }
.video-head > * + *::before { content: "\00B7"; margin-right: var(--s3); }
.vpage .frame { margin-bottom: 0; }
.player .frame-pic a.play { display: block; position: relative; width: 100%; height: 100%; color: var(--text); }
.player .frame-pic iframe { width: 100%; height: 100%; border: 0; display: block; }
.play-btn {
  position: absolute; inset: 0; margin: auto; width: 72px; height: 72px;
  border-radius: 50%; background: var(--accent); box-shadow: var(--shadow);
}
.play-btn::after {
  content: ""; position: absolute; inset: 0; background: var(--bg);
  clip-path: polygon(38% 28%, 38% 72%, 74% 50%);
}
a.play:hover .play-btn, a.play:focus-visible .play-btn { background: var(--accent-hover); transform: scale(1.06); }
a.play:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.watch { display: flex; }
.vpage .about-video, .vpage .transcript, .vpage .comments { display: grid; gap: var(--s3); justify-items: start; }
.desc { white-space: pre-line; overflow-wrap: anywhere; max-width: 62ch; font-size: 16px; color: var(--text); }
a.plain { display: inline-flex; align-items: center; min-height: 44px; }
.vpage .transcript { justify-items: stretch; }
.tr-note { color: var(--muted); font-size: 14px; max-width: 62ch; }
.tr-body { display: grid; gap: var(--s3); max-width: 62ch; }
.tr-body p { display: grid; gap: 0; overflow-wrap: anywhere; font-size: 16px; color: var(--text); }
.tr-time { white-space: nowrap; display: inline-flex; align-items: center; min-height: 44px; justify-self: start; color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.tr-time:hover, .tr-time:focus-visible { color: var(--accent); }
@media (min-width: 640px) { .tr-body p { grid-template-columns: 5rem 1fr; column-gap: var(--s3); } .tr-time { align-self: start; } }
.vpage .more, .vpage .full { padding-block: var(--s7); }
.vpage .more .col, .vpage .full .col { margin-inline: auto; max-width: 780px; }
.vpage footer, .varchive footer { padding-block: var(--s5) var(--s7); }
.vpage footer .signoff, .varchive footer .signoff { font-size: 24px; margin-top: var(--s4); }
.more-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--s2); }

.archive-head { display: grid; gap: var(--s4); padding-top: var(--s5); padding-bottom: var(--s6); }
.varchive h1 { font-size: clamp(32px, 6vw, 56px); }
.jump { display: flex; flex-wrap: wrap; gap: 0 var(--s5); }
.jump a { display: inline-flex; align-items: center; min-height: 44px; }
.varchive .group { padding-block: var(--s6); scroll-margin-top: var(--s4); }
.varchive .group:first-of-type { padding-top: var(--s2); }
.varchive .group .col { margin-inline: auto; max-width: 1000px; }
.varchive .group:nth-of-type(3n) { padding-block: var(--s8); }
.varchive .empty { padding-block: var(--s5) var(--s9); }
.varchive .empty a { display: inline-block; padding-block: var(--s3); }
@media (min-width: 960px) { .varchive .group .col, .varchive .archive-head { padding-inline: var(--gutter); } }
.desc a { display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; }

/* ---------- About: a question sheet, answer first (slice 8) ---------- */
.aboutpage header { padding: var(--s2) var(--gutter) 0; }
.aboutpage nav[aria-label="Main"] { display: flex; flex-wrap: wrap; column-gap: var(--s5); max-width: 1000px; margin-inline: auto; }
.aboutpage nav[aria-label="Main"] a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.aboutpage main > section:not(.dream), .aboutpage footer { padding-inline: max(var(--gutter), calc((100% - 1000px) / 2)); }
.aboutpage .intro { padding-top: var(--s8); padding-bottom: var(--s7); }
.aboutpage h1 { font-size: clamp(40px, 8vw, 88px); margin-bottom: var(--s5); overflow-wrap: anywhere; }
.aboutpage .lead { margin-top: 0; font-size: clamp(19px, 2.4vw, 24px); line-height: 1.5; max-width: 40ch; }
.aboutpage .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s5); margin-top: var(--s6); }
.aboutpage a.plain { display: inline-flex; align-items: center; min-height: 44px; }
.aboutpage .qa { display: grid; gap: var(--s4); align-content: start; }
.aboutpage .qa h2.sec-title { margin-bottom: 0; overflow-wrap: anywhere; }
.aboutpage .qa-body { display: grid; gap: var(--s4); justify-items: start; min-width: 0; }
.aboutpage .qa-wide { min-width: 0; }
.aboutpage .make { padding-block: var(--s6); }
.aboutpage .watch { padding-block: var(--s7); }
.aboutpage .stream { padding-block: var(--s6) var(--s7); }
.aboutpage .compete { padding-block: var(--s6) var(--s8); }
.aboutpage .surface { background: var(--surface); }
.aboutpage .channels { display: flex; flex-wrap: wrap; gap: 0 var(--s5); }
.aboutpage .channels a { display: inline-flex; align-items: center; min-height: 44px; }
.aboutpage .platforms { width: 100%; max-width: 560px; }
.aboutpage .readout { background: var(--surface); min-width: 0; width: 100%; max-width: 560px; }
.aboutpage .ledger-note { margin-top: var(--s4); color: var(--muted); font-size: 15px; max-width: none; }
.aboutpage .ledger-note a { display: inline-block; padding-block: var(--s3); }
.aboutpage .dream .col { margin-inline: auto; max-width: 1000px; }
.aboutpage .dream-body { padding-block: var(--s9); }
.aboutpage .credit { color: var(--muted); font-size: 15px; }
.aboutpage .dream a { display: inline-block; padding-block: var(--s3); }
.aboutpage footer { padding-block: var(--s5) var(--s7); }
.aboutpage .stamp { text-transform: none; letter-spacing: 0.02em; font-size: 13px; max-width: none; }
.aboutpage .signoff { font-size: 24px; margin-top: var(--s4); }
@media (min-width: 960px) {
  .aboutpage .qa { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: var(--s7); row-gap: var(--s5); }
  .aboutpage .qa .qa-wide { grid-column: 1 / -1; }
  .aboutpage .intro { padding-top: calc(var(--s8) + var(--s6)); }
}

/* ---------- Topic hubs (/sf6/): Stat-Led, one narrow column, the video count set once on top ---------- */
.thub header { padding: var(--s2) var(--gutter) 0; }
.thub nav[aria-label="Main"] { display: flex; gap: var(--s5); max-width: 780px; margin-inline: auto; }
.thub nav[aria-label="Main"] a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.thub .hub-head, .thub .start, .thub footer { max-width: 780px; margin-inline: auto; padding-inline: var(--gutter); }
.thub .hub-head { display: grid; gap: var(--s4); padding-top: var(--s5); padding-bottom: var(--s6); }
.thub h1 { font-size: clamp(32px, 6vw, 56px); overflow-wrap: anywhere; }
.thub .stat { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: var(--s4); }
.thub .count { font-size: clamp(72px, 16vw, 144px); line-height: 0.85; }
.thub .stat .lead { margin-top: 0; max-width: 32ch; overflow-wrap: anywhere; }
.thub .start { display: grid; gap: var(--s4); padding-bottom: var(--s7); }
.thub .start .sec-title { margin-bottom: 0; }
.thub .start .frame { margin-bottom: 0; }
.thub .rest { padding-block: var(--s7); }
.thub .rest .col { margin-inline: auto; max-width: 1000px; }
.thub .hubs { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.thub .hubs li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--s4); border-bottom: 1px solid var(--line); }
.thub .hubs a { display: inline-flex; align-items: center; min-height: 56px; font-size: clamp(22px, 3vw, 32px); text-decoration: none; color: var(--text); overflow-wrap: anywhere; }
.thub .hubs a:hover { text-decoration: underline; text-underline-offset: 4px; }
.thub .hubs .meta { grid-column: auto; font-size: 15px; }
.thub footer { padding-block: var(--s5) var(--s7); }
.thub footer .signoff { font-size: 24px; margin-top: var(--s4); }
.vpage .topics { max-width: 780px; margin-inline: auto; padding: 0 var(--gutter) var(--s7); }
.vpage .topics ul { list-style: none; margin: 0; padding: 0; }

/* ---------- Motion: every animation and transition lives in this one block ----------
   Nothing outside it declares motion or starts an element at opacity 0, so a visitor who
   asked for reduced motion gets the finished page with no override to keep in order. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes power-on { 0% { opacity: 0.2; } 30% { opacity: 1; } 50% { opacity: 0.4; } 100% { opacity: 1; } }
  @keyframes rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  .neon { animation: power-on 700ms steps(1, end) 1 both; }
  .who, .feature { animation: rise 600ms ease-out both; }
  .feature { animation-delay: 80ms; }
  .find { animation: rise 600ms ease-out both; animation-delay: 160ms; }
  .aboutpage .intro { animation: rise 600ms ease-out both; }
  .bio .feature { animation: rise 600ms ease-out 80ms both; }
  a.frame { transition: transform 300ms ease-out; }
  .btn { transition: transform 120ms ease-out, background-color 120ms ease-out; }
  .play-btn { transition: transform 150ms ease-out, background-color 150ms ease-out; }
}