/* What It Bought — restrained civic-data typography. No framework. */
:root {
  --paper: #fbfaf7;
  --ink: #1b1b1b;
  --muted: #666;
  --faint: #9a9a9a;
  --rule: #e4e0d8;
  --rule-strong: #c9c3b8;
  --link: #1f4e79;
  --wash: #f1eee8;

  /* semantic states only — never a country colour */
  --ok: #2d6a4f;
  --ok-wash: #e6f2ec;
  --warn: #a15c00;
  --warn-wash: #fbf0dc;
  --bad: #a3271e;
  --bad-wash: #fbe7e4;
  --calc: #4a4a8a;
  --calc-wash: #ecebf7;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html { font-size: 17px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); line-height: 1.5; -webkit-font-smoothing: antialiased; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.wrap { max-width: 1080px; margin: 0 auto; padding-inline: 20px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; letter-spacing: -0.01em; line-height: 1.15; margin: 0; }
h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
h2 { font-size: 1.7rem; margin-block: 3.5rem 1rem; padding-top: 1.25rem; border-top: 1px solid var(--rule-strong); }
h3 { font-size: 1.15rem; margin-block: 1.75rem .5rem; }
p { margin: .5rem 0 1rem; max-width: 70ch; }
small, .muted { color: var(--muted); }
.faint { color: var(--faint); }
.eyebrow { font-family: var(--sans); text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; color: var(--muted); margin-bottom: .35rem; }
.lede { font-size: 1.2rem; max-width: 62ch; color: #333; }

.site-header { border-bottom: 1px solid var(--rule); }
.site-header .wrap { display: flex; justify-content: space-between; align-items: baseline; padding-block: 1rem; }
.brand { font-family: var(--serif); font-size: 1.25rem; color: var(--ink); text-decoration: none; }
.site-header nav a { color: var(--muted); text-decoration: none; margin-left: 1.25rem; font-size: .95rem; }
.site-footer { border-top: 1px solid var(--rule); margin-top: 5rem; padding-block: 2rem 3rem; color: var(--muted); font-size: .9rem; }
main { padding-block: 2.5rem 1rem; }

/* headline figures */
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1.5rem 2rem; margin-block: 1.5rem; }
.figure .num { font-family: var(--serif); font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.05; font-variant-numeric: tabular-nums; }
.figure .lbl { color: var(--muted); font-size: .9rem; margin-top: .25rem; }
.figure .sub { color: var(--faint); font-size: .8rem; margin-top: .15rem; }

/* chips for kind and state — small, quiet */
.chip { display: inline-block; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; padding: .1rem .45rem; border-radius: 3px; border: 1px solid var(--rule-strong); color: var(--muted); vertical-align: middle; white-space: nowrap; }
.chip-planned { border-style: dashed; }
.chip-committed { border-color: var(--ink); color: var(--ink); }
.chip-actual { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip-calculated { background: var(--calc-wash); color: var(--calc); border-color: transparent; }
.chip-reported { border-color: transparent; background: var(--wash); }
.chip-ok { background: var(--ok-wash); color: var(--ok); border-color: transparent; }
.chip-warn { background: var(--warn-wash); color: var(--warn); border-color: transparent; }
.chip-bad { background: var(--bad-wash); color: var(--bad); border-color: transparent; }
.chip-na { border-style: dashed; color: var(--faint); }

/* the value cell: reported vs calculated vs unavailable must look different */
.val { font-variant-numeric: tabular-nums; }
.val-calc { color: var(--calc); }
.val-calc .num::after { content: ""; }
.val-na { color: var(--faint); font-style: italic; }
.val-na .why { display: block; font-style: normal; font-size: .8rem; max-width: 34ch; }

/* derived-value disclosure */
details.derive { display: inline-block; }
details.derive > summary { list-style: none; cursor: pointer; border-bottom: 1px dotted var(--calc); color: var(--calc); }
details.derive > summary::-webkit-details-marker { display: none; }
details.derive[open] > summary { border-bottom-color: transparent; }
details.derive .panel, details.src .panel { font-size: .85rem; background: var(--surface); border: 1px solid var(--rule); border-radius: 4px; padding: .75rem 1rem; margin-top: .5rem; max-width: 46ch; color: var(--ink); text-align: left; }
details .panel .formula { font-family: var(--mono); font-size: .8rem; word-break: break-word; }
details .panel dl { margin: .5rem 0 0; display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; }
details .panel dt { color: var(--muted); }
details .panel dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
details .panel .note { color: var(--muted); margin-top: .5rem; }

/* evidence affordance */
details.src { display: inline-block; vertical-align: baseline; }
details.src > summary { list-style: none; cursor: pointer; font-size: .7rem; color: var(--muted); border: 1px solid var(--rule-strong); border-radius: 3px; padding: 0 .35rem; margin-left: .3rem; }
details.src > summary::-webkit-details-marker { display: none; }
details.src > summary:hover { color: var(--ink); border-color: var(--ink); }
details.src ul { margin: 0; padding-left: 1rem; }
details.src li { margin-bottom: .35rem; }
.unsourced { color: var(--bad); font-size: .7rem; border: 1px dashed var(--bad); border-radius: 3px; padding: 0 .35rem; margin-left: .3rem; }

/* tables */
table { border-collapse: collapse; width: 100%; margin-block: 1rem; font-size: .95rem; }
th, td { text-align: left; vertical-align: top; padding: .65rem .5rem; border-bottom: 1px solid var(--rule); }
th { font-weight: 500; color: var(--muted); font-size: .85rem; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.total td { border-top: 1px solid var(--rule-strong); font-weight: 600; }
.table-scroll { overflow-x: auto; }

/* comparison grid */
.cmp { display: grid; grid-template-columns: 1fr; gap: 0; }
.cmp-row { display: grid; grid-template-columns: minmax(140px, .8fr) 1fr 1fr; gap: 1rem; padding: .8rem 0; border-bottom: 1px solid var(--rule); align-items: start; }
.cmp-row .k { color: var(--muted); font-size: .9rem; }
.cmp-head { position: sticky; top: 0; background: var(--paper); z-index: 1; border-bottom: 2px solid var(--ink); font-family: var(--serif); font-size: 1.15rem; }
.cmp-head .k { font-family: var(--sans); font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; align-self: end; }
.cmp .big { font-family: var(--serif); font-size: 1.6rem; line-height: 1.1; }
@media (max-width: 640px) {
  .cmp-row { grid-template-columns: 1fr 1fr; }
  .cmp-row .k { grid-column: 1 / -1; padding-bottom: .1rem; }
  html { font-size: 16px; }
}

/* notices */
.notice { border-left: 3px solid var(--warn); background: var(--warn-wash); padding: .75rem 1rem; margin-block: 1.25rem; font-size: .95rem; max-width: 76ch; }
.notice-neutral { border-left-color: var(--rule-strong); background: var(--wash); }
.notice p { margin: 0; }

/* money tree */
.tree { list-style: none; padding: 0; margin: .5rem 0; max-width: 560px; }
.tree li { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px solid var(--rule); }
.tree li.child { padding-left: 1.25rem; position: relative; }
.tree li.child::before { content: "├"; position: absolute; left: .2rem; color: var(--faint); }
.tree li.child:last-child::before { content: "└"; }
.tree .amt { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* component cards */
.components { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; margin-block: 1rem; }
.card { border: 1px solid var(--rule); border-radius: 4px; padding: 1rem 1.1rem; background: var(--surface); }
.card h4 { margin: 0 0 .25rem; font-weight: 600; font-size: 1rem; }
.card .dims { font-family: var(--serif); font-size: 1.35rem; margin-top: .4rem; }
.card .meta { color: var(--muted); font-size: .85rem; margin-top: .4rem; }
.card-excluded { background: transparent; border-style: dashed; }

/* timeline */
.timeline { list-style: none; padding: 0; margin: 1rem 0; border-left: 2px solid var(--rule-strong); }
.timeline li { position: relative; padding: 0 0 1.1rem 1.25rem; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: .35rem; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); }
.timeline li.planned::before { border-style: dashed; border-color: var(--muted); }
.timeline li.superseded::before { border-color: var(--faint); }
.timeline li.superseded .when { text-decoration: line-through; color: var(--faint); }
.timeline .what { font-weight: 500; }
.timeline .when { font-family: var(--serif); font-size: 1.1rem; }

/* outcome rows */
.outcomes { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.outcome { display: grid; grid-template-columns: 2fr repeat(3, 1fr) auto; gap: .5rem 1rem; align-items: baseline; padding: .8rem 0; border-bottom: 1px solid var(--rule); }
.outcome .v { font-family: var(--serif); font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.outcome .h { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-family: var(--sans); }
@media (max-width: 640px) { .outcome { grid-template-columns: 1fr 1fr; } .outcome .name { grid-column: 1 / -1; } }

/* share card */
.share { border: 1px solid var(--ink); border-radius: 6px; padding: 1.75rem 2rem; margin-block: 2rem; background: var(--surface); }
.share .vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center; text-align: center; }
.share .vs .side { font-family: var(--serif); font-size: clamp(1.4rem, 4vw, 2.2rem); }
.share .vs .mid { color: var(--faint); font-family: var(--serif); }
.share .row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; text-align: center; padding: .6rem 0; border-top: 1px solid var(--rule); font-variant-numeric: tabular-nums; }
.share .row .side { font-size: 1.15rem; }
.share .row .mid { color: var(--faint); font-size: .8rem; }
.share .foot { text-align: center; color: var(--muted); font-size: .85rem; margin-top: 1rem; }

.cta { display: inline-block; border: 1px solid var(--ink); border-radius: 4px; padding: .55rem 1rem; text-decoration: none; color: var(--ink); margin: .5rem .5rem .5rem 0; }
.cta-primary { background: var(--ink); color: var(--paper); }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; }
.prose h1 { margin-bottom: 1rem; }
.prose h2 { font-size: 1.4rem; margin-top: 2.5rem; }
.prose h3 { font-size: 1.1rem; }
.prose table { font-size: .9rem; }
.prose code { font-family: var(--mono); font-size: .85em; background: var(--wash); padding: 0 .25rem; border-radius: 3px; }
.prose blockquote { border-left: 3px solid var(--rule-strong); margin: 1rem 0; padding-left: 1rem; color: var(--muted); }
hr.soft { border: 0; border-top: 1px solid var(--rule); margin-block: 2rem; }

/* Comparison workspace */
:root { --paper:#f3f6f8; --ink:#152c3b; --muted:#536775; --faint:#637684; --rule:#dce5ea; --rule-strong:#b9cbd4; --link:#006c70; --wash:#eaf0f4; --serif:var(--sans); }
html { scroll-behavior:smooth; }
.wrap { max-width:1200px; padding-inline:28px; }
h1,h2,h3 { font-weight:700; letter-spacing:-.035em; }
h1 { max-width:900px; font-size:clamp(2.2rem,5vw,3.8rem); line-height:1.08; }
h2 { font-size:1.65rem; }
h3 { letter-spacing:-.02em; }
a { text-underline-offset:4px; }
a:focus-visible,summary:focus-visible { outline:3px solid #00888b; outline-offset:5px; border-radius:3px; }
[id] { scroll-margin-top:90px; }
.site-header { background:var(--surface); }
.site-header .wrap { align-items:center; min-height:84px; gap:20px; }
.brand { display:flex; align-items:center; gap:10px; font-size:1.05rem; font-weight:750; letter-spacing:-.035em; }
.brand-mark { display:grid; place-items:center; background:var(--ink); color:#fff; width:40px; height:40px; border-radius:10px; font-size:1rem; letter-spacing:-.08em; }
.site-header nav { display:flex; gap:24px; }
.site-header nav a { margin:0; font-size:.85rem; font-weight:600; }
.site-header nav a[aria-current] { color:var(--link); }
main { padding-top:40px; }
.lede { color:var(--muted); font-size:1.1rem; line-height:1.65; margin-top:18px; }
.eyebrow { font-size:.68rem; font-weight:700; letter-spacing:.12em; }
.home-intro { padding:14px 0 32px; }
.home-intro h1 { max-width:780px; margin-top:15px; }
.home-intro .lede { max-width:660px; }
.intro-meta { display:flex; flex-wrap:wrap; gap:10px 24px; color:var(--muted); font-size:.76rem; margin-top:22px; }
.intro-meta span::before { content:'✓'; color:var(--link); margin-right:7px; }
.comparison-launch { background:var(--surface); border:1px solid var(--rule); border-radius:18px; overflow:hidden; box-shadow:0 12px 38px #152c3b08; }
.launch-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:24px 30px; background:var(--ink); color:#fff; }
.launch-heading .eyebrow { color:#a8c8ce; }
.launch-heading h2 { border:0; padding:0; margin:6px 0 0; font-size:1.45rem; }
.scope-label { border:1px solid #54707f; border-radius:20px; padding:6px 12px; font-size:.7rem; color:#d6e7eb; }
.project-pair { display:grid; grid-template-columns:1fr 1fr; }
.project-preview { padding:28px 30px 20px; min-width:0; }
.project-preview + .project-preview { border-left:1px solid var(--rule); }
.preview-top { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.country-label { font-size:.8rem; font-weight:600; }
.project-preview h3 { font-size:2.2rem; margin:20px 0 4px; }
.project-name { font-size:.85rem; color:var(--muted); min-height:2.6em; }
.preview-cost { margin-top:22px; font-size:2.1rem; font-weight:700; letter-spacing:-.04em; font-variant-numeric:tabular-nums; }
.preview-cost .chip { letter-spacing:.03em; }
.preview-cost details { font-weight:400; letter-spacing:normal; }
.preview-outputs { margin-top:24px; padding:16px 0; border-block:1px solid var(--rule); }
.mini-label { display:block; color:var(--muted); font-size:.72rem; margin-bottom:10px; }
.output-line { display:flex; align-items:baseline; justify-content:space-between; gap:16px; padding:7px 0; font-size:.8rem; }
.output-line strong { text-align:right; min-width:90px; }
.project-link { display:flex; justify-content:space-between; padding-top:18px; text-decoration:none; font-size:.82rem; font-weight:650; }
.launch-footer { background:#edf5f5; border-top:1px solid #d6e5e5; padding:20px 30px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.launch-footer strong { font-size:.82rem; }
.launch-footer p { color:var(--muted); font-size:.76rem; margin:4px 0 0; }
.cta { border-radius:8px; font-size:.85rem; font-weight:650; padding:12px 20px; transition:background .15s; }
.cta-primary { background:#006c70; border-color:#006c70; color:#fff; }
.cta-primary:hover { background:#005256; }
.launch-footer .cta { margin:0; flex-shrink:0; }
.section-heading { display:flex; justify-content:space-between; align-items:center; gap:18px; margin:40px 0 22px; }
.section-heading h2 { margin:0; padding:0; border:0; font-size:1.5rem; }
.section-heading a { font-size:.8rem; }
.guide-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.guide-grid > div { border-top:2px solid var(--rule-strong); padding-top:17px; }
.guide-number { font-family:var(--mono); color:var(--link); font-size:.67rem; letter-spacing:.06em; }
.guide-grid h3 { margin:12px 0 8px; font-size:1.05rem; }
.guide-grid p { color:var(--muted); font-size:.85rem; }
.section-nav { display:flex; flex-wrap:wrap; gap:5px; padding:8px; background:var(--surface); border:1px solid var(--rule); border-radius:10px; margin:26px 0; }
.section-nav a { text-decoration:none; padding:9px 13px; color:var(--muted); font-size:.8rem; font-weight:600; border-radius:6px; }
.section-nav a:hover { background:var(--wash); color:var(--ink); }
.share { border:1px solid var(--rule); border-radius:14px; padding:26px; box-shadow:0 6px 20px #152c3b05; }
.share .vs { padding-bottom:18px; }
.share .vs .side { font-weight:700; }
.share .row { grid-template-columns:minmax(0,1fr) 90px minmax(0,1fr); padding:16px 0; }
.share .row .mid { align-self:center; text-transform:uppercase; font-size:.65rem; letter-spacing:.08em; }
.cmp { background:var(--surface); border:1px solid var(--rule); border-radius:10px; }
.cmp-row { padding:18px 20px; grid-template-columns:minmax(150px,.7fr) minmax(0,1fr) minmax(0,1fr); }
.cmp-row:last-child { border-bottom:0; }
.cmp-head { background:#e6eef2; border-bottom:1px solid var(--rule-strong); font-weight:650; border-radius:9px 9px 0 0; }
.cmp-row > div { min-width:0; overflow-wrap:anywhere; }
.cmp .big { font-size:1.45rem; font-weight:650; }
.figures { gap:14px; }
.figure { background:var(--surface); border:1px solid var(--rule); border-radius:10px; padding:22px; }
.figure .num { font-weight:700; }
.notice { max-width:none; border-radius:0 8px 8px 0; font-size:.85rem; }
.card { border-radius:10px; padding:20px; }
.site-footer { background:#e8eff3; margin-top:56px; padding-block:30px; }
.footer-brand { color:var(--ink); font-weight:700; margin-bottom:10px; }
.site-footer p { font-size:.78rem; max-width:90ch; }
.skip-link { position:absolute; top:-100px; left:20px; background:var(--surface); padding:12px; z-index:10; }
.skip-link:focus { top:10px; }
@media(max-width:700px) {
 .wrap { padding-inline:18px; }
 .site-header .wrap { flex-wrap:wrap; gap:14px; padding-block:16px; }
 .site-header nav { gap:20px; }
 .home-intro { padding-top:0; }
 .launch-heading,.launch-footer { padding:20px; align-items:flex-start; flex-direction:column; }
 .scope-label { display:none; }
 .project-preview { padding:20px 16px; }
 .project-preview h3 { font-size:1.65rem; }
 .preview-cost { font-size:1.55rem; }
 .preview-cost .chip { display:table; margin-top:5px; }
 .preview-top .chip { font-size:.6rem; }
 .output-line { flex-direction:column; gap:4px; }
 .output-line strong { text-align:left; }
 .guide-grid { grid-template-columns:1fr; gap:18px; }
 .section-heading { align-items:flex-start; flex-direction:column; }
 .cmp-row { grid-template-columns:minmax(0,1fr) minmax(0,1fr); padding:14px; gap:12px; }
 .cmp-row .k { grid-column:1 / -1; }
 .share { padding:16px; }
 .share .row { grid-template-columns:minmax(0,1fr) 50px minmax(0,1fr); gap:8px; }
 .share .row .side { font-size:.95rem; }
 .share .vs .side { font-size:1.3rem; }
 .section-nav a { padding:8px; }
 .tree li { flex-wrap:wrap; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .cta { transition:none; } }


/* Both themes retain the same colours for countries and distinct evidence states. */
:root { color-scheme:light; --surface:#fff; }
:root[data-theme="dark"] {
 color-scheme:dark;
 --paper:#0e1922; --surface:#162631; --ink:#e3edf3;
 --muted:#adc0cc; --faint:#93a9b7; --rule:#2b404e; --rule-strong:#476270;
 --link:#78d6d0; --wash:#213541;
 --ok:#9cdbb8; --ok-wash:#193e31;
 --warn:#f4ca81; --warn-wash:#403421;
 --bad:#ffafa6; --bad-wash:#482c2d;
 --calc:#c4bcff; --calc-wash:#302e4e;
}
:root[data-theme="dark"] .brand-mark,
:root[data-theme="dark"] .launch-heading { background:#203c4b; }
:root[data-theme="dark"] .launch-footer { background:#183536; border-color:var(--rule); }
:root[data-theme="dark"] .cmp-head,
:root[data-theme="dark"] .site-footer { background:#1b2e3b; }
:root[data-theme="dark"] .cta-primary { background:#85d9d2; border-color:#85d9d2; color:#102d30; }
:root[data-theme="dark"] .cta-primary:hover { background:#a3e9e3; }
.site-header nav { align-items:center; flex-wrap:wrap; }
.theme-toggle { display:inline-flex; align-items:center; gap:7px; min-height:40px; padding:8px 12px; border:1px solid var(--rule-strong); border-radius:8px; background:var(--surface); color:var(--ink); font:600 .8rem var(--sans); cursor:pointer; white-space:nowrap; }
.theme-toggle[hidden] { display:none; }
.theme-toggle:hover { background:var(--wash); }
.theme-toggle[aria-pressed="true"] { background:var(--wash); border-color:var(--link); }
.theme-toggle:focus-visible { outline:3px solid var(--link); outline-offset:4px; }
.theme-icon { font-size:1.1rem; line-height:1; }

/* Consistent photo frames; the linked originals retain their full composition. */
.project-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin-block:24px; }
.project-photo { min-width:0; margin:0; }
.project-photo a { display:block; border-radius:10px; overflow:hidden; background:var(--wash); }
.project-photo img { display:block; width:100%; height:auto; aspect-ratio:16 / 9; object-fit:cover; object-position:center; }
.project-photo figcaption { display:flex; justify-content:space-between; gap:8px; color:var(--muted); font-size:.72rem; line-height:1.5; padding-top:8px; }
.project-preview > .project-gallery { margin-top:0; margin-bottom:22px; }
.comparison-photos { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.comparison-photos h3 { margin:0; font-size:1rem; }
.comparison-photos .project-gallery { margin-top:12px; margin-bottom:0; }
@media(max-width:700px) {
 .project-gallery { grid-template-columns:minmax(0,1fr); }
 .comparison-photos { gap:14px; }
}

.approx { color: var(--muted); font-size: .85rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.share .approx { font-size: .8rem; }