/* People of Superintelligence. Cream paper, teal ink, Georgia headings. */
:root {
  --paper: #f4f1e9;
  --surface: #fffcf6;
  --ink: #202d2b;
  --muted: #586460;
  --line: #d6dcd3;
  --edge: #a5b1a6;
  --teal: #176c60;
  --teal-strong: #10554b;
  --on-teal: #fffcf6;
  --wash: #e8ede4;
  --chip-line: #c7d5c7;
  --gold: #e8b966;
  --target: #f6e7c4;
  --focus: #ba7b22;
  --frame: rgb(32 45 43 / 0.13);
  /* Chart colors (checked for color-vision separation on --paper): teal for
     universities or the main series, ochre for companies or the contrast
     series, blue for institutes and labs, gray for everything else. */
  --c1: #008571;
  --c2: #b07519;
  --c3: #3a68b0;
  --c0: #a5b1a6;
  --serif: Georgia, 'Times New Roman', serif;
  --sans: Arial, Helvetica, sans-serif;
  --gutter: 48px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #151b1a;
    --surface: #1c2422;
    --ink: #e7ebe4;
    --muted: #a2ada7;
    --line: #2f3a37;
    --edge: #4a5853;
    --teal: #6cc4b3;
    --teal-strong: #8dd6c8;
    --on-teal: #10201d;
    --wash: #23302d;
    --chip-line: #3a4a46;
    --gold: #d9a54f;
    --target: #3a3424;
    --focus: #e0a546;
    --frame: rgb(255 255 255 / 0.10);
    --c1: #35a38d;
    --c2: #c08628;
    --c3: #6b8fd6;
    --c0: #56645f;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; min-width: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.65 var(--sans); }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--teal); }
p, li, h1, h2, h3, dd { overflow-wrap: anywhere; }
p { margin: 0 0 16px; }
h1, h2, h3 { font-family: var(--serif); font-weight: normal; line-height: 1.16; letter-spacing: -0.03em; }
h1 { font-size: clamp(40px, 5.6vw, 72px); margin: 14px 0 22px; }
h2 { font-size: 32px; margin: 0 0 20px; }
h3 { font-size: 24px; margin: 0 0 10px; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -80px; background: var(--surface); padding: 12px 16px; z-index: 10; border-radius: 5px; }
.skip:focus { top: 10px; }

button, .button {
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid var(--edge); border-radius: 5px; padding: 10px 17px;
  background: var(--surface); font-size: 14px; line-height: 1.5;
}
button:hover, .button:hover { border-color: var(--teal); background: var(--wash); color: var(--teal); }
.primary { background: var(--teal); border-color: var(--teal); color: var(--on-teal); }
.primary:hover { background: var(--teal-strong); border-color: var(--teal-strong); color: var(--on-teal); }

/* Header and footer */
.site-header {
  max-width: 1360px; margin: auto; padding: 24px var(--gutter);
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: baseline; gap: 5px; font: bold 24px/1.1 var(--serif); letter-spacing: -0.04em; white-space: nowrap; }
.brand span { font-style: italic; font-weight: normal; font-size: 0.82em; margin: 0 2px; }
.site-header nav { display: flex; gap: 28px; font-size: 15px; }
.site-header nav a { position: relative; padding: 8px 0; }
.site-header nav a[aria-current=page]::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--teal); }
main { display: block; max-width: 1264px; margin: auto; padding: 0 var(--gutter) 80px; min-height: 70vh; }
main:focus { outline: none; }
.site-footer {
  max-width: 1264px; margin: auto; padding: 32px var(--gutter) 44px;
  border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 32px;
  font-size: 13px; color: var(--muted);
}
.site-footer .brand { color: var(--ink); font-size: 20px; }
.site-footer p { margin: 0; }
.site-footer a:not(.brand) { color: var(--teal); margin-right: 18px; }

/* Home */
.intro { padding: 64px 0 40px; max-width: 820px; }
.intro h1 { margin-top: 0; }
.lead { font: 21px/1.55 var(--serif); }
.intro .lead { font-size: 23px; max-width: 720px; }
.explain { color: var(--muted); max-width: 680px; font-size: 17px; line-height: 1.7; }

