/* =============================================================================
   Life — visual system.

   Every colour is either sampled from the artwork (a gouache painting of a
   household's papers on a sunlit wooden table) or derived from a measured
   contrast failure. Every size and space comes from a scale. Nothing here is
   a value someone liked the look of.

   Two rules carry most of the design:

     PHYSICAL OBJECTS ARE SQUARE-CUT, SOFTWARE CONTROLS ARE ROUNDED. A
     photograph and a button must not share a corner radius; one is a thing
     and one is a command.

     LIGHT FALLS FROM THE UPPER RIGHT, so shadows go down and LEFT. Every
     shadow is a contact pair -- tight and dark where the object touches,
     wide and soft for the occluded light. A single blur reads as a filter.

   Measured failures this replaces: the focus ring was #F6C983 on paper at
   1.43:1 (invisible on every focusable element in the product); dark-mode
   sheets sat DARKER than the table they rested on at 1.13:1 with black
   shadows on a black ground; 16 type sizes including 10.5/12.5/13.5px; 18
   distinct spacing values; every shadow cast with x=0 against the product's
   own declared light direction.
   ============================================================================= */

:root {
  /* ---- type ---------------------------------------------------------- */
  --font-text: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino,
               "Book Antiqua", "Hoefler Text", Georgia, "Times New Roman", serif;
  --font-ui:   -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
               "Segoe UI", system-ui, Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-num:  ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono",
               "Segoe UI Mono", Menlo, Consolas, monospace;

  /* ---- space: base 4px ----------------------------------------------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;  --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;  --sp-10: 128px;
  --gutter:   clamp(16px, 4vw, 56px);
  --pad-page: clamp(48px, 8vh, 96px);
  --w-page: 1120px; --w-rail: 320px; --w-prose: 560px;

  /* ---- form ---------------------------------------------------------- */
  --r-print: 2px; --r-sheet: 4px; --r-control: 8px; --r-panel: 12px; --r-pill: 999px;
  --stroke: 1px; --focus-ring: 2px; --focus-offset: 2px; --focus-halo-width: 4px;
  --e-move: cubic-bezier(.22, 1, .36, 1);
  --e-exit: cubic-bezier(.4, 0, 1, 1);
  --e-press: cubic-bezier(.3, 0, .6, 1);
  --dur-fast: 60ms; --dur: 200ms;

  /* ---- colour: the table --------------------------------------------- */
  --table-hi: #6B4530; --table: #593A28; --table-lo: #46291B;
  --table-light: rgba(246, 201, 131, .10);
  --table-grain: rgba(255, 255, 255, .018);

  /* ---- colour: surfaces ---------------------------------------------- */
  --paper: #FBF7EF; --paper-lit: #FFFDF8; --paper-sunk: #F4E7CF; --print: #FFFFFF;

  --ink: #2B211A;          /* 14.72:1 on paper */
  --ink-2: #5A4636;        /*  8.31:1 */
  --ink-3: #6E5A45;        /*  6.12:1 */
  --ink-disabled: #94836E; /*  3.43:1 — disabled controls only, never live content */

  --on-wood: #FFF6EA;      /* 6.12:1 on the brightest table pixel */
  --on-wood-dim: #EFD6B8;  /* 4.67:1 */

  --line: #E6DAC4; --line-2: transparent; --line-group: #D8C7A8;
  --control-line: #8F7350; /* the only border that identifies a control; >=3:1 everywhere */

  --accent: #8A422C;       /* 6.79:1 on paper */
  --accent-press: #6F3421;
  --accent-wash: #F0E5DC;
  --accent-label: #FFF6EA;

  --focus: #8A422C; --focus-on-wood: #FFE0B0; --focus-halo: #FBF7EF;
  --danger: #93341C; --ok: #4B5A47;
  --scrim: rgba(43, 33, 26, .55);

  /* ---- elevation ------------------------------------------------------ */
  --e0: none;
  --e1: 0 1px 1px -1px rgba(58,36,20,.28),  -1px 2px 4px -1px  rgba(58,36,20,.16);
  --e2: 0 1px 1px -1px rgba(58,36,20,.32),  -2px 6px 12px -2px rgba(58,36,20,.20);
  --e3: 0 2px 2px -1px rgba(58,36,20,.34),  -4px 14px 28px -4px rgba(58,36,20,.24);
  --e4: 0 3px 3px -1px rgba(58,36,20,.36),  -8px 28px 56px -8px rgba(58,36,20,.30);
  --e5: 0 4px 4px -1px rgba(58,36,20,.40), -12px 48px 96px -12px rgba(58,36,20,.44);
}

