/* =========================================================================
   Mareto — Research (index + articles)
   Page-specific sections only. The shared design system (reset, nav, footer,
   buttons, eyebrow, manifesto, cta, variables) lives in styles.css, which must
   be loaded first.
   ========================================================================= */

/* Off-white tone. The research section sits on a warm linen ground — never
   pure white, never beige, and no longer the green-tinted neutral it briefly
   was earlier on 2026-08-11: that version read as a green cast rather than as
   paper. Wash, paper surfaces, hairlines, and every tinted panel that sits on
   the ground share this one warm family, so warming any of them alone will
   make the rest read cold. Brand green, the chart ramp, and the card media
   gradients are deliberately NOT part of it. Card media gradients are data
   (researchPosts.ts "media") — they stay green-grey and read as colour against
   the warm ground on purpose. */
:root {
  /* Warm off-white: a low-saturation linen ramp, held light enough that the
     brand green stays the only colour on the page with a voice. --sand-*
     names are original to the file and still describe the ramp. */
  --sand-25: #fffefb;       /* card / panel paper */
  --sand-50: #faf9f5;       /* page wash */
  --sand-line: #e4dfd3;     /* borders on sand */
  --sand-line-soft: #ece7dc;
  --tan-accent: #ac9a6d;    /* eyebrow underline */
  --brown-900: #26221a;     /* dark CTA band */
  --warm-black: #12100b;    /* header / bottom bar */
}

body { background: var(--sand-50); }

a:not(.btn):hover { color: var(--brand-green); } /* .btn text color is owned by the button variants in styles.css */

/* =========================================================================
   INDEX — masthead / categories / lead story / publications table.
   The page is built on full-width hairline rules rather than cards: each
   band ends with a rule, and the sections share one grid so the rules line
   up edge to edge. Cards (.rs-card below) survive only for the "more
   research" rail at the foot of an article.
   ========================================================================= */
/* ---------- MASTHEAD ---------- */
.rs-mast {
  max-width: var(--maxw); margin: 0 auto; padding: 92px var(--pad-x) 56px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 40px 64px;
  align-items: start; border-bottom: 1px solid var(--sand-line);
}
.rs-mast__title {
  margin: 0; font-family: 'Newsreader', Georgia, serif; font-weight: 400;
  font-size: clamp(52px, 7vw, 92px); line-height: .96; letter-spacing: -.035em;
  color: var(--ink-strong);
}
.rs-mast__lede { margin: 0; font-size: 19px; line-height: 1.55; color: var(--ink-strong); max-width: 46ch; }
.rs-mast__topics {
  margin: 22px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 18px;
  font-size: 14.5px; color: var(--muted);
}
.rs-mast__topics-label { color: var(--muted-3); }
.rs-mast__topic { color: var(--body); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--sand-line); }
.rs-mast__topic:hover { text-decoration-color: currentColor; }

/* ---------- CATEGORIES ---------- */
.rs-cats {
  max-width: var(--maxw); margin: 0 auto; padding: 56px var(--pad-x);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
  border-bottom: 1px solid var(--sand-line);
}
/* Offset so the masthead's category links don't land under the sticky header. */
.rs-cat { scroll-margin-top: 96px; }
.rs-cat__name {
  margin: 0; font-family: var(--font-geist), system-ui, sans-serif;
  font-size: 19px; font-weight: 650; letter-spacing: -.01em; color: var(--ink-strong);
}
.rs-cat__blurb { margin: 12px 0 0; font-size: 15px; line-height: 1.62; color: var(--muted); }

