/* ==========================================================================
   Watch Vault History — site stylesheet

   Built to the family standard (~/Projects/aveneg-design-kit/family-standard.md,
   owned by the corporate site's session). What that fixes here:

     - The family's colour tokens. No invented colour.
     - h1 and h2 in the system serif; everything else in the system sans;
       labels in mono capitals.
     - Body 18px in a 38rem column. No sentence under 15px. Labels 14px.
     - 48 to 64px between sections, 64 to 104 at major breaks (an exception
       to the standard's 64 to 104, 2026-11-11). One left edge: nothing is centred.
     - Brass is rationed: a link's underline, the current place, a year.
     - 48px targets. One radius, 3px. No glows, icons or pictures needed.
     - Breakpoints at 45em (720px) and 60em (960px).

   Copied in parts, each marked: the base and footer from the Media site, the
   section 10 masthead from the Archive site, the type-set lockup and the
   family panel from the Insurance site. What is this site's own is a
   reference page: facts, a timeline, connections and numbered sources.

   No inline style="" and no script: static/_headers allows neither.
   ========================================================================== */

:root {
  --ink: #0E0F12;
  --surface: #16181D;
  --surface-2: #1E2128;
  --surface-3: #23262E;
  --line: #2A2E37;
  --line-2: #363B45;
  --text: #E7E4DC;
  --prose: #B9BCC2;
  --muted: #A8ABB2;
  --muted-2: #9297A2;
  --brass: #C6A15B;
  --brass-dim: #A28442;
  --brass-lit: #D3B273;
  --brass-ink: #15120B;
  --lockup: #D6D5D3;

  --serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", "Roboto Mono", Menlo, Consolas, monospace;
  --r: 3px;
  --tap: 3rem;

  --wrap: 1080px;                                   /* including gutters */
  --measure: 38rem;
  --gut: clamp(20px, 5vw, 40px);
  /* Editorial rhythm (Brad, 2026-11-11): sections are chapters of one story,
     not separate pages. 48 to 64 between ordinary sections (about 55 to 58 at
     common desktop widths); the large token, the old 64 to 104, is kept for
     the major breaks: the head into the story, and the story into the footer.
     The family standard says 64 to 104: an exception for the design-kit session. */
  --section: clamp(3rem, 2.25rem + 1.5vw, 4rem);    /* 48 to 64 */
  --section-large: clamp(4rem, 2.5rem + 6vw, 6.5rem); /* 64 to 104 */

  color-scheme: dark;
}

/* ── reset (Media site) ──────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  background: var(--ink);
  color: var(--prose);
  font-family: var(--sans);
  font-size: 1.125rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; padding: 0; }

/* A link in a sentence is the sentence's own colour with a brass underline. */
a { color: var(--text); text-decoration: underline; text-decoration-color: var(--brass); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--brass-lit); }
::selection { background: var(--brass); color: var(--brass-ink); }
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: var(--r); }

/* ── layout ──────────────────────────────────────────────────────────────── */

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
.section { position: relative; padding-block: var(--section); }
/* Major breaks keep the large rhythm: the end of a page's head into its story,
   and the last section into the footer. */
.subject-head { padding-bottom: var(--section-large); }
.section.end { padding-bottom: var(--section-large); }
.section::before {
  content: ""; position: absolute; top: 0;
  left: var(--gut); right: var(--gut);
  border-top: 1px solid var(--line);
}
main > .section:first-child { padding-top: clamp(3rem, 2rem + 5vw, 4.75rem); }
main > .section:first-child::before { display: none; }
.section[aria-labelledby] h2[id], [id] { scroll-margin-top: 1.5rem; }
@media (min-width: 60em) { [id] { scroll-margin-top: 4.5rem; } }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--brass); color: var(--brass-ink); padding: 14px 18px;
  font: 600 .875rem/1 var(--mono); text-decoration: none;
}
.skip:focus { left: 12px; top: 12px; }

/* ── type ────────────────────────────────────────────────────────────────── */

.eyebrow, .notice-tag, .facts dt, .tl-year, .conn-kind, .conn-h, .also-key, .start-key, .src-n, .callout-head, .idx-h, .menu-btn, .destinations a, .menu-list a {
  font-family: var(--mono);
  font-size: .875rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.3;
}
.eyebrow { color: var(--muted); }
.eyebrow a { color: inherit; text-decoration-color: var(--muted-2); }
.eyebrow a:hover { color: var(--text); }
.crumbs { display: flex; flex-wrap: wrap; column-gap: .75em; margin-bottom: 20px; }
.crumbs a { display: inline-flex; align-items: center; min-height: var(--tap); margin-block: -14px; }

h1, h2, h3 { color: var(--text); font-weight: 400; text-wrap: balance; }
h1, h2 { font-family: var(--serif); }
.display {
  font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem);    /* 36 to 56 */
  line-height: 1.08;
  letter-spacing: -.012em;
}
h2 {
  font-size: clamp(1.75rem, 1.5rem + 1vw, 2.125rem);    /* 28 to 34 */
  line-height: 1.18;
  max-width: 30ch;
}
/* The serif stops at h2: h3 and the Line role are sans. */
h3, .line { font-family: var(--sans); font-size: clamp(1.25rem, 1.2rem + .2vw, 1.375rem); line-height: 1.3; }

.lead {
  margin-top: 24px;
  font-size: clamp(1.1875rem, 1.13rem + .25vw, 1.3125rem);   /* 19 to 21 */
  line-height: 1.5;
  color: var(--prose);
  max-width: 34rem;
  text-wrap: pretty;
}
p { max-width: var(--measure); text-wrap: pretty; }
.fine { font-size: .9375rem; line-height: 1.6; color: var(--prose); max-width: 34rem; }

/* A citation: a small number after the claim, a 1px brass underline like any
   link. It is inline in a sentence, so the sentence carries the target. */