/* Dark is declared twice on purpose: once for the system preference, once for an
 * explicit choice, so a chosen theme wins in BOTH directions. In dark, paper sits
 * ABOVE the table in value -- paper that catches no light is not paper -- and depth
 * comes from a lit top edge plus a real border, because a black shadow on a near-black
 * ground is arithmetically invisible. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --table-hi: #221A12; --table: #171009; --table-lo: #100B07;
  --table-light: rgba(246, 201, 131, .05); --table-grain: rgba(255,255,255,.012);
  --paper: #342B23; --paper-lit: #3D3229; --paper-sunk: #2A2119; --print: #E2D7C6;
  --ink: #F4E9D9; --ink-2: #CBB6A0; --ink-3: #B09A82; --ink-disabled: #8A7862;
  --on-wood: #F4E9D9; --on-wood-dim: #C4A98C;
  --line: #453A2D; --line-2: #5A4B3B; --line-group: #453A2D; --control-line: #8F7350;
  --accent: #E5A17A; --accent-press: #F0B692; --accent-wash: #4D3C2F; --accent-label: #2B1B10;
  --focus: #F6C983; --focus-on-wood: #F6C983; --focus-halo: #342B23;
  --danger: #F09070; --ok: #9FB18E; --scrim: rgba(8, 5, 3, .66);
  --e1: inset 0 1px 0 0 rgba(255,244,228,.055),  0 1px 2px rgba(0,0,0,.55);
  --e2: inset 0 1px 0 0 rgba(255,244,228,.070),  0 2px 5px rgba(0,0,0,.60);
  --e3: inset 0 1px 0 0 rgba(255,244,228,.090), -2px 8px 18px rgba(0,0,0,.65);
  --e4: inset 0 1px 0 0 rgba(255,244,228,.110), -4px 18px 40px rgba(0,0,0,.70);
  --e5: inset 0 1px 0 0 rgba(255,244,228,.130), -8px 36px 80px rgba(0,0,0,.78);
} }
:root[data-theme="dark"] {
  --table-hi: #221A12; --table: #171009; --table-lo: #100B07;
  --table-light: rgba(246, 201, 131, .05); --table-grain: rgba(255,255,255,.012);
  --paper: #342B23; --paper-lit: #3D3229; --paper-sunk: #2A2119; --print: #E2D7C6;
  --ink: #F4E9D9; --ink-2: #CBB6A0; --ink-3: #B09A82; --ink-disabled: #8A7862;
  --on-wood: #F4E9D9; --on-wood-dim: #C4A98C;
  --line: #453A2D; --line-2: #5A4B3B; --line-group: #453A2D; --control-line: #8F7350;
  --accent: #E5A17A; --accent-press: #F0B692; --accent-wash: #4D3C2F; --accent-label: #2B1B10;
  --focus: #F6C983; --focus-on-wood: #F6C983; --focus-halo: #342B23;
  --danger: #F09070; --ok: #9FB18E; --scrim: rgba(8, 5, 3, .66);
  --e1: inset 0 1px 0 0 rgba(255,244,228,.055),  0 1px 2px rgba(0,0,0,.55);
  --e2: inset 0 1px 0 0 rgba(255,244,228,.070),  0 2px 5px rgba(0,0,0,.60);
  --e3: inset 0 1px 0 0 rgba(255,244,228,.090), -2px 8px 18px rgba(0,0,0,.65);
  --e4: inset 0 1px 0 0 rgba(255,244,228,.110), -4px 18px 40px rgba(0,0,0,.70);
  --e5: inset 0 1px 0 0 rgba(255,244,228,.130), -8px 36px 80px rgba(0,0,0,.78);
}

* { box-sizing: border-box; }
html, body { margin: 0; }

body {
  background:
    repeating-linear-gradient(96deg, var(--table-grain) 0 2px, transparent 2px 5px),
    radial-gradient(115% 80% at 76% 2%, var(--table-light), transparent 58%),
    linear-gradient(170deg, var(--table-hi) 0%, var(--table) 52%, var(--table-lo) 100%);
  background-attachment: fixed;
  background-color: var(--table);
  color: var(--ink);
  font: 400 17px/24px var(--font-ui);
  letter-spacing: -.004em;
  min-height: 100vh;
}

button, input { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; padding: 0; text-align: left; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* One focus declaration, correct on every ground. The halo is a solid ring in the
 * surface colour between the accent ring and whatever is behind it, so contrast is
 * guaranteed against a known colour rather than against a photograph. */
