/* CodeJury — the site.
 *
 * Two rules, borrowed from backend/app/cli/theme.py, because the terminal client
 * and this page are the same brand:
 *   · gold is the only accent; the verdict colours only ever mean their verdict.
 *   · it has to hold on a light background and a near-black one, so every colour
 *     is declared twice and nothing is a gradient.
 *
 * Everything here is hand-written and self-hosted. No CDN, no framework, no
 * build step — same philosophy as a tool that runs offline on a free-tier key.
 */

/* ── Faces ──────────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Plex Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/plex-serif-400.woff2") format("woff2");
}
@font-face {
  font-family: "Plex Serif"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("fonts/plex-serif-400i.woff2") format("woff2");
}
@font-face {
  font-family: "Plex Serif"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/plex-serif-600.woff2") format("woff2");
}
@font-face {
  font-family: "Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/plex-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "Plex Mono"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/plex-mono-600.woff2") format("woff2");
}

/* ── Palette ────────────────────────────────────────────────────────────── */

:root {
  --serif: "Plex Serif", "Iowan Old Style", Charter, Georgia, serif;
  --mono: "Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --gold: #C8A24A;
  --oak: #9A6B43;
  --green: #4E9A51;
  --red: #C4453B;

  --measure: 42rem;
  --bleed: 58rem;
  --rail: 15rem;
}

/* Dark is the default reading: it is where the terminal stills live. */
:root {
  --bg: #0c0c0e;
  --fg: #ddd9d2;
  --fg-strong: #f3efe7;
  --muted: #8a8a94;
  --rule: #2b2b33;
  --rule-soft: #1c1c22;
  --gold-ink: #C8A24A;
  --gold-shadow: #4a3a15;
  --tint: rgba(200, 162, 74, 0.10);
  --shot-bg: #000;
  --chrome: #131318;
  color-scheme: dark;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg: #f4f1ea;
    --fg: #26262a;
    --fg-strong: #101014;
    --muted: #6d6a62;
    --rule: #d5cec0;
    --rule-soft: #e4ded1;
    --gold-ink: #8A7231;
    --gold-shadow: #d8c48d;
    --tint: rgba(138, 114, 49, 0.09);
    --shot-bg: #0c0c0e;
    --chrome: #ebe5d8;
    color-scheme: light;
  }
}

/* The toggle wins over the system in both directions. */
:root[data-theme="dark"] {
  --bg: #0c0c0e; --fg: #ddd9d2; --fg-strong: #f3efe7; --muted: #8a8a94;
  --rule: #2b2b33; --rule-soft: #1c1c22; --gold-ink: #C8A24A;
  --gold-shadow: #4a3a15; --tint: rgba(200, 162, 74, 0.10); --shot-bg: #000;
  --chrome: #131318;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f4f1ea; --fg: #26262a; --fg-strong: #101014; --muted: #6d6a62;
  --rule: #d5cec0; --rule-soft: #e4ded1; --gold-ink: #8A7231;
  --gold-shadow: #d8c48d; --tint: rgba(138, 114, 49, 0.09); --shot-bg: #0c0c0e;
  --chrome: #ebe5d8;
  color-scheme: light;
}

/* ── Reset, lightly ─────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 400 17px/1.68 var(--serif);
  font-feature-settings: "kern", "liga";
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--gold); color: #0c0c0e; }

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--gold-ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  transition: color 120ms ease, text-underline-offset 120ms ease;
}
a:hover { color: var(--gold-ink); text-underline-offset: 0.28em; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 2px; }

strong, b { font-weight: 600; color: var(--fg-strong); }
em { font-style: italic; }

code {
  font: 400 0.88em/1.4 var(--mono);
  background: var(--tint);
  padding: 0.1em 0.34em;
  border-radius: 3px;
}
kbd {
  font: 600 0.85em/1 var(--mono);
  color: var(--gold-ink);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 0.15em 0.36em;
}
.cmd { font: 600 0.9em/1.4 var(--mono); color: var(--gold-ink); }
.dim { color: var(--muted); }
.gold { color: var(--gold-ink); }
.ok { color: var(--green); }
.err { color: var(--red); }

.sr-only, .skip {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip:focus {
  position: fixed; top: 0.75rem; left: 0.75rem; width: auto; height: auto;
  clip: auto; clip-path: none; z-index: 10;
  background: var(--bg); border: 1px solid var(--gold);
  padding: 0.5rem 0.9rem; font: 400 0.85rem var(--mono);
}

/* ── Page frame ─────────────────────────────────────────────────────────── */

