/* ============================================================
   DeepSpeed Hackathon Docs — component layer
   ------------------------------------------------------------
   Sits on top of the vendored design system (tokens.css) and
   reads its custom properties only. No raw brand values here.

   House rules carried over from the design system:
     · Monochrome is the floor. Race-red is a brake light.
     · Hairline rules divide sections — show the scaffolding.
     · Eyebrow labels (mono, wide tracking) everywhere.
     · Tabular numerals always.
     · Sharp corners. Pills only on status chips.
     · Motion is mechanical: --ease-mech, 120/200/360ms.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html[data-theme="light"] { color-scheme: light; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hdr-h) + var(--s-6));
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}

:root {
  --hdr-h:    58px;
  --nav-w:    264px;
  --toc-w:    216px;
  --page-max: 1280px;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

body { font-variant-numeric: tabular-nums; }

.skip {
  position: absolute; top: -100px; left: var(--s-4); z-index: 100;
  background: var(--accent); color: var(--accent-fg);
  font-family: var(--font-mono); font-size: var(--t-xs);
  letter-spacing: var(--ls-wider); text-transform: uppercase;
  padding: var(--s-3) var(--s-4); text-decoration: none;
}
.skip:focus { top: var(--s-3); color: var(--accent-fg); }

/* ===== Header — the only place blur is allowed ===================== */

.hdr {
  position: sticky; top: 0; z-index: 50;
  height: var(--hdr-h);
  display: flex; align-items: center; gap: var(--s-5);
  padding: 0 var(--s-8);
  background: rgba(10, 10, 11, 0.72);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
[data-theme="light"] .hdr { background: rgba(244, 244, 245, 0.78); }

.hdr-brand { display: flex; align-items: baseline; gap: var(--s-3); text-decoration: none; color: var(--fg); min-width: 0; }
.hdr-brand:hover { color: var(--fg); }
.hdr-brand:hover .wm { color: var(--accent); }
.wm {
  font-family: var(--font-display);
  font-size: 19px; line-height: 1;
  text-transform: uppercase;
  transform: skew(-5deg) rotate(-1.5deg);
  transition: color var(--dur-fast) var(--ease-mech);
  white-space: nowrap;
}
.hdr-brand .sub {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: var(--ls-wider); text-transform: uppercase;
  color: var(--fg-subtle); white-space: nowrap;
}

.hdr-nav { display: flex; gap: var(--s-6); margin-left: var(--s-4); }
.hdr-nav a {
  position: relative;
  padding: 4px 0; text-decoration: none;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-muted);
  transition: color var(--dur-fast) var(--ease-mech);
}
.hdr-nav a:hover { color: var(--fg); }
.hdr-nav a.on { color: var(--fg); }
.hdr-nav a.on::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px;
  height: 2px; background: var(--accent);
}

.hdr-right { display: flex; align-items: center; gap: var(--s-3); margin-left: auto; }

.hdr-meta {
  text-decoration: none;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: var(--ls-wider); text-transform: uppercase;
  color: var(--fg-subtle); white-space: nowrap;
}
.hdr-meta b { color: var(--fg); font-weight: var(--w-med); }
a.hdr-meta:hover { color: var(--accent); }

/* Pills are allowed here: status chip + toggle, per the system. */
.toggle {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 6px 12px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-muted); cursor: pointer;
  transition: color var(--dur-fast) var(--ease-mech), border-color var(--dur-fast) var(--ease-mech);
}
.toggle:hover { color: var(--fg); border-color: var(--fg); }
.toggle:active { transform: scale(0.97); }
.toggle .t-dark { display: none; }
[data-theme="light"] .toggle .t-dark { display: inline; }
[data-theme="light"] .toggle .t-light { display: none; }

.scrim {
  display: none;
  position: fixed; inset: var(--hdr-h) 0 0 0; z-index: 40;
  background: rgba(0, 0, 0, 0.6);
}

.navbtn {
  display: none;
  background: transparent; border: 1px solid var(--line);
  border-radius: var(--r-1);
  width: 32px; height: 32px;
  color: var(--fg-muted); cursor: pointer;
  align-items: center; justify-content: center;
  transition: color var(--dur-fast) var(--ease-mech), border-color var(--dur-fast) var(--ease-mech);
}
.navbtn:hover { color: var(--fg); border-color: var(--fg); }
.navbtn svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.5; fill: none; }

/* ===== Doc shell =================================================== */

.shell {
  display: grid;
  grid-template-columns: var(--nav-w) minmax(0, 1fr) var(--toc-w);
  gap: var(--s-12);
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--s-8);
  align-items: start;
}

/* ----- Sidebar ----- */

.nav {
  position: sticky; top: var(--hdr-h);
  max-height: calc(100vh - var(--hdr-h));
  overflow-y: auto;
  padding: var(--s-8) var(--s-4) var(--s-16) 0;
  border-right: 1px solid var(--line-faint);
}

.nav-lbl {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: var(--ls-track); text-transform: uppercase;
  color: var(--fg-subtle);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--s-3);
}

.nav-switch { display: grid; margin-bottom: var(--s-8); }
.nav-switch a {
  display: flex; align-items: baseline; gap: var(--s-3);
  padding: var(--s-3) var(--s-3);
  text-decoration: none;
  border: 1px solid var(--line);
  color: var(--fg-muted);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  transition: color var(--dur-fast) var(--ease-mech), border-color var(--dur-fast) var(--ease-mech), background var(--dur-fast) var(--ease-mech);
}
.nav-switch a + a { border-top: 0; }
.nav-switch a:hover { color: var(--fg); border-color: var(--line-strong); }
.nav-switch a[aria-current="true"] {
  color: var(--fg); background: var(--bg-elev-1);
  border-left: 2px solid var(--accent);
  padding-left: calc(var(--s-3) - 1px);
}
.nav-switch .n { font-family: var(--font-headline); font-size: 15px; letter-spacing: 0; color: var(--fg-subtle); }
.nav-switch a[aria-current="true"] .n { color: var(--accent); }

