/* ============================================================
   RESEARCH.CSS — Special Reports
   Editorial research dossier.

   Depends on styles.css for: :root brand tokens, reset, .site-nav,
   .nav-logo, .nav-links, .nav-cta, .nav-toggle, .reveal.
   Deliberately does NOT depend on brief-base.css / pulse.css / trend.css.

   Owns: the report cover, the article system, and the report footer.
   ============================================================ */

/* TOKENS
   ============================================================ */
:root {
  --paper:     #faf7f2;
  --paper-alt: #f2ede4;
  --ink:       #1c1917;
  --ink-muted: #57534e;
  --rule:      #e0d8cc;

  /* Two violet tokens, one hue family.
     #6d28d9 on #faf7f2 = 6.6:1  (AA body text)
     #a78bfa on #080d14 = 7.2:1  (AA body text)
     #a78bfa on #faf7f2 = 2.5:1  — FORBIDDEN on paper. */
  --violet-paper:        #6d28d9;
  --violet-dark-surface: #a78bfa;

  --dark-cover:  #080d14;
  --dark-footer: #0b1628;

  --ff-report-body: 'Source Serif 4', Georgia, serif;

  --measure:    68ch;
  --gutter-max: 200px;
  --rail-w:     180px;
  --rail-gap:   24px;
}

/* PAGE GROUND
   ============================================================ */
body {
  background: var(--paper);
  color: var(--ink);
  padding-top: var(--nav-h);
}

/* RESEARCH NAV ITEM — violet active state, replacing the brand shell's teal.
   styles.css sets `.nav-links a.active { color: var(--teal-light) }`, which is
   the Market Insights identity. On a Special Report the active item is
   Research, and it should carry the section's violet instead. Scoped by the
   fact that only report pages load this stylesheet.
   ============================================================ */
.nav-links a.active,
.nav-links a.active:hover { color: var(--violet-dark-surface); }

/* DARK COVER — the designed seam between dark shell and paper body
   ============================================================ */
.report-cover {
  background: var(--dark-cover);
  color: #e8f0ff;
  padding: 64px 24px 72px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.cover-inner { max-width: 780px; margin: 0 auto; }
.cover-kicker {
  font-family: var(--ff-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--violet-dark-surface);
  margin-bottom: 18px;
}
.cover-title {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.12;
  color: #f4f7ff;
  margin-bottom: 20px;
}
.cover-standfirst {
  font-family: var(--ff-report-body);
  font-size: 20px;
  line-height: 1.6;
  color: #b9c6e0;
  margin-bottom: 28px;
}
.cover-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  font-family: var(--ff-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7f90b4;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.cover-meta .sep { color: rgba(255,255,255,0.18); }

/* LAYOUT SHELL
   ============================================================ */
.report-layout { position: relative; }

/* ARTICLE GRID
   Named columns let figures and tables break wider than the measure.
   ============================================================ */
.article-body {
  display: grid;
  grid-template-columns:
    [full-start] minmax(24px, 1fr)
    [wide-start] minmax(0, var(--gutter-max))
    [text-start]  min(var(--measure), 100% - 48px) [text-end]
    minmax(0, var(--gutter-max))
    [wide-end]   minmax(24px, 1fr) [full-end];
  padding: 56px 0 72px;
  font-family: var(--ff-report-body);
  font-size: 19px;
  line-height: 1.75;
}
.article-body > *            { grid-column: text; }
.article-body > figure,
.article-body > .table-wrap  { grid-column: wide; }
.article-body > .full-bleed  { grid-column: full; }

.article-body > p { margin-bottom: 1.35em; }

.article-body h2 {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.25;
  color: var(--ink);
  margin: 2.2em 0 0.7em;
  padding-top: 0.6em;
  border-top: 1px solid var(--rule);
}
.article-body h3 {
  font-family: var(--ff-body);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.01em;
  color: var(--ink);
  margin: 1.8em 0 0.5em;
}
.article-body a {
  color: var(--violet-paper);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.article-body a:hover { color: #5b21b6; }
.article-body ul,
.article-body ol { margin: 0 0 1.35em 1.3em; }
.article-body li { margin-bottom: 0.5em; }
.article-body strong { font-weight: 600; }

/* LEDE
   Selector must out-specify `.article-body > p` above, or its
   margin-bottom silently loses the cascade.
   ============================================================ */
.article-body > p.lede {
  font-size: 22px;
  line-height: 1.65;
  color: var(--ink);
  margin-bottom: 1.6em;
}

/* PULL QUOTE
   ============================================================ */
.pull-quote {
  font-family: var(--ff-display);
  font-style: italic;
  font-weight: 600;
  font-size: 28px;
  line-height: 1.35;
  color: var(--ink);
  border-left: 3px solid var(--violet-paper);
  padding: 4px 0 4px 24px;
  margin: 2em 0;
}

/* MARGIN NOTE
   Marked up as <span class="margin-note"> INSIDE its anchoring <p>.
   <aside> is not valid inside <p>; floats do not work on grid children.
   Never hidden at any width — the content is part of the argument.
   ============================================================ */
.margin-note {
  display: block;
  font-family: var(--ff-body);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-muted);
  border-left: 2px solid var(--rule);
  padding-left: 14px;
  margin: 0.8em 0 1em 1.4em;
}

/* FIGURES
   ============================================================ */
.figure-slot { margin: 2.4em 0; }
.figure-slot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--paper-alt);
}
.figure-slot figcaption {
  font-family: var(--ff-body);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-muted);
  margin-top: 12px;
}
.figure-num {
  font-family: var(--ff-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--violet-paper);
  margin-right: 8px;
}

