/* ============================================================
   Loveland Shelter Funds — OSINT Dossier
   Editorial / archival document aesthetic
   No external requests · no JS · self-hosted fonts only
   ============================================================ */

/* ----------- Self-hosted fonts ----------- */

@font-face {
  font-family: "Pagella";
  src: url("../fonts/texgyrepagella-regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Pagella";
  src: url("../fonts/texgyrepagella-italic.otf") format("opentype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Pagella";
  src: url("../fonts/texgyrepagella-bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Pagella";
  src: url("../fonts/texgyrepagella-bolditalic.otf") format("opentype");
  font-weight: 700; font-style: italic; font-display: swap;
}

@font-face {
  font-family: "Schola";
  src: url("../fonts/texgyreschola-regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Schola";
  src: url("../fonts/texgyreschola-bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Schola";
  src: url("../fonts/texgyreschola-italic.otf") format("opentype");
  font-weight: 400; font-style: italic; font-display: swap;
}

/* IBM Plex Mono — replaced Fira Code 2026-05-18.
   No programming ligatures (=>, !=, ==) — money strings render correctly.
   Tabular numerals, single-storey g, slightly wider counters. OFL-licensed. */
@font-face {
  font-family: "PlexMono";
  src: url("../fonts/IBMPlexMono-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PlexMono";
  src: url("../fonts/IBMPlexMono-Italic.otf") format("opentype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "PlexMono";
  src: url("../fonts/IBMPlexMono-Medium.otf") format("opentype");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PlexMono";
  src: url("../fonts/IBMPlexMono-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "PlexMono";
  src: url("../fonts/IBMPlexMono-BoldItalic.otf") format("opentype");
  font-weight: 700; font-style: italic; font-display: swap;
}

/* EB Garamond — added 2026-05-18 for masthead + chapter opener.
   High-contrast strokes, true small caps, exceptional italic. OFL-licensed.
   Body remains Pagella; this face is for display moments only. */
@font-face {
  font-family: "EBGaramond";
  src: url("../fonts/EBGaramond-Regular.otf") format("opentype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "EBGaramond";
  src: url("../fonts/EBGaramond-Italic.otf") format("opentype");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "EBGaramond";
  src: url("../fonts/EBGaramond-SemiBold.otf") format("opentype");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "EBGaramond";
  src: url("../fonts/EBGaramond-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "EBGaramond";
  src: url("../fonts/EBGaramond-BoldItalic.otf") format("opentype");
  font-weight: 700; font-style: italic; font-display: swap;
}

/* ----------- Tokens ----------- */
:root {
  /* Paper / archival palette */
  --paper:      #F4EFE3;   /* warm cream background */
  --paper-edge: #ECE6D6;   /* darker rule between sections */
  --ink:        #14110E;   /* near-black ink */
  --ink-soft:   #4B463F;   /* muted secondary text */
  --rule:       #1A1814;   /* horizontal rules */
  --oxblood:    #6E1B1F;   /* primary accent: redactions, key emphasis */
  --field:      #2F4A33;   /* secondary: government-form green */
  --tape:       #C8B274;   /* manila tape highlight */
  --stamp:      #6E1B1F;   /* stamp/seal color */
  --noise-op:   0.035;

  /* Type
     Three serif faces in use:
       --serif-body    body copy + most paragraph contexts (Pagella humanist)
       --serif-display section headings, pull quotes (Schola scholarly bookface)
       --serif-opener  masthead + chapter title + drop cap (EB Garamond, high-contrast)
     Plus PlexMono for figures, footnotes, code, eyebrows, and stamps. */
  --serif-body:    "Pagella", "TeX Gyre Pagella", "Palatino", "Palatino Linotype", Georgia, serif;
  --serif-display: "Schola",  "TeX Gyre Schola",  "Century Schoolbook", "Bookman", Georgia, serif;
  --serif-opener:  "EBGaramond", "EB Garamond", "Garamond", "Pagella", "TeX Gyre Pagella", Georgia, serif;
  --mono:          "PlexMono", "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Reading measures — widened 2026-05-18 for a digital-newspaper feel.
     Pagella @ 18px ≈ 11 chars/2rem, so 42rem holds ~75ch (well inside the
     60–80ch optimum). --measure-wide is the inset for evidence cards,
     diagrams, blockquotes that should breathe past the body column. */
  --measure:    42rem;        /* body copy column      ≈ 756px */
  --measure-wide: 56rem;      /* wide-inset elements   ≈ 1008px */
  --gutter:     1.5rem;
  --space-page: clamp(0.85rem, 2.6vw, 2rem);
}

/* ----------- Reset additions on top of bootstrap-reboot ----------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  /* --font-scale is set by floating-tools.js from localStorage (range 0.85–1.45).
     Falls back to 1.0 when JS is disabled — no layout shift on cold load. */
  font-size: calc(18px * var(--font-scale, 1));
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--serif-body);
  font-size: 1rem;
  line-height: 1.62;
  color: var(--ink);
  background: var(--paper);
  font-feature-settings: "kern", "liga", "onum";
  font-variant-numeric: oldstyle-nums;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Subtle paper texture using CSS gradients */
  background-image:
    radial-gradient(circle at 20% 30%, rgba(20,17,14,0.018) 0, transparent 60%),
    radial-gradient(circle at 75% 70%, rgba(110,27,31,0.012) 0, transparent 55%),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(20,17,14,0.015) 31px 32px);
}

::selection { background: var(--oxblood); color: var(--paper); }

/* ----------- Layout shell ----------- */
.page {
  display: grid;
  /* Widened 2026-05-18 to 1240px so the full-width masthead, banner, and
     wide diagrams have a newspaper-shape canvas without the body column
     itself widening into uncomfortable line lengths. */
  grid-template-columns: 1fr min(100% - 2*var(--space-page), 1240px) 1fr;
  row-gap: 0;
}
.page > * { grid-column: 2; }
.page > .full   { grid-column: 1 / -1; }

main { padding: clamp(1.5rem, 4vw, 4rem) 0 6rem; }

/* ----------- Document header (masthead) -----------
   Tagline strap above the nav. Pre-2026-05-18 this was an ALL-CAPS
   mono classification banner ("LOVELAND SHELTER FUNDS · OSINT DOSSIER");
   that read as boilerplate. Replaced with a one-line italic tagline so
   the first thing on every page is what the dossier actually IS, not
   what it's filed as. */
.masthead {
  border-top: 2px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 0.7rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.masthead .tagline {
  font-family: var(--serif-opener);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(0.92rem, 1.3vw, 1.08rem);
  line-height: 1.35;
  color: var(--ink);
  max-width: 64ch;
  letter-spacing: 0.005em;
  text-wrap: balance;
}

/* Banner title block — the front-page block on every page (centered) */
.banner {
  padding: clamp(2rem, 6vw, 5rem) 0 clamp(1.5rem, 4vw, 3rem);
  border-bottom: 1px solid var(--rule);
  position: relative;
  text-align: center;
}
.banner .eyebrow {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--oxblood);
  margin-bottom: 1.75rem;
}
.banner .eyebrow .sep {
  color: var(--ink-soft);
  font-weight: 400;
  margin: 0 0.55em;
}
.banner h1 {
  font-family: var(--serif-opener);
  font-size: clamp(2.6rem, 6.4vw, 5.6rem);
  font-weight: 600;
  line-height: 0.97;
  letter-spacing: -0.008em;
  margin: 0 auto 1.2rem;
  max-width: 22ch;
  hyphens: auto;
  text-wrap: balance;
  font-feature-settings: "kern", "liga", "dlig", "lnum";
  font-variant-numeric: lining-nums;
}
.banner .deck {
  font-family: var(--serif-display);
  font-variant-caps: all-small-caps;
  font-feature-settings: "kern", "smcp", "c2sc", "lnum";
  letter-spacing: 0.14em;
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--oxblood);
  margin: 0.2rem auto 1.4rem;
  max-width: 44ch;
  line-height: 1.3;
}
.banner .lede {
  font-family: var(--serif-body);
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  line-height: 1.45;
  max-width: 50ch;
  margin: 0 auto;
  color: var(--ink);
  font-style: italic;
  text-wrap: pretty;
}
.banner .meta {
  margin: 2.2rem auto 0;
  padding-top: 1rem;
  border-top: 1px dashed var(--ink-soft);
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-soft);
  max-width: var(--measure-wide);
}
.banner .meta strong { color: var(--ink); font-weight: 500; }

/* ----------- Article body ----------- */
.article {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  padding-top: 2.5rem;
}
/* Centered reading measure */
.article > * { max-width: var(--measure); margin-left: auto; margin-right: auto; }
.article > .wide  { max-width: var(--measure-wide); }
.article > .full  { max-width: none; }

.article h2 {
  font-family: var(--serif-display);
  font-size: clamp(1.6rem, 2.6vw, 2.1rem);
  font-weight: 700;
  line-height: 1.1;
  margin: 3rem 0 1rem 0;
  letter-spacing: -0.005em;
}
.article h2::before {
  content: "§";
  color: var(--oxblood);
  font-weight: 400;
  margin-right: 0.55em;
  font-variant-numeric: normal;
}
.article h3 {
  font-family: var(--serif-display);
  font-size: 1.18rem;
  font-weight: 700;
  margin: 2rem 0 0.6rem;
  line-height: 1.25;
}
.article h4 {
  font-family: var(--serif-body);
  font-style: italic;
  font-size: 1.05rem;
  font-weight: 700;
  margin: 1.4rem 0 0.4rem;
}

.article p { margin: 0 0 1.1em; }
.article p + p { text-indent: 1.4em; }   /* book-style paragraph indents */
.article h2 + p, .article h3 + p, .article h4 + p,
.article ul + p, .article ol + p, .article hr + p,
.article blockquote + p, .article figure + p,
.article pre + p, .article table + p { text-indent: 0; }

.article a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--oxblood);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.18em;
  transition: background 80ms ease;
}
.article a:hover {
  /* Soft red-wash highlight — text stays oxblood and remains legible
     through the tint. Previously was a solid oxblood fill with paper text,
     which over-saturated and dampened the text on hover. */
  background: rgba(110, 27, 31, 0.13);
  color: var(--oxblood);
  text-decoration-color: var(--oxblood);
  text-decoration-thickness: 2px;
}

/* ----------- Link affordances (texticons) -----------
   Subtle Unicode glyphs appended to in-article links so the
   reader can tell where a click will take them: external
   page, locally-archived PDF, locally-archived HTML, Cablecast
   video, email. Pure CSS attribute selectors — no JS, no images,
   no extra HTML. Scoped to .article so navigation, the page-TOC,
   footnote citation superscripts ([N]), and source-block back-
   references are left alone. */

/* External web link (anything explicit-protocol) */
.article a[href^="http"]::after,
.article a[href^="//"]::after {
  content: "\00A0↗";              /* nbsp + north-east arrow */
  font-size: 0.78em;
  color: var(--ink-soft);
  text-decoration: none;
  vertical-align: 0.06em;
}

/* Locally-archived primary-source PDF (/docs/pdf/... or *.pdf) */
.article a[href$=".pdf"]::after,
.article a[href*="/docs/pdf/"]::after {
  content: "\00A0⤓";              /* nbsp + downward-arrow-to-bar */
  font-size: 0.82em;
  color: var(--oxblood);
  text-decoration: none;
  vertical-align: 0.04em;
}

/* Locally-archived primary-source HTML (preserved press article) */
.article a[href^="/docs/html/"]::after,
.article a[href*="/docs/html/"]::after {
  content: "\00A0▤";              /* nbsp + square with horizontal fill */
  font-size: 0.82em;
  color: var(--field);
  text-decoration: none;
  vertical-align: 0.02em;
}

/* Cablecast video archive (host pattern) */
.article a[href*="cablecast.tv"]::after,
.article a[href*=".mp4"]::after {
  content: "\00A0▶";              /* nbsp + play */
  font-size: 0.76em;
  color: var(--field);
  text-decoration: none;
  vertical-align: 0.06em;
}

/* Email */
.article a[href^="mailto:"]::after {
  content: "\00A0✉";              /* nbsp + envelope */
  font-size: 0.82em;
  color: var(--ink-soft);
  text-decoration: none;
}

/* Glyph follows hover state (turn paper-coloured when link reverses) */
.article a:hover::after,
.article a:focus-visible::after { color: var(--paper); }

/* --- Exclusions: areas that already have their own affordance --- */

/* Footnote citation superscripts already wrap as [N] (sup.cite rule).
   Reaffirm the existing content so no attribute selector overrides it. */
.article sup.cite a::before { content: "["; }
.article sup.cite a::after  { content: "]"; }

/* Page table-of-contents (in-page jumps) — no glyph */
.article aside.page-toc a::after { content: none; }

/* "See also" cross-chapter blocks already render their own arrow */
.article .seealso a::after,
.article .seealso-block a::after { content: none; }

/* Sources block back-to-top and intra-sources nav */
.article .sources-toc a::after,
.article .sources-back a::after { content: none; }

/* Diagram lightbox triggers (the click-to-enlarge SVG) */
.article figure.diagram .diagram-trigger::after { content: none; }

/* Inline “local archive” pointer inside .evidence dt/dd that links to
   /docs/pdf — the ⤓ rule above is correct; nothing to undo. */

/* Skip the glyph in print copies */
@media print {
  .article a[href]::after { content: none !important; }
}

/* ----------- Link-affordance legend (optional) -----------
   Pages that want to show readers what the glyphs mean can drop the
   <aside class="link-legend"> block produced by the {{< linklegend >}}
   shortcode. Kept compact and visually subordinate to the article. */
aside.link-legend {
  font-family: var(--serif-text, Georgia, serif);
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--ink-soft);
  background: rgba(20,17,14,0.025);
  border-left: 3px solid var(--paper-edge);
  padding: 0.55rem 0.95rem 0.6rem;
  margin: 1.2rem 0 1.6rem;
}
aside.link-legend .legend-title {
  font-family: var(--sans-display, "TeX Gyre Heros", "Helvetica Neue", Helvetica, Arial, sans-serif);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.74rem;
  color: var(--ink);
  margin: 0 0 0.35rem;
  font-weight: 600;
}
aside.link-legend dl {
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  column-gap: 0.7rem;
  row-gap: 0.18rem;
  margin: 0;
}
aside.link-legend dt {
  text-align: center;
  font-size: 1rem;
  color: var(--ink);
  font-weight: 500;
}
aside.link-legend dd { margin: 0; }
aside.link-legend code {
  font-family: var(--mono, ui-monospace, SFMono-Regular, monospace);
  font-size: 0.86em;
  color: var(--ink-soft);
}
@media (max-width: 640px) {
  aside.link-legend { font-size: 0.84rem; padding: 0.5rem 0.8rem; }
}

.article strong { font-weight: 700; }
.article em     { font-style: italic; }

/* ----------- Typographic utilities -----------
   - .figures / .tabular      tabular lining numerals (money columns,
                              ledger amounts, dollar inlines). Overrides
                              the body's onum default so decimals line up.
   - .entity                  proper-noun small caps for entity names
                              ("CENTERRA PROPERTIES WEST" as a single
                              graphic unit rather than ALL CAPS shouting).
                              Pagella's true small caps + 0.04em tracking.
   - .typewriter              monospace inline for parcel IDs, case
                              numbers, statute citations — opt-in mono
                              without switching the surrounding sentence. */
.figures, .tabular, .article .figures, .article .tabular {
  font-feature-settings: "tnum", "lnum", "kern";
  font-variant-numeric: tabular-nums lining-nums;
}
.entity {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.04em;
  font-weight: 500;
  font-feature-settings: "smcp", "c2sc", "kern";
}
.entity.muted { color: var(--ink-soft); }
.typewriter {
  font-family: var(--mono);
  font-size: 0.92em;
  letter-spacing: -0.005em;
}

/* Drop cap on first paragraph of an article — uses the opener face
   (EB Garamond) so the high-contrast vertical stroke pairs with the
   chapter title above. */
.article > p.lede:first-of-type::first-letter,
.article > .dropcap::first-letter {
  font-family: var(--serif-opener);
  float: left;
  font-size: 4.8em;
  line-height: 0.82;
  padding: 0.04em 0.12em 0 0;
  color: var(--oxblood);
  font-weight: 700;
  font-feature-settings: "kern";
}

/* Lede / standfirst block */
.article .lede {
  font-size: 1.18rem;
  line-height: 1.5;
  font-style: italic;
  color: var(--ink);
  max-width: var(--measure-wide);
}

/* ----------- Lists ----------- */
.article ul, .article ol {
  margin: 0 0 1.2em;
  padding-left: 1.4em;
}
.article ul li::marker { color: var(--oxblood); }
.article ol li::marker { font-family: var(--mono); font-size: 0.85em; color: var(--oxblood); }

/* ----------- Block quotes & pull quotes ----------- */
.article blockquote {
  margin: 2rem 0;
  padding: 0 0 0 1.4rem;
  border-left: 3px solid var(--oxblood);
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 1.15rem;
  line-height: 1.45;
  color: var(--ink);
}

.pullquote {
  margin: 2.5rem 0;
  padding: 1.5rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-family: var(--serif-display);
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  line-height: 1.25;
  text-align: left;
  font-weight: 400;
  color: var(--ink);
  font-style: italic;
  hanging-punctuation: first;
  text-wrap: balance;
}

/* ----------- Tables ----------- */
.article table, .data-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.6rem 0 1.8rem;
  font-family: var(--mono);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}
.article th, .article td, .data-table th, .data-table td {
  padding: 0.55rem 0.8rem;
  text-align: left;
  border-bottom: 1px solid var(--paper-edge);
  vertical-align: top;
}
.article th, .data-table th {
  font-weight: 500;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.72rem;
  color: var(--ink-soft);
  border-bottom: 2px solid var(--rule);
  background: rgba(20,17,14,0.03);
}
.article td:last-child, .article th:last-child { text-align: right; font-feature-settings: "tnum"; }

/* ----------- CFAA legal-posture notice -----------
   Compact callout block used on /methodology/ (and other tradecraft
   pages) to pre-empt the obvious legal question and link to the full
   posture writeup at /about/#cfaa-compliance. */
aside.cfaa-notice {
  margin: 1.6rem auto 2.2rem;
  padding: 0.9rem 1.2rem 1rem;
  max-width: var(--measure-wide);
  background: rgba(244,239,227,0.75);
  border: 1px solid var(--paper-edge);
  border-left: 3px solid var(--field);
  font-family: var(--serif-body);
  font-size: 0.93rem;
  line-height: 1.5;
  color: var(--ink);
}
aside.cfaa-notice .cfaa-notice-label {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--field);
  margin-bottom: 0.45rem;
}
aside.cfaa-notice p { margin: 0; }
aside.cfaa-notice a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--field);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.18em;
}

