/* ─────────────────────────────────────────────────────────────────────
   Operforma — Biblioteca reading view (one warm serif, open reading).

   Linked AFTER each article's inline <style>, so these .essay-scoped rules
   (specificity ≥ the inline reading rules) win and upgrade the reading
   experience without touching every inline block:

     • the WHOLE essay reads in one serif (var(--font-prose) = Newsreader,
       already self-hosted in tokens.css) — body, headlines, dek, and the
       data blocks (worked-examples, tables, pull-stats, TOC, sources). The
       mono/sans split for data is intentionally dropped: one reading face;
     • a drop cap on the answer-first lede;
     • UI controls (CTA buttons) and the dark closing card keep their mono
       register so the calls-to-action still read as controls.

   Reading is OPEN — the full article shows for everyone. The closing
   `.bib-gate` card is a plain apply CTA, not a wall: nothing is clipped or
   hidden, so structured data / AEO extraction / crawlers see everything. */

/* ── Reading type → Newsreader serif ── */
.essay h1.title {
  font-family: var(--font-prose);
  font-weight: 500;
  letter-spacing: -0.012em;
  line-height: 1.12;
}
.essay .deck {
  font-family: var(--font-prose);
  font-style: italic;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.5;
}
.essay .body p {
  font-family: var(--font-prose);
  font-size: 19px;
  line-height: 1.74;
}
/* strong/em inside body inherit Newsreader; keep the accent-not-italic em rule. */
.essay .body em { font-style: italic; }

/* ── One reading face: data blocks drop their mono/sans split ──
   Force the serif on everything that carries content inside the essay —
   section eyebrows, framing, TOC, pull-stats, honesty notes, sources,
   worked-examples and tables — so the article reads in a single typeface.
   Only the size/tracking/colour of each block is kept; just the face changes. */
.essay .section-head,
.essay .framing, .essay .framing-label,
.essay .toc, .essay .toc-label, .essay .toc-num, .essay .toc a,
.essay .pull-stat-number, .essay .pull-stat-label, .essay .pull-stat-source,
.essay .honesty, .essay .honesty-label,
.essay .sources, .essay .sources-label, .essay .source-list, .essay .source-list li,
.essay .cost-body,
.essay .data-table, .essay .data-table th, .essay .data-table td, .essay .data-table caption,
.essay table, .essay th, .essay td, .essay caption,
.essay .worked-example, .essay .worked-label, .essay .worked-row,
.essay .close-dek, .essay .close-link,
.essay .attribution-note {
  font-family: var(--font-prose);
}

/* Drop cap on the answer-first lede (the .body immediately after the dek). */
.essay .deck + .body > p:first-child::first-letter {
  float: left;
  font-family: var(--font-prose);
  font-weight: 500;
  font-size: 64px;
  line-height: 0.78;
  color: var(--accent);
  padding: 6px 11px 0 0;
}

/* ── Closing apply CTA (open reading — not a gate) ── */

/* The ink card (dark island on the light reading page). */
.essay .bib-gate {
  background: var(--ink);
  color: var(--paper);
  border-radius: 16px;
  padding: 32px 28px;
  margin: 8px 0 0;
}
.essay .bib-gate-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--indigo-soft);
  margin-bottom: 16px;
}
.essay .bib-gate-eyebrow::before {
  content: '';
  display: block;
  width: 18px;
  height: 1px;
  background: currentColor;
  flex-shrink: 0;
}
.essay .bib-gate-title {
  font-family: var(--font-prose);
  font-weight: 500;
  font-size: clamp(23px, 4.4vw, 27px);
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--paper);
  text-wrap: balance;
}
.essay .bib-gate-title em { font-style: italic; color: var(--indigo-soft); }
.essay .bib-gate-sub {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.55;
  color: var(--grey-mid);
  margin-top: 12px;
  max-width: 46ch;
  text-wrap: pretty;
}
.essay .bib-gate-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
}
.essay .bib-gate-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 50px;
  padding: 14px 22px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  border: 1px solid;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.essay .bib-gate-cta {
  background: var(--indigo);
  border-color: var(--indigo);
  color: var(--paper);
}
.essay .bib-gate-cta:hover {
  text-decoration: none;
  background: var(--indigo-soft);
  border-color: var(--indigo-soft);
  color: var(--ink);
  transform: translateY(-1px);
}
.essay .bib-gate-cta .arr { transition: transform .18s ease; }
.essay .bib-gate-cta:hover .arr { transform: translateX(3px); }
.essay .bib-gate-fine {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  line-height: 1.6;
  color: var(--grey-mid);
  margin-top: 16px;
}

@media (max-width: 600px) {
  .essay .bib-gate { padding: 26px 20px; border-radius: 14px; }
  .essay .deck + .body > p:first-child::first-letter { font-size: 54px; padding: 5px 9px 0 0; }
}