/* Reading room. Graphite chrome with one amber accent, a cool light surface for reading.
   Hanken Grotesk for structure and labels, Source Serif 4 for reading, IBM Plex Mono only for dates, numbers
   and short overlay labels on the graphite band.
   Data figures use one blue for context, good and the real result, and one red for problems and false values. */
:root {
  color-scheme: light;
  /* Chrome: header band, page heads, footer, dark panels */
  --night: #0f151c;
  --night-2: #18212b;
  --night-3: #243040;
  --night-line: #2a3543;
  --scale: #34414f;
  --scale-2: #26313d;
  --on-night: #eef2f5;
  --on-night-2: #aebbc7;
  /* The accent. Luminous amber on dark only; the deeper tones carry it on light. */
  --amber: #f2b13e;
  --amber-deep: #c17f12;
  --amber-ink: #8a5a00;
  --amber-soft: #fcefd2;
  --highlight: #fbe1a6;
  /* Reading surface */
  --bg: #f5f7f8;
  --surface: #ffffff;
  --panel: #edf0f3;
  --stone: #e5e9ed;
  --rule: #dce2e7;
  --rule-2: #c0c9d2;
  --ink: #141b23;
  --ink-2: #37414d;
  --ink-3: #4f5a67;
  --ink-4: #626d7a;
  /* Data. Blue is clearly darker than red (L 28 vs 44), so the pair also separates by lightness
     for color-blind readers and in grayscale. */
  --sig: #14446e;
  --sig-ink: #14446e;
  --sig-soft: #e4edf5;
  --sig-2: #c5d8e9;
  --sig-3: #8db2d2;
  --sig-4: #376c9c;
  --sig-on: #dfeaf4;
  --on-fill: #ffffff;  /* text on a filled blue or red mark */
  --red: #c2331d;
  --red-soft: #fcebe6;
  --ctx: var(--sig);
  --emph: var(--red);
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --col: 680px;
  --page: 780px;
}
* { box-sizing: border-box; }
html { background: var(--bg); scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--serif); font-size: 19px; line-height: 1.65; font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  min-height: 100vh; display: flex; flex-direction: column;
}
#main { flex: 1 0 auto; }
/* Even line lengths for headings and short links; fewer one-word last lines in prose */
h1, h2, h3, .tagline, .dek, .series-next a, .series-next.soon b, .papers .pt { text-wrap: balance; }
/* No one-word last lines in short text blocks; long-form paragraphs keep the normal, even rag. */
.entry-sum, figcaption, .timeline .note, .tile .l, .callout p, .tldr li, .post-note p { text-wrap: pretty; }
a { color: inherit; text-decoration-color: var(--amber-deep); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
a:hover { color: var(--amber-ink); text-decoration-thickness: 2px; }
::selection { background: var(--highlight); color: var(--ink); }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--sig); outline-offset: 2px; border-radius: 2px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 50; background: var(--surface); color: var(--ink); padding: 6px 10px; font-family: var(--sans); font-size: 14px; }

/* ---------- Chrome: header band ---------- */
.site-header { background: var(--night); color: var(--on-night); border-bottom: 1px solid var(--night-line); }
.site-header .in { max-width: var(--page); margin: 0 auto; padding: 15px 16px; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-family: var(--sans); font-size: 14.5px; }
.site-header.wide .in { max-width: 1060px; }
.brand { display: inline-flex; align-items: center; gap: 12px; font-weight: 600; text-decoration: none; letter-spacing: -.005em; color: var(--on-night); }
.brand:hover { color: var(--on-night); }
.mark { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 7px; background: var(--night-3); color: var(--amber); font-family: var(--sans); font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; }
.site-header nav { display: flex; gap: 24px; }
.site-header nav a { text-decoration: none; color: var(--on-night-2); font-weight: 500; padding: 4px 0; }
.site-header nav a:hover { color: var(--on-night); }
.site-header nav a[aria-current] { color: var(--on-night); box-shadow: inset 0 -2px 0 var(--amber); }
.site-header :focus-visible, .site-footer :focus-visible { outline-color: var(--amber); }

.main { max-width: var(--page); margin: 0 auto; padding: 0 16px 80px; }

/* Page heads on every page (home, About, Writing, each post, 404) continue the header band, full width. */
.hero-home, .main > .page-head, .post-band, .wrap > .post-header {
  position: relative; background: var(--night); color: var(--on-night);
  border-image: conic-gradient(var(--night) 0 0) fill 0 // 0 100vmax;
}
/* A fine scale along the bottom edge of the band, as on a viewer. It starts and ends on a major tick. */
.hero-home::after, .main > .page-head::after, .post-band::after, .wrap > .post-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 9px; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, var(--scale) 0 1px, transparent 1px 60px) left bottom / 100% 9px no-repeat,
    repeating-linear-gradient(90deg, var(--scale-2) 0 1px, transparent 1px 12px) left bottom / 100% 4px no-repeat;
  box-shadow: inset -1px 0 0 var(--scale);
}
.hero-home :focus-visible, .page-head :focus-visible, .post-band :focus-visible, .wrap > .post-header :focus-visible { outline-color: var(--amber); }