/* ---------- LEAD STORY + RECENT RAIL ---------- */
.rs-lead {
  max-width: var(--maxw); margin: 0 auto; padding: 56px var(--pad-x);
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 56px;
  border-bottom: 1px solid var(--sand-line);
}
.rs-lead__media {
  display: block; aspect-ratio: 16 / 8; border-radius: 10px; border: 1px solid var(--sand-line-soft);
}
.rs-lead__under { margin-top: 26px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.rs-lead__title {
  margin: 0; font-family: 'Newsreader', Georgia, serif; font-weight: 400;
  font-size: clamp(28px, 3.1vw, 40px); line-height: 1.1; letter-spacing: -.025em;
}
.rs-lead__title a, .rs-recent__title a, .rs-pubs__link a { color: var(--ink-strong); text-decoration: none; }
.rs-lead__title a:hover, .rs-recent__title a:hover, .rs-pubs__link a:hover { color: var(--brand-green); }
.rs-lead__excerpt { margin: 12px 0 0; font-size: 15.5px; line-height: 1.65; color: var(--body); }

/* Category + date, the one meta line used by both the lead and the rail */
.rs-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; font-size: 13px; }
.rs-meta__cat { color: var(--brand-green); font-weight: 600; }
.rs-meta time { color: var(--muted-3); }

.rs-recent { display: flex; flex-direction: column; }
/* Hairline between items only — the band already carries its own bottom rule. */
.rs-recent__item { padding: 22px 0; border-top: 1px solid var(--sand-line); }
.rs-recent__item:first-child { padding-top: 0; border-top: 0; }
.rs-recent__item:last-child { padding-bottom: 0; }
.rs-recent__title {
  margin: 10px 0 0; font-family: var(--font-geist), system-ui, sans-serif;
  font-size: 19px; font-weight: 650; line-height: 1.25; letter-spacing: -.015em;
}
.rs-recent__excerpt { margin: 8px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }

/* ---------- PUBLICATIONS TABLE ---------- */
.rs-pubs { max-width: var(--maxw); margin: 0 auto; padding: 64px var(--pad-x) 0; }
.rs-pubs__title {
  margin: 0 0 28px; font-family: 'Newsreader', Georgia, serif; font-weight: 400;
  font-size: clamp(32px, 4vw, 46px); line-height: 1.05; letter-spacing: -.03em; color: var(--ink-strong);
}
.rs-pubs__table { width: 100%; border-collapse: collapse; text-align: left; }
.rs-pubs__table th {
  padding: 0 24px 14px 0; border-bottom: 1px solid var(--sand-line);
  font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-3);
}
.rs-pubs__table td { padding: 20px 24px 20px 0; border-bottom: 1px solid var(--sand-line-soft); vertical-align: baseline; }
.rs-pubs__table tr:last-child td { border-bottom: 1px solid var(--sand-line); }
/* Fixed measures on the two short columns so titles all start on one axis. */
.rs-pubs__date { width: 140px; white-space: nowrap; font-size: 14.5px; color: var(--muted-3); font-variant-numeric: tabular-nums; }
.rs-pubs__cat { width: 200px; font-size: 14.5px; color: var(--muted); }
.rs-pubs__link { font-size: 16.5px; line-height: 1.4; }

.rs-card {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  border: 1px solid var(--sand-line-soft); border-radius: 14px; overflow: hidden; background: var(--sand-25);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
a.rs-card:hover { border-color: #cdc7b5; box-shadow: 0 22px 48px -28px rgba(60,54,34,.3); transform: translateY(-3px); }
a.rs-card:hover .rs-card__title { color: var(--brand-green); }
.rs-card--soon { opacity: .72; }
.rs-card__media { height: 172px; display: flex; align-items: flex-start; padding: 16px; }
.rs-card__cat {
  padding: 6px 12px; border-radius: 4px; background: rgba(253,252,250,.9);
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-green);
}
.rs-card__body { padding: 26px 26px 28px; display: flex; flex-direction: column; flex: 1; }
.rs-card__title {
  font-family: 'Newsreader', Georgia, serif; font-weight: 500; font-size: 21px;
  line-height: 1.22; letter-spacing: -.02em; color: var(--ink-strong); transition: color .18s ease;
}
.rs-card__excerpt { margin-top: 12px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.rs-card__foot { margin-top: auto; padding-top: 22px; display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted-3); }
.rs-card__dot { color: #bcb69f; }

/* ---------- ARTICLE ---------- */
.rs-art-head { border-bottom: 1px solid var(--sand-line); }
.rs-art-head__inner { max-width: 780px; margin: 0 auto; padding: 88px var(--pad-x) 56px; }
/* display:flex + fit-content (not inline-flex) so the category chip below it
   starts a new line instead of sitting alongside. */
.rs-art-head__back {
  display: flex; width: fit-content; align-items: center; gap: 8px; text-decoration: none;
  font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted-3);
}
.rs-art-head__back:hover { color: var(--brand-green); }
.rs-art-head__cat {
  display: inline-block; margin-top: 34px; padding: 6px 13px; border-radius: 99px; background: #ece7dc;
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-green);
}
.rs-art-head__title {
  margin: 20px 0 0; font-family: 'Newsreader', Georgia, serif; font-weight: 400;
  font-size: clamp(34px, 4.6vw, 54px); line-height: 1.07; letter-spacing: -.03em;
  color: var(--ink-strong); text-wrap: balance;
}
.rs-art-head__standfirst { margin: 22px 0 0; font-size: 18px; line-height: 1.66; color: var(--body); }
.rs-art-head__meta { margin-top: 26px; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted-3); }

