/* ═══════════════════════════════════════════════════════════════════════
   Perfect Scale — site stylesheet
   Spec: docs/superpowers/specs/2026-09-04-website-design-refresh-design.md
   Replaces style.css, hero-b.css and ps.css.

   Order matters. Tokens, reset, shell, typography, components, then the
   legacy classes retargeted at the tokens. Nothing below the token block
   may contain a literal colour.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Fonts ─────────────────────────────────────────────────────────── */
@font-face {
    font-family: 'Piazzolla';
    src: url('/assets/fonts/piazzolla-var.woff2') format('woff2');
    font-weight: 400 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Piazzolla';
    src: url('/assets/fonts/piazzolla-var-italic.woff2') format('woff2');
    font-weight: 400 600;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Archivo';
    src: url('/assets/fonts/archivo-var.woff2') format('woff2');
    font-weight: 400 600;
    font-stretch: 87.5% 100%;
    font-style: normal;
    font-display: swap;
}

/* ── 2. Tokens ────────────────────────────────────────────────────────── */
:root {
    --paper:     #FCFBF9;
    --paper-2:   #F3F0EA;
    --ink:       #2A2623;
    --mid:       #4A4540;
    --dim:       #7A736B;
    --no-data:   #E4E0D8;
    --rule:      rgba(42, 38, 35, .16);
    --rule-2:    rgba(42, 38, 35, .34);
    --bronze:    #9C4F1C;
    --bronze-2:  #7B3D13;
    --bronze-15: rgba(156, 79, 28, .15);
    --bronze-45: rgba(156, 79, 28, .45);
    --bronze-tint: #E3C7AC;
    --refused:   #A8402F;
    --approved:  #3F6E55;
    --caution:   #9C4F1C;

    --fs: 'Piazzolla', Georgia, 'Times New Roman', serif;
    --fx: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --main-max:  980px;
    --mh-w:      272px;
    --gutter:    clamp(22px, 4cqw, 64px);
    --section-y: 44px;
}

/* ── 2b. Legacy token aliases ─────────────────────────────────────────────
   Page-local <style> blocks on several pages, and in every research article,
   still name the tokens of the retired dark theme. Aliasing them here means
   those blocks resolve against the new palette instead of falling back to
   nothing. New CSS uses the names in the block above, never these.          */
:root {
    --text:         var(--ink);
    --text-primary: var(--ink);
    --text-mid:     var(--mid);
    --text-dim:     var(--dim);
    --text-muted:   var(--dim);
    --bg:           var(--paper);
    --bg-raised:    var(--paper-2);
    --bg-lighter:   var(--paper-2);
    --terracotta:   var(--bronze);
    --tier-robust:  var(--approved);
    --tier-mod:     var(--caution);
    --tier-ind:     var(--refused);
    --tier-anec:    var(--dim);
    --font-serif:   var(--fs);
    --font-sans:    var(--fx);
    --max-width:    var(--main-max);
    /* named in the research articles' own CSS */
    --terracotta-bright: var(--refused);
    --green:        var(--approved);
    --green-bright: var(--approved);
    --gold:         var(--caution);
    --neutral:      var(--dim);
    --text-width:   64ch;
    --chart-width:  100%;
}

/* ── 3. Reset ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; scroll-behavior: smooth; }
img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; }
a { color: inherit; }
button { font: inherit; }

body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--fx);
    font-size: 16.5px;
    line-height: 1.6;
    font-optical-sizing: auto;
}

:focus-visible { outline: 2px solid var(--bronze); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ── 4. Shell ─────────────────────────────────────────────────────────── */
.shell {
    container-type: inline-size;
    display: grid;
    grid-template-columns: var(--mh-w) 1fr;
    min-height: 100vh;
}

aside.masthead {
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    padding: 30px 28px;
    background: var(--paper-2);
    border-right: 1px solid var(--rule);
    display: flex;
    flex-direction: column;
    gap: 22px;
    overflow-y: auto;
}
.mh-logo { display: block; }
.mh-logo img { width: 92px; }
.mh-about {
    font-family: var(--fs);
    font-size: 19px;
    line-height: 1.4;
    color: var(--mid);
}
nav.mh-nav { display: flex; flex-direction: column; }
nav.mh-nav a {
    text-decoration: none;
    font-weight: 500;
    padding: 8px 0 8px 12px;
    margin-left: -14px;
    border-top: 1px solid var(--rule);
    border-left: 2px solid transparent;
    transition: color .15s, border-color .15s;
}
nav.mh-nav a:last-child { border-bottom: 1px solid var(--rule); }
nav.mh-nav a:hover { color: var(--bronze-2); border-left-color: var(--bronze); }
nav.mh-nav a[aria-current="page"] { color: var(--bronze-2); border-left-color: var(--bronze); }