:focus-visible {
  outline: var(--focus-ring) solid var(--focus);
  outline-offset: var(--focus-offset);
  box-shadow: 0 0 0 var(--focus-halo-width) var(--focus-halo);
  border-radius: inherit;
}
.on-wood, .masthead, .year-head, .back, .crumb { --focus: var(--focus-on-wood); --focus-halo: var(--table); }

.skip {
  position: fixed; top: -100px; left: var(--sp-4); z-index: 100;
  background: var(--paper); color: var(--ink);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-control); box-shadow: var(--e3);
}
.skip:focus-visible { top: var(--sp-4); }

/* ---- type roles ------------------------------------------------------- */
.t-display { font: 400 clamp(52px,6vw,88px)/0.94 var(--font-text); letter-spacing: -.022em; }
.t-1 { font: 400 34px/40px var(--font-text); letter-spacing: -.015em; margin: 0; }
.t-2 { font: 400 27px/32px var(--font-text); letter-spacing: -.012em; margin: 0; }
.t-3 { font: 400 21px/28px var(--font-text); letter-spacing: -.008em; margin: 0; }
.t-lead { font: 400 19px/30px var(--font-text); }
.t-body-s { font: 400 15px/20px var(--font-ui); }
.t-caption { font: 400 13px/18px var(--font-ui); letter-spacing: .005em; }
.t-label {
  font: 600 12px/16px var(--font-ui); letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3);
}
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.dim { color: var(--ink-2); }
.soft { color: var(--ink-3); }
.on-wood { color: var(--on-wood); }
.on-wood-dim { color: var(--on-wood-dim); }

/* ---- page scaffold ---------------------------------------------------- */
.page { max-width: var(--w-page); margin: 0 auto; padding: 0 var(--gutter) var(--sp-10); }
.masthead { padding: var(--pad-page) 0 var(--sp-6); }
.masthead .t-1 { color: var(--on-wood); max-width: 22ch; text-wrap: balance; }
/* .masthead .sub was a DESCENDANT selector while the markup emits class="masthead sub"
 * -- a compound. Nothing matched, so these paragraphs fell back to --ink on wood at
 * 1.54:1 and the product's own honesty statements were invisible in the default theme:
 * the de-duplication disclosure, and Money's "a total across kinds would be a number
 * that does not exist". One character, five pages. */
.masthead .sub, .sub { color: var(--on-wood-dim); margin: var(--sp-3) 0 0; font-size: 15px; }
.crumb { color: var(--on-wood-dim); font-size: 15px; padding: var(--sp-6) 0 var(--sp-3); }
.crumb a { color: var(--on-wood-dim); }
.crumb a:hover { color: var(--on-wood); }
.section { margin-top: var(--sp-7); }
.section > h2 { color: var(--on-wood); margin-bottom: var(--sp-4); }

/* ---- global bar ------------------------------------------------------- */
.bar {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--table) 82%, transparent);
  backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: var(--stroke) solid rgba(255,255,255,.07);
}
.bar-in {
  max-width: var(--w-page); margin: 0 auto; padding: var(--sp-2) var(--gutter);
  display: flex; align-items: center; gap: var(--sp-5);
}
.bar-mark { font: 400 21px/28px var(--font-text); color: var(--on-wood); flex: none; }
.bar-nav { display: flex; gap: var(--sp-1); flex: 1; flex-wrap: wrap; }
.bar-nav a {
  color: var(--on-wood-dim); padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-control); font-size: 15px;
  min-height: 44px; display: inline-flex; align-items: center;
}
.bar-nav a:hover { color: var(--on-wood); background: rgba(255,255,255,.07); text-decoration: none; }
.bar-nav a[aria-current="page"] { color: var(--on-wood); background: rgba(255,255,255,.12); }
.bar-ask {
  flex: none; display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 44px; padding: 0 var(--sp-4);
  background: var(--paper); color: var(--ink-2);
  border-radius: var(--r-pill); box-shadow: var(--e2);
}
.bar-ask:hover { color: var(--ink); }
.bar-ask kbd {
  font: 400 13px/18px var(--font-num);
  border: var(--stroke) solid var(--line-group); border-radius: 4px; padding: 1px 6px;
  color: var(--ink-3);
}

