/* EntryLedger blog styles
   Loaded ONLY on /blog/* pages, after assets/site.css.
   Tokens: paper #faf8f3, ink #16211c, ledger green #1d6f4f, marigold #e09f3e, rule #d8d6cd.
   World: a well-kept Indian ledger — paper, ruled lines, perforations, mono labels.
   No gradients, no glass, no card soup, no dark mode (DESIGN.md). */

:root{
  --paper:#faf8f3; --surface:#ffffff; --tint:#e4efe9;
  --ink:#16211c; --ink2:#3d4a43; --muted:#606d67;          /* #606d67 = 5.10:1 on paper (AA); was #6b7a72 (4.25) */
  --ledger:#1d6f4f; --ledger-deep:#14523a; --ledger-bright:#2a8c66; --ledger-soft:#e4efe9;
  --marigold:#e09f3e; --marigold-deep:#b8791f; --marigold-soft:#fdf3e3;
  --line:#d8d6cd; --line-soft:#e8e6de;
  --red:#b3402e; --red-soft:#f9e9e5; --red-line:#e9c9c4;
  --radius:12px;
  --measure:66ch;            /* reading measure floor: 65-75ch */
  --bleed:clamp(0px, 4vw, 64px);
  --rail:260px;
  --panel:1040px;
}

/* ---------- hero: ruled paper + perforated tear (feint lines on a large surface) ---------- */
.blog-hero{
  padding-bottom:0;
  background:
    linear-gradient(to bottom, var(--paper) 0 40px, transparent 40px),
    var(--ledger-lines);
  background-size: 100% 40px, 100% 32px;
  background-position: 0 0, 0 12px;
  position:relative;
}
.blog-hero .wrap{ position:relative; }
.blog-hero::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:14px;
  background-image: var(--perf);
  background-size: 11px 8px; background-repeat: repeat-x; background-position: center;
  opacity:.9;
}
.blog-breadcrumb{ margin-bottom:10px; }
.blog-breadcrumb a{ color:var(--ledger); text-decoration:none; font-weight:600 }
.blog-breadcrumb a:hover{ text-decoration:underline }
.blog-breadcrumb .sep{ opacity:.5; }
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font:600 var(--step--2)/1 var(--mono); letter-spacing:.15em; text-transform:uppercase;
  color:var(--ledger);
  background:var(--tint); border:1px solid var(--ledger-soft); border-radius:999px;
  padding:6px 11px; margin-bottom:16px;
}
.eyebrow::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--marigold); }
.blog-hero h1{ margin-top:4px; margin-bottom:10px; text-wrap:balance; }
.lede{ color:var(--ink2); font-size:17px; line-height:1.65; max-width:70ch; text-wrap:pretty; }
.byline{ display:flex; align-items:flex-start; gap:12px; margin-top:16px; flex-wrap:wrap; }
.byline .avatar{ width:36px; height:36px; border-radius:50%; background:var(--ledger); color:#fff; display:grid; place-items:center; font-weight:700; font-size:13px; font-family:var(--mono); }
.byline .who b{ display:block; font-size:13.5px; color:var(--ink); }
.byline .who span{ font-size:12px; color:var(--muted); display:block; }
.byline .who .rd-facts{
  margin-top:3px; padding-top:5px; border-top:1px dashed var(--line-soft);
  font:600 11px var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ledger-deep);
  white-space:nowrap;
}
.byline .stamp{ margin-left:auto; font-size:12px; color:var(--muted); font-family:var(--mono); }

/* ---------- reading progress (fixed rule across the top) ---------- */
.read-progress{
  position:fixed; top:0; left:0; right:0; height:3px; z-index:999;
  background:var(--rule-soft);
}
.read-progress-bar{
  display:block; width:var(--p, 0%); height:100%; background:var(--marigold);
  transition: width .15s linear;
}
@media (prefers-reduced-motion: reduce){ .read-progress-bar{ transition:none; } }

