/* Layout: a handheld screen. Four shades only, like an LCD. Light = pea-soup LCD, dark = phosphor terminal. Every block is a pixel-framed window; menus use a ▶ cursor, speech uses a dialog box with a ▼. Models are told apart by glyph, not hue. */
:root {
  --bg: #cfdaa8;      /* LCD off */
  --panel: #e3eac4;   /* lit window */
  --ink: #122b17;     /* darkest shade */
  --mid: #3d6231;     /* shade 2 */
  --soft: #93ab6b;    /* shade 3 */
  --f-pixel: "Press Start 2P", "Courier New", monospace;
  --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --px: 3px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #080e09; --panel: #0e1810; --ink: #b6e39c; --mid: #6e9f58; --soft: #2a4527; color-scheme: dark; }
}
:root[data-theme="dark"] { --bg: #080e09; --panel: #0e1810; --ink: #b6e39c; --mid: #6e9f58; --soft: #2a4527; color-scheme: dark; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  background-color: var(--bg); color: var(--ink); font-family: var(--f-mono); font-size: 16px; line-height: 1.65;
  background-image: radial-gradient(color-mix(in srgb, var(--soft) 50%, transparent) 1px, transparent 1.2px); background-size: 6px 6px; background-attachment: fixed;
}
.wrap { max-width: 1100px; margin: 0 auto; padding-inline: 18px; }
a { color: var(--ink); }
:focus-visible { outline: var(--px) dashed var(--ink); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--f-pixel); font-weight: 400; line-height: 1.5; margin: 0; text-wrap: balance; }
p { margin: 0; }
::selection { background: var(--ink); color: var(--panel); }

/* Pixel window: double frame with notched corners */
.win {
  background: var(--panel); border: var(--px) solid var(--ink);
  box-shadow: inset 0 0 0 var(--px) var(--panel), inset 0 0 0 calc(var(--px) * 2) var(--mid), 6px 6px 0 var(--soft);
  padding: 22px 24px;
}
.label { font-family: var(--f-mono); font-size: .76rem; font-weight: 600; letter-spacing: .08em; color: var(--mid); text-transform: uppercase; }
.inv { background: var(--ink); color: var(--panel); padding: 2px 6px; }
.blink { animation: none; }
@media (prefers-reduced-motion: no-preference) {
  .blink { animation: blink 1s steps(1) infinite; }
  @keyframes blink { 50% { opacity: 0; } }
}

/* Status bar */
.bar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: var(--ink); color: var(--panel); }
.bar .wrap { display: flex; align-items: center; gap: 20px; padding-block: 10px; }
.bar a { color: var(--panel); text-decoration: none; }
.brand { font-family: var(--f-pixel); font-size: .78rem; display: flex; gap: 10px; align-items: center; }
.brand .sq { width: 12px; height: 12px; background: var(--panel); display: inline-block; }
.bar nav { margin-left: auto; display: flex; gap: 18px; align-items: center; font-size: .88rem; }
.bar nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.bar nav .follow { background: var(--panel); color: var(--ink); padding: 3px 10px; font-weight: 700; }
.brand, .bar nav a { white-space: nowrap; }
@media (max-width: 720px) { .bar .wrap { gap: 10px; padding-inline: 12px; } .bar nav { gap: 12px; font-size: .82rem; } .brand { font-size: .6rem; gap: 7px; } .bar nav .follow { display: none; } }
@media (max-width: 380px) { .brand span:not(.sq) { display: none; } }

/* Hero */
.hero { padding-block: 48px 20px; display: grid; gap: 28px; }
.title-card { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
@media (max-width: 820px) { .title-card { grid-template-columns: 1fr; } }
.screen-title { display: grid; gap: 22px; align-content: start; }
.loc { justify-self: start; font-family: var(--f-pixel); font-size: .75rem; padding: 10px 14px; }
.screen-title h1 { font-size: clamp(1.5rem, 4.2vw, 2.7rem); line-height: 1.35; }
.dialog { position: relative; font-size: 1.08rem; line-height: 1.75; padding-right: 44px; }
.dialog .next { position: absolute; right: 18px; bottom: 14px; font-size: .9rem; }
.dialog b { font-weight: 700; }
.menu { display: grid; gap: 4px; align-content: start; padding-block: 18px; }
.menu .label { margin-bottom: 8px; }
.menu a { display: flex; gap: 12px; align-items: baseline; text-decoration: none; font-family: var(--f-pixel); font-size: .78rem; padding: 10px 8px; line-height: 1.4; }
.menu a::before { content: "▶"; visibility: hidden; font-family: var(--f-mono); font-size: 1rem; }
.menu a:hover::before, .menu a:focus-visible::before, .menu a.sel::before { visibility: visible; }
.menu a:focus-visible { outline: none; background: var(--bg); }
.menu .hint { font-size: .78rem; color: var(--mid); margin-top: 10px; padding-left: 8px; }

/* Route map */
.map { padding: 0; overflow: hidden; }
.map-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 16px 22px 0; }
.map svg { display: block; width: 100%; height: auto; }
.map-list { display: none; list-style: none; margin: 0; padding: 12px 18px 18px; font-size: .9rem; }
.map-list li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; padding-block: 6px; border-bottom: 2px dotted var(--soft); }
.map-list li.dim { color: var(--mid); }
.map-list .n { font-family: var(--f-pixel); font-size: .6rem; padding-top: 4px; }
.map-list .who { font-weight: 700; letter-spacing: .1em; }
@media (max-width: 680px) { .map svg { display: none; } .map-list { display: block; } }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .85rem; }
.g { font-weight: 700; }

/* Sections */
main { display: grid; }
.sec { padding-block: 72px 0; display: grid; gap: 26px; }
.sec-head { display: grid; gap: 14px; max-width: 720px; }
.sec-head h2 { font-size: clamp(1.1rem, 2.8vw, 1.6rem); line-height: 1.55; }
.sec-head p { color: var(--mid); }

/* Race */
.race { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 26px; align-items: start; }
@media (max-width: 860px) { .race { grid-template-columns: 1fr; } }
.lcd { background: var(--ink); padding: 14px; clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px); display: grid; gap: 10px; min-width: 0; }
.lanes { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; aspect-ratio: 3 / 2; position: relative; }
.lanes > div { background: var(--panel); background-image: radial-gradient(var(--soft) 1px, transparent 1.2px); background-size: 4px 4px; padding: 10px 12px; display: flex; flex-direction: column; justify-content: space-between; font-size: .85rem; font-weight: 700; }
.lanes .ex { font-weight: 400; font-size: .75rem; color: var(--mid); background: var(--panel); justify-self: start; align-self: flex-start; padding: 0 4px; }
.lanes .nm { background: var(--panel); align-self: flex-start; padding: 0 4px; }
.play { position: absolute; inset: 0; margin: auto; width: fit-content; height: fit-content; }
.lcd-foot { display: flex; justify-content: space-between; align-items: center; color: var(--panel); font-size: .78rem; flex-wrap: wrap; gap: 8px; }
.btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-mono); font-weight: 700; font-size: .92rem; line-height: 1.4; padding: 12px 16px; text-decoration: none; border: var(--px) solid var(--ink); background: var(--ink); color: var(--panel); cursor: pointer; box-shadow: 4px 4px 0 var(--soft); }
.btn:hover { transform: translate(1px, 1px); box-shadow: 3px 3px 0 var(--soft); }
.btn.ghost { background: var(--panel); color: var(--ink); }
.results { display: grid; gap: 16px; }
.places { list-style: none; margin: 0; padding: 0; display: grid; }
.places li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; padding-block: 10px; border-top: 2px dotted var(--soft); align-items: baseline; }
.places .pos { font-family: var(--f-mono); font-weight: 700; }
.places .who { font-weight: 700; }
.places .who small { display: block; font-weight: 400; color: var(--mid); font-size: .82rem; }
.places .cost { text-align: right; font-variant-numeric: tabular-nums; }
.places .cost small { display: block; color: var(--mid); font-size: .75rem; }

/* Board */
.board { padding: 0; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 720px; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: 14px 18px; white-space: nowrap; }
th { font-family: var(--f-mono); font-weight: 600; font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; color: var(--mid); border-bottom: var(--px) solid var(--ink); padding-top: 20px; }
tbody tr + tr td { border-top: 2px dotted var(--soft); }
tbody tr:hover td { background: var(--bg); }
td.r, th.r { text-align: right; }
.meter { letter-spacing: .05em; font-size: 1rem; }
.meter .off { color: var(--soft); }
.best { font-family: var(--f-mono); font-weight: 700; font-size: .66rem; margin-left: 8px; vertical-align: 2px; }
.note { font-size: .85rem; color: var(--mid); }

/* Moments */
.talk { display: grid; gap: 22px; }
.speech { position: relative; display: grid; gap: 10px; padding-top: 28px; }
.speech .tag { position: absolute; top: -2px; left: 18px; transform: translateY(-50%); font-family: var(--f-mono); font-weight: 700; font-size: .78rem; padding: 7px 10px; background: var(--ink); color: var(--panel); }
.speech q { font-size: 1.18rem; line-height: 1.6; quotes: none; font-weight: 500; }
.speech .ctx { color: var(--mid); font-size: .92rem; padding-right: 40px; }
.speech .next { position: absolute; right: 20px; bottom: 14px; }
.speech .times { font-family: var(--f-pixel); font-size: .8rem; margin-left: 6px; }

/* How */
.how { padding: 8px 0; }
.how ol { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.how li { counter-increment: s; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; padding: 18px 24px; border-bottom: 2px dotted var(--soft); }
.how li:last-child { border-bottom: 0; }
.how li::before { content: "0" counter(s); font-family: var(--f-pixel); font-size: .75rem; padding-top: 5px; }
.how h3 { font-family: var(--f-mono); font-weight: 700; font-size: 1rem; margin-bottom: 4px; }
.how p { color: var(--mid); }
.vs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; }
@media (max-width: 760px) { .vs { grid-template-columns: 1fr; } }
.vs .them { border: var(--px) dashed var(--mid); padding: 22px 24px; display: grid; gap: 10px; }
.vs .them p { color: var(--mid); }
.vs .us { background: var(--ink); color: var(--panel); padding: 22px 24px; display: grid; gap: 10px; }
.vs h3 { font-family: var(--f-mono); font-weight: 700; font-size: 1rem; }

/* FAQ */
.faq { padding: 6px 0; max-width: 820px; }
.faq details { padding: 16px 24px; border-bottom: 2px dotted var(--soft); }
.faq details:last-child { border-bottom: 0; }
.faq summary { cursor: pointer; list-style: none; font-weight: 700; display: flex; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "▷"; }
.faq details[open] summary::before { content: "▼"; }
.faq details p { margin-top: 8px; padding-left: 26px; color: var(--mid); max-width: 64ch; }

/* End */
.end { padding-block: 80px 0; }
.end .win { display: grid; gap: 18px; justify-items: center; text-align: center; padding-block: 40px; }
.end h2 { font-size: clamp(1rem, 3vw, 1.5rem); }
.end p { color: var(--mid); max-width: 48ch; }
footer { padding-block: 56px 40px; font-size: .8rem; color: var(--mid); display: grid; gap: 6px; }

/* Recap */
.recap-top { padding-block: 40px 0; display: grid; gap: 22px; }
.back { font-family: var(--f-mono); font-weight: 600; font-size: .88rem; text-decoration: none; justify-self: start; }
.recap-top h1 { font-size: clamp(1.2rem, 3.6vw, 2.1rem); line-height: 1.5; }
.chart { padding: 14px; overflow-x: auto; }
.chart svg { display: block; min-width: 640px; width: 100%; height: auto; }
.log { font-size: .86rem; background: var(--bg); padding: 12px 14px; display: grid; gap: 4px; overflow-wrap: anywhere; }
.log .s { color: var(--mid); margin-right: 10px; }
.share { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; }
@media (max-width: 640px) { .share { grid-template-columns: 1fr; } }
.share pre { margin: 0; white-space: pre-wrap; font-family: var(--f-mono); font-size: .92rem; }

/* SVG theme classes: drawings at build time follow the page theme */
.f-ink { fill: var(--ink); } .f-mid { fill: var(--mid); } .f-soft { fill: var(--soft); } .f-panel { fill: var(--panel); }
.s-ink { stroke: var(--ink); } .s-soft { stroke: var(--soft); } .s-panel { stroke: var(--panel); }
svg .px { font-family: var(--f-pixel); } svg .mono { font-family: var(--f-mono); }

/* Proof: the race video first */
.proof { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 22px; align-items: center; }
@media (max-width: 760px) { .proof { grid-template-columns: 1fr; } }
.poster { position: relative; display: block; margin-bottom: 22px; border: var(--px) solid var(--ink); box-shadow: 6px 6px 0 var(--soft); line-height: 0; }
.poster img { width: 100%; height: auto; }
.play-badge { position: absolute; right: 14px; bottom: -22px; line-height: 1.4; font-family: var(--f-pixel); font-size: .72rem; padding: 12px 16px; background: var(--ink); color: var(--panel); box-shadow: 4px 4px 0 var(--soft); white-space: nowrap; }
.poster:hover .play-badge { transform: translate(1px, 1px); }
.proof-meta { display: grid; gap: 14px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.btn { min-height: 44px; }

/* Phone standings: one card per model instead of a sideways table */
.mcards { display: none; list-style: none; margin: 0; padding: 0; gap: 16px; }
.mcards li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; padding: 16px 18px; }
.mcards .rk { font-family: var(--f-pixel); font-size: .8rem; padding-top: 4px; }
.mcards dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin: 10px 0 0; font-size: .88rem; }
.mcards dt { color: var(--mid); font-size: .78rem; }
.mcards dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 720px) { .board { display: none; } .mcards { display: grid; } }

/* Method + evidence */
.method dl { display: grid; gap: 0; margin: 0; }
.method dl > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 14px; padding: 10px 0; border-bottom: 2px dotted var(--soft); }
@media (max-width: 560px) { .method dl > div { grid-template-columns: 1fr; gap: 2px; } }
.method dt { font-family: var(--f-mono); font-weight: 600; font-size: .8rem; color: var(--mid); padding-top: 2px; }
.method dd { margin: 0; overflow-wrap: anywhere; }
.method code { font-family: var(--f-mono); font-size: .88rem; background: var(--bg); padding: 1px 5px; }
.method .note { margin-top: 12px; }
.dl { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dl a { display: inline-flex; min-height: 44px; align-items: center; font-weight: 700; }

/* Race nav + archive */
.race-nav { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-block: 56px 0; }
.archive { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; }
.archive li { padding: 0; }
.archive a { display: grid; gap: 8px; padding: 18px 22px; text-decoration: none; }
.archive a:hover { background: var(--bg); }
.archive b { font-family: var(--f-pixel); font-size: .85rem; line-height: 1.5; }
.archive .note { white-space: pre-wrap; }
.chart { padding: 14px; overflow-x: auto; }
.chart svg { display: block; min-width: 640px; width: 100%; height: auto; }

/* What happened + play stats + video */
.happened { color: var(--ink) !important; font-size: 1.08rem; max-width: 70ch; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.stat { display: grid; gap: 10px; align-content: start; padding: 18px 20px; min-width: 0; }
.stat dl { display: grid; gap: 0; margin: 0; }
.stat dl > div { display: grid; gap: 1px; padding: 7px 0; border-bottom: 2px dotted var(--soft); }
.stat dt { font-family: var(--f-mono); font-weight: 600; font-size: .74rem; color: var(--mid); }
.stat dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.player { position: relative; aspect-ratio: 9 / 16; height: min(640px, 78vh); width: auto; max-width: 100%; justify-self: center; border: var(--px) solid var(--ink); box-shadow: 6px 6px 0 var(--soft); background: var(--ink); }
.player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* What stood out: a number first, then the story, then the model's own words */
.standouts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 30px 24px; }
.standout { position: relative; display: grid; gap: 10px; align-content: start; padding-top: 34px; min-width: 0; }
.standout .tag { position: absolute; top: -2px; left: 18px; transform: translateY(-50%); font-family: var(--f-mono); font-weight: 700; font-size: .78rem; padding: 7px 10px; background: var(--ink); color: var(--panel); }
.standout .big { font-family: var(--f-pixel); font-size: clamp(1.6rem, 4vw, 2.4rem); line-height: 1.2; }
.standout h3 { font-family: var(--f-mono); font-weight: 700; font-size: 1.1rem; line-height: 1.35; }
.standout .story { color: var(--mid); }
.standout blockquote { margin: 4px 0 0; padding: 10px 14px; background: var(--bg); border-left: var(--px) solid var(--ink); font-size: .95rem; }
.standout blockquote .mv { display: block; font-family: var(--f-mono); font-weight: 600; font-size: .74rem; color: var(--mid); margin-bottom: 6px; }
.player.wide { aspect-ratio: 16 / 9; height: auto; width: 100%; justify-self: stretch; }
.trailer { margin: 0; display: grid; gap: 10px; }
@media (max-width: 760px) { .player:not(.wide) { height: auto; width: min(100%, 360px); } }

/* Confidence beside every result */
.sample { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: baseline; font-size: .9rem; color: var(--mid); }
.sample .inv { font-family: var(--f-mono); font-weight: 700; font-size: .74rem; letter-spacing: .04em; padding: 3px 8px; }
.rule-line { font-size: .92rem; max-width: 75ch; }
.flag { font-size: .8rem; font-weight: 700; color: var(--ink); }
.jump { display: flex; flex-wrap: wrap; gap: 6px; }
.jump a { font-family: var(--f-mono); font-weight: 600; font-size: .8rem; text-decoration: none; padding: 8px 10px; min-height: 32px; border: 2px solid var(--ink); background: var(--panel); }
.jump a:hover { background: var(--ink); color: var(--panel); }
[id] { scroll-margin-top: 70px; }
.board td:nth-child(2) { white-space: normal; min-width: 210px; max-width: 290px; }

/* Lab pages: still frames from our own runs */
.lab-fig { margin: 0 0 18px; display: grid; gap: 10px; }
.lab-fig img { width: 100%; height: auto; display: block; border: var(--px) solid var(--ink); box-shadow: 6px 6px 0 var(--soft); }

/* Battle Bench frames */
.stills { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; }
.stills li { display: grid; gap: 6px; }
.stills img { width: 100%; height: auto; aspect-ratio: 3 / 2; image-rendering: pixelated; border: var(--px) solid var(--ink); background: var(--panel); }
.turns { table-layout: fixed; width: 100%; }
.turns th, .turns td { padding: 10px 12px; white-space: normal; vertical-align: top; }
.turns th:nth-child(1), .turns td:nth-child(1) { width: 2.2em; }
.turns th:nth-child(2), .turns td:nth-child(2) { width: 12.5em; }
.turns th:nth-child(4), .turns td:nth-child(4) { width: 6em; }
.turns th:nth-child(5), .turns td:nth-child(5) { width: 6.5em; }
.turns td:nth-child(3) { overflow-wrap: anywhere; }
.turns .who { display: none; color: var(--mid); }
.turns tr.bad td { background: var(--soft); }
.teams td { white-space: normal; vertical-align: top; }
@media (max-width: 720px) {
  .turns th:nth-child(2), .turns td:nth-child(2), .turns th:nth-child(4), .turns td:nth-child(4), .turns th:nth-child(5), .turns td:nth-child(5) { display: none; }
  .turns .who { display: inline; }
  .teams th:nth-child(5), .teams td:nth-child(5), .teams th:nth-child(6), .teams td:nth-child(6) { display: none; }
  .teams { table-layout: fixed; width: 100%; }
  .teams th:nth-child(3), .teams td:nth-child(3), .teams th:nth-child(4), .teams td:nth-child(4) { width: 4.2em; }
}
details.note summary { cursor: pointer; }
details.note ol { padding-left: 1.4em; }

/* Bench tables stay on phones (no card fallback); they wrap instead of scrolling */
@media (max-width: 720px) {
  .board.keep { display: block; }
  .board.keep table { min-width: 0; width: 100%; table-layout: fixed; }
  .games th:nth-child(3), .games td:nth-child(3), .games th:nth-child(5), .games td:nth-child(5), .games th:nth-child(6), .games td:nth-child(6) { display: none; }
  .games th:nth-child(1), .games td:nth-child(1) { width: 6.5em; }
  .board.keep th, .board.keep td { white-space: normal; padding: 10px 8px; font-size: .86rem; overflow-wrap: break-word; }
  .board.keep th { font-size: .7rem; line-height: 1.5; }
  .ftab th:first-child { width: 32%; }
  .turns th:nth-child(4), .turns td:nth-child(4) { width: 5.5em; }
  .board.keep .h2h th, .board.keep .h2h td { font-size: .66rem; padding: 8px 4px; }
}

/* Findings-first home */
.hero { padding-block: 48px 8px; display: grid; gap: 22px; max-width: 860px; }
.hero h1 { font-size: clamp(1.4rem, 4vw, 2.5rem); line-height: 1.4; }
.lessons { display: grid; gap: 24px; }
.lesson { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 28px; align-items: center; }
.lesson-text { display: grid; gap: 12px; align-content: start; }
@media (max-width: 760px) { .lesson { grid-template-columns: 1fr; gap: 18px; } }
.lesson h3 { font-family: var(--f-mono); font-weight: 700; font-size: 1.12rem; line-height: 1.35; }
.lesson h3 a { text-decoration: none; }
.lesson h3 a:hover { text-decoration: underline; text-underline-offset: 4px; }
.lesson .fig { box-shadow: none; border: 0; padding: 0; background: none; }
.lesson .more { font-weight: 700; font-size: .92rem; }
.more-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px; }
.more-list li { padding: 0; }
.more-list a { display: grid; gap: 6px; padding: 18px 22px; text-decoration: none; height: 100%; }
.more-list a:hover { background: var(--bg); }
.row { align-items: center; }

/* Charts drawn at build time */
.fig { margin: 0; display: grid; gap: 10px; }
.fig svg { display: block; width: 100%; height: auto; max-width: 600px; }
.fig svg.narrow { display: none; }
@media (max-width: 560px) { .fig svg.wide { display: none; } .fig svg.narrow { display: block; } }
.fig text { font-size: 13px; } .fig text.sm { font-size: 11px; fill: var(--mid); }
.fig rect:hover { opacity: .75; }

/* Thinks / does / the game */
.tri { margin: 0; display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 0; padding: 0; }
.tri > figcaption { grid-column: 1 / -1; padding: 14px 22px 0; }
.tri > div { padding: 14px 22px 20px; display: grid; gap: 6px; align-content: start; }
.tri > div + div { border-left: 2px dotted var(--soft); }
.tri > div:first-of-type p { font-size: 1.05rem; font-weight: 500; }
.tri-k { font-weight: 700; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mid); }
.tri > a { grid-column: 1 / -1; padding: 0 22px 16px; }
.tri4 { grid-template-columns: 1.3fr 1.3fr .7fr 1fr; }
@media (max-width: 720px) { .tri, .tri4 { grid-template-columns: 1fr; } .tri > div + div { border-left: 0; border-top: 2px dotted var(--soft); } }
.foot-nav { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 10px; font-weight: 700; color: var(--ink); }

/* Findings as a research note */
.byline { color: var(--mid); font-size: .92rem; }
.note-page .sec > h2 { font-size: clamp(1.1rem, 2.8vw, 1.6rem); line-height: 1.55; }
.prose { display: grid; gap: 14px; max-width: 72ch; }
.prose p, .prose li { line-height: 1.7; }
.prose ul { margin: 0; padding-left: 1.2em; display: grid; gap: 8px; }
.key { list-style: none; padding: 18px 22px !important; background: var(--panel); border: var(--px) solid var(--ink); box-shadow: 6px 6px 0 var(--soft); }
.key li { padding-left: 1.4em; text-indent: -1.4em; font-weight: 500; }
.key li::before { content: "▶ "; font-size: .8em; }
.sec-p { color: var(--mid); max-width: 72ch; }
.more-list a span:not(.note) { color: var(--ink); }
.prose h3 { font-family: var(--f-mono); font-weight: 700; font-size: 1rem; margin-top: 8px; }

/* What I'd change */
.ship { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 22px; counter-reset: ship; }
.ship li { display: grid; gap: 10px; align-content: start; counter-increment: ship; }
.ship h3 { font-family: var(--f-mono); font-weight: 700; font-size: 1.05rem; line-height: 1.35; }
.ship h3::before { content: counter(ship) ". "; }
.ship .metric { font-size: .92rem; border-top: 2px dotted var(--soft); padding-top: 10px; }
.vs-grid td b.lost { color: var(--mid); }
.vs-grid td:first-child { white-space: normal; }
.vs-charts { display: grid; gap: 18px; max-width: 760px; }
.vs-charts .fig svg { max-width: none; }
.vs-charts .fig { padding: 18px; }
.fig polygon:hover, .fig circle:hover { opacity: .75; }
.lab-shot { display: block; }
.lab-shot img { width: 100%; height: auto; display: block; border: var(--px) solid var(--ink); }
@media (max-width: 720px) { .lesson { grid-template-columns: 1fr; } }

/* Items section figures: claim title, drawing, note */
.ifig { margin: 18px 0; padding: 18px; display: grid; gap: 12px; }
.ifig h3 { margin: 0; font-size: 1rem; line-height: 1.4; }
.ifig svg { display: block; width: 100%; height: auto; max-width: 560px; overflow: visible; }
.ifig details summary { cursor: pointer; font-size: .85rem; color: var(--mid); }