/* ---- surfaces --------------------------------------------------------- */
.sheet {
  background: var(--paper); border-radius: var(--r-sheet);
  border: var(--stroke) solid var(--line-2);
  padding: var(--sp-5); box-shadow: var(--e1); margin-bottom: var(--sp-6);
}
.sheet-head { display: flex; align-items: baseline; gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.sheet-head .t-2 { flex: none; }

/* ---- rows ------------------------------------------------------------- */
.rows { display: flex; flex-direction: column; }
.row {
  display: flex; align-items: center; gap: var(--sp-3);
  min-height: 44px; padding: var(--sp-3) var(--sp-3);
  border-bottom: var(--stroke) solid var(--line);
  border-radius: var(--r-control); width: 100%;
  transition: background-color 120ms linear;
}
.row:last-child { border-bottom: 0; }
.row-main { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-meta { flex: none; color: var(--ink-3); font-size: 15px; }
.row-amt { flex: none; font-variant-numeric: tabular-nums; color: var(--ink); }
.row-date { flex: none; width: 108px; color: var(--ink-3); font-size: 15px; }
button.row { cursor: pointer; }
button.row:focus-visible { outline-offset: -2px; }
/* A row whose target cannot resolve is NOT a button. Rendering a dead control is
 * worse than rendering plain text -- it promises a source and delivers a 404. */
.row.inert { cursor: default; color: var(--ink-2); }

@media (hover: hover) {
  button.row:hover { background: var(--accent-wash); }
}
button.row:active { background: var(--accent-wash); filter: brightness(.98); }

/* ---- photographic print ----------------------------------------------- */
.tile {
  flex: none; background: var(--print); padding: var(--sp-1);
  border-radius: var(--r-print); box-shadow: var(--e2);
  transition: transform 220ms var(--e-move), box-shadow 220ms var(--e-move);
}
.tile img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 1px; background: var(--paper-sunk); }
@media (hover: hover) {
  .tile:hover { transform: translateY(-4px) rotate(-.35deg); box-shadow: var(--e3); }
}
.tile:active { transform: translateY(-1px) scale(.996); box-shadow: var(--e2); transition-duration: var(--dur-fast); }
/* Held from mouseup until the next altitude paints, so a slow open is never a dead click. */
.tile.committed { transform: translateY(-4px); box-shadow: var(--e3); outline: 2px solid var(--accent); outline-offset: 2px; }

.strip {
  display: flex; gap: var(--sp-3); padding: var(--sp-2) 0 var(--sp-3);
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: thin; scrollbar-color: var(--line-group) transparent;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent);
}
.strip::-webkit-scrollbar { height: 8px; }
.strip::-webkit-scrollbar-thumb { background: var(--line-group); border-radius: var(--r-pill); }
.strip .tile { height: 156px; aspect-ratio: 3/2; scroll-snap-align: start; }
.strip .more {
  display: grid; place-items: center; text-align: center;
  background: var(--paper-sunk); border: var(--stroke) dashed var(--line-group);
  color: var(--ink-2); box-shadow: none; padding: 0 var(--sp-4);
  height: 156px; aspect-ratio: 3/2;
}
.mosaic { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: var(--sp-3); }
.mosaic .tile { width: 100%; aspect-ratio: 1; height: auto; }

/* ---- the thing -------------------------------------------------------- */
.thing { display: grid; grid-template-columns: minmax(0,1fr) var(--w-rail); gap: var(--sp-6); align-items: start; }
/* The stage reserves its box BEFORE the image decodes. Without this the FLIP measured a
 * 16px sliver -- the padding alone -- and faithfully animated that, then snapped. */
.thing-stage { aspect-ratio: var(--ar, 3/2); width: 100%; }
.thing-photo {
  width: 100%; height: 100%; display: block; object-fit: contain;
  background: var(--print); padding: var(--sp-3); border-radius: var(--r-print);
  box-shadow: var(--e4);
}
.thing-paper {
  background: var(--paper-lit); border-radius: var(--r-sheet);
  border: var(--stroke) solid var(--line-2);
  padding: clamp(24px,5vw,64px); box-shadow: var(--e4);
}
.thing-text { margin-top: var(--sp-5); white-space: pre-wrap; font: 400 19px/30px var(--font-text); max-width: var(--w-prose); }
.rail { background: var(--paper); border-radius: var(--r-sheet); border: var(--stroke) solid var(--line-2); padding: var(--sp-5); box-shadow: var(--e1); }
.fact { padding: var(--sp-3) 0; border-top: var(--stroke) solid var(--line); }
.fact:first-of-type { border-top: 0; }
.fact-v { margin-top: var(--sp-1); white-space: pre-wrap; }
.basis { color: var(--ink-3); font-size: 13px; margin-top: var(--sp-1); }

