:root { --provider-openai: #3f3f46; --provider-openai-soft: #ececee; --provider-anthropic: #a8500f; --provider-anthropic-soft: #f8eadf; --provider-google: #1a5fd6; --provider-google-soft: #e3ecfb; --provider-meta: #4d6b5c; --provider-meta-soft: #e4ede8; --provider-deepseek: #4d6b5c; --provider-deepseek-soft: #e4ede8; --provider-mistral: #4d6b5c; --provider-mistral-soft: #e4ede8; --provider-alibaba: #4d6b5c; --provider-alibaba-soft: #e4ede8; --provider-moonshot: #4d6b5c; --provider-moonshot-soft: #e4ede8; --provider-minimax: #4d6b5c; --provider-minimax-soft: #e4ede8; --provider-zai: #4d6b5c; --provider-zai-soft: #e4ede8; --provider-nvidia: #4d6b5c; --provider-nvidia-soft: #e4ede8; --provider-meituan: #4d6b5c; --provider-meituan-soft: #e4ede8; --provider-xai: #4d6b5c; --provider-xai-soft: #e4ede8; --provider-snowflake: #4d6b5c; --provider-snowflake-soft: #e4ede8; --provider-sber: #4d6b5c; --provider-sber-soft: #e4ede8; --provider-thinking-machines: #4d6b5c; --provider-thinking-machines-soft: #e4ede8; --provider-poolside: #4d6b5c; --provider-poolside-soft: #e4ede8; --provider-openrouter: #4d6b5c; --provider-openrouter-soft: #e4ede8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --provider-openai: #a1a1aa; --provider-openai-soft: #27272a; --provider-anthropic: #f0a565; --provider-anthropic-soft: #3a2616; --provider-google: #8ab4f8; --provider-google-soft: #1b2a44; --provider-meta: #9cc2ad; --provider-meta-soft: #1c2a23; --provider-deepseek: #9cc2ad; --provider-deepseek-soft: #1c2a23; --provider-mistral: #9cc2ad; --provider-mistral-soft: #1c2a23; --provider-alibaba: #9cc2ad; --provider-alibaba-soft: #1c2a23; --provider-moonshot: #9cc2ad; --provider-moonshot-soft: #1c2a23; --provider-minimax: #9cc2ad; --provider-minimax-soft: #1c2a23; --provider-zai: #9cc2ad; --provider-zai-soft: #1c2a23; --provider-nvidia: #9cc2ad; --provider-nvidia-soft: #1c2a23; --provider-meituan: #9cc2ad; --provider-meituan-soft: #1c2a23; --provider-xai: #9cc2ad; --provider-xai-soft: #1c2a23; --provider-snowflake: #9cc2ad; --provider-snowflake-soft: #1c2a23; --provider-sber: #9cc2ad; --provider-sber-soft: #1c2a23; --provider-thinking-machines: #9cc2ad; --provider-thinking-machines-soft: #1c2a23; --provider-poolside: #9cc2ad; --provider-poolside-soft: #1c2a23; --provider-openrouter: #9cc2ad; --provider-openrouter-soft: #1c2a23; } }
:root[data-theme="dark"] { --provider-openai: #a1a1aa; --provider-openai-soft: #27272a; --provider-anthropic: #f0a565; --provider-anthropic-soft: #3a2616; --provider-google: #8ab4f8; --provider-google-soft: #1b2a44; --provider-meta: #9cc2ad; --provider-meta-soft: #1c2a23; --provider-deepseek: #9cc2ad; --provider-deepseek-soft: #1c2a23; --provider-mistral: #9cc2ad; --provider-mistral-soft: #1c2a23; --provider-alibaba: #9cc2ad; --provider-alibaba-soft: #1c2a23; --provider-moonshot: #9cc2ad; --provider-moonshot-soft: #1c2a23; --provider-minimax: #9cc2ad; --provider-minimax-soft: #1c2a23; --provider-zai: #9cc2ad; --provider-zai-soft: #1c2a23; --provider-nvidia: #9cc2ad; --provider-nvidia-soft: #1c2a23; --provider-meituan: #9cc2ad; --provider-meituan-soft: #1c2a23; --provider-xai: #9cc2ad; --provider-xai-soft: #1c2a23; --provider-snowflake: #9cc2ad; --provider-snowflake-soft: #1c2a23; --provider-sber: #9cc2ad; --provider-sber-soft: #1c2a23; --provider-thinking-machines: #9cc2ad; --provider-thinking-machines-soft: #1c2a23; --provider-poolside: #9cc2ad; --provider-poolside-soft: #1c2a23; --provider-openrouter: #9cc2ad; --provider-openrouter-soft: #1c2a23; }
.provider-openai { --c: var(--provider-openai); --soft: var(--provider-openai-soft); }
.provider-anthropic { --c: var(--provider-anthropic); --soft: var(--provider-anthropic-soft); }
.provider-google { --c: var(--provider-google); --soft: var(--provider-google-soft); }
.provider-meta { --c: var(--provider-meta); --soft: var(--provider-meta-soft); }
.provider-deepseek { --c: var(--provider-deepseek); --soft: var(--provider-deepseek-soft); }
.provider-mistral { --c: var(--provider-mistral); --soft: var(--provider-mistral-soft); }
.provider-alibaba { --c: var(--provider-alibaba); --soft: var(--provider-alibaba-soft); }
.provider-moonshot { --c: var(--provider-moonshot); --soft: var(--provider-moonshot-soft); }
.provider-minimax { --c: var(--provider-minimax); --soft: var(--provider-minimax-soft); }
.provider-zai { --c: var(--provider-zai); --soft: var(--provider-zai-soft); }
.provider-nvidia { --c: var(--provider-nvidia); --soft: var(--provider-nvidia-soft); }
.provider-meituan { --c: var(--provider-meituan); --soft: var(--provider-meituan-soft); }
.provider-xai { --c: var(--provider-xai); --soft: var(--provider-xai-soft); }
.provider-snowflake { --c: var(--provider-snowflake); --soft: var(--provider-snowflake-soft); }
.provider-sber { --c: var(--provider-sber); --soft: var(--provider-sber-soft); }
.provider-thinking-machines { --c: var(--provider-thinking-machines); --soft: var(--provider-thinking-machines-soft); }
.provider-poolside { --c: var(--provider-poolside); --soft: var(--provider-poolside-soft); }
.provider-openrouter { --c: var(--provider-openrouter); --soft: var(--provider-openrouter-soft); }
.provider-other { --c: var(--provider-meta); --soft: var(--provider-meta-soft); }
/* The providers' colours (--provider-<slug>, --provider-<slug>-soft) and each provider's --c and --soft (class
   provider-<slug>) come from data/providers.json: build.py writes them ahead of this file. */
:root {
  --bg: #fcfcfd;
  --bar: rgba(252, 252, 253, 0.92);
  --ink: #18181b;
  --muted: #52525b;
  --faint: #71717a;
  --rule: #e4e4e7;
  --spine: #d4d4d8;
  --chip: #f0f0f2;
  --chip-on: #18181b;
  --chip-on-ink: #fcfcfd;
  --chip-raised: #ffffff;
  --focus: #2453c4;
  --serif: "Iowan Old Style", "Charter", "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
  --gutter: 16px;
  color-scheme: light dark;
}
/* Theme: data-theme on <html> is an explicit choice (site/theme.js); without it, follow the system. */
:root[data-theme="light"] { color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111113;
    --bar: rgba(17, 17, 19, 0.9);
    --ink: #f4f4f5;
    --muted: #a1a1aa;
    --faint: #8b8b94;
    --rule: #27272a;
    --spine: #3f3f46;
    --chip: #1c1c1f;
    --chip-on: #f4f4f5;
    --chip-on-ink: #111113;
    --chip-raised: #2e2e33;
    --focus: #86a8ff;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111113;
  --bar: rgba(17, 17, 19, 0.9);
  --ink: #f4f4f5;
  --muted: #a1a1aa;
  --faint: #8b8b94;
  --rule: #27272a;
  --spine: #3f3f46;
  --chip: #1c1c1f;
  --chip-on: #f4f4f5;
  --chip-on-ink: #111113;
  --chip-raised: #2e2e33;
  --focus: #86a8ff;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 3px; }

/* Top bar: on every page */
.topbar {
  max-width: 1080px;
  margin: 0 auto;
  padding: 10px var(--gutter) 0;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.84rem;
}
.topbar .brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: 600 1.05rem/1 var(--serif);
  text-decoration: none;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.topbar .brand svg { flex-shrink: 0; }
.topbar .brand .tile { fill: var(--ink); }
.topbar .brand .mark { fill: var(--bg); }
.topbar .links { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar .nav { color: var(--muted); text-decoration: none; padding: 4px 0; white-space: nowrap; }
.topbar .nav:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 0.18em; }
/* The theme button: one icon, the current theme's (site/theme.js flips it) */
button.theme {
  appearance: none;
  margin: 0 0 0 auto;
  border: 0;
  padding: 0;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--chip);
  color: var(--muted);
  cursor: pointer;
}
button.theme:hover { color: var(--ink); }
button.theme svg { display: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
button.theme svg[data-value="dark"] { fill: currentColor; stroke: none; }
button.theme[data-mode="light"] svg[data-value="light"],
button.theme[data-mode="dark"] svg[data-value="dark"] { display: block; }
html:not(.js) button.theme { display: none; }

/* Masthead */
.masthead {
  max-width: 1080px;
  margin: 0 auto;
  padding: 36px var(--gutter) 28px;
  text-align: center;
}
h1 {
  margin: 0;
  font: 600 clamp(2.4rem, 7vw, 3.6rem)/1.05 var(--serif);
  letter-spacing: -0.02em;
}
.tagline {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 2.6vw, 1.15rem);
}

/* Filters */
.filters {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bar);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--rule);
}
html:not(.js) .filters { display: none; }
.bar {
  max-width: 1080px;
  margin: 0 auto;
  padding: 10px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
}
.seg {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  background: var(--chip);
  border-radius: 999px;
}
.seg button {
  appearance: none;
  border: 0;
  margin: 0;
  background: transparent;
  color: var(--muted);
  font: 500 0.84rem/1 var(--sans);
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 32px;
}
/* Labels centred on their capitals, whatever the system font: trimmed to cap height where browsers can
   (text-box), else nudged down by what Inter needs. Dropdowns and the search box can't be trimmed: they
   take a fixed height with no vertical padding and the font's own line height, which centres the
   capitals of San Francisco and Inter alike (AIT-79; a padding nudge tuned for one font put the other's
   text ~2px low). scripts/measure_filters.py measures it in a real Chrome. */