/* ---------- Home ---------- */
.hero-home { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 34px; align-items: center; padding: 44px 0 54px; }
/* A plain portrait: soft corners and a hairline edge so the rounded shape reads on the band (no offset frame) */
.avatar { display: block; width: 136px; height: 170px; object-fit: cover; border-radius: 10px; background: var(--night-2); outline: 1px solid rgb(255 255 255 / .08); outline-offset: -1px; }
/* Eyebrows only appear on the graphite band, as an on-screen overlay label. */
.eyebrow { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--amber); margin: 0 0 10px; }
.eyebrow a:hover { color: var(--on-night); }
h1 { font-family: var(--sans); font-weight: 650; font-size: 52px; line-height: 1.04; letter-spacing: -.024em; margin: 0; }
h1 .creds { color: var(--on-night-2); font-weight: 400; letter-spacing: -.012em; }
/* The subtitle under the name: upright serif in a softer tone, set against the bold sans name. */
.tagline { font-family: var(--serif); font-style: normal; font-size: 21px; font-weight: 400; color: var(--on-night-2); margin: 14px 0 0; line-height: 1.4; max-width: 34em; }
.tagline .nb { white-space: nowrap; }
.about-short { margin-top: 40px; }
.about-short p { margin: 0 0 16px; max-width: 37em; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 24px; font-family: var(--sans); font-size: 14.5px; }
.btn { display: inline-block; padding: 10px 18px; border-radius: 4px; background: var(--night); color: var(--on-night); text-decoration: none; font-weight: 600; }
.btn:hover { background: var(--night-3); color: var(--on-night); }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--rule-2); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); }
.social { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-left: 8px; }
.social a { color: var(--ink-3); text-decoration: none; }
.social a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--amber-deep); }

/* Section heads */
.block { margin-top: 68px; }
.block-head { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 1px solid var(--ink); padding-bottom: 10px; margin-bottom: 4px; }
.block-head h2 { font-family: var(--sans); font-size: 26px; font-weight: 600; letter-spacing: -.015em; margin: 0; }
/* A short amber segment on the heading rule, like the lit tab of a light box */
.block-head::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 40px; height: 2px; background: var(--amber-deep); }
.block-head a { font-family: var(--sans); font-size: 14px; font-weight: 500; text-decoration: none; color: var(--ink-2); white-space: nowrap; }
.block-head a:hover { color: var(--amber-ink); text-decoration: underline; }
.block-sub { font-family: var(--sans); font-size: 15px; color: var(--ink-3); margin: 12px 0 0; }

/* Writing entries */
.entry { display: grid; grid-template-columns: minmax(0, 1fr) 176px; gap: 28px; padding: 26px 0; border-bottom: 1px solid var(--rule); align-items: start; }
.entry-meta { font-family: var(--mono); font-size: 12px; color: var(--ink-3); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 8px; }
.chip { font-family: var(--sans); font-size: 12px; font-weight: 500; line-height: 1.55; padding: 0 7px; border-radius: 3px; background: var(--surface); color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--rule-2); text-decoration: none; white-space: nowrap; }
a.chip:hover { color: var(--ink); background: var(--amber-soft); box-shadow: inset 0 0 0 1px var(--amber-deep); }
.entry h3 { font-family: var(--sans); font-size: 24px; font-weight: 600; line-height: 1.2; letter-spacing: -.015em; margin: 0 0 8px; }
.entry h3 a { text-decoration: none; }
.entry h3 a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--amber-deep); }
.entry-sum { margin: 0; color: var(--ink-2); font-size: 17.5px; line-height: 1.55; }
.entry-thumb img { display: block; width: 100%; height: auto; border-radius: 3px; border: 1px solid var(--rule); }

/* ---------- Timelines: dates on a scale at left, the record at right ---------- */
.timeline { --dw: 140px; --rx: 158px; --cx: 182px; list-style: none; margin: 24px 0 0; padding: 0; font-family: var(--sans); font-size: 15px; line-height: 1.5; }
.timeline > li { position: relative; padding: 0 0 30px var(--cx); }
.timeline > li:last-child { padding-bottom: 4px; }
.timeline > li::before { content: ""; position: absolute; left: var(--rx); top: 0; bottom: 0; width: 1px; background: var(--rule-2); }
.timeline > li:first-child::before { top: 10px; }
.timeline > li:last-child::before { bottom: auto; height: 10px; }
.timeline > li:only-child::before { display: none; }
.timeline > li::after { content: ""; box-sizing: border-box; position: absolute; left: calc(var(--rx) - 5px); top: 6px; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--ink-3); background: var(--bg); }
.timeline > li.now::after { left: calc(var(--rx) - 6px); top: 5px; width: 13px; height: 13px; border: 2px solid var(--amber-deep); background: var(--amber); }
.timeline .when { position: absolute; left: 0; top: 3px; width: var(--dw); text-align: right; font-family: var(--mono); font-size: 11.5px; line-height: 1.5; letter-spacing: .01em; text-transform: uppercase; color: var(--ink-3); }
.timeline > li.now > .when { color: var(--ink); font-weight: 500; }
.timeline b { font-weight: 600; }
.timeline > li > b { font-size: 16px; letter-spacing: -.005em; }
.timeline .org { color: var(--ink-2); }
.timeline .place { display: block; font-size: 13.5px; color: var(--ink-3); margin-top: 1px; }
.timeline .note { display: block; color: var(--ink-2); font-size: 14.5px; margin-top: 6px; max-width: 40em; }
.timeline .note a { color: var(--ink-2); }
/* Several roles at one organization: each role is a tick on the scale, with its own dates in the date column. */
.timeline .roles { list-style: none; margin: 10px 0 0; padding: 0; }
.timeline .roles > li { position: relative; padding: 4px 0; font-size: 14.5px; line-height: 22px; }
.timeline .roles > li::before { content: ""; position: absolute; left: calc(var(--rx) - var(--cx) - 4px); top: 14px; width: 9px; height: 2px; background: var(--ink-4); }
.timeline .roles > li.cur::before { background: var(--amber-deep); }
.timeline .roles b { font-weight: 500; color: var(--ink); }
.timeline .roles > li.cur b { font-weight: 600; }
.timeline .roles .dates { position: absolute; right: calc(100% + var(--cx) - var(--dw)); top: 7px; width: var(--dw); text-align: right; font-family: var(--mono); font-size: 11px; line-height: 16px; color: var(--ink-4); white-space: nowrap; text-transform: uppercase; }
.timeline .roles > li.cur .dates { color: var(--ink-2); }
/* When the last organization has several roles, the scale runs on to its last role tick and stops there.
   The spine runs to the bottom of the entry, and the last role covers the bit below its own tick,
   so the end stays on the tick however many lines the role takes. */
