/* The two typefaces, served from the site itself (no request to Google): the Latin subsets Google Fonts serves,
   one variable file each (weights 400–700 and 400–600). A character outside the range falls back to the system
   font. The file names carry the fonts' versions, so they are kept for a year like the CSS (site_publisher). */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(/assets/inter-v20-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/assets/jetbrains-mono-v24-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root,
[data-theme="light"] {
  --canvas: #f4f1eb;
  --surface: #ffffff;
  --surface-2: #faf8f4;
  --fg: #1a1816;
  --fg-2: #3d3a35;
  --muted: #6b665e;
  --faint: #706b63;  /* small notes: 4.7:1 on the canvas, 5.3:1 on a card (WCAG asks 4.5:1) */
  --line: rgba(26, 24, 22, 0.08);
  --line-2: rgba(26, 24, 22, 0.14);
  --accent: #0e7468;
  --accent-hover: #0a5d54;
  --accent-soft: rgba(14, 116, 104, 0.08);
  --accent-line: rgba(14, 116, 104, 0.24);
  --on-accent: #f7fbfa;
  --rumour: #8a4b06;  /* the Rumours column's "Rumour" pill: 5.2:1 on its tint */
  --rumour-soft: rgba(138, 75, 6, 0.10);
  --rumour-line: rgba(138, 75, 6, 0.30);
  --shadow: 0 1px 2px rgba(26, 24, 22, 0.04), 0 0 0 0.5px rgba(26, 24, 22, 0.06);
  --shadow-lift: 0 1px 2px rgba(26, 24, 22, 0.05), 0 6px 18px rgba(26, 24, 22, 0.06), 0 0 0 0.5px rgba(26, 24, 22, 0.07);
  --topbar: rgba(255, 255, 255, 0.78);  /* a touch lighter than the canvas, so the bar reads as a bar */
  color-scheme: light;
}

[data-theme="dark"] {
  --canvas: #0e0e0e;
  --surface: #181818;
  --surface-2: #1e1e1e;
  --fg: #efefef;
  --fg-2: #cecece;
  --muted: #8e8e8e;
  --faint: #888888;  /* 5.4:1 on the canvas, 5:1 on a card */
  --line: rgba(255, 255, 255, 0.07);
  --line-2: rgba(255, 255, 255, 0.12);
  --accent: #2fd2bd;
  --accent-hover: #63e8d6;
  --accent-soft: rgba(47, 210, 189, 0.12);
  --accent-line: rgba(47, 210, 189, 0.28);
  --on-accent: #07110f;
  --rumour: #f2b25c;  /* 8.1:1 on its tint */
  --rumour-soft: rgba(242, 178, 92, 0.14);
  --rumour-line: rgba(242, 178, 92, 0.32);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 0 0.5px rgba(255, 255, 255, 0.06);
  --shadow-lift: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 18px rgba(0, 0, 0, 0.35), 0 0 0 0.5px rgba(255, 255, 255, 0.08);
  --topbar: rgba(28, 28, 28, 0.85);  /* a touch lighter than the canvas, so the bar reads as a bar */
  color-scheme: dark;
}

/* Type — every font family and size on the site comes from here. */
:root {
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --text-2xs: 0.7rem;                          /* labels, badges, axis ticks */
  --text-xs: 0.75rem;                          /* dates, notes, meta lines */
  --text-sm: 0.85rem;                          /* list rows, nav, UI copy */
  --text-base: 1rem;                           /* story titles in lists */
  --text-md: 1.05rem;                          /* reading text */
  --text-lg: 1.2rem;                           /* section headings, story lede */
  --text-xl: 1.5rem;                           /* page title bar, fact values */
  --text-2xl: clamp(1.9rem, 4.4vw, 2.75rem);   /* page headline */
  --text-stat: clamp(2rem, 3.6vw, 2.4rem);     /* big headline numbers */
}

* { box-sizing: border-box; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: 4.75rem;  /* anchor jumps (/models/#rh-h) land below the sticky top bar (3.5rem + air) */
}

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--canvas);
  color: var(--fg);
  font-family: var(--font-sans);
  font-feature-settings: "cv11", "ss01";
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--accent); }

/* Headings — h1 is the page headline, h2 a section, h3 a sub-section. */
h1, h2, h3 { margin: 0; font-weight: 650; }
h1 { font-size: var(--text-2xl); line-height: 1.1; letter-spacing: -0.03em; text-wrap: balance; }
h2 { font-size: var(--text-lg); line-height: 1.25; letter-spacing: -0.015em; }
h3 { font-size: var(--text-md); line-height: 1.3; letter-spacing: -0.01em; }