/* NOTE: `.figure-placeholder` is deliberately NOT defined here. It is a
   development-only style and lives in the template's inline <style> block,
   so it can never ship in the production stylesheet. */

/* TABLES
   Body must never scroll horizontally; the table does, and shows an edge.
   ============================================================ */
.table-wrap {
  margin: 2.4em 0;
  overflow-x: auto;
  background:
    linear-gradient(to right, var(--paper) 30%, rgba(250,247,242,0)),
    linear-gradient(to right, rgba(250,247,242,0), var(--paper) 70%) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(28,25,23,0.16), rgba(0,0,0,0)),
    radial-gradient(farthest-side at 100% 50%, rgba(28,25,23,0.16), rgba(0,0,0,0)) 100% 0;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}
.table-wrap table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--ff-body);
  font-size: 14px;
  line-height: 1.55;
}
.table-wrap th,
.table-wrap td {
  text-align: left;
  vertical-align: top;
  padding: 11px 14px;
  border-bottom: 1px solid var(--rule);
}
.table-wrap th {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--violet-paper);
  border-bottom: 2px solid var(--rule);
  white-space: nowrap;
}
.table-wrap tbody tr:nth-child(even) { background: var(--paper-alt); }
.table-caption {
  font-family: var(--ff-body);
  font-size: 14px;
  color: var(--ink-muted);
  margin-top: 10px;
}

/* CALLOUTS
   ============================================================ */
.key-takeaway,
.evidence-note,
.verify-note {
  font-family: var(--ff-body);
  border-radius: 4px;
  margin: 2em 0;
}
.key-takeaway {
  background: var(--paper-alt);
  border-left: 3px solid var(--violet-paper);
  padding: 22px 26px;
  font-size: 16px;
  line-height: 1.7;
}
.key-takeaway strong {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--violet-paper);
  margin-bottom: 10px;
}
.evidence-note,
.verify-note {
  background: transparent;
  border: 1px solid var(--rule);
  padding: 16px 20px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-muted);
}
.evidence-note strong,
.verify-note strong {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 8px;
}
.verify-note ul { margin: 8px 0 0 1.1em; }
.verify-note li { margin-bottom: 6px; }