/* Split head — title left, illustration right. Only posts that pass the
   layout's `art` slot get this; the rest keep the single-column head above.
   The band runs wider than the 780px prose measure on purpose: it is the one
   full-width element on the page, and the drawing needs the room. Must stay
   after the base rule — it wins on source order, not specificity. */
.rs-art-head__inner--split {
  max-width: 1180px;
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: 0 56px; align-items: center;
}
.rs-art-head__col { min-width: 0; }
.rs-art-head__inner--split .rs-art-head__standfirst { max-width: 46ch; }
/* Paper panel the motif sits on. The ratio is fixed so a post swapping in a
   different drawing can't change the head's height. */
.rs-art-head__art {
  aspect-ratio: 4 / 3.4; display: grid; place-items: center; padding: 26px;
  border: 1px solid var(--sand-line); border-radius: 12px; background: var(--sand-25);
}
.rs-art-motif { width: 100%; height: auto; display: block; }

/* Three columns: contents rail | prose | byline rail. The centre column keeps
   the 780px measure the article head and source list are set to, so the rails
   simply occupy the space either side of it — widening the wrapper past
   --maxw is what buys them room. */
.rs-art {
  max-width: 1400px; margin: 0 auto; padding: 56px var(--pad-x) 0;
  display: grid; grid-template-columns: 1fr minmax(0, 780px) 1fr; gap: 0 44px;
  align-items: start;
}
.rs-art__body { grid-column: 2; }
.rs-art__rail { position: sticky; top: 104px; width: 100%; max-width: 250px; }
.rs-art__rail--toc { grid-column: 1; grid-row: 1; justify-self: end; }
.rs-art__rail--byline { grid-column: 3; grid-row: 1; justify-self: start; }
.rs-rail__label {
  font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted-3);
}

.rs-toc { max-height: calc(100vh - 150px); overflow-y: auto; overscroll-behavior: contain; }
.rs-toc__list {
  list-style: none; margin: 18px 0 0; padding: 0; counter-reset: rstoc;
  display: flex; flex-direction: column; gap: 12px;
}
.rs-toc__list li { counter-increment: rstoc; }
.rs-toc__link {
  display: block; padding-left: 24px; position: relative; text-decoration: none;
  font-size: 13.5px; line-height: 1.45; color: var(--muted);
  border-left: 2px solid transparent; margin-left: -2px; padding-block: 1px;
}
.rs-toc__link::before {
  content: counter(rstoc); position: absolute; left: 2px; top: 1px;
  font-size: 11px; font-weight: 600; color: var(--muted-3); font-variant-numeric: tabular-nums;
}
.rs-toc__link:hover { color: var(--ink-strong); border-left-color: var(--tan-accent); }

.rs-rail__author { margin: 14px 0 0; font-size: 15px; font-weight: 600; color: var(--ink-strong); }
.rs-rail__contact {
  margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--sand-line);
  font-size: 13.5px; line-height: 1.6; color: var(--muted);
}
.rs-rail__contact a { color: var(--brand-green); text-decoration: underline; text-underline-offset: 2px; }