/* ----------- Evidence cards (used for documented findings) ----------- */
.evidence {
  margin: 2rem 0;
  padding: 1.2rem 1.4rem;
  border: 1px solid var(--rule);
  background: rgba(255,255,255,0.45);
  position: relative;
  font-family: var(--serif-body);
}
.evidence::before {
  content: "EVIDENCE";
  position: absolute;
  top: -0.65rem; left: 1rem;
  background: var(--paper);
  padding: 0 0.5rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--oxblood);
}
.evidence .src {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ink-soft);
  margin-top: 0.8rem;
  display: block;
}
.evidence dl { margin: 0; display: grid; grid-template-columns: fit-content(18em) minmax(0, 1fr); gap: 0.2rem 1.2rem; }
.evidence dt {
  font-family: var(--mono);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  min-width: 0;
  overflow-wrap: anywhere;
  align-self: baseline;
  padding-top: 0.15rem;
}
.evidence dd {
  margin: 0;
  font-family: var(--mono);
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.evidence dd.amount { font-weight: 500; }
.evidence dd.amount.up   { color: var(--oxblood); }
.evidence dd.amount.flat { color: var(--ink); }

/* ----------- Stamps / chips ----------- */
.stamp {
  display: inline-block;
  padding: 0.18em 0.55em;
  border: 1.5px solid currentColor;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--oxblood);
  background: rgba(110,27,31,0.05);
  transform: rotate(-1deg);
}
.stamp.green  { color: var(--field); background: rgba(47,74,51,0.06); transform: rotate(0.5deg); }
.stamp.gray   { color: var(--ink-soft); background: rgba(20,17,14,0.04); transform: rotate(0); border-style: dashed; }
.stamp.large  { font-size: 0.95rem; padding: 0.4em 0.85em; }