::selection { background: var(--accent); color: var(--on-accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* Centre on the viewport (100vw), not the body: a scrollbar on long pages
   would otherwise shift the column sideways vs short pages like About. */
.shell {
  width: min(100% - 2rem, 75rem);
  margin-left: calc((100vw - min(100vw - 2rem, 75rem)) / 2);
  margin-right: 0;
}

/* ── Top bar ─────────────────────────────────────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--topbar);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
}

.topbar-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.5rem;
}

.topbar-start,
.topbar-end {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-width: 0;
}
.topbar-end { gap: 0.6rem; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: var(--text-base);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.brand:hover { color: var(--fg); }
.brand-mark {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 3px;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.nav { display: flex; align-items: center; gap: 0.25rem; }
.nav-link {
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
}
/* The page you're on keeps the hover background as its "you are here" marker. */
.nav-link.is-on { color: var(--fg); background: var(--line); }
/* Real pointers only — a tap leaves :hover stuck on touch. */
@media (hover: hover) {
  .nav-link:not(.is-on):hover { color: var(--fg); background: var(--line); }
}

.search {
  position: relative;
  display: flex;
  align-items: center;
  width: 15rem;
}
.search-icon {
  position: absolute;
  left: 0.65rem;
  color: var(--faint);
  pointer-events: none;
}
.search input {
  width: 100%;
  height: 2rem;
  padding: 0 2rem 0 2rem;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  font-size: var(--text-sm);
  box-shadow: var(--shadow);
  -webkit-appearance: none;
  appearance: none;
}
.search input::placeholder { color: var(--faint); }
.search input:focus {
  outline: none;
  border-color: var(--accent-line);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.search-kbd {
  position: absolute;
  right: 0.5rem;
  padding: 0 0.35rem;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  line-height: 1.15rem;
  color: var(--faint);
  pointer-events: none;
}
/* Once you're typing the "/" hint hides, so drop its room and the native ✕ sits flush right. */
.search input:focus, .search input:not(:placeholder-shown) { padding-right: 0.6rem; }
.search input:focus ~ .search-kbd, .search input:not(:placeholder-shown) ~ .search-kbd { display: none; }

/* Search-as-you-type dropdown (site.js → /api/search). */
.search-drop {
  position: absolute;
  top: calc(100% + 0.4rem);
  right: 0;
  z-index: 20;
  width: min(30rem, calc(100vw - 2rem));
  max-height: min(32rem, 70vh);
  overflow-y: auto;
  padding: 0.3rem;
  border: 1px solid var(--line-2);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow-lift);
}
.search-hit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.15rem 0.75rem;
  padding: 0.55rem 0.7rem;
  border-radius: 7px;
  color: var(--fg);
  text-decoration: none;
}
.search-hit:hover, .search-hit.is-active, .search-all:hover, .search-all.is-active { background: var(--accent-soft); }
.search-hit-title { font-size: var(--text-sm); font-weight: 600; }
.search-hit-date { grid-row: 1; grid-column: 2; font-size: var(--text-2xs); color: var(--faint); white-space: nowrap; }
.search-hit-snip {
  grid-column: 1 / -1;
  font-size: var(--text-xs);
  color: var(--muted);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.search-all {
  display: block;
  margin-top: 0.2rem;
  padding: 0.55rem 0.7rem;
  border-top: 1px solid var(--line);
  border-radius: 0 0 7px 7px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.search-drop-sorts { padding: 0.3rem 0.4rem 0.45rem; margin-bottom: 0.2rem; border-bottom: 1px solid var(--line); }
.search-sorts button.pill { font-family: inherit; background: transparent; cursor: pointer; }
@media (hover: hover) { .search-sorts button.pill:not(.is-on):hover { color: var(--fg); } }
.search-empty { margin: 0; padding: 0.75rem 0.8rem; font-size: var(--text-sm); color: var(--muted); }
mark { background: var(--accent-soft); color: inherit; border-radius: 3px; padding: 0 0.1em; }

/* /search/ — every match as plain rows. */
.search-page { max-width: 48rem; }
.search-sorts { display: flex; gap: 0.4rem; }
.search-sorts .pill { text-decoration: none; }
.search-sorts .pill.is-on { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.search-pager { display: flex; justify-content: space-between; margin-top: 1.2rem; }

.themes {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 8px;
  border: 1px solid var(--line-2);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.themes button {
  appearance: none;
  width: 1.75rem;
  height: 1.6rem;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--faint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.themes button:hover { color: var(--fg); }

html[data-theme="light"] .themes [data-theme-set="light"],
html[data-theme="dark"] .themes [data-theme-set="dark"] {
  background: var(--accent-soft);
  color: var(--accent);
}

/* ── Shared bits ─────────────────────────────────────── */

main {
  flex: 1;
  padding: 1.1rem 0 4rem;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
}

.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--line);
}
/* Article lists sit on the canvas — no card — under a hairline label. */
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line-2);
}
/* Small-caps label — the one style for every section, column and field name. */
.label,
.mtable td::before {
  font-size: var(--text-2xs);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.section-note {
  font-size: var(--text-xs);
  color: var(--faint);
}
.card-foot {
  margin: 0;
  padding: 0.5rem 1rem;
  border-top: 1px solid var(--line);
  font-size: var(--text-xs);
  color: var(--muted);
}
.card-foot a { color: var(--fg-2); text-decoration: none; font-weight: 500; }
.card-foot a:hover { color: var(--accent); }

/* Badges — one shape everywhere. Plain .pill is neutral; the variants colour it. */
.pill {
  display: inline-flex;
  align-items: center;
  height: 1.35rem;
  padding: 0 0.5rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-size: var(--text-2xs);
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}
.pill-accent,
.pill-age[data-age="new"] {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
}
.pill-lab {
  border-color: color-mix(in srgb, var(--lab, var(--accent)) 40%, transparent);
  color: var(--fg);
  font-weight: 600;
}
.pill-lab .swatch { width: 0.5rem; height: 0.5rem; margin-right: 0.35rem; border-radius: 50%; }
/* A story's category: a grey chip — colour on the site belongs to the makers. Sans even inside a mono line (the
   story page's meta row). After a row's title it follows the last word, a space before it (no margin, so a chip
   that wraps starts flush left). */
.pill-cat {
  height: 1.25rem;
  padding: 0 0.45rem;
  border: 0;
  border-radius: 4px;
  background: var(--line-2);
  font-family: var(--font-sans);
  color: var(--fg-2);
  font-weight: 600;
  letter-spacing: 0;
}
.row-title .pill-cat { vertical-align: 0.12em; }
/* Days since: borderless until new (green), then fades as it ages. */
.pill-age { padding: 0 0.4rem; border-color: transparent; font-weight: 600; color: var(--fg-2); }
.pill-age[data-age="aging"] { color: var(--muted); }
.pill-age[data-age="stale"] { color: var(--faint); }

.lede {
  margin: 0;
  color: var(--muted);
}

.more {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
.more:hover { color: var(--accent-hover); }
.more span { transition: transform 0.15s ease; }
.more:hover span { transform: translateX(2px); }

.crumb {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 1.5rem;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
}
.crumb:hover { color: var(--accent); }

/* ── Home ────────────────────────────────────────────── */

.board {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 21rem;
  grid-template-areas:
    "lead  side"
    "river side";
  grid-template-rows: auto 1fr;
  gap: 2rem 3rem;
  align-items: start;
}
.lead { grid-area: lead; }
.river { grid-area: river; }
/* The side: the Rumours column on top of the rail. Wide screens split them into two columns (below). */
.side {
  grid-area: side;
  display: grid;
  gap: 1.25rem;
  align-content: start;
  min-width: 0;
}
.rail {
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 1180px) {
  .board {
    grid-template-columns: minmax(0, 1fr) 17rem 21rem;
    grid-template-areas:
      "lead  lead  rail"
      "river heard rail";
    column-gap: 2.25rem;
  }
  .side { display: contents; }
  .heard { grid-area: heard; }
  .rail { grid-area: rail; align-content: start; }
}

/* Rumours: what's heard on X that isn't official (x_scout.py) — a pill for what it is, who said it, when, the start
   of the post, and a link to the whole post on X. */
.heard { min-width: 0; }
.heard-list { list-style: none; margin: 0; padding: 0; }
.heard-row { padding: 0.8rem 0; border-bottom: 1px solid var(--line); }
.heard-top { display: flex; align-items: center; gap: 0.45rem; min-width: 0; font-size: var(--text-xs); }
.heard-who {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: var(--fg);
  text-decoration: none;
}
.heard-who:hover { color: var(--accent); }
.heard-time { margin-left: auto; flex-shrink: 0; font-size: var(--text-2xs); color: var(--faint); }
.heard-text {
  margin: 0.4rem 0 0.3rem;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--fg-2);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.heard-title { margin: 0.4rem 0 0; font-size: var(--text-sm); font-weight: 650; line-height: 1.4; }
.heard-title a { color: var(--fg); text-decoration: none; }
.heard-title a:hover { color: var(--accent); }
.heard-title + .heard-text { margin-top: 0.2rem; -webkit-line-clamp: 3; }
.heard-link { font-size: var(--text-xs); font-weight: 500; color: var(--muted); text-decoration: none; }
.heard-link:hover { color: var(--accent); }
.heard-empty { margin: 0.8rem 0 0; font-size: var(--text-sm); color: var(--faint); }
.pill-heard[data-kind="rumour"] { border-color: var(--rumour-line); background: var(--rumour-soft); color: var(--rumour); }
/* The rail scrolls with the page: with the model boxes it's taller than most screens, and a sticky rail
   that doesn't fit hides its bottom. */

.lead {
  padding: 0;  /* the top story's first line lines up with the rail's first heading */
}
.lead-top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  font-size: var(--text-xs);
  color: var(--faint);
}
.lead h1 { margin-bottom: 0.75rem; }
.lead h1 a { text-decoration: none; }
.lead .lede {
  font-size: var(--text-md);
  line-height: 1.55;
  max-width: 42rem;
  margin-bottom: 1.1rem;
}

.rows {
  list-style: none;
  margin: 0;
  padding: 0;
}
.row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.25rem;
  align-items: baseline;
  padding: 1rem 0;
  border-top: 1px solid var(--line);
}
.row:first-child { border-top: 0; }
.row-link { text-decoration: none; min-width: 0; }
.row-title {
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.row-link:hover .row-title { color: var(--accent); }
.row-lede {
  margin: 0.25rem 0 0;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.row-date {
  font-size: var(--text-xs);
  color: var(--faint);
  white-space: nowrap;
}

/* Story images (rank 8+): a 3:2 thumbnail to the right of the story in the lists and on the top story. */
/* Lists: the date keeps the right edge, the image sits under it; the title and lede span both rows. */
.row.has-img { grid-template-columns: minmax(0, 1fr) 8.5rem; gap: 0.45rem 1.25rem; align-items: start; }
.row.has-img .row-link { grid-column: 1; grid-row: 1 / span 2; }
.row.has-img .row-date { grid-column: 2; grid-row: 1; justify-self: end; padding-top: 0.2rem; }
.row.has-img .row-img { grid-column: 2; grid-row: 2; }
.row-img, .lead-img { display: block; border-radius: 6px; overflow: hidden; background: var(--line); }
.row-img img, .lead-img img, .story-img img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
/* Top story: the pills stay above; the image starts level with the headline, beside it and the lede. */
.lead.has-img { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: 0 1.5rem; align-items: start; }
.lead.has-img .lead-text { display: contents; }
.lead.has-img .lead-top { grid-column: 1; grid-row: 1; }
.lead.has-img h1 { grid-column: 1; grid-row: 2; }
.lead.has-img .lede { grid-column: 1; grid-row: 3; }
.lead.has-img .lead-img { grid-column: 2; grid-row: 2 / span 2; margin-top: 0.35rem; border-radius: 8px; }
.story-img { margin: 0.9rem 0 1.25rem; border-radius: 10px; overflow: hidden; background: var(--line); }
@media (max-width: 640px) {
  /* Date on top like every other row here; the image beside the title and lede. */
  .row.has-img { grid-template-columns: minmax(0, 1fr) 5.5rem; gap: 0.3rem 0.9rem; }
  .row.has-img .row-date { grid-column: 1; grid-row: 1; justify-self: start; padding-top: 0; }
  .row.has-img .row-link { grid-column: 1; grid-row: 2; }
  .row.has-img .row-img { grid-column: 2; grid-row: 2; }
  /* Top story: the image first, full width, then the pills, headline and lede. */
  .lead.has-img { grid-template-columns: minmax(0, 1fr); }
  .lead.has-img .lead-img { grid-column: 1; grid-row: 1; margin: 0 0 1rem; }
  .lead.has-img .lead-top { grid-row: 2; }
  .lead.has-img h1 { grid-row: 3; }
  .lead.has-img .lede { grid-row: 4; }
}

/* One line per story: title + date. */
.rows-compact .row { padding: 0.45rem 0; gap: 1rem; }
.rows-compact .row-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
  font-weight: 550;
}

.rows-tight .row {
  grid-template-columns: 1fr;
  gap: 0.2rem;
  padding: 0.75rem 0;
}
.rows-tight .row-title { font-size: var(--text-sm); font-weight: 550; }
/* Article foot: sources the story draws on, then its update log. */
.story-foot { margin-top: 2rem; padding-top: 0.9rem; border-top: 1px solid var(--line); }
.story-foot .label { margin-bottom: 0.5rem; }
.story-sources, .story-updates { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; font-size: var(--text-sm); }
.story-sources a { color: var(--fg-2); text-decoration: none; font-weight: 500; }
.story-sources a:hover { color: var(--accent); }
.story-updates time { margin-right: 0.5rem; font-size: var(--text-xs); color: var(--faint); }

/* Highlights: one line per story — title (cut with …, full on hover), then its date. */
.recent .rows-tight .row { padding: 0.42rem 0; }
/* Highlights: every row two lines tall — the title up to two lines, its category chip top-right. */
.hl-link .row-title { display: flex; align-items: flex-start; gap: 0.45rem; line-height: 1.4; }
.hl-t { flex: 1; min-width: 0; min-height: 2.8em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hl-cat { flex-shrink: 0; }
.hl-cat .pill-cat { vertical-align: top; }

/* Benchmarks — one line per model; the score (0–100) shades the row behind it in its maker's colour
   (.lab-<slug> → --lab, the same colours as the Models pages; an unknown maker stays in the accent). */
.bench-index {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--fg-2);
  text-decoration: none;
}
.bench-list {
  list-style: none;
  margin: 0;
  padding: 0.35rem 0;
}
.bench-row {
  position: relative;
  display: grid;
  grid-template-columns: 0.9rem minmax(0, 1fr) auto 1.6rem;
  column-gap: 0.6rem;
  align-items: baseline;
  padding: 0.36rem 1rem;
}
.bench-row > :not(.bench-bar) { position: relative; }
.bench-bar {
  position: absolute;
  inset: 2px auto 2px 0;
  border-radius: 0 4px 4px 0;
  background: color-mix(in srgb, var(--lab, var(--accent)) 14%, transparent);
}
.bench-row:first-child .bench-bar { background: color-mix(in srgb, var(--lab, var(--accent)) 26%, transparent); }
/* The rank, the maker and the score sit on the row's bar, a tint of the maker's colour: they take the text
   colours that stay readable on any maker's tint, in both themes (PageSpeed, 10 Nov 2026: the grey and the accent
   fell under 4.5:1 on the top row's bar). */
.bench-rank {
  font-size: var(--text-2xs);
  color: var(--fg-2);
}
.bench-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
  font-weight: 550;
}
.bench-lab {
  font-size: var(--text-xs);
  color: var(--fg-2);
  white-space: nowrap;
}
.bench-score {
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: right;
}
/* LMArena: the score is a signed percentage ("+20.9%"), so its column is wider. */
.bench-pct .bench-row { grid-template-columns: 0.9rem minmax(0, 1fr) auto 3.2rem; }

/* Stories grouped by day (front page + /archive/): a small heading per day. */
.day-head {
  margin: 1.6rem 0 0.1rem;
  color: var(--accent);
}
.section-head + .day-head { margin-top: 0.9rem; }
.river-all { text-decoration: none; color: var(--fg-2); }
.river-all:hover { color: var(--accent); }
.river-more { display: inline-block; margin-top: 1.2rem; }
.archive { max-width: 48rem; }

/* Front-page rail: latest model releases + labs due next — one line each, the lab's swatch first. */
.mini-more {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--fg-2);
  text-decoration: none;
  white-space: nowrap;
}
.mini-more:hover { color: var(--accent); }
.mini-list {
  list-style: none;
  margin: 0;
  padding: 0.35rem 0;
}
.mini-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  column-gap: 0.6rem;
  align-items: baseline;
  padding: 0.36rem 1rem;
}
.mini-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
  font-weight: 550;
  color: var(--fg);
  text-decoration: none;
}
a.mini-name:hover { color: var(--accent); }
.mini-meta { font-size: var(--text-xs); color: var(--muted); white-space: nowrap; }
.tnover { color: var(--faint); }  /* "no versions": a tool that ships without version numbers */
.mini-end { font-size: var(--text-xs); color: var(--fg-2); text-align: right; white-space: nowrap; }
.mini-row.is-overdue .mini-end { color: var(--accent); }