.rs-prose { color: #2c2c33; }
.rs-prose > p { margin: 0 0 20px; font-size: 17px; line-height: 1.75; color: var(--body); }
.rs-prose > p:last-child { margin-bottom: 0; }
.rs-prose strong { color: var(--ink-strong); font-weight: 600; }
.rs-prose em { font-style: italic; }
.rs-prose a { color: var(--brand-green); text-decoration: underline; text-underline-offset: 2px; }
.rs-prose code {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: .88em;
  padding: 2px 6px; border-radius: 5px; background: #eee9de; color: var(--ink-strong);
}
.rs-prose h2 {
  margin: 52px 0 18px; font-family: 'Newsreader', Georgia, serif; font-weight: 500;
  font-size: 29px; line-height: 1.16; letter-spacing: -.025em; color: var(--ink-strong);
  scroll-margin-top: 104px; /* clears the sticky header when a contents link lands */
}
.rs-prose h3 { margin: 36px 0 12px; font-weight: 600; font-size: 18px; letter-spacing: -.012em; color: var(--ink-strong); }
.rs-prose ul { margin: 0 0 20px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 13px; }
.rs-prose ul li { position: relative; padding-left: 26px; font-size: 16.5px; line-height: 1.65; color: var(--body); }
.rs-prose ul li::before { content: ""; position: absolute; left: 4px; top: 10px; width: 6px; height: 6px; border-radius: 2px; background: #7d8f7f; }
.rs-prose ol { margin: 0 0 20px; padding: 0; list-style: none; counter-reset: jnol; display: flex; flex-direction: column; gap: 14px; }
.rs-prose ol li { position: relative; padding-left: 34px; font-size: 16.5px; line-height: 1.65; color: var(--body); counter-increment: jnol; }
.rs-prose ol li::before {
  content: counter(jnol); position: absolute; left: 0; top: 1px;
  width: 22px; height: 22px; border-radius: 6px; background: #ece7dc;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: var(--brand-green);
}
.rs-pull {
  margin: 38px 0; padding: 28px 32px; border-left: 3px solid var(--brand-green); background: #efeae1;
  font-family: 'Newsreader', Georgia, serif; font-size: 22px; line-height: 1.45;
  letter-spacing: -.015em; color: var(--ink-strong);
}
.rs-note { margin: 34px 0; padding: 22px 24px; background: #fbf9f4; border: 1px solid #e4dfd4; border-radius: 12px; }
.rs-note p { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--muted); }
.rs-note strong { color: var(--ink-strong); }

.rs-art-foot { max-width: 780px; margin: 64px auto 0; padding: 0 var(--pad-x); }
.rs-art-foot__rule { height: 1px; background: var(--line); }
.rs-art-foot__note { margin-top: 26px; font-size: 14.5px; line-height: 1.65; color: var(--muted); }

/* "More research" */
.rs-more { max-width: var(--maxw); margin: 0 auto; padding: 110px var(--pad-x) 0; }
.rs-more__title {
  font-family: 'Newsreader', Georgia, serif; font-weight: 500; font-size: 30px;
  letter-spacing: -.025em; color: var(--ink-strong);
}
.rs-more__grid { margin-top: 36px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

/* Not enough room for both rails: stack them — contents above the prose,
   byline below it (DOM order) — and let the article go back to one column. */
@media (max-width: 1240px) {
  .rs-art {
    max-width: 780px; grid-template-columns: minmax(0, 1fr); gap: 0;
  }
  .rs-art__body { grid-column: 1; }
  .rs-art__rail {
    position: static; grid-column: 1; max-width: none;
    padding: 22px 24px; border: 1px solid var(--sand-line); border-radius: var(--radius);
    background: var(--sand-25);
  }
  .rs-art__rail--toc { grid-row: auto; justify-self: stretch; margin-bottom: 40px; }
  .rs-art__rail--byline { grid-row: auto; justify-self: stretch; margin-top: 48px; }
  .rs-toc { max-height: none; overflow: visible; }
  .rs-toc__list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 32px; }
}

@media (max-width: 980px) {
  .rs-more__grid { grid-template-columns: 1fr 1fr; }
  /* Lead story gives up its rail before it gives up its own two-up under-line. */
  .rs-lead { grid-template-columns: 1fr; gap: 40px; }
  .rs-recent { border-top: 1px solid var(--sand-line); padding-top: 22px; }
  .rs-recent__item:first-child { padding-top: 0; }
}
@media (max-width: 900px) {
  .rs-mast { padding-top: 64px; grid-template-columns: 1fr; gap: 28px; }
  .rs-cats { grid-template-columns: 1fr; gap: 30px; }
  .rs-lead__under { grid-template-columns: 1fr; gap: 16px; }
  .rs-more { padding-top: 76px; }
  .rs-art-head__inner { padding: 56px var(--pad-x) 40px; }
  /* Stacked: title block first, drawing under it, capped so it doesn't
     dominate the fold on a phone. */
  .rs-art-head__inner--split { grid-template-columns: 1fr; gap: 34px; }
  .rs-art-head__art { width: 100%; max-width: 420px; justify-self: start; }
}
@media (max-width: 620px) {
  .rs-more__grid { grid-template-columns: 1fr; }
  /* The publications table drops to date-over-title rows: three columns can't
     hold a headline at this width without wrapping to one word a line. */
  .rs-pubs__table, .rs-pubs__table tbody, .rs-pubs__table tr, .rs-pubs__table td { display: block; width: auto; }
  .rs-pubs__table thead { display: none; }
  .rs-pubs__table tr { padding: 18px 0; border-bottom: 1px solid var(--sand-line-soft); }
  .rs-pubs__table td { padding: 0; border: 0; }
  .rs-pubs__date, .rs-pubs__cat { display: inline; font-size: 13px; }
  .rs-pubs__cat::before { content: " · "; }
  .rs-pubs__link { margin-top: 6px; }
  .rs-pull { padding: 22px 22px; font-size: 19px; }
  .rs-toc__list { grid-template-columns: 1fr; }
}

/* ============================================================
   RESEARCH APPARATUS — citations, figures, charts, sources
   Charts are static SVG (the site CSP forbids inline scripts),
   so every value is drawn as text rather than revealed on hover.
   ============================================================ */

.rs-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Inline footnote markers */
.rs-cite { font-size: 11px; line-height: 0; vertical-align: super; margin-left: 1px; }
.rs-cite a {
  color: var(--brand-green); text-decoration: none; font-weight: 600;
  padding: 0 1px; border-radius: 3px;
}
.rs-cite a:hover { background: #ece7dc; text-decoration: underline; }

/* Key statistic — a hero number pulled out of the prose */
.rs-stat { margin: 38px 0; padding: 30px 32px; border: 1px solid var(--sand-line); border-radius: 14px; background: #fcfbf6; }
.rs-stat__num {
  font-family: 'Newsreader', Georgia, serif; font-weight: 500;
  font-size: 54px; line-height: 1; letter-spacing: -.03em; color: var(--brand-green);
}
.rs-stat__label { margin-top: 12px; font-size: 15px; line-height: 1.6; color: var(--body); }
.rs-stat__source { margin-top: 10px; font-size: 12.5px; color: var(--muted-3); }

/* Figures */
.rs-fig { margin: 44px 0; padding: 28px 28px 22px; border: 1px solid var(--sand-line); border-radius: 14px; background: var(--sand-25); }
.rs-fig__head { margin-bottom: 22px; }
.rs-fig__num {
  display: block; font-size: 11.5px; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted-3);
}
.rs-fig__title {
  margin: 8px 0 0; font-family: 'Newsreader', Georgia, serif; font-weight: 500;
  font-size: 21px; line-height: 1.3; letter-spacing: -.015em; color: var(--ink-strong);
}
.rs-fig__foot { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.rs-fig__source { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--muted-2); }
.rs-fig__source em { font-style: italic; }
.rs-fig__note { margin: 8px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--muted-3); }

.rs-fig__table { margin-top: 14px; }
.rs-fig__table summary {
  cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--brand-green);
  list-style: none; padding: 4px 0;
}
.rs-fig__table summary::-webkit-details-marker { display: none; }
.rs-fig__table summary::before { content: "▸ "; }
.rs-fig__table[open] summary::before { content: "▾ "; }
.rs-fig__table table { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: 13.5px; }
.rs-fig__table th, .rs-fig__table td {
  text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); color: var(--body);
}
.rs-fig__table thead th { font-weight: 600; color: var(--ink-strong); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.rs-fig__table tbody th { font-weight: 500; }
.rs-fig__table td { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-strong); font-weight: 500; }

