/* Evidence page (evidence.html ONLY — loaded after styles.css).
   Scroll-based data story: reusable section pattern + scroll-reveal + citation
   system, and Section 1 (Diagnostic Delay). CSS/SVG/vanilla-JS only — no chart
   libraries, no WebGL, no backdrop-filter, no flex gap, no `inset` shorthand —
   consistent on iOS/macOS Safari, Android Chrome and the WeChat webview.

   MOTION MODEL (accessibility-first): every hidden/offset state lives under
   html.ev-anim, which evidence.js adds ONLY when IntersectionObserver exists AND
   prefers-reduced-motion is NOT set. So by default (no JS, old engines, reduced
   motion) everything below renders fully visible and static — the animation is a
   pure progressive enhancement, and there is no layout shift either way because
   reveals use opacity/transform and the bars animate inside fixed-height tracks. */

/* Hero subtitle — the homepage hero-subtitle typeface (Lora italic 500). */
.ev-hero-sub {
  font-family: var(--font-head);
  font-style: italic;
  font-weight: 500;
}

/* ---------- HERO PHOTO BAND (mirrors the Patient Stories hero treatment) ----
   Layered bottom -> top: ::after (z-1) the constellation-sunrise photo on its
   OWN layer (cover, focal point right so the women + light stay in frame);
   ::before (z0) the LEFT dark scrim protecting the copy; content (z2).
   background-color is the image-missing fallback. Copy flips LIGHT (the base
   banner's deep-purple text cannot hold AA over a photo scrim). Page-scoped
   here in evidence.css — the shared .page-banner is untouched. The webp matches
   the site's background pattern; evidence-hero-2560.jpg ships alongside as the
   swap-in fallback, exactly like the other hero pairs. */
.page-banner--evidence {
  position: relative;
  isolation: isolate;
  background: var(--purple-deep);                  /* image-missing fallback */
  padding-block: clamp(3.5rem, 7.5vw, 5.75rem);    /* banner presence — same scale as the stories hero */
}
.page-banner--evidence::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;   /* longhand, not `inset` (Safari <14.1) */
  z-index: -1;
  background-image: url("../img/evidence-hero-2560.webp");
  background-size: cover;
  background-position: 72% center;                 /* women + sunrise on the right stay in frame */
  background-repeat: no-repeat;
}
.page-banner--evidence::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  z-index: 0;
  background: linear-gradient(90deg,
    rgba(28, 18, 56, 0.86) 0%,
    rgba(28, 18, 56, 0.72) 30%,
    rgba(28, 18, 56, 0.46) 54%,
    transparent 70%);   /* fade extended slightly vs the stories hero: on very wide bands the subtitle's tail measured 4.08:1 under the thinner 52/68 stops — this holds it above the 4.5 small-text bar while the right third stays fully clear */
}
.page-banner--evidence > .container { position: relative; z-index: 2; }
.page-banner--evidence .eyebrow {
  color: #ECD6AE;                                  /* soft champagne — a light tint of brand gold */
  text-shadow: 0 1px 2px rgba(20, 14, 40, 0.5);
}
.page-banner--evidence h1 {
  color: var(--white);
  text-shadow: 0 1px 2px rgba(20, 14, 40, 0.5), 0 2px 12px rgba(20, 14, 40, 0.22);
}
.page-banner--evidence .page-banner__subtitle {
  color: #EFEAF6;
  text-shadow: 0 1px 2px rgba(20, 14, 40, 0.5);
  max-width: 40ch;                                 /* keeps the line inside the scrim-protected left half */
}
/* Phones: the copy spans nearly the full width — the scrim keeps a floor of
   protection across the band, and the focal point eases left so the women stay
   in the narrow crop. */
@media (max-width: 639.98px) {
  .page-banner--evidence::before {
    background: linear-gradient(90deg,
      rgba(28, 18, 56, 0.86) 0%,
      rgba(28, 18, 56, 0.74) 55%,
      rgba(28, 18, 56, 0.56) 100%);
  }
  .page-banner--evidence::after { background-position: 68% center; }
}
/* Tablet: the container loses side gutters, so extend the fade further right. */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .page-banner--evidence::before {
    background: linear-gradient(90deg,
      rgba(28, 18, 56, 0.86) 0%,
      rgba(28, 18, 56, 0.76) 38%,
      rgba(28, 18, 56, 0.52) 62%,
      transparent 86%);
  }
}

/* ---------- EXTENDED BRAND ACCENT PALETTE (reusable across sections 1-5) ----
   The homepage gateway accents as a page-scoped data palette (evidence.css only
   loads on this page, so these stay out of the global tokens deliberately —
   promote to tokens.css later if other pages adopt them). Each accent ships as
   a deep/base pair so every data element uses the same deep->base gradient
   grammar. Apply via the .ev-accent--{rose|teal|purple|gold} modifiers below —
   future sections put them on bars, dots, rings, or any element whose fill
   should join the system. ENDOMETRIOSIS keeps its own crimson->gold treatment
   everywhere — it is always the standout, never part of the cycle. */
:root {
  --ev-rose:        #C77B6B;   /* rose-clay  */
  --ev-rose-deep:   #A65A4B;
  --ev-teal:        #5E8B7E;   /* sage-teal  */
  --ev-teal-deep:   #40685D;
  --ev-purple:      #6B4FA0;   /* brand purple pair (matches --purple-bright/--purple) */
  --ev-purple-deep: #3A2A66;
  --ev-gold:        #BB863F;   /* brand gold pair */
  --ev-gold-deep:   #8A6222;
  --ev-crimson:     #A61E3C;   /* endo-only accents (never cycled) */
  --ev-crimson-ink: #9C1B37;
}
/* One reusable gradient per accent — anything with .ev-accent--x and a painted
   fill (here: the bars; later: whatever sections 2-5 draw). */
.ev-accent--rose   { --ev-fill: linear-gradient(90deg, var(--ev-rose-deep) 0%, var(--ev-rose) 100%); }
.ev-accent--teal   { --ev-fill: linear-gradient(90deg, var(--ev-teal-deep) 0%, var(--ev-teal) 100%); }
.ev-accent--purple { --ev-fill: linear-gradient(90deg, var(--ev-purple-deep) 0%, var(--ev-purple) 100%); }
.ev-accent--gold   { --ev-fill: linear-gradient(90deg, var(--ev-gold-deep) 0%, var(--ev-gold) 100%); }

/* ---------- URGENCY / EMPHASIS SYSTEM (reusable; future chapters inherit) ----
   The page's urgency comes from CONTRAST, not volume: comparison data stays in
   the calm accent palette and quiet notes stay quiet, while (a) the killer
   figures render at DISPLAY size, (b) everything endometriosis takes the urgent
   crimson against the soothing context, (c) short .ev-transit statements pace
   the argument between chapters, and (d) the closing lines are full statement
   BANDS. Patterns: .ev-transit (+ <strong> = crimson), .ev-value--display (a
   loud figure outside an endo band), .ev-hot (crimson emphasis inside body
   text), .ev-punch (statement band). */
.ev-hot { color: var(--ev-crimson-ink); }          /* ~8:1 on white = AA at any size */
.ev-value--display {
  font-family: var(--font-head);
  font-size: clamp(1.6rem, 4vw, 2.6rem) !important;   /* display scale wherever applied (mobile rules below would otherwise re-shrink it) */
  font-weight: 700;
  color: var(--ev-crimson-ink);
  line-height: 1.05;
}

/* NARRATOR VOICE — the connective statements between evidence chapters.
   STRUCTURAL IDENTITY (one recognizable treatment, reused by every chapter):
   each statement sits inside the shared .container, LEFT-ALIGNED to the same
   spine as the hero and chapter content (never a centered caption island), and
   opens with a short accent rule — the narrator's "mark".
   THREE REGISTERS, escalating down the page (evidence -> reflect -> evidence):
     .ev-transit--overture  the page THESIS under the hero: largest serif, gold
                            rule, white ground, a hairline seam below handing
                            over to the first chapter;
     .ev-transit (base)     quiet INTERLUDE between chapters: faint lavender
                            band between hairlines — a tonal breath, deliberately
                            NOT competing with the dark closing punches;
     .ev-transit--forte     later interludes turn the pressure up: crimson rule,
                            larger line, stronger presence — still a light band,
                            still quieter than the punches. Future chapters keep
                            escalating registers; the dark bands stay the loudest. */
