@import url("https://fonts.googleapis.com/css2?family=Libre+Franklin:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500;600;700&display=swap");

@font-face{font-family:"Mildstones";src:url("/assets/Mildstones.otf") format("opentype");font-weight:400;font-display:swap}

/* ============================================================
   The Big Drop — brand.css
   Phase 1 sitewide palette + type conversion.

   Load LAST in <head>, after the builders' own <style> block:
       <link rel="stylesheet" href="/brand.css">

   Rules are prefixed `html` so they outrank the builders'
   single-class selectors without needing !important.

   Scope note: Leaflet / Folium / graph SVG internals are
   deliberately untouched. Map tiles and the power-map network
   graph keep their own colors.
   ============================================================ */

html {
  /* Brand — see CLAUDE.md. */
  --bd-paper:  #FFFFFF;   /* White — the dominant surface, cards and page alike */
  --bd-desk:   #FCF9FF;   /* Desk behind the tabloid sheets (ruling 2026-08-29) */
  --bd-black:  #000000;   /* Black — typography and structure */
  --bd-violet: #A35CFA;   /* Signal Violet — alarm only. Fills, rules and
                             figures 24px and up. Never small type on white. */
  --bd-violet-d: #7B2FD6; /* Deep Violet — the ONLY violet for small type on
                             white: eyebrows, labels, small links. 5.1:1. */
  --bd-coral:  #F25757;   /* Hover, and the contact button */
  --bd-gold:   #F2AB27;   /* Footer links, and inline link hover */
  --bd-grey:   #666666;   /* Secondary text, data labels and map layers */

  /* Derived */
  --bd-hair:   rgba(0,0,0, .16);
  --bd-panel:  rgba(0,0,0, .04);
  --bd-onblack: rgba(255, 255, 255, .86);
  --bd-onblack-dim: rgba(255, 255, 255, .68);
  --bd-onblack-hair: rgba(255, 255, 255, .22);

  /* Archivo retired 2026-08-13 (editor's ruling) — Mildstones is the display
     face. One weight (400), kerned open: letter-spacing .02em on headlines. */
  --bd-display: "Mildstones", system-ui, sans-serif;
  --bd-headline: "Mildstones", system-ui, sans-serif;
  --bd-body: "Libre Franklin", system-ui, sans-serif;
  --bd-mono: "JetBrains Mono", ui-monospace, monospace;

  /* Page tokens (editor's rulings 2026-08-11, PAGE-SPECS.md) */
  --bd-col:   920px;                  /* sitewide content column */
  --bd-h1:    clamp(28px, 4vw, 44px);
  --bd-h2:    11px;                   /* uppercase section label */
  --bd-h3:    17px;
  --bd-text:  15px;
  --bd-small: 13.5px;
  --bd-label: 11px;
  --bd-lh:    1.55;
}

/* ---------- page shell ----------
   A builder opts in by putting bd-page on its content container. The html
   prefix outranks the builder's own single-class width rule, so the 920px
   default is ENFORCED no matter what the generator writes; a page departs
   only by overriding the token with a stated reason:
       .bd-page{--bd-col:1320px}
   Do NOT add blanket h1/h2/h3 rules here — a bare element rule outranks a
   builder's class rule (it broke the eminent-domain column labels once).
   Builders reference the type tokens instead. */
html .bd-page {
  max-width: var(--bd-col);
  margin-inline: auto;
}

/* ---------- base ---------- */

html body {
  background: var(--bd-paper);
  color: var(--bd-black);
  font-family: var(--bd-display);
}

/* Tabloid fronts opt into the desk backdrop with <body class="bd-desk">;
   the class outranks the html body rule above regardless of load order. */
html body.bd-desk { background: var(--bd-desk); }

/* Special-use fonts (editor's ruling 2026-08-13): some panels opt out of
   the display face. The homepage map's layer panel reads in JetBrains Mono. */
html .leaflet-control-layers,
html .leaflet-control-layers label,
html .leaflet-control-layers-overlays label {
  font-family: var(--bd-mono);
}

html a { color: var(--bd-violet-d); }
html a:hover { color: var(--bd-coral); }

/* Inline links in running text keep the text color and carry a Signal Violet
   underline; the hover is coral (editor's ruling 2026-08-13, was gold).
   Nav, rails and buttons use the plain rule above. */
html p a, html li a, html dd a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--bd-violet);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
html p a:hover, html li a:hover, html dd a:hover {
  color: var(--bd-coral);
  text-decoration-color: var(--bd-coral);
}

