/* ─────────────────────────────────────────────────────────────────────────
   Lateral Space — Research hub
   Loaded IN ADDITION to brand.css + site.css, only on /research/* pages
   (the report "Europe in the Age of AI · 2026" and the publications index).

   Role: editorial long-form typography, a figure system with accessible data
   tables, and the report-specific furniture (chapters, findings, value-chain
   steps, method block, end CTA, sticky TOC, language switch, PDF embed).

   Rules of engagement
   · Every class here is prefixed .rs- so it can never collide with site.css.
   · Brand tokens are consumed, never redeclared — see styles/brand.css.
   · Loaded last, so equal-specificity overrides win by source order — no
     !important is needed (the one below is the screen-reader-only utility,
     where it is the conventional exception).
   · Mobile-first. Nothing may cause horizontal page scroll at 320px —
     wide figures and tables scroll inside their own container.
   ───────────────────────────────────────────────────────────────────────── */


/* ════════════════════════════════════════════════════════════════════════
   0 · FOUNDATIONS — local scale + shared behaviours
   ════════════════════════════════════════════════════════════════════════ */

.rs-page {
  /* Local, research-only knobs. Not brand tokens — safe to define here. */
  --rs-measure: 68ch;
  --rs-measure-lede: 60ch;
  --rs-gap: clamp(18px, 2.4vw, 32px);
  --rs-nav-offset: 96px;          /* fixed nav clearance for anchors + TOC */
  --rs-hairline: rgba(19, 18, 14, 0.10);
  --rs-hairline-strong: rgba(19, 18, 14, 0.18);
  --rs-surface: var(--bone-soft);
  --rs-lift: 0 18px 40px -28px rgba(19, 18, 14, 0.40);
}

/* Contrast floor. Measured against --bone (#F2EEE5):
     --ink         16.2:1  ✓   --graphite     7.5:1  ✓
     --signal-deep  5.0:1  ✓   --graphite-2   4.0:1  ✗
     --graphite-3   2.4:1  ✗   --signal       2.0:1  ✗
   Only ink, graphite and signal-deep clear WCAG AA (4.5:1) for text, so the
   research pages carry hierarchy in size, weight and family — not in tint.
   graphite-3 and signal stay, but only as hairlines, rules and dots. */

/* Anchor targets clear the fixed nav. */
.rs-anchor,
.rs-section[id],
.rs-figure[id],
.rs-chapter-target { scroll-margin-top: var(--rs-nav-offset); }

/* Nothing inside the hub may push the page sideways. */
.rs-page :where(img, svg, video, iframe, canvas) { max-width: 100%; }
.rs-page :where(pre, code) { overflow-wrap: anywhere; }

/* Grid/flex children must be allowed to shrink below their content width,
   otherwise a wide table forces the whole page wider at 320px. */
.rs-layout > *,
.rs-chapters > *,
.rs-findings > *,
.rs-steps > *,
.rs-method-grid > *,
.rs-index-card > * { min-width: 0; }

/* A <details> or a table wrapper nested in a grid track keeps min-width:auto
   by default, so its min-content width (the table) would push the whole page
   sideways at 320px. Force it to zero so the scroll container does its job. */
.rs-figure > *,
.rs-figure figcaption > *,
.rs-figcaption > *,
.rs-data,
.rs-data > *,
.rs-table-wrap { min-width: 0; }


/* ════════════════════════════════════════════════════════════════════════
   1 · HERO — big editorial opener
   The page supplies its own backdrop (e.g. a .tactile layer or an inline
   background). This block deliberately sets NO background image.
   ════════════════════════════════════════════════════════════════════════ */

.rs-hero {
  position: relative;
  isolation: isolate;
  background: transparent;
  padding: clamp(104px, 16vw, 176px) 0 clamp(56px, 8vw, 96px);
  overflow: hidden;
}
.rs-hero > .shell { position: relative; z-index: 1; }

.rs-hero-inner {
  display: grid;
  gap: clamp(20px, 3vw, 30px);
  max-width: 960px;
}

.rs-hero .eyebrow { color: var(--graphite); }

.rs-hero-title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(38px, 9vw, 104px);
  line-height: 0.98;
  letter-spacing: -0.042em;
  color: var(--ink);
  text-wrap: balance;
  overflow-wrap: break-word;
}
.rs-hero-title em,
.rs-hero-title .rs-serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.02em;
}

/* Serif italic subtitle — "Intelligence, made real." */
.rs-hero-sub {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 4.4vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--signal-deep);
  text-wrap: balance;
}

.rs-hero-lede {
  margin: 0;
  max-width: var(--rs-measure-lede);
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.55;
  letter-spacing: -0.008em;
  color: var(--graphite);
  text-wrap: pretty;
}

.rs-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
}


/* ════════════════════════════════════════════════════════════════════════
   2 · TRUST LINE — 43 pages · 97 sources · data to 31 July 2026 · free
   ════════════════════════════════════════════════════════════════════════ */

.rs-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--graphite);
}
.rs-trust > li {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
}
/* Hairline separator before every item but the first. Because the list
   wraps, the rule sits inside the item and wraps with it. */
.rs-trust > li + li::before {
  content: "";
  width: 1px;
  height: 11px;
  background: var(--rs-hairline-strong);
  flex: 0 0 auto;
}
.rs-trust > li strong {
  font-weight: 400;
  color: var(--ink);
}
.rs-trust .rs-trust-free { color: var(--signal-deep); }


/* ════════════════════════════════════════════════════════════════════════
   3 · CTA ROW — primary + secondary, with a file-weight hint
   ════════════════════════════════════════════════════════════════════════ */

.rs-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.rs-cta-row .btn { flex: 0 0 auto; }

/* At 320px a nowrap pill can overflow — let buttons soften instead. */
@media (max-width: 400px) {
  .rs-cta-row .btn {
    white-space: normal;
    text-align: left;
  }
}

.rs-cta-note {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--graphite);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
.rs-cta-note::before {
  content: "";
  width: 12px;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}


/* ════════════════════════════════════════════════════════════════════════
   4 · SECTION RHYTHM
   ════════════════════════════════════════════════════════════════════════ */

.rs-section {
  position: relative;
  padding: clamp(72px, 10vw, 140px) 0;
}
.rs-section + .rs-section { padding-top: 0; }
.rs-section.rs-section-tight { padding: clamp(48px, 6vw, 88px) 0; }

.rs-section-head {
  display: grid;
  gap: 16px;
  max-width: 760px;
  margin-bottom: clamp(32px, 5vw, 64px);
}
.rs-section-title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(26px, 3.4vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.028em;
  color: var(--ink);
  text-wrap: balance;
}
.rs-section-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--signal-deep);
}

.rs-rule {
  height: 1px;
  border: 0;
  margin: clamp(40px, 6vw, 72px) 0;
  background: var(--rs-hairline);
}