.nav-list { list-style: none; margin: 0 0 var(--s-8); padding: 0; }
.nav-list a {
  display: grid; grid-template-columns: 22px 1fr; gap: var(--s-3);
  padding: var(--s-3) var(--s-3) var(--s-3) var(--s-2);
  text-decoration: none; color: var(--fg-muted);
  font-size: var(--t-sm); line-height: 1.3;
  border-bottom: 1px solid var(--line-faint);
  transition: color var(--dur-fast) var(--ease-mech), padding-left var(--dur-fast) var(--ease-mech), background var(--dur-fast) var(--ease-mech);
}
.nav-list a:hover { color: var(--fg); padding-left: var(--s-4); }
.nav-list a[aria-current="page"] {
  color: var(--fg); background: var(--bg-elev-1);
  box-shadow: inset 2px 0 0 var(--accent);
  padding-left: var(--s-4);
}
.nav-list .n {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.1em; color: var(--fg-subtle); padding-top: 2px;
}
.nav-list a[aria-current="page"] .n { color: var(--accent); }

.nav-out { display: grid; gap: var(--s-2); }
.nav-out a {
  display: flex; align-items: center; gap: var(--s-2);
  text-decoration: none; color: var(--fg-subtle);
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.14em; text-transform: uppercase;
  transition: color var(--dur-fast) var(--ease-mech);
}
.nav-out a:hover { color: var(--accent); }
.nav-out svg { width: 13px; height: 13px; stroke: currentColor; stroke-width: 1.5; fill: none; }

/* ----- On this page ----- */

.toc {
  position: sticky; top: var(--hdr-h);
  max-height: calc(100vh - var(--hdr-h));
  overflow-y: auto;
  padding: var(--s-8) 0 var(--s-16);
}
.toc .nav-lbl { border-bottom: 0; padding-bottom: 0; margin-bottom: var(--s-3); }
.toc ul { list-style: none; margin: 0; padding: 0; }
.toc li ul { padding-left: var(--s-4); }
.toc a {
  display: block; padding: 5px 0 5px var(--s-3);
  text-decoration: none; color: var(--fg-subtle);
  font-size: var(--t-sm); line-height: 1.35;
  border-left: 1px solid var(--line-faint);
  transition: color var(--dur-fast) var(--ease-mech), border-color var(--dur-fast) var(--ease-mech);
}
.toc a:hover { color: var(--fg); }
.toc a.on { color: var(--fg); border-left-color: var(--accent); }

/* ===== Article ===================================================== */

.main { min-width: 0; padding: var(--s-8) 0 var(--s-24); }

.crumb {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: var(--ls-wider); text-transform: uppercase;
  color: var(--fg-subtle);
  padding-bottom: var(--s-4);
  margin-bottom: var(--s-6);
  border-bottom: 1px solid var(--line);
}
.crumb .sep { color: var(--line-strong); }
.crumb .red { color: var(--accent); }
.crumb a { color: var(--fg-subtle); text-decoration: none; }
.crumb a:hover { color: var(--accent); }

.prose { max-width: 76ch; }

.prose h1 { font-size: clamp(38px, 5vw, var(--t-4xl)); margin: 0 0 var(--s-6); }
.prose h2 {
  font-size: var(--t-2xl);
  margin: var(--s-16) 0 var(--s-4);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}
/* The sources separate chapters with `---`, which already draws the rule. */
.prose hr + h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { font-size: var(--t-xl); margin: var(--s-10) 0 var(--s-3); }
.prose h4 { margin: var(--s-6) 0 var(--s-2); color: var(--fg); }
.prose h1, .prose h2, .prose h3, .prose h4 { scroll-margin-top: calc(var(--hdr-h) + var(--s-6)); }

.prose p, .prose li { max-width: none; }
.prose ul, .prose ol { margin: 0 0 var(--s-4); padding-left: var(--s-6); }
.prose li { margin-bottom: var(--s-2); }
.prose li > ul, .prose li > ol { margin-top: var(--s-2); }
.prose li::marker { color: var(--fg-subtle); }
.prose strong { font-weight: var(--w-bold); color: var(--fg); }
.prose img { max-width: 100%; height: auto; border: 1px solid var(--line); }

.prose a { text-decoration: underline; }
.hl {
  margin-left: var(--s-2); opacity: 0;
  color: var(--fg-subtle); text-decoration: none;
  font-family: var(--font-mono); font-size: 0.5em;
  vertical-align: middle;
  transition: opacity var(--dur-fast) var(--ease-mech);
}
h1:hover .hl, h2:hover .hl, h3:hover .hl, h4:hover .hl { opacity: 1; }
.hl:hover { color: var(--accent); }

/* Pit note — blockquote. Square, hairline, 2px red rule on the left. */
.prose blockquote {
  margin: var(--s-6) 0;
  padding: var(--s-4) var(--s-6);
  background: var(--bg-elev-1);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: var(--r-0);
}
.prose blockquote > :last-child { margin-bottom: 0; }

/* Starting-line rule */
.prose hr { height: 1px; background: var(--line); margin: var(--s-12) 0 var(--s-8); }

/* ----- Telemetry tables ----- */

.tbl { overflow-x: auto; margin: var(--s-6) 0; border: 1px solid var(--line); }
.tbl table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.tbl thead th {
  text-align: left;
  font-family: var(--font-mono); font-size: 10px; font-weight: var(--w-med);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-muted);
  background: var(--bg-elev-1);
  border-bottom: 1px solid var(--line);
  padding: var(--s-3) var(--s-4);
  white-space: nowrap;
}
.tbl tbody td {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line-faint);
  vertical-align: top;
}
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: var(--bg-elev-1); }
.tbl td > p:last-child, .tbl th > p:last-child { margin-bottom: 0; }

/* ----- Code ----- */

.prose :not(pre) > code {
  background: var(--bg-inset);
  border: 1px solid var(--line-faint);
  border-radius: var(--r-1);
  padding: 1px 5px;
  word-break: break-word;
}
[data-theme="light"] .prose :not(pre) > code { border-color: var(--ink-200); }
.prose a code { color: inherit; }