/* House style: justified text manufactures rivers and widows. */
html p,
html .hero p,
html .mean-p,
html .shell p { text-align: left; text-wrap: pretty; }

/* Paragraph copy is Libre Franklin sitewide; Mildstones on display type. */
html p { font-family: var(--bd-body); }

/* ---------- shared nav bar (class name preserved for inject_nav.py) ---------- */

html .bd-nav {
  background: var(--bd-paper);
  border: 1px solid var(--bd-hair);
  border-radius: 0;
  box-shadow: none;
}
html .bd-nav .home {
  font-family: var(--bd-display);
  font-weight: 400;
  color: var(--bd-black);
  letter-spacing: .02em;
}
html .bd-nav .home b { color: var(--bd-violet-d); font-weight: 400; }
html .bd-nav a.lnk {
  font-family: var(--bd-display);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .09em;
  color: var(--bd-black);
  border-radius: 0;
}
html .bd-nav a.lnk:hover { color: var(--bd-violet-d); background: var(--bd-panel); }
html .bd-nav a.lnk.on { color: var(--bd-violet-d); font-weight: 400; }

/* ---------- page shell ---------- */

html .sechead { border-bottom: 2px solid var(--bd-black); }
html .sh-t {
  font-family: var(--bd-mono);
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--bd-black);
}
html .sh-s { font-family: var(--bd-mono); color: var(--bd-grey); }

/* ---------- hero (dark surface) ---------- */

html .hero { background: var(--bd-black); }
/* Center band dark so type reads over the hero image (editor, 2026-08-27).
   The old 90deg gradient left the CENTER at .10 alpha — the root cause of
   "the middle never gets darker": this rule outranks any page-level scrim. */
html .hero-scrim {
  background:
    linear-gradient(180deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,.73) 28%, rgba(0,0,0,.73) 74%, rgba(0,0,0,.47) 100%),
    linear-gradient(0deg,  rgba(0,0,0,.72) 0%, rgba(0,0,0,0)   42%);
}
html .hero-eyebrow i { background: var(--bd-violet); }
html .hero-eyebrow span {
  font-family: var(--bd-mono);
  font-weight: 500;
  color: var(--bd-violet);
  text-shadow: none;
}
html .hkick {
  font-family: var(--bd-display);
  font-weight: 400;
  letter-spacing: .18em;
  color: var(--bd-onblack-dim);
  text-shadow: none;
}
html .hdisp {
  font-family: var(--bd-display);
  font-weight: 400;
  letter-spacing: .02em;
  color: var(--bd-paper);
  text-shadow: 0 3px 34px rgba(0, 0, 0, .45);
}
html .hero p { color: var(--bd-onblack); text-shadow: none; font-family: var(--bd-body); }
html .hero p a { color: inherit; text-decoration-color: var(--bd-violet); }
html .hero p a:hover { color: var(--bd-gold); text-decoration-color: var(--bd-gold); }
html .byline {
  font-family: var(--bd-mono);
  color: var(--bd-onblack-dim);
  border-top: 1px solid var(--bd-onblack-hair);
  text-shadow: none;
}

/* ---------- stat row ---------- */

html .statrow {
  border-top: 1px solid var(--bd-black);
  border-bottom: 1px solid var(--bd-black);
}
html .stat { border-right: 1px solid var(--bd-hair); }
html .stat-n {
  font-family: var(--bd-display);
  font-weight: 400;
  letter-spacing: -.03em;
  color: var(--bd-black);
}
html .stat-l {
  font-family: var(--bd-mono);
  letter-spacing: .1em;
  color: var(--bd-grey);
}

/* ---------- methodology note ---------- */

html .method {
  border-left: 3px solid var(--bd-violet);
  border-top: 1px solid var(--bd-hair);
  border-right: 1px solid var(--bd-hair);
  border-bottom: 1px solid var(--bd-hair);
  background: var(--bd-panel);
}
html .method-h {
  font-family: var(--bd-mono);
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--bd-violet-d);
}

/* ---------- legend (labels only; swatch colors come from the graph data) ---------- */

html .lg { font-family: var(--bd-mono); color: var(--bd-grey); }

/* ---------- meaning / relationship cards ---------- */