.timeline > li:last-child:has(> .roles)::before { height: auto; bottom: 0; }
.timeline > li:last-child > .roles > li:last-child::after { content: ""; position: absolute; left: calc(var(--rx) - var(--cx) - 1px); width: 3px; top: 16px; bottom: -4px; background: var(--bg); }

/* Talks: a dated card rather than a scale */
#talks .timeline > li { padding: 18px 20px 18px 22px; background: var(--surface); border: 1px solid var(--rule); border-left: 3px solid var(--amber-deep); border-radius: 3px; }
#talks .timeline > li::before, #talks .timeline > li::after { display: none; }
#talks .timeline .when { position: static; display: block; width: auto; text-align: left; margin-bottom: 6px; }
#talks .timeline .note { margin-top: 8px; font-size: 14px; }

/* Papers */
.papers { list-style: none; counter-reset: p; margin: 8px 0 0; padding: 0; }
.papers li { counter-increment: p; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px; padding: 20px 0; border-bottom: 1px solid var(--rule); }
.papers li::before { content: counter(p, decimal-leading-zero); font-family: var(--mono); font-size: 12px; font-weight: 500; color: var(--ink-3); padding-top: 4px; }
.papers .pt { font-family: var(--sans); font-size: 17.5px; line-height: 1.35; font-weight: 600; letter-spacing: -.005em; margin: 0 0 6px; }
.papers .pt a { text-decoration: none; }
.papers .pt a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--amber-deep); }
.papers .pa { font-family: var(--sans); font-size: 13.5px; color: var(--ink-3); margin: 0; }
.papers .pa b { color: var(--ink); font-weight: 600; }
.papers .pv { font-family: var(--sans); font-size: 13.5px; margin: 3px 0 0; color: var(--ink-2); }
.papers .pv i { font-family: var(--serif); font-style: italic; font-size: 14.5px; }
.more { font-family: var(--sans); font-size: 14px; margin: 14px 0 0; }

/* ---------- About and Writing heads ---------- */
.prose { margin-top: 40px; }
.prose p { margin: 0 0 18px; max-width: 37em; }
.page-head { padding: 44px 0 52px; }
.page-head .dek, .post-band .dek, .wrap > .post-header .dek { font-family: var(--serif); font-style: normal; font-size: 21px; line-height: 1.45; color: var(--on-night-2); margin: 14px 0 0; max-width: 34em; }
.plain { list-style: none; padding: 0; margin: 14px 0 0; font-family: var(--sans); font-size: 15px; line-height: 1.5; }
.plain li { padding: 12px 0; border-bottom: 1px solid var(--rule); }
.plain li b { font-weight: 600; }
.plain .muted { color: var(--ink-3); }

/* Writing index */
.tabs { display: flex; flex-wrap: wrap; gap: 6px 24px; margin: 30px 0 0; padding: 0; list-style: none; font-family: var(--sans); font-size: 14.5px; border-bottom: 1px solid var(--ink); }
.tabs button { background: none; border: 0; padding: 0 0 10px; font: inherit; color: var(--ink-3); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs button:hover { color: var(--ink); }
.tabs button[aria-pressed="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--amber-deep); }
.tabs .count { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); margin-left: 6px; font-weight: 400; }

/* Footer: a quiet status bar */
.site-footer { background: var(--night); margin-top: 24px; }
.site-footer .in { max-width: var(--page); margin: 0 auto; padding: 22px 16px 40px; font-family: var(--sans); font-size: 13.5px; color: var(--on-night-2); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; }
.site-footer.wide .in { max-width: 1060px; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 16px; }
.site-footer a { color: var(--on-night-2); text-decoration: none; }
.site-footer a:hover { color: var(--on-night); text-decoration: underline; text-decoration-color: var(--amber); }

/* 404: the same band as the other page heads */
.wrap { max-width: var(--page); margin: 0 auto; padding: 0 16px 80px; }
.wrap > .post-header { padding: 48px 0 56px; }
.kicker { font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--amber); margin: 0 0 10px; }
.wrap > .post-header .dek a { color: var(--on-night); text-decoration-color: var(--amber); }
.wrap > .post-header .dek a:hover { color: var(--on-night); }

