/* ==========================================================================
   article.css — long-form article styles for the blog posts.

   Lifted out of seven identical-ish inline <style> blocks (117 KB of
   duplication) into one cached file. Loaded BEFORE styles.css on post pages,
   which is the position the inline blocks held, so the cascade is unchanged.
   Not loaded anywhere else, so generic selectors here cannot reach the
   homepage or the writing index.
   ========================================================================== */

/* The legacy names these rules are written against. styles.css defines the
   other six (--black, --cream, --border, --ff-serif, --ff-sans, --ff-mono)
   as aliases onto the design tokens and, loading later, wins them; only these
   two have no owner there. */
:root {
  --red: #8f2f45;
  --mid: #635a52;
}

/* Nav */

.nav-logo {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: var(--t--1);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--black);
  text-transform: uppercase;
}

.nav-links a {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid);
  text-decoration: none;
  transition: color var(--dur-base);
}

/* Article layout */

/* Hero */
.hero {
  padding:var(--space-72) 0 0;
  border-bottom: 2px solid var(--black);
  margin-bottom:var(--space-64);
}
.hero-meta {
  display: flex;
  align-items: center;
  gap:var(--space-16);
  margin-bottom:var(--space-28);
  flex-wrap: wrap;
}
.tag {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream);
  background: var(--red);
  padding:var(--space-4) var(--space-12);
}
.tag-series {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  border: 1px solid var(--red);
  padding:3px var(--space-12);
}

.hero-read {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--mid);
}
.hero-read::before { content: ' b7'; margin-right:var(--space-12); }

.hero h1 {
  font-family: 'Newsreader', Georgia, serif;
  font-size: clamp(32px, 5vw, 52px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom:var(--space-24);
}

.hero-deck {
  font-size: 19px;
  font-weight: 300;
  color: #3a3530;
  line-height: 1.6;
  margin-bottom:var(--space-40);
  max-width: 600px;
}

/* Series nav */
.series-nav {
  background: var(--black);
  padding:var(--space-28) var(--space-32);
  margin-bottom: 0;
}
.series-nav-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom:var(--space-16);
  display: flex;
  align-items: center;
  gap:var(--space-12);
}
.series-nav-label::before { content: ''; width: 24px; height: 1px; background: var(--red); }
.series-nav-posts {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap:var(--space-4);
}
.series-post {
  padding:var(--space-12) var(--space-12);
  background: rgba(245,240,232,0.05);
  text-align: center;
}

.series-post.done { background: rgba(143,47,69,0.18); }
.series-post .post-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: var(--t-0);
  font-weight: 700;
  color: rgba(245,240,232,0.3);
  display: block;
  margin-bottom:var(--space-8);
}

.series-post .post-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  color: rgba(245,240,232,0.3);
  line-height: 1.3;
}

@media (max-width: 540px) {
  .series-nav-posts { grid-template-columns: 1fr 1fr; gap:var(--space-4); }
}

/* Body content */
.post-body { padding-bottom:var(--space-80); }
.post-body p {
  margin-bottom:var(--space-28);
  font-size: var(--t-0);
  line-height: 1.75;
  color: #1a1714;
}
.post-body h2 {
  font-family: 'Newsreader', Georgia, serif;
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin:var(--space-64) 0 var(--space-24);
  padding-top:var(--space-64);
  border-top: 1px solid var(--border);
}

sup { color: var(--red); font-size: 12px; }
sup a { color: var(--red); text-decoration: none; }

/* Pull quote */
.pull-quote {
  border-left: 4px solid var(--red);
  margin:var(--space-48) 0;
  padding:var(--space-4) 0 var(--space-4) var(--space-28);
}
.pull-quote p {
  font-family: 'Newsreader', Georgia, serif;
  font-size: clamp(20px, 2.8vw, 26px);
  font-weight: 400;
  font-style: italic;
  line-height: 1.4;
  color: var(--black);
  margin: 0;
}

/* Build spec */
.build-spec {
  background: var(--black);
  color: var(--cream);
  padding:var(--space-40) var(--space-48);
  margin:var(--space-48) 0;
  border-left: 4px solid var(--red);
}
.build-spec-title {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom:var(--space-24);
  display: flex;
  align-items: center;
  gap:var(--space-12);
}
.build-spec-title::before { content: ''; width: 24px; height: 1px; background: var(--red); }
.build-spec-row {
  display: flex;
  gap:var(--space-16);
  padding:var(--space-16) 0;
  border-bottom: 1px solid rgba(245,240,232,0.1);
  align-items: baseline;
}
.build-spec-row:last-child { border-bottom: none; padding-bottom: 0; }
.build-spec-key {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: var(--red);
  min-width: 80px;
  flex-shrink: 0;
}
.build-spec-val { font-size: var(--t--1); line-height: 1.5; color: rgba(245,240,232,0.75); }
.build-spec-val strong { color: var(--cream); }
@media (max-width: 540px) { .build-spec { padding:var(--space-32) var(--space-24); } }

/* Code block */
.code-block {
  margin:var(--space-40) 0;
  background: var(--black);
  border-left: 4px solid var(--red);
  overflow-x: auto;
}
.code-block-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
  padding:var(--space-12) var(--space-20);
  border-bottom: 1px solid rgba(245,240,232,0.08);
  display: flex;
  align-items: center;
  gap:var(--space-12);
}
.code-block-label::before { content: ''; width: 24px; height: 1px; background: var(--red); }
.code-block pre {
  padding:var(--space-20) var(--space-20) var(--space-24);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.8;
  color: rgba(245,240,232,0.82);
  white-space: pre;
  overflow-x: auto;
}

.code-block pre .fn  { color: #f5c97a; }
.code-block pre .st  { color: #a8e6a3; }

.code-block pre .num { color: #7ac5f5; }

/* Commentary demo */
.commentary-demo { margin:var(--space-48) 0; border: 1px solid var(--border); }
.commentary-box { border-top: 2px solid var(--black); }
.commentary-box-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding:var(--space-12) var(--space-16);
  border-bottom: 1px solid var(--border);
}
.commentary-box-label.bad { color: var(--mid); background: rgba(13,13,13,0.03); }
.commentary-box-label.good { color: var(--red); background: rgba(143,47,69,0.04); }
.commentary-box-text {
  padding:var(--space-16) var(--space-20);
  font-size: 15px;
  line-height: 1.7;
  color: #1a1714;
  margin: 0;
}
.commentary-box-text.bad { color: var(--mid); font-style: italic; }

/* Failure log */
.failure-log {
  margin:var(--space-40) 0;
  border: 1px solid var(--border);
}
.failure-log-header {
  background: var(--black);
  padding:var(--space-12) var(--space-20);
  display: flex;
  align-items: center;
  gap:var(--space-12);
}
.failure-log-header .flog-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
}
.failure-log-item {
  display: flex;
  gap:var(--space-20);
  padding:var(--space-20) var(--space-20);
  border-bottom: 1px solid var(--border);
  align-items: flex-start;
}
.failure-log-item:last-child { border-bottom: none; }
.failure-icon {
  font-size: 16px;
  flex-shrink: 0;
  margin-top:3px;
}

.failure-title {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--black);
  margin-bottom:var(--space-8);
}
.failure-detail {
  font-size: var(--t--1);
  line-height: 1.6;
  color: #3a3530;
}

/* ── FIGURE ────────────────────────────────────────────────────────────────
   One component, replacing .post-illustration, .sunset-photo and
   .screenshot-slot. Those three disagreed on margin (48/56/40), border
   (2px solid top-and-bottom / 1px solid / 1px dashed), whether there was a
   caption at all, and whether the image obeyed the measure.

   .fig          conforms to the text column
   .fig--bleed   the only sanctioned way out of it
   .fig--zoom    opens in the lightbox
   ------------------------------------------------------------------------ */
.fig {
  margin:var(--space-48) 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  background: var(--surface-2);
}
/* No cropping. .sunset-photo had max-height:400px with object-fit:cover, so
   the same photograph rendered at 1.61 / 1.72 / 1.43 depending on viewport. */
.fig img { width: 100%; height: auto; display: block; }

.fig figcaption {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--mid);
  padding:var(--space-12) var(--space-16);
  border-top: 1px solid var(--border);
}
/* The label bar carries which artefact you are looking at, so it sits above
   the image and reads as a header rather than a caption. */
.fig .fig-label {
  border-top: none;
  border-bottom: 1px solid var(--border);
  background: rgba(13,13,13,0.04);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap:var(--space-12);
}
.fig .fig-label::before { content: '⌶'; color: var(--red); font-size: var(--t--1); }
.fig-hint {
  margin-left: auto;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* was opacity:0.7, which measured 3.08:1 once the label wrapped at 375 */
}

.fig--bleed { margin-inline: calc(-1 * var(--pad)); border-inline: none; border-radius: 0; }

.fig--zoom img { cursor: zoom-in; transition: opacity var(--dur-base) var(--ease-out); }
.fig--zoom img:hover { opacity: 0.88; }

/* ── FOOTNOTES ─────────────────────────────────────────────────────────────
   Five citation patterns went in and one comes out. The <ol> numbers itself,
   so adding a source no longer means renumbering by hand in two places, and
   every call site of a source gets its own return arrow.
   ------------------------------------------------------------------------ */
.footnotes { margin-top:var(--space-72); padding-top:var(--space-40); border-top: 1px solid var(--border); }
/* This heading is a real <h2> so it reaches the table of contents, but it
   should not carry the big rule-and-64px chrome the body headings use. */
.post-body .footnotes-title {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 var(--space-24);
  padding-top: 0;
  border-top: none;
  display: flex;
  align-items: center;
  gap:var(--space-12);
}
.post-body .footnotes-title::before { content: ''; width: 24px; height: 1px; background: var(--red); }

.footnotes ol { list-style: none; counter-reset: fn; margin: 0; padding: 0; }
.footnotes li {
  counter-increment: fn;
  display: grid;
  grid-template-columns: 1.75rem 1fr auto;
  gap:var(--space-12);
  padding:var(--space-16) 0;
  border-bottom: 1px solid var(--border);
  scroll-margin-top: 80px;
}
.footnotes li:last-child { border-bottom: none; }
.footnotes li::before {
  content: counter(fn);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--red);
  padding-top:2px;
}
.fn-body { font-size: var(--t--1); line-height: 1.6; color: #3a3530; }
.fn-body a { color: var(--black); text-decoration: none; border-bottom: 1px solid var(--border); }
.fn-body a:hover { color: var(--red); border-color: var(--red); }

.fn-backs { display: flex; gap:var(--space-4); align-items: flex-start; }
.fn-back {
  color: var(--mid); text-decoration: none; font-size: var(--t--1);
  min-width: 24px; min-height: 24px;              /* WCAG 2.2 AA 2.5.8 */
  display: inline-flex; align-items: center; justify-content: center;
  transition: color var(--dur-base) var(--ease-out);
}
.fn-back:hover { color: var(--red); }
.fn-back sup { font-size: 9px; }

.fn-ref a {
  color: var(--red); text-decoration: none;
  padding:0 1px;
  scroll-margin-top: 80px;
}
.fn-ref a:hover { text-decoration: underline; }

/* Flash the destination so the reader can see where they landed, in both
   directions. */
.footnotes li:target { background: rgba(143,47,69,0.09); }
.fn-ref a:target { background: rgba(143,47,69,0.18); outline: 2px solid rgba(143,47,69,0.18); }

/* GitHub CTA */
.github-cta {
  display: flex;
  align-items: center;
  gap:var(--space-20);
  padding:var(--space-24) var(--space-28);
  border: 2px solid var(--black);
  margin:var(--space-48) 0;
  text-decoration: none;
  color: var(--black);
  transition: background var(--dur-base), color var(--dur-base);
}
.github-cta:hover { background: var(--black); color: var(--cream); }
.github-cta-icon { font-size: 28px; flex-shrink: 0; line-height: 1; }
.github-cta-text .label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom:var(--space-4);
}
.github-cta:hover .github-cta-text .label { color: rgba(143,47,69,0.8); }
.github-cta-text .repo { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: var(--t--1); font-weight: 700; }
.github-cta-text .desc { font-size: var(--t--1); color: var(--mid); margin-top:2px; }
.github-cta:hover .github-cta-text .desc { color: rgba(245,240,232,0.6); }
.github-cta-arrow { margin-left: auto; font-size: 20px; flex-shrink: 0; }
/* icon + text + arrow will not fit on one row below ~360px: the arrow was
   pushing 27px past the viewport on every post that carries this block. */
@media (max-width: 380px) {
  .github-cta { flex-wrap: wrap; padding:var(--space-20) var(--space-16); gap:var(--space-12); }
  .github-cta-text { flex: 1 1 100%; order: 3; }
  .github-cta-arrow { margin-left: 0; }
}

/* Sign off */
.post-signoff { margin-top:var(--space-72); padding-top:var(--space-40); border-top: 1px solid var(--border); }
.post-signoff p { font-size: 15px !important; color: var(--mid) !important; margin-bottom: 0 !important; }
.post-signoff a { color: var(--black); font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--border); transition: color var(--dur-base), border-color var(--dur-base); }
.post-signoff a:hover { color: var(--red); border-color: var(--red); }

/* Author card */
.author-card {
  background: var(--black);
  color: var(--cream);
  padding:var(--space-40);
  margin-top:var(--space-64);
  display: flex;
  align-items: center;
  gap:var(--space-32);
}
.author-card img {
  width: 72px; height: 72px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--red);
}
.author-card .author-info .name {
  font-family: 'Newsreader', Georgia, serif;
  font-size: var(--t-0);
  font-weight: 700;
  margin-bottom:var(--space-8);
}
.author-card .author-info .bio {
  font-size: var(--t--1);
  line-height: 1.6;
  color: rgba(245,240,232,0.7);
  margin: 0;
}
.author-card .author-info .bio a { color: var(--red); text-decoration: none; }

/* Back link */
.back-link-wrap { padding:var(--space-40) 0 0; }
.back-link {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mid);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap:var(--space-8);
  transition: color var(--dur-base);
}

.back-link::before { content: '←'; }

/* Scroll reveal */

/* Footer */

/* Hamburger */

.mobile-menu {
  display: none;
  position: fixed;
  inset:var(--space-56) 0 0;
  background: var(--cream);
  z-index: 99;
  padding: 40px clamp(24px, 5vw, 48px);
  flex-direction: column;
  gap:var(--space-24);
  border-top: 2px solid var(--black);
}

.mobile-menu a { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: var(--t--1); letter-spacing: 0.1em; text-transform: uppercase; color: var(--black); text-decoration: none; }
@media (max-width: 768px) {

  .author-card { padding:var(--space-24); gap:var(--space-16); flex-direction: column; }
}

/* ── only on variance-2 ─────────────────────────────────────── */
.col-table-wrap { margin: var(--space-40) 0; border: 1px solid var(--border); overflow-x: auto; }
.col-table { width: 100%; border-collapse: collapse; font-family: 'JetBrains Mono', ui-monospace, monospace; }
.col-table thead th { background: var(--black); color: var(--cream); padding: var(--space-12) var(--space-16); text-align: left; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 400; }
.col-table tbody td { padding: var(--space-12) var(--space-16); border-bottom: 1px solid var(--border); color: #1a1714; font-size: 12px; }
.col-table tbody tr:last-child td { border-bottom: none; }
.col-table tbody tr:nth-child(even) td { background: rgba(13,13,13,0.025); }
.col-tag { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 2px var(--space-8); }

.flow-diagram { margin: var(--space-40) 0; background: var(--black); padding: var(--space-32); overflow-x: auto; }
.flow-diagram-label { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--red); margin-bottom: var(--space-24); display: flex; align-items: center; gap: var(--space-12); }
.flow-diagram-label::before { content: ''; width: 24px; height: 1px; background: var(--red); }
.flow-row { display: flex; align-items: center; min-width: max-content; }
.flow-node { display: flex; flex-direction: column; align-items: center; gap: var(--space-8); }
.flow-box { background: rgba(245,240,232,0.07); border: 1px solid rgba(245,240,232,0.14); color: var(--cream); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; padding: var(--space-12) var(--space-16); text-align: center; white-space: nowrap; line-height: 1.5; }

.flow-node-label { font-family: 'Inter', system-ui, sans-serif; font-size: 12px; color: rgba(245,240,232,0.3); text-align: center; white-space: nowrap; }
/* was rgba(245,240,232,0.2), which measured 1.80:1 on the dark diagram. The
   sibling .flow-node-label was already corrected to --on-dark-2 in styles.css;
   the arrow was missed. */
.flow-arrow { color: var(--on-dark-2); font-size: var(--t-0); padding: 0 var(--space-12); align-self: flex-start; margin-top: var(--space-16); }
@media (max-width: 768px) { .col-table tbody td, .col-table thead th { padding: var(--space-8) var(--space-12); } }

/* ── only on variance-1 ─────────────────────────────────────── */
.commentary-demo-table { width: 100%; border-collapse: collapse; font-size: var(--t--1); font-family: 'JetBrains Mono', ui-monospace, monospace; }
.commentary-demo-table thead th { background: var(--black); color: var(--cream); padding: var(--space-12) var(--space-16); text-align: right; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 400; }
.commentary-demo-table thead th:first-child { text-align: left; }
.commentary-demo-table tbody td { padding: var(--space-12) var(--space-16); border-bottom: 1px solid var(--border); text-align: right; color: #1a1714; font-size: var(--t--1); }
.commentary-demo-table tbody td:first-child { text-align: left; font-weight: 400; color: var(--black); }
.commentary-demo-table tbody tr:last-child td { border-bottom: none; font-weight: 700; }

@media (max-width: 768px) { .commentary-demo-table { font-size: 12px; } }
@media (max-width: 768px) { .commentary-demo-table tbody td, .commentary-demo-table thead th { padding: var(--space-8) var(--space-12); } }

/* ── only on ai-agents ─────────────────────────────────────── */
.post-hero-image { margin: 0 0 var(--space-64); border-top: 2px solid var(--black); border-bottom: 2px solid var(--black); }
.post-hero-image img { width: 100%; display: block; object-fit: cover; max-height: 380px; }
.post-hero-image figcaption { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: 0.06em; color: var(--mid); padding: var(--space-12) 0; border-top: 1px solid var(--border); }
.forty-moment { text-align: center; padding: var(--space-48) 0; margin: var(--space-48) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.forty-moment .forty-label { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--red); margin-bottom: var(--space-24); }
.forty-moment .forty-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-24); align-items: center; max-width: 440px; margin: 0 auto; }
.forty-num { font-family: 'Newsreader', serif; font-size: 64px; font-weight: 900; line-height: 1; }

.forty-num.new { color: var(--red); }
.forty-sub { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mid); margin-top: var(--space-8); }
.forty-arrow { font-size: 32px; color: var(--mid); }
.post-stats { background: var(--black); color: var(--cream); padding: var(--space-40) var(--space-48); margin: var(--space-48) 0; border-left: 4px solid var(--red); }
.post-stats p { font-size: 15px !important; line-height: 1.7 !important; color: rgba(245,240,232,0.75) !important; margin-bottom: var(--space-16) !important; }
.post-stats p:last-child { margin-bottom: 0 !important; }

@media (max-width: 768px) { .post-stats { padding: var(--space-32) var(--space-24); } }
@media (max-width: 768px) { .forty-num { font-size: 48px; } }

/* ── only on controller ─────────────────────────────────────── */
.stat-hero { background: var(--black); color: var(--cream); padding: var(--space-40) var(--space-48); margin-bottom: 0; display: flex; align-items: center; gap: var(--space-48); }
.stat-hero .stat-number { font-family: 'Newsreader', Georgia, serif; font-size: 80px; font-weight: 900; color: var(--red); line-height: 1; flex-shrink: 0; }
.stat-hero .stat-label { font-family: 'Inter', system-ui, sans-serif; font-size: 15px; line-height: 1.5; color: rgba(245,240,232,0.75); }
.stat-hero .stat-label strong { display: block; font-size: var(--t-0); color: var(--cream); margin-bottom: var(--space-4); }
@media (max-width: 540px) { .stat-hero { flex-direction: column; gap: var(--space-16); padding: var(--space-32) var(--space-24); } }
@media (max-width: 540px) { .stat-hero .stat-number { font-size: 60px; } }
/* was `margin: var(--space-48) -var(--space-24)`, which is not valid CSS, so
   the whole shorthand was dropped and the figure had no vertical margin at all.
   The bleed tracks --pad, which is what .article-wrap pads by, so it cancels
   exactly instead of overflowing by 4px once --pad clamps to 20 below 500. */

.stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; margin: var(--space-48) 0; }
.stat-chip { background: var(--black); color: var(--cream); padding: var(--space-28) var(--space-24); }
.stat-chip .n { font-family: 'Newsreader', Georgia, serif; font-size: 44px; font-weight: 900; color: var(--red); line-height: 1; display: block; margin-bottom: var(--space-8); }
.stat-chip .l { font-family: 'Inter', system-ui, sans-serif; font-size: var(--t--1); line-height: 1.4; color: rgba(245,240,232,0.7); }
.stat-chip .l strong { color: var(--cream); display: block; }
@media (max-width: 540px) { .stat-row { grid-template-columns: 1fr; } }

/* ── only on india-nl ─────────────────────────────────────── */

a:has(sup) { text-decoration: none; }

.sunset-caption { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; letter-spacing: 0.06em; color: var(--mid); padding: var(--space-12) var(--space-16); border-top: 1px solid var(--border); background: var(--cream); line-height: 1.5; text-align: left; }