/* Charts */
.rs-chart { margin: 0; }
.rs-chart__svg { display: block; width: 100%; height: auto; overflow: visible; }
.rs-chart__track { fill: #e2dfd1; }
.rs-chart__axis { stroke: var(--line); stroke-width: 1; }
.rs-chart__bar, .rs-chart__col { transition: opacity .15s ease; }
.rs-chart__row:hover .rs-chart__bar,
.rs-chart__row:hover .rs-chart__col { opacity: .82; }
.rs-chart__col--projected { fill: #fff; stroke: #14432f; stroke-width: 2; stroke-dasharray: 4 3; }
.rs-chart__label { font-size: 13.5px; fill: var(--ink-strong); font-weight: 500; }
.rs-chart__label--axis { text-anchor: middle; font-size: 13px; fill: var(--muted-2); font-weight: 400; }
.rs-chart__value {
  font-size: 14px; fill: var(--ink-strong); font-weight: 600;
  text-anchor: end; font-variant-numeric: tabular-nums;
}
.rs-chart__value--top { text-anchor: middle; }

/* Source list */
.rs-refs { max-width: 780px; margin: 60px auto 0; padding: 0 var(--pad-x); }
.rs-refs__title {
  font-family: 'Newsreader', Georgia, serif; font-weight: 500; font-size: 24px;
  letter-spacing: -.02em; color: var(--ink-strong); margin: 0 0 22px;
}
.rs-refs__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; counter-reset: none; }
.rs-refs__item { display: flex; gap: 14px; scroll-margin-top: 90px; }
.rs-refs__item:target .rs-refs__body { background: #efeae1; border-radius: 8px; }
.rs-refs__num {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px; background: #e9e3d8;
  color: var(--brand-green); font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; margin-top: 2px;
}
.rs-refs__body { display: flex; flex-direction: column; gap: 3px; padding: 2px 6px; margin: -2px -6px; }
.rs-refs__link { font-size: 15px; font-weight: 500; color: var(--ink-strong); text-decoration: underline; text-underline-offset: 2px; }
.rs-refs__link:hover { color: var(--brand-green); }
.rs-refs__pub { font-size: 13px; color: var(--muted-2); }
.rs-refs__note { font-size: 12.5px; line-height: 1.6; color: var(--muted-3); }
.rs-refs__policy {
  margin: 26px 0 0; padding-top: 18px; border-top: 1px solid var(--line);
  font-size: 12.5px; line-height: 1.65; color: var(--muted-3);
}

@media (max-width: 620px) {
  .rs-fig { padding: 22px 18px 18px; }
  .rs-stat { padding: 24px 22px; }
  .rs-stat__num { font-size: 44px; }

  /* SVG text scales with the viewBox, so on a phone a 700-wide chart would
     shrink 13.5px labels to about 7px. Give the chart a floor width and let
     it scroll inside its own box — the page itself must never scroll
     sideways — and raise the type so it lands back at a readable size. */
  .rs-chart { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .rs-chart__svg { min-width: 560px; overflow: hidden; }
  .rs-chart__label { font-size: 17px; }
  .rs-chart__label--axis { font-size: 16px; }
  .rs-chart__value { font-size: 17px; }
}

/* =========================================================================
   SITE BANDS ON SAND
   The shared header/CTA/footer are white-and-blue in styles.css; the research
   section warms them to match the sand wash. Scoped by virtue of research.css
   only being loaded on /research and the article pages.
   ========================================================================= */
.site-header { background: var(--warm-black); border-bottom-color: rgba(255,244,224,.08); }
.footer__bottom { background: var(--warm-black); }
.eyebrow { border-bottom-color: var(--tan-accent); }
.cta__panel { background: var(--brown-900); }
.site-footer { background: var(--sand-50); }
.footer-art { background: var(--sand-50); }
.footer-art::before { background: linear-gradient(var(--sand-50), rgba(250,249,245,0)); }