/* ═══════════════════════════════════════════════════════════════════════
   TriageForge — "Annual Report" theme (v5, 2026-09-14)
   Brings every remaining page into the register of the redesigned
   homepage: white paper, near-black ink, one oxblood spot colour,
   Bodoni Moda headings over IBM Plex Sans body.
   Loaded AFTER each page's own <style> block, so it wins the cascade.
   The pages' own stylesheets are left untouched.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --paper:#ffffff; --paper-2:#f6f5f3; --surface:#f6f5f3; --bg:#ffffff; --bg-alt:#f6f5f3;
  --ink:#0d0d0f; --ink-2:#4a4a4e; --text:#0d0d0f; --muted:#6a6a6e; --faint:#8b8b90; --ink-3:#8b8b90;
  --rule:#d8d7d3; --rule-2:#b3b2ae; --border:#d8d7d3;
  --spot:#8c1f28; --accent:#8c1f28; --accent-hover:#6f1820; --accent-soft:#faf2f3;
  --pro-accent:#8c1f28; --beta:#8c1f28; --success:#1f7a4d;
  --serif:"Bodoni Moda",Didot,"Times New Roman",serif;
  --sans:"IBM Plex Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-body:"IBM Plex Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --radius:0px; --radius-sm:0px; --radius-lg:0px;
  --shadow-sm:none; --shadow-md:none; --shadow-lg:none;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0d0d0f; --paper-2:#151517; --surface:#151517; --bg:#0d0d0f; --bg-alt:#151517;
    --ink:#f4f3f1; --ink-2:#adadb1; --text:#f4f3f1; --muted:#a2a2a6; --faint:#77777c; --ink-3:#77777c;
    --rule:#26262a; --rule-2:#3d3d42; --border:#26262a;
    --spot:#e0707a; --accent:#e0707a; --accent-hover:#eb8f97; --accent-soft:#1c1416;
  }
}
[data-theme="dark"]{
  --paper:#0d0d0f; --paper-2:#151517; --surface:#151517; --bg:#0d0d0f; --bg-alt:#151517;
  --ink:#f4f3f1; --ink-2:#adadb1; --text:#f4f3f1; --muted:#a2a2a6; --faint:#77777c; --ink-3:#77777c;
  --rule:#26262a; --rule-2:#3d3d42; --border:#26262a;
  --spot:#e0707a; --accent:#e0707a; --accent-hover:#eb8f97; --accent-soft:#1c1416;
}

/* ── base ──────────────────────────────────────────────────────── */
html{background:var(--paper)}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16.5px;line-height:1.6;font-weight:400;letter-spacing:0}
a{color:inherit;text-decoration:none;border-bottom:1px solid var(--rule-2)}
a:hover{color:var(--spot);border-bottom-color:var(--spot);background:transparent}
strong{color:var(--ink);font-weight:600}
em{font-style:italic}
code,pre,kbd{font-family:"IBM Plex Mono",ui-monospace,Menlo,monospace}
::selection{background:var(--spot);color:#fff}

/* ── headings: Bodoni, light, italic for the big ones ──────────── */
h1,.hero h1,.page-hero h1{
  font-family:var(--serif);font-weight:400;font-style:italic;letter-spacing:-.015em;line-height:1.06;
  color:var(--ink);font-size:clamp(30px,4.2vw,50px);margin:0 0 18px;text-wrap:balance;
}
h2,.section-heading{
  font-family:var(--serif);font-weight:400;font-style:italic;letter-spacing:-.01em;line-height:1.1;
  color:var(--ink);font-size:clamp(24px,3vw,34px);margin:2em 0 .6em;
}
h3{font-family:var(--sans);font-weight:600;font-style:normal;font-size:1.12rem;letter-spacing:0;line-height:1.35;color:var(--ink);margin:1.9em 0 .5em}
h4,h5{font-family:var(--sans);font-weight:600;letter-spacing:0;color:var(--ink)}

p,li{color:var(--ink-2)}
ul,ol{padding-left:1.15rem}
li{margin-bottom:.45em}

/* ── running head (article pages) ──────────────────────────────── */
.site-header{background:var(--paper);border-bottom:1px solid var(--rule);position:sticky;top:0;z-index:30}
.site-header-inner{max-width:1180px;margin:0 auto;padding:0 44px;min-height:58px;display:flex;
  align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.wordmark{font-family:var(--serif);font-weight:400;font-style:normal;font-size:17px;letter-spacing:.01em;
  color:var(--ink);border:0;text-transform:none}
.wordmark .dot{color:var(--spot)}
.wordmark:hover{color:var(--spot)}
.back-link{font-family:var(--sans);font-size:12.5px;font-weight:400;letter-spacing:0;text-transform:none;
  color:var(--ink-2);border:0;min-height:40px;display:inline-flex;align-items:center}
.back-link:hover{color:var(--spot);background:transparent;border:0}

/* ── article body ──────────────────────────────────────────────── */
main{max-width:760px;margin:0 auto;padding:56px 44px 72px;background:var(--paper)}
.kicker,.doc-label,.section-label,.hero-eyebrow{
  display:inline-block;font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);background:transparent;border:0;border-radius:0;
  padding:0 0 0 38px;position:relative;margin-bottom:18px;
}
.kicker::before,.doc-label::before,.section-label::before,.hero-eyebrow::before{
  content:"";position:absolute;left:0;top:50%;width:26px;height:2px;background:var(--spot);
}
.standfirst,.hero-sub,.section-sub{
  font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(18px,2vw,22px);
  line-height:1.4;color:var(--ink-2);margin-bottom:26px;max-width:46ch;
}
.article-meta{font-family:var(--sans);font-size:12.5px;color:var(--ink-3);letter-spacing:0;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:12px 0;margin-bottom:34px;line-height:1.6}
.article-meta a{color:var(--ink-2);border-bottom:1px solid var(--rule-2)}
.article-meta a:hover{color:var(--spot);border-bottom-color:var(--spot)}

/* ── callouts, quotes, tables ──────────────────────────────────── */
.callout{background:var(--paper-2);border:1px solid var(--rule);border-left:3px solid var(--spot);
  border-radius:0;box-shadow:none;padding:20px 22px;margin:28px 0}
.callout strong{color:var(--ink)}
blockquote{border-left:3px solid var(--spot);background:transparent;margin:26px 0;padding:2px 0 2px 20px;
  font-family:var(--serif);font-style:italic;color:var(--ink-2)}
.timeline{border-collapse:collapse;width:100%;margin:26px 0;font-size:14.5px}
.timeline th,.timeline td{border-bottom:1px solid var(--rule);padding:10px 12px 10px 0;text-align:left;vertical-align:top}
.timeline th{font-family:var(--sans);font-weight:600;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);border-bottom:1px solid var(--ink)}
.timeline .date,.date{font-variant-numeric:tabular-nums;color:var(--ink-3);white-space:nowrap}

