/* 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; }
.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; }
}