.code { position: relative; margin: var(--s-6) 0; }
.code pre {
  margin: 0; padding: var(--s-5) var(--s-6);
  background: var(--bg-inset);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow-x: auto;
  font-family: var(--font-mono); font-size: 13px; line-height: 1.65;
  tab-size: 2;
  color: var(--fg);
}
[data-theme="light"] .code pre { background: var(--bg-elev-1); }
.code pre code { background: none; border: 0; padding: 0; font-size: inherit; }
.code-lang {
  position: absolute; top: 0; right: 0;
  padding: 6px 10px;
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--fg-subtle); pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-mech);
}
.copy {
  position: absolute; top: 6px; right: 6px;
  opacity: 0;
  background: var(--bg-elev-1); border: 1px solid var(--line);
  border-radius: var(--r-1);
  padding: 4px 9px; cursor: pointer;
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--fg-muted);
  transition: opacity var(--dur-fast) var(--ease-mech), color var(--dur-fast) var(--ease-mech), border-color var(--dur-fast) var(--ease-mech);
}
.code:hover .copy, .copy:focus-visible { opacity: 1; }
.code:hover .code-lang { opacity: 0; }
.copy:hover { color: var(--fg); border-color: var(--fg); }
.copy:active { transform: scale(0.97); }
.copy.done { color: var(--ok); border-color: var(--ok); }

/* Pygments — flag colours only, reserved for data. */
.code .c, .code .c1, .code .cm, .code .cs, .code .ch, .code .cp, .code .cpf { color: var(--fg-subtle); font-style: italic; }
.code .k, .code .kc, .code .kd, .code .kn, .code .kp, .code .kr, .code .kt, .code .ow { color: var(--accent); }
.code .s, .code .s1, .code .s2, .code .sb, .code .sc, .code .sd, .code .se, .code .sh, .code .si, .code .sx, .code .sr, .code .ss, .code .sa { color: var(--ok); }
.code .m, .code .mi, .code .mf, .code .mh, .code .mo, .code .il { color: var(--info); }
.code .nf, .code .fm, .code .nc { color: var(--fg); font-weight: var(--w-med); }
.code .nb, .code .bp { color: var(--info); }
.code .nv, .code .vc, .code .vg, .code .vi, .code .nx { color: var(--fg); }
.code .nt { color: var(--accent); }
.code .na { color: var(--warn); }
.code .o, .code .p { color: var(--fg-muted); }
.code .err { color: var(--accent); }
.code .gd { color: var(--accent); }
.code .gi { color: var(--ok); }
.code .ge { font-style: italic; }
.code .gs { font-weight: var(--w-bold); }

/* ----- Pager ----- */

.pager { margin-top: var(--s-16); border-top: 1px solid var(--line); }
.pager a {
  display: grid; grid-template-columns: auto 1fr;
  align-items: center; gap: var(--s-4);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--line-faint);
  text-decoration: none; color: var(--fg);
  transition: padding var(--dur-fast) var(--ease-mech);
}
.pager a:hover { color: var(--fg); }
.pager .prev:hover { padding-left: var(--s-2); }
.pager .next:hover { padding-right: var(--s-2); }
.pager a:hover .arw { color: var(--accent); }
.pager .k {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: var(--ls-wider); text-transform: uppercase;
  color: var(--fg-subtle); display: block; margin-bottom: 4px;
}
.pager .t { font-family: var(--font-headline); font-size: var(--t-xl); text-transform: uppercase; line-height: 1; }
.pager .arw { color: var(--fg-subtle); font-family: var(--font-mono); transition: color var(--dur-fast) var(--ease-mech); }
.pager .next { text-align: right; grid-template-columns: 1fr auto; }

.src {
  margin-top: var(--s-8);
  padding-top: var(--s-4);
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: var(--ls-wider); text-transform: uppercase;
  color: var(--fg-subtle);
}
.src a { color: var(--fg-subtle); text-decoration: none; }
.src a:hover { color: var(--accent); }

/* ===== Buttons ===================================================== */

.btn {
  font-family: var(--font-headline);
  font-size: var(--t-sm); letter-spacing: 0.06em; text-transform: uppercase;
  padding: 13px 20px;
  border: 2px solid var(--fg);
  background: var(--fg);
  color: var(--bg);
  border-radius: var(--r-1);
  cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: var(--s-2);
  transition: background var(--dur-fast) var(--ease-mech), color var(--dur-fast) var(--ease-mech), border-color var(--dur-fast) var(--ease-mech);
}
.btn:hover { background: transparent; color: var(--fg); }
.btn:active { transform: scale(0.97); }
.btn.ghost { background: transparent; color: var(--fg); }
.btn.ghost:hover { background: var(--fg); color: var(--bg); }
.btn.accent { background: var(--accent); border-color: var(--accent); color: var(--ink-0w); }
.btn.accent:hover { background: transparent; color: var(--accent); }
.btn svg { width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.5; fill: none; }

/* ===== Landing ===================================================== */

.page { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--s-8); }