.cite { font-size: .9375rem; line-height: 0; margin-left: 3px; font-family: var(--sans); vertical-align: super; }
/* One link per group of numbers, with room around it for a finger. The
   underline is brass-dim until the family standard allows muted-2 for
   citations (requested of the AT Site session, 2026-11-10). */
.cite a { display: inline-block; padding: 6px 4px; margin: -6px -2px; line-height: 1; color: var(--muted); text-decoration-color: var(--brass-dim); }
.cite a:hover { color: var(--text); }

/* ── buttons (Media site) ────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap);
  padding: 0 1.5rem;
  background: var(--surface-2);
  border: 1px solid var(--muted-2);
  border-radius: var(--r);
  color: var(--text);
  font-size: 1.0625rem;
  line-height: 1.2;
  text-decoration: none;
}
.btn:hover { background: var(--surface-3); color: var(--text); }
/* The one filled brass element on a screen (standard rule 2). */
.btn.primary { background: var(--brass); border-color: var(--brass); color: var(--brass-ink); font-weight: 600; }
.btn.primary:hover { background: var(--brass-lit); border-color: var(--brass-lit); color: var(--brass-ink); }

/* ── notice bar (Media site) ─────────────────────────────────────────────── */

.notice { background: var(--surface); border-bottom: 1px solid var(--line); }
.notice-in {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 8px 16px;
  padding-block: 12px;
  font-size: .9375rem; line-height: 1.4;
  color: var(--prose);
}
.notice-tag {
  letter-spacing: .12em;
  color: var(--brass);
  border: 1px solid var(--brass-dim);
  border-radius: var(--r);
  padding: 4px 8px;
  white-space: nowrap;
}

/* ── lockup, set in type (Insurance site) ────────────────────────────────── */

.lockup { display: flex; align-items: center; gap: 12px; height: 40px; }
.lockup-mark { width: 40px; height: 40px; flex: none; color: var(--brass); }
/* The History compass mark (tools/make-mark.mjs): brass ring, indices, needle and
   pivot; the rose in the lockup ivory; ink edges cut the needle out of the rose. */
.mk-brass { fill: var(--brass); }
.mk-brass-line { stroke: var(--brass); }
.mk-ivory { fill: var(--lockup); }
.mk-ink { fill: var(--ink); }
.mk-ink-line { stroke: var(--ink); }
.lockup-text { display: flex; flex-direction: column; gap: 6px; }
.lockup-name {
  font: 600 1.0625rem/1 var(--mono);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--lockup);
  white-space: nowrap;
}
.lockup-name b { color: var(--brass); font-weight: 600; }
.lockup-gap { font-size: 1px; letter-spacing: 5px; }
.lockup-tm {
  font-size: max(8px, .5em);
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  vertical-align: super;
  line-height: 0;
  margin-left: 1px;
  color: var(--text);
}
.lockup-sub {
  font: 500 .6875rem/1 var(--mono);                 /* 11px, the one thing under 14 */
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--muted);
}
/* The Media and Tracker lockups are the owner's artwork as inline SVG. */
.product-lockup { height: 40px; width: auto; }
.lk-ring { fill: none; stroke: var(--brass); stroke-width: 3; stroke-miterlimit: 10; }
.lk-brass { fill: var(--brass); }
.lk-word { fill: var(--lockup); }
.lk-sub { fill: var(--muted); }
.lk-tm { fill: var(--text); font-family: var(--sans); font-size: 30px; font-weight: 500; letter-spacing: 0; }

/* ── masthead, family standard section 10 (Archive site) ─────────────────── */

.top { position: relative; z-index: 50; background: var(--ink); border-bottom: 1px solid var(--line); }
.top-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; }
.brand { display: flex; align-items: center; min-height: var(--tap); text-decoration: none; margin-right: auto; }

.destinations { display: none; align-self: stretch; gap: 4px; margin-right: -12px; }
.destinations a, .menu-list a {
  display: flex; align-items: center;
  min-height: var(--tap);
  text-decoration: none;
  color: var(--muted);
}
.destinations a { padding-inline: 12px; }
.destinations a:hover, .menu-list a:hover { color: var(--text); }
.destinations a[aria-current="page"], .menu-list a[aria-current="page"] { color: var(--text); box-shadow: inset 0 -2px 0 var(--brass); }
.destinations a:focus-visible { outline-offset: -6px; }

.menu-btn {
  display: flex; align-items: center; justify-content: center;
  min-height: var(--tap); min-width: var(--tap); padding-inline: 14px;
  list-style: none; cursor: pointer;
  border: 1px solid var(--muted-2); border-radius: var(--r);
  background: var(--surface-2); color: var(--text);
}
.menu-btn::-webkit-details-marker { display: none; }
.menu-btn::marker { content: ""; }
/* Anything that opens shows that it does (standard 6): a drawn plus, a minus when open. */
.menu-btn::after {
  content: ""; width: 9px; height: 9px; margin-left: 10px;
  background:
    linear-gradient(var(--muted), var(--muted)) center / 100% 1px no-repeat,
    linear-gradient(var(--muted), var(--muted)) center / 1px 100% no-repeat;
}
.menu[open] > .menu-btn::after { background: linear-gradient(var(--brass), var(--brass)) center / 100% 1px no-repeat; }
.menu-btn:hover { border-color: var(--text); background: var(--surface-3); }
.menu[open] > .menu-btn { border-color: var(--brass); }
.menu-list {
  position: absolute; left: 0; right: 0; top: 100%;
  display: grid; grid-template-columns: 1fr;
  background: var(--surface); border-bottom: 1px solid var(--line-2);
  padding: 8px var(--gut) 12px;
  z-index: 60;
}
.menu-list a { border-bottom: 1px solid var(--line); }
.menu-list a:last-child { border-bottom: 0; }
@media (min-width: 40em) { .menu-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } .menu-list a:nth-last-child(2) { border-bottom: 0; } }

