/* ============================================================================
   Article theme — re-skins the long-form "paper" pages (whitepaper,
   acquisition-thesis, factory-whitepaper, manufacturers, duration-blindness,
   encoder) onto the main Relling site design system.

   Loaded AFTER each page's inline <style>, so:
     • its :root redefinitions of the figure/font vars win the cascade
     • its direct font-family rules override the academic serif

   Colors are flipped separately by a one-time sepia→site palette substitution
   in the HTML (the figures use hardcoded hex). This file owns TYPE + TEXTURE.
   Requires tokens.css (loaded first on every paper) for the site vars.
   ============================================================================ */

:root {
  /* figure / chart fonts → site faces (figure CSS reads these vars) */
  --fsans:  var(--grotesk);
  --fserif: var(--grotesk);
  --fcaps:  var(--sub);
}

/* drop the cream paper noise/grain overlay */
body::before { display: none !important; }

/* the article scrolls inside a fixed full-screen panel; the prev/next + footer
   are body-level siblings AFTER it, so without this they paint on top and the
   (recently-darkened) footer bleeds through the article. Opaque bg + a z-index
   above them keeps the panel covering them. Nav stays above (z-index 900). */
.scroll-area { background: var(--bg); z-index: 1; }

/* Frame the reading layout into the SAME centered max-width as the nav + footer
   (1320 / clamp gutters) so the page margins line up across the chrome and the
   article, and resize identically. Without this the .container was full-bleed
   and the grid centered itself independently — so on wide screens the TOC ran
   past the nav's right edge and the left gutter ballooned. A slightly narrower
   reading measure keeps the TOC column from being crushed inside the frame. */
.scroll-area > .container {
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: clamp(20px, 4.5vw, 64px);
  box-sizing: border-box;
}
.scroll-area > .container { --max-content-width: 820px; }

/* body + reading chrome → site sans (academic styles set Newsreader directly) */
body,
.post-title, .post-subtitle, .post-eyebrow, .post-date, .draft-note,
.post-body, .post-body p, .post-body li, .post-body blockquote,
.post-body h2, .post-body h2 .num, .post-body h2 .title, .post-body h3, .post-body h4,
.toc, .toc-label, .toc a, .toc-num,
.fig-embed, .fig-embed .caption, .fig-embed .fig-label, .fig-embed .fig-label .title,
.fig-embed .legend, .data-table, .data-table th, .data-table td,
.sidenote, .sidenote p, .sidenote-label {
  font-family: var(--grotesk);
}
/* SVG figure text also rides the site sans */
.fig-embed text { font-family: var(--grotesk); }

/* clean opening paragraph — drop the academic drop-cap */
.post-body > p:first-of-type::first-letter {
  font-size: inherit; float: none; line-height: inherit;
  margin: 0; padding: 0 0.02em 0 0; font-weight: inherit;
  color: inherit; font-family: inherit;
}

/* prose links pick up the site amber-as-text */
.post-body a { color: var(--signal-text); text-underline-offset: 2px; }
.post-body a:hover { color: var(--signal-hi); }