.hero {
  position: relative;
  border-bottom: 1px solid var(--line);
  padding: var(--s-24) 0 var(--s-16);
  overflow: hidden;
}
.hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(70% 70% at 30% 40%, #000, transparent 100%);
  -webkit-mask-image: radial-gradient(70% 70% at 30% 40%, #000, transparent 100%);
  pointer-events: none;
}
[data-theme="light"] .hero-grid {
  background-image:
    linear-gradient(rgba(0,0,0,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.04) 1px, transparent 1px);
}
.hero > * { position: relative; }

.hero .eyebrow { margin-bottom: var(--s-5); letter-spacing: var(--ls-track); }
.hero-display {
  font-family: var(--font-display);
  font-size: clamp(52px, 8.5vw, 120px);
  line-height: 0.92;
  text-transform: uppercase;
  transform: skew(-3deg) rotate(-1deg);
  transform-origin: left;
  margin: 0 0 var(--s-8);
  max-width: 14ch;
}
.hero-display .red { color: var(--accent); }
.hero-sub {
  font-size: var(--t-lg); line-height: 1.5;
  color: var(--fg-muted); max-width: 62ch;
  margin: 0 0 var(--s-10);
}
.hero-act { display: flex; flex-wrap: wrap; gap: var(--s-3); }
/* Sits under the buttons: registration closes before the submission deadline,
   so the date belongs beside the call to action, not only in the stat row. */
.hero-note {
  font-size: var(--t-sm); color: var(--fg-muted);
  max-width: 62ch; margin: var(--s-4) 0 0;
}
.hero-note b { color: var(--accent); font-weight: var(--w-med); }

.stat-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4);
  padding: var(--s-12) 0;
  border-bottom: 1px solid var(--line);
}
.stat-panel {
  background: var(--bg-elev-1);
  border: 1px solid var(--line);
  padding: var(--s-6) var(--s-6) var(--s-5);
  clip-path: var(--clip-notch);
}
.stat-panel .k {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--fg-muted); margin-bottom: var(--s-2);
}
.stat-panel .v {
  font-family: var(--font-headline);
  font-size: var(--t-4xl); line-height: 0.9;
  letter-spacing: var(--ls-snug);
  font-variant-numeric: tabular-nums;
}
.stat-panel .v .u { font-size: var(--t-xl); opacity: 0.55; margin-left: 2px; }
.stat-panel .foot {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--fg-subtle); margin-top: var(--s-2);
}
.stat-panel.hot .v { color: var(--accent); }

.sec { padding: var(--s-16) 0; border-bottom: 1px solid var(--line); }
.sec:last-of-type { border-bottom: 0; }
.sec-head {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-12);
  align-items: end; margin-bottom: var(--s-10);
}
.sec-num {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--ls-track);
  text-transform: uppercase; color: var(--accent); margin-bottom: var(--s-3);
}
.sec-h { font-size: var(--t-3xl); margin: 0; }
.sec-lede { font-size: var(--t-md); color: var(--fg-muted); max-width: 52ch; margin: 0; }
.sec-lede a {
  color: var(--fg); text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  transition: color var(--dur-fast) var(--ease-mech), border-color var(--dur-fast) var(--ease-mech);
}
.sec-lede a:hover { color: var(--accent); border-color: var(--accent); }

/* ----- Track choice ----- */

.tracks { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-6); }
.tracks > .tcard { min-width: 0; }

.tcard {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--bg-elev-1);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  padding: var(--s-8);
  text-decoration: none; color: var(--fg);
  overflow: hidden;
  transition: border-color var(--dur-base) var(--ease-mech), transform var(--dur-base) var(--ease-mech), box-shadow var(--dur-base) var(--ease-mech);
}
.tcard::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease-mech);
}
.tcard:hover { border-color: var(--line-strong); transform: translateY(-2px); box-shadow: var(--shadow-card); color: var(--fg); }
.tcard:hover::before { transform: scaleX(1); }

.tcard-n {
  position: absolute; top: var(--s-5); right: var(--s-6);
  font-family: var(--font-headline);
  font-size: 96px; line-height: 0.8;
  color: var(--fg); opacity: 0.07;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.tcard .eyebrow { margin-bottom: var(--s-4); letter-spacing: var(--ls-track); }
.tcard h3 { font-size: var(--t-2xl); margin: 0 0 var(--s-3); max-width: 16ch; }
.tcard .lede { font-size: var(--t-sm); color: var(--fg-muted); margin: 0 0 var(--s-6); max-width: 46ch; }

/* The circuit itself. Both plates are the same shape whatever the map's own
   proportions are, so the two cards stay in step; `contain` letterboxes the
   difference against the inset, which is the track colour in either theme.
   `.paper` is Track 1's occupancy grid — dark ink on white, so the dark theme
   flips it. Track 2's is a screenshot of the simulator and is dark already. */
.tmap-fig {
  aspect-ratio: 16 / 9;
  margin: 0 0 var(--s-6);
  background: var(--bg-inset);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow: hidden;
}
.tmap-fig img {
  display: block; width: 100%; height: 100%;
  object-fit: contain;
  transition: transform var(--dur-base) var(--ease-mech);
}
[data-theme="dark"] .tmap-fig.paper img { filter: invert(1); }
.tcard:hover .tmap-fig img { transform: scale(1.03); }

.spec { margin: 0 0 var(--s-8); border-top: 1px solid var(--line); }
.spec .row {
  display: grid; grid-template-columns: 110px 1fr; gap: var(--s-4);
  align-items: baseline;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line-faint);
}
.spec .k {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-muted);
}
.spec .v { font-size: var(--t-sm); font-weight: var(--w-med); font-variant-numeric: tabular-nums; overflow-wrap: break-word; }

.tcard-foot {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding-top: var(--s-5); border-top: 1px solid var(--line);
  font-family: var(--font-headline); font-size: var(--t-lg);
  text-transform: uppercase; letter-spacing: 0.02em;
}
.tcard-foot .arw { color: var(--fg-subtle); font-family: var(--font-mono); font-size: var(--t-md); transition: transform var(--dur-base) var(--ease-mech), color var(--dur-base) var(--ease-mech); }
.tcard:hover .tcard-foot { color: var(--accent); }
.tcard:hover .tcard-foot .arw { color: var(--accent); transform: translateX(5px); }

/* ----- Info-talk slides -----
   The plate on the left is the deck's own title slide, linking to the PDF,
   which `app.js` upgrades into an inline viewer; both are 16/9, so the swap
   does not move the page. Nothing below the plate depends on the script: the
   two buttons open and save the same file on their own. */

.deck { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--s-6); align-items: start; }
.deck-main { display: grid; gap: var(--s-5); }

.deck-view {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--bg-inset);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  overflow: hidden;
}
.deck-view iframe { display: block; width: 100%; height: 100%; border: 0; background: var(--bg-elev-1); }

.deck-plate {
  position: absolute; inset: 0;
  display: block; overflow: hidden;
  text-decoration: none; color: var(--fg);
}
.deck-cover { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-base) var(--ease-mech); }
.deck-plate:hover .deck-cover { transform: scale(1.03); }