/* ── Models (release clock) ──────────────────────────── */

/* Each model house gets a colour: .lab-<slug> sets --lab for everything inside. The rules come from the
   lab registry (sources table, LABS/CONFIG) — the publisher inlines them on the Models pages. */
.swatch {
  display: inline-block;
  flex-shrink: 0;
  width: 0.55rem;
  height: 0.55rem;
  margin-right: 0.45rem;
  border-radius: 2px;
  background: var(--lab, var(--faint));
  vertical-align: 0.04em;
}

/* Page title bar — a page, not an article: name left, facts right. */
.page-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  margin-bottom: 1.25rem;
}
.page-bar h1 { font-size: var(--text-xl); letter-spacing: -0.02em; }
.page-bar-note { font-size: var(--text-xs); color: var(--faint); }

/* Kind filter: All, then each kind on the page with its count — the search sorts' pill, on when picked. */
/* It sticks under the top bar while the page scrolls, so a kind is always one click away. */
.kinds {
  position: sticky;
  top: 3.5rem;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: -0.25rem 0 1rem;
  padding: 0.55rem 0;
  background: var(--canvas);
}
html:has(.kinds) { scroll-padding-top: 7.5rem; }  /* anchor jumps land below the top bar + the kind bar */
.kinds .pill { gap: 0.35rem; font-family: inherit; font-size: var(--text-xs); background: transparent; cursor: pointer; }
.kinds .pill.is-on { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
@media (hover: hover) { .kinds .pill:not(.is-on):hover { color: var(--fg); } }
.kinds-n { font-size: var(--text-2xs); color: var(--faint); }
.kinds .is-on .kinds-n { color: inherit; }  /* full strength: faded, the count fell under 4.5:1 */
/* A non-LLM's kind after its name — grey, like a story's category chip, only smaller. */
.pill-kind {
  display: inline-block;
  margin-left: 0.15rem;
  padding: 0 0.35rem;
  border-radius: 4px;
  background: var(--line-2);
  font-family: var(--font-sans);
  font-size: var(--text-2xs);
  font-weight: 600;
  line-height: 1.5;
  color: var(--fg-2);
  vertical-align: 0.08em;
}
td:has(.mcell:not([hidden])) .mnone { display: none; }
/* Just announced + Who's due next side by side, both lists level at the top. Under All, Just announced is a
   short list per headline kind (LLMs, image, video), five newest each, one under another. A kind with no
   rhythm: Just announced takes the width. */
.mduo > .chapter { display: grid; grid-row: span 2; grid-template-rows: subgrid; align-content: start; }
.mduo:has(> [data-kind-chapter][hidden]) { grid-template-columns: minmax(0, 1fr); }
.kcol + .kcol { margin-top: 1rem; }
.kcol-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; padding: 0.45rem 0 0.25rem; }
.kcol-head h3 { margin: 0; }
.kcol-all { font-size: var(--text-xs); font-weight: 550; color: var(--muted); text-decoration: none; white-space: nowrap; }
.kcol-all:hover { color: var(--accent); }
.kcol .log-row:first-child { border-top: 1px solid var(--line); }