/* ---------- article layout: ToC above article ---------- */
.blog-body{
  background:var(--surface); border:1px solid var(--line); border-radius:16px;
  padding:0; box-shadow:0 1px 3px rgba(22,33,28,.06), 0 8px 28px rgba(22,33,28,.05);
  margin-top:8px; max-width:var(--panel); margin-left:auto; margin-right:auto;
  overflow:visible;
}
@media(max-width:640px){ .blog-body{ border-radius:12px; } }
.blog-grid{ display:block; padding:36px 48px 40px; }
.blog-rail{
  position:sticky;
  top:76px;
  z-index:5;
  max-width:var(--measure);
  margin:0 0 28px 0;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:12px;
  padding:18px 22px;
}
.prose{ max-width:var(--measure); }
@media(max-width:1079px){
  .blog-grid{ padding:28px 22px 20px; }
  .blog-rail{ margin:0 0 20px 0; }
}
@media(max-width:640px){
  .blog-grid{ padding:22px 18px 24px; }
}
.blog-cta{ margin:36px 0 10px; }

/* ---------- "On this page" box (above article) ---------- */
.rail-head b{
  display:block; font:700 11px var(--mono); letter-spacing:.12em; text-transform:uppercase;
  color:var(--ledger-deep); margin-bottom:10px;
}
.blog-toc ol{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2, 1fr); gap:6px 12px; }
.blog-toc li{ margin:0; }
.blog-toc a{
  display:block; padding:7px 10px; font-size:13px; color:var(--ink2); text-decoration:none;
  background:var(--surface); border:1px solid var(--line-soft); border-radius:8px;
  transition: color .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease);
}
.blog-toc a:hover{ color:var(--ledger); border-color:var(--ledger-soft); background:var(--tint); }
.blog-toc a[aria-current="true"]{
  color:var(--ledger-deep); font-weight:600; border-color:var(--marigold);
  background:var(--marigold-soft);
}
.rail-foot{ margin-top:14px; padding-top:12px; border-top:1px dashed var(--line-soft); }
.rail-foot a{ font:600 12px var(--mono); letter-spacing:.04em; color:var(--muted); text-decoration:none; }
.rail-foot a:hover{ color:var(--ledger); }
@media(max-width:640px){
  .blog-toc ol{ grid-template-columns:1fr; }
}

/* ---------- prose: measure, rhythm, browser surfaces ---------- */
.prose{ font-size:16.5px; line-height:1.75; color:var(--ink2); max-width:var(--measure); }
.prose p{ margin:14px 0; text-wrap:pretty; }
.prose h2{
  font-family:var(--sans); font-size:23px; font-weight:700; color:var(--ink); letter-spacing:-.01em;
  margin:44px 0 12px; padding-top:28px; border-top:1px solid var(--line-soft); scroll-margin-top:96px;
}
.prose h2:first-child{ border-top:0; margin-top:6px; padding-top:0; }
.prose h2::before{
  content:""; display:block; width:18px; height:2px; background:var(--marigold); margin-bottom:8px;
}
.prose h3{ font-family:var(--sans); font-size:18px; font-weight:700; color:var(--ink); margin:28px 0 8px; scroll-margin-top:96px; }
.prose ul,.prose ol{ margin:14px 0 14px 4px; padding-left:22px; }
.prose li{ margin:7px 0; text-wrap:pretty; }
.prose a{ color:var(--ledger); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--ledger-soft); font-weight:500 }
.prose a:hover{ color:var(--ledger-deep); text-decoration-color:var(--ledger); }
.prose a:focus-visible{ outline:2px solid var(--marigold); outline-offset:3px; border-radius:2px; }
.prose strong{ color:var(--ink); font-weight:700; }
.prose .mono,.prose code{ font-family:var(--mono); font-size:.86em; background:var(--paper); border:1px solid var(--line-soft); border-radius:6px; padding:1px 6px; color:var(--ink); font-variant-numeric:tabular-nums; }
.prose .toc{ background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:18px 22px; margin:24px 0; }
.prose .toc b{ font-family:var(--sans); font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:10px; }
.prose .toc ol{ margin:0; padding-left:20px; }
.prose .toc li{ margin:5px 0; font-size:14.5px; }
.prose .toc a{ color:var(--ink2); text-decoration:none; font-weight:500 }
.prose .toc a:hover{ color:var(--ledger); text-decoration:underline }
/* drop cap: title-page feel on warm paper */
.prose > p:first-of-type::first-letter{
  float:left; font-size:3em; line-height:1; padding-right:10px; padding-left:2px;
  font-family:var(--sans); font-weight:700; color:var(--ledger-deep);
}
/* visuals: constrained to the reading measure (no bleed — keeps figures/tables centered) */
.prose > .figure, .prose > .tblwrap, .prose > .codebox, .prose > .fact-grid, .prose > .defbox, .prose > .src-block, .prose > .faq{
  max-width:100%;
}
.prose > .figure{ margin-top:26px; margin-bottom:26px; }

/* ---------- definition box (ledger margin note; no colored left bar) ---------- */
.defbox{
  background:var(--tint); border:1px solid var(--ledger-soft);
  border-top:3px solid var(--ledger); border-radius:10px;
  padding:16px 18px; margin:22px 0; font-size:15.5px; color:var(--ink);
}
.defbox b.kicker{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ledger-deep); margin-bottom:6px; }
.defbox p{ margin:4px 0; color:var(--ink); line-height:1.6; }

/* ---------- stat / fact grid ---------- */
.fact-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin:22px 0; }
.fact{ background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:14px 16px; transition:border-color .15s, box-shadow .15s; }
.fact:hover{ border-color:var(--ledger-soft); box-shadow:0 4px 14px rgba(22,33,28,.05); }
.fact b{ display:block; font-family:var(--sans); font-size:24px; font-weight:700; color:var(--ledger); letter-spacing:-.02em; }
.fact span{ font-size:12.5px; color:var(--muted); line-height:1.45; display:block; margin-top:4px; }
.fact small{ display:block; font-size:11px; color:var(--muted); font-family:var(--mono); margin-top:6px; }

/* ---------- figures (ledger exhibit) ---------- */
.figure{ margin:26px 0; border:1px solid var(--line); border-radius:14px; background:var(--surface); overflow:hidden; transition:border-color .2s, box-shadow .2s; }
.figure:hover{ border-color:var(--ledger-soft); box-shadow:0 6px 22px rgba(22,33,28,.06); }
.figure .fighead{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:10px 16px; border-bottom:1px solid var(--line-soft);
  background:
    repeating-linear-gradient(to bottom, transparent 0 15px, var(--rule-feint) 15px 16px),
    var(--paper);
  background-size: 100% 16px;
}
.figure .fighead b{ font-family:var(--sans); font-size:13px; color:var(--ink); }
.figure .fighead span{ font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ledger-deep); background:var(--tint); border:1px solid var(--ledger-soft); padding:3px 8px; border-radius:999px; white-space:nowrap; }
.figure .figbody{ padding:18px; overflow-x:auto; background:
    repeating-linear-gradient(to bottom, transparent 0 31px, var(--rule-feint) 31px 32px);
  background-size: 100% 32px; }
.fig-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media(max-width:640px){ .fig-2{ grid-template-columns:1fr; } }
.figure figcaption{ font-size:13px; color:var(--muted); padding:10px 16px; border-top:1px solid var(--line-soft); line-height:1.55; }
.figure svg{ display:block; margin:0 auto; max-width:100%; height:auto; }
.figure .svgnote{ text-align:center; font-size:12px; color:var(--muted); margin-top:10px; font-family:var(--mono); }

/* ---------- tables (rulings + tabular numbers) ---------- */
.tblwrap{ overflow-x:auto; margin:22px 0; border:1px solid var(--line); border-radius:12px; }
.tblwrap table{ width:100%; border-collapse:collapse; font-size:14.5px; min-width:560px; }
.tblwrap th{
  font-family:var(--mono); font-size:11.5px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--muted); text-align:left; padding:11px 14px; border-bottom:1px solid var(--line);
  background:var(--paper); font-weight:700;
}
.tblwrap td{ padding:11px 14px; border-bottom:1px solid var(--line-soft); vertical-align:top; color:var(--ink2); }
.tblwrap tr:nth-child(even) td{ background:var(--zebra); }
.tblwrap tr:hover td{ background:var(--tint); }
.tblwrap tr:last-child td{ border-bottom:0; }
.tblwrap td b{ color:var(--ink); }
.tblwrap td:first-child{ color:var(--ink); font-weight:500; }
.ok{ color:var(--ledger-bright); font-weight:700; }
.bad{ color:var(--red); font-weight:700; }
.warn{ color:var(--marigold-deep); font-weight:700; }   /* #b8791f = 3.42:1 on paper; used bold on small text */
.tblwrap .note{ font-size:12.5px; color:var(--muted); padding:10px 14px; background:var(--paper); border-top:1px solid var(--line-soft); }
/* table fade edge (site.js adds .at-start/.at-end classes) */
.tblwrap{ position:relative; }
.tblwrap::after{
  content:""; position:absolute; top:0; bottom:0; right:0; width:32px;
  background:linear-gradient(to right, transparent, var(--surface)); pointer-events:none; opacity:0;
  transition:opacity .2s;
}
.tblwrap:not(.at-start)::after{ opacity:1; }

/* ---------- code box ---------- */
.codebox{ margin:22px 0; background:#10160f; border-radius:12px; overflow:hidden; border:1px solid #26342b; }
.codebox .cb-head{ font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#9fb8a9; padding:9px 14px; border-bottom:1px solid #26342b; display:flex; justify-content:space-between; }
.codebox pre{ margin:0; padding:16px 18px; overflow-x:auto; font-family:var(--mono); font-size:13px; line-height:1.65; color:#dceade; }
.codebox .tok-k{ color:#7dd3a8 }.codebox .tok-c{ color:#5f7366 }

/* ---------- sources ---------- */
.src-block{ margin:30px 0; background:var(--paper); border:1px solid var(--line); border-radius:12px; padding:18px 20px; }
.src-block b{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:12px; }
.src-list{ list-style:none; margin:0; padding:0; }
.src-list li{ display:flex; gap:10px; align-items:flex-start; padding:9px 0; border-bottom:1px solid var(--line-soft); font-size:14px; }
.src-list li:last-child{ border-bottom:0; }
.src-list .src-tag{ font-family:var(--mono); font-size:10.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ledger-deep); background:var(--tint); border:1px solid var(--ledger-soft); padding:3px 8px; border-radius:999px; flex:0 0 auto; margin-top:1px; }
.src-list a{ color:var(--ledger); font-weight:600; text-decoration:none; word-break:break-word }
.src-list a:hover{ text-decoration:underline }
.src-list p{ margin:2px 0 0; font-size:13px; color:var(--muted); }

/* ---------- FAQ ---------- */
.faq{ margin:30px 0; }
.faq > b{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:12px; }
.faq-item{ border:1px solid var(--line); border-radius:12px; margin:10px 0; overflow:hidden; background:var(--surface); }
.faq-item summary{ cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:10px; padding:15px 18px; font-weight:600; color:var(--ink); font-size:15px; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:hover{ background:var(--paper); }
.faq-item summary:focus-visible{ outline:2px solid var(--marigold); outline-offset:-2px; }
.faq-item summary .plus{ font-family:var(--mono); color:var(--ledger); transition:transform .2s var(--ease); font-size:16px; line-height:1; }
.faq-item[open] summary .plus{ transform:rotate(45deg); }
.faq-item .faq-a{ padding:0 18px 16px; color:var(--ink2); font-size:14.5px; line-height:1.7; }
.faq-item .faq-a p{ margin:6px 0; }
@media (prefers-reduced-motion: no-preference){
  .faq-item .faq-a{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .25s var(--ease); }
  .faq-item[open] .faq-a{ grid-template-rows:1fr; }
  .faq-item .faq-a > *{ overflow:hidden; }
}

/* ---------- CTA band (perforated tear + ruled backing) ---------- */
.blog-cta{ background:var(--ink); color:#fff; border-radius:16px; padding:34px clamp(20px,4vw,40px); margin:36px 0 10px; text-align:center; position:relative; }
.blog-cta::before{
  content:""; position:absolute; left:0; right:0; top:-14px; height:14px;
  background-image:var(--perf); background-size:11px 8px; background-repeat:repeat-x; background-position:center;
  opacity:.9;
}
.blog-cta b{ display:block; font-family:var(--sans); font-size:20px; font-weight:700; letter-spacing:-.01em; }
.blog-cta p{ color:#c7d4cc; font-size:14.5px; margin:10px 0 20px; max-width:56ch; margin-left:auto; margin-right:auto; }
.blog-cta .btns{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.blog-cta .btn{ font-size:14px; padding:11px 18px; border-radius:10px; text-decoration:none; font-weight:600 }
.blog-cta .btn.primary{ background:var(--marigold); color:var(--ink) }
.blog-cta .btn.primary:hover{ background:#d8942f }
.blog-cta .btn.ghost{ background:transparent; color:#fff; border:1px solid #41514a }
.blog-cta .btn.ghost:hover{ border-color:var(--marigold); color:var(--marigold) }

/* ---------- blog hub (/blog) ---------- */
.hub-jump{ display:flex; gap:8px; flex-wrap:wrap; margin-top:20px; }
.hub-jump a{ font-family:var(--mono); font-size:12px; font-weight:600; color:var(--ledger-deep); background:var(--tint); border:1px solid var(--ledger-soft); padding:6px 12px; border-radius:999px; text-decoration:none }
.hub-jump a:hover{ background:var(--ledger); color:#fff; border-color:var(--ledger); }
.hub-jump a:focus-visible{ outline:2px solid var(--ledger); outline-offset:3px; }
.hub-featured{ display:grid; grid-template-columns:1.05fr .95fr; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--surface); text-decoration:none; color:inherit; margin-top:8px; box-shadow:0 1px 3px rgba(22,33,28,.06), 0 8px 28px rgba(22,33,28,.05); transition:border-color .15s, box-shadow .15s; }
.hub-featured:hover{ border-color:var(--ledger-soft); box-shadow:0 10px 34px rgba(22,33,28,.09); }
.hub-featured:focus-visible{ outline:2px solid var(--ledger); outline-offset:3px; }
.hub-featured .hf-visual{ background:var(--paper); padding:28px 24px; border-right:1px solid var(--line-soft); display:flex; align-items:center; justify-content:center }
.hub-featured .hf-copy{ padding:28px 28px 26px; display:flex; flex-direction:column }
.hub-featured .hf-k{ font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ledger-deep); margin:0 0 8px }
.hub-featured h2{ font-size:26px; line-height:1.25; margin:0 0 10px; color:var(--ink); letter-spacing:-.015em; }
.hub-featured p{ margin:0 0 16px; color:var(--ink2); font-size:15.5px; line-height:1.6; }
.hub-featured .hf-go{ margin-top:auto; font-weight:700; color:var(--ledger); font-size:14px }
@media(max-width:800px){ .hub-featured{ grid-template-columns:1fr } .hub-featured .hf-visual{ border-right:0; border-bottom:1px solid var(--line-soft); padding:20px } }
.hub-cluster{ margin-top:48px; }
.hub-cluster > h2{ font-size:13px; font-family:var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:600; margin:0 0 14px; padding-bottom:10px; border-bottom:1px solid var(--line) }
.hub-list{ display:flex; flex-direction:column; gap:10px; }
.hub-row{ display:grid; grid-template-columns:92px 1fr; gap:16px; align-items:center; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--surface); text-decoration:none; color:inherit; transition:border-color .15s, box-shadow .15s; }
.hub-row:hover{ border-color:var(--ledger-soft); box-shadow:0 4px 16px rgba(22,33,28,.06); }
.hub-row:focus-visible{ outline:2px solid var(--ledger); outline-offset:3px; }
.hub-thumb{ height:68px; border-radius:8px; background:var(--paper); border:1px solid var(--line-soft); display:flex; align-items:center; justify-content:center; overflow:hidden; padding:6px; }
.hub-row h3{ margin:0 0 4px; font-size:16px; line-height:1.3; color:var(--ink); }
.hub-row p{ margin:0; font-size:13.5px; color:var(--muted); line-height:1.45; }
.hub-row .when{ display:block; font-family:var(--mono); font-size:11px; color:var(--muted); margin-top:6px; }
@media(max-width:560px){ .hub-row{ grid-template-columns:1fr } .hub-thumb{ height:56px } }
.hub-count{ font-family:var(--mono); font-size:11px; letter-spacing:.06em; color:var(--muted); margin-left:10px; }

/* ---------- blog index cards (kept for any leftover use) ---------- */
.blog-index{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px; margin-top:24px; }
.bp-card{ background:var(--surface); border:1px solid var(--line); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .15s, border-color .15s }
.bp-card:hover{ box-shadow:0 8px 24px rgba(22,33,28,.08); border-color:var(--ledger-soft); }
.bp-card .bp-thumb{ height:130px; background:var(--tint); display:grid; place-items:center; border-bottom:1px solid var(--line-soft); position:relative }
.bp-card .bp-body{ padding:18px 18px 20px; display:flex; flex-direction:column; flex:1 }
.bp-card .bp-cluster{ font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ledger-deep); margin-bottom:8px }
.bp-card h3{ margin:0; font-size:16.5px; font-weight:700; color:var(--ink); line-height:1.3 }
.bp-card p{ margin:8px 0 14px; font-size:13.5px; color:var(--muted); line-height:1.55; flex:1 }
.bp-card .bp-meta{ display:flex; justify-content:space-between; align-items:center; font-family:var(--mono); font-size:11px; color:var(--muted); }
.bp-card .bp-meta .soon{ color:var(--marigold) }
.bp-card a.more{ color:var(--ledger); font-weight:700; font-size:13px; text-decoration:none }
.bp-card a.more:hover{ text-decoration:underline }
.bp-card .bp-thumb svg{ width:100%; height:100% }

/* ---------- browser surfaces: scrollbar, selection, caret ---------- */
.blog-body, .blog-body *{ scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.blog-body::-webkit-scrollbar{ width:10px; height:10px; }
.blog-body::-webkit-scrollbar-track{ background:transparent; }
.blog-body::-webkit-scrollbar-thumb{ background:var(--line); border-radius:6px; border:2px solid var(--surface); }
.blog-body::-webkit-scrollbar-thumb:hover{ background:var(--muted); }
::selection{ background:var(--marigold-soft); color:var(--ink); }
.prose code::selection{ background:var(--ledger-soft); }

/* ---------- print ---------- */
@media print{
  .nav, .mobile-cta, .blog-rail, .read-progress, .hub-jump, footer{ display:none !important; }
  .blog-body{ box-shadow:none; border:1px solid #999; border-radius:0; max-width:none; padding:0; }
  .blog-grid{ display:block; }
  .prose{ max-width:none; font-size:11pt; }
  .prose a{ text-decoration:underline; color:#000; }
  .figure, .tblwrap, .codebox{ break-inside:avoid; }
  .blog-cta{ display:none; }
  .faq-item[open] .faq-a{ display:block; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}

/* ---------- anchors under sticky nav ---------- */
section[id],h2[id]{ scroll-margin-top:90px; }
.prose h2 .h-anchor{ opacity:0; margin-left:10px; font-size:.68em; color:var(--marigold-deep); text-decoration:none; font-weight:600; }
.prose h2:hover .h-anchor, .prose h2:focus-within .h-anchor{ opacity:1; }

/* ---------- figure component kit ----------
   Promoted from one-off inline styles (Sep 2026 batch). New posts: use
   these classes, never inline styles. See docs/blog/STYLE_GUIDE.md. */
.figpad{ padding:20px 18px; }
.figcap{ font-size:12.5px; color:var(--muted); margin:14px 0 0; }
.figcap.tlcap{ margin-top:44px; }

/* tint utilities (color only — compose with structure classes) */
.ok{ color:#14523a; } .warn{ color:#b8791f; } .bad{ color:#b3402e; }
.muted{ color:#606d67; } .ink{ color:#16211c; }

/* panel cards */
.pcard{ background:#faf8f3; border:1.5px solid var(--line); border-radius:10px; padding:12px 14px; }
.pcard.ok{ background:#e4efe9; border-color:#1d6f4f; }
.pcard.warn{ background:#fdf3e3; border-color:#e09f3e; }
.pcard.bad{ background:#f9e9e5; border-color:#e9c9c4; }
.pcard.ghost{ border-style:dashed; }
.pcard.split, .split{ display:flex; justify-content:space-between; }
.plab{ font-size:10px; letter-spacing:.1em; font-weight:600; }
.psub{ font-weight:400; font-size:11px; color:#3d4a43; margin-top:4px; }
.psub.big{ font-size:12px; margin-top:6px; }
.psub.muted{ color:var(--muted); }
.psub.plain{ font-size:inherit; }
.note{ font-size:11px; margin-top:4px; }
.flow-note{ text-align:center; color:#b8791f; }
.mt4{ margin-top:4px; }
.pt{ font-weight:700; margin-top:6px; }

/* vertical stacks */
.vstack{ display:flex; flex-direction:column; gap:8px; max-width:560px; margin:0 auto; font-family:var(--mono); font-size:12.5px; }
.vstack.flush{ gap:0; max-width:520px; }
.vstack.flush > .pcard{ border-radius:0; }
.vstack.flush > .pcard + .pcard{ border-top:0; }
.vstack.flush > .pcard:first-child{ border-radius:10px 10px 0 0; }
.vstack.flush > .pcard:last-child{ border-radius:0 0 10px 10px; }

/* horizontal flows (pipelines, loops) */
.flow{ display:flex; align-items:stretch; gap:0; font-family:var(--mono); font-size:12px; font-weight:600; }
.flow > .pcard{ flex:1; text-align:center; }
.flow > .pcard.wide{ flex:1.4; }
.flow-arrow{ display:grid; place-items:center; padding:0 8px; color:#b8791f; font-size:18px; }
@media(max-width:640px){ .flow{ flex-direction:column; } .flow-arrow{ transform:rotate(90deg); padding:2px 0; } }

/* timelines (position of each dot/label stays inline: style="left:46%") */
.tl-track{ position:relative; height:8px; background:#e8e6de; border-radius:99px; margin:26px 6px 0; }
.t-dot{ position:absolute; width:12px; height:12px; border-radius:50%; top:-2px; }
.t-dot.ok{ background:#1d6f4f; } .t-dot.warn{ background:#e09f3e; } .t-dot.bad{ background:#b3402e; }
.t-lab{ position:absolute; top:-24px; font-family:var(--mono); font-size:11px; font-weight:700; }
.t-lab.below{ top:16px; font-weight:400; }

/* card grids */
.cardgrid{ display:grid; gap:10px; font-family:var(--mono); text-align:center; }
.cardgrid.c2{ grid-template-columns:1fr 1fr; }
.cardgrid.c3{ grid-template-columns:1fr 1fr 1fr; }
.cardgrid.anat{ font-size:12.5px; text-align:left; }
@media(max-width:640px){ .cardgrid.c2, .cardgrid.c3{ grid-template-columns:1fr; } }
.cnum{ font-size:26px; font-weight:700; margin-top:6px; }

/* ---------- new devices for future posts ---------- */
.pullquote{ font-size:21px; line-height:1.45; font-weight:600; letter-spacing:-.01em; color:var(--ink); border-left:3px solid var(--marigold); padding:6px 0 6px 20px; margin:26px 0; }
.takeaways{ background:var(--ledger-soft); border:1px solid var(--line); border-radius:12px; padding:18px 20px; margin:24px 0; }
.takeaways b.kicker{ display:block; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ledger-deep); margin-bottom:6px; }
.takeaways ul{ margin:10px 0 0; padding-left:20px; }
.takeaways li{ margin:6px 0; font-size:15px; color:var(--ink); }
.statband{ text-align:center; margin:26px 0; }
.statband .n{ font:700 clamp(34px, 2.2rem + 2vw, 52px)/1 var(--mono); color:var(--ledger); letter-spacing:-.03em; }
.statband .c{ font-size:13px; color:var(--muted); margin-top:6px; }