/* ---------- Post ---------- */
.post-wrap { max-width: 1060px; margin: 0 auto; padding: 0 16px 80px; display: grid; grid-template-columns: minmax(0, var(--col)) 220px; column-gap: 72px; row-gap: 0; justify-content: center; }
/* The title sits on the graphite band; byline, notes and the reading column stay light. */
.post-band { grid-column: 1; padding: 42px 0 50px; }
.post-band .eyebrow a { color: inherit; }
.post-band h1 { font-size: 46px; line-height: 1.07; letter-spacing: -.026em; }
.post-band .dek { font-size: 21.5px; margin-top: 16px; max-width: none; }
.post-head { grid-column: 1; padding-top: 30px; }
.byline { display: flex; align-items: center; gap: 10px 12px; font-family: var(--sans); font-size: 14px; color: var(--ink-3); flex-wrap: wrap; }
.byline img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; }
.byline b { color: var(--ink); font-weight: 600; }
.byline a { text-decoration: none; }
.byline time, .byline span:last-child { font-family: var(--mono); font-size: 12.5px; }
.post-note { margin: 20px 0 0; padding: 14px 16px; background: var(--panel); border-radius: 4px; font-family: var(--sans); font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.post-note p { margin: 0 0 6px; }
.post-note p:last-child { margin: 0; }
/* Small uppercase labels on light: the sans, not mono, so they read as words rather than code. */
.post-note b, .toc .h, .tldr .lbl, .callout .lbl, .series .h, .versus .hd, .insert .hd, .statpanel .k, .series-next span, table.data th {
  font-family: var(--sans); font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.post-note b { color: var(--ink); margin-right: 6px; }
.post-note i { font-family: var(--serif); font-style: italic; font-size: 15px; }
.post-note .chips { display: inline-flex; flex-wrap: wrap; gap: 6px; vertical-align: 1px; }

.toc { grid-column: 2; grid-row: 2 / span 2; position: sticky; top: 24px; align-self: start; max-height: calc(100vh - 48px); overflow: auto; font-family: var(--sans); font-size: 13.5px; line-height: 1.45; margin-top: 36px; }
.toc .h { color: var(--ink-2); margin: 0 0 10px; }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--rule); }
.toc a { display: grid; grid-template-columns: 28px 1fr; padding: 5px 0 5px 12px; margin-left: -1px; border-left: 2px solid transparent; color: var(--ink-3); text-decoration: none; }
.toc a span { font-family: var(--mono); color: var(--ink-4); font-size: 11.5px; padding-top: 1px; }
.toc a:hover { color: var(--ink); }
.toc a.active { color: var(--ink); font-weight: 600; border-left-color: var(--amber-deep); }
.toc a.active span { color: var(--amber-ink); }
article { grid-column: 1; min-width: 0; }
article section { scroll-margin-top: 24px; }

/* Stat tiles */
.tiles { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; margin: 30px 0 8px; background: var(--surface); border: 1px solid var(--rule); border-radius: 4px; overflow: hidden; }
.tile { padding: 16px 16px 14px; }
.tile + .tile { border-left: 1px solid var(--rule); }
/* Headline numbers stay neutral: blue and red keep their meaning for the figures. */
.tile .v { font-family: var(--sans); font-weight: 650; font-size: 28px; letter-spacing: -.02em; line-height: 1.05; color: var(--ink); font-variant-numeric: tabular-nums lining-nums; }
.tile .l { font-family: var(--sans); font-size: 13px; color: var(--ink-3); line-height: 1.45; margin-top: 8px; }

.tldr .lbl, .callout .lbl { display: block; color: var(--ink-2); margin-bottom: 10px; }
.tldr { border: 1px solid var(--rule-2); border-top: 3px solid var(--night); border-radius: 3px; padding: 18px 24px 6px; margin: 22px 0 0; background: var(--surface); }
.tldr ul { font-size: 17.5px; padding-left: 1.1em; margin: 0 0 14px; list-style: square; }
.tldr li { margin-bottom: 10px; }
.tldr li::marker { color: var(--amber-deep); }

article h2 { font-family: var(--sans); font-size: 30px; line-height: 1.16; letter-spacing: -.02em; font-weight: 600; margin: 68px 0 18px; }
article h2 .n { display: inline-block; font-family: var(--mono); font-size: 12.5px; font-weight: 600; color: var(--amber); background: var(--night); border-radius: 3px; padding: 3px 7px; margin-right: 12px; vertical-align: 5px; letter-spacing: .04em; line-height: 1.4; }
article h3 { font-family: var(--sans); font-size: 18.5px; font-weight: 600; letter-spacing: -.01em; margin: 36px 0 10px; }
article p { margin: 0 0 18px; }
article strong { font-weight: 600; }
article ul, article ol { padding-left: 1.2em; margin: 0 0 20px; }
article li { margin: 0 0 10px; }
.num-list { counter-reset: n; list-style: none; padding-left: 0 !important; }
.num-list > li { counter-increment: n; position: relative; padding-left: 42px; }
/* Ordinal chips in the reading column are light, outlined in ink; graphite stays for the band and result panels. */
.num-list > li::before { content: counter(n); position: absolute; left: 0; top: 3px; width: 26px; height: 26px; border-radius: 3px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); font: 600 12.5px/26px var(--mono); text-align: center; }
.num-list .an { display: block; font-family: var(--sans); font-size: 14px; color: var(--ink-3); margin-top: 2px; }

.callout { border-left: 3px solid var(--amber-deep); background: var(--panel); padding: 14px 20px 4px; margin: 28px 0; font-family: var(--sans); font-size: 15.5px; line-height: 1.6; border-radius: 0 4px 4px 0; }
.callout p { margin-bottom: 12px; }
.callout.q p { font-family: var(--serif); font-size: 21px; font-weight: 600; line-height: 1.38; color: var(--ink); letter-spacing: -.005em; }