.toolbar { display: flex; gap: 12px; margin: 8px 0 16px; }
.search { position: relative; flex: 1; }
.search::before { content: ''; position: absolute; left: 17px; top: 50%; width: 14px; height: 14px; margin-top: -9px; border: 2px solid var(--teal); border-radius: 50%; pointer-events: none; }
.search::after { content: ''; position: absolute; left: 31px; top: 50%; width: 7px; height: 2px; margin-top: 5px; background: var(--teal); transform: rotate(45deg); pointer-events: none; }
input, select { border: 1px solid var(--edge); background: var(--surface); border-radius: 5px; padding: 13px 16px; }
.search input { width: 100%; padding-left: 48px; }
.topic select { width: 260px; height: 100%; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.filters button { border-radius: 30px; font-size: 13px; padding: 7px 14px; }
.filters button span { color: var(--muted); }
.filters button[aria-pressed=true] { background: var(--teal); border-color: var(--teal); color: var(--on-teal); }
.filters button[aria-pressed=true] span { color: inherit; opacity: 0.8; }
.count { font-size: 14px; color: var(--muted); margin: 0 0 18px; }

.grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 18px 16px; }
.grid li { content-visibility: auto; contain-intrinsic-size: auto 270px; }
.grid a { display: block; height: 100%; padding: 10px 10px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; }
.grid a:hover { border-color: var(--edge); color: inherit; }
.grid a:hover b { color: var(--teal); }
.grid b { display: block; font: normal 18px/1.25 var(--serif); letter-spacing: -0.01em; margin: 12px 2px 3px; }
.grid a > span:last-child { display: block; font-size: 13px; color: var(--muted); margin: 0 2px; }
.empty { padding: 40px; border: 1px dashed var(--edge); background: var(--surface); border-radius: 8px; }

/* Portrait: the same square, radius and frame everywhere. */
.ph { position: relative; display: block; aspect-ratio: 1; border-radius: 5px; overflow: hidden; background: var(--wash); }
.ph::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--frame); pointer-events: none; }
.ph img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(0.82) sepia(0.06) contrast(1.02); }
.ph-initials { display: flex; align-items: center; justify-content: center; font: normal 44px/1 var(--serif); letter-spacing: -0.04em; color: var(--teal); }
.ph-large { border-radius: 8px; }
.ph-large.ph-initials { font-size: 88px; }

/* Profile */
.breadcrumb { font-size: 14px; padding-top: 28px; }
.breadcrumb a { color: var(--teal); }
.person-hero { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 56px; padding: 24px 0 40px; align-items: start; border-bottom: 1px solid var(--line); }
.person-text { max-width: 780px; }
.category { margin: 0; font-size: 14px; font-weight: bold; }
.category a { color: var(--teal); }
.person-hero h1 { margin: 8px 0 12px; }
.aliases { color: var(--muted); font-size: 15px; margin-bottom: 18px; }
.person-hero .lead { margin-top: 18px; }
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; margin: 22px 0 0; padding: 0; }
.tags a { display: inline-block; font-size: 13px; padding: 4px 11px; border-radius: 30px; background: var(--wash); border: 1px solid var(--chip-line); color: var(--teal); }
.tags a:hover { border-color: var(--teal); }
.profile-photo { margin: 8px 0 0; }

.timeline-section { max-width: 780px; padding-top: 44px; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 28px; border-left: 1px solid var(--edge); }
.milestone { position: relative; padding-bottom: 30px; }
.milestone:last-child { padding-bottom: 4px; }
.milestone::before { content: ''; position: absolute; left: -34px; top: 6px; width: 11px; height: 11px; border-radius: 50%; background: var(--teal); border: 2px solid var(--paper); }
.period { margin: 0 0 4px; font-size: 14px; font-weight: bold; color: var(--teal); }
.milestone p:last-child { font: 18px/1.7 var(--serif); margin: 0; }