/* CONTENTS RAIL — fixed so it never consumes grid width
   ============================================================ */
.contents-rail {
  display: none;
  position: fixed;
  top: calc(var(--nav-h) + 40px);
  left: 24px;
  width: var(--rail-w);
  max-height: calc(100vh - var(--nav-h) - 80px);
  overflow-y: auto;
  font-family: var(--ff-body);
  font-size: 13px;
  line-height: 1.5;
  z-index: 20;
}
.contents-rail-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--rule);
}
.contents-rail ol { list-style: none; margin: 0; padding: 0; }
.contents-rail li { margin-bottom: 9px; }
.contents-rail a {
  color: var(--ink-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  padding-left: 10px;
  display: block;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.contents-rail a:hover { color: var(--ink); }
.contents-rail a.active {
  color: var(--violet-paper);
  border-left-color: var(--violet-paper);
}

/* PART NAV
   ============================================================ */
.part-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 40px 24px 72px;
  font-family: var(--ff-body);
}
.part-nav a {
  display: block;
  padding: 18px 20px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  text-decoration: none;
  background: var(--paper-alt);
  transition: border-color 0.2s ease;
}
.part-nav a:hover { border-color: var(--violet-paper); }
.part-nav .dir {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--violet-paper);
  margin-bottom: 6px;
}
.part-nav .label { font-size: 15px; color: var(--ink); line-height: 1.4; }
.part-nav .next { text-align: right; }

/* SOURCES
   ============================================================ */
.source-list {
  font-family: var(--ff-body);
  font-size: 14px;
  line-height: 1.65;
}
.source-list h3 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin: 1.8em 0 0.7em;
}
.source-list ol { margin-left: 1.2em; }
.source-list li { margin-bottom: 0.6em; color: var(--ink-muted); }
.source-list a { color: var(--violet-paper); word-break: break-word; }

/* SERIES / SECTION CARDS
   ============================================================ */
.report-intro {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 56px 24px 0;
  font-family: var(--ff-report-body);
  font-size: 19px;
  line-height: 1.75;
}
.report-intro p { margin-bottom: 1.35em; }
.report-intro a {
  color: var(--violet-paper);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.report-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 40px 24px 72px;
}
.report-card {
  display: block;
  padding: 26px 24px;
  background: var(--paper-alt);
  border: 1px solid var(--rule);
  border-radius: 6px;
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.report-card:hover { border-color: var(--violet-paper); transform: translateY(-2px); }
.report-card .card-kicker {
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--violet-paper);
  margin-bottom: 10px;
}
.report-card .card-title {
  font-family: var(--ff-display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 10px;
}
.report-card .card-dek {
  font-family: var(--ff-report-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-muted);
  margin-bottom: 14px;
}
.report-card .card-meta {
  font-family: var(--ff-body);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* REPORT FOOTER — dark, and deliberately not the issue footer
   ============================================================ */
.report-footer {
  background: var(--dark-footer);
  padding: 44px 24px 36px;
  font-family: var(--ff-body);
}
.report-footer-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
}
.report-footer-brand {
  font-family: var(--ff-display);
  font-size: 18px;
  font-weight: 600;
  color: #e8f0ff;
}
.report-footer-brand em { color: var(--violet-dark-surface); font-style: normal; }
.report-footer-nav { display: flex; gap: 20px; flex-wrap: wrap; }
.report-footer-nav a {
  font-size: 13px;
  color: rgba(160,185,220,0.45);
  text-decoration: none;
  transition: color 0.25s ease;
}
.report-footer-nav a:hover { color: var(--violet-dark-surface); }
.report-footer-copy {
  width: 100%;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.04);
  font-size: 11.5px;
  color: rgba(140,165,200,0.3);
  text-align: center;
}
.report-footer-disclaimer {
  max-width: 820px;
  margin: 14px auto 0;
  font-size: 11px;
  line-height: 1.7;
  color: rgba(140,165,200,0.4);
  text-align: center;
}

/* DESKTOP
   The rail and the margin notes have DIFFERENT space requirements and so
   different breakpoints. Do not merge them.

   - The rail is position:fixed. It consumes no grid width; it only needs the
     page to carry a matching padding-left. That works from 1200px.
   - A margin note lives in the grid's `wide` gutter, whose width is whatever
     is left after the text column. Measured: 68ch of Source Serif 4 at 19px
     is ~822px, NOT the ~646px a 9.5px `ch` would predict — Source Serif 4's
     "0" is ~12.1px at this size.

   Measured track widths (padding-left = 180 rail + 24 gap = 204px):
     @1200px: available 996  | text 822 | each wide  63 | fr 24  → note CANNOT fit
     @1440px: available 1236 | text 822 | each wide 183 | fr 24  → 150px note fits, 33px spare
     @1600px: available 1396 | text 822 | each wide 200 | fr 87  → 180px note fits comfortably

   A 150px note in a 63px gutter overflowed the viewport by 87px at 1200px.
   Verified by content/special_reports/templates/layout-check.mjs.
   ============================================================ */
/* The offset is scoped to `body.has-rail`. Only pages that actually render a
   contents rail need to reserve space for it — the section landing and series
   hub have no rail, and without this scoping they were pushed 204px right with
   dead space on the left. Add the class to <body> whenever a page includes
   .contents-rail; omit it otherwise. */
@media (min-width: 1200px) {
  body.has-rail .report-layout { padding-left: calc(var(--rail-w) + var(--rail-gap)); }
  /* The cover is a sibling of .report-layout, so it needs the same offset or
     the title stops aligning with the article text column. Padding, not margin,
     so the dark band stays full-bleed. */
  body.has-rail .report-cover { padding-left: calc(var(--rail-w) + var(--rail-gap) + 24px); }
  body.has-rail .contents-rail { display: block; }
}

/* Margin notes move into the gutter only once the gutter can hold them. */
@media (min-width: 1440px) {
  .margin-note {
    float: right;
    clear: right;
    width: 150px;
    margin: 0.35em -174px 1em 24px;
  }
}
@media (min-width: 1600px) {
  .margin-note { width: 180px; margin-right: -204px; }
}

/* NARROW
   ============================================================ */
@media (max-width: 600px) {
  .article-body { font-size: 18px; padding: 40px 0 56px; }
  .article-body > p.lede { font-size: 20px; }
  .article-body h2 { font-size: 24px; }
  .pull-quote { font-size: 23px; padding-left: 18px; }
  .report-cover { padding: 44px 20px 52px; }
  .part-nav { grid-template-columns: 1fr; }
  .part-nav .next { text-align: left; }
}

/* REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .report-card:hover { transform: none; }
  html { scroll-behavior: auto; }
}

/* PRINT — a dossier invites printing; a PDF-able report carries credibility
   ============================================================ */
@media print {
  .site-nav,
  .nav-toggle,
  .contents-rail,
  .part-nav,
  .report-footer { display: none !important; }

  body { padding-top: 0; background: #fff; color: #000; }
  .report-layout { padding-left: 0; }
  .report-cover {
    background: #fff;
    color: #000;
    border-bottom: 2px solid #000;
    padding: 0 0 24px;
  }
  .cover-title { color: #000; }
  .cover-standfirst, .cover-meta { color: #333; }
  .cover-kicker { color: #000; }

  .article-body { display: block; max-width: 100%; padding: 24px 0; font-size: 11pt; }
  .article-body a { color: #000; text-decoration: underline; }
  .article-body a::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
  .margin-note { float: none; width: auto; margin: 1em 0 1em 1.4em; }

  .figure-slot,
  .table-wrap,
  .key-takeaway,
  .verify-note,
  .evidence-note { page-break-inside: avoid; }
  .article-body h2 { page-break-after: avoid; }
  .table-wrap { overflow-x: visible; background: none; }
}