@media (min-width: 60em) {
  /* From 960 one row, lockup and destinations, sticky (72px, under the 100px limit). */
  .top { position: sticky; top: 0; }
  .top-bar { height: 72px; }
}
/* Search (2026-11-12, as Watch Vault Media): a magnifier, a 48px target, after the
   destinations on a wide screen and beside MENU below. */
.nav-search { display: flex; align-items: center; justify-content: center; min-width: var(--tap); min-height: var(--tap); color: var(--muted); }
.nav-search:hover { color: var(--text); }
.nav-search[aria-current="page"] { color: var(--text); box-shadow: inset 0 -2px 0 var(--brass); }
.nav-search svg { display: block; }
@media (min-width: 75em) { .nav-search { align-self: stretch; margin-left: 8px; margin-right: -12px; } }
/* On a phone the lockup, the magnifier and MENU share 335px: no gap (the magnifier's 48px
   target holds its own space) and a slimmer MENU. */
@media (max-width: 29.99em) { .top-bar { gap: 0; } .menu-btn { padding-inline: 10px; } }

/* Eight destinations (architecture v2) fit one row from 1200; the menu serves below. */
@media (min-width: 75em) {
  .destinations { display: flex; }
  .destinations a { padding-inline: 10px; letter-spacing: .1em; }
  .menu { display: none; }
}

/* ── a subject page: the head ────────────────────────────────────────────── */

.subject-head .lead { max-width: var(--measure); }

/* Facts: a <dl> of ruled rows, a muted mono label, then the value at 17px. */
.facts { margin-top: 40px; border-top: 1px solid var(--line); max-width: 44rem; }
.facts > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 24px; padding: 14px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 45em) { .facts > div { grid-template-columns: 10rem minmax(0, 1fr); align-items: baseline; } }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; font-size: 1.0625rem; line-height: 1.45; color: var(--text); overflow-wrap: anywhere; }
.as-of { display: block; margin-top: 4px; font-size: .9375rem; color: var(--muted); }

/* The head's key facts: one line, said once, no citations. */
.keyfacts { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: 1.0625rem; color: var(--text); max-width: 44rem; }
.kf-label { font: 500 .875rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.kf-sep { margin-inline: .75em; color: var(--muted-2); }

/* ── written history ─────────────────────────────────────────────────────── */

.prose { margin-top: 24px; }
.prose p + p { margin-top: 16px; }
/* A short topic folded into its neighbour: a sans subheading, not a section. */
.sub-h { margin-top: 40px; }
.sub-h + p { margin-top: 12px; }

/* ── a timeline: the year in brass mono, what happened beside it ─────────── */

.timeline { margin-top: 32px; border-top: 1px solid var(--line); max-width: 52rem; }
.tl-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 24px; padding: 16px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 45em) { .tl-row { grid-template-columns: 6rem minmax(0, 1fr); align-items: baseline; } }
.tl-year { color: var(--muted); }
.tl-row p { font-size: 1.0625rem; }
.tl-who { display: block; font-weight: 500; }
.tl-who a { color: var(--text); }

/* ── connections: what this subject is to each other one, and why ────────── */

.conn-h { margin-top: 40px; color: var(--muted); }
h2 + .conn-h { margin-top: 32px; }
.conn { margin-top: 12px; border-top: 1px solid var(--line-2); }
.conn-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 24px; padding: 16px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 45em) { .conn-row { grid-template-columns: 10rem minmax(0, 1fr); align-items: baseline; } }
.conn-kind { color: var(--muted); }
.conn-name {
  display: inline-flex; align-items: center; min-height: var(--tap); margin-block: -10px;
  font-size: clamp(1.25rem, 1.2rem + .2vw, 1.375rem); line-height: 1.3;
}
.conn-body p { margin-top: 4px; font-size: 1.0625rem; }