/* The cover is the title slide, and it is dark in either theme, so the bar
   brings its own scrim and its own light type rather than trusting the
   picture behind it. */
.deck-bar {
  position: absolute; inset: auto 0 0 0;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-4);
  padding: var(--s-12) var(--s-6) var(--s-5);
  background: linear-gradient(to top, rgba(0,0,0,0.9) 45%, rgba(0,0,0,0));
  color: var(--ink-0w);
}
.deck-bar__c {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-headline); font-size: var(--t-lg);
  text-transform: uppercase; letter-spacing: 0.02em;
  transition: color var(--dur-base) var(--ease-mech);
}
.deck-bar__c .arw { color: var(--ink-300); font-family: var(--font-mono); font-size: var(--t-md); transition: transform var(--dur-base) var(--ease-mech), color var(--dur-base) var(--ease-mech); }
.deck-plate:hover .deck-bar__c { color: var(--accent); }
.deck-plate:hover .deck-bar__c .arw { color: var(--accent); transform: translateX(5px); }
.deck-bar__f {
  margin-left: auto;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-300);
}

.deck-side { display: grid; gap: var(--s-6); align-content: start; }
.deck-side .spec { margin: 0; }

.deck-ag { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.deck-ag li {
  display: grid; grid-template-columns: 28px 1fr; gap: var(--s-1) var(--s-3);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--line-faint);
}
.deck-ag .n {
  grid-row: 1 / span 2;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.16em; color: var(--fg-subtle);
  font-variant-numeric: tabular-nums;
  padding-top: 3px;
}
.deck-ag .t {
  font-family: var(--font-headline); font-size: var(--t-md);
  text-transform: uppercase; letter-spacing: 0.02em; line-height: 1;
}
.deck-ag .d { font-size: var(--t-xs); color: var(--fg-muted); line-height: 1.5; }

.deck-act { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* ----- Shared-rules rows ----- */

.rows { border-top: 1px solid var(--line); }
.row-item {
  display: grid; grid-template-columns: 150px 1fr 1fr;
  gap: var(--s-6); align-items: baseline;
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--line-faint);
}
.row-item .k {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-muted);
}
.row-item .v { font-size: var(--t-sm); font-variant-numeric: tabular-nums; overflow-wrap: break-word; }
.row-item .v.red { color: var(--accent); font-weight: var(--w-med); }
.row-item .n { font-size: var(--t-sm); color: var(--fg-muted); overflow-wrap: break-word; }
.row-item .n a {
  color: var(--fg); text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  transition: color var(--dur-fast) var(--ease-mech), border-color var(--dur-fast) var(--ease-mech);
}
.row-item .n a:hover { color: var(--accent); border-color: var(--accent); }

/* ----- Chapter grid ----- */

.chaps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
.chap {
  display: block; padding: var(--s-5);
  background: var(--bg-elev-1);
  border: 1px solid var(--line);
  border-radius: var(--r-3);
  text-decoration: none; color: var(--fg);
  transition: border-color var(--dur-fast) var(--ease-mech), transform var(--dur-fast) var(--ease-mech);
}
.chap:hover { border-color: var(--line-strong); transform: translateY(-2px); color: var(--fg); }
.chap:hover .ct { color: var(--accent); }
.chap .cn {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.2em; color: var(--fg-subtle); margin-bottom: var(--s-3);
}
.chap .ct {
  font-family: var(--font-headline); font-size: var(--t-lg);
  text-transform: uppercase; line-height: 1; margin-bottom: var(--s-2);
  transition: color var(--dur-fast) var(--ease-mech);
}
.chap .cd { font-size: var(--t-xs); color: var(--fg-muted); line-height: 1.5; }

.quick { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-6); }
/* Grid and flex items are min-width:auto by default, so an unbreakable line —
   the clone URL — widens the page instead of scrolling inside its own panel. */
.quick > div { min-width: 0; }
.quick pre { max-width: 100%; }
.quick pre {
  margin: 0; padding: var(--s-6);
  background: var(--bg-inset);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  font-family: var(--font-mono); font-size: 13px; line-height: 1.7;
  overflow-x: auto; color: var(--fg);
}
[data-theme="light"] .quick pre { background: var(--bg-elev-1); }
.quick pre .c { color: var(--fg-subtle); }
.quick pre .r { color: var(--accent); }

/* ===== Footer ====================================================== */

.ft {
  border-top: 2px solid var(--fg);
  margin-top: var(--s-16);
  padding: var(--s-8);
}
.ft-in {
  max-width: var(--page-max); margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: var(--s-6);
  justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-subtle);
}
.ft-in nav { display: flex; flex-wrap: wrap; gap: var(--s-6); }
.ft-in a { color: var(--fg-muted); text-decoration: none; }
.ft-in a:hover { color: var(--accent); }

/* ===== Responsive ================================================== */

@media (max-width: 1200px) {
  .shell { grid-template-columns: var(--nav-w) minmax(0, 1fr); gap: var(--s-10); }
  .toc { display: none; }
  .chaps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .tracks, .quick, .deck { grid-template-columns: 1fr; }
  .sec-head { grid-template-columns: 1fr; gap: var(--s-5); align-items: start; }
  .row-item { grid-template-columns: 1fr; gap: var(--s-2); }
}

@media (max-width: 860px) {
  .hdr { padding: 0 var(--s-4); gap: var(--s-3); }
  .hdr-nav, .hdr-meta { display: none; }
  .navbtn { display: flex; }
  .hdr-brand .sub { display: none; }

  .shell { grid-template-columns: minmax(0, 1fr); padding: 0 var(--s-4); }
  .page { padding: 0 var(--s-4); }

  .nav {
    position: fixed; inset: var(--hdr-h) auto 0 0;
    width: min(88vw, 320px); z-index: 45;
    background: var(--bg);
    border-right: 1px solid var(--line);
    padding: var(--s-6) var(--s-5) var(--s-16);
    max-height: none;
    transform: translateX(-102%);
    transition: transform var(--dur-base) var(--ease-mech);
  }
  body.nav-on .nav { transform: translateX(0); }
  body.nav-on .scrim { display: block; }

  .main { padding-top: var(--s-6); }
  .hero { padding: var(--s-12) 0 var(--s-10); }
  .hero-sub { font-size: var(--t-md); }
  .chaps { grid-template-columns: 1fr; }
  .pager .t { font-size: var(--t-lg); }
  .ft-in { flex-direction: column; align-items: flex-start; gap: var(--s-4); }
}

