/* 03a Flight plan, mission timeline: the 03 console with a year cursor, in two themes.
   Dark console (native, and the no-JavaScript fallback) and daylight flight-plan paper (light).
   Round 4 additions are marked "r4" below; the year cursor, status list and folds are at the end.
   The theme lives on <html data-theme="light|dark"> (kit/shared/theme-init.js). Every colour below is a
   token, so setting the attribute alone switches the whole page. Print is always light.
   Contrast for every text token is checked against --bg, --panel, --panel-2 and --panel-3 (see NOTES.md). */

:root {
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --wrap: 88rem;
  --gut: clamp(1rem, 3vw, 2rem);
  --r: 4px;
}

/* Dark console: night shift in the firing room. */
:root:not([data-theme]), :root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0a0f0d;
  --grid: rgba(160, 210, 180, 0.04);
  --grid-2: rgba(160, 210, 180, 0.07);
  --panel: #0f1714;
  --panel-2: #142019;
  --panel-3: #1b2a22;
  --line: #24352d;
  --line-2: #36503f;
  --ink: #e9f1ec;
  --ink-2: #c3d1c8;
  --muted: #98ad9f;
  --amber: #ffb84d;
  --amber-line: #b98432;
  --phos: #7fe3a9;
  --focus: #ffd56e;
  --on-c: #07100b;
  --bar-bg: rgba(8, 12, 10, 0.94);
  --foot-bg: rgba(8, 12, 10, 0.9);
  --amber-wash: rgba(255, 184, 77, 0.06);
  --amber-wash-2: rgba(255, 184, 77, 0.08);
  --phos-wash: rgba(127, 227, 169, 0.16);
  --sky-wash: rgba(111, 211, 242, 0.06);
  --sel-glow: 0 0 16px rgba(233, 241, 236, 0.35);
  --fig-glow: 0 0 14px rgba(255, 184, 77, 0.22);
  --now-glow: 0 0 10px rgba(255, 184, 77, 0.6);
  --lamp-glow: 0 0 8px;
  --bar-dim: 0.8;
  --shadow: none;

  /* Lane and accent hues, tuned for a dark ground. Text on them uses --on-c. */
  --c-cobalt: #88aaff;
  --c-amber: #f4bd57;
  --c-crimson: #ff8f95;
  --c-orange: #ffa366;
  --c-sky: #6fd3f2;
  --c-magenta: #f196da;
  --c-violet: #bca5ff;
  --c-teal: #57d7c5;
  --c-green: #97e391;
}

/* Daylight flight plan: printed checklist paper on a grid desk, dark ink, deepened lane inks. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #e8eae3;
  --grid: rgba(30, 90, 70, 0.075);
  --grid-2: rgba(30, 70, 50, 0.08);
  --panel: #fbfbf8;
  --panel-2: #f3f4ef;
  --panel-3: #e8ebe3;
  --line: #d4d9cf;
  --line-2: #a9b3a5;
  --ink: #121a16;
  --ink-2: #2e3b34;
  --muted: #4d5c53;
  --amber: #8a4b00;
  --amber-line: #c2873a;
  --phos: #11683a;
  --focus: #0a55c9;
  --on-c: #ffffff;
  --bar-bg: rgba(251, 251, 248, 0.95);
  --foot-bg: #f3f4ef;
  --amber-wash: rgba(138, 75, 0, 0.06);
  --amber-wash-2: rgba(138, 75, 0, 0.08);
  --phos-wash: rgba(17, 104, 58, 0.12);
  --sky-wash: rgba(11, 98, 135, 0.06);
  --sel-glow: 0 2px 8px rgba(18, 26, 22, 0.25);
  --fig-glow: none;
  --now-glow: none;
  --lamp-glow: 0 0 0;
  --bar-dim: 0.88;
  --shadow: 0 1px 0 rgba(18, 26, 22, 0.05), 0 1px 3px rgba(18, 26, 22, 0.06);

  /* Lane and accent inks, deepened so white bar labels and coloured text pass 4.5:1. */
  --c-cobalt: #2f52c2;
  --c-amber: #8a5200;
  --c-crimson: #b3263a;
  --c-orange: #a3410a;
  --c-sky: #0b6287;
  --c-magenta: #9c2a7b;
  --c-violet: #6440c4;
  --c-teal: #0a675b;
  --c-green: #2a6827;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 4.5rem; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 32px 32px;
  color: var(--ink);
  font: 400 1rem/1.6 var(--sans);
  font-variant-numeric: tabular-nums;
}
a { color: var(--ink); text-decoration-color: var(--amber-line); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--amber); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 2px; }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
.k { font: 600 0.75rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.d { font-family: var(--mono); font-size: 0.8125rem; color: var(--muted); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip { position: absolute; left: 0.75rem; top: -4rem; z-index: 50; background: var(--amber); color: var(--on-c); padding: 0.5rem 0.9rem; font-weight: 600; border-radius: var(--r); }
.skip:focus { top: 0.75rem; }
main:focus { outline: none; }

/* ---------- indicator lamps (decoration only) ---------- */
.lamp { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--line-2); flex: none; vertical-align: 0.05em; }
.lamp--on { background: var(--phos); box-shadow: 0 0 0 2px color-mix(in srgb, var(--phos) 15%, transparent), var(--lamp-glow) color-mix(in srgb, var(--phos) 55%, transparent); }
.lamp--c { background: var(--c); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 18%, transparent), var(--lamp-glow) color-mix(in srgb, var(--c) 55%, transparent); }

/* ---------- tags ---------- */
.tagc { display: inline-block; font: 500 0.75rem/1.35 var(--mono); letter-spacing: 0.02em; color: var(--ink-2); border: 1px solid var(--line-2); border-radius: 2px; padding: 0.1rem 0.4rem; white-space: nowrap; }
.tagc--now { color: var(--phos); border-color: color-mix(in srgb, var(--phos) 45%, transparent); }

/* ---------- console bar ---------- */
.cbar { position: sticky; top: 0; z-index: 20; background: var(--bar-bg); border-bottom: 1px solid var(--line); backdrop-filter: blur(6px); }
.cbar__in { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); display: flex; align-items: center; gap: 1.25rem; min-height: 3.25rem; }
.cbar__brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; font: 600 0.875rem/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.cbar__mono { display: grid; place-items: center; width: 1.9rem; height: 1.9rem; border: 1px solid var(--amber); color: var(--amber); font: 600 0.8125rem/1 var(--mono); letter-spacing: 0; border-radius: 2px; }
.cbar__sub { color: var(--muted); margin-left: 0.3rem; }
.cbar__nav { flex: 1; min-width: 0; }
.cbar__nav ul { list-style: none; display: flex; gap: 0.15rem; overflow-x: auto; scrollbar-width: none; }
.cbar__nav ul::-webkit-scrollbar { display: none; }
.cbar__nav a { display: block; padding: 0.5rem 0.6rem; font: 500 0.8125rem/1 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; border-radius: 2px; white-space: nowrap; }
.cbar__nav a:hover { color: var(--amber); background: var(--panel-2); }
.cbar__rev { font: 500 0.75rem/1 var(--mono); color: var(--muted); white-space: nowrap; }
.cbar__rev .k { margin-right: 0.35rem; }

/* Theme switch: a console toggle. The label stays "Dark theme"; aria-pressed carries the state. */
.tgl {
  flex: none; display: inline-flex; align-items: center; gap: 0.55rem; min-height: 2rem; padding: 0.3rem 0.7rem 0.3rem 0.5rem;
  background: var(--panel); color: var(--ink-2); border: 1px solid var(--line-2); border-radius: 2px; cursor: pointer;
  font: 600 0.75rem/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase;
}
.tgl:hover { color: var(--amber); border-color: var(--amber); }
.tgl:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.tgl__sw { position: relative; flex: none; width: 1.95rem; height: 1.05rem; border: 1px solid var(--line-2); border-radius: 999px; background: var(--panel-3); }
.tgl__sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: calc(1.05rem - 6px); height: calc(1.05rem - 6px); border-radius: 50%; background: var(--muted); }
/* The switch face follows the theme actually on the page. */
:root[data-theme="dark"] .tgl__sw { border-color: color-mix(in srgb, var(--phos) 55%, var(--line-2)); }
:root[data-theme="dark"] .tgl__sw::after { transform: translateX(0.9rem); background: var(--phos); box-shadow: var(--lamp-glow) color-mix(in srgb, var(--phos) 60%, transparent); }
html:not([data-theme]) [data-theme-toggle] { display: none; }
@media (prefers-reduced-motion: no-preference) { .tgl__sw::after { transition: transform 0.15s ease-out, background-color 0.15s; } }

main { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut) 3rem; display: grid; gap: 1.25rem; }

/* ---------- hero: identification, key facts, contact ----------
   Wide screens: name and contact on the left, the key facts panel on the right, both above the flight plan.
   Narrow screens: name, then key facts, then contact (grid areas keep that order without moving markup). */
.hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); grid-template-rows: auto 1fr;
  grid-template-areas: "id facts" "contact facts"; gap: 1.25rem; padding-top: 1.5rem;
}
.hero > div { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 1.25rem 1.35rem; box-shadow: var(--shadow); min-width: 0; }
.hero__id { grid-area: id; border-top: 2px solid var(--amber) !important; }
.hero__facts { grid-area: facts; display: flex; flex-direction: column; }
.hero__contact-box { grid-area: contact; }
.kicker { font: 500 0.75rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber); display: flex; align-items: center; gap: 0.5rem; }
.hero h1 { font: 700 clamp(2.4rem, 4.2vw, 3.6rem)/1 var(--sans); letter-spacing: -0.025em; margin-top: 0.7rem; }
.hero__aka { font: 500 0.8125rem/1.4 var(--mono); color: var(--muted); margin-top: 0.4rem; letter-spacing: 0.02em; }
.hero__headline { font-size: 1.3125rem; line-height: 1.35; color: var(--ink-2); margin-top: 0.75rem; font-weight: 500; max-width: 26ch; }

/* Key facts (kit.facts_strip): a console manifest. Mono keys in a column, plain sans values. */
.facts { margin: 0; display: grid; }
.facts__row { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 0.25rem 1rem; padding: 0.6rem 0; border-top: 1px dashed var(--line-2); }
.facts__row:first-child { border-top: 0; padding-top: 0.1rem; }
.facts__k { display: flex; align-items: center; gap: 0.5rem; align-self: start; padding-top: 0.2rem; font: 600 0.75rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.facts__k::before { content: ""; flex: none; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--line-2); }
.facts__row:first-child .facts__k { color: var(--phos); }
.facts__row:first-child .facts__k::before { background: var(--phos); box-shadow: var(--lamp-glow) color-mix(in srgb, var(--phos) 55%, transparent); }
.facts__row:nth-child(2) .facts__k::before { background: var(--amber-line); }
.facts__v { margin: 0; font-size: 1rem; line-height: 1.5; color: var(--ink-2); }
.facts__strong { color: var(--ink); font-weight: 600; }
.facts__v a { white-space: nowrap; font: 500 0.875rem/1.5 var(--mono); }

/* Roles held at the same time as the current one (the Disney role is in the facts above). */
.hero__also { margin-top: auto; padding-top: 0.9rem; border-top: 1px solid var(--line); }
.hero__also-h { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; font: 600 0.75rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.hero__also-h::before { content: ""; flex: none; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--phos); }

.hero__contact { margin: 0; display: grid; gap: 0.35rem; }
.hero__contact div { display: grid; grid-template-columns: 5rem minmax(0, 1fr); gap: 0.5rem; align-items: baseline; }
.hero__contact dt { font: 600 0.75rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.hero__contact dd { margin: 0; font: 500 0.875rem/1.5 var(--mono); overflow-wrap: anywhere; }
@media (min-width: 82.01rem) { .hero__contact dd { white-space: nowrap; } }
.hero__formats { display: flex; flex-wrap: wrap; gap: 0.35rem 0.8rem; align-items: baseline; margin-top: 1rem; padding-top: 0.9rem; border-top: 1px dashed var(--line-2); font: 500 0.875rem/1.5 var(--mono); }
.hero__formats .k { flex-basis: 100%; }
.hero__formats a { padding-block: 0.15rem; }

.minihead { display: flex; align-items: center; gap: 0.5rem; font: 600 0.75rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding-bottom: 0.7rem; border-bottom: 1px solid var(--line); margin-bottom: 0.9rem; }
.nowlist { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.nowlist a { display: grid; gap: 0.05rem; height: 100%; align-content: start; padding: 0.45rem 0.65rem 0.5rem 0.75rem; border-left: 3px solid var(--c); background: var(--panel-2); text-decoration: none; border-radius: 0 var(--r) var(--r) 0; }
.nowlist a:hover { background: var(--panel-3); color: var(--ink); }
.nowlist__title { font-weight: 600; font-size: 0.9375rem; line-height: 1.3; margin-bottom: 0.15rem; }
.nowlist a:hover .nowlist__title { color: var(--amber); }
.nowlist__org { font-size: 0.875rem; color: var(--ink-2); }
.nowlist__meta { font: 500 0.75rem/1.5 var(--mono); color: var(--muted); }
.nowlist__meta > span { white-space: nowrap; }

/* ---------- panels ---------- */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.pbar { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; padding: 0.7rem 1.1rem; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, var(--panel-2), var(--panel)); border-radius: var(--r) var(--r) 0 0; }
.pbar__id { font: 600 0.8125rem/1 var(--mono); color: var(--on-c); background: var(--amber); padding: 0.3rem 0.4rem; border-radius: 2px; }
.pbar h2 { font: 600 1.25rem/1.2 var(--sans); letter-spacing: -0.005em; }
.pbar__tag { margin-left: auto; font: 500 0.8125rem/1.4 var(--mono); color: var(--muted); }

/* summary panel */
.brief__grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 1.5rem 2.5rem; padding: 1.2rem 1.25rem 1.3rem; }
.brief__text { font-size: 1.125rem; line-height: 1.65; max-width: 70ch; }
.brief__side { border-left: 1px solid var(--line); padding-left: 1.5rem; }
.brief__side { display: grid; gap: 0.9rem; align-content: start; }
.brief__clear { font-size: 0.9375rem; color: var(--ink-2); }
.brief__clear + .brief__clear { padding-top: 0.9rem; border-top: 1px dashed var(--line-2); }
.brief__clear .k { display: block; margin-bottom: 0.15rem; }
.brief__focus { list-style: none; display: grid; gap: 0.2rem; margin-top: 0.3rem; }
.brief__focus li { padding-left: 1rem; position: relative; color: var(--ink); }
.brief__focus li::before { content: ""; position: absolute; left: 0; top: 0.68em; width: 0.45rem; height: 2px; background: var(--amber); }

/* shared readout panel */
.readout { display: flex; flex-direction: column; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: var(--r); min-width: 0; }
.readout__bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--line-2); font: 600 0.75rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--phos); }
.readout__sub { color: var(--muted); margin-left: auto; letter-spacing: 0.04em; }
.readout__body { padding: 1rem 1.1rem 1.2rem; }
.readout__body:focus { outline: none; }
.readout__body:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.readout__foot { padding: 0.6rem 0.9rem; border-top: 1px solid var(--line-2); font-size: 0.875rem; color: var(--ink-2); }
/* Phones: the readout sits below a long list, so its foot offers a way back up. */
.readout__back, .readout__foot--phone { display: none; }
@media (max-width: 40rem) {
  .readout__foot--phone { display: block; }
  .readout__back { display: inline-flex; align-items: center; min-height: 1.5rem; margin-top: 0.35rem; font: 500 0.8125rem/1.3 var(--mono); }
  .readout__back::before { content: "▴ "; white-space: pre; color: var(--amber); }
  .readout__foot .readout__back { display: flex; width: fit-content; }
}
/* r4: readouts are <details>. The bar is the summary: a plain header on wide screens, a disclosure on phones. */
summary.readout__bar { cursor: pointer; list-style: none; }
summary.readout__bar::-webkit-details-marker { display: none; }
summary.readout__bar:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
summary.readout__bar:hover { color: var(--amber); }
.readout__bar .vtag { margin-left: 0.4rem; letter-spacing: 0.02em; text-transform: none; }