/* ════════════════════════════════════════════════════════════════════════
   5 · READING TYPE — lede + prose
   ════════════════════════════════════════════════════════════════════════ */

.rs-lede {
  max-width: var(--rs-measure-lede);
  margin: 0;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.55;
  letter-spacing: -0.008em;
  color: var(--graphite);
  text-wrap: pretty;
}

.rs-prose {
  max-width: var(--rs-measure);
  font-size: clamp(16px, 1.05vw, 18px);
  line-height: 1.65;
  color: var(--graphite);
  text-wrap: pretty;
  /* Long source URLs and German compounds must break, not overflow. */
  overflow-wrap: break-word;
}
.rs-prose > :first-child { margin-top: 0; }
.rs-prose > :last-child { margin-bottom: 0; }
.rs-prose p { margin: 0; }
.rs-prose p + p { margin-top: 1.05em; }

.rs-prose strong { color: var(--ink); font-weight: 500; }
.rs-prose em { font-family: var(--font-serif); font-style: italic; font-size: 1.06em; }

.rs-prose h3 {
  margin: 1.9em 0 0.55em;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(20px, 2.1vw, 26px);
  line-height: 1.18;
  letter-spacing: -0.022em;
  color: var(--ink);
}
.rs-prose h4 {
  margin: 1.6em 0 0.45em;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--graphite);
}

/* brand.css strips list styling globally — restore it for prose only. */
.rs-prose ul,
.rs-prose ol {
  margin: 1.05em 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.5em;
}
.rs-prose li {
  position: relative;
  padding-left: 22px;
}
.rs-prose ul > li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.72em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--signal-deep);
}
.rs-prose ol { counter-reset: rs-ol; }
.rs-prose ol > li { counter-increment: rs-ol; padding-left: 30px; }
.rs-prose ol > li::before {
  content: counter(rs-ol, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0.16em;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-mono);
  color: var(--graphite);
}

/* Links in running text keep an underline — this is a report, not a UI. */
.rs-prose a,
.rs-link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--rs-hairline-strong);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 0.3s var(--ease-out), color 0.3s var(--ease-out);
}
.rs-prose a:hover,
.rs-link:hover {
  color: var(--signal-deep);
  text-decoration-color: var(--signal-deep);
}

/* Inline source reference — <sup class="rs-ref"><a href="#s-14">14</a></sup> */
.rs-ref {
  font-family: var(--font-mono);
  font-size: 0.62em;
  letter-spacing: 0.02em;
  vertical-align: super;
  line-height: 0;
  margin-left: 2px;
}
.rs-ref a { color: var(--signal-deep); text-decoration: none; }
.rs-ref a:hover { text-decoration: underline; }

/* Pull quote / thesis line */
.rs-quote {
  max-width: 46ch;
  margin: clamp(32px, 5vw, 56px) 0;
  padding-left: clamp(18px, 3vw, 30px);
  border-left: 2px solid var(--signal);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(21px, 2.8vw, 32px);
  line-height: 1.22;
  letter-spacing: -0.015em;
  color: var(--ink);
}


/* ════════════════════════════════════════════════════════════════════════
   6 · FIGURE SYSTEM — <figure> + <figcaption> + <details class="rs-data">
   ════════════════════════════════════════════════════════════════════════ */

.rs-figure {
  margin: clamp(36px, 5vw, 64px) 0;
  padding: clamp(16px, 2.6vw, 28px);
  background: var(--rs-surface);
  border: 1px solid var(--bone-3);
  border-radius: var(--radius-lg);
}
.rs-figure.rs-figure-bare {
  background: transparent;
  border: 0;
  padding: 0;
}

/* The plot itself. Scales to the container by default. */
.rs-figure-media {
  position: relative;
  border-radius: var(--radius);
  background: var(--bone);
  overflow: hidden;
}
.rs-figure-media > svg,
.rs-figure-media > img {
  display: block;
  width: 100%;
  height: auto;
}

/* Genuinely wide plots: when the figure's own box drops below the plot's
   legible minimum, the plot keeps that minimum and scrolls inside its media
   box — the page itself never scrolls sideways. This is a container query,
   not a viewport query, so a narrow content column (e.g. beside the sticky
   TOC on a 1024px laptop) behaves the same as a narrow phone. Where
   @container is unsupported the plot simply scales down: still no overflow. */
.rs-figure { container-type: inline-size; container-name: rs-fig; }

.rs-figure-scroll-hint {
  display: none;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--graphite);
}

/* 900px, not 560: the plots are authored on a 1200-unit canvas, so a 560px box
   renders their 13-unit source labels at ~6 CSS px — technically visible, not
   actually readable. At 900px the smallest label lands near 10px and the body
   labels near 14px, which is the real legible floor. Below that the plot keeps
   900px and scrolls inside its own media box; the page never scrolls sideways. */
@container rs-fig (max-width: 900px) {
  .rs-figure-wide .rs-figure-media {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .rs-figure-wide .rs-figure-media > svg,
  .rs-figure-wide .rs-figure-media > img {
    width: 900px;
    min-width: 900px;
    max-width: none;
  }
  .rs-figure-wide .rs-figure-scroll-hint { display: block; }
}

/* ── Caption: title + meta + source ─────────────────────────────────── */
.rs-figure figcaption,
.rs-figcaption {
  display: grid;
  gap: 6px;
  margin-top: clamp(14px, 2vw, 20px);
  padding-top: clamp(12px, 1.8vw, 16px);
  border-top: 1px solid var(--rs-hairline);
}
.rs-figure-num {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--signal-deep);
}
.rs-figure-title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}
.rs-figure-meta {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--graphite);
  max-width: 62ch;
}
.rs-figure-source {
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.55;
  letter-spacing: var(--tracking-mono);
  color: var(--graphite);
  overflow-wrap: anywhere;
}
.rs-figure-source a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--rs-hairline-strong);
  text-underline-offset: 2px;
}
.rs-figure-source a:hover { color: var(--ink); }


/* ── Figure actions — small pill buttons ────────────────────────────── */
.rs-figure-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}
.rs-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--rs-hairline-strong);
  border-radius: 999px;
  background: var(--bone);
  color: var(--graphite);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out),
              background 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.rs-action:hover {
  color: var(--ink);
  border-color: var(--ink);
  background: var(--bone-soft);
  transform: translateY(-1px);
}
.rs-action:active { transform: translateY(0); }
.rs-action svg { width: 12px; height: 12px; flex: 0 0 auto; }
.rs-action.is-done {
  color: var(--signal-deep);
  border-color: var(--signal);
  background: var(--signal-soft);
}