/* The lead: the newest model as the page's front-page story, in its lab's colour; who's next in the margin. */
.mlead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 15rem;
  gap: 3rem;
  margin: 0.25rem 0 1.75rem;  /* no rule under it: "Just announced" follows close */
}
.mlead-main { padding-left: 1.4rem; border-left: 3px solid var(--lab, var(--accent)); }
.mlead-kicker { margin: 0 0 0.55rem; }
.mlead-title {
  margin: 0;
  font-size: clamp(2.4rem, 5.6vw, 4.1rem);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.045em;
  overflow-wrap: anywhere;
}
.mlead-title a { text-decoration: none; }
.mlead-title a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--lab, var(--accent)); }
.mlead-meta { display: flex; flex-wrap: wrap; align-items: baseline; margin: 1rem 0 0; font-size: var(--text-md); color: var(--fg-2); }
.mlead-meta > span + span::before { content: "·"; margin: 0 0.6rem; color: var(--faint); }
.mlead-meta .mono { font-size: var(--text-sm); }
.mlead-unit { font-family: var(--font-sans); font-size: var(--text-xs); color: var(--faint); }
.mlead-src { display: inline-block; margin-top: 1rem; font-size: var(--text-sm); font-weight: 550; color: var(--accent); text-decoration: none; }
.mlead-src:hover { text-decoration: underline; }
.mlead-side { align-self: end; display: grid; gap: 1.2rem; padding-left: 1.5rem; border-left: 1px solid var(--line); }
.mlead-side .label { margin: 0; }
.mlead-side ul { display: grid; gap: 0.3rem; margin: 0.4rem 0 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.mlead-side b { font-weight: 600; }
.mlead-side .mono { margin-left: 0.2rem; font-size: var(--text-xs); color: var(--muted); }

/* Chapters: a plain question as the heading, one line on how to read it. */
.chapter { margin-bottom: 2.25rem; min-width: 0; }
.chapter-head {
  margin-bottom: 0.35rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line-2);
}
.chapter-head p {
  margin: 0.25rem 0 0;
  max-width: 44rem;
  font-size: var(--text-sm);
  color: var(--muted);
}
.chapters-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 3rem;
}

.clock-n {
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
}
.clock-unit { font-size: var(--text-sm); color: var(--muted); }
.mname a,
.log-model a { text-decoration: none; }

.mtables { display: grid; gap: 1.5rem; min-width: 0; }

.mtable {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.mtable th,
.mtable td {
  padding: 0.45rem 0.75rem 0.45rem 0;
  border-top: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.mtable thead th {
  padding: 0.5rem 0.75rem 0.3rem 0;
  border-top: 0;
}
.mtable thead th:first-child { width: 6.5rem; }
.mlab { font-size: var(--text-sm); font-weight: 600; }
.mcells { display: grid; gap: 0.3rem; min-width: 0; }
.mcell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.15rem 0.5rem;
  align-items: baseline;
}
.mname {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
  font-weight: 550;
  line-height: 1.35;
}
.mparams { font-size: var(--text-2xs); font-weight: 400; color: var(--faint); }
.mnone { color: var(--faint); }

.mlog {
  list-style: none;
  margin: 0;
  padding: 0;
}
.log-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 2.75rem;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.4rem 0;
  border-top: 1px solid var(--line);
}
.log-row:first-child { border-top: 0; }
.log-row .pill-age { justify-self: end; }
.log-model {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
  font-weight: 550;
}
.log-meta {
  font-size: var(--text-xs);
  color: var(--faint);
  white-space: nowrap;
}

/* Timeline — one lane per lab, busiest first: dots strung on a line in the lab's colour, dot size = tier,
   ring = open weights, every other month shaded. Hovering a lane fades the others. */
