/* ============================================================================
   RESI Report Experience — styling  (v0.1.0)
   ----------------------------------------------------------------------------
   Brand tokens from the RESI "Kolor System" (Figma 7woColnbHO3ZDRQ7ham6DP):
   "Parent brand — civic, durable, optimistic." Warm-paper editorial system —
   serif headings (Crimson Pro) over sans body (Plus Jakarta Sans), navy heroes,
   bold-yellow / coral accents. Class names match report-experience.js (unchanged).
   ============================================================================ */

/* PERF (B6d): fonts moved OUT of @import (it serialized css -> fonts-css -> font files and
   blocked first render). The host page loads them via <link rel="stylesheet"> — see index.html.
   EVERY page embedding this widget must carry that link, or the brand fonts fall back. */

:root {
  /* backgrounds — RESI approved (Paper #e2dedc) */
  --paper:      #e2dedc;   /* Page background (approved) */
  --paper-warm: #d8d2c8;   /* sidebar / warm surfaces */
  --paper-cool: #dcd8d0;
  --card:       #f6f4f0;   /* Card — just off-paper */
  /* chrome — navy retired -> graphite #333 (per brand direction) */
  --navy:       #333333;   /* UI chrome / links (was navy) */
  --navy-ink:   #12221e;   /* deep footer / charcoal */
  --ink:        #12221e;   /* Charcoal — headings/text */
  --charcoal:   #12221e;
  --stone:      #2c2a28;   /* body text */
  --steel:      #6f746f;   /* muted */
  /* accents — blue & yellow dropped; Red is primary accent, Light blue secondary */
  --yellow:     #902836;   /* (retired -> Red) */
  --coral:      #902836;   /* (retired -> Red) */
  --red:        #902836;   /* Red (approved primary) */
  --green:      #39582e;   /* Green (approved) */
  --purple:     #815c9f;   /* Purple (approved) */
  --lightblue:  #a7ccdf;   /* Light blue (approved) — figures / dark-bg accent */
  /* lines */
  --line:       #cdc6ba;   /* Paper stroke */
  --line-soft:  #d6cfc2;
  /* type */
  --serif: "Crimson Pro", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --rail-w:  340px;
  --rail-bg: rgba(246, 244, 240, .7);   /* panel fill — reused by the fixed top/bottom bars */
  --measure: 66ch;
  --shadow:  0 1px 2px rgba(17,22,46,.05), 0 10px 30px rgba(17,22,46,.07);
  /* ---- display-item / section background fills (grouped) ---- */
  --bgfill-box:          #c2dff0;   /* box / case-study card */
  --bgfill-foreword:     #252c5c;   /* Foreword section */
  --bgfill-acknowledge:  #e2dedc;   /* Acknowledgements (= --paper) */
  --bgfill-fig-1-1:      #39582f;   /* Figure 1.1 (SIDS globe) panel */
  /* ---- ruler marks (left position strip) — grouped for easy tuning ----
     STRUCTURAL marks (report/section/chapter) are fixed colours picked to clear
     3:1 contrast on BOTH the light paper and the dark navy/hero grounds — see the
     .rv-ruler__mark rules for why mix-blend-mode can't do this behind a fixed strip.
     TYPE marks (figure/table/box/photo) are placeholder hues, distinct from the above. */
  --ruler-report:   #0f766e;             /* structural: report (longest) — teal */
  --ruler-section:  #0f766e;             /* structural: section — teal */
  --ruler-chapter:  #b5567d;             /* structural: chapter / subsection — rose */
  --ruler-item:     rgba(51,51,51,.42);  /* display-items base (shortest, shared length) */
  --ruler-figure:   #3a6ea5;             /* type: figure */
  --ruler-table:    #3f8f6b;             /* type: table */
  --ruler-box:      #b3792a;             /* type: box */
  --ruler-photo:    #8a5aa5;             /* type: photo */
  --ruler-cursor:   #d42e2e;             /* "you are here" dot (tomato, = footnote accent) */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; overscroll-behavior-y: contain; scroll-snap-type: y proximity; scroll-padding-top: 8px;
  scrollbar-width: none; -ms-overflow-style: none; }   /* hide the browser scrollbar — the ruler is our position indicator now. clip the off-canvas nav; proximity snap = soft-align to section starts. */
html::-webkit-scrollbar, body::-webkit-scrollbar { width: 0; height: 0; display: none; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--stone);
  background: var(--paper);
  line-height: 1.68;
  font-size: 1.0625rem;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { font-family: var(--serif); color: var(--ink); font-weight: 400; }   /* finer serif */
a { color: var(--navy); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---- top reading-progress bar -------------------------------------------- */
/* PERF (B4): full-width bar scaled by transform (compositor-only) — animating `width`
   relayed out on every scroll frame. No transition: the scroll pump already runs on rAF. */
.rv-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  transform: scaleX(0); transform-origin: 0 0;
  background: linear-gradient(90deg, var(--navy), var(--yellow));
  z-index: 60;
}

/* ---- layout shell — full-bleed main; nav floats over it ------------------ */
.rv-shell { display: block; }
.rv-main { width: 100%; }

/* ---- sidebar — opaque matte panel: one honest material, no blur, no photo bleed ---- */
.rv-rail {
  position: fixed; top: 20px; left: 20px; z-index: 40;
  width: var(--rail-w); height: calc(100vh - 40px); height: calc(100dvh - 40px);   /* dvh: bottom state-switcher stays clear of mobile browser bars */
  display: flex; flex-direction: column; overflow: hidden;   /* top/bottom fixed, middle scrolls */
  background: rgba(246, 244, 240, .7);                        /* fill + blur matched to the control stick */
  -webkit-backdrop-filter: blur(22px) saturate(1.15); backdrop-filter: blur(22px) saturate(1.15);
  border-radius: 18px;
  box-shadow: 0 12px 44px rgba(18, 34, 30, .16), 0 2px 8px rgba(18, 34, 30, .07);
  font-family: var(--sans); color: var(--ink);
  transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}
.rv-rail.is-hidden { transform: translateX(-118%); }
.rv-rail__top, .rv-rail__bottom { flex: 0 0 auto; }
.rv-rail__top { padding: 1.4em 1.5rem 0; }
.rv-rail__content { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 1.25rem 1.5rem; background: transparent;
  display: flex; flex-direction: column;   /* name (fixed) + TOC (grows to fill the panel height) */
  scrollbar-width: none; -ms-overflow-style: none; }
