/* ============================================================================
   The Sharehouse Generation Report 2026, V2
   Built in the Homerun HOME design system (docs/design-directions.md).
   DM Sans. Orange 500 #fc8b21 for FILLS ONLY. Brand text uses orange-700
   #d66406 (orange-500 on the warm ground is 2.2:1 and fails WCAG).
   No CSS gradient is used as a surface fill; the warm ground is built from
   the light orange steps the way SwitchHomeWarmGround.astro does it.
   Borders define structure. One box-shadow only, on the primary button.
   Spacing scale: 4 8 12 16 24 32 40 48 64 80 96 128 160. Nothing else.
   Light-committed by design: this is a warm, paper-toned brand surface.
   ========================================================================= */

:root{
  /* orange ramp */
  --orange-50:#fff6ed;  --orange-100:#ffe5cc; --orange-200:#fcc592;
  --orange-300:#fcb26d; --orange-400:#fc9e47; --orange-500:#fc8b21;
  --orange-600:#f07e13; --orange-700:#d66406; --orange-800:#b85006;
  --orange-900:#993f08;
  /* neutral ramp */
  --neutral-50:#fdfcfc;  --neutral-100:#f5f5f4; --neutral-200:#e9e8e7;
  --neutral-300:#d7d6d5; --neutral-400:#b7b4b3; --neutral-500:#938d8a;
  --neutral-600:#706966; --neutral-700:#5c5451; --neutral-800:#3f3b37;
  --neutral-900:#24211e;
  --green-500:#5f7846;

  /* semantic */
  --background-1:var(--neutral-50);
  --background-2:var(--neutral-100);
  --text-primary:var(--neutral-900);
  --text-secondary:var(--neutral-600);
  --text-muted:var(--neutral-400);
  --accent:var(--orange-500);
  --accent-text:var(--orange-700);
  --on-accent:var(--neutral-900);
  --border:color-mix(in srgb, var(--text-primary) 15%, transparent);
  --border-strong:color-mix(in srgb, var(--text-primary) 28%, transparent);
  --border-width:0.094rem;

  /* spacing */
  --space-4:.25rem;  --space-8:.5rem;   --space-12:.75rem; --space-16:1rem;
  --space-24:1.5rem; --space-32:2rem;   --space-40:2.5rem; --space-48:3rem;
  --space-64:4rem;   --space-80:5rem;   --space-96:6rem;   --space-128:8rem;
  --space-160:10rem;

  --radius-sm:.25rem; --radius-md:.5rem; --radius-lg:1rem; --radius-full:9999px;
  --section-padding-y:var(--space-128);
  --margin:var(--space-64);
  --gutter:var(--space-24);
  --tracking-label:.05em;
  font-family:"DM Sans","Helvetica Neue",Arial,sans-serif;
}
@media (max-width:61.9375rem){
  :root{--section-padding-y:var(--space-96); --margin:var(--space-40)}
}
@media (max-width:47.9375rem){
  :root{--section-padding-y:3.5rem; --margin:var(--space-24)}
}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0; background:var(--background-1); color:var(--text-primary);
  font-family:"DM Sans","Helvetica Neue",Arial,sans-serif;
  font-weight:500; font-size:1rem; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}

h1,h2,h3,h4,h5,h6{
  font-weight:600; font-feature-settings:'lnum'; margin:0 0 var(--space-24);
  letter-spacing:-.015em; text-wrap:balance;
}
h1{font-size:2.75rem; line-height:3.25rem; margin-bottom:var(--space-32)}
h2{font-size:2.5rem;  line-height:3rem;    margin-bottom:var(--space-32)}
h3{font-size:2rem;    line-height:2.5rem}
h4{font-size:1.75rem; line-height:2.25rem; margin-bottom:var(--space-12)}
h5{font-size:1.5rem;  line-height:2rem;    margin-bottom:var(--space-12); letter-spacing:-.025em}
h6{font-size:1.25rem; line-height:1.5rem;  margin-bottom:var(--space-8);  letter-spacing:-.025em}
@media (max-width:61.9375rem){
  h1{font-size:2.5rem;line-height:3rem} h2{font-size:2.25rem;line-height:2.75rem}
  h3{font-size:1.75rem;line-height:2.25rem} h4{font-size:1.5rem;line-height:1.75rem}
  h5{font-size:1.25rem;line-height:1.5rem} h6{font-size:1.13rem;line-height:1.5rem}
}
@media (max-width:47.9375rem){
  h1{font-size:2.25rem;line-height:2.5rem} h2{font-size:2rem;line-height:2.25rem}
}
h1:last-child,h2:last-child,h3:last-child,h4:last-child,h5:last-child,h6:last-child{margin-bottom:0}
p{margin:0 0 var(--space-16); text-wrap:pretty}
p:last-child{margin-bottom:0}
a{color:var(--accent-text)}

.shell{max-width:120rem; margin-inline:auto; padding-inline:var(--margin)}
section{padding-block:var(--section-padding-y)}
.band-2{background:var(--background-2)}
.eyebrow{
  font-size:.75rem; font-weight:600; letter-spacing:var(--tracking-label);
  text-transform:uppercase; color:var(--accent-text); margin:0 0 var(--space-12);
}
.sec-head{max-width:40rem; margin-bottom:var(--space-64)}
.sec-head p{color:var(--text-secondary); font-size:1.125rem}
.lede{font-size:1.25rem; line-height:1.7; color:var(--text-secondary); max-width:38rem}

/* ---- buttons (Button.astro geometry, deliberately off the spacing scale) -- */
.btn{
  display:inline-flex; align-items:center; gap:.75rem; text-decoration:none;
  padding:.875rem 1.375rem .875rem 1.625rem; border-radius:var(--radius-full);
  font-weight:600; font-size:1rem; line-height:1.2; cursor:pointer;
  border:var(--border-width) solid transparent; font-family:inherit;
  transition:box-shadow .2s ease, border-color .2s ease;
}
.btn-primary{background:var(--accent); color:var(--on-accent)}
.btn-primary:hover{box-shadow:0 0 1.25rem .125rem color-mix(in srgb, var(--accent) 45%, transparent)}
.btn-secondary{background:transparent; color:var(--text-primary); border-color:var(--border-strong)}
.btn-secondary:hover{border-color:var(--text-primary)}
.btn .arw{transition:transform .2s ease}
.btn:hover .arw{transform:translateX(.25rem)}
.button-wrapper{display:flex; flex-wrap:wrap; gap:var(--space-16); margin-top:var(--space-40)}

/* ---- reveal ------------------------------------------------------------- */
.js .reveal{opacity:0; transform:translateY(1.25rem); transition:opacity .7s ease, transform .7s ease}
.js .reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  .js .reveal{opacity:1; transform:none; transition:none}
}
:focus-visible{outline:.1875rem solid var(--orange-700); outline-offset:.1875rem; border-radius:var(--radius-sm)}

/* ---- reading progress --------------------------------------------------- */
.progress{
  position:fixed; inset-block-start:0; inset-inline:0; height:.1875rem;
  background:var(--accent); transform-origin:0 50%; transform:scaleX(0);
  z-index:60; pointer-events:none;
}

/* ---- nav ---------------------------------------------------------------- */
.topbar{
  position:sticky; inset-block-start:0; z-index:50;
  background:color-mix(in srgb, var(--neutral-50) 88%, transparent);
  backdrop-filter:blur(.625rem);
  border-block-end:var(--border-width) solid var(--border);
}
.topbar .shell{display:flex; align-items:center; gap:var(--space-24); min-height:4rem}
.wordmark{font-weight:600; font-size:1.0625rem; text-decoration:none; color:var(--text-primary); letter-spacing:-.015em}
.wordmark em{font-style:normal; color:var(--accent-text)}
.navlinks{display:flex; gap:var(--space-24); margin-inline-start:auto; align-items:center}
.navlinks a{font-size:.875rem; text-decoration:none; color:var(--text-secondary); font-weight:500}
.navlinks a:hover{color:var(--text-primary)}
.menu-btn{display:none}
@media (max-width:61.9375rem){
  .navlinks{
    display:none; position:absolute; inset-block-start:100%; inset-inline:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--background-1); border-block-end:var(--border-width) solid var(--border);
    padding:var(--space-8) var(--margin) var(--space-24);
  }
  .navlinks[data-open="true"]{display:flex}
  .navlinks a{padding-block:var(--space-12); border-block-start:var(--border-width) solid var(--border)}
  .menu-btn{
    display:inline-flex; margin-inline-start:auto; align-items:center; gap:var(--space-8);
    background:none; border:var(--border-width) solid var(--border-strong);
    border-radius:var(--radius-full); padding:.4375rem .875rem; font:inherit;
    font-size:.875rem; font-weight:600; cursor:pointer; color:var(--text-primary);
  }
}

/* ---- warm ground (zero-JS stand-in for the GrainGradient shader) -------- */
.warm{position:relative; isolation:isolate; overflow:clip}
.warm::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.8;
  background:
    radial-gradient(ellipse 55% 60% at 6% -8%, var(--orange-200), transparent 70%),
    radial-gradient(ellipse 55% 60% at 94% -8%, var(--orange-200), transparent 70%),
    radial-gradient(ellipse 90% 70% at 50% -10%, var(--orange-100), transparent 75%);
}
.warm > *{position:relative; z-index:1}

/* ---- hero --------------------------------------------------------------- */
.hero{padding-block:var(--space-128) var(--space-80)}
.hero-display{
  font-size:clamp(3rem, 8vw, 6.5rem); line-height:.96; font-weight:600;
  letter-spacing:-.03em; margin:0 0 var(--space-32); max-width:22ch;
}
.hero-display .hl{color:var(--accent-text)}
.hero h1{
  font-size:1.375rem; line-height:1.7; font-weight:500; letter-spacing:0;
  color:var(--text-secondary); max-width:46rem; margin-bottom:var(--space-32);
  text-wrap:pretty;
}
.chips{display:flex; flex-wrap:wrap; gap:var(--space-12); margin-block:var(--space-32)}
.chip{
  display:inline-flex; align-items:baseline; gap:.4375rem;
  background:var(--neutral-50); border:var(--border-width) solid var(--border);
  border-radius:var(--radius-full); padding:.5rem 1rem; font-size:.875rem;
  color:var(--text-secondary);
}
.chip b{font-size:1.0625rem; color:var(--text-primary); font-weight:600; font-feature-settings:'lnum'}
.methodline{
  font-size:.8125rem; line-height:1.6; color:var(--text-secondary);
  max-width:52rem; margin-block-start:var(--space-32);
  border-inline-start:.1875rem solid var(--orange-300);
  padding-inline-start:var(--space-16);
}

/* ---- stat primitives ---------------------------------------------------- */
.statgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gutter)}
@media (max-width:61.9375rem){.statgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:47.9375rem){.statgrid{grid-template-columns:1fr}}
.stat{
  position:relative; background:var(--background-1); border-radius:var(--radius-lg);
  border:var(--border-width) solid var(--border); padding:var(--space-32);
}
.stat .num{
  font-size:clamp(2.5rem,5vw,3.5rem); line-height:1.05; font-weight:600;
  letter-spacing:-.03em; font-feature-settings:'lnum'; color:var(--text-primary);
}
.stat .lbl{margin-block-start:var(--space-12); color:var(--text-secondary); font-size:.9375rem}
/* Scott, 14 Sep: the three cards in the finding lead the section, so the figure
   is centred and both it and its supporting line are sized up. Scoped to #gap so
   the census cards keep their own scale. */
#gap .stat .num{font-size:clamp(3rem,6vw,4.5rem); text-align:center}
#gap .stat .lbl{font-size:1.125rem}
.src{
  margin-block-start:var(--space-16); font-size:.6875rem; line-height:1.5;
  color:var(--text-muted); letter-spacing:.01em;
}
.src a{color:var(--text-muted); text-decoration:underline; text-underline-offset:.125rem}
.copybtn{
  position:absolute; inset-block-start:var(--space-12); inset-inline-end:var(--space-12);
  background:var(--neutral-100); border:var(--border-width) solid var(--border);
  border-radius:var(--radius-full); font:inherit; font-size:.625rem; font-weight:600;
  letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--text-secondary);
  padding:.3125rem .625rem; cursor:pointer; opacity:0; transition:opacity .2s ease;
}
.stat:hover .copybtn,.copybtn:focus-visible{opacity:1}
@media (hover:none){.copybtn{opacity:1}}

/* ---- section 2: the diverging curves ------------------------------------ */
.gapwrap{
  background:var(--background-1); border:var(--border-width) solid var(--border);
  border-radius:var(--radius-lg); padding:var(--space-40);
}
@media (max-width:47.9375rem){.gapwrap{padding:var(--space-24)}}
.chart{width:100%; height:auto; display:block; overflow:visible}
.chart .grid-l{stroke:var(--border); stroke-width:1}
.chart .axis-t{fill:var(--text-muted); font-size:11px; font-weight:600; font-family:inherit}
.chart .lab{fill:var(--text-primary); font-size:13px; font-weight:600; font-family:inherit}
.chart .lab-sub{fill:var(--text-secondary); font-size:11px; font-weight:500; font-family:inherit}
.chart .ln{fill:none; stroke-width:3.5; stroke-linecap:round; stroke-linejoin:round}
.chart .ln-a{stroke:var(--orange-500)}
.chart .ln-b{stroke:var(--neutral-800)}
.chart .dot-a{fill:var(--orange-500)}
.chart .dot-b{fill:var(--neutral-800)}
.chart .drawn{stroke-dasharray:var(--len); stroke-dashoffset:var(--len); transition:stroke-dashoffset 1.8s ease}
.in .chart .drawn{stroke-dashoffset:0}
.chart .fade{opacity:0; transition:opacity .5s ease .9s}
.in .chart .fade{opacity:1}
@media (max-width:47.9375rem){
  .chart .axis-t{font-size:17px} .chart .lab{font-size:21px} .chart .lab-sub{font-size:17px}
  .chart .ln{stroke-width:5.5}
}
@media (prefers-reduced-motion:reduce){
  .chart .drawn{stroke-dashoffset:0; transition:none}
  .chart .fade{opacity:1; transition:none}
}
.legend{display:flex; flex-wrap:wrap; gap:var(--space-24); margin-block-start:var(--space-24)}
.legend span{display:inline-flex; align-items:center; gap:var(--space-8); font-size:.875rem; color:var(--text-secondary)}
.swatch{width:1.25rem; height:.1875rem; border-radius:var(--radius-full); flex:none}
.readout{
  display:grid; grid-template-columns:repeat(6,1fr); gap:var(--space-8);
  margin-block-start:var(--space-32); border-block-start:var(--border-width) solid var(--border);
  padding-block-start:var(--space-24);
}
@media (max-width:47.9375rem){.readout{grid-template-columns:repeat(3,1fr); gap:var(--space-16)}}
.readout div{font-size:.75rem; color:var(--text-secondary)}
.readout b{display:block; font-size:1.125rem; color:var(--text-primary); font-variant-numeric:tabular-nums lining-nums}
.readout i{display:block; font-style:normal; color:var(--text-muted); font-size:.6875rem}

/* two-column row, heading beside the panel (shape 2) */
.row2{display:grid; grid-template-columns:4fr 7fr; column-gap:var(--space-80); align-items:start}
.row2 > .side{position:sticky; top:var(--space-96); max-width:26rem}
@media (max-width:61.9375rem){
  .row2{grid-template-columns:1fr; row-gap:var(--space-48)}
  .row2 > .side{position:static; max-width:none}
}

/* ---- section 3: groups -------------------------------------------------- */
.groups{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gutter)}
@media (max-width:61.9375rem){.groups{grid-template-columns:1fr}}
.group{
  background:var(--background-1); border:var(--border-width) solid var(--border);
  border-radius:var(--radius-lg); padding:var(--space-32); display:flex; flex-direction:column;
}
.group .gnum{
  font-size:2.5rem; line-height:1.05; font-weight:600; letter-spacing:-.03em;
  color:var(--accent-text); font-feature-settings:'lnum';
}
.group .gden{font-size:.8125rem; color:var(--text-muted); margin-block-start:var(--space-4)}
.group h3{font-size:1.5rem; line-height:2rem; margin-block:var(--space-24) var(--space-12)}
.group p{font-size:.9375rem; color:var(--text-secondary)}
.slot{
  margin-block-start:auto; border:var(--border-width) dashed var(--border-strong);
  border-radius:var(--radius-md); padding:var(--space-16); font-size:.8125rem;
  color:var(--text-muted); background:var(--neutral-100);
}
.slot b{display:block; color:var(--text-secondary); font-weight:600; margin-block-end:var(--space-4)}
.aside-note{
  margin-block-start:var(--gutter); padding:var(--space-48);
  border-radius:var(--radius-lg); background:var(--orange-50);
  border:var(--border-width) solid var(--orange-200);
  display:grid; grid-template-columns:auto minmax(0,44rem); column-gap:var(--space-64);
  align-items:start; justify-content:start; max-width:80rem;
}
@media (max-width:61.9375rem){
  .aside-note{grid-template-columns:1fr; row-gap:var(--space-24); padding:var(--space-32)}
}
.aside-note .big{
  font-size:clamp(3.5rem,7vw,5.5rem); font-weight:600; letter-spacing:-.04em;
  color:var(--accent-text); font-feature-settings:'lnum'; line-height:.95;
}
.aside-note .body{max-width:44rem}
.aside-note .body p{font-size:1.125rem}

/* ---- section 4: doors --------------------------------------------------- */
.churn{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-64); align-items:center}
@media (max-width:61.9375rem){.churn{grid-template-columns:1fr; gap:var(--space-40)}}
.doorgrid{
  display:grid; grid-template-columns:repeat(10,1fr); gap:.375rem;
  max-width:26rem; aspect-ratio:1; width:100%;
}
.door{
  border-radius:var(--radius-sm); background:var(--neutral-200);
  transition:background-color .35s ease;
}
.door.hot{background:var(--orange-500)}
.facts{display:flex; flex-direction:column; gap:var(--space-32); max-width:26rem}
.fact .n{font-size:2.25rem; font-weight:600; letter-spacing:-.03em; line-height:1.1; font-feature-settings:'lnum'}
.fact .t{color:var(--text-secondary); font-size:.9375rem; margin-block-start:var(--space-8)}

/* ---- bars --------------------------------------------------------------- */
.bars{max-width:38rem}
.bar{margin-block-end:var(--space-24)}
.bar .top{display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-16); margin-block-end:var(--space-8)}
.bar .top span{font-size:.9375rem}
.bar .top b{font-size:1.125rem; font-variant-numeric:tabular-nums lining-nums; font-weight:600}
.track{height:.625rem; background:var(--neutral-200); border-radius:var(--radius-full); overflow:hidden}
.fill{height:100%; width:0; background:var(--accent); border-radius:var(--radius-full); transition:width 1.1s cubic-bezier(.22,1,.36,1)}
.fill.alt{background:var(--neutral-700)}

/* ---- section 6: cities -------------------------------------------------- */
.tabs{display:flex; flex-wrap:wrap; gap:var(--space-8); margin-block-end:var(--space-32)}
.tab{
  background:var(--neutral-50); border:var(--border-width) solid var(--border);
  border-radius:var(--radius-full); padding:.5rem 1rem; font:inherit; font-size:.9375rem;
  font-weight:600; cursor:pointer; color:var(--text-secondary);
}
.tab[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.citypanel{
  background:var(--background-1); border:var(--border-width) solid var(--border);
  border-radius:var(--radius-lg); padding:var(--space-40);
}
@media (max-width:47.9375rem){.citypanel{padding:var(--space-24)}}
.cityhead{display:grid; grid-template-columns:4fr 7fr; gap:var(--space-64); align-items:start}
@media (max-width:61.9375rem){.cityhead{grid-template-columns:1fr; gap:var(--space-32)}}
.citysig{font-size:1.75rem; line-height:2.25rem; font-weight:600; letter-spacing:-.015em; margin-block-end:var(--space-16)}
.cityline{color:var(--text-secondary); font-size:.9375rem}
.cityn{font-size:.75rem; color:var(--text-muted); margin-block-start:var(--space-16)}
.cstats{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-24)}
@media (max-width:47.9375rem){.cstats{grid-template-columns:repeat(2,1fr); gap:var(--space-16)}}
.cstat .cnum{font-size:1.75rem; font-weight:600; letter-spacing:-.03em; font-variant-numeric:tabular-nums lining-nums; line-height:1.1}
.cstat .clbl{font-size:.8125rem; color:var(--text-secondary); margin-block-start:var(--space-4)}
.cstat .cnat{font-size:.6875rem; color:var(--text-muted); margin-block-start:var(--space-4)}
.delta{font-size:.75rem; font-weight:600; margin-inline-start:.375rem}
.delta{color:var(--text-muted); font-weight:500}
.rentmaths{
  margin-block-start:var(--space-40); padding-block-start:var(--space-32);
  border-block-start:var(--border-width) solid var(--border);
}
.rrgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--space-24); margin-block-start:var(--space-24)}
@media (max-width:61.9375rem){.rrgrid{grid-template-columns:repeat(2,1fr)}}
.rrcell{padding:var(--space-24); border-radius:var(--radius-md); background:var(--neutral-100)}
.rrcell.hot{background:var(--orange-50); border:var(--border-width) solid var(--orange-200)}
.rrnum{font-size:1.75rem; font-weight:600; letter-spacing:-.03em; font-variant-numeric:tabular-nums lining-nums; line-height:1.1}
.rrlbl{font-size:.8125rem; color:var(--text-secondary); margin-block-start:var(--space-4)}

/* ---- section 7: the turn ------------------------------------------------ */
.turn{background:var(--neutral-900); color:var(--neutral-50)}
.turn .eyebrow{color:var(--orange-300)}
.turn h2{color:var(--neutral-50)}
.turn .sec-head p{color:var(--neutral-300)}
.bigquote{max-width:64rem; margin-block:var(--space-128)}
.bigquote blockquote{
  margin:0; font-size:clamp(2rem,5.4vw,4.25rem); line-height:1.1; font-weight:600;
  letter-spacing:-.035em; text-wrap:pretty;
}
.bigquote cite{
  display:block; margin-block-start:var(--space-32); font-style:normal;
  font-size:.875rem; color:var(--neutral-400); letter-spacing:var(--tracking-label);
  text-transform:uppercase; font-weight:600;
}
.qgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gutter)}
@media (max-width:61.9375rem){.qgrid{grid-template-columns:1fr}}
.qcard{
  background:color-mix(in srgb, var(--neutral-50) 8%, transparent);
  border:var(--border-width) solid color-mix(in srgb, var(--neutral-50) 18%, transparent);
  border-radius:var(--radius-lg); padding:var(--space-32);
}
.qcard p{font-size:1.0625rem; line-height:1.55; color:var(--neutral-50)}
.qcard .who{margin-block-start:var(--space-16); font-size:.75rem; color:var(--neutral-400); letter-spacing:var(--tracking-label); text-transform:uppercase; font-weight:600}
.turn .stat{background:color-mix(in srgb, var(--neutral-50) 8%, transparent); border-color:color-mix(in srgb, var(--neutral-50) 18%, transparent)}
.turn .stat .num{color:var(--neutral-50)} .turn .stat .lbl{color:var(--neutral-300)}
.turn .src{color:var(--neutral-500)} .turn .src a{color:var(--neutral-500)}
.turn .copybtn{background:color-mix(in srgb,var(--neutral-50) 14%,transparent); border-color:color-mix(in srgb,var(--neutral-50) 24%,transparent); color:var(--neutral-200)}

/* ---- section 8 ---------------------------------------------------------- */
.ctxlist{list-style:none; padding:0; margin:0; max-width:44rem}
.ctxlist li{
  padding-block:var(--space-24); border-block-start:var(--border-width) solid var(--border);
}
.ctxlist li:last-child{border-block-end:var(--border-width) solid var(--border)}
.ctxlist p{font-size:1.0625rem}
.faq{max-width:none}
.faq details{
  border-block-end:var(--border-width) solid var(--border); padding-block:var(--space-24);
}
.faq summary{
  cursor:pointer; font-weight:600; font-size:1.125rem; list-style:none;
  display:flex; justify-content:space-between; gap:var(--space-16); align-items:baseline;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--accent-text); font-size:1.375rem; line-height:1; flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin-block-start:var(--space-16); color:var(--text-secondary)}
.authorbox{
  display:grid; grid-template-columns:auto 1fr; gap:var(--space-24); align-items:start;
  max-width:44rem; padding:var(--space-32); border-radius:var(--radius-lg);
  background:var(--orange-50); border:var(--border-width) solid var(--orange-200);
}
@media (max-width:47.9375rem){.authorbox{grid-template-columns:1fr}}
.avatar{
  width:4.5rem; height:4.5rem; border-radius:var(--radius-full); flex:none;
  background:var(--orange-200); border:var(--border-width) solid var(--orange-300);
  display:grid; place-items:center; font-weight:600; font-size:1.5rem; color:var(--orange-900);
}
.authorbox h4{margin-block-end:var(--space-4)}
.authorbox .role{font-size:.875rem; color:var(--text-secondary); margin-block-end:var(--space-12)}
.authorbox p{font-size:.9375rem; color:var(--text-secondary)}

.wave{display:grid; grid-template-columns:7fr 5fr; gap:var(--space-64); align-items:start}
@media (max-width:61.9375rem){.wave{grid-template-columns:1fr; gap:var(--space-40)}}
.wavecard{
  background:var(--background-1); border:var(--border-width) solid var(--border);
  border-radius:var(--radius-lg); padding:var(--space-32);
}
.wavecard ul{margin:0; padding-inline-start:1.125rem; color:var(--text-secondary); font-size:.9375rem}
.wavecard li{margin-block-end:var(--space-12)}
.method{
  max-width:52rem; font-size:.875rem; line-height:1.7; color:var(--text-secondary);
}
.method h3{font-size:1.5rem; line-height:2rem}

.methodbox{
  max-width:60rem; border-block-start:var(--border-width) solid var(--border);
  border-block-end:var(--border-width) solid var(--border); padding-block:var(--space-24);
}
.methodbox > summary{
  cursor:pointer; font-weight:600; font-size:1.125rem; list-style:none;
  display:flex; justify-content:space-between; gap:var(--space-16); align-items:baseline;
  color:var(--text-primary);
}
.methodbox > summary::-webkit-details-marker{display:none}
.methodbox > summary::after{content:"+"; color:var(--accent-text); font-size:1.5rem; line-height:1; flex:none}
.methodbox[open] > summary::after{content:"\2212"}
.methodbox[open] > summary{margin-block-end:var(--space-32)}

footer{
  background:var(--neutral-900); color:var(--neutral-300); padding-block:var(--space-80);
  font-size:.875rem;
}
footer .shell{display:grid; grid-template-columns:2fr 1fr 1fr; gap:var(--space-48)}
@media (max-width:61.9375rem){footer .shell{grid-template-columns:1fr; gap:var(--space-32)}}
footer a{color:var(--neutral-300); text-decoration:none; display:block; padding-block:.25rem}
footer a:hover{color:var(--neutral-50)}
footer h4{color:var(--neutral-50); font-size:1rem; line-height:1.4}
footer .wordmark{color:var(--neutral-50); font-size:1.25rem}
footer .fine{font-size:.75rem; line-height:1.6; color:var(--neutral-500); max-width:46rem}

.toast{
  position:fixed; inset-block-end:var(--space-24); inset-inline-start:50%;
  transform:translateX(-50%) translateY(1rem); background:var(--neutral-900);
  color:var(--neutral-50); padding:.75rem 1.25rem; border-radius:var(--radius-full);
  font-size:.875rem; font-weight:600; opacity:0; pointer-events:none;
  transition:opacity .25s ease, transform .25s ease; z-index:70;
}
.toast.show{opacity:1; transform:translateX(-50%)}

/* ---- pull quote inside a data panel ---------------------------------- */
.pullquote{
  margin:var(--space-32) 0 0; padding-block-start:var(--space-32);
  border-block-start:var(--border-width) solid var(--border);
}
.pullquote blockquote{
  margin:0; font-size:1.375rem; line-height:1.5; font-weight:600;
  letter-spacing:-.02em; text-wrap:pretty; max-width:34rem;
}
.pullquote figcaption{
  margin-block-start:var(--space-12); font-size:.75rem; font-weight:600;
  letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--text-muted);
}

/* ---- section 3: stat-led households, no invented labels -------------- */
.group h3{font-size:1.25rem; line-height:1.75rem; letter-spacing:-.01em; margin-block:var(--space-24) var(--space-12)}
.gquote{
  margin:auto 0 0; padding-block-start:var(--space-24);
  border-block-start:var(--border-width) solid var(--border);
}
.gquote blockquote{margin:0; font-size:1.0625rem; line-height:1.5; font-weight:600; letter-spacing:-.01em}
.gquote figcaption{
  margin-block-start:var(--space-8); font-size:.6875rem; font-weight:600;
  letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--text-muted);
}

/* ---- the reframe: one claim, capped and centred (shape 4) ------------ */
.reframe{padding-block:var(--space-96)}
.reframe-panel{
  max-width:64rem; margin-inline:auto; padding:var(--space-80) var(--space-64);
  border-radius:var(--radius-lg); background:var(--orange-50);
  border:var(--border-width) solid var(--orange-200); text-align:center;
}
@media (max-width:47.9375rem){.reframe-panel{padding:var(--space-40) var(--space-24)}}
.reframe-lede{
  font-size:clamp(1.75rem,3.6vw,3rem); line-height:1.15; letter-spacing:-.03em;
  max-width:36rem; margin-inline:auto; margin-block-end:var(--space-32);
}
.reframe-panel p:not(.reframe-lede):not(.src){
  max-width:44rem; margin-inline:auto; font-size:1.125rem; color:var(--text-secondary);
}
.reframe-panel .src{max-width:44rem; margin-inline:auto}

/* ---- the map --------------------------------------------------------- */
.metricbar{display:flex; flex-wrap:wrap; gap:var(--space-8); margin-block-end:var(--space-48)}
.mtab{
  background:var(--neutral-50); border:var(--border-width) solid var(--border);
  border-radius:var(--radius-full); padding:.5rem 1rem; font:inherit; font-size:.875rem;
  font-weight:600; cursor:pointer; color:var(--text-secondary);
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
.mtab:hover{border-color:var(--text-primary); color:var(--text-primary)}
@media (max-width:47.9375rem){
  /* six stacked pills ate half a screen; scroll them instead */
  .metricbar{
    flex-wrap:nowrap; overflow-x:auto; scroll-snap-type:x proximity;
    scrollbar-width:none; margin-inline:calc(var(--margin) * -1);
    padding-inline:var(--margin); padding-block-end:var(--space-8);
  }
  .metricbar::-webkit-scrollbar{display:none}
  .mtab{flex:none; scroll-snap-align:start}
}
.mtab[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:var(--on-accent)}
.mapwrap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:var(--space-64); align-items:start}
@media (min-width:62rem){
  /* the city panel is much taller than the map, so the map travels with it
     rather than leaving a column of dead space */
  .mapcol{position:sticky; top:var(--space-96)}
}
@media (max-width:61.9375rem){.mapwrap{grid-template-columns:1fr; row-gap:var(--space-48)}}
.maplabel{font-size:.9375rem; color:var(--text-secondary); margin-block-end:var(--space-16)}
.maplabel b{color:var(--text-primary); font-weight:600}
.mapstage{position:relative; width:100%; aspect-ratio:1000/900}
.ausmap{position:absolute; inset:0; width:100%; height:100%}
.aus-land{fill:var(--orange-100); stroke:var(--orange-300); stroke-width:2.5; stroke-linejoin:round}
.pin{
  position:absolute; transform:translate(-50%,-50%); background:none; border:0; padding:0;
  font:inherit; cursor:pointer; display:flex; align-items:center; line-height:1;
  border-radius:var(--radius-full);
}
.pdot{
  width:.875rem; height:.875rem; border-radius:var(--radius-full); flex:none;
  background:var(--neutral-50); border:.1875rem solid var(--orange-700);
  transition:transform .3s cubic-bezier(.22,1,.36,1), background-color .3s ease;
}
.pin[aria-pressed="true"] .pdot{background:var(--orange-700); transform:scale(1.45)}
.pin:hover .pdot{transform:scale(1.25)}
.ptxt{position:absolute; white-space:nowrap; text-align:start}
.pin[data-side="right"] .ptxt{inset-inline-start:1.5rem}
.pin[data-side="left"] .ptxt{inset-inline-end:1.5rem; text-align:end}
.ptxt b{display:block; font-size:.8125rem; font-weight:600; color:var(--text-secondary)}
.ptxt i{
  display:block; font-style:normal; font-size:1.125rem; font-weight:600;
  color:var(--text-primary); letter-spacing:-.02em;
  font-variant-numeric:tabular-nums lining-nums; margin-block-start:.125rem;
}
.pin[aria-pressed="true"] .ptxt b{color:var(--text-primary)}
.pin[aria-pressed="true"] .ptxt i{color:var(--orange-700)}
@media (max-width:47.9375rem){
  .ptxt b{font-size:.6875rem} .ptxt i{font-size:.9375rem}
  .pin[data-side="right"] .ptxt{inset-inline-start:1.125rem}
  .pin[data-side="left"] .ptxt{inset-inline-end:1.125rem}
}
.citypanel .cstats{grid-template-columns:repeat(2,1fr); margin-block-start:var(--space-32)}
.citypanel .rentmaths .rrgrid{grid-template-columns:repeat(2,1fr)}

/* ---- the full table -------------------------------------------------- */
.tablewrap{margin-block-start:var(--space-96)}
.tablescroll{overflow-x:auto; margin-block-start:var(--space-32); border-radius:var(--radius-lg)}
.citytable{
  width:100%; border-collapse:collapse; font-size:.875rem;
  background:var(--background-1); min-width:52rem;
}
.citytable th,.citytable td{
  padding:var(--space-16); text-align:end; border-block-end:var(--border-width) solid var(--border);
  font-variant-numeric:tabular-nums lining-nums;
}
.citytable thead th{
  text-align:end; font-size:.75rem; font-weight:600; color:var(--text-secondary);
  vertical-align:bottom; line-height:1.35;
}
.citytable th[scope="row"],.citytable thead th:first-child{text-align:start; font-weight:600; color:var(--text-primary)}
.citytable tbody tr{cursor:pointer; transition:background-color .2s ease}
.citytable tbody tr:hover,.citytable tbody tr[aria-selected="true"]{background:var(--orange-50)}
.citytable tfoot th,.citytable tfoot td{color:var(--text-secondary); border-block-end:0}
.citytable td.ind{color:var(--text-muted)}

/* ---- household size comparison -------------------------------------- */
.vs{
  margin-block-start:var(--space-80); padding:var(--space-40);
  border-radius:var(--radius-lg); background:var(--background-2);
  border:var(--border-width) solid var(--border); max-width:38rem;
}
@media (max-width:47.9375rem){.vs{padding:var(--space-24)}}
.vs h4{font-size:1.375rem; line-height:1.75rem}
.vs p{font-size:.9375rem; color:var(--text-secondary)}
.vsgrid{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-24); margin-block:var(--space-32)}
.vscol{padding:var(--space-24); border-radius:var(--radius-md); background:var(--background-1)}
.vscol:first-child{background:var(--orange-50); box-shadow:inset .1875rem 0 0 var(--orange-500)}
.vshead{
  font-size:.6875rem; font-weight:600; letter-spacing:var(--tracking-label);
  text-transform:uppercase; color:var(--text-muted); margin-block-end:var(--space-16);
}
.vsrow{margin-block-end:var(--space-16)}
.vsrow:last-child{margin-block-end:0}
.vsrow b{
  display:block; font-size:1.5rem; font-weight:600; letter-spacing:-.03em;
  font-variant-numeric:tabular-nums lining-nums; line-height:1.1;
}
.vsrow span{display:block; font-size:.8125rem; color:var(--text-secondary); margin-block-start:var(--space-4)}

/* ---- one figure, at size ------------------------------------------- */
.bigstat{
  position:relative; padding:var(--space-40); border-radius:var(--radius-lg);
  background:var(--orange-50); border:var(--border-width) solid var(--orange-200);
}
.bigstat-n{
  font-size:clamp(4rem,9vw,7rem); font-weight:600; letter-spacing:-.045em;
  line-height:.92; color:var(--accent-text); font-variant-numeric:tabular-nums lining-nums;
}
.bigstat-t{margin-block-start:var(--space-16); font-size:1.25rem; max-width:26rem; color:var(--text-primary)}
.bigstat .copybtn{opacity:1; background:var(--neutral-50)}

/* ---- a consequence, set apart from the finding ---------------------- */
.callout{
  padding-inline-start:var(--space-24); border-inline-start:.1875rem solid var(--orange-300);
  max-width:38rem;
}
.callout h4{font-size:1.125rem; line-height:1.5rem}
.callout p{font-size:.9375rem; color:var(--text-secondary)}

/* ---- downloads ------------------------------------------------------- */
.dlgrid{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gutter)}
@media (max-width:47.9375rem){.dlgrid{grid-template-columns:1fr}}
.dl{
  display:flex; flex-direction:column; gap:var(--space-8); text-decoration:none;
  padding:var(--space-24); border-radius:var(--radius-lg); background:var(--background-1);
  border:var(--border-width) solid var(--border); color:var(--text-primary);
  transition:border-color .2s ease, transform .2s ease;
}
.dl:hover{border-color:var(--orange-700); transform:translateY(-.1875rem)}
.dl-k{font-size:.6875rem; font-weight:600; letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--accent-text)}
.dl-t{font-size:1.125rem; font-weight:600; letter-spacing:-.015em}
.dl-d{font-size:.875rem; color:var(--text-secondary)}

/* ============================== MOTION ==============================
   One rule everywhere: the resting state is the readable state. Motion is
   added by the .js class, and every effect below is removed outright under
   prefers-reduced-motion.
   =================================================================== */
html{scroll-behavior:smooth; scroll-padding-block-start:5rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* children of a group rise in sequence rather than the block fading as one */
.js .stag > *{opacity:0}
.js .stag.in > *{animation:rise .8s cubic-bezier(.22,1,.36,1) forwards}
.js .stag.in > *:nth-child(2){animation-delay:.09s}
.js .stag.in > *:nth-child(3){animation-delay:.18s}
.js .stag.in > *:nth-child(4){animation-delay:.27s}
.js .stag.in > *:nth-child(5){animation-delay:.36s}
.js .stag.in > *:nth-child(6){animation-delay:.45s}
.js .stag.in > *:nth-child(7){animation-delay:.54s}
@keyframes rise{from{opacity:0; transform:translateY(1.5rem)} to{opacity:1; transform:none}}

/* the two curves draw one after the other, then the labels land */
.chart .ln-b.drawn{transition-delay:.55s}
.chart .fade{transition-delay:1.5s}

/* the shared-cost bars cascade instead of arriving together */
.bar:nth-child(2) .fill{transition-delay:.08s}
.bar:nth-child(3) .fill{transition-delay:.16s}
.bar:nth-child(4) .fill{transition-delay:.24s}
.bar:nth-child(5) .fill{transition-delay:.32s}
.bar:nth-child(6) .fill{transition-delay:.4s}
.bar:nth-child(7) .fill{transition-delay:.48s}

/* the quote arrives as one object, not as a fade */
.js .bigquote{opacity:0; transform:scale(.97); filter:blur(.25rem); transition:opacity .9s ease, transform .9s cubic-bezier(.22,1,.36,1), filter .9s ease}
.js .bigquote.in{opacity:1; transform:none; filter:none}

/* map pins drop in, and the live one keeps a slow halo */
.js .mapcol .pin{opacity:0; transform:translate(-50%,-50%) translateY(-.75rem)}
.js .mapcol.in .pin{animation:pindrop .7s cubic-bezier(.22,1,.36,1) forwards}
.js .mapcol.in .pin:nth-of-type(2){animation-delay:.1s}
.js .mapcol.in .pin:nth-of-type(3){animation-delay:.2s}
.js .mapcol.in .pin:nth-of-type(4){animation-delay:.3s}
.js .mapcol.in .pin:nth-of-type(5){animation-delay:.4s}
@keyframes pindrop{to{opacity:1; transform:translate(-50%,-50%)}}
.pin[aria-pressed="true"] .pdot::after{
  content:""; position:absolute; inset:-.5rem; border-radius:var(--radius-full);
  border:.125rem solid var(--orange-500); animation:halo 2.4s ease-out infinite;
}
.pdot{position:relative}
@keyframes halo{
  0%{transform:scale(.6); opacity:.9}
  70%{transform:scale(1.6); opacity:0}
  100%{transform:scale(1.6); opacity:0}
}

/* the warm ground drifts, slowly enough that you notice it only if you look */
.warm::before{animation:drift 34s ease-in-out infinite alternate}
@keyframes drift{
  from{transform:scale(1) translate3d(0,0,0)}
  to{transform:scale(1.12) translate3d(-1.5%,1%,0)}
}

/* the sticky nav says where you are */
.navlinks a{position:relative; transition:color .2s ease}
.navlinks a[aria-current="true"]{color:var(--text-primary); font-weight:600}
@media (min-width:62rem){
  .navlinks a::after{
    content:""; position:absolute; inset-inline:0; inset-block-end:-.4375rem; height:.125rem;
    background:var(--orange-700); border-radius:var(--radius-full);
    transform:scaleX(0); transform-origin:0 50%; transition:transform .3s cubic-bezier(.22,1,.36,1);
  }
  .navlinks a[aria-current="true"]::after{transform:scaleX(1)}
}

@media (prefers-reduced-motion:reduce){
  .js .stag > *,.js .stag.in > *{opacity:1; transform:none; animation:none}
  .js .bigquote{opacity:1; transform:none; filter:none; transition:none}
  .js .mapcol .pin,.js .mapcol.in .pin{opacity:1; transform:translate(-50%,-50%); animation:none}
  .pin[aria-pressed="true"] .pdot::after{animation:none; opacity:0}
  .warm::before{animation:none}
  .chart .ln-b.drawn,.chart .fade{transition-delay:0s}
  .bar .fill{transition-delay:0s}
  .navlinks a::after{transition:none}
}

.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}

/* ============================== V3 ADDITIONS ==============================
   Everything below was added in the V3 rebuild (14 Sep 2026). Nothing above
   was removed, so a diff against V2's styles.css is additive only.
   ========================================================================== */

/* hero: the display line IS the h1 now, the sentence is the lede */
h1.hero-display{font-size:clamp(3rem, 8vw, 6.5rem); line-height:.96; font-weight:600; letter-spacing:-.03em; color:var(--text-primary); margin:0 0 var(--space-32); max-width:22ch; text-wrap:balance}
.hero .lede{max-width:46rem; font-size:1.375rem; margin-bottom:var(--space-32)}

/* answer-first sentence at the top of every section: the line an answer engine lifts */
.key{
  font-size:1.125rem; line-height:1.6; color:var(--text-primary); font-weight:500;
  max-width:44rem; padding-inline-start:var(--space-16);
  border-inline-start:.1875rem solid var(--orange-300); margin-block:0 var(--space-32);
}
.turn .key{border-color:var(--orange-400); color:var(--neutral-50)}

/* stat tiles are figures: number and claim read as one sentence in the DOM */
figure.stat{margin:0}
.stat figcaption{display:block}
.stat figcaption .num{display:block}
.stat figcaption .lbl{display:block}
.copybtn{opacity:1}
.stat:hover .copybtn{background:var(--neutral-200)}
.turn .copybtn{opacity:1}

/* inline copy button beside a bar or a fact, not absolutely positioned */
.copybtn.inline{position:static; margin-inline-start:var(--space-8); vertical-align:middle}
.bar .top{align-items:center}
.bar .top .val{display:inline-flex; align-items:center; gap:var(--space-8)}
.fact{position:relative}
.fact .copybtn{position:absolute; inset-block-start:.25rem; inset-inline-end:0}
.group{position:relative}
.group .copybtn{position:absolute; inset-block-start:var(--space-12); inset-inline-end:var(--space-12)}

/* a chart's data as a real table, collapsed under the chart */
.charttable{margin-block-start:var(--space-24)}
.charttable > summary{
  cursor:pointer; font-size:.8125rem; font-weight:600; color:var(--text-secondary);
  list-style:none; display:inline-flex; gap:var(--space-8); align-items:center;
}
.charttable > summary::-webkit-details-marker{display:none}
.charttable > summary::before{content:"+"; color:var(--accent-text)}
.charttable[open] > summary::before{content:"\2212"}
.charttable table{width:100%; border-collapse:collapse; font-size:.8125rem; margin-block-start:var(--space-16)}
.charttable th,.charttable td{padding:.5rem .75rem; text-align:end; border-block-end:var(--border-width) solid var(--border); font-variant-numeric:tabular-nums lining-nums}
.charttable th:first-child,.charttable td:first-child{text-align:start}
.charttable thead th{font-size:.6875rem; color:var(--text-secondary); vertical-align:bottom}
.turn .charttable th,.turn .charttable td{border-color:color-mix(in srgb,var(--neutral-50) 18%,transparent)}
.turn .charttable > summary{color:var(--neutral-300)}

/* chart hover: a hit target per band and a tooltip */
.chart .hit{fill:transparent; cursor:crosshair}
.chartwrap{position:relative}
.ctip{
  position:absolute; pointer-events:none; opacity:0; transition:opacity .15s ease;
  background:var(--neutral-900); color:var(--neutral-50); border-radius:var(--radius-md);
  padding:.625rem .75rem; font-size:.75rem; line-height:1.45; min-width:11rem; z-index:5;
  transform:translate(-50%,calc(-100% - .75rem));
}
.ctip.show{opacity:1}
.ctip b{display:block; font-size:.8125rem; margin-block-end:.25rem}
.ctip i{font-style:normal; display:flex; justify-content:space-between; gap:var(--space-16)}
.ctip i em{font-style:normal; font-variant-numeric:tabular-nums lining-nums; font-weight:600}
.turn .ctip{background:var(--neutral-50); color:var(--neutral-900)}
.chart .hover-line{stroke:var(--border-strong); stroke-width:1; stroke-dasharray:3 3; opacity:0}
.chart .hover-line.show{opacity:1}

/* the warmth chart sits on the dark section */
.turn .gapwrap{background:color-mix(in srgb,var(--neutral-50) 6%,transparent); border-color:color-mix(in srgb,var(--neutral-50) 18%,transparent)}
.turn .chart .grid-l{stroke:color-mix(in srgb,var(--neutral-50) 18%,transparent)}
.turn .chart .axis-t{fill:var(--neutral-400)}
.turn .chart .lab{fill:var(--neutral-50)} .turn .chart .lab-sub{fill:var(--neutral-300)}
.turn .chart .ln-c{stroke:var(--orange-400)} .turn .chart .dot-c{fill:var(--orange-400)}
.turn .chart .ln-d{stroke:var(--neutral-50)} .turn .chart .dot-d{fill:var(--neutral-50)}
.turn .chart .ln-e{stroke:var(--neutral-500); stroke-dasharray:6 6} .turn .chart .dot-e{fill:var(--neutral-500)}
.turn .legend span{color:var(--neutral-300)}
.turn .readout div,.turn .readout i{color:var(--neutral-400)} .turn .readout b{color:var(--neutral-50)}
.turn .pullquote{border-color:color-mix(in srgb,var(--neutral-50) 18%,transparent)}
.turn .pullquote blockquote{color:var(--neutral-50)} .turn .pullquote figcaption{color:var(--neutral-400)}

/* age by tenure heatmap */
.heat{display:grid; grid-template-columns:5.5rem repeat(6,1fr); gap:.25rem; max-width:44rem; font-size:.75rem}
.heat .hh{color:var(--text-secondary); font-weight:600; text-align:center; padding-block-end:.25rem; align-self:end; line-height:1.25}
.heat .hr{color:var(--text-secondary); font-weight:600; align-self:center}
.heat .hc{
  aspect-ratio:1.6; display:grid; place-items:center; border-radius:var(--radius-sm);
  font-weight:600; font-variant-numeric:tabular-nums lining-nums; color:var(--text-primary);
  background:color-mix(in srgb, var(--orange-500) min(calc(var(--v) * 1.5%), 100%), var(--neutral-100));
}
.heat .hc.dark{color:var(--neutral-50)}
@media (max-width:47.9375rem){.heat{grid-template-columns:3.5rem repeat(6,1fr); font-size:.625rem} .heat .hc{aspect-ratio:1.2}}

/* ownership ladder: 100 people */
.ladder{display:grid; grid-template-columns:repeat(20,1fr); gap:.3rem; max-width:44rem}
.ladder span{aspect-ratio:1; border-radius:var(--radius-sm); background:var(--neutral-200)}
.ladder .l1{background:var(--orange-100)} .ladder .l2{background:var(--orange-200)} .ladder .l3{background:var(--orange-300)}
.ladder .l4{background:var(--orange-400)} .ladder .l5{background:var(--orange-600)} .ladder .l6{background:var(--neutral-700)}
.ladderkey{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--space-12) var(--space-24); margin-block-start:var(--space-24); max-width:44rem}
@media (max-width:47.9375rem){.ladderkey{grid-template-columns:repeat(2,1fr)}}
.ladderkey div{display:flex; gap:var(--space-8); align-items:flex-start; font-size:.8125rem; color:var(--text-secondary)}
.ladderkey i{width:.875rem; height:.875rem; border-radius:var(--radius-sm); flex:none; margin-block-start:.2rem}
.ladderkey b{color:var(--text-primary); font-variant-numeric:tabular-nums lining-nums; display:block}
.setpiece{margin-block-start:var(--space-80)}
.setpiece h3{font-size:1.5rem; line-height:2rem}
.setpiece > p{color:var(--text-secondary); max-width:38rem}

/* dumbbell: two households, one axis */
.dumb{max-width:38rem}
.dumbrow{display:grid; grid-template-columns:minmax(0,1fr); gap:1.25rem; padding-block:var(--space-16); border-block-end:var(--border-width) solid var(--border)}
.dumbrow:last-of-type{border-block-end:0}
.dumbrow .dlabel{font-size:.9375rem}
.dumbtrack{position:relative; height:1.5rem}
.dumbtrack::before{content:""; position:absolute; inset-inline:0; top:50%; height:.125rem; background:var(--neutral-200); transform:translateY(-50%)}
.dumbbar{position:absolute; top:50%; height:.375rem; background:var(--neutral-300); transform:translateY(-50%); border-radius:var(--radius-full)}
.dumbdot{
  position:absolute; top:50%; width:1rem; height:1rem; border-radius:var(--radius-full);
  transform:translate(-50%,-50%); border:.125rem solid var(--background-1);
}
.dumbdot.two{background:var(--orange-500)} .dumbdot.four{background:var(--neutral-800)}
.dumbval{position:absolute; top:-.9rem; transform:translateX(-50%); font-size:.75rem; font-weight:600; font-variant-numeric:tabular-nums lining-nums; white-space:nowrap}
.dumbval.two{color:var(--orange-700)} .dumbval.four{color:var(--text-primary)}
.dumbaxis{display:flex; justify-content:space-between; font-size:.6875rem; color:var(--text-muted); margin-block-start:var(--space-8)}
.dumbnote{font-size:.8125rem; color:var(--text-secondary); margin-block-start:var(--space-4)}

/* map: real coastline, encoded pins, tooltip, outside-the-capitals chip */
.pin .pdot{background:var(--neutral-50)}
.pin.up .pdot{background:var(--orange-500); border-color:var(--orange-700)}
.pin.down .pdot{background:var(--neutral-700); border-color:var(--neutral-800)}
.pin[aria-pressed="true"] .pdot{transform:scale(1.45)}
.pin .pdelta{display:block; font-size:.6875rem; font-weight:600; color:var(--text-muted); margin-block-start:.0625rem}
.pin.up .pdelta{color:var(--orange-700)} .pin.down .pdelta{color:var(--neutral-700)}
.ptip{
  position:absolute; z-index:6; pointer-events:none; opacity:0; transition:opacity .15s ease;
  background:var(--neutral-900); color:var(--neutral-50); border-radius:var(--radius-md);
  padding:.75rem .875rem; font-size:.75rem; line-height:1.5; width:15rem;
}
.ptip.show{opacity:1}
.ptip b{display:block; font-size:.875rem; margin-block-end:.375rem}
.ptip i{font-style:normal; display:flex; justify-content:space-between; gap:var(--space-8)}
.ptip i em{font-style:normal; font-weight:600; font-variant-numeric:tabular-nums lining-nums}
.ptip i.cur em{color:var(--orange-300)}
@media (max-width:47.9375rem){
  .pin[data-side-m="left"] .ptxt{inset-inline-start:auto; inset-inline-end:1.125rem; text-align:end}
  .pin[data-side-m="right"] .ptxt{inset-inline-end:auto; inset-inline-start:1.125rem; text-align:start}
  .pin[data-side-m="above"] .ptxt{inset-inline:auto; inset-block-end:1rem; text-align:center; transform:translateX(-50%); left:50%}
  .pin[data-side-m="below"] .ptxt{inset-inline:auto; inset-block-start:1rem; text-align:center; transform:translateX(-50%); left:50%}
}
.mapkey{display:flex; flex-wrap:wrap; gap:var(--space-16); margin-block-start:var(--space-16); font-size:.75rem; color:var(--text-secondary)}
.mapkey span{display:inline-flex; align-items:center; gap:.375rem}
.mapkey i{width:.75rem; height:.75rem; border-radius:var(--radius-full); border:.125rem solid var(--orange-700); background:var(--neutral-50)}
.mapkey i.up{background:var(--orange-500)} .mapkey i.down{background:var(--neutral-700); border-color:var(--neutral-800)}
.outside{
  margin-block-start:var(--space-24); padding:var(--space-16) var(--space-24); border-radius:var(--radius-md);
  background:var(--background-1); border:var(--border-width) solid var(--border);
  display:grid; grid-template-columns:auto 1fr; gap:var(--space-16); align-items:center; cursor:pointer;
  font:inherit; text-align:start; width:100%; color:var(--text-primary);
}
.outside:hover{border-color:var(--text-primary)}
.outside[aria-pressed="true"]{background:var(--orange-50); border-color:var(--orange-300)}
.outside .on{font-size:1.5rem; font-weight:600; letter-spacing:-.03em; font-variant-numeric:tabular-nums lining-nums}
.outside .ol{font-size:.8125rem; color:var(--text-secondary)}
.outside .ol b{color:var(--text-primary); display:block; font-size:.9375rem}
.citytable td.hi-max{color:var(--orange-700); font-weight:600}
.citytable td.hi-min{color:var(--text-primary); font-weight:600; text-decoration:underline; text-decoration-color:var(--neutral-400); text-underline-offset:.2rem}
.citytable th.hi-col,.citytable thead th.hi-col{color:var(--accent-text)}
.citytable tr.other td,.citytable tr.other th{color:var(--text-secondary)}

/* a source the page could not verify: visible, ugly on purpose */
.srcneeded{
  display:inline-block; background:#fff3cd; color:#7a5300; border:.0625rem dashed #c9a227;
  border-radius:var(--radius-sm); padding:.125rem .5rem; font-size:.75rem; font-weight:600;
}
/* a figure computed this round and awaiting sign-off before the press pack */
.pending{
  display:inline-block; font-size:.625rem; font-weight:600; letter-spacing:var(--tracking-label); text-transform:uppercase;
  color:var(--orange-900); background:var(--orange-100); border-radius:var(--radius-full); padding:.1875rem .5rem; vertical-align:middle;
}
.turn .pending{background:color-mix(in srgb,var(--orange-300) 30%,transparent); color:var(--orange-200)}

/* the journalists block: faq + downloads, one section */
.journo{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-64); align-items:start}
@media (max-width:61.9375rem){.journo{grid-template-columns:1fr; gap:var(--space-48)}}
.journo h3{font-size:1.5rem; line-height:2rem}
.ctxlist .cite{display:block; font-size:.6875rem; color:var(--text-muted); margin-block-start:var(--space-4)}
.ctxlist .cite a{color:var(--text-muted)}
.method-open{max-width:60rem; border-block-start:var(--border-width) solid var(--border); padding-block-start:var(--space-32)}
.method .cols{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-48)}
@media (max-width:61.9375rem){.method .cols{grid-template-columns:1fr}}

/* motion: the resting state is the readable state. Numbers never count up. */
.js .num,.js .gnum,.js .big,.js .bigstat-n{opacity:0; transform:translateY(.5rem); transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1)}
.js .in .num,.js .in .gnum,.js .in .big,.js .in .bigstat-n,.js .stag.in .gnum{opacity:1; transform:none}
.js .ladder span{opacity:0; transform:scale(.6); transition:opacity .4s ease, transform .4s cubic-bezier(.22,1,.36,1)}
.js .in .ladder span{opacity:1; transform:none}
.js .heat .hc{opacity:0; transition:opacity .5s ease}
.js .in .heat .hc{opacity:1}
.js .dumbdot,.js .dumbbar,.js .dumbval{transition:left .9s cubic-bezier(.22,1,.36,1), width .9s cubic-bezier(.22,1,.36,1)}
@media (prefers-reduced-motion:reduce){
  .js .num,.js .gnum,.js .big,.js .bigstat-n,.js .ladder span,.js .heat .hc{opacity:1; transform:none; transition:none}
  .js .dumbdot,.js .dumbbar,.js .dumbval{transition:none}
}
.pin[data-side="below"] .ptxt{inset-inline:auto; inset-block-start:1.125rem; left:50%; transform:translateX(-50%); text-align:center}
.pin[data-side="above"] .ptxt{inset-inline:auto; inset-block-end:1.125rem; left:50%; transform:translateX(-50%); text-align:center}

/* ============================== V3.1 (Matt's review, 14 Sep) ============================== */

/* hero: PDF CTA with a side note, scroll hint at the foot */
.cta-note{align-self:center; font-size:.9375rem; color:var(--text-secondary); margin-inline-start:var(--space-8)}
.scrollhint{
  display:inline-flex; align-items:center; gap:var(--space-8); margin-block-start:var(--space-48);
  font-size:.875rem; font-weight:600; color:var(--text-secondary); text-decoration:none;
}
.scrollhint:hover{color:var(--text-primary)}
.scrollhint .chev{display:inline-block; animation:nudge 1.8s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0)} 50%{transform:translateY(.25rem)}}

/* intro: the set-up paragraph and the in-page contents */
.intro{padding-block:var(--space-96)}
.intro .grid{display:grid; grid-template-columns:minmax(0,44rem) minmax(0,20rem); column-gap:var(--space-96); align-items:start}
@media (max-width:61.9375rem){.intro .grid{grid-template-columns:1fr; row-gap:var(--space-40)}}
.intro p{font-size:1.25rem; line-height:1.6}
.intro p:first-of-type{font-size:1.5rem; line-height:1.45; font-weight:600; letter-spacing:-.015em}
.contents .contents-h{margin:0 0 var(--space-12);font-size:.75rem; font-weight:600; letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--accent-text); margin-block-end:var(--space-12)}
.contents ol{list-style:none; margin:0; padding:0; counter-reset:c}
.contents li{counter-increment:c; border-block-start:var(--border-width) solid var(--border)}
.contents li:last-child{border-block-end:var(--border-width) solid var(--border)}
.contents a{display:flex; gap:var(--space-12); padding-block:var(--space-12); text-decoration:none; color:var(--text-primary); font-weight:500; font-size:.9375rem}
.contents a::before{content:counter(c, decimal-leading-zero); color:var(--text-muted); font-variant-numeric:tabular-nums; font-weight:600}
.contents a:hover{color:var(--accent-text)}

/* section head with a small animated line icon in the otherwise empty right half */
.headrow{display:grid; grid-template-columns:minmax(0,40rem) 1fr; column-gap:var(--space-64); align-items:start; margin-bottom:var(--space-64)}
.headrow .sec-head{margin-bottom:0}
.sec-icon{justify-self:end; width:clamp(6rem, 10vw, 9rem); height:auto; color:var(--orange-700); margin-block-start:var(--space-16)}
.sec-icon .st{fill:none; stroke:currentColor; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round}
.sec-icon .fl{fill:var(--orange-200); stroke:none}
.sec-icon .fl2{fill:var(--orange-100); stroke:none}
.turn .sec-icon{color:var(--orange-300)} .turn .sec-icon .fl{fill:color-mix(in srgb,var(--orange-300) 25%,transparent)} .turn .sec-icon .fl2{fill:color-mix(in srgb,var(--orange-300) 12%,transparent)}
@media (max-width:61.9375rem){.headrow{grid-template-columns:1fr} .sec-icon{display:none}}
.side .sec-icon{justify-self:start; width:5.5rem; margin-block:0 var(--space-24); display:block}
@media (max-width:61.9375rem){.side .sec-icon{display:none}}
/* icon motion: drawn on reveal, then one element keeps a slow loop */
.js .sec-icon .draw{stroke-dasharray:var(--l,200); stroke-dashoffset:var(--l,200); transition:stroke-dashoffset 1.6s ease .2s}
.js .in .sec-icon .draw,.js .reveal.in .sec-icon .draw{stroke-dashoffset:0}
.sec-icon .pen{transform-origin:var(--ox,50%) var(--oy,50%); animation:penwrite 2.6s ease-in-out infinite}
@keyframes penwrite{0%,100%{transform:translate(0,0) rotate(0)} 25%{transform:translate(6px,1px) rotate(-3deg)} 50%{transform:translate(14px,-1px) rotate(2deg)} 75%{transform:translate(22px,1px) rotate(-2deg)}}
.sec-icon .coin{animation:coindrop 2.8s cubic-bezier(.22,1,.36,1) infinite}
.sec-icon .coin:nth-of-type(2){animation-delay:.35s} .sec-icon .coin:nth-of-type(3){animation-delay:.7s}
@keyframes coindrop{0%{transform:translateY(-14px); opacity:0} 25%{transform:translateY(0); opacity:1} 85%{opacity:1} 100%{opacity:0}}
.sec-icon .door{transform-origin:0 50%; animation:swing 4s ease-in-out infinite}
@keyframes swing{0%,100%{transform:scaleX(1)} 50%{transform:scaleX(.55)}}
.sec-icon .beat{transform-origin:50% 55%; animation:beat 2.4s ease-in-out infinite}
@keyframes beat{0%,100%{transform:scale(1)} 30%{transform:scale(1.12)} 45%{transform:scale(1)}}
.sec-icon .pinbob{animation:bob 2.2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)}}
.sec-icon .tick{stroke-dasharray:60; stroke-dashoffset:60; animation:tickin 3s ease-in-out infinite}
@keyframes tickin{0%{stroke-dashoffset:60} 30%,80%{stroke-dashoffset:0} 100%{stroke-dashoffset:60}}
@media (prefers-reduced-motion:reduce){
  .sec-icon *{animation:none !important}
  .js .sec-icon .draw,.sec-icon .tick{stroke-dashoffset:0; transition:none}
  .scrollhint .chev{animation:none}
}

/* the tenure explorer: full-bleed warm band, one figure, six bars that move */
.explorer{padding-block:var(--space-96); background:var(--orange-50); border-block:var(--border-width) solid var(--orange-200)}
.explorer .shell{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:var(--space-80); align-items:start}
@media (max-width:61.9375rem){.explorer .shell{grid-template-columns:1fr; row-gap:var(--space-48)}}
.explorer h3{font-size:2rem; line-height:2.5rem}
.explorer .lede{font-size:1.125rem}
.agetabs{display:flex; flex-wrap:wrap; gap:var(--space-8); margin-block:var(--space-32) var(--space-24)}
.agetabs .mtab{background:var(--neutral-50)}
.sliderwrap{max-width:34rem}
.sliderwrap label{display:block; font-size:.75rem; font-weight:600; letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--text-secondary); margin-block-end:var(--space-12)}
.sliderwrap input[type=range]{width:100%; accent-color:var(--orange-600); cursor:pointer; margin:0}
.ticks{display:flex; justify-content:space-between; font-size:.75rem; color:var(--text-secondary); margin-block-start:var(--space-8)}
.ticks span{flex:1; text-align:center} .ticks span:first-child{text-align:start} .ticks span:last-child{text-align:end}
.exp-out{background:var(--background-1); border:var(--border-width) solid var(--orange-200); border-radius:var(--radius-lg); padding:var(--space-40)}
@media (max-width:47.9375rem){.exp-out{padding:var(--space-24)}}
.exp-big{font-size:clamp(3.5rem,8vw,6.5rem); font-weight:600; letter-spacing:-.045em; line-height:.92; color:var(--accent-text); font-variant-numeric:tabular-nums lining-nums}
.exp-sent{font-size:1.25rem; line-height:1.5; margin-block-start:var(--space-16); max-width:30rem}
.exp-sent b{font-weight:600}
.exp-bars{margin-block-start:var(--space-40); display:grid; grid-template-columns:5.5rem 1fr 3.5rem; gap:.5rem var(--space-12); align-items:center; font-size:.8125rem}
.exp-bars .lb{color:var(--text-secondary); font-weight:600}
.exp-bars .lb.cur{color:var(--text-primary)}
.exp-bars .tr{height:.75rem; background:var(--neutral-200); border-radius:var(--radius-full); overflow:hidden}
.exp-bars .fi{height:100%; width:0; background:var(--neutral-500); border-radius:var(--radius-full); transition:width .6s cubic-bezier(.22,1,.36,1), background-color .3s ease}
.exp-bars .fi.cur{background:var(--orange-500)}
.exp-bars .vl{font-variant-numeric:tabular-nums lining-nums; font-weight:600; text-align:end; color:var(--text-secondary)}
.exp-bars .vl.cur{color:var(--text-primary)}
.explorer .charttable{max-width:44rem}
.explorer .src{margin-block-start:var(--space-24)}

/* the ownership ladder, second attempt: six rungs, one bar each, both ends coloured */
.rungs{max-width:44rem; margin-block-start:var(--space-32)}
.rung{display:grid; grid-template-columns:11rem 1fr 4rem; gap:var(--space-16); align-items:center; padding-block:var(--space-12); border-block-start:var(--border-width) solid var(--border)}
.rung:last-child{border-block-end:var(--border-width) solid var(--border)}
@media (max-width:47.9375rem){.rung{grid-template-columns:1fr; gap:.375rem} .rung .rv{text-align:start}}
.rung .rl{font-size:.9375rem; font-weight:500}
.rung .rl small{display:block; font-size:.75rem; color:var(--text-muted); font-weight:500}
.rung .rt{height:.875rem; background:var(--neutral-200); border-radius:var(--radius-full); overflow:hidden}
.rung .rf{height:100%; width:0; background:var(--neutral-400); border-radius:var(--radius-full); transition:width 1s cubic-bezier(.22,1,.36,1)}
.rung.own .rf{background:var(--neutral-800)} .rung.never .rf{background:var(--orange-500)}
.rung .rv{font-size:1.125rem; font-weight:600; font-variant-numeric:tabular-nums lining-nums; text-align:end}
.rung.own .rl,.rung.never .rl{font-weight:600}

/* mid-page banner: contribute to the 2027 report */
.banner{padding-block:var(--space-64)}
.banner .panel{
  background:var(--neutral-900); color:var(--neutral-50); border-radius:var(--radius-lg);
  padding:var(--space-48) var(--space-64); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-48); align-items:center;
}
@media (max-width:61.9375rem){.banner .panel{grid-template-columns:1fr; padding:var(--space-32)}}
.banner .eyebrow{color:var(--orange-300)}
.banner h2{color:var(--neutral-50); font-size:2rem; line-height:2.5rem; margin-bottom:var(--space-12)}
.banner p{color:var(--neutral-300); max-width:40rem}
.banner .button-wrapper{margin-top:0}

/* sources as figure cards, publisher small */
.srcgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gutter)}
@media (max-width:61.9375rem){.srcgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:47.9375rem){.srcgrid{grid-template-columns:1fr}}
.srccard{background:var(--background-1); border:var(--border-width) solid var(--border); border-radius:var(--radius-lg); padding:var(--space-32); display:flex; flex-direction:column}
.srccard .n{font-size:2.5rem; font-weight:600; letter-spacing:-.03em; line-height:1.05; font-variant-numeric:tabular-nums lining-nums}
.srccard .n.need{font-size:1rem; letter-spacing:0; line-height:1.4}
.srccard .t{margin-block-start:var(--space-12); font-size:1rem; color:var(--text-primary)}
.srccard .src{margin-block-start:auto; padding-block-start:var(--space-16)}
.srccard .src a{color:var(--text-muted)}

/* the full city table, collapsed under a named summary */
.tabledetails{margin-block-start:var(--space-96)}
.tabledetails > summary{
  cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:var(--space-16); align-items:baseline;
  padding-block:var(--space-24); border-block:var(--border-width) solid var(--border);
}
.tabledetails > summary::-webkit-details-marker{display:none}
.tabledetails > summary h3{margin:0; font-size:1.5rem; line-height:2rem}
.tabledetails > summary span{font-size:.875rem; font-weight:600; color:var(--accent-text); flex:none}
.tabledetails[open] > summary span.o{display:none} .tabledetails:not([open]) > summary span.c{display:none}
.tabledetails .tablescroll{margin-block-start:var(--space-32)}

/* author portrait */
.authorbox img.portrait{width:5.5rem; height:5.5rem; border-radius:var(--radius-full); object-fit:cover; border:var(--border-width) solid var(--orange-300); display:block}
.sec-icon .door,.sec-icon .beat,.sec-icon .pen,.sec-icon .coin{transform-box:fill-box}
.sec-icon .door{transform-origin:0% 50%} .sec-icon .beat{transform-origin:50% 60%} .sec-icon .pen{transform-origin:20% 80%}
.sec-icon .coin{animation:coinfloat 3.2s ease-in-out infinite alternate}
.sec-icon .coin:nth-of-type(2){animation-delay:.4s} .sec-icon .coin:nth-of-type(3){animation-delay:.8s}
@keyframes coinfloat{from{transform:translateY(0)} to{transform:translateY(-4px)}}

/* ============================== V3.2 (Matt's second review, 14 Sep) ============================== */

/* site nav: logo left, hamburger right, branded drawer */
.topbar .shell{justify-content:space-between}
.brand{display:inline-flex; align-items:center; gap:var(--space-12); text-decoration:none; color:var(--text-primary)}
.brand img{width:2rem; height:2rem; display:block}
.brand span{font-weight:600; font-size:1.0625rem; letter-spacing:-.015em}
.brand small{display:block; font-weight:500; font-size:.6875rem; color:var(--text-secondary); letter-spacing:0; line-height:1.2}
.burger{
  display:inline-flex; flex-direction:column; justify-content:center; gap:.3125rem; width:2.75rem; height:2.75rem;
  background:none; border:var(--border-width) solid var(--border-strong); border-radius:var(--radius-full); cursor:pointer; padding:0; align-items:center;
}
.burger span{display:block; width:1.125rem; height:.125rem; background:var(--text-primary); border-radius:var(--radius-full); transition:transform .25s ease, opacity .25s ease}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(.4375rem) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-.4375rem) rotate(-45deg)}
.scrim{position:fixed; inset:0; background:color-mix(in srgb, var(--neutral-900) 45%, transparent); z-index:80; opacity:0; transition:opacity .25s ease}
.scrim[data-open="true"]{opacity:1}
.drawer{
  position:fixed; inset-block:0; inset-inline-end:0; width:min(22rem, 88vw); z-index:90;
  background:var(--neutral-900); color:var(--neutral-50); padding:var(--space-24) var(--space-32) var(--space-40);
  transform:translateX(100%); transition:transform .3s cubic-bezier(.22,1,.36,1); overflow-y:auto; display:flex; flex-direction:column;
}
.drawer[data-open="true"]{transform:none}
.drawer-top{display:flex; justify-content:space-between; align-items:center; margin-block-end:var(--space-32)}
.drawer-top img{width:2rem; height:2rem}
.drawer-close{background:none; border:var(--border-width) solid color-mix(in srgb,var(--neutral-50) 28%,transparent); color:var(--neutral-50); width:2.5rem; height:2.5rem; border-radius:var(--radius-full); font:inherit; font-size:1.25rem; cursor:pointer}
.drawer ul{list-style:none; margin:0; padding:0}
.drawer-site li a{
  display:block; padding-block:var(--space-16); text-decoration:none; color:var(--neutral-50); font-weight:600; font-size:1.375rem; letter-spacing:-.015em;
  border-block-end:var(--border-width) solid color-mix(in srgb,var(--neutral-50) 14%,transparent);
}
.drawer-site li a small{display:block; font-size:.8125rem; font-weight:500; color:var(--neutral-400); letter-spacing:0; margin-block-start:.125rem}
.drawer-site li a[aria-current="page"]{color:var(--orange-300)}
.drawer-site li a:hover{color:var(--orange-300)}
.drawer-label{font-size:.6875rem; font-weight:600; letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--neutral-400); margin:var(--space-40) 0 var(--space-8)}
.drawer-page li a{display:block; padding-block:.5rem; text-decoration:none; color:var(--neutral-300); font-size:.9375rem}
.drawer-page li a:hover,.drawer-page li a[aria-current="true"]{color:var(--neutral-50)}
.drawer-page li a[aria-current="true"]::before{content:""; display:inline-block; width:.375rem; height:.375rem; border-radius:50%; background:var(--orange-500); margin-inline-end:.5rem; vertical-align:middle}
.drawer .button-wrapper{margin-top:auto; padding-top:var(--space-32)}
@media (prefers-reduced-motion:reduce){.drawer,.scrim,.burger span{transition:none}}

/* hero: note above the button, streetscape graphic along the base */
.cta-stack{display:flex; flex-direction:column; gap:var(--space-12); align-items:flex-start}
.cta-stack .cta-note{margin:0}
.hero{padding-block-end:0}
.hero .shell{padding-block-end:var(--space-64)}
.streetscape{display:block; width:100%; height:auto; margin-block-start:var(--space-48); position:relative; z-index:1}
.streetscape .win{animation:winflick 6s ease-in-out infinite}
.streetscape .win:nth-of-type(3n){animation-delay:1.3s} .streetscape .win:nth-of-type(3n+1){animation-delay:2.6s}
@keyframes winflick{0%,100%{opacity:1} 48%{opacity:1} 50%{opacity:.35} 52%{opacity:1}}
@media (prefers-reduced-motion:reduce){.streetscape .win{animation:none}}

/* icons sit with the heading now, on every screen size */
.sec-head .sec-icon,.side .sec-icon{display:block; justify-self:start; width:4.5rem; height:auto; margin:0 0 var(--space-24)}
@media (max-width:61.9375rem){.sec-head .sec-icon,.side .sec-icon{display:block; width:3.5rem}}
.headrow{display:block}

/* tenure panel: the claim on the left, the ladder as its evidence on the right (shape 3) */
.tenurepanel{
  background:var(--orange-50); border:var(--border-width) solid var(--orange-200); border-radius:var(--radius-lg);
  padding:var(--space-64); display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); column-gap:var(--space-80); align-items:start;
}
@media (max-width:61.9375rem){.tenurepanel{grid-template-columns:1fr; row-gap:var(--space-40); padding:var(--space-32)}}
@media (max-width:47.9375rem){.tenurepanel{padding:var(--space-24)}}
.tenurepanel h2{font-size:clamp(1.75rem,3vw,2.5rem); line-height:1.15; letter-spacing:-.03em}
.tenurepanel .rungs{margin-block-start:var(--space-16); max-width:none}
.tenurepanel .rung{border-color:var(--orange-200)}
.tenurepanel .rung .rt{background:color-mix(in srgb,var(--orange-200) 55%,var(--neutral-50))}
.tenurepanel .ladderhead{font-size:.75rem; font-weight:600; letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--accent-text); margin:0 0 var(--space-4)}
.tenurepanel .ladderlede{color:var(--text-secondary); font-size:.9375rem}

/* the sources as a scroll stack: each slide pins and the next slides over it */
.stack{position:relative}
.slide{
  position:sticky; top:0; min-height:100svh; display:grid; align-items:center;
  padding-block:var(--space-96); border-start-start-radius:2rem; border-start-end-radius:2rem;
  border-block-start:var(--border-width) solid var(--border);
}
.slide .shell{width:100%}
.slide-in{max-width:60rem}
.slide .kick{font-size:.75rem; font-weight:600; letter-spacing:var(--tracking-label); text-transform:uppercase; color:var(--accent-text); margin-block-end:var(--space-24)}
.slide .n{font-size:clamp(4.5rem,14vw,11rem); font-weight:600; letter-spacing:-.05em; line-height:.9; font-variant-numeric:tabular-nums lining-nums}
.slide .t{font-size:clamp(1.25rem,2.4vw,1.75rem); line-height:1.4; margin-block-start:var(--space-24); max-width:38rem; text-wrap:pretty}
.slide .src{margin-block-start:var(--space-32); font-size:.75rem; max-width:38rem}
.slide.s-a{background:var(--orange-50)} .slide.s-b{background:var(--neutral-900); color:var(--neutral-50)} .slide.s-c{background:var(--neutral-100)}
.slide.s-d{background:var(--orange-100)} .slide.s-e{background:var(--background-1)} .slide.s-f{background:var(--neutral-900); color:var(--neutral-50)}
.slide.s-b .kick,.slide.s-f .kick{color:var(--orange-300)} .slide.s-b .src,.slide.s-f .src{color:var(--neutral-400)} .slide.s-b .src a,.slide.s-f .src a{color:var(--neutral-400)}
.slide.s-b .n,.slide.s-f .n{color:var(--neutral-50)}
.slide .n.need{font-size:clamp(1.5rem,3vw,2.5rem); letter-spacing:-.02em; line-height:1.2}
.stack-count{position:absolute; inset-block-start:var(--space-24); inset-inline-end:var(--margin); font-size:.75rem; font-weight:600; color:var(--text-muted); font-variant-numeric:tabular-nums}
.slide.s-b .stack-count,.slide.s-f .stack-count{color:var(--neutral-500)}
@media (max-width:47.9375rem){.slide{padding-block:var(--space-64)}}

/* author band, full bleed */
.authorband{background:var(--neutral-900); color:var(--neutral-50)}
.authorband .shell{display:grid; grid-template-columns:auto minmax(0,44rem); column-gap:var(--space-64); align-items:center}
@media (max-width:61.9375rem){.authorband .shell{grid-template-columns:1fr; row-gap:var(--space-32)}}
.authorband .portrait{width:clamp(10rem,18vw,16rem); height:clamp(10rem,18vw,16rem); border-radius:var(--radius-full); object-fit:cover; border:.25rem solid var(--orange-300); display:block}
.authorband .eyebrow{color:var(--orange-300)}
.authorband h2{color:var(--neutral-50); margin-bottom:var(--space-8)}
.authorband .role{color:var(--orange-200); font-weight:600; margin-block-end:var(--space-24)}
.authorband p{color:var(--neutral-300); font-size:1.0625rem}
.authorband a{color:var(--orange-300)}
.authorband .src{color:var(--neutral-500)}

/* mobile pass: every set piece fits a phone screen */
@media (max-width:47.9375rem){
  .intro p:first-of-type{font-size:1.25rem}
  .exp-out{padding:var(--space-24)}
  .exp-big{font-size:3.5rem}
  .exp-bars{grid-template-columns:4.5rem 1fr 3rem; font-size:.75rem}
  .agetabs .mtab{padding:.4375rem .75rem; font-size:.8125rem}
  .rung{grid-template-columns:1fr auto; grid-template-areas:"l v" "t t"; gap:.25rem var(--space-12)}
  .rung .rl{grid-area:l} .rung .rv{grid-area:v; text-align:end} .rung .rt{grid-area:t}
  .srccard .n{font-size:2rem}
  .cstats{grid-template-columns:repeat(2,1fr)}
  .mapstage{margin-inline:calc(var(--margin) * -.5)}
  .ptxt b{font-size:.6875rem} .ptxt i{font-size:.875rem} .pin .pdelta{font-size:.625rem}
  .doorgrid{max-width:none}
  .bigquote blockquote{font-size:2rem}
  .banner .panel{padding:var(--space-24)} .banner h2{font-size:1.5rem; line-height:1.9rem}
  .statgrid{gap:var(--space-16)} .stat{padding:var(--space-24)}
  .sec-head{margin-bottom:var(--space-40)}
}
.brand img{width:auto; height:1.75rem}
.brand small{margin-inline-start:var(--space-4); padding-inline-start:var(--space-12); border-inline-start:var(--border-width) solid var(--border)}
@media (max-width:47.9375rem){.brand small{display:none} .brand img{height:1.5rem}}
.drawer-top img{width:auto; height:1.75rem}
.drawer-logo{width:auto; height:1.75rem; color:var(--neutral-50); display:block}

/* ============================== V3.3 ============================== */
.conclusion{max-width:46rem}
.conclusion .lede{color:var(--text-primary); font-size:1.375rem; line-height:1.5; margin-block-end:var(--space-24)}
.conclusion p{font-size:1.125rem; line-height:1.6}
.conclusion .big-q{font-size:clamp(1.75rem,3.4vw,2.75rem); line-height:1.15; font-weight:600; letter-spacing:-.03em; color:var(--accent-text); margin-block:var(--space-48) var(--space-24); text-wrap:balance}
.conclusion a{color:var(--accent-text); font-weight:600}
/* a check badge that explains itself on hover or focus */
.needtip{position:relative; cursor:help}
.needtip .tipbody{
  position:absolute; inset-block-end:calc(100% + .5rem); inset-inline-start:0; width:20rem; max-width:80vw; z-index:5;
  background:var(--neutral-50); color:var(--neutral-900); border:var(--border-width) solid var(--border-strong); border-radius:var(--radius-md);
  padding:.75rem .875rem; font-size:.75rem; font-weight:500; line-height:1.5; text-align:start; opacity:0; pointer-events:none; transition:opacity .15s ease;
}
.needtip:hover .tipbody,.needtip:focus .tipbody,.needtip:focus-within .tipbody{opacity:1; pointer-events:auto}
/* slide numbers hold their true value in HTML; the script counts them in when the slide is in view */
.js .slide .n{transition:opacity .4s ease}
.slide{overflow:clip}
@media (max-width:47.9375rem){.needtip .tipbody{inset-inline-start:auto; inset-inline-end:0; width:min(20rem, calc(100vw - 3rem))}}

/* ============================== V3.4 (14 Sep pm: Matt's mobile and laptop pass) ============================== */
/* Laptop: a 120rem shell left every column pressed against the left edge of a 1440 screen.
   Centre the page at 80rem and let the prose measures use the room. */
.shell{max-width:88rem}
.topbar .shell{max-width:none}
.sec-head{max-width:46rem}
.lede{max-width:44rem}
@media (min-width:62rem){.intro .grid{grid-template-columns:minmax(0,46rem) minmax(0,22rem)}}
.churn .doorgrid{justify-self:center}
.facts{max-width:30rem}
.aside-note{max-width:none}

/* Source lines: container paragraph rules (.sec-head p, .aside-note .body p, .conclusion p) outranked .src
   and inflated the grey attribution to body size. Pin it. */
p.src,.sec-head p.src,.intro p.src,.conclusion p.src,.aside-note .body p.src{
  font-size:.75rem; line-height:1.5; color:var(--text-muted); font-weight:500;
}

/* The swipe hint only exists where the pill row scrolls */
.swipehint{display:none}

@media (max-width:47.9375rem){
  /* hero: less dead gradient above the eyebrow, display and lede sized for a phone */
  .hero{padding-block:var(--space-48) var(--space-40)}
  .hero .eyebrow{font-size:.6875rem; margin-bottom:var(--space-16)}
  h1.hero-display{font-size:2.5rem; line-height:1.02; margin-bottom:var(--space-24)}
  .lede{font-size:1.0625rem; line-height:1.6}
  .hero .lede{margin-bottom:var(--space-24)}
  .cta-note{font-size:.875rem}
  .methodline{font-size:.75rem; margin-block-start:var(--space-24)}

  /* type scale across the page */
  h2{font-size:1.75rem; line-height:2.125rem; margin-bottom:var(--space-24)}
  h3{font-size:1.5rem; line-height:1.875rem}
  .sec-head p{font-size:1rem}
  .intro p{font-size:1.0625rem; line-height:1.55}
  .intro p:first-of-type{font-size:1.1875rem; line-height:1.4}
  .stat .num{font-size:2.25rem}
  .stat .lbl{font-size:.875rem}
  .aside-note .big{font-size:3rem}
  .aside-note .body p{font-size:1rem}
  .bar .top span{font-size:.875rem} .bar .top b{font-size:1rem}
  .fact .n{font-size:1.875rem} .fact .t{font-size:.875rem}
  .bigstat-t{font-size:1.0625rem}
  .conclusion .lede{font-size:1.1875rem} .conclusion p{font-size:1rem}
  .maplabel{font-size:.875rem}
  p.src,.sec-head p.src,.intro p.src,.conclusion p.src,.aside-note .body p.src{font-size:.75rem}

  /* the measure pills scroll sideways: fade the trailing edge until the row is scrolled to its end, and say so */
  .metricbar{
    margin-block-end:var(--space-8);
    -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 3.5rem), transparent);
    mask-image:linear-gradient(to right, #000 calc(100% - 3.5rem), transparent);
  }
  .metricbar.at-end{-webkit-mask-image:none; mask-image:none}
  .swipehint{display:block; font-size:.75rem; color:var(--text-muted); margin:0 0 var(--space-32)}
  .metricbar.at-end + .swipehint{visibility:hidden}
}

/* V3.4b: the houses close the hero. Warm ground under them, method line moved below them. */
.hero .shell{padding-block-end:var(--space-48)}
.streetscape{margin-block-start:var(--space-24)}
.hero.warm::after{
  content:""; position:absolute; inset:auto 0 0 0; height:22rem; z-index:0; pointer-events:none;
  background:linear-gradient(to bottom, transparent, var(--orange-50));
}
.methodline-intro{margin-block:0 var(--space-64); max-width:60rem}
@media (max-width:47.9375rem){
  .hero .shell{padding-block-end:var(--space-32)}
  .methodline-intro{margin-block-end:var(--space-48)}
}
/* mobile-only city selector: on a phone the map sits far above the panel, so say how to change it */
.cityselect{display:none}
@media (max-width:61.9375rem){
  .cityselect{display:grid; gap:var(--space-8); margin-block-end:var(--space-16); font-size:.8125rem; font-weight:600; color:var(--text-secondary)}
  .cityselect select{
    font:inherit; font-size:1rem; font-weight:600; color:var(--text-primary); background:var(--neutral-50);
    border:var(--border-width) solid var(--border-strong); border-radius:var(--radius-md); padding:.75rem 1rem; width:100%;
  }
}
/* the intro's paragraph size was outranking .methodline; keep the headline to three lines on a laptop */
.intro p.methodline{font-size:.8125rem; line-height:1.6; color:var(--text-secondary); font-weight:500}
h1.hero-display{max-width:72rem}
@media (max-width:47.9375rem){.intro p.methodline{font-size:.75rem}}

/* ============================== V3.5 (14 Sep evening: Matt's second review) ============================== */
/* the hero fills the first screen and the houses sit on its floor */
.hero.warm{min-height:calc(100svh - 4rem); display:flex; flex-direction:column}
.hero.warm > .shell{flex:1; display:flex; flex-direction:column; justify-content:center}
.hero.warm > .streetscape{margin-block-start:auto}
/* method line now sits after the intro copy */
.methodline-intro{margin-block:var(--space-32) 0; max-width:none}
/* Why this is happening: eyebrow and heading pin under the nav while the six sources scroll past */
#why{padding-block-end:0}
.why-pin{position:sticky; top:4rem; z-index:6; background:var(--background-1); border-block-end:var(--border-width) solid var(--border); padding-block:var(--space-12)}
.why-pin .eyebrow{margin-bottom:var(--space-4)}
.why-pin h2{font-size:1.5rem; line-height:1.9rem; margin:0; text-wrap:balance}
.why-lede{margin-block:var(--space-48) var(--space-32)}
#why .slide{top:calc(4rem + var(--pin-h, 5.5rem)); min-height:calc(100svh - 4rem - var(--pin-h, 5.5rem))}
#why .stack-count{inset-block-start:var(--space-16)}
@media (max-width:47.9375rem){
  .why-pin h2{font-size:1.25rem; line-height:1.6rem}
  .why-lede{margin-block:var(--space-32) var(--space-24)}
  .hero.warm{min-height:0}
}
/* hero fits one laptop screen: less top padding, shorter houses on short windows, scroll hint tucked in */
@media (min-width:48rem){
  .hero.warm > .shell{padding-block:var(--space-48) var(--space-24)}
  .hero.warm h1.hero-display{font-size:clamp(3rem, 7.2vw, 6.5rem); margin-bottom:var(--space-24)}
  .hero.warm .lede{margin-bottom:var(--space-24)}
  .hero.warm .scrollhint{margin-block-start:var(--space-24)}
  .hero.warm > .streetscape{height:clamp(7.5rem, 15vh, 13.75rem); margin-block-start:var(--space-16)}
}
.hero.warm{padding-block:0}
@media (min-width:48rem){
  .hero-display .l1{display:block}
  .hero.warm > .shell{padding-block:var(--space-40) var(--space-16)}
  .hero.warm .scrollhint{margin-block-start:var(--space-16)}
  .hero.warm > .streetscape{height:clamp(6.5rem, 13vh, 13.75rem); margin-block-start:var(--space-8)}
}
@media (min-width:48rem){
  /* trade headline and lede height for taller houses, so the roofs survive the crop */
  .hero.warm h1.hero-display{font-size:clamp(3rem, 6.4vw, 6rem); margin-bottom:var(--space-16)}
  .hero.warm .eyebrow{margin-bottom:var(--space-8)}
  .hero.warm .lede{max-width:52rem; margin-bottom:var(--space-16)}
  .hero.warm .scrollhint{display:none}
  .hero.warm > .shell{padding-block:var(--space-32) var(--space-8)}
  .hero.warm > .streetscape{height:clamp(9rem, 20vh, 13.75rem); margin-block-start:var(--space-8)}
}

/* ============================== V3.6 (14 Sep night: hero recentred, Census, about band) ============================== */
/* hero: centred column, houses smaller with room either side */
.hero.warm{text-align:center; min-height:calc(100svh - 4rem)}
.hero.warm > .shell{align-items:center}
.hero.warm .eyebrow{margin-bottom:var(--space-16)}
.hero.warm h1.hero-display{font-size:clamp(2.5rem, 5.6vw, 5.5rem); line-height:1; max-width:16ch; margin-inline:auto; margin-bottom:var(--space-24)}
.hero.warm .lede{max-width:46rem; margin-inline:auto; margin-bottom:var(--space-32); font-size:1.125rem; line-height:1.65}
.hero.warm .button-wrapper{justify-content:center}
.hero.warm .cta-stack{align-items:center}
.hero.warm .cta-stack .cta-note{margin:0}
.hero.warm > .streetscape{width:min(72vw, 68rem); height:auto; margin-inline:auto; margin-block-start:var(--space-24)}
@media (min-width:48rem){
  .hero.warm > .shell{padding-block:var(--space-48) var(--space-8)}
  .hero.warm .scrollhint{display:none}
}
@media (max-width:47.9375rem){
  .hero.warm{min-height:0}
  .hero.warm > .shell{padding-block:var(--space-48) var(--space-24)}
  .hero.warm .eyebrow{font-size:.6875rem; margin-bottom:var(--space-12)}
  .hero.warm h1.hero-display{font-size:2.25rem; line-height:1.05; margin-bottom:var(--space-16)}
  .hero.warm .lede{font-size:.9375rem; line-height:1.55; margin-bottom:var(--space-24)}
  .hero.warm .button-wrapper{flex-direction:column; align-items:center}
  .hero.warm > .streetscape{width:100%; margin-block-start:var(--space-16)}
}
/* founder's note in the author band */
.founder-note{margin:var(--space-24) 0 0; padding-inline-start:var(--space-16); border-inline-start:.1875rem solid var(--orange-300); color:var(--neutral-300); font-size:1.0625rem; line-height:1.6; text-wrap:pretty}
/* Census section */
#census .statgrid{margin-block-end:var(--space-64)}
#census .stat .num{font-size:clamp(2.25rem,4vw,3rem)}
.census-two{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-64); margin-block-end:var(--space-64)}
.census-two h3,.census-series h3{font-size:1.25rem; line-height:1.6rem; margin-bottom:var(--space-16)}
.census-two p{color:var(--text-secondary)}
.census-series{max-width:44rem}
.census-series .bar .top span small{color:var(--text-muted); font-size:.75rem; font-weight:600; margin-inline-start:var(--space-8)}
@media (max-width:61.9375rem){.census-two{grid-template-columns:1fr; gap:var(--space-40)}}
/* about band at the base */
.about-band{padding-block:var(--space-80)}
.about-grid{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-64)}
.about-grid p{color:var(--text-secondary)}
.about-grid .eyebrow{color:var(--text-primary)}
@media (max-width:61.9375rem){.about-grid{grid-template-columns:1fr; gap:var(--space-40)}}
/* V3.7: 16% tile label, hero buttons, centred conclusion, one-take Census */
.aside-note .big .biglbl{display:block; font-size:.8125rem; font-weight:600; letter-spacing:0; color:var(--text-secondary); margin-block-start:var(--space-8); line-height:1.4}
@media (min-width:48rem){.hero.warm .button-wrapper{align-items:flex-end}}
#conclusion{text-align:center}
#conclusion .conclusion-head{max-width:46rem; margin-inline:auto}
#conclusion .conclusion{margin-inline:auto}
#conclusion .conclusion .big-q{margin-inline:auto}
#conclusion .button-wrapper{justify-content:center}
.census-take{max-width:46rem; margin-block-start:var(--space-48)}
.census-take h3{font-size:1.125rem; line-height:1.5rem; margin-bottom:var(--space-12)}
.census-take p{color:var(--text-secondary)}
/* V3.8: the measure picker lives with the map, as a select, so the map is in view when it changes */
.measureselect{display:grid; gap:var(--space-8); margin-block-end:var(--space-24); font-size:.8125rem; font-weight:600; color:var(--text-secondary); max-width:24rem}
.measureselect select{
  font:inherit; font-size:1rem; font-weight:600; color:var(--text-primary); background:var(--neutral-50);
  border:var(--border-width) solid var(--border-strong); border-radius:var(--radius-md); padding:.75rem 1rem; width:100%;
}
/* V3.8b: hero headline and subhead up 2px */
.hero.warm h1.hero-display{font-size:clamp(2.625rem, 5.75vw, 5.625rem)}
.hero.warm .lede{font-size:1.25rem}
@media (max-width:47.9375rem){
  .hero.warm h1.hero-display{font-size:2.375rem}
  .hero.warm .lede{font-size:1.0625rem}
}
/* V3.9: no sideways scroll on phones. The closed drawer sits translated off the right edge, which Safari counts as
   scrollable width; hide it while closed and clip horizontal overflow at the root without creating a scroll container. */
html,body{overflow-x:clip}
.drawer:not([data-open="true"]){visibility:hidden; transition:transform .3s cubic-bezier(.22,1,.36,1), visibility 0s linear .3s}
.drawer[data-open="true"]{visibility:visible}
/* mobile hero: subhead back down, houses back on the first screen */
@media (max-width:47.9375rem){
  .hero.warm{min-height:calc(100svh - 4rem)}
  .hero.warm > .shell{padding-block:var(--space-40) var(--space-16)}
  .hero.warm h1.hero-display{font-size:2.25rem}
  .hero.warm .lede{font-size:.9375rem; line-height:1.5; margin-bottom:var(--space-20, 1.25rem)}
  .hero.warm .button-wrapper{gap:var(--space-12)}
  .hero.warm .scrollhint{display:none}
  .hero.warm > .streetscape{width:100%; height:auto; margin-block-start:var(--space-12)}
}
/* V3.9b mobile hero: content sits high, headline larger, scroll hint back */
@media (max-width:47.9375rem){
  .hero.warm > .shell{justify-content:flex-start; padding-block-start:var(--space-32)}
  .hero.warm h1.hero-display{font-size:2.5rem; line-height:1.02}
  .hero.warm .scrollhint{display:inline-flex; margin-block-start:var(--space-32)}
}
/* V3.9c: buttons sink to just above the houses on a phone; headline block a touch lower; scroll hint on every width */
.hero.warm .scrollhint{display:inline-flex}
@media (min-width:48rem){
  .hero.warm .scrollhint{margin-block-start:var(--space-24)}
  .hero.warm > .streetscape{width:min(64vw, 60rem)}
}
@media (max-width:47.9375rem){
  .hero.warm > .shell{padding-block-start:var(--space-48)}
  .hero.warm .button-wrapper{margin-block-start:auto; padding-block-start:var(--space-40)}
  .hero.warm .scrollhint{margin-block-start:var(--space-24)}
}
/* V3.9d mobile hero: headline block lower, headline 41px */
@media (max-width:47.9375rem){
  .hero.warm > .shell{padding-block-start:4.5rem}
  .hero.warm h1.hero-display{font-size:2.5625rem}
}
/* V3.9e mobile hero: buttons a touch higher; scroll hint stays above the houses */
@media (max-width:47.9375rem){ .hero.warm .scrollhint{margin-block-start:var(--space-40)} }
/* V3.10: method notes as one row of three on a laptop */
.method-open{max-width:none}
@media (min-width:62rem){.method .cols{grid-template-columns:repeat(3,1fr); gap:var(--space-48)}}
/* V3.11 mobile hero: type scales with screen height so tall phones fill the space without crowding the buttons */
@media (max-width:47.9375rem){
  .hero.warm > .shell{padding-block-start:clamp(3rem, 7svh, 4.5rem)}
  .hero.warm .eyebrow{margin-bottom:clamp(.75rem, 1.8svh, 1.25rem)}
  .hero.warm h1.hero-display{font-size:clamp(2.5625rem, 5.4svh, 3.125rem); margin-bottom:clamp(1rem, 2.4svh, 1.5rem)}
  .hero.warm .lede{font-size:clamp(.9375rem, 2.05svh, 1.0625rem); line-height:1.5}
}
/* V3.12 mobile hero: spare height is shared evenly above the copy, between copy and actions, and above the houses */
@media (max-width:47.9375rem){
  .hero.warm > .shell{justify-content:space-evenly; padding-block:var(--space-16) var(--space-8)}
  .hero.warm .hero-copy,.hero.warm .hero-actions{display:flex; flex-direction:column; align-items:center; width:100%}
  .hero.warm .button-wrapper{margin-block-start:0; padding-block-start:0}
  .hero.warm .lede{margin-bottom:0}
  .hero.warm .scrollhint{margin-block-start:var(--space-32)}
}