html .mean-p { color: #000000; font-family: var(--bd-body); }
html .relgrid { background: var(--bd-hair); border: 1px solid var(--bd-hair); }
html .relcard { background: var(--bd-panel); }
html .rel-kick {
  font-family: var(--bd-mono);
  letter-spacing: .1em;
  color: var(--bd-grey);
}
html .rel-body { color: #000000; font-family: var(--bd-body); }
html .rel-rec {
  font-family: var(--bd-mono);
  border-top: 1px solid var(--bd-hair);
  color: var(--bd-grey);
}

/* ---------- shell-company trace (dark panel; violet = alarm, permitted here) ---------- */

html .shell { background: var(--bd-black); color: var(--bd-paper); border-radius: 0; }
/* Shell-trace accents gold (editor's ruling 2026-08-27, was violet). */
html .shell-kick { font-family: var(--bd-mono); font-weight: 700; color: var(--bd-gold); }
html .shell-rule { background: var(--bd-gold); }
html .lstep {
  font-family: var(--bd-mono);
  border: 1px solid var(--bd-onblack-hair);
  border-radius: 0;
  background: rgba(255, 255, 255, .07);
  color: var(--bd-paper);
}
html .lstep .rd { color: var(--bd-gold); }
html .lstep-arrow { color: var(--bd-onblack-dim); }
html .shell p { color: var(--bd-onblack); font-family: var(--bd-body); }
html .shell a { color: inherit; text-decoration-color: var(--bd-violet); }
html .shell-src {
  font-family: var(--bd-mono);
  border-top: 1px solid var(--bd-onblack-hair);
  color: var(--bd-onblack-dim);
}

/* ---------- record columns ---------- */

html .rcol-h {
  font-family: var(--bd-mono);
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--bd-black);
}
html .rcol-s { font-family: var(--bd-mono); color: var(--bd-grey); }
html .rcol-note { color: var(--bd-grey); }
html .lawrow { border-bottom: 1px solid var(--bd-hair); }
html .lawf { font-weight: 700; color: var(--bd-black); }
html .lawm { font-family: var(--bd-mono); color: var(--bd-grey); }
html .lawc { color: var(--bd-grey); }

/* ---------- archive tags ---------- */

html .ahead {
  font-family: var(--bd-mono);
  letter-spacing: .1em;
  color: var(--bd-black);
}
html .atag {
  font-family: var(--bd-mono);
  border: 1px solid var(--bd-hair);
  border-radius: 0;
  background: var(--bd-panel);
  color: var(--bd-grey);
}
html .atag:hover { border-color: var(--bd-violet-d); color: var(--bd-violet-d); }

/* ---------- footer ---------- */

html .pm-footer {
  border-top: 3px solid var(--bd-black);
  background: var(--bd-black);
  color: var(--bd-onblack);
}
html .pm-footer a { color: var(--bd-gold); }
html .pm-footer a:hover { color: var(--bd-coral); }

/* ---------- tables (color only — layout untouched so sort/filter keeps working) ---------- */

html table:not(.leaflet-container table) { border-color: var(--bd-hair); }
html th {
  font-family: var(--bd-mono);
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--bd-black);
  border-bottom-color: var(--bd-black);
}
html td { border-color: var(--bd-hair); color: var(--bd-black); }

/* ---------- keep-out zones ----------
   Leaflet, Folium and the network graph paint their own colors.
   Nothing above targets them; these resets undo any inherited
   font or color that would disturb map chrome. */

html .leaflet-container,
html .leaflet-container * ,
html .folium-map,
html .folium-map * {
  font-family: inherit;
  text-align: initial;
}
html .leaflet-container img,
html .folium-map img { max-width: none; }


/* ---------- legacy surfaces ---------- */
/* Power map pages and other early builds hardcode the old Paper Wash tints in
   their own <style> block. brand.css loads last, so mapping the old values to
   Page White converts them without touching each builder. */

html body,
html #wrap,
html .tile,
html .panel,
html .card,
html section { background-color: var(--bd-paper); }

html .tile { background-image: radial-gradient(rgba(0,0,0, .09) 1px, transparent 1px); }

html .hero,
html .shell,
html [data-bd-header],
html [data-bd-footer] { background-color: inherit; }
html .hero, html .shell { background-color: var(--bd-black); }
/* The header and footer own their surfaces; the reset above must not strip them. */
html [data-bd-header] { background-color: var(--bd-paper); }
html [data-bd-footer] { background-color: var(--bd-black); }

/* ---------- headlines: Mildstones display face ---------- */
html h1, html h2, html h3,
html .hdisp, html .stat-n, html .kit-head {
  font-family: var(--bd-headline);
  font-weight: 400;
  letter-spacing: .02em;
}
