/* ============================================================================
   science.css — Science Hub components for Just Electrolyte (Site A)
   Loaded AFTER styles.css + wordmark.css on every /science* page.
   Inherits all --je-* tokens. House system: Inter, hairline rules, radius 0,
   one freshwater accent (#A9D2E8), generous negative space. Typography loud,
   imagery quiet. No new colors introduced.
   Author: Sol (COO) · 2026-06-20
   ============================================================================ */

/* ---- Shared rhythm utilities ---------------------------------------------- */
.stack > * + * { margin-top: var(--je-space-8); }
.flow > * + * { margin-top: var(--je-space-4); }
.reading { max-width: 44rem; }
.reading-wide { max-width: 52rem; }
.prose { max-width: 44rem; }

/* Anchor offset so deep links clear the fixed header */
[id] { scroll-margin-top: calc(var(--header-height) + var(--je-space-4)); }

/* Tables that may overflow on narrow screens */
.table-scroll { overflow-x: auto; }
.table-scroll .data-table { min-width: 40rem; }

/* ---- Breadcrumb ----------------------------------------------------------- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--je-space-2);
  font-size: var(--je-caption-size);
  letter-spacing: var(--je-caption-tracking);
  color: var(--je-text-secondary);
}
.breadcrumb a { color: var(--je-text-secondary); text-decoration: none; }
.breadcrumb a:hover {
  color: var(--je-ink);
  text-decoration: underline;
  text-decoration-color: var(--je-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.breadcrumb .sep { color: var(--je-hairline); }
.breadcrumb [aria-current="page"] { color: var(--je-ink); }

/* ---- Article header ------------------------------------------------------- */
.article-title {
  margin-top: var(--je-space-4);
  font-size: clamp(2rem, 5.5vw, 3rem);
  font-weight: var(--je-h1-weight);
  letter-spacing: var(--je-h1-tracking);
  line-height: var(--je-h1-leading);
  max-width: 20ch;
}
.article-dek {
  margin-top: var(--je-space-6);
  font-size: var(--je-body-lg-size);
  color: var(--je-text-secondary);
  max-width: 40rem;
}
.article-meta {
  margin-top: var(--je-space-6);
  font-size: var(--je-caption-size);
  letter-spacing: var(--je-caption-tracking);
  color: var(--je-text-secondary);
}

/* ---- Figures / plates ----------------------------------------------------- */
figure { margin: 0; }
.figure-plate {
  background: var(--je-paper);
  border: var(--je-rule-hairline) solid var(--je-hairline);
  padding: var(--je-space-8);
}
.figure-plate img,
.figure-plate svg { display: block; width: 100%; height: auto; }
figcaption {
  margin-top: var(--je-space-3);
  font-size: var(--je-caption-size);
  letter-spacing: var(--je-caption-tracking);
  line-height: var(--je-caption-leading);
  color: var(--je-text-secondary);
}
.section--inverse figcaption { color: var(--je-text-inverse); }

/* ---- Callouts (notes, disclaimers, gated holds) --------------------------- */
.callout {
  border-left: var(--je-rule-accent) solid var(--je-accent);
  padding: var(--je-space-2) 0 var(--je-space-2) var(--je-space-6);
  color: var(--je-text-secondary);
}
.callout--gate {
  border-left-color: var(--je-ink);
  background: var(--je-bg-alt);
  padding: var(--je-space-4) var(--je-space-6);
}
.callout--gate .eyebrow { color: var(--je-ink); display: block; margin-bottom: var(--je-space-2); }

/* ---- Sources -------------------------------------------------------------- */
.sources {
  border-top: var(--je-rule-hairline) solid var(--je-ink);
  padding-top: var(--je-space-4);
}
.sources ol { margin: 0; padding-left: 1.25rem; }
.sources li {
  font-size: var(--je-caption-size);
  letter-spacing: var(--je-caption-tracking);
  line-height: 1.5;
  color: var(--je-text-secondary);
  margin-top: var(--je-space-2);
}
.sources li:first-child { margin-top: var(--je-space-3); }
.sources .j { font-style: italic; }