.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line); }
.pager a { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.pager .pager-ph { flex: none; width: 48px; height: 48px; border-radius: 6px; font-size: 16px; }
.pager .pager-text { display: block; min-width: 0; }
.pager .pager-label, .pager .pager-meta { display: block; font: 13px/1.5 var(--sans); color: var(--muted); }
.pager b { display: block; font: 400 20px/1.3 var(--serif); }
.pager .pager-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pager .next { flex-direction: row-reverse; text-align: right; }


/* Sources and credits: a quiet block at the end of a profile, styled like the footer notes. */
.credits { max-width: 780px; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.6; color: var(--muted); }
.credits h2 { font: bold 13px/1.6 var(--sans); letter-spacing: 0; margin: 0 0 8px; color: var(--muted); }
.credits a { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.credits a:hover { color: var(--teal); }
.credit-photo { margin: 0 0 10px; }
.credit-label { color: var(--ink); }
.source-list { margin: 0; padding-left: 22px; }
.source-list li { padding: 1px 0; scroll-margin-top: 24px; }
.source-list li:target { background: var(--target); }

/* Facts and statistics */
.facts { margin: 22px 0 0; }
.facts dl, .stat-row { display: flex; flex-wrap: wrap; gap: 14px 36px; margin: 0; }
.facts dt, .stat-row dt { font-size: 13px; color: var(--muted); }
.facts dd, .stat-row dd { margin: 0; font: 20px/1.35 var(--serif); }
.facts dd a, .stat-row dd a { color: var(--teal); }
.facts-source { margin: 10px 0 0; font-size: 13px; color: var(--muted); max-width: 720px; }
.facts-source a { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; }
.org-hero { padding: 16px 0 8px; }
.org-hero h1 { margin: 8px 0 12px; }
.org-hero .aliases a { color: var(--teal); }
.org-stats { padding: 20px 0 28px; border-bottom: 1px solid var(--line); margin-bottom: 36px; }
.stat-row dd { font-size: 26px; }
.org-section { margin-top: 44px; }
.alumni { list-style: none; padding: 0; margin: 0; columns: 3 240px; column-gap: 32px; }
.alumni li { break-inside: avoid; padding: 0 0 12px; }
.alumni a { color: var(--teal); }
.alumni li > span { display: block; font-size: 13px; color: var(--muted); }
.alumni span a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* Tables */
.table-wrap { overflow-x: auto; margin: 0 0 12px; }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; padding: 9px 12px 9px 0; border-bottom: 1px solid var(--line); vertical-align: baseline; }
thead th { font-size: 13px; font-weight: bold; color: var(--muted); border-bottom-color: var(--edge); }
tbody th { font-weight: normal; }
.n { text-align: right; padding-right: 0; padding-left: 12px; font-variant-numeric: tabular-nums; }
.org-table a { color: var(--teal); }
.org-table thead button { all: unset; cursor: pointer; }
.org-table thead button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.org-table thead button:hover { color: var(--teal); }
.org-table th[aria-sort=ascending] button::after { content: ' \2191'; }
.org-table th[aria-sort=descending] button::after { content: ' \2193'; }
.decade-table td { min-width: 150px; }
.decade-table td .bar { width: 90px; }

/* Bars: one teal series; the number always sits beside the bar. */
.bar { display: inline-block; width: 160px; height: 10px; vertical-align: middle; }
.bar svg { display: block; width: 100%; height: 100%; }
.bar rect { fill: var(--teal); }
.bar-value { display: inline-block; min-width: 36px; margin-left: 8px; font-variant-numeric: tabular-nums; }
.bar-note { font-size: 13px; color: var(--muted); margin-left: 6px; }
.bars { list-style: none; margin: 0 0 8px; padding: 0; }
.bars li { display: grid; grid-template-columns: minmax(0, 260px) 160px auto minmax(0, 1fr); align-items: baseline; gap: 4px 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.bars .bar-label a, .bars .bar-note a { color: var(--teal); }
.bars .bar { width: 100%; align-self: center; }
.bars .bar-value { margin: 0; }
.bars .bar-note { margin: 0; }
.bar-people { font-size: 14px; }
.arrow { color: var(--muted); }
.chart-section { padding-top: 32px; max-width: 1040px; }
.note { font-size: 13px; color: var(--muted); }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.two-col h3 { font-size: 22px; }
.two-col .bars li { grid-template-columns: minmax(0, 1fr) 90px auto; }
.two-col .bar-note { grid-column: 1 / -1; margin-top: -4px; }

/* Blog */
.post-list { list-style: none; padding: 0; margin: 0; max-width: 820px; }
.post-list a { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 28px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line); }
.post-list b { display: block; font: normal 26px/1.25 var(--serif); letter-spacing: -0.02em; color: var(--ink); }
.post-list a:hover b { color: var(--teal); }
.post-list .post-text > span { display: block; margin-top: 6px; color: var(--muted); }
.thumb { display: block; width: 96px; height: 60px; }
.post .page-intro { padding-bottom: 8px; }
.post h1 { font-size: clamp(34px, 4.4vw, 54px); }
.post-date { color: var(--muted); font-size: 14px; }
.post .stat-row { padding: 18px 0 26px; border-bottom: 1px solid var(--line); margin-bottom: 8px; }
.post .stat-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.post .prose { max-width: 820px; }
.post .prose h2 { margin-top: 36px; }
.post .prose .bars li { font-family: var(--sans); }
.post .prose .bars li, .post .prose .bars .bar-people { font-size: 15px; line-height: 1.5; }
.post .facts-source { margin-top: 32px; }

/* Charts (scripts/lib/charts.mjs). Rules: AGENTS.md, "Charts". */
.chart { margin: 40px 0 44px; }
.chart figcaption { display: block; margin: 0 0 16px; }
.chart-title { display: block; font: 23px/1.3 var(--serif); letter-spacing: -0.015em; color: var(--ink); }
.chart-sub { display: block; margin-top: 6px; font: 14px/1.55 var(--sans); color: var(--muted); }
.chart-source { margin: 12px 0 0; font: 13px/1.5 var(--sans); color: var(--muted); }
.prose .chart-source { font: 13px/1.5 var(--sans); }
.chart-data { margin-top: 6px; font: 13px/1.5 var(--sans); }
.chart-data summary { cursor: pointer; color: var(--teal); width: max-content; }
.chart-data .table-wrap { margin-top: 8px; max-height: 420px; overflow: auto; }
.data-table { font-size: 14px; }
.data-table th, .data-table td { padding: 6px 12px 6px 0; }
.key { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; margin-left: 2px; vertical-align: baseline; }
.key > span { white-space: nowrap; color: var(--ink); }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; background: var(--c1); }
.sw.k2 { background: var(--c2); }
.sw.k3 { background: var(--c3); }
.sw.k0 { background: var(--c0); }
.svg-w svg, .svg-n svg { display: block; width: 100%; height: auto; overflow: visible; }
.svg-n { display: none; }
.chart-svg text { font-family: var(--sans); font-size: 13px; fill: var(--ink); }
.chart-svg .ts { font-size: 12px; }
.chart-svg .tm { fill: var(--muted); }
.chart-svg .tb { font-weight: bold; }
.chart-svg .tv { font-variant-numeric: tabular-nums; }
.chart-svg .ton { fill: var(--on-teal); }
.chart-svg a, .prose .chart-svg a { text-decoration: none; }
.chart-svg a text { fill: var(--teal); }
.chart-svg a:hover text, .chart-svg a:focus-visible text { text-decoration: underline; }
.chart-svg .grid { stroke: var(--line); stroke-width: 1; }
.chart-svg .axis { stroke: var(--edge); stroke-width: 1; }
.chart-svg .leader { stroke: var(--edge); stroke-width: 1; fill: none; }
.chart-svg .median { stroke: var(--ink); stroke-width: 2; }
.chart-svg .range { fill: var(--c1); opacity: 0.28; }
.k1 { fill: var(--c1); }
.k2 { fill: var(--c2); }
.k3 { fill: var(--c3); }
.k0 { fill: var(--c0); }
.chart-svg .line, .thumb .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.line.k1 { stroke: var(--c1); }
.line.k2 { stroke: var(--c2); }
.line.k3 { stroke: var(--c3); }
.line.k0 { stroke: var(--c0); }
.line.em { stroke-width: 2.5; }
.chart-svg .dot { stroke: var(--paper); stroke-width: 2; }
.chart-svg .dot.sm { stroke-width: 1; }
.chart-svg .tie { opacity: 0.45; }
.band { opacity: 0.3; }
.band.em { opacity: 0.55; }
.chart-svg .band:hover { opacity: 0.8; }

