/* ───────────── Default font: ET Bembo (Edward Tufte's free Bembo, via
   github.com/DavidBarts/ET_Bembo; MIT licence in assets/fonts). Its x-height
   is smaller than Plex's, so it is scaled up to read at a similar size. */
@font-face {
  font-family: "ET Bembo";
  src: url("fonts/et-bembo-roman.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  size-adjust: 112%;
}
@font-face {
  font-family: "ET Bembo";
  src: url("fonts/et-bembo-semibold.woff2") format("woff2");
  font-weight: 500 700;   /* the only bold cut, so it serves medium too */
  font-style: normal;
  font-display: swap;
  size-adjust: 112%;
}
@font-face {
  font-family: "ET Bembo";
  src: url("fonts/et-bembo-italic.woff2") format("woff2");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
  size-adjust: 112%;
}

/* ───────────── Theme tokens */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --ink: #111111;
  --ink-strong: #000000;
  --ink-2: #555555;
  --line: #e5e5e5;
  --accent: #c8102e;   /* crimson (default) */
  --on-accent: #ffffff; /* text on an accent-coloured background */
  /* Positions: "pacing" is a lighter tint of the accent, so it stays bright
     beside the full accent ("ban") and the ink ("oppose") */
  --st-pace: color-mix(in srgb, var(--accent) 80%, var(--bg));
  --font-bembo: "ET Bembo", Georgia, "Times New Roman", serif;
  --font-plex: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font: var(--font-bembo);   /* default; the F toggle switches to Plex */
  --header-h: 104px;
  --corner-w: 200px;   /* room kept clear for the site address */
  --menu-h: 112px;     /* full-width menu bar, before scrolling */
  --column: 880px;     /* central text column, including its 24px padding */
}
/* Font modes (F cycles them): hybrid (the default) sets the text in ET
   Bembo and the interface details — ticker, site address, source links,
   subtitle, filters, sidebar heading, dates — in IBM Plex Sans; bembo and
   plex set everything in one font. --font-ui is the interface font. */
:root { --font-ui: var(--font); }
:root[data-font="hybrid"] { --font-ui: var(--font-plex); }
:root[data-font="plex"] { --font: var(--font-plex); }
.news, .site-title, .page-title-fixed, .tl-source, .hero-description, .filter-bar, .positions-tools, .menu a,
.toc-title, .tl-year-label, .tl-meta time, .toc-date, .pd-date, .org-card-meta, .footer-col, .gl-area,
.page-head h2, .page-intro, .pl-meta, .tlp-order, .positions-legend, .pd-meta, .tlp-stance {
  font-family: var(--font-ui);
}
/* Plex runs larger than Bembo */
:root[data-font="hybrid"] .pl-meta { font-size: 14px; }
:root[data-font="hybrid"] .positions-legend { font-size: 14.5px; }
:root[data-font="hybrid"] .pd-meta { font-size: 14.5px; }
:root[data-font="hybrid"] .tlp-stance { font-size: 13.5px; }