/* ── Accessible data table inside <details class="rs-data"> ─────────── */
.rs-data {
  margin-top: 14px;
  border-top: 1px solid var(--rs-hairline);
  padding-top: 12px;
}
.rs-data > summary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--graphite);
  padding: 4px 0;
  transition: color 0.3s var(--ease-out);
}
.rs-data > summary::-webkit-details-marker { display: none; }
.rs-data > summary::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-right: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor;
  transform: rotate(-45deg) translate(-1px, -1px);
  transition: transform 0.3s var(--ease-out);
}
.rs-data[open] > summary::before { transform: rotate(45deg) translate(-1px, -1px); }
.rs-data > summary:hover { color: var(--ink); }
.rs-data[open] > summary { color: var(--ink); }

/* The scroll container. Give it tabindex="0" in the markup so keyboard
   users can reach and scroll a wide table. */
.rs-table-wrap {
  margin-top: 12px;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  border: 1px solid var(--rs-hairline);
  border-radius: var(--radius);
  background: var(--bone);
}

.rs-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--ink);
}
.rs-table caption {
  caption-side: top;
  text-align: left;
  padding: 12px 14px 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--graphite);
}
.rs-table th,
.rs-table td {
  text-align: left;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rs-hairline);
  vertical-align: top;
}
.rs-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--graphite);
  background: var(--bone-2);
  border-bottom: 1px solid var(--rs-hairline-strong);
  white-space: nowrap;
}
.rs-table tbody tr:last-child th,
.rs-table tbody tr:last-child td { border-bottom: 0; }
.rs-table tbody tr:hover { background: rgba(19, 18, 14, 0.025); }
.rs-table tbody th[scope="row"] {
  font-weight: 500;
  color: var(--ink);
}
.rs-table tfoot td,
.rs-table tfoot th {
  border-top: 1px solid var(--rs-hairline-strong);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--graphite);
}

/* Numeric columns — right aligned, tabular figures. Mark cells with
   class="rs-num" (or data-num) on both the <th> and the <td>. */
.rs-table th.rs-num,
.rs-table td.rs-num,
.rs-table th[data-num],
.rs-table td[data-num] {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rs-table td.rs-num { color: var(--ink); }
.rs-table .rs-unit {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-mono);
  color: var(--graphite);
  margin-left: 4px;
}
.rs-table .rs-na { color: var(--graphite); }

.rs-data-note {
  margin: 10px 0 0;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: var(--tracking-mono);
  color: var(--graphite);
  overflow-wrap: anywhere;
}


/* ════════════════════════════════════════════════════════════════════════
   7 · CHAPTERS — six anchor cards
   ════════════════════════════════════════════════════════════════════════ */

.rs-chapters {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rs-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 600px) { .rs-chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .rs-chapters { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.rs-chapter {
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
  padding: clamp(20px, 2.6vw, 28px);
  background: var(--bone-soft);
  border: 1px solid var(--bone-3);
  border-radius: var(--radius-lg);
  color: var(--ink);
  transition: border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out),
              box-shadow 0.3s var(--ease-out), background 0.3s var(--ease-out);
}
.rs-chapter:hover {
  border-color: var(--rs-hairline-strong);
  background: var(--bone);
  transform: translateY(-2px);
  box-shadow: var(--rs-lift);
}
.rs-chapter-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-mono);
  color: var(--signal-deep);
}
.rs-chapter-title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(18px, 1.9vw, 22px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}
.rs-chapter-body {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--graphite);
}
.rs-chapter-go {
  margin-top: auto;
  padding-top: 12px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--graphite);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: color 0.3s var(--ease-out), gap 0.3s var(--ease-out);
}
.rs-chapter:hover .rs-chapter-go { color: var(--ink); gap: 12px; }


/* ════════════════════════════════════════════════════════════════════════
   8 · FINDINGS — three numbered conclusions
   ════════════════════════════════════════════════════════════════════════ */

.rs-findings {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 4vw, 48px);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 900px) { .rs-findings { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.rs-finding {
  display: grid;
  gap: 10px;
  align-content: start;
  padding-top: 20px;
  border-top: 1px solid var(--rs-hairline-strong);
}
.rs-finding-num {
  font-family: var(--font-mono);
  font-size: clamp(34px, 5vw, 54px);
  line-height: 0.9;
  letter-spacing: -0.01em;
  color: var(--signal-deep);
  font-variant-numeric: tabular-nums;
}
.rs-finding-title {
  margin: 4px 0 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(19px, 2vw, 24px);
  line-height: 1.18;
  letter-spacing: -0.022em;
  color: var(--ink);
  text-wrap: balance;
}
.rs-finding-body {
  margin: 0;
  font-size: 15px;
  line-height: 1.62;
  color: var(--graphite);
  max-width: 46ch;
}


/* ════════════════════════════════════════════════════════════════════════
   9 · STEPS — the four value-chain stages
   ════════════════════════════════════════════════════════════════════════ */

.rs-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 2.6vw, 30px);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 600px) { .rs-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .rs-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.rs-step {
  display: grid;
  gap: 8px;
  align-content: start;
  padding-top: 18px;
  border-top: 2px solid var(--ink);
}
.rs-step-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-mono);
  color: var(--signal-deep);
}
.rs-step-label {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.rs-step-figure {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
  overflow-wrap: break-word;
}
.rs-step-unit {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--graphite);
  line-height: 1.5;
}
.rs-step-source {
  margin: 6px 0 0;
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1.6;
  letter-spacing: var(--tracking-mono);
  color: var(--graphite);
  overflow-wrap: anywhere;
}
.rs-step-source a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.rs-step-source a:hover { color: var(--graphite); }


/* ════════════════════════════════════════════════════════════════════════
   10 · METHOD + SOURCES — quiet warm surface
   ════════════════════════════════════════════════════════════════════════ */

.rs-method {
  background: var(--bone-2);
  border: 1px solid var(--bone-3);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 4vw, 48px);
}
.rs-method-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3.4vw, 44px);
}
@media (min-width: 768px) {
  .rs-method-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

.rs-method-title {
  margin: 0 0 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--graphite);
}
.rs-method-body {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--graphite);
  max-width: 60ch;
}
.rs-method-body p { margin: 0; }
.rs-method-body p + p { margin-top: 0.95em; }

/* Definition-style facts: coverage, cut-off date, licence */
.rs-method-facts { margin: 0; }
.rs-method-facts dt {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--graphite);
  margin-bottom: 3px;
}
.rs-method-facts dd {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
}
.rs-method-facts dd:last-child { margin-bottom: 0; }

/* Numbered source list — brand.css removes list markers, so count here. */
.rs-sources {
  counter-reset: rs-src;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0;
}
.rs-source {
  counter-increment: rs-src;
  position: relative;
  padding: 10px 0 10px 38px;
  border-top: 1px solid var(--rs-hairline);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--graphite);
  overflow-wrap: anywhere;
}
.rs-source:first-child { border-top: 0; }
.rs-source::before {
  content: counter(rs-src, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 13px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-mono);
  color: var(--graphite);
  font-variant-numeric: tabular-nums;
}
.rs-source a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--rs-hairline-strong);
  text-underline-offset: 2px;
}
.rs-source a:hover { color: var(--signal-deep); text-decoration-color: var(--signal-deep); }
.rs-source-meta {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--graphite);
  margin-top: 3px;
}