/* ---- Keep digging (the rabbit-hole links) --------------------------------- */
.keep-digging {
  border-top: var(--je-rule-accent) solid var(--je-accent);
  padding-top: var(--je-space-6);
}
.deeper-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--je-space-4);
  margin-top: var(--je-space-4);
}
@media (min-width: 720px) {
  .deeper-grid { grid-template-columns: repeat(3, 1fr); }
}
.deeper-card {
  display: block;
  border: var(--je-rule-hairline) solid var(--je-hairline);
  padding: var(--je-space-4);
  text-decoration: none;
  color: var(--je-ink);
  transition: border-color var(--je-transition), background-color var(--je-transition);
}
.deeper-card:hover { border-color: var(--je-ink); background: var(--je-bg-alt); }
.deeper-card .k {
  font-size: var(--je-eyebrow-size);
  font-weight: var(--je-eyebrow-weight);
  letter-spacing: var(--je-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--je-text-secondary);
}
.deeper-card .t {
  margin-top: var(--je-space-2);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

/* ============================================================================
   HUB LANDING — marquee threads as full modules (bold, on-brand)
   ============================================================================ */
.threads { display: grid; gap: 0; }

/* Designed jump index in the hero */
.hero-jump { display: grid; gap: 0; margin-top: var(--je-space-8); max-width: 40rem; border-top: var(--je-rule-hairline) solid var(--je-hairline); }
.hero-jump a { display: flex; gap: var(--je-space-4); align-items: baseline; padding: var(--je-space-3) 0; border-bottom: var(--je-rule-hairline) solid var(--je-hairline); text-decoration: none; color: var(--je-ink); transition: padding-left var(--je-transition); }
.hero-jump a:hover { padding-left: var(--je-space-2); }
.hero-jump a b { color: var(--je-text-secondary); font-weight: 700; font-variant-numeric: tabular-nums; }
.hero-jump a .arr { margin-left: auto; color: var(--je-accent); }

/* Thread module */
.thread { position: relative; display: grid; gap: var(--je-space-8); }
@media (min-width: 980px) {
  .thread { grid-template-columns: 1.05fr 0.95fr; gap: var(--je-space-16); align-items: center; }
  .thread--flip .thread-media { order: -1; }
}
.thread-index {
  display: block;
  font-size: clamp(3.5rem, 9vw, 7rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 0.85;
  color: var(--je-hairline);
}
.section--inverse .thread-index { color: #333; }
@supports (-webkit-text-stroke: 2px #000) {
  .thread-index { color: transparent; -webkit-text-stroke: 2px var(--je-hairline); }
  .section--inverse .thread-index { color: transparent; -webkit-text-stroke-color: #3a3a3a; }
}
.thread-number {
  font-size: var(--je-eyebrow-size);
  font-weight: var(--je-eyebrow-weight);
  letter-spacing: var(--je-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--je-text-secondary);
}
.thread-title {
  margin-top: var(--je-space-3);
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.03;
}
.thread-dek {
  margin-top: var(--je-space-5);
  font-size: var(--je-body-lg-size);
  color: var(--je-text-secondary);
  max-width: 34rem;
}
.thread-inside { margin-top: var(--je-space-6); border-top: var(--je-rule-hairline) solid var(--je-hairline); }
.thread-inside .row {
  display: flex; gap: var(--je-space-4); align-items: baseline;
  padding: var(--je-space-3) 0;
  border-bottom: var(--je-rule-hairline) solid var(--je-hairline);
  text-decoration: none; color: var(--je-ink);
  transition: padding-left var(--je-transition);
}
a.row:hover { padding-left: var(--je-space-2); }
.thread-inside .row .arr { margin-left: auto; color: var(--je-accent); transition: transform var(--je-transition); }
a.row:hover .arr { transform: translateX(4px); }
.thread-inside .row.soon { color: var(--je-text-secondary); }
.thread-inside .row .tag-soon {
  margin-left: auto; font-size: 0.6875rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--je-text-secondary); border: var(--je-rule-hairline) solid var(--je-hairline); padding: 1px var(--je-space-2);
}
.section--inverse .thread-inside { border-top-color: #3a3a3a; }
.section--inverse .thread-inside .row { color: var(--je-text-inverse); border-bottom-color: #3a3a3a; }
.section--inverse .thread-inside .row.soon { color: #9a9a9a; }
.thread-more { margin-top: var(--je-space-6); }
.thread-media {
  background: var(--je-paper);
  border: var(--je-rule-hairline) solid var(--je-hairline);
  padding: var(--je-space-8);
}
.thread-media img, .thread-media svg { display: block; width: 100%; height: auto; }

/* Reveal-on-scroll (progressive enhancement; JS adds .in, fallback reveals all) */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal, .reveal.in { opacity: 1; transform: none; transition: none; } }

/* Expanded thread bands — multi-paragraph framing, described rows, per-band stats */
.section--inverse .thread-number { color: #cfcfcf; }
.section--inverse .thread-dek { color: var(--je-text-inverse); }
.thread-dek-group > p + p { margin-top: var(--je-space-4); }
.thread-inside .row { align-items: flex-start; }
.row-main { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.row-t { font-weight: 600; line-height: 1.25; }
.row-d { font-size: var(--je-caption-size); color: var(--je-text-secondary); line-height: 1.45; }
.section--inverse .thread-inside .row .row-d { color: #b8b8b8; }
.thread-inside .row .arr, .thread-inside .row .tag-soon { margin-top: 3px; }
.thread-stats { margin-top: var(--je-space-12); padding-top: var(--je-space-8); border-top: var(--je-rule-hairline) solid var(--je-hairline); }
.section--inverse .thread-stats { border-top-color: #3a3a3a; }

/* Scannable chunks + progressive disclosure ("Go deeper") */
.chunks { margin-top: var(--je-space-6); max-width: 34rem; }
.chunk {
  display: flex; gap: var(--je-space-3);
  padding: var(--je-space-4) 0;
  border-top: var(--je-rule-hairline) solid var(--je-hairline);
  font-size: 1.0625rem; font-weight: 500; line-height: 1.35;
  margin: 0;
}
.chunk:last-of-type { border-bottom: var(--je-rule-hairline) solid var(--je-hairline); }
.chunk .tick { color: var(--je-accent); font-weight: 700; flex: 0 0 auto; }
.section--inverse .chunk { border-color: #3a3a3a; }

details.godeeper { margin-top: var(--je-space-6); max-width: 34rem; }
details.godeeper > summary {
  cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: var(--je-space-2);
  font-size: var(--je-caption-size); letter-spacing: .06em; text-transform: uppercase; font-weight: 700;
  color: var(--je-text-secondary);
}
details.godeeper > summary::-webkit-details-marker { display: none; }
details.godeeper > summary .pm { display: inline-block; color: var(--je-accent); font-weight: 700; transition: transform var(--je-transition); }
details.godeeper[open] > summary .pm { transform: rotate(45deg); }
details.godeeper .more { margin-top: var(--je-space-4); color: var(--je-text-secondary); }
details.godeeper .more > p + p { margin-top: var(--je-space-4); }
.section--inverse details.godeeper > summary { color: #cfcfcf; }
.section--inverse details.godeeper .more { color: var(--je-text-inverse); }

/* ============================================================================
   HUB LAYOUT B — journal-dense, side-by-side data spread
   ============================================================================ */
.band-head { border-top: var(--je-rule-accent) solid var(--je-ink); padding-top: var(--je-space-4); }
.section--inverse .band-head { border-top-color: var(--je-paper); }
.band-kicker { font-size: var(--je-eyebrow-size); font-weight: 700; letter-spacing: var(--je-eyebrow-tracking); text-transform: uppercase; color: var(--je-text-secondary); margin: 0; }
.section--inverse .band-kicker { color: #cfcfcf; }
.band-title { margin-top: var(--je-space-3); font-size: clamp(1.75rem, 3.4vw, 2.5rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; }
.band-lead { margin-top: var(--je-space-4); font-size: var(--je-body-lg-size); color: var(--je-text-secondary); max-width: 48rem; }
.section--inverse .band-lead { color: var(--je-text-inverse); }

.spread { display: grid; grid-template-columns: 1fr; gap: var(--je-space-8); margin-top: var(--je-space-8); }
@media (min-width: 900px) {
  .spread { grid-template-columns: 1.1fr 0.95fr 1fr; gap: var(--je-space-8); align-items: start; }
  .spread--figfirst { grid-template-columns: 0.95fr 1.1fr 1fr; }
}
.spread .col { min-width: 0; }
.spread .chunks { margin-top: 0; max-width: none; }
.spread .chunk:first-of-type { border-top: var(--je-rule-hairline) solid var(--je-hairline); }
.spread details.godeeper { max-width: none; }
/* On stacked (mobile/tablet) widths, lead with the text on figure-first bands */
@media (max-width: 899px) {
  .spread--figfirst .col:nth-child(1) { order: 2; }
  .spread--figfirst .col:nth-child(2) { order: 1; }
  .spread--figfirst .col:nth-child(3) { order: 3; }
}

/* Figure column — modest, framed, with a journal caption */
.fig { margin: 0; }
.fig-plate { display: block; background: var(--je-paper); border: var(--je-rule-hairline) solid var(--je-hairline); padding: var(--je-space-4); }
.fig-plate img, .fig-plate svg { display: block; width: 100%; height: auto; }
.fig figcaption { margin-top: var(--je-space-3); font-size: var(--je-caption-size); line-height: 1.4; color: var(--je-text-secondary); }
.section--inverse .fig figcaption { color: var(--je-text-inverse); }

/* Data table — "Table" feel, compact */
.dtable { width: 100%; border-collapse: collapse; }
.dtable caption { text-align: left; font-size: var(--je-eyebrow-size); font-weight: 700; letter-spacing: var(--je-eyebrow-tracking); text-transform: uppercase; color: var(--je-text-secondary); padding-bottom: var(--je-space-2); }
.section--inverse .dtable caption { color: #cfcfcf; }
.dtable td { border-top: var(--je-rule-hairline) solid var(--je-hairline); padding: var(--je-space-3) 0; vertical-align: baseline; }
.dtable tr:last-child td { border-bottom: var(--je-rule-hairline) solid var(--je-hairline); }
.dtable .v { font-weight: 700; white-space: nowrap; padding-right: var(--je-space-4); font-size: 1.0625rem; letter-spacing: -0.01em; }
.dtable .v .u { font-weight: 400; font-size: 0.72em; color: var(--je-text-secondary); }
.dtable .v--accent { color: var(--je-accent); }
.dtable .d { color: var(--je-text-secondary); line-height: 1.35; font-size: var(--je-caption-size); }
.section--inverse .dtable td { border-color: #3a3a3a; }
.section--inverse .dtable .d, .section--inverse .dtable .v .u { color: #b8b8b8; }

/* References row */
.refs-row { margin-top: var(--je-space-12); border-top: var(--je-rule-accent) solid var(--je-accent); }
.refs-row .band-kicker { padding-top: var(--je-space-4); }
.refs-grid { display: grid; grid-template-columns: 1fr; margin-top: var(--je-space-2); }
@media (min-width: 760px) { .refs-grid { grid-template-columns: repeat(3, 1fr); } }
.ref { display: flex; gap: var(--je-space-3); align-items: flex-start; padding: var(--je-space-4) 0; border-bottom: var(--je-rule-hairline) solid var(--je-hairline); text-decoration: none; color: var(--je-ink); transition: padding-left var(--je-transition); }
@media (min-width: 760px) { .ref { border-bottom: 0; border-top: var(--je-rule-hairline) solid var(--je-hairline); padding-right: var(--je-space-6); } }
a.ref:hover { padding-left: var(--je-space-2); }
.ref-main { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.ref-t { font-weight: 600; font-size: 0.95rem; line-height: 1.25; }
.ref-d { display: block; margin-top: 2px; font-size: var(--je-caption-size); color: var(--je-text-secondary); font-weight: 400; line-height: 1.4; }
.ref .arr { margin-left: auto; color: var(--je-accent); }
.ref .tag-soon { margin-left: auto; font-size: 0.6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--je-text-secondary); border: var(--je-rule-hairline) solid var(--je-hairline); padding: 1px var(--je-space-2); }
.section--inverse .refs-row { border-top-color: var(--je-accent); }
.section--inverse .ref { color: var(--je-text-inverse); border-color: #3a3a3a; }
.section--inverse .ref-d { color: #b8b8b8; }

/* ----------------------------------------------------------------------------
   Inset the black bands so they read as panels within the page, not a footer.
   The global styles.css §18 rule only insets inverse sections at <=640px; on
   the science pages we inset at ALL widths (the figure-rich hub has black bands
   mid-page that otherwise look like the end). The <footer> stays full-bleed
   black, so it remains the only unambiguous end-of-page signal.
   ---------------------------------------------------------------------------- */
.section--inverse { margin-inline: clamp(0.875rem, 4vw, 4rem); }

/* ============================================================================
   ARTICLE DIRECTORY — filterable index
   ============================================================================ */
.dir-controls { display: grid; gap: var(--je-space-6); }
.filter-group { display: grid; gap: var(--je-space-3); }
.filter-label {
  font-size: var(--je-eyebrow-size);
  font-weight: var(--je-eyebrow-weight);
  letter-spacing: var(--je-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--je-text-secondary);
}
.filter-row { display: flex; flex-wrap: wrap; gap: var(--je-space-2); }
.filter-btn {
  appearance: none;
  border: var(--je-rule-hairline) solid var(--je-hairline);
  background: transparent;
  color: var(--je-ink);
  padding: var(--je-space-2) var(--je-space-4);
  font-family: var(--je-font-sans);
  font-size: var(--je-caption-size);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color var(--je-transition), background-color var(--je-transition), color var(--je-transition);
}
.filter-btn:hover { border-color: var(--je-ink); }
.filter-btn[aria-pressed="true"] {
  background: var(--je-ink);
  color: var(--je-paper);
  border-color: var(--je-ink);
}

.dir-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--je-space-4);
  margin-top: var(--je-space-8);
}
@media (min-width: 720px) { .dir-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .dir-grid { grid-template-columns: repeat(3, 1fr); } }

.dir-card {
  display: flex;
  flex-direction: column;
  border-top: var(--je-rule-hairline) solid var(--je-ink);
  padding-top: var(--je-space-4);
  text-decoration: none;
  color: var(--je-ink);
}
a.dir-card:hover .dir-card-title {
  text-decoration: underline;
  text-decoration-color: var(--je-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.dir-card-tags { display: flex; flex-wrap: wrap; gap: var(--je-space-2); }
.tag {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--je-text-secondary);
  border: var(--je-rule-hairline) solid var(--je-hairline);
  padding: 2px var(--je-space-2);
}
.dir-card-title {
  margin-top: var(--je-space-3);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
}
.dir-card-dek {
  margin-top: var(--je-space-2);
  font-size: var(--je-caption-size);
  line-height: var(--je-caption-leading);
  color: var(--je-text-secondary);
}
.dir-card--soon { opacity: 0.55; }
.dir-card--soon .dir-card-title::after {
  content: " · in progress";
  font-weight: 400;
  color: var(--je-text-secondary);
  font-size: var(--je-caption-size);
}
.dir-card[hidden] { display: none; }
.dir-empty {
  margin-top: var(--je-space-8);
  color: var(--je-text-secondary);
}

/* ---- Four-up pillar override (carried from prior science page) ------------- */
@media (min-width: 1080px) { .pillars.pillars--four { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .pillars.pillars--four { grid-template-columns: repeat(4, 1fr); } }

/* ---- Mobile rhythm -------------------------------------------------------- */
@media (max-width: 640px) {
  .stack > * + * { margin-top: var(--je-space-6); }
  .figure-plate { padding: var(--je-space-4); }
  .thread-media { padding: var(--je-space-4); }
  .threads { gap: var(--je-space-12); }
}

/* ============================================================================
   SECTION-TYPE TOOLKIT — varied, understated section layouts so each section
   reads as its own "shape." Same black-and-white + single freshwater accent;
   no new colors. Used across the article pages.
   ============================================================================ */

/* Chapter opener — a section header that reads like a numbered chapter */
.chapter {
  display: flex;
  align-items: baseline;
  gap: var(--je-space-4);
  border-top: var(--je-rule-accent) solid var(--je-ink);
  padding-top: var(--je-space-4);
}
.section--inverse .chapter { border-top-color: var(--je-paper); }
.chapter-no {
  flex: 0 0 auto;
  font-size: var(--je-eyebrow-size);
  font-weight: 700;
  letter-spacing: var(--je-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--je-text-secondary);
}
.section--inverse .chapter-no { color: var(--je-text-inverse); }
.chapter-eyebrow {
  display: block;
  font-size: var(--je-eyebrow-size);
  font-weight: var(--je-eyebrow-weight);
  letter-spacing: var(--je-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--je-text-secondary);
  margin-bottom: var(--je-space-2);
}
.section--inverse .chapter-eyebrow { color: var(--je-text-inverse); }
@media (max-width: 640px) { .chapter { flex-direction: column; gap: var(--je-space-2); } }

/* Lead statement — an oversized opening line for a section */
.lead {
  font-size: clamp(1.375rem, 2.6vw, 1.75rem);
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: -0.01em;
  max-width: 38rem;
}

/* Pull-quote divider */
.pullquote { max-width: 46rem; margin-inline: auto; text-align: center; }
.pullquote .accent-rule { max-width: 4rem; margin: 0 auto var(--je-space-6); }
.pullquote blockquote {
  margin: 0;
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
}
.pullquote cite {
  display: block;
  margin-top: var(--je-space-4);
  font-style: normal;
  font-size: var(--je-caption-size);
  letter-spacing: var(--je-caption-tracking);
  color: var(--je-text-secondary);
}
.section--inverse .pullquote cite { color: var(--je-text-inverse); }

/* Stat band — big numbers */
.statband { display: grid; grid-template-columns: 1fr; gap: var(--je-space-8); }
@media (min-width: 720px) { .statband { grid-template-columns: repeat(3, 1fr); gap: var(--je-space-6); } }
.stat-num {
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
}
.stat-num .u { font-size: 0.42em; font-weight: 700; color: var(--je-text-secondary); letter-spacing: 0; }
.section--inverse .stat-num .u { color: var(--je-text-inverse); }
.stat-num--accent { color: var(--je-accent); }
.stat-label {
  margin-top: var(--je-space-3);
  font-size: var(--je-caption-size);
  letter-spacing: var(--je-caption-tracking);
  line-height: var(--je-caption-leading);
  color: var(--je-text-secondary);
  max-width: 18rem;
}
.section--inverse .stat-label { color: var(--je-text-inverse); }

/* Side-by-side compare */
.compare { display: grid; grid-template-columns: 1fr; gap: var(--je-space-6); }
@media (min-width: 760px) { .compare { grid-template-columns: 1fr 1fr; gap: 0; } }
.compare-col { padding: var(--je-space-6); border: var(--je-rule-hairline) solid var(--je-hairline); }
@media (min-width: 760px) { .compare-col + .compare-col { border-left: 0; } }
.compare-col--keep { border-top: var(--je-rule-accent) solid var(--je-accent); }
.compare-h { font-size: var(--je-h3-size); font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.compare-col ul { margin: var(--je-space-4) 0 0; padding-left: 1.1rem; }
.compare-col li { margin-top: var(--je-space-2); color: var(--je-text-secondary); font-size: 0.9375rem; line-height: 1.5; }

/* Numbered steps */
.steps { display: grid; gap: var(--je-space-6); }
.step { display: grid; grid-template-columns: auto 1fr; gap: var(--je-space-4); align-items: start; }
.step-n {
  width: 2.25rem; height: 2.25rem;
  border: var(--je-rule-accent) solid var(--je-ink);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1rem;
}
.section--inverse .step-n { border-color: var(--je-paper); }
.step-body h3 { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.01em; }
.step-body p { margin-top: var(--je-space-2); color: var(--je-text-secondary); }

/* Full-width figure band — a figure sitting in .container rather than .reading */
.figure-band .figure-plate { padding: var(--je-space-12); }
@media (max-width: 640px) { .figure-band .figure-plate { padding: var(--je-space-6); } }
.figure-band figcaption { max-width: 44rem; }

/* Key-fact aside */
.keyfact { border: var(--je-rule-hairline) solid var(--je-ink); padding: var(--je-space-6); }
.keyfact .eyebrow { display: block; color: var(--je-text-secondary); margin-bottom: var(--je-space-2); }
.keyfact p { font-size: 1.0625rem; }

/* Definition list */
.define { border-left: var(--je-rule-accent) solid var(--je-accent); padding-left: var(--je-space-6); margin: 0; }
.define dt { font-weight: 700; }
.define dt + dt { margin-top: var(--je-space-4); }
.define dd { margin: var(--je-space-2) 0 0; color: var(--je-text-secondary); }

/* Inverse-band readability overrides */
.section--inverse .callout { color: var(--je-text-inverse); }
.section--inverse .keyfact { border-color: var(--je-paper); }
.section--inverse .define dd { color: var(--je-text-inverse); }