@supports (text-box: trim-both cap alphabetic) {
  .seg button > span, .bar .label { text-box: trim-both cap alphabetic; }
}
@supports not (text-box: trim-both cap alphabetic) {
  .seg button > span { position: relative; top: 0.12em; }
}
.seg button:hover { color: var(--ink); }
.seg button[aria-pressed="true"] { background: var(--chip-on); color: var(--chip-on-ink); }
/* A dropdown control (the year): one pill whatever the number of options. */
.seg.pick { position: relative; }
.seg.pick select {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  margin: 0;
  background: transparent;
  color: var(--ink);
  font: 500 0.84rem/normal var(--sans);
  padding: 0 30px 0 12px;
  border-radius: 999px;
  cursor: pointer;
  height: 32px;
}
.seg.pick::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  color: var(--muted);
  pointer-events: none;
}
.seg.pick.on select { background: var(--chip-on); color: var(--chip-on-ink); }
.seg.pick.on::after { color: var(--chip-on-ink); }
.seg.pick select option { color: initial; background: initial; }
/* The search box (AIT-58): first in the bar, outlined while it holds a query. */
.seg.find { position: relative; align-items: center; }
.seg.find svg { position: absolute; left: 14px; color: var(--faint); pointer-events: none; }
.seg.find input {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  margin: 0;
  background: transparent;
  color: var(--ink);
  font: 500 0.84rem/normal var(--sans);
  padding: 0 12px 0 33px;
  border-radius: 999px;
  height: 32px;
  width: 210px;
}
.seg.find input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-radius: 999px; }
.seg.find input::placeholder { color: var(--faint); opacity: 1; }
.seg.find input::-webkit-search-decoration { -webkit-appearance: none; }
.seg.find.on { box-shadow: inset 0 0 0 1.5px var(--ink); }
.seg.find.on svg { color: var(--ink); }
/* Importance while a search is on: every level is searched. */
.seg.pick.off { opacity: 0.45; }
.seg.pick.off select { cursor: default; }
/* A control with its label beside it (Importance), like a row's (Event Type). */
.bar .field { display: inline-flex; align-items: center; gap: 10px; }
.sw { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--c); }
/* A menu control (the provider, AIT-180): a pill like the dropdowns', in ink when it narrows the page, naming
   what is on with their logos; it opens a list of checkboxes, each with an Only button (an outlined pill,
   ink on hover), shown on its row's hover or focus, and always on touch screens. On phones the list is a sheet from the bottom of the screen. */
.seg.menu { position: relative; }
/* Its label takes the dropdowns' fixed height and natural line height (see .seg.pick select), not the trim. */
.seg.menu .open { color: var(--ink); font: 500 0.84rem/normal var(--sans); padding: 0 30px 0 12px; height: 32px; min-height: 0; max-width: min(320px, 70vw); }
.seg.menu .open > span { text-box: none; position: static; }
.seg.menu .lbl { overflow: hidden; text-overflow: ellipsis; }
.seg.menu::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  color: var(--muted);
  pointer-events: none;
}
.seg.menu.on .open { background: var(--chip-on); color: var(--chip-on-ink); }
.seg.menu.on::after { color: var(--chip-on-ink); }
/* The providers' logos (AIT-184): symbols in the menu's sprite, in their own colours; one-colour logos take the
   text colour, so they read in both themes and on the button when it is in ink. */
.seg.menu .sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.seg.menu .lg { display: block; flex: none; width: 16px; height: 16px; }
.seg.menu .dots { display: inline-flex; gap: 3px; }
.seg.menu .dots:empty { display: none; }
.seg.menu .dots .lg { width: 14px; height: 14px; }
.seg.menu .pop {
  position: absolute;
  z-index: 10;
  top: calc(100% + 6px);
  left: 0;
  width: 270px;
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  padding: 6px;
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
  text-align: left;
}
.seg.menu .pop[hidden] { display: none; }
.seg.menu .pop ul { list-style: none; margin: 0; padding: 0; }
.seg.menu .pop li { display: flex; align-items: center; border-radius: 8px; }
.seg.menu .pop li:hover { background: var(--chip); }
.seg.menu .pop label { flex: 1; display: flex; align-items: center; gap: 10px; padding: 8px 10px; font: 500 0.86rem/1.2 var(--sans); color: var(--ink); cursor: pointer; }
.seg.menu .pop .all { font-weight: 600; border-bottom: 1px solid var(--rule); margin-bottom: 4px; }
.seg.menu .pop input { width: 16px; height: 16px; margin: 0; flex: none; accent-color: var(--ink); cursor: pointer; }
.seg.menu .pop .only { min-height: 0; padding: 5px 10px; margin-right: 4px; font-size: 0.74rem; color: var(--ink); background: var(--chip-raised); box-shadow: 0 0 0 1px var(--spine); }
.seg.menu .pop .only:hover { background: var(--chip-on); color: var(--chip-on-ink); box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  .seg.menu .pop .only { opacity: 0; }
  .seg.menu .pop li:hover .only, .seg.menu .pop li:focus-within .only { opacity: 1; }
}
.seg.menu .pop-head { display: none; }
.bar .row {
  flex-basis: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.bar .label {
  font: 600 0.72rem/1 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
}

/* Timeline — single column (mobile, and desktop when one company is selected) */
.tl {
  --mo: 34px;
  --rail: 22px;
  --gap: 10px;
  max-width: 640px;
  margin: 0 auto;
  padding: 8px var(--gutter) 24px;
}
.year { margin: 0; }
.year h2 {
  margin: 0;
  padding: 36px 0 14px;
  font: 600 1.9rem/1 var(--serif);
  letter-spacing: -0.01em;
  font-variant-numeric: lining-nums;
}
.year:first-of-type h2 { padding-top: 24px; }
.evs {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
}
.evs::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--mo) + var(--gap) + var(--rail) / 2 - 1px);
  width: 2px;
  background: var(--spine);
  border-radius: 1px;
}
.ev {
  position: relative;
  display: grid;
  grid-template-columns: var(--mo) var(--rail) minmax(0, 1fr);
  column-gap: var(--gap);
  padding: 10px 0;
}
.ev.major { padding: 14px 0; }
.ev[hidden] { display: none; }
.mo {
  grid-column: 1;
  grid-row: 1;
  visibility: hidden;
  padding-top: 0.1rem;
  font: 600 0.72rem/1.4 var(--sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--faint);
  text-align: right;
}
.ev.newmo .mo { visibility: visible; }
html:not(.js) .mo { visibility: visible; }
.dot {
  grid-column: 2;
  grid-row: 1;
  justify-self: center;
  margin-top: 0.3rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--c);
  position: relative;
}
.ev.major .dot {
  width: 14px;
  height: 14px;
  margin-top: 0.2rem;
  background: var(--c);
  box-shadow: 0 0 0 4px var(--bg);
}
/* A milestone (docs/editorial.md, "Importance"): a major with a ring round its dot and a slightly larger title. */
.ev.milestone .dot { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--c); }
.ev.milestone .card h3 { font-size: 1.44rem; }