@media print {
  .hdr, .nav, .toc, .pager, .ft, .copy, .skip, .navbtn { display: none !important; }
  .shell { display: block; padding: 0; }
  .prose { max-width: none; }
}

/* ===== Platform switch =============================================== */
/*
 * Every platform's variant is in the HTML; CSS shows the one matching
 * <html data-platform>. Nothing is rewritten at run time, so the page is
 * already correct before app.js loads, and a copy button lifts the right
 * command because innerText skips what is display:none.
 */

[data-pf] { display: none; }

/* Spelled out per element rather than `display: revert`: revert needs Safari
   15.4+, and where it is not understood every variant stays hidden and the
   command reads "./install//setup.sh". These selectors work everywhere. */
html[data-platform="linux"]   span[data-pf~="linux"],
html[data-platform="macos"]   span[data-pf~="macos"],
html[data-platform="windows"] span[data-pf~="windows"] { display: inline; }

html[data-platform="linux"]   div[data-pf~="linux"],
html[data-platform="linux"]   p[data-pf~="linux"],
html[data-platform="macos"]   div[data-pf~="macos"],
html[data-platform="macos"]   p[data-pf~="macos"],
html[data-platform="windows"] div[data-pf~="windows"],
html[data-platform="windows"] p[data-pf~="windows"] { display: block; }

html[data-platform="linux"]   li[data-pf~="linux"],
html[data-platform="macos"]   li[data-pf~="macos"],
html[data-platform="windows"] li[data-pf~="windows"] { display: list-item; }

/* Alternatives spelled out for GitHub readers, who have no switch. */
.pf-alt { display: none; }

.pf-switch {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  overflow: hidden;
  flex: none;
}
.pf-switch button {
  appearance: none; -webkit-appearance: none;
  background: transparent; border: 0;
  padding: 6px 11px;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fg-muted); cursor: pointer; white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-mech), background var(--dur-fast) var(--ease-mech);
}
.pf-switch button + button { border-left: 1px solid var(--line); }
.pf-switch button:hover { color: var(--fg); }
.pf-switch button:active { transform: scale(0.97); }

html[data-platform="linux"]   .pf-switch [data-set-pf="linux"],
html[data-platform="macos"]   .pf-switch [data-set-pf="macos"],
html[data-platform="windows"] .pf-switch [data-set-pf="windows"] {
  background: var(--accent); color: var(--ink-0w);
}

.pf-switch--nav { display: flex; width: 100%; margin-bottom: var(--s-8); }
.pf-switch--nav button { flex: 1; justify-content: center; padding: 7px 2px; }
.pf-switch--quick { margin-bottom: var(--s-6); }

/* The switch repeated where the per-platform sections actually start. */
.pf-tabs {
  display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
  margin: var(--s-6) 0 var(--s-6);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
}
.pf-block > h3:first-child { margin-top: 0; }
.pf-block > :last-child { margin-bottom: 0; }

/* Said to the platforms a section is not for. The section stays visible —
   the prose cross-references these by number. */
.pf-scope {
  margin: var(--s-4) 0 var(--s-6);
  padding: var(--s-3) var(--s-4);
  background: var(--bg-elev-1);
  border: 1px solid var(--line);
  border-left: 2px solid var(--warn);
  font-size: var(--t-sm); color: var(--fg-muted);
  max-width: none;
}

/* The landing page has no sidebar, so it carries its own switch in the hero. */
.hero-pf {
  display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
  margin-top: var(--s-8);
  padding-top: var(--s-6);
  border-top: 1px solid var(--line);
}
.hero-pf__note { font-size: var(--t-sm); color: var(--fg-subtle); }

/* The header switch stays at every width — it is the one control a reader is
   guaranteed to see. Below 1100px the deadline and the GitHub link give up
   their room for it, and below 860px it and the theme toggle both shrink. */
@media (max-width: 1100px) { .hdr-meta { display: none; } }

@media (max-width: 860px) {
  .pf-switch--hdr button { padding: 5px 6px; font-size: 9px; letter-spacing: 0.1em; }
  .wm { font-size: 17px; }
  .toggle { padding: 6px 8px; }
  .toggle .t-light, .toggle .t-dark { display: none; }
  .toggle svg { display: block; width: 15px; height: 15px; stroke: currentColor; stroke-width: 1.5; fill: none; }
  .hero-pf__note { display: none; }
}

/* Above that the glyph is redundant — the word is there. It is scoped to those
   widths because, unscoped, it sits after the phone rule above and wins. */
@media (min-width: 861px) { .toggle svg { display: none; } }

@media print { .pf-switch, .pf-tabs, .hero-pf { display: none !important; } }

/* ===== Archive ======================================================== */

/* The archive is the old landing page, kept. This says so once, at the top. */
.arch-note {
  display: flex; align-items: baseline; gap: var(--s-4);
  margin-top: var(--s-6);
  padding: var(--s-3) var(--s-4);
  background: var(--bg-elev-1);
  border: 1px solid var(--line);
  border-left: 2px solid var(--warn);
  font-size: var(--t-sm); color: var(--fg-muted);
}
.arch-note p { margin: 0; max-width: none; }
.arch-note a { color: var(--fg); }
.arch-note a:hover { color: var(--accent); }
.arch-note__k {
  flex: none;
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: var(--ls-track); text-transform: uppercase;
  color: var(--warn);
}

/* A control that no longer does anything. Dashed and dim, and no hover — it
   must not invite a click it will not answer. */
.btn:disabled, .btn[aria-disabled="true"] {
  background: transparent; color: var(--fg-subtle);
  border: 2px dashed var(--line);
  cursor: not-allowed;
}
.btn:disabled:hover, .btn:disabled:active { background: transparent; color: var(--fg-subtle); transform: none; }

