/* ==========================================================================
   THE BILLIONAIRE VETO — design system v2 "The Terminal"
   --------------------------------------------------------------------------
   This is NOT the Facts Over Fury stylesheet. v1 inherited FOF's paper/ink
   system verbatim and the two brands became indistinguishable. FOF is an
   essay project — warm paper, prose, an ink stamp on a document. This is a
   ledger: a register of figures, read in columns. It should look like an
   instrument, not an article.

   What still ties the brands together (deliberately, per §1.4 "FOF's visual
   system is distinct from every other brand — keep it that way"):
     · the same red family, inverted for a dark ground
     · the same three typefaces
     · the same editorial discipline: no animation, no gradients, no glow

   Colour, verified with the dataviz six-checks validator on ground #0A0C0D:
     ink  #E9E6DD  15.71:1 contrast
     money #D4564D  4.89:1 contrast · CVD dE 30.7 (deutan), 34.7 (normal)
   BRAND-SPEC documents #C44848 as the dark-background oxblood. That value is
   4.08:1 — fine for large display figures, but short of the 4.5:1 body-text
   floor, and the register sets figures at body size. #D4564D is the same red
   stepped one notch to clear it everywhere.
   ========================================================================== */

:root {
  /* Ground */
  --ground:    #0A0C0D;   /* page */
  --ground-2:  #14181A;   /* alternating rows, callouts, raised blocks */
  --ground-3:  #1E2325;   /* meter tracks, inert fills */

  /* Rules */
  --line:        rgba(233, 230, 221, 0.14);
  --line-strong: rgba(233, 230, 221, 0.34);

  /* Ink */
  --ink:    #E9E6DD;      /* primary — warm pale, a deliberate echo of FOF paper */
  --ink-2:  #9BA3A4;      /* secondary prose */
  --muted:  #6B7375;      /* labels, metadata */

  /* The one accent */
  --money:  #D4564D;

  /* Type */
  --serif: "Source Serif 4", "Source Serif Pro", Charter, Georgia, serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Layout */
  --measure: 36rem;
  --wide:    68rem;
  --gutter:  clamp(1.25rem, 4vw, 2.5rem);

  /* Motion: none. The site is a record, not an app. */
}

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

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px;
    text-decoration-thickness: 1px; text-decoration-color: var(--line-strong); }
a:hover { color: var(--money); text-decoration-color: var(--money); }

::selection { background: var(--money); color: var(--ground); }

/* ---------- Layout ---------- */

.container { width: 100%; max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); }
/* Everything hangs off one left rule. A register is read down a single
   edge; centred prose would give the page two competing grids. */
.prose { max-width: var(--measure); margin-left: 0; margin-right: auto; }

section { padding: clamp(3.5rem, 7vw, 6rem) 0; }

hr.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }
hr.rule.strong { border-top-color: var(--line-strong); }

/* ---------- Type ---------- */

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 900; line-height: 1.05;
  letter-spacing: -0.01em; margin: 0 0 1rem; }

h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); margin-top: 0; }
h3 { font-size: 1.25rem; font-weight: 700; }

p { margin: 0 0 1.15rem; }
p:last-child { margin-bottom: 0; }

.lede { font-size: 1.2rem; line-height: 1.55; color: var(--ink-2); max-width: 34em; }

.eyebrow {
  font-family: var(--mono); font-size: 0.7rem; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--money); margin: 0 0 1.1rem;
}

.kicker { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.08em; margin-top: 2rem; }

blockquote {
  margin: 2rem 0; padding: 0 0 0 1.25rem;
  border-left: 2px solid var(--money);
  font-style: italic; color: var(--ink-2);
}

strong { font-weight: 700; color: var(--ink); }

sup.fn { font-family: var(--mono); font-size: 0.62rem; }
sup.fn a { text-decoration: none; color: var(--money); }

/* ---------- Header ---------- */

.site-header { border-bottom: 1px solid var(--line-strong); }
.site-header .container {
  display: flex; justify-content: space-between; align-items: center;
  gap: 1.5rem; padding-top: 1.35rem; padding-bottom: 1.35rem;
}

.wordmark {
  display: flex; align-items: center; gap: 0.7rem;
  font-family: var(--mono); font-size: 0.78rem; font-weight: 500;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
}
.wordmark .mark { width: 26px; height: 26px; flex: none; }
.wordmark:hover { color: var(--money); }