.rv-rail__content::-webkit-scrollbar { width: 0; height: 0; display: none; }
/* head block: brand + year on one line, then the report name — one grotesque, sentence case, two weights */
.rv-rail__edition { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.rv-rail__brand { font-family: var(--sans); font-size: 0.9375rem; font-weight: 400; line-height: 1.15; color: var(--ink); white-space: nowrap; }
.rv-rail__year { font-family: var(--sans); font-size: 0.9375rem; font-weight: 700; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.rv-rail__name { font-family: var(--sans); font-size: 1.75rem; font-weight: 700; line-height: 1.08; letter-spacing: -.02em; color: var(--ink);
  margin: 0; padding: 0.85em 0 1.05em; }   /* size carries the hierarchy — no serif display face */

/* ---- contents rows: hairline rules, equal rows (grow to fill the panel), numerals locked to the row axis ---- */
.rv-toc { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.rv-toc__front, .rv-toc__body, .rv-toc__back { display: contents; }   /* items become direct flex children of .rv-toc so they distribute evenly */
.rv-toc__item { position: relative; flex: 1 1 auto; display: grid; grid-template-columns: 1fr auto; align-items: center;
  column-gap: 18px; padding: 0.9em 14px 0.9em 32px; border-radius: 8px; border-top: 1px solid var(--line); transition: background .12s ease; }   /* right pad = 14px (mirrors the number); left pad reserves the dot gutter: 14px edge + 8px dot + ~10px gap */
.rv-toc__item--dl { grid-template-columns: 1fr auto auto; }        /* reserved download column between the title block and the numeral */
.rv-toc__front .rv-toc__item, .rv-toc__back .rv-toc__item { padding-top: .45em; padding-bottom: .45em; }   /* front/back matter sit tighter (half the body row pad) */
.rv-toc__item:hover { background: rgba(0, 0, 0, .045); }           /* hover = a shade shift, not a dark slab */
.rv-toc__nav { position: absolute; inset: 0; z-index: 1; }         /* stretched click target (navigates); the active dot rides on it */
.rv-toc__nav:hover, .rv-toc__dl:hover { text-decoration: none; }
.rv-toc__mid { min-width: 0; grid-column: 1; }
.rv-toc__title { font-size: 0.875rem; font-weight: 400; line-height: 1.15; letter-spacing: -.01em; color: var(--ink); }   /* section heading — tighter leading + slight negative kern; wraps, no ellipsis */
.rv-toc__body .rv-toc__title { font-weight: 700; }                                                    /* chapters bold */
.rv-toc__front .rv-toc__title, .rv-toc__back .rv-toc__title { font-size: 0.8125rem; }                 /* front/back matter a touch smaller than the section heading */
.rv-toc__sub { font-size: 0.75rem; line-height: 1.2; color: var(--steel); margin-top: 2px; }          /* subtitle — tighter leading + slightly smaller */
.rv-toc__num { font-family: var(--sans); font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; color: var(--ink); align-self: center; }
.rv-toc__front .rv-toc__num, .rv-toc__back .rv-toc__num { font-size: 1rem; font-weight: 500; color: var(--steel); }   /* roman / appendix small */
.rv-toc__body .rv-toc__num { font-size: 1.75rem; line-height: .9; }                                                  /* chapter numerals large */
/* ONE accent, used once: an orange dot marks the current section (nothing else gets colour) */
.rv-toc__nav.is-active .rv-toc__title { font-weight: 700; }
.rv-toc__nav.is-active::before { content: ""; position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 8px; height: 8px; border-radius: 50%; background: #e8500a; z-index: 4; }   /* Braun orange; 14px from the highlight's left edge = the number's 14px on the right */
/* reserved download column: icon over label, fades in on hover; the column always holds its space so nothing shifts and it never overlaps text */
.rv-toc__dl { z-index: 2; align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--steel); text-decoration: none; opacity: 0; transition: opacity .14s ease; }
.rv-toc__item:hover .rv-toc__dl { opacity: 1; }
.rv-toc__dl svg { width: 16px; height: 16px; display: block; }
.rv-toc__dl-lbl { font-size: 0.6875rem; font-weight: 600; color: var(--steel); white-space: nowrap; letter-spacing: .01em; }
.rv-toc__dl:hover { color: var(--ink); }
@media (hover: none) { .rv-toc__dl { opacity: 1; } }
/* functional scroll indicator — one 2px line showing position (JS sets thumb; hidden when the list fits) */
.rv-rail__scroll { position: absolute; right: 5px; width: 2px; z-index: 5; background: rgba(0, 0, 0, .05); border-radius: 2px; opacity: 0; transition: opacity .2s ease; pointer-events: none; }
.rv-rail__scroll-thumb { position: absolute; left: 0; width: 100%; background: rgba(0, 0, 0, .42); border-radius: 2px; }
/* bottom: one labeled action — what it is, what it weighs (no dots) */
.rv-rail__bottom { padding: 0.5rem 0.6rem; border-top: 1px solid var(--line); }
.rv-rail__dl-all { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-size: 0.875rem; font-weight: 700; }
.rv-rail__dl-all:hover { text-decoration: none; opacity: .75; }
.rv-rail__dl-all svg { width: 17px; height: 17px; flex: 0 0 auto; }
.rv-rail__dl-all-lbl { flex: 1 1 auto; }
.rv-rail__dl-all-size { font-weight: 500; color: var(--steel); font-size: 0.8125rem; }
.rv-rail__dl-all--toc { margin: 10px 0 12px; }   /* full-report download under the report name; separator is the first TOC row's own border-top (no own border → no double line) */

/* ---- main ---------------------------------------------------------------- */
.rv-main { min-width: 0; }

/* cover hero (navy over photo) */
.rv-cover {
  position: relative; min-height: 94vh; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 7vw 6vw 5vw; color: #fff;
  background: linear-gradient(180deg, rgba(12,18,51,.25) 0%, rgba(12,18,51,.82) 80%), var(--navy);
  background-size: cover; background-position: center;
}
.rv-cover__edition { font: 700 0.8125rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: inherit; opacity: .88; margin-bottom: 20px; }
/* Pinned title: three stacked lines (year / name / kind), uppercase.
   Size is bounded by TWO constraints, whichever is smaller:
     · footprint — 3 lines must not exceed the old (2 lines + the retired edition eyebrow's
       20px margin): 3·0.9·F ≤ 2·0.9·(old clamp) + 20  →  F ≤ 4.667vw + 7.4px, capped 4.4rem.
     · fit — the longest line must clear the stage's 6vw side padding: F ≤ ~6vw.
   Mid-range widths are footprint-bound; phones are fit-bound. `max-width` is gone: the
   line breaks are explicit now, so a ch-cap would only force an unwanted extra wrap. */
.rv-cover__title {
  font-family: var(--sans);
  font-size: clamp(1.125rem, min(6vw, calc(4.667vw + 7.4px)), 4.4rem);
  line-height: 0.9; margin: 0 0 7px; font-weight: 800; letter-spacing: -.02em;
  color: inherit; max-width: none; text-transform: uppercase; text-wrap: balance;
}
.rv-cover__title-line { display: block; }
/* weight 400, not 300: at 300 over bright water the serif hairlines disappear. */
.rv-cover__sub { font-family: var(--serif); font-size: clamp(1.544rem, 3.12vw, 2.4375rem); letter-spacing: -.012em; color: inherit; margin: 0 0 28px; max-width: 30ch; font-weight: 400; }
.rv-cover__meta { font: 0.875rem/1.5 var(--sans); color: inherit; }
/* publisher logo (from the company record). The cover sits over a dark image, so recolour the SVG
   to WHITE with a filter (brightness(0)=black -> invert=white) — works on any mono logo, no 2nd asset.
   For a light background, drop the invert: `filter: brightness(0)` = dark. */
.rv-cover__logo { display: block; height: 1.7em; width: auto; max-width: 200px; filter: var(--cover-logo-filter); }
/* RESI full signature — sits below the editors, above the moved ODI mark */
.rv-cover__signature { font: 600 0.9375rem/1.35 var(--sans); color: inherit; margin-top: 16px; white-space: nowrap; }   /* never wraps — JS scales the font down to clear the control stick */
/* ODI Global logo, moved beneath the signature (secondary mark, same white recolour). Grows on wider
   screens; the floor is the size it was on mobile (1.15em), so it never gets smaller than that. */
.rv-cover__odi { display: block; height: clamp(1.15em, 2.4vw, 1.7em); width: auto; max-width: 200px; filter: var(--cover-logo-filter); opacity: .92; margin-top: 12px; transition: opacity .3s ease; }
/* partners block */
.rv-cover__partners { margin-top: 18px; }
.rv-cover__partners-label { display: block; font: 700 0.6875rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: inherit; opacity: .6; margin-bottom: 9px; }
.rv-cover__partners-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.rv-cover__partners-logos img { height: clamp(1.5em, 2.6vw, 2em); width: auto; max-width: 170px; filter: var(--cover-logo-filter); opacity: .92; transition: opacity .3s ease; }   /* grows on wider screens; floor = mobile size */
.rv-cover__partners-logos .rv-logolink:hover img { opacity: .6; }
.rv-cover__odilink { display: inline-block; }
.rv-cover__odilink:hover .rv-cover__odi { opacity: .6; }
.rv-cover__credit { position: absolute; right: 16px; bottom: 12px; font: 0.6875rem var(--sans); color: inherit; opacity: .55; }
/* re-enable interaction on the interactive cover bits (the .rv-cover-titles block is pointer-events:none) */
.rv-cover-titles .rv-person, .rv-cover-titles .rv-cover__credit, .rv-cover-titles .rv-logolink { pointer-events: auto; }
/* editor pills follow the cover ink (base .rv-person is hardcoded #ece7da for dark body sections) */
.rv-cover-titles .rv-person { color: var(--cover-ink); }
.rv-cover-titles .rv-person:focus-visible { border-color: color-mix(in srgb, var(--cover-ink) 50%, transparent); }
/* credit aligned under "Edited by": dimmed text; on hover it brightens + a hairline wipes
   in left→right (no size/letter-spacing change, so it never shifts out of alignment). */
/* credit line is now a <button> (caption ⇄ credit on click) — strip UA chrome, keep the context's
   own colour/line. --static = only one of caption/credit exists, so it doesn't toggle. */
.rv-credit-toggle { font: inherit; letter-spacing: inherit; background: none; border: 0; margin: 0; padding: 0; color: inherit; text-align: left; cursor: pointer; -webkit-appearance: none; appearance: none; }
.rv-credit-toggle--static { cursor: default; }
.rv-cover__meta .rv-cover__credit {
  position: relative; right: auto; bottom: auto; margin-top: 16px;
  display: inline-block; cursor: pointer;
}
.rv-cover__meta .rv-cover__credit span { color: inherit; opacity: .5; transition: opacity .4s ease; }
.rv-cover__meta .rv-cover__credit::after {
  content: ""; position: absolute; left: 0; bottom: -3px; height: 1px; width: 100%;
  background: #ece7da; transform: scaleX(0); transform-origin: left;
  transition: transform .55s cubic-bezier(.4, 0, .2, 1);
}
.rv-cover__meta .rv-cover__credit:hover span { opacity: 1; }
.rv-cover__meta .rv-cover__credit:hover::after { transform: scaleX(1); }
.rv-cover__cue { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); color: var(--cover-ink, #fff); opacity: .75; font: 600 0.6875rem var(--sans); letter-spacing: .14em; text-transform: uppercase; animation: rvbob 2s ease-in-out infinite; }
@keyframes rvbob { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(6px)} }

/* generic prose section */
.rv-section { padding: 60px 6vw; max-width: calc(var(--measure) + 12vw); margin: 0 auto; scroll-margin-top: 16px; }
.rv-section h2 { font-size: clamp(1.75rem, 3.6vw, 2.625rem); line-height: 1.1; margin: 0 0 20px; letter-spacing: -.01em; }
.rv-prose p, .rv-summary p, .rv-sub p, .rv-sub div { margin: 0 0 1.1em; max-width: var(--measure); }
.rv-prose p.rv-dropcap::first-letter,
.rv-sub p.rv-dropcap::first-letter {
  font-family: var(--serif); initial-letter: 3; -webkit-initial-letter: 3;
  font-weight: 700; color: var(--navy); margin-right: .07em;
}
.rv-kicker { font: 700 0.75rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--coral); margin-bottom: 12px; }

/* chapter divider (full-bleed navy over photo) */
.rv-divider {
  position: relative; min-height: 72vh; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 6vw 6vw 4vw; color: #fff;
  background: linear-gradient(180deg, rgba(12,18,51,.2) 0%, rgba(12,18,51,.85) 84%), var(--navy);
  background-size: cover; background-position: center;
}
.rv-divider__num { font: 700 0.8125rem/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--yellow); margin-bottom: 16px; }
.rv-divider__title { font-family: var(--serif); font-size: clamp(2rem, 5.2vw, 4rem); line-height: 1.02; margin: 0 0 16px; font-weight: 700; color: #fff; max-width: 19ch; }
.rv-divider__authors { font: 0.9375rem/1.5 var(--sans); color: #cfd5ec; }
.rv-divider__authors a { color: #fff; border-bottom: 1px dotted rgba(255,255,255,.5); }
.rv-divider__credit { position: absolute; right: 16px; bottom: 10px; font: 0.6875rem var(--sans); color: rgba(255,255,255,.55); }

/* chapter body */
.rv-chapter-body { padding: 52px 6vw 8px; max-width: calc(var(--measure) + 12vw); margin: 0 auto; }
.rv-sub { scroll-margin-top: 16px; margin: 0 0 40px; }
.rv-sub__h { font-size: clamp(1.375rem, 2.7vw, 1.8125rem); margin: 36px 0 16px; line-height: 1.18; }
.rv-sub__ref { color: var(--coral); font-family: var(--sans); font-weight: 700; font-variant-numeric: tabular-nums; margin-right: .5em; }

/* placeholder body copy (Full mode, pending CMS prose) */
.rv-placeholder {
  border-left: 3px solid var(--line); padding: 4px 0 4px 16px; margin: 0 0 1.2em;
  color: var(--steel); font-style: italic; max-width: var(--measure); font-family: var(--sans);
}
.rv-placeholder::before { content: "Body copy pending — "; font-weight: 700; font-style: normal; color: var(--coral); }

/* figure mount */
.rv-figure { margin: 44px 0; max-width: none; }   /* fill the flow (was --measure) */
/* caption BELOW the visual — note/source (figures) or source (tables) */
.rv-figure__cap, .rv-table__cap { font: 0.84375rem/1.5 var(--sans); color: var(--steel); margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.rv-figure__cap b, .rv-table__cap b { color: var(--navy); font-weight: 700; }
/* heading ABOVE the visual — type · number · description (all figures + tables) */
.rv-figure__head, .rv-table__head { font: 0.84375rem/1.5 var(--sans); color: var(--steel); margin-bottom: 12px; border-bottom: 1px solid var(--line); padding-bottom: 10px; overflow-wrap: break-word; }
.rv-figure__head b, .rv-table__head b { color: var(--navy); font-weight: 700; }
.resi-mount { min-height: 60px; max-width: 100%; overflow-x: auto; }   /* wide tables scroll inside, not the page (mobile/zoom) */
.resi-mount svg { max-width: 100%; height: auto; }
.rv-figure__cap, .rv-table__cap { overflow-wrap: break-word; }
.rv-figure--pending .resi-mount {
  min-height: 220px; display: grid; place-items: center; border: 1px dashed var(--line);
  border-radius: 12px; background: var(--card); color: var(--steel);
}
.rv-figure--pending .resi-mount::after { content: "Interactive figure — render pending"; font: 0.8125rem var(--sans); }

/* box / case-study card */
.rv-box {
  margin: 40px 0; padding: 30px 32px; background: var(--bgfill-box); color: var(--ink); border: 0;
  border-radius: 18px; max-width: none; box-shadow: var(--shadow);   /* fill the flow (was --measure) */
}
/* match the figure/table head label (b): navy bold, normal case — keeps type labels uniform across figures/tables/boxes */
.rv-box__tag { font: 700 0.84375rem/1.5 var(--sans); color: var(--navy); margin-bottom: 9px; }
.rv-box__h { font-size: 1.3125rem; margin: 0 0 11px; line-height: 1.25; color: var(--ink); }
.rv-box__body { color: var(--ink); }
.rv-box__source { margin-top: 14px; font: 0.78125rem/1.4 var(--sans); color: var(--steel); }
/* richtext headings from the CMS inside a (dark) box inherit the box's light text, not the global --ink */
.rv-box__body h1, .rv-box__body h2, .rv-box__body h3, .rv-box__body h4 { color: inherit; font-family: var(--sans); font-weight: 700; font-size: 1.0625rem; margin: 0 0 8px; }
.rv-box__body p:last-child { margin-bottom: 0; }

/* table — head + resi-mount + source caption (report-tables bundle fills the mount; transparent).
   __head / __cap styling is shared with figures above; only the wrapper lives here. */
.rv-table { margin: 44px 0; max-width: none; }   /* fill the flow (was --measure; .rv-table--wide already uncapped) */
.rv-table--wide { max-width: none; }

/* inline photo */
.rv-photo { margin: 44px 0; }
.rv-photo img, .rv-photo .rv-photo__ph { width: 100%; display: block; border-radius: 16px; }
.rv-photo .rv-photo__ph {
  aspect-ratio: 16/9; background: linear-gradient(135deg, var(--steel), var(--navy));
  display: grid; place-items: center; color: rgba(255,255,255,.9); font: 0.8125rem var(--sans); text-align: center; padding: 20px;
}
.rv-photo__cap { font: 0.8125rem/1.5 var(--sans); color: var(--steel); margin-top: 9px; display: flex; justify-content: space-between; gap: 12px; }
.rv-photo__credit { color: var(--steel); opacity: .8; white-space: nowrap; }

/* summary (Brief mode) */
.rv-summary__lead { font-family: var(--serif); font-size: 1.3125rem; color: var(--ink); border-left: 3px solid var(--red); padding-left: 20px; margin: 0 0 26px; line-height: 1.4; font-weight: 400; }
.rv-summary h4 { font-size: 1.1875rem; margin: 26px 0 8px; }

/* clickable entities */
.rv-ent { color: var(--navy); border-bottom: 1px dotted var(--coral); cursor: pointer; }
.rv-ent:hover { background: rgba(220,91,69,.1); }

/* entity slide-over panel */
.rv-panel {
  position: fixed; top: 0; right: 0; height: 100vh; height: 100dvh; width: min(420px, 92vw);
  background: var(--card); box-shadow: -8px 0 32px rgba(17,22,46,.18); z-index: 70;
  transform: translateX(100%); transition: transform .26s cubic-bezier(.4,0,.2,1);
  padding: 28px 28px 40px; overflow-y: auto; font-family: var(--sans);
}
.rv-panel.is-open { transform: translateX(0); }
.rv-panel__close { position: absolute; top: 18px; right: 18px; border: 0; background: var(--paper-warm); width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 0.9375rem; color: var(--ink); }
.rv-panel__type { font: 700 0.6875rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--coral); margin-bottom: 7px; }
.rv-panel__name { font-family: var(--serif); font-size: 1.6875rem; margin: 0 0 14px; color: var(--ink); }
.rv-panel__body { color: var(--stone); line-height: 1.6; }
.rv-scrim { position: fixed; inset: 0; background: rgba(12,18,51,.4); z-index: 69; opacity: 0; pointer-events: none; transition: opacity .26s; }
.rv-scrim.is-open { opacity: 1; pointer-events: auto; }

.rv-end { padding: 70px 6vw; text-align: center; font-family: var(--serif); font-weight: 300; font-size: 1.125rem; color: var(--steel); }

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 900px) {
  /* nav is a narrower drawer, hidden by default + trigger-only (TOC reveals); dock stays right.
     scale body + nav type down for the small screen */
  body { font-size: 0.9375rem; }
  .rv-rail { width: min(78vw, 270px); top: 14px; left: 14px; height: calc(100vh - 28px); height: calc(100dvh - 28px); }   /* dvh: bottom state-switcher stays clear of mobile browser bars. no padding — panel is full-bleed */
  .rv-rail__title { font-size: 1rem; }
  .rv-rail__sub { font-size: 0.78125rem; }
  .rv-nav li a, .rv-nav__num { font-size: 0.8125rem; }
  .rv-nav__rt { font-size: 0.625rem; }
  .rv-nav__group { font-size: 0.625rem; padding: 13px 10px 5px; }
  .rv-modes__hint { font-size: 0.6875rem; }
  .rv-cover { padding: 22vw 22px 14vw; }
  html { scroll-snap-type: none; }   /* A17: proximity snap fights touch scroll on iOS and lets the page drift; off on phones */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rv-cover__cue { animation: none; }
}

/* ============================================================================
   Cover — zoom-on-scroll video + pinned title reveal
   ============================================================================ */
.rv-cover-scroll { position: relative; height: 390vh; background: var(--navy-ink); }   /* taller = slower scrub/zoom */
@media (max-width: 700px) { .rv-cover-scroll { height: 230vh; } }   /* phones: shorter intro scrub so fewer swipes reach the first section — TUNE this value on-device (230–300vh) */
/* ---- Cover ink + scrim ------------------------------------------------------
   ONE set of tokens drives every glyph, logo and the scrim on the pinned cover.
   Before this, four different whites fought each other — #fff on the titles
   wrapper, #ece7da on title/sub/meta, #e2dedc on the edition and "Edited by",
   rgba(255,255,255,.55/.75) on the credit and cue — and the wrapper's hard
   `0 2px 18px` shadow, tuned for the huge title, bled onto the 300-weight
   subtitle and smeared it. Legibility now comes from the SCRIM (a real layer
   between the video and the copy), not from stacking shadows on the text.

   Three looks, one class on .rv-cover-stage:
     (default)          off-white ink  #ece7da
     --ink-white        pure white     #ffffff
     --ink-dark         near-black     #171717   (scrim flips to a light wash)
   ---------------------------------------------------------------------------- */
.rv-cover-stage {
  --cover-ink: #ece7da;                                     /* off-white (default) */
  --cover-shadow: 0 1px 2px rgba(0,0,0,.30);                /* just enough to seat the type */
  /* Recolour the CMS logos to the ink at the cover ONLY (they're reused dark-on-light
     elsewhere, so the source SVGs stay untouched). brightness(0)→black, invert→white,
     sepia+brightness warms it to ≈ #ece7da to match --cover-ink. */
  --cover-logo-filter: brightness(0) invert(1) sepia(1) brightness(.925);
  /* Scrim: strongest under the copy (bottom-left), clearing away toward the top-right
     so the drone footage still reads. Two layers — a vertical lift and a corner pool. */
  --cover-scrim:
    linear-gradient(180deg, rgba(4,10,26,0) 30%, rgba(4,10,26,.42) 78%, rgba(4,10,26,.62) 100%),
    radial-gradient(120% 90% at 0% 100%, rgba(4,10,26,.55) 0%, rgba(4,10,26,0) 60%);

  position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; pointer-events: none;   /* dvh: tracks the visible viewport so the navy runway never shows as a strip below the video (N1). Trades a mild mid-scrub resize for no bottom gap; revert to 100svh if the scrub janks. */
  display: flex; flex-direction: column; justify-content: flex-end; padding: 7vw 6vw 9vh;
  background-size: cover; background-position: center;   /* instant cover-image backdrop (no colour flash) */
}
@media (min-width: 901px) { .rv-cover-stage { padding-left: 20vw; } }   /* desktop: inset the copy from the left edge (title stays footprint-bound, so no refit) */
.rv-cover-stage--ink-white { --cover-ink: #ffffff; --cover-logo-filter: brightness(0) invert(1); }   /* logos pure white to match */
.rv-cover-stage--ink-dark {
  --cover-ink: #171717;
  --cover-shadow: 0 1px 2px rgba(255,255,255,.45);
  --cover-logo-filter: brightness(0);                      /* force logos black */
  --cover-scrim:
    linear-gradient(180deg, rgba(255,255,255,0) 42%, rgba(255,255,255,.22) 82%, rgba(255,255,255,.34) 100%),
    radial-gradient(90% 70% at 0% 100%, rgba(255,255,255,.40) 0%, rgba(255,255,255,0) 58%);
}
.rv-cover-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%; will-change: transform; z-index: 0; pointer-events: none; }
/* PERF (B1): once the cover scroll-zone has left the viewport the scrub is inert (JS toggles
   this class via IntersectionObserver) — release the compositing layer for the whole read. */
.rv-cover-scroll--inert .rv-cover-video { will-change: auto; }
/* The scrim IS the legibility mechanism — see the token block on .rv-cover-stage. */
.rv-cover-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--cover-scrim); }
.rv-cover-titles {
  position: relative; z-index: 2; pointer-events: none;
  color: var(--cover-ink); opacity: 0; will-change: opacity, transform;
  text-shadow: var(--cover-shadow);
}
.rv-cover-stage .rv-cover__cue { z-index: 2; }

/* ---- cover intro loader (containerized — see mountCoverLoader in the JS) ----
   Black overlay + dictionary definition; irises open (radial mask grows) to the video. */
.rv-loader {
  position: fixed; inset: 0; z-index: 90; background: #181818;
  display: grid; place-items: center; text-align: left;
  opacity: 1; transition: opacity 3.6s ease;                   /* slow, uniform fade-out */
}
.rv-loader.is-revealing { opacity: 0; }
.rv-loader__text {
  width: 100%; max-width: 600px; padding: 0 16px; box-sizing: border-box;
  font-family: var(--sans); font-size: 0.95rem; line-height: 1; letter-spacing: .01em; color: #e2dedc;
  opacity: 0; transition: opacity .45s ease;
}
.rv-loader.is-shown .rv-loader__text { opacity: 1; }            /* quick fade-in; the overlay opacity carries the fade-out uniformly */
.rv-loader__lead { font-size: 1.2rem; font-weight: 700; line-height: 1.15; margin: 0 0 1em; color: #e2dedc; }
.rv-loader__entry { margin: 0; }
/* Load-screen copy hidden for now (may return / relocate) — keep markup, drop the display. */
.rv-loader__lead, .rv-loader__entry { display: none; }
.rv-loader__term { font-weight: 700; letter-spacing: .1em; color: #e2dedc; }
.rv-loader__pron, .rv-loader__pos { opacity: .82; }   /* meta dimmed; gloss matches the definition (full opacity) */
/* loading pill: full-width pill → collapses from both sides to a dot → on reveal the dot
   drops toward the scroll CTA and fades out with the overlay */
.rv-loader__bar { width: 100%; margin: 32px auto 0; }
.rv-loader__pill {
  display: block; width: 100%; height: 6px; margin: 0 auto;
  border-radius: 999px; background: #e2dedc;
  transition: width 2.6s cubic-bezier(.4, 0, .2, 1), transform 1.6s cubic-bezier(.4, 0, .2, 1);
}
.rv-loader.is-loading .rv-loader__pill { width: 6px; }                       /* collapse to a centred dot */
.rv-loader.is-revealing .rv-loader__pill { transform: translateY(40vh); }    /* dot drops toward the scroll cue */

/* ============================================================================
   CMS-driven section rendering (v0.2.0) — walks report.sections[]
   ============================================================================ */
.rv-cms-section { padding: 60px 6vw; scroll-snap-align: start; scroll-margin-top: 8px; }   /* snap target — section start (the cover scroll-zoom is NOT a target) */
.rv-cms-section__inner { max-width: calc(var(--measure) + 8vw); margin: 0 auto; }
.rv-cms-section--filled { padding: 76px 6vw; }
.rv-cms-section--chapter { border-top: 1px solid var(--line);
  min-height: 100vh; min-height: 100svh; }   /* full-viewport floor: stable snap target + room for the future section hero; svh = no reflow as mobile browser bars show/hide (keeps anchor landing precise) */

.rv-section__h { font-family: var(--serif); font-size: clamp(1.75rem, 3.6vw, 2.75rem); line-height: 1.08; margin: 0 0 6px; color: inherit; font-weight: 400; letter-spacing: -.005em; }
.rv-section__h--front { margin-bottom: 18px; }
/* chapter marker = a LARGE numeral only (no "Chapter" word) */
.rv-kicker--chapter {
  color: inherit; opacity: .85;
  font-size: clamp(3rem, 7vw, 5rem); font-weight: 800; line-height: .85;
  letter-spacing: -.02em; text-transform: none; margin-bottom: 10px;
}

.rv-authors { font: 0.9375rem/1.6 var(--sans); margin: 6px 0 26px; color: inherit; display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.rv-authors__label { font-weight: 700; opacity: .85; margin-right: 2px; }
/* Chapter-cover authors: label on top, names in a vertical list below it. */
.rv-authors--stack { flex-direction: column; align-items: flex-start; gap: 10px; }
.rv-authors--stack .rv-authors__list { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.rv-cover__editby { color: inherit; opacity: .88; margin-bottom: 3px; }
/* author / editor name pill — opens the person panel (future profile module) on click */
.rv-person {
  display: inline-block; padding: 1px 10px; border-radius: 0;
  border: 1px solid transparent;                  /* no border until hover */
  background: transparent; color: #ece7da;
  font: 600 0.5775rem/1.2 var(--sans); letter-spacing: .02em;
  cursor: pointer; vertical-align: middle; white-space: nowrap;
  transition: transform .18s ease, border-color .18s ease, color .15s ease;
}
.rv-person:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; border-radius: 2px; }   /* a11y focus — hover motion is toggled separately */
.rv-cms-section:not(.rv-cms-section--filled) .rv-person { color: #181818; }   /* authors sit dark on Paper sections */
/* authors OVER a cover image (chapter heroes): light + a very subtle shadow so they read over light
   AND dark areas of the photo. SPM is front-matter on Paper (never a hero), so it stays untouched. */
.rv-cms-section .rv-shero .rv-person,
.rv-cms-section .rv-shero .rv-authors__label { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .55); }
.rv-cover__editors .rv-person { position: relative; margin-left: -11px; }   /* flush under "Edited by" */

/* ---- author / editor HOVER MOTION — gated by PERSON_HOVER (mount class .rv-people-hover); OFF for
   now, dialled in once the Teams pages are built. ---- */
.rv-people-hover .rv-cover__editors .rv-person { padding-right: 2.3em; }   /* room for the chevrons */
.rv-people-hover .rv-cover__editors .rv-person::after {
  content: "\203A\203A"; position: absolute; right: 0.55em; top: 0; bottom: 0;
  display: flex; align-items: center; line-height: 1;
  font-family: "DotGothic16", var(--sans); letter-spacing: .15em; opacity: 0; transition: opacity .18s ease;
}
.rv-people-hover .rv-cover__editors .rv-person:hover, .rv-people-hover .rv-cover__editors .rv-person:focus-visible { transform: translateX(11px); }
.rv-people-hover .rv-cover__editors .rv-person:hover::after, .rv-people-hover .rv-cover__editors .rv-person:focus-visible::after { opacity: 1; }
.rv-people-hover .rv-cms-section .rv-person:hover, .rv-people-hover .rv-cms-section .rv-person:focus-visible { transform: translateX(6px); border-color: rgba(236, 231, 218, .5); }
/* dark-filled section -> LIGHT person text; light-filled -> dark. (Keyed on the JS luminance class,
   not just --filled, so a light tinted fill still gets dark text.) */
.rv-cms-section--dark .rv-person { color: #ece7da; }
.rv-cms-section--dark .rv-person:focus-visible { border-color: rgba(236, 231, 218, .5); }
.rv-cms-section--filled:not(.rv-cms-section--dark) .rv-person { color: #181818; }
.rv-cms-section--filled:not(.rv-cms-section--dark) .rv-person:focus-visible { border-color: rgba(24, 24, 24, .4); }
/* editors: label then pills stacked vertically below it */
.rv-cover__editors { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; margin-top: 10px; }
/* "and" on its own line, with the last editor dropped below it */
.rv-cover__and { color: inherit; font: 600 0.5775rem/1.2 var(--sans); letter-spacing: .02em; }

/* richtext from the CMS body */
.rv-rich { font-size: 1.0625rem; line-height: 1.7; max-width: none; color: inherit; }   /* fill the full width of .rv-flow (was capped at --measure/66ch) */
.rv-rich p { margin: 0 0 1.05em; }
.rv-rich em { font-style: italic; }   /* respect the CMS richtext (italics authored in the CMS render as italic) */
.rv-rich strong { font-weight: 700; }
.rv-rich a { color: inherit; text-decoration: underline; }
/* WF rich text sometimes wraps prose in <code> (a paste/format artifact). This is a
   narrative report with no real code, so render <code> as normal text — otherwise it
   goes monospace + gains a chip with left padding that reads as a stray leading space. */
.rv-rich code, .rv-mk--lead code { font: inherit; background: none; padding: 0; border-radius: 0; }
/* Inline rich-text images. Never overflow the column. */
.rv-rich img { max-width: 100%; height: auto; }
/* Webflow rich-text figures (e.g. the Foreword signature) carry their size as an
   inline max-width on the <figure> (set in the WF Designer). Let that drive the
   size; the inner <img> just fills it. 80% here is a ceiling for when WF sets none. */
.rv-rich figure.w-richtext-figure-type-image { max-width: 80%; margin: 14px 0; }
.rv-rich figure.w-richtext-figure-type-image div { width: 100%; }
.rv-rich figure.w-richtext-figure-type-image img { display: block; width: 100%; height: auto; }
.rv-rich figure.w-richtext-align-center { margin-left: auto; margin-right: auto; }
.rv-rich--cols { column-gap: 2.6rem; max-width: none; }
.rv-rich--cols p { break-inside: avoid-column; }

/* authoring markers (::: lead / ::: columns / ::: callout · [text]{.mark}) */
.rv-mk--lead { font-family: var(--sans); font-size: 1.15rem; font-weight: 500; line-height: 1.4; margin: 0 0 1.1em; max-width: none; }
.rv-mk--lead p { margin: 0 0 .5em; }
.rv-mk--passthrough { display: block; }   /* retired ::: columns — the section flow handles columns now */

/* ---- continuous section flow: default 2 columns; figures/tables/boxes/photos break out full-width ---- */
.rv-flow--cols { column-count: 2; column-gap: 2.6rem; }
.rv-flow--cols > .rv-fullwidth { column-span: all; max-width: none; margin-top: .2em; }   /* fill the inner — no right-side gap */
.rv-flow--cols .rv-mk--lead { column-span: all; }              /* lead = full-width standfirst above the columns */
.rv-flow .rv-sub__h, .rv-flow .rv-spm__chapter, .rv-flow .rv-spm__sub { break-after: avoid; }
.rv-mk--callout { border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; padding: 20px 0; margin: 30px 10%; font-family: var(--serif); font-size: 1.56em; font-weight: 500; font-style: italic; line-height: 1.4; color: var(--green); }
.rv-mk--callout p { margin: 0; }
.rv-mk-mark { font-weight: 500; }
.rv-signature img { max-height: 64px; width: auto; margin: 10px 0 4px; filter: brightness(0) invert(1); }

/* Summary-for-policy-makers numbered blocks (Chapter N. + N.x) */
.rv-spm__chapter { font-family: var(--serif); font-weight: 500; font-size: clamp(1.3125rem, 2.4vw, 1.6875rem); line-height: 1.15; margin: 38px 0 16px; color: var(--ink); }
.rv-spm__sub { font-family: var(--sans); font-weight: 700; font-size: 1.0625rem; line-height: 1.3; color: var(--navy); margin: 26px 0 12px; max-width: none; }   /* SPM subsection subheading (from the description field) */
.rv-spm { display: grid; grid-template-columns: 3.4em 1fr; gap: 4px 14px; margin: 0 0 18px; max-width: none; }   /* fill the flow (was --measure) */
.rv-spm--sub { margin-left: 2em; }   /* indented sub-sub level — description-less continuations in the same group */
.rv-spm__num { font: 700 1rem/1.6 var(--sans); color: var(--coral); font-variant-numeric: tabular-nums; }
.rv-spm__body p { margin: 0 0 .6em; }
.rv-spm__body p:last-child { margin-bottom: 0; }
.rv-spm__num { display: inline-flex; align-items: flex-start; }   /* badge sits at the top of the row */

/* ---- nested number badge (chapter · sub · paragraph) -----------------------
   Dotted number → collapsing right-aligned pills. Reference + tuning surface:
   _standalone-preview/number-badge.html. Used by .rv-sub__ref + .rv-spm__num. */
.rv-num {
  --rv-cell: 21px;
  --rv-g1: #333; --rv-g2: #666; --rv-g3: #999;   /* wider grey ramp: #333 (level 1) -> lighter for level 3, more contrast */
  --rv-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", sans-serif;
  position: relative; display: inline-block; vertical-align: middle;
  height: var(--rv-cell); width: calc(var(--n) * var(--rv-cell)); font-family: var(--rv-font);
}
.rv-num__lvl { position: absolute; top: 0; right: 0; height: var(--rv-cell); border-radius: 999px; display: flex; align-items: center; }
.rv-num__lvl--1 { width: calc(var(--n) * var(--rv-cell));       background: var(--rv-g1); }
.rv-num__lvl--2 { width: calc((var(--n) - 1) * var(--rv-cell)); background: var(--rv-g2); }
.rv-num__lvl--3 { width: var(--rv-cell);                        background: var(--rv-g3); }
.rv-num__d { flex: 0 0 var(--rv-cell); width: var(--rv-cell); text-align: center; color: var(--paper); font-weight: 600; font-size: calc(var(--rv-cell) * 0.52); line-height: 1; }

/* ---- overview overlays (dock: figures / tables / images) --------------------
   Full-screen grid of all items of a type; click a tile to fly to its section. */
.rv-overview {
  position: fixed; inset: 0; z-index: 80; background: var(--paper);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transition: opacity .25s ease;
}
.rv-overview.is-open { opacity: 1; visibility: visible; }
.rv-overview__bar { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid var(--line); flex: 0 0 auto; }
.rv-overview__title { font: 600 1.0625rem var(--sans); color: var(--ink); margin: 0; }
.rv-overview__close { border: 0; background: transparent; width: 36px; height: 36px; border-radius: 50%; font-size: 1.05rem; color: var(--ink); cursor: pointer; }
.rv-overview__close:hover { background: var(--paper-warm); }
.rv-overview__grid { flex: 1; overflow-y: auto; display: grid; gap: 16px; padding: 22px 24px; align-content: start; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.rv-overview--gallery .rv-overview__grid { grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); }
.rv-overview--tables .rv-overview__grid { grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr)); }   /* min(): tracks never exceed a narrow viewport (no sideways scroll on phones) */
/* table tile (N6): a THUMBNAIL of the live table clone — the clone lays out at 2.5× the tile
   width inside .rv-ov__tscale, scales down to fit, and the tile's fixed 16/10 box (inherited
   from .rv-ov__vis, overflow hidden) clips whatever remains. No scrolling, no overflow. */
.rv-ov__vis--table { place-items: stretch; padding: 6px; background: var(--card); }
/* justify/align-self on the ITEM: the base .rv-ov__vis place-items:center is later in the file
   and would centre the 250%-wide layout box (pushing its origin off-tile to the left) */
.rv-ov__tscale { width: 250%; transform: scale(.4); transform-origin: 0 0; justify-self: start; align-self: start; pointer-events: none; }
.rv-ov__tscale .rtbl { width: 100%; }
/* fly-to landing: leave a little breathing room above the targeted item */
.rv-figure, .rv-table, .rv-photo { scroll-margin-top: 18px; }

.rv-ov__tile { display: flex; flex-direction: column; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); cursor: pointer; text-align: left; font-family: var(--sans); color: var(--ink); transition: transform .15s ease, box-shadow .15s ease; }
.rv-ov__tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.rv-ov__vis { aspect-ratio: 16/10; overflow: hidden; border-radius: 6px; background: var(--paper-warm); display: grid; place-items: center; }
.rv-ov__vis img { width: 100%; height: 100%; object-fit: contain; }
.rv-ov__vis svg { width: 100%; height: auto; max-height: 100%; }   /* cloned live chart fills the tile */
.rv-ov__sq { aspect-ratio: 1; overflow: hidden; border-radius: 6px; background: var(--paper-warm); }
.rv-ov__sq img { width: 100%; height: 100%; object-fit: cover; }
.rv-ov__ph { font: 600 .78rem var(--sans); color: var(--steel); text-align: center; padding: 6px; }
.rv-ov__cap { display: flex; align-items: center; gap: 8px; font-size: .76rem; line-height: 1.3; }
.rv-ov__name { flex: 1; min-width: 0; }
.rv-ov__credit { font-size: .72rem; color: var(--steel); line-height: 1.3; }

.rv-items { margin-top: 10px; }
.rv-pending { font: 400 0.875rem/1.5 var(--sans); color: var(--steel); border-left: 3px solid var(--line); padding-left: 14px; margin: 22px 0 0; }

/* photo with overlay caption/credit box */
.rv-photo { position: relative; margin: 36px auto; max-width: 100%; width: -moz-fit-content; width: fit-content; }   /* fill the flow up to intrinsic size (was --measure); 100% so wide images never overflow */
/* figure shrink-wraps the image so the absolute overlay (caption/credit) aligns to the image edges,
   not the wider full-width parent. respect original orientation: landscape fills the width,
   portrait is capped by height + centred (not blown up full-width) */
.rv-photo img { width: auto; max-width: 100%; max-height: 80vh; display: block; margin: 0 auto; border-radius: 16px; }
.rv-photo__overlay {
  position: absolute; left: 14px; bottom: 14px; max-width: 72%;
  background: rgba(226, 222, 218, .92);   /* --paper #e2dedc, a touch more opaque so text reads over busy photos */
  color: #333; padding: 9px 13px; border-radius: 4px; font-family: var(--sans);
  opacity: 0; transition: opacity .25s ease;            /* revealed on photo hover */
}
.rv-photo:hover .rv-photo__overlay, .rv-photo:focus-within .rv-photo__overlay { opacity: 1; }
.rv-photo.is-caption-open .rv-photo__overlay { opacity: 1; }   /* A20: on touch, tap the photo to reveal caption/credit (no hover on touch); hidden by default */
/* margin:0 clears the inherited 9px cap top-margin (line ~317) that made the overlay top-heavy */
.rv-photo__cap { display: block; font-size: 0.8125rem; line-height: 1.3; color: #333; margin: 0; }
.rv-photo__credit { display: block; font-size: 0.6875rem; color: #333; opacity: .8; margin-top: 1.5px; }
/* landscape photos break out full-width (column-span comes from .rv-fullwidth); the image fills the
   figure so the absolute overlay aligns to the image edges. portrait stays in-column (fit-content above). */
.rv-photo.rv-fullwidth { width: auto; max-width: none; }
.rv-photo.rv-fullwidth img { width: 100%; max-width: none; max-height: 90vh; margin: 0; }
/* 2.5D parallax scene stands in for the <img>. The figure is fit-content (sized by the image's
   intrinsic width) — a .pxScene has none, only an aspect-ratio, so give the figure a width basis
   and let the scene fill it. The runtime's own #pxStyles set position/overflow/radius on .pxScene. */
.rv-photo:has(.pxScene) { width: 100%; }
.rv-photo .pxScene { width: 100%; max-height: 85vh; }
/* full-bleed chapter hero: parallax layers fill the hero, behind the dark overlay (z1) + content (z2) */
.rv-shero .pxScene { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; z-index: 0; }
/* section cover (Section Media) — hero above the chapter heading. interim "rest above" placement
   (full-bleed styling per image #5 is TBD); inherits .rv-photo overlay/hover, fit-content keeps caption aligned. */
.rv-secmedia { max-width: none; margin: 0 auto 30px; }
.rv-secmedia img { max-height: 60vh; }
/* FULL-SCREEN CHAPTER HERO (mirrors the cover landing): full-bleed cover image + dark overlay, with the
   chapter kicker + title + authors anchored bottom. Used for chapters that have a cover image. */
.rv-cms-section--chapter.rv-has-hero { padding-top: 0; border-top: 0; }   /* hero touches the section top, no rule */
.rv-cms-section--chapter.rv-has-hero .rv-cms-section__inner { padding-top: clamp(2.5rem, 7vh, 6rem); }   /* breathing room between the full-screen hero and the body */
.rv-shero { position: relative; width: 100vw; left: 50%; transform: translateX(-50%);   /* full-bleed escape from the section padding/measure (html has overflow-x:clip so no h-scroll) */
  min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden;
  background: var(--navy-ink) center / cover no-repeat; }
.rv-shero__overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.30) 45%, rgba(0,0,0,.78) 100%); }   /* stronger bottom so light overlaid text reads on a LIGHT image too */
/* Section covers are RIGHT-aligned; the right padding clears the floating control stick (~62px on the right). */
.rv-shero__content { position: relative; z-index: 2; width: 100%; max-width: calc(var(--measure) + 8vw); margin: 0 auto;
  padding: 0 clamp(66px, 6vw, 96px) 8vh 6vw; color: #ece7da; text-shadow: 0 2px 18px rgba(0,0,0,.35);
  display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.rv-shero__h { font-family: var(--sans); font-size: clamp(2rem, 5.5vw, 4.25rem); line-height: .92; font-weight: 800; letter-spacing: -.02em; text-transform: uppercase; color: #ece7da; margin: 0 0 6px; max-width: 18ch; }
/* Chapter-cover subheading — matches the heading (font, weight, size, case) for now, per Scott. */
.rv-shero__sub { font-family: var(--sans); font-size: clamp(2rem, 5.5vw, 4.25rem); line-height: .92; font-weight: 800; letter-spacing: -.02em; text-transform: uppercase; color: #ece7da; margin: 0 0 24px; max-width: 22ch; }
/* right-aligned authors: label + buttons hug the right edge, button text aligned to the label (offset the 10px pill pad + 1px border) */
.rv-shero .rv-authors--stack { align-items: flex-end; }
.rv-shero .rv-authors--stack .rv-authors__list { align-items: flex-end; }
.rv-shero .rv-authors--stack .rv-person { margin-right: -11px; }
/* section-cover caption + credit (like the landing cover), right-aligned + muted */
.rv-shero__credit { display: inline-block; position: relative; font: 0.6875rem/1.45 var(--sans); color: rgba(236, 231, 218, .5); margin-top: 16px; max-width: 44ch; text-shadow: 0 1px 6px rgba(0, 0, 0, .5); cursor: pointer; transition: color .4s ease; pointer-events: auto; }
/* same hover as the landing-cover credit — brightens + a hairline wipes in (from the right, to match the right alignment) */
.rv-shero__credit::after { content: ""; position: absolute; right: 0; bottom: -3px; height: 1px; width: 100%; background: #ece7da; transform: scaleX(0); transform-origin: right; transition: transform .55s cubic-bezier(.4, 0, .2, 1); }
.rv-shero__credit:hover { color: #ece7da; }
.rv-shero__credit:hover::after { transform: scaleX(1); }
/* mobile: ~20% smaller cover type, and a tighter stick clearance */
@media (max-width: 700px) {
  .rv-shero__content { padding: 0 clamp(54px, 15vw, 72px) 8vh 7vw; }
  .rv-shero__h, .rv-shero__sub { font-size: clamp(1.4rem, 6.5vw, 1.9rem); }   /* ~20% smaller than desktop */
}
/* Non-hero chapter subheading (on paper — dark), matches its heading treatment. */
.rv-section__sub { font-family: var(--sans); font-size: clamp(1.5rem, 3.5vw, 2.5rem); font-weight: 800; letter-spacing: -.02em; line-height: .98; color: var(--ink); margin: -2px 0 18px; max-width: 22ch; }
.rv-shero .rv-kicker--chapter { color: #ece7da; opacity: .85; }   /* light, not coral — reads on any image over the darkened overlay */
.rv-shero .rv-authors, .rv-shero .rv-authors__label, .rv-shero .rv-person { color: #ece7da; }
/* hide the scrollbar during a jump so its jump doesn't show (the veil covers any width shift) */
html.rv-jumping { scrollbar-width: none; }
html.rv-jumping::-webkit-scrollbar { width: 0; height: 0; }
/* BASIC LOADER: a veil with a spinner + destination name, fades over the content during a nav jump (masks
   the instant scroll + settle), then fades back in at the destination. Under the rail (z 40) so the nav stays visible. */
.rv-jump-veil { position: fixed; inset: 0; z-index: 35; background: var(--bg, #e2dedc);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.rv-jump-veil.is-on { opacity: 1; pointer-events: auto; }
.rv-jump-veil__cue { display: flex; flex-direction: column; align-items: center; gap: 16px; opacity: 0; transition: opacity .2s ease .05s; }
.rv-jump-veil.is-on .rv-jump-veil__cue { opacity: 1; }
.rv-jump-veil__spin { width: 30px; height: 30px; border-radius: 50%; border: 3px solid rgba(25, 39, 111, .18); border-top-color: var(--navy, #19276F); animation: rv-spin .7s linear infinite; }
.rv-jump-veil__label { font: 800 1.0625rem/1.2 var(--sans); letter-spacing: -.01em; color: var(--navy, #19276F); }
@keyframes rv-spin { to { transform: rotate(360deg); } }
/* chapter subsection heading now leads its own bounded 2-col block (full-width above the columns) */
.rv-cms-section--chapter .rv-sub__h--lead { margin: 2.4em 0 0.7em; }
/* Abbreviations & Acronyms glossary — key + expansion, multi-column so 50+ entries stay compact */
.rv-acronyms { columns: 2; column-gap: 2.6rem; margin-top: 8px; max-width: none; }   /* fill the flow (was --measure) */
.rv-acronym { break-inside: avoid; margin: 0 0 0.55em; font-size: 0.9375rem; line-height: 1.45; }
.rv-acronym__k { font-family: var(--sans); font-weight: 700; }
.rv-acronym__x { color: var(--steel, #6C808C); }
@media (max-width: 640px) { .rv-acronyms { columns: 1; } }
/* Appendix (back matter) — CMS-driven heading + source line; grid drawn by the report-appendix bundle */
.rv-appendix { margin: 30px 0; }
.rv-appendix__h { font-family: var(--serif); font-weight: 700; font-size: clamp(1.375rem, 2.6vw, 1.75rem); line-height: 1.2; margin: 0 0 18px; color: inherit; }
.rv-appendix__src { font-size: 0.8125rem; color: var(--steel); font-style: italic; margin-top: 12px; }
/* back cover — solid brand panel; all content CMS-driven (initiative logo + name "by" publisher) */
.rv-backcover { min-height: 82vh; display: grid; place-items: center; background: var(--paper, #e2dedc); padding: 80px 6vw; text-align: center; scroll-margin-top: 8px; scroll-snap-align: start; }
.rv-backcover__inner { display: flex; flex-direction: column; align-items: center; gap: 18px; max-width: 560px; }
.rv-backcover__logo { max-width: 220px; max-height: 120px; height: auto; width: auto; }
.rv-backcover__name { font-family: var(--serif); font-size: 1.25rem; line-height: 1.3; }
.rv-backcover__by { font-family: var(--sans); font-size: 0.75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--steel); }
.rv-backcover__plogo { max-width: 150px; max-height: 70px; height: auto; width: auto; }
.rv-backcover__pub { font-family: var(--sans); font-weight: 700; }
.rv-backcover__fine { font-size: 0.75rem; color: var(--steel); margin-top: 22px; }

/* fallback image + placeholders (CMS images not yet uploaded) */
.rv-figure__img { width: 100%; display: block; border-radius: 4px; }
.rv-figure__src { color: var(--steel); }
.rv-ph { display: grid; place-items: center; border: 1px dashed var(--line); border-radius: 6px; color: var(--steel); font: 0.8125rem/1.4 var(--sans); text-align: center; padding: 24px; }
.rv-ph--figure { min-height: 200px; background: var(--card); }
.rv-ph--photo { min-height: 200px; aspect-ratio: 16/9; background: linear-gradient(135deg, var(--paper-warm), var(--paper-cool)); }

@media (max-width: 900px) {
  .rv-cms-section, .rv-cms-section--filled { padding-left: 22px; padding-right: 22px; }
}

/* ---- RESI restyle (v0.3): logo, sans subheadings, Brief/Full read-times ---- */
.rv-rail__logo { display: block; margin: 0 0 16px; }
.rv-rail__logo img { width: 22px; height: auto; display: block; }   /* R mark */
.rv-sub__h, .rv-box__h { font-family: var(--sans); font-weight: 700; }   /* H3 = Plus Jakarta */
.rv-modes { background: rgba(0,0,0,.06); }
.rv-modes__rt { display: block; font: 500 0.625rem/1.2 var(--sans); opacity: .65; margin-top: 3px; letter-spacing: .02em; }
.rv-cms-section[hidden] { display: none; }

/* Download Report — light-blue pill, no border, #333 icon + text (in the nav module) */
.rv-rail__controls { display: none; margin: 14px 0 6px; }  /* TEMP: hidden — holds the Download Report button (and future siblings), relocating */
.rv-download { display: inline-flex; align-items: center; gap: 9px; width: 100%; background: var(--lightblue); color: #333; border: 0; border-radius: 999px; padding: 12px 16px; font: 700 0.8125rem/1 var(--sans); text-decoration: none; }
.rv-download:hover { text-decoration: none; filter: brightness(1.03); }
.rv-download svg { width: 18px; height: 18px; flex: none; }

/* floating tools dock — vertical pill, same frosted look as the nav */
.rv-control-stick {
  position: fixed; right: 20px; top: 50%; transform: translateY(-50%); z-index: 45;
  display: flex; flex-direction: column; gap: 4px; padding: 6px 3px;   /* left/right pad halved — narrower stick */
  background: rgba(246,244,240,.7); border: 1px solid rgba(255,255,255,.55); border-radius: 999px;
  -webkit-backdrop-filter: blur(22px) saturate(1.15); backdrop-filter: blur(22px) saturate(1.15);
  box-shadow: 0 12px 40px rgba(18,34,30,.18);
  transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}
.rv-control-stick.is-hidden { transform: translateY(-50%) translateX(160%); }   /* slide off to the right */
/* padding:0 resets the UA's default button padding (1px 6px). With border-box that padding shrank
   the 38px mobile button's content box to 26px — narrower than the 30px "TOC" lettermark, which
   then overflowed and got pinned to the start edge instead of centred (6px left / 2px right).
   Desktop's 42px button happened to leave exactly 30px, which is why it only showed on phones. */
.rv-control-stick__btn { display: grid; place-items: center; padding: 0; width: 36px; height: 36px; border: 0; background: transparent; color: var(--ink); border-radius: 999px; cursor: pointer; }
.rv-control-stick__btn:hover { background: rgba(0,0,0,.07); }
.rv-control-stick__btn.is-off { opacity: .45; }
.rv-control-stick__btn--glyph svg { width: 18px; height: 18px; }   /* filled brand glyphs (asterisk/books/bars/photo) have no intrinsic px size */
.rv-control-stick__btn--toc svg { width: 15px; height: 23px; }     /* RESI nav glyph — portrait (1243:1920), preserve aspect */
.rv-control-stick__btn--table svg { width: 15px; height: 20px; }   /* table-document glyph — portrait, preserve aspect */

/* ===== NAV-PANEL STATE MENU — control-stick functions rendered in-panel ===== */
.rv-vmenu { display: flex; gap: 2px; }   /* lives in .rv-rail__bottom — a horizontal state-switch bar */
.rv-vmenu__btn { flex: 1 1 0; width: 34px; height: 34px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: var(--steel); border-radius: 8px; cursor: pointer; transition: background .12s ease, color .12s ease; }   /* flex-basis 0 + equal grow = uniform square buttons */
.rv-vmenu__btn:hover { background: rgba(0,0,0,.05); color: var(--ink); }
.rv-vmenu__btn.is-on { background: rgba(0,0,0,.07); color: var(--ink); }
.rv-vmenu__btn svg { width: 18px; height: 18px; }
.rv-vmenu__btn--glyph svg { width: 15px; height: 15px; }

/* only the active view shows; the menu swaps them inside .rv-rail__content */
.rv-view { display: none; min-height: 0; }
.rv-rail[data-view="toc"] .rv-view--toc { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.rv-rail[data-view="figures"] .rv-view--figures,
.rv-rail[data-view="tables"] .rv-view--tables,
.rv-rail[data-view="gallery"] .rv-view--gallery,
.rv-rail[data-view="info"] .rv-view--info { display: block; }
.rv-rail[data-view="fn"] .rv-view--detail,
.rv-rail[data-view="ref"] .rv-view--detail,
.rv-rail[data-view="gloss"] .rv-view--detail { display: flex; }
.rv-vmenu__btn[data-view="gloss"] svg { width: 23px; height: 16px; }   /* wide AZ glyph — preserve aspect, don't square it */
.rv-vmenu__btn[data-view="toc"] svg { width: 26px; height: 10px; }     /* "TOC" lettermark — wide, preserve aspect */
.rv-vmenu__btn[data-view="tables"] svg { width: 13px; height: 18px; }  /* table-document glyph — portrait, preserve aspect */
.rv-view__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 700 1.0625rem/1.1 var(--sans); color: var(--ink); margin: 4px 0 14px; }

/* in-panel lists (figures / tables / gallery) — each row jumps to the item in the doc */
.rv-vlist { display: flex; flex-direction: column; }
.rv-vlist__item { display: grid; grid-template-columns: auto 1fr; align-items: start; column-gap: 10px; width: 100%;
  padding: 8px 10px; margin: 0 -10px; border: 0; border-top: 1px solid var(--line); border-radius: 8px; background: transparent; text-align: left; cursor: pointer; transition: background .12s ease; }
.rv-vlist .rv-vlist__item:first-child { border-top: 0; }
.rv-vlist__item:hover { background: rgba(0,0,0,.045); }
.rv-vlist__badge { font: 700 0.6875rem/1.4 var(--sans); font-variant-numeric: tabular-nums; color: var(--steel); }
.rv-vlist__label { font: 0.75rem/1.3 var(--sans); color: var(--ink); min-width: 0; }
.rv-vlist__desc { color: var(--steel); }
.rv-vlist__item--photo { grid-template-columns: 46px 1fr; align-items: center; column-gap: 12px; }
.rv-vlist__thumb { width: 46px; height: 34px; object-fit: cover; border-radius: 4px; display: block; background: var(--paper-warm); }
.rv-vlist__thumb--ph { background: var(--paper-warm); }

/* list <-> thumbnail toggle in the figures/tables view header */
.rv-vtoggle { display: inline-flex; gap: 2px; flex: 0 0 auto; }
.rv-vtoggle__btn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 22px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--steel); cursor: pointer; transition: background-color .12s ease, color .12s ease; }
.rv-vtoggle__btn svg { width: 14px; height: 14px; display: block; }
.rv-vtoggle__btn:hover { color: var(--ink); }
.rv-vtoggle__btn.is-on { background: rgba(0,0,0,.07); color: var(--ink); }

/* thumbnail mode: vertical stack of self-contained CARDS (chart + caption = one selectable unit,
   mirrors the control-stick popup tile). Whole card hovers/selects together — not a list row. */
.rv-vlist--thumb { gap: 18px; padding-top: 8px; }
.rv-vthumb { display: flex; flex-direction: column; gap: 8px; width: 100%; padding: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); text-align: left; font-family: var(--sans); color: var(--ink); cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.rv-vthumb:hover { transform: translateY(-1px); box-shadow: var(--shadow); border-color: var(--steel); }
.rv-vthumb:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.rv-vthumb__vis { width: 100%; }
.rv-vthumb__vis .rv-ov__vis { aspect-ratio: 16/10; width: 100%; overflow: hidden; border-radius: 6px; background: var(--paper-warm); display: grid; place-items: center; }
.rv-vthumb__vis .rv-ov__vis svg { width: 100%; height: auto; max-height: 100%; }   /* live chart scales to the card width — no h-scroll */
.rv-vthumb__cap { display: flex; align-items: baseline; justify-content: flex-start; gap: 6px; padding: 2px 4px; text-align: left; }
.rv-vthumb__cap .rv-vlist__label { font-size: 0.72rem; line-height: 1.25; }
/* skeleton placeholder while a figure hasn't drawn yet (figures render lazily on scroll) */
.rv-thumb__skel { display: block; width: 100%; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--paper-warm) 0%, rgba(0,0,0,.05) 50%, var(--paper-warm) 100%); background-size: 200% 100%; animation: rv-thumb-shimmer 1.4s ease-in-out infinite; }
@keyframes rv-thumb-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .rv-thumb__skel { animation: none; } }
/* About view: reuse the info-card content at panel scale */
.rv-view__info { font: 0.75rem/1.45 var(--sans); color: var(--ink); }
.rv-view__info img { max-width: 100%; height: auto; }
.rv-view__info .rv-info__brand img { height: 40px; }                                   /* RESI in the narrow rail */
.rv-view__info .rv-info__pub img, .rv-view__info .rv-info__partners-logos img { height: 24px; }
.rv-view--info .rv-view__head { margin-bottom: 30px; }   /* breathing room between the "Information" label and the RESI brand */
.rv-view__info .rv-info__meta { margin: 22px 0; }
.rv-view__info a { color: var(--ink); font-weight: 600; text-decoration: none; }   /* in-panel external links: semibold black */

/* ===== PAGE-DETAIL view — footnotes + references, filtered by the menu ===== */
.rv-detail { flex-direction: column; gap: 26px; padding-bottom: 24px; }
.rv-detail__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rv-detail__eyebrow { font: 700 0.6875rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--steel); }
.rv-detail__back { display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; cursor: pointer; font: 600 0.75rem/1 var(--sans); color: var(--navy); padding: 4px 2px; transition: opacity .12s ease; }
.rv-detail__back svg { width: 15px; height: 15px; }
.rv-detail__back:hover { opacity: .68; }
.rv-detail__modes { display: inline-flex; gap: 6px; padding: 2px; background: rgba(0,0,0,.05); border-radius: 999px; }
.rv-detail__mode { border: 0; background: transparent; cursor: pointer; font: 600 0.6875rem/1 var(--sans); color: var(--steel); padding: 5px 11px; border-radius: 999px; transition: background .12s ease, color .12s ease; }
.rv-detail__mode.is-on { background: var(--ink); color: #fff; }   /* selected = solid black pill, white text */
.rv-detail__sec[hidden] { display: none; }
.rv-detail__head { display: flex; align-items: center; gap: 11px; font: 700 1.0625rem/1.1 var(--sans); color: var(--ink); margin-bottom: 10px; }
.rv-detail__ic { display: inline-flex; color: var(--ink); }
.rv-detail__ic svg { width: 20px; height: 20px; display: block; }
.rv-detail__ic--books svg { width: 21px; height: 21px; }
.rv-detail__ic--gloss svg { width: 27px; height: 18px; }   /* wide AZ glyph */
.rv-detail__head--gloss { margin-bottom: 8px; }   /* icon sits alone; the label drops into the group below it */
.rv-glossgroup + .rv-glossgroup { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 16px; }   /* future: multiple glossary sections stack here */
.rv-glossgroup__title { font: 700 0.9375rem/1.1 var(--sans); color: var(--ink); margin: 0 0 8px; }
.rv-detail__list { display: flex; flex-direction: column; }
.rv-detail__item { padding: 6px 10px; margin: 0 -10px; border-top: 1px solid var(--line); border-radius: 8px; cursor: pointer; transition: background .12s ease; }
.rv-detail__list .rv-detail__item:first-child { border-top: 0; }
.rv-detail__item:hover { background: rgba(0,0,0,.045); }
.rv-detail__item--active { background: #141414; color: #fff; }   /* selected = solid black + white text (was a tomato tint) */
.rv-detail__item--active .rv-detail__num, .rv-detail__item--active .rv-detail__txt { color: #fff; }
.rv-detail__item--active a { color: #fff; }
.rv-detail__item--active.rv-detail__item--ref a { color: #fff; }   /* ref item wraps text directly (no .rv-detail__txt), so beat the .rv-detail__item--ref a rule explicitly */
/* footnotes mirror references: bold number (== .rv-cite__key) stacked above the body text (== .rv-cite__full) */
.rv-detail__num { display: block; font: 700 0.7rem/1.2 var(--sans); color: var(--ink); margin-bottom: 1px; }
.rv-detail__txt { font: 0.66rem/1.3 var(--sans); color: var(--ink); overflow-wrap: anywhere; }   /* full opacity + a touch larger — the .85 dimming washed out over the frosted rail (unreadable on hover) */
.rv-detail__txt p { margin: 0 0 .3em; } .rv-detail__txt p:last-child { margin: 0; }
.rv-detail__txt a, .rv-detail__item--ref a { color: var(--ink); font-weight: 700; text-decoration: none; transition: opacity .12s ease; }
.rv-detail__txt a:hover, .rv-detail__item--ref a:hover { opacity: .68; }
/* selected footnote link: white (beats .rv-detail__txt a, which ties on specificity but comes later) */
.rv-detail__item--active .rv-detail__txt a { color: #fff; }
/* selected + hover: the light hover tint wins the background, so flip ALL text + links back to ink to stay readable */
.rv-detail__item--active:hover,
.rv-detail__item--active:hover .rv-detail__num,
.rv-detail__item--active:hover .rv-detail__txt,
.rv-detail__item--active:hover .rv-detail__txt a,
.rv-detail__item--active:hover.rv-detail__item--ref a { color: var(--ink); }
.rv-detail__empty { font: 0.8125rem/1.4 var(--sans); color: var(--steel); padding: 6px 0; }
.rv-detail__empty[hidden] { display: none; }

/* share popover */
.rv-share { position: fixed; right: 76px; top: 50%; transform: translateY(-50%); z-index: 46; display: none; flex-direction: column; min-width: 158px; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 40px rgba(18,34,30,.2); }
.rv-share.is-open { display: flex; }
.rv-share__item { display: block; padding: 9px 12px; border-radius: 8px; border: 0; background: transparent; text-align: left; color: var(--ink); font: 600 0.8125rem/1 var(--sans); cursor: pointer; text-decoration: none; }
.rv-share__item:hover { background: rgba(0,0,0,.06); text-decoration: none; }

@media (max-width: 900px) {
  /* PERF: drop the live backdrop-blur on the floating surfaces. blur(22px) forces Safari to re-render
     the whole viewport behind these on every scroll/scrub — which made taps + panel reveals land
     seconds late on mobile. Opaque fills read the same and paint instantly. */
  .rv-rail, .rv-control-stick {
    -webkit-backdrop-filter: none; backdrop-filter: none;
    background: rgba(247, 245, 241, .96);
  }
  .rv-info { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(18, 34, 30, .62); }
  .rv-rail { touch-action: pan-y; }               /* vertical scroll stays native; horizontal swipe reaches the close handler, not a viewport pan */
  .rv-control-stick { right: 10px; }              /* dock stays on the right, sharing the screen with the nav */
  .rv-control-stick__btn { width: 34px; height: 34px; }
  .rv-share { right: 60px; min-width: 144px; }
}

/* info / imprint panel (logos + legal) */
.rv-info { position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; padding: 24px;
  background: rgba(18,34,30,.45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.rv-info.is-open { display: flex; }
.rv-info__card { background: var(--paper); color: var(--ink); width: 100%; max-width: 600px; max-height: 86vh; max-height: 86dvh; overflow-y: auto;
  border-radius: 18px; padding: 32px 34px; box-shadow: 0 24px 80px rgba(0,0,0,.34); font-family: var(--sans); }
/* logo links out to the company's site (Corp URL from the CMS) */
.rv-logolink { display: inline-flex; align-items: center; text-decoration: none; border: 0; transition: opacity .15s ease; }
.rv-logolink:hover { opacity: .65; }
.rv-logo__name { font: inherit; color: var(--steel); }
/* ---- About / imprint: book title-verso layout (RESI large; ODI + partners on one line; stacked meta; fine print) ---- */
.rv-info__brand { margin: 0 0 22px; }
.rv-info__brand img { height: 48px; width: auto; max-width: 100%; }                 /* initiative (RESI) — largest */
.rv-info__pubrow { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 24px; margin: 0 0 8px; }
.rv-info__pub img { height: 34px; width: auto; }                                    /* publisher (ODI) — ~70% of RESI */
.rv-info__partners { display: flex; flex-direction: column; gap: 6px; }
.rv-info__partners-logos { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px; }
.rv-info__partners-logos img { height: 34px; width: auto; }                         /* partners — same size as ODI */
.rv-info__label { font: 700 0.625rem/1.1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: #333; margin: 0; }
.rv-info__label--mini { font-size: 0.5625rem; }
.rv-info__label--head { color: var(--ink); }   /* "Information" heading — label style, black */
.rv-info__meta { display: flex; flex-direction: column; gap: 8px; margin: 26px 0; }        /* vertical, tight */
.rv-info__metaitem { display: flex; flex-direction: column; gap: 3px; }
.rv-info__metaitem--addr { margin-bottom: 4px; }
.rv-info__metaitem--addr .rv-info__val { white-space: pre-line; }                          /* "ODI Global\n4 Millbank…" on two lines */
.rv-info__val { font: 0.8125rem/1.35 var(--sans); color: var(--ink); }
.rv-info__note { margin: 22px 0 0; }
.rv-info__note .rv-info__label { margin: 0 0 6px; }
.rv-info__fine { margin: 0; font: 0.6875rem/1.55 var(--sans); color: var(--stone); }   /* fine print — small, not too small */
.rv-info__fine p { margin: 0 0 .5em; }
.rv-info__fine p:last-child { margin: 0; }
.rv-info__fine a { color: var(--navy); }

@media (max-width: 900px) {
  .rv-info__card { padding: 22px 20px; }
  .rv-info__brand img { height: 40px; }
  .rv-info__pub img, .rv-info__partners-logos img { height: 28px; }
  .rv-info__val { font-size: 0.75rem; }
}

/* nav is hidden on load and summoned via the control-stick TOC, so it overlays
   centered content instead of reserving a permanent left gutter. */

/* mobile body-type scale — placed last so it wins source-order over the base rules above */
@media (max-width: 900px) {
  .rv-rich, .rv-summary p, .rv-sub p, .rv-sub div { font-size: 0.9375rem; }
  .rv-summary__lead { font-size: 1.125rem; }
  .rv-box__h { font-size: 1.1875rem; }
}

/* Phone portrait only — collapse both column systems to one column. ≤480px isolates
   phone portrait: landscape phones (≥667px) and tablet portrait (≥768px) keep 2 cols. */
@media (max-width: 480px) {
  .rv-rich--cols, .rv-flow--cols { column-count: 1 !important; }
}

/* PERF (B3) — MOBILE ONLY, NEEDS ON-DEVICE QA: skip layout + paint for offscreen sections
   (Safari 18+ / progressive; older engines ignore the block). contain-intrinsic-size keeps a
   ~viewport-height placeholder so the scrollbar/ruler geometry stays sane; `auto` remembers the
   real rendered size after first visit. QA checklist: (1) nav jumps + jump-veil settle land on
   the right section, (2) scrollspy dot tracks correctly, (3) resi-mount figure/table bundles
   draw at the correct WIDTH when their section first scrolls in (they self-mount at boot while
   the subtree is size-contained). If one bundle misbehaves, exempt its section:
   .rv-cms-section:has(.resi-mount) { content-visibility: visible; } */
@media (max-width: 900px) {
  @supports (content-visibility: auto) {
    .rv-cms-section { content-visibility: auto; contain-intrinsic-size: auto 100svh; }
    /* Nav jump in flight (rv-prejump, set by preRealizeLayout in report-experience.js): lift
       containment so jump targets compute against REAL section heights — the 100svh placeholder
       under-measures tall chapters, so far jumps landed short (§5 tapped → mid-§2/3). The class
       drops once the jump settles; `auto` sizing has then remembered the real heights, so
       accuracy persists and the containment perf win returns for normal scrolling. */
    .rv-prejump .rv-cms-section { content-visibility: visible; }
  }
}

/* ============================================================================
   "YOU ARE HERE" RULER — thin fixed left scale (tick per section + subchapter),
   track translates 1:1 with scroll; a slide-rule cursor window + triangle marks
   the viewport centre. JS: .rv-ruler init after the scrollspy.
   ============================================================================ */
.rv-ruler { position: fixed; left: 0; top: 0; width: 88px; height: 100vh; height: 100svh; z-index: 30; overflow: hidden;
  pointer-events: auto; cursor: grab; touch-action: none; transition: opacity .3s ease; }   /* clickable + draggable to scrub */
.rv-ruler:active { cursor: grabbing; }
.rv-ruler.is-hidden { opacity: 0; pointer-events: none; }                  /* faded out + inert while a full-screen hero is in view */
.rv-ruler.is-precover { opacity: 0; pointer-events: none; }                /* hidden over the cover; fades in (.3s) when Acknowledgements reaches the top */
.rv-ruler__track { position: absolute; left: 16px; top: 0; }               /* FIXED scale (left pad off the screen edge) */
.rv-ruler__mark { position: absolute; left: 0; height: 2px; border-radius: 1px; }
/* length = HIERARCHY rank; colour = TYPE. Positions are set in JS (the doc spacing pattern, unchanged). */
/* Structural marks use FIXED colours chosen to clear 3:1 contrast on BOTH grounds — the light paper
   (#e2dedc) and the dark navy / hero images. mix-blend-mode:difference was tried and is a no-op here:
   the ruler is position:fixed (its own stacking context), so a child's blend never reaches the page
   painted behind the fixed strip — the marks just stayed white everywhere. Teal (report/section) and
   rose (chapter) sit in the two open slots of the wheel, clear of the type colours below. */
.rv-ruler__mark--report  { width: 54px; background: var(--ruler-report); }    /* report: longest */
.rv-ruler__mark--section { width: 42px; background: var(--ruler-section); }   /* section: 2nd */
.rv-ruler__mark--chapter { width: 30px; background: var(--ruler-chapter); }   /* chapter / subsection: 3rd */
.rv-ruler__mark--item    { width: 18px; background: var(--ruler-item); }      /* display-items: shortest, shared length */
.rv-ruler__mark--figure  { background: var(--ruler-figure); }   /* TYPE colours (tokens grouped in :root) */
.rv-ruler__mark--table   { background: var(--ruler-table); }
.rv-ruler__mark--box     { background: var(--ruler-box); }
.rv-ruler__mark--photo   { background: var(--ruler-photo); }
/* "you are here" cursor: a single tomato dot (matches the footnote accent) that slides down the scale */
/* fixed x just to the RIGHT of the report line (track 16 + report 54 = 70 → dot at 72); slides only on Y */
.rv-ruler__cursor { position: absolute; left: 72px; top: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--ruler-cursor); z-index: 31; pointer-events: none; will-change: transform; }
/* (the old .rv-ruler--on-dark flip is gone — every mark now uses a fixed colour that reads on both grounds) */
/* type colours + the tomato dot read on dark too, so they don't flip */
@media (max-width: 900px), (pointer: coarse) { .rv-ruler, .rv-ruler__cursor { display: none; } }   /* off on mobile + ALL touch incl. iPad — desktop-only for now (N9); a left strip crowds narrow/touch content */

/* ===== Footnote markers + the reusable pillbox (footnotes now; references + acronyms reuse it) ===== */
/* [^n] reference -> the digit in PAPER inside a solid muted-tomato disc, INLINE (baseline, not
   superscript; a rounded pill when the note number is 2 digits) */
.rv-fn { white-space: nowrap; }
.rv-fn__ref {
  display: inline-flex; align-items: center; gap: .1em; box-sizing: border-box;
  padding: 0; margin: 0 .1em; border: 0; background: transparent;
  font: 700 .82em/1 var(--sans); color: var(--ink); cursor: pointer;
  vertical-align: middle;   /* INLINE, centred on the text — not superscript */
  transition: opacity .12s ease;
}
.rv-fn__ref:hover { opacity: .62; }
.rv-fn__ref:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 3px; }
.rv-cms-section--dark .rv-fn__ref { color: #fff; }   /* black reads black; invert on dark heroes */
.rv-fn__ast { display: inline-flex; }
.rv-fn__ast svg { width: .72em; height: .72em; display: block; }
.rv-fn__n { font-weight: 700; }
/* glossary marker (acronyms now, references next): distinguished by WEIGHT + colour, NO underline
   (per standing rule) — bold #333 on light, white on dark (red didn't read on navy). */
.rv-gloss { font-weight: 700; color: #333; cursor: pointer; transition: opacity .12s ease; }
.rv-gloss:hover, .rv-gloss:focus-visible { opacity: .6; outline: none; }
.rv-cms-section--dark .rv-gloss { color: #fff; }
/* citation marker: the inline author–year, linked to its reference. Muted accent, NO underline;
   surfaces the reference(s) in the shared pillbox. */
/* prose cross-reference: "(see Box 7.1)" — the item token jumps to that item.
   Reads exactly like a citation/acronym: bold ink, fade on hover, never underlined. */
.rv-xref {
  font: inherit; background: none; border: 0; padding: 0; margin: 0;
  color: var(--ink); font-weight: 700; cursor: pointer; transition: opacity .12s ease;
}
.rv-xref:hover, .rv-xref:focus-visible { opacity: .6; outline: none; }
.rv-cms-section--dark .rv-xref { color: #fff; }

/* landing pulse — a marker jumped-to from the nav panel grows then settles so the eye catches it */
.rv-arrive { animation: rv-arrive-pulse .72s cubic-bezier(.34,1.56,.64,1) both; transform-origin: center; }
.rv-cite.rv-arrive, .rv-gloss.rv-arrive { display: inline-block; }   /* enable transform on otherwise-inline tokens */
@keyframes rv-arrive-pulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.6); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) { .rv-arrive { animation: none; } }

.rv-cite { color: var(--ink); font-weight: 700; cursor: pointer; transition: opacity .12s ease; }
.rv-cite:hover, .rv-cite:focus-visible { opacity: .6; outline: none; }
.rv-cms-section--dark .rv-cite { color: #fff; }
/* reference entry inside the pill (one per resolved work; several for a compound citation) */
.rv-cite__entry + .rv-cite__entry { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.rv-cite__key { font-weight: 700; font-size: 0.7rem; line-height: 1.2; margin-bottom: 1px; }   /* −30% */
.rv-cite__full { font-size: 0.6rem; line-height: 1.2; opacity: .85; overflow-wrap: anywhere; word-break: break-word; }   /* −40%, wraps within the entry */
.rv-cite__full p { margin: 0 0 .3em; }
.rv-cite__full p:last-child { margin: 0; }
.rv-cite__full a { color: var(--ink); font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.rv-cite__full a:hover { opacity: .7; }
/* "open source" link — reads "Citation ↗", follows external-ref-link through the leave-site notice; bold, no underline */
.rv-cite__full .rv-cite__open,
.rv-cite__open {
  display: inline-flex; align-items: center; gap: .25em;
  margin-top: .4em;
  color: var(--ink); font-weight: 700; line-height: 1;
  text-decoration: none; white-space: nowrap;
  transition: opacity .15s ease;
}
.rv-cite__full .rv-cite__open:hover,
.rv-cite__open:hover { opacity: .6; }
.rv-cite__open-arrow { font-size: 1.05em; }

/* The acronym pill was removed 2026-07-08 — acronyms open the Abbreviations panel on tap/click. */

/* External-link guard modal (A10/A11): shown before a content link leaves resi-initiative. */
.rv-extlink { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(18, 34, 30, .42); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: rv-extlink-in .12s ease; }
.rv-extlink__card { width: min(440px, 100%); background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
  padding: 22px 22px 18px; box-shadow: 0 24px 60px rgba(0, 0, 0, .28); font-family: var(--sans); }
.rv-extlink__t { font: 800 1.0625rem/1.2 var(--sans); color: var(--ink); margin-bottom: 6px; }
.rv-extlink__msg { font-size: .8rem; color: var(--stone); margin-bottom: 8px; }
.rv-extlink__u { font-size: .78rem; color: var(--ink); word-break: break-all; background: rgba(0, 0, 0, .045);
  border-radius: 8px; padding: 8px 10px; margin-bottom: 16px; max-height: 4.6em; overflow: auto; }
.rv-extlink__btns { display: flex; justify-content: flex-end; gap: 10px; }
.rv-extlink__btns button { font: 700 .82rem var(--sans); border-radius: 999px; padding: 8px 18px; cursor: pointer; border: 1px solid var(--line); }
.rv-extlink__cancel { background: transparent; color: var(--ink); }
.rv-extlink__cancel:hover { background: rgba(0, 0, 0, .05); }
.rv-extlink__open { background: #141414; color: #fff; border-color: #141414; }
.rv-extlink__open:hover { opacity: .88; }
@keyframes rv-extlink-in { from { opacity: 0; } to { opacity: 1; } }

/* ---- first-run guided tour + replayable help --------------------------- */
.rv-control-stick__btn--help svg { width: 18px; height: 18px; }
/* keep the control stick (a tour target) on screen while the tour runs (defeat idle auto-hide) */
.rv-tour-on .rv-control-stick { transform: translateY(-50%) !important; }
/* hold the report navigator open while the tour steps through its buttons */
.rv-tour-rail .rv-rail { transform: none !important; }

.rv-tour { position: fixed; inset: 0; z-index: 2147483000; }
.rv-tour[aria-hidden="true"] { display: none; }
.rv-tour__scrim { position: absolute; inset: 0; cursor: pointer; }
.rv-tour__spot {
  position: fixed; left: 0; top: 0; width: 0; height: 0; border-radius: 12px; opacity: 0;
  box-shadow: 0 0 0 9999px rgba(18, 34, 30, .58); pointer-events: none;
  transition: left .3s cubic-bezier(.4, 0, .2, 1), top .3s cubic-bezier(.4, 0, .2, 1),
              width .3s cubic-bezier(.4, 0, .2, 1), height .3s cubic-bezier(.4, 0, .2, 1), opacity .2s ease;
}
.rv-tour__pop {
  position: fixed; width: 300px; max-width: calc(100vw - 28px); box-sizing: border-box;
  background: #95af96; color: #000; border: 1px solid rgba(0, 0, 0, .12);
  border-radius: 14px; padding: 18px 20px 16px; box-shadow: 0 18px 54px rgba(18, 34, 30, .34);
  animation: rv-extlink-in .22s ease both;
}
.rv-tour__pop--center { left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); width: 340px; }
.rv-tour__step { font-family: "Plus Jakarta Sans", var(--sans); font-weight: 700; font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--paper); margin-bottom: 18px; font-variant-numeric: tabular-nums; }
.rv-tour__title { font-family: "Gloock", var(--serif); font-size: 1.5rem; line-height: .58; margin: 0 0 12px; color: #000; }
.rv-tour__body { font-family: var(--sans); font-weight: 400; font-size: .875rem; line-height: 1.1; color: #000; margin: 0 0 16px; }
.rv-tour__action { display: block; width: 100%; margin: 0 0 14px; padding: 11px 16px; border: 0; border-radius: 999px; background: #000; color: var(--paper); font: 700 .8125rem var(--sans); cursor: pointer; transition: transform .09s ease, opacity .15s ease; }
.rv-tour__action:hover { opacity: .85; }
.rv-tour__action:active { transform: translateY(1px) scale(.985); }
.rv-tour__action.is-on { background: #19276f; }   /* RESI navy = motion active */
.rv-tour__nav { display: flex; align-items: center; gap: 8px; }
.rv-tour__spacer { flex: 1 1 auto; }
.rv-tour__nav button { font: 600 .8125rem var(--sans); border: 0; border-radius: 999px; padding: 8px 18px; cursor: pointer; background: #000; color: var(--paper); transition: transform .09s ease, opacity .15s ease; }
.rv-tour__nav button:hover { opacity: .82; }
.rv-tour__nav button:active { transform: translateY(1px) scale(.985); }
.rv-tour.is-scrolling .rv-tour__spot { transition: opacity .2s ease; }   /* snap position while a scroll settles so the hole tracks the target */
@media (prefers-reduced-motion: reduce) { .rv-tour__spot { transition: opacity .12s ease; } }