/* ----------- Document image (deed scans) ----------- */
.docimg {
  margin: 2rem 0;
  border: 1px solid var(--rule);
  background: #fff;
  padding: 0.5rem;
  box-shadow: 0 1px 0 var(--rule), 0 2px 8px rgba(20,17,14,0.08);
}
.docimg img { display: block; width: 100%; height: auto; filter: contrast(1.05); }
.docimg figcaption {
  margin-top: 0.5rem;
  padding: 0.55rem 0.4rem 0.2rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
  border-top: 1px solid var(--paper-edge);
}

/* ----------- Code & monospace blocks ----------- */
.article code {
  font-family: var(--mono);
  font-size: 0.88em;
  padding: 0.05em 0.3em;
  background: rgba(20,17,14,0.06);
  border-radius: 1px;
  font-variant-ligatures: none;
}
.article pre {
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 1.5;
  padding: 1.1rem 1.3rem;
  background: var(--ink);
  color: #E8DFC7;
  overflow-x: auto;
  border-left: 4px solid var(--oxblood);
  margin: 1.6rem 0;
}
.article pre code { background: transparent; padding: 0; color: inherit; font-size: inherit; }

/* ----------- Horizontal rule ornament ----------- */
.article hr {
  border: 0;
  text-align: center;
  margin: 3rem 0;
}
.article hr::after {
  content: "❦";
  font-family: var(--serif-display);
  color: var(--oxblood);
  font-size: 1.4rem;
  display: inline-block;
  transform: rotate(-2deg);
}

/* ----------- Navigation -----------
   Responsive newspaper-style topbar. Sticky on scroll so the section
   pointer is always one tap away. CSS-only hamburger (checkbox-hack)
   on <768px keeps the strict `script-src 'self'` CSP untouched.
   The hidden checkbox sits at the top of <nav> so the .nav-links
   sibling selector (input:checked ~ .nav-links) works without JS. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 1px 0 var(--paper-edge), 0 6px 18px -16px rgba(20, 17, 14, 0.45);
  font-family: var(--serif-display);
  font-size: 0.92rem;
}
.topbar-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  padding: 0.55rem clamp(0.85rem, 2.6vw, 1.5rem);
}
.topbar-brand {
  font-family: var(--serif-opener);
  font-size: 1.02rem;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  flex: 0 0 auto;
  margin-right: auto;
}
.topbar-brand:hover { color: var(--oxblood); }

/* The toggle checkbox itself is invisible/off-screen but still
   focusable through the label's `for=` association. */
.nav-toggle-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Hamburger button — three bars, rotates into an X when checked. */
.nav-toggle-btn {
  display: none;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0.55rem 0.45rem;
  margin-left: 0.5rem;
  cursor: pointer;
  border: 1px solid var(--paper-edge);
  background: transparent;
  border-radius: 2px;
  flex-direction: column;
  justify-content: space-between;
  align-items: stretch;
  flex: 0 0 auto;
}
.nav-toggle-btn .nav-toggle-bar {
  display: block;
  height: 2px;
  background: var(--ink);
  transition: transform 160ms ease, opacity 120ms ease;
  transform-origin: center;
}
.nav-toggle-input:focus-visible ~ .topbar-inner .nav-toggle-btn,
.nav-toggle-btn:focus-visible {
  outline: 2px solid var(--oxblood);
  outline-offset: 2px;
}

/* Nav-link list. On mobile, hidden until the toggle is checked. */
.nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.4rem;
  flex: 1 1 100%;
  padding: 0.4rem 0 0.2rem;
}
.nav-links a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 0.1rem;
  white-space: nowrap;
  transition: border-color 100ms ease, color 100ms ease;
}
.nav-links a:hover,
.nav-links a.active {
  border-bottom-color: var(--oxblood);
}
.nav-links a.donate {
  color: var(--oxblood);
}
.nav-links a.donate:hover,
.nav-links a.donate.active {
  border-bottom-color: var(--oxblood);
}
.nav-links .num {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--oxblood);
  margin-right: 0.4em;
  vertical-align: top;
  letter-spacing: 0.05em;
}

/* ----- Mobile (<768px): collapse menu, show hamburger ----- */
@media (max-width: 767.98px) {
  .topbar-inner { padding: 0.5rem 0.85rem; gap: 0 0.5rem; }
  .nav-toggle-btn { display: flex; }
  .nav-links {
    flex: 1 1 100%;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 240ms ease;
    border-top: 0 solid var(--paper-edge);
  }
  .nav-links a {
    padding: 0.7rem 0.25rem;
    border-bottom: 1px solid var(--paper-edge);
    white-space: normal;
  }
  .nav-links a:last-child { border-bottom: none; }
  .nav-links a:hover,
  .nav-links a.active {
    background: rgba(110, 27, 31, 0.06);
    border-bottom-color: var(--paper-edge);
  }
  .nav-links a.active .num,
  .nav-links a:hover .num { color: var(--oxblood); }

  /* Open state — driven by hidden checkbox. */
  .nav-toggle-input:checked ~ .topbar-inner .nav-links {
    max-height: 80vh;
    overflow-y: auto;
    border-top: 1px solid var(--paper-edge);
    margin-top: 0.5rem;
  }
  .nav-toggle-input:checked ~ .topbar-inner .nav-toggle-bar:nth-child(1) {
    transform: translateY(0.42rem) rotate(45deg);
  }
  .nav-toggle-input:checked ~ .topbar-inner .nav-toggle-bar:nth-child(2) {
    opacity: 0;
  }
  .nav-toggle-input:checked ~ .topbar-inner .nav-toggle-bar:nth-child(3) {
    transform: translateY(-0.42rem) rotate(-45deg);
  }
}

/* ----- Desktop (>=768px): always-expanded inline nav ----- */
@media (min-width: 768px) {
  .topbar-inner { flex-wrap: nowrap; }
  .nav-links {
    flex: 1 1 auto;
    padding: 0;
    justify-content: flex-end;
  }
}

/* ----------- Footer -----------
   Single disclaimer line, centered, sub-page-width measure so it breathes.
   Pre-2026-05-18 it was left-padded against --space-page which read as
   off-balance against the centered masthead and centered banner above. */
.footer {
  margin-top: 5rem;
  padding: 2rem clamp(0.85rem, 2.6vw, 2rem) 3rem;
  border-top: 2px double var(--rule);
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  text-align: center;
}
.footer .disclaimer {
  max-width: 68ch;
  margin: 0 auto;
  line-height: 1.55;
  text-wrap: pretty;
}
.footer .seal {
  font-family: var(--serif-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--oxblood);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}

/* ----------- Section number / chapter labels ----------- */
.chapter {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--oxblood);
  margin-bottom: 0.6rem;
  display: block;
}

/* ----------- Key/value finding inline ----------- */
.kv {
  display: inline-grid;
  grid-template-columns: max-content 1fr;
  gap: 0 0.5em;
  font-family: var(--mono);
  font-size: 0.86em;
  padding: 0.2em 0;
}
.kv b { color: var(--oxblood); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; }

/* ----------- Marginalia / footnotes ----------- */
.footnote-ref { font-size: 0.7em; vertical-align: super; color: var(--oxblood); text-decoration: none; }
.footnote-ref::before { content: "["; }
.footnote-ref::after  { content: "]"; }

/* ----------- Inline numbered citations ----------- */
sup.cite {
  font-family: var(--mono);
  font-size: 0.62em;
  font-weight: 500;
  vertical-align: super;
  line-height: 0;
  margin-left: 0.1em;
  font-variant-numeric: lining-nums tabular-nums;
}
sup.cite a {
  color: var(--oxblood);
  text-decoration: none;
  padding: 0 0.1em;
  border-bottom: 1px solid var(--oxblood);
  transition: background 80ms ease;
}
sup.cite a:hover,
sup.cite a:focus { background: rgba(110, 27, 31, 0.16); color: var(--oxblood); border-bottom-color: var(--oxblood); }
sup.cite a::before { content: "["; }
sup.cite a::after  { content: "]"; }

/* Target highlight when navigated to */
li.src:target {
  background: rgba(200,178,116,0.32);
  outline: 1px solid var(--tape);
  outline-offset: 4px;
}

/* ----------- Primary-sources block ----------- */
.sources-block {
  margin-top: 4.5rem;
  padding-top: 1.4rem;
  border-top: 2px double var(--rule);
  max-width: var(--measure-wide);
}
.sources-heading {
  font-family: var(--mono) !important;
  font-size: 0.78rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 1.4rem !important;
  text-align: center;
}
.sources-heading::before { content: none !important; }

ol.sources {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.4rem;
  counter-reset: src;
}

li.src {
  display: grid;
  grid-template-columns: 2.4em 1fr;
  gap: 0 0.65rem;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--paper-edge);
  font-family: var(--serif-body);
  font-size: 0.88rem;
  line-height: 1.45;
  scroll-margin-top: 6rem;
  transition: background 120ms ease;
}
li.src:hover { background: rgba(20,17,14,0.025); }

.src-num {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--oxblood);
  text-align: right;
  padding-top: 0.12rem;
  letter-spacing: 0.04em;
}
.src-num::before { content: "["; color: var(--ink-soft); }
.src-num::after  { content: "]"; color: var(--ink-soft); }

.src-body { min-width: 0; }
.src-title { color: var(--ink); text-decoration-color: var(--oxblood); text-decoration-thickness: 1px; text-underline-offset: 0.18em; font-weight: 500; }
.src-title:hover { background: rgba(110, 27, 31, 0.13); color: var(--oxblood); }
.src-pub { font-style: italic; color: var(--ink-soft); }
.src-date { font-family: var(--mono); font-size: 0.78em; color: var(--ink-soft); margin-left: 0.15em; font-variant-numeric: tabular-nums; }
.src-accessed { font-family: var(--mono); font-size: 0.72em; color: var(--ink-soft); display: block; margin-top: 0.18rem; letter-spacing: 0.02em; }
.src-archived { font-family: var(--mono); font-size: 0.72em; color: var(--field); margin-left: 0.4em; }
.src-archived a { color: var(--field); text-decoration-color: var(--field); }
.src-kind {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.08em 0.45em;
  margin-right: 0.5em;
  border: 1px solid currentColor;
  vertical-align: 0.12em;
  color: var(--ink-soft);
  background: rgba(20,17,14,0.03);
}
.src-kind-press    { color: var(--oxblood); }
.src-kind-court    { color: var(--ink); }
.src-kind-filing   { color: var(--field); }
.src-kind-data     { color: var(--ink-soft); }
.src-kind-audit    { color: var(--oxblood); }
.src-kind-registry { color: var(--field); }
.src-kind-archive  { color: var(--ink-soft); border-style: dashed; }

/* ----------- Per-page table of contents -----------
   Numbered (decimal-leading-zero) top-level + lower-alpha sub-items in
   mono accent ink. Hugo now emits <ol> (markup.tableOfContents.ordered);
   list-style is suppressed in favor of a CSS counter so the numerals can
   be styled independently of the link text and aligned in a gutter.
   Two-column at >=900px so even long chapter TOCs fit in one screen. */
aside.page-toc {
  margin: 0 auto 2.5rem;
  padding: 1.1rem 1.4rem 0.9rem;
  background: rgba(255,255,255,0.55);
  border: 1px solid var(--paper-edge);
  border-left: 3px solid var(--oxblood);
  font-family: var(--serif-body);
  font-size: 0.95rem;
  line-height: 1.5;
  max-width: var(--measure-wide);
  column-count: 1;
}
.page-toc-label {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--oxblood);
  margin: 0 0 0.85rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--paper-edge);
}
aside.page-toc nav { line-height: 1.55; }
aside.page-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc-1;
}
aside.page-toc ol ol {
  margin: 0.2em 0 0.45em 0;
  padding-left: 0;
  counter-reset: toc-2;
}
aside.page-toc ol ol ol {
  counter-reset: toc-3;
}
aside.page-toc li {
  margin: 0.32em 0;
  padding-left: 2.6em;
  position: relative;
  break-inside: avoid;
}
aside.page-toc ol > li {
  counter-increment: toc-1;
}
aside.page-toc ol > li::before {
  content: counter(toc-1, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.12em;
  font-family: var(--mono);
  font-size: 0.78em;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--oxblood);
  width: 2.1em;
  text-align: right;
  padding-right: 0.5em;
  border-right: 1px solid var(--paper-edge);
}
aside.page-toc ol ol > li {
  counter-increment: toc-2;
  padding-left: 2.2em;
  margin: 0.18em 0;
  font-size: 0.92em;
}
aside.page-toc ol ol > li::before {
  content: counter(toc-1, decimal-leading-zero) "." counter(toc-2, lower-alpha);
  font-size: 0.72em;
  color: var(--ink-soft);
  width: 1.9em;
  font-weight: 400;
  border-right: none;
}
aside.page-toc ol ol ol > li {
  counter-increment: toc-3;
}
aside.page-toc ol ol ol > li::before {
  content: counter(toc-1, decimal-leading-zero) "." counter(toc-2, lower-alpha) "." counter(toc-3, lower-roman);
}
aside.page-toc a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 100ms ease, color 80ms ease;
  padding: 0.04em 0.18em 0.04em 0;
  display: inline;
}
aside.page-toc a:hover {
  border-bottom-color: var(--oxblood);
  color: var(--oxblood);
}

/* Two-column at wide widths so a long chapter TOC fits in one screen.
   Numbering continues sequentially across columns because the counter
   lives on the <ol>, not on the column flow. */
@media (min-width: 900px) {
  aside.page-toc {
    column-count: 2;
    column-gap: 2.4rem;
    column-rule: 1px dotted var(--paper-edge);
  }
  aside.page-toc > .page-toc-label { column-span: all; }
}

/* ----------- Cross-reference (see also) box ----------- */
aside.seealso {
  display: grid;
  grid-template-columns: 5em 1fr;
  gap: 0 1rem;
  margin: 1.6rem auto;
  padding: 0.7rem 1rem;
  border: 1px solid var(--paper-edge);
  border-left: 3px solid var(--field);
  background: rgba(47,74,51,0.04);
  font-family: var(--serif-body);
  font-size: 0.92rem;
  line-height: 1.5;
  max-width: var(--measure-wide);
}
.seealso-label {
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--field);
  padding-top: 0.1rem;
  text-align: right;
  border-right: 1px dotted rgba(47,74,51,0.4);
  padding-right: 0.8rem;
}
.seealso-body { min-width: 0; }
.seealso-link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  font-family: var(--serif-display);
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--field);
  padding-bottom: 0.05em;
}
.seealso-link:hover { background: var(--field); color: var(--paper); border-bottom-color: transparent; }
.seealso-chapter {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--field);
  background: rgba(47,74,51,0.08);
  padding: 0.1em 0.45em;
  border: 1px solid currentColor;
}
.seealso-link:hover .seealso-chapter { color: var(--paper); background: rgba(244,239,227,0.15); border-color: var(--paper); }
.seealso-text { margin-top: 0.2rem; color: var(--ink); }
.seealso-text p { margin: 0; }
.seealso-text ul, .seealso-text ol { margin: 0.2em 0 0; padding-left: 1.4em; }

/* Mobile */
@media (max-width: 640px) {
  aside.seealso { grid-template-columns: 1fr; gap: 0.3rem; }
  .seealso-label { text-align: left; border-right: 0; padding-right: 0; }
}

/* ----------- Evidence cards: numbered legal-exhibit treatment ----------- */
/* Each chapter restarts the exhibit counter so numbering reads like a real
   filing rather than a global running tally. */
.article { counter-reset: exhibit; }
.evidence { counter-increment: exhibit; }
.evidence::before { content: "EXHIBIT " counter(exhibit, decimal-leading-zero); }

/* Ledger-style hairline separators between dt/dd rows. The two cells share
   a column-gap rather than a continuous rule, so the dotted lines read as
   tab-leaders the way a financial filing or court exhibit would. */
.evidence dl { gap: 0 1.4rem; }
.evidence dt,
.evidence dd {
  padding: 0.55rem 0;
  border-bottom: 1px dotted rgba(20,17,14,0.10);
}
.evidence dl > dt:nth-last-of-type(1),
.evidence dl > dd:nth-last-of-type(1) {
  border-bottom: 0;
  padding-bottom: 0.2rem;
}

/* Directional indicator on appreciating amounts — a small ledger glyph
   that telegraphs the price-arithmetic story without spelling it out. */
.evidence dd.amount.up::before {
  content: "▲";
  display: inline-block;
  margin-right: 0.55em;
  font-size: 0.68em;
  vertical-align: 0.12em;
  color: var(--oxblood);
}

/* Source attribution: a sectional pilcrow marks it as a separate
   documentary register from the data above. */
.evidence .src {
  margin-top: 1.1rem;
  padding: 0.55rem 0 0 1.1rem;
  border-top: 1px solid rgba(20,17,14,0.10);
  position: relative;
}
.evidence .src::before {
  content: "§";
  position: absolute;
  left: 0;
  top: 0.4rem;
  color: var(--oxblood);
  font-family: var(--serif-display);
  font-size: 1.05rem;
  font-weight: 400;
}

/* Mobile: collapse to a single ledger line per (dt, dd) pair so the
   stacked layout doesn't double up dotted rules. */
@media (max-width: 640px) {
  .evidence dt {
    border-bottom: 0;
    padding: 0.55rem 0 0.1rem;
    margin-top: 0;
  }
  .evidence dd { padding: 0 0 0.55rem; }
}

/* ----------- Inline PDF embed (<object>) ----------- */
figure.pdfembed {
  /* Isolate the embed so neighboring article text never flows over the
     <object>. Float-clearing covers the case where a preceding element
     used legacy float layout; position: relative + z-index establishes
     a stacking context so plug-in/native PDF viewers don't punch through
     subsequent paragraphs on Safari/Chromium edge cases. */
  margin: 2.4rem auto 2.6rem;
  padding: 0;
  background: var(--paper);
  border: 1px solid var(--rule);
  box-shadow: 0 1px 0 var(--rule), 0 4px 14px rgba(20,17,14,0.10);
  clear: both;
  position: relative;
  z-index: 1;
  isolation: isolate;
  display: block;
  /* Prevent the figure from overlapping with adjacent flow content */
  overflow: visible;
}
/* Adjacent siblings (paragraphs, lists) get a hard top margin so they
   never crowd the embed's bottom edge, which has been the visible bug
   on Chromium/Safari when the PDF viewer renders a toolbar overlay. */
figure.pdfembed + p,
figure.pdfembed + ul,
figure.pdfembed + ol,
figure.pdfembed + h2,
figure.pdfembed + h3,
figure.pdfembed + figure,
figure.pdfembed + div {
  margin-top: 1.6rem;
  clear: both;
}
.pdfembed-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--rule);
  background: linear-gradient(to bottom, rgba(20,17,14,0.04), transparent);
  flex-wrap: wrap;
}
.pdfembed-label {
  font-family: var(--mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--oxblood);
  white-space: nowrap;
}
.pdfembed-title {
  font-family: var(--serif-display);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  text-align: right;
  flex: 1;
  min-width: 0;
}
figure.pdfembed object {
  /* Hard block-isolation: prevents the browser's native PDF viewer
     (Chrome / Safari / Firefox each have one) from punching toolbar UI
     up into the figcaption stacking context. The contain rule scopes
     layout/style/paint to the object's own box, which kills the rare
     bug where zooming the article font scale appeared to overlap the
     embed and the caption. */
  display: block;
  width: 100%;
  background: #2a2a2a;
  border: 0;
  position: relative;
  z-index: 0;
  contain: layout style paint;
  /* Floor height so the PDF viewer always has working room, even when
     the column is narrow or the user has scaled text down. The inline
     `height` HTML attribute supplies the upper bound; this floor stops
     the object from collapsing below a usable PDF-viewer height. */
  min-height: 480px;
}
.pdfembed-fallback {
  padding: 1.25rem 1rem 1rem;
  text-align: center;
  font-family: var(--serif-body);
  color: var(--ink-soft);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}
.pdfembed-poster-link {
  display: inline-block;
  max-width: 100%;
  line-height: 0;
  border: 1px solid var(--paper-edge);
  background: #ececec;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22), 0 2px 6px rgba(0, 0, 0, 0.18);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.pdfembed-poster-link:hover,
.pdfembed-poster-link:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28), 0 4px 8px rgba(0, 0, 0, 0.2);
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
.pdfembed-poster {
  display: block;
  max-width: 100%;
  height: auto;
  max-height: 80vh;
}
.pdfembed-fallback-note {
  margin: 0;
  font-style: italic;
  font-size: 0.88rem;
  line-height: 1.45;
  max-width: 52ch;
}
.pdfembed-fallback-note a {
  font-style: normal;
}
.pdfembed-caption {
  /* Caption sits BELOW the <object> in normal flow but stacking-contexts
     can fight on touch devices when the browser's native PDF viewer
     paints its own UI. Explicit z-index + opaque paper background means
     the caption always wins, regardless of the embed renderer's behavior. */
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 0.85rem 1rem 1rem;
  border-top: 1px solid var(--paper-edge);
  font-family: var(--serif-body);
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--ink-soft);
  background: var(--paper);
  position: relative;
  z-index: 2;
  clear: both;
}
.pdfembed-meta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: baseline;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}
.pdfembed-bates,
.pdfembed-pages {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink);
  font-weight: 500;
}
.pdfembed-download {
  margin-left: auto;
  color: var(--oxblood);
  text-decoration: none;
  border-bottom: 1px solid var(--oxblood);
  padding-bottom: 0.1em;
  font-weight: 500;
}
.pdfembed-download:hover { background: rgba(110, 27, 31, 0.14); color: var(--oxblood); }
.pdfembed-text {
  font-style: italic;
  color: var(--ink-soft);
  text-wrap: pretty;
}

/* Mobile */
@media (max-width: 640px) {
  .pdfembed-header { flex-direction: column; gap: 0.2rem; }
  .pdfembed-title { text-align: left; }
  figure.pdfembed object { height: 500px !important; min-height: 380px; }
  .pdfembed-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }
  .pdfembed-download { margin-left: 0; }
}

/* Reader-zoom integration: when the user nudges --font-scale via the
   floating tools, body text grows but the <object>'s pixel height stays
   anchored. The figcaption below will reflow taller as text scales. Add
   a generous bottom gap so the figcaption never crowds the next block. */
html[data-font-scale] figure.pdfembed { margin-bottom: 3rem; }

/* ----------- Sources master index page ----------- */
.sources-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.7rem;
  align-items: center;
  margin: 2rem auto;
  padding: 1rem 1.2rem;
  background: rgba(255,255,255,0.5);
  border: 1px solid var(--paper-edge);
  font-family: var(--mono);
  font-size: 0.78rem;
}
.sources-toc strong {
  font-family: var(--mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-soft);
  margin-right: 0.5rem;
  font-weight: 500;
}
.sources-toc a {
  text-decoration: none;
  transition: background 80ms ease;
}
.sources-toc a:hover { background: rgba(110, 27, 31, 0.13); color: var(--oxblood); border-color: var(--oxblood); }

.sources-section { margin: 3rem auto 2rem; }
.sources-kind-heading {
  font-family: var(--serif-display);
  font-size: 1.5rem !important;
  font-weight: 700;
  margin: 0 0 1.2rem !important;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}
.sources-kind-heading::before { content: none !important; }
.sources-kind-count {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

ol.sources-master {
  grid-template-columns: 1fr;
  gap: 0.1rem;
}
ol.sources-master > li.src {
  grid-template-columns: 7em 1fr;
  gap: 0 0.9rem;
  padding: 0.8rem 0.8rem;
  border-bottom: 1px solid var(--paper-edge);
  font-size: 0.92rem;
}
ol.sources-master .src-num {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 0;
}
ol.sources-master .src-num::before,
ol.sources-master .src-num::after { content: none; }

.src-backref {
  display: block;
  margin-top: 0.4rem;
  padding-top: 0.4rem;
  border-top: 1px dotted var(--paper-edge);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}
.src-backref-link {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  margin-left: 0.5em;
  padding: 0.05em 0.35em;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--oxblood);
  transition: background 80ms ease;
}
.src-backref-link:hover { background: rgba(110, 27, 31, 0.13); color: var(--oxblood); border-bottom-color: var(--oxblood); }
.src-backref-num {
  font-family: var(--mono);
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--oxblood);
  letter-spacing: 0.03em;
}
.src-backref-link:hover .src-backref-num { color: var(--paper); }

/* ----------- Pre-rendered Mermaid diagrams (embedded as <img>) ----------- */
figure.diagram {
  margin: 2.4rem auto 2.2rem;
  padding: 1.2rem 1.4rem 1rem;
  background: rgba(255,255,255,0.5);
  border: 1px solid var(--rule);
  position: relative;
  text-align: center;
}
figure.diagram::before {
  content: "DIAGRAM";
  position: absolute;
  top: -0.7rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--paper);
  padding: 0 0.65rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  color: var(--oxblood);
}
figure.diagram img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0.4rem auto 0;
  filter: contrast(1.04);
}
figure.diagram figcaption {
  margin-top: 0.9rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--paper-edge);
  display: flex;
  gap: 0.8rem;
  align-items: baseline;
  justify-content: center;
  font-family: var(--serif-body);
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--ink-soft);
  font-style: italic;
  text-wrap: balance;
  max-width: 56ch;
  margin-left: auto;
  margin-right: auto;
}
figure.diagram .diagram-label {
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--oxblood);
  white-space: nowrap;
  flex-shrink: 0;
}
figure.diagram .diagram-caption { text-align: left; }

/* ----------- Clickable diagram trigger ----------- */
figure.diagram .diagram-trigger {
  display: block;
  position: relative;
  background: none;
  text-decoration: none;
  cursor: zoom-in;
  transition: transform 140ms ease, filter 140ms ease;
}
figure.diagram .diagram-trigger:hover { transform: translateY(-1px); filter: contrast(1.08); }
figure.diagram .diagram-trigger:hover .diagram-expand-hint,
figure.diagram .diagram-trigger:focus-visible .diagram-expand-hint { opacity: 1; }
figure.diagram .diagram-trigger:focus-visible { outline: 2px solid var(--oxblood); outline-offset: 4px; }

.diagram-expand-hint {
  position: absolute;
  top: 0.7rem; right: 0.7rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--oxblood);
  padding: 0.25em 0.6em;
  opacity: 0;
  transition: opacity 140ms ease;
  pointer-events: none;
}

/* ----------- Lightbox (CSS-only :target overlay) ----------- */
/* The lightbox is a direct child of .article in the rendered HTML, so we
   must explicitly override the .article > * { max-width; margin } rule to
   break out of the centered reading column and truly fill the viewport. */
.article > .diagram-lightbox,
.diagram-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
.diagram-lightbox:target { display: flex; }

/* When a lightbox is open, lock body scroll using :has() so the viewport
   doesn't slide around behind the overlay. Graceful no-op in older browsers. */
body:has(.diagram-lightbox:target) { overflow: hidden; }

.diagram-lightbox-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: rgba(20,17,14,0.92);
  background-image:
    radial-gradient(circle at 22% 28%, rgba(110,27,31,0.08) 0, transparent 60%),
    radial-gradient(circle at 78% 72%, rgba(244,239,227,0.03) 0, transparent 55%);
  cursor: zoom-out;
  text-decoration: none;
}

.diagram-lightbox-frame {
  position: relative;
  /* Frame fills almost the full viewport now */
  width: min(98vw, 1600px);
  max-width: 98vw;
  max-height: 96vh;
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 1.6rem 1.8rem 1.2rem;
  box-shadow: 0 14px 50px rgba(0,0,0,0.5), 0 0 0 6px rgba(110,27,31,0.22);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow: auto;
  /* Subtle paper-texture on the open frame */
  background-image:
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(20,17,14,0.012) 31px 32px);
}

/* ---------- Zoom + pan controls on the lightbox ----------
   Radio buttons drive four zoom presets (Fit, 1.5x, 2.5x, 4x). The
   .diagram-lightbox-viewport is a fixed-size flex child with overflow:auto,
   so when the inner .scaler grows past 100% the user can pan with the mouse
   wheel, scrollbar drag, or touch swipe. No JS. */

.diagram-lightbox-frame > .z-state {
  /* Visually hidden but keyboard-reachable. Positioning is absolute so they
     don't claim layout space inside the flex column. */
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  pointer-events: none;
}

.diagram-lightbox-controls {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  flex-wrap: wrap;
  padding: 0.25rem 0;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.diagram-lightbox-controls .zbtn {
  display: inline-flex;
  align-items: center;
  padding: 0.38rem 0.85rem;
  background: var(--paper);
  border: 1px solid var(--paper-edge);
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  letter-spacing: 0.05em;
  font-weight: 500;
  text-transform: uppercase;
  font-feature-settings: "tnum", "lnum";
  transition: border-color 80ms, background 80ms, color 80ms;
}
.diagram-lightbox-controls .zbtn:hover {
  border-color: var(--oxblood);
  color: var(--oxblood);
}
.diagram-lightbox-controls .zbtn-hint {
  flex: 1;
  text-align: right;
  font-size: 0.72rem;
  font-style: italic;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
  text-transform: none;
  min-width: 12ch;
}

/* Active-state highlight on the currently-selected zoom button.
   :has() lets the frame-level state reach a sibling element. */
.diagram-lightbox-frame:has(.z-fit:checked) .zbtn-fit,
.diagram-lightbox-frame:has(.z-1_5:checked) [for$="-1_5"],
.diagram-lightbox-frame:has(.z-2_5:checked) [for$="-2_5"],
.diagram-lightbox-frame:has(.z-4:checked)   [for$="-4"] {
  background: var(--oxblood);
  border-color: var(--oxblood);
  color: var(--paper);
}

.diagram-lightbox-viewport {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  background: rgba(20,17,14,0.035);
  border: 1px solid var(--paper-edge);
  scrollbar-width: thin;
  scrollbar-color: var(--oxblood) var(--paper-edge);
  /* Hint at draggable content. Real click-drag is wired by /js/pan.js,
     which adds .is-dragging while the user is actively panning. */
  cursor: grab;
  user-select: none;
}
.diagram-lightbox-viewport.is-dragging,
.diagram-lightbox-viewport:active { cursor: grabbing; }
.diagram-lightbox-viewport.is-dragging img,
.diagram-lightbox-viewport.is-dragging .diagram-lightbox-scaler {
  pointer-events: none; /* Don't let the inner img steal the drag */
}
/* WebKit scrollbar styling so the pan affordance reads at a glance */
.diagram-lightbox-viewport::-webkit-scrollbar { width: 12px; height: 12px; }
.diagram-lightbox-viewport::-webkit-scrollbar-track { background: var(--paper-edge); }
.diagram-lightbox-viewport::-webkit-scrollbar-thumb {
  background: var(--oxblood);
  border: 2px solid var(--paper-edge);
}

.diagram-lightbox-scaler {
  display: block;
  /* Width is the zoom knob — driven by the four :has() rules below. */
  width: 100%;
  transition: width 220ms cubic-bezier(0.22, 0.61, 0.36, 1);
  margin: 0;
}

/* Zoom presets. "Fit" makes the image fill the viewport without overflow;
   the others scale relative to the viewport width so panning becomes the
   reading mode. */
.diagram-lightbox-frame:has(.z-fit:checked) .diagram-lightbox-scaler { width: 100%; }
.diagram-lightbox-frame:has(.z-1_5:checked) .diagram-lightbox-scaler { width: 150%; }
.diagram-lightbox-frame:has(.z-2_5:checked) .diagram-lightbox-scaler { width: 250%; }
.diagram-lightbox-frame:has(.z-4:checked)   .diagram-lightbox-scaler { width: 400%; }

.diagram-lightbox-frame img,
.diagram-lightbox-scaler > img {
  display: block;
  /* The img always fills its scaler. The scaler's width is the zoom level,
     so the image inherits the zoom. Height stays in proportion via auto. */
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0 auto;
  filter: contrast(1.04);
}
/* When the viewport mode is "Fit", clamp the image height so it doesn't
   overflow the viewport. At higher zooms, height is allowed to grow so the
   user can pan vertically. */
.diagram-lightbox-frame:has(.z-fit:checked) .diagram-lightbox-scaler > img {
  max-height: calc(96vh - 11rem);
  object-fit: contain;
}

.diagram-lightbox-caption {
  display: flex;
  gap: 0.8rem;
  align-items: baseline;
  justify-content: center;
  padding-top: 0.7rem;
  border-top: 1px solid var(--paper-edge);
  font-family: var(--serif-body);
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.4;
  color: var(--ink-soft);
  text-wrap: balance;
  max-width: 70ch;
  margin: 0 auto;
}

.diagram-lightbox-close {
  position: absolute;
  top: -0.7rem; right: -0.7rem;
  width: 2.2rem; height: 2.2rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--oxblood);
  color: var(--paper);
  font-family: var(--serif-display);
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1;
  text-decoration: none;
  border: 2px solid var(--paper);
  border-radius: 0;
  z-index: 2;
  transition: background 120ms ease, transform 120ms ease;
}
.diagram-lightbox-close:hover { background: var(--ink); transform: scale(1.06); }

/* Large-screen: leave a bit more breathing room around the frame */
@media (min-width: 1400px) {
  .diagram-lightbox-frame { width: min(96vw, 1600px); }
}

/* Mobile: full edge-to-edge */
@media (max-width: 640px) {
  .diagram-lightbox-frame {
    width: 100vw;
    max-width: 100vw;
    max-height: 100vh;
    padding: 1rem 1rem 0.75rem;
  }
  .diagram-lightbox-frame img { max-height: calc(100vh - 6rem); }
  .diagram-lightbox-close { top: 0.5rem; right: 0.5rem; }
  .diagram-expand-hint { font-size: 0.6rem; padding: 0.2em 0.5em; opacity: 1; }
}

/* ----------- Video player stacks (CSS-only seek via :target) -----------
   Each meeting has one default <video> plus one hidden <video> per
   timecode, each prebuilt with a #t=hh:mm:ss media fragment URI.
   Clicking a timecode anchor flips the URL hash to the targeted clip
   element; CSS :target then swaps which video is displayed. No scripts. */

.video-block { margin: 1.5rem 0 2rem; }

.player-stack { position: relative; }

.meeting-video {
  display: block;
  width: 100%;
  max-height: 70vh;
  background: #000;
  border: 1px solid var(--paper-edge);
  border-radius: 2px;
}

/* Hide all timecode-anchored clips by default */
.player-stack > .meeting-video.clip { display: none; }

/* Show a clip when its anchor is targeted by the URL fragment */
.player-stack > .meeting-video.clip:target { display: block; }

/* The default-clip element is shown unless a sibling clip is currently targeted.
   Uses :has() — Chrome 105+, Safari 15.4+, Firefox 121+. Older browsers fall
   through to "default-clip always shown" + "any targeted clip ALSO shown"
   which produces two stacked videos; the experience degrades gracefully. */
.player-stack:has(.clip:target) > .default-clip { display: none; }

/* "Jump to" details/summary block */
details.jumps {
  margin-top: 1rem;
  border-left: 3px solid var(--paper-edge);
  padding-left: 1rem;
  font-size: 0.95rem;
}
details.jumps > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ink);
  list-style: revert;        /* keep the disclosure triangle */
  margin-bottom: 0.4rem;
}
details.jumps ul {
  margin: 0.6rem 0 0;
  padding-left: 1.4rem;
  list-style: none;
}
details.jumps li { margin: 0.3rem 0; line-height: 1.45; }
details.jumps li a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--oxblood);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
details.jumps li a code {
  display: inline-block;
  min-width: 5.8em;
  font-family: var(--mono);
  font-size: 0.9em;
  color: var(--oxblood);
  margin-right: 0.5em;
}
details.jumps li a:hover { background: rgba(110, 27, 31, 0.13); color: var(--oxblood); }
details.jumps li a:hover code { color: var(--oxblood); }
details.jumps li.reset {
  margin-top: 0.7rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--paper-edge);
  font-style: italic;
  font-size: 0.88em;
}

/* ----------- Print styles ----------- */
@media print {
  body { background: #fff; }
  body::before { display: none; }
  .topbar, .footer { display: none; }
  a { color: var(--ink); text-decoration-color: var(--ink); }
}

/* ----------- Mobile ----------- */
@media (max-width: 640px) {
  html { font-size: 16.5px; }
  .banner h1 { font-size: 2.4rem; }
  .article > * { max-width: 100%; }
  .article p + p { text-indent: 1em; }
  .evidence dl { grid-template-columns: 1fr; gap: 0.05rem; }
  .evidence dt { margin-top: 0.45rem; }
}

/* ============================================================
   Site search — added 2026-05-18
   - Nav-bar input (every page) submits to /search/?q=
   - /search/ page uses search.js for live results
   - All styles self-hosted; CSP-compliant
   ============================================================ */

/* Visually hidden but available to screen readers */
.visually-hidden {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important;
  overflow: hidden !important; clip: rect(0,0,0,0) !important;
  white-space: nowrap !important; border: 0 !important;
}

/* ----------- Nav-bar search input ----------- */

.topbar-search {
  display: flex;
  align-items: center;
  margin-left: auto;
  margin-right: 0;
  padding-left: 0.6rem;
  gap: 0.25rem;
  flex: 0 0 auto;
}

.topbar-search-input {
  font-family: var(--serif-body);
  font-size: 0.86rem;
  line-height: 1.3;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--paper-edge);
  border-radius: 0;
  padding: 0.28rem 0.5rem;
  width: 12rem;
  max-width: 14rem;
  outline: none;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.topbar-search-input:focus {
  border-color: var(--oxblood);
  background: #FFFDF6;
}
.topbar-search-input::placeholder {
  color: var(--ink-soft);
  font-style: italic;
  opacity: 0.75;
}

.topbar-search-submit {
  font-family: var(--serif-display);
  font-size: 1rem;
  line-height: 1;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--paper-edge);
  border-left: none;
  padding: 0.32rem 0.55rem;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.topbar-search-submit:hover,
.topbar-search-submit:focus-visible {
  color: var(--oxblood);
  border-color: var(--oxblood);
  outline: none;
}

@media (max-width: 768px) {
  .topbar-search {
    order: 99;            /* push to bottom of mobile menu */
    width: 100%;
    padding: 0.6rem 0.85rem 0.4rem;
    margin: 0;
    border-top: 1px solid var(--paper-edge);
  }
  .topbar-search-input { width: 100%; max-width: none; }
}

/* ----------- /search/ page ----------- */

.search-chapter {
  max-width: var(--measure-wide);
  margin: 0 auto;
  padding: 1.5rem var(--space-page) 4rem;
}

.search-form {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  margin: 1.5rem 0 0.75rem;
  border: 1px solid var(--rule);
  padding: 0.35rem;
  background: var(--paper);
}

.search-input-page {
  flex: 1 1 auto;
  font-family: var(--serif-body);
  font-size: 1.1rem;
  line-height: 1.4;
  color: var(--ink);
  background: transparent;
  border: none;
  padding: 0.55rem 0.7rem;
  outline: none;
}
.search-input-page::placeholder {
  color: var(--ink-soft);
  font-style: italic;
}

.search-submit {
  font-family: var(--serif-display);
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--ink);
  color: var(--paper);
  border: none;
  padding: 0 1.25rem;
  cursor: pointer;
  transition: background 0.15s ease;
}
.search-submit:hover,
.search-submit:focus-visible {
  background: var(--oxblood);
  outline: none;
}

.search-status {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--ink-soft);
  margin: 0 0 1rem 0.25rem;
  min-height: 1.2em;
}

.search-results {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: search-rank;
}

.search-hit {
  counter-increment: search-rank;
  margin: 0 0 0.85rem;
  border-bottom: 1px dashed var(--paper-edge);
  position: relative;
}
.search-hit::before {
  content: counter(search-rank, decimal-leading-zero);
  position: absolute;
  left: -2.6rem;
  top: 0.45rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--ink-soft);
}
@media (max-width: 768px) {
  .search-hit::before { display: none; }
}

.search-link {
  display: block;
  padding: 0.6rem 0.4rem 0.85rem;
  color: var(--ink);
  text-decoration: none;
  transition: background 0.1s ease;
}
.search-link:hover,
.search-link:focus-visible {
  background: rgba(110, 27, 31, 0.04);
  outline: none;
}

.search-hit-head {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}

.search-title {
  font-family: var(--serif-display);
  font-size: 1.04rem;
  font-weight: 700;
  color: var(--ink);
  flex: 1 1 auto;
  min-width: 0;
}
.search-link:hover .search-title { color: var(--oxblood); }

.search-section {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--field);
  border: 1px solid var(--paper-edge);
  padding: 0.05rem 0.4rem;
  border-radius: 1px;
}

.search-score {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-soft);
  margin-left: auto;
}

.search-snippet {
  font-family: var(--serif-body);
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0.2rem 0 0;
}

.search-snippet mark,
.search-title mark {
  background: var(--tape);
  color: var(--ink);
  padding: 0 0.08em;
  text-decoration: none;
  font-weight: 600;
}

.search-help {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--paper-edge);
  font-size: 0.95rem;
  color: var(--ink-soft);
}
.search-help h2 {
  font-family: var(--serif-display);
  font-size: 1rem;
  color: var(--ink);
  margin-top: 1.5rem;
}
.search-help code {
  font-family: var(--mono);
  font-size: 0.88em;
  background: var(--paper-edge);
  padding: 0.05em 0.3em;
  border-radius: 1px;
}

/* ---------------------------------------------------------------
   Per-page glossary sidebar
   Rendered by layouts/partials/page-terms.html when a chapter front
   matter carries a `terms:` list of three or more glossary slugs.
   Desktop: floats right of the article column.
   Mobile (<=768px): collapses to a tappable <details> at the top of
   the article body. No JavaScript — native disclosure widget.
--------------------------------------------------------------- */

/* Per-page terms — horizontal grid above the article body.
   Replaces the prior 16rem right-floated aside, which fought with the
   article column width. The grid sits between the banner/TOC and the
   chapter content, matches --measure-wide width, and lays terms out
   into 2–4 auto-fit columns. No float, no inline-text wrap-around. */

.page-terms-wrap {
  display: block;
  margin: 1.5rem 0 2rem 0;
  padding: 0;
  max-width: var(--measure-wide);
}

.page-terms-summary {
  /* Desktop: hidden — the <h2> below is the section header.
     Mobile: surfaced as a tappable disclosure header (see media query). */
  display: none;
  list-style: none;
}
.page-terms-summary::-webkit-details-marker { display: none; }

.page-terms {
  float: none;
  width: auto;
  margin: 0;
  padding: 1.25rem 1.5rem 1.4rem;
  border: 1px solid var(--paper-edge);
  background: rgba(244, 239, 227, 0.55);
  font-family: var(--serif-body);
  font-size: 0.95rem;
  line-height: 1.5;
}

.page-terms h2 {
  margin: 0 0 0.85rem 0;
  padding: 0 0 0.55rem 0;
  font-family: var(--serif-display);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--paper-edge);
  text-align: left;
}

/* Scholarly-endnote glossary layout. Each .pt-row is a self-contained
   tile: numeral · TERM ↵ meaning. Numbered for scan-rhythm. Tight
   coupling between term and meaning — meaning hangs immediately under
   the term name with negligible margin. Generous inter-row gap carries
   the visual breathing rather than per-row borders. */

.page-terms-list {
  display: grid;
  grid-template-columns: 1fr;       /* default: single column */
  column-gap: 2.5rem;
  row-gap: 1.05rem;
  margin: 0;
  padding: 0;
}

.pt-row {
  /* Inner grid per term-tile: [hanging number] [term + meaning stacked]. */
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  column-gap: 0.55rem;
  align-items: baseline;
  break-inside: avoid;
}

.pt-num {
  grid-column: 1;
  grid-row: 1 / span 2;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--ink-soft);
  letter-spacing: 0.06em;
  text-align: right;
  user-select: none;
  /* Optical alignment: pull the numeral up so it sits flush with the
     cap-height of the term, not the median of the meaning row. */
  transform: translateY(0.1em);
  align-self: start;
  padding-top: 0.05em;
}

.pt-name {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--serif-display);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.15;
  letter-spacing: 0.005em;
  margin: 0;
}

.pt-name a {
  color: var(--ink);
  text-decoration: none;
  /* Hairline press-mark underline. Thickens on hover into the dossier accent. */
  border-bottom: 1px solid var(--paper-edge);
  padding-bottom: 0.05em;
  transition: color 0.12s ease, border-bottom-color 0.12s ease;
}
.pt-name a:hover,
.pt-name a:focus-visible {
  color: var(--oxblood);
  border-bottom-color: var(--oxblood);
  outline: none;
}

.pt-meaning {
  grid-column: 2;
  grid-row: 2;
  margin: 0.12em 0 0 0;            /* coupled tightly under the term */
  font-family: var(--serif-body);
  font-size: 0.88rem;
  line-height: 1.42;
  color: var(--ink-soft);
}

/* Wide desktop: two-column outer grid. The hanging-numeral / inner-pair
   structure inside each .pt-row keeps pairings stable across columns. */
@media (min-width: 980px) {
  .page-terms-list {
    grid-template-columns: 1fr 1fr;
  }
}