/* ---- figures (flow vs level) ------------------------------------------ */
.fig { padding: var(--sp-3) 0; border-top: var(--stroke) solid var(--line); }
.fig:first-of-type { border-top: 0; }
.fig-v { font: 400 27px/32px var(--font-text); font-variant-numeric: tabular-nums; }
.fig.level .fig-v { color: var(--ink-2); }
.warnline {
  background: var(--paper-sunk); border-left: 3px solid var(--accent);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-control);
  color: var(--ink-2); font-size: 15px; margin-top: var(--sp-3);
}

/* ---- chips / pills ---------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip {
  min-height: 44px; display: inline-flex; align-items: center;
  padding: 0 var(--sp-4); border-radius: var(--r-control);
  border: var(--stroke) solid var(--control-line); color: var(--ink-2); font-size: 15px;
}
.chip[aria-pressed="true"] { background: var(--accent-wash); border-color: var(--accent); color: var(--accent); }
@media (hover: hover) { .chip:hover { background: var(--accent-wash); } }

.year-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--sp-3); }
.year-cell {
  min-width: 52px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-control); font-size: 15px; font-variant-numeric: tabular-nums;
  background: var(--paper-sunk); color: var(--ink-2);
}
.year-cell.empty { background: transparent; border: var(--stroke) dashed var(--line-group); color: var(--ink-3); }
@media (hover: hover) { .year-cell:hover { background: var(--accent-wash); color: var(--accent); } }

.btn {
  min-height: 44px; display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 0 var(--sp-5); border-radius: var(--r-control);
  background: var(--accent); color: var(--accent-label); font-weight: 600;
  box-shadow: var(--e1); transition: background-color 120ms linear, transform 120ms var(--e-move);
}
@media (hover: hover) { .btn:hover { background: var(--accent-press); box-shadow: var(--e2); transform: translateY(-1px); } }
.btn:active { transform: translateY(0); box-shadow: var(--e0); transition-duration: var(--dur-fast); }
.btn.ghost { background: transparent; color: var(--accent); border: var(--stroke) solid var(--control-line); box-shadow: none; }
@media (hover: hover) { .btn.ghost:hover { background: var(--accent-wash); border-color: var(--accent); } }

.back { color: var(--on-wood-dim); min-height: 44px; display: inline-flex; align-items: center; }
.back:hover { color: var(--on-wood); }

/* ---- ask -------------------------------------------------------------- */
.scrim {
  position: fixed; inset: 0; z-index: 40;
  background: var(--scrim); backdrop-filter: blur(12px) saturate(1.1);
  display: flex; justify-content: center; align-items: flex-start;
  padding: min(12vh, 96px) var(--gutter) var(--sp-5);
}
.panel {
  width: min(672px, 100%); max-height: min(72vh, 680px); overflow-y: auto;
  background: var(--paper-lit); border-radius: var(--r-panel);
  border: var(--stroke) solid var(--line-2); box-shadow: var(--e5); padding: var(--sp-1);
}
.panel-head { display: flex; align-items: center; gap: var(--sp-2); padding-right: var(--sp-2); }
.ask-field {
  flex: 1; font: 400 27px/32px var(--font-text); letter-spacing: -.012em;
  padding: var(--sp-5); border: 0; background: none; color: var(--ink);
}
.ask-field::placeholder { color: var(--ink-3); }
.ask-field:focus { outline: none; }
.ask-field:focus-visible { outline: var(--focus-ring) solid var(--focus); outline-offset: -2px; border-radius: var(--r-control); }
.panel-close { width: 44px; height: 44px; display: grid; place-items: center; border-radius: var(--r-control); color: var(--ink-3); flex: none; }
@media (hover: hover) { .panel-close:hover { background: var(--accent-wash); color: var(--ink); } }
.ask-out { transition: opacity 90ms linear; }
.ask-out.stale { opacity: .35; pointer-events: none; }
.card { border-top: var(--stroke) solid var(--line); padding: var(--sp-4) var(--sp-5); }
.card h3 { font: 400 21px/28px var(--font-text); margin: 0 0 var(--sp-1); }
.card p { margin: 0 0 var(--sp-2); color: var(--ink-2); font-size: 15px; }
.headline { font: 400 clamp(28px,4vw,34px)/1.1 var(--font-text); font-variant-numeric: tabular-nums; margin: var(--sp-2) 0; }
.skel { background: var(--paper-sunk); border-radius: var(--r-control); height: 14px; margin: var(--sp-2) 0; }