/* ---------- fragment content inside readouts ---------- */
.fragment { display: grid; gap: 0.6rem; }
.frag__meta { font: 500 0.8125rem/1.45 var(--mono); color: var(--amber); letter-spacing: 0.02em; }
.frag__title { font: 600 1.3rem/1.25 var(--sans); letter-spacing: -0.01em; }
.frag__title:focus { outline: none; }
.frag__title:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.frag__org { color: var(--ink-2); font-size: 0.9375rem; }
.frag__note { font: 500 0.8125rem/1.5 var(--mono); color: var(--muted); }
.frag__lede { font-size: 1rem; color: var(--ink); }
.frag__points, .rec__points { list-style: none; display: grid; gap: 0.45rem; }
.frag__points li, .rec__points li { position: relative; padding-left: 1.1rem; }
.frag__points li::before, .rec__points li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0; height: 0; border-left: 6px solid var(--amber); border-top: 4px solid transparent; border-bottom: 4px solid transparent; }
.frag__where, .frag__check, .frag__status, .frag__url { font-size: 0.9375rem; color: var(--ink-2); }
.frag__k { display: block; font: 600 0.75rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.1rem; }
.frag__check a, .frag__url a { color: var(--ink); overflow-wrap: anywhere; }
.frag__ref a { color: var(--ink); text-decoration-color: var(--amber-line); }
.frag__ref a:hover { color: var(--amber); }
.frag__facts { margin: 0; display: grid; gap: 0.5rem; }
.frag__facts dt { font: 600 0.75rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.frag__facts dd { margin: 0; }
.frag__rec { border-top: 1px solid var(--line-2); padding-top: 0.7rem; display: grid; gap: 0.3rem; align-content: start; }
.frag__rec h4 { font: 600 1rem/1.3 var(--sans); }
.frag__gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1rem; }
.frag__gallery figure { margin: 0; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: var(--r); padding: 0.5rem; display: grid; gap: 0.5rem; align-content: start; }
.frag__gallery img { display: block; width: 100%; height: 16rem; object-fit: cover; border-radius: 2px; background: #000; }
.frag__gallery figcaption { font: 500 0.8125rem/1.45 var(--mono); color: var(--ink-2); padding: 0 0.15rem 0.2rem; }
.load-error { color: var(--amber); }

/* ---------- 01 flight plan ---------- */
.fp__grid { display: grid; grid-template-columns: minmax(0, 1fr) 23rem; gap: 1rem; padding: 1rem 1.1rem 1.1rem; align-items: start; }
.fp__chart { margin: 0; min-width: 0; --lab: 9.5rem; --lgap: 0.75rem; display: grid; grid-template-columns: minmax(0, 1fr); }
.fp__axis { display: grid; grid-template-columns: var(--lab) minmax(0, 1fr); gap: 0.75rem; height: 2.2rem; align-items: end; }
.fp__axis-k { font: 600 0.75rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding-bottom: 0.4rem; }
.fp__ticks { position: relative; height: 100%; }
.fp__ticks span { position: absolute; left: calc(var(--x) * 1%); bottom: 0; padding: 0 0 0.4rem 0.3rem; border-left: 1px solid var(--line-2); font: 500 0.75rem/1 var(--mono); color: var(--ink-2); height: 100%; display: flex; align-items: flex-end; }
.fp__lanes { position: relative; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.fp-lane { display: grid; grid-template-columns: var(--lab) minmax(0, 1fr); gap: 0.75rem; border-top: 1px solid var(--line); }
.fp-lane:first-child { border-top: 0; }
.fp-lane__label { font: 600 0.75rem/1.3 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-2); padding: 0.4rem 0 0.4rem 0.6rem; border-left: 3px solid var(--c); align-self: stretch; display: flex; align-items: center; }
.fp-lane__track { list-style: none; display: grid; gap: 0.25rem; padding: 0.4rem 0; position: relative; }
/* Year grid (every year, stronger every five) drawn on a layer behind the bars, so labels sit on the panel. */
.fp-lane__track::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(90deg, var(--line-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-2) 1px, transparent 1px);
  background-size: var(--yr5) 100%, var(--yr) 100%;
}
.fp-row { position: relative; height: 1.25rem; }
.fp-bar {
  position: absolute; top: 0; bottom: 0; left: calc(var(--l) * 1%); width: calc(var(--w) * 1%); min-width: 6px;
  background: var(--c); color: var(--on-c); border: 1px solid transparent; border-radius: 2px;
  text-decoration: none; font: 500 0.75rem/1 var(--mono);
}
/* Bars whose label sits outside: the fill is a layer of its own, so the label reads against the panel. */
.fp-bar--right, .fp-bar--left { background: none; }
.fp-bar--right::before, .fp-bar--left::before { content: ""; position: absolute; inset: -1px; background: var(--c); border-radius: 2px; }
.fp-bar__text { display: flex; flex-wrap: wrap; align-items: center; gap: 0 0.6rem; height: 100%; overflow: hidden; padding: 0 0.45rem; }
.fp-bar__label { flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2rem; font-weight: 600; }
.fp-bar__dates { flex: none; white-space: nowrap; line-height: 1.2rem; opacity: var(--bar-dim); }
.fp-bar--right .fp-bar__text, .fp-bar--left .fp-bar__text {
  position: absolute; top: 0; color: var(--ink); padding: 0;
  max-width: calc(100% * (100 - var(--l) - var(--w)) / var(--w) - 0.85rem);
  width: max-content;
}
.fp-bar--right .fp-bar__text { left: calc(100% + 0.75rem); }
.fp-bar--left .fp-bar__text { right: calc(100% + 0.75rem); max-width: calc(100% * var(--l) / var(--w) - 0.85rem); flex-direction: row-reverse; }
.fp-bar--right .fp-bar__dates, .fp-bar--left .fp-bar__dates { color: var(--muted); opacity: 1; }
.fp-bar:hover { filter: brightness(1.12); color: var(--on-c); }
.fp-bar:hover .fp-bar__label { text-decoration: underline; text-underline-offset: 2px; }
.fp-bar--right:hover .fp-bar__label, .fp-bar--left:hover .fp-bar__label { color: var(--amber); }
.fp-bar:focus-visible { outline: 2px solid var(--focus); outline-offset: 5px; }
.fp-bar:focus-visible .fp-bar__label { color: var(--focus); }
.fp-bar--inside:focus-visible .fp-bar__label { color: inherit; }
.fp-bar[aria-current="true"] { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--ink), var(--sel-glow); }
.fp-bar--right[aria-current="true"] .fp-bar__label, .fp-bar--left[aria-current="true"] .fp-bar__label { color: var(--amber); }
.fp__now { position: absolute; top: -2.2rem; bottom: -1.9rem; right: 0; width: 2px; background: var(--amber); box-shadow: var(--now-glow); pointer-events: none; }
.fp__now span { position: absolute; bottom: 0; right: 0; font: 600 0.75rem/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-c); background: var(--amber); padding: 0.2rem 0.35rem; border-radius: 2px; }
.fp__cap { font-size: 0.875rem; color: var(--muted); margin-top: 0.7rem; max-width: 72ch; padding-right: 4rem; }

/* r4: readouts expand to their content; nothing scrolls inside a panel. On wide screens the readout docks
   beside the chart or the board and stays in view while they scroll (script.js sets --stick, negative when the
   readout is taller than the viewport, so its end stays reachable). */
@media (min-width: 75rem) {
  .readout--dock { position: sticky; top: var(--stick, 4.5rem); }
}

/* mini track used in the experience log and the phone list */
.mtrack { display: block; position: relative; height: 6px; background: var(--line); border-radius: 3px; margin-top: 0.7rem; }
.mtrack__bar { position: absolute; top: 0; bottom: 0; left: calc(var(--l) * 1%); width: max(5px, calc(var(--w) * 1%)); background: var(--c); border-radius: 3px; }
.mtrack::after { content: "1995"; position: absolute; left: 0; top: 0.55rem; font: 500 0.75rem/1 var(--mono); color: var(--muted); }
.mtrack::before { content: "Now"; position: absolute; right: 0; top: 0.55rem; font: 500 0.75rem/1 var(--mono); color: var(--muted); }