/* Bar chart race (static/race.js). Without JS it shows the last year. */
.race-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 16px; }
.race-play { min-width: 86px; }
.race-range { flex: 1 1 180px; padding: 0; border: 0; background: none; accent-color: var(--teal); }
.seg { display: inline-flex; border: 1px solid var(--edge); border-radius: 5px; overflow: hidden; }
.seg button { border: 0; border-radius: 0; padding: 7px 12px; font-size: 13px; background: var(--surface); }
.seg button + button { border-left: 1px solid var(--edge); }
.seg button[aria-pressed=true] { background: var(--teal); color: var(--on-teal); }
.race-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 8px; }
.race-year { font: 46px/1 var(--serif); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.race-metric { font: 14px/1.4 var(--sans); color: var(--muted); }
.race-rows { list-style: none; margin: 0; padding: 0; position: relative; }
.chart .race-rows li { display: grid; grid-template-columns: minmax(0, 230px) minmax(0, 1fr) 64px; align-items: center; gap: 12px; height: 32px; margin: 0; font: 15px/1.3 var(--sans); }
.race-rows.live li { position: absolute; left: 0; right: 0; top: 0; transition: transform 0.7s ease, opacity 0.4s ease; }
.race-rows.live li.out { opacity: 0; pointer-events: none; }
.race-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chart .race-name a { color: var(--teal); text-decoration: none; }
.chart .race-name a:hover { text-decoration: underline; }
.race-bar svg { display: block; width: 100%; height: 16px; }
.race-rows rect { transition: transform 0.7s ease; }
.race-rows.still li, .race-rows.still rect { transition: none; }
.race-val { font-variant-numeric: tabular-nums; }

/* About and 404 */
.page-intro { padding: 56px 0 24px; max-width: 820px; }
.page-intro h1 { margin-top: 0; }
.prose { max-width: 720px; }
.prose section { padding-top: 28px; }
.prose p, .prose li { font: 18px/1.7 var(--serif); }
.prose ul { padding-left: 22px; }
.prose li { margin-bottom: 8px; }
.prose a { color: var(--teal); text-decoration: underline; text-underline-offset: 2px; }
#contact { scroll-margin-top: 24px; }

/* Text pages (blog, posts, about, 404) put all their parts in one column of the same width,
   centered in the page, so that every left and right edge lines up. Paragraphs keep a shorter
   line inside it. The home, people and organization pages use the full width. */
main > .page-intro, main > .prose, main > .post-list, .post > *, main:has(> .post) > .breadcrumb { max-width: 820px; margin-inline: auto; }
main > .prose p, main > .prose li, .post .prose > p { max-width: 720px; }
.not-found .button { margin: 8px 8px 0 0; }

@media (max-width: 1050px) {
  :root { --gutter: 30px; }
  .person-hero { grid-template-columns: minmax(0, 1fr) 220px; gap: 36px; }
}
@media (max-width: 760px) {
  :root { --gutter: 16px; }
  .site-header { flex-wrap: wrap; }
  .site-header nav { width: 100%; justify-content: space-between; gap: 8px; font-size: 14px; }
  .site-header nav a { padding: 4px 0; }
  .bars li { grid-template-columns: minmax(0, 1fr) 70px auto; }
  .bars .bar-note { grid-column: 1 / -1; margin-top: -4px; }
  .two-col { grid-template-columns: 1fr; gap: 8px; }
  .hide-narrow { display: none; }
  .stat-row { gap: 12px 24px; }
  .stat-row dd { font-size: 22px; }
  .facts dd { font-size: 18px; }
  h2 { font-size: 28px; }
  .site-header { padding-top: 18px; padding-bottom: 14px; gap: 12px; }
  .brand { font-size: 19px; }
  .site-footer .brand { font-size: 18px; }
  h1 { font-size: 40px; }
  .intro { padding: 28px 0 12px; }
  .intro .lead { font-size: 19px; }
  .explain { font-size: 15px; line-height: 1.6; }
  .toolbar { gap: 8px; }
  input, select { padding-top: 11px; padding-bottom: 11px; }
  .filters { flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(-1 * var(--gutter)) 14px; padding: 2px var(--gutter); scrollbar-width: none; }
  .filters button { flex: none; padding: 6px 12px; }
  .toolbar { flex-direction: column; }
  .topic select { width: 100%; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .grid a { padding: 8px 8px 12px; }
  .grid b { font-size: 16px; margin-top: 10px; }
  .ph-initials { font-size: 40px; }
  .person-hero { grid-template-columns: 1fr; gap: 0; padding-top: 16px; }
  .profile-photo { grid-row: 1; width: 148px; margin: 0 0 18px; }
  .ph-large.ph-initials { font-size: 52px; }
  .lead { font-size: 19px; }
  .timeline { padding-left: 22px; }
  .milestone::before { left: -28px; }
  .milestone p:last-child { font-size: 17px; }
      .pager { grid-template-columns: 1fr; }
  .pager .next { flex-direction: row; text-align: left; }
  .prose p, .prose li { font-size: 17px; }
}
@media (max-width: 700px) {
  .svg-w { display: none; }
  .svg-n { display: block; max-width: 520px; }
  .chart-title { font-size: 20px; }
  .chart .race-rows li { grid-template-columns: minmax(0, 128px) minmax(0, 1fr) 50px; gap: 8px; font-size: 14px; }
  .race-year { font-size: 38px; }
  .post-list a { grid-template-columns: minmax(0, 1fr) 64px; gap: 14px; }
  .thumb { width: 64px; height: 40px; }
  .post-list b { font-size: 22px; }
}
@media (max-width: 360px) {
  .brand { font-size: 17px; }
  .site-header { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .race-rows.live li, .race-rows rect { transition: none; }
}
@media print {
  .site-header nav, .site-footer, .toolbar, .filters, .pager { display: none !important; }
  body { background: white; color: black; }
}