/* Market Rent — stylesheet. Design tokens and rationale live in DESIGN.md.
   Direction (2026-07-03 redesign): WARM EDITORIAL. The credibility of official
   data with the warmth of a good print magazine — cream paper, a teal trust
   anchor lifted by clay + honey secondaries, expressive Fraunces display over a
   warm humanist Hanken Grotesk body, fluid type, layered ambient shadows,
   hand-drawn SVG spot illustrations, and gentle scroll-in motion. Read
   DESIGN.md before changing anything visual. */

:root {
  /* ── Warm paper-and-ink neutrals ─────────────────────────────────────── */
  --paper:#FBF6ED;        /* warm cream page */
  --paper-2:#F3E9D6;      /* deeper cream for full-bleed bands */
  --surface:#FFFCF6;      /* warm white cards */
  --ink:#221D17;          /* warm near-black */
  --ink-soft:#544B3F;     /* softer heading / secondary ink */
  --muted:#6B6055;        /* muted text — darkened to clear WCAG AA (5.7:1 on paper) */
  --hairline:#EADFCC;     /* hairline / border */
  --hairline-2:#DFD3BC;   /* stronger hairline */

  /* ── Teal trust anchor + warm secondaries ────────────────────────────── */
  --accent:#0E5B54;       --accent-hover:#0A4740;
  --accent-soft:#E1EDEA;  --accent-line:#BFDAD3;
  --clay:#BF5330;         --clay-soft:#F7E5D8;   /* terracotta — warmth/story */
  --honey:#BE861B;        --honey-soft:#F5E9CC;  /* ochre — highlights */
  --gold:#E9B84B;         /* bright illustration highlight */
  --med-fg:#8A5E12;       /* amber sample-size notes — darkened to clear WCAG AA (5.3:1 on paper) */

  /* Direction scale — reads on rent, not good/bad: rose = warm (costs more),
     eased = cool green (relief), steady = grey. One warm family. */
  --up:#B0562C; --up-bg:#F6E6D9;
  --down:#2E7D5B; --down-bg:#E3EFE8;
  --flat:#6B6055; --flat-bg:#EFE6D6;   /* grey delta text — AA on paper (5.7:1) and on flat-bg (5.0:1) */

  /* Categorical chart lines (compare) — teal / clay / slate / honey. */
  --c1:#0E5B54; --c2:#BF5330; --c3:#5B6C9E; --c4:#BE861B;

  /* ── Fluid type scale (clamp: mobile → desktop, no breakpoint jumps) ──── */
  --t-hero: clamp(2.75rem, 1.7rem + 4.6vw, 4.6rem);
  --t-h1:   clamp(2.15rem, 1.5rem + 2.8vw, 3.35rem);
  --t-h2:   clamp(1.55rem, 1.25rem + 1.4vw, 2.15rem);
  --t-h3:   clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  --t-lede: clamp(1.08rem, 1.02rem + 0.4vw, 1.3rem);
  --t-body: 1.0625rem;

  /* ── Layered ambient shadows (never one flat box-shadow) ─────────────── */
  --shadow-sm: 0 1px 2px rgba(58,38,16,.04), 0 2px 6px rgba(58,38,16,.05);
  --shadow-md: 0 1px 2px rgba(58,38,16,.04), 0 6px 16px -6px rgba(58,38,16,.10), 0 18px 34px -14px rgba(58,38,16,.12);
  --shadow-lg: 0 2px 4px rgba(58,38,16,.05), 0 12px 28px -8px rgba(58,38,16,.14), 0 34px 60px -20px rgba(58,38,16,.16);

  --wrap:1060px;
  --r-sm:8px; --r-md:14px; --r-lg:22px;
  --ease: cubic-bezier(.22,1,.36,1);        /* soft overshoot for hovers */
  --ease-io: cubic-bezier(.16,.84,.44,1);   /* scroll-reveal drift */
}

/* ── Warm dark theme ─────────────────────────────────────────────────────
   Same warm-editorial identity after dark: a warm near-black paper, warm
   off-white ink, the teal anchor and clay/honey secondaries lifted for
   contrast. Token-only — every component re-skins from here. A tiny head
   script sets data-theme from the saved choice or the OS preference before
   first paint (no flash); the header toggle flips it. `color-scheme` keeps
   native controls (scrollbars, form widgets) matched to the theme. */
:root { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper:#17130E; --paper-2:#1F1811; --surface:#201A12;
  --ink:#F2EADD; --ink-soft:#CBBEAB; --muted:#9E9080;
  --hairline:#322A20; --hairline-2:#453A2C;
  --accent:#4FB3A6; --accent-hover:#6AC7BB; --accent-soft:#16302C; --accent-line:#2C5B54;
  --clay:#E0764C; --clay-soft:#382318; --honey:#D9A63C; --honey-soft:#372B14;
  --gold:#E9B84B; --med-fg:#D8A94E;
  --up:#E0794A; --up-bg:#372318; --down:#5FBF8E; --down-bg:#173026; --flat:#9E9080; --flat-bg:#2A2217;
  --c1:#4FB3A6; --c2:#E0764C; --c3:#8A99C8; --c4:#D9A63C;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.30), 0 2px 6px rgba(0,0,0,.28);
  --shadow-md: 0 1px 2px rgba(0,0,0,.30), 0 6px 16px -6px rgba(0,0,0,.45), 0 18px 34px -14px rgba(0,0,0,.5);
  --shadow-lg: 0 2px 4px rgba(0,0,0,.35), 0 12px 28px -8px rgba(0,0,0,.5), 0 34px 60px -20px rgba(0,0,0,.55);
}
:root[data-theme="dark"] body {
  background:var(--paper);
  background-image:
    radial-gradient(120% 80% at 8% -10%, rgba(217,166,60,.06), transparent 55%),
    radial-gradient(110% 70% at 100% 0%, rgba(224,118,76,.05), transparent 50%);
}
/* Shimmer reads as a faint light sweep, not a bright flash, on dark cards. */
:root[data-theme="dark"] .skel::after { background:linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent); }

/* Dark-mode component fixes: some chrome and graphics hardcode light values
   (frosted overlays, white-on-teal labels, ranked-bar gradients) that don't
   invert with the tokens. These restore contrast after dark. */
:root[data-theme="dark"] .nav-overlay { background:rgba(23,19,14,.90); }
:root[data-theme="dark"] .site-head.scrolled { background:rgba(23,19,14,.72); box-shadow:0 8px 24px -16px rgba(0,0,0,.6); }
/* White on the lightened dark-mode teal (#4FB3A6) fails AA (~2.5:1); dark ink
   on it clears ~6:1. Covers the primary button and every active toggle/pill. */
:root[data-theme="dark"] .btn,
:root[data-theme="dark"] .pill.on,
:root[data-theme="dark"] .seg button.on,
:root[data-theme="dark"] .subnav a.on,
:root[data-theme="dark"] .subnav button.on,
:root[data-theme="dark"] .propbar span { color:#17130E; }
:root[data-theme="dark"] .near-btn:hover { background:var(--accent-line); }
:root[data-theme="dark"] .bar-fill { background:linear-gradient(90deg, var(--accent), var(--accent-hover)); }
:root[data-theme="dark"] .bar-fill.up { background:linear-gradient(90deg, var(--up), #B0562C); }
:root[data-theme="dark"] .bar-fill.down { background:linear-gradient(90deg, var(--down), #2E7D5B); }

* { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x:clip; }
body { margin:0; color:var(--ink);
  background:var(--paper);
  /* faint warm wash top-left so the page never reads as flat white */
  background-image:
    radial-gradient(120% 80% at 8% -10%, rgba(233,184,75,.10), transparent 55%),
    radial-gradient(110% 70% at 100% 0%, rgba(191,83,48,.06), transparent 50%);
  background-attachment:fixed;
  font-family:"Hanken Grotesk", system-ui, sans-serif;
  font-size:var(--t-body); line-height:1.55; letter-spacing:-0.005em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }

.wrap { max-width:var(--wrap); margin:0 auto; padding:clamp(32px,4vw,64px) clamp(18px,4vw,32px) clamp(72px,9vw,120px); }
/* The skip link moves focus to #main (tabindex="-1"); don't paint an outline
   around the whole content region when it receives that programmatic focus. */
#main:focus { outline:none; }
/* Prose stays a readable measure even as the frame widened for data. */
.lede, .story, .meta, .footnote, .about ul { max-width:64ch; }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.skip-link { position:absolute; left:12px; top:-52px; z-index:120; background:var(--accent); color:#fff;
  padding:10px 16px; border-radius:var(--r-sm); font-size:0.875rem; font-weight:600; text-decoration:none; transition:top .18s var(--ease); }
.skip-link:focus { top:12px; outline:2px solid #fff; outline-offset:2px; }

/* ── Site chrome: frosted sticky header ─────────────────────────────────── */
.site-head { position:sticky; top:0; z-index:100; transition:background .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  border-bottom:1px solid transparent; }
.site-head.scrolled { background:rgba(251,246,237,.72); backdrop-filter:blur(14px) saturate(1.4); -webkit-backdrop-filter:blur(14px) saturate(1.4);
  border-bottom-color:var(--hairline); box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 8px 24px -16px rgba(58,38,16,.4); }
.site-head-in { max-width:var(--wrap); margin:0 auto; padding:12px clamp(18px,4vw,32px); display:flex; align-items:center; gap:20px; }
.brand { display:inline-flex; align-items:center; gap:9px; font-family:"Fraunces", Georgia, serif; font-weight:600; font-size:1.15rem;
  color:var(--ink); text-decoration:none; white-space:nowrap; letter-spacing:-0.01em; }
.brand-mark { width:26px; height:26px; color:var(--accent); flex:none; transition:transform .4s var(--ease); }
.brand:hover .brand-mark { transform:translateY(-2px) rotate(-3deg); }
.site-nav { display:flex; gap:2px; margin-left:auto; font-size:0.9rem; font-weight:500; }
.site-nav a { position:relative; color:var(--ink-soft); text-decoration:none; white-space:nowrap; padding:8px 12px; border-radius:9999px;
  transition:color .2s var(--ease), background .2s var(--ease); }
.site-nav a::after { content:""; position:absolute; left:12px; right:12px; bottom:4px; height:2px; border-radius:2px;
  background:var(--clay); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease); }
.site-nav a:hover { color:var(--ink); }
.site-nav a:hover::after { transform:scaleX(1); }
.site-nav a.on { color:var(--accent); }
.site-nav a.on::after { background:var(--accent); transform:scaleX(1); }

/* Hamburger → fullscreen overlay (mobile only). */
.nav-toggle { display:none; margin-left:auto; width:48px; height:48px; border:0; background:transparent; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px; border-radius:9999px; }
.nav-toggle span { display:block; width:24px; height:2px; border-radius:2px; background:var(--ink); transition:transform .3s var(--ease), opacity .2s var(--ease); }
.nav-toggle.is-open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity:0; }
.nav-toggle.is-open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

/* Light/dark toggle — sits after the nav on desktop, beside the hamburger on
   mobile. Shows a moon in light mode (tap for dark), a sun in dark mode. */
.theme-toggle { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; flex:none;
  border:0; background:transparent; color:var(--ink-soft); cursor:pointer; border-radius:9999px;
  transition:color .2s var(--ease), background .25s var(--ease); }
.theme-toggle:hover { color:var(--ink); background:var(--flat-bg); }
.theme-toggle:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.theme-toggle svg { width:20px; height:20px; display:block; }
.theme-toggle .ic-sun { display:none; }
:root[data-theme="dark"] .theme-toggle .ic-sun { display:block; }
:root[data-theme="dark"] .theme-toggle .ic-moon { display:none; }

.nav-overlay { position:fixed; inset:0; z-index:110; background:rgba(251,246,237,.86); backdrop-filter:blur(20px) saturate(1.4);
  -webkit-backdrop-filter:blur(20px) saturate(1.4); display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .32s var(--ease); }
/* When closed (hidden attr) it must not exist in the layer at all, or an
   invisible full-screen layer would swallow every click on the page. */
.nav-overlay[hidden] { display:none; }
.nav-overlay.show { opacity:1; pointer-events:auto; }
.nav-overlay nav { display:flex; flex-direction:column; gap:6px; padding:24px; width:100%; max-width:440px; }
.nav-overlay a { display:flex; align-items:baseline; gap:16px; font-family:"Fraunces", Georgia, serif; font-weight:500;
  font-size:clamp(1.6rem,7vw,2.2rem); color:var(--ink); text-decoration:none; padding:10px 4px; border-bottom:1px solid var(--hairline);
  transform:translateY(14px); opacity:0; transition:transform .5s var(--ease), opacity .5s var(--ease), color .2s var(--ease); }
.nav-overlay a:hover { color:var(--accent); }
.nav-overlay .no-i { font-family:"Hanken Grotesk", sans-serif; font-size:0.8rem; font-weight:600; color:var(--clay); letter-spacing:.05em; }
.nav-overlay.show a { transform:none; opacity:1; }
.nav-overlay.show a:nth-child(1){transition-delay:.04s} .nav-overlay.show a:nth-child(2){transition-delay:.08s}
.nav-overlay.show a:nth-child(3){transition-delay:.12s} .nav-overlay.show a:nth-child(4){transition-delay:.16s}
.nav-overlay.show a:nth-child(5){transition-delay:.20s} .nav-overlay.show a:nth-child(6){transition-delay:.24s}
body.nav-open { overflow:hidden; }

section { scroll-margin-top:72px; margin-top:clamp(28px,4vw,44px); }

/* ── Scroll-reveal: gentle drift-in for key blocks ──────────────────────── */
[data-reveal] { opacity:0; transform:translateY(20px); transition:opacity .7s var(--ease-io), transform .7s var(--ease-io); will-change:opacity, transform; }
[data-reveal].in { opacity:1; transform:none; }
[data-reveal][data-reveal="left"] { transform:translateX(-22px); }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-foot { border-top:1px solid var(--hairline); margin-top:clamp(48px,8vw,96px); background:linear-gradient(180deg, transparent, rgba(243,233,214,.5)); }
.site-foot-in { max-width:var(--wrap); margin:0 auto; padding:clamp(32px,5vw,52px) clamp(18px,4vw,32px) clamp(48px,7vw,72px); font-size:0.9rem; color:var(--muted); }
.foot-word { display:flex; gap:14px; align-items:flex-start; max-width:60ch; margin:0 0 16px; }
.foot-mark { width:30px; height:30px; color:var(--accent); flex:none; margin-top:2px; }
.foot-word p { margin:0; font-family:"Fraunces", Georgia, serif; font-size:1.15rem; line-height:1.4; color:var(--ink-soft); }
.foot-fresh { margin:0 0 10px; font-weight:600; color:var(--ink-soft); }
.foot-src { margin:0; max-width:80ch; }
.site-foot a { color:var(--accent); }

/* ── Type ───────────────────────────────────────────────────────────────── */
h1 { font-family:"Fraunces", Georgia, serif; font-weight:500; font-size:var(--t-h1); line-height:1.04; letter-spacing:-0.02em; margin:0 0 16px; }
.kicker { display:inline-flex; align-items:center; gap:8px; font-size:0.75rem; letter-spacing:.15em; text-transform:uppercase;
  color:var(--clay); font-weight:600; margin:0 0 16px; }
.kicker::before { content:""; width:22px; height:2px; border-radius:2px; background:var(--clay); }
.lede { color:var(--ink-soft); font-size:var(--t-lede); line-height:1.5; margin:0 0 14px; }
.meta { font-size:0.875rem; color:var(--muted); margin:0 0 40px; }
.meta strong { color:var(--ink); font-weight:600; }
a { color:var(--accent); text-decoration-thickness:1px; text-underline-offset:2px; }

/* ── Editorial hero (home) — asymmetric text + illustration ──────────────── */
.hero { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(20px,4vw,48px); align-items:center;
  margin:clamp(12px,3vw,36px) 0 clamp(28px,5vw,52px); }
.hero-copy, .hero-art { min-width:0; }
.hero-copy { position:relative; z-index:2; }
.hero h1 { font-size:var(--t-hero); font-weight:600; }
.hero h1 em { font-style:italic; font-weight:500; color:var(--clay); }
.hero .lede { max-width:46ch; }
.hero-art { position:relative; }
.hero-art svg { display:block; width:100%; height:auto; filter:drop-shadow(0 24px 40px rgba(58,38,16,.14)); }
/* Slight overlap: the hero art nudges under the copy on wide screens. */
@media (min-width:861px) { .hero-art { margin-left:-6%; } }

.spot { display:block; }
.search-hero { margin:24px 0 14px; max-width:520px; }
.search-hero input { padding:15px 18px; font-size:1.05rem; }
.hero-cta { display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin:0 0 10px; }

/* ── Combobox / inputs ──────────────────────────────────────────────────── */
.combo { position:relative; }
.combo input, select, input[type="number"] { width:100%; padding:12px 15px; font:inherit; color:var(--ink);
  background:var(--surface); border:1px solid var(--hairline-2); border-radius:var(--r-sm); box-shadow:var(--shadow-sm);
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease); font-variant-numeric:tabular-nums; }
.combo input { box-shadow:none; }
.combo input:focus, select:focus, input[type="number"]:focus { outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft); }
.combo input::placeholder { color:var(--muted); opacity:.85; }
select { font-variant-numeric:tabular-nums; }
.combo-list { position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:60; background:var(--surface);
  border:1px solid var(--hairline-2); border-radius:var(--r-md); box-shadow:var(--shadow-lg); max-height:322px; overflow-y:auto; padding:4px; }
.combo-opt { display:flex; justify-content:space-between; gap:12px; padding:10px 12px; font-size:0.95rem; cursor:pointer; border-radius:var(--r-sm); }
.combo-opt.hi { background:var(--accent-soft); }
/* Pointer hover gets the same affordance as the keyboard `.hi` highlight, so
   mousing the type-ahead list gives feedback before the click. */
.combo-opt:hover { background:var(--accent-soft); }
.combo-kind { font-size:0.6875rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); align-self:center; white-space:nowrap; }
.combo-none { padding:10px 12px; font-size:0.875rem; color:var(--muted); font-style:italic; }

/* "Rents near me" pill + quick links. */
.near-btn { display:inline-flex; align-items:center; gap:8px; font:inherit; font-size:0.9rem; font-weight:600; min-height:44px;
  color:var(--accent); background:var(--accent-soft); border:1px solid var(--accent-line); border-radius:9999px;
  padding:8px 18px; cursor:pointer; transition:transform .25s var(--ease), background .2s var(--ease), box-shadow .25s var(--ease); }
.near-btn:hover { background:#D6E7E2; transform:translateY(-2px); box-shadow:var(--shadow-sm); }
.near-btn:disabled { opacity:.7; cursor:default; }
.near-btn svg { width:16px; height:16px; }

/* Busiest markets strip. */
#busiest:empty { display:none; }
.busiest-strip { display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 18px; padding-top:22px; border-top:1px solid var(--hairline); }
.bs-label { font-size:0.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--clay); font-weight:700; }
.bs-links { display:flex; flex-wrap:wrap; gap:6px 16px; font-size:0.95rem; }
.bs-links a { color:var(--ink); text-decoration:none; border-bottom:1px solid var(--hairline-2); transition:color .2s var(--ease), border-color .2s var(--ease); }
.bs-links a:hover { color:var(--accent); border-color:var(--accent); }
.bs-note { font-size:0.85rem; color:var(--muted); margin:12px 0 0; max-width:64ch; }

/* ── Forms ──────────────────────────────────────────────────────────────── */
form { display:grid; gap:22px; background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-lg); padding:clamp(20px,3vw,32px); box-shadow:var(--shadow-md); }
label { display:block; font-size:0.875rem; font-weight:600; margin:0 0 7px; color:var(--ink-soft); }
.row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.hint { font-size:0.78rem; color:var(--muted); margin:6px 0 0; }
/* Loading skeleton: a soft shimmer so a section never flashes blank. */
.skel { background:var(--flat-bg); border-radius:var(--r-sm); position:relative; overflow:hidden; }
.skel + .skel { margin-top:12px; }
.skel-title { height:34px; width:52%; margin-bottom:20px; border-radius:var(--r-sm); }
.skel-line { height:14px; }
.skel-line:nth-child(3) { width:92%; } .skel-line:nth-child(4) { width:78%; } .skel-line:last-child { width:60%; }
.skel::after { content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); animation:skel-shimmer 1.4s var(--ease) infinite; }
@keyframes skel-shimmer { 100% { transform:translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skel::after { animation:none; } }
.btn { display:inline-flex; align-items:center; gap:8px; font:inherit; font-weight:600; font-size:0.95rem; color:#fff; background:var(--accent);
  border:0; border-radius:9999px; padding:13px 24px; min-height:48px; cursor:pointer; justify-self:start;
  box-shadow:0 6px 18px -6px rgba(14,91,84,.5); transition:transform .25s var(--ease), background .2s var(--ease), box-shadow .25s var(--ease); }
.btn:hover { background:var(--accent-hover); transform:translateY(-2px); box-shadow:0 10px 26px -8px rgba(14,91,84,.55); }
.btn:active { transform:translateY(0); }
.btn:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
/* The teal glow all but vanishes on the near-black dark paper; a dark ambient
   shadow keeps the flagship button's lift visible after dark. */
:root[data-theme="dark"] .btn { box-shadow:0 6px 18px -6px rgba(0,0,0,.55); }
:root[data-theme="dark"] .btn:hover { box-shadow:0 10px 26px -8px rgba(0,0,0,.6); }

/* ── Rent-position rail ─────────────────────────────────────────────────── */
.rentbar { position:relative; height:14px; border-radius:9999px; background:var(--flat-bg); margin:48px 0 12px; }
.rentbar-fill { position:absolute; top:0; bottom:0; background:var(--accent-soft); border:1px solid var(--accent-line); border-radius:9999px; }
.rentbar-med { position:absolute; top:-4px; width:3px; height:22px; margin-left:-1.5px; background:var(--accent); border-radius:2px; }
.rentbar-you { position:absolute; top:-38px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; z-index:2; }
.rentbar-you .pin-lbl { font-size:0.75rem; font-weight:600; color:var(--surface); background:var(--ink); padding:4px 10px; border-radius:9999px; white-space:nowrap; box-shadow:var(--shadow-sm); }
.rentbar-you .pin-stem { width:2px; height:18px; background:var(--ink); }
.rentbar-legend { display:flex; flex-wrap:wrap; gap:6px 20px; font-size:0.8125rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.rentbar-legend b { color:var(--ink); font-weight:600; }
.rentbar-legend .mid b { color:var(--accent); }
.vsnat { font-size:0.95rem; color:var(--muted); margin:12px 0 0; font-variant-numeric:tabular-nums; }
.vsnat strong { color:var(--ink); font-weight:600; }
.chk-verdict { font-size:var(--t-lede); margin:0 0 6px; }
.chk-verdict strong { font-weight:600; }
.distrib { margin:20px 0 0; }
.distrib svg { display:block; width:100%; height:auto; }
.distrib .distrib-med { stroke:var(--accent); stroke-width:1.5; stroke-dasharray:3 3; }

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card { position:relative; background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-lg);
  padding:clamp(22px,3vw,36px); box-shadow:var(--shadow-md); }
.card + .card { margin-top:clamp(20px,3vw,28px); }
.footnote { font-size:0.78rem; color:var(--muted); margin:18px 0 0; }

/* ── Full-bleed pull-quote band (clay-tinted editorial breather) ─────────── */
#pullquote:empty { display:none; }
.pullquote { margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); padding:clamp(48px,8vw,88px) 24px;
  background:
    radial-gradient(80% 120% at 15% 0%, rgba(233,184,75,.16), transparent 60%),
    linear-gradient(135deg, var(--clay-soft), var(--honey-soft)); }
.pullquote .pq-inner { max-width:760px; margin:0 auto; text-align:center; }
.pq-eyebrow { font-size:0.75rem; letter-spacing:.15em; text-transform:uppercase; color:var(--clay); font-weight:700; margin:0 0 18px; }
.pq-lead { font-family:"Fraunces", Georgia, serif; font-weight:400; font-size:clamp(1.7rem, 3.8vw, 2.9rem); line-height:1.18;
  margin:0; color:var(--ink); letter-spacing:-0.02em; }
.pq-lead b { font-weight:600; color:var(--clay); white-space:nowrap; }
.pq-foot { font-size:0.8125rem; color:var(--muted); margin:22px auto 0; max-width:56ch; }

/* ── Loading skeletons ──────────────────────────────────────────────────── */
.skel { pointer-events:none; }
.skel-line { background:var(--hairline); border-radius:var(--r-sm); position:relative; overflow:hidden; }
.skel-line::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  transform:translateX(-100%); animation:shimmer 1.4s ease-in-out infinite; }
@keyframes shimmer { to { transform:translateX(100%); } }
.skel-kicker { width:118px; height:11px; margin:0 0 14px; }
.skel-title { width:min(340px,70%); height:26px; margin:0 0 22px; }
.skel-block { width:100%; height:150px; border-radius:var(--r-md); }
.skel-row { display:flex; gap:10px; margin-top:16px; }
.skel-row .skel-line { flex:1; height:40px; }
.skel-bars { display:grid; gap:14px; }
.skel-bar { height:15px; }
.skel-hs .skel-hs-num { width:60%; height:26px; }
.skel-hs .skel-hs-lbl { width:88%; height:11px; }

/* ── Section furniture ──────────────────────────────────────────────────── */
.snap-kicker { display:inline-flex; align-items:center; gap:8px; font-size:0.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--clay); font-weight:700; margin:0 0 10px; }
.snap-kicker::before { content:""; width:18px; height:2px; border-radius:2px; background:var(--clay); }
.snap-title { font-family:"Fraunces", Georgia, serif; font-weight:500; font-size:var(--t-h2); line-height:1.1; letter-spacing:-0.015em; margin:0 0 16px; }
.snap-median { font-family:"Fraunces", Georgia, serif; font-weight:500; font-size:var(--t-h2); line-height:1.1; margin:0 0 4px; font-variant-numeric:tabular-nums; }
.snap-median .per { font-family:"Hanken Grotesk", sans-serif; font-size:0.875rem; color:var(--muted); font-weight:400; margin-left:6px; }
.snap-range { font-size:0.875rem; color:var(--muted); margin:0; font-variant-numeric:tabular-nums; }
.story { font-size:var(--t-lede); line-height:1.5; margin:0; color:var(--ink-soft); }
.sec-note { font-size:0.85rem; color:var(--muted); margin:14px 0 0; max-width:64ch; }
.sec-note a { color:var(--accent); text-decoration:none; } .sec-note a:hover { text-decoration:underline; }

/* Movers lists. */
.movers { display:grid; grid-template-columns:1fr 1fr; gap:28px; margin:22px 0 0; }
.movers.cols3 { grid-template-columns:1fr 1fr 1fr; }
.movers.board-grid { grid-template-columns:repeat(auto-fit, minmax(205px, 1fr)); gap:24px 30px; }
.movers h3 { font-size:0.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:700; margin:0 0 8px; }
.movers ol { list-style:none; margin:0; padding:0; }
.movers li { border-bottom:1px solid var(--hairline); font-size:0.95rem; }
.movers li:last-child { border-bottom:0; }
.movers li a { display:flex; justify-content:space-between; gap:12px; padding:9px 0; text-decoration:none; color:inherit; transition:padding .2s var(--ease); }
.movers li a:hover { padding-left:5px; }
.movers li span:first-child { overflow-wrap:anywhere; min-width:0; }
.movers li a:hover span:first-child { color:var(--accent); }
.movers .num { font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap; }
.movers .pct { color:var(--muted); font-weight:400; }

/* Charts. */
.chart-head { display:flex; justify-content:flex-end; margin:18px 0 0; }
.seg { display:inline-flex; border:1px solid var(--hairline-2); border-radius:9999px; padding:3px; gap:2px; background:var(--surface); box-shadow:var(--shadow-sm); }
.seg button { font:inherit; font-size:0.8125rem; font-weight:600; border:0; background:transparent; color:var(--muted); padding:5px 14px; min-height:36px; display:inline-flex; align-items:center; border-radius:9999px; cursor:pointer; transition:color .2s var(--ease), background .3s var(--ease); }
.seg button.on { background:var(--accent); color:#fff; }
.seg button:not(.on):hover { color:var(--ink); }
.chart { position:relative; margin:10px 0 2px; }
.spark { display:block; width:100%; height:auto; touch-action:pan-y; }
.spark:focus-visible { outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }
.tip { position:absolute; pointer-events:none; background:var(--ink); color:var(--paper); font-size:0.75rem; line-height:1.35;
  padding:8px 11px; border-radius:var(--r-sm); white-space:nowrap; transform:translate(-50%,-135%); font-variant-numeric:tabular-nums; box-shadow:var(--shadow-md); }
.tip .dim { color:#C4B8A6; }
/* In dark mode the tooltip flips to a light background, so the dim detail text
   needs a darker tone to stay readable (the light tan above would wash out). */
:root[data-theme="dark"] .tip .dim { color:#6E6152; }
.chart-note { display:flex; align-items:center; gap:6px; font-size:0.75rem; color:var(--muted); margin:6px 0 0; }
.chart-note svg { flex:none; }
.chart-legend { display:flex; flex-wrap:wrap; gap:6px 16px; font-size:0.75rem; color:var(--muted); margin:6px 0 0; }
.chart-legend .cl { display:inline-flex; align-items:center; gap:6px; }
.chart-legend .cl-line { width:18px; height:0; flex:none; border-top:2px solid var(--accent); }
.chart-legend .cl-line.ref { border-top:1.5px dashed var(--muted); }
.trend { font-size:0.95rem; margin:14px 0 0; }
.trend .caveat { display:block; font-size:0.8125rem; color:var(--muted); font-weight:400; margin-top:2px; }
.note { font-size:0.8125rem; color:var(--med-fg); margin:12px 0 0; }
.horizons { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:20px 0 0; padding:18px 0 0; border-top:1px solid var(--hairline); }
.stat .lbl { display:block; font-size:0.75rem; color:var(--muted); }
.stat .val { font-weight:700; font-variant-numeric:tabular-nums; font-size:1.05rem; }
.stat .pct { color:var(--muted); font-weight:400; }

/* Tables. */
/* Wide tables (6–7 numeric columns) scroll sideways on narrow screens instead
   of being clipped by html{overflow-x:clip}. A hairline hints there's more. */
.tbl-scroll, .card > .tbl { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tbl-scroll > table { min-width:520px; }
/* A long table (the full ranking) keeps its column labels in view: on desktop
   it needs no sideways scroll, so we drop the scroll container and stick the
   header just below the site header. On mobile it stays horizontally scrollable
   (a scroll container can't also do a sticky header). */
@media (min-width:760px) {
  .card > .tbl.tbl-tall { overflow:visible; }
  .tbl-tall thead th { position:sticky; top:64px; z-index:2; background:var(--surface); box-shadow:0 1px 0 var(--hairline-2); }
}
table { width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums; font-size:0.9rem; }
th { text-align:left; font-weight:600; color:var(--muted); font-size:0.72rem; letter-spacing:.04em; text-transform:uppercase; padding:8px 0; border-bottom:1px solid var(--hairline-2); }
td { padding:10px 0; border-bottom:1px solid var(--hairline); overflow-wrap:anywhere; }
td.num { overflow-wrap:normal; white-space:nowrap; padding-left:10px; }
tr:last-child td { border-bottom:0; }
.num { text-align:right; }
.sup { color:var(--muted); font-style:italic; }
/* Thin-sample tag: an "indicative" flag on rows under 20 lodged bonds. */
.samp { display:inline-block; font-size:0.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  color:var(--med-fg); background:var(--honey-soft); padding:2px 7px; border-radius:9999px; margin-left:7px; vertical-align:middle; }
.months { border:1px solid var(--hairline); border-radius:var(--r-md); margin:20px 0 0; overflow:hidden; }
.months summary { cursor:pointer; padding:13px 16px; font-size:0.9rem; font-weight:600; list-style:none; transition:background .2s var(--ease); }
.months summary:hover { background:var(--paper); }
.months summary::-webkit-details-marker { display:none; }
.months summary::before { content:"+ "; color:var(--accent); font-weight:700; }
.months[open] summary::before { content:"– "; }
/* The collapsible figures table nests .tbl inside .months, so the .card>.tbl
   scroll rule misses it; give it its own horizontal-scroll safety net. */
.months .tbl { padding:0 16px 16px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
#area-table tbody tr, .region-table tbody tr { cursor:pointer; }
#area-table tbody tr:hover td, .region-table tbody tr:hover td { background:var(--paper); }
#area-table tbody tr.sel td { background:var(--accent-soft); }
/* Grouped "everything published" table: a property-type heading per group. */
#area-table tr.grp { cursor:default; }
#area-table tr.grp th { font-family:"Fraunces", Georgia, serif; font-weight:500; font-size:0.98rem; color:var(--ink);
  text-transform:none; letter-spacing:0; padding:18px 0 6px; border-bottom:1px solid var(--hairline-2); }
#area-table tr.grp:first-child th { padding-top:2px; }
#area-table tr.grp:hover th { background:transparent; }

/* The cell filter above the suburb chart: two rows of always-visible pills
   (property type, bedroom size) so every published combination is one click
   away — no dropdown to open, and back-series-only cells read as greyed. */
.cell-filter { display:flex; flex-direction:column; gap:9px; margin:0 0 20px; }
.pill-group { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.pill-group .cf-label { flex:none; width:74px; font-size:0.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--clay); font-weight:700; }
.pill { font:inherit; font-size:0.8125rem; font-weight:600; line-height:1; color:var(--muted);
  background:var(--surface); border:1px solid var(--hairline-2); border-radius:9999px;
  padding:8px 15px; cursor:pointer; box-shadow:var(--shadow-sm);
  transition:color .2s var(--ease), background .25s var(--ease), border-color .2s var(--ease), transform .15s var(--ease); }
.pill:not(:disabled):hover { color:var(--ink); border-color:var(--accent); transform:translateY(-1px); }
.pill.on { background:var(--accent); color:#fff; border-color:var(--accent); box-shadow:var(--shadow-md); }
.pill:disabled { color:var(--muted); opacity:.4; cursor:not-allowed; box-shadow:none; border-style:dashed; }
@media (max-width:560px) {
  .pill-group .cf-label { width:100%; }
}

/* ── Page furniture ─────────────────────────────────────────────────────── */
.page-title { font-family:"Fraunces", Georgia, serif; font-weight:500; font-size:var(--t-h1); line-height:1.05; letter-spacing:-0.02em; margin:0 0 12px; }
.crumbs { font-size:0.8125rem; color:var(--muted); margin:0 0 14px; }
/* Underline the ancestor links: in a muted crumb trail, colour alone doesn't
   distinguish link from separator/text (WCAG 1.4.1 Use of Color). */
.crumbs a { color:var(--muted); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px; text-decoration-color:var(--hairline-2); }
.crumbs a:hover { color:var(--accent); text-decoration-color:currentColor; }
.subnav { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 28px; }
.subnav a, .subnav button { font:inherit; font-size:0.8125rem; font-weight:600; color:var(--ink-soft); text-decoration:none; padding:7px 15px; min-height:36px; display:inline-flex; align-items:center; cursor:pointer;
  border:1px solid var(--hairline-2); border-radius:9999px; background:var(--surface); transition:transform .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease); }
.subnav a:hover, .subnav button:hover { color:var(--accent); border-color:var(--accent-line); transform:translateY(-1px); }
.subnav a.on, .subnav button.on { background:var(--accent); color:#fff; border-color:var(--accent); }

.explore-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:24px; }
.explore-grid a { position:relative; display:block; text-decoration:none; color:inherit; background:var(--surface);
  border:1px solid var(--hairline); border-radius:var(--r-lg); padding:26px; box-shadow:var(--shadow-sm);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); overflow:hidden; }
.explore-grid a::after { content:"→"; position:absolute; top:24px; right:24px; color:var(--clay); font-size:1.1rem; opacity:0; transform:translateX(-6px); transition:opacity .3s var(--ease), transform .3s var(--ease); }
.explore-grid a:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--accent-line); }
.explore-grid a:hover::after { opacity:1; transform:none; }
.explore-grid strong { display:block; font-family:"Fraunces", Georgia, serif; font-weight:500; font-size:1.25rem; margin:0 0 8px; }
.explore-grid span { font-size:0.9rem; color:var(--muted); }

.suburb-list { list-style:none; margin:0; padding:0; columns:2; column-gap:28px; font-size:0.95rem; }
.suburb-list li { break-inside:avoid; padding:6px 0; }
.suburb-list a { text-decoration:none; }
.suburb-list a:hover { text-decoration:underline; }

/* Nearby-suburbs list. */
.nearby-list { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:2px 24px; }
.nearby-list a { display:flex; align-items:baseline; gap:8px; padding:9px 0; text-decoration:none; color:inherit; border-bottom:1px solid var(--hairline); }
.nearby-list a:hover .nb-name { color:var(--accent); }
.nearby-list .nb-name { font-weight:500; }
.nearby-list .nb-med { color:var(--ink); font-variant-numeric:tabular-nums; margin-left:auto; }
.nearby-list .nb-med.sup { color:var(--muted); }
.nearby-list .nb-dist { flex-basis:100%; font-size:0.75rem; color:var(--muted); margin-top:-4px; }

/* Regions index grouped by island. */
.island-group { margin-top:26px; }
.island-group:first-of-type { margin-top:6px; }
.island-h { font-family:"Fraunces", Georgia, serif; font-weight:500; font-size:1.2rem; margin:0 0 10px; display:flex; align-items:baseline; gap:10px; }
.island-h span { font-family:"Hanken Grotesk", sans-serif; font-size:0.75rem; font-weight:500; color:var(--muted); letter-spacing:.02em; }
.about ul { margin:0; padding:0 0 0 20px; display:grid; gap:12px; font-size:0.95rem; }

/* ── Figure block: median + quartile rail + fact chips ──────────────────── */
.fig-median { font-family:"Fraunces", Georgia, serif; font-weight:500; font-size:clamp(2.2rem,5vw,2.9rem); line-height:1.02; margin:0; font-variant-numeric:tabular-nums; letter-spacing:-0.02em; }
.fig-median .per { font-family:"Hanken Grotesk", sans-serif; font-size:0.9375rem; color:var(--muted); font-weight:400; margin-left:8px; letter-spacing:0; }
.fig-unpub { font-family:"Fraunces", Georgia, serif; font-weight:500; font-size:1.85rem; color:var(--muted); margin:0; }
.qbar { position:relative; height:12px; border-radius:9999px; background:var(--flat-bg); margin:20px 0 8px; max-width:380px; }
.qbar-fill { position:absolute; top:0; bottom:0; left:var(--lo,0%); right:calc(100% - var(--hi,100%)); background:var(--accent-soft); border:1px solid var(--accent-line); border-radius:9999px; }
.qbar-med { position:absolute; top:-4px; left:var(--md,50%); width:3px; height:20px; margin-left:-1.5px; background:var(--accent); border-radius:2px; }
.qbar-scale { display:flex; justify-content:space-between; max-width:380px; font-size:0.75rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.qbar-scale b { color:var(--ink); font-weight:600; }
.qbar-scale .mid { color:var(--accent); font-weight:600; }

.chips { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:16px 0 0; }
.chip { display:inline-flex; align-items:center; gap:6px; font-size:0.8125rem; font-weight:600; padding:6px 13px; border-radius:9999px;
  background:var(--flat-bg); color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap; max-width:100%; }
.chip svg { width:14px; height:14px; flex:none; opacity:.9; }
.chip.on-accent { background:var(--accent-soft); color:var(--accent); }
/* Thin-sample warning: the headline's bond-count chip when under 20 lodged. */
.chip.warn { background:var(--honey-soft); color:var(--med-fg); }
.chip.warn .chip-sub { color:var(--med-fg); opacity:.85; }
.chip .chip-sub { color:var(--muted); font-weight:400; }

/* Direction delta. */
.delta { display:inline-flex; align-items:center; gap:4px; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.delta svg { width:12px; height:12px; }
.delta.up { color:var(--up); } .delta.down { color:var(--down); } .delta.flat { color:var(--muted); }
.delta.pill { padding:5px 11px; border-radius:9999px; font-size:0.8125rem; }
.delta.pill.up { background:var(--up-bg); } .delta.pill.down { background:var(--down-bg); } .delta.pill.flat { background:var(--flat-bg); }

/* Region cards + district stories. */
.region-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:14px; margin:18px 0 0; }
.region-card { display:flex; flex-direction:column; gap:9px; text-decoration:none; color:inherit; background:var(--surface);
  border:1px solid var(--hairline); border-radius:var(--r-md); padding:16px 18px; box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.region-card:hover { transform:translateY(-3px); border-color:var(--accent-line); box-shadow:var(--shadow-md); }
.region-card .rc-name { font-weight:600; font-size:0.95rem; overflow-wrap:anywhere; }
.region-card .rc-fig { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.region-card .rc-median { font-family:"Fraunces", Georgia, serif; font-weight:500; font-size:1.45rem; font-variant-numeric:tabular-nums; }
.region-card .rc-median.sup { font-size:0.95rem; color:var(--muted); font-style:italic; }
.region-card .rc-sub { font-size:0.75rem; color:var(--muted); }
.story-split { display:grid; grid-template-columns:1fr 1fr; gap:28px; margin:20px 0 0; }
.story-split h3 { display:flex; align-items:center; gap:7px; font-size:0.8125rem; letter-spacing:.04em; text-transform:uppercase; font-weight:700; margin:0 0 6px; }
.story-split h3.up { color:var(--up); } .story-split h3.down { color:var(--down); }
.story-split h3 svg { width:13px; height:13px; }
.dist-list { list-style:none; margin:0; padding:0; }
.dist-list li { border-bottom:1px solid var(--hairline); font-size:0.95rem; }
.dist-list li:last-child { border-bottom:0; }
.dist-list li a { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:9px 0; text-decoration:none; color:inherit; }
.dist-list li a:hover span:first-child { color:var(--accent); }
.dist-fig { display:inline-flex; align-items:center; gap:10px; white-space:nowrap; }
.dist-fig .num { font-variant-numeric:tabular-nums; font-weight:600; }

.region-panel { margin-top:24px; padding-top:22px; border-top:1px solid var(--hairline); }
.region-title { font-family:"Fraunces", Georgia, serif; font-weight:500; font-size:1.2rem; margin:0 0 10px; }
.kind-tag { font-family:"Hanken Grotesk", sans-serif; font-size:0.6875rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600; margin-left:4px; }
.cmp-grid { display:grid; gap:16px; }
.legend { display:flex; gap:14px; flex-wrap:wrap; font-size:0.8125rem; color:var(--muted); }
.dot { width:9px; height:9px; border-radius:9999px; display:inline-block; margin-right:5px; }
.sortable { cursor:pointer; user-select:none; }
.sortable:hover, .sortable.on { color:var(--ink); }
/* A caret makes sortability discoverable and shows the active direction. */
th.sortable::after { content:"↕"; margin-left:5px; opacity:.3; font-weight:400; }
th.sortable:hover::after { opacity:.55; }
th.sortable.on.asc::after { content:"↑"; opacity:.9; }
th.sortable.on.desc::after { content:"↓"; opacity:.9; }
th.sortable.on:not(.asc):not(.desc)::after { opacity:.9; }
.rank-tbl tbody tr { cursor:pointer; }
.rank-tbl tbody tr:hover td { background:var(--paper); }
.rank-tbl .pct { color:var(--muted); font-weight:400; }

/* ── Home infographics ──────────────────────────────────────────────────── */
.hero-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:30px 0 6px; }
.hs { background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-md); padding:18px; display:flex; flex-direction:column; gap:10px; box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease); }
.hs:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); }
.hs-ico { color:var(--clay); height:22px; }
.hs-ico svg { width:22px; height:22px; display:block; }
.hs-num { font-family:"Fraunces", Georgia, serif; font-weight:600; font-size:1.7rem; line-height:1; font-variant-numeric:tabular-nums; }
.hs-num.pending { color:var(--hairline); }
.hs-lbl { font-size:0.78rem; color:var(--muted); line-height:1.35; }

/* National picture. */
.nat-fig { display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; margin:6px 0 0; }
.nat-median { font-family:"Fraunces", Georgia, serif; font-weight:500; font-size:clamp(2.4rem,5.5vw,3.1rem); line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-0.02em; }
.nat-median .per { font-family:"Hanken Grotesk", sans-serif; font-size:0.9375rem; color:var(--muted); font-weight:400; margin-left:8px; letter-spacing:0; }
.nat-spread { font-size:0.9rem; color:var(--muted); font-variant-numeric:tabular-nums; }
.nat-spread b { color:var(--ink); font-weight:600; }

/* Proportion bar. */
.propbar { display:flex; height:44px; border-radius:var(--r-sm); overflow:hidden; margin:20px 0 16px; border:1px solid var(--hairline); box-shadow:var(--shadow-sm); }
.propbar span { display:flex; align-items:center; justify-content:center; gap:6px; min-width:0; font-size:0.8125rem; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; }
.propbar .up { background:var(--up); } .propbar .flat { background:var(--flat); } .propbar .down { background:var(--down); }
.prop-legend { display:flex; flex-wrap:wrap; gap:18px; font-size:0.8125rem; color:var(--muted); margin:0; }
.prop-legend span { display:inline-flex; align-items:center; gap:7px; }
.prop-legend i { width:10px; height:10px; border-radius:3px; display:inline-block; }
.prop-legend b { color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }

/* Ranked / diverging bars. */
.bars-2 { display:grid; grid-template-columns:1fr 1fr; gap:34px; margin:18px 0 0; }
.bars-col > h3 { font-size:0.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); font-weight:700; margin:0 0 14px; display:flex; align-items:center; gap:7px; }
.bars-col > h3.up { color:var(--up); } .bars-col > h3.down { color:var(--down); }
.bars-col > h3 svg { width:15px; height:15px; flex:none; }
.bars { display:grid; gap:12px; }
.bar-row { display:block; text-decoration:none; color:inherit; }
.bar-top { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin:0 0 5px; }
.bar-name { font-size:0.9rem; overflow-wrap:anywhere; }
a.bar-row:hover .bar-name { color:var(--accent); }
.bar-sub { font-size:0.6875rem; color:var(--muted); font-weight:400; margin-left:5px; white-space:nowrap; }
.bar-val { font-size:0.9rem; font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.bar-val.up { color:var(--up); } .bar-val.down { color:var(--down); }
.bar-track { height:9px; border-radius:9999px; background:var(--flat-bg); overflow:hidden; }
.bar-fill { height:100%; border-radius:9999px; background:linear-gradient(90deg, var(--accent), #14746B); width:0; transition:width .7s var(--ease); }
.bar-fill.up { background:linear-gradient(90deg, var(--up), #C4693B); }
.bar-fill.down { background:linear-gradient(90deg, var(--down), #3C8F6A); }

/* Data-pipeline explainer. */
.pipeline { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:20px 0 22px; }
.pipe-step { background:var(--paper); border:1px solid var(--hairline); border-radius:var(--r-md); padding:18px; transition:transform .3s var(--ease); }
.pipe-step:hover { transform:translateY(-2px); }
.pipe-n { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:9999px; background:var(--clay-soft); color:var(--clay); font-size:0.875rem; font-weight:700; margin:0 0 12px; }
.pipe-step h3 { font-family:"Fraunces", Georgia, serif; font-weight:500; font-size:1.05rem; margin:0 0 6px; }
.pipe-step p { font-size:0.8125rem; color:var(--muted); margin:0; line-height:1.5; }
.facts { list-style:none; margin:8px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:12px 26px; }
.facts li { font-size:0.9rem; padding-left:24px; position:relative; }
.facts li svg { position:absolute; left:0; top:3px; width:15px; height:15px; color:var(--accent); }
.facts b { font-weight:600; }
.provenance { font-size:0.8125rem; color:var(--muted); margin:18px 0 0; padding-top:18px; border-top:1px solid var(--hairline); }
.provenance a { color:var(--accent); text-decoration:none; } .provenance a:hover { text-decoration:underline; }

/* Small-multiples. */
.traj-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:16px; margin:18px 0 0; }
.traj { display:flex; flex-direction:column; gap:7px; text-decoration:none; color:inherit; background:var(--paper); border:1px solid var(--hairline); border-radius:var(--r-md); padding:14px; box-shadow:var(--shadow-sm);
  transition:transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); }
.traj:hover { transform:translateY(-3px); border-color:var(--accent-line); box-shadow:var(--shadow-md); }
.traj-name { font-size:0.8125rem; font-weight:600; overflow-wrap:anywhere; }
.traj .micro { width:100%; height:40px; display:block; }
.traj-bot { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.traj-med { font-weight:700; font-variant-numeric:tabular-nums; }
.traj-bot .delta { font-size:0.75rem; }

.err { font-size:0.95rem; color:var(--muted); margin:0; }

/* "Get the data". */
.data-h { font-size:0.8125rem; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); font-weight:700; margin:24px 0 12px; }
.endpoints { list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.endpoints li { display:flex; flex-direction:column; gap:4px; }
.endpoints code { font-family:ui-monospace, "SF Mono", Menlo, monospace; font-size:0.8125rem; color:var(--ink); background:var(--paper); border:1px solid var(--hairline); border-radius:var(--r-sm); padding:7px 10px; overflow-wrap:anywhere; }
.endpoints code var { font-style:normal; color:var(--accent); }
.endpoints li > span { font-size:0.8125rem; color:var(--muted); }
.dl-wrap { margin:16px 0 0; }
.dl-data { display:inline-flex; align-items:center; gap:6px; font-size:0.8125rem; font-weight:600; color:var(--accent); text-decoration:none; margin-top:2px; }
.dl-data:hover { text-decoration:underline; }
.dl-data svg { width:14px; height:14px; }
.share-slot { display:flex; }
.share-btn { display:inline-flex; align-items:center; gap:6px; font:inherit; font-size:0.8125rem; font-weight:600; color:var(--ink); background:var(--surface);
  border:1px solid var(--hairline-2); border-radius:9999px; padding:8px 15px; min-height:40px; cursor:pointer; transition:transform .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease); }
.share-btn:hover { border-color:var(--accent); color:var(--accent); transform:translateY(-1px); }
.share-btn svg { width:14px; height:14px; }
.share-btn.done { color:var(--accent); border-color:var(--accent-line); background:var(--accent-soft); }

/* One consistent teal focus ring for every custom-shaped interactive control.
   Covers role="button"/focusable rows AND the pill radios, segmented toggles,
   nav links, share buttons and sortable column headers — all of which are
   keyboard-reachable but weren't matched by the role="button" rule, so they
   fell back to the weak UA default (or none, on the sortable <th> now that it
   keeps its columnheader role). */
[role="button"]:focus-visible, tr[tabindex]:focus-visible, li[tabindex]:focus-visible,
.pill:focus-visible, .seg button:focus-visible, .nav-toggle:focus-visible,
.site-nav a:focus-visible, .nav-overlay a:focus-visible, .explore-grid a:focus-visible,
.subnav a:focus-visible, .subnav button:focus-visible, .share-btn:focus-visible,
.near-btn:focus-visible, .months summary:focus-visible, th.sortable:focus-visible {
  outline:2px solid var(--accent); outline-offset:2px;
}

/* Reduced motion: honesty = no theatrics. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  [data-reveal] { opacity:1 !important; transform:none !important; }
  body { background-attachment:scroll; }
}

/* Print: a clean paper record. */
@media print {
  .site-head, .site-foot, .skip-link, .search-hero, .subnav, .seg, .chart-head, .explore-grid, .dl-wrap, #site-search, .nav-toggle, .nav-overlay, .hero-art { display:none !important; }
  body { background:#fff; color:#000; }
  .wrap { padding:0; max-width:none; }
  [data-reveal] { opacity:1 !important; transform:none !important; }
  .card { border:1px solid #ccc; box-shadow:none; break-inside:avoid; page-break-inside:avoid; }
  .months { border:0; } .months .tbl { display:block !important; padding:0; }
  details.months > summary { display:none; }
  a { color:#000; text-decoration:none; }
  .spark { max-width:640px; }
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width:860px) {
  .hero { grid-template-columns:minmax(0,1fr); gap:8px; }
  .hero-art { max-width:380px; margin:8px 0 0; }
}
@media (max-width:720px) {
  .site-nav { display:none; }
  .nav-toggle { display:flex; margin-left:0; }
  .theme-toggle { margin-left:auto; }
}
@media (max-width:540px) {
  h1 { font-size:var(--t-h1); }
  .row { grid-template-columns:1fr; }
  .movers, .movers.cols3 { grid-template-columns:1fr; }
  .story-split { grid-template-columns:1fr; }
  .horizons { grid-template-columns:1fr 1fr; }
  .hero-stats { grid-template-columns:1fr 1fr; }
  .bars-2, .pipeline, .facts { grid-template-columns:1fr; }
  .explore-grid { grid-template-columns:1fr; }
  .suburb-list { columns:1; }
  /* Long metadata chips (e.g. "…, 2 of 3 areas summed") would overflow a narrow
     viewport with nowrap; let them wrap instead of pushing the page sideways. */
  .chip { white-space:normal; }
}

/* Single-letter A–Z jump buttons: a floor width so a "Q" isn't a cramped tap. */
#letter-nav button { min-width:42px; justify-content:center; }

/* Touch devices: guarantee a 44px hit area on the compact filter/nav controls
   without changing the tighter density on precise (mouse) pointers. */
@media (pointer:coarse) {
  .pill, .subnav a, .subnav button, .seg button { min-height:44px; }
}