/* ---- misc ------------------------------------------------------------- */
.empty { padding: var(--sp-8) 0; text-align: center; color: var(--ink-2); }
.empty .t-3 { color: var(--ink); margin-bottom: var(--sp-2); }
.booting { padding: 28vh 0; text-align: center; color: var(--on-wood-dim); font: 400 19px/30px var(--font-text); }
.err { color: var(--danger); }

@media (max-width: 860px) { .thing { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .row-date { display: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---- responsive rows -------------------------------------------------
 * At 414px an institution's NAME got 29 of the 249 pixels it needed, while
 * flex:none siblings kept "employed by", "EIN match" and "24 lines" at full width.
 * Identity must win the width; metadata drops to a second line. */
@media (max-width: 620px) {
  .row {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "main amt" "meta amt";
    align-items: baseline; gap: var(--sp-1) var(--sp-3);
  }
  .row-main { grid-area: main; white-space: normal; }
  .row-amt  { grid-area: amt; align-self: center; }
  .row-meta { grid-area: meta; font-size: 13px; }
  .row-date { grid-area: meta; display: block; width: auto; font-size: 13px; }
  /* The sticky bar was 157px -- 17.5% of the viewport -- with nav wrapped to 3 rows. */
  .bar-nav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .bar-nav::-webkit-scrollbar { display: none; }
  .bar-in { gap: var(--sp-3); }
  .bar-mark { display: none; }
}

/* A divider that curves at its ends is a rounded box pretending to be a rule. */
.row { border-radius: 0; }
button.row { border-radius: var(--r-control); }

/* Figures are drill-downs, not dead text. */
button.fig { width: 100%; cursor: pointer; }
@media (hover: hover) { button.fig:hover { background: var(--accent-wash); } }
.fig-lines { margin-top: var(--sp-2); }
.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;
}

/* ---- small screens ---------------------------------------------------
 * At 390px "Photographs" ran to x=479 on a 390px screen and the Ask pill sat on
 * top of "Papers" -- two live controls in the same pixels, one of them partly
 * off-screen. And a 374px heading inside a 308px card pushed scrollWidth to 415,
 * so the whole page scrolled sideways. */
@media (max-width: 767px) {
  .bar-in { flex-wrap: wrap; row-gap: var(--sp-2); }
  .bar-nav { order: 3; width: 100%; overflow-x: auto; flex-wrap: nowrap; min-width: 0; }
  .bar-nav a { white-space: nowrap; }
  .bar-ask { order: 2; margin-left: auto; }
  .bar-mark { order: 1; display: inline; }
}
/* Nothing may exceed its container and drag the page sideways with it. */
h1, h2, h3, .t-1, .t-2, .t-3, .headline, .row-main, .fig-v { overflow-wrap: anywhere; min-width: 0; }
.sheet, .rail, .card, .page { min-width: 0; }

/* A heading is not exempt from its container. `.sheet-head h2` rendered 374px wide at
 * left:41 in a 390px viewport -- right edge 415 -- and dragged the whole document
 * sideways. The same min-width:0 the rows already carry. */
.sheet-head { min-width: 0; flex-wrap: wrap; }
.sheet-head > * { min-width: 0; }

/* The mobile nav clipped at clientWidth 207 against scrollWidth 463, so Money, Papers
 * and Photographs were off-screen with no fade, chevron or scrollbar to say so. Two
 * rows, all five destinations, nothing hidden. */
@media (max-width: 767px) {
  .bar-nav { flex-wrap: wrap; overflow: visible; row-gap: var(--sp-1); }
  .bar-nav a { padding: var(--sp-2); min-height: 40px; font-size: 14px; }
}

/* The heading itself, not just its parent. `.sheet-head` is a flex row and its h2 is a
 * flex ITEM with `flex: none` -- so min-width:0 on the container did nothing and
 * "Moved between your own accounts" still measured 374px in a 308px card, dragging the
 * document to 415px wide on a 390px screen. A flex item's default min-width is auto;
 * it has to be told, on the item. */
.sheet-head .t-2 { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }