/*
  THE WORK EQUATION — PROJECT PAGE
  ------------------------------------------------------------
  EDITING MAP
  1. Brand colours: change only the four variables in :root.
  2. Typography: Unbounded = display headings; Space Grotesk = everything else.
  3. Motion timing: search for "transition" below, or edit script.js for counters.
  4. Responsive layouts: tablet starts at 1050px; mobile starts at 760px.
  5. Data and visible copy live in index.html, not in this stylesheet.

  The section layout and scroll behaviour intentionally match the original
  Work Equation design. Only the brand system has been changed to The Other Dalo.
*/

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Unbounded:wght@500;600;700;800;900&display=swap');

:root {
  /* THE OTHER DALO — four-colour system */
  --orange: #eb3300;
  --deep: #1c120a;
  --light: #ebe4e2;
  --pink: #f4a6d7;

  /* Shared vertical rhythm. Adjust these two values to tighten or open every section. */
  --section-space: clamp(4rem, 6vw, 6.5rem);
  --section-space-mobile: 3.25rem;

  /* Motion values written by script.js */
  --page-progress: 0;
  --section-progress: 0;
  scroll-behavior: smooth;
}

* { box-sizing: border-box; }

html {
  scroll-padding-top: 90px;
  background: var(--deep);
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--light);
  color: var(--deep);
  font-family: 'Space Grotesk', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, a { font: inherit; }
a { color: inherit; }

::selection {
  background: var(--pink);
  color: var(--deep);
}

main { overflow: clip; }

.page-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 120;
  height: 4px;
  background: var(--pink);
  transform: scaleX(var(--page-progress));
  transform-origin: left;
}

/* ------------------------------------------------------------
   THE OTHER DALO SUBPAGE NAV
   A simplified wordmark + home CTA keeps the project navigation distinct
   from the five-part Work Equation progress indicator.
------------------------------------------------------------ */
.site-header {
  position: fixed;
  z-index: 110;
  top: 0;
  left: 0;
  right: 0;
  height: 90px;
  padding: 18px clamp(22px, 5vw, 84px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--orange);
  background: var(--deep);
  color: var(--light);
}

.wordmark {
  color: var(--orange);
  font-family: 'Unbounded', Arial, sans-serif;
  font-size: clamp(14px, 1.35vw, 20px);
  font-weight: 800;
  letter-spacing: -.06em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .55em;
}

.wordmark-icon {
  display: block;
  width: 1em;
  height: 1em;
  flex: 0 0 1em;
}

.back-home-cta,
.footer-home-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 18px;
  border: 1px solid var(--orange);
  color: var(--orange);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .11em;
  text-decoration: none;
  transition: background .2s, color .2s;
}

.back-home-cta:hover,
.back-home-cta:focus-visible,
.footer-home-cta:hover,
.footer-home-cta:focus-visible {
  background: var(--orange);
  color: var(--deep);
}

/* One fixed Work Equation indicator: current chapter / vertical rule / total. */
.project-progress-rail {
  position: fixed;
  z-index: 100;
  top: 50%;
  right: clamp(16px, 3vw, 48px);
  display: grid;
  justify-items: center;
  gap: .65rem;
  min-width: 38px;
  padding: 12px 9px;
  border: 1px solid var(--deep);
  background: var(--pink);
  color: var(--deep);
  transform: translateY(-50%);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
}

.project-progress-current { color: var(--deep); }
.project-progress-rail i {
  position: relative;
  display: block;
  width: 2px;
  height: 88px;
  overflow: hidden;
  background: color-mix(in srgb, var(--deep) 24%, transparent);
}
.project-progress-rail i::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--deep);
  transform: scaleY(var(--page-progress));
  transform-origin: top;
  transition: transform 120ms linear;
}

/* ------------------------------------------------------------
   SHARED TYPE
------------------------------------------------------------ */
.eyebrow,
.micro-label {
  margin: 0;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

h1, h2, h3 {
  font-family: 'Unbounded', Arial, sans-serif;
}

/* ------------------------------------------------------------
   HERO
------------------------------------------------------------ */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: grid;
  align-items: start;
  padding: calc(90px + var(--section-space)) 6.4vw var(--section-space);
  overflow: hidden;
  background: var(--deep);
  color: var(--light);
}

.hero-grid,
.national-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--orange) 22%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--orange) 14%, transparent) 1px, transparent 1px);
  background-size: 10vw 10vw;
  mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
}

.hero-grid { z-index: 0; }

.hero-copy {
  position: relative;
  z-index: 2;
  width: min(920px, 78vw);
}

.hero .eyebrow { color: var(--pink); }

.hero h1 {
  max-width: 1100px;
  margin: .22em 0 .3em;
  font-size: clamp(4.7rem, 9.2vw, 9rem);
  font-weight: 800;
  line-height: .88;
  letter-spacing: -.09em;
  text-transform: uppercase;
}
.hero-title-mobile { display: none; }

.hero-deck {
  max-width: 680px;
  margin: 0;
  font-size: clamp(1.18rem, 1.8vw, 1.55rem);
  line-height: 1.5;
}

.hero-rule {
  display: flex;
  width: min(680px, 100%);
  margin-top: 2.2rem;
  border: 1px solid var(--orange);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.hero-rule span {
  flex: 1;
  padding: 1.1rem;
}

.hero-rule span:first-child {
  background: var(--orange);
  color: var(--light);
}

.hero-rule span:last-child {
  background: var(--pink);
  color: var(--deep);
}

.scroll-link {
  display: inline-flex;
  gap: 1rem;
  align-items: center;
  margin-top: 2rem;
  color: var(--light);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-decoration: none;
  text-transform: uppercase;
}

.scroll-link span {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border: 1px solid var(--orange);
  border-radius: 50%;
  transition: transform 220ms ease, background 220ms ease, color 220ms ease;
}

.scroll-link:hover span {
  transform: translateY(5px);
  background: var(--pink);
  color: var(--deep);
}

.shape {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
}

.shape-ring {
  top: 14%;
  right: 10%;
  width: clamp(160px, 24vw, 360px);
  aspect-ratio: 1;
  border: clamp(18px, 2.4vw, 38px) solid var(--orange);
  border-radius: 50%;
  transform: translateY(calc(var(--section-progress) * -180px)) rotate(calc(var(--section-progress) * 35deg));
}

.shape-ring::after {
  content: '';
  position: absolute;
  inset: 18%;
  border: 2px solid var(--pink);
  border-radius: 50%;
}

.shape-disc {
  right: -8vw;
  bottom: -12vw;
  width: 32vw;
  min-width: 270px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--pink);
  transform: translateY(calc(var(--section-progress) * -110px));
}

.shape-cross {
  top: 27%;
  right: 38%;
  color: var(--light);
  font-size: clamp(5rem, 10vw, 10rem);
  font-weight: 200;
  line-height: 1;
  transform: translateY(calc(var(--section-progress) * 120px)) rotate(calc(var(--section-progress) * 90deg));
}

/* ------------------------------------------------------------
   AUSTRALIA — PINNED SCROLL STORY
------------------------------------------------------------ */
.national-story {
  position: relative;
  background: var(--orange);
  color: var(--deep);
}

.scrolly-layout {
  width: min(1440px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr);
  gap: 3vw;
  padding: 0 5vw;
}

.national-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.national-grid {
  opacity: .44;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--deep) 17%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--deep) 12%, transparent) 1px, transparent 1px);
}

.national-stage > :not(.national-grid) {
  position: relative;
  z-index: 2;
}

.national-stage h2 {
  max-width: 700px;
  margin: .3em 0 0;
  font-size: clamp(2.8rem, 5vw, 5.4rem);
  font-weight: 800;
  line-height: .94;
  letter-spacing: -.08em;
}