/* Very wide: three columns when there's room. */
@media (min-width: 1400px) {
  .page-terms-list {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.page-terms-foot {
  margin: 1rem 0 0 0;
  padding: 0.55rem 0 0 0;
  border-top: 1px solid var(--paper-edge);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-align: right;
}

.page-terms-foot a {
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1px dotted var(--ink-soft);
  background: transparent;
}
.page-terms-foot a:hover,
.page-terms-foot a:focus {
  color: var(--oxblood);
  border-bottom-color: var(--oxblood);
  background: transparent;
  outline: none;
}

/* Mobile: collapse the term grid to a single column with the <summary>
   acting as the disclosure header. Default outer grid is already
   single-column so we mostly tighten container chrome here. */
@media (max-width: 640px) {
  .page-terms-wrap {
    margin: 1rem 0 1.75rem;
  }
  .page-terms-summary {
    display: block;
    padding: 0.65rem 1rem;
    cursor: pointer;
    font-family: var(--serif-display);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-soft);
    border: 1px solid var(--paper-edge);
    background: rgba(244, 239, 227, 0.55);
  }
  .page-terms-summary::before {
    content: "❡  ";
    color: var(--oxblood);
    font-weight: 700;
  }
  .page-terms-wrap[open] .page-terms-summary {
    border-bottom: 0;
  }
  .page-terms {
    padding: 0.9rem 1rem 1rem;
    border-top: 0;
  }
  .page-terms h2 {
    display: none;          /* the <summary> stands in on mobile */
  }
  .pt-row {
    grid-template-columns: 1.85rem 1fr;
    column-gap: 0.45rem;
  }
  .pt-num {
    font-size: 0.68rem;
  }
}


/* ============================================================
   Floating reader tools — right-edge fixed button stack
   ============================================================ */

.floating-tools {
  position: fixed;
  right: clamp(0.6rem, 1.6vw, 1.5rem);
  bottom: clamp(0.8rem, 4vh, 2.5rem);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  z-index: 200;
  /* Keep the stack from being scaled by --font-scale; reader controls
     should stay a stable size even when body text is zoomed. */
  font-size: 16px;
}

.ft-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 3.15rem;
  height: 3.15rem;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--rule);
  font-family: var(--serif-display);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  list-style: none;             /* hide <summary> default disclosure triangle */
  /* Box-sizing so border doesn't blow out the 3.15rem dimension */
  box-sizing: border-box;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
  overflow: hidden;             /* belt-and-suspenders: clip any glyph descender */
}
.ft-btn::-webkit-details-marker { display: none; }
.ft-btn:hover,
.ft-btn:focus-visible {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  outline: none;
}
.ft-btn[disabled],
.ft-btn[aria-disabled="true"] {
  opacity: 0.4;
  cursor: not-allowed;
  background: var(--paper);
  color: var(--ink);
  border-color: var(--paper-edge);
}

.ft-glyph {
  /* Uniform glyph box: explicit dimensions + flex centering ensures every
     button's glyph (❡, A+, A−, ⤓) renders at the same visual weight inside
     its 3.15rem button, regardless of intrinsic ascender/descender metrics. */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.55rem;
  height: 1.55rem;
  font-size: 1.3rem;
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: center;
}
.ft-glyph sup {
  font-size: 0.62em;
  line-height: 0;
  vertical-align: super;
  margin-left: 0.02em;
  font-weight: 600;
}

.ft-label {
  font-family: var(--mono);
  font-size: 0.62rem;
  line-height: 1;
  margin-top: 0.22rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.78;
}

/* Glossary popout — opens to the LEFT of the button stack when expanded.
   Uses native <details> open state; no JS toggle required. */
.ft-glossary { position: relative; }
.ft-glossary .ft-btn-glossary {
  /* The summary IS the button; remove the default marker. */
  display: flex;
}
.ft-glossary[open] .ft-btn-glossary {
  background: var(--oxblood);
  color: var(--paper);
  border-color: var(--oxblood);
}
.ft-popout-glossary {
  position: absolute;
  right: calc(100% + 0.6rem);
  bottom: 0;
  width: min(22rem, calc(100vw - 4rem));
  max-height: min(70vh, 36rem);
  overflow-y: auto;
  padding: 0.95rem 1.05rem 1rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  box-shadow: 0 6px 24px rgba(20, 17, 14, 0.18);
  font-family: var(--serif-body);
  font-size: 0.92rem;
  line-height: 1.4;
}
.ft-popout-head {
  margin-bottom: 0.55rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--paper-edge);
}
.ft-popout-head h2 {
  font-family: var(--serif-display);
  font-size: 0.95rem;
  margin: 0 0 0.2rem;
  letter-spacing: 0.02em;
}
.ft-popout-sub {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
  margin: 0;
  text-transform: uppercase;
}
.ft-popout-sub em {
  font-style: italic;
  text-transform: none;
}

.ft-popout-list {
  margin: 0;
  padding: 0;
}
.ft-popout-list dt {
  font-family: var(--serif-display);
  margin-top: 0.55rem;
}
.ft-popout-list dt:first-child { margin-top: 0; }
.ft-popout-list dt a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px dotted var(--ink-soft);
}
.ft-popout-list dt a:hover {
  color: var(--oxblood);
  border-bottom-color: var(--oxblood);
}
.ft-popout-list dd {
  margin: 0.1rem 0 0;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.ft-popout-foot {
  margin: 0.85rem 0 0;
  padding-top: 0.55rem;
  border-top: 1px solid var(--paper-edge);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
}
.ft-popout-foot a {
  color: var(--oxblood);
  text-decoration: none;
  text-transform: uppercase;
}
.ft-popout-foot a:hover {
  text-decoration: underline;
}

/* Print: hide the floating tools entirely. */
@media print {
  .floating-tools { display: none !important; }
}

/* Mobile: shrink the stack, drop the label, and pin the popout above
   the button (the left-side popout would overflow narrow viewports). */
@media (max-width: 640px) {
  .floating-tools {
    right: 0.45rem;
    bottom: 0.65rem;
    gap: 0.32rem;
  }
  .ft-btn {
    width: 2.7rem;
    height: 2.7rem;
  }
  .ft-glyph {
    width: 1.4rem;
    height: 1.4rem;
    font-size: 1.15rem;
  }
  .ft-label { display: none; }
  .ft-popout-glossary {
    right: 0;
    bottom: calc(100% + 0.5rem);
    width: min(20rem, calc(100vw - 1rem));
    max-height: 60vh;
  }
}

/* ============================================================
   Monero donation card (on /donate/)
   ============================================================ */

.monero-card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--rule);
  background: var(--paper);
  margin: 1.25rem 0 2rem;
  max-width: 52rem;
}

.monero-logo {
  flex: 0 0 auto;
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.monero-logo svg {
  width: 100%;
  height: 100%;
}

.monero-address-block {
  flex: 1 1 auto;
  min-width: 0;
}

.monero-address {
  display: block;
  font-family: var(--mono);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--ink);
  word-break: break-all;
  user-select: all;       /* triple-click selects the whole address */
  padding: 0.5rem 0.75rem;
  background: rgba(20, 17, 14, 0.04);
  border: 1px dashed var(--paper-edge);
}

@media (max-width: 640px) {
  .monero-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 1rem 1rem;
  }
  .monero-logo {
    width: 3.25rem;
    height: 3.25rem;
  }
  .monero-address {
    font-size: 0.72rem;
  }
}

/* =====================================================================
   .quote-clip — auto-injected by the transcripts pipeline above each
   verbatim H3 quote in /transcripts/. The block is small intentionally;
   the source video is full-meeting and lives at /videos/<basename>.mp4.
   These clips are stream-copied excerpts (./clips/) with ~3 s of buffer
   before and after the cited VTT range, so seeking inside the clip is
   accurate and the on-disk footprint is small.

   Visually modelled after figure.diagram + .meeting-video — a labelled,
   centred, paper-edged frame with an italic figcaption.
   ===================================================================== */
figure.quote-clip {
  margin: 1.4rem auto 1.8rem;
  padding: 0.9rem 1rem 0.7rem;
  background: rgba(255,255,255,0.5);
  border: 1px solid var(--rule);
  position: relative;
  max-width: 56rem;
}
figure.quote-clip::before {
  content: "CLIP";
  position: absolute;
  top: -0.65rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--paper);
  padding: 0 0.55rem;
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: var(--oxblood);
}
figure.quote-clip video {
  display: block;
  width: 100%;
  max-height: 60vh;
  background: #000;
  border: 1px solid var(--paper-edge);
  border-radius: 2px;
}
figure.quote-clip figcaption {
  margin-top: 0.55rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--paper-edge);
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  text-align: center;
}
/* When two clips share a heading (e.g. Ord 6790, twice the same night),
   collapse the vertical margin so the pair reads as one figure group. */
figure.quote-clip + figure.quote-clip { margin-top: 0.6rem; }

/* "Jump to HH:MM:SS in full meeting" link, sits beneath the clip's
   figcaption inside the same figure.quote-clip block. */
figure.quote-clip .quote-jump {
  margin: 0.4rem 0 0;
  text-align: center;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
figure.quote-clip .quote-jump a {
  color: var(--oxblood);
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}
figure.quote-clip .quote-jump a:hover,
figure.quote-clip .quote-jump a:focus-visible {
  color: var(--ink);
  border-bottom-style: solid;
}

/* Utility classes added to retire inline style= attributes.
   Inline styles violate the strict CSP (style-src 'self'); these classes
   are reachable from the stylesheet and need no 'unsafe-inline'. */
.pt-2 { padding-top: 2rem; }
.pt-1_5 { padding-top: 1.5rem; }
.lede-roman { font-style: normal; }
.col-deficit { color: var(--oxblood); }