/* ---------- 02 systems board ---------- */
.sys__grid { display: grid; grid-template-columns: minmax(0, 1fr) 24rem; gap: 1rem; padding: 1rem 1.1rem 1.1rem; align-items: start; }
.sys-board { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.sys-board li { display: flex; background: var(--panel); }
.sys-cell {
  position: relative; flex: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; column-gap: 0.85rem; row-gap: 0.35rem;
  padding: 0.9rem 1rem 1rem; text-decoration: none; color: var(--ink); min-height: 11rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 5%, transparent), transparent 60%);
}
.sys-cell::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c); opacity: 0.85; }
.sys-cell__top { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; font: 600 0.75rem/1 var(--mono); letter-spacing: 0.08em; color: var(--muted); }
.sys-cell__ico { grid-row: 2 / span 2; align-self: start; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border: 1px solid color-mix(in srgb, var(--c) 45%, var(--line)); border-radius: var(--r); color: var(--c); margin-top: 0.2rem; }
.ico { width: 1.45rem; height: 1.45rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sys-cell__label { font: 600 1.0625rem/1.3 var(--sans); align-self: end; margin-top: 0.15rem; }
.sys-cell__fig { font: 600 1.0625rem/1.35 var(--mono); color: var(--amber); letter-spacing: -0.01em; text-shadow: var(--fig-glow); }
.sys-cell__foot { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; align-self: end; padding-top: 0.35rem; }
.sys-cell__span { font: 500 0.75rem/1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.sys-cell:hover { background: var(--panel-3); color: var(--ink); }
.sys-cell:hover .sys-cell__label { color: var(--amber); }
.sys-cell:focus-visible { outline: 3px solid var(--focus); outline-offset: -7px; border-radius: 0; }
.sys-cell[aria-current="true"] { background: var(--panel-3); box-shadow: inset 0 0 0 2px var(--amber); }
.sys-cell[aria-current="true"] .sys-cell__code { color: var(--amber); }
.readout--sys .frag__lede { font-size: 1rem; }

/* ---------- 03 projects ---------- */
.prjs__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding: 1rem 1.1rem 1.1rem; }
.prj { background: var(--panel-2); border: 1px solid var(--line); border-top: 3px solid var(--c); border-radius: var(--r); padding: 1.1rem 1.2rem 1.2rem; display: grid; gap: 0.85rem; align-content: start; }
.prj--lead { grid-column: 1 / -1; }
.prj__kicker { display: flex; flex-wrap: wrap; gap: 0.4rem 0.75rem; align-items: center; font: 500 0.8125rem/1.4 var(--mono); color: var(--muted); }
.prj__kicker .tagc { color: var(--c); border-color: color-mix(in srgb, var(--c) 50%, transparent); }
.prj h3 { font: 600 1.375rem/1.25 var(--sans); letter-spacing: -0.01em; margin-top: 0.35rem; }
.prj--lead h3 { font-size: 1.6rem; }
.prj__rel { font-size: 0.9375rem; color: var(--ink-2); margin-top: 0.25rem; }
.prj__status { border: 1px solid var(--amber-line); border-left: 4px solid var(--amber); background: var(--amber-wash); padding: 0.65rem 0.85rem; border-radius: 2px; }
.prj__status .k { display: block; color: var(--amber); margin-bottom: 0.15rem; }
.prj__status-t { font-size: 1rem; }
.prj__facts { margin: 0; display: grid; gap: 0.7rem; }
.prj__facts div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 0.85rem; padding-top: 0.7rem; border-top: 1px solid var(--line); }
.prj__facts dt { font: 600 0.75rem/1.6 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.prj__facts dd { margin: 0; max-width: 72ch; }
.prj--lead .prj__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
.prj--lead .prj__facts div:last-child { grid-column: 1 / -1; }
.prj__ev { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.9rem; border-top: 1px solid var(--line); padding-top: 0.8rem; }
.evlist { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.evlist a, .evinline a { display: inline-block; font: 500 0.8125rem/1.3 var(--mono); padding: 0.2rem 0.5rem; border: 1px solid var(--line-2); border-radius: 2px; text-decoration: none; color: var(--ink); background: var(--panel); }
.evlist a::before { content: "↗ "; color: var(--phos); }
.evinline a::before { content: "↗"; color: var(--phos); }
.evlist a:hover, .evinline a:hover { border-color: var(--amber); color: var(--amber); }
.prj__noev { color: var(--ink-2); font-size: 0.9375rem; }

/* ---------- 04 experience log ---------- */
.log__intro { padding: 1rem 1.1rem 0.2rem; display: grid; gap: 0.4rem; max-width: 80ch; color: var(--ink-2); }
.log__list { list-style: none; padding: 0.8rem 1.1rem 1.1rem; display: grid; gap: 0.75rem; }
.rec { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 1.5rem; background: var(--panel-2); border: 1px solid var(--line); border-left: 4px solid var(--c); border-radius: var(--r); padding: 1.1rem 1.25rem 1.2rem; }
.rec__meta { display: grid; gap: 0.5rem; align-content: start; padding-bottom: 1.2rem; }
.rec__idx { font: 600 0.75rem/1 var(--mono); letter-spacing: 0.1em; color: var(--muted); }
.rec__dates { font: 600 1.0625rem/1.3 var(--mono); color: var(--amber); }
.rec__tags { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.rec__facts { margin: 0; display: grid; gap: 0.25rem; font-size: 0.875rem; }
.rec__facts div { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: 0.4rem; }
.rec__facts dt { font: 600 0.75rem/1.55 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.rec__facts dd { margin: 0; color: var(--ink-2); }
.rec__body { display: grid; gap: 0.55rem; align-content: start; max-width: 78ch; }
.rec h3 { font: 600 1.25rem/1.3 var(--sans); letter-spacing: -0.005em; }
.rec__org { font-weight: 500; color: var(--ink); }
.rec__client { color: var(--ink-2); font-weight: 400; }
.rec__note { font: 500 0.8125rem/1.5 var(--mono); color: var(--muted); }
.rec__group { font-size: 0.9375rem; color: var(--ink-2); border-left: 2px solid var(--amber-line); padding-left: 0.7rem; }
.rec__group .k { margin-right: 0.35rem; color: var(--amber); }
.rec__scope { color: var(--ink-2); font-style: normal; }
.evinline { display: inline-flex; flex-wrap: wrap; gap: 0.3rem; margin-left: 0.2rem; vertical-align: 0.05em; }
.evinline a { display: inline-flex; align-items: center; gap: 0.3em; min-height: 1.5rem; font-size: 0.75rem; padding: 0.1rem 0.45rem; }
.rec__more summary { cursor: pointer; font: 500 0.8125rem/1.5 var(--mono); color: var(--ink-2); letter-spacing: 0.04em; text-transform: uppercase; width: fit-content; padding-block: 0.25rem; }
.rec__more summary:hover { color: var(--amber); }
.rec__more[open] summary { margin-bottom: 0.45rem; }
.rec__rest { display: grid; gap: 0.55rem; }
.rec__rest > .rec__points { margin-top: -0.1rem; }
.rec__photos a { font: 500 0.875rem/1.4 var(--mono); }

/* ---------- 05 mission archive ---------- */
.arch__view { padding: 1.1rem; }
.arch__view:focus { outline: none; }
.arch__closed {
  display: grid; gap: 0.9rem; justify-items: start; padding: 2rem 1.5rem; border: 1px dashed var(--line-2); border-radius: var(--r); max-width: 100%;
  background:
    linear-gradient(135deg, var(--sky-wash), transparent 55%),
    repeating-linear-gradient(90deg, transparent 0 46px, var(--grid-2) 46px 47px);
}
.arch__closed p { max-width: 64ch; color: var(--ink-2); }
.btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1rem; background: var(--amber); color: var(--on-c); font: 600 0.875rem/1.2 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none; border-radius: 2px; }
.btn::after { content: "▸"; }
.btn:hover { background: var(--focus); color: var(--on-c); }

/* ---------- 06 skills ---------- */
.skills__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding: 1rem 1.1rem 1.1rem; }
.sgroup { background: var(--panel-2); border: 1px solid var(--line); border-top: 3px solid var(--c); border-radius: var(--r); padding: 0.9rem 1.1rem 1rem; min-width: 0; }
.sgroup__head { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; flex-wrap: wrap; padding-bottom: 0.7rem; border-bottom: 1px solid var(--line); }
.sgroup h3 { font: 600 1.125rem/1.3 var(--sans); }
.sgroup__load { font: 500 0.75rem/1.3 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; padding: 0.35rem 0.6rem; border: 1px solid var(--line-2); border-radius: 2px; text-decoration: none; color: var(--ink-2); white-space: nowrap; }
.sgroup__load::after { content: " ▸"; color: var(--amber); }
.sgroup__load:hover { border-color: var(--amber); color: var(--amber); }
.sgroup__load[aria-current="true"] { border-color: var(--amber); color: var(--amber); background: var(--amber-wash-2); }
.sgroup__items { list-style: none; display: grid; }
.sgroup__items li { display: grid; gap: 0.3rem; padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
.sgroup__items li:last-child { border-bottom: 0; padding-bottom: 0; }
.sgroup__term { font-size: 0.9375rem; }
.sgroup__uses { display: flex; flex-wrap: wrap; gap: 0 0.75rem; align-items: baseline; font-size: 0.8125rem; }
.sgroup__uses a { color: var(--ink-2); padding-block: 0.2rem; }
.sgroup__uses a:hover { color: var(--amber); }
.sgroup__uses .d { font-size: 0.75rem; }
.readout--skills { grid-column: 1 / -1; }
.sgroup__terms { display: none; }
.sgroup__fold > summary { display: none; }
.readout--skills .fragment { grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); column-gap: 1.25rem; }
.readout--skills .frag__meta, .readout--skills .frag__title { grid-column: 1 / -1; }

/* ---------- 07 credentials ---------- */
.creds__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.2fr) minmax(0, 0.9fr); gap: 1rem; padding: 1rem 1.1rem 1.1rem; align-items: start; }
.cbox { background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r); padding: 0.9rem 1.1rem 1rem; min-width: 0; }
.cbox-stack { display: grid; gap: 1rem; }
.cbox__h { font: 600 0.75rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding-bottom: 0.6rem; margin-bottom: 0.7rem; border-bottom: 1px solid var(--line); }
.edu { list-style: none; display: grid; gap: 0.9rem; }
.edu li { display: grid; gap: 0.25rem; }
.edu__inst { font-weight: 600; }
.edu__prog { color: var(--ink-2); font-size: 0.9375rem; }
.edu__meta { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.edu__courses { list-style: none; display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.2rem; }
.edu__courses li { font-size: 0.8125rem; color: var(--ink-2); border: 1px solid var(--line); border-radius: 2px; padding: 0.1rem 0.45rem; }
.ctable { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.ctable th, .ctable td { text-align: left; vertical-align: top; padding: 0.45rem 0.5rem 0.45rem 0; border-bottom: 1px solid var(--line); }
.ctable thead th { font: 600 0.75rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.ctable tbody th { font-weight: 500; }
.ctable td { color: var(--ink-2); }
.ctable td .d { display: block; margin-top: 0.15rem; }
.ctable tr:last-child th, .ctable tr:last-child td { border-bottom: 0; }
.clr { display: grid; gap: 0.4rem; justify-items: start; }
.clr__name { font-weight: 600; }
.mem { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.mem li { font: 500 0.875rem/1.3 var(--mono); border: 1px solid var(--line-2); border-radius: 2px; padding: 0.25rem 0.55rem; }
.awd { list-style: none; display: grid; gap: 0.7rem; }
.awd li { display: grid; gap: 0.1rem; }
.awd__name { font-weight: 600; }
.awd__note { font-size: 0.875rem; color: var(--ink-2); }

/* ---------- 08 community ---------- */
.comm__primary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; padding: 1rem 1.1rem 0; }
.ccard { background: var(--panel-2); border: 1px solid var(--line); border-top: 3px solid var(--c); border-radius: var(--r); padding: 0.95rem 1.1rem 1.05rem; display: grid; gap: 0.45rem; align-content: start; min-width: 0; }
.ccard--lead { grid-column: span 2; grid-row: span 2; }
.ccard__meta { font: 500 0.8125rem/1.45 var(--mono); color: var(--amber); display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.ccard h3 { font: 600 1.125rem/1.3 var(--sans); }
.ccard__org { font-weight: 500; }
.ccard__note { font-size: 0.9375rem; color: var(--ink-2); }
.ccard__ev { font-size: 0.875rem; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 0.3rem 0.6rem; align-items: center; margin-top: 0.2rem; }
.ccard__ev a { display: inline-block; padding-block: 0.15rem; }
.ccard__rest > summary, .rec__rest > summary { display: none; }
.comm__sub { font: 600 0.75rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); padding: 1.3rem 1.1rem 0.4rem; }
.comm__secondary { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; padding: 0 1.1rem 1.1rem; }
.comm__secondary > li { border-top: 1px solid var(--line-2); padding-top: 0.6rem; font-size: 0.9375rem; color: var(--ink-2); display: grid; gap: 0.35rem; align-content: start; }
.comm2__role { color: var(--ink); font-weight: 600; }
.comm2__pts { list-style: none; display: grid; gap: 0.3rem; font-size: 0.875rem; }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--line); background: var(--foot-bg); }
.foot__in { max-width: var(--wrap); margin: 0 auto; padding: 1.75rem var(--gut) 2.5rem; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.5rem; }
.foot__h { font: 600 0.75rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber); margin-bottom: 0.6rem; }
.data-links { list-style: none; display: grid; gap: 0.35rem; font-size: 0.9375rem; color: var(--ink-2); }
.data-links a { font-family: var(--mono); color: var(--ink); }
.foot__meta { display: grid; gap: 0.35rem; align-content: start; font-size: 0.875rem; color: var(--ink-2); }
.foot__meta .k { margin-right: 0.4rem; }

/* ---------- motion ----------
   Round 3: the scroll-linked panel reveal is gone. Text is never faded or shifted in as it scrolls into view;
   panels are simply there. The only motion left is smooth in-page scrolling and the theme switch thumb,
   both only when the reader allows motion. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ---------- responsive ---------- */
@media (max-width: 82rem) {
  .hero__headline { max-width: none; }
  .comm__primary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ccard--lead { grid-row: auto; }
}
@media (max-width: 88rem) {
  .cbar__rev { display: none; }
}
/* Tablets and small laptops: readouts sit under the chart and the board at full width, so their text
   runs in two columns instead of one long line. */
/* Small laptops and tablets in landscape: name and contact side by side, the key facts across the full
   width under them, so each fact keeps a long line. */
@media (min-width: 60.01rem) and (max-width: 75rem) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; grid-template-areas: "id contact" "facts facts"; }
}
@media (min-width: 56rem) and (max-width: 75rem) {
  .fp .readout__body .fragment, .sys .readout__body .fragment { display: block; columns: 2; column-gap: 2.5rem; column-rule: 1px solid var(--line); }
  .fp .readout__body .fragment > *, .sys .readout__body .fragment > * { margin-bottom: 0.65rem; }
  .fp .readout__body .fragment > :last-child, .sys .readout__body .fragment > :last-child { margin-bottom: 0; }
  .fp .readout__body .frag__meta, .fp .readout__body .frag__title, .sys .readout__body .frag__meta, .sys .readout__body .frag__title { column-span: all; }
  .fp .readout__body .frag__points, .sys .readout__body .frag__points { display: block; }
  .fp .readout__body .frag__points li, .sys .readout__body .frag__points li { break-inside: avoid; margin-bottom: 0.45rem; }
  .prj:not(.prj--lead) .prj__facts div { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
}
@media (max-width: 56rem) {
  .readout__body .fragment > * { max-width: 72ch; }
}
@media (max-width: 75rem) {
  /* Console bar in two rows: brand and theme switch, then every section on its own line. */
  html { scroll-padding-top: 6.5rem; }
  .cbar__in { flex-wrap: wrap; column-gap: 1rem; row-gap: 0; padding-top: 0.45rem; }
  .tgl { margin-left: auto; }
  .cbar__nav { order: 3; flex-basis: 100%; margin-inline: -0.45rem; }
  .cbar__nav ul { flex-wrap: wrap; overflow: visible; padding-bottom: 0.3rem; }
  .cbar__nav a { padding-inline: 0.45rem; }
  .fp__grid, .sys__grid { grid-template-columns: minmax(0, 1fr); }
  .creds__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cbox--certs { grid-column: 2; grid-row: 1 / span 2; }
  .cbox-stack { grid-column: 1; }
}
@media (max-width: 60rem) {
  /* One column: name, key facts, contact. */
  .hero { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "id" "facts" "contact"; }
  .nowlist { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nowlist a { grid-template-columns: minmax(0, 1fr); }
  .hero__contact { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; }
  .brief__grid { grid-template-columns: minmax(0, 1fr); }
  .brief__side { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: 1rem; }
  .prjs__grid, .skills__grid { grid-template-columns: minmax(0, 1fr); }
  .prj--lead .prj__facts { grid-template-columns: minmax(0, 1fr); }
  .sys-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rec { grid-template-columns: minmax(0, 1fr); gap: 0.9rem; }
  .rec__meta { grid-template-columns: minmax(0, 1fr); padding-bottom: 1.1rem; }
  .creds__grid { grid-template-columns: minmax(0, 1fr); }
  .cbox--certs, .cbox-stack { grid-column: auto; grid-row: auto; }
  .comm__secondary { grid-template-columns: minmax(0, 1fr); }
  .pbar__tag { margin-left: 0; flex-basis: 100%; }
  /* Gantt on tablets and landscape phones: lane names sit above their tracks, so the years get the full width. */
  .fp__chart { --lab: 0px; --lgap: 0px; }
  .fp__axis { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .fp__axis-k { display: none; }
  .fp-lane { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .fp-lane__label { align-self: start; justify-self: start; padding: 0.15rem 0.5rem 0.1rem; margin-top: 0.45rem; }
  .fp__ticks span:last-child { visibility: hidden; } /* the Now marker stands at the right edge */
}

/* Phones: the Gantt becomes a list with a small position track per engagement. */
@media (max-width: 40rem) {
  /* r4 phone jump bar: the console bar sticks with a negative top, so the brand row scrolls away and only the
     section strip (2.75rem) stays on screen. The strip scrolls sideways inside itself; no JavaScript needed. */
  .cbar { position: sticky; top: -2.75rem; }
  .cbar__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 2.75rem 2.75rem; align-items: center; column-gap: 0.75rem; row-gap: 0; padding: 0 var(--gut); min-height: 0; }
  .cbar__brand { grid-area: 1 / 1; }
  .tgl { grid-area: 1 / 2; margin: 0; }
  .cbar__nav { grid-area: 2 / 1 / 3 / 3; margin: 0 calc(-1 * var(--gut)); min-width: 0; }
  .cbar__nav ul { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.3rem; height: 2.75rem; padding: 0 var(--gut); overflow-x: auto; scrollbar-width: none; }
  .cbar__nav a { flex: none; display: inline-flex; align-items: center; min-height: 2rem; padding: 0 0.6rem; font-size: 0.75rem; border: 1px solid var(--line); background: var(--panel); border-radius: 2px; }
  .cbar__nav a[aria-current="location"] { border-color: var(--amber); color: var(--amber); }
  html { scroll-padding-top: 3.5rem; }
  main { gap: 1rem; }
  .hero { padding-top: 1rem; }
  .hero > div { padding: 1rem; }
  .hero__contact div { grid-template-columns: 5.2rem minmax(0, 1fr); gap: 0.4rem; }
  .hero__contact dd { font-size: 0.875rem; }
  .nowlist { grid-template-columns: minmax(0, 1fr); }
  .hero__contact { grid-template-columns: minmax(0, 1fr); }
  .facts__row { grid-template-columns: minmax(0, 1fr); gap: 0.15rem; padding: 0.55rem 0; }
  .facts__k { padding-top: 0; }
  .hero__facts .minihead { padding-bottom: 0.55rem; margin-bottom: 0.6rem; }
  .brief__grid { padding: 1rem; }
  .brief__text { font-size: 1.0625rem; }
  .fp__grid, .sys__grid, .prjs__grid, .skills__grid, .creds__grid { padding: 0.8rem; }
  .fp__axis, .fp__now { display: none; }
  .fp__lanes { border: 0; }
  .fp-lane { grid-template-columns: minmax(0, 1fr); gap: 0.3rem; border-top: 1px solid var(--line); padding: 0.6rem 0 0.4rem; }
  .fp-lane:first-child { border-top: 0; padding-top: 0; }
  .fp-lane__label { padding: 0.15rem 0 0.15rem 0.55rem; }
  .fp-lane__track { padding: 0; gap: 0.15rem; }
  .fp-lane__track::before { display: none; }
  .fp-row { height: auto; }
  .fp-bar { position: relative; left: auto; width: auto; display: block; background: none; color: var(--ink); border: 0; padding: 0.45rem 0 1.1rem; font: 500 0.9375rem/1.35 var(--sans); }
  .fp-bar::before, .fp-bar--right::before, .fp-bar--left::before { content: ""; position: absolute; top: auto; left: 0; right: 0; bottom: 0.45rem; height: 4px; background: var(--line); border-radius: 2px; }
  .fp-bar::after { content: ""; position: absolute; bottom: 0.45rem; height: 4px; left: calc(var(--l) * 1%); width: max(4px, calc(var(--w) * 1%)); background: var(--c); border-radius: 2px; }
  .fp-bar .fp-bar__text, .fp-bar--right .fp-bar__text, .fp-bar--left .fp-bar__text { position: static; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.1rem 0.75rem; height: auto; max-width: none; width: auto; padding: 0; overflow: visible; color: var(--ink); flex-direction: row; }
  .fp-bar__label { white-space: normal; overflow: visible; font-weight: 600; line-height: 1.35; }
  .fp-bar__dates { font: 500 0.8125rem/1.35 var(--mono); color: var(--muted); opacity: 1; }
  .fp-bar:hover { filter: none; }
  .fp-bar:hover .fp-bar__label { color: var(--amber); }
  .fp-bar[aria-current="true"] { box-shadow: none; }
  .fp-bar[aria-current="true"] .fp-bar__label { color: var(--amber); }
  .fp-bar[aria-current="true"] .fp-bar__label::before { content: "▸ "; }
  .fp__cap { padding-right: 0; }
  .sys-board { grid-template-columns: minmax(0, 1fr); }
  .sys-cell { min-height: 0; padding: 0.8rem 0.9rem 0.85rem; }
  .readout__body { padding: 0.9rem; }
  .log__list { padding: 0.7rem 0.6rem 0.8rem; }
  .log__intro { padding: 0.9rem 0.9rem 0.2rem; }
  .rec { padding: 0.95rem 0.95rem 1rem; }
  .prj { padding: 0.95rem; }
  .prj__facts div { grid-template-columns: minmax(0, 1fr); gap: 0.2rem; }
  .prj--lead h3 { font-size: 1.35rem; }
  .comm__primary { grid-template-columns: minmax(0, 1fr); padding: 0.8rem 0.8rem 0; }
  .ccard--lead { grid-column: auto; grid-row: auto; }
  .comm__sub { padding: 1.1rem 0.8rem 0.4rem; }
  .comm__secondary { padding: 0 0.8rem 0.9rem; }
  .ctable thead { display: none; }
  .ctable tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 0.6rem; border-bottom: 1px solid var(--line); padding: 0.45rem 0; }
  .ctable th, .ctable td { border: 0; padding: 0; }
  .ctable tbody th { grid-column: 1 / -1; }
  .ctable td:nth-child(2) { font-size: 0.875rem; }
  .ctable td .d { display: inline; }
  .foot__in { grid-template-columns: minmax(0, 1fr); }
  .arch__closed { padding: 1.25rem 1rem; }
}

@media (max-width: 24rem) {
  /* Narrow phones: the brand keeps its monogram and an accessible name; the switch keeps its label. */
  .cbar__brand > span:not(.cbar__mono) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Folded phones (280 px): tighter gutters so text keeps a usable measure. */
@media (max-width: 20rem) {
  :root { --gut: 0.75rem; }
  .fp__grid, .sys__grid, .prjs__grid, .skills__grid, .creds__grid { padding: 0.6rem; }
  .hero > div, .brief__grid { padding: 0.85rem; }
  .readout__body { padding: 0.75rem; }
  .readout__bar { flex-wrap: wrap; }
  .log__list { padding-inline: 0.45rem; }
  .rec, .prj, .sgroup, .cbox, .ccard { padding-inline: 0.75rem; }
}
@media (max-width: 25rem) {
  .hero__contact div { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hero__contact div + div { margin-top: 0.2rem; }
  .kicker { font-size: 0.75rem; letter-spacing: 0.05em; }
}

/* Landscape phones: nothing sticks, so the whole short screen is for reading. */
@media (max-height: 500px) {
  .cbar { position: static; }
  html { scroll-padding-top: 1rem; }
}

@media (forced-colors: active) {
  .fp-bar { border: 1px solid CanvasText; }
  .fp-bar[aria-current="true"], .sys-cell[aria-current="true"] { outline: 3px solid Highlight; }
  .fp-bar[data-active] { outline: 2px dashed Highlight; outline-offset: 2px; }
  .lamp, .fp__now, .fp__cur { forced-color-adjust: none; }
  .fp__cur { border-inline: 1px solid Highlight; }
}

/* ---------- print: a clean light document ---------- */
@media print {
  /* Print is always light, whichever theme is on screen. */
  :root:not([data-theme]), :root[data-theme] {
    color-scheme: light;
    --bg: #fff; --panel: #fff; --panel-2: #fff; --panel-3: #fff; --line: #bbb; --line-2: #999;
    --ink: #000; --ink-2: #222; --muted: #444; --amber: #000; --amber-line: #666; --phos: #000; --focus: #000; --on-c: #fff;
    --grid: transparent; --grid-2: transparent; --bar-bg: #fff; --foot-bg: #fff;
    --amber-wash: transparent; --amber-wash-2: transparent; --phos-wash: transparent; --sky-wash: transparent;
    --sel-glow: none; --fig-glow: none; --now-glow: none; --lamp-glow: 0 0 0; --shadow: none;
    --c-cobalt: #2f52c2; --c-amber: #8a5200; --c-crimson: #b3263a; --c-orange: #a3410a; --c-sky: #0b6287;
    --c-magenta: #9c2a7b; --c-violet: #6440c4; --c-teal: #0a675b; --c-green: #2a6827;
  }
  body { background-image: none; }
  @page { margin: 16mm 14mm; }
  body { background: #fff; color: #000; font-size: 10.5pt; }
  .skip, .cbar, .tgl, .fp, .readout, .scrub, .status, .fp__cur, .arch, .sgroup__load, .sgroup__terms, .lamp, .sys-cell__top, .sys-cell__ico, .mtrack, .rec__idx, .rec__photos, .foot__meta p:last-child { display: none !important; }
  .vtag { color: #222; border-color: #888; background: none; }
  .panel--plain .pbar { padding-inline: 0; }
  main { display: block; max-width: none; padding: 0; }
  .panel, .hero > div, .prj, .rec, .sgroup, .cbox, .ccard { border: 0 !important; background: none !important; box-shadow: none !important; animation: none !important; }
  .panel { margin-top: 1.2em; }
  .pbar { background: none; border-bottom: 1.5px solid #000; padding: 0 0 0.3em; }
  .pbar__id { background: none; color: #000; padding: 0; }
  .pbar__tag { display: none; }
  .hero { display: block; padding: 0; }
  .brief__grid { display: block; padding: 0.6em 0 0; }
  .brief__side { border: 0; padding: 0.6em 0 0; }
  .nowlist { display: block; }
  .hero > div { padding: 0 0 0.8em; }
  .hero h1 { font-size: 26pt; }
  .nowlist a { background: none; border-left-width: 2px; padding: 0.1em 0.5em; }
  .sys__grid, .fp__grid, .prjs__grid, .skills__grid, .creds__grid, .log__list, .comm__primary { display: block; padding: 0.6em 0 0; }
  .sys-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6em; background: none; border: 0; }
  .sys-board li { background: none; }
  .sys-cell { display: block; min-height: 0; padding: 0.3em 0 0.3em 0.6em; background: none; }
  .sys-cell::before { width: 2px; }
  .sys-cell__label, .sys-cell__fig, .sys-cell__span { display: block; font-size: 9.5pt; text-shadow: none; }
  .prj, .rec, .ccard, .cbox, .sgroup { padding: 0.5em 0 0.7em; break-inside: avoid; border-top: 1px solid #999 !important; }
  .rec { display: grid; grid-template-columns: 11em 1fr; gap: 1em; border-left: 0 !important; }
  .rec__meta { padding: 0; }
  .prj__status { background: none; border: 1px solid #000; }
  .evlist a, .evinline a, .tagc, .mem li, .edu__courses li { border-color: #888; background: none; }
  .evlist a::before, .evinline a::before { content: ""; }
  .evlist a::after { content: " (" attr(href) ")"; font-size: 8pt; overflow-wrap: anywhere; }
  .tagc, .prj__kicker .tagc { white-space: normal; color: #000; border-color: #888; }
  .hero__contact a::after { content: ""; }
  .facts__k::before, .hero__also-h::before { display: none; }
  .facts__k, .facts__row:first-child .facts__k { color: #444; }
  .facts__row { grid-template-columns: 9em 1fr; padding: 0.25em 0; break-inside: avoid; }
  .hero__also { padding-top: 0.5em; }
  details > summary { display: none; }
  details::details-content { content-visibility: visible; display: block; }
  .comm__secondary { display: block; padding: 0; }
  .comm__secondary > li { margin-top: 0.5em; }
  .foot { background: none; border-top: 1px solid #000; }
  .foot__in { display: block; padding: 1em 0 0; }
  a { color: #000; text-decoration: none; }
}

/* ======================================================================================================
   r4: Round 4 additions (2026-10-08). Plain sections, verification tags, the year cursor, the status list,
   folds and their phone behaviour. Kept together so the parent's rules above stay recognisable.
   ====================================================================================================== */

/* Plain sections: no console chrome. Boxed instrument panels (01, 03, 06, 08) alternate with these. */
.panel--plain { background: none; border: 0; box-shadow: none; border-radius: 0; padding-block: 0.5rem 0.75rem; }
.panel--plain .pbar { background: none; border-bottom: 1px solid var(--line-2); border-radius: 0; padding: 0.4rem 0 0.7rem; }
.panel--plain > :not(.pbar) { padding-inline: 0; }
.panel--plain .comm__sub { padding-inline: 0; }

/* Verification words, from the data: "Public artifact" (lit) or "Self-reported" (quiet). Never invented. */
.vtag { display: inline-block; font: 500 0.75rem/1.35 var(--mono); letter-spacing: 0.03em; color: var(--muted); border: 1px solid var(--line-2); border-radius: 2px; padding: 0.05rem 0.4rem; white-space: nowrap; vertical-align: 0.12em; }
.vtag--public_artifact { color: var(--phos); border-color: color-mix(in srgb, var(--phos) 45%, transparent); background: color-mix(in srgb, var(--phos) 8%, transparent); }
.rec__points .vtag { margin-left: 0.15rem; }
.prj__ev .vtag { align-self: center; }

/* ---------- the year cursor ---------- */
/* Hidden until script.js has wired it. Without JavaScript the chart keeps its static Now marker only. */
.scrub, .status, .fp__cur { display: none; }
.fp__chart[data-ready] .scrub { display: grid; }
.fp__chart[data-ready] .status { display: block; }
.fp__chart[data-ready] .fp__cur { display: block; }

/* The year band: one year wide, behind the rows (the rows paint above it), with the year on top. */
.fp__cur {
  position: absolute; top: -2.2rem; bottom: 0; z-index: 0;
  /* The band is placed within the track area: the lanes box minus the label column and its gap. */
  left: calc(var(--lab) + var(--lgap) + (100% - var(--lab) - var(--lgap)) * var(--cs) / 100); width: calc((100% - var(--lab) - var(--lgap)) * var(--cw) / 100);
  background: color-mix(in srgb, var(--phos) 14%, transparent); border-inline: 1px solid color-mix(in srgb, var(--phos) 70%, transparent);
  pointer-events: none;
}
.fp-row { z-index: 1; }
.fp__cur-y { position: absolute; top: 0; left: 50%; transform: translateX(-50%); font: 600 0.75rem/1 var(--mono); letter-spacing: 0.04em; color: var(--on-c); background: var(--phos); padding: 0.12rem 0.35rem; border-radius: 2px; white-space: nowrap; }
.fp__cur[data-edge="end"] .fp__cur-y { left: auto; right: 0; transform: none; }
.fp__cur[data-edge="start"] .fp__cur-y { left: 0; transform: none; }

/* Bars that ran in the cursor year light up: a phosphor ring and glow; outside labels turn phosphor. */
.fp-bar[data-active] { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--phos), 0 0 14px color-mix(in srgb, var(--phos) 55%, transparent); }
.fp-bar[data-active][aria-current="true"] { box-shadow: 0 0 0 2px var(--panel), 0 0 0 4px var(--ink), 0 0 0 6px var(--phos), var(--sel-glow); }
.fp-bar--right[data-active] .fp-bar__label, .fp-bar--left[data-active] .fp-bar__label { color: var(--phos); }
.fp-bar--right[data-active][aria-current="true"] .fp-bar__label, .fp-bar--left[data-active][aria-current="true"] .fp-bar__label { color: var(--amber); }

/* The scrubber under the chart: label and value in the lane column, the range across the time axis. The input's
   width and offset come from the timeline geometry (--span: left edge of the current year, --yr: one year), so the
   thumb centre sits under the centre of the year band at every year. */
.scrub { grid-template-columns: var(--lab) minmax(0, 1fr); gap: 0.75rem; align-items: start; margin-top: 2.1rem; padding-top: 0.9rem; border-top: 1px dashed var(--line-2); }
.scrub__head { display: grid; gap: 0.3rem; justify-items: start; align-content: start; }
.scrub__label { font: 600 0.75rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.scrub__value { font: 600 1.875rem/1 var(--mono); color: var(--amber); letter-spacing: -0.02em; text-shadow: var(--fig-glow); }
.scrub__now { display: inline-flex; align-items: center; min-height: 1.75rem; padding: 0.2rem 0.6rem; cursor: pointer; font: 600 0.75rem/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--phos); background: var(--panel-2); border: 1px solid color-mix(in srgb, var(--phos) 45%, var(--line-2)); border-radius: 2px; }
.scrub__now::after { content: "\25B8"; margin-left: 0.4rem; }
.scrub__now:hover { color: var(--amber); border-color: var(--amber); }
.scrub__track { display: grid; gap: 0.35rem; min-width: 0; }
.scrub__range {
  -webkit-appearance: none; appearance: none; display: block; height: 2rem; margin: 0 0 0 calc(var(--yr) / 2 - 0.625rem);
  width: calc(var(--span) * 1% + 1.25rem); max-width: 100%; background: transparent; cursor: pointer;
}
.scrub__range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: var(--line-2); }
.scrub__range::-moz-range-track { height: 6px; border-radius: 3px; background: var(--line-2); }
.scrub__range::-webkit-slider-thumb { -webkit-appearance: none; width: 1.25rem; height: 1.25rem; margin-top: calc((6px - 1.25rem) / 2); border-radius: 3px; background: var(--amber); border: 2px solid var(--panel); box-shadow: 0 0 0 1px var(--amber-line), var(--now-glow); }
.scrub__range::-moz-range-thumb { width: 1.25rem; height: 1.25rem; border-radius: 3px; background: var(--amber); border: 2px solid var(--panel); box-shadow: 0 0 0 1px var(--amber-line), var(--now-glow); }
.scrub__range:focus-visible { outline: none; }
.scrub__range:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--focus); outline-offset: 3px; }
.scrub__range:focus-visible::-moz-range-thumb { outline: 2px solid var(--focus); outline-offset: 3px; }
.scrub__help { font: 500 0.8125rem/1.5 var(--mono); color: var(--muted); max-width: 72ch; }

/* Status at the cursor year: every engagement whose months include that year, in chart order. */
.status { margin-top: 1rem; background: var(--panel-2); border: 1px solid var(--line-2); border-radius: var(--r); }
.status__bar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--line-2); font: 600 0.75rem/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--phos); }
.status__bar [data-scrub-year] { color: var(--amber); }
.status__sub { color: var(--muted); margin-left: auto; letter-spacing: 0.04em; }
.status__out { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 0.5rem; padding: 0.75rem 0.9rem 0.9rem; }
.st { display: grid; gap: 0.1rem; align-content: start; padding: 0.5rem 0.7rem 0.55rem 0.8rem; border-left: 3px solid var(--c); background: var(--panel); text-decoration: none; border-radius: 0 var(--r) var(--r) 0; }
.st[hidden], .st__none[hidden] { display: none; }
.st:hover { background: var(--panel-3); color: var(--ink); }
.st:hover .st__title { color: var(--amber); }
.st__title { font-weight: 600; font-size: 0.9375rem; line-height: 1.3; }
.st__org { font-size: 0.875rem; color: var(--ink-2); }
.st__meta { font: 500 0.75rem/1.5 var(--mono); color: var(--muted); }
.st__none { color: var(--ink-2); font-size: 0.9375rem; }

/* Folds (details[data-fold]): open on wide screens with the summary hidden; disclosures on phones. */
.rec__rest-t { font: 500 0.8125rem/1.5 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; }

@media (min-width: 56rem) and (max-width: 75rem) {
  .readout--dock .fragment { display: block; columns: 2; column-gap: 2.5rem; column-rule: 1px solid var(--line); }
}

@media (max-width: 40rem) {
  /* The scrubber and the status list come first on phones, above the engagement list. */
  .scrub { order: -2; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; margin-top: 0; padding-top: 0; border-top: 0; margin-bottom: 0.9rem; }
  .scrub__head { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.6rem; }
  .scrub__value { font-size: 1.5rem; }
  .scrub__range { width: 100%; margin: 0; }
  .status { order: -1; margin: 0 0 1rem; }
  .status__sub { margin-left: 0; flex-basis: 100%; }
  .status__out { grid-template-columns: minmax(0, 1fr); padding: 0.6rem 0.7rem 0.7rem; }
  .fp__cur { display: none !important; }
  .fp-bar[data-active] { box-shadow: none; }
  .fp-bar[data-active] .fp-bar__label { color: var(--phos); }
  .fp-bar[data-active] .fp-bar__label::after { content: " \25CF"; color: var(--phos); }
  .fp-bar[data-active][aria-current="true"] .fp-bar__label { color: var(--amber); }
  /* Readouts are disclosures, closed until something is selected. */
  summary.readout__bar::after { content: "\25BE"; margin-left: auto; color: var(--amber); font-size: 0.875rem; }
  details.readout:not([open]) summary.readout__bar::after { content: "\25B8"; }
  details.readout:not([open]) summary.readout__bar { border-bottom: 0; }
  .readout__bar .readout__sub { margin-left: 0; }
  /* Everything after a record's first contribution folds; the summary is a real control. */
  .rec__rest > summary, .ccard__rest > summary, .sgroup__fold > summary { display: flex; align-items: center; gap: 0.4rem; min-height: 1.75rem; width: fit-content; cursor: pointer; color: var(--ink-2); font: 500 0.8125rem/1.5 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; list-style: none; }
  .rec__rest > summary::-webkit-details-marker, .ccard__rest > summary::-webkit-details-marker, .sgroup__fold > summary::-webkit-details-marker { display: none; }
  .rec__rest > summary::before, .ccard__rest > summary::before, .sgroup__fold > summary::before { content: "\25B8"; color: var(--amber); }
  .rec__rest[open] > summary::before, .ccard__rest[open] > summary::before, .sgroup__fold[open] > summary::before { content: "\25BE"; }
  .rec__rest > summary:hover, .ccard__rest > summary:hover, .sgroup__fold > summary:hover { color: var(--amber); }
  .sgroup__terms { display: block; font-size: 0.9375rem; color: var(--ink-2); padding: 0.6rem 0 0.4rem; }
  .sgroup__fold[open] > summary { margin-bottom: 0.2rem; }
  /* Compact record meta: dates and tags in one row, the lane facts on one line. */
  .rec__meta { padding-bottom: 0.9rem; gap: 0.4rem; grid-template-columns: minmax(0, 1fr); }
  .rec__dates { font-size: 1rem; }
  .rec__facts { display: flex; flex-wrap: wrap; gap: 0.15rem 0.9rem; font-size: 0.8125rem; }
  .rec__facts div { display: flex; gap: 0.35rem; }
  .rec__facts dt { font-size: 0.75rem; }
  .mtrack { margin-top: 0.4rem; }
  .panel--plain { padding-block: 0.25rem 0.5rem; }
}

@media (max-width: 20rem) {
  .scrub__head { grid-template-columns: minmax(0, 1fr) auto; }
  .scrub__value { grid-column: 1 / -1; }
}

.people-opening { font-size: 1rem; line-height: 1.5; margin-top: 0.7rem; max-width: 60ch; }