/* ── design-2027 shared base ──
   Extracted 2026-08-04 from what had drifted into 7 separately-maintained
   <style> blocks. Only rules verified byte-identical (or safely
   parameterizable) across every page live here — see the git history for
   the verification pass. Family-specific values (--rule, --faint, the
   runhead's horizontal padding) stay local to each page as small :root
   overrides layered after this file; they are real, deliberate differences
   between the front-matter pages (index/stories/about/catalogue) and the
   plate/ledger pages (D-record-page/F-record-composite/register-of-loss),
   not accidents to paper over.

   Within the front-matter family, `.mast h1` (each page defines its own —
   not shared here, since font-size is the one thing that's supposed to
   differ) has two deliberate tiers, confirmed 2026-08-07: index.html and
   catalogue.html are the site's two front doors (homepage, full catalogue);
   stories/working-history/about are chapter pages underneath and get
   clamp(30px,6.4vw,64px) at line-height:.9. A stray .86 on catalogue.html
   was unintentional drift, not a third tier, and was corrected to match.

   The front-door tier was re-cut as DISPLAY type later the same day:
   clamp(30px,8.8vw,144px) at line-height:.84, letter-spacing:-.035em —
   see the annotated rule in index.html for the measurements behind those
   three numbers.

   RESOLVED 2026-08-07, and the answer reframed the tiers. The worry was
   that 144/64 widened the ratio to 2.25x. Measuring the real driver —
   font-size as a fraction of each page's OWN measure — showed the tiers
   were never the problem:

     front doors      9.7%   (127px on a 1312px measure at 1440)
     stories, about   8.3%   (64px on 772px)
     working-history  6.5%   (64px on 985px)  ← the actual outlier

   Front doors sitting a little above the chapter pages is correct: a
   title page outranks a chapter opener. The real defect was that the
   chapter tier was expressed as ONE ABSOLUTE PX VALUE across pages with
   different measures (900px wrap for stories/about, 1100px for
   working-history), so working-history's title was proportionally the
   smallest on the site. Fixed by raising that page alone to 80px (8.1%).

   The rule going forward: chapter titles target ~8% of their own measure.
   Do not "unify" them back to a shared px value — that reintroduces the
   bug. Fill percentage is NOT the metric to use here; chapter titles are
   short strings ("The Stories" is 11 characters and reaches only 33% of
   its measure at 64px), so optimising for fill would size them absurdly.
*/

/* ── motion scale ──────────────────────────────────────────────────────────
   Three durations, three curves, one rule for choosing between them:
   THE TRIGGER DECIDES, NOT THE PROPERTY. The same transform is `ink` when a
   pointer causes it and `paper` when the content causes it.

     ink    120ms  direct input — hover, focus, active, drag, zoom. The
                   response to a finger. Must feel like no delay at all.
     paper  400ms  content arriving or answering a query — rows settling,
                   crop marks converging, a filtered field resolving. Weight,
                   then a long quiet settle (that's the .16,1,.3,1 curve).
     press  520ms  the document itself changing — the cross-document view
                   transition. Symmetric in and out, like a sheet being
                   turned rather than snatched.

   Before this existed the site used SEVEN durations (.2 .25 .3 .35 .4 .42 .5)
   and three unrelated curves, each picked ad hoc in a different session. No
   individual value was wrong; having seven of them was. Consolidated
   2026-08-07. If a new value seems necessary, the interaction is probably in
   the wrong category — check the trigger before adding a fourth token.

   Note the -dur/-ease suffixes: --ink and --paper are already COLOUR tokens
   below, and must not be shadowed. */
:root{
  --ink-dur:120ms;   --ink-ease:cubic-bezier(.2,0,.4,1);
  --paper-dur:400ms; --paper-ease:cubic-bezier(.16,1,.3,1);
  --press-dur:520ms; --press-ease:cubic-bezier(.65,0,.35,1);
}

:root{
  --paper:#f4f1ea;
  --ink:#111010;
  --red:#c8102e;
  --grey:#6d6a64;
  /* Front-matter pages get horizontal padding from their .wrap container,
     so the runhead needs none of its own. Plate/ledger pages have no such
     wrapper and self-pad — they override this one variable, nothing else. */
  --runhead-px: 0px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-font-smoothing:antialiased}
body{
  background:var(--paper);color:var(--ink);
  font-family:'Iowan Old Style','Palatino Linotype',Palatino,Georgia,serif;
  line-height:1.5;
  background-image:repeating-linear-gradient(0deg,rgba(17,16,16,.017) 0 1px,transparent 1px 3px);
}
a{color:inherit}
/* Screen-reader-only. Found duplicated as an identical inline style on the
   search label in catalogue.html and E-scale-test.html during the same
   inline-style sweep that fixed the nav — same failure mode, standard fix:
   a real utility class instead of copy-pasted CSS. */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden}
.mono{
  font-family:ui-monospace,'SF Mono',Menlo,monospace;
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase
}

/* ── running head: one component, one set of rules, used by all 7 pages ──
   border always uses --ink (identical #111010 in every page, verified) so
   no family override is ever needed for it — only --runhead-px varies. */
.runhead{
  border-bottom:1px solid var(--ink);padding:14px var(--runhead-px);
  display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap
}
.runhead .who{font-style:italic;font-size:15px}
/* The small "· The Museum" sub-label inside .who. Same anti-pattern as the
   nav rule above, found in the same sweep: 6 pages fully duplicated this as
   an inline style (10px/.19em), 3 pages used the .mono utility class plus
   an inline color override (9.5px/.2em) — a third, slightly different value
   set for the same visual role. One class, one rule, matches .mono's values
   since that was the more-consolidated of the two prior approaches. */
.runhead .who .imprint{
  font-family:ui-monospace,'SF Mono',Menlo,monospace;
  font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--grey)
}
/* Typography lives HERE, not as a per-page inline style="" — it was, until
   2026-08-07, duplicated across 7 pages (some also drifting to the .mono
   utility's slightly different 9.5px/.2em instead of this rule's 10px/.19em).
   That wasn't just repetition: an inline style's specificity (1,0,0,0) beats
   ANY class selector, including the max-width:520px override two rules
   down — so on every page still using the inline copy, the "shrink nav text
   at narrow widths" rule below was silently dead. Confirmed at runtime: at
   490px viewport, computed font-size stayed 10px (should drop to 8.5px) on
   pages with the inline style, and correctly hit 8.5px on the 3 pages that
   were instead using the shared .mono class. One rule, cascade untouched by
   any inline specificity in the way, breakpoints simply work now. */
.runhead .nav{
  display:flex;gap:22px;color:var(--grey);
  font-family:ui-monospace,'SF Mono',Menlo,monospace;
  font-size:10px;letter-spacing:.19em;text-transform:uppercase
}
/* Padding grows the tap target to ~44px without enlarging the visible
   text or shifting baseline alignment with .who — the negative margin
   cancels the padding's effect on the flex row's own layout/gap spacing. */
.runhead .nav a{text-decoration:none;transition:color var(--ink-dur) var(--ink-ease);padding:15px 4px;margin:-15px -4px}
.runhead .nav a:hover{color:var(--red)}
.runhead .nav a:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.runhead .nav a.active{color:var(--red)}
@media(max-width:520px){
  .runhead{gap:8px;padding:12px var(--runhead-px)}
  .runhead .who{font-size:13px}
  .runhead .nav{gap:12px;font-size:8.5px;letter-spacing:.15em}
}
@media(max-width:380px){
  .runhead{flex-direction:column;align-items:flex-start;gap:6px}
  .runhead .who{font-size:12px}
  .runhead .nav{order:3;width:100%;font-size:8px;gap:8px;flex-wrap:wrap;row-gap:6px}
}

/* ── error state: for D-record-page.html / F-record-composite.html when a
   fetch fails or ?id= is missing/invalid. Replaces main.plate-wrap's content
   only — the runhead above it, outside <main>, is never touched, so
   navigation survives every failure mode instead of the whole page going
   blank. Deliberately quiet: no alert-red panic box, just the same
   restrained voice as every other page. */
.error-state{
  max-width:60ch;margin:0 auto;padding:clamp(60px,10vw,120px) clamp(16px,3.4vw,48px);
  text-align:center
}
.error-state h1{
  font-size:clamp(24px,3.5vw,32px);font-weight:400;font-style:italic;
  letter-spacing:-.018em;margin-bottom:16px
}
.error-state p{font-size:16px;line-height:1.6;color:var(--grey);margin-bottom:28px}
.error-state a{
  display:inline-block;padding:10px 24px;border:1px solid var(--ink);
  color:var(--ink);text-decoration:none;
  font-family:ui-monospace,'SF Mono',Menlo,monospace;
  font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  transition:all var(--ink-dur) var(--ink-ease)
}
.error-state a:hover{background:var(--ink);color:var(--paper)}
.error-state a:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* ── print: a catalogue raisonné that can actually print ──
   Motion, hover affordances, and screen-only chrome (nav, buttons, the
   full-size viewer, filter UI) have no paper analog and are suppressed.
   Everything else already reads as print — that was the whole premise of
   "The Press" — so this mostly just removes what paper can't do. */
@media print{
  @page{ margin: 1.5cm; }
  body{
    background:#fff;background-image:none;color:#000;
    font-size:11pt;line-height:1.4
  }
  .runhead,.entry-section,.search-section,nav.plates,.viewer,
  .filter-chip,.entry-btn,.mount::after,.plate-link:focus-visible{
    display:none !important
  }
  a{color:#000;text-decoration:none}
  a[href]:not([href^="#"])::after{
    content:" (" attr(href) ")";font-size:8pt;color:#555
  }
  .frame,.mount{box-shadow:none !important;border:1px solid #000 !important}
  /* On screen, width:100%;height:auto is exactly right — the page scrolls,
     so there's no such thing as "too tall". On paper there is: a real print
     test caught this at 264MB / 272 pages for what should have been ~150
     pages, because a 900x1800 plate at full print width (~7.5in) renders
     ~15in tall — taller than an entire 9.8in-usable US Letter page, so it
     bled across two-plus pages regardless of any break-inside rule (which
     can only stop a break in content that *would* fit on one page, not
     content that's inherently larger than one). Constrain by height instead
     for print specifically, so width yields to keep every plate on one page. */
  .frame img,.mount img{
    width:auto !important;height:auto !important;
    max-width:100% !important;max-height:7in !important;
    display:block;margin:0 auto
  }
  figure,.plate,section{break-inside:avoid}
  .grid{display:block !important}
  .grid figure{break-inside:avoid;margin-bottom:18pt !important;page-break-inside:avoid}
  /* Each ledger fact (e.g. "DIMENSIONS / Not recorded / One work in 1,087
     carries measurements…") is one semantic unit — a real print test caught
     this splitting mid-row, orphaning a row's explanatory note onto the next
     page while its label stayed on the one before. Same reasoning for the
     tally, position ring, and story-link blocks: small, meant to be read
     whole, never worth letting a page boundary land in the middle of. */
  dl.rows div,.tally,.pos,.story-link,.audio{break-inside:avoid;page-break-inside:avoid}
  h1,h2{break-after:avoid}
  * { animation:none !important;transition:none !important }
}