/* ════════════════════════════════════════════════════════════════════════
   11 · END CTA — restrained dark block (executive briefing)
   ════════════════════════════════════════════════════════════════════════ */

.rs-endcta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--bone);
  color: var(--ink);
  border-radius: var(--radius-xl);
  padding: clamp(32px, 6vw, 72px);
}
.rs-endcta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(52% 44% at 82% 18%, rgba(168, 176, 147, 0.22) 0%, transparent 62%),
    radial-gradient(44% 38% at 12% 84%, rgba(154, 116, 64, 0.16) 0%, transparent 62%);
  pointer-events: none;
}
.rs-endcta-inner {
  display: grid;
  gap: clamp(18px, 2.6vw, 26px);
  max-width: 720px;
}
.rs-endcta .eyebrow { color: rgba(242, 238, 229, 0.62); }
.rs-endcta-title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(26px, 3.6vw, 44px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--bone);
  text-wrap: balance;
}
.rs-endcta-title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--signal);
}
.rs-endcta-body {
  margin: 0;
  max-width: 56ch;
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.6;
  color: rgba(242, 238, 229, 0.74);
}

/* Dark-surface utility — also usable on a dark hero. */
.rs-on-dark,
.rs-endcta { --rs-hairline: rgba(242, 238, 229, 0.12); --rs-hairline-strong: rgba(242, 238, 229, 0.24); }
.rs-endcta .btn-primary { background: var(--ink); color: var(--bone); }
.rs-endcta .btn-primary:hover { background: #FFFFFF; }
.rs-endcta .btn-ghost { color: var(--bone); border-color: rgba(242, 238, 229, 0.20); }
.rs-endcta .btn-ghost:hover { background: rgba(242, 238, 229, 0.07); border-color: rgba(242, 238, 229, 0.44); }
.rs-endcta .rs-cta-note { color: rgba(242, 238, 229, 0.55); }
.rs-endcta .rs-trust { color: rgba(242, 238, 229, 0.62); }
.rs-endcta .rs-trust > li strong { color: var(--bone); }
.rs-endcta .rs-trust .rs-trust-free { color: var(--signal); }


/* ════════════════════════════════════════════════════════════════════════
   12 · INDEX CARD — one publication on /research/
   ════════════════════════════════════════════════════════════════════════ */

.rs-index-list {
  display: grid;
  gap: clamp(20px, 3vw, 32px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rs-index-card {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(18px, 3vw, 36px);
  align-items: start;
  padding: clamp(18px, 2.6vw, 30px);
  background: var(--bone-soft);
  border: 1px solid var(--bone-3);
  border-radius: var(--radius-lg);
  color: var(--ink);
  transition: border-color 0.3s var(--ease-out), transform 0.3s var(--ease-out),
              box-shadow 0.3s var(--ease-out), background 0.3s var(--ease-out);
}
.rs-index-card:hover {
  border-color: var(--rs-hairline-strong);
  background: var(--bone);
  transform: translateY(-2px);
  box-shadow: var(--rs-lift);
}
@media (min-width: 720px) {
  .rs-index-card { grid-template-columns: minmax(0, 236px) minmax(0, 1fr); }
}

.rs-index-cover {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bone-2);
  border: 1px solid var(--rs-hairline);
  aspect-ratio: 1 / 1.414;
}
.rs-index-cover img,
.rs-index-cover svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.rs-index-body {
  display: grid;
  gap: 12px;
  align-content: start;
}
.rs-index-title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(22px, 2.8vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.028em;
  color: var(--ink);
  text-wrap: balance;
}
.rs-index-sub {
  margin: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(17px, 1.8vw, 22px);
  line-height: 1.2;
  color: var(--signal-deep);
}
.rs-index-desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--graphite);
  max-width: 60ch;
}
.rs-index-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}
.rs-index-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--signal);
  background: var(--signal-soft);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  line-height: 1;
}


/* ════════════════════════════════════════════════════════════════════════
   13 · LANGUAGE SWITCH
   This hub ships one HTML file per language, so it is a plain <a href>,
   not the site's JS .lang-toggle.
   ════════════════════════════════════════════════════════════════════════ */

.rs-lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--rs-hairline-strong);
  border-radius: 999px;
  background: transparent;
  color: var(--graphite);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out), background 0.3s var(--ease-out);
}
.rs-lang-switch:hover {
  color: var(--ink);
  border-color: var(--ink);
  background: rgba(19, 18, 14, 0.04);
}
.rs-lang-switch::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--signal-deep);
  flex: 0 0 auto;
}
.rs-on-dark .rs-lang-switch,
.rs-endcta .rs-lang-switch { color: rgba(242, 238, 229, 0.7); }
.rs-on-dark .rs-lang-switch:hover,
.rs-endcta .rs-lang-switch:hover { color: var(--bone); border-color: var(--bone); background: rgba(242, 238, 229, 0.07); }


/* ════════════════════════════════════════════════════════════════════════
   14 · LAYOUT + STICKY TABLE OF CONTENTS (desktop only)
   ════════════════════════════════════════════════════════════════════════ */

.rs-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}

.rs-toc { display: none; }

@media (min-width: 1024px) {
  .rs-layout { grid-template-columns: 216px minmax(0, 1fr); }
  .rs-toc {
    display: block;
    position: sticky;
    top: var(--rs-nav-offset);
    align-self: start;
    max-height: calc(100vh - var(--rs-nav-offset) - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 8px;
  }
}
@media (min-width: 1280px) {
  .rs-layout { grid-template-columns: 240px minmax(0, 1fr); }
}

.rs-toc-title {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--graphite);
}
.rs-toc-list {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--rs-hairline);
}
.rs-toc-link {
  display: block;
  padding: 7px 0 7px 14px;
  margin-left: -1px;
  border-left: 1px solid transparent;
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--graphite);
  transition: color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
}
.rs-toc-link:hover { color: var(--ink); border-left-color: var(--rs-hairline-strong); }
.rs-toc-link.is-active {
  color: var(--ink);
  border-left-color: var(--signal-deep);
}
.rs-toc-link .rs-toc-num {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-mono);
  color: var(--graphite);
  margin-right: 8px;
}
.rs-toc-foot {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--rs-hairline);
  display: grid;
  gap: 10px;
  justify-items: start;
}


/* ════════════════════════════════════════════════════════════════════════
   15 · PDF EMBED — hidden until the reader asks for it
   ════════════════════════════════════════════════════════════════════════ */

.rs-pdf-embed {
  display: none;
  margin-top: clamp(20px, 3vw, 32px);
}
.rs-pdf-embed.is-open { display: block; }