.nav { display: flex; gap: 1.6rem; font-family: var(--mono);
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; }
.nav a { color: var(--muted); text-decoration: none; padding-bottom: 2px; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); border-bottom: 1px solid var(--money); }

/* ---------- Hero ---------- */

.hero { padding-top: clamp(4rem, 9vw, 7.5rem); padding-bottom: clamp(4rem, 9vw, 7rem); }
.hero h1 { max-width: 14ch; }
.hero .lede { margin-top: 1.6rem; }
.hero .cta-row { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2.5rem; }

.btn {
  display: inline-block; font-family: var(--mono); font-size: 0.72rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none;
  padding: 0.85rem 1.35rem; border: 1px solid var(--ink);
  background: var(--ink); color: var(--ground);
}
.btn:hover { background: var(--money); border-color: var(--money); color: var(--ground); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn.ghost:hover { background: transparent; color: var(--money); border-color: var(--money); }

/* ---------- Register (ledger index) ---------- */

.ledger-table { width: 100%; border-collapse: collapse; margin: 2.5rem 0 1rem;
  font-family: var(--mono); font-size: 0.82rem; }

.ledger-table caption {
  text-align: left; font-family: var(--mono); font-size: 0.66rem;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted);
  padding-bottom: 1rem;
}

.ledger-table th {
  text-align: left; font-size: 0.62rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted);
  padding: 0 1rem 0.7rem 0; border-bottom: 1px solid var(--line-strong); white-space: nowrap;
}
.ledger-table th.num, .ledger-table td.num {
  text-align: right; font-variant-numeric: tabular-nums;
}

.ledger-table td { padding: 1.1rem 1rem 1.1rem 0; border-bottom: 1px solid var(--line);
  vertical-align: baseline; }
.ledger-table tbody tr:nth-child(even) td { background: var(--ground-2); }
.ledger-table tbody tr:hover td { background: var(--ground-3); }

.ledger-no { color: var(--muted); white-space: nowrap; }
.ledger-policy { font-family: var(--serif); font-size: 1.02rem; }
.ledger-policy a { text-decoration: none; }
.ledger-policy a:hover { color: var(--money); }
.ledger-support, .ledger-spend { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ledger-spend { color: var(--money); }
.ledger-srccount { color: var(--muted); white-space: nowrap; }

/* ---------- Outcome chip (status never rides on colour alone) ---------- */

.outcome {
  display: inline-block; font-family: var(--mono); font-size: 0.6rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.3rem 0.55rem; border: 1px solid currentColor; white-space: nowrap;
  color: var(--muted);
}
.outcome--blocked  { color: var(--money); }
.outcome--weakened { color: var(--ink-2); }
.outcome--enacted  { color: var(--muted); }

/* ---------- Stat tiles ---------- */

.entry-tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 3rem; margin: 3rem 0; padding: 2.25rem 0;
  border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line);
}

.stat-label { font-family: var(--mono); font-size: 0.64rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.9rem; }

.stat-value { font-family: var(--mono); font-size: clamp(2.8rem, 6vw, 4rem);
  line-height: 0.9; font-weight: 500; letter-spacing: -0.03em; color: var(--ink); margin: 0; }
.stat-value--spend { color: var(--money); }

.stat-note { font-family: var(--mono); font-size: 0.68rem; line-height: 1.65;
  letter-spacing: 0.02em; color: var(--muted); margin-top: 1rem; }
.stat-note a { color: var(--ink-2); }
.stat-note a:hover { color: var(--money); }

/* ---------- Meter: one ratio against a limit ---------- */

.meter { margin-top: 1.1rem; }
.meter-track { position: relative; height: 10px; background: var(--ground-3); overflow: hidden; }
.meter-fill { height: 100%; background: var(--ink); border-radius: 0 3px 3px 0; }
.meter-scale { display: flex; justify-content: space-between; font-family: var(--mono);
  font-size: 0.58rem; letter-spacing: 0.14em; color: var(--muted); margin-top: 0.45rem; }

/* ---------- Article ---------- */

