:root{color-scheme:dark;--bg:#0d0e10;--panel:#141518;--line:#2a2a2d;--ink:#f4f0ea;--muted:#b2afb1;--brand-orange:#ff5a36;--route-coral:#ff8556;--route-focus:#ffbd9f}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 system-ui,sans-serif}a{color:inherit}button{font:inherit;cursor:pointer;color:inherit;background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:.55rem .8rem}a:focus-visible,button:focus-visible{outline:2px solid var(--brand-orange);outline-offset:4px}button[aria-pressed=true]{border-color:var(--brand-orange);color:var(--brand-orange)}button:hover,a:hover{color:var(--brand-orange)}header,main,footer{width:min(1120px,calc(100% - 112px));margin:auto}header,footer{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 0}header img{display:block;object-fit:contain}nav{display:flex;align-items:center;gap:22px}nav a{text-decoration:none;font-size:.9rem}.lang{display:flex;gap:4px}.lang button{font-size:.72rem;padding:.26rem .44rem}.skip{position:fixed;top:-100px;left:8px;z-index:5;background:#161616;padding:12px}.skip:focus{top:8px}main{outline:none}section{margin:0 0 clamp(3rem,7vw,6rem)}.hero{padding-top:clamp(2.4rem,6vw,5.5rem);margin-bottom:2.4rem}.eyebrow,.label{text-transform:uppercase;letter-spacing:.13em;color:var(--muted);font-size:.73rem;font-weight:650}.eyebrow{color:var(--brand-orange)}h1,h2,p{margin:0}h1{font-size:clamp(2.65rem,7vw,6rem);letter-spacing:-.068em;line-height:.99;max-width:11ch;margin:.45em 0 .31em;font-weight:820}h2{font-size:clamp(1.55rem,3vw,2.5rem);line-height:1.12;letter-spacing:-.04em;margin-bottom:.6em}p{color:var(--muted);max-width:63ch}.lead{font-size:clamp(1.02rem,2vw,1.35rem)}.hero p+p{margin-top:.85rem}.rule{padding-top:1.3rem}.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,155px),1fr));gap:1rem 1.6rem;margin:0 0 1.3rem}.metric strong{display:block;font-size:clamp(1.28rem,3vw,2.05rem);font-weight:780;line-height:1.15;letter-spacing:-.045em;font-variant-numeric:tabular-nums}.metric .label{display:block;margin-top:.35rem}.map{margin:0;background:radial-gradient(ellipse at center,#1b1b1e 0,#101114 78%);border:1px solid var(--line);position:relative}.map svg{display:block;width:100%;height:clamp(310px,62vw,620px)}.map figcaption{padding:.6rem 1rem;display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;justify-content:space-between;color:var(--muted);font-size:.75rem}.key::before{content:"";display:inline-block;width:17px;height:2px;background:var(--route-coral);vertical-align:middle;margin-right:.45rem}.boundary{fill:#1a1b1f;stroke:#626168;stroke-width:1;vector-effect:non-scaling-stroke}.base{stroke:#414147;fill:none;stroke-width:.65;vector-effect:non-scaling-stroke}.route{fill:none;stroke:var(--route-coral);stroke-width:1.35;opacity:.88;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 0 2px #ff5a3650)}.route.dim{opacity:.11}.route.hot{stroke:var(--route-focus);stroke-width:2.7;opacity:1}.route.hide{visibility:hidden}.map a:hover .boundary,.map a:focus .boundary{stroke:var(--brand-orange);stroke-width:2}.map a:focus{outline:none}.fresh{display:grid;grid-template-columns:2fr 1fr 1fr;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--line)}.fresh strong{display:block}.actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:.9rem 0}.actions output{font-size:.86rem;color:var(--brand-orange)}.runs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:8px}.runs button,.runs .run-info{text-align:left;padding:.8rem;border:1px solid var(--line);background:var(--panel);border-radius:4px}.runs small{display:block;color:var(--muted);margin-top:.2rem}.textlink{color:var(--brand-orange);text-underline-offset:.28em}.pager{display:flex;justify-content:space-between;gap:1rem}.pager a:last-child{margin-left:auto}.site-credit{justify-content:center;text-align:center;margin-top:48px;font-size:13px}.site-credit a{color:var(--ink);font-weight:700;text-decoration:none}.site-credit a:hover{color:var(--brand-orange)}.district-title h1{max-width:17ch;overflow-wrap:anywhere}.split{display:grid;grid-template-columns:1fr 1fr;gap:2rem}.muted{color:var(--muted);font-size:.85rem}.error{padding:3rem 0}
@media(max-width:960px){header,main,footer{width:calc(100% - 48px)}}
@media(max-width:550px){header,main,footer{width:calc(100% - 36px)}nav{gap:9px}nav a{font-size:.75rem}.fresh{grid-template-columns:1fr 1fr}.fresh>div:first-child{grid-column:1/-1}.split{grid-template-columns:1fr;gap:1.8rem}.map figcaption{padding:.55rem .7rem}.map svg{height:340px}.metrics{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:no-preference){.route.draw{animation:trace .58s linear both}@keyframes trace{from{stroke-dasharray:1;stroke-dashoffset:1}to{stroke-dasharray:1;stroke-dashoffset:0}}}
h1{letter-spacing:-.055em}
@media(max-width:380px){header img{width:75px}nav{gap:7px}}
.map .hit{fill:transparent;cursor:pointer}
.map a.is-peek .hit,.map a:focus-visible .hit{fill:#ff5a3620;stroke:var(--brand-orange);stroke-width:2}
.map-tooltip{position:absolute;left:.75rem;top:.75rem;max-width:calc(100% - 1.5rem);background:#141518f5;border:1px solid var(--line);box-shadow:0 6px 22px #0008;padding:.55rem .8rem;pointer-events:none;line-height:1.35}
.map-tooltip strong,.map-tooltip span{display:block}
.map-tooltip span{white-space:pre-line;font-size:.8rem;color:var(--muted)}
.map-tooltip.is-pinned{pointer-events:auto}
.map-tooltip a:not([hidden]){display:inline-block;margin-top:.4rem;color:var(--brand-orange);font-size:.85rem}
.home-hero,.district-title{padding-top:clamp(1.1rem,3vw,2.1rem);margin-bottom:1.1rem}
.home-hero h1,.district-title h1{max-width:none;font-size:clamp(2rem,5vw,4.35rem);margin:.2em 0 0}
.home-map .map{background:radial-gradient(ellipse at 50% 53%,#1a1a1e 0,#101114 72%)}
.home-map .map svg{height:calc(clamp(305px,60svh,670px) + 31px)}
@media(max-width:550px){.home-hero,.district-title{margin-bottom:.85rem}.home-map .map svg{height:calc(clamp(280px,53svh,490px) + 31px)}}
.home-map figcaption{position:absolute;top:100%;right:0;max-width:100%;justify-content:flex-end;text-align:right;padding:.3rem 0 0;font-size:.7rem}
.home-map{margin-bottom:2rem;padding-bottom:2rem}
.home-map .base{opacity:.8}
.home-map .route{stroke-width:1.5;filter:drop-shadow(0 0 3px #ff5a3670)}
@media(prefers-reduced-motion:no-preference){.map-reveal .route{animation:city-reveal .85s ease-out both}@keyframes city-reveal{from{opacity:0}to{opacity:.88}}}
@media(max-width:550px){.home-map{padding-bottom:2.6rem}}
.home-subtitle{font-size:clamp(.95rem,1.65vw,1.15rem)}
.home-article{max-width:68ch;margin:0 auto 2rem;padding-top:0}
.home-article p{max-width:none;line-height:1.65}
.home-article p+p{margin-top:1em}
.home-article p a{text-underline-offset:.23em}
.home-coverage{margin-top:.3rem;font-size:.85rem;color:var(--muted);font-variant-numeric:tabular-nums}
.home-context{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.35rem 1.5rem;margin-top:.55rem}
.site-credit .credit-heart{color:var(--brand-orange)}

.city-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem;margin:0;padding:0 .75rem .75rem;font-variant-numeric:tabular-nums;pointer-events:none}
.city-stats>div{display:flex;flex-direction:column}
.city-stats dt{color:var(--muted);font-size:.72rem;line-height:1.25}
.city-stats dd{order:-1;margin:0 0 .2rem;font-size:clamp(1.15rem,2.4vw,1.75rem);font-weight:750;line-height:1.1}
.city-stats dd span{font-size:.65em;font-weight:500}
.city-progress-block{text-align:right}
.city-stats .city-progress{color:var(--brand-orange)}
@media(min-width:900px){
.city-stats{position:absolute;inset:clamp(1.15rem,3vw,2rem) clamp(1.15rem,3vw,2rem) auto;grid-template-columns:max-content 1fr max-content;row-gap:1rem;padding:0}
.city-stats>div:nth-child(1){grid-area:1/1}
.city-stats>div:nth-child(2){grid-area:2/1}
.city-stats>.city-progress-block{grid-area:1/3}
}
.home-map .boundary-done{fill:#ff5a3619;stroke:var(--brand-orange);stroke-width:1.5}

.district-map,.district-title ~ section{margin-bottom:clamp(1.5rem,3.5vw,2.5rem)}
.district-map .map{border:0;background:none}
.district-map .map svg{border:1px solid var(--line);background:radial-gradient(ellipse at 50% 53%,#1a1a1e 0,#101114 72%)}
.district-map figcaption{justify-content:flex-end;text-align:right;padding:.3rem 0 0;font-size:.7rem}

.runs button,.runs .run-info{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.run-copy{min-width:0}
.runs small span{white-space:nowrap}
.run-preview{width:clamp(3rem,7vw,4.5rem);height:auto;flex:none}
.run-preview path{fill:none;stroke:#79767a;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}

.district-stats{display:grid}
.district-stats .metrics{margin-bottom:0}
@media(hover:hover){.runs button:not([aria-pressed=true]):hover .run-preview path{stroke:var(--route-coral)}}
.runs button:not([aria-pressed=true]):focus-visible .run-preview path{stroke:var(--route-coral)}
.runs button[aria-pressed=true] .run-preview path{stroke:#ffa17c}
.district-stats{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.75rem;align-items:start}
.district-stats .metrics{grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem .7rem}
.stat-details{display:grid;gap:.45rem;margin:1rem 0 0;font-size:.85rem}
.stat-details>div{display:flex;flex-wrap:wrap;justify-content:space-between;column-gap:1rem}
.stat-details dt{color:var(--muted)}
.stat-details dd{margin:0;font-variant-numeric:tabular-nums}
.district-neighborhoods{grid-column:1/-1;max-width:none;text-align:left;font-size:.82rem;line-height:1.45;color:var(--muted)}
@media(max-width:650px){.district-stats{grid-template-columns:minmax(0,1fr)}}

.stat-card{min-width:0;padding:clamp(.9rem,2vw,1.4rem);border:1px solid var(--line);border-radius:4px;background:var(--panel)}
.stat-card h2{font-size:clamp(1.15rem,2.3vw,1.55rem);margin-bottom:1rem}
.stat-card .metric strong{font-size:clamp(1.15rem,2.5vw,1.65rem)}
.stat-card .metric .label{font-size:.68rem;letter-spacing:.08em}
/* Keep the map at full width; give the information beneath it its own measure. */
.district-map .actions,.district-map .runs,.district-stats{max-width:60rem;margin-inline:auto}
.district-map .runs :is(button,.run-info){padding:.65rem .7rem;border-color:color-mix(in srgb,var(--line) 65%,var(--panel))}
.district-map .runs button[aria-pressed=true]{border-color:var(--brand-orange)}

.stat-card h2{color:var(--brand-orange)}

.stat-card .stat-feature .metric strong{font-size:clamp(1.65rem,3vw,2.15rem)}
.stat-card .district-neighborhoods{margin-top:.85rem}

.replay-hud:not([hidden]){display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.15rem .45rem;position:absolute;top:.75rem;left:.75rem;padding:.35rem .55rem;background:#101114e8;border-radius:4px;font-size:.8rem;font-variant-numeric:tabular-nums;pointer-events:none}
.replay-hud i{width:.45rem;height:.45rem;border-radius:50%;background:var(--replay-color)}
.replay-hud time{color:var(--muted)}
.replay-hud strong{grid-column:2;color:#ddd8d2;font-size:clamp(1rem,2vw,1.3rem);font-weight:550;line-height:1.2}
.replay-hud time{grid-area:1/1}
.replay-hud i{grid-area:1/2;justify-self:end}
.replay-hud strong{grid-area:2/1/3/3}

.district-stats--single{grid-template-columns:minmax(0,1fr);max-width:36rem}

.pager a{text-decoration:none}