.mh-page { font-size: 14.5px; }
.mh-page a { border-left: 2px solid transparent; padding-left: 10px; margin-left: -12px; }
.mh-page a:hover, .mh-page a.on, .mh-page a.active { border-left-color: var(--bronze); }
.mh-page h4 {
    font-family: var(--fx);
    font-size: 13px;
    font-weight: 600;
    color: var(--dim);
    margin-bottom: 8px;
}
.mh-page a {
    display: block;
    text-decoration: none;
    color: var(--mid);
    padding: 4px 0;
}
.mh-page a:hover, .mh-page a.on { color: var(--bronze-2); }

.mh-vintage {
    margin-top: auto;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--dim);
}

main.main {
    padding: 40px var(--gutter) 40px;
    max-width: calc(var(--main-max) + 2 * 64px);
    width: 100%;
    /* A grid item's minimum is its content width by default, so one wide table
       or chart would stretch the whole shell and push the page sideways. */
    min-width: 0;
}
main.main > *, .container { min-width: 0; }

/* ── 5. The tick rule ─────────────────────────────────────────────────── */
.tick {
    height: 8px;
    border-bottom: 1px solid var(--rule-2);
    background: repeating-linear-gradient(90deg, var(--rule-2) 0 1px, transparent 1px 24px)
                left bottom / 100% 6px no-repeat;
}
.tick-bronze {
    width: 92px;
    margin-top: 14px;
    border-bottom-color: var(--bronze);
    background-image: repeating-linear-gradient(90deg, var(--bronze) 0 1px, transparent 1px 12px);
}

/* ── 6. Typography ────────────────────────────────────────────────────── */
h1, .hero-headline, h1.hero-title {
    font-family: var(--fs);
    font-weight: 400;
    font-size: clamp(36px, 4.5cqw, 58px);
    line-height: 1.05;
    letter-spacing: -0.015em;
    color: var(--ink);
    max-width: 20ch;
    text-wrap: balance;
    margin-bottom: 18px;
}
h2 {
    font-family: var(--fs);
    font-weight: 400;
    font-size: clamp(28px, 3cqw, 38px);
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: var(--ink);
    max-width: 24ch;
    text-wrap: balance;
    margin-bottom: 14px;
}
h3 {
    font-family: var(--fx);
    font-size: 17px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 8px;
}
h4 { font-family: var(--fx); font-size: 15px; font-weight: 600; color: var(--ink); }

p { max-width: 64ch; margin-bottom: 12px; color: var(--mid); }
p:last-child { margin-bottom: 0; }
strong { font-weight: 600; color: var(--ink); }
em { font-style: italic; }

.lede, .hero-sub, .ps-lead {
    font-family: var(--fs);
    font-size: clamp(19px, 1.7cqw, 22px);
    line-height: 1.45;
    color: var(--mid);
    max-width: 52ch;
    margin-bottom: 26px;
}

a, .ps-more, .more {
    color: var(--bronze);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: var(--bronze-45);
}
a:hover { color: var(--bronze-2); text-decoration-color: var(--bronze-2); }
.more, .ps-more { display: inline-block; font-weight: 500; margin-top: 8px; }

/* ── 7. Sections ──────────────────────────────────────────────────────── */
main.main > section,
main.main > .container > section,
section.findings, section.methodology, section.final-cta {
    padding: 0 0 var(--section-y);
    margin: 0 0 var(--section-y);
}
main.main > section + section::before,
section.findings + section::before,
section.methodology + section::before,
section.final-cta + section::before {
    content: '';
    display: block;
    height: 8px;
    margin: calc(-1 * var(--section-y)) 0 var(--section-y);
    border-top: 1px solid var(--rule-2);
    background: repeating-linear-gradient(90deg, var(--rule-2) 0 1px, transparent 1px 24px)
                left top / 100% 6px no-repeat;
}
main.main > section:last-of-type { margin-bottom: 0; }

/* The container is a pass-through now: main.main owns the width. */
.container { max-width: none; margin: 0; padding: 0; width: 100%; }

/* Section labels lose their uppercase treatment; the HTML is already sentence case. */
.section-label, h2.section-label {
    font-family: var(--fx);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--dim);
    max-width: none;
    margin-bottom: 12px;
    line-height: 1.4;
}

/* ── 8. Figures ───────────────────────────────────────────────────────── */
figure { margin-bottom: 30px; }
figcaption, .ps-caption, .chart-footer {
    font-family: var(--fx);
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--dim);
    max-width: 74ch;
    margin-top: 14px;
}
.fn { color: var(--bronze); font-weight: 600; margin-right: 8px; }