.ev-transit {
  padding: clamp(2.5rem, 6vw, 4.25rem) 0;
  background: var(--lavender-light);                 /* the interlude breath */
  border-top: 1px solid rgba(58, 42, 102, 0.10);
  border-bottom: 1px solid rgba(58, 42, 102, 0.10);
}
.ev-transit__line {
  margin: 0;                                         /* left-aligned on the spine */
  /* No measure cap: a short statement sits as ONE punchy beat on desktop and
     wraps only when the viewport genuinely forces it (the container is the
     natural limit). The overture caps its own measure below — its beats are
     deliberately stacked. */
  max-width: none;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.3rem, 3.1vw, 1.805rem);   /* 2026-08: max -5% (was 1.9rem/30.4px -> 28.88px); mobile minimum unchanged */
  line-height: 1.35;
  color: var(--purple-deep);                         /* ~12.6:1 on lavender-light */
}
/* OVERTURE BEATS — each clause of the thesis lands on its own line, with air
   between the blows. (Spans, so no-CSS still reads as one sentence.) */
.ev-transit__beat { display: block; }
.ev-transit__beat + .ev-transit__beat { margin-top: 0.55em; }
.ev-transit__line::before {                          /* the narrator's mark */
  content: "";
  display: block;
  width: 2.75rem;
  height: 2px;
  border-radius: 2px;
  margin-bottom: 1rem;
  background: var(--gold-deep);
}
.ev-transit__line strong { color: var(--ev-crimson-ink); font-weight: 700; }   /* ~7.6:1 on lavender-light = AA */

/* Register 1 — the OVERTURE (page thesis under the hero). Now a member of the
   SAME statement family as the interludes: the identical lavender band between
   hairlines, left on the spine — its "first, strongest" rank comes from one
   size step above forte, roomier padding, and the full-gold rule, not from a
   different treatment. (Its old transparent, oversized outlier styling is
   retired.) */
.ev-transit--overture {
  padding: clamp(2.75rem, 6.5vw, 4.5rem) 0;          /* a touch more air than a mid-page interlude */
}
.ev-transit--overture .ev-transit__line {
  max-width: none;                                   /* 2026-08 (client direction): the old 34ch cap forced "Seven to ten years — average diagnostic delay." onto two lines at desktop; the container is the natural guard, the beat now sits on ONE line from ~760px up and wraps normally on phones */
  font-size: clamp(1.35rem, 2.9vw, 1.85rem);         /* SUPPORTING beats (re-weighted 2026-08): still emphatic, clearly subordinate to the lead figure */
  line-height: 1.35;
}
.ev-transit--overture .ev-transit__line::before { background: var(--gold); width: 3.5rem; }
/* THE LEAD BEAT (re-weighted 2026-08): "190 million women." at display scale —
   the largest element of the opening, so the SCALE hits before anything else.
   Crimson emphasis inherited from the shared strong rule (~7.6:1 on the
   lavender band — even stronger at display size); citation sup rides along. */
.ev-transit--overture .ev-transit__beat--lead {
  font-size: clamp(2rem, 5vw, 2.3125rem);   /* 2026-08 second reduction (client direction): max 37px = exactly 1.25x the 29.6px supporting beats at desktop (was 3.2rem/51.2px = 1.73x); the 2rem mobile floor is unchanged - 32px at 375px still clearly the hero statement */
  line-height: 1.08;
  letter-spacing: -0.015em;
  font-weight: 700;
}
.ev-transit--overture .ev-transit__beat--lead + .ev-transit__beat { margin-top: 0.9em; }   /* extra air under the big figure before the supporting facts */

/* Register 3 — FORTE (later interludes; pressure builds). */
.ev-transit--forte .ev-transit__line { font-size: clamp(1.45rem, 3.5vw, 2.09rem); }   /* 2026-08: max -5% (was 2.2rem/35.2px -> 33.44px); mobile minimum unchanged */
.ev-transit--forte .ev-transit__line::before { background: var(--ev-crimson); }

/* ---------- Reusable section pattern ---------- */
/* ---- Per-chapter backgrounds (2026-08, client direction): five soft tints
   from the BRAND palette only (tokens.css), alternating white / --lavender so
   adjacent chapters read as distinct bands of one family - never five hues,
   never the rejected #9E7AC8. Chapter 5 alone takes the warm --cream: a
   deliberate register shift for the psychological-impact chapter. Scoped by
   the chapters' own ids - the hero, transit, sources and CTA bands keep their
   existing treatments. */
#ev-diagnostic-delay { background: var(--white); }
#ev-funding-burden { background: var(--lavender); }
#ev-quality-of-life { background: var(--white); }
#ev-work-productivity { background: var(--lavender); }
#ev-psychological-impact { background: var(--white); }   /* 2026-08: matched to the View Sources section's effective background (that section is transparent over the white page) - was --cream */

.ev-section__heading {
  margin: 0 0 0.6rem;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: 1.2;
  color: var(--purple-deep);
}
.ev-section__intro {
  margin: 0 0 clamp(1.75rem, 4vw, 2.5rem);
  max-width: 62ch;
  font-size: var(--fs-lede);
  color: var(--text-warm);
}
/* Loud intro variant — the chapter's headline claim steps up a size and its
   figures take the urgent crimson (.ev-hot). */
.ev-section__intro--loud {
  font-family: var(--font-head);
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);
  line-height: 1.45;
  color: var(--text);
}
.ev-section__intro--loud .ev-hot { font-weight: 700; }

/* ---------- Scroll-reveal utility (any .ev-reveal block) ----------
   ONE coherent pace ladder for the whole page (consistency pass):
   data blocks 0.7s ease-out / 16px rise -> statements 0.9s / 22px (below) ->
   bars 1.5s (endo 2.4s) -> count-ups 1.2s from 900ms into a chart's reveal.
   Everything triggers on scroll-into-view, once, via the same observer. */
.ev-anim .ev-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.95s ease-out, transform 0.95s ease-out;   /* 2026-08 pacing: 0.7s -> 0.95s (+36%) */
}
.ev-anim .ev-reveal.is-in {
  opacity: 1;
  transform: none;
}
/* STATEMENTS ARRIVE — the narrator voice (overture + interludes), the chapter
   closing bands and the CTA get a slightly slower, deeper rise than the data
   reveals: the same gentle fade, one register more deliberate, so each
   statement "lands" rather than merely appearing. (Reduced-motion / no-IO:
   these live under .ev-anim like every reveal — static and instant.) */
.ev-anim .ev-transit.ev-reveal,
.ev-anim .ev-punch.ev-reveal,
.ev-anim .ev-cta .ev-reveal {
  transform: translateY(22px);
  transition-duration: 1.2s;   /* 2026-08 pacing: 0.9s -> 1.2s (+33%) */
}
/* The .is-in landing must RE-WIN over the deeper offset above (same 0,3,0
   specificity, and the offset rule is later in the file — without this, the
   statements faded in but stayed parked 22px low instead of rising). */
.ev-anim .ev-transit.ev-reveal.is-in,
.ev-anim .ev-punch.ev-reveal.is-in,
.ev-anim .ev-cta .ev-reveal.is-in {
  transform: none;
}

/* ---------- Inline citation markers (reusable) ---------- */
.ev-ref {
  font-size: 0.62em;
  line-height: 0;                      /* never disturbs the line box */
  vertical-align: super;
  letter-spacing: 0.02em;
}
.ev-ref a {
  color: var(--purple-bright);         /* 6.5:1 on white / 5.6:1 on lavender = AA */
  text-decoration: none;
  font-weight: 600;
  padding: 0.15em 0.12em;              /* a little finger/focus room */
}
.ev-ref a:hover { text-decoration: underline; text-underline-offset: 2px; }
.ev-ref a:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-radius: 3px; }

/* ---------- Section 1: the delay chart ---------- */
.ev-chart {
  background: var(--white);
  border: 1px solid rgba(58, 42, 102, 0.10);
  border-radius: var(--radius);
  box-shadow: 0 8px 26px rgba(46, 33, 80, 0.08);
  padding: clamp(1.25rem, 3.2vw, 2.4rem);   /* roomier — the chart breathes like the source graphic */
}
/* Column headers — SAME grid template as the rows, so each label sits over its
   column (the middle label spans the track+value tracks). Small uppercase
   kickers in the accessible deep gold, per the site's kicker treatment. */