.page {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
}

.rail {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  padding: 2.6rem 1.4rem 2rem;
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 2rem;
  font-family: var(--mono);
  font-size: 0.76rem;
}
.rail-head {
  margin: 0;
  color: var(--gold-ink);
  font-weight: 600;
  letter-spacing: 0.1em;
}
.rail-head .scales { margin-right: 0.35em; }
.rail nav ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.62rem; }
.rail nav a {
  display: grid;
  grid-template-columns: 2.1rem 1fr;
  align-items: baseline;
  color: var(--muted);
  text-decoration: none;
  line-height: 1.35;
  transition: color 120ms ease;
}
.rail nav a i { font-style: normal; color: var(--muted); opacity: 0.55; font-weight: 600; }
.rail nav a:hover { color: var(--fg); }
.rail nav a:hover i { color: var(--gold-ink); }
.rail nav a[aria-current="true"] { color: var(--fg-strong); }
.rail nav a[aria-current="true"] i { color: var(--gold-ink); }
/* On a wide screen the status bar at the foot of the window carries these, the
   way the terminal client does; the rail only takes them over when the bar is
   gone. Two copies of the same control on screen is how a page starts to look
   assembled rather than designed. */
.rail-foot { display: none; margin-top: auto; gap: 0.55rem; justify-items: start; }
.rail-foot button, .rail-foot a {
  font: 400 0.76rem/1 var(--mono);
  color: var(--muted);
  background: none;
  border: 0;
  padding: 0;
  text-decoration: none;
  cursor: pointer;
  transition: color 120ms ease;
}
.rail-foot button:hover, .rail-foot a:hover { color: var(--fg); }

main {
  padding: 5rem 3.5rem 8rem;
  min-width: 0;
}
main > *, .hero > *, section > * { max-width: var(--measure); }
.bleed, main > figure, .jurors { max-width: var(--bleed); }

/* ── Hero ───────────────────────────────────────────────────────────────── */

/* The hero runs to the wide measure so the 68-column wordmark has room; the
   prose inside it is pulled back to the reading measure by `.hero > *`. */
.hero { max-width: var(--bleed); padding-bottom: 1rem; }

.wordmark {
  margin: 0;
  max-width: none;
  font-family: var(--mono);
  /* 68 columns. Sized so the block never wraps into noise — the same rule the
     CLI applies at 72 columns, which is why the lockup exists below. */
  font-size: min(21px, calc((100vw - 22rem) / 41));
  line-height: 1.02;
  color: var(--gold);
  text-shadow: 0.06em 0.07em 0 var(--gold-shadow);
  overflow: hidden;
}
.lockup { display: none; }

.tagline {
  margin: 1.4rem 0 0;
  font: 400 0.82rem/1 var(--mono);
  letter-spacing: 0.14em;
  color: var(--muted);
}

h1 {
  margin: 2.6rem 0 0;
  font: 600 clamp(2.5rem, 5.6vw, 3.9rem)/1.03 var(--serif);
  letter-spacing: -0.022em;
  color: var(--fg-strong);
}

.lede {
  margin: 1.6rem 0 0;
  font-size: 1.19rem;
  line-height: 1.62;
}
/* The cost objection is the one that stops people reading, so it is answered in
   the hero rather than four screens down. Quieter than the lede, but above the
   fold either way. */