/* ===== Home: results ================================================== */

/* The header on a page with no sidebar keeps its nav on a phone, minus the two
   guide links, which the page repeats lower down. */
@media (max-width: 860px) {
  .hdr--flat .hdr-nav { display: flex; gap: var(--s-4); margin-left: var(--s-2); }
  .hdr--flat .hdr-nav a { font-size: 10px; letter-spacing: 0.12em; }
  .hdr--flat .hdr-nav__guide { display: none; }
}

.hero--home { border-bottom: 0; padding-bottom: var(--s-20); }
.home-hero {
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: var(--s-12); align-items: end;
}
.home-hero__text { min-width: 0; }
.home-hero .hero-display { font-size: clamp(48px, 7.4vw, 104px); margin-bottom: var(--s-6); }
.home-hero .hero-sub { margin-bottom: var(--s-8); }

/* The two winners. Each is a plate that jumps to its own leaderboard. */
.winners { display: grid; gap: var(--s-4); min-width: 0; }
.win {
  position: relative; overflow: hidden;
  display: grid; gap: var(--s-1);
  padding: var(--s-6) var(--s-6) var(--s-5);
  background: var(--bg-elev-1);
  border: 1px solid var(--line);
  clip-path: var(--clip-notch);
  text-decoration: none; color: var(--fg);
  transition: border-color var(--dur-base) var(--ease-mech);
}
.win:hover { color: var(--fg); border-color: var(--accent); }
.win-n {
  position: absolute; top: calc(var(--s-4) * -1); right: var(--s-5);
  font-family: var(--font-headline);
  font-size: 150px; line-height: 1;
  color: var(--accent); opacity: 0.18;
  pointer-events: none;
}
.win-k {
  font-family: var(--font-mono); font-size: 10px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--fg-muted);
}
.win-team {
  position: relative;
  font-family: var(--font-headline); font-size: var(--t-3xl);
  line-height: 1.05; text-transform: uppercase; overflow-wrap: anywhere;
  transition: color var(--dur-base) var(--ease-mech);
}
.win:hover .win-team { color: var(--accent); }
.win-m {
  position: relative;
  display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-5);
  margin-top: var(--s-3);
  font-family: var(--font-mono); font-size: 11px; color: var(--fg-muted);
}
.win-m b { color: var(--fg); font-weight: var(--w-med); font-size: var(--t-sm); }

/* The finish line, under the hero. */
.finish {
  height: 24px;
  background: repeating-conic-gradient(var(--fg) 0 25%, var(--bg) 0 50%) 0 0 / 24px 24px;
}

/* ----- The brief ----- */

.brief { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-16); align-items: start; }
.brief-main, .brief-score { min-width: 0; }
.brief-lead {
  margin: var(--s-5) 0 var(--s-5); max-width: 34ch;
  font-size: var(--t-2xl); line-height: 1.25; font-weight: var(--w-med);
  letter-spacing: var(--ls-snug);
}
.brief-body { color: var(--fg-muted); max-width: 52ch; margin: 0; }
.brief-score__h { font-size: var(--t-xl); margin: 0 0 var(--s-4); }

.eq {
  display: grid; gap: var(--s-5);
  margin: 0 0 var(--s-6); padding: var(--s-6);
  background: var(--bg-inset);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
}
[data-theme="light"] .eq { background: var(--bg-elev-1); }
.eq-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.eq-lhs { flex: 0 0 3.6em; font-family: var(--font-headline); font-size: var(--t-xl); text-transform: uppercase; }
.eq-op { flex: none; font-family: var(--font-mono); font-size: var(--t-lg); color: var(--fg-muted); }
.eq-term { display: inline-flex; align-items: center; gap: var(--s-3); }
.eq-pts { font-family: var(--font-headline); font-size: var(--t-4xl); line-height: 1; }
.frac { display: inline-grid; text-align: center; font-size: var(--t-sm); line-height: 1.3; }
.frac > span:first-child { padding-bottom: var(--s-1); border-bottom: 2px solid var(--fg); }
.frac > span:last-child { padding-top: var(--s-1); color: var(--fg-muted); }

.brief-score .spec { margin: 0; }

/* ----- Leaderboards ----- */

/* Without JavaScript both leaderboards simply stack. With it, the tabs appear
   and only one panel shows. `js` is set in the head, before first paint. */
.tabs { display: none; }
.js .tabs {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3);
  margin-bottom: var(--s-10);
}
.js .tabpanel { display: none; }
.js .tabpanel.is-on { display: block; }
html:not(.js) .tabpanel + .tabpanel { margin-top: var(--s-16); }

.tab {
  appearance: none; -webkit-appearance: none;
  display: grid; gap: var(--s-1); text-align: left;
  padding: var(--s-5) var(--s-6);
  background: transparent; color: var(--fg-muted);
  border: 1px solid var(--line); border-top: 3px solid var(--line);
  border-radius: var(--r-1);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-mech), background var(--dur-fast) var(--ease-mech), border-color var(--dur-fast) var(--ease-mech);
}
.tab:hover { color: var(--fg); border-color: var(--line-strong); }
.tab[aria-selected="true"] {
  color: var(--fg); background: var(--bg-elev-1);
  border-color: var(--line-strong); border-top-color: var(--accent);
}
.tab-t { font-family: var(--font-headline); font-size: var(--t-2xl); line-height: 1; text-transform: uppercase; }
.tab-m {
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-subtle);
}

.track-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: var(--s-10); align-items: start;
  margin-bottom: var(--s-8);
}
.track-head__text { min-width: 0; }
.track-head h3 { font-size: var(--t-2xl); margin: 0 0 var(--s-3); }
.track-head p { color: var(--fg-muted); font-size: var(--t-sm); max-width: 52ch; margin: 0; }
.track-head .spec { margin: var(--s-5) 0 var(--s-5); }
.track-head .tmap-fig { margin: 0; }