/* Selected text: highlighted in the accent colour */
::selection { background: var(--accent); color: var(--bg); }
:root[data-accent="blue"] { --accent: #1d4ed8; }     /* signal blue */
:root[data-accent="orange"] { --accent: #c2410c; }   /* ember orange */
:root[data-accent="mono"] { --accent: #000000; --st-pace: #7a7a7a; }     /* black (white in dark mode); pacing in grey */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0f0f0f;
    --ink: #ededed;
    --ink-strong: #ffffff;
    --ink-2: #a3a3a3;
    --line: #2a2a2a;
    --accent: #eb3a55;
    --on-accent: #0f0f0f;
    --st-pace: color-mix(in srgb, var(--accent) 55%, var(--ink));   /* paler in dark mode */
  }
  :root:not([data-theme="light"])[data-accent="blue"] { --accent: #7aa2ff; }
  :root:not([data-theme="light"])[data-accent="orange"] { --accent: #ff9159; }
  :root:not([data-theme="light"])[data-accent="mono"] { --accent: #ffffff; --st-pace: #8a8a8a; }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f0f0f;
  --ink: #ededed;
  --ink-strong: #ffffff;
  --ink-2: #a3a3a3;
  --line: #2a2a2a;
  --accent: #eb3a55;
  --on-accent: #0f0f0f;
  --st-pace: color-mix(in srgb, var(--accent) 55%, var(--ink));   /* paler in dark mode */
}
:root[data-theme="dark"][data-accent="blue"] { --accent: #7aa2ff; }
:root[data-theme="dark"][data-accent="orange"] { --accent: #ff9159; }
:root[data-theme="dark"][data-accent="mono"] { --accent: #ffffff; --st-pace: #8a8a8a; }

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Shared column: hero, menu and page content share one left edge */
.container {
  max-width: var(--column);
  margin: 0 auto;
  padding: 0 24px;
}

/* ───────────── Header */
/* Fixed and transparent, so the site title stays in the top-right corner
   and shares one bar with the menu once the menu reaches the top */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  pointer-events: none;
}
.site-header a,
.site-header button { pointer-events: auto; }

/* Dividing lines, in the timeline's line style: below the menu and above
   the footer. H ("hudless") hides them. */


.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: var(--header-h);
  padding: 0 48px;
}

/* Theme, accent and font controls: in the hero's bottom-left corner, with
   room below them above the menu's line (on wide screens, level with the
   menu's text instead), so they scroll away with the page.
   The toggle sits at the left, and the controls open out rightwards from
   it. Wide screens: at the page's left edge (48px to the icons, less the
   buttons' 9px inset). */
.page-controls {
  position: absolute;
  left: 39px;
  bottom: 24px;
  z-index: 11;
  display: flex;
  align-items: center;
  height: 56px;
}
/* Above phone widths: always in the hero's bottom-left corner, level with
   the menu items' text (app.js measures --ctl-top); the menu starts to
   their right (--ctl-reserve) */
@media (min-width: 641px) {
  .hero[style*="--ctl-top"] .page-controls { top: calc(var(--ctl-top) - 28px); bottom: auto; }
}

.control-set { display: flex; gap: 6px; }

/* Two seconds after the loading screen lifts (app.js) the controls tuck
   away into an arrowhead: it appears pointing left, then turns to point
   right. Clicking it opens the controls (arrow points left) or closes them
   again (arrow points right). The arrow is U+1F891, the same glyph as the back-to-top button,
   rotated. States: initial → tucking → closed ⇄ open. */
.controls-toggle,
.control-set {
  transition:
    max-width 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.6s ease,
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    margin 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0.9s;
}
.controls-toggle { width: 32px; height: 32px; max-width: 32px; margin-right: 6px; }
.control-set { max-width: 132px; transform-origin: left center; }

/* Before the tuck, only the controls show */
.page-controls[data-state="initial"] .controls-toggle {
  max-width: 0;
  margin-right: 0;
  opacity: 0;
  visibility: hidden;
}

/* Closed (and while tucking): controls shrink away into the arrow */
.page-controls[data-state="tucking"] .control-set,
.page-controls[data-state="closed"] .control-set {
  max-width: 0;
  opacity: 0;
  transform: scale(0.6);
  visibility: hidden;
  pointer-events: none;
}

.page-controls[data-state="tucking"] .arrow-glyph,
.page-controls[data-state="open"] .arrow-glyph { transform: rotate(-90deg); }   /* left */
.page-controls[data-state="closed"] .arrow-glyph { transform: rotate(90deg); }   /* right */
/* Once closed and still, the arrow fades into a palette; opening again, the
   palette goes at once and the arrow turns back */
.controls-toggle .arrow-glyph, .controls-toggle .palette-icon { grid-area: 1 / 1; }
.controls-toggle .arrow-glyph { transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.15s ease; }
.controls-toggle .palette-icon { opacity: 0; transform: scale(0.7); transition: opacity 0.15s ease, transform 0.15s ease; }
.page-controls[data-state="closed"] .arrow-glyph { opacity: 0; transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease 0.9s; }
.page-controls[data-state="closed"] .palette-icon { opacity: 1; transform: none; transition: opacity 0.3s ease 0.9s, transform 0.3s ease 0.9s; }
/* Scrolling down, the closed controls' arrow fades away; it returns on the
   way back up */
.scrolling-down .page-controls[data-state="closed"] .controls-toggle {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .controls-toggle, .control-set, .controls-toggle .arrow-glyph, .controls-toggle .palette-icon { transition: none; }
}

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.icon-btn:hover { background: var(--line); }

/* Show the icon for the theme you'd switch to */
.icon-sun { display: none; }
:root[data-theme="dark"] .icon-sun { display: block; }
:root[data-theme="dark"] .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-sun { display: block; }
  :root:not([data-theme="light"]) .icon-moon { display: none; }
}

.accent-swatch {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
}

/* "Aa" set in the mode you'd switch to: hybrid → Bembo → Plex → hybrid
   (a Bembo "A" with a Plex "a") */
.font-sample { line-height: 1; font-weight: 400; }
.font-sample > span { font-family: var(--font-bembo); font-size: 17px; }
:root[data-font="bembo"] .font-sample > span { font-family: var(--font-plex); font-size: 14px; }
:root[data-font="plex"] .fs-a { font-family: var(--font-bembo); font-size: 17px; }
:root[data-font="plex"] .fs-b { font-family: var(--font-plex); font-size: 14px; }

/* The site address, in brackets: [ coordination.ai ]. The name sits in a
   box of fixed width (app.js measures it), so when .st-closed is set the
   name shrinks away and the brackets close in on the middle, then open
   again */
.site-title {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: baseline;
  width: var(--st-w, auto);
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  font-size: 18px;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.site-title:hover { color: var(--accent); }
.st-bracket {
  color: var(--accent);
  font-size: 1.3em;
  font-weight: 600;
  line-height: 1;
  transform: translateY(0.04em);
}
.st-name {
  display: inline-block;
  overflow: hidden;
  max-width: 12em;
  padding: 0 0.5em;
  transition: max-width 0.4s cubic-bezier(0.65, 0, 0.35, 1), padding 0.4s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.25s ease;
}
.st-closed .st-name { max-width: 0; padding: 0 0.1em; opacity: 0; }
.st-measuring .st-name, .st-measuring .st-bracket { transition: none !important; }   /* while app.js measures it */
/* ...and, once closed, the brackets fade away too */
.st-bracket { transition: opacity 0.25s ease; }
.st-gone { pointer-events: none; background: transparent !important; }
.st-gone .st-bracket { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .st-name { transition: opacity 0.2s ease; }
}
.site-title { margin-left: auto; }

/* The current page's title in the top-left corner, faded in once the
   page heading (e.g. "Statements") has scrolled off the top (app.js) */
.page-title-fixed {
  color: var(--ink);
  font-size: 26px;
  font-weight: 500;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.2s ease;
}
.title-past .page-title-fixed { opacity: 1; transform: none; }
/* It's clickable once shown: back to the top of the page (app.js) */
.title-past .page-title-fixed { pointer-events: auto; cursor: pointer; }
.title-past .page-title-fixed:hover { color: var(--accent); }
/* The hero's title goes back to the top of the site */
.hero h1 { cursor: pointer; }

/* ───────────── Hero */
.hero {
  position: relative;   /* for the ticker, the controls and the header line */
  /* Fill the first screen above the menu bar, so the menu sits at the
     bottom of the screen on load; the artwork, title and subtitle are
     centred in the space between the header and the menu */
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - var(--menu-h));
  min-height: calc(100svh - var(--menu-h));
  padding-top: var(--header-h);   /* content sits 24px higher than centred */
  padding-bottom: 48px;
}
/* The artwork, subtitle, title and description share one column, as wide
   as the widest of them and centred; the text within it is left-aligned */
.hero > .container { width: 100%; display: grid; grid-template-columns: minmax(0, max-content); justify-content: center; align-content: start; text-align: left; }   /* keep the shared left edge inside the flex column; on wide screens, moved to the menu's start (app.js). Not a transform: that would isolate the artwork's blend mode from the page */

/* ───────────── Latest developments ticker: the hero's top-left corner,
   level with the site title, scrolling away with the page. The track holds
   the items twice and slides by half its width, so it loops seamlessly;
   app.js sets the duration from its length. Hovering or focusing pauses it. */
.news {
  position: absolute;
  top: 0;
  left: 48px;
  z-index: 11;
  display: flex;
  align-items: center;
  gap: 16px;
  width: min(calc(100vw * 3 / 4 - 48px), calc(100vw - 72px - var(--corner-w)));   /* three quarters of the screen, clear of the site address */
  height: var(--header-h);
  font-size: 16px;
}
.news-label {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.news-label-short { display: none; }
.news-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  animation: news-pulse 2s ease-in-out infinite;
}
@keyframes news-pulse { 50% { opacity: 0.25; } }

.news-window {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  -webkit-mask: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 48px), transparent);
  mask: linear-gradient(to right, transparent, #000 24px, #000 calc(100% - 48px), transparent);
}
.news-track { display: flex; width: max-content; }
.loaded .news-track { animation: news-scroll var(--news-dur, 90s) linear infinite; }
.news:hover .news-track,
.news:focus-within .news-track { animation-play-state: paused; }
@keyframes news-scroll { to { transform: translateX(-50%); } }

.news-item {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 0 4px 24px;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.news-item::before {   /* a small separator before each item */
  content: "";
  align-self: center;
  width: 3px;
  height: 3px;
  margin-right: 16px;
  border-radius: 50%;
  background: var(--ink-2);
}
.news-item:hover { color: var(--accent); }
.news-date { color: var(--ink-2); font-size: 14.5px; }

@media (prefers-reduced-motion: reduce) {
  .news-dot, .loaded .news-track { animation: none; }
  .news-window { overflow-x: auto; scrollbar-width: none; }
}

/* Title lockup: the artwork is capped at the title's longest line
   (set in app.js) and at its own native width */
.hero-lockup { display: flex; flex-direction: column; align-items: center; }   /* the artwork centred above the text */
.hero-lockup > .hero-description, .hero-lockup > h1 { align-self: stretch; }   /* the text runs from the block's left edge */

.hero-art {
  width: 100%;
  /* Never upscaled past its native 478px; on short screens it shrinks so
     the artwork, title, subtitle and menu still fit on the first screen
     (--hero-rest is everything in that screen except the artwork's height) */
  max-width: max(140px, min(330px, calc((100svh - var(--hero-rest)) * 478 / 346)));   /* smaller than its native 478px */
  aspect-ratio: 478 / 346;
  margin-bottom: 48px;   /* space above the title */
}

/* Loading screen: the page colour with the animation centred, above
   everything but the cursor. It fades out once app.js adds .loaded. */
.loader {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background: var(--bg);
  transition: opacity 0.7s ease, visibility 0.7s;
}
.loader img {
  width: min(360px, 64vw);
  height: auto;
  mix-blend-mode: multiply;
}
.loaded .loader { opacity: 0; visibility: hidden; pointer-events: none; }
html:not(.loaded) body { overflow: hidden; }

/* The animation is dark lines on white. Multiply drops the white in light
   mode; in dark mode it's inverted to light lines on black and screen
   drops the black. */
.hero-art img {
  display: block;
  width: 100%;
  height: 100%;
  mix-blend-mode: multiply;
}
:root[data-theme="dark"] :is(.hero-art, .loader) img { filter: invert(1); mix-blend-mode: screen; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.hero-art, .loader) img { filter: invert(1); mix-blend-mode: screen; }
}

.hero {
  --title-size: clamp(44px, 7vw, 76px);
  --subtitle-size: clamp(20px, 2.6vw, 27px);
  --hero-rest: 606px;   /* +16px for the taller header */
}
/* Small phones: a little smaller, so each sentence fits on two lines */
@media (max-width: 400px) {
  .hero { --subtitle-size: 18px; }
}
/* Short windows: drop the description so the rest still fits */
@media (max-height: 760px) {
  .hero { --hero-rest: 498px; }
  .hero-note { display: none; }
}
.hero h1 {
  margin: 0;
  font-weight: 600;
  font-size: var(--title-size);   /* one line in the text column on wider screens; wraps on phones */
  line-height: 1.05;
  letter-spacing: -0.02em;
}

/* "AI Risk" fills with the accent colour from the bottom up as the page
   is revealed, and stays filled (app.js adds .is-filled). The text is painted by a
   two-tone background twice its height, slid down to fill. */
.title-fill {
  background: linear-gradient(to top, var(--accent) 50%, var(--ink) 50%);
  background-size: 100% 200%;
  background-position: 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: background-position 2s cubic-bezier(0.65, 0, 0.35, 1);
}
.title-fill.is-filled { background-position: 0 100%; }
@media (prefers-reduced-motion: reduce) {
  .title-fill { transition: none; }
}

/* The three sentences share one line, stacked in the same grid cell so the
   line is as tall as the longest; the current one rises into place and the
   previous one drifts up and out */
.hero-cycle { display: grid; }
.hero-cycle > span {
  grid-area: 1 / 1;
  align-self: end;   /* sits on the title; a shorter sentence leaves its spare line above, not between it and the title */
  opacity: 0;
  transform: translateY(0.5em);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero-cycle > .is-current { opacity: 1; transform: none; }
.hero-cycle > .is-leaving { opacity: 0; transform: translateY(-0.5em); }
@media (prefers-reduced-motion: reduce) {
  .hero-cycle > span { transform: none; transition: opacity 0.4s ease; }
}

.hero-description {   /* above the title */
  margin: 22px 0 8px;
  /* The title's "C" starts about 0.06em in from the column edge (its side
     bearing), so the subtitle is indented to line up with the letter itself */
  padding-left: calc(var(--title-size) * 0.06);
  max-width: 36em;
  color: var(--ink-strong);
  font-size: var(--subtitle-size);
}

/* A short description under the subtitle, indented to match it and as
   wide as its longest sentence (28.2em of the subtitle in Plex) */
.hero-note {
  margin: 30px 0 0;
  padding-left: calc(var(--title-size) * 0.06);
  max-width: var(--title-w, calc(var(--subtitle-size) * 28.2 + var(--title-size) * 0.06));   /* as wide as the title (app.js) */
  color: var(--ink-strong);
  font-size: clamp(22px, 2.7vw, 30px);
  line-height: 1.45;
}

/* ───────────── Menu bar */
/* A row of translucent accent pills at the bottom of the first screen, one
   per page, with a gap below so they aren't flush with the screen edge. It
   sits in the page and scrolls away with it. The whole block, pills plus
   gap, is --menu-h tall. */
:root { --menu-gap: 32px; }   /* space below the menu pills */
.menu {
  position: relative;
  z-index: 5;
  height: var(--menu-h);
  padding-bottom: var(--menu-gap);
}
/* The menu's dividing line: full width, level with the lower edge of the
   current item's accent bar (app.js sets --menu-line-y), so the bar and
   the hover lines sit on it */
.menu::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: var(--menu-line-y, calc(100% - 1px));
  border-top: 1px solid var(--line);
  pointer-events: none;
}
.hudless .menu::after { display: none; }

.menu-inner {
  display: flex;
  align-items: center;
  gap: 13px;
  height: 100%;
  overflow-x: auto;
  scrollbar-width: none;
}
/* Above phone widths the items start at the text column's edge, or to the
   right of the design controls if that's further (margin, not padding, so
   scrolled items are clipped before they reach the controls) */
@media (min-width: 641px) {
  :root { --ctl-reserve: 212px; }   /* the page edge to the open controls' end, plus a gap */
  .menu .menu-inner {
    max-width: none;
    margin: 0 max(0px, calc((100% - var(--column)) / 2)) 0 max(var(--ctl-reserve), calc((100% - var(--column)) / 2 + 24px));
    padding: 0 24px 0 0;
  }
}
/* When the pills don't all fit (app.js adds .overflows), they scroll
   sideways and the right edge fades until the end is reached */
/* On wide screens there's room to the right of the text column, so the
   items run on past it rather than scrolling */
@media (min-width: 1760px) {
  .menu { padding-left: var(--ctl-reserve); }
  .menu .menu-inner {
    width: max-content;
    max-width: none;
    margin: 0 auto;   /* centred in the space to the right of the controls */
    padding: 0;
    overflow-x: visible;
  }
}
.menu-inner.overflows:not(.at-end) {
  -webkit-mask: linear-gradient(to right, #000 calc(100% - 40px), transparent);
  mask: linear-gradient(to right, #000 calc(100% - 40px), transparent);
}

/* Text tabs, each with a small accent index number. A single accent bar
   (app.js positions it) sits under the current page and slides to a new
   one; hovering draws a faint line under the item. */
.menu-inner { position: relative; }
.menu a {
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  gap: 5px;
  padding: 6px 0 34px;   /* room between the text and the line below */
  color: color-mix(in srgb, var(--ink) 82%, var(--bg));   /* a little dimmer than the current item */
  text-decoration: none;
  font-size: 16px;
  line-height: 1.3;
  white-space: nowrap;
  transition: color 0.25s ease;
}
.menu a::after {   /* hover line */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;   /* on the baseline, level with the accent bar's lower edge */
  height: 1px;
  background: var(--ink-2);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.menu a:hover { color: var(--ink); }
.menu a:hover::after { transform: scaleX(1); }
.menu a[aria-current="page"] { color: var(--ink); }
.menu a[aria-current="page"]::after { display: none; }
.menu a:active { color: var(--accent); }
.menu-num {
  color: var(--accent);
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.04em;
  line-height: 1;
  margin-top: 2px;
  opacity: 0.75;
  transition: opacity 0.25s ease;
}
.menu a:hover .menu-num, .menu a[aria-current="page"] .menu-num { opacity: 1; }
.menu-indicator {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 2px;
  border-radius: 1px;
  background: var(--accent);
  pointer-events: none;
  transition: transform 0.55s cubic-bezier(0.65, 0, 0.35, 1), width 0.55s cubic-bezier(0.65, 0, 0.35, 1);
}
.menu-indicator.no-anim { transition: none; }

/* Content scrolls freely across the top of the screen. Where the text
   column runs under the site title (narrower windows), the title gets a
   small backing in the page colour so it stays readable. */
@media (max-width: 1100px) {
  .site-title {
    margin-right: -8px;
    padding: 4px 8px;
    border-radius: 6px;
    transition: color 0.2s ease, background-color 0.2s ease;
  }
  .past-menu .site-title { background: var(--bg); }
  .page-title-fixed {
    margin-left: -8px;
    padding: 4px 8px;
    border-radius: 6px;
  }
  .title-past .page-title-fixed { background: var(--bg); }
}

/* ───────────── Page layout: contents | text column | progress */
.page {
  padding: 80px 0 120px;
  min-height: 100vh;   /* short pages still fill the screen, so the menu's */
  min-height: 100svh;  /* auto-scroll always lands with its line at the top */
}

/* Contact ends with its form: no empty stretch before the footer (the
   footer keeps the page tall enough for the menu's auto-scroll) */
#page-contact { padding-bottom: 88px; min-height: 0; }

.page-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--column)) minmax(0, 1fr);
}

.page-main { padding: 0 24px; min-width: 0; }

.page-head { margin-bottom: 64px; }
.page-head h2 {
  margin: 0;
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.page-intro { margin: 14px 0 0; color: var(--ink); line-height: 1.6; }
/* In IBM Plex (the hybrid and Plex fonts) the page title is a little
   lighter, as Plex runs heavier than Bembo */
:root[data-font="hybrid"] .page-head h2, :root[data-font="plex"] .page-head h2 { font-weight: 500; letter-spacing: -0.015em; }

/* Contents sidebar, centred in the left column. Its sticky top is set in
   app.js from its height, so it sits in the vertical middle of the screen. */
.toc {
  position: sticky;
  top: var(--toc-top, calc(var(--header-h) + 40px));
  align-self: start;
  justify-self: center;
  max-width: min(260px, 100%);
  padding: 0 24px;
  max-height: calc(100vh - 2 * var(--header-h));
  overflow-y: auto;
}

.toc-title {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-2);
}

.toc-list { list-style: none; margin: 0; padding: 0; }

.toc-list a {
  display: block;
  padding: 6px 0 6px 12px;
  border-left: 2px solid var(--line);
  color: var(--ink-2);
  text-decoration: none;
  font-size: 13.5px;
  line-height: 1.4;
}
.toc-list a:hover { color: var(--ink); }
.toc-list a[aria-current="true"] {
  color: var(--ink);
  font-weight: 500;
  border-left-color: var(--accent);
}
.toc-date { white-space: nowrap; }

/* Progress pill, centred in the space right of the text column */
.progress-col {
  --pill-h: min(540px, calc(100vh - 2 * var(--header-h) - 40px));
  position: sticky;
  top: calc(50vh - var(--pill-h) / 2);
  align-self: start;
  justify-self: center;
}

.progress-pill {
  position: relative;
  width: 6px;
  height: var(--pill-h);
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}

.progress-fill {
  position: absolute;
  inset: 0 0 auto 0;
  height: 0%;
  border-radius: 999px;
  background: var(--accent);
}

/* Hidden until the menu bar has reached the top of the screen (app.js) */
.toc,
.progress-col {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.past-menu .toc,
.past-menu .progress-col {
  opacity: 1;
  visibility: visible;
}
/* …and fade out again as the footer comes into view, rather than being
   dragged up with the end of the page (app.js sets .at-footer) */
.past-menu.at-footer .toc,
.past-menu.at-footer .progress-col {
  opacity: 0;
  visibility: hidden;
}

@media (max-width: 1100px) {
  .page-layout { grid-template-columns: minmax(0, 1fr); }
  .page-main { max-width: var(--column); width: 100%; margin: 0 auto; }
  .toc, .progress-col { display: none; }
}

/* ───────────── Filter bar (Incidents): a row of pills that scrolls sideways
   when it doesn't fit, with "All" selected by default */
.filter-bar {
  margin: -28px 0 56px;   /* under the page title and intro, closer than the timeline */
}

/* Each row: a small label, then its pills scrolling sideways */
.filter-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.filter-row + .filter-row { margin-top: 2px; }
.filter-label {
  flex: none;
  width: 80px;
  padding-bottom: 6px;   /* line up with the pills above the scrollbar space */
  color: var(--ink-2);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.filter-scroll {
  flex: 1;
  min-width: 0;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  -webkit-mask: linear-gradient(to right, #000 calc(100% - 32px), transparent);
  mask: linear-gradient(to right, #000 calc(100% - 32px), transparent);
}
.filter-scroll.at-end { -webkit-mask: none; mask: none; }

.filter-pill {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 14px;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.filter-pill:hover { color: var(--ink); border-color: var(--ink-2); }
.filter-pill[aria-pressed="true"] {
  color: var(--ink);
  border-color: var(--accent);
  font-weight: 500;
}
.filter-count { font-size: 12px; color: var(--ink-2); font-weight: 400; }

/* ───────────── Timeline */
.tl-year {
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 0 24px;
}
.tl-year + .tl-year { margin-top: 16px; }

.tl-year-label {
  margin: 0;
  padding-top: 2px;
  font-size: 22px;
  font-weight: 600;
  position: sticky;
  top: calc(var(--header-h) + 16px);
  align-self: start;
}

.tl-list {
  list-style: none;
  margin: 0;
  padding: 0 0 40px;
  border-left: 1px solid var(--line);
}

.tl-item {
  --tl-indent: 32px;
  position: relative;
  padding: 0 0 80px var(--tl-indent);
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.tl-item:last-child { padding-bottom: 32px; }

/* The dot sits on the timeline line, level with the middle of the
   title's first line (line-height 1.2, so 0.6em down) */
.tl-title { position: relative; }

.tl-title::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--tl-indent) - 5px);
  top: calc(0.6em - 4.5px);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 4px var(--bg);
}

.tl-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 13px;
  color: var(--ink-2);
}

.tl-type {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
}

.tl-title {
  margin: 12px 0 12px;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.tl-by {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
}

.tl-summary {
  margin: 0;
  font-size: 17px;
  line-height: 1.65;
}

.tl-quote {
  margin: 20px 0 0;
  padding-left: 18px;
  border-left: 2px solid var(--accent);
  font-size: 18px;
  line-height: 1.55;
  font-style: italic;
}

.tl-source {
  display: inline-block;
  margin-top: 20px;
  font-size: 14px;
  color: var(--accent);        /* links within entries use the accent colour */
}
.tl-source:hover { text-decoration-thickness: 2px; }

/* ───────────── Footer: the title, a tagline and live figures, then links
   to every page */
.site-footer {
  padding: 72px 0 80px;
  border-top: 1px solid var(--line);
}
.hudless .site-footer { border-top-color: transparent; }
.accent-text { color: var(--accent); }

.footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(4, auto);
  gap: 40px 56px;
  max-width: 1160px;   /* the width of the wide sections, for four columns */
  margin: 0 auto;
  padding: 0 24px;
}
.footer-brand { padding-right: 24px; }   /* room before the first column */
.footer-title { margin: 0; font-size: 28px; font-weight: 500; line-height: 1.15; }
.footer-title { white-space: nowrap; }   /* always on one line */
.footer-tagline { margin: 12px 0 0; color: var(--ink); font-size: 16px; line-height: 1.6; max-width: 36em; text-wrap: balance; }   /* two even lines */
.footer-url { display: inline-block; margin-top: 14px; color: var(--accent); font-family: var(--font-ui); font-size: 14px; text-decoration: none; }
.footer-url:hover { text-decoration: underline; text-underline-offset: 3px; }

.footer-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 28px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}
.footer-stats li { display: flex; flex-direction: column; }
.footer-stats strong { font-size: 26px; font-weight: 500; line-height: 1.1; color: var(--ink); }
.footer-stats span { color: var(--ink-2); font-size: 13px; }

.footer-head {
  margin: 6px 0 14px;
  color: var(--ink-2);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.footer-col ul { margin: 0; padding: 0; list-style: none; }
.footer-col li + li { margin-top: 8px; }
.footer-col a {
  color: var(--ink);
  font-size: 17px;
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-col a:hover { color: var(--accent); }
/* Plex runs larger than Bembo at the same size */
:root[data-font="hybrid"] .footer-col a { font-size: 15px; }

@media (max-width: 1100px) {
  .footer-inner { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; padding-right: 0; }
}
@media (max-width: 640px) {
  .site-footer { padding-top: 56px; }
  .footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0 16px; }
}

/* ───────────── Positions: chamber diagrams and lab charts (positions.js) */
.positions-main, .single-main { grid-column: 2; }
#page-positions .filter-pill { font-size: 16px; }
#page-positions .filter-label { font-size: 13px; }
#page-positions .page-intro { font-size: 18px; }
#page-positions .filter-bar { margin-bottom: 20px; }

/* Stance colours, shared by seats, dots and swatches */
[data-s] { --st: color-mix(in srgb, var(--ink) 20%, var(--bg)); }
[data-s="ban"] { --st: var(--accent); }
[data-s="pace"] { --st: var(--st-pace); }
[data-s="oppose"] { --st: var(--ink); }

.positions-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  margin-bottom: 28px;
}
.positions-search input {
  width: min(280px, 100%);
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
}
.positions-search input:focus { outline: none; border-color: var(--accent); }
.positions-mode { display: flex; align-items: center; gap: 8px; }
.positions-mode .filter-label { width: auto; padding: 0 4px 0 0; }
.positions-mode[hidden] { display: none; }

/* Heading for the chosen lab or chamber, with room below it */
.positions-title {
  margin: 72px 0 0;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.2;
}
.positions-view { padding-top: 48px; }

/* Chamber diagrams scroll sideways on narrow screens. The UK chambers are
   wide and shallow, so they break out of the text column (up to 1240px,
   less the page margins, centred on the page) to show their seats larger.
   Lab charts manage their own width (below). */
.chamber-frame { overflow-x: auto; }
.chamber-frame.is-wide {
  --wide: min(1240px, calc(100vw - 96px));
  width: var(--wide);
  margin-left: calc((100% - var(--wide)) / 2);
}
@media (max-width: 1100px) {
  .chamber-frame.is-wide { --wide: calc(100vw - 32px); }
}
/* The drawing is scaled up in the wide frame, so its labels are set
   smaller to come out at about the same size as elsewhere */
.is-wide .ch-label { font-size: 10px; }
.is-wide .ch-side { font-size: 9px; }
.chamber { display: block; width: 100%; height: auto; }
.seat {
  fill: var(--st);
  cursor: pointer;
  transition: opacity 0.2s ease, fill 0.2s ease;
}
.chamber.by-party .seat { fill: var(--pc); }
.seat:hover, .seat.is-active { stroke: var(--ink); stroke-width: 1.5; }
.is-searching .seat:not(.is-match) { opacity: 0.15; }
.seat.is-match { stroke: var(--ink); stroke-width: 1.5; }
.ch-floor { fill: color-mix(in srgb, var(--ink) 5%, var(--bg)); }
.ch-furniture { fill: color-mix(in srgb, var(--ink) 28%, var(--bg)); }
.ch-label { fill: var(--ink-2); font-size: 13px; font-family: var(--font); }
.ch-side { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }

.positions-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin: 32px 0 36px;
  font-size: 16px;
  color: var(--ink-2);
}
.lg-item { display: inline-flex; align-items: center; gap: 8px; }
.lg-swatch { width: 10px; height: 10px; border-radius: 50%; background: var(--st); }

.pd-dot {
  display: inline-block;
  flex: none;
  width: 9px;
  height: 9px;
  margin-right: 8px;
  border-radius: 50%;
  background: var(--st);
  vertical-align: 0.05em;
}
.positions-detail { min-height: 170px; }
.positions-detail:empty { min-height: 0; }   /* nothing selected (the overviews) */
.pd-card {
  padding: 26px 30px 28px;
  border: 1px solid var(--line);
  border-radius: 12px;
}
.pd-card p { margin: 0; }
.pd-name { font-size: 25px; font-weight: 500; line-height: 1.2; }
.pd-meta { margin-top: 8px !important; color: var(--ink-2); font-size: 16px; }
.pd-party { display: inline-block; width: 9px; height: 9px; margin-right: 8px; border-radius: 2px; background: var(--pc); }
.pd-stance { margin-top: 20px !important; font-size: 18px; }
.pd-date { color: var(--ink-2); font-size: 15px; }
.pd-note { margin-top: 10px !important; font-size: 18px; line-height: 1.6; }
.pd-card .tl-source { display: inline-block; margin-top: 18px; font-size: 16px; }
.pd-hint { margin: 0; padding: 16px 0; color: var(--ink-2); font-size: 18px; }

.positions-notes p { margin: 36px 0 0; color: var(--ink-2); font-size: 15px; line-height: 1.65; }
.positions-desc p { margin: 16px 0 0; color: var(--ink-2); font-size: 15px; line-height: 1.6; max-width: 62em; }   /* World leaders and Major actors: what the table shows, above it */

.pl-title { margin: 88px 0 20px; font-size: 26px; font-weight: 500; }
.pl-items { list-style: none; margin: 0; padding: 0; }
.pl-item { position: relative; padding: 24px 0 24px 20px; border-top: 1px solid var(--line); }
.pl-item::before {   /* the stance colour, as a line down the entry's left edge */
  content: "";
  position: absolute;
  left: 0;
  top: 26px;
  bottom: 26px;
  width: 3px;
  border-radius: 2px;
  background: var(--st);
}
.pl-name .pd-dot { display: none; }   /* the line replaces the dot */
.pl-name {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 20px;
  cursor: pointer;
}
.pl-name:hover { color: var(--accent); }
.pl-name.is-static { cursor: auto; }
.pl-name.is-static:hover { color: var(--ink); }
.pl-meta { display: block; margin: 6px 0 0; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.pl-note { margin: 12px 0 0; font-size: 18px; line-height: 1.6; }
.pl-source { margin: 10px 0 0; }   /* the source, on its own line below the note */
.pl-source .tl-source { margin: 0; font-size: 15px; }
.pd-note .tl-source, .pl-note .tl-source { display: inline; margin: 0; }
.pl-empty { color: var(--ink-2); }

/* Lab charts: a tree of people, with connectors drawn by the list items */
.org-company {
  margin-bottom: 28px;
  padding: 4px 0 4px 16px;
  border-left: 3px solid var(--st);
}
.org-company p { margin: 0; }
/* Behaviour and evaluation are coloured like the position: a rule and
   dots in the company's stance colour */
.cb-notes, .cb-incidents { margin: 8px 0 0; padding: 0; list-style: none; }
.cb-notes li { font-size: 18px; line-height: 1.55; }
.cb-notes li + li { margin-top: 6px; }
.cb-notes .tl-source { display: inline; margin: 0; font-size: 15px; }
.cb-notes + .pd-note { margin-top: 12px !important; }
.cb-incidents li + li { margin-top: 4px; }
.cb-incidents a { display: inline-flex; align-items: baseline; gap: 10px; color: var(--ink); font-size: 17px; text-decoration: none; transition: color 0.2s ease; }
.cb-incidents a:hover { color: var(--accent); }
.cb-date { color: var(--ink-2); font-family: var(--font-ui); font-size: 14px; white-space: nowrap; }
.ce-verdict { margin: 8px 0 6px !important; font-size: 24px; font-weight: 500; line-height: 1.25; }
.ce-verdict .pd-dot { width: 11px; height: 11px; margin-right: 10px; vertical-align: 0.12em; }
.org-behaviour .pd-stance + .cb-notes { margin-top: 10px; }
.ce-basis { margin-top: 10px !important; color: var(--ink-2); font-size: 14px; }
/* Room below the chart, before the key and detail card */
.org-scroll { margin-bottom: 64px; }
/* The company's card holds its position, behaviour and evaluation */
.pd-company .org-company { margin: 20px 0 0; padding-left: 0; border-left: 0; }   /* dots only, no rule */
.pd-company .org-company + .org-company { margin-top: 24px; }
.org-company-label { color: var(--ink-2); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
/* The chart isn't limited by the text column: it can use the page's full
   width (less the usual 48px margins), centred on the page, and only
   scrolls if even that isn't wide enough */
.org-scroll {
  --chart-gutter: 48px;
  width: calc(100vw - 2 * var(--chart-gutter));
  margin-left: calc(50% - 50vw + var(--chart-gutter));
  overflow-x: auto;
  padding-bottom: 8px;
}
@media (max-width: 1100px) {
  .org-scroll { --chart-gutter: 16px; }
}
.org-tree, .org-tree ul {
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 20px 0 0;
  list-style: none;
  position: relative;
}
.org-tree { padding-top: 0; min-width: max-content; }
.org-tree li {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  padding: 20px 4px 0;
}
.org-tree > li { padding-top: 0; }
.org-tree li::before, .org-tree li::after {
  content: "";
  position: absolute;
  top: 0;
  right: 50%;
  width: 50%;
  height: 20px;
  border-top: 1px solid var(--line);
}
.org-tree li::after { right: auto; left: 50%; border-left: 1px solid var(--line); }
.org-tree > li::before, .org-tree > li::after,
.org-tree li:only-child::before { display: none; }
.org-tree li:only-child::after { border-top: 0; }
.org-tree li:first-child::before, .org-tree li:last-child::after { border: 0; }
.org-tree li:last-child::before { border-right: 1px solid var(--line); border-radius: 0 6px 0 0; }
.org-tree li:first-child::after { border-radius: 6px 0 0 0; }
.org-tree li:only-child::after { border-radius: 0; }
.org-tree ul::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  height: 20px;
  border-left: 1px solid var(--line);
}
.org-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 148px;
  padding: 11px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s ease, opacity 0.2s ease;
}
.org-node[data-s="ban"], .org-node[data-s="pace"], .org-node[data-s="oppose"] { border-color: var(--st); }
.org-node:hover, .org-node:focus-visible { border-color: var(--ink-2); }
.org-node.is-active { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
/* The company box heads the chart: wider, with a heavier name */
.org-node-company { width: 230px; padding: 14px 16px; border-width: 1.5px; }
.org-node-company .org-name { font-size: 21px; }
.org-node-company .org-role { letter-spacing: 0.08em; text-transform: uppercase; font-size: 12px; }
.pd-card .pd-stance + .pd-note + .pd-stance { margin-top: 24px !important; }
.org-name { display: inline-flex; align-items: center; font-size: 17px; font-weight: 500; line-height: 1.25; }
.org-role { color: var(--ink-2); font-size: 14px; line-height: 1.35; }
.is-searching .org-node:not(.is-match) { opacity: 0.3; }
.org-node.is-match { border-color: var(--accent); }

@media (max-width: 1100px) {
  .positions-main, .single-main { grid-column: 1; }
}
@media (max-width: 640px) {
  .chamber { min-width: 640px; }
}

/* ───────────── Positions overviews: headline figures, then a comparison
   table with a row per lab or chamber (each row opens it) */
.ov-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  margin: 0 0 48px;
  padding: 0;
  list-style: none;
}
.ov-stats + .ov-stats { margin-top: -20px; }   /* a second row of figures sits closer */
.ov-after { margin-top: 48px; }   /* Industry and Government: the figures follow the table */
.ov-after .ov-stats:last-child { margin-bottom: 0; }
.ov-stats li { display: flex; flex-direction: column; gap: 6px; padding-top: 14px; border-top: 1px solid var(--line); }
.ov-stats li[data-s] { border-top: 2px solid var(--st); }
.ov-stats strong { font-size: 44px; font-weight: 500; line-height: 1; }
.ov-stats span { display: inline-flex; align-items: baseline; color: var(--ink-2); font-size: 15px; line-height: 1.35; }
.ov-stats .pd-dot { align-self: center; }

.ov-table { border-bottom: 1px solid var(--line); }
.ov-head, .ov-row {
  display: grid;
  align-items: center;
  gap: 20px;
  padding: 0 12px;
}
.ov-industry .ov-head, .ov-industry .ov-row { grid-template-columns: 1.1fr 1.15fr 1.6fr 1.5fr 1.05fr 1fr 20px; }
.ov-gov .ov-head, .ov-gov .ov-row { grid-template-columns: 1.5fr 1.5fr 1.2fr 20px; }
.ov-people .ov-head, .ov-people .ov-row { grid-template-columns: 1.15fr 1fr 2.6fr; }
/* Each lab's mark beside its name, in the text colour */
.ov-industry .ov-name { flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 12px; }
.ov-logo { flex: none; width: 22px; height: 22px; }
/* World leaders and major actors: rows of people, not links */
.ov-people .ov-row { align-items: start; padding-top: 20px; padding-bottom: 20px; cursor: auto; }
.ov-people .ov-row:hover { background: transparent; }
.ov-people .ov-name { font-size: 20px; }
.ov-role { display: block; margin-top: 4px; color: var(--ink-2); font-family: var(--font-ui); font-size: 13px; font-weight: 400; line-height: 1.35; }
.ov-people .ov-pos { padding-top: 3px; font-size: 16px; }
.ov-said { display: block; font-size: 17px; line-height: 1.55; }
.ov-said .pd-date { margin-right: 6px; color: var(--ink-2); font-family: var(--font-ui); font-size: 13px; }
.ov-sources { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; font-size: 14px; }
/* The figures and tables may be wider than the text column (up to
   1160px, centred) */
.ov-table, .ov-stats, .is-overview .positions-title, .is-overview .positions-desc, .is-overview .positions-notes, .is-overview .filter-bar, .is-overview .page-head {
  --wide: min(1160px, calc(100vw - 96px));
  width: var(--wide);
  margin-left: calc((100% - var(--wide)) / 2);
}
@media (max-width: 1100px) {
  .ov-table, .ov-stats, .is-overview .positions-title, .is-overview .positions-desc, .is-overview .positions-notes, .is-overview .filter-bar, .is-overview .page-head { --wide: calc(100vw - 32px); }
}
/* A proportion bar: a track for the total, filled for the share */
.ov-share { display: inline-flex; align-items: center; gap: 10px; width: 100%; }
.ov-track { flex: 1; max-width: 110px; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 14%, var(--bg)); overflow: hidden; }
.ov-fill { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.ov-share .ov-num { white-space: nowrap; }
.ov-head {
  padding-bottom: 10px;
  color: var(--ink-2);
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ov-row {
  position: relative;
  width: 100%;
  min-height: 76px;
  border: 0;
  border-top: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 17px;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.ov-row::before {   /* the stance colour, as a short rule at the row's start */
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 3px;
  border-radius: 2px;
  background: var(--st);
}
.ov-row:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.ov-cell { display: inline-flex; align-items: center; flex-wrap: wrap; min-width: 0; line-height: 1.35; }
.ov-name { flex-direction: column; align-items: flex-start; font-size: 22px; font-weight: 500; line-height: 1.2; }
.ov-country { color: var(--ink-2); font-family: var(--font-ui); font-size: 11px; font-weight: 400; letter-spacing: 0.08em; }
.ov-verdict { font-style: italic; }
.ov-pos { flex-wrap: nowrap; align-items: baseline; }
.ov-pos .pd-dot { flex: none; }
.ov-bar { position: relative; gap: 10px; flex-wrap: nowrap; }
.ov-bar-fill { display: block; height: 6px; min-width: 6px; max-width: calc(100% - 32px); border-radius: 3px; background: var(--st); }
.ov-num { font-family: var(--font-ui); font-size: 16px; }
.ov-muted { color: var(--ink-2); font-size: 15px; }
.ov-dots { gap: 5px; }
.ov-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--st); }
.ov-arrow { color: var(--ink-2); font-size: 18px; transition: transform 0.25s ease, color 0.2s ease; }
.ov-row:hover .ov-arrow { color: var(--accent); transform: translateX(4px); }
/* Positions' heading and filter rows widen smoothly to the overview's
   width, and narrow back to the text column on the other subpages */
:where(.positions-main) > .page-head, :where(.positions-main) > .filter-bar {
  width: 100%;
  margin-left: 0;
  transition: width 0.5s cubic-bezier(0.65, 0, 0.35, 1), margin-left 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
@media (prefers-reduced-motion: reduce) {
  :where(.positions-main) > .page-head, :where(.positions-main) > .filter-bar { transition: none; }
}

@media (max-width: 860px) {
  .ov-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ov-head { display: none; }
  .ov-industry .ov-row, .ov-gov .ov-row { grid-template-columns: 1fr 1fr; gap: 10px 16px; padding: 16px 12px 16px 18px; }
  .ov-people .ov-row { grid-template-columns: 1fr; gap: 8px; padding: 16px 12px 16px 18px; }
  .ov-table, .ov-stats, .is-overview .positions-title, .is-overview .positions-desc, .is-overview .positions-notes, .is-overview .filter-bar, .is-overview .page-head { width: auto; margin-left: 0; }
  .ov-name { grid-column: 1 / -1; }
  .ov-arrow { display: none; }
}

/* ───────────── Organisations: a grid of cards */
.org-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.org-card {
  display: flex;
  flex-direction: column;
  padding: 24px 26px 26px;
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: border-color 0.2s ease;
}
.org-card:hover { border-color: var(--ink-2); }
.org-card-meta { margin: 0; color: var(--ink-2); font-size: 13px; }
.org-card-name { margin: 8px 0 12px; font-size: 22px; font-weight: 500; line-height: 1.2; }
.org-card-summary { margin: 0; font-size: 16px; line-height: 1.55; flex: 1; }
.org-card .tl-source { margin-top: 18px; align-self: flex-start; }

/* ───────────── Coordinate and Contact: numbered steps */
.steps { margin: 0; padding: 0; list-style: none; counter-reset: step; }
.step {
  position: relative;
  padding: 28px 0 28px 64px;
  border-top: 1px solid var(--line);
  counter-increment: step;
}
.step:first-child { border-top: 0; padding-top: 0; }
.step::before {
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 28px;
  color: var(--accent);
  font-size: 22px;
  line-height: 1.2;
}
.step:first-child::before { top: 0; }
/* ───────────── Contact form */
.contact-form { display: grid; gap: 20px; max-width: 680px; }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cf-field { display: grid; gap: 8px; }
.cf-label {
  color: var(--ink-2);
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.contact-form input, .contact-form select, .contact-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 17px;
  transition: border-color 0.2s ease;
}
.contact-form select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%), linear-gradient(-45deg, transparent 50%, var(--ink-2) 50%); background-position: calc(100% - 20px) 55%, calc(100% - 15px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 40px; }
.contact-form select option { background: var(--bg); color: var(--ink); }
.contact-form textarea { resize: vertical; min-height: 160px; line-height: 1.55; }
.contact-form :is(input, select, textarea):hover { border-color: var(--ink-2); }
.contact-form :is(input, select, textarea):focus { outline: none; border-color: var(--accent); }
.contact-form .is-invalid { border-color: var(--accent); }
.cf-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.cf-send {
  padding: 12px 22px;
  border: 1px solid var(--accent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--ink);
  font: inherit;
  font-family: var(--font-ui);
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.cf-send:hover { background: color-mix(in srgb, var(--accent) 30%, transparent); }
.cf-send:active { background: color-mix(in srgb, var(--accent) 50%, transparent); }
.cf-send[disabled] { opacity: 0.6; cursor: progress; }
.cf-status { margin: 0; color: var(--ink-2); font-size: 16px; }
.cf-status.is-error { color: var(--accent); }
@media (max-width: 640px) {
  .cf-row { grid-template-columns: 1fr; }
}
.step h3 { margin: 0 0 8px; font-size: 24px; font-weight: 500; line-height: 1.2; }
.step p { margin: 0; font-size: 18px; line-height: 1.6; }
.step-links { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 4px 0 0; padding: 0; list-style: none; }
.step-links .tl-source { margin-top: 10px; font-size: 16px; }

/* ───────────── Back to top */
.to-top {
  position: fixed;
  right: 54px;
  bottom: 38px;
  z-index: 10;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
}
.to-top.visible { opacity: 1; visibility: visible; }

/* U+1F891 (UPWARDS TRIANGLE ARROWHEAD), from Noto Sans Symbols 2; used for
   the back-to-top button and, rotated, the controls toggle */
.arrow-glyph {
  font-family: "Noto Sans Symbols 2", "Segoe UI Symbol", "Apple Symbols", sans-serif;
  font-size: 28px;
  line-height: 1;
}

/* app.js measures the glyph's actual shape and redraws it as a mask centred
   in this box, so it sits in the exact middle of the button in any font. The
   mask is filled with the text colour, so hover and theme colours still apply. */
.arrow-glyph.is-centred {
  width: 16px;
  height: 16px;
  font-size: 0;
  background: currentColor;
  -webkit-mask: var(--glyph) center / contain no-repeat;
  mask: var(--glyph) center / contain no-repeat;
}
.to-top:hover { color: var(--accent); }

/* Pressed: by mouse (:active) or by its Backspace shortcut (.is-pressed,
   which also gets the cursor's click ripple from app.js) */
.to-top .arrow-glyph { transition: scale 0.15s ease; }
.to-top:active,
.to-top.is-pressed { color: var(--accent); }
.to-top:active .arrow-glyph,
.to-top.is-pressed .arrow-glyph { scale: 0.8; }

/* ───────────── Custom cursor (mouse and trackpad only; see app.js) */
.cursor-dot,
.cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  translate: -100px -100px;
  will-change: translate;
}

.cursor-dot {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: var(--accent);
}

.cursor-ring {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1.5px solid var(--ink);
}

/* Position (set by JS) uses `translate`, which applies before `scale`, so the
   size effects below never shift the cursor off the pointer */
.cursor-dot { scale: 1; transition: scale 0.2s ease, opacity 0.2s ease, background-color 0.2s ease; }
.cursor-ring { scale: 1; transition: scale 0.25s ease, opacity 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; }

.has-custom-cursor,
.has-custom-cursor * { cursor: none !important; }
.has-custom-cursor .cursor-dot,
.has-custom-cursor .cursor-ring { opacity: 1; }
.has-custom-cursor.cursor-away .cursor-dot,
.has-custom-cursor.cursor-away .cursor-ring { opacity: 0; }

/* Hover over anything clickable: a gentle cue — the ring grows a little
   and takes the accent colour, with the faintest tint, and the dot shrinks */
.cursor-hover .cursor-ring {
  scale: 1.25;
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.cursor-hover .cursor-dot { scale: 0.6; }

/* Click: the ring snaps shut into a solid accent disc, and a ripple
   (added by app.js) spreads out from the click point */
.cursor-down .cursor-ring,
.cursor-down.cursor-hover .cursor-ring {
  scale: 0.45;
  border-color: var(--accent);
  background: var(--accent);
  transition-duration: 0.08s;
}
.cursor-down .cursor-dot { scale: 0; }

.cursor-ripples { position: fixed; inset: 0; z-index: 99; pointer-events: none; }

.cursor-ripple {
  position: fixed;
  top: 0;
  left: 0;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  animation: cursor-ripple 0.5s ease-out forwards;
}

@keyframes cursor-ripple {
  from { scale: 0.4; opacity: 0.9; }
  to { scale: 2.6; opacity: 0; }
}

/* Keyboard stand-in for the cursor ring snapping shut on a click */
.cursor-press {
  position: fixed;
  top: 0;
  left: 0;
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
  border-radius: 50%;
  background: var(--accent);
  animation: cursor-press 0.35s ease-out forwards;
}

@keyframes cursor-press {
  from { scale: 0.45; opacity: 1; }
  to { scale: 0.45; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cursor-ripple, .cursor-press { display: none; }
}

@media (forced-colors: active) {
  .cursor-dot, .cursor-ring, .cursor-ripples { display: none; }
  .has-custom-cursor, .has-custom-cursor * { cursor: auto !important; }
}

/* ───────────── Phones */
@media (max-width: 640px) {
  :root { --header-h: 80px; --menu-h: 88px; --corner-w: 150px; }   /* room kept clear for the site address */
  :root { --menu-gap: 16px; }
  .menu .menu-inner { gap: 18px; }
  .menu a { font-size: 17px; }
  .container { padding: 0 16px; }
  .page-main { padding: 0 16px; }
  .header-inner { padding: 0 16px; }
  /* The pills fill the menu row on phones, so the controls sit just above
     it instead */
  .page-controls { left: 7px; bottom: 0; height: 48px; }   /* the column edge is 16px here */
  .news { left: 16px; width: calc(100vw - 32px - var(--corner-w)); gap: 12px; font-size: 14px; }
  .news-label-long { display: none; }
  .news-label-short { display: inline; }
  .control-set { gap: 4px; }
  .controls-toggle { margin-right: 4px; }
  .icon-btn { width: 32px; height: 32px; }
  .site-title { font-size: 15px; }
  .page-title-fixed { font-size: 21px; }
  .filter-row { flex-direction: column; align-items: stretch; gap: 2px; }
  .filter-row + .filter-row { margin-top: 10px; }
  .filter-label { width: auto; padding: 0 2px; }
  /* The design controls sit just above the menu, under the text column's
     start, so the hero keeps room below its text for them */
  .hero { padding-top: var(--header-h); padding-bottom: 108px; --hero-rest: 666px; }
  .tl-year { grid-template-columns: 1fr; }
  .tl-year-label { position: static; margin-bottom: 20px; }
  .tl-item { --tl-indent: 24px; padding-bottom: 56px; }
  .tl-title { font-size: 23px; }
  .to-top { right: 22px; bottom: 30px; }
}

/* Short phones: the description is left out, so less room is needed */
@media (max-width: 640px) and (max-height: 760px) {
  .hero { --hero-rest: 558px; }
}

/* Boards (and Anthropic's Trust): a box listing their members, in the tree */
.org-group {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
}
.org-group-label {
  margin: 0 0 10px;
  color: var(--ink-2);
  font-family: var(--font-ui, inherit);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
}
.org-members {
  display: grid;
  grid-template-columns: repeat(3, 172px);
  gap: 6px;
}
.org-group.is-small .org-members { grid-template-columns: repeat(2, 172px); }
.org-member {
  width: auto;
  align-items: flex-start;
  padding: 8px 10px;
  border-radius: 8px;
  text-align: left;
}
.org-member .org-name { font-size: 15px; }
.org-member .org-role { font-size: 12.5px; }
/* A team with no reports of its own, stacked in one box */
.org-stack { padding: 8px; }
.org-stack .org-members { grid-template-columns: 172px; }

/* Former staff who left over safety or risk concerns: an area of their own
   below the chart, set apart by a dashed rule and box */
.org-departed {
  display: flex;
  justify-content: center;
  min-width: max-content;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px dashed var(--line);
}
.org-group-departed { border-style: dashed; }
.org-group-departed .org-members { grid-template-columns: repeat(4, 172px); }
@media (max-width: 1100px) {
  .org-group-departed .org-members { grid-template-columns: repeat(2, 172px); }
}
.pd-left { color: var(--ink-2); }

/* An accent-coloured ring around the back-to-top arrow (drawn inside the
   button, so it doesn't change its size) */
.to-top { box-shadow: inset 0 0 0 1.5px var(--accent); }
/* Smaller arrows than the glyph's default: the controls' and, smaller
   still, the back-to-top button's */
.controls-toggle .arrow-glyph.is-centred { width: 14px; height: 14px; }
.to-top .arrow-glyph.is-centred { width: 14px; height: 14px; }

/* Positions: previous / next through a diagram's boxes or seats */
.positions-step {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 32px 0 20px;
}
.positions-step[hidden] { display: none; }
.step-btn {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.step-btn:hover, .step-btn:focus-visible { border-color: var(--accent); color: var(--accent); }
.step-count { min-width: 84px; color: var(--ink-2); font-family: var(--font-ui); font-size: 13px; text-align: center; font-variant-numeric: tabular-nums; }

/* ───────────── Glossary: terms A–Z, each letter heading beside its terms */
.gl-group {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 0 24px;
  padding: 28px 0;
  border-top: 1px solid var(--line);
}
.gl-group:last-child { border-bottom: 1px solid var(--line); }
.gl-letter { margin: 0; color: var(--accent); font-size: 34px; font-weight: 500; line-height: 1; }
.gl-terms { margin: 0; }
.gl-item + .gl-item { margin-top: 24px; }
.gl-term { font-size: 21px; font-weight: 500; line-height: 1.3; }
.gl-area {
  display: block;
  margin-bottom: 4px;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.gl-also { color: var(--ink-2); font-weight: 400; }
.gl-def { margin: 6px 0 0; line-height: 1.55; }
@media (max-width: 600px) {
  .gl-group { grid-template-columns: 1fr; gap: 12px; }
}

/* ───────────── Race: a track with a lane per lab or state. Time runs left
   to right from the start line to today, where the track fades into the future; year
   lines cross the track like laps. Releases are round markers in the
   accent; states' moves are diamonds in the ink colour. */
.race-scroll {
  --chart-gutter: 48px;
  width: calc(100vw - 2 * var(--chart-gutter));
  margin: 8px 0 0 calc(50% - 50vw + var(--chart-gutter));
  overflow-x: auto;
  padding-bottom: 8px;
}
@media (max-width: 1100px) { .race-scroll { --chart-gutter: 16px; } }
.rt-inner {
  --name-w: 150px;
  width: calc(var(--name-w) + var(--track-w) + 160px);
  min-width: 100%;
  padding-right: 160px;   /* room for today's label and the fading future */
}
.rt-axis, .rt-lane { display: grid; grid-template-columns: var(--name-w) minmax(0, 1fr); }
.rt-lane-name {
  position: sticky;
  left: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  padding-right: 12px;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 14px;
}
.rt-lane-track { position: relative; }
.rt-axis .rt-lane-track { height: 30px; }
.rt-year, .rt-start-label, .rt-finish-label {
  position: absolute;
  top: 4px;
  color: var(--ink-2);
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.rt-year { transform: translateX(-50%); }
.rt-start-label { left: 0; text-transform: uppercase; }
.rt-finish-label { left: 100%; margin-left: 10px; color: var(--accent); text-transform: uppercase; }

/* Lanes, divided by lines like a running track */
.rt-lanes { position: relative; border-bottom: 1px solid var(--line); }
.rt-lane { border-top: 1px solid var(--line); }
.rt-lane .rt-lane-track { height: 76px; }
.rt-lane .rt-lane-track::before {   /* the lane's centre line, faint */
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1px dashed color-mix(in srgb, var(--line) 70%, transparent);
}
/* A divider between the labs' lanes and the states' */
.rt-lane[data-cat="releases"] + .rt-lane[data-cat="states"] { border-top: 3px double var(--line); }
.rt-grid { position: absolute; top: 0; bottom: 0; left: var(--name-w); right: 0; pointer-events: none; }
.rt-lap { position: absolute; top: -30px; bottom: 0; border-left: 1px dashed var(--line); }
.rt-start { position: absolute; top: -30px; bottom: 0; left: 0; border-left: 2px solid var(--ink); }
/* Today, and the future beyond it: a thin line at "now", then a haze of
   the accent over a field of dots that fades out to the right, as the
   lanes run on into it and fade too */
.rt-finish {
  position: absolute;
  top: -30px;
  bottom: 0;
  left: 100%;
  width: 160px;
  border-left: 1.5px solid var(--accent);
  background:
    radial-gradient(circle, color-mix(in srgb, var(--ink) 30%, transparent) 0.8px, transparent 1.3px) 6px 6px / 12px 12px,
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 22%, transparent), transparent 85%);
  -webkit-mask: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 100%);
  mask: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.5) 45%, transparent 100%);
}
.rt-lane, .rt-lanes { position: relative; }
.rt-lane .rt-lane-track::after,   /* each lane's centre line, running on */
.rt-lane::after,                  /* and the lines between lanes */
.rt-lanes::after {
  content: "";
  position: absolute;
  left: 100%;
  width: 140px;
  pointer-events: none;
  -webkit-mask: linear-gradient(90deg, #000, transparent);
  mask: linear-gradient(90deg, #000, transparent);
}
.rt-lane .rt-lane-track::after { top: 50%; border-top: 1px dashed color-mix(in srgb, var(--ink-2) 60%, transparent); }
.rt-lane::after { top: -1px; border-top: 1px solid var(--line); }
.rt-lanes::after { bottom: -1px; border-top: 1px solid var(--line); }

.rt-mark {
  position: absolute;
  top: 50%;
  z-index: 1;
  display: block;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  transform: translate(-50%, -50%);
  cursor: pointer;
}
.rt-dot {
  display: block;
  width: 12px;
  height: 12px;
  margin: 5px;
  border-radius: 50%;
  background: var(--accent);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
[data-cat="states"] .rt-dot, .rt-mark[data-cat="states"] .rt-dot { border-radius: 2px; background: var(--ink); transform: rotate(45deg) scale(0.9); }
.rt-label {
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  color: var(--ink-2);
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.2;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.rt-mark.is-below .rt-label { top: calc(100% + 2px); bottom: auto; }
.rt-mark.is-end .rt-label { left: auto; right: 50%; margin-right: 10px; transform: none; }
.rt-mark.is-start .rt-label { left: 50%; margin-left: -6px; transform: none; }
/* No room for its label: it shows on hover or when selected, over the others */
.rt-mark.is-hidden-label .rt-label { opacity: 0; padding: 1px 4px; border-radius: 4px; background: var(--bg); }
.rt-mark.is-hidden-label:hover .rt-label, .rt-mark.is-hidden-label:focus-visible .rt-label, .rt-mark.is-hidden-label.is-active .rt-label { opacity: 1; }
.rt-mark:hover, .rt-mark:focus-visible, .rt-mark.is-active { z-index: 2; }
.rt-mark:hover .rt-label, .rt-mark:focus-visible .rt-label, .rt-mark.is-active .rt-label { color: var(--ink); }
.rt-mark:hover .rt-dot, .rt-mark:focus-visible .rt-dot { transform: scale(1.3); }
.rt-mark[data-cat="states"]:hover .rt-dot, .rt-mark[data-cat="states"]:focus-visible .rt-dot { transform: rotate(45deg) scale(1.2); }
.rt-mark.is-active .rt-dot { box-shadow: 0 0 0 3px var(--bg), 0 0 0 4.5px var(--ink); }
.rt-mark:focus-visible { outline: none; }

.race-detail { margin: 32px 0 64px; min-height: 180px; }
.rd-card .pd-date { margin: 0 0 6px; color: var(--ink-2); font-size: 13px; }

/* The list below the track, newest first, a year at a time */
.race-list-title { margin: 0 0 8px; color: var(--ink-2); font-family: var(--font-ui); font-size: 12px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; }
.rl-year {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 0 24px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.rl-year:last-child { border-bottom: 1px solid var(--line); }
.rl-year-label { margin: 6px 0 0; font-size: 26px; font-weight: 500; line-height: 1; }
.rl-items { margin: 0; padding: 0; list-style: none; }
.rl-row {
  display: grid;
  grid-template-columns: 104px 150px minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.rl-row:hover { background: color-mix(in srgb, var(--line) 50%, transparent); }
.rl-row.is-active { background: var(--line); }
.rl-date { color: var(--ink-2); font-family: var(--font-ui); font-size: 13px; }
.rl-lane { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-family: var(--font-ui); font-size: 13px; }
.rl-lane .rt-dot { width: 8px; height: 8px; margin: 0; }
.rl-title { font-size: 18px; }
@media (max-width: 600px) {
  .rt-inner { --name-w: 104px; }
  .rt-lane-name { font-size: 12px; }
  .rl-year { grid-template-columns: 1fr; gap: 8px; }
  .rl-row { grid-template-columns: 1fr; gap: 2px; }
}

/* ───────────── Incidents: a matrix of incidents (columns, oldest to newest)
   by developer (rows). A marker's shape is the incident's type (circle:
   unintended behaviour, square: loss of control, diamond: cyberattack) and
   its colour the category; a line joins the markers of one incident. */
.inc-scroll {
  --chart-gutter: 48px;
  width: calc(100vw - 2 * var(--chart-gutter));
  margin: 8px 0 0 calc(50% - 50vw + var(--chart-gutter));
  overflow-x: auto;
  padding-bottom: 8px;
}
@media (max-width: 1100px) { .inc-scroll { --chart-gutter: 16px; } }
.inc-matrix {
  --name-w: 150px;
  --col-w: 36px;
  --row-h: 48px;
  position: relative;
  display: grid;
  grid-template-columns: var(--name-w) repeat(var(--cols), var(--col-w)) 84px;
  grid-template-rows: 34px repeat(var(--rows), var(--row-h));
  width: max-content;
  margin: 0 auto;
  border-bottom: 1px solid var(--line);
}
.im-year {
  grid-row: 1;
  align-self: end;
  padding: 0 0 8px 6px;
  color: var(--ink-2);
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.im-yearline { justify-self: start; border-left: 1px dashed var(--line); pointer-events: none; }
.im-rowline { grid-column: 1 / -1; border-top: 1px solid var(--line); pointer-events: none; }
.im-org {
  position: sticky;
  left: 0;
  z-index: 3;
  grid-column: 1;
  display: flex;
  align-items: center;
  padding-right: 12px;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 14px;
  border-top: 1px solid var(--line);
}
.im-org.is-current { color: var(--accent); }
.im-total {
  grid-column: -2 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 14px;
}
.im-total-bar { display: block; height: 6px; min-width: 3px; max-width: 40px; border-radius: 3px; background: var(--ink-2); flex: none; }
.im-total-num { color: var(--ink-2); font-family: var(--font-ui); font-size: 13px; font-variant-numeric: tabular-nums; }
.im-col {
  z-index: 0;
  margin: 0 2px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.im-col:hover, .im-col.is-preview { background: color-mix(in srgb, var(--line) 55%, transparent); }
.im-col.is-active { background: var(--line); }
.im-col:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Markers: colour by category, shape by type */
.im-mark { --mk: var(--ink-2); }
.im-mark[data-cat="misalignment"], .im-link[data-cat="misalignment"] { --mk: var(--accent); }
.im-mark[data-cat="misuse"], .im-link[data-cat="misuse"] { --mk: var(--ink); }
.im-mark[data-cat="malfunction"], .im-link[data-cat="malfunction"] { --mk: var(--st-pace); }
.im-mark[data-cat="misinformation"], .im-link[data-cat="misinformation"],
.im-mark[data-cat="misbehaviour"], .im-link[data-cat="misbehaviour"] { --mk: var(--ink-2); }
.im-mark {
  z-index: 2;
  justify-self: center;
  align-self: center;
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--mk);
  pointer-events: none;
}
.im-mark[data-type="control"] { border-radius: 2px; }
.im-mark[data-type="cyber"] { border-radius: 1px; transform: rotate(45deg) scale(0.88); }
.im-mark[data-cat="misbehaviour"] { background: var(--bg); box-shadow: inset 0 0 0 2px var(--mk); }   /* hollow */
.im-link {
  z-index: 1;
  justify-self: center;
  width: 2px;
  margin: calc(var(--row-h) / 2) 0;
  background: var(--mk, var(--ink-2));
  border-radius: 1px;
  pointer-events: none;
}

.inc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 32px;
  margin: 20px 0 0;
  color: var(--ink-2);
  font-family: var(--font-ui);
  font-size: 13px;
}
.il-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.il-title { color: var(--ink); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.il-item { display: inline-flex; align-items: center; gap: 8px; }
.il-item .im-mark { width: 10px; height: 10px; }
.il-link { display: block; width: 2px; height: 16px; border-radius: 1px; background: var(--ink-2); }

.inc-detail { margin: 32px 0 64px; min-height: 200px; }
.id-card .pd-date { margin: 0 0 6px; color: var(--ink-2); font-size: 13px; }

.inc-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.inc-list li { border-bottom: 1px solid var(--line); }
.il-row {
  display: grid;
  grid-template-columns: 104px 18px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: baseline;
  width: 100%;
  padding: 12px 10px;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.il-row:hover { background: color-mix(in srgb, var(--line) 50%, transparent); }
.il-row.is-active { background: var(--line); }
.il-mark { align-self: center; display: grid; place-items: center; }
.il-mark .im-mark { width: 10px; height: 10px; }
.il-title-text { font-size: 18px; line-height: 1.35; }
.il-orgs { color: var(--ink-2); font-family: var(--font-ui); font-size: 13px; text-align: right; }
@media (max-width: 700px) {
  .inc-matrix { --name-w: 112px; --col-w: 32px; }
  .im-org { font-size: 12px; }
  .il-row { grid-template-columns: 18px minmax(0, 1fr); gap: 4px 12px; }
  .il-row .rl-date { grid-column: 2; order: -1; }
  .il-orgs { grid-column: 2; text-align: left; }
}

/* No incidents match the filters */
.inc-matrix:has(.im-empty) { display: block; width: auto; max-width: calc(var(--column) - 48px); border-bottom: 0; }
.im-empty {
  margin: 0;
  padding: 40px 24px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  color: var(--ink-2);
  text-align: center;
  line-height: 1.6;
}
.im-reset {
  margin: 12px 6px 0;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: none;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.im-reset:hover, .im-reset:focus-visible { border-color: var(--accent); color: var(--accent); }
/* A filter pill that would show nothing with the other row's choice */
.filter-pill.is-empty:not([aria-pressed="true"]) { opacity: 0.45; }

/* Positions: everyone without a recorded position, below the recorded ones */
.pu-intro { margin: 0 0 24px; color: var(--ink-2); font-size: 16px; line-height: 1.6; }
.pu-group { padding: 24px 0 20px; border-top: 1px solid var(--line); }
.pu-party { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; font-size: 18px; font-weight: 500; }
.pu-party .pd-party { margin: 0; }
.pu-items {
  columns: 3 200px;
  column-gap: 36px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.pu-items li { break-inside: avoid; }
.pu-name {
  display: block;
  width: 100%;
  padding: 8px 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 16px;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}
.pu-name:hover { color: var(--accent); }
.pu-name.is-static { cursor: auto; padding: 9px 0; }
.pu-name.is-static:hover { color: var(--ink); }
.pu-area { display: block; margin-top: 3px; color: var(--ink-2); font-family: var(--font-ui); font-size: 12px; }

/* ───────────── Actors: cards (shared with the old directory) and, for
   institutions, a world map with a pin per place */
.org-card-role { margin: -2px 0 10px; color: var(--ink-2); font-size: 16px; line-height: 1.4; }
.org-card-stance { margin: 12px 0 0; font-size: 15px; }
.actors-map {
  --wide: min(1160px, calc(100vw - 96px));
  width: var(--wide);
  margin: 64px 0 64px calc((100% - var(--wide)) / 2);
}
@media (max-width: 1100px) { .actors-map { --wide: calc(100vw - 32px); } }
@media (max-width: 600px) { .actors-map { margin-top: 40px; margin-bottom: 40px; } }
.actors-map svg { display: block; width: 100%; height: auto; overflow: hidden; }   /* the land runs on past the crop (Antarctica) */
.am-land { fill: color-mix(in srgb, var(--ink) 9%, var(--bg)); }
.am-borders { fill: none; stroke: var(--bg); stroke-width: 0.6; stroke-linejoin: round; }
.am-pin { cursor: pointer; outline: none; }
.am-halo { fill: var(--accent); opacity: 0.18; transition: opacity 0.2s ease; }
.am-dot { fill: var(--accent); stroke: var(--bg); stroke-width: 1.5; }
.am-count { fill: var(--on-accent); font-family: var(--font-ui); font-size: 11px; font-weight: 600; text-anchor: middle; pointer-events: none; }
.am-pin:hover .am-halo, .am-pin:focus-visible .am-halo { opacity: 0.4; }
.am-pin.is-active .am-halo { opacity: 0.5; }
.am-pin.is-active .am-dot { stroke: var(--ink); }
.actors-place { margin: 0 0 24px; font-size: 18px; }
.actors-place p { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; }
.actors-place .im-reset { margin: 0; }

/* Actors: the cards run three across, as wide as the map above them, and
   the page's title, intro and filters span the same width */
#page-actors .page-head, #page-actors .filter-bar, #actors-place,
#actors-list,
#page-companions .page-head, #page-companions .filter-bar, #companions-list {
  --wide: min(1160px, calc(100vw - 96px));
  width: var(--wide);
  margin-left: calc((100% - var(--wide)) / 2);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 1100px) { #page-actors .page-head, #page-actors .filter-bar, #actors-place, #actors-list, #page-companions .page-head, #page-companions .filter-bar, #companions-list { --wide: calc(100vw - 32px); } }
@media (max-width: 900px) { #actors-list, #companions-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { #actors-list, #companions-list { grid-template-columns: 1fr; } }

/* Actors: with All chosen, the cards are grouped under their categories */
.ac-group-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 32px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 26px;
  font-weight: 500;
  list-style: none;
}
.ac-group-head:first-child { margin-top: 0; }

/* ───────────── Milestones: a ribbon across time (early warnings, a break,
   then the 2020s), annotated, then large numbered panels. app.js-side
   (milestones.js) sets the ribbon's height from its rows of annotations. */
.ms-ribbon {
  --wide: min(1160px, calc(100vw - 96px));
  --line-y: 150px;
  width: var(--wide);
  height: 280px;
  margin: 96px 0 96px calc((100% - var(--wide)) / 2);
}
@media (max-width: 1100px) { .ms-ribbon { --wide: calc(100vw - 32px); } }
.ms-track { position: relative; height: 100%; margin: 0 16px; }
.ms-era {
  position: absolute;
  top: 0;
  color: var(--ink-2);
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.ms-line { position: absolute; top: var(--line-y); height: 2px; background: var(--line); }
.ms-break {   /* the gap in time, as a dotted stretch */
  position: absolute;
  top: calc(var(--line-y) - 1px);
  height: 4px;
  background: radial-gradient(circle, var(--ink-2) 1.2px, transparent 1.6px) 0 50% / 8px 4px repeat-x;
}
.ms-tick {
  position: absolute;
  top: calc(var(--line-y) + 16px);
  z-index: 2;
  padding: 0 4px;
  background: var(--bg);
  color: var(--ink-2);
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.04em;
  transform: translateX(-50%);
}
.ms-tick::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -13px;
  height: 7px;
  border-left: 1px solid var(--ink-2);
}
/* Annotations: a leader from the line down to each label */
.ms-lead {
  position: absolute;
  top: calc(var(--line-y) + 2px);
  border-left: 1px dotted color-mix(in srgb, var(--accent) 70%, transparent);
  pointer-events: none;
}
.ms-note {
  position: absolute;
  z-index: 3;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.3;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.ms-note-num { margin-right: 6px; color: var(--accent); font-weight: 600; }
.ms-note.is-hover, .ms-note:focus-visible { background: var(--accent); color: var(--on-accent); }
.ms-note.is-hover .ms-note-num, .ms-note:focus-visible .ms-note-num { color: inherit; }
.ms-dot {
  --rise: calc(var(--lv, 0) * 36px);
  position: absolute;
  top: var(--line-y);
  z-index: 4;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  transform: translate(-50%, calc(-50% - var(--rise)));
  box-shadow: 0 0 0 3px var(--bg);
  transition: transform 0.2s ease;
}
.ms-dot::after {   /* the stem down to the line, when raised */
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  height: calc(var(--rise) - 14px);
  border-left: 1px solid var(--accent);
}
.ms-dot.is-hover, .ms-dot:focus-visible { transform: translate(-50%, calc(-50% - var(--rise))) scale(1.2); }

.ms-list { margin: 0; padding: 0; list-style: none; }
.ms-item {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 0 24px;
  padding: 48px 0;
  border-top: 1px solid var(--line);
  scroll-margin-top: 140px;
}
.ms-item:last-child { border-bottom: 1px solid var(--line); }
.ms-item.is-flash { animation: ms-flash 1.6s ease; }
@keyframes ms-flash { 0%, 30% { background: color-mix(in srgb, var(--accent) 8%, transparent); } 100% { background: transparent; } }
.ms-num { color: var(--accent); font-family: var(--font-ui); font-size: 64px; font-weight: 400; line-height: 0.9; letter-spacing: -0.03em; }
.ms-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 4px 0 0; color: var(--ink-2); font-family: var(--font-ui); font-size: 13px; }
.ms-kind { padding: 2px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.ms-title { margin: 12px 0 14px; font-size: 34px; font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; }
.ms-summary { margin: 0; font-size: 19px; line-height: 1.6; }
.ms-why { margin: 20px 0 0; padding-left: 16px; border-left: 3px solid var(--accent); font-size: 18px; line-height: 1.5; }
.ms-why-label { display: block; margin-bottom: 2px; color: var(--ink-2); font-family: var(--font-ui); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; }
.ms-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 20px; margin: 20px 0 0; }
.ms-links .tl-source { margin: 0; }
.ms-entry { color: var(--ink); font-family: var(--font-ui); font-size: 14px; text-decoration: none; }
.ms-entry:hover { color: var(--accent); }
@media (max-width: 700px) {
  .ms-item { grid-template-columns: 1fr; gap: 8px; padding: 36px 0; }
  .ms-num { font-size: 44px; }
  .ms-title { font-size: 27px; }
  .ms-ribbon { margin-top: 56px; margin-bottom: 56px; overflow-x: auto; overflow-y: hidden; }
  .ms-track { min-width: 760px; }
}

/* Milestones: the Order pills sit between the ribbon and the panels */
.ms-sort-bar { margin: 0 0 32px; }

/* Milestones: the title and intro span the timeline's width */
#page-milestones .page-head {
  --wide: min(1160px, calc(100vw - 96px));
  width: var(--wide);
  margin-left: calc((100% - var(--wide)) / 2);
  padding: 0 16px;   /* in line with the timeline's track and its captions */
}
@media (max-width: 1100px) { #page-milestones .page-head { --wide: calc(100vw - 32px); } }

/* Companions: each site's name links to it */
.cp-link { color: inherit; text-decoration: none; }
.cp-link:hover { color: var(--accent); }

/* The menu's last item, Site Map, stands a little apart from the rest */
.menu a.menu-apart { margin-left: 64px; }   /* a gap between the short list and the pages */

/* ───────────── Site Map: a bento grid of tiles, one per page, each with a
   small drawing in the manner of its page (assets/sitemap.js) */
#page-sitemap .page-head, .sm-index, .sm-grid {
  --wide: min(1160px, calc(100vw - 96px));
  width: var(--wide);
  margin-left: calc((100% - var(--wide)) / 2);
}
@media (max-width: 1100px) { #page-sitemap .page-head, .sm-index, .sm-grid { --wide: calc(100vw - 32px); } }
.sm-index { margin-bottom: 88px; }   /* the list of pages, above the cards */
.sm-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
  padding: 0;
  list-style: none;
}
.sm-lg { grid-column: span 3; }
.sm-md { grid-column: span 2; }
.sm-wide { grid-column: 1 / -1; }
.sm-half { grid-column: span 3; }
@media (max-width: 900px) {
  .sm-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sm-lg, .sm-wide, .sm-half { grid-column: 1 / -1; }
  .sm-md { grid-column: span 1; }
}
@media (max-width: 600px) { .sm-grid { grid-template-columns: 1fr; } .sm-md { grid-column: 1 / -1; } }

.sm-tile {
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.sm-tile:hover, .sm-tile:focus-within { border-color: var(--ink-2); }
.sm-link { display: flex; flex-direction: column; height: 100%; color: var(--ink); text-decoration: none; outline: none; }
.sm-art {
  display: block;
  padding: 22px 22px 14px;
  background: color-mix(in srgb, var(--ink) 3%, var(--bg));
  border-bottom: 1px solid var(--line);
}
.sm-art svg { display: block; width: 100%; height: 150px; }
.sm-lg .sm-art svg { height: 170px; }
.sm-text { display: flex; flex-direction: column; gap: 8px; padding: 18px 22px 22px; flex: 1; }
.sm-head { display: flex; align-items: baseline; gap: 10px; }
.sm-num { color: var(--accent); font-family: var(--font-ui); font-size: 13px; letter-spacing: 0.06em; }
.sm-name { font-family: var(--font-ui); font-size: 24px; font-weight: 500; line-height: 1.2; }
.sm-arrow { margin-left: auto; color: var(--ink-2); font-size: 20px; transition: transform 0.25s ease, color 0.25s ease; }
.sm-link:hover .sm-name, .sm-link:focus-visible .sm-name, .sm-link:hover .sm-arrow, .sm-link:focus-visible .sm-arrow { color: var(--accent); }
.sm-link:hover .sm-arrow, .sm-link:focus-visible .sm-arrow { transform: translateX(4px); }
.sm-about { font-size: 17px; line-height: 1.5; }
.sm-parts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.sm-parts span { padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-2); font-family: var(--font-ui); font-size: 12px; }
/* Contact: a slim tile across the grid, its drawing to the side */
.sm-wide .sm-link { flex-direction: row; align-items: stretch; }
.sm-wide .sm-art { flex: 0 0 min(320px, 36%); border-bottom: 0; border-right: 1px solid var(--line); }
.sm-wide .sm-art svg { height: 110px; }
.sm-wide .sm-text { justify-content: center; }
@media (max-width: 600px) { .sm-wide .sm-link { flex-direction: column; } .sm-wide .sm-art { flex: none; border-right: 0; border-bottom: 1px solid var(--line); } }

/* The drawings' marks, in the site's colours */
.sm-art .v-line { stroke: var(--line); stroke-width: 1.5; }
.sm-art .v-dots { stroke: var(--ink-2); stroke-width: 2; stroke-dasharray: 1 5; stroke-linecap: round; }
.sm-art .v-acc { fill: var(--accent); }
.sm-art .v-ink { fill: var(--ink); }
.sm-art .v-mute { fill: var(--ink-2); }
.sm-art .v-seat { fill: color-mix(in srgb, var(--ink) 18%, var(--bg)); }
.sm-art .v-acc-line { stroke: var(--accent); stroke-width: 1.5; }
.sm-art .v-ink-line { stroke: var(--ink); stroke-width: 1.5; }
.sm-art .v-mute-line { stroke: var(--ink-2); stroke-width: 1.5; }
.sm-art .v-lead { stroke: var(--accent); stroke-width: 1; stroke-dasharray: 1 2; opacity: 0.7; }
.sm-art .v-box { fill: var(--bg); stroke: var(--ink-2); stroke-width: 1.2; }
.sm-art .v-box-acc { fill: var(--bg); stroke: var(--accent); stroke-width: 1.5; }
.sm-art .v-paper { fill: var(--bg); stroke: var(--ink); stroke-width: 1.2; }
.sm-art .v-land { fill: color-mix(in srgb, var(--ink) 16%, var(--bg)); }
.sm-art .v-pin { fill: var(--accent); stroke: var(--bg); stroke-width: 3; }
.sm-art .v-num { fill: var(--on-accent); font-family: var(--font-ui); font-size: 8px; font-weight: 600; text-anchor: middle; }
.sm-art .v-letter { fill: var(--accent); font-family: var(--font-bembo); font-size: 34px; }
.sm-art .v-arrow { stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; }
.sm-art .v-step { fill: var(--ink); font-family: var(--font-ui); font-size: 14px; font-weight: 600; text-anchor: middle; }
.sm-art .v-step.is-on { fill: var(--on-accent); }
.sm-art .v-send { stroke: var(--on-accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* On hover the drawing lifts a little */
.sm-art svg { transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.sm-link:hover .sm-art svg, .sm-link:focus-visible .sm-art svg { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .sm-art svg, .sm-arrow { transition: none; } }

/* ───────────── Mission: a large opening statement, then numbered sections
   with their headings to the left */
.mi-lead {
  margin: 0 0 72px;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.3;
  letter-spacing: -0.005em;
}
/* Its phrases link to the pages that answer them: underlined, in the
   accent colour. On hover they thicken to semi-bold, drawn as a thin
   outline of the letters so the wider bold cut doesn't reflow the lines. */
.mi-lead a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.14em; -webkit-text-stroke: 0 currentColor; transition: -webkit-text-stroke-width 0.2s ease; }
.mi-lead a:hover, .mi-lead a:focus-visible { -webkit-text-stroke-width: 0.022em; }
.mi-sections { border-top: 1px solid var(--line); }
.mi-section {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 12px 32px;
  padding: 36px 0;
  border-bottom: 1px solid var(--line);
}
.mi-head { margin: 0; font-family: var(--font-ui); font-size: 18px; font-weight: 500; line-height: 1.3; }
.mi-num { display: block; margin-bottom: 6px; color: var(--accent); font-size: 13px; letter-spacing: 0.06em; }
.mi-body p { margin: 0; font-size: 19px; line-height: 1.6; }
.mi-body p + p { margin-top: 14px; }
.mi-guide { margin: 0; padding: 0; list-style: none; font-size: 19px; line-height: 1.55; }
.mi-guide li + li { margin-top: 12px; }
.mi-guide a, .mi-close a { color: var(--accent); text-decoration: none; }
.mi-guide a:hover, .mi-close a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mi-principles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px; margin: 0; }
.mi-principles dt { font-family: var(--font-ui); font-size: 15px; font-weight: 600; }
.mi-principles dd { margin: 6px 0 0; font-size: 17px; line-height: 1.55; }
.mi-close { margin: 40px 0 0; font-size: 19px; }
@media (max-width: 700px) {
  .mi-section { grid-template-columns: 1fr; }
  .mi-principles { grid-template-columns: 1fr; }
}

/* ───────────── Coordinate: International coordination and Collective
   action (the co- panels) */
.co-lead { margin: 0 0 48px; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.4; }
.co-group {
  margin: 48px 0 0;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.co-lead + .co-group { margin-top: 0; }
.co-items { margin: 0; padding: 0; list-style: none; }
.co-item { padding: 24px 0; border-bottom: 1px solid var(--line); }
.co-meta { margin: 0 0 6px; color: var(--ink-2); font-family: var(--font-ui); font-size: 13px; }
.co-title { margin: 0 0 8px; font-size: 24px; font-weight: 500; line-height: 1.25; }
.co-text { margin: 0; font-size: 18px; line-height: 1.6; }
.co-item .tl-source, .co-item .co-link { display: inline-block; margin-top: 12px; }
.co-link { color: var(--ink); font-family: var(--font-ui); font-size: 14px; text-decoration: none; }
.co-link:hover { color: var(--accent); }
.co-needs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 36px; margin: 24px 0 0; }
.co-needs dt { font-family: var(--font-ui); font-size: 15px; font-weight: 600; }
.co-needs dt::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--accent); vertical-align: 1px; }
.co-needs dd { margin: 6px 0 0; font-size: 17px; line-height: 1.55; }
.co-next { margin: 48px 0 0; font-size: 19px; }
.co-next .co-link { color: var(--accent); font-size: 15px; margin-left: 6px; }
@media (max-width: 700px) { .co-needs { grid-template-columns: 1fr; } }

/* ───────────── Plans: the legend of what each plan asks of the race,
   which also filters the cards */
.pl-legend { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: -8px 0 28px; padding: 0; list-style: none; }
.pl-key {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 4px 0; border: 0; border-bottom: 1px solid transparent; background: none;
  color: var(--ink-2); font-family: var(--font-ui); font-size: 14px; cursor: pointer;
}
.pl-key:hover, .pl-key[aria-pressed="true"] { color: var(--ink); }
.pl-key[aria-pressed="true"] { border-bottom-color: var(--st); }
.pl-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin: 14px 0 0; }
.pl-links .tl-source { margin-top: 0; }
.pl-empty { grid-column: 1 / -1; color: var(--ink-2); font-size: 18px; }

/* The site's name in Mission's text: italic, in the accent colour, and a
   link back to the top of the site */
.mi-name { color: var(--accent); font-style: italic; text-decoration: none; }
.mi-name:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ───────────── Positions › Timelines: a chart of statements over time (a
   row per person, a dot per statement), then each person's statements */
.tlc-wrap { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 0 16px; margin: 8px 0 8px; }
.tlc-names { position: relative; width: 9.5em; font-family: var(--font-ui); font-size: 16px; }   /* as tall as the chart beside it */
.tlc-scroll { min-width: 0; }
.tlc { display: block; width: 100%; height: auto; overflow: visible; }
.tlc-grid { stroke: var(--line); stroke-width: 1; }
.tlc-year { fill: var(--ink-2); font-family: var(--font-ui); font-size: 13px; }
.tlc-track { stroke: color-mix(in srgb, var(--ink) 22%, var(--bg)); stroke-width: 1.5; }
.tlc-name { position: absolute; left: 0; translate: 0 -50%; padding: 4px 0; white-space: nowrap; border: 0; background: none; color: var(--ink); font-family: var(--font-ui); font-size: 16px; text-align: left; cursor: pointer; transition: color 0.2s ease; }
.tlc-name:hover { color: var(--accent); }
.tlc-hit { fill: transparent; }
.tlc-row { cursor: pointer; outline: none; }
.tlc-row:hover .tlc-hit { fill: color-mix(in srgb, var(--ink) 4%, transparent); }
.tlc-dot { fill: var(--st); stroke: var(--bg); stroke-width: 2.5; }

.tlp { margin-top: 64px; }
.tlp + .tlp { margin-top: 80px; }
.tlp-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 0 0 8px; font-size: 26px; font-weight: 500; }
.tlp-open { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.tlp-open span { color: var(--ink-2); font-size: 0.75em; transition: color 0.2s ease; }
.tlp-open:hover, .tlp-open:hover span { color: var(--accent); }
.tlp-role { color: var(--ink-2); font-family: var(--font-ui); font-size: 14px; font-weight: 400; }
.positions-desc .tlp-role-solo { margin-top: 10px; color: var(--ink-2); font-family: var(--font-ui); font-size: 15px; }
.tlp-items { margin: 20px 0 0; padding: 0 0 0 28px; list-style: none; border-left: 1px solid var(--line); }
.tlp-item { position: relative; padding: 0 0 44px; }
.tlp-item:last-child { padding-bottom: 8px; }
.tlp-item::before {   /* a dot on the line, in the colour of the position taken */
  content: "";
  position: absolute;
  left: -34px;
  top: 5px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--st);
  box-shadow: 0 0 0 4px var(--bg);
}
.tlp-date { margin: 0; color: var(--ink-2); font-family: var(--font-ui); font-size: 13px; }
.tlp-title { margin: 8px 0 0; font-size: 22px; font-weight: 500; line-height: 1.25; }
.tlp-stance { margin: 10px 0 0; color: var(--ink-2); font-size: 15px; }
.tlp-note { margin: 10px 0 0; font-size: 18px; line-height: 1.6; }
.tlp-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin: 12px 0 0; }
.tlp-links .tl-source { margin-top: 0; }
/* Phones: the chart keeps a readable size and scrolls sideways */
@media (max-width: 640px) {
  .tlc-wrap { gap: 0 10px; }
  .tlc-names, .tlc-name { font-size: 14px; }
  .tlc-scroll { overflow-x: auto; margin-right: -16px; padding-right: 16px; scrollbar-width: none; }
  .tlc { width: 600px; max-width: none; }
}

/* Timelines: how each person's position has held or moved, under their
   name; and the order of their statements */
.tlp-analysis { max-width: 46em; margin: 14px 0 0; padding: 16px 20px 18px; border-left: 3px solid var(--line); background: color-mix(in srgb, var(--ink) 3%, transparent); border-radius: 0 10px 10px 0; }
.tlp-pattern { margin: 0; color: var(--accent); font-family: var(--font-ui); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.tlp-summary { margin: 8px 0 0; font-size: 17px; line-height: 1.65; color: var(--ink); }
.positions-desc .tlp-analysis { margin-top: 20px; }
.positions-desc .tlp-pattern { margin: 0; color: var(--accent); font-size: 12px; line-height: 1.4; }
.positions-desc .tlp-summary { margin: 8px 0 0; color: var(--ink); font-size: 17px; line-height: 1.65; }
.tlp-order { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0 0; }
.tlp-order .filter-label { margin-right: 6px; }

/* ───────────── Menu button (bottom-left, once past the hero; the back-to-
   top button's counterpart) and the full-screen menu page it opens */
.menu-btn {
  position: fixed;
  left: 54px;
  bottom: 38px;
  z-index: 41;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  box-shadow: inset 0 0 0 1.5px var(--accent);
  color: var(--ink);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s, color 0.2s;
}
.menu-btn.visible { opacity: 1; visibility: visible; }
.menu-open .menu-btn { background: var(--bg); }   /* clear of the list scrolling beneath it */
.menu-btn:hover { color: var(--accent); }
.menu-btn-lines { position: relative; display: block; width: 14px; height: 10px; }
.menu-btn-lines span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
}
.menu-btn-lines span:nth-child(1) { top: 0; }
.menu-btn-lines span:nth-child(2) { top: 4.25px; }
.menu-btn-lines span:nth-child(3) { top: 8.5px; }
/* Open: the lines cross into a close mark */
.menu-open .menu-btn-lines span:nth-child(1) { transform: translateY(4.25px) rotate(45deg); }
.menu-open .menu-btn-lines span:nth-child(2) { opacity: 0; }
.menu-open .menu-btn-lines span:nth-child(3) { transform: translateY(-4.25px) rotate(-45deg); }

.menu-page {
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.menu-page[hidden] { display: none; }
.menu-open .menu-page { opacity: 1; }
.menu-open body { overflow: hidden; }
.menu-page-inner {
  width: min(1160px, calc(100vw - 96px));
  margin: 0 auto;
  padding: 120px 0 140px;
}
.menu-page-title { margin: 0 0 64px; font-size: clamp(32px, 4vw, 44px); font-weight: 500; line-height: 1.1; }
.menu-page-groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 48px 40px; }   /* the footer's four columns */
.mp-head {
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mp-list { margin: 0; padding: 0; list-style: none; }
.mp-list li { break-inside: avoid; }
.mp-link {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 2px 0;
  padding: 10px 0 14px;
  color: var(--ink);
  text-decoration: none;
}
.mp-num { grid-row: 1; padding-top: 6px; color: var(--accent); font-family: var(--font-ui); font-size: 11px; }
.mp-name { font-size: 24px; font-weight: 500; line-height: 1.2; transition: color 0.2s ease; }
.mp-about { grid-column: 2; color: var(--ink-2); font-size: 15px; line-height: 1.45; }
.mp-link:hover .mp-name, .mp-link:focus-visible .mp-name { color: var(--accent); }
.mp-link[aria-current="page"] .mp-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
@media (max-width: 1000px) {
  .menu-page-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .menu-page-groups { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 640px) {
  .menu-btn { left: 22px; bottom: 30px; }
  .menu-page-inner { width: calc(100vw - 32px); padding: 88px 0 120px; }
  .mp-name { font-size: 22px; }
}

/* ───────────── Timelines page: forecasts of AGI, as a chart (a row per
   forecast: a dot for its central year, a line for its range), then cards */
#page-timelines [data-k="leaders"] { --k: var(--accent); }
#page-timelines [data-k="forecasters"] { --k: var(--ink); }
#page-timelines [data-k="surveys"] { --k: color-mix(in srgb, var(--ink) 45%, var(--bg)); }
#page-timelines .page-head, #page-timelines .filter-bar, .ft-chart-scroll, .ft-legend, .ft-cards, .ft-sub, .ft-moved {
  --wide: min(1160px, calc(100vw - 96px));
  width: var(--wide);
  margin-left: calc((100% - var(--wide)) / 2);
}
@media (max-width: 1100px) {
  #page-timelines .page-head, #page-timelines .filter-bar, .ft-chart-scroll, .ft-legend, .ft-cards, .ft-sub, .ft-moved { --wide: calc(100vw - 32px); }
}
.ft-chart { display: block; width: 100%; height: auto; overflow: visible; }
.ft-grid { stroke: var(--line); }
.ft-year { fill: var(--ink-2); font-family: var(--font-ui); font-size: 12px; text-anchor: middle; }
.ft-today { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 3 4; }
.ft-today-label { fill: var(--accent); font-family: var(--font-ui); font-size: 12px; }
.ft-hit { fill: transparent; }
.ft-row { cursor: pointer; }
.ft-row:hover .ft-hit { fill: color-mix(in srgb, var(--ink) 4%, transparent); }
.ft-row:hover .ft-who { fill: var(--accent); }
.ft-who { fill: var(--ink); font-family: var(--font-ui); font-size: 14px; }
.ft-track { stroke: color-mix(in srgb, var(--ink) 12%, var(--bg)); }
.ft-range { stroke: var(--k); stroke-width: 5; stroke-linecap: round; opacity: 0.45; }
.ft-open { stroke: var(--k); stroke-width: 2; stroke-dasharray: 2 4; opacity: 0.7; }
.ft-dot { fill: var(--k); stroke: var(--bg); stroke-width: 2.5; }
.ft-legend { margin-top: 28px; margin-bottom: 48px; }
.ft-legend .lg-swatch { background: var(--k); }
.ft-lg-line { display: inline-block; width: 22px; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 30%, var(--bg)); }
.ft-card { border-top: 3px solid var(--k); }
.ft-when { margin: 10px 0 0; color: var(--k); font-family: var(--font-ui); font-size: 26px; font-weight: 500; line-height: 1.1; }
#page-timelines [data-k="surveys"] .ft-when { color: var(--ink-2); }
.ft-card .org-card-name { margin-top: 10px; }
.ft-what { margin: -4px 0 12px; color: var(--ink-2); font-family: var(--font-ui); font-size: 14px; line-height: 1.4; }
.ft-card.is-flash { animation: ft-flash 1.4s ease-out; }
@keyframes ft-flash { 0%, 30% { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); } 100% { box-shadow: 0 0 0 2px transparent; } }
.ft-sub { margin-top: 96px; margin-bottom: 24px; font-size: 26px; font-weight: 500; }
.ft-moved { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px 32px; padding: 0; list-style: none; }
.ft-moved li { padding-top: 16px; border-top: 1px solid var(--line); }
.ft-moved strong { display: block; font-family: var(--font-ui); font-size: 22px; font-weight: 500; }
.ft-moved span { display: block; margin-top: 8px; color: var(--ink-2); font-size: 16px; line-height: 1.55; }
/* Phones: the chart keeps a readable size and scrolls sideways */
@media (max-width: 640px) {
  .ft-chart-scroll { overflow-x: auto; scrollbar-width: none; }
  .ft-chart { width: 760px; max-width: none; }
}