.lede-cost {
  margin: 1.1rem 0 0;
  padding-left: 1.1rem;
  border-left: 2px solid var(--gold-ink);
  font-size: 1.02rem;
  color: var(--muted);
}
.lede-cost .fig { font-family: var(--mono); font-weight: 600; color: var(--gold-ink); }

.hero-act {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 2rem 2.6rem;
  margin: 2.8rem 0 0;
  max-width: var(--bleed);
}
.hero-act .panel { margin: 0; flex: 0 1 26rem; }
.hero-side { display: grid; gap: 1.1rem; justify-items: start; }
.facts {
  margin: 0;
  font: 400 0.82rem/1.85 var(--mono);
  color: var(--muted);
}
.facts a { color: var(--fg); }

/* The repo button. The counts arrive from the GitHub API and are hidden until
   they do — a star count that says "—" forever is worse than no star count,
   and this page would rather show nothing than show a stale number. */
.repo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  font: 400 0.82rem/1 var(--mono);
  text-decoration: none;
  color: var(--fg);
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}
.repo:hover {
  border-color: var(--gold-ink);
  background: var(--tint);
  color: var(--fg-strong);
}
.repo svg { fill: currentColor; flex: none; }
.repo .slash { color: var(--muted); margin: 0 0.1em; }
/* `display` on a class beats the user-agent rule for [hidden], so the counts
   have to be told to stay hidden until the fetch answers. */
.repo .counts[hidden] { display: none; }
.repo .counts {
  display: inline-flex;
  gap: 0.85rem;
  padding-left: 0.85rem;
  border-left: 1px solid var(--rule);
  color: var(--muted);
}
.repo .count { display: inline-flex; align-items: center; gap: 0.32rem; }
.repo .count svg { fill: var(--gold-ink); }
.repo .count b { font-weight: 600; font-variant-numeric: tabular-nums; }
.repo:hover .counts { border-left-color: var(--gold-ink); }

.hero-shot { margin-top: 3.5rem; }

/* ── Sections ───────────────────────────────────────────────────────────── */

section {
  margin-top: 6.5rem;
  padding-top: 2.2rem;
  border-top: 1px solid var(--rule);
  max-width: var(--bleed);
}

h2 {
  margin: 0 0 1.8rem;
  font: 600 clamp(1.7rem, 3vw, 2.3rem)/1.15 var(--serif);
  letter-spacing: -0.015em;
  color: var(--fg-strong);
}
h2 .num {
  display: block;
  margin-bottom: 0.7rem;
  font: 600 0.78rem/1 var(--mono);
  font-style: normal;
  letter-spacing: 0.18em;
  color: var(--gold-ink);
}

h3 {
  margin: 3.2rem 0 1.1rem;
  font: 600 1.22rem/1.35 var(--serif);
  color: var(--fg-strong);
}
h3::before {
  content: "\25B8";
  color: var(--gold-ink);
  font-family: var(--mono);
  font-size: 0.8em;
  margin-right: 0.6em;
}

p { margin: 0 0 1.15rem; }
section > p:last-child { margin-bottom: 0; }

/* ── The panel: a Rich box, rebuilt so it reflows ───────────────────────── */

.panel {
  position: relative;
  margin: 2rem 0;
  padding: 1.5rem 1.4rem 1.3rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
}
.panel-label, .panel-status {
  position: absolute;
  background: var(--bg);
  padding: 0 0.55rem;
  font: 400 0.72rem/1 var(--mono);
  letter-spacing: 0.08em;
}
.panel-label { top: -0.45rem; left: 1.1rem; color: var(--gold-ink); }
.panel-status { bottom: -0.45rem; right: 1.1rem; color: var(--muted); }

.panel pre, details.cite pre {
  margin: 0;
  overflow-x: auto;
  font: 400 0.82rem/1.62 var(--mono);
  color: var(--fg);
  tab-size: 2;
}
.panel.code pre { padding-bottom: 0.15rem; }
.panel.flow pre { font-size: 0.78rem; }

/* ── Figures and stills ─────────────────────────────────────────────────── */

figure { margin: 2.4rem 0; }

.shot img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--shot-bg);
  border: 1px solid var(--rule);
  border-radius: 5px;
}
/* The recording opens on a cleared screen, so for its first second it is a
   black rectangle. The frame is what tells you that is a terminal and not a
   failed image — the same chrome the project's own hero screenshot carries. */
.term {
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
  background: var(--shot-bg);
}
.term img { border: 0; border-radius: 0; }
.term-bar {
  display: flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.55rem 0.8rem;
  background: var(--chrome);
  border-bottom: 1px solid var(--rule);
}
.term-bar i {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--rule);
}
.term-bar span {
  margin: 0 auto;
  padding-right: 2.4rem; /* optically centred against the three dots */
  font: 400 0.72rem/1 var(--mono);
  letter-spacing: 0.1em;
  color: var(--muted);
}

figcaption {
  margin-top: 0.75rem;
  font: 400 0.79rem/1.62 var(--mono);
  color: var(--muted);
  max-width: 46rem;
}
.shot figcaption::before {
  content: "\25B8";
  color: var(--gold-ink);
  margin-right: 0.55em;
}
figcaption a { color: var(--fg); }

.jurors { display: grid; gap: 1.6rem; margin: 2.4rem 0; }
.jurors figure { margin: 0; }

/* ── Tables: rules, not boxes ───────────────────────────────────────────── */

table.data {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.97rem;
}
table.data th {
  font: 400 0.72rem/1.3 var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  font-weight: 400;
  padding: 0 0.9rem 0.6rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: bottom;
}
table.data th code { background: none; padding: 0; text-transform: none; letter-spacing: 0; }
table.data td {
  padding: 0.72rem 0.9rem 0.72rem 0;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
}
table.data tbody tr:last-child td, table.data tbody tr:last-child th { border-bottom: 0; }
table.data th.n, table.data td.n {
  text-align: right;
  font-family: var(--mono);
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
  padding-right: 0;
  white-space: nowrap;
}
table.data th.n { padding-right: 0; }
table.data tr.win td, table.data td.win { color: var(--gold-ink); font-weight: 600; }
table.data tr.win td:first-child { font-weight: 600; }

table.stages tbody th, table.cmds tbody th {
  font: 600 0.9rem/1.5 var(--mono);
  text-transform: none;
  letter-spacing: 0;
  color: var(--gold-ink);
  border-bottom: 1px solid var(--rule-soft);
  padding: 0.72rem 1.4rem 0.72rem 0;
  white-space: nowrap;
  vertical-align: top;
}
table.stages td.want { color: var(--muted); font-size: 0.9rem; }
table.cmds td { font-size: 0.95rem; }
table.bench td:first-child { font-family: var(--mono); font-size: 0.88rem; }

/* ── Definition lists, notes ────────────────────────────────────────────── */

dl.defs { margin: 2rem 0; display: grid; gap: 1.5rem; }
dl.defs > div { display: grid; gap: 0.35rem; }
dl.defs dt {
  font: 600 0.78rem/1.4 var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gold-ink);
}
dl.defs dd { margin: 0; }
dl.refusals dt { color: var(--fg-strong); }

aside.note {
  margin: 2.2rem 0;
  padding: 0.15rem 0 0.15rem 1.4rem;
  border-left: 2px solid var(--gold-ink);
  font-size: 0.95rem;
  color: var(--muted);
}
aside.note p:last-child { margin-bottom: 0; }
aside.note strong, aside.note b { color: var(--fg); }

.reads { font-size: 0.95rem; color: var(--muted); }

/* ── The seats switch ───────────────────────────────────────────────────── */

.seats { margin: 2rem 0 2.4rem; }
.switch { display: inline-flex; border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; }
.switch button {
  font: 400 0.82rem/1 var(--mono);
  padding: 0.5rem 1.1rem;
  background: none;
  border: 0;
  border-right: 1px solid var(--rule);
  color: var(--muted);
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.switch button:last-child { border-right: 0; }
.switch button:hover { color: var(--fg); }
.switch button[aria-pressed="true"] {
  background: var(--gold);
  color: #0c0c0e;
  font-weight: 600;
}

.seat-facts { margin: 1.6rem 0 0; display: grid; gap: 0; }
.seat-facts > div {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: 0 1.4rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rule-soft);
}
.seat-facts > div:first-child { border-top: 1px solid var(--rule); }
.seat-facts dt {
  font: 400 0.72rem/1.9 var(--mono);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
.seat-facts dd { margin: 0; font-size: 0.97rem; }
.seat-facts .fig { font-family: var(--mono); font-weight: 600; color: var(--gold-ink); }
.seat-foot { margin: 1rem 0 0; font-size: 0.92rem; color: var(--muted); }

.seats[data-mode="pair"] [data-when="panel"] { display: none; }
.seats[data-mode="panel"] [data-when="pair"] { display: none; }

/* ── Citation ───────────────────────────────────────────────────────────── */

details.cite {
  margin: 2.4rem 0 0;
  border-top: 1px solid var(--rule-soft);
  padding-top: 1.1rem;
}
details.cite summary {
  font: 400 0.82rem/1 var(--mono);
  color: var(--muted);
  cursor: pointer;
}
details.cite summary:hover { color: var(--fg); }
details.cite pre { margin-top: 1.2rem; font-size: 0.76rem; color: var(--muted); }

/* ── Footer and status bar ──────────────────────────────────────────────── */

footer {
  margin-top: 6.5rem;
  padding-top: 2.2rem;
  border-top: 1px solid var(--rule);
  font: 400 0.82rem/1.8 var(--mono);
  color: var(--muted);
  max-width: var(--bleed);
}
footer p { margin: 0 0 0.5rem; }
.foot-mark { color: var(--gold-ink); font-weight: 600; letter-spacing: 0.08em; }
.foot-mark .scales { margin-right: 0.35em; }
.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 2rem 3rem;
  align-items: start;
}
.contact ul { list-style: none; margin: 0; padding: 0; }
.contact li { display: flex; gap: 0.6rem; }
.contact li::before { content: "\25B8"; color: var(--gold-ink); }
.contact-head {
  color: var(--fg);
  letter-spacing: 0.06em;
}
.contact a { color: var(--muted); }
.contact a:hover { color: var(--gold-ink); }
footer .set { margin-top: 1.2rem; color: var(--rule); }
:root[data-theme="light"] footer .set, :root:not([data-theme]) footer .set { color: var(--muted); opacity: 0.75; }

.statusbar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  max-width: none; /* it is a child of <main>, which is otherwise held to the measure */
  display: flex;
  align-items: center;
  gap: 1.6rem;
  padding: 0.45rem 1.4rem;
  background: var(--chrome);
  border-top: 1px solid var(--rule);
  font: 400 0.72rem/1.5 var(--mono);
  color: var(--muted);
  z-index: 5;
}
.statusbar button, .statusbar a {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  text-decoration: none;
  cursor: pointer;
  transition: color 120ms ease;
}
.statusbar button:hover, .statusbar a:hover { color: var(--fg); }
.statusbar .right { margin-left: auto; opacity: 0.7; }

/* ── Narrower ───────────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  /* minmax(0, 1fr), not 1fr: a bare `1fr` track refuses to shrink below the
     min-content width of what's in it, so one wide table was widening the whole
     document and clipping every paragraph on the page. */
  .page { grid-template-columns: minmax(0, 1fr); }
  .rail {
    position: sticky; top: 0; height: auto;
    flex-direction: row; align-items: center; gap: 1.4rem;
    padding: 0.7rem 1.2rem;
    border-right: 0; border-bottom: 1px solid var(--rule);
    background: var(--bg);
    overflow-x: auto;
    z-index: 6;
  }
  .rail nav ol { display: flex; gap: 1.2rem; }
  .rail nav a { display: block; white-space: nowrap; }
  .rail nav a i { margin-right: 0.4em; }
  .rail-foot { margin: 0 0 0 auto; display: flex; gap: 1rem; }
  .statusbar { display: none; }
  main { padding: 3.5rem 2rem 6rem; }
  .wordmark { font-size: min(21px, calc((100vw - 5rem) / 41)); }
}

@media (max-width: 700px) {
  body { font-size: 16px; }
  main { padding: 2.5rem 1.25rem 4rem; }
  .wordmark { display: none; }

  /* The rail becomes two rows rather than one long scrolling strip: the brand
     and the controls stay reachable on the first row, and only the section list
     scrolls. As one row, `margin-left: auto` pushed light/dark and github off
     the right edge of a phone, where nothing could reach them — the status bar
     that carries the same two controls is hidden at this width. */
  .rail { flex-wrap: wrap; overflow: visible; gap: 0.5rem 1rem; padding: 0.6rem 1.25rem; }
  .rail-head { order: 1; }
  .rail-foot { order: 2; margin: 0 0 0 auto; }
  .rail nav { order: 3; flex-basis: 100%; overflow-x: auto; }
  .rail nav ol { gap: 1.1rem; padding-bottom: 0.15rem; }

  /* Wide evidence scrolls inside its own box instead of widening the page.
     Terminal stills keep their natural size and pan — shrunk to 350px the text
     in them is unreadable, which makes them decoration rather than evidence. */
  .scroll { overflow-x: auto; }
  .scroll table.data { min-width: 26rem; }
  .shot { overflow-x: auto; }
  .shot img { width: auto; max-width: none; }
  .shot figcaption { position: sticky; left: 0; }
  /* A screenshot cut off at the right edge reads as broken unless you are told
     it moves. The hero recording is not clipped, so it says nothing. */
  .shot:not(.hero-shot) figcaption::after {
    content: " \2194 swipe";
    color: var(--gold-ink);
    white-space: nowrap;
  }

  /* The recording is the exception: it is the first thing on the page and it is
     motion, not fine print, so it scales to fit rather than asking for a swipe. */
  .hero-shot { overflow-x: visible; }
  .hero-shot img { width: 100%; }

  /* Stacked as blocks, not flex items. As a flex item the install panel kept
     `min-width: auto` and sized itself to the longest line of the git clone
     command — 451px inside a 350px column — and dragged the document with it. */
  .hero-act { display: block; }
  .hero-act .panel { flex: none; width: auto; min-width: 0; margin: 0 0 1.6rem; }
  .hero-side { justify-items: stretch; }

  /* The install commands wrap rather than scroll. Everywhere else a sideways
     scroll preserves column alignment that wrapping would scramble, but the
     first thing a reader is asked to copy should not be cut off mid-URL. */
  .hero-act .panel pre { white-space: pre-wrap; overflow-wrap: anywhere; }

  h1 { font-size: clamp(2rem, 8.4vw, 2.6rem); }
  h1 br { display: none; }
  .panel { padding: 1.3rem 1rem 1.15rem; min-width: 0; }
  .repo { flex-wrap: wrap; gap: 0.45rem 0.55rem; font-size: 0.78rem; }
  .repo .counts { padding-left: 0.55rem; }
  .lockup {
    display: block; margin: 0;
    font: 600 clamp(1.05rem, 5.2vw, 1.5rem)/1.2 var(--mono);
    color: var(--gold);
    letter-spacing: 0.02em;
  }
  h1 { margin-top: 1.8rem; }
  .foot-grid { grid-template-columns: 1fr; }
  .seat-facts > div { grid-template-columns: 1fr; gap: 0.3rem; }
  table.stages tbody th, table.cmds tbody th { white-space: normal; }
  section { margin-top: 4.5rem; }
}