/* ============================================================================
   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).
   ============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@300;400;500;600&family=DotGothic16&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

: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:  290px;
  --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 */
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; scroll-snap-type: y proximity; scroll-padding-top: 8px; }   /* clip the off-canvas nav (no h-scroll); 'clip' keeps the sticky cover working. proximity snap = soft-align to section starts; long prose still scrolls freely (mandatory would trap long sections). */
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 -------------------------------------------- */
.rv-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--navy), var(--yellow));
  z-index: 60; transition: width .1s linear;
}

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

/* ---- sidebar — floating Apple-TV module, fixed over the full-screen video - */
.rv-rail {
  position: fixed; top: 20px; left: 20px; z-index: 40;
  width: var(--rail-w); height: calc(100vh - 40px); overflow-y: auto;
  padding: 24px 20px;
  background: rgba(246, 244, 240, .7);
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  backdrop-filter: blur(22px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 24px;
  box-shadow: 0 14px 50px rgba(18, 34, 30, .18), 0 2px 8px rgba(18, 34, 30, .08);
  font-family: var(--sans);
  transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}
.rv-rail.is-hidden { transform: translateX(-118%); }   /* slide off to the left */
.rv-rail__brand { font: 700 0.75rem/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--navy); margin-bottom: 8px; }
.rv-rail__title { font-family: var(--sans); font-size: 1.1875rem; line-height: 1.18; margin: 0 0 3px; color: var(--ink); font-weight: 700; letter-spacing: -.01em; }
.rv-rail__sub { font: 400 0.875rem/1.4 var(--sans); color: var(--steel); margin-bottom: 20px; }

.rv-modes { display: flex; gap: 0; background: rgba(25,39,111,.08); border-radius: 999px; padding: 3px; margin-bottom: 12px; }
.rv-modes button {
  flex: 1; border: 0; background: transparent; color: var(--navy); cursor: pointer;
  font: 700 0.8125rem/1 var(--sans); padding: 9px 6px; border-radius: 999px; transition: .15s;
}
.rv-modes button[aria-pressed="true"] { background: var(--navy); color: #fff; }
.rv-modes__hint { font-size: 0.71875rem; color: var(--steel); margin: 0 2px 24px; line-height: 1.45; }

.rv-nav { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.rv-nav li a {
  display: flex; gap: 11px; align-items: baseline; padding: 10px 10px; border-radius: 8px;
  color: var(--charcoal); font-size: 0.875rem; line-height: 1.32; border-left: 2px solid transparent;
}
.rv-nav li a:hover { background: rgba(25,39,111,.06); text-decoration: none; }
.rv-nav li a.is-active { background: var(--navy); color: #fff; border-left-color: var(--yellow); }
.rv-nav li a.is-active .rv-nav__num, .rv-nav li a.is-active .rv-nav__rt { color: var(--yellow); }
.rv-nav__num { color: var(--navy); font: 700 0.875rem/1 var(--sans); font-variant-numeric: tabular-nums; min-width: 16px; }
.rv-nav__rt { margin-left: auto; font-size: 0.6875rem; color: var(--steel); white-space: nowrap; }
.rv-nav__group { font: 600 0.6875rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--steel); padding: 16px 10px 6px; }

.rv-rail__pdf {
  display: flex; align-items: center; gap: 9px; margin-top: 26px; padding: 12px 16px;
  background: var(--navy); border-radius: 999px; color: #fff; font: 700 0.8125rem/1 var(--sans);
}
.rv-rail__pdf:hover { background: var(--navy-ink); text-decoration: none; }

/* ---- 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: var(--paper); margin-bottom: 20px; }
.rv-cover__title { font-family: var(--sans); font-size: clamp(2.625rem, 7vw, 6rem); line-height: 0.9; margin: 0 0 14px; font-weight: 800; letter-spacing: -.02em; color: #ece7da; max-width: 16ch; }
.rv-cover__sub { font-family: var(--serif); font-size: clamp(1.1875rem, 2.4vw, 1.875rem); color: #ece7da; margin: 0 0 28px; max-width: 30ch; font-weight: 300; }
.rv-cover__meta { font: 0.875rem/1.5 var(--sans); color: #ece7da; }
.rv-cover__credit { position: absolute; right: 16px; bottom: 12px; font: 0.6875rem var(--sans); color: rgba(255,255,255,.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 { pointer-events: auto; }
/* 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). */
.rv-cover__meta .rv-cover__credit {
  position: relative; right: auto; bottom: auto; margin-top: 16px;
  display: inline-block; cursor: default;
}
.rv-cover__meta .rv-cover__credit span { color: rgba(236, 231, 218, .5); transition: color .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 { color: #ece7da; }
.rv-cover__meta .rv-cover__credit:hover::after { transform: scaleX(1); }
.rv-cover__cue { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); color: rgba(255,255,255,.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: var(--measure); }
.rv-figure__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 { color: var(--navy); font-weight: 700; }
/* header above the visual (figures with no baked-in title, e.g. the map) */
.rv-figure__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 { 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: var(--measure); box-shadow: var(--shadow);
}
.rv-box__tag { font: 700 0.6875rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--red); 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 — caption + resi-mount (report-tables bundle fills it; transparent) */
.rv-table { margin: 44px 0; max-width: var(--measure); }
.rv-table--wide { max-width: none; }
.rv-table__cap { font: 0.84375rem/1.5 var(--sans); color: var(--steel); margin: 0 0 12px; border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.rv-table__cap b { color: var(--navy); font-weight: 700; }

/* inline photo */
.rv-photo { margin: 44px 0; }
.rv-photo img, .rv-photo .rv-photo__ph { width: 100%; display: block; border-radius: 4px; }
.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; 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); padding: 20px 16px; }
  .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; }
}

@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 */
.rv-cover-stage {
  position: sticky; top: 0; height: 100vh; overflow: hidden; pointer-events: none;   /* decorative; taps pass to the nav/dock */
  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) */
}
.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; }
.rv-cover-overlay { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.04) 0%, rgba(0,0,0,.09) 55%, rgba(0,0,0,.14) 100%); }
.rv-cover-titles { position: relative; z-index: 2; pointer-events: none; color: #fff; opacity: 0; will-change: opacity, transform; text-shadow: 0 2px 18px rgba(0,0,0,.3); }
.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; }
.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); }

.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; }
.rv-kicker--chapter { color: inherit; opacity: .7; }

.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; }
.rv-cover__editby { color: #e2dedc; 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: none; }
/* EDITORS (cover, under "Edited by"): name font as-is, NO border; flush text → on hover slide right + reveal a dot-matrix ↗ */
.rv-cover__editors .rv-person { position: relative; margin-left: -11px; padding-right: 2.3em; }  /* gap: name ↔ chevrons */
.rv-cover__editors .rv-person::after {
  content: "\203A\203A"; position: absolute; right: 0.55em; top: 0; bottom: 0;  /* span full height → flex-center */
  display: flex; align-items: center; line-height: 1;                          /* true vertical centering */
  font-family: "DotGothic16", var(--sans); letter-spacing: .15em; opacity: 0; transition: opacity .18s ease;  /* kern: gap between the two chevrons */
}
.rv-cover__editors .rv-person:hover, .rv-cover__editors .rv-person:focus-visible { transform: translateX(11px); }
.rv-cover__editors .rv-person:hover::after, .rv-cover__editors .rv-person:focus-visible::after { opacity: 1; }
/* AUTHORS (in-section): border appears on hover + slide; reverse to dark text on Paper sections */
.rv-cms-section .rv-person:hover, .rv-cms-section .rv-person:focus-visible { transform: translateX(6px); border-color: rgba(236, 231, 218, .5); }
.rv-cms-section:not(.rv-cms-section--filled) .rv-person { color: #181818; }
.rv-cms-section:not(.rv-cms-section--filled) .rv-person:hover, .rv-cms-section:not(.rv-cms-section--filled) .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: #ece7da; 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: var(--measure); color: inherit; }
.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 { break-after: avoid; }
.rv-mk--callout { border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; padding: 20px 0; margin: 30px 0; font-family: var(--serif); font-size: 1.3em; 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 { display: grid; grid-template-columns: 3.4em 1fr; gap: 4px 14px; margin: 0 0 18px; max-width: var(--measure); }
.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: #383838; --rv-g2: #565656; --rv-g3: #6e6e6e;
  --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(360px, 1fr)); }
/* table tile: hold a clone of the live rendered table, scroll if it overflows */
.rv-ov__vis--table { aspect-ratio: auto; max-height: 300px; overflow: auto; place-items: stretch; padding: 8px; background: var(--card); }
.rv-ov__vis--table .rtbl { font-size: .66rem; width: 100%; }
.rv-ov__vis--table .rtbl__source, .rv-ov__vis--table .rtbl__note { font-size: .6rem; }
/* 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: var(--measure); width: -moz-fit-content; width: fit-content; }
/* 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: 4px; }
.rv-photo__overlay {
  position: absolute; left: 14px; bottom: 14px; max-width: 72%;
  background: rgba(226, 222, 218, .82);   /* --paper #e2dedc at .82 — matches the card fill */
  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; }
@media (hover: none) { .rv-photo__overlay { opacity: 1; } }   /* touch has no hover → keep it visible */
.rv-photo__cap { display: block; font-size: 0.8125rem; line-height: 1.4; }
.rv-photo__credit { display: block; font-size: 0.6875rem; opacity: .72; margin-top: 3px; }
/* 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; }
/* 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; }
/* 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: var(--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 { margin: 14px 0 6px; }
.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;
  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 */
.rv-control-stick__btn { display: grid; place-items: center; width: 42px; height: 42px; 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; }

/* 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) {
  .rv-control-stick { right: 10px; }              /* dock stays on the right, sharing the screen with the nav */
  .rv-control-stick__btn { width: 38px; height: 38px; }
  .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; overflow-y: auto;
  border-radius: 18px; padding: 32px 34px; box-shadow: 0 24px 80px rgba(0,0,0,.34); font-family: var(--sans); }
.rv-info__logos { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.rv-info__logos img { height: 36px; width: auto; }
.rv-info__logos--funders img { height: 42px; }
.rv-info__label { font: 700 0.6875rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--steel); margin: 0 0 9px; }
.rv-info__meta { display: grid; grid-template-columns: auto 1fr; gap: 5px 18px; margin: 20px 0; font-size: 0.875rem; }
.rv-info__meta dt { font-weight: 700; color: var(--ink); }
.rv-info__meta dd { margin: 0; color: var(--stone); }
.rv-info__block { margin: 18px 0 0; font-size: 0.84375rem; line-height: 1.55; color: var(--stone); }
.rv-info__block p { margin: 0; }
.rv-info__block a { color: var(--navy); }

@media (max-width: 900px) {
  .rv-info__card { padding: 22px 20px; }
  .rv-info__logos img { height: 26px; }
  .rv-info__logos--funders img { height: 30px; }
  .rv-info__meta, .rv-info__block { 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; }
}