.article { padding: clamp(3rem, 6vw, 5rem) 0; }
.article-header { max-width: var(--measure); margin: 0 0 2.5rem; }
.article-header h1 { font-size: clamp(2rem, 4.6vw, 3.25rem); }
.article-header .lede { margin-top: 1.25rem; }
.article-body { max-width: var(--measure); margin: 0; }
.article-body h2 { font-size: 1.5rem; margin-top: 3rem; }
.article-body ol, .article-body ul { padding-left: 1.25rem; margin: 0 0 1.15rem; }
.article-body li { margin-bottom: 0.55rem; }
.article-body li::marker { color: var(--money); }

.entry-meta { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 1rem; }

.actor-list { margin: 2.5rem 0; }
.actor-list dt { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted); margin-top: 1.4rem; }
.actor-list dd { margin: 0.45rem 0 0; }

.sources-list { font-size: 0.92rem; color: var(--ink-2); }
.sources-list a { word-break: break-word; font-family: var(--mono); font-size: 0.82rem; }

/* ---------- Blocks ---------- */

.thesis-callout, .counter {
  background: var(--ground-2); border-left: 2px solid var(--money);
  padding: 1.6rem 1.75rem; margin: 2.5rem 0;
}
.thesis-callout .label, .counter .label {
  font-family: var(--mono); font-size: 0.64rem; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--money); margin: 0 0 0.8rem;
}
.thesis-callout p, .counter p { color: var(--ink-2); }

.code-list { list-style: none; padding: 0; margin: 1.5rem 0; }
.code-list li { padding: 0.85rem 0 0.85rem 1.6rem; border-bottom: 1px solid var(--line);
  position: relative; color: var(--ink-2); }
.code-list li:last-child { border-bottom: 0; }
.code-list li::before { content: "—"; position: absolute; left: 0; color: var(--money);
  font-family: var(--mono); }

.corrections { border-top: 1px solid var(--line); margin-top: 3rem; padding-top: 1.4rem; }
.corrections .label { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 0.8rem; }
.corrections ol { margin: 0; padding-left: 1.1rem; }
.corrections li { font-size: 0.9rem; color: var(--ink-2); margin-bottom: 0.5rem; }
.corrections .none { font-size: 0.9rem; color: var(--muted); font-style: italic; }

.ledger-empty { border: 1px solid var(--line); background: var(--ground-2);
  padding: 3rem 2.5rem; text-align: center; margin: 2.5rem 0; }
.ledger-empty .label { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 1rem; }
.ledger-empty p { max-width: var(--measure); margin: 0 auto; color: var(--ink-2); }

/* ---------- Subscribe ---------- */

.subscribe { border-top: 1px solid var(--line-strong); }
.subscribe .container { max-width: var(--measure); }
.subscribe-meta { font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em;
  color: var(--muted); margin-top: 1.25rem; }

/* ---------- Footer ---------- */

.site-footer { border-top: 1px solid var(--line-strong); padding: 3rem 0 4rem; }
.site-footer .container { display: flex; justify-content: space-between; gap: 2.5rem;
  flex-wrap: wrap; }
.site-footer .col { font-family: var(--mono); font-size: 0.7rem; line-height: 1.9;
  color: var(--muted); max-width: 32ch; }
.site-footer .col p { margin: 0 0 0.35rem; }
.site-footer a { color: var(--ink-2); text-decoration: none; }
.site-footer a:hover { color: var(--money); }
.site-footer .skeptical { font-family: var(--serif); font-style: italic;
  font-size: 1rem; color: var(--ink); margin-bottom: 0.8rem; }

/* ---------- Mobile ---------- */

@media (max-width: 720px) {
  .site-header .container { flex-direction: row; gap: 1rem; }
  .nav { gap: 1rem; font-size: 0.62rem; }
  .entry-tiles { grid-template-columns: 1fr; gap: 2.25rem; }
  .site-footer .container { flex-direction: column; }

  /* The register stops being a table and becomes stacked records. */
  .ledger-table, .ledger-table tbody, .ledger-table tr, .ledger-table td { display: block; width: 100%; }
  .ledger-table thead { display: none; }
  .ledger-table tbody tr { border-bottom: 1px solid var(--line-strong); padding: 1.15rem 0; }
  .ledger-table tbody tr:nth-child(even) td { background: transparent; }
  .ledger-table td { border: 0; padding: 0.2rem 0; text-align: left !important; }
  .ledger-table td[data-label]::before {
    content: attr(data-label) " ";
    font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase;
    color: var(--muted); margin-right: 0.5rem;
  }
}