.more {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-headline); font-size: var(--t-md);
  letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--fg); text-decoration: none;
}
.more:hover { color: var(--accent); }
.more .arw { font-family: var(--font-mono); color: var(--fg-subtle); transition: transform var(--dur-base) var(--ease-mech), color var(--dur-base) var(--ease-mech); }
.more:hover .arw { color: var(--accent); transform: translateX(4px); }

/* The leaderboard. A real table, so a screen reader announces each cell under
   its column; the top three are set larger, and the bar is the score. */
.board { overflow-x: auto; border: 1px solid var(--line); }
.board table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.board thead th {
  padding: var(--s-3) var(--s-4);
  background: var(--bg-elev-1);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 10px; font-weight: var(--w-med);
  letter-spacing: 0.18em; text-transform: uppercase; text-align: left;
  color: var(--fg-muted); white-space: nowrap;
}
.board .u { color: var(--fg-subtle); }
.board .num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.board tbody th, .board tbody td {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--line-faint);
  font-weight: var(--w-reg); text-align: left; vertical-align: middle;
}
.board tbody .num { text-align: right; }
.board tbody tr:last-child > * { border-bottom: 0; }
.board tbody tr:hover > * { background: var(--bg-elev-1); }

.board tbody .pos {
  width: 72px;
  font-family: var(--font-headline); font-size: var(--t-xl); line-height: 1;
  color: var(--fg-subtle);
}
.board tbody .team { font-weight: var(--w-med); }

.board .r--1 > *, .board .r--2 > *, .board .r--3 > * { padding-block: var(--s-4); }
.board .r--1 .pos, .board .r--2 .pos, .board .r--3 .pos { font-size: var(--t-3xl); color: var(--fg); }
.board .r--1 .team, .board .r--2 .team, .board .r--3 .team {
  font-family: var(--font-headline); font-size: var(--t-xl); font-weight: var(--w-reg);
  letter-spacing: 0.01em; text-transform: uppercase;
}
.board .r--1 { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.board .r--1 > :first-child { box-shadow: inset 3px 0 0 var(--accent); }
.board .r--1 .pos { color: var(--accent); }

.board .score { width: 30%; min-width: 210px; }
.score-in { display: flex; align-items: center; gap: var(--s-4); }
.score-n { flex: none; min-width: 5ch; text-align: right; font-family: var(--font-mono); font-weight: var(--w-bold); }
.bar { position: relative; flex: 1; height: 6px; background: var(--line); }
.bar::after {
  content: ""; position: absolute; inset: 0 auto 0 0;
  width: var(--w); background: var(--fg-subtle);
  transform-origin: left;
  animation: bar-in var(--dur-slow) var(--ease-mech) both;
  animation-delay: calc(var(--i) * 30ms);
}
.r--2 .bar::after, .r--3 .bar::after { background: var(--fg); }
.r--1 .bar::after { background: var(--accent); }
@keyframes bar-in { from { transform: scaleX(0); } }

.board .r--dnf .team { color: var(--fg-subtle); font-style: italic; }
.board .r--dnf .pos { color: var(--fg-subtle); }
.chip {
  display: inline-block; padding: 3px 9px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em;
  color: var(--accent);
  border: 1px solid var(--accent); border-radius: var(--r-pill);
}
.chip abbr { text-decoration: none; }

.board-note { margin: var(--s-4) 0 0; max-width: none; font-size: var(--t-sm); color: var(--fg-muted); }

/* ----- Where next ----- */

.outro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-16); align-items: start; }
.outro .sec-h { max-width: 14ch; margin-bottom: var(--s-5); }
.golinks { border-top: 1px solid var(--line); }
.golink {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--s-4); align-items: baseline;
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--line-faint);
  color: var(--fg); text-decoration: none;
  transition: padding var(--dur-fast) var(--ease-mech);
}
.golink:hover { color: var(--fg); padding-left: var(--s-2); }
.golink-t { font-family: var(--font-headline); font-size: var(--t-xl); line-height: 1; text-transform: uppercase; transition: color var(--dur-fast) var(--ease-mech); }
.golink-d { grid-column: 1; font-size: var(--t-sm); color: var(--fg-muted); }
.golink .arw { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-family: var(--font-mono); color: var(--fg-subtle); transition: color var(--dur-fast) var(--ease-mech); }
.golink:hover .golink-t, .golink:hover .arw { color: var(--accent); }

@media (max-width: 1000px) {
  .home-hero { grid-template-columns: minmax(0, 1fr); gap: var(--s-10); }
  .winners { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .brief, .outro { grid-template-columns: minmax(0, 1fr); gap: var(--s-10); }
}

/* Lap and total points add up to the score beside them, so a narrow screen
   keeps the score and the two times, and a table that fits. */
@media (max-width: 1040px) {
  .board .pts { display: none; }
  .board .score { min-width: 160px; }
}

@media (max-width: 760px) {
  .winners { grid-template-columns: minmax(0, 1fr); }
  .win-n { font-size: 120px; }
  .track-head { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); }
  .tab { padding: var(--s-4); }
  .tab-t { font-size: var(--t-xl); }
  .tab-m { letter-spacing: 0.08em; }

  .board thead th, .board tbody th, .board tbody td { padding: var(--s-3) 6px; }
  .board .num { font-size: 12px; }
  .score-n { font-size: 13px; }
  .board .u { display: none; }
  .board tbody .team { overflow-wrap: anywhere; }
  .board .r--1 > *, .board .r--2 > *, .board .r--3 > * { padding-block: var(--s-3); }
  .board tbody .pos { width: 32px; padding-inline: 4px; text-align: center; }
  .board .r--1 .pos, .board .r--2 .pos, .board .r--3 .pos { font-size: var(--t-2xl); }
  .board .r--1 .team, .board .r--2 .team, .board .r--3 .team { font-size: var(--t-lg); }
  .board .score { width: auto; min-width: 0; }
  .score-in .bar { display: none; }
  .score-n { min-width: 0; }
  .board thead th { font-size: 9px; letter-spacing: 0.04em; line-height: 1.3; white-space: normal; }
  .eq { padding: var(--s-4); }
  .eq-lhs { flex-basis: auto; }
  .eq-lhs:empty { display: none; }
}