/* ── 9. Maps ──────────────────────────────────────────────────────────── */
.map-fig { display: grid; grid-template-columns: 1fr 232px; gap: 28px; align-items: start; }
.map-wrap svg, .london-map { width: 100%; height: auto; display: block; }
.map-wrap path.bor, .london-map path.borough {
    stroke: var(--paper);
    stroke-width: 1.5;
    stroke-linejoin: round;
    transition: stroke-width .15s;
}
.map-wrap path.bor:hover, .london-map path.borough:hover {
    stroke: var(--ink);
    stroke-width: 1.8;
}
.map-wrap text, .london-map text, .london-map .blabel {
    font-family: var(--fx);
    font-size: 11px;
    fill: var(--ink);
    paint-order: stroke;
    stroke: var(--paper);
    stroke-width: 3px;
    stroke-linejoin: round;
    pointer-events: none;
}
/* The borough index map is a way into the 33 dashboards, so every authority
   carries the same tint and the hovered one takes the full accent. Its fills
   used to come from the retired stylesheet, which left the map solid black. */
.london-map .borough, .london-map .borough-live {
    fill: var(--bronze-tint);
    stroke: var(--paper);
    stroke-width: 1.5;
    stroke-linejoin: round;
    transition: fill .15s;
}
.london-map .borough-soon { fill: var(--no-data); }
.london-map a:hover .borough, .london-map a:focus .borough,
.london-map a:hover .borough-live, .london-map a:focus .borough-live { fill: var(--bronze); }
/* SVG labels sit inside links; the global underline does not belong on them. */
.london-map a { text-decoration: none; }
/* Labels are lifted into one group that paints after every shape, so no
   borough covers its neighbour's name. They ignore the pointer so the shape
   underneath keeps its whole area as a hit target. */
.london-map .blabels { pointer-events: none; }
.london-map .blabels .blabel { stroke-width: 3.5px; paint-order: stroke; }
.london-map .thames { display: none; }
.london-map .blabel, .london-map .blabel-live, .london-map .blabel-soon {
    fill: var(--ink);
    font-size: 11px;
}


.map-side { font-size: 14px; line-height: 1.5; color: var(--mid); }
dl.kf { margin: 0 0 14px; }
dl.kf div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 6px 0;
    border-top: 1px solid var(--rule);
}
dl.kf div:last-child { border-bottom: 1px solid var(--rule); }
dl.kf dt { margin: 0; color: var(--dim); }
dl.kf dd { margin: 0; color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.map-side p { font-size: 13.5px; max-width: none; }
.legend { margin-bottom: 16px; }
.legend .bar {
    height: 10px;
    border: 1px solid var(--rule);
    background: linear-gradient(90deg, var(--refused), var(--paper-2) 50%, var(--approved));
}
.legend .lab, .legend .words { display: flex; justify-content: space-between; gap: 12px; }
.legend .lab {
    font-size: 12px;
    color: var(--dim);
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}
.legend .words { font-size: 12.5px; margin-top: 6px; }
.legend .words span { max-width: 9em; }
.legend .words span:last-child { text-align: right; }
.nod {
    display: inline-block;
    width: 10px;
    height: 10px;
    background: var(--no-data);
    border: 1px solid var(--rule);
    vertical-align: -1px;
    margin-right: 5px;
}
svg.scope path { fill: var(--no-data); stroke: var(--paper); stroke-width: 1.6; }
svg.scope path.on { fill: var(--bronze); }

/* ── 10. Ranked bars ──────────────────────────────────────────────────── */
.rows, .ps-diff { display: grid; gap: 3px; }
.row, .ps-diff-row, .diff-row {
    display: grid;
    grid-template-columns: var(--namew, 150px) 1fr var(--valw, 52px);
    gap: 12px;
    align-items: center;
    font-family: var(--fx);
    font-size: 13px;
    padding: 0;
}
.nm, .ps-diff-name, .rank-name {
    color: var(--mid);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
}
.tr, .ps-diff-bar-wrap, .diff-bar-wrap { position: relative; height: 10px; }
.zero, .ps-diff-zero, .diff-zero {
    position: absolute;
    left: 50%;
    top: -3px;
    bottom: -3px;
    width: 1px;
    background: var(--rule-2);
}
.b, .ps-diff-bar, .diff-bar { position: absolute; top: 0; height: 100%; border-radius: 0; }
.b.neg, .ps-diff-bar.neg, .diff-bar.neg { right: 50%; background: var(--refused); }
.b.pos, .ps-diff-bar.pos, .diff-bar.pos { left: 50%; background: var(--approved); }
.v, .ps-diff-val, .diff-value {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-size: 13px;
}
.v.neg, .ps-diff-val.neg, .diff-value.neg { color: var(--refused); }
.v.pos, .ps-diff-val.pos, .diff-value.pos { color: var(--approved); }
.axis, .ps-diff-head, .ps-diff-foot {
    display: grid;
    grid-template-columns: var(--namew, 150px) 1fr var(--valw, 52px);
    gap: 12px;
    font-family: var(--fx);
    font-size: 11.5px;
    color: var(--dim);
    text-transform: none;
    letter-spacing: 0;
}
.axis > div:nth-child(2), .ps-diff-foot > div:nth-child(2) {
    display: flex;
    justify-content: space-between;
    font-variant-numeric: tabular-nums;
}
.axis { padding-top: 6px; margin-top: 6px; border-top: 1px solid var(--rule); }
.ps-diff-head { padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--rule); }
.ps-diff-foot { padding-top: 8px; margin-top: 8px; border-top: 1px solid var(--rule); }

.two { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
.two .row, .two .axis { --namew: 132px; --valw: 44px; gap: 10px; }

/* ── 11. Stat rows ────────────────────────────────────────────────────── */
dl.facts, .ps-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 18px;
}
dl.facts div, .ps-stat { border-top: 1px solid var(--rule-2); padding-top: 10px; }
dl.facts dt, .ps-stat .l {
    font-family: var(--fx);
    font-size: 13.5px;
    color: var(--dim);
    line-height: 1.4;
}
dl.facts dd, .ps-stat .n {
    font-family: var(--fs);
    font-size: 32px;
    line-height: 1.1;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
}
.ps-stat .n { margin-bottom: 6px; }
.ps-stat .l { margin-top: 0; }

/* ── 12. Publication lists ────────────────────────────────────────────── */
ol.pubs, .ps-pubs { display: block; }
ol.pubs li, .ps-pub {
    display: grid;
    grid-template-columns: 78px 108px 1fr;
    gap: 20px;
    padding: 16px 0;
    border-top: 1px solid var(--rule);
    align-items: start;
}
ol.pubs li:last-child, .ps-pub:last-child { border-bottom: 1px solid var(--rule); }
ol.pubs svg.scope { width: 78px; height: auto; display: block; }
ol.pubs .when, .ps-pub-top {
    font-family: var(--fx);
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--dim);
    padding-top: 3px;
}
ol.pubs h3, .ps-pub h2 {
    font-family: var(--fs);
    font-weight: 400;
    font-size: 23px;
    line-height: 1.25;
    color: var(--ink);
    max-width: none;
    margin-bottom: 5px;
}
ol.pubs h3 a, .ps-pub h2 a { color: var(--ink); text-decoration: none; }
ol.pubs h3 a:hover, .ps-pub h2 a:hover { color: var(--bronze-2); text-decoration: underline; }
ol.pubs p, .ps-pub p { font-size: 15px; color: var(--mid); max-width: 70ch; }

/* Publication entries place their children explicitly: without this the
   description wraps into the narrow meta column instead of sitting under
   the heading. */
.ps-pub { grid-template-columns: 78px 116px 1fr; }
.ps-pub > svg.scope { grid-column: 1; grid-row: 1 / span 2; width: 78px; }
.ps-pub > .ps-pub-top { grid-column: 2; grid-row: 1 / span 2; }
.ps-pub > h2 { grid-column: 3; grid-row: 1; }
.ps-pub > p { grid-column: 3; grid-row: 2; }
.ps-pub:not(:has(svg.scope)) { grid-template-columns: 116px 1fr; }
.ps-pub:not(:has(svg.scope)) > .ps-pub-top { grid-column: 1; }
.ps-pub:not(:has(svg.scope)) > h2 { grid-column: 2; }
.ps-pub:not(:has(svg.scope)) > p { grid-column: 2; }
ol.pubs li > svg.scope { grid-column: 1; grid-row: 1 / span 2; }
ol.pubs li > .when { grid-column: 2; grid-row: 1 / span 2; }
ol.pubs li > .txt { grid-column: 3; grid-row: 1 / span 2; }
svg.scope use { fill: var(--no-data); }
svg.scope use.on, svg.scope path.on { fill: var(--bronze); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ps-pub-kind, .ps-pub-scope, .ps-pub-date {
    font-family: var(--fx);
    font-size: 13.5px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--dim);
    border: 0;
    border-radius: 0;
    padding: 0;
    display: block;
}
.ps-pub-kind { color: var(--bronze); font-weight: 500; }

/* ── 13. Question lists ───────────────────────────────────────────────── */
ul.qs, .ps-qlist { max-width: 60ch; }
ul.qs li, .ps-qlist li {
    font-family: var(--fs);
    font-size: 20px;
    line-height: 1.4;
    color: var(--ink);
    padding: 10px 0;
    border-top: 1px solid var(--rule);
    position: static;
}
ul.qs li:last-child, .ps-qlist li:last-child { border-bottom: 1px solid var(--rule); }
.ps-qlist li::before { content: none; }
.ps-qlist-note { font-family: var(--fx); font-size: 15px; color: var(--dim); margin-top: 14px; }
/* A ruled list ends on a rule; prose that follows needs its own air. */
ul.qs + p, .ps-qlist + p, .programme + p { margin-top: 18px; }

/* ── 13b. The research programme ──────────────────────────────────────────
   The questions are grouped by strand so the programme reads as wider than
   the one dataset that currently answers most of it. */
.programme {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 44px;
    margin-top: 18px;
}
.strand h3 {
    font-family: var(--fx);
    font-size: 14px;
    font-weight: 600;
    color: var(--bronze-2);
    margin-bottom: 4px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--rule-2);
}
.strand ul.qs li { font-size: 18px; padding: 8px 0; }
.strand ul.qs li:first-child { border-top: 0; }
@container (max-width: 760px) {
    .programme { grid-template-columns: 1fr; gap: 22px; }
}

/* ── 14. The borough register ─────────────────────────────────────────── */
table.reg, .ps-dl, .ps-tiertable {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--fx);
    font-size: 14.5px;
    font-variant-numeric: tabular-nums;
}
table.reg thead th, .ps-dl th, .ps-tiertable th {
    text-align: left;
    font-weight: 500;
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--dim);
    padding: 8px 10px 8px 0;
    border-top: 1px solid var(--rule-2);
    border-bottom: 1px solid var(--rule-2);
    white-space: nowrap;
}
table.reg th.n, table.reg td.n, .ps-dl th.num, .ps-dl td.num { text-align: right; }
table.reg tbody td, .ps-dl td, .ps-tiertable td {
    padding: 6px 10px 6px 0;
    border-bottom: 1px solid var(--rule);
    color: var(--mid);
    vertical-align: middle;
}
table.reg tbody tr:hover td { background: var(--paper-2); }
table.reg td.bor, .ps-dl td:first-child, .ps-tiertable td:first-child {
    color: var(--ink);
    font-weight: 500;
    white-space: nowrap;
}
table.reg td.dif { width: 30%; }
table.reg td.dif .tr { height: 9px; }
table.reg td.d.neg { color: var(--refused); }
table.reg td.d.pos { color: var(--approved); }
table.reg th[aria-sort] { cursor: pointer; }
table.reg th[aria-sort]:hover { color: var(--ink); }
table.reg th[aria-sort="ascending"]::after { content: ' \2191'; color: var(--bronze); }
table.reg th[aria-sort="descending"]::after { content: ' \2193'; color: var(--bronze); }

/* ── 15. Panels and notes ─────────────────────────────────────────────── */
/* Asides are marked by a bronze rule and a change of voice into the serif,
   not by a filled box. */
.ps-card, .ps-note, .callout, .correction-note, .takeaway,
.map-panel-note, .bar-note {
    background: none;
    border: 0;
    border-left: 2px solid var(--bronze);
    border-radius: 0;
    padding: 2px 0 2px 18px;
    margin: 0 0 22px;
}
.ps-card p, .ps-note p, .callout p, .correction-note p, .takeaway,
.takeaway p, .map-panel-note, .bar-note {
    font-family: var(--fs);
    font-style: italic;
    font-size: 17px;
    line-height: 1.55;
    color: var(--mid);
    max-width: 60ch;
}
.correction-note strong, .ps-note strong, .callout strong { font-style: normal; }
.ps-card h3, .ps-note h3 {
    font-family: var(--fs);
    font-style: normal;
    font-weight: 400;
    font-size: 21px;
    color: var(--ink);
    margin-bottom: 10px;
}
.ps-card .ps-card-figs {
    font-size: 14px;
    color: var(--dim);
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--rule);
}
.prov {
    font-family: var(--fx);
    font-size: 14px;
    line-height: 1.5;
    color: var(--dim);
    border-left: 2px solid var(--rule);
    padding: 2px 0 2px 12px;
    margin: 14px 0 18px;
    max-width: 60ch;
}

/* ── 16. Prose blocks ─────────────────────────────────────────────────── */
.ps-prose, .ps-prose-left, .body-text, .terms-content, .about-full-inner {
    font-family: var(--fx);
    font-size: 16.5px;
    line-height: 1.75;
    color: var(--mid);
    max-width: 64ch;
    text-align: left;
}
.ps-prose { margin: 0 0 12px; }
.ps-statement {
    font-family: var(--fs);
    font-weight: 400;
    font-size: clamp(28px, 3cqw, 38px);
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: var(--ink);
    max-width: 24ch;
    text-align: left;
    margin: 0 0 14px;
    text-wrap: balance;
}
.ps-links { font-family: var(--fx); font-size: 15.5px; line-height: 1.9; margin-top: 14px; }
.ps-links span { color: var(--dim); margin: 0 10px; }
.ps-crumb {
    font-family: var(--fx);
    font-size: 13.5px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--dim);
    margin-bottom: 16px;
}
.ps-crumb a { color: var(--dim); }
.ps-crumb span { margin: 0 8px; }

/* ── 17. Publication meta and endings ─────────────────────────────────── */
.ps-pubtype {
    display: inline-block;
    font-family: var(--fx);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--bronze);
    border: 0;
    padding: 0;
}
.ps-pubmeta {
    font-family: var(--fx);
    font-size: 13.5px;
    line-height: 1.8;
    color: var(--dim);
    margin-top: 14px;
}
.ps-pubmeta dt { display: inline; font-weight: 600; color: var(--mid); }
.ps-pubmeta dd { display: inline; margin-left: 6px; }
.ps-pubmeta div { display: block; }
.ps-pubend {
    margin-top: 40px;
    padding-top: 22px;
    border-top: 1px solid var(--rule-2);
    font-family: var(--fx);
}
.ps-pubend h3 {
    font-family: var(--fx);
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--dim);
    font-weight: 600;
    margin-bottom: 10px;
}
.ps-pubend p { font-size: 14.5px; color: var(--mid); margin-bottom: 18px; }
.ps-cite {
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--dim);
    background: var(--paper-2);
    border: 1px solid var(--rule);
    padding: 14px 16px;
}

/* ── 18. Filters ──────────────────────────────────────────────────────── */
.ps-filter { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 24px; }
.ps-filter button {
    font-family: var(--fx);
    font-size: 15px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--dim);
    background: none;
    border: 0;
    border-bottom: 1px solid transparent;
    border-radius: 0;
    padding: 4px 0;
    cursor: pointer;
    transition: color .15s, border-color .15s;
}
.ps-filter button:hover { color: var(--ink); border-bottom-color: var(--rule-2); }
.ps-filter button[aria-pressed="true"] { color: var(--bronze-2); border-bottom-color: var(--bronze); }

/* ── 19. Contents rail on long documents ──────────────────────────────── */
.ps-doc { display: block; }
.ps-doc-body { max-width: 64ch; }
.ps-rail { font-family: var(--fx); font-size: 15px; margin-bottom: 28px; }
.ps-rail h4 {
    font-size: 13px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--dim);
    font-weight: 600;
    margin-bottom: 8px;
}
.ps-rail a {
    display: block;
    color: var(--mid);
    text-decoration: none;
    border-left: 1px solid var(--rule);
    padding: 4px 0 4px 12px;
}
.ps-rail a:hover, .ps-rail a.active { color: var(--bronze-2); border-left-color: var(--bronze); }
.ps-doc-body h2 { scroll-margin-top: 24px; margin-top: 36px; }
.ps-doc-body h2:first-child { margin-top: 0; }
.ps-doc-body h3 { margin-top: 24px; }
.ps-doc-body ul, .ps-doc-body ol { margin-bottom: 18px; padding-left: 18px; }
.ps-doc-body li {
    font-family: var(--fx);
    font-size: 16.5px;
    line-height: 1.75;
    color: var(--mid);
    margin-bottom: 6px;
    list-style: disc;
}

/* ── 20. Forms ────────────────────────────────────────────────────────── */
.ps-form, .lead-form { max-width: 620px; margin-top: 24px; }
.ps-form label {
    display: block;
    font-family: var(--fx);
    font-size: 13.5px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--dim);
    margin-bottom: 6px;
}
.ps-form input, .ps-form select, .ps-form textarea, .lead-form input[type="email"] {
    width: 100%;
    padding: 11px 13px;
    margin-bottom: 18px;
    background: var(--paper);
    border: 1px solid var(--rule-2);
    border-radius: 0;
    color: var(--ink);
    font-family: var(--fx);
    font-size: 16px;
    line-height: 1.5;
}
.ps-form textarea { min-height: 150px; resize: vertical; }
.ps-form input:focus, .ps-form select:focus, .ps-form textarea:focus {
    outline: none;
    border-color: var(--bronze);
    box-shadow: 0 0 0 2px var(--bronze-15);
}
.ps-form .hp { position: absolute; left: -9999px; }
.ps-form-note { font-family: var(--fx); font-size: 13.5px; color: var(--dim); margin-top: 12px; }
.ps-form-status { font-family: var(--fx); font-size: 15px; margin-top: 14px; min-height: 22px; }
.ps-form-status.ok { color: var(--approved); }
.ps-form-status.err { color: var(--refused); }

/* The one filled control on the site. */
.btn, .btn-accent, .btn-primary, .btn-outline, .btn-large,
button[type="submit"], .lead-form button {
    display: inline-block;
    font-family: var(--fx);
    font-size: 15px;
    font-weight: 500;
    padding: 10px 18px;
    border: 1px solid var(--rule-2);
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    text-decoration: none;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.btn:hover, .btn-accent:hover, .btn-primary:hover,
.btn-large:hover, .btn-outline:hover {
    border-color: var(--bronze);
    color: var(--bronze-2);
    background: transparent;
}
/* The one filled control on the site. */
button[type="submit"], .lead-form button {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}
button[type="submit"]:hover, .lead-form button:hover {
    background: var(--bronze-2);
    border-color: var(--bronze-2);
    color: var(--paper);
}

/* Hero call-to-action rows become plain links. */
.hero-ctas, .cta-buttons { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; margin-top: 18px; }
.cta-ghost { font-family: var(--fx); font-size: 15px; font-weight: 500; color: var(--bronze); }

/* ── 21. Evidence tier badges ─────────────────────────────────────────── */
.tier {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--fx);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    padding: 0;
    background: none;
    border-radius: 0;
}
.tier-dot { width: 7px; height: 7px; border-radius: 50%; }
.tier-robust { color: var(--approved); }
.tier-robust .tier-dot { background: var(--approved); }
.tier-moderate { color: var(--caution); }
.tier-moderate .tier-dot { background: var(--caution); }
.tier-indicative { color: var(--refused); }
.tier-indicative .tier-dot { background: var(--refused); }
.tier-anecdotal { color: var(--dim); }
.tier-anecdotal .tier-dot { background: var(--dim); }

/* ── 22. Borough index grid ───────────────────────────────────────────── */
.borough-grid, .borough-index-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0 24px;
    margin-top: 18px;
}
.borough-card {
    display: block;
    background: none;
    border: 0;
    border-top: 1px solid var(--rule);
    border-radius: 0;
    padding: 10px 0;
    text-decoration: none;
}
.borough-card:hover { background: none; }
.borough-card h3 {
    font-family: var(--fx);
    font-size: 15.5px;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 2px;
}
.borough-card:hover h3 { color: var(--bronze-2); }
.borough-card p, .borough-card .status {
    font-family: var(--fx);
    font-size: 13px;
    color: var(--dim);
    margin: 0;
}
.map-legend, .legend-item {
    display: flex;
    gap: 8px;
    align-items: center;
    font-family: var(--fx);
    font-size: 13px;
    color: var(--dim);
}
.map-legend { gap: 22px; flex-wrap: wrap; margin-top: 14px; }
.legend-dot { width: 10px; height: 10px; border: 1px solid var(--rule); }
.legend-live .legend-dot { background: var(--bronze); }
.legend-soon .legend-dot { background: var(--no-data); }

/* ── 23. Data releases page ───────────────────────────────────────────── */
.rel-block { padding: 16px 0; border-top: 1px solid var(--rule); }
.rel-block:last-child { border-bottom: 1px solid var(--rule); }
.rel-head { display: flex; gap: 14px; align-items: baseline; flex-wrap: wrap; }
.rel-v { font-family: var(--fs); font-size: 22px; color: var(--ink); }
.rel-date, .rel-fig { font-family: var(--fx); font-size: 13.5px; color: var(--dim); }

/* ── 24. Research article internals ───────────────────────────────────── */
header.hero { padding: 0 0 24px; margin-bottom: 24px; border-bottom: 1px solid var(--rule-2); }
.label-eyebrow {
    font-family: var(--fx);
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--bronze);
    margin-bottom: 10px;
    display: block;
}
.hero-meta, .hero-stats { font-family: var(--fx); font-size: 13.5px; color: var(--dim); }
.hero-meta { margin-top: 12px; }
.hero-stats { display: flex; gap: 34px; flex-wrap: wrap; margin-top: 20px; }
.stat-block { border-top: 1px solid var(--rule-2); padding-top: 8px; }
.stat-num {
    font-family: var(--fs);
    font-size: 30px;
    line-height: 1.1;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.stat-label { font-family: var(--fx); font-size: 13px; color: var(--dim); margin-top: 2px; }

.body-text p { margin-bottom: 16px; }
.body-text p.lede { font-family: var(--fs); }
.body-text h2 { margin-top: 38px; }
.body-text h3 { margin-top: 26px; }
.body-text ul, .body-text ol { margin: 0 0 18px 18px; }
.body-text li { list-style: disc; margin-bottom: 6px; max-width: 64ch; }
.body-text blockquote {
    border-left: 2px solid var(--bronze);
    padding-left: 16px;
    margin: 0 0 18px;
    color: var(--mid);
    font-family: var(--fs);
    font-size: 19px;
    line-height: 1.5;
}
.toc-num, .num { color: var(--bronze); font-variant-numeric: tabular-nums; }

.chart-block { margin: 26px 0; }
.chart-wrap { margin-top: 12px; }
.chart-title {
    font-family: var(--fs);
    font-size: 21px;
    font-weight: 400;
    color: var(--ink);
    margin-bottom: 4px;
}
.chart-subtitle { font-family: var(--fx); font-size: 14.5px; color: var(--mid); margin-bottom: 14px; }

.compare-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 22px; margin: 22px 0; }
.compare-card {
    background: none;
    border: 0;
    border-top: 2px solid var(--rule-2);
    border-radius: 0;
    padding: 12px 0 0;
}
.compare-card.neg { border-top-color: var(--refused); }
.compare-card.pos { border-top-color: var(--approved); }
.compare-card .name { font-family: var(--fx); font-size: 14px; color: var(--dim); }
.compare-card .approval {
    font-family: var(--fs);
    font-size: 30px;
    line-height: 1.1;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.compare-card.neg .approval { color: var(--refused); }
.compare-card.pos .approval { color: var(--approved); }
.compare-card .approval-label, .compare-card .gap, .compare-card .price {
    font-family: var(--fx);
    font-size: 13px;
    color: var(--dim);
}

.headline-finding {
    border-top: 1px solid var(--rule-2);
    border-bottom: 1px solid var(--rule-2);
    padding: 22px 0;
    margin: 26px 0;
    background: none;
}
.headline-finding .eyebrow {
    font-family: var(--fx);
    font-size: 13.5px;
    letter-spacing: 0;
    text-transform: none;
    color: var(--bronze);
    display: block;
    margin-bottom: 8px;
}
.headline-finding .stat {
    font-family: var(--fs);
    font-size: clamp(34px, 4cqw, 48px);
    line-height: 1.05;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.headline-finding .stat .delta-neg { color: var(--refused); }
.headline-finding .stat .delta-pos { color: var(--approved); }

.heatmap-table { width: 100%; border-collapse: collapse; font-family: var(--fx); font-size: 12.5px; }
.heatmap-table th {
    font-weight: 500;
    color: var(--dim);
    text-align: left;
    padding: 6px 4px;
    border-bottom: 1px solid var(--rule-2);
}
.heatmap-table td.hm { text-align: center; padding: 5px 4px; color: var(--ink); }
.heatmap-table td.hm.blank { color: var(--dim); }
.heatmap-table td.hm-row { color: var(--ink); font-weight: 500; white-space: nowrap; }
.hm-legend { display: flex; gap: 14px; align-items: center; font-size: 12.5px; color: var(--dim); margin-top: 10px; }
.hm-legend .sw { width: 14px; height: 14px; display: inline-block; border: 1px solid var(--rule); }

/* ── 25. Footer ───────────────────────────────────────────────────────── */
footer.site-foot {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    align-items: center;
    font-family: var(--fx);
    font-size: 13.5px;
    color: var(--dim);
    padding-top: 22px;
    margin-top: 40px;
    border-top: 1px solid var(--rule-2);
}
footer.site-foot a { color: var(--dim); text-decoration: none; }
footer.site-foot a:hover { color: var(--bronze-2); text-decoration: underline; }
footer.site-foot span { margin-left: auto; }

/* ── 26. Narrow widths ────────────────────────────────────────────────── */
@container (max-width: 1000px) {
    .map-fig { grid-template-columns: 1fr; gap: 18px; }
    dl.facts, .ps-stats { grid-template-columns: repeat(2, 1fr); }
}
@container (max-width: 760px) {
    .two { grid-template-columns: 1fr; }
    .two .rows + .rows { margin-top: 3px; }
    .two > div + div .axis { border-top: 0; }
    .row, .axis, .ps-diff-row, .ps-diff-head, .ps-diff-foot, .diff-row {
        --namew: 104px;
        --valw: 46px;
        gap: 8px;
    }
    ol.pubs li { grid-template-columns: 64px 1fr; }
    ol.pubs li .when, ol.pubs li .txt { grid-column: 2; }
    ol.pubs svg.scope { width: 64px; }
    .ps-pub { grid-template-columns: 1fr; gap: 4px; }
    .compare-grid { grid-template-columns: 1fr 1fr; }
    .hero-stats { gap: 20px; }
    footer.site-foot span { margin-left: 0; width: 100%; }
    .tbl-scroll { overflow-x: auto; }
    .tbl-scroll table { min-width: 560px; }
    /* Wide tables inside articles scroll in their own box rather than pushing
       the page sideways. display:block gives the table a scrollable box while
       its rows keep their table layout. */
    /* Article charts size their columns in fixed pixels in the article's own
       CSS, so at narrow widths they scroll in their box instead of pushing the
       page sideways. */
    main.main .chart-wrap, main.main .chart-block { overflow-x: auto; }
    /* Articles set their own table rules by class, so this needs the extra
       specificity of the main element to win. */
    main.main table {
        display: block;
        overflow-x: auto;
        max-width: 100%;
    }
}

@media (max-width: 860px) {
    .shell { grid-template-columns: 1fr; min-height: 0; }
    aside.masthead {
        position: static;
        height: auto;
        overflow: visible;
        border-right: 0;
        border-bottom: 1px solid var(--rule);
        padding: 22px 22px 18px;
        gap: 14px;
    }
    .mh-about { font-size: 17px; max-width: 46ch; }
    nav.mh-nav { flex-direction: row; flex-wrap: wrap; gap: 4px 20px; }
    nav.mh-nav a { border: 0; padding: 2px 0; margin: 0; }
    nav.mh-nav a[aria-current="page"] { border: 0; text-decoration: underline; text-underline-offset: 4px; }
    .mh-vintage, .mh-page { display: none; }
    main.main { padding: 26px 22px 34px; max-width: none; }
    :root { --section-y: 32px; }
}

/* Wide data pages opt in. */
.dash main.main { --main-max: 1180px; }

/* ── 27. Print ────────────────────────────────────────────────────────── */
@media print {
    aside.masthead, footer.site-foot { display: none; }
    .shell { display: block; }
    main.main { max-width: none; padding: 0; }
    body { background: #fff; }
}