/* Connections as tiles: the name, what kind of page, the reason to go. */
.tiles { margin-top: 12px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 45em) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60em) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.tile { padding: 16px 20px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.tile-name { display: inline-flex; align-items: center; min-height: var(--tap); font-size: clamp(1.1875rem, 1.15rem + .15vw, 1.25rem); line-height: 1.3; }
/* What the other subject is to this one, and its kind, inside the tile. */
.tile-key { display: block; font: 500 .875rem/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.tile-note { margin-top: 10px; font-size: 1.0625rem; line-height: 1.5; }

/* ── elsewhere in the family: ruled rows, plain links ────────────────────── */

.h-quiet { font-size: clamp(1.5rem, 1.35rem + .6vw, 1.75rem); }
.also { margin-top: 24px; border-top: 1px solid var(--line); max-width: 52rem; }
.also-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 24px; padding: 16px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 45em) { .also-row { grid-template-columns: 10rem minmax(0, 1fr); align-items: baseline; } }
.also-key { color: var(--muted); }
.also-row p { font-size: 1.0625rem; }

/* ── facts and sources: the closing block ────────────────────────────────── */

.end .facts { margin-top: 24px; }
/* Key dates: the page's one boxed band, open; two columns from 960 when long. */
.dates-band { padding: 32px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
@media (min-width: 45em) { .dates-band { padding: 40px 48px; } }
.dates-band .timeline { margin-top: 24px; max-width: none; }
@media (min-width: 60em) {
  .timeline-2 { columns: 2; column-gap: 48px; border-top: 0; }
  .timeline-2 .tl-row { break-inside: avoid; border-top: 1px solid var(--line); border-bottom: 0; }
}
.end .conn-h { margin-top: 40px; }

/* ── sources ─────────────────────────────────────────────────────────────── */

/* A dated or reviewed note (standard 10, callouts): a muted-2 rule, no box. */
.callout { margin-top: 32px; padding: 4px 0 4px 24px; border-left: 3px solid var(--muted-2); border-radius: 0; }
.callout-head { color: var(--muted); }
.callout p:not(.callout-head) { margin-top: 12px; font-size: 1.0625rem; }

.srcs { margin-top: 12px; border-top: 1px solid var(--line); max-width: 52rem; }
.src { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0 12px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: .9375rem; line-height: 1.5; color: var(--muted); }
.src p { font-size: .9375rem; }
.src a { overflow-wrap: anywhere; }
/* Open, quiet, two columns from 960: citation links jump here. */
@media (min-width: 60em) {
  .srcs { max-width: none; columns: 2; column-gap: 48px; border-top: 0; }
  .src { break-inside: avoid; border-top: 1px solid var(--line); border-bottom: 0; }
}
.src-n { color: var(--muted-2); padding-top: 2px; }
.src-meta { color: var(--muted-2); }
.src:target { background: var(--surface); }

/* ── indexes ─────────────────────────────────────────────────────────────── */

.idx-h { margin-top: 56px; color: var(--muted); font-family: var(--mono); }
.idx { margin-top: 16px; border-top: 1px solid var(--line-2); display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 48px; }
@media (min-width: 60em) { .idx { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.idx-row { padding: 16px 0; border-bottom: 1px solid var(--line); }
.idx-name { display: inline-flex; align-items: center; min-height: var(--tap); margin-block: -8px; font-size: clamp(1.25rem, 1.2rem + .2vw, 1.375rem); line-height: 1.3; }
.idx-row p { margin-top: 4px; font-size: 1.0625rem; }

/* ── home ──────────────────────────────────────────────────────────────────
   Content before process: six ways in, real connections, every index, then
   the family, quieter, at the end. */

.home-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); }
.hero-inner { position: relative; padding-block: clamp(3rem, 2rem + 5vw, 4.75rem); }
.hero-copy { position: relative; z-index: 1; max-width: 40rem; }
.home-hero .display { margin-top: 20px; }
.home-hero .lead { max-width: 34rem; }
/* The eyebrow in beats, as the corporate site's: the last beat in brass. */
.beats { display: flex; flex-wrap: wrap; gap: 4px .9em; }
.beats > span { white-space: nowrap; }
.beat-dot { margin-left: .9em; color: var(--muted-2); }
.beat-accent { color: var(--text); }
.actions { display: grid; gap: 12px; max-width: 22rem; margin-top: 32px; }
@media (min-width: 45em) { .actions { display: flex; flex-wrap: wrap; max-width: none; } }
/* The network, drawn from the data, sits off the right edge like the
   corporate site's dial; on phones it is left out. */
.hero-net { display: none; }
/* From 960 the hero is two columns inside the page measure: the words, then
   the network drawn from the data, with the six stories' starts named. */
@media (min-width: 60em) {
  .hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) 460px; align-items: center; gap: 32px; }
  .hero-net { display: block; width: 460px; height: auto; }
}

/* Six ways in: bordered cards on the surface, three across from 960. The
   lead page is the card's title; two more ways in sit under its sentence. */
.ways { margin-top: 32px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 45em) { .ways { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60em) { .ways { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.way { display: flex; flex-direction: column; padding: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.way-title { font-size: clamp(1.25rem, 1.2rem + .2vw, 1.375rem); line-height: 1.3; color: var(--text); }
.way-start { margin-top: 12px; }
.way-start a { display: inline-flex; align-items: center; min-height: var(--tap); font-size: 1.0625rem; }
.way-text { margin-top: 8px; font-size: 1.0625rem; line-height: 1.5; }
.way-more { margin-top: 16px; padding-top: 16px; display: flex; flex-wrap: wrap; column-gap: 24px; border-top: 1px solid var(--line); }
.way-text + .way-more { margin-top: 16px; }
.way-more a { display: inline-flex; align-items: center; min-height: var(--tap); font-size: 1.0625rem; }

/* Follow a connection: each path is a rail of stops, read top to bottom. A
   stop is a page; between two stops, the connection's name in mono capitals. */
.paths { margin-top: 32px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px 48px; }
@media (min-width: 45em) { .paths { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60em) { .paths { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.path-key { font: 500 .875rem/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.path-steps { position: relative; margin-top: 20px; }
.path-steps::before { content: ""; position: absolute; left: 5px; top: 18px; bottom: 26px; border-left: 1px solid var(--line-2); }
.node { position: relative; padding-left: 28px; }
.node::before { content: ""; position: absolute; left: 0; top: 13px; width: 11px; height: 11px; border-radius: 50%; background: var(--ink); border: 1px solid var(--muted-2); }
.node:first-child::before { background: var(--brass-dim); border-color: var(--brass-dim); }
.node-name { display: inline-flex; align-items: center; min-height: var(--tap); margin-block: -4px; font-size: clamp(1.1875rem, 1.15rem + .15vw, 1.25rem); line-height: 1.3; }
.node-kind { display: block; font-size: .9375rem; color: var(--muted); }
.edge { display: block; padding: 12px 0 14px; font: 500 .875rem/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }

/* Browse everything: the five indexes with their counts, 48px each. */
.browse { margin-top: 24px; max-width: none; display: flex; flex-wrap: wrap; gap: 8px 32px; }
.browse-link { display: inline-flex; align-items: baseline; gap: 10px; min-height: var(--tap); padding-top: 10px; font-size: clamp(1.25rem, 1.2rem + .2vw, 1.375rem); }
.browse-n { font: 500 .875rem/1 var(--mono); letter-spacing: .12em; color: var(--muted); }

/* The family at the end of Home: smaller rhythm, no cards, no buttons. */
.section-quiet { padding-block: clamp(3rem, 2rem + 3vw, 4rem); }
.family-compact > .eyebrow { max-width: none; }
.fam { margin-top: 24px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px 40px; }
@media (min-width: 45em) { .fam { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 60em) { .fam { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fam-item { display: flex; flex-direction: column; align-items: flex-start; }
.fam-text { margin-top: 12px; font-size: 1.0625rem; line-height: 1.5; }
.fam-link { display: inline-flex; align-items: center; min-height: var(--tap); font-size: 1.0625rem; }
/* The card's links, one to a row (the four columns are too narrow for one
   line, and a wrapped line leaves a stray dot): App Store then the site, or
   the site then the status. The dot is for screen readers only. */
.fam-links { margin-top: 4px; display: flex; flex-direction: column; align-items: flex-start; }
.fam-sep { display: none; }
.fam-status { font-size: 1.0625rem; color: var(--muted); }

.band { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px 64px; }
@media (min-width: 60em) { .band { grid-template-columns: 5fr 6fr; } }
.band h2 { max-width: 13em; }
.band p + p { margin-top: 16px; }

/* ── document pages (About, How it is written) ───────────────────────────── */

.doc { max-width: 44rem; }
.doc h2 { max-width: none; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); }
.doc p { margin-top: 16px; }
.doc h3 { margin-top: 32px; }
.doc h3 + p { margin-top: 8px; }
.doc ul { margin-top: 16px; padding-left: 1.3em; list-style: disc; }
.doc li { margin-top: 8px; }
.doc li::marker { color: var(--brass-dim); }
.doc strong { color: var(--text); font-weight: 600; }
.doc .lead { max-width: none; }
.doc .ethos .eyebrow { margin-top: 64px; }
.doc .ethos h2 { margin-top: 16px; padding-top: 0; border-top: 0; }
.doc .ethos .line { margin-top: 32px; color: var(--text); }

/* ── the family panel (Insurance site) ───────────────────────────────────── */

.family { margin-top: 48px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.family > .eyebrow { max-width: none; margin: 0; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.promos { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 60em) { .promos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .promo:nth-child(even) { border-left: 1px solid var(--line); } .promo:nth-child(n+3) { border-top: 1px solid var(--line); } }
.promo { padding: 24px; display: flex; flex-direction: column; align-items: flex-start; }
.promo + .promo { border-top: 1px solid var(--line); }
@media (min-width: 60em) { .promo:nth-child(2) { border-top: 0; } }
.promo-mark { display: inline-block; text-decoration: none; }
.promo-text { margin-top: 16px; font-size: 1.0625rem; }
.promo-facts {
  display: flex; flex-wrap: wrap; column-gap: .5em;
  margin-top: 12px;
  font: 500 .875rem/1.3 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.promo-facts span { white-space: nowrap; }
.promo .btn { margin-top: auto; }
.promo-facts + .btn, .promo-text + .btn { margin-top: 20px; }
.store-badge { margin-top: 8px; }
.store-badge a { display: inline-block; padding: 12px 12px 12px 0; }
.store-badge img { display: block; height: 48px; width: auto; }
.store-badge + .btn { margin-top: 8px; }

/* ── footer (Media site) ─────────────────────────────────────────────────── */

.foot { border-top: 1px solid var(--line); padding-block: 48px; background: var(--surface); }
.foot-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 24px 48px; }
.foot-tag { margin-top: 16px; font-size: 1.0625rem; color: var(--prose); }
.foot-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; max-width: 36rem; }
@media (min-width: 45em) { .foot-links { grid-template-columns: repeat(3, auto); } }
.foot-links a { display: inline-flex; align-items: center; min-height: var(--tap); font-size: 1.0625rem; text-decoration: none; }
.foot-links a:hover { text-decoration: underline; text-decoration-color: var(--brass); }
.foot-base {
  margin-top: 32px; padding-top: 24px;
  border-top: 1px solid var(--line);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 48px;
  font-size: .9375rem; line-height: 1.6;
}
@media (min-width: 60em) { .foot-base { grid-template-columns: 1fr 1fr; } }
.foot-base p { max-width: 34rem; }

/* ── utilities ───────────────────────────────────────────────────────────── */

.mt2 { margin-top: 16px; }
.mt3 { margin-top: 24px; }
.mt4 { margin-top: 32px; }
.mt5 { margin-top: 48px; }
.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; }

/* ── figures: a picture that teaches something, with its credit ──────────────
   At most a few per page, never a gallery. The caption says what it shows;
   the credit line says whose it is and under what licence. A drawing from a
   printed document keeps its own paper (standard 10, pictures of documents). */

.fig { margin: 40px 0; max-width: 52rem; }
/* A photograph sits at the text column's width; a drawing may use the wider measure. */
.fig-photograph { max-width: var(--measure); }
.fig img { width: 100%; height: auto; border: 1px solid var(--line-2); border-radius: var(--r); }
.fig-drawing img { background: #FFFFFF; padding: clamp(8px, 2vw, 24px); }
.fig figcaption { margin-top: 12px; max-width: var(--measure); font-size: .9375rem; line-height: 1.6; color: var(--prose); }
.fig-credit { display: block; margin-top: 6px; color: var(--muted-2); }
.fig-credit a { color: var(--muted-2); text-decoration-color: var(--line-2); }
.fig-credit a:hover { color: var(--text); }
/* The source line's order of reading (2026-11-12): the link to the full
   original is the brightest thing in it; "Cropped here." is a quiet editorial
   aside in italic; the original's size and the licence stay in the credit's own
   muted colour. Type stays at the caption's 15px. */
.fig-credit a.fig-orig { color: var(--prose); text-decoration-color: var(--muted-2); white-space: nowrap; }
.fig-credit a.fig-orig:hover { color: var(--text); }
.fig-cropped { font-style: italic; }
.fig-px { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ── a chart drawn from the page's own figures ───────────────────────────── */

.chart { margin: 40px 0; padding: 24px; max-width: 52rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.chart-title { font-family: var(--mono); font-size: .875rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; line-height: 1.3; color: var(--muted); }
.bars { margin-top: 20px; display: grid; gap: 16px; }
.bar-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label value" "bar bar"; gap: 6px 16px; align-items: baseline; }
@media (min-width: 45em) { .bar-row { grid-template-columns: 14rem minmax(0, 1fr) 7.5rem; grid-template-areas: "label bar value"; align-items: center; } }
.bar-label { grid-area: label; font-size: 1.0625rem; color: var(--text); }
.bar { grid-area: bar; width: 100%; height: 12px; }
.bar-fill { fill: var(--muted-2); fill-opacity: .55; }
.bar { overflow: visible; }
.bar-base { stroke: var(--brass); stroke-width: 2; }
.bar-value { grid-area: value; font-family: var(--mono); font-size: .9375rem; color: var(--text); text-align: right; white-space: nowrap; }
.chart figcaption { margin-top: 20px; font-size: .9375rem; line-height: 1.6; color: var(--prose); max-width: var(--measure); }

/* ── the page's drawing: the plate, always in the head ───────────────────────
   Maps and brand and people lifelines in the right column, 60/40 from 960,
   as the corporate home page sets its dial beside its words. Group trees and
   subject lanes full width under the key facts. No box either way. */

.drawing { margin: 0; }
.drawing img { width: 100%; height: auto; }
.drawing figcaption { margin-top: 12px; max-width: var(--measure); font-size: .9375rem; line-height: 1.5; color: var(--muted); }
.drawing-hero, .drawing-full { margin-top: 32px; }
@media (min-width: 45em) { .drawing-full { margin-top: 48px; } }
@media (max-width: 44.99em) { .drawing-tall { display: none; } }
/* On a phone the plate follows the key facts at its drawn size (335 wide, the
   phone column), never shrunk: shrinking would take its 14px type below 14px. */
.drawing-hero img { width: auto; max-width: 100%; }
@media (min-width: 60em) {
  .head-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 48px; align-items: start; }
  .drawing-hero { margin-top: 0; }
  .drawing-hero img { width: 100%; max-height: 460px; object-fit: contain; object-position: left top; }
  .has-art .lead { max-width: 34rem; }
}

/* ── a group's brands: the family ledger (standard 4.8) ──────────────────── */

.ledger { width: 100%; max-width: 60rem; margin-top: 24px; border-collapse: collapse; font-size: 1.0625rem; }
.ledger thead th { font: 500 .875rem/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); text-align: left; padding: 0 16px 12px 0; border-bottom: 1px solid var(--line-2); }
.ledger tbody th, .ledger td { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--line); vertical-align: baseline; text-align: left; }
.ledger tbody th { font-weight: 400; white-space: nowrap; font-size: clamp(1.1875rem, 1.15rem + .15vw, 1.25rem); }
.ledger td:nth-child(2) { font-family: var(--mono); font-size: .9375rem; color: var(--muted); white-space: nowrap; }
.ledger td:last-child { color: var(--prose); }
@media (max-width: 44.99em) {
  .ledger thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .ledger tr { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); }
  .ledger tbody th, .ledger td { display: block; padding: 2px 0; border: 0; white-space: normal; }
}

/* ── "On this page": a jump bar on long pages (standard 10). One row; it
   scrolls sideways inside itself when it does not fit. Not sticky: the
   72px masthead already sticks, and the two together would pass 100px. */
.jump { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
/* The fade shows at every width (design review 2026-11-11, item 3). The
   bar's own end padding is as wide as the fade, so a bar that fits is never
   faded and the last label scrolls clear of it. */
.jump-in { display: flex; gap: 4px 24px; overflow-x: auto; scrollbar-width: none; padding-right: 48px; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
.jump-in::-webkit-scrollbar { display: none; }
.jump a { display: flex; align-items: center; min-height: var(--tap); white-space: nowrap; font: 500 .875rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); text-decoration: none; }
.jump a:hover { color: var(--text); }

/* Index rows: the name, then a quiet line of founding year and town or life dates. */
.idx-meta { display: block; margin-top: 2px; font: 500 .875rem/1.4 var(--mono); letter-spacing: .08em; color: var(--muted); }

/* The mark after a link that leaves the site (standard 4.5's one exception). */
.ext-mark { display: inline-block; width: .62em; height: .62em; margin-left: .3em; vertical-align: .05em; opacity: .8; }

/* ── pictures (media review 2026-11-11) ──────────────────────────────────────
   Shown as made: their own colour and ground, a line-2 hairline and the 3px
   radius, nothing else. An upright picture is held narrower than the measure. */
.fig-tall, .fig-rail { max-width: 25rem; }
/* An upright picture that stays in the text column sits at the column's left
   edge, under its paragraph, no wider than a portrait needs. */

/* A person's portrait, above the lifeline in the head's right column; on a
   phone after the key facts, small enough that the h1 stays on screen. */
.head-art { display: grid; gap: 32px; align-content: start; }
.portrait { margin: 32px 0 0; }
.portrait img { display: block; width: 200px; height: auto; border: 1px solid var(--line-2); border-radius: var(--r); }
.portrait figcaption { margin-top: 12px; max-width: 26rem; font-size: .9375rem; line-height: 1.5; color: var(--prose); }
.head-art .drawing-hero { margin-top: 0; }
@media (min-width: 60em) {
  .portrait { margin-top: 0; }
  .portrait img { width: 240px; }
}

/* A Moment: the watch that made a date, inside its Key dates row. */
.moment { margin: 16px 0 4px; }
.moment img { display: block; width: 100%; max-width: 360px; height: auto; border: 1px solid var(--line-2); border-radius: var(--r); }
.moment figcaption { margin-top: 10px; max-width: 30rem; font-size: .9375rem; line-height: 1.5; color: var(--prose); }

/* ── documentary beats (visual direction, 2026-11-11) ────────────────────────
   The opening picture: full width under the key facts, before any history.
   A wide picture runs the width of the page, past the text column. A pair sets
   two pictures side by side. Captions always keep the reading measure. */
.establish { margin: 32px 0 0; }
@media (min-width: 60em) { .head-grid > .establish { margin-top: 0; } }
.establish img { display: block; width: 100%; height: auto; border: 1px solid var(--line-2); border-radius: var(--r); }
.establish figcaption { margin-top: 12px; max-width: var(--measure); font-size: .9375rem; line-height: 1.6; color: var(--prose); }
.fig-wide { max-width: none; margin-block: 56px; }
@media (min-width: 60em) { .fig-wide { margin-block: 72px; } }
.fig-pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; margin: 56px 0; }
@media (min-width: 45em) { .fig-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.fig-pair .fig { margin: 0; max-width: none; }
.drawing-story { margin: 48px 0; max-width: var(--measure); }

/* The brands in a hub's story: one quiet line in the head (2026-11-11). */
.story-brands { margin-top: 12px; max-width: 44rem; font-size: 1.0625rem; color: var(--prose); }
.story-brands .kf-label { margin-right: .4em; }

/* Upright pictures sit beside the text from 960, in the page's right-hand
   space, instead of leaving it empty; a section clears them at its end. */
@media (min-width: 60em) {
  /* The margin rail: an upright picture beside the paragraph it illustrates,
     its top level with that paragraph's (build.mjs decides when it fits). */
  .prose .fig-rail { float: right; clear: right; width: min(22rem, calc(100% - var(--measure) - 48px)); margin: 6px 0 24px 48px; }
  .prose::after { content: ""; display: block; clear: both; }
}
.portrait figcaption .fig-credit, .moment figcaption .fig-credit, .establish figcaption .fig-credit { color: var(--muted-2); }
.fig-pair .fig-tall { max-width: none; }

/* ── architecture v2: histories, eras, the walk (2026-11-11) ─────────────── */

/* A history's head: the era above the title, the span below it in mono. */
.history-span { margin-top: 12px; font: 500 .9375rem/1.4 var(--mono); letter-spacing: .08em; color: var(--brass); }
.history-head .lead { margin-top: 20px; }
.drawing-eras { margin-top: 48px; }
.drawing-eras img { width: 100%; }

/* Numbered parts: a history is read in order. */
.part-n { font: 500 .875rem/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--brass); margin-bottom: 12px; }

/* The walk: from the whole story down into its pages, one numbered step a row. */
.walk-intro { margin-top: 12px; max-width: var(--measure); }
.walk { margin-top: 32px; border-top: 1px solid var(--line-2); max-width: 52rem; }
.walk-step { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 45em) { .walk-step { grid-template-columns: 4.5rem minmax(0, 1fr); } }
.walk-n { font: 500 1.5rem/1.2 var(--mono); color: var(--muted-2); padding-top: 4px; }
.walk-kind { font: 500 .875rem/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.walk-name { display: inline-flex; align-items: center; min-height: var(--tap); font-family: var(--serif); font-size: clamp(1.375rem, 1.3rem + .3vw, 1.625rem); line-height: 1.25; }
.walk-why { margin-top: 4px; font-size: 1.0625rem; line-height: 1.55; max-width: var(--measure); }

/* The chapters either side. */
.chapters { max-width: 52rem; }
@media (min-width: 60em) { .chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.chapter-side { padding: 16px 20px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.tile-name-plain { color: var(--muted); }
.in-histories { margin-top: 8px; }


/* Home: the histories by era, each written chapter a card with its picture. */
.lead-quiet { margin-top: 12px; max-width: var(--measure); }
.era-row { margin-top: 48px; }
.era-h { margin-top: 6px; font-size: clamp(1.25rem, 1.2rem + .3vw, 1.5rem); color: var(--text); }
.era-row .ways { margin-top: 20px; }
.way-history { padding: 0 0 24px; overflow: hidden; }
.way-history > :not(.way-img) { margin-inline: 24px; }
.way-img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; margin-bottom: 20px; border-bottom: 1px solid var(--line); }
.way-span { font: 500 .875rem/1.4 var(--mono); letter-spacing: .08em; color: var(--brass); }
.way-history .way-title { margin-top: 6px; font-family: var(--serif); font-weight: 400; font-size: clamp(1.375rem, 1.3rem + .3vw, 1.625rem); }
.way-history .way-title a { text-decoration: none; }
.way-history .way-title a:hover { text-decoration: underline; text-decoration-color: var(--brass); }

/* Home: the five eras as a band, every chapter in order (2026-11-11). */
.eras-band { margin-top: 32px; display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--line-2); }
@media (min-width: 45em) { .eras-band { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } }
@media (min-width: 60em) { .eras-band { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 24px; } }
.era-col { padding: 20px 0 24px; border-bottom: 1px solid var(--line); }
@media (min-width: 60em) { .era-col { border-bottom: 0; } }
.era-col .era-h { margin-top: 6px; font-family: var(--serif); font-weight: 400; font-size: 1.25rem; line-height: 1.25; }
.era-span { margin-top: 4px; font: 500 .875rem/1.4 var(--mono); letter-spacing: .08em; color: var(--muted); }
.era-chapters { margin-top: 8px; display: grid; font-size: 1rem; line-height: 1.35; }
.era-chapters li { display: flex; align-items: center; min-height: var(--tap); }
.era-todo-name { color: var(--muted-2); }
/* Tablet: the history cards one to a row, the picture beside the words, so
   three cards never leave an orphan in a two-column grid. */
@media (min-width: 45em) and (max-width: 59.99em) {
  .ways-histories { grid-template-columns: minmax(0, 1fr); }
  .ways-histories .way-history { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-auto-rows: min-content; column-gap: 24px; padding: 0; }
  .ways-histories .way-img { grid-row: 1 / span 5; height: 100%; aspect-ratio: auto; margin: 0; border-bottom: 0; border-right: 1px solid var(--line); }
  .ways-histories .way-history > :not(.way-img) { margin-inline: 0 24px; }
  .ways-histories .way-span { margin-top: 24px; }
  .ways-histories .way-more { margin-bottom: 24px; }
}

/* The Histories index (graphic design review, 2026-11-11): each era a
   full-width band, its head in the left third, its chapters in story order on
   the right; every rule runs the full width. */
.era { margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--line-2); }
@media (min-width: 60em) { .era { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: 48px; } }
.era-n { font: 500 .875rem/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--brass); }
.era-title { margin-top: 8px; font-size: clamp(1.75rem, 1.55rem + .6vw, 2.125rem); }
.era-intro { margin-top: 12px; }
.era-list { margin-top: 24px; border-top: 1px solid var(--line); }
@media (min-width: 60em) { .era-list { margin-top: 0; border-top: 0; } }
.ch { border-bottom: 1px solid var(--line); }
@media (min-width: 60em) { .ch:first-child { border-top: 1px solid var(--line); } }
/* A chapter still being researched: one quiet row, name, span, label. */
.ch-todo { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 16px; row-gap: 2px; padding: 12px 0; min-height: var(--tap); }
.ch-todo .ch-name { flex: 1 1 18rem; font-size: 1.0625rem; color: var(--muted-2); }
.ch-span { font: 500 .875rem/1.4 var(--mono); letter-spacing: .08em; color: var(--muted); }
.ch-flag { font: 500 .875rem/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); }
@media (min-width: 45em) { .ch-todo .ch-span { width: 8.5rem; } .ch-flag { margin-left: auto; } }
/* A written chapter: its picture, then span, title and first sentence. */
.ch-done { padding: 20px 0; }
.ch-img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--r); margin-bottom: 16px; }
@media (min-width: 45em) { .ch-done { display: grid; grid-template-columns: 15rem minmax(0, 1fr); column-gap: 24px; align-items: start; } .ch-img { margin-bottom: 0; } }
.ch-span-done { color: var(--brass); }
.ch-title { margin-top: 6px; font-family: var(--serif); font-weight: 400; font-size: clamp(1.375rem, 1.3rem + .3vw, 1.625rem); line-height: 1.25; }
.ch-title a { text-decoration: none; }
.ch-title a:hover { text-decoration: underline; text-decoration-color: var(--brass); }
.ch-text { margin-top: 8px; font-size: 1.0625rem; line-height: 1.5; }

/* A history's "In short": the whole chapter in a few plain sentences, the
   page's one boxed beat before the story (as Key dates is after it). */
.section-short { padding-block: 0; }
.short { max-width: 52rem; padding: 28px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
@media (min-width: 45em) { .short { padding: 32px 40px; } }
.short-h { font: 500 .875rem/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.short p { margin-top: 12px; font-size: clamp(1.1875rem, 1.15rem + .2vw, 1.3125rem); line-height: 1.55; color: var(--text); max-width: 44rem; }
.next-lead { margin-top: 12px; max-width: var(--measure); }

/* A card picture whose subject sits high in the frame (an illustration's `focus`). */
.way-img-top { object-position: 50% 12%; }

/* ── search (2026-11-12) ─────────────────────────────────────────────────── */

.search-head { max-width: var(--measure); }
.search-form { margin-top: 32px; }
.field {
  width: 100%; min-height: var(--tap); padding: 10px 14px;
  font: inherit; font-size: 1.125rem; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--muted-2); border-radius: var(--r);
}
.field::placeholder { color: var(--muted); }
.field:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; border-color: var(--brass); }
.field:disabled { opacity: .6; }
.state { margin-top: 24px; color: var(--muted); }
.state:empty { display: none; }
#search-results .idx-h:first-child { margin-top: 32px; }

/* ── internal-link previews (experiment/internal-link-previews, 2026-11-12) ── */
/* What lies behind a link in the reading text: kind and date, name, the first
   sentence of its summary. A quiet panel in the page's own surface, no shadow,
   placed by /js/preview.js under (or over) the link; it never takes the pointer. */
.lp {
  position: fixed; z-index: 70; width: min(340px, calc(100vw - 32px));
  padding: 14px 16px 16px;
  background: var(--surface); border: 1px solid var(--line-2); border-top: 2px solid var(--brass-dim, var(--brass));
  border-radius: var(--r); pointer-events: none;
  animation: lp-in .12s ease-out;
}
.lp[hidden] { display: none; }
.lp-kind { font: 500 .875rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.lp-name { margin-top: 6px; font-family: var(--serif); font-size: 1.125rem; line-height: 1.3; color: var(--text); }
.lp-text { margin-top: 6px; font-size: .9375rem; line-height: 1.5; color: var(--prose, var(--muted)); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
@keyframes lp-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lp { animation: none; } }
/* ── Your trail (experiment/reading-trail, 2026-11-12) ───────────────────── */
/* The pages this tab has read, between a subject's head and its page: one quiet
   line in the type of the key facts, no box. The path scrolls sideways when it
   is longer than the line, starting at its end; Clear follows the path. */
.trail-in { display: flex; align-items: center; gap: 0 16px; padding-block: 4px; }
.trail-label { flex: none; font: 500 .875rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.trail-list {
  display: flex; align-items: center; min-width: 0; flex: 0 1 auto;
  list-style: none; margin: 0; padding: 0;
  overflow-x: auto; scrollbar-width: none; white-space: nowrap;
  font-size: .9375rem; color: var(--muted);
}
.trail-list::-webkit-scrollbar { display: none; }
.trail-item { display: flex; align-items: center; flex: none; }
.trail-sep { padding-inline: 10px; color: var(--muted-2); }
.trail-link { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--muted); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 4px; }
.trail-link:hover { color: var(--text); text-decoration-color: var(--brass); }
.trail-here { color: var(--text); }
.trail-clear {
  flex: none; min-height: var(--tap); min-width: var(--tap); padding: 0 4px; margin-left: 8px;
  font: 500 .875rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); background: none; border: 0; cursor: pointer;
}
.trail-clear:hover { color: var(--text); }
/* On a phone the label sits above the path, so the path keeps the width. */
@media (max-width: 39.99em) {
  .trail-in { flex-wrap: wrap; padding-top: 12px; }
  .trail-label { order: 0; }
  .trail-clear { order: 1; margin-left: auto; }
  /* It opens at its end, the page being read; the fade at the start says there is more. */
  .trail-list { order: 2; flex-basis: 100%; padding-left: 24px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px); mask-image: linear-gradient(90deg, transparent, #000 32px); }
}