.tl-key {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.2rem 1.1rem;
  margin-top: 0.55rem;
  font-size: var(--text-xs);
  color: var(--faint);
  --lab: var(--muted);
}
.tl-key span { display: inline-flex; align-items: center; gap: 0.4rem; }
.tl-key .tl-dot { position: static; display: inline-block; margin: 0; transform: none; box-shadow: none; }
.tl-key .tl-dot::before { display: none; }
.tl-key .tl-open { box-shadow: inset 0 0 0 2px var(--lab); }
.tl-row {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr) 2.5rem;
  align-items: center;
  height: 2.1rem;
  transition: opacity 0.15s ease;
}
.tl-axis { height: 1.5rem; }
.tl-body { position: relative; }
.tl-body:hover .tl-row:not(:hover) { opacity: 0.32; }
.tl-bands { position: absolute; inset: 0 3.25rem 0 7.5rem; pointer-events: none; }
.tl-bands span { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: color-mix(in srgb, var(--fg) 3%, transparent); }
.tl-lab {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
  font-weight: 550;
  color: var(--fg-2);
}
.tl-track { position: relative; height: 100%; margin: 0 0.75rem 0 0.5rem; }
.tl-body .tl-track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1px solid color-mix(in srgb, var(--lab, var(--accent)) 30%, transparent);
}
.tl-month {
  position: absolute;
  bottom: 0.25rem;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  color: var(--faint);
  white-space: nowrap;
}
.tl-dot {
  position: absolute;
  top: 50%;
  width: 0.75rem;
  height: 0.75rem;
  margin-left: var(--nudge, 0rem);  /* a day's dots side by side (site_publisher._spread) */
  border-radius: 50%;
  background: var(--lab, var(--accent));
  box-shadow: 0 0 0 2px var(--canvas);
  transform: translate(-50%, -50%);
}
.tl-dot::before { content: ""; position: absolute; inset: -5px; border-radius: 50%; }  /* a bigger hit target */
/* On a touch screen the dots are a picture, not links: they sit a few pixels apart, far under a fingertip, and
   every model they stand for is a link in the lists below. */
@media (pointer: coarse) { a.tl-dot { pointer-events: none; } }
.tl-medium { width: 0.55rem; height: 0.55rem; }
.tl-light { width: 0.4rem; height: 0.4rem; }
.tl-open { background: var(--canvas); box-shadow: inset 0 0 0 2px var(--lab, var(--accent)), 0 0 0 2px var(--canvas); }
a.tl-dot:hover,
a.tl-dot:focus-visible {
  z-index: 2;
  outline: none;
  box-shadow: 0 0 0 2px var(--canvas), 0 0 0 4px color-mix(in srgb, var(--lab, var(--accent)) 45%, transparent);
}
a.tl-open:hover,
a.tl-open:focus-visible {
  box-shadow: inset 0 0 0 2px var(--lab, var(--accent)), 0 0 0 2px var(--canvas), 0 0 0 4px color-mix(in srgb, var(--lab, var(--accent)) 45%, transparent);
}
.tl-n { text-align: right; font-size: var(--text-sm); font-weight: 600; color: var(--fg-2); }
.tl-axis .tl-n { align-self: end; padding-bottom: 0.15rem; }

/* Hover/focus card above the dot; tip-start / tip-end keep it on screen near the edges. */
.tl-tip {
  position: absolute;
  bottom: calc(100% + 0.6rem);
  left: 50%;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  width: max-content;
  max-width: 15rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-lift);
  font-size: var(--text-xs);
  line-height: 1.35;
  color: var(--muted);
  text-align: left;
  white-space: nowrap;
  transform: translateX(-50%);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.1s ease;
  pointer-events: none;
}
.tl-tip strong { font-size: var(--text-sm); font-weight: 600; color: var(--fg); }
.tl-tip .mono { color: var(--faint); }
.tip-start .tl-tip { left: -0.4rem; transform: none; }
.tip-end .tl-tip { left: auto; right: -0.4rem; transform: none; }
a.tl-dot:hover .tl-tip,
a.tl-dot:focus-visible .tl-tip { visibility: visible; opacity: 1; }

/* Who's next — how far into each lab's usual gap we are. */
.rhythm {
  list-style: none;
  margin: 0;
  padding: 0;
}
.rh-row {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr) 2.75rem 7rem;
  gap: 0.75rem;
  align-items: center;
  padding: 0.45rem 0;
  border-top: 1px solid var(--line);
}
.rh-row:first-child { border-top: 0; }
.rh-lab { font-size: var(--text-sm); font-weight: 550; white-space: nowrap; }
.rh-due { font-size: var(--text-xs); font-weight: 600; color: var(--fg-2); text-align: right; white-space: nowrap; }
.rh-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}
.rh-fill {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: color-mix(in srgb, var(--lab, var(--accent)) 55%, transparent);
}
.rh-every { font-size: var(--text-2xs); color: var(--faint); text-align: right; }
.rh-row.is-overdue .rh-fill { background: var(--lab, var(--accent)); }
.rh-row.is-overdue .rh-due { color: var(--accent); }

.mnote {
  max-width: 42rem;
  margin: 2.5rem 0 0;
  font-size: var(--text-xs);
  color: var(--faint);
}

/* ── Model page ──────────────────────────────────────── */

.mpage { padding-top: 0.5rem; }
.mpage .crumb { display: flex; width: max-content; }
.mpage-head {
  margin-bottom: 1.25rem;
  padding: 1.4rem 1.5rem 1.5rem;
  border: 1px solid color-mix(in srgb, var(--lab, var(--accent)) 22%, transparent);
  border-radius: 14px;
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--lab, var(--accent)) 16%, transparent), transparent 60%),
    color-mix(in srgb, var(--lab, var(--accent)) 6%, var(--surface));
}
.mpage-pills { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.mpage h1 { margin: 0.85rem 0 0.6rem; }
.mpage-clock {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0;
}
.mpage-clock .clock-n { font-size: var(--text-stat); color: var(--lab, var(--fg)); }

.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
}
.fact {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  padding: 1rem 1.2rem 1.1rem;
  border-left: 1px solid var(--line);
}
.fact:nth-child(4n + 1) { border-left: 0; }
.fact:nth-child(n + 5) { border-top: 1px solid var(--line); }  /* row 2: context + parameters */
.fact-wide { grid-column: span 2; }
.fact-wide + .fact-wide { border-left: 1px solid var(--line); }
.fact dd {
  margin: 0.3rem 0 0;
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
/* The note under a value is a second <dd>: a <dl> group may hold nothing but <dt> and <dd>. */
.fact dd.fact-sub { margin: 0; font-size: var(--text-xs); font-weight: 400; line-height: inherit; letter-spacing: 0; color: var(--faint); }
.facts-foot {
  margin: 0.65rem 0 0;
  font-size: var(--text-xs);
  color: var(--muted);
}
/* The lab's own pages under the facts: a label column, then the link (URL text, ↗). */
.mlinks {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 0.35rem 1rem;
  align-items: baseline;
  margin: 0.9rem 0 2.5rem;
  font-size: var(--text-sm);
}
.mlinks dt { margin: 0; }
.mlinks dd { margin: 0; min-width: 0; }
.mlinks a { display: inline-flex; max-width: 100%; gap: 0.3rem; color: var(--fg-2); font-weight: 500; text-decoration: none; }
.mlinks a:hover { color: var(--accent); }
.mlinks-url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: var(--text-xs); }

.mpage-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 21rem;
  gap: 2rem 3rem;
  align-items: start;
}
.mpage-empty { margin: 1rem 0 0; font-size: var(--text-sm); color: var(--muted); }

.line-rhythm {
  margin: 0.75rem 0 0.25rem;
  font-size: var(--text-sm);
  color: var(--muted);
}
.line {
  list-style: none;
  margin: 0;
  padding: 0;
}
.line-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 5.75rem;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.4rem 0;
  border-top: 1px solid var(--line);
}
.line-row:first-child { border-top: 0; }
.line-name { font-size: var(--text-sm); font-weight: 550; text-decoration: none; }
.line-row.is-here .line-name { color: var(--lab, var(--accent)); }
.line-gap { font-size: var(--text-2xs); color: var(--faint); }
.line-date { font-size: var(--text-xs); color: var(--faint); text-align: right; }

/* ── Empty desk / 404 ────────────────────────────────── */

.empty-desk {
  max-width: 36rem;
  padding: 2.5rem 0;
}
.empty-desk h1 { margin: 1rem 0 0.5rem; }
.empty-desk .lede { margin-bottom: 1.25rem; }

/* ── Article / About ─────────────────────────────────── */

.story {
  max-width: 42rem;
  padding-top: 0.5rem;
}
.story .crumb { display: flex; width: max-content; }
.story-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
  font-size: var(--text-xs);
  color: var(--faint);
}
.story h1 { margin: 0.85rem 0 1rem; }
.story-meta + h1 { margin-top: 0; }
.story .lede {
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--fg-2);
  padding-bottom: 1.75rem;
  margin-bottom: 1.75rem;
  border-bottom: 1px solid var(--line-2);
}

/* The week in AI (/week/): the card image, then its lists as rail cards (.card.mini). */
.week .card.mini { margin-top: 1.25rem; }
.week-img { box-shadow: var(--shadow); }
.week-img img { aspect-ratio: 1200 / 630; }  /* the card whole — not the story images' 3:2 crop */
.week-share { margin: -0.4rem 0 0; font-size: var(--text-xs); color: var(--muted); }
.week-share a { color: var(--fg-2); }
.week-share a:hover { color: var(--accent); }
.week-n { min-width: 1.2rem; font-size: var(--text-xs); color: var(--faint); }
.week-none,
.week-foot { margin: 0; padding: 0.55rem 1rem 0.75rem; font-size: var(--text-xs); color: var(--muted); }
.week-foot a { color: var(--fg-2); }
.week-nav { display: flex; justify-content: space-between; margin-top: 1.5rem; font-size: var(--text-sm); }
.week-nav a { color: var(--fg-2); text-decoration: none; }
.week-nav a:hover { color: var(--accent); }
@media (max-width: 600px) { .week .mini-meta { display: none; } }  /* phones: the names need the room */

.body {
  font-size: var(--text-md);
  line-height: 1.72;
  color: var(--fg-2);
}
.body p { margin: 0 0 1.1em; }
.body p:last-child { margin-bottom: 0; }
.body a {
  color: var(--accent);
  text-decoration-color: var(--accent-line);
}
.body a:hover { text-decoration-color: currentColor; }
.body strong { color: var(--fg); font-weight: 600; }
.body h2, .body h3 {
  color: var(--fg);
  margin: 1.8em 0 0.6em;
}
.body ul, .body ol { margin: 0 0 1.1em; padding-left: 1.2em; }
.body li { margin-bottom: 0.35em; }
.body li::marker { color: var(--faint); }
.body blockquote {
  margin: 1.4em 0;
  padding: 0.75rem 1.1rem;
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
  background: var(--accent-soft);
  color: var(--fg-2);
}
.body code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: var(--surface-2);
  border: 1px solid var(--line);
}

/* ── Footer ──────────────────────────────────────────── */

.footer {
  border-top: 1px solid var(--line);
  color: var(--faint);
  font-size: var(--text-xs);
}
.footer a { color: inherit; text-decoration: none; }
.footer a:hover { color: var(--accent); }
.footer-in {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 0;
}

[hidden] { display: none !important; }

/* ── Small screens ───────────────────────────────────── */

/* ── Tools (release tracker) ─────────────────────────────
   /tools/: releases by day, one row per tool — the notable ones in full, fix-only ones folded away —
   then every tool's latest. /tools/{id}/: releases per month + the full history. Colours come from the
   lab registry (.lab-<slug> → --lab), like the Models pages; a tool without a lab stays neutral. */
/* Tool Tracker: the release feed and a rail (this week, every tool), the filter in the page bar. */
.tbar { align-items: center; }
.tfilter { flex: 1; display: flex; justify-content: flex-end; min-width: 12rem; }
.tfilter input {
  width: min(100%, 20rem);
  height: 2rem;
  padding: 0 0.75rem;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--surface);
  font: inherit;
  font-size: var(--text-sm);
  color: var(--fg);
}
.tfilter input:focus { outline: none; border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); }
.tboard { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: 2rem 3rem; align-items: start; }
.tmain { min-width: 0; }
.tbig .trel-title { font-size: var(--text-base); }
.tbig .trel-points { margin-top: 0.35rem; }
.tfeats .trel { padding: 0.55rem 0; }
.tfeats .trel-body { gap: 0.2rem; }
.tfeats .trel-minor summary { font-size: var(--text-xs); }
.trail { display: grid; gap: 1.25rem; min-width: 0; }
/* A release's date (dark grey) + days since (the age pill), after its headline — the same in all three lists. */
.trel-when { margin-left: 0.45rem; white-space: nowrap; }
.trel-date { font-size: var(--text-xs); color: var(--faint); }  /* as .row-date: every date on the site looks alike */
.trel-when .pill-age { margin-left: 0.2rem; vertical-align: 0.05em; }
.trail .mini-name { display: flex; align-items: baseline; min-width: 0; }
.trail .tname { overflow: hidden; text-overflow: ellipsis; color: inherit; text-decoration: none; }
.trail .tname:hover { color: var(--accent); }
.trail .tbadge { margin-left: 0.4rem; }
.tfilter-none { padding: 0.5rem 1rem 0.8rem; }
.tweek { display: grid; gap: 0.3rem; padding: 0.75rem 1rem 0.45rem; font-size: var(--text-sm); color: var(--fg-2); }
.tweek p { margin: 0; }
.tweek-n { font-size: var(--text-lg); font-weight: 600; color: var(--fg); }
.tweek-line { font-size: var(--text-xs); color: var(--muted); }
.tweek-line a { color: var(--fg); font-weight: 600; text-decoration: none; }
.tweek-line a:hover { color: var(--accent); }
.tpicks { list-style: none; margin: 0; padding: 0.35rem 0; }
.tpick { display: grid; gap: 0.15rem; padding: 0.45rem 1rem; }
.tpick-model { font-size: var(--text-sm); font-weight: 600; color: var(--fg); text-decoration: none; }
.tpick-model:hover { color: var(--accent); }
.tpick-tools { font-size: var(--text-xs); color: var(--muted); }
.tpick-tools a { color: var(--fg-2); text-decoration: none; }
.tpick-tools a:hover { color: var(--accent); }
/* All tools: a second line with a year of releases a month and the features share. */
.mini-row .tmore { grid-column: 2 / -1; display: flex; align-items: center; gap: 0.9rem; margin-top: 0.3rem; }
.tspark { display: inline-flex; align-items: flex-end; gap: 2px; height: 0.9rem; }
.tspark span { width: 4px; min-height: 1px; border-radius: 1px; background: var(--lab, var(--faint)); }
.tmix { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--text-2xs); color: var(--muted); }
.tmix-bar { width: 2.75rem; height: 4px; overflow: hidden; border-radius: 2px; background: var(--line-2); }
.tmix-bar span { display: block; height: 100%; background: var(--fg-2); }
@media (max-width: 900px) {
  .tboard { grid-template-columns: minmax(0, 1fr); }
  .tfilter { order: 3; flex-basis: 100%; justify-content: stretch; }
  .tfilter input { width: 100%; }
}

/* A release's changes fold away: the list reads as headlines. */
.trel-more summary { cursor: pointer; width: max-content; font-size: var(--text-xs); color: var(--muted); }
.trel-more summary:hover { color: var(--accent); }
.trel-more[open] summary { margin-bottom: 0.4rem; }
.trel-more .trel-notes { display: inline-block; margin-top: 0.4rem; }

.trels { list-style: none; margin: 0; padding: 0; }
.trel {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr);
  gap: 0.25rem 1.25rem;
  padding: 0.8rem 0;
  border-top: 1px solid var(--line);
}
.trel:first-child { border-top: 0; }
.trel-tool {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.45;
  color: var(--fg);
  text-decoration: none;
}
.trel-tool:hover { color: var(--lab, var(--accent)); }
.trel-body { display: grid; gap: 0.75rem; min-width: 0; }
.trel-title,
.thist-title {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.45;
  color: var(--fg);
}
.trel-v,
.thist-v {
  margin-right: 0.5rem;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--lab, var(--muted));
}
.trel-points {
  display: grid;
  gap: 0.2rem;
  margin: 0.35rem 0 0;
  padding-left: 1.1rem;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--fg-2);
}
.trel-points li::marker { color: var(--faint); }
/* A release still waiting for one half ("Version number pending") and a date that's only when we first
   saw it — said in words, not hidden in a tooltip. */
.trel-pending {
  margin-right: 0.5rem;
  padding: 0.05rem 0.4rem;
  border: 1px dashed var(--line, var(--faint));
  border-radius: 999px;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
}
.trel-fs {
  margin-left: 0.4rem;
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--muted);
}
.thist-patches { margin-top: 0.4rem; font-size: var(--text-xs); color: var(--muted); }
.thist-patches summary { cursor: pointer; }
.thist-patches ul { display: grid; gap: 0.15rem; margin: 0.3rem 0 0; padding-left: 1.1rem; }
.trel-notes {
  display: inline-block;
  margin-top: 0.35rem;
  font-size: var(--text-xs);
  color: var(--muted);
  text-decoration: none;
}
.trel-notes:hover { color: var(--accent); }
.trel-minor summary {
  cursor: pointer;
  font-size: var(--text-xs);
  color: var(--muted);
}
.trel-minor summary:hover { color: var(--fg-2); }
.trel-vs { margin-left: 0.25rem; color: var(--faint); }
.trel-minor ul {
  display: grid;
  gap: 0.3rem;
  margin: 0.45rem 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-xs);
  line-height: 1.5;
  color: var(--fg-2);
}
.trel-minor .trel-notes { margin-top: 0; }

.ttable { width: 100%; border-collapse: collapse; }
.ttable th,
.ttable td {
  padding: 0.5rem 0.75rem 0.5rem 0;
  border-top: 1px solid var(--line);
  font-size: var(--text-sm);
  text-align: left;
  vertical-align: baseline;
  white-space: nowrap;
}
.ttable thead th { padding-top: 0.6rem; border-top: 0; }
.ttool { width: 100%; font-weight: 600; white-space: normal; }
/* A tool's surface (CLI, App, Cloud, Framework) as a small badge right after its name. */
.tbadge {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.35rem;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.3;
  color: var(--muted);
  vertical-align: 0.12em;
  white-space: nowrap;
}
h1 .tbadge { margin-left: 0.6rem; font-size: 0.32em; vertical-align: middle; }
.ttool a { text-decoration: none; }
.ttool a:hover { color: var(--lab, var(--accent)); }
.tmaker { margin-left: 0.5rem; font-size: var(--text-xs); font-weight: 400; color: var(--faint); }

.tmonths-wrap { margin: 1.75rem 0 2rem; }
.tmonths {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 0.35rem;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
}
.tmonth {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
  text-align: center;
}
/* A fixed-height track, so a tall bar never pushes its month label down. */
.tmonth-track { display: flex; align-items: flex-end; height: 4.5rem; }
.tmonth-bar {
  display: block;
  width: 100%;
  min-height: 2px;
  border-radius: 3px 3px 0 0;
  background: var(--lab, var(--accent));
  opacity: 0.85;
}
.tmonth-n { height: 1rem; font-size: var(--text-2xs); line-height: 1rem; color: var(--muted); }  /* same height when empty */
.tmonth-l { overflow: hidden; font-size: var(--text-2xs); color: var(--faint); white-space: nowrap; }

.thist { list-style: none; margin: 0; padding: 0; }
.thist-row {
  display: grid;
  grid-template-columns: 9rem minmax(0, 1fr);
  gap: 0.35rem 1.25rem;
  padding: 0.9rem 0;
  border-top: 1px solid var(--line);
}
.thist-row:first-child { border-top: 0; }
.thist-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  font-size: var(--text-xs);
  color: var(--muted);
}
.thist-body { min-width: 0; }
.thist-row.is-minor .thist-title { font-weight: 500; color: var(--fg-2); }
.thist-row.is-minor .trel-points { color: var(--muted); }
/* Tool page: real releases on the left, the small fix-only ones on the right (stacked below 900 px). */
.thist-split {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 0 2.5rem;
  align-items: start;
}
.thist-split.is-one { grid-template-columns: minmax(0, 1fr); }
.thist-col-h {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 1rem 0 0;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--line);
}
.thist-col-h .mono { font-weight: 500; letter-spacing: 0; color: var(--faint); }
.tsmall { list-style: none; margin: 0; padding: 0; }
.tsmall > li { padding: 0.65rem 0; border-top: 1px solid var(--line); }
.tsmall > li:first-child { border-top: 0; }
.tsmall-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  font-size: var(--text-xs);
  color: var(--muted);
}
.tsmall-meta .thist-v { margin-right: 0; }
.tsmall-meta .trel-notes { margin-top: 0; }
.tsmall-title { margin: 0.2rem 0 0; font-size: var(--text-sm); line-height: 1.45; color: var(--fg-2); }

@media (max-width: 900px) {
  .chapters-2 { grid-template-columns: 1fr; }
  .thist-split { grid-template-columns: minmax(0, 1fr); }
  .thist-small { margin-top: 1rem; }
  .mlead { grid-template-columns: 1fr; gap: 1.5rem; }
  .mlead-side { grid-template-columns: repeat(2, minmax(0, 1fr)); align-self: start; padding-left: 0; border-left: 0; }
  .mpage-grid { grid-template-columns: 1fr; }
  .board {
    grid-template-columns: 1fr;
    grid-template-areas:
      "lead"
      "side"
      "river";
    grid-template-rows: none;
  }
  .heard-row:nth-child(n + 6) { display: none; }  /* phones: five, so the stories aren't far down */
}

/* The name, four tabs, search and the theme switch need about 820 px in one row. Below that the top bar wraps to two
   rows (name + tabs, then search + themes), so the kind bar scrolls in one row under it instead of sticking. */