.rs-pdf-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1.35;
  min-height: 420px;
  border: 1px solid var(--bone-3);
  border-radius: var(--radius);
  background: var(--bone-2);
  overflow: hidden;
}
.rs-pdf-frame > iframe,
.rs-pdf-frame > object,
.rs-pdf-frame > embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
@media (min-width: 1024px) {
  .rs-pdf-frame { aspect-ratio: 1 / 0.92; min-height: 640px; }
}
.rs-pdf-note {
  margin: 10px 0 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--graphite);
}


/* ════════════════════════════════════════════════════════════════════════
   16 · FOCUS STATES — visible and high contrast on every control
   Sits after everything else so it always wins on equal specificity.
   ════════════════════════════════════════════════════════════════════════ */

.rs-page a:focus-visible,
.rs-page button:focus-visible,
.rs-page summary:focus-visible,
.rs-page [tabindex]:focus-visible,
.rs-action:focus-visible,
.rs-chapter:focus-visible,
.rs-index-card:focus-visible,
.rs-lang-switch:focus-visible,
.rs-toc-link:focus-visible,
.rs-table-wrap:focus-visible,
.rs-data > summary:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: var(--radius);
}
/* A second, lighter ring so the indicator survives on warm surfaces too. */
.rs-action:focus-visible,
.rs-chapter:focus-visible,
.rs-index-card:focus-visible,
.rs-lang-switch:focus-visible {
  box-shadow: 0 0 0 4px var(--signal-soft);
}
/* On the dark block the ink outline would vanish — flip it. */
.rs-endcta a:focus-visible,
.rs-endcta button:focus-visible,
.rs-on-dark a:focus-visible,
.rs-on-dark button:focus-visible {
  outline-color: var(--bone);
  box-shadow: 0 0 0 4px rgba(168, 176, 147, 0.35);
}
/* Keyboard-scrollable containers get a quiet resting affordance. */
.rs-table-wrap:focus-visible,
.rs-figure.rs-figure-wide .rs-figure-media:focus-visible {
  outline-offset: 2px;
}

/* Skip link for the long report page. */
.rs-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  background: var(--ink);
  color: var(--bone);
  border-radius: 0 0 var(--radius) 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}
.rs-skip:focus {
  left: 0;
  outline: 2px solid var(--signal);
  outline-offset: -2px;
}


/* ════════════════════════════════════════════════════════════════════════
   17 · REDUCED MOTION
   ════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .rs-page *,
  .rs-page *::before,
  .rs-page *::after {
    animation-duration: 0.001ms;
    animation-iteration-count: 1;
    transition-duration: 0.001ms;
    scroll-behavior: auto;
  }
  .rs-action:hover,
  .rs-action:active,
  .rs-chapter:hover,
  .rs-index-card:hover {
    transform: none;
  }
  .rs-chapter:hover .rs-chapter-go { gap: 8px; }
  .rs-data > summary::before,
  .rs-data[open] > summary::before { transition: none; }
}


/* ════════════════════════════════════════════════════════════════════════
   18 · PRINT — the report should print as a document
   ════════════════════════════════════════════════════════════════════════ */

@media print {
  /* Chrome / site furniture */
  .nav,
  .mobile-menu,
  .footer,
  .cookie-banner,
  .rs-toc,
  .rs-skip,
  .rs-figure-actions,
  .rs-cta-row,
  .rs-cta-note,
  .rs-endcta,
  .rs-pdf-embed,
  .rs-lang-switch,
  .rs-figure-scroll-hint { display: none; }

  .rs-page {
    background: #FFFFFF;
    color: #000000;
  }

  /* Scroll-reveal must not print blank. */
  .reveal,
  .reveal-stagger > * {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }

  .rs-hero { padding: 0 0 24pt; }
  .rs-section { padding: 18pt 0; page-break-inside: auto; }
  .rs-layout { display: block; }

  .rs-prose,
  .rs-lede,
  .rs-hero-lede { max-width: none; color: #1a1a1a; }

  /* Figures and their data stay, and stay whole. */
  .rs-figure {
    page-break-inside: avoid;
    break-inside: avoid;
    border: 1px solid #bbbbbb;
    background: transparent;
    padding: 10pt;
  }
  .rs-figure { container-type: normal; }
  .rs-figure-wide .rs-figure-media { overflow: visible; }
  .rs-figure-wide .rs-figure-media > svg,
  .rs-figure-wide .rs-figure-media > img { width: 100%; min-width: 0; max-width: 100%; }

  /* Expand the collapsed data tables so nothing is lost on paper. */
  .rs-data > summary { display: none; }
  .rs-data:not([open]) > *:not(summary) { display: block; }
  .rs-table-wrap { overflow: visible; border: 0; }
  .rs-table { min-width: 0; font-size: 9pt; }
  .rs-table thead th { position: static; background: transparent; }
  .rs-table,
  .rs-table tr { page-break-inside: avoid; break-inside: avoid; }

  .rs-chapter,
  .rs-finding,
  .rs-step,
  .rs-method,
  .rs-index-card {
    page-break-inside: avoid;
    break-inside: avoid;
    box-shadow: none;
    background: transparent;
  }

  .rs-hero-title,
  .rs-section-title,
  .rs-figure-title { page-break-after: avoid; break-after: avoid; }

  /* Expose link targets in the printed source list. */
  .rs-source a::after { content: " (" attr(href) ")"; font-size: 8pt; word-break: break-all; }
}


/* ════════════════════════════════════════════════════════════════════════
   BRIDGE — classes emitted by tools/build-research-pages.py
   The page generator and this stylesheet were written in parallel, so the
   generator's class names are reconciled here rather than by rewriting the
   markup. Everything below reuses the tokens and rhythm already established
   above; nothing here introduces a new visual idea.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Utilities ──────────────────────────────────────────────────────────── */
.rs-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}
.rs-narrow { max-width: 78ch; }

/* ── Headings emitted by the generator ─────────────────────────────────── */
.rs-h2 {
  margin: 10px 0 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(26px, 3.4vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.028em;
  color: var(--ink);
  text-wrap: balance;
}
.rs-hero-eyebrow { margin: 0 0 18px; }
.rs-hero-h1 {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(38px, 7vw, 84px);
  line-height: 0.98;
  letter-spacing: -0.038em;
  color: var(--ink);
  text-wrap: balance;
}
.rs-index-h1 {
  margin: 10px 0 20px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(30px, 5vw, 58px);
  line-height: 1.04;
  letter-spacing: -0.032em;
  color: var(--ink);
  max-width: 20ch;
  text-wrap: balance;
}
.rs-index-hero { padding-bottom: 0; }

/* ── Section surfaces ───────────────────────────────────────────────────── */
.rs-section-alt { background: var(--bone-2); }
/* These sections carry data-mode="dark", which already swaps every brand token
   (--bone becomes the dark surface, --ink the light type). So the plain
   semantics are correct here, and every child — body copy, hairlines, muted
   captions — inherits the right contrast automatically. Writing
   background: var(--ink) here would invert twice and render light-on-light. */
.rs-section-dark[data-mode="dark"] {
  background: var(--bone);
  color: var(--ink);
}
.rs-section-dark .eyebrow { opacity: 0.72; }

/* ── Hero secondary CTA ─────────────────────────────────────────────────── */
.rs-cta-secondary {
  margin: 18px 0 0;
  font-size: 14px;
  color: var(--graphite);
}
.rs-cta-secondary a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(19, 18, 14, 0.25);
  text-underline-offset: 3px;
}
.rs-cta-secondary a:hover { text-decoration-color: var(--ink); }

/* ── Barbell: the identity block ────────────────────────────────────────── */
.rs-barbell-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 34px;
}
.rs-barbell-col {
  padding: 24px;
  border: var(--line);
  border-radius: var(--radius-lg);
  background: var(--bone-soft);
}
.rs-barbell-col h3 {
  margin: 6px 0 10px;
  font-size: clamp(17px, 1.7vw, 21px);
  font-weight: 500;
  letter-spacing: -0.018em;
  color: var(--ink);
}
.rs-barbell-col p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--graphite);
}
.rs-barbell-k {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--graphite);
}
.rs-barbell-col.rs-up { border-left: 2px solid var(--signal-deep); }
.rs-barbell-col.rs-mid { border-left: 2px solid var(--amber-deep); background: var(--bone-2); }
.rs-barbell-col.rs-down { border-left: 2px solid var(--graphite-3); }
.rs-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0 0;
  padding: 0;
}
.rs-tags li {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-mono);
  padding: 4px 9px;
  border: 1px solid var(--bone-3);
  border-radius: 999px;
  color: var(--graphite);
  background: var(--bone);
}
@media (max-width: 900px) { .rs-barbell-grid { grid-template-columns: 1fr; } }

/* ── Chapter detail sections ────────────────────────────────────────────── */
.rs-chapter-detail { scroll-margin-top: 96px; }
.rs-chapter-foot {
  font-size: 14px;
  color: var(--graphite);
  border-left: 2px solid var(--bone-3);
  padding-left: 14px;
}

/* ── Figure caption parts ───────────────────────────────────────────────── */
.rs-fig-title {
  margin: 0;
  font-weight: 500;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.rs-fig-meta {
  margin: 4px 0 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--graphite);
}
.rs-fig-note {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--graphite);
  font-style: italic;
}
.rs-fig-source {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--graphite);
}
.rs-fig-source-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--graphite);
  margin-right: 4px;
}

/* ── Figure action pills ────────────────────────────────────────────────── */
.rs-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid var(--bone-3);
  background: var(--bone-soft);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-mono);
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: background .18s var(--ease-out), color .18s var(--ease-out), border-color .18s var(--ease-out);
}
.rs-pill:hover { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.rs-pill.is-done { background: var(--signal-soft); border-color: var(--signal); color: var(--ink); }

/* ── Data table inside <details> ────────────────────────────────────────── */
.rs-data-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  margin-top: 12px;
}
.rs-data-scroll table {
  width: 100%;
  min-width: 420px;
  border-collapse: collapse;
  font-size: 13.5px;
}
.rs-data-scroll th,
.rs-data-scroll td {
  text-align: left;
  padding: 9px 12px 9px 0;
  border-bottom: 1px solid rgba(19, 18, 14, 0.08);
  vertical-align: top;
}
.rs-data-scroll thead th {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--graphite);
  font-weight: 400;
}
.rs-data-scroll tbody th { font-weight: 500; color: var(--ink); }
.rs-data-scroll td { color: var(--graphite); font-variant-numeric: tabular-nums; }
.rs-data-src {
  margin: 10px 0 0;
  font-size: 12px;
  color: var(--graphite);
}
.rs-data-src code {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--bone-2);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

/* ── Findings (dark surface) ────────────────────────────────────────────── */
.rs-findings-close {
  margin: 34px 0 0;
  max-width: 60ch;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(19px, 2.2vw, 26px);
  line-height: 1.35;
  color: var(--ink);
  opacity: 0.9;
}

/* ── Method block ───────────────────────────────────────────────────────── */
.rs-method-note {
  margin: 18px 0 0;
  max-width: 72ch;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--graphite);
  font-style: italic;
}
.rs-method-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 22px 0 0;
}
.rs-method-links a {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: rgba(19, 18, 14, 0.25);
  text-underline-offset: 4px;
}
.rs-method-links a:hover { text-decoration-color: var(--ink); }
.rs-cite {
  margin: 26px 0 0;
  padding: 16px 18px;
  border-left: 2px solid var(--signal);
  background: var(--bone-soft);
  font-size: 14px;
  line-height: 1.6;
  color: var(--graphite);
}
.rs-cite cite { font-style: normal; color: var(--ink); }
.rs-corr { margin: 14px 0 0; font-size: 13.5px; color: var(--graphite); }
.rs-corr a { color: var(--ink); }

/* Homepage feature (.rs-home-*) lives in site.css: the homepage does not load this file. */

@media (prefers-reduced-motion: reduce) {
  .rs-pill { transition: none; }
}


/* ════════════════════════════════════════════════════════════════════════
   EDITORIAL LAYER — cover hero, expandable chapters, stat rows, pull quote
   The report's own cover is the strongest image we have, so the hero shows
   the document itself rather than a generated card. Chapters open in place:
   the reader expands the argument, its numbers and its figure without
   losing their position — a deep dive that does not become a page jump.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Hero: copy + the real cover ────────────────────────────────────────── */
.rs-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(32px, 6vw, 84px);
  align-items: center;
}
.rs-hero-copy { min-width: 0; }
.rs-hero-cover { min-width: 0; justify-self: center; }
.rs-hero-cover a {
  display: block;
  max-width: 420px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow:
    0 1px 1px rgba(19, 18, 14, 0.10),
    0 18px 44px -12px rgba(19, 18, 14, 0.34),
    0 2px 0 0 rgba(255, 255, 255, 0.5) inset;
  transform: perspective(1400px) rotateY(-4deg) rotateX(1deg);
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.rs-hero-cover a:hover,
.rs-hero-cover a:focus-visible {
  transform: perspective(1400px) rotateY(0deg) rotateX(0deg) translateY(-4px);
  box-shadow:
    0 1px 1px rgba(19, 18, 14, 0.10),
    0 30px 60px -14px rgba(19, 18, 14, 0.40);
}
.rs-hero-cover img { display: block; width: 100%; height: auto; }
.rs-hero-credit {
  margin: 14px 0 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--graphite-3);
}
@media (max-width: 900px) {
  .rs-hero-grid { grid-template-columns: 1fr; }
  .rs-hero-cover { order: -1; max-width: 300px; }
  .rs-hero-cover a { transform: none; }
}

/* ── Deep dive: expandable chapters ─────────────────────────────────────── */
.rs-deep { background: var(--bone-2); }
.rs-panel {
  border-top: 1px solid var(--bone-3);
  background: transparent;
}
.rs-panel:last-of-type { border-bottom: 1px solid var(--bone-3); }
.rs-panel-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 26px 4px;
  cursor: pointer;
  list-style: none;
  transition: color .2s var(--ease-out);
}
.rs-panel-head::-webkit-details-marker { display: none; }
.rs-panel-head:hover { color: var(--signal-deep); }
.rs-panel-head:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}
.rs-panel-n {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--tracking-mono);
  color: var(--graphite-3);
}
.rs-panel-t {
  font-size: clamp(20px, 2.6vw, 31px);
  font-weight: 500;
  letter-spacing: -0.024em;
  line-height: 1.15;
  color: inherit;
}
.rs-panel-icon {
  position: relative;
  width: 34px; height: 34px;
  border: 1px solid var(--bone-3);
  border-radius: 999px;
  flex: none;
  transition: background .25s var(--ease-out), border-color .25s var(--ease-out), transform .35s var(--ease-out);
}
.rs-panel-icon::before,
.rs-panel-icon::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 13px; height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: opacity .25s var(--ease-out), transform .35s var(--ease-out);
}
.rs-panel-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.rs-panel[open] .rs-panel-icon { background: var(--ink); border-color: var(--ink); color: var(--bone); transform: rotate(180deg); }
.rs-panel[open] .rs-panel-icon::after { opacity: 0; }
.rs-panel-body {
  padding: 4px 0 40px;
  animation: rs-panel-in .4s var(--ease-out) both;
}
@keyframes rs-panel-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.rs-panel-body .rs-figure { margin-top: 28px; }

/* ── Stat row ───────────────────────────────────────────────────────────── */
.rs-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 30px;
  padding: 26px 0;
  border-top: 1px solid var(--bone-3);
  border-bottom: 1px solid var(--bone-3);
}
.rs-stat-v {
  margin: 0;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--signal-deep);
  font-variant-numeric: tabular-nums;
}
.rs-stat-l {
  margin: 10px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--graphite);
  max-width: 34ch;
}
.rs-stat-s {
  margin: 6px 0 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--graphite-2);
}
@media (max-width: 760px) { .rs-stats { grid-template-columns: 1fr; gap: 26px; } }

/* ── Pull quote ─────────────────────────────────────────────────────────── */
.rs-pullquote {
  padding: clamp(64px, 10vw, 132px) 0;
  background: var(--bone);
  border-top: 1px solid var(--bone-3);
  border-bottom: 1px solid var(--bone-3);
}
.rs-pullquote blockquote {
  margin: 0;
  max-width: 24ch;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(30px, 5.4vw, 66px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}
.rs-pullquote-src {
  margin: 26px 0 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--graphite-2);
}

@media (prefers-reduced-motion: reduce) {
  .rs-hero-cover a, .rs-panel-icon, .rs-panel-icon::before, .rs-panel-icon::after { transition: none; }
  .rs-hero-cover a:hover { transform: none; }
  .rs-panel[open] .rs-panel-icon { transform: none; }
  .rs-panel-body { animation: none; }
}

/* Split hero: the cover carries the visual weight, so the block breathes less. */
.rs-hero-split { padding-block: clamp(48px, 7vw, 96px); }


/* ════════════════════════════════════════════════════════════════════════
   PHOTOGRAPHY + THE FOUR-STEP CHAIN
   The report's own photographs carry the argument between the data blocks.
   The chain shows ONE number per step: the full set lives in the figure's
   data table, one disclosure away, so the page stays readable.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Tighter rhythm where two text blocks meet ──────────────────────────── */

/* ── Photographs ────────────────────────────────────────────────────────── */
.rs-photo { margin: 34px 0 0; }
.rs-photo-wide { margin-top: 44px; }
.rs-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  background: var(--bone-2);
}
.rs-photo figcaption {
  margin-top: 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--graphite-2);
  max-width: 64ch;
}

/* ── The four-step chain ────────────────────────────────────────────────── */
.rs-chain { background: var(--bone); }
.rs-chain-steps {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--ink);
}
.rs-step-card {
  position: relative;
  padding: 30px 26px 34px 0;
  border-right: 1px solid var(--bone-3);
}
.rs-step-card:last-child { border-right: 0; }
.rs-step-card + .rs-step-card { padding-left: 26px; }
/* the connecting tick on the top rule — the chain reads as a sequence */
.rs-step-card::before {
  content: "";
  position: absolute;
  top: -1px; left: 0;
  width: 34px; height: 3px;
  background: var(--signal-deep);
}
.rs-step-card + .rs-step-card::before { left: 26px; }
.rs-step-n {
  margin: 0 0 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-mono);
  color: var(--graphite-3);
}
.rs-step-name {
  margin: 0 0 18px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--graphite);
}
.rs-step-fig {
  margin: 0 0 12px;
  font-size: clamp(34px, 4.4vw, 56px);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.rs-step-lead {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  max-width: 30ch;
}
.rs-step-sub {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--graphite-2);
  max-width: 32ch;
}
.rs-step-src {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--graphite-3);
}
.rs-chain-note {
  margin: 26px 0 0;
  font-size: 13px;
  font-style: italic;
  color: var(--graphite-2);
}
.rs-chain-more {
  margin-top: 30px;
  border-top: 1px solid var(--bone-3);
  padding-top: 18px;
}
.rs-chain-more > summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--graphite);
  padding: 6px 0;
}
.rs-chain-more > summary::-webkit-details-marker { display: none; }
.rs-chain-more > summary::after { content: "  +"; color: var(--signal-deep); }
.rs-chain-more[open] > summary::after { content: "  −"; }
.rs-chain-more > summary:hover { color: var(--ink); }
.rs-chain-more > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

@media (max-width: 1000px) {
  .rs-chain-steps { grid-template-columns: repeat(2, 1fr); }
  .rs-step-card:nth-child(2) { border-right: 0; }
  .rs-step-card:nth-child(3),
  .rs-step-card:nth-child(4) { border-top: 1px solid var(--bone-3); margin-top: 8px; padding-top: 30px; }
}
@media (max-width: 620px) {
  .rs-chain-steps { grid-template-columns: 1fr; }
  .rs-step-card { border-right: 0; padding-left: 0 !important; }
  .rs-step-card + .rs-step-card { border-top: 1px solid var(--bone-3); margin-top: 8px; padding-top: 30px; }
  .rs-step-card + .rs-step-card::before { left: 0; }
}


/* ════════════════════════════════════════════════════════════════════════
   DOWNLOADS — one strip instead of a PDF section plus a method essay.
   Three artefacts, the citation, a correction address. Nothing else.
   ════════════════════════════════════════════════════════════════════════ */
.rs-downloads {
  padding-block: clamp(44px, 5.5vw, 76px);
  background: var(--bone-2);
}
.rs-dl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--bone-3);
  border: 1px solid var(--bone-3);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.rs-dl {
  display: block;
  padding: 24px 26px 26px;
  background: var(--bone);
  text-decoration: none;
  color: var(--ink);
  transition: background .2s var(--ease-out);
}
.rs-dl:hover { background: var(--bone-soft); }
.rs-dl:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.rs-dl-k {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: var(--tracking-mono);
  color: var(--signal-deep);
  margin-bottom: 12px;
}
.rs-dl-t {
  display: block;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.015em;
  margin-bottom: 5px;
}
.rs-dl-m {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  color: var(--graphite-2);
}
.rs-dl-cite {
  margin: 20px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--graphite-2);
}
.rs-dl-cite cite { font-style: normal; color: var(--graphite); }
.rs-dl-cite a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) { .rs-dl-grid { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════════════════════
   VERTICAL RHYTHM — the last pass.
   Sections own their spacing; the first and last child inside a section must
   never add their own, or blocks drift apart by a stray margin. Consecutive
   surfaces of the same colour collapse into one, so the eye reads one field
   rather than two stacked boxes.
   ════════════════════════════════════════════════════════════════════════ */
.rs-section > .shell > :first-child,
.rs-section > .shell > .rs-narrow > :first-child,
.rs-downloads > .shell > :first-child,
.rs-pullquote > .shell > :first-child { margin-top: 0; }
.rs-section > .shell > :last-child,
.rs-section > .shell > .rs-narrow > :last-child,
.rs-downloads > .shell > :last-child { margin-bottom: 0; }

/* An eyebrow immediately followed by a heading is one unit, not two. */
.rs-section .eyebrow + .rs-h2,
.rs-downloads .eyebrow + .rs-h2 { margin-top: 12px; }
/* A lede under a heading sits close to it. */
.rs-h2 + .rs-lede { margin-top: 16px; }
.rs-h2 + .rs-prose { margin-top: 18px; }

/* .rs-section + .rs-section zeroes the top padding so two stacked sections do
   not double their gap. That is right only while the surface stays the same:
   the moment a section introduces its own background, zero top padding makes
   the colour band start flush against the first line of text. So every
   surface-changing section takes its padding back. */
.rs-section + .rs-section-alt,
.rs-section + .rs-chain,
.rs-section + .rs-deep,
.rs-section + .rs-section-dark { padding-top: clamp(72px, 10vw, 140px); }
/* Chapters and the deep dive share one bone-2 field: keep them collapsed so
   they read as a single movement rather than two boxes. */
.rs-section-alt + .rs-deep { padding-top: 0; }

/* The hero already ends with ~96px of air. The block right after it must not
   add its own, or the two together open a 180px hole before the first idea. */
.rs-section.rs-section-tight { padding-block: 0 clamp(56px, 7vw, 96px); }

/* A dark block against the pull quote needs no extra hairline between them. */
.rs-pullquote + .rs-section-dark { border-top: 0; }

/* The end CTA is a card (it has a radius), so it lives inside the shell and
   takes the page gutter from it — not a full-bleed band with a second gutter
   of its own, which pushed its text 226px off every other section's margin. */
.rs-endcta-wrap { background: var(--bone-2); }
.rs-endcta .rs-h2 { margin-top: 12px; }
.rs-endcta .rs-lede { margin-bottom: 28px; }


/* ════════════════════════════════════════════════════════════════════════
   CHAPTER CARDS — a photograph, a title, and the chapter's opening line
   that rises over the image.

   The reveal is an enhancement, never the only route to the text: where the
   device cannot hover the line is simply always visible, and the same text
   appears in full inside the chapter panel below. Keyboard focus triggers it
   too, so it is reachable without a mouse.
   ════════════════════════════════════════════════════════════════════════ */
.rs-chapters {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2vw, 26px);
  margin-top: 42px;
}
.rs-chapter {
  display: block;
  text-decoration: none;
  color: var(--ink);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bone);
  border: 1px solid var(--bone-3);
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s var(--ease-out);
}
.rs-chapter:hover,
.rs-chapter:focus-visible {
  transform: translateY(-3px);
  border-color: var(--graphite-3);
  box-shadow: 0 18px 36px -20px rgba(19, 18, 14, 0.45);
}
.rs-chapter:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.rs-chapter-media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--bone-2);
}
.rs-chapter-media img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .6s var(--ease-out);
}
.rs-chapter:hover .rs-chapter-media img { transform: scale(1.04); }

/* the scrim that makes the revealed line readable over any photograph */
.rs-chapter-veil {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(12, 12, 10, 0.92) 0%, rgba(12, 12, 10, 0.72) 42%, rgba(12, 12, 10, 0.18) 78%, rgba(12, 12, 10, 0) 100%);
  opacity: 0;
  transition: opacity .35s var(--ease-out);
}
.rs-chapter-reveal {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 20px 20px 22px;
  font-size: 14px;
  line-height: 1.55;
  color: #F2EEE5;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .35s var(--ease-out), transform .45s var(--ease-out);
}
.rs-chapter:hover .rs-chapter-veil,
.rs-chapter:focus-visible .rs-chapter-veil { opacity: 1; }
.rs-chapter:hover .rs-chapter-reveal,
.rs-chapter:focus-visible .rs-chapter-reveal { opacity: 1; transform: none; }

/* Footer row: number, title, arrow */
.rs-chapter-foot-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 18px 20px 20px;
}
.rs-chapter-n {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: var(--tracking-mono);
  color: var(--graphite-3);
}
.rs-chapter h3 {
  margin: 0;
  font-size: clamp(16px, 1.5vw, 18.5px);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--ink);
}
.rs-chapter-arrow {
  width: 22px; height: 22px;
  border-radius: 999px;
  border: 1px solid var(--bone-3);
  position: relative;
  flex: none;
  transition: background .3s var(--ease-out), border-color .3s var(--ease-out);
}
.rs-chapter-arrow::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 6px; height: 6px;
  border-right: 1.4px solid currentColor;
  border-bottom: 1.4px solid currentColor;
  transform: translate(-60%, -50%) rotate(-45deg);
}
.rs-chapter:hover .rs-chapter-arrow {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bone);
}

/* No hover (touch): the line is always readable — never hide content behind
   an interaction the device cannot perform. */
@media (hover: none) {
  .rs-chapter-veil { opacity: 1; }
  .rs-chapter-reveal { opacity: 1; transform: none; }
}

@media (max-width: 1100px) { .rs-chapters { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .rs-chapters { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) {
  .rs-chapter, .rs-chapter-media img, .rs-chapter-veil, .rs-chapter-reveal, .rs-chapter-arrow { transition: none; }
  .rs-chapter:hover { transform: none; }
  .rs-chapter:hover .rs-chapter-media img { transform: none; }
}

/* The reveal shows a teaser, but a long translation must still never spill out
   of the image: clamp it and let the card keep its shape. */
.rs-chapter-reveal {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}