.ev-chart__head {
  display: grid;
  /* DETERMINISTIC side tracks (clamp = viewport-resolved, NEVER content-
     resolved): the header row and the data rows are SEPARATE grids, and the
     old minmax(min, 240px)/minmax(min, 280px) tracks sized themselves to each
     grid's own content — so a short "DISEASE" header could resolve narrower
     than the rows' name column and every label drifted off its column. With
     fixed clamp() tracks both grids resolve identically by construction. */
  grid-template-columns: clamp(185px, 22vw, 240px) 1fr minmax(9ch, auto) clamp(200px, 26vw, 280px);
  grid-template-areas: "disease delay delay cons";
  column-gap: clamp(0.75rem, 1.8vw, 1.4rem);
  padding-bottom: 0.85rem;
  border-bottom: 2px solid rgba(58, 42, 102, 0.14);   /* firmer rule under the header row */
  margin-bottom: 0.25rem;
}
.ev-chart__col {
  font-size: 1.05rem;                   /* prominent header size (0.72 -> 0.85 -> 0.95 -> 1.05rem, client direction), consistent across every chapter's chart; family/weight/tracking unchanged */
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-deep);              /* 5.4:1 on white = AA */
}
.ev-chart__col--disease { grid-area: disease; }
.ev-chart__col--delay { grid-area: delay; }
.ev-chart__col--cons { grid-area: cons; padding-left: clamp(0.75rem, 1.8vw, 1.4rem); }   /* mirrors the consequence cells' hairline inset */
.ev-chart__subnote {
  display: block;
  margin-top: 0.25rem;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  font-size: 0.95rem;                   /* legibility pass 2026-08: axis/scale annotations step up (was 0.78rem) */
  line-height: 1.5;
  color: var(--text-muted);             /* 6:1 on white = AA */
}
/* Per-row micro-label ("Consequences of delay") — mobile-only companion for when
   the columns stack and the header row's third label is hidden. */
.ev-bar__conslabel {
  display: none;
  font-size: 0.78rem;                   /* legibility pass: compact uppercase micro-label steps up (0.72 -> 0.78rem) */
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 0.15rem;
}
/* THREE-COLUMN ROWS (infographic structure): [icon + disease] | [bold bar +
   delay label] | [consequence of delay]. The bar cell is two grid tracks
   (track + value) so the labels align in a clean column; the consequence is its
   own right-hand column behind a hairline, like the source graphic's third
   panel. Generous row padding — premium, not squeezed. */
.ev-bars { list-style: none; margin: 0; padding: 0; }
.ev-bar {
  display: grid;
  grid-template-columns: clamp(185px, 22vw, 240px) 1fr minmax(9ch, auto) clamp(200px, 26vw, 280px);   /* matches .ev-chart__head — see the determinism note there */
  grid-template-areas: "name track value cons";
  align-items: center;
  column-gap: clamp(0.75rem, 1.8vw, 1.4rem);
  padding: clamp(0.75rem, 1.6vw, 1rem) 0;
}
.ev-bar + .ev-bar { border-top: 1px solid rgba(58, 42, 102, 0.08); }

/* Disease column: circular duotone icon + name, one unit. */
.ev-bar__name {
  grid-area: name;
  display: flex;
  align-items: center;
}
.ev-bar__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-right: 0.65rem;               /* margin, not flex gap (Safari <14.1) */
  border-radius: 50%;
  background: var(--lavender);
  border: 1px solid rgba(58, 42, 102, 0.18);
  color: var(--purple);                /* icon strokes — deep purple on lavender */
}
.ev-bar__icon svg { width: 20px; height: 20px; display: block; }
.ev-bar__label {
  font-weight: 600;
  font-size: 1.05rem;                   /* disease names step up for scannability (was 0.95rem) */
  line-height: 1.3;
  color: var(--purple);                 /* ~11.7:1 on white = AAA */
}

/* Bar column: SUBSTANTIAL, saturated bars — deep purple gradient, real presence. */
.ev-bar__track {
  grid-area: track;
  display: block;
  height: 22px;
  border-radius: 999px;
  background: #E7DFF4;                  /* clearly a track, not a pale bar */
  overflow: hidden;
}
.ev-bar__fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  /* Fill comes from the row's .ev-accent--* modifier (the reusable palette
     system above); the purple pair is the fallback if a row carries none. */
  background: var(--ev-fill, linear-gradient(90deg, var(--ev-purple-deep) 0%, var(--ev-purple) 100%));
  width: var(--w);                      /* static default: final width immediately */
  min-width: 6px;                       /* "days to weeks" stays visible; the words carry the value */
}
.ev-bar__value {
  grid-area: value;
  justify-self: end;
  font-size: 1rem;                      /* readable-minimum for meaningful data text (was 0.92rem) */
  font-weight: 700;
  color: var(--purple-deep);            /* ~13:1 on white */
  white-space: nowrap;
  font-variant-numeric: tabular-nums;   /* count-up doesn't jiggle the column */
}

/* Consequence column: its own tidy panel behind a hairline (the graphic's
   third column) — never cramped under the bar. */
.ev-bar__consequence {
  grid-area: cons;
  align-self: center;
  padding-left: clamp(0.75rem, 1.8vw, 1.4rem);
  border-left: 1px solid rgba(58, 42, 102, 0.12);
  font-size: 1rem;                      /* legibility pass 2026-08: meaningful supporting text at the 16px floor (0.82 -> 0.9 -> 1rem) */
  line-height: 1.55;
  color: var(--text-warm);              /* ~8.9:1 on white = AAA */
}

/* ENDOMETRIOSIS row — THE MOMENT: its own highlighted band, emphasized icon,
   the crimson-to-gold bar (kept) grown taller, and a big 7-10 YEARS.
   (Crimson #A61E3C / #9C1B37 are page-local data accents from the source
   infographic's palette — deliberately NOT added to tokens.css.) */
.ev-bar--endo {
  margin-top: clamp(0.9rem, 2vw, 1.25rem);
  padding: clamp(0.9rem, 2vw, 1.2rem) clamp(0.75rem, 1.8vw, 1.1rem);
  background: linear-gradient(90deg, #FBEDF0 0%, #FBF4EC 100%);   /* crimson-to-gold whisper */
  border: 1px solid rgba(166, 30, 60, 0.45);       /* URGENCY: firmer crimson edge (was 0.22) */
  border-left: 5px solid var(--ev-crimson);        /* the alarm rail — endo rows visibly break the calm palette */
  border-radius: 14px;
  grid-template-columns: clamp(185px, 22vw, 240px) 1fr minmax(9ch, auto);
  grid-template-areas: "name track value";   /* no consequence cell — the callout below is the message */
}
/* The divider hairline would override the band's own border shorthand, so the
   sibling rule RESTATES the crimson top edge instead of zeroing it. */
.ev-bar + .ev-bar--endo { border-top: 1px solid rgba(166, 30, 60, 0.22); }
.ev-bar--endo .ev-bar__icon {
  width: 44px;
  height: 44px;
  background: var(--ev-crimson);
  border: 2px solid var(--gold);
  color: var(--white);
}
.ev-bar--endo .ev-bar__icon svg { width: 24px; height: 24px; }
.ev-bar--endo .ev-bar__label { font-size: 1.15rem; font-weight: 700; color: var(--ev-crimson-ink); }   /* keeps its one-step emphasis over the raised base */
.ev-bar--endo .ev-bar__track { height: 30px; background: rgba(166, 30, 60, 0.16); }
.ev-bar--endo .ev-bar__fill { background: linear-gradient(90deg, #8F1533 0%, var(--ev-crimson) 45%, #C24A2F 78%, var(--ev-gold) 100%); }   /* deeper crimson start — starker against the calm accents */
/* THE KILLER FIGURES — display scale. This one rule covers "7-10 years",
   "$98.5 B" and "$0.28 M" (every endo-band value is, by design, a killer
   figure); .ev-value--display above covers loud numbers outside endo bands. */
.ev-bar--endo .ev-bar__value {
  font-size: clamp(1.7rem, 4.2vw, 2.8rem);
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.05;
  color: var(--ev-crimson-ink);                       /* ~8:1 on the pale band = AA at any size */
}
.ev-chart__note {
  margin: 1.1rem 0 0;
  font-size: 1rem;                      /* legibility pass 2026-08: source/context notes are meaningful annotation — 16px floor (was 0.78rem) */
  line-height: 1.6;
  color: var(--text-warm);              /* stronger than the old muted (~8.9:1 vs 6:1) — credible, not fine-print pale */
  /* FULL available width (page-wide fix): the old 72ch cap (~450px at this size)
     forced every chart/source note into a cramped narrow stack under full-width
     rows. Notes now run their container's measure — one or two clean lines. */
  max-width: none;
}

/* Bar GROWTH animation — only under .ev-anim, only until .is-in arrives (the
   IntersectionObserver adds .is-in on SCROLL-INTO-VIEW, never on page load, so
   a reader never arrives at an already-full chart). Bars sit inside fixed-height
   tracks, so nothing shifts. Stagger top-to-bottom; the endometriosis bar goes
   LAST, slowest, after a beat — the drama is WATCHING it keep going.
   PACE (unhurried by design): standard bars 1.5s, endometriosis 2.4s, both on a
   gentle ease-out so the eye can follow the fill. */
.ev-anim .ev-chart .ev-bar__fill {
  width: 0;
  min-width: 0;
  transition: width 2s cubic-bezier(0.22, 0.61, 0.36, 1), min-width 2s step-end;   /* 2026-08 pacing: 1.5s -> 2s (+33%) */
}
.ev-anim .ev-chart.is-in .ev-bar__fill { width: var(--w); min-width: 5px; }
.ev-anim .ev-chart.is-in .ev-bar:nth-child(1) .ev-bar__fill { transition-delay: 0.05s; }
.ev-anim .ev-chart.is-in .ev-bar:nth-child(2) .ev-bar__fill { transition-delay: 0.15s; }
.ev-anim .ev-chart.is-in .ev-bar:nth-child(3) .ev-bar__fill { transition-delay: 0.25s; }
.ev-anim .ev-chart.is-in .ev-bar:nth-child(4) .ev-bar__fill { transition-delay: 0.35s; }
.ev-anim .ev-chart.is-in .ev-bar:nth-child(5) .ev-bar__fill { transition-delay: 0.45s; }
.ev-anim .ev-chart.is-in .ev-bar:nth-child(6) .ev-bar__fill { transition-delay: 0.55s; }
.ev-anim .ev-chart.is-in .ev-bar--endo .ev-bar__fill {
  transition-duration: 3.2s;             /* the longest bar earns the longest reveal - 2026-08 pacing: 2.4s -> 3.2s (+33%) */
  transition-delay: 0.9s;                /* keep the 0.9s beat — the count-ups sync to it (evidence.js) */
}

/* ---------- Closing punches = STATEMENT BANDS (impossible to skim past) ----
   Elevated from the old quiet cream card: a full-weight deep plum-to-crimson
   band, big white Lora, the key phrase in light gold, crimson top rail. The
   quiet notes and references around them stay quiet — the contrast is the
   urgency. Reused by every chapter's closing line. */
.ev-punch {
  display: flex;
  align-items: center;
  margin-top: clamp(1.75rem, 4vw, 2.5rem);
  padding: clamp(1.5rem, 3.5vw, 2.4rem) clamp(1.25rem, 3.5vw, 2.4rem);
  background: linear-gradient(135deg, var(--purple-deep) 0%, #45173A 60%, #57122E 100%);
  border: 0;
  border-top: 5px solid var(--ev-crimson);
  border-radius: var(--radius);
  box-shadow: 0 14px 34px -18px rgba(46, 33, 80, 0.55);
}
.ev-punch__badge {
  flex-shrink: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 92px;
  margin-right: clamp(1.1rem, 2.8vw, 1.7rem);
  border-radius: 50%;
  border: 2px solid var(--gold);
  background: var(--white);
  color: var(--ev-crimson-ink);          /* ~8:1 on the white disc */
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.7rem;
  line-height: 1;
}
.ev-punch__badge em {
  font-style: normal;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-top: 0.25em;
}
.ev-punch__line {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.3rem, 3vw, 2rem);
  line-height: 1.45;
  color: var(--white);                   /* ≥13:1 on every point of the band */
}
.ev-punch__line strong { color: #F0CE95; font-weight: 700; }   /* light gold ≈8.8:1 on the band's darkest end = AA */
.ev-punch__line .ev-ref a { color: #E7DEEA; }                  /* markers stay visible on the dark band */

/* ---------- Closing call to action ----------
   The statement-band voice at section scale: the argument's destination — now
   the WARM release after the data. The chapter punches keep their plum-crimson
   tension; this band resolves it: deep brand purple lifting into the warm plum
   -> rose-clay dusk of the extended palette (ends at --ev-rose-deep #A65A4B),
   under a GOLD rail (uplift, not alarm). AA at the band's LIGHTEST (rose) end:
   white text 5.0:1 (small-text AA), champagne ring 3.3:1 (UI AA), champagne
   strong 3.3:1 at display size (large-text AA); everything is stronger toward
   the purple end where the headline actually sits. */
.ev-cta {
  /* LIGHT TREATMENT (2026-08, client direction): the dark sunrise band read
     as one block with the purple footer beneath it. Now a pale lavender
     band from the palette, so the page closes in a clear three-step
     sequence - white content, lavender call to action, deep purple footer.
     The photo + warm scrim are retired (rules in git history); the gold
     top rule stays as the band's opening accent. Measured on --lavender:
     heading 12.94:1, gold accent #8A6128 4.80:1 (the site's established
     text-gold-on-light - true gold #BB863F measures 2.78:1 here and fails
     even large-text AA), body 12.94:1, button label 12.34:1. */
  background-color: var(--lavender);
  border-top: 5px solid var(--gold);
  /* REBUILT 2026-08: a SUBSTANTIAL closing module (was 3.25-5.25rem, then
     5-9rem). TIGHTENED 2026-08 (client direction): 80->56px at 375,
     144->88px at 1440 - the band still reads as a deliberate destination
     (~56-88px of air each side of the text block), just no longer monumental.
     Background/gradient/photo/rail untouched. */
  padding-block: clamp(3.5rem, 8vw, 5.5rem);
  text-align: center;                    /* the whole closing band centers (inline-flex button rides text-align) */
}
.ev-cta__line {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(2.1rem, 4.8vw, 3.5rem);   /* display scale — the page's destination headline (was 1.6-2.5rem) */
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--purple-deep);             /* 12.94:1 on the lavender band */
  text-wrap: balance;
}
.ev-cta__line strong { color: #8A6128; font-weight: 700; }   /* deep text-gold on light (site convention) — 4.80:1 on the lavender; true gold #BB863F is 2.78:1 here */
.ev-cta__support {
  margin: clamp(1rem, 2.4vw, 1.5rem) auto 0;
  max-width: 56ch;                       /* comfortable centred measure */
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  line-height: 1.6;
  color: var(--purple-deep);             /* 12.94:1 on the lavender band */
}
.ev-cta__actions { margin-top: clamp(1.75rem, 4vw, 2.75rem); }
/* THE big single action — unmistakably the destination, not a minor link.
   (Compound selector: this rule sits ABOVE the base .ev-cta__btn block, so it
   needs the extra specificity to win the shared declarations.) */
.ev-cta .ev-cta__btn--big {
  min-height: 60px;
  padding: 1rem 2.8rem;
  font-size: 1.2rem;
  font-weight: 700;
  box-shadow: 0 16px 36px -14px rgba(20, 12, 30, 0.6);
}
/* Phones: the big action goes full-width (easier target) with tighter side
   padding so the label stays on ONE line down to 320px. */
@media (max-width: 479.98px) {
  .ev-cta .ev-cta__btn--big {
    width: 100%;
    padding: 1rem 1.25rem;
    white-space: nowrap;
  }
}
.ev-cta__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;                      /* tap target */
  padding: 0.6rem 1.4rem;
  margin: 0 0.375rem 0.75rem;            /* SYMMETRIC side margins so text-align:center truly centers (the old right-only margin skewed a lone button ~6px); margin, not flex gap (Safari <14.1) */
  border: 2px solid #F0CE95;             /* champagne ring — 3.3:1 UI AA even at the warm rose end (brand gold #BB863F falls to 1.6:1 there) */
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  text-decoration: none;
  color: var(--white);                   /* ~13:1 on the band */
  transition: background-color 0.18s ease, transform 0.18s ease;
}
.ev-cta__btn:hover { background: rgba(187, 134, 63, 0.18); transform: translateY(-2px); }
.ev-cta__btn:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }
.ev-cta__btn--primary {
  /* Inverted for the light band (2026-08): solid purple, white label — the
     strongest element in view. 12.34:1. */
  background: var(--purple);
  color: var(--white);
}
.ev-cta__btn--primary:hover { background: var(--purple-deep); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) {
  .ev-cta__btn, .ev-cta__btn--primary { transition: none; }
  .ev-cta__btn:hover, .ev-cta__btn--primary:hover { transform: none; }
}

/* ---------- References (readability redesign 2026-08) ----------
   No longer legal fine print: 16px/1.7 reading size, roomier entry spacing,
   and true HANGING numbers (outside markers — the number hangs left while
   every wrapped line of the entry stays flush, standard academic style).
   All citation text and [verify] flags are verbatim-unchanged. */
.ev-refs {
  margin: 1rem 0 0;
  list-style-position: outside;          /* the number HANGS; continuation lines align flush */
  padding-left: 1.75rem;                 /* room for two-digit hanging numbers */
  max-width: 72ch;                       /* single-column reading measure */
  font-size: 1rem;                       /* 16px — comfortably readable (was 0.88rem) */
  line-height: 1.7;
  color: var(--text);                    /* AA on lavender */
}
.ev-refs li { margin: 0 0 0.8rem; padding-left: 0.25rem; }
/* Bare URLs already present in the text are clickable (new tab); nothing is
   fabricated — the scheme is the only addition. AA: purple-bright 5.6:1 on
   the lavender section. */
.ev-refs a {
  color: var(--purple-bright);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: break-word;             /* long URLs never force a scroll */
}
.ev-refs a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 3px; }
/* TWO COLUMNS only where they stay READABLE at the larger size (>=1080px keeps
   each column at a ~55ch+ measure): CSS multicol keeps the <ol> numbering
   flowing DOWN column 1 then column 2, and the inline superscript links still
   land on their entries. Single column below — always single on mobile. */
@media (min-width: 1080px) {
  .ev-refs {
    columns: 2;
    column-gap: clamp(2.25rem, 4vw, 3.5rem);
    max-width: none;                     /* the two columns use the full container measure */
  }
  .ev-refs li {
    break-inside: avoid;                 /* an entry never splits across columns */
    page-break-inside: avoid;            /* older WebKit alias */
  }
}
/* Landing highlight when a citation marker is followed. */
.ev-refs li:target {
  background: rgba(187, 134, 63, 0.14);
  border-radius: 6px;
  outline: 2px solid rgba(187, 134, 63, 0.45);
  outline-offset: 4px;
}
/* INTERNAL VERIFICATION NOTES (Aug 2026): these flags are transcription notes
   for GEM's team, never public copy. Every one is now COMMENTED OUT in
   evidence.html, so none can render even if this stylesheet fails to load.
   display:none is a second guard: if a flag is ever uncommented without
   thought, it still stays out of the page and out of the accessibility tree.
   The colour/weight below are kept so the style survives for whenever GEM
   deliberately restores a note for internal review. */
.ev-refs__flag {
  display: none;
  font-weight: 600;
  color: var(--gold-deep);               /* 5:1 on lavender = AA */
}

/* ---------- Section-2 additions (all reuse the Chapter-1 grammar) ---------- */
/* Charts with NO consequence column (funding visuals): three tracks only, and
   the header's middle label spans the bar+value tracks. Additive modifier —
   Chapter 1's four-column chart is untouched. */
.ev-chart--3col .ev-bar,
.ev-chart--3col .ev-chart__head {
  grid-template-columns: clamp(185px, 22vw, 240px) 1fr minmax(9ch, auto);
}
.ev-chart--3col .ev-bar { grid-template-areas: "name track value"; }
.ev-chart--3col .ev-chart__head { grid-template-areas: "disease delay delay"; }
/* Later rows in longer charts continue the Chapter-1 stagger rhythm. */
.ev-anim .ev-chart.is-in .ev-bar:nth-child(7) .ev-bar__fill { transition-delay: 0.65s; }
.ev-anim .ev-chart.is-in .ev-bar:nth-child(8) .ev-bar__fill { transition-delay: 0.75s; }
/* Space between a chart and the lede introducing the next one. The lede itself
   uses the full width here (the 62ch intro cap made e.g. Ch2's "Only $0.28M…"
   paragraph break into three cramped lines under a full-width chart). Chapter
   HEAD intros keep their 62ch reading measure — only these mid-section ledes
   widen. */
.ev-lede-gap { margin-top: clamp(1.75rem, 4vw, 2.5rem); }
.ev-lede-gap .ev-section__intro { max-width: none; }

/* Tool/group sub-headers inside a chart list (Section 3: SF-36 vs EQ-5D rows are
   grouped by instrument so two different tools are never presented as one).
   Plain full-width rows — no grid, no bar — quiet by design. */
.ev-bars__group {
  padding: 1.1rem 0 0.35rem;
  font-size: 0.95rem;                   /* legibility pass 2026-08: tool-group subheaders step up (was 0.78rem); still quieter than the gold headers */
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-muted);             /* 6:1 on white; deliberately quieter than the gold column headers */
  border-top: 1px solid rgba(58, 42, 102, 0.08);
}
.ev-bars__group:first-child { padding-top: 0; border-top: 0; }
.ev-bars__group + .ev-bar { border-top: 0; }   /* the group line already separates */

/* KEY FACTS — three stat cards on the accent system. */
.ev-facts {
  list-style: none;
  margin: clamp(1.75rem, 4vw, 2.5rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.9rem, 2vw, 1.4rem);
}
.ev-fact {
  background: var(--white);
  border: 1px solid rgba(58, 42, 102, 0.10);
  border-top-width: 4px;
  border-radius: var(--radius);
  box-shadow: 0 8px 26px rgba(46, 33, 80, 0.08);
  padding: clamp(1.1rem, 2.5vw, 1.5rem);
}
.ev-fact--rose { border-top-color: var(--ev-rose); }
.ev-fact--teal { border-top-color: var(--ev-teal); }
.ev-fact--gold { border-top-color: var(--ev-gold); }
.ev-fact--purple { border-top-color: var(--ev-purple); }
/* Four-card variant (Section 3): 2x2 from tablet up, single column on phones
   via the shared phone rule below. */
.ev-facts--4 { grid-template-columns: repeat(2, 1fr); }
/* Optional card kicker — the study/source label above a stat (Section 4+). */
.ev-fact__kicker {
  display: block;
  margin-bottom: 0.4rem;
  font-size: 0.8rem;                    /* legibility pass: card source-kickers step up (0.72 -> 0.8rem) */
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gold-deep);              /* 5.4:1 on white = AA at this size; matches the column-header voice */
}
.ev-fact__number {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: clamp(1.4rem, 2.8vw, 1.9rem);
  line-height: 1.15;
  color: var(--purple-deep);            /* ~13:1 on white */
}
.ev-fact__label {
  display: block;
  margin-top: 0.35rem;
  font-size: 1rem;                      /* readable-minimum for meaningful text (was 0.9rem — too small for card copy) */
  line-height: 1.5;
  color: var(--text-warm);              /* ~8.9:1 on white */
}
.ev-facts__note { margin-top: 0.8rem; }

/* ---------- Section-5 additions (SOBER register — see the section comment in
   the markup: no alarm colours, no display-size figures, no count-ups) ------- */
/* (Chapter 5's note-width override was removed — the base .ev-chart__note cap
   is now lifted page-wide, so the full-width behaviour is universal.) */

/* Panel label above a card group (the shared qualifier, stated once). */
.ev-panel-label {
  margin: clamp(1.5rem, 3vw, 2rem) 0 0.35rem;
  font-size: 0.95rem;                   /* legibility pass: panel qualifier steps up (was 0.8rem) */
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--purple-mid);             /* calm — deliberately not the alarm crimson; ~7:1 on white */
}
.ev-panel-label + .ev-facts { margin-top: 0.6rem; }

/* Support note — warm, compassionate, beside the self-harm content. Redesigned
   into the page's CARD FAMILY (white card, soft shadow, 4px accent top border —
   the exact .ev-fact grammar) with the icon in the established circular duotone
   badge, so it reads as a designed, cared-for element rather than a bolted-on
   box. Calm sage-teal accent from the extended palette (never crimson). */
.ev-support {
  display: flex;
  align-items: center;
  margin-top: clamp(1.5rem, 3vw, 2rem);
  padding: clamp(1.1rem, 2.5vw, 1.5rem) clamp(1.1rem, 2.8vw, 1.7rem);
  background: var(--white);
  border: 1px solid rgba(58, 42, 102, 0.10);
  border-top: 4px solid var(--ev-teal);
  border-radius: var(--radius);
  box-shadow: 0 8px 26px rgba(46, 33, 80, 0.08);
}
.ev-support__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-right: 0.9rem;                 /* margin, not flex gap (Safari <14.1) */
  border-radius: 50%;
  background: rgba(94, 139, 126, 0.14); /* sage-teal tint disc — the icon-badge grammar */
  border: 1px solid rgba(94, 139, 126, 0.45);
  color: var(--ev-teal-deep);           /* deep sage stroke on the pale disc */
}
.ev-support__icon svg { width: 20px; height: 20px; display: block; }
.ev-support__text { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--text); }
.ev-support__text a { color: var(--purple-bright); font-weight: 600; text-underline-offset: 3px; text-decoration: underline; }
.ev-support__text a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* List-row charts (no shared numeric axis -> NO bars): disease | figure | measure.
   Used when sources measure different things and a common axis would mislead. */
.ev-chart--listrows .ev-bar,
.ev-chart--listrows .ev-chart__head {
  /* The Ch5 misalignment lived here: the middle track was minmax(11ch, AUTO),
     so in the HEADER grid it sized itself to the long "Reported Burden" label
     + its subnote (wide) while in each ROW it sized to a short figure like
     "~1 in 4" (narrow) — the MEASURE header ended up far right of the measure
     content. A fixed clamp() middle track resolves identically in both grids,
     so Disease | Reported Burden | Measure line up header-to-content. */
  /* Middle track widened (was clamp(8rem, 13vw, 11rem)) so the "REPORTED
     BURDEN" title fits on ONE line at the 1.05rem header size; rem bounds
     scale with zoom, and head + rows share the track so all three columns
     stay aligned header-to-content. */
  grid-template-columns: clamp(185px, 22vw, 240px) clamp(14rem, 18vw, 16rem) 1fr;
}
.ev-chart--listrows .ev-bar { grid-template-areas: "name value cons"; }
.ev-chart--listrows .ev-chart__head { grid-template-areas: "disease delay cons"; }
.ev-chart--listrows .ev-bar__value {
  justify-self: start;                  /* figures read as text, not a right-aligned column */
  font-variant-numeric: normal;
  white-space: normal;
}

/* Sober closing band — the SAME structural identity as every other chapter
   closer (full statement band: gradient ground, 5px top rail, big white Lora
   line, base padding/radius/shadow all inherited from .ev-punch), voiced in the
   calm register: an all-PURPLE gradient instead of plum->crimson, a GOLD rail
   instead of the alarm crimson, and the movement line beneath in quiet italic.
   display:block (not flex) because this closer carries two stacked lines. */
.ev-punch--sober {
  display: block;
  background: linear-gradient(135deg, var(--purple-deep) 0%, var(--purple) 100%);   /* brand purples only — no crimson */
  border-top-color: var(--gold);
}
.ev-punch--sober .ev-punch__line strong { color: #F0CE95; }   /* same key-phrase gold as the other bands; ~8.2:1 on the gradient's lightest end */
.ev-punch__tag {
  margin: 0.9rem 0 0;
  font-family: var(--font-head);
  font-style: italic;
  font-size: clamp(0.95rem, 1.8vw, 1.1rem);
  color: #E7DEEA;                       /* soft lavender-cream ~10:1 on the purple band */
}

/* ---------- Below ~1000px: the 4-column row stacks gracefully ----------
   Reading order stays disease -> bar -> consequence: [icon+name | value] on the
   first line, the full-width bar under it, the consequence line beneath. */
@media (max-width: 999.98px) {
  /* Header row: the per-column labels no longer align once rows stack, so only
     the middle label (+ its scale subnote) remains, as a plain header line; the
     third column's meaning moves into each row's micro-label below. */
  .ev-chart__head { display: block; }
  .ev-chart__col--disease,
  .ev-chart__col--cons { display: none; }
  .ev-bar__conslabel { display: block; }

  .ev-bar {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name value"
      "track track"
      "cons cons";
    row-gap: 0.45rem;
  }
  .ev-bar__name { align-self: center; }
  .ev-bar__value { align-self: center; }
  .ev-bar__consequence {
    padding-left: 0;
    border-left: 0;
    color: var(--text-muted);           /* quieter when inline under the bar; 6:1 = AA */
  }
  .ev-bar--endo {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name value"
      "track track";
  }
  /* 3col charts stack identically (their rows have no cons cell). */
  .ev-chart--3col .ev-bar {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name value"
      "track track";
  }
  /* List-row charts stack too (higher-specificity desktop rule needs this
     explicit mobile override): name+figure line, measure beneath. */
  .ev-chart--listrows .ev-bar {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "name value"
      "cons cons";
  }

  /* OVERFLOW SAFETY (mobile fix 2026-08): grid and flex items default to
     min-width:auto, so an unbreakable disease name or a nowrap value used to
     set the row's minimum width — wider than a phone — and push the whole
     page into horizontal scroll. Every cell may now shrink, and value labels
     may wrap, so rows can never be wider than the viewport. */
  .ev-bar__name, .ev-bar__value, .ev-bar__consequence, .ev-bar__label { min-width: 0; }
  .ev-bar__value { white-space: normal; }
}

/* ---------- Phones: tighter type, uncramped ---------- */
@media (max-width: 639.98px) {
  .ev-bar__icon { width: 32px; height: 32px; margin-right: 0.5rem; }
  .ev-bar__icon svg { width: 17px; height: 17px; }
  .ev-bar--endo .ev-bar__icon { width: 38px; height: 38px; }
  .ev-bar--endo .ev-bar__icon svg { width: 20px; height: 20px; }
  .ev-bar__label { font-size: 0.95rem; }   /* steps with the desktop label bump */
  .ev-bar__value { font-size: 0.95rem; }   /* legibility pass: phone value labels step up (was 0.85rem) */
  .ev-bar__track { height: 18px; }
  .ev-bar--endo .ev-bar__track { height: 24px; }
  .ev-bar--endo .ev-bar__label { font-size: 1.05rem; }
  .ev-bar--endo .ev-bar__value { font-size: 1.6rem; }   /* killer figures stay DISPLAY-size on phones */
  .ev-punch { flex-direction: column; align-items: flex-start; }
  .ev-punch__badge { width: 76px; height: 76px; font-size: 1.4rem; margin: 0 0 0.9rem; }
  .ev-facts { grid-template-columns: 1fr; }   /* stat cards stack on phones */

  /* ENDO rows on phones (mobile overflow fix 2026-08): name + the display-size
     killer figure side-by-side need ~330px+ of unshrinkable content — wider
     than a 320-414px viewport minus paddings. The figure now takes its OWN
     full-width line between the name and the bar (still display size, still
     crimson — arguably more dramatic), so nothing can run off the right edge.
     The .ev-chart--3col compound keeps this ahead of the 3-col chart override
     (Ch2/3/4 endo rows), which otherwise outranks .ev-bar--endo alone. */
  .ev-bar--endo,
  .ev-chart--3col .ev-bar--endo {
    grid-template-columns: 1fr;
    grid-template-areas:
      "name"
      "value"
      "track";
  }
  .ev-bar--endo .ev-bar__value { justify-self: start; }
}


/* ---- View Sources disclosure (2026-08, relocated + de-emphasized): a QUIET
   compact toggle sitting directly under the last evidence block, before the
   CTA - no full-width band, no big heading. Native <details>/<summary>,
   keyboard/SR accessible, works without JS. The list keeps its existing
   2-column open layout and styling untouched. ---- */
.ev-sources {
  padding-top: 0.25rem;
  /* 2026-08 (client direction): more breathing space between View Sources and
     the closing CTA band - 24->40px at 375, 36->60px at 1440. One rule governs
     both "below the button" and "above the band" (the summary is the section's
     last visible element), so this is deliberately a single value. */
  padding-bottom: clamp(2.5rem, 5vw, 3.75rem);
}
/* ---------- Chapter progress rail (2026-08) ----------
   Slim fixed nav in the empty right margin, >=1024px ONLY (display:none
   below - phones/small tablets have no spare margin and the FABs own that
   edge). Five 44x44 buttons stacked (244px tall ~ a third of the viewport),
   each drawing its visible segment as a thin right-aligned ::before bar so
   the hit area never widens the rail visually. Three states:
     not yet reached  2px  rgba(91,74,138,0.30)  (faint lavender hairline)
     current          5px  var(--gold) solid      (aria-current="true")
     already passed   3px  rgba(187,134,63,0.5)   (muted gold)
   - gold fills downward as the reader progresses. Labels slide in on
   hover/focus only, on a solid --purple plate (white text 12.3:1). State
   fades 0.3s; none under reduced motion (and evidence.js scrolls instantly
   there). Focus ring: gold-deep, NOT the raw --focus token. */
/* ---------- Floating chapter navigator (2026-08; replaces the thin rail) ----
   Always-visible panel: "Chapters" head + the five names, three states with
   NON-COLOUR distinctions (current = 4px gold marker bar; read = 2px muted
   marker; ahead = no marker). Quiet near-white panel reusing the site's card
   recipe (white, hairline border, soft shadow, radius). Shows from 1520px -
   the narrowest width where its 200px + clearances genuinely fit in the free
   right margin (only ~107px free at 1280 / ~188px at 1440: the mandated
   1280 show-point would cover the clickable chapter summaries - reported).
   Yields while the cookie card is up, like the old rail. State fades 0.25s;
   none under reduced motion (and evidence.js scrolls instantly there). */
.ev-chnav { display: none; }
body.has-cookie-bar .ev-chnav { display: none !important; }
@media (min-width: 1520px) {
  .ev-chnav:not([hidden]) {
    display: block;
    position: fixed;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 80;                      /* under the FABs (90); vertical separation keeps them apart anyway */
    width: 200px;
    padding: 0.75rem 0.6rem 0.6rem;
    background: var(--white);
    border: 1px solid rgba(58, 42, 102, 0.14);
    border-radius: 12px;
    box-shadow: 0 10px 30px -12px rgba(46, 33, 80, 0.28);
  }
}
.ev-chnav__head {
  margin: 0 0 0.4rem;
  padding: 0 0.5rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-deep);            /* 5.45:1 on white */
}
.ev-chnav__item {
  position: relative;
  display: block;
  width: 100%;
  min-height: 44px;                   /* tap floor */
  padding: 0.45rem 0.5rem 0.45rem 1rem;
  background: transparent;
  border: 0;
  border-radius: 8px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  color: var(--text-muted);           /* NOT YET REACHED: faint but legible - 4.57:1 on white */
  cursor: pointer;
  transition: color 0.25s ease, background-color 0.25s ease;
}
.ev-chnav__item::before {             /* marker slot at the left */
  content: "";
  position: absolute;
  left: 2px;
  top: 10px;
  bottom: 10px;
  width: 0;
  border-radius: 2px;
  background: transparent;
  transition: width 0.25s ease, background-color 0.25s ease;
}
.ev-chnav__item.is-read {             /* ALREADY READ: muted, lower opacity + small muted marker */
  color: var(--text-warm);
  opacity: 0.75;
}
.ev-chnav__item.is-read::before { width: 2px; background: rgba(138, 98, 34, 0.45); }
.ev-chnav__item[aria-current="true"] {  /* CURRENT: brand gold, medium weight, gold marker */
  color: var(--gold-deep);            /* the accessible brand gold on white - 5.45:1 */
  font-weight: 600;
  opacity: 1;
}
.ev-chnav__item[aria-current="true"]::before { width: 4px; background: var(--gold); }
.ev-chnav__item:hover { background: var(--lavender-light); color: var(--purple); opacity: 1; }
.ev-chnav__item:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 1px; }   /* NOT the raw --focus token */
@media (prefers-reduced-motion: reduce) {
  .ev-chnav__item,
  .ev-chnav__item::before { transition: none; }
}

/* ---------- Sticky chapter bar (<1520px; the navigator's complement) --------
   One 44px line under the fixed site header: "Chapter N of 5" + the current
   chapter's name + a chevron that drops the full list (whose buttons reuse
   .ev-chnav__item, so states match the navigator exactly). Fixed position =
   zero layout shift; evidence.js shows it only inside the chapter series and
   keeps it VISIBLE while scrolling in both directions (2026-08: the old
   hide-on-scroll-down slide read as a broken indicator - the bar was off
   screen exactly when the reader wanted to watch the chapters advance; only
   the expanded list still closes on a downward scroll). MUTUAL EXCLUSION:
   display none at >=1520px, exactly where the navigator turns on - never
   both, and display:none removes the hidden one from the accessibility
   tree. */
.ev-chbar { display: none; }
/* 2026-08: ceiling moved 1519.98 -> 1023.98 when the thin progress rail was
   restored - the rail + floating label own 1024-1519.98, the bar owns <1024,
   the navigator owns >=1520. Exactly one chapter control per width. */
@media (max-width: 1023.98px) {
  .ev-chbar:not([hidden]) {
    display: block;
    position: fixed;
    top: var(--header-h, 88px);
    left: 0;
    right: 0;
    z-index: 95;                        /* under the fixed header (100), over content */
    background: var(--white);
    border-bottom: 1px solid rgba(58, 42, 102, 0.14);
    box-shadow: 0 6px 18px -10px rgba(46, 33, 80, 0.22);
  }
  .ev-chbar.is-offseries { display: none; }        /* before chapter 1 / past chapter 5 */
}
.ev-chbar__head {
  display: flex;
  align-items: center;
  width: 100%;
  height: 44px;                         /* the whole collapsed bar = one 44px tap target */
  padding: 0 1rem;
  background: transparent;
  border: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.ev-chbar__count {
  flex: 0 0 auto;
  margin-right: 0.6rem;                 /* margin, not flex gap */
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-deep);              /* 5.45:1 on white */
  white-space: nowrap;
}
.ev-chbar__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--purple);                 /* 11.7:1 on white */
}
.ev-chbar__chev {
  flex: 0 0 auto;
  width: 1.1rem;
  height: 1.1rem;
  margin-left: 0.5rem;
  color: var(--gold-deep);
  transition: transform 0.2s ease;
}
.ev-chbar__head[aria-expanded="true"] .ev-chbar__chev { transform: rotate(180deg); }
.ev-chbar__head:focus-visible { outline: 3px solid var(--purple-bright); outline-offset: -3px; }   /* NOT the raw --focus token */
.ev-chbar__list {
  border-top: 1px solid rgba(58, 42, 102, 0.10);
  padding: 0.3rem 0.6rem 0.5rem;
  background: var(--white);
  max-height: calc(100dvh - var(--header-h, 88px) - 60px);
  overflow-y: auto;
}
.ev-chbar__item { min-height: 44px; }   /* inherits the .ev-chnav__item state treatments */
@media (prefers-reduced-motion: reduce) {
  .ev-chbar__chev { transition: none; }
}

/* ---------- Thin chapter progress rail + floating label (2026-08 RESTORED) --
   1024-1519.98px ONLY: the sticky bar owns <1024, the floating navigator owns
   >=1520 - exactly one chapter control per width. Five 44x44 buttons stacked
   (~268px, about a third of the viewport), each drawing its visible segment as
   a thin right-aligned ::before bar so the hit area never widens the rail
   visually. Three states (shared is-read/aria-current from wireRail):
     unread   2px  rgba(91,74,138,0.30)  faint lavender hairline
     current  5px  var(--gold) solid     (aria-current="true")
     read     3px  rgba(187,134,63,0.5)  muted gold
   - gold fills downward as the reader progresses. The FLOATING LABEL names
   the current chapter on a light translucent lavender tint (NO backdrop-filter
   blur - the site's established approach): it may overlap page content by
   design, which is what frees the rail from the navigator's 1520px width
   constraint. aria-hidden - purely decorative duplication of the rail state.
   Focus ring: gold-deep, NOT the raw --focus token. */
.ev-rail { display: none; }
body.has-cookie-bar .ev-rail { display: none !important; }   /* the cookie card owns that zone until dismissed */
@media (min-width: 1024px) and (max-width: 1519.98px) {
  .ev-rail:not([hidden]) {
    display: block;
    position: fixed;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 80;                      /* under the FABs (90) - they never overlap vertically anyway */
  }
}
.ev-rail__seg {
  position: relative;
  display: block;
  width: 44px;                        /* full tap target; the visible bar is the ::before */
  height: 44px;
  margin: 6px 0;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.ev-rail__seg::before {
  content: "";
  position: absolute;
  right: 10px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  border-radius: 2px;
  background: rgba(91, 74, 138, 0.30);           /* not yet reached: faint lavender hairline */
  transition: background-color 0.3s ease, width 0.3s ease, opacity 0.3s ease;
}
.ev-rail__seg.is-read::before {
  width: 3px;
  background: rgba(187, 134, 63, 0.5);           /* passed: muted gold */
}
.ev-rail__seg[aria-current="true"]::before {
  width: 5px;
  background: var(--gold);                       /* current: solid brand gold */
}
.ev-rail__seg:hover::before { background: var(--gold-deep); }
.ev-rail__seg:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 2px; border-radius: 8px; }
.ev-rail__flag {
  position: absolute;
  right: 44px;
  top: 50%;
  transform: translateY(-50%);
  padding: 0.35rem 0.7rem;
  background: rgba(242, 238, 248, 0.85);         /* --lavender at 0.85 - translucent tint, NO blur */
  border: 1px solid rgba(58, 42, 102, 0.16);
  border-radius: 8px;
  color: var(--purple-deep);                     /* 12.5:1 over the tint on white; >=7.9:1 over any page section */
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;                          /* content beneath stays clickable */
  transition: opacity 0.25s ease, top 0.2s ease-out;   /* 2026-08: the label GLIDES between tick positions (200ms ease-out - no other movement transition existed in this component to match); the reduced-motion block below zeroes it so the label jumps instantly */
}
.ev-rail.is-idle .ev-rail__flag { opacity: 0; }  /* before chapter 1 reaches the line */
@media (prefers-reduced-motion: reduce) {
  .ev-rail__seg::before,
  .ev-rail__flag { transition: none; }           /* state changes render instantly */
}

.ev-refs-summary {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  list-style: none;                 /* we draw our own affordance */
  min-height: 44px;                 /* full tap target despite the modest look */
  padding: 0.4rem 0.2rem;
}
.ev-refs-summary::-webkit-details-marker { display: none; }
.ev-refs-summary__label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--purple);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.ev-refs-summary:hover .ev-refs-summary__label { color: var(--purple-bright); }
.ev-refs-summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
.ev-refs-summary__chevron {
  width: 1em;
  height: 1em;
  margin-left: 0.35em;
  color: var(--gold-deep);
}
.ev-refs-details[open] .ev-refs-summary__chevron { transform: rotate(180deg); }
@media (prefers-reduced-motion: no-preference) {
  .ev-refs-summary__chevron { transition: transform 0.24s ease; }   /* 2026-08 pacing: 0.18s -> 0.24s (+33%) */
}
.ev-refs-details[open] .ev-refs-summary { margin-bottom: 0.75rem; }

/* ============ FOLDABLE CHAPTERS (2026-08, client direction) ============
   Each of the five chapter sections wraps its content in native
   <details>/<summary> - the SAME disclosure pattern as View Sources above
   (one accordion implementation on this page, not two). Chapter 1 ships
   open; 2-5 ship collapsed. The summary row is the chapter's existing
   kicker + heading (heading ids kept for aria-labelledby), with the same
   chevron affordance the refs toggle uses. Native summary semantics carry
   the button role + expanded/collapsed state to AT - no manual
   aria-expanded needed. Focus ring: --focus (deep purple) is correct on
   this page's LIGHT chapter bands (~11:1) - the 1.18:1 warning applies to
   purple surfaces, which these are not.
   FIND-IN-PAGE: closed <details> content stays in the DOM; Chromium
   searches it and auto-expands on a match (native until-found behaviour).
   Fallback engines simply search the open chapters - the Expand-all
   control (chapter series top) is the manual path. */
.ev-chapter__summary {
  cursor: pointer;
  list-style: none;                     /* we draw our own affordance */
  position: relative;
  /* 2026-08 chevron fix: grid row 1 = kicker (full width), row 2 = title +
     chevron SIDE BY SIDE (the old display:block chevron stacked on its own
     line below the title). */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 0.6rem;
}
.ev-chapter__summary::-webkit-details-marker { display: none; }
.ev-chapter__summary .eyebrow { display: block; grid-column: 1 / -1; margin: 0 0 0.35rem; }  /* the kicker's old <p> rhythm, kept on the <span> (summary's content model forbids <p>) */
.ev-chapter__summary .ev-section__heading { grid-column: 1; }
.ev-chapter__summary:hover .ev-section__heading { color: var(--purple-bright); }
.ev-chapter__summary:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 8px; }
.ev-chapter__chevron {
  grid-column: 2;
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 0;
  color: var(--gold-deep);
  display: block;                       /* block within its own grid cell - inline with the title row */
}
.ev-chapter__details[open] .ev-chapter__chevron { transform: rotate(180deg); }
@media (prefers-reduced-motion: no-preference) {
  .ev-chapter__chevron { transition: transform 0.24s ease; }   /* 2026-08 pacing: 0.18s -> 0.24s (+33%) */
}
/* ---- Hook subtitles (2026-08): title AND subtitle visible in every chapter
   state. The number is the hook - one size step up, accessible brand gold
   (--gold-deep: the light-surface gold, AA at any size; canonical #BB863F is
   only ~3:1 on these tints), tabular figures inside a RESERVED width so the
   0->target count never shifts layout. Counting spans are aria-hidden with an
   sr-only final-value twin (screen readers hear only the final number).
   Chapter 5's hook is deliberately static - no number, no animation (see the
   markup note). Under reduced-motion, evidence.js never wires the count-up and
   the markup's final values simply show. */
.ev-hook {
  display: block;
  grid-column: 1;                      /* stays clear of the chevron column */
  margin: 0.4rem 0 0;
  max-width: 62ch;
  font-size: clamp(1.15rem, 2.4vw, 1.6rem);   /* 2026-08 consolidation: restored to the OLD subtitle size (.ev-section__intro--loud) - the newer hooks were too small (17.6px -> 25.6px at 1440) */
  line-height: 1.45;
  color: var(--text);                  /* ~13:1 on every chapter tint */
}
.ev-hook__num {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.35em;                   /* the hook reads first */
  line-height: 1;
  color: var(--ev-crimson-ink);        /* 2026-08: the page's crimson (was gold-deep) - 8:1 white / 7.3:1 lavender / 7.7:1 cream, AA everywhere */
  font-variant-numeric: tabular-nums;
}
/* 2026-08 red key phrases (client direction): same crimson the page already
   uses (.ev-hot / the 190-million lead) - never a new colour. __kw = the
   emphasised comparison keywords: bold only, no third colour. */
.ev-hook__red { color: var(--ev-crimson-ink); font-weight: 700; }
.ev-hook__kw { font-weight: 700; color: inherit; }
.ev-hook .ev-count { display: inline-block; min-width: 1ch; text-align: left; }   /* reserved digit space - counting never reflows */
.ev-hook .ev-count--2ch { min-width: 2ch; }
.ev-hook .ev-count--3ch { min-width: 3ch; }   /* Chapter 2's "$100" (2026-08) */
.ev-hook .ev-count--4ch { min-width: 4ch; }
.ev-transit__beat--lead .ev-count--lead { display: inline-block; min-width: 3ch; text-align: left; }  /* 190 = 3 digits; reserved so counting never reflows the hero line */

.ev-chapter__body { margin-top: 0.5rem; }
/* 2026-08 subtitle breathing room: chapters whose body OPENS with a chart
   (1 and 2) sat only the shared 8px below the subtitle, while chapter 5's
   first block carries its own 32px offset (and 3/4 open with a light intro
   paragraph). One shared rule lifts a first-child chart to the same 32px
   total - no per-chapter patching. Mobile inherits the same value. */
.ev-chapter__body > .ev-chart:first-child { margin-top: 2rem; }   /* collapses with the body's 8px to a 32px gap, matching chapter 5 */
/* Collapsed chapters keep the section's own padding rhythm - no extra rules
   needed; expanding only adds the body's height (no other layout shift). */

/* Quiet utility control (2026-08 reposition): overlaid on the Chapter 1
   KICKER line, right-aligned to the chapter TEXT MEASURE (the 72ch intro
   column right edge = 993.53px from the container's content left), not the
   outer container. The wrapper spans the container content width at zero
   height, so the absolute button rides the kicker row with no layout shift.
   Demoted text-link treatment (matches the refs summary label). */
.ev-expandall {
  position: relative;
  height: 0;
  margin: 0;
}
.ev-expandall__btn {
  position: absolute;
  top: 0;
  right: max(0px, calc(100% - 993.53px));
  z-index: 6;                           /* the position:relative chapter summaries below paint over an unlayered absolute box */
  display: inline-flex;
  align-items: flex-start;
  min-height: 44px;                     /* tap target extends DOWN from the kicker line */
  padding: 0.35rem 0.2rem;
  background: none;
  border: 0;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: var(--purple);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  white-space: nowrap;
}
/* Phones: the kicker row cannot hold both - the control drops to its own
   quiet line ABOVE the chapter block (static flow). Switch: 639.98px. */
@media (max-width: 639.98px) {
  .ev-expandall { height: auto; margin: 0 0 0.5rem; }
  .ev-expandall__btn { position: static; }
}
.ev-expandall__btn:hover { color: var(--purple-bright); }
.ev-expandall__btn:focus-visible { outline: 3px solid var(--purple-bright); outline-offset: 2px; border-radius: 6px; }
@media print {
  .ev-expandall { display: none; }      /* utility control is meaningless on paper */
  /* NOTE: CSS cannot force a closed <details> open - evidence.js opens all
     chapters in beforeprint and restores them in afterprint. */
}