/* ── code ──────────────────────────────────────────────────────── */
pre,.code-block,.code-col,.code-block-wrap{border-radius:0;box-shadow:none;border:1px solid var(--rule)}
.code-block-header,.code-file-name{font-family:"IBM Plex Mono",monospace;font-size:11.5px;letter-spacing:.04em}
code{font-size:.92em}

/* ── post footer / site footer ─────────────────────────────────── */
.post-footer{background:var(--paper-2);border:1px solid var(--rule);border-radius:0;box-shadow:none;
  padding:24px 26px;margin:44px 0 0}
.post-footer h3{margin-top:0;font-size:1.02rem}
.post-footer p{font-size:15px}
footer.site,.site-footer{background:var(--paper);color:var(--ink-2);border-top:1px solid var(--rule);
  padding:26px 44px 44px;font-size:12.5px}
footer.site a,.site-footer a{color:var(--ink-2);border:0;min-height:40px;display:inline-flex;align-items:center}
footer.site a:hover,.site-footer a:hover{color:var(--spot)}

/* ── the one page still on the product stylesheet (research.html) ── */
.beta-banner{display:none}
.nav{background:var(--paper);border-bottom:1px solid var(--rule);box-shadow:none}
.nav.scrolled{box-shadow:none;background:var(--paper)}
.nav-inner{max-width:1180px;padding:0 44px;min-height:58px}
.nav-brand .brand-name{font-family:var(--serif);font-weight:400;font-size:17px;letter-spacing:.01em;color:var(--ink)}
.nav-brand .brand-sub{font-family:var(--sans);font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3)}
.nav-links a{font-family:var(--sans);font-size:12.5px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink-2);border:0}
.nav-links a:hover{color:var(--spot)}
.btn,.btn-primary,.btn-ghost,.nav-cta{
  font-family:var(--sans);font-weight:600;font-size:14px;border-radius:0;box-shadow:none;letter-spacing:0;
  padding:11px 18px;min-height:42px;display:inline-flex;align-items:center;
}
.btn-primary,.nav-cta{background:var(--spot);border:1px solid var(--spot);color:#fff}
.btn-primary:hover,.nav-cta:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#fff;transform:none;box-shadow:none}
.btn-ghost{background:transparent;border:1px solid var(--ink);color:var(--ink)}
.btn-ghost:hover{background:transparent;border-color:var(--spot);color:var(--spot);transform:none}
.page-hero,.hero{background:var(--paper);border-bottom:1px solid var(--rule)}
.container,.container-prose{max-width:1180px;padding-left:44px;padding-right:44px}
.section{background:var(--paper)}
.section-alt{background:var(--paper-2)}
.card,.step-card,.math-card{background:var(--paper-2);border:1px solid var(--rule);border-radius:0;box-shadow:none}
.card:hover{transform:none;box-shadow:none;border-color:var(--rule-2)}
.card-icon,.feat-icon{color:var(--spot)}
.proof-tag,.badge-beta,.plan-badge,.step-stage-tag,.card-stage{
  font-family:var(--sans);font-weight:600;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  background:var(--paper-2);color:var(--ink-2);border:1px solid var(--rule);border-radius:0;padding:3px 7px;
}
.stat-value{font-family:var(--serif);font-weight:400;letter-spacing:-.02em;color:var(--ink)}
.stat-label{font-family:var(--sans);font-size:12px;color:var(--ink-3);letter-spacing:0;text-transform:none}
.stats-bar{background:var(--paper-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}

/* ── mobile: touch targets and gutters ─────────────────────────── */
@media (max-width:768px){
  main{padding:40px 22px 56px}
  .site-header-inner,.nav-inner,.container,.container-prose{padding-left:22px;padding-right:22px}
  footer.site,.site-footer{padding:24px 22px 40px}
  .site-header-inner{min-height:auto;padding-top:10px;padding-bottom:10px}
  .callout{padding:18px 16px}
  .timeline{font-size:13.5px}
  .timeline th,.timeline td{padding:9px 8px 9px 0}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ── wide content must scroll in its own box, never the page ───── */
pre,.code-block,.code-col{overflow-x:auto;max-width:100%}
@media (max-width:820px){
  /* a wide data table was forcing horizontal scroll on the whole page.
     Constrain it to the container and let cells wrap, rather than scroll. */
  table{width:100%;max-width:100%;table-layout:fixed;border-collapse:collapse}
  table th,table td{word-break:normal;overflow-wrap:anywhere;hyphens:auto;padding-right:8px}
  .timeline .date,.date{white-space:normal}
  table code{white-space:normal;overflow-wrap:anywhere}
}