.national-number-wrap { margin-top: 2.8rem; }

.national-number {
  display: block;
  font-family: 'Space Grotesk', Arial, sans-serif;
  font-size: clamp(4.4rem, 8.6vw, 9.5rem);
  font-weight: 700;
  line-height: .82;
  letter-spacing: -.07em;
}

.national-number-wrap p {
  margin: 1rem 0 0;
  font-size: clamp(1rem, 1.35vw, 1.25rem);
  line-height: 1.45;
}

.national-number-wrap .national-disclaimer {
  max-width: 500px;
  margin-top: 1.7rem;
  color: color-mix(in srgb, var(--light) 82%, transparent);
  font-size: clamp(.82rem, 1vw, 1rem);
  line-height: 1.5;
}
.national-disclaimer span {
  color: var(--pink);
  font-weight: 800;
}

.growth-orbit {
  position: absolute !important;
  right: 2vw;
  bottom: 8vh;
  width: min(28vw, 380px);
  overflow: visible;
  transform: translateY(calc((.5 - var(--section-progress)) * 80px)) rotate(-90deg);
}

.growth-orbit circle { fill: none; }
.orbit-track { stroke: color-mix(in srgb, var(--deep) 28%, transparent); stroke-width: 2; }
.orbit-inner { stroke: var(--light); stroke-width: 2; }

.orbit-progress {
  stroke: var(--pink);
  stroke-width: 28;
  stroke-linecap: butt;
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - (var(--section-progress) * .74));
}

.growth-orbit text {
  fill: var(--deep);
  font-family: 'Space Grotesk', Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  transform: rotate(90deg);
  transform-origin: center;
}

.growth-orbit .orbit-value {
  fill: var(--deep);
  font-size: 38px;
  letter-spacing: -.04em;
}

.story-steps {
  display: grid;
  align-content: start;
  gap: 58svh;
  padding: 60svh 0 68svh;
}

.story-step {
  min-height: 190px;
  padding: 1.6rem;
  border: 1px solid var(--deep);
  border-top: 3px solid var(--pink);
  background: var(--light);
  color: var(--deep);
}

.story-step > span { color: var(--orange); font-size: .65rem; font-weight: 700; }
.story-step p { margin: 2rem 0 0; font-size: clamp(1.35rem, 2vw, 2rem); line-height: 1.2; }
.story-step strong { color: var(--orange); }

.national-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--deep);
}

.national-metric {
  min-height: 280px;
  padding: 2.5rem 2.2rem;
  border-right: 1px solid var(--deep);
  background: var(--light);
  color: var(--deep);
}

.national-metric:last-child { border-right: 0; }

.national-metric strong {
  display: block;
  margin-top: 3rem;
  font-family: 'Space Grotesk', Arial, sans-serif;
  font-size: clamp(2.8rem, 4.5vw, 5.3rem);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.06em;
}

.national-metric > p:last-child { margin: 1rem 0 0; }
.tone-accent { background: var(--pink); }
.tone-primary { background: var(--deep); color: var(--light); }

/* ------------------------------------------------------------
   STATES + SHARED SECTION HEADINGS
------------------------------------------------------------ */
.states-section,
.comparison-section,
.sources-section {
  padding: var(--section-space) 5vw;
}

/* Adjacent sections use one shared gap instead of stacking two large paddings. */
.states-section,
.comparison-section { padding-bottom: 0; }

.section-heading {
  display: grid;
  grid-template-columns: 1fr minmax(260px, .45fr);
  gap: 3rem;
  align-items: end;
  margin-bottom: clamp(2.75rem, 4vw, 4.5rem);
}

.section-heading .eyebrow {
  grid-column: 1 / -1;
  color: var(--orange);
}

.section-heading h2 {
  max-width: 1100px;
  margin: 0;
  font-size: clamp(3rem, 5.9vw, 6.4rem);
  font-weight: 800;
  line-height: .94;
  letter-spacing: -.09em;
}

.section-heading > p:last-child {
  margin: 0;
  font-size: clamp(1rem, 1.3vw, 1.28rem);
  line-height: 1.55;
}

.section-heading.compact { grid-template-columns: minmax(0, 1fr) minmax(280px, .42fr); }

.state-list { border-top: 2px solid var(--deep); }

.state-row {
  --bar: 50%;
  --delay: 0ms;
  display: grid;
  grid-template-columns: 52px minmax(190px, .75fr) minmax(220px, 1.6fr) 150px 70px;
  gap: 1.5rem;
  align-items: center;
  min-height: 110px;
  border-bottom: 1px solid var(--deep);
  transition-delay: var(--delay) !important;
}

.state-rank { font-size: .65rem; font-weight: 700; }

.state-name {
  display: grid;
  grid-template-columns: 54px 1fr;
  align-items: baseline;
}

.state-name strong { font-size: 1.35rem; }
.state-name span { font-size: .82rem; }

.state-bar-track { height: 18px; border: 1px solid var(--deep); }

.state-bar-fill {
  width: 0;
  height: 100%;
  background: var(--orange);
  transition: width 900ms cubic-bezier(.2, .75, .2, 1) var(--delay);
}

.state-row.is-visible .state-bar-fill { width: var(--bar); }

.state-population {
  color: var(--orange);
  font-family: 'Space Grotesk', Arial, sans-serif;
  font-size: clamp(1.8rem, 3vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -.06em;
}

.state-growth { color: var(--orange); font-size: .82rem; font-weight: 700; }

.source-rail {
  margin: 2rem 0 0;
  padding: 1rem 0;
  border-bottom: 1px solid var(--deep);
  color: var(--orange);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------
   COMPARISON CHART
------------------------------------------------------------ */
.comparison-section { background: var(--light); }

.census-chart {
  position: relative;
  padding: 2.5rem 0 1.5rem;
  overflow: hidden;
  border-top: 2px solid var(--deep);
  border-bottom: 1px solid var(--deep);
}

.chart-key {
  display: flex;
  justify-content: flex-end;
  gap: 1.5rem;
  padding-right: 2rem;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
}

.chart-key span { display: flex; align-items: center; gap: .5rem; }
.chart-key i { width: 10px; height: 10px; border-radius: 50%; }
.primary-dot { background: var(--orange); }
.accent-dot { background: var(--pink); }
.census-chart svg { display: block; width: 100%; max-width: 100%; height: auto; margin-top: .5rem; }
.chart-grid line { stroke: color-mix(in srgb, var(--deep) 18%, transparent); stroke-width: 1; }

.chart-line {
  fill: none;
  stroke-width: 7;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1250ms cubic-bezier(.4, 0, .2, 1);
}

.census-chart.is-visible .chart-line { stroke-dashoffset: 0; }
.full-line { stroke: var(--orange); }
.part-line { stroke: var(--pink); }

.chart-point {
  opacity: 0;
  transition: opacity 260ms ease var(--delay);
}

.census-chart.is-visible .chart-point { opacity: 1; }
.point-full { fill: var(--orange); }
.point-part { fill: var(--pink); }

.census-chart text {
  fill: var(--deep);
  font-family: 'Space Grotesk', Arial, sans-serif;
  font-size: 18px;
  font-weight: 700;
}

.census-chart .label-full { fill: var(--orange); }
.census-chart .label-part { fill: var(--deep); }
.census-chart .year-label { font-size: 16px; }

.chart-summary {
  display: flex;
  gap: .65rem;
  align-items: baseline;
  padding: 0 1rem;
}

.chart-summary strong { color: var(--orange); font-size: 2rem; }
.chart-summary strong:nth-of-type(2) { margin-left: 2rem; color: var(--deep); background: var(--pink); padding: .08em .22em; }
.chart-summary span { font-size: .76rem; font-weight: 700; text-transform: uppercase; }

/* ------------------------------------------------------------
   PARTICIPATION BAND
------------------------------------------------------------ */
.participation-band {
  display: grid;
  grid-template-columns: minmax(300px, .75fr) minmax(500px, 1.25fr);
  gap: 6vw;
  align-items: center;
  margin: var(--section-space) -5vw 0;
  padding: var(--section-space) 5vw;
  background: var(--deep);
  color: var(--light);
}

.participation-band h3 {
  max-width: 700px;
  margin: .35em 0;
  font-size: clamp(2.8rem, 4.6vw, 5.4rem);
  font-weight: 800;
  line-height: .96;
  letter-spacing: -.085em;
}

.participation-band > div:first-child > p:last-child {
  max-width: 620px;
  color: color-mix(in srgb, var(--light) 78%, transparent);
  line-height: 1.55;
}

.participation-band .eyebrow { color: var(--pink); }

.participation-chart {
  display: grid;
  gap: 1.2rem;
}

.participation-stacked-bar {
  display: flex;
  width: 100%;
  height: 60px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--light) 48%, transparent);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 950ms cubic-bezier(.2, .8, .2, 1);
}

.participation-band.is-visible .participation-stacked-bar { clip-path: inset(0); }

.participation-segment {
  display: block;
  height: 100%;
  flex: var(--value) 1 0;
}

.participation-segment.employed { background: var(--orange); }
.participation-segment.participating { background: var(--light); }
.participation-segment.unemployed { background: var(--pink); }

.participation-labels {
  display: grid;
  /* Match the three label columns to the three coloured bar segments. */
  grid-template-columns: minmax(0, 95.4fr) minmax(0, 66.9fr) minmax(0, 4.6fr);
}

.participation-label { min-width: 0; }
.participation-label:last-child {
  width: max-content;
  max-width: 130px;
  justify-self: end;
  text-align: right;
}
.participation-label strong,
.participation-label span { display: block; }
.participation-label strong { font-size: 2.4rem; letter-spacing: -.05em; }
.participation-label span { margin-top: .35rem; font-size: .72rem; line-height: 1.35; }

/* ------------------------------------------------------------
   SOURCES + FOOTER
------------------------------------------------------------ */
.sources-section { background: var(--light); }

.method-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--orange);
  border-left: 1px solid var(--orange);
}

.method-grid article {
  min-height: 280px;
  padding: 2rem;
  border-right: 1px solid var(--orange);
  border-bottom: 1px solid var(--orange);
}

.method-grid article > span { color: var(--orange); font-size: .7rem; font-weight: 700; }
.method-grid h3 { margin: 4rem 0 .7rem; font-size: 1.28rem; line-height: 1.15; }
.method-grid p { margin: 0; line-height: 1.5; }

.source-links {
  display: grid;
  grid-template-columns: 1fr 2fr;
  margin-top: 5rem;
  border-top: 1px solid var(--deep);
}

.source-links p,
.source-links a {
  margin: 0;
  padding: 1rem 0;
  border-bottom: 1px solid var(--deep);
  font-size: .78rem;
}

.source-links p {
  grid-row: 1 / 6;
  color: var(--orange);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.source-links a {
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.source-links a:hover { color: var(--orange); }

.project-note {
  max-width: 920px;
  margin: 3rem 0 0 auto;
  font-size: .8rem;
  line-height: 1.55;
}

footer {
  display: grid;
  grid-template-columns: .5fr 1.4fr .35fr;
  gap: 4rem;
  align-items: start;
  padding: 4rem 5vw 6rem;
  background: var(--deep);
  color: var(--light);
  font-size: 11px;
  letter-spacing: .13em;
}

footer p { margin: 0; }
footer span:first-child { color: var(--orange); }
footer a { justify-self: end; color: var(--pink); text-decoration: none; }

/* ------------------------------------------------------------
   REVEAL MOTION
------------------------------------------------------------ */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 600ms ease, transform 700ms cubic-bezier(.2, .75, .2, 1);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ------------------------------------------------------------
   TABLET
------------------------------------------------------------ */
@media (max-width: 1050px) {
  .hero-copy { width: 86vw; }
  .shape-ring { right: 2%; opacity: .75; }
  .scrolly-layout { grid-template-columns: minmax(0, 1fr) 300px; }
  .growth-orbit { width: 300px; opacity: .7; }
  .national-metrics { grid-template-columns: repeat(2, 1fr); }
  .national-metric { border-bottom: 1px solid var(--deep); }
  .state-row { grid-template-columns: 42px minmax(180px, .8fr) minmax(160px, 1fr) 120px 60px; gap: 1rem; }
  .participation-band { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   MOBILE
------------------------------------------------------------ */
@media (max-width: 760px) {
  html { scroll-padding-top: 72px; }

  .site-header { height: 72px; padding: 16px 20px; }
  .wordmark { font-size: 13px; }
  .back-home-cta { padding: 9px 10px; font-size: 10px; }
  .project-progress-rail {
    top: auto;
    right: 20px;
    bottom: max(18px, env(safe-area-inset-bottom));
    width: clamp(112px, 25vw, 158px);
    min-width: 0;
    padding: 8px 10px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    font-size: 8px;
    transform: none;
  }
  .project-progress-rail i {
    width: clamp(30px, 8vw, 50px);
    height: 2px;
  }
  .project-progress-rail i::after {
    transform: scaleX(var(--page-progress));
    transform-origin: left;
  }

  .hero {
    min-height: max(100svh, 780px);
    padding: calc(72px + var(--section-space-mobile)) 20px var(--section-space-mobile);
    align-items: start;
  }

  .hero-grid { background-size: 25vw 25vw; }
  .hero-copy { width: 100%; max-width: 100%; }
  .hero h1 {
    max-width: 100%;
    margin-top: .45em;
    font-size: clamp(2.25rem, 10.8vw, 4.6rem);
    line-height: .9;
  }
  .hero-title-desktop { display: none; }
  .hero-title-mobile { display: inline; }
  .hero-deck { max-width: 100%; font-size: 1rem; line-height: 1.45; }
  .hero-rule { display: grid; width: 100%; margin-top: 1.5rem; }
  .hero-rule span { min-width: 0; padding: .9rem; }
  .shape-ring {
    top: 32%;
    right: -18vw;
    /* MOBILE HERO SHAPES: adjust `top` to raise/lower the ring behind the
       deck/rule. Copy remains above it because `.hero-copy` is z-index 2. */
    bottom: auto;
    width: 52vw;
    opacity: .75;
    transform: translateY(calc(var(--section-progress) * -180px)) rotate(calc(var(--section-progress) * 35deg));
  }
  .shape-disc {
    top: 34%;
    right: -8vw;
    bottom: auto;
    width: 32vw;
    min-width: 270px;
    opacity: .35;
    transform: translateY(calc(var(--section-progress) * -110px));
  }
  .shape-cross {
    top: 23%;
    right: 38%;
    bottom: auto;
    opacity: .35;
    transform: translateY(calc(var(--section-progress) * 120px)) rotate(calc(var(--section-progress) * 90deg));
  }
  .scrolly-layout { display: block; padding: 0 1.1rem; }

  .national-stage {
    top: 72px;
    height: calc(100svh - 72px);
    /* Match the 3.25rem opening rhythm used by sections 02–05. */
    justify-content: flex-start;
    padding-top: var(--section-space-mobile);
  }

  .national-stage h2 { max-width: 86%; font-size: clamp(2.45rem, 10vw, 4.1rem); }
  .national-number { font-size: clamp(3.15rem, 13.2vw, 5.7rem); }
  .national-number-wrap .national-disclaimer {
    max-width: calc(100% - 56px);
    margin-top: 1.25rem;
    font-size: .82rem;
  }
  .growth-orbit { right: -70px; bottom: 6vh; width: 260px; opacity: .48; }

  .story-steps {
    position: relative;
    z-index: 3;
    gap: 72svh;
    padding: 78svh 0 72svh;
  }

  .story-step { min-height: 170px; padding: 1.25rem; }
  .story-step p { margin-top: 1.4rem; font-size: 1.35rem; }
  .national-metrics { grid-template-columns: 1fr; }
  .national-metric { min-height: 220px; border-right: 0; }

  .states-section,
  .comparison-section,
  .sources-section { padding: var(--section-space-mobile) 1.1rem; }

  .states-section,
  .comparison-section { padding-bottom: 0; }

  .section-heading,
  .section-heading.compact {
    grid-template-columns: 1fr;
    gap: 1.35rem;
    margin-bottom: 2.75rem;
  }
  .section-heading h2 { font-size: clamp(2.55rem, 11vw, 4.6rem); }

  .state-row {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: .8rem;
    min-height: 105px;
    padding: 1rem 0;
  }

  .state-name { grid-template-columns: 48px 1fr; }
  .state-name span { font-size: .72rem; }
  .state-bar-track { grid-column: 2 / -1; grid-row: 2; }
  .state-population { grid-column: 3; grid-row: 1; font-size: 1.65rem; }
  .state-growth { grid-column: 1; grid-row: 2; font-size: .7rem; }

  .census-chart { margin: 0; padding: 1.5rem 0 1.25rem; overflow: hidden; }
  .census-chart svg { width: 100%; max-width: 100%; height: auto; }
  .chart-key { justify-content: flex-start; padding-right: 0; }
  .chart-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: .45rem .8rem;
    align-items: baseline;
    padding: 1.5rem 0 .25rem;
  }
  .chart-summary strong { font-size: clamp(2rem, 11vw, 3.25rem); }
  .chart-summary strong:nth-of-type(2) { margin-left: 0; }

  .participation-band {
    grid-template-columns: 1fr;
    margin: var(--section-space-mobile) -1.1rem 0;
    padding: var(--section-space-mobile) 1.1rem;
  }

  .participation-band h3 { font-size: clamp(2.5rem, 10vw, 4.2rem); }
  .participation-stacked-bar { height: 44px; }
  /* Mobile legend: stack the figures beneath the bar like the original layout. */
  .participation-labels { display: block; }
  .participation-label,
  .participation-label:last-child {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    column-gap: 1rem;
    align-items: center;
    width: 100%;
    max-width: none;
    min-height: 76px;
    padding: .9rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--light) 22%, transparent);
    text-align: left;
  }
  .participation-label strong { font-size: 1.8rem; }
  .participation-label span,
  .participation-label:nth-child(2) span,
  .participation-label:last-child span {
    max-width: none;
    margin: 0;
    font-size: .68rem;
    line-height: 1.35;
  }

  .method-grid { grid-template-columns: 1fr; }
  .method-grid article { min-height: 220px; }
  .method-grid h3 { margin-top: 3rem; }

  .source-links { grid-template-columns: 1fr; }
  .source-links p { grid-row: auto; }

  footer { grid-template-columns: 1fr; gap: 1.2rem; padding: 3rem 1.1rem; }
  footer a { justify-self: start; }
}

@media (max-width: 390px) {
  .wordmark { font-size: 11px; }
  .back-home-cta { padding: 8px; font-size: 9px; }
  .hero h1 { font-size: 10.6vw; }
  .national-number { font-size: 12.3vw; }
}

/* Accessibility: show final states and remove scroll interpolation. */
@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .state-bar-fill { width: var(--bar); }
  .chart-line { stroke-dashoffset: 0; }
  .chart-point { opacity: 1; }
  .participation-stacked-bar { clip-path: none; }
}