/* site.css — the standardized component layer. One source of truth that conforms
   the inner (editorial) pages to the index (v4) system. Linked AFTER each page's
   inline <style> so it wins the cascade at equal specificity. Leans on each page's
   custom properties (--surface, --hairline, --accent, --pass, --fail, etc.). */

/* content width → a happy medium between the door's 72rem hero and the old
   44rem reading column. The door (72rem) is unchanged — it doesn't link this.
   Reading measure widened a touch so body text fills the roomier column. */
:root { --measure: 42rem; }

/* The palette now lives in assets/palette.css — linked BEFORE this file on
   every page, and by the door too, so tokens have one home. */

.topbar { max-width: 54rem; }
main { max-width: 54rem; }

/* a light full-width rule closes the header block — eyebrow, head, hero lede.
   Scoped to the lede that directly follows the h1 so it fires once per page. */
h1 + .lede::after, .hero-rule::after { content: ""; display: block; position: relative;
  left: calc(50% - 50vw); width: 100vw; height: 1px;
  background: var(--divider); margin-top: 2.2rem; }

/* nav: Cases carries a submenu. CSS only — :focus-within keeps it keyboard
   reachable, and with no JS there is nothing here a reader cannot inspect. */
.navwrap { position: relative; display: inline-block; }
.navsub { position: absolute; top: 100%; left: -0.6rem; display: none; min-width: 9.5rem;
  background: var(--bg-alt); border: 1px solid var(--hairline); border-radius: 8px;
  padding: 0.35rem 0; z-index: 20;
  box-shadow: 0 1px 2px rgba(42,33,24,0.05), 0 12px 28px -14px rgba(42,33,24,0.22); }
.navwrap:hover .navsub, .navwrap:focus-within .navsub { display: block; }
/* .topbar nav a is (0,1,2) and carries margin:-0.7rem -0.4rem — it beat a bare
   .navsub a and dragged these items off their own padding. Match its weight. */
.topbar nav .navsub a { display: block; padding: 0.55rem 1.1rem; margin: 0;
  white-space: nowrap; font-size: 0.85rem; }
.topbar nav .navsub a:hover { background: var(--chip); }
.navsub .navsub-all { border-bottom: 1px solid var(--hairline); }
@media (max-width: 640px) {
  .navsub { position: static; display: block; border: none; box-shadow: none;
    background: none; padding: 0 0 0 0.9rem; min-width: 0; }
}

/* exhibit cards → the index card language: r16 + elevation.
   The green/red verdict border-top is kept — it is semantic, not decorative. */
.card { border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16,24,40,0.04), 0 20px 40px -18px rgba(16,24,40,0.12); }

/* footer → the index footer (mailto + engraving + plate), standardized across
   the inner pages. Sized to the 44rem inner content column. */
/* 8vh left 72px of dead air under the last line and grew on tall screens.
   Fixed 3rem sits close to the door's colophon and stops scaling away. */
footer { max-width: 54rem; margin: 0 auto; padding: 2rem 2rem 3rem; font-size: 0.85rem; color: var(--muted); }
footer a { color: var(--accent); text-underline-offset: 3px; }
footer .engraving { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--hairline); display: grid; gap: 0.45rem; }
footer .engraving p { font-size: 0.8rem; line-height: 1.6; color: var(--muted); overflow-wrap: anywhere; }
footer .engraving .lbl { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-right: 0.5rem; }
footer .plate { margin-top: 1.6rem; padding-top: 1.4rem; border-top: 1px solid var(--hairline); font-size: 0.78rem; color: var(--muted); line-height: 1.6; max-width: 54rem; }
footer .copyright { margin-top: 1rem; font-size: 0.75rem; color: var(--muted); text-align: left; }

/* chrome: masthead and footer are full-width terracotta, bookending every page
   exactly as the door does. isolation:isolate keeps z-index:-1 inside each
   element so the band sits behind its own text and above nothing else. */
html { background: var(--terra); }
body { overflow-x: clip; }   /* the 100vw bands must not open a scrollbar */

.topbar { position: relative; isolation: isolate; padding-bottom: 1.5rem; }
.topbar::before { content: ""; position: absolute; top: 0; bottom: 0;
  left: calc(50% - 50vw); width: 100vw; background: var(--terra); z-index: -1; }
.topbar .wordmark { color: var(--bg); }
.topbar nav a { color: rgba(243,234,214,0.80); }
.topbar nav a:hover { color: var(--bg); }
.topbar nav a[aria-current] { color: var(--bg); }

/* full cream, no alpha: cream at 0.88 composites over terracotta to ~3.5:1 and
   misses AA. Opaque clears at 4.76:1. */
footer { position: relative; isolation: isolate; color: var(--bg); }
footer::before { content: ""; position: absolute; top: 0; bottom: 0;
  left: calc(50% - 50vw); width: 100vw; background: var(--terra); z-index: -1; }
footer a, footer .engraving .lbl { color: var(--bg); }
footer .engraving, footer .plate { border-top-color: rgba(243,234,214,0.22); }
footer .engraving p, footer .plate, footer .copyright { color: var(--bg); }

/* ── header parity with Home (2026-08-10) ─────────────────────────────────
   The door defines the reference band inline; inner pages match it here:
   same height, same wordmark scale, same nav metrics, and a submenu whose
   items are legible on the cream panel (they inherited the bar's cream and
   vanished — caught by the owner on the live site). */
.topbar { padding: 1.1rem 2rem; }
.topbar .wordmark { font-size: 1.22rem; gap: 0.55rem; }
.wordmark-mark, .topbar .wordmark svg { width: 1.6rem; height: 1.6rem; }
.topbar nav { gap: 1.5rem; font-size: 0.875rem; row-gap: 0.5rem; }
.topbar nav a { padding: 0.5rem 0.3rem; margin: -0.5rem -0.3rem; }
.topbar nav .navsub a { color: var(--rust); }
.topbar nav .navsub a:hover { background: var(--chip); color: var(--rust);
  text-decoration: none; }
.navsub { background: var(--paper-deep); border-color: var(--rule); }

/* Diagram SVGs: never clip label text — font engines measure differently
   (Safari's metrics run wider than the viewBox margins tuned in Chrome).
   The viewBoxes carry real margin; this is the renderer-proof net. */
figure svg { overflow: visible; }