@media (max-width: 820px) {
  .topbar-in { flex-wrap: wrap; gap: 0.6rem; padding: 0.6rem 0 0.7rem; }
  .kinds { position: static; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .topbar-start { width: 100%; justify-content: space-between; }
  .topbar-end { width: 100%; }
  .search { flex: 1; width: auto; }
  .search-drop { left: 0; right: auto; }
}

@media (max-width: 640px) {
  .trel,
  .thist-row { grid-template-columns: 1fr; }
  .thist-meta { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; }
  .ttable .t-opt,
  .tmaker { display: none; }
  .tmonths { gap: 0.2rem; }
  .tmonth-track { height: 3.5rem; }
  .search-kbd { display: none; }
  main { padding-top: 1rem; }
  .row { grid-template-columns: 1fr; gap: 0.3rem; }
  .row-date { order: -1; }
  .empty-desk { padding: 2rem 0; }

  .log-meta { display: none; }
  .log-row { grid-template-columns: minmax(0, 1fr) 2.75rem; }
  .rh-row { grid-template-columns: 5.5rem minmax(0, 1fr) 6.5rem; }
  .rh-every { display: none; }
  .rows-compact .row { grid-template-columns: minmax(0, 1fr) auto; }
  .rows-compact .row-date { order: 0; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact:nth-child(odd), .fact-wide + .fact-wide { border-left: 0; }
  .fact:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .fact dd { font-size: var(--text-lg); }
  .tl-row { grid-template-columns: 4.75rem minmax(0, 1fr) 1.5rem; }
  .tl-bands { inset: 0 2.25rem 0 5.25rem; }
  .tl-month:nth-child(even) { display: none; }
  .tl-axis .tl-n { display: none; }
  .mlead-meta > .mono { flex-basis: 100%; margin-top: 0.2rem; }
  .mlead-meta > .mono::before { display: none; }

  /* Tables fold into one block per lab, each tier on its own line. */
  .mtable, .mtable tbody, .mtable tr, .mtable th, .mtable td { display: block; }
  .mtable thead { display: none; }
  .mtable tr { padding: 0.75rem 0; border-top: 1px solid var(--line); }
  .mtable tbody tr:first-child { border-top: 0; }
  .mtable th, .mtable td { padding: 0.2rem 0; border-top: 0; }
  .mlab { margin-bottom: 0.15rem; }
  .mtable td {
    display: grid;
    grid-template-columns: 4.25rem minmax(0, 1fr);
    gap: 0.5rem;
  }
  .mtable td::before {
    content: attr(data-tier);
    padding-top: 0.2rem;
  }
}

/* About → Feedback: the reader form (site.js posts it to /api/feedback; Turnstile renders into .fb-captcha). */
.fb { display: grid; gap: 0.9rem; margin: 1rem 0 0; }
.fb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.fb-field { display: grid; gap: 0.35rem; font-size: var(--text-sm); font-weight: 600; color: var(--fg); }
.fb-field em { font-style: normal; font-weight: 400; color: var(--faint); }
.fb-field input, .fb-field textarea {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 400;
  line-height: 1.5;
  box-shadow: var(--shadow);
  -webkit-appearance: none;
  appearance: none;
}
.fb-field textarea { resize: vertical; min-height: 7.5rem; }
.fb-field input::placeholder, .fb-field textarea::placeholder { color: var(--faint); }
.fb-field input:focus, .fb-field textarea:focus { outline: none; border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); }
.fb-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.fb-captcha:empty { display: none; }
.fb-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem 1rem; }
.fb-send {
  height: 2.3rem;
  padding: 0 1.1rem;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}
.fb-send:hover { background: var(--accent-hover); }
.fb-send:disabled { opacity: 0.6; cursor: default; }
.fb-status { font-size: var(--text-sm); line-height: 1.4; color: var(--muted); }
.fb-status[data-tone="ok"] { color: var(--accent); }
.fb-status[data-tone="error"] { color: #b42318; }
[data-theme="dark"] .fb-status[data-tone="error"] { color: #ff8a80; }
@media (max-width: 640px) {
  .fb-row { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}

/* "AI Model Tracker" and four tabs don't fit one phone row: the tabs drop under the name, their text in line with it. */
@media (max-width: 480px) {
  .topbar-start { flex-wrap: wrap; row-gap: 0.3rem; }
  .nav { width: 100%; margin-left: -0.6rem; }
}

/* ── Byline + the tracker pages' plain-sentence summary ─────────────── */

.byline {
  margin: -0.35rem 0 1rem;
  font-size: var(--text-sm);
  color: var(--muted);
}
.byline a { color: var(--fg-2); }
.byline a:hover { color: var(--accent); }
.mpage-summary {
  max-width: 46rem;
  margin: 0 0 1.25rem;
  font-size: var(--text-md, 1rem);
  line-height: 1.6;
  color: var(--fg-2);
}
.mpage-more { margin-top: 2rem; }

/* ── Cookie banner: asked once (site.js), pinned to the bottom of the screen ─────────────────────────── */

.consent {
  position: fixed;
  left: 50%;
  bottom: 1rem;
  z-index: 50;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  width: min(44rem, calc(100% - 2rem));
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line-2);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow-lift);
  transform: translateX(-50%);
}
.consent[hidden] { display: none; }
.consent-q { flex: 1 1 20rem; margin: 0; font-size: var(--text-sm); line-height: 1.5; color: var(--fg-2); }
.consent-q a { color: var(--fg); }
.consent-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
@media (max-width: 480px) {
  .consent-actions { width: 100%; }
  .consent-actions .consent-btn { flex: 1 1 0; padding-inline: 0.5rem; }
}
/* Cookie settings: a centred dialog over a dimmed page (the native <dialog>: focus stays inside, Esc closes). */
.consent-dialog {
  width: min(32rem, calc(100% - 2rem));
  max-height: calc(100% - 2rem);
  padding: 1.3rem 1.4rem 1.4rem;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: var(--surface);
  color: var(--fg);
  box-shadow: var(--shadow-lift);
}
.consent-dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
.consent-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.6rem; }
.consent-dialog-head h2 { margin: 0; font-size: var(--text-lg); }
.consent-close {
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.consent-close:hover { background: var(--surface-2); color: var(--fg); }
.consent-dialog .consent-q { margin-bottom: 1rem; }
.consent-opts { margin: 0 0 1.2rem; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.consent-opt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
}
.consent-opt-text { display: grid; gap: 0.2rem; font-size: var(--text-sm); line-height: 1.45; color: var(--fg-2); }
label.consent-opt-text { cursor: pointer; }
.consent-opt-text strong { color: var(--fg); }
.consent-always { flex: none; font-size: var(--text-xs); font-weight: 600; color: var(--muted); }
/* The analytics switch: a checkbox drawn as an on/off toggle. */
.consent-switch {
  appearance: none;
  flex: none;
  position: relative;
  width: 2.5rem;
  height: 1.4rem;
  margin: 0;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--surface-2);
  cursor: pointer;
  transition: background 0.15s;
}
.consent-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(1.4rem - 6px);
  height: calc(1.4rem - 6px);
  border-radius: 50%;
  background: var(--muted);
  transition: transform 0.15s, background 0.15s;
}
.consent-switch:checked { border-color: var(--accent); background: var(--accent); }
.consent-switch:checked::after { background: var(--on-accent); transform: translateX(1.1rem); }
.consent-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* The footer's Cookie settings: a button that reads like the links beside it. */
.footer-link { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.footer-link:hover { color: var(--accent); }
/* Every answer looks the same: refusing is as easy as accepting. */
.consent-btn {
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--fg);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
}
.consent-btn:hover { border-color: var(--accent-line); color: var(--accent); }
.consent-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }