/* brand.css — the visual system source of truth. Spec: brand-system.md (adopted 2026-07-06).
   Direction: "public-record field guide." Linked on EVERY page by build/chrome.py +
   build/sync_chrome.py, placed AFTER each page's inline <style>, so these tokens + type migrate
   the whole site at once. Existing pages use legacy CSS-var names (--navy/--bg/--red/...); those
   are re-aliased here to the new tokens, so pages inherit the migration without per-page edits.
   Risk-tier colours live in ONE ramp (--r1..--r5) and are applied by the generators, never a
   second ramp and never hardcoded in page styles. Do not add brand hex outside this file. */
:root{
  /* surfaces + text */
  --paper:#F5F0E6; --card:#FBF8F1; --ink:#182129; --mut:#5D6A72; --line:#E4DDCD;
  --accent:#B0442C; --water:#5E7C8C;
  /* the one risk ramp: Lower / Moderate / Elevated / High / Very High */
  --r1:#DCCF9F; --r2:#B6B46B; --r3:#CE9A3C; --r4:#C0642F; --r5:#8E3322;
  /* the page cover (direction A 'ink cover', adopted 2026-07-11): the official dark page-top */
  --cover:#14242F; --cover2:#20353F; --cover-eye:#D9A94A; --cover-mut:#A3B4BD; --cover-line:rgba(245,240,230,.18);
  /* type */
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  /* spacing / radius */
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;
  --rad-chip:8px;--rad-card:13px;--rad-pill:99px;
  /* legacy aliases -> new palette (existing page styles inherit the migration through these) */
  --navy:#182129; --navy2:#243039; --bg:#F5F0E6; --red:#B0442C;
  --green:#DCCF9F; --amber:#CE9A3C;
  --green-bg:#edf3ee; --amber-bg:#f7f0df; --slate:#5D6A72; --slate-bg:#eef2f5;
}

/* base type + ground (overrides each page's inline body/heading rules because brand.css loads
   after them). System font stack is retired here; Inter/Fraunces/Plex Mono take over. */
body{font-family:var(--sans);background:var(--paper);color:var(--ink);line-height:1.55;
  font-size:15px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4,.display{font-family:var(--serif);font-weight:800;letter-spacing:-.5px;line-height:1.12}

/* the signature: every number, label, date, and source is mono. Class hooks + the common
   label classes already in the markup. Numbers in flowing prose stay in body type. */
.mono,.num,.eyebrow,.microlabel,.src,.date,.stat b,code,kbd,samp{
  font-family:var(--mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.eyebrow,.microlabel{text-transform:uppercase;letter-spacing:.16em;font-weight:600;font-size:11px;color:var(--mut)}
/* structured figures are mono (the instrument look); the risk-gauge numeral is Fraunces. td.v is
   the community glance table (distinct from the contractor record's .rec>.v names). */
td.v,.pc,.sc,.bri,.scd span,.scorerow .scd span{font-family:var(--mono);font-variant-numeric:tabular-nums}
.scd b{font-family:var(--serif);font-weight:800}

/* signature components (available site-wide; generators + refactors use them) */
.brand-card{background:var(--card);border:1px solid var(--line);border-radius:var(--rad-card);padding:var(--s5)}
.rr1{background:var(--r1);color:var(--ink)}.rr2{background:var(--r2);color:var(--ink)}
.rr3{background:var(--r3);color:var(--ink)}.rr4{background:var(--r4);color:#fff}.rr5{background:var(--r5);color:#fff}
/* links inside the dark page-top heroes (.top on communities/guides/metro) must be readable
   on navy: white + underline, never the UA default purple. */
.top a,.top a:visited{color:#fff;text-decoration:underline;text-underline-offset:2px}
.top a:hover{color:#fff;opacity:.9}
/* provenance chip: mono, uppercase, tinted pill with a 1px border (never a bare coloured dot) */
.prov{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;
  font-weight:600;text-transform:uppercase;letter-spacing:.03em;padding:3px 9px;
  border-radius:var(--rad-pill);border:1px solid var(--line);background:var(--card);color:var(--mut)}
.prov.v{color:#3e6b4e;border-color:#c2d6c6;background:#eef4ef}
.prov.w{color:#4b6172;border-color:#cbd5db;background:#eef2f5}
.prov.n{color:#8a6a2c;border-color:#e2d2a8;background:#f7f0df}

/* living-notebook / accountability layer (build/notebook.py + brand-system.md). Warm, hairline,
   mono labels; reads reported, not decorative. Blocks constrain their own width so they sit right
   whether a page centres content at 760 or 1080. */
.brc-stamp{max-width:760px;margin:var(--s6) auto 0;padding:var(--s4) 20px 0;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--mut);line-height:1.55}
.brc-stamp .eyebrow{display:block;margin-bottom:var(--s1)}
.brc-stamp p{margin:0}
.brc-stamp .date,.brc-stamp .src{color:var(--ink)}
.brc-stamp a{color:var(--mut);text-decoration:underline}
.nb{max-width:760px;margin:var(--s4) auto;padding:var(--s4) var(--s5);background:var(--card);
  border:1px solid var(--line);border-left:3px solid var(--line);border-radius:var(--rad-card);
  font-size:14px;color:var(--ink);line-height:1.55}
.nb .eyebrow{display:block;margin-bottom:var(--s2)}
.nb p{margin:0}.nb ul{margin:0;padding-left:1.15em}.nb li{margin:0 0 var(--s2)}.nb li:last-child{margin-bottom:0}
.nb-caveat{border-left-color:var(--r3)}
.nb-gaps{border-left-color:var(--mut)}
.nb-note{border-left-color:var(--accent);background:#fbf4ee}
.nb-log .date{margin-right:var(--s2);color:var(--mut)}
.nb-conf{margin:var(--s2) 0}
.nb-correct{font-family:var(--mono);font-size:12px;color:var(--accent);text-decoration:underline}

/* the stamped chrome (.bhd header) adopts brand type + palette here, at higher specificity than
   the self-contained chrome CSS, so we don't hand-sync the baked chrome in two generators. */
body header.bhd,body .bhd-wm b,body .bhd-wm span,body .bhd-nav a{font-family:var(--sans)}
body .bhd{background:rgba(251,248,241,.9);border-bottom-color:var(--line)}
body .bhd-wm b,body .bhd-nav a{color:var(--ink)}
body .bhd-nav a:hover{color:var(--accent)}

/* the page cover: ONE standardized dark page-top (brand-system.md, direction A, 2026-07-11).
   Hubs use .brc-cover; member pages will use .brc-cover.slim. The page's own .wrap sets the
   measure. Markup comes from build/chrome.py page_cover(); never hand-roll a hero again. */
.brc-cover{background:linear-gradient(180deg,var(--cover),var(--cover2));color:#F5F0E6;padding:34px 0 30px}
/* the cover owns its following gap; pages must not hand-space after it (margins collapse,
   so a first block with its own top margin does not double up) */
.brc-cover+main{margin-top:28px}
.brc-cover.slim{padding:20px 0 18px}
.brc-cover .bc-crumb{font-family:var(--mono);font-size:11px;color:var(--cover-mut);margin-bottom:10px}
.brc-cover .bc-crumb a{color:var(--cover-mut);text-decoration:none}
.brc-cover .bc-crumb a:hover{text-decoration:underline}
.brc-cover .bc-eye{font-family:var(--mono);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.18em;color:var(--cover-eye);margin-bottom:8px}
.brc-cover h1{font-family:var(--serif);font-weight:800;font-size:clamp(26px,4.5vw,38px);letter-spacing:-.5px;line-height:1.1;color:#F5F0E6;margin:0 0 10px}
.brc-cover.slim h1{font-size:clamp(22px,4vw,30px);margin-bottom:4px}
.brc-cover .bc-dek{font-size:16.5px;color:var(--cover-mut);line-height:1.55;max-width:640px;margin:0}
.brc-cover a{color:#F5F0E6;text-decoration:underline;text-underline-offset:2px}
.brc-cover .bc-meta{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:14px;font-family:var(--mono);font-size:11px;color:var(--cover-mut);text-transform:uppercase;letter-spacing:.06em}
.brc-cover .bc-meta b,.brc-cover .bc-meta a{color:#F5F0E6;font-weight:600}