.card { grid-column: 3; grid-row: 1; min-width: 0; }
.meta {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.meta .provider {
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--c);
  background: var(--soft);
  padding: 1px 7px;
  border-radius: 4px;
}
.meta time { color: var(--muted); font-weight: 500; }
.meta .archived { color: var(--faint); text-underline-offset: 0.18em; }
.meta .archived:hover { color: var(--ink); }
.ev:target .card { background: var(--soft); box-shadow: 0 0 0 8px var(--soft); border-radius: 4px; }
.meta .kind { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.68rem; font-weight: 600; }
.card h3 {
  margin: 4px 0 2px;
  font: 600 1.32rem/1.2 var(--serif);
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.card h3 a {
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.card h3 a:hover { text-decoration-color: currentColor; }
.detail { margin: 0; color: var(--muted); font-size: 0.95rem; line-height: 1.45; text-wrap: pretty; }
.ev.minor .card h3 { font-size: 1.04rem; font-weight: 600; margin-top: 2px; }
.ev.minor .detail { font-size: 0.86rem; color: var(--faint); }

.empty { text-align: center; color: var(--faint); padding: 48px 0; margin: 0; }

/* Footer: a rule, the brand and links, a rule, then the tagline and byline; stacked on phones. Both rules sit inside
   the gutter, so they run the same width. */
.foot {
  max-width: 1080px;
  margin: 48px auto 0;
  padding: 0 var(--gutter) 40px;
  font-size: 0.86rem;
  color: var(--faint);
}
.foot .top, .foot .bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; }
.foot .top, .foot .bottom { padding-top: 20px; border-top: 1px solid var(--rule); }
.foot .bottom { margin-top: 20px; font-size: 0.8rem; }
.foot p { margin: 0; }
.foot .brand { display: inline-flex; align-items: center; gap: 8px; font: 600 1.05rem/1 var(--serif); letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
.foot .brand svg { flex-shrink: 0; }
.foot .brand .tile { fill: var(--ink); }
.foot .brand .mark { fill: var(--bg); }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.foot a { color: var(--muted); text-decoration: none; }
.foot nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 0.18em; }
/* The icons sit in equal boxes, raised from the line box's centre to the name's cap-height centre, so the two marks line up with each other and the name. */
.foot .by { display: flex; align-items: center; gap: 0; line-height: 1; }
.foot .by a { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 24px; }
.foot .by a:first-of-type { margin-left: 5px; }
.foot .by a:last-child { margin-right: -3px; }
.foot .by svg { display: block; width: 14px; height: 14px; transform: translateY(-0.12em); }
.foot .by a:hover { color: var(--ink); }
@media (max-width: 759px) {
  .foot .top, .foot .bottom { flex-direction: column; align-items: flex-start; }
  .foot nav { gap: 8px 18px; }
}

/* Methodology */
.method p, .method li { line-height: 1.6; text-wrap: pretty; }
.method p { margin: 0 0 12px; }
.method ul { margin: 0 0 12px; padding-left: 1.2em; }
.method li + li { margin-top: 6px; }
.method .cite-line code { font-size: 0.85rem; overflow-wrap: anywhere; }

/* Event pages */
.page { max-width: 680px; margin: 0 auto; padding: 32px var(--gutter) 8px; }
.page h1 {
  margin: 10px 0 12px;
  font: 600 clamp(2rem, 6vw, 2.8rem)/1.1 var(--serif);
  text-wrap: balance;
}
.page h2 {
  margin: 36px 0 10px;
  font: 600 0.78rem/1.3 var(--sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
}
.page .lede { margin: 0; font: 400 1.22rem/1.45 var(--serif); color: var(--muted); text-wrap: pretty; }
.event .meta { font-size: 0.82rem; }
.event .meta .importance { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.7rem; font-weight: 600; }
.quote { margin: 24px 0 0; padding: 2px 0 2px 16px; border-left: 3px solid var(--c); }
.quote blockquote { margin: 0; }
.quote p { margin: 0; line-height: 1.55; }
.quote figcaption { margin-top: 6px; font-size: 0.78rem; color: var(--faint); }
.source { margin: 0; display: flex; flex-direction: column; gap: 2px; }
.source a { font-weight: 600; text-underline-offset: 0.18em; overflow-wrap: anywhere; }
.source .where { font-size: 0.82rem; color: var(--faint); }
.bench-page .source + .source { margin-top: 12px; }
.related { list-style: none; margin: 0; padding: 0; }
.related li {
  display: grid;
  grid-template-columns: 7.5em minmax(0, 1fr) auto;
  gap: 4px 12px;
  align-items: baseline;
  padding: 8px 0;
  border-top: 1px solid var(--rule);
}
.related li:last-child { border-bottom: 1px solid var(--rule); }
.related time { font-size: 0.82rem; color: var(--faint); font-variant-numeric: tabular-nums; }
.related .host { font-size: 0.82rem; color: var(--faint); }
.related a { font-weight: 600; text-underline-offset: 0.18em; }
.related .provider { font-size: 0.75rem; font-weight: 600; }
.related .provider { color: var(--c); }
.updates .where { font-size: 0.75rem; color: var(--faint); }
.updates .what { font-weight: 600; }
.updates .lapsed .what, .updates .pending .what { color: var(--muted); }
.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.tags li a {
  display: inline-block;
  background: var(--chip);
  color: var(--muted);
  font-size: 0.8rem;
  padding: 2px 9px;
  border-radius: 999px;
  text-decoration: none;
}
.tags li a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 0.18em; }
.tags li a[aria-current="page"] { background: var(--chip-on); color: var(--chip-on-ink); }

/* Tag pages and the tag list */
.masthead.tag { padding-bottom: 20px; }
.alltags.page { padding-top: 8px; }
main.alltags { padding-top: 32px; }
main.alltags h1 { margin-bottom: 20px; }
.alltags .tags { gap: 8px; }
.alltags .tags li a { font-size: 0.9rem; padding: 4px 12px; }
.back { margin: 36px 0 0; font-size: 0.9rem; }
.back a { color: var(--muted); text-underline-offset: 0.18em; }

/* Mobile: tighter filters */
@media (max-width: 759px) {
  .masthead { padding-top: 24px; padding-bottom: 22px; }
  .related li { grid-template-columns: minmax(0, 1fr) auto; }
  .related time { grid-column: 1 / -1; }
  .updates li { grid-template-columns: minmax(0, 1fr); }
  .updates li > span:empty { display: none; }
  .bar { gap: 6px; padding: 8px var(--gutter); justify-content: space-between; }
  .bar .row { order: 3; gap: 8px; }
  .bar .field { gap: 8px; }
  .bar .row .seg { flex: 1 1 auto; min-width: 0; }
  .row .seg button { flex: 1 1 auto; padding: 7px 4px; }
  .row .seg button[data-value="all"] { min-width: 2.8em; }
  .seg button { font-size: 0.8rem; padding: 7px 10px; min-height: 30px; }
  .seg.pick select { font-size: 0.8rem; padding: 0 28px 0 10px; height: 30px; }
  /* The search box is a row of its own, above the rest; 16px text, so iOS doesn't zoom in on it. */
  .seg.find { flex: 1 1 100%; order: -1; }
  .seg.find input { width: 100%; font-size: 16px; padding: 0 12px 0 33px; height: 30px; }
  .sw { display: none; }
  .seg.menu .open { height: 30px; font-size: 0.8rem; padding: 0 28px 0 10px; }
  /* The sheet is fixed to the screen, so the bar drops its blur while it is open (a backdrop-filter would hold it). */
  .filters.menu-open { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--bg); }
  .seg.menu .pop {
    position: fixed;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-height: 85vh;
    padding: 12px 12px calc(16px + env(safe-area-inset-bottom));
    border-radius: 16px 16px 0 0;
    box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.35);
  }
  .seg.menu .pop ul { columns: 2; column-gap: 4px; }
  .seg.menu .pop li { break-inside: avoid; }
  .seg.menu .pop label { padding: 9px 6px; gap: 8px; }
  .seg.menu .pop .only { padding: 5px 7px; }
  .seg.menu .pop-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 6px 6px; font: 700 1rem/1 var(--sans); color: var(--ink); }
  .seg.menu .pop-head .done { background: var(--chip-on); color: var(--chip-on-ink); padding: 8px 14px; }
  .topbar { gap: 10px; }
  .topbar .links { gap: 10px; }
}
/* Phones: the site name is visually hidden (still in the markup and the accessibility tree) so the
   logo and every nav link, API included, fit (AIT-59). */
@media (max-width: 519px) {
  .topbar .brand .name {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .bench.full thead { display: none; }
  .bench.full tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
  .bench.full td { display: block; border: 0; padding: 0; }
  .bench.full .mdl { width: auto; }
  .bench.full .mdl a { display: inline; }
  .bench.full .src { grid-column: 1; }
  .bench.full .hvc { grid-column: 2; grid-row: 2; align-self: start; padding: 0; width: auto; }
  .bench.models thead { display: none; }
  .bench.models, .bench.models tbody { display: block; }
  .bench.models tr:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 10px 0; border-bottom: 1px solid var(--rule); }
  .bench.models tr > td, .bench.models td.mdl, .bench.models td.num { display: block; border: 0; padding: 0; width: auto; }
  .bench.models .d { grid-column: 1; grid-row: 2; font-size: 0.8rem; color: var(--faint); }
  .bench.models .num { grid-column: 2; grid-row: 1; }
  .bench.models .bl { grid-column: 1 / -1; }
  .bench.models .bl:empty { display: none; }
}
@media (max-width: 379px) {
  .topbar, .topbar .links { gap: 8px; }
  .topbar .brand { gap: 6px; font-size: 0.98rem; }
  .topbar .nav { font-size: 0.78rem; }
  .bar { gap: 6px 4px; }
  .bar .row { gap: 6px; }
  .bar .label { font-size: 0.66rem; letter-spacing: 0.04em; }
  .bar .field { gap: 6px; }
  .seg button { padding: 7px 7px; font-size: 0.76rem; }
  .row .seg button { font-size: 0.74rem; }
  .seg.pick select { font-size: 0.76rem; padding: 0 24px 0 8px; }
  .seg.pick::after { right: 11px; }
}

/* Desktop: the alternating spine (AIT-41). A card takes the other side whenever the provider changes
   (build.py, app.js layout); sides don't stand for providers, so the provider chip stays on every card. */
@media (min-width: 760px) {
  .tl:not(.single) { max-width: 1080px; }

  .tl:not(.single) .year h2 { text-align: center; position: relative; z-index: 1; padding: 44px 0 18px; }
  .tl:not(.single) .year:first-of-type h2 { padding-top: 28px; }
  .tl:not(.single) .year h2 span { background: var(--bg); padding: 0 14px; }
  .tl:not(.single) .evs::before { left: calc(50% - 1px); }
  /* Rows are pulled up beside the other side's card (app.js layout), so a row's empty
     half overlaps the card above it; only the card itself takes the pointer. */
  .tl:not(.single) .ev {
    grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr);
    column-gap: 0;
    pointer-events: none;
  }
  .tl:not(.single) .ev .card { pointer-events: auto; }
  .tl:not(.single) .dot { grid-column: 2; }
  .tl:not(.single) .ev.left .card { grid-column: 1; text-align: right; }
  .tl:not(.single) .ev.left .meta { justify-content: flex-end; }
  .tl:not(.single) .ev.right .card { grid-column: 3; }
  /* Month markers sit on the spine itself, so the sides stay free for interleaving. */
  .tl:not(.single) .ev { grid-template-rows: auto auto; }
  .tl:not(.single) .mo {
    grid-column: 2;
    grid-row: 1;
    display: none;
    justify-self: center;
    position: relative;
    z-index: 1;
    margin: 0 0 3px;
    padding: 2px 0;
    font-size: 0.68rem;
    background: var(--bg);
    text-align: center;
  }
  .tl:not(.single) .ev.newmo .mo { display: block; }
  .tl:not(.single) .dot, .tl:not(.single) .card { grid-row: 2; }
  .tl:not(.single) .card { max-width: 440px; }
  .tl:not(.single) .ev.left .card { justify-self: end; }
  .tl.single { --mo: 44px; --rail: 28px; }
  .tl.single .year h2 { padding-left: calc(var(--mo) + var(--rail) + 10px); }
  .card h3 { font-size: 1.42rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .seg button { transition: background-color 0.15s, color 0.15s; }
}
@media print {
  .filters { display: none; }
}

/* Top bar: the current page's link */
.topbar [aria-current="page"] { color: var(--ink); }

/* Stories: a row per story, newest first: its main image on the left, beside its title, date and description,
   top-aligned, in the same column as the other pages (.page). */
main.stories { max-width: 680px; margin: 0 auto; padding: 32px var(--gutter) 8px; }
main.stories h1 { margin: 0 0 24px; font: 600 clamp(2rem, 6vw, 2.8rem)/1.1 var(--serif); }
main.stories ul { list-style: none; margin: 0; padding: 0; }
main.stories .rows > li {
  display: grid; grid-template-columns: 112px minmax(0, 1fr); grid-template-rows: auto auto auto 1fr;
  grid-template-areas: "shot name" "shot date" "shot sum" "shot ."; gap: 4px 16px; padding: 20px 0; border-top: 1px solid var(--rule);
}
main.stories .rows > li:last-child { border-bottom: 1px solid var(--rule); }
main.stories .shot { grid-area: shot; }
main.stories img { display: block; width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--rule); background: #fff; }
main.stories time { grid-area: date; color: var(--faint); font-size: 0.84rem; }
main.stories .name { grid-area: name; color: var(--ink); font: 600 1.25rem/1.25 var(--serif); text-decoration: none; }
main.stories .name:hover { text-decoration: underline; text-underline-offset: 0.18em; }
main.stories .sum { grid-area: sum; margin: 2px 0 0; color: var(--muted); font-size: 0.95rem; line-height: 1.45; }
@media (min-width: 760px) {
  main.stories .rows > li { grid-template-columns: 180px minmax(0, 1fr); gap: 6px 32px; padding: 28px 0; }
  main.stories .name { font-size: 1.6rem; }
  main.stories .sum { margin-top: 6px; font-size: 1.02rem; }
}

/* A story's page: its title, byline (date and author) and description, then its blocks: each image with the title and subtitle it draws
   and its caption, side by side from 900px, the text scrolling with the image; then its steps and the data it draws
   with its sources, in a narrower column centred under them. The description keeps the reading column. */
.story .lead h1 { margin: 0 0 8px; }
.story .lead .byline { display: flex; align-items: center; gap: 4px; margin: 0 0 12px; color: var(--faint); font-size: 0.84rem; }
.story .lead .byline a { display: inline-flex; padding: 4px; color: inherit; }
.story .lead .byline a:hover { color: var(--ink); }
.story tr.key td:nth-child(2) { font-weight: 600; } /* a turning point in a story's timeline (records `key`) */
.story tr.key td:nth-child(2) .note, .story tr.key td:nth-child(2) .src { font-weight: 400; }
.story .figs { margin-top: 28px; }
.story .fig { margin: 0; padding: 24px 0; border-top: 1px solid var(--rule); }
.story .fig img { display: block; width: 100%; max-width: 540px; height: auto; border-radius: 10px; border: 1px solid var(--rule); background: #fff; }
.story .fig.wide img { max-width: 720px; } /* a 16:9 image (its format) gets more width, so its type reads at the same size */
.story .fig figcaption { margin-top: 16px; }
.story .fig .fig-title { margin: 0 0 6px; font: 600 1.4rem/1.25 var(--serif); letter-spacing: 0; text-transform: none; color: var(--ink); text-wrap: balance; }
.story .fig figcaption p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--ink); text-wrap: pretty; }
.story .fig figcaption .fig-sub { margin-bottom: 12px; font-weight: 600; line-height: 1.45; }
.story .fig .dl-row { margin: 14px 0 0; }
.story .dl {
  display: inline-flex; align-items: center; min-height: 32px; padding: 6px 14px; border-radius: 999px;
  background: var(--chip-on); color: var(--chip-on-ink); font: 500 0.84rem/1 var(--sans); text-decoration: none;
}
.story .fig figcaption .fig-note { margin-top: 12px; font-size: 0.84rem; line-height: 1.5; color: var(--faint); }
@media (min-width: 900px) {
  .story { max-width: 1040px; }
  .story .lead { max-width: 720px; }
  .story > section, .story > .back { max-width: 820px; margin-left: auto; margin-right: auto; }
  .story .fig { display: grid; grid-template-columns: 460px minmax(0, 1fr); gap: 40px; align-items: start; padding: 36px 0; }
  .story .fig.wide { grid-template-columns: 620px minmax(0, 1fr); }
  .story .fig figcaption { margin-top: 0; }
  .story .fig .fig-title { font-size: 1.6rem; }
}
.data { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.data th { text-align: left; font: 600 0.72rem/1.3 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); padding: 0 8px 8px 0; border-bottom: 1px solid var(--rule); }
.data td { padding: 10px 8px 10px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.data .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; padding-right: 16px; }
.data .mdl a { font-weight: 600; text-underline-offset: 0.18em; }
.data .mdl a, .data .mdl time, .data .note, .data .src a { display: block; }
.data time, .data .note, .data .where { font-size: 0.8rem; color: var(--faint); }
.data .src a { text-underline-offset: 0.18em; overflow-wrap: anywhere; }
.data .src a.where { margin-top: 2px; }
.caveat { display: block; font-size: 0.8rem; color: var(--muted); font-style: italic; }
.data .note + .src a { margin-top: 4px; font-size: 0.8rem; }
.data .mdl { width: 45%; }
.data .mdl a.cite { display: inline; font-weight: 400; font-size: 0.8rem; }
.data .evidence { display: block; margin-top: 4px; font-size: 0.8rem; font-weight: 400; color: var(--muted); }
.data .mdl .evidence a { display: inline; font-weight: 400; }
.data.cves { margin-top: 28px; } /* a story's CVEs and their records' credits, under its timeline (AIT-155) */
.data .note-inline { font-size: 0.8rem; color: var(--faint); }
/* A story's large moves (AIT-149): on a phone each cause runs under its model and change, full width */
@media (max-width: 519px) {
  .data.moves thead { display: none; }
  .data.moves tr { display: grid; grid-template-columns: 1fr auto; border-bottom: 1px solid var(--rule); }
  .data.moves td { border-bottom: 0; }
  .data.moves .mdl { width: auto; }
  .data.moves td:last-child { grid-column: 1 / -1; padding-top: 0; }
}

/* Benchmarks (AIT-54): a model's results on its event page, and a page per benchmark with its chart */
.bench { width: 100%; border-collapse: collapse; font-size: 0.92rem; font-variant-numeric: tabular-nums; }
.bench th { text-align: left; font: 600 0.72rem/1.3 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); padding: 0 8px 8px 0; border-bottom: 1px solid var(--rule); }
.bench td { padding: 9px 8px 9px 0; border-bottom: 1px solid var(--rule); vertical-align: baseline; }
.bench .num { text-align: right; white-space: nowrap; font-weight: 600; }
.bench th.num { font-weight: 600; }
.bench td a { font-weight: 600; text-underline-offset: 0.18em; }
.bench .set { display: block; font-size: 0.78rem; color: var(--faint); font-weight: 400; }
.bench .set a { font-weight: 400; color: var(--muted); }
.bench .hvc { text-align: right; white-space: nowrap; width: 1%; padding-left: 12px; }
.bench .hv { font-size: 0.75rem; font-weight: 600; padding: 1px 7px; border-radius: 999px; }
.bench .hvc details, .bench .hvc .v-src { display: block; font-size: 0.78rem; line-height: 1.45; color: var(--muted); }
.bench .hvc summary { display: inline; list-style: none; cursor: help; }
.bench .hvc summary::-webkit-details-marker { display: none; }
.bench .hvc summary u { text-decoration: underline dotted; text-decoration-color: var(--faint); text-underline-offset: 0.2em; }
.bench .hvc .v-why { display: block; width: 15em; max-width: 15em; margin: 2px 0 4px auto; white-space: normal; color: var(--faint); }
.bench .hvc .v-src { max-width: 12em; margin-left: auto; white-space: normal; }
.bench .hvc .v-why .v-src { display: inline; max-width: none; margin: 0; }
.bench .hvc .v-src a { white-space: nowrap; font-weight: 600; color: var(--muted); margin-left: 6px; }
.bench .hvc .v-ico { width: 0.95em; height: 0.95em; margin-left: 3px; vertical-align: -0.12em; color: var(--ink); }
@media (max-width: 519px) {
  .bench .hvc details, .bench .hvc .v-src { font-size: 0.74rem; }
  .bench .hvc .v-src { max-width: 9em; }
  .bench .hvc .v-why { width: 11em; max-width: 11em; }
}
.bench .lab { font-weight: 600; color: var(--c); }
.bench .mdl { width: 32%; }
.bench .mdl a { display: block; }
.bench .src a { font-weight: 400; overflow-wrap: anywhere; }
.bench .src a.img { display: block; font-size: 0.78rem; color: var(--muted); margin-top: 2px; }
.bench tr.alt td { color: var(--muted); }
.bench tr.alt .num { font-weight: 400; }
.bench .num a.srcnum { font-weight: inherit; color: inherit; }
.bench:not(.full) tr:has(+ tr.alt) td { border-bottom: 0; padding-bottom: 3px; }
.bench:not(.full) tr.alt td { padding-top: 3px; }
.reported { margin: 14px 0 6px; font-size: 0.78rem; color: var(--faint); }
.docs { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.docs > li > a { font-weight: 600; text-underline-offset: 0.18em; }
.docs .where { display: block; font-size: 0.8rem; color: var(--faint); }
/* An event page: the title, then one level of sections (the source, each model by name, related events, tags),
   headed alike in the page's h2 style (AIT-176), then their content. */
.event h2 { scroll-margin-top: 16px; }
.event .mdl .none { margin: 0; color: var(--muted); }
.event .mdl .none a { white-space: nowrap; }
.srcs { margin-top: 14px; }
.srcs > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; font-size: 0.92rem; font-weight: 400; color: var(--muted); }
.srcs > summary::-webkit-details-marker { display: none; }
.srcs > summary::before { content: ""; border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; transition: transform 0.15s; }
.srcs[open] > summary::before { transform: rotate(90deg); }
.srcs > summary:hover { color: var(--ink); }
/* The toggle and what it opens read as body text, a step below the section headings (AIT-176). */
.srcs .reported { margin: 10px 0 6px; font-size: 0.92rem; color: var(--muted); }
.srcs .docs > li > a { font-weight: 400; font-size: 0.92rem; }
.srcimg { margin: 8px 0 0; }
.srcimg img { display: block; width: 100%; height: auto; border: 1px solid var(--rule); border-radius: 8px; background: #fff; }
.srcimg figcaption { font-size: 0.78rem; margin-top: 4px; color: var(--muted); }
.srcimg figcaption a { color: var(--muted); }
.kicker { margin: 0; font-size: 0.82rem; color: var(--faint); }
/* A benchmark's status (AIT-120): Active on the ranking green, Inactive on the chip grey */
.bst { display: inline-block; font-size: 0.75rem; line-height: 1.5; padding: 0 8px; border-radius: 999px; font-weight: 500; }
.bst.active { background: var(--r2); color: var(--ink); }
.bst.inactive { background: var(--chip); color: var(--muted); }
.pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 4px; }
.pills a { font-size: 0.8rem; padding: 3px 11px; border-radius: 999px; background: var(--chip); color: var(--muted); text-decoration: none; }
.pills a[aria-current] { background: var(--chip-on); color: var(--chip-on-ink); }
.chart { margin: 16px 0 0; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .cm { display: none; }
.chart .ax { stroke: var(--rule); }
.chart .tick { fill: var(--faint); font-family: var(--sans); }
.chart .pl { fill: var(--ink); font-family: var(--sans); font-weight: 600; }
.chart .pm { fill: var(--muted); font-family: var(--sans); }
.legend { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 0.78rem; color: var(--muted); }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); border: 2px solid var(--c); }
.legend .later i { background: var(--bg); border: 2px solid var(--faint); }
.blist { list-style: none; margin: 0; padding: 0; }
.blist li { border-top: 1px solid var(--rule); }
.blist li:last-child { border-bottom: 1px solid var(--rule); }
.blist a { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; font-weight: 600; text-decoration: none; }
.blist a:hover { text-decoration: underline; text-underline-offset: 0.18em; }
.blist .set { margin-left: 4px; font-weight: 400; color: var(--faint); font-size: 0.85rem; white-space: nowrap; }
.blist .nm { display: flex; flex-direction: column; gap: 2px; }
.blist .by { font-weight: 400; color: var(--faint); font-size: 0.8rem; }
.blist .by .d { white-space: nowrap; }
main.benchmarks h1 { margin-bottom: 20px; }
/* Coverage (AIT-113, AIT-112): the benchmarks' table on /benchmarks and the models' tables on /models */
.bench.cov td { padding: 11px 8px 11px 0; }
.bench.cov .st { font-weight: 400; color: var(--faint); font-size: 0.85rem; white-space: nowrap; }
.bench.cov .set .d { white-space: nowrap; }
.bench.cov .num, .bench.models .num { width: 1%; padding-left: 16px; }
/* /coverage (AIT-133): the dataset's counts, a table per breakdown */
.coverage .bench tbody th { font: inherit; text-transform: none; letter-spacing: 0; color: var(--ink); padding: 11px 8px 11px 0; border-bottom: 1px solid var(--rule); }
.coverage .bench thead th.num { white-space: normal; }
.coverage .bench td.num { font-weight: 400; }
.coverage .bench.totals td.num, .coverage .bench.imp td.num, .coverage .bench.checks td.num { font-weight: 600; }
@media (max-width: 519px) {
  .coverage .bench { font-size: 0.86rem; }
  .coverage .bench.cov .num { padding-left: 8px; }
  .coverage .bench thead th { font-size: 0.64rem; letter-spacing: 0.02em; }
}
.cov-wrap { overflow-x: auto; }
.models-head { padding-bottom: 12px; }
.models-head h1 { margin-bottom: 0; }
main.models { padding-top: 8px; }
.bench.models .mdl { width: 34%; }
.bench.models .mdl a { display: inline; }
.bench.models td.d { white-space: nowrap; color: var(--muted); }
.bench.models td.bl { font-size: 0.85rem; color: var(--faint); }
.bench.models .bl a { font-weight: 400; color: var(--muted); }
.bench.models .none { color: var(--faint); font-weight: 400; }
/* Fixed column widths, so every provider's table lines up. */
@media (min-width: 520px) {
  .bench.models { table-layout: fixed; }
  .bench.models .d { width: 7.5rem; }
  .bench.models .num { width: 5rem; padding-right: 16px; }
}
@media (max-width: 759px) {
  .chart .cd { display: none; }
  .chart .cm { display: block; }
}

/* The flagship table on /benchmarks (AIT-62): 1st and 2nd by cell colour, 1st also by weight; the text stays the
   page's ink */
:root { --r1: #a6dcba; --r2: #d9f1e1; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --r1: #226641; --r2: #1a442f; }
}
:root[data-theme="dark"] { --r1: #226641; --r2: #1a442f; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
main.benchmarks h2 { margin-top: 28px; }
.lb-wrap { overflow-x: auto; margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter); }
.lb { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; }
.lb th, .lb td { padding: 10px 12px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.lb thead th { text-align: right; vertical-align: bottom; font: 600 0.92rem/1.25 var(--sans); }
.lb thead th a { text-decoration: none; }
.lb thead th a:hover { text-decoration: underline; text-underline-offset: 0.18em; }
.lb thead th.corner { text-align: left; font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); }
.lb .sub { display: block; margin-top: 2px; font-size: 0.76rem; font-weight: 400; color: var(--faint); }
.lb .lab { font-weight: 600; color: var(--c); }
.lb tbody th { text-align: left; font-size: 0.92rem; font-weight: 600; }
.lb tbody th a { text-underline-offset: 0.18em; }
.lb th:first-child { position: sticky; left: 0; z-index: 1; min-width: 150px; padding-left: 0; background: var(--bg); }
.lb td { text-align: right; white-space: nowrap; }
.lb td .sc { color: inherit; text-decoration: none; }
.lb td .sc:hover { text-decoration: underline; text-underline-offset: 0.18em; }
.lb td.none { color: var(--faint); }
.lb td.r1 { background: var(--r1); font-weight: 800; }
.lb td.r2 { background: var(--r2); }
@media (max-width: 519px) {
  .lb th, .lb td { padding: 9px 8px; }
  .lb th:first-child { min-width: 112px; max-width: 128px; padding-left: 0; }
  .lb tbody th { font-size: 0.84rem; }
  .lb thead th { font-size: 0.82rem; }
  .lb td { font-size: 0.92rem; }
}


/* The home page (AIT-147): the name, tagline and search; the coverage figures; the latest events beside the latest
   stories; then the tags of the latest events, four across, each with its latest events on a spine. */
.front { max-width: 1080px; margin: 0 auto; padding: 0 var(--gutter) 8px; }
.front .masthead { padding-left: 0; padding-right: 0; }
.front h2 { margin: 0 0 12px; font: 600 0.78rem/1.3 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.front section { margin-top: 40px; }
.front ol, .front ul { list-style: none; margin: 0; padding: 0; }
.front .more { margin: 12px 0 0; font-size: 0.9rem; }
.front .more a { color: var(--muted); text-underline-offset: 0.18em; }
.front .more a:hover { color: var(--ink); }
.find-home { position: relative; max-width: 420px; margin: 20px auto 0; }
.find-home svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--faint); }
.find-home input {
  width: 100%; appearance: none; border: 1px solid var(--rule); background: var(--chip-raised); color: var(--ink);
  font: inherit; font-size: 0.95rem; padding: 9px 14px 9px 36px; border-radius: 999px;
}
.front .f-cov { margin-top: 8px; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.stats li + li { border-left: 1px solid var(--rule); }
.stats a { display: flex; flex-direction: column; align-items: center; padding: 14px 6px; text-decoration: none; text-align: center; }
.stats strong { font: 600 1.7rem/1.1 var(--serif); font-variant-numeric: tabular-nums; }
.stats span { margin-top: 4px; font-size: 0.75rem; color: var(--faint); text-transform: uppercase; letter-spacing: 0.06em; }
.stats a:hover span { color: var(--ink); }
/* An event in a list: its dot drawn for its importance as the timeline's (.ev .dot): minor hollow, major filled and
   larger, a milestone ringed. */
.mini li { position: relative; padding: 9px 0 9px 24px; border-top: 1px solid var(--rule); }
.mini li:last-child { border-bottom: 1px solid var(--rule); }
.mini .dot { position: absolute; left: 7px; top: 19px; width: 9px; height: 9px; transform: translate(-50%, -50%); border-radius: 50%; border: 2px solid var(--c); background: var(--bg); }
.mini .major .dot { width: 14px; height: 14px; background: var(--c); box-shadow: 0 0 0 3px var(--bg); }
.mini .milestone .dot { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--c); }
.mini .meta { font-size: 0.72rem; }
.mini .t { display: block; margin-top: 2px; font: 600 1.02rem/1.3 var(--serif); text-decoration: none; text-wrap: pretty; }
.mini .minor .t { font: 600 0.92rem/1.35 var(--sans); }
.mini .t:hover { text-decoration: underline; text-underline-offset: 0.18em; }
.mini.spine { position: relative; }
.mini.spine::before { content: ""; position: absolute; left: 6px; top: 18px; bottom: 18px; width: 2px; background: var(--spine); }
.mini.spine li { border: 0; padding: 6px 0 6px 24px; }
.mini.spine .dot { top: 16px; }
.f-cols { display: grid; gap: 0 48px; }
.f-stories .cards { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.f-stories img { display: block; width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--rule); background: #fff; }
.f-stories .name { display: block; margin-top: 8px; font: 600 1.05rem/1.25 var(--serif); text-decoration: none; }
.f-stories .name:hover { text-decoration: underline; text-underline-offset: 0.18em; }
.f-stories time { display: block; font-size: 0.78rem; color: var(--faint); }
.tagcards { display: grid; gap: 28px; }
.tagcard h3 { margin: 0 0 8px; font: 600 1.25rem/1.2 var(--serif); }
.tagcard h3 a { text-decoration: none; }
.tagcard h3 a:hover { text-decoration: underline; text-underline-offset: 0.18em; }
@media (min-width: 600px) { .tagcards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) {
  .f-cols { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  .f-stories .cards { grid-template-columns: 1fr; gap: 0; }
  .f-stories .cards li { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 2px 16px; padding: 14px 0; border-top: 1px solid var(--rule); }
  .f-stories .cards li:last-child { border-bottom: 1px solid var(--rule); }
  .f-stories .shot { grid-row: 1 / 3; }
  .f-stories .name { margin-top: 0; font-size: 1.15rem; }
}
@media (min-width: 1000px) { .tagcards { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px 32px; } }
@media (max-width: 599px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .stats li:nth-child(3) { border-left: 0; }
  .stats li:nth-child(n+3) { border-top: 1px solid var(--rule); }
  .f-stories .cards { grid-template-columns: repeat(3, 72%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .f-stories .cards li { scroll-snap-align: start; }
}