/* Figures */
figure { margin: 34px 0 38px; padding: 20px 22px 16px; background: var(--surface); border: 1px solid var(--rule); border-radius: 4px; }
figcaption { font-family: var(--sans); font-size: 13.5px; line-height: 1.55; color: var(--ink-3); margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); }
figcaption b { color: var(--ink); font-weight: 600; }
/* Images inside figures: a single image (.fig-img), a row of labelled images (.fig-row), or an inline SVG schematic (.fig-svg). */
.fig-img img, .fig-row img { display: block; width: 100%; height: auto; border-radius: 3px; background: var(--panel); }
.fig-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.fig-row > div { min-width: 0; }
.fig-row .lbl { display: block; margin-top: 7px; font-family: var(--sans); font-size: 13px; font-weight: 600; line-height: 1.35; color: var(--ink-2); }
.fig-row .lbl small { display: block; font-weight: 400; color: var(--ink-3); }
.fig-svg svg { display: block; width: 100%; height: auto; max-width: 720px; margin: 0 auto; font-family: var(--sans); }
figcaption .credit { display: block; margin-top: 6px; font-size: 12.5px; color: var(--ink-4); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-family: var(--sans); font-size: 13px; color: var(--ink-3); margin-top: 12px; }
.legend i { display: inline-block; width: 11px; height: 11px; border-radius: 2px; vertical-align: -1px; margin-right: 7px; }
.sw-ctx { background: var(--ctx); }
.sw-emph { background: var(--emph); }
.sw-ink { background: var(--night); }
.sw-frozen { background: var(--stone); box-shadow: inset 0 0 0 1px var(--rule-2); }
.sw-line { background: var(--sig); }  /* the hub's "physician has the edge" swatch: solid blue, as in Part 1 */

.sysmap { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: 44px; gap: 8px; font-family: var(--sans); font-size: 13.5px; line-height: 1.3; }
.sysmap .b { border-radius: 4px; padding: 9px 12px; display: flex; flex-direction: column; justify-content: flex-end; }
.sysmap .ops { background: var(--stone); color: var(--ink-2); font-weight: 500; }
.sysmap .edge { background: var(--sig); color: var(--on-fill); font-weight: 700; font-size: 15px; }
.sysmap .edge small { font-weight: 500; font-size: 12.5px; color: var(--sig-on); }
.sysmap .model { background: var(--night); color: var(--on-night); font-weight: 600; font-size: 12.5px; place-self: center; padding: 6px 12px; border-radius: 3px; }

.hbars { font-family: var(--sans); font-size: 13.5px; }
.hbars .grp { font-weight: 600; font-size: 13.5px; margin: 0 0 8px; color: var(--ink); }
.hbars .r { display: grid; grid-template-columns: 190px minmax(0, 1fr) 56px; gap: 12px; align-items: center; margin-bottom: 8px; }
.hbars .r .t { color: var(--ink-2); }
.hbars .track { height: 20px; background: var(--panel); border-radius: 2px; overflow: hidden; }
.hbars .bar { height: 100%; border-radius: 2px; }
.hbars .v { font-family: var(--mono); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; color: var(--ink); }
.hbars .gap { height: 16px; }

.flow { font-family: var(--sans); font-size: 14px; line-height: 1.45; }
.flow .row { display: grid; grid-template-columns: minmax(0, 1fr) 210px; gap: 18px; align-items: stretch; }
.flow .box { border: 1px solid var(--rule-2); border-radius: 4px; padding: 12px 14px; background: var(--bg); }
.flow .box .t1 { font-weight: 700; font-size: 14.5px; }
.flow .box .t2 { color: var(--ink-3); font-size: 13.5px; margin-top: 2px; }
.flow .box.dark { background: var(--red-soft); border: 2px solid var(--red); }
.flow .box.dark .t1 { color: var(--red); }
.flow .box.dark .t2 { color: var(--ink-2); }
.flow .box.line { border: 2px solid var(--night); background: var(--surface); }
.flow .side { font-size: 12.5px; color: var(--ink-3); display: flex; align-items: center; border-left: 1px solid var(--rule); padding-left: 14px; }
.flow .side b { font-family: var(--sans); font-size: 22px; font-weight: 700; color: var(--red); font-variant-numeric: tabular-nums; }
.flow .conn { padding: 8px 0 8px 34px; position: relative; font-family: var(--sans); font-size: 13px; color: var(--ink-3); font-style: normal; }
.flow .conn::before { content: ""; position: absolute; left: 14px; top: 0; bottom: 0; border-left: 1.5px dashed var(--ink-4); }
.flow .conn::after { content: ""; position: absolute; left: 10px; bottom: 0; border: 4.5px solid transparent; border-top: 6px solid var(--ink-4); border-bottom: 0; }

table.data { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 14px; font-variant-numeric: tabular-nums; }
table.data th { text-align: left; font-size: 11px; color: var(--ink-2); padding: 8px 10px; border-bottom: 2px solid var(--ink); }
table.data td { padding: 10px; border-bottom: 1px solid var(--rule); vertical-align: top; }
figure table.data tr:last-child td { border-bottom: 0; }
table.data td b { font-size: 19px; font-weight: 700; display: block; letter-spacing: -.01em; }
table.data td span { color: var(--ink-3); font-size: 12.5px; }
table.data td.hi { background: var(--red-soft); }
table.data td.hi b { color: var(--red); }
.stack { display: flex; height: 30px; border-radius: 3px; overflow: hidden; margin: 22px 0 6px; font-family: var(--mono); font-size: 12px; font-weight: 600; }
.stack div { display: flex; align-items: center; padding: 0 8px; white-space: nowrap; }
.stack .s-true { background: var(--sig); color: var(--on-fill); }
.stack .s-false { background: var(--red-soft); color: var(--red); box-shadow: inset 0 0 0 1.5px var(--red); }
.stack-note { font-family: var(--sans); font-size: 13px; color: var(--ink-3); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.stack-note b { color: var(--ink); }

/* A drug's label beside a model's facts label */
.insert { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 18px; font-family: var(--sans); font-size: 13.5px; line-height: 1.45; align-items: start; }
.insert .drug { background: var(--stone); border-radius: 4px; padding: 14px 16px; }
.insert .hd { margin: 0 0 8px; }
.insert .drug .hd { color: var(--ink-2); }
.insert .drug ol { list-style: none; padding: 0; margin: 0; }
.insert .drug li { padding: 6px 0; border-top: 1px solid var(--rule-2); margin: 0; color: var(--ink-2); }
.insert .drug li.w { color: var(--red); font-weight: 700; }
.insert .facts { border: 3px solid var(--night); border-radius: 2px; padding: 12px 14px; background: var(--surface); }
.insert .facts .mname { color: var(--ink-3); padding-bottom: 8px; border-bottom: 6px solid var(--night); margin: 0 0 2px; }
.insert .facts .row { padding: 8px 0; border-bottom: 1px solid var(--night); }
.insert .facts .row:last-child { border-bottom: 0; }
.insert .facts .row b { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.insert .facts .row:last-child b { color: var(--red); }
.insert .tbd { font-weight: 700; color: var(--red); }

/* Nine tiles: the model is the small box */
.grid9 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(92px, auto); gap: 8px; font-family: var(--sans); font-size: 14px; line-height: 1.3; }
.grid9 .g { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 12px; border-radius: 4px; background: var(--stone); color: var(--ink-2); font-weight: 500; }
.grid9 .g.edge { background: var(--sig); color: var(--on-fill); font-weight: 700; font-size: 15px; }
.grid9 .g.edge small { display: block; font-weight: 500; font-size: 12.5px; line-height: 1.35; color: var(--sig-on); margin-top: 4px; }
.grid9 .g.focus { outline: 3px solid var(--red); outline-offset: 3px; }
.grid9 .g.model { background: transparent; border: 1.5px dashed var(--rule-2); }
.grid9 .g.model span { background: var(--night); color: var(--on-night); font-weight: 700; font-size: 13px; padding: 6px 14px; border-radius: 3px; }

/* Two cases side by side: surrogate improved, outcome worsened */
.versus { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; font-family: var(--sans); font-size: 14px; line-height: 1.45; }
.versus .col { background: var(--bg); border: 1px solid var(--rule-2); border-radius: 4px; padding: 14px 16px; }
.versus .hd { color: var(--ink-2); margin: 0 0 10px; }
.versus .ok, .versus .bad { position: relative; padding: 8px 0 8px 30px; margin: 0; border-top: 1px solid var(--rule); color: var(--ink-2); }
.versus .ok b, .versus .bad b { display: block; color: var(--ink); }
.versus .bad b { color: var(--red); }
.versus .ok::before, .versus .bad::before { position: absolute; left: 0; top: 10px; width: 20px; height: 20px; border-radius: 50%; font: 700 12px/20px var(--sans); text-align: center; color: var(--on-fill); }
.versus .ok::before { content: "✓"; background: var(--sig); }
.versus .bad::before { content: "!"; background: var(--red); border-radius: 3px; }
.versus-ask { font-family: var(--serif); font-size: 19px; font-weight: 600; text-align: center; margin: 14px 0 0; }

/* PPV as four boxes, like the talk slide */
.ppvgrid { display: grid; grid-template-columns: 112px repeat(2, minmax(0, 1fr)); gap: 8px; font-family: var(--sans); font-size: 13px; line-height: 1.3; align-items: stretch; }
.ppvgrid .ch { font-weight: 700; text-align: center; align-self: end; margin: 0; color: var(--ink); }
.ppvgrid .rh { font-weight: 700; align-self: center; margin: 0; color: var(--ink); }
.ppvgrid .c { border-radius: 4px; padding: 14px 8px; text-align: center; background: var(--panel); color: var(--ink-3); }
.ppvgrid .c b { display: block; font-size: 30px; font-weight: 700; line-height: 1.05; letter-spacing: -.01em; color: var(--ink); font-variant-numeric: tabular-nums; }
.ppvgrid .c.tp { background: var(--sig); color: var(--sig-on); }
.ppvgrid .c.tp b { color: var(--on-fill); }
.ppvgrid .c.fp { background: var(--red-soft); color: var(--red); box-shadow: inset 0 0 0 2px var(--red); }
.ppvgrid .c.fp b { color: var(--red); }
.ppvres { margin-top: 14px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 20px; align-items: center; background: var(--night); color: var(--on-night); border-radius: 4px; padding: 16px 20px; font-family: var(--sans); }
.ppvres .eq { font-family: var(--mono); font-size: 13px; color: var(--on-night); }
.ppvres .big { grid-row: span 2; font-family: var(--sans); font-size: 44px; font-weight: 600; letter-spacing: -.02em; line-height: 1; color: var(--on-night); font-variant-numeric: tabular-nums; }
.ppvres .note { font-size: 13px; color: var(--on-night-2); }

/* The evidence ladder: one blue, rising in depth */
.ladder { list-style: none; padding: 0 !important; margin: 0 !important; display: flex; align-items: flex-end; gap: 8px; font-family: var(--sans); font-size: 13px; line-height: 1.35; }
.ladder li { flex: 1; margin: 0; min-height: calc(96px + var(--s, 1) * 36px); display: flex; flex-direction: column; gap: 6px; padding: 12px; border-radius: 4px; background: var(--sig-soft); color: var(--ink-2); }
.ladder li:nth-child(2) { background: var(--sig-2); color: var(--ink); }
.ladder li:nth-child(3) { background: var(--sig-3); color: var(--ink); }
.ladder li:nth-child(4) { background: var(--sig-4); color: var(--on-fill); }
.ladder li:nth-child(5) { background: var(--sig); color: var(--on-fill); }
.ladder li b { font-size: 14px; line-height: 1.25; color: inherit; }
.ladder li:nth-child(-n+3) b { color: var(--ink); }
.ladder .ph { order: 9; margin-top: auto; font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.ladder em { align-self: flex-start; font-style: normal; font-size: 11.5px; font-weight: 700; background: var(--red); color: var(--on-fill); border-radius: 3px; padding: 2px 8px; }

/* A big number next to numbered steps */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 14px; font-family: var(--sans); font-size: 14px; line-height: 1.45; }
.statpanel { background: var(--night); color: var(--on-night-2); border-radius: 4px; padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; justify-content: center; }
.statpanel .k { color: var(--amber); margin: 0; text-wrap: balance; }
/* Headline numbers on dark panels read like a measurement on screen: neutral white, so amber never looks like a data category. */
.statpanel .big { font-family: var(--sans); font-size: 44px; font-weight: 600; letter-spacing: -.02em; line-height: 1; color: var(--on-night); margin: 0; font-variant-numeric: tabular-nums; }
.statpanel p { margin: 0; }
.steps { list-style: none; counter-reset: st; padding: 0 !important; margin: 0 !important; display: grid; gap: 8px; }
.steps li { counter-increment: st; position: relative; margin: 0; padding: 12px 14px 12px 52px; background: var(--bg); border: 1px solid var(--rule-2); border-radius: 4px; color: var(--ink-3); }
.steps li::before { content: counter(st); position: absolute; left: 14px; top: 12px; width: 26px; height: 26px; border-radius: 3px; background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); font: 600 12.5px/26px var(--mono); text-align: center; }
.steps li b { display: block; color: var(--ink); font-size: 14.5px; }

/* Series: the study's other parts, like the series list on a workstation. A light panel, in the family of In short. */
.series { margin: 20px 0 0; padding: 14px 18px 12px; border: 1px solid var(--rule-2); border-top: 3px solid var(--night); border-radius: 3px; background: var(--surface); color: var(--ink-2); font-family: var(--sans); font-size: 14.5px; line-height: 1.5; }
.series .h { color: var(--ink-2); margin: 0 0 8px; }
.series ol { margin: 0; padding: 0; list-style: none; }
.series li { position: relative; margin: 0; padding: 3px 0 3px 18px; color: var(--ink-2); }
.series li::before { content: ""; position: absolute; left: 1px; top: 13.5px; width: 7px; height: 2px; background: var(--rule-2); }
.series li[aria-current] { font-weight: 600; color: var(--ink); }
.series li[aria-current]::before { background: var(--amber); box-shadow: 0 0 0 1.5px var(--amber-deep); width: 8px; height: 8px; top: 10px; left: 0; border-radius: 50%; }
.series li.soon { color: var(--ink-3); }
.series li.soon span { font-family: var(--mono); font-size: 12px; }
.series a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--rule-2); text-decoration-thickness: 1px; }
.series a:hover { color: var(--ink); text-decoration-color: var(--amber-deep); text-decoration-thickness: 1.5px; }
/* The end card stays graphite: the one dark block in a post besides the result panels. */
.series-next { margin: 48px 0 0; padding: 18px 20px; border-radius: 4px; background: var(--night); font-family: var(--sans); display: flex; flex-direction: column; gap: 4px; }
.series-next span { color: var(--amber); }
.series-next a { font-family: var(--sans); font-size: 21px; font-weight: 600; letter-spacing: -.01em; color: var(--on-night); text-decoration: none; }
.series-next a:hover { color: var(--on-night); text-decoration: underline; text-decoration-color: var(--amber); }
.series-next :focus-visible { outline-color: var(--amber); }
.series-next.soon b { font-family: var(--sans); font-size: 21px; font-weight: 600; color: var(--on-night-2); }
.pending-link { text-decoration: underline dotted; text-decoration-color: var(--ink-4); text-underline-offset: 3px; cursor: help; }

.refs { font-family: var(--sans); font-size: 14px; line-height: 1.55; color: var(--ink-2); padding-left: 2.3em; }
.refs li { margin-bottom: 8px; padding-left: 4px; }
.refs li::marker { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.refs a { text-decoration-color: color-mix(in srgb, var(--amber-deep) 55%, transparent); text-decoration-thickness: 1px; }
.refs a:hover { text-decoration-color: var(--amber-deep); }
.post-end { margin-top: 56px; padding-top: 16px; border-top: 1px solid var(--ink); font-family: var(--sans); font-size: 14px; color: var(--ink-3); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 18px; }
.post-end a { color: var(--ink); }

@media (max-width: 1000px) {
  .post-wrap { grid-template-columns: minmax(0, var(--col)); }
  .toc { display: none; }
}
@media (max-width: 640px) {
  body { font-size: 18px; }
  .site-header .in { padding: 12px 16px; font-size: 14px; }
  .brand { gap: 10px; }
  .mark { width: 30px; height: 30px; border-radius: 6px; font-size: 12.5px; }
  .site-header nav { gap: 16px; }
  /* Phone: photo beside the name, the subtitle full width beneath */
  .hero-home { grid-template-columns: 88px minmax(0, 1fr); gap: 0 18px; align-items: end; padding: 28px 0 36px; }
  .hero-home > div { display: contents; }
  .avatar { grid-row: 1 / span 2; align-self: center; width: 88px; height: 110px; border-radius: 8px; }
  .hero-home .eyebrow { grid-column: 2; align-self: end; }
  .hero-home h1 { grid-column: 2; align-self: start; }
  .hero-home .tagline { grid-column: 1 / -1; margin-top: 20px; }
  .page-head, .post-band { padding: 30px 0 38px; }
  .wrap > .post-header { padding: 34px 0 42px; }
  h1 { font-size: 34px; letter-spacing: -.02em; }
  .post-band h1 { font-size: 33px; line-height: 1.1; }
  .tagline, .page-head .dek, .post-band .dek, .wrap > .post-header .dek { font-size: 18.5px; margin-top: 10px; }
  .post-band .dek { margin-top: 12px; }
  .hero-home .eyebrow { font-size: 10.5px; letter-spacing: .06em; margin-bottom: 8px; }
  .about-short, .prose { margin-top: 30px; }
  /* Phone: the tag filters become compact toggles instead of three loose rows of tabs */
  .tabs { gap: 8px; margin-top: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--ink); font-size: 14px; }
  .tabs button { padding: 5px 10px; margin: 0; border: 0; border-radius: 3px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--rule-2); color: var(--ink-2); line-height: 1.4; }
  .tabs button[aria-pressed="true"] { background: var(--night); color: var(--on-night); box-shadow: none; }
  .tabs button[aria-pressed="true"] .count { color: var(--amber); }
  .tabs .count { margin-left: 5px; }
  .block { margin-top: 56px; }
  .block-head h2 { font-size: 23px; }
  /* The post cards (og.png) still carry the old palette, and full width they would dominate the list. */
  .entry { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .entry-thumb { display: none; }
  .entry h3 { font-size: 22px; }
  .timeline { --rx: 5px; --cx: 28px; }
  .timeline > li::after { top: 3px; }
  .timeline > li.now::after { top: 2px; }
  .timeline > li:first-child::before { top: 8px; }
  .timeline > li:last-child::before { height: 8px; }
  .timeline .when { position: static; display: block; width: auto; text-align: left; margin-bottom: 3px; }
  /* Phone: every date sits above its line, and every mark lines up with its date. */
  .timeline .roles > li { display: flex; flex-direction: column; align-items: flex-start; }
  .timeline .roles .dates { position: static; order: -1; display: block; width: auto; text-align: left; margin: 0 0 1px; }
  .timeline .roles > li::before { top: 11px; }
  .timeline > li:last-child > .roles > li:last-child::after { top: 13px; }
  #talks .timeline > li { padding: 16px 16px 16px 18px; }
  .papers li { grid-template-columns: 30px minmax(0, 1fr); }
  .papers .pt { font-size: 16.5px; }
  .tiles { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tiles .tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .tile:nth-child(3) { border-left: 0; }
  .tile:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .tile .v { font-size: 24px; }
  .post-head { padding-top: 22px; }
  /* Byline on a phone: name on one line, date and reading time beneath */
  .byline { display: grid; grid-template-columns: 48px auto auto minmax(0, 1fr); gap: 0 8px; align-items: center; }
  .byline img { grid-row: 1 / span 2; }
  .byline > span:nth-of-type(1) { grid-column: 2 / -1; }
  .byline > span:nth-of-type(2) { display: none; }
  .social { margin-left: 0; gap: 6px 20px; }
  article h2 { font-size: 25px; }
  article h2 .n { vertical-align: 3px; margin-right: 10px; }
  .tldr { padding: 16px 18px 4px; }
  figure { padding: 16px 14px 12px; }
  .hbars .r { grid-template-columns: minmax(0, 1fr) 48px; gap: 2px 10px; margin-bottom: 10px; }
  .hbars .r .t { grid-column: 1 / -1; font-size: 13px; }
  table.data { table-layout: fixed; font-size: 12.5px; }
  table.data th { padding: 6px 5px; font-size: 10px; letter-spacing: .02em; }
  table.data td { padding: 8px 5px; overflow-wrap: break-word; hyphens: auto; }
  table.data td b { font-size: 15px; }
  table.data td span { font-size: 11.5px; }
  .flow .row { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  /* Phone: the side note becomes the foot of its own box, below a dashed line, so it can't read as the connector's label */
  .flow .row { gap: 0; }
  .flow .row > .box { border-bottom-width: 0; border-radius: 4px 4px 0 0; padding-bottom: 10px; }
  .flow .side { display: block; margin: 0; padding: 0 14px 10px; border: 1px solid var(--rule-2); border-top: 0; border-radius: 0 0 4px 4px; background: var(--bg); }
  .flow .side::before { content: ""; display: block; border-top: 1px dashed var(--rule-2); margin: 0 0 7px; }
  .flow .box.dark + .side { border: 2px solid var(--red); border-top: 0; background: var(--red-soft); }
  .flow .box.line + .side { border: 2px solid var(--night); border-top: 0; background: var(--surface); }
  .flow .side b { font-size: 20px; }
  .insert { grid-template-columns: minmax(0, 1fr); }
  .sysmap { font-size: 12px; gap: 6px; grid-auto-rows: 40px; }
  .sysmap .b { padding: 8px 9px; }
  .sysmap .edge { font-size: 13px; }
  .sysmap .edge small { display: none; }
  .grid9 { font-size: 12.5px; gap: 6px; grid-auto-rows: minmax(78px, auto); }
  .grid9 .g { padding: 8px 6px; }
  .grid9 .g.edge { font-size: 13px; }
  .grid9 .g.edge small { display: none; }
  .versus { grid-template-columns: minmax(0, 1fr); }
  .ppvgrid { grid-template-columns: 74px repeat(2, minmax(0, 1fr)); font-size: 12px; }
  .ppvgrid .c b { font-size: 24px; }
  .ppvres { gap: 4px 14px; padding: 14px 16px; }
  .ppvres .big { font-size: 36px; }
  .ladder { flex-direction: column; align-items: stretch; }
  .ladder li { min-height: 0; margin-left: calc((var(--s, 1) - 1) * 14px); }
  .ladder .ph { order: 0; margin-top: 0; }
  .split { grid-template-columns: minmax(0, 1fr); }
  .series-next a, .series-next.soon b { font-size: 19px; }
}