/* Shared styles for the site pages. Same paper, ink and road palette as the
   simulation editions, so moving between them doesn't feel like a new site. */
:root {
  color-scheme: light;
  --paper:#f2efe9; --card:#fbfaf6; --ink:#16150f; --ink-2:#565248; --ink-3:#8b8579;
  --rule:#ddd8cb; --grid:#e1ddd1;
  --asphalt:#4a4b4d; --asphalt-2:#5c5d60; --paint:#f2f0e6; --yellow:#e3ae1f;
  --shoulder:#6b6c6f;
  --veh:#cfcabc; --veh-edge:#2c2b26; --veh-turn:#e3ae1f; --veh-block:#d03b3b;
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100;
  --accent:#2a78d6; --accent-ink:#ffffff;
  --unsafe:#b3261e;
  --shadow:0 1px 2px rgba(22,21,15,.06), 0 8px 24px -18px rgba(22,21,15,.35);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper:#141517; --card:#191a1d; --ink:#f4f2ec; --ink-2:#b3aea3; --ink-3:#847f75;
    --rule:#2c2e32; --grid:#26282c;
    --asphalt:#2e3036; --asphalt-2:#3b3e45; --paint:#e2dfd4; --yellow:#e0aa1e;
    --shoulder:#44474e;
    --veh:#9ea4ac; --veh-edge:#0e0f10; --veh-turn:#e0aa1e; --veh-block:#d64b4b;
    --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500;
    --accent:#3987e5; --accent-ink:#ffffff;
    --unsafe:#ef9a9a;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -18px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper:#141517; --card:#191a1d; --ink:#f4f2ec; --ink-2:#b3aea3; --ink-3:#847f75;
  --rule:#2c2e32; --grid:#26282c;
  --asphalt:#2e3036; --asphalt-2:#3b3e45; --paint:#e2dfd4; --yellow:#e0aa1e;
  --shoulder:#44474e;
  --veh:#9ea4ac; --veh-edge:#0e0f10; --veh-turn:#e0aa1e; --veh-block:#d64b4b;
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500;
  --accent:#3987e5; --accent-ink:#ffffff;
  --unsafe:#ef9a9a;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -18px rgba(0,0,0,.9);
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; background:var(--paper); color:var(--ink);
  font-family:Overpass,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px; line-height:1.55;
}
a { color:var(--accent); text-underline-offset:2px; }
img, video { max-width:100%; display:block; }

.page { max-width:1040px; margin:0 auto; padding:0 16px 64px; }
.prose { max-width:680px; }

/* ---------- Type ---------- */
.eyebrow {
  font-family:"Overpass Mono",ui-monospace,monospace; font-size:12px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); margin:0 0 10px;
}
h1, h2, h3 { font-family:"Source Serif 4",Georgia,serif; font-weight:600; text-wrap:balance; }
h1 { font-size:clamp(30px,5.4vw,50px); line-height:1.08; letter-spacing:-.01em; margin:0 0 16px; }
h2 { font-size:clamp(24px,3.4vw,32px); line-height:1.15; margin:0 0 12px; }
h3 { font-size:20px; line-height:1.25; margin:0 0 8px; }
.lede {
  font-family:"Source Serif 4",Georgia,serif; font-size:clamp(18px,2.2vw,21px);
  line-height:1.5; color:var(--ink-2); margin:0 0 8px; max-width:640px;
}
p { margin:0 0 14px; }
.muted { color:var(--ink-3); }
.small { font-size:14px; }
b, strong { font-weight:700; }

/* ---------- Layout blocks ---------- */
.hero { padding:44px 0 28px; }
.section { padding:36px 0 8px; border-top:1px solid var(--rule); margin-top:28px; }
.section:first-of-type { border-top:0; margin-top:0; }
.card {
  background:var(--card); border:1px solid var(--rule); border-radius:10px;
  box-shadow:var(--shadow); padding:22px;
}
.grid-2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:16px; }
.grid-3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.stack > * + * { margin-top:16px; }

/* ---------- Stat tiles ---------- */
.tile { background:var(--card); border:1px solid var(--rule); border-radius:10px; padding:18px 18px 16px; }
.tile .big {
  font-family:"Source Serif 4",Georgia,serif; font-weight:600;
  font-size:clamp(30px,4vw,40px); line-height:1; margin:0 0 8px; letter-spacing:-.01em;
}
.tile .label { font-weight:700; margin:0 0 4px; }
.tile p { color:var(--ink-2); font-size:15px; margin:0; }
.tile a.more { display:inline-block; margin-top:10px; font-size:14px; font-weight:600; text-decoration:none; }

/* ---------- Actions ---------- */
.actions { display:grid; gap:14px; }
.action {
  display:grid; grid-template-columns:36px 1fr; gap:4px 14px; align-items:start;
  background:var(--card); border:1px solid var(--rule); border-radius:10px; padding:18px;
  box-shadow:var(--shadow);
}
.action .num {
  width:32px; height:32px; border-radius:50%; background:var(--ink); color:var(--card);
  display:grid; place-items:center; font-weight:800; font-size:15px;
}
.action h3 { margin:3px 0 4px; }
.action p { color:var(--ink-2); margin:0 0 12px; font-size:15px; }
.btnrow { display:flex; flex-wrap:wrap; gap:8px; }
.btn {
  display:inline-flex; align-items:center; gap:8px; font:inherit; font-weight:700; font-size:15px;
  padding:11px 18px; border-radius:8px; border:1px solid transparent; cursor:pointer;
  text-decoration:none; background:var(--accent); color:var(--accent-ink);
}
.btn:hover { filter:brightness(1.08); }
.btn.secondary { background:transparent; color:var(--ink); border-color:var(--ink-3); }
.btn[aria-disabled="true"] { background:var(--grid); color:var(--ink-3); cursor:default; filter:none; }
.letter {
  margin-top:12px; font-size:15px; color:var(--ink-2);
}
.letter summary { cursor:pointer; font-weight:600; color:var(--ink); }
.letter pre {
  white-space:pre-wrap; font-family:"Source Serif 4",Georgia,serif; font-size:16px; line-height:1.5;
  background:var(--paper); border:1px solid var(--rule); border-radius:8px; padding:14px 16px; margin:10px 0 0;
  color:var(--ink);
}
.status { font-size:14px; color:var(--ink-3); min-height:1.2em; margin:8px 0 0; }

/* ---------- Timeline ---------- */
.timeline { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6,1fr); gap:0; }
.timeline li { position:relative; padding:22px 10px 0 0; font-size:14px; color:var(--ink-2); }
.timeline li::before {
  content:""; position:absolute; top:6px; left:0; right:0; height:2px; background:var(--rule);
}
.timeline li::after {
  content:""; position:absolute; top:1px; left:0; width:12px; height:12px; border-radius:50%;
  background:var(--card); border:2px solid var(--ink-3);
}
.timeline li.done::after { background:var(--ink-3); }
.timeline li.next::after { background:var(--accent); border-color:var(--accent); }
.timeline b { display:block; color:var(--ink); font-size:14px; }
@media (max-width:720px) {
  .timeline { grid-template-columns:1fr; }
  .timeline li { padding:0 0 14px 26px; }
  .timeline li::before { top:0; bottom:0; left:5px; right:auto; width:2px; height:auto; }
  .timeline li::after { top:4px; }
}

/* ---------- Figures & diagrams ---------- */
figure { margin:0; }
.figure { background:var(--card); border:1px solid var(--rule); border-radius:10px; padding:18px 18px 14px; box-shadow:var(--shadow); }
.figure h3 { margin-bottom:4px; }
.figure .sub { color:var(--ink-2); font-size:15px; margin:0 0 12px; }
figcaption, .figure .note { font-size:13px; line-height:1.5; color:var(--ink-3); margin-top:10px; }
.figure svg { display:block; width:100%; height:auto; }
.panel-title {
  font-family:"Overpass Mono",ui-monospace,monospace; font-size:12px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-2); margin:14px 0 6px; font-weight:600;
}
.panel-title:first-of-type { margin-top:4px; }
.callouts { list-style:none; margin:8px 0 0; padding:0; display:grid; gap:6px; font-size:15px; color:var(--ink-2); }
.callouts li { display:grid; grid-template-columns:24px 1fr; gap:8px; align-items:start; }
.pin {
  width:22px; height:22px; border-radius:50%; background:var(--ink); color:var(--card);
  display:grid; place-items:center; font-size:12px; font-weight:800; line-height:1;
}
.diagram .road { fill:var(--asphalt); }
.diagram .shoulder { fill:var(--shoulder); }
.diagram .curb { fill:var(--paper); }
.diagram .lane { stroke:var(--paint); stroke-width:2; stroke-dasharray:14 12; fill:none; }
.diagram .edge { stroke:var(--paint); stroke-width:2; fill:none; }
.diagram .yellow { stroke:var(--yellow); stroke-width:2; fill:none; }
.diagram .yellow-dash { stroke:var(--yellow); stroke-width:2; stroke-dasharray:14 12; fill:none; }
.diagram .car { fill:var(--veh); stroke:var(--veh-edge); stroke-width:1.2; }
.diagram .car.turn { fill:var(--veh-turn); }
.diagram .car.block { fill:var(--veh-block); }
.diagram .path { stroke:var(--paint); stroke-width:2; fill:none; stroke-dasharray:4 5; }
.diagram .path.warn { stroke:var(--veh-block); stroke-dasharray:none; }
.diagram .arrowhead { fill:var(--paint); }
.diagram .arrowhead.warn { fill:var(--veh-block); }
.diagram .pin-bg { fill:var(--card); stroke:var(--ink); stroke-width:1.5; }
.diagram .pin-tx { fill:var(--ink); font:800 13px Overpass,system-ui,sans-serif; }
.diagram .flow { stroke:var(--paint); stroke-width:2; opacity:.55; }

/* Horizontal bars (corridor chart) */
.hbars { list-style:none; margin:0; padding:0; position:relative; }
.hbars li { display:grid; grid-template-columns:minmax(120px,38%) 1fr; gap:10px; align-items:center; padding:3px 0; font-size:13.5px; }
.hbars .name { color:var(--ink-2); line-height:1.25; }
.hbars .track { position:relative; height:18px; }
.hbars .bar {
  position:absolute; left:0; top:5px; height:8px; border-radius:0 4px 4px 0; background:var(--ink-3);
}
.hbars li.hl .bar { background:var(--ink); }
.hbars li.hl .name { color:var(--ink); font-weight:700; }
.hbars .val {
  position:absolute; top:0; font-family:"Overpass Mono",ui-monospace,monospace; font-size:12px; color:var(--ink-2);
  padding:0 3px; margin-left:3px; line-height:18px; z-index:1; background:var(--card);
}
.hbars-frame { position:relative; }
.hbars-lines { position:absolute; inset:0 0 0 calc(38% + 10px); pointer-events:none; }
@media (max-width:520px) { .hbars li { grid-template-columns:120px 1fr; } .hbars-lines { left:130px; } }
.hbars-lines .ceil { position:absolute; top:-6px; bottom:0; width:0; border-left:1.5px solid var(--ink); }
.hbars-lines .ceil.soft { border-left-color:var(--ink-3); }
.hbars-lines .ceil.soft span { transform:translateX(calc(-100% - 3px)); }
.hbars-lines .ceil span {
  position:absolute; top:-20px; transform:translateX(3px); white-space:nowrap;
  font-size:11.5px; font-family:"Overpass Mono",ui-monospace,monospace; color:var(--ink-2);
  background:var(--card); padding:0 4px;
}
.hbars-axis { display:grid; grid-template-columns:minmax(120px,38%) 1fr; gap:10px; margin-top:4px; }
@media (max-width:520px) { .hbars-axis { grid-template-columns:120px 1fr; } }
.hbars-axis .ticks { position:relative; height:16px; border-top:1px solid var(--ink-3); }
.hbars-axis .ticks span {
  position:absolute; top:2px; transform:translateX(-50%);
  font-family:"Overpass Mono",ui-monospace,monospace; font-size:11px; color:var(--ink-3);
}

/* Paired bars (school day vs no-school day) */
.pairbars { list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.pairbars li { display:grid; grid-template-columns:minmax(130px,34%) 1fr; gap:4px 12px; align-items:center; }
.pairbars .name { grid-row:span 2; font-size:14px; line-height:1.3; color:var(--ink); font-weight:600; }
.pairbars .name small { display:block; font-weight:400; color:var(--ink-3); font-family:"Overpass Mono",ui-monospace,monospace; font-size:12px; margin-top:2px; }
.pairbars .row { display:flex; align-items:center; gap:6px; height:14px; }
.pairbars .bar { height:10px; border-radius:0 4px 4px 0; min-width:2px; }
.pairbars .bar.a { background:var(--s1); }
.pairbars .bar.b { background:var(--ink-3); }
.pairbars .row span { font-family:"Overpass Mono",ui-monospace,monospace; font-size:12px; color:var(--ink-2); white-space:nowrap; }
@media (max-width:520px) { .pairbars li { grid-template-columns:1fr; } .pairbars .name { grid-row:auto; } }
.keyrow { display:flex; flex-wrap:wrap; gap:6px 18px; list-style:none; margin:0 0 14px; padding:0; font-size:14px; color:var(--ink-2); }
.keyrow li { display:flex; align-items:center; gap:7px; }
.keyrow i { width:14px; height:10px; border-radius:0 3px 3px 0; display:inline-block; }
.headline-stat { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 14px; margin:4px 0 16px; }
.headline-stat .big { font-family:"Source Serif 4",Georgia,serif; font-weight:600; font-size:clamp(34px,5vw,46px); line-height:1; }
.headline-stat span { color:var(--ink-2); font-size:15px; }

/* Compare tiles (4 lanes vs 3 lanes) */
.compare { display:grid; grid-template-columns:1fr 1fr; gap:0; border:1px solid var(--rule); border-radius:10px; overflow:hidden; background:var(--card); }
.compare > div { padding:14px 16px; border-top:1px solid var(--rule); }
.compare > div:nth-child(odd) { border-right:1px solid var(--rule); }
.compare .hd { border-top:0; font-weight:700; font-size:14px; display:flex; align-items:center; gap:8px; }
.compare .hd i { width:14px; height:3px; border-radius:2px; display:inline-block; }
.compare .metric { grid-column:1 / -1; border-right:0 !important; background:var(--paper); font-size:13px; color:var(--ink-2); padding:8px 16px; }
.compare .v { font-family:"Source Serif 4",Georgia,serif; font-size:26px; font-weight:600; line-height:1.1; }
.compare .v small { font-family:Overpass,sans-serif; font-size:13px; font-weight:400; color:var(--ink-3); margin-left:4px; }

/* Subsection heading inside a section, e.g. local vs national data */
.subhead {
  font-family:"Overpass Mono",ui-monospace,monospace; font-size:13px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2);
  margin:36px 0 12px; padding-top:14px; border-top:2px solid var(--ink);
}

/* ---------- Grouped vertical columns (national 1969 vs 2009) ---------- */
.vcols { display:flex; align-items:flex-end; gap:clamp(8px,3vw,32px); height:230px; padding:22px 0 0;
  border-bottom:1px solid var(--ink-3); margin-top:8px; }
.vgroup { flex:1; display:flex; flex-direction:column; height:100%; position:relative; }
.vbars { flex:1; display:flex; align-items:flex-end; justify-content:center; gap:2px; }
.vbar { position:relative; width:min(42%,56px); border-radius:4px 4px 0 0; min-height:2px; }
.vbar.a { background:var(--s1); }
.vbar.b { background:var(--ink-3); }
.vbar span { position:absolute; bottom:100%; left:50%; transform:translateX(-50%); padding-bottom:3px;
  font:600 12px "Overpass Mono",ui-monospace,monospace; color:var(--ink-2); white-space:nowrap; }
.vlabel { position:absolute; top:100%; left:0; right:0; text-align:center; font-size:13px; font-weight:600;
  color:var(--ink); padding-top:6px; line-height:1.2; }
.vcols + figcaption { margin-top:44px; }
@media (max-width:480px) { .vlabel { font-size:11.5px; } .vbar span { font-size:10.5px; } }

/* ---------- Side-by-side video ---------- */
.sbs-labels { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:6px 0 6px;
  font:600 12px "Overpass Mono",ui-monospace,monospace; color:var(--ink-2); text-transform:uppercase; letter-spacing:.04em; }
.sbs-labels span:last-child { text-align:right; }
.sbs-video { width:100%; aspect-ratio:32/9; display:block; background:#000; border-radius:6px; }

/* ---------- Study cards (business evidence) ---------- */
.study-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:18px; }
@media (max-width:640px) { .study-grid { grid-template-columns:1fr; } }
.study { background:var(--card); border:1px solid var(--rule); border-radius:10px; padding:18px; }
.study-kicker { font-family:"Overpass Mono",ui-monospace,monospace; font-size:12px; color:var(--ink-3); margin:0 0 6px; }
.study h3 { font-size:18px; margin:0 0 8px; }
.study p { font-size:15px; color:var(--ink-2); margin:0 0 10px; }
.study .study-caveat { font-size:13px; color:var(--ink-3); border-top:1px solid var(--rule); padding-top:8px; margin:0; }
.study .study-caveat::before { content:"Caveat: "; font-weight:700; }

.study-media { margin:-18px -18px 14px; }
.study-media img, .study-media svg { display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover;
  border-radius:10px 10px 0 0; }
.study-media.graphic svg { background:var(--paper); padding:14px 16px 6px; box-sizing:border-box; }
.study-media figcaption { font-size:11.5px; color:var(--ink-3); padding:6px 18px 0; margin:0; }
.study-media figcaption a { color:var(--ink-3); }
.study-media .g-label { font:600 13px Overpass,system-ui,sans-serif; fill:var(--ink-2); }
.study-media .g-value { font:700 13px "Overpass Mono",ui-monospace,monospace; }
.study-media .g-note { font:500 12px Overpass,system-ui,sans-serif; fill:var(--ink-3); }
.study-media .sq.better { fill:var(--s1); }
.study-media .sq.same { fill:var(--ink-3); }
.study-media .sq.mixed { fill:var(--card); stroke:var(--s1); stroke-width:2.5; }

/* ---------- The big-picture review block ---------- */
.review { background:var(--card); border:1px solid var(--rule); border-left:4px solid var(--s1); border-radius:10px;
  padding:20px 22px; margin-top:18px; box-shadow:var(--shadow); }
.review h3 { font-size:24px; margin:0 0 8px; }
.review > p { font-size:15.5px; color:var(--ink-2); max-width:760px; }
.review-label { font-weight:700; color:var(--ink) !important; margin:16px 0 6px !important; font-size:14px !important; }
.outcome-bar { display:flex; gap:2px; height:38px; font-size:13px; }
.outcome-bar { position:relative; }
.outcome-bar > span { display:flex; align-items:center; padding:0 10px; white-space:nowrap; cursor:help; outline-offset:2px; }
.outcome-bar .bar-tip { display:none; position:absolute; top:calc(100% + 8px); left:0; z-index:5; width:min(360px, 88vw);
  background:var(--card); color:var(--ink); border:1px solid var(--rule); border-radius:8px; box-shadow:var(--shadow);
  padding:10px 12px; font-size:13.5px; white-space:normal; cursor:auto; }
.outcome-bar .neu .bar-tip { left:auto; right:0; }
.outcome-bar .bar-tip b { font-family:inherit; font-size:13.5px; margin:0; display:block; }
.outcome-bar .bar-tip ul { margin:6px 0 0; padding-left:18px; }
.outcome-bar .bar-tip li { margin:2px 0; }
.outcome-bar > span:hover .bar-tip, .outcome-bar > span:focus .bar-tip, .outcome-bar > span:focus-within .bar-tip { display:block; }
.outcome-bar span:first-child { border-radius:6px 0 0 6px; }
.outcome-bar span:last-child { border-radius:0 6px 6px 0; }
.outcome-bar b { font-family:"Source Serif 4",Georgia,serif; font-size:18px; margin-right:6px; }
.outcome-bar .pos { background:var(--s1); color:#fff; }
.outcome-bar .neu { background:var(--grid); color:var(--ink); }
.outcome-bar .neg { background:var(--unsafe); color:#fff; }
:root[data-theme="dark"] .outcome-bar .neg { color:#16150f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .outcome-bar .neg { color:#16150f; } }
.review-facts { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:18px 0 14px; }
@media (max-width:820px) { .review-facts { grid-template-columns:repeat(2,1fr); } }
.review-facts div { border-top:2px solid var(--rule); padding-top:8px; }
.review-facts .big { font-family:"Source Serif 4",Georgia,serif; font-weight:600; font-size:26px; line-height:1.1; margin:0 0 4px; }
.review-facts p { font-size:14px; color:var(--ink-2); margin:0; }
.review-conclusion { font-family:"Source Serif 4",Georgia,serif; font-size:17px !important; color:var(--ink) !important; margin:12px 0 0 !important; }
@media (max-width:480px) { .outcome-bar { height:auto; flex-wrap:wrap; } .outcome-bar span { padding:8px 10px; } }

.inline-figure { margin:10px 0 6px; }
.figure > img { display:block; width:100%; height:auto; border-radius:6px; }
.inline-figure img { width:100%; height:auto; border-radius:6px; border:1px solid var(--rule); }
.inline-figure figcaption { font-size:13px; color:var(--ink-3); margin-top:6px; }
/* The prose column is narrow; let this wide aerial use the full page width. */
.prose li .inline-figure { width:min(100vw - 72px, 968px); max-width:none; }  /* page width minus gutters and the list indent */

/* ---------- Crash-type diagram (Safety page) ---------- */
.ct-tabs { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 16px; }
.ct-tabs button { font:inherit; font-size:14px; font-weight:600; padding:8px 14px; border-radius:999px; cursor:pointer;
  border:1px solid var(--rule); background:var(--paper); color:var(--ink-2); }
.ct-tabs button[aria-selected="true"] { background:var(--ink); color:var(--card); border-color:var(--ink); }
.ct-panel h3 { font-size:22px; margin:0 0 6px; }
.ct-pair { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:8px; }
@media (max-width:760px) { .ct-pair { grid-template-columns:1fr; gap:18px; } }
.ct-pair svg { display:block; width:100%; height:auto; border-radius:6px; }
.ct-key { display:flex; flex-wrap:wrap; gap:6px 18px; list-style:none; margin:18px 0 0; padding:12px 0 0; border-top:1px solid var(--rule);
  font-size:13.5px; color:var(--ink-2); }
.ct-key li { display:flex; align-items:center; gap:7px; }
.ct-key i { width:18px; height:10px; border-radius:3px; display:inline-block; border:1px solid var(--veh-edge); }
.ct-key .k-turn { background:var(--veh-turn); }
.ct-key .k-block { background:var(--veh-block); }
.ct-key .k-ped { background:var(--accent); border-radius:50%; width:12px; height:12px; }
.diagram .burst { fill:var(--veh-block); stroke:#fff; stroke-width:1.5; }
.diagram .skid { stroke:#111; stroke-width:3; opacity:.55; stroke-linecap:round; }
.diagram .cone { fill:#fff; opacity:.22; }
.diagram .shadow { fill:#000; opacity:.45; }
.ct-key .k-cone { background:rgba(255,255,255,.55); border-color:var(--ink-3); clip-path:polygon(0 50%,100% 0,100% 100%); border:0; background:var(--ink-3); }
.ct-key .k-shadow { background:#3a3a3a; }
.diagram .zebra { fill:var(--paint); opacity:.9; }
.diagram .truck-body { fill:#f4f2ec; stroke:#b3261e; stroke-width:2; }
.diagram .truck-cab { fill:#b3261e; }
.diagram .truck-light { fill:#3987e5; }
.diagram .truck-path { fill:none; stroke:#ff6b5e; stroke-width:3; stroke-dasharray:7 5; stroke-linecap:round; }
.diagram .truck-path-head { fill:#ff6b5e; }
.diagram .unsure { font:800 16px Overpass,system-ui,sans-serif; fill:#fff; }
.ct-key .k-truck { background:#f4f2ec; border:2px solid #b3261e; width:22px; }
.diagram .ped circle, .diagram .ped rect { fill:var(--accent); stroke:#fff; stroke-width:1.5; }

/* ---------- Emergency animation ---------- */
.em-row + .em-row { margin-top:18px; }
.diagram .em-trail { opacity:.8; }
.diagram .bikelane { fill:#2f7d4a; opacity:.75; }
.diagram .bike-label { font:600 9px Overpass,system-ui,sans-serif; fill:#e8f5ec; letter-spacing:.04em; }
.diagram .bike-callout rect { fill:#fff; stroke:#2f7d4a; stroke-width:1.5; }
.diagram .bike-callout text { font:700 10px Overpass,system-ui,sans-serif; fill:#1e5a33; }
.diagram .bike-callout { transition:opacity .3s; }
.em-row svg { display:block; width:100%; height:auto; border-radius:6px; }
.em-cap { font-size:15px; color:var(--ink); margin:8px 0 0; min-height:1.5em; }
.em-controls { display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-top:16px; padding-top:14px; border-top:1px solid var(--rule); }

/* ---------- Built for walking: school cards ---------- */
.school-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width:820px) { .school-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px) { .school-grid { grid-template-columns:1fr; } }
.school-card { margin:0; background:var(--card); border:1px solid var(--rule); border-radius:10px; overflow:hidden; }
.school-card img { width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; display:block; }
.photo-slot { aspect-ratio:16/10; display:grid; place-items:center; background:var(--grid); color:var(--ink-3); font-size:13px; }
.school-card figcaption { padding:12px 14px 14px; margin:0; font-size:14px; color:var(--ink-2); line-height:1.45; }
.school-card figcaption b { display:block; color:var(--ink); font-size:15px; }
.school-card .yr { display:block; font-family:"Overpass Mono",ui-monospace,monospace; font-size:12px; color:var(--ink-3); margin:2px 0 6px; }
.school-card .credit { display:block; font-size:11.5px; color:var(--ink-3); margin-top:6px; }

/* ---------- Survey columns (mode by school + unsafe) ---------- */
.chart-plot .seglabel { font:700 11px "Overpass Mono",ui-monospace,monospace; }
.chart-plot .unsafe-bar { fill:var(--unsafe); }
.chart-plot .unsafe-label { font:700 11.5px "Overpass Mono",ui-monospace,monospace; fill:var(--ink); }
.chart-plot .grouplabel { font:600 12.5px Overpass,system-ui,sans-serif; fill:var(--ink-2); }
.chart-plot .grouplabel.total { fill:var(--ink); font-weight:800; }
.chart-plot .grouplabel.small { font-size:11px; }
.keyrow i.unsafe-key { background:var(--unsafe); width:8px; }
.hbars.simple li { grid-template-columns:minmax(150px,40%) 1fr; }

/* ---------- Photo pair ---------- */
.photos { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:22px; }
.photos figure { margin:0; }
.photos img { width:100%; height:auto; aspect-ratio:4/3; object-fit:cover; border-radius:8px; }
.photos figcaption { font-size:13px; color:var(--ink-2); margin-top:6px; line-height:1.35; }
.photos.three { grid-template-columns:repeat(3,1fr); }
.photos figcaption b { color:var(--ink); }
@media (max-width:560px) { .photos { gap:8px; } .photos figcaption { font-size:12px; } }
.benefits { margin-top:22px; }

/* ---------- Eras (history) ---------- */
.eras { list-style:none; margin:14px 0 0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:0; }
.eras li { position:relative; padding:26px 14px 0 0; }
.eras li::before { content:""; position:absolute; top:7px; left:0; right:0; height:2px; background:var(--rule); }
.eras li::after {
  content:""; position:absolute; top:2px; left:0; width:12px; height:12px; border-radius:50%;
  background:var(--ink-3);
}
.eras li.now::after { background:var(--accent); }
.eras .when { display:block; font-family:"Overpass Mono",ui-monospace,monospace; font-size:12px; letter-spacing:.04em; color:var(--ink-3); }
.eras b { display:block; font-size:16px; margin:2px 0 4px; }
.eras p { font-size:14.5px; color:var(--ink-2); margin:0; }
.eras li.now b { color:var(--accent); }
@media (max-width:820px) {
  .eras { grid-template-columns:1fr; }
  .eras li { padding:0 0 18px 26px; }
  .eras li::before { top:0; bottom:0; left:5px; right:auto; width:2px; height:auto; }
  .eras li::after { top:4px; }
}

/* ---------- Embedded map ---------- */
.mapframe { position:relative; aspect-ratio:4/3; border-radius:8px; overflow:hidden; background:var(--grid); }
.mapframe iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
@media (max-width:600px) { .mapframe { aspect-ratio:3/4; } }

/* ---------- Video ---------- */
.video { position:relative; aspect-ratio:16/9; border-radius:8px; overflow:hidden; background:#000; }
.video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.chapters { list-style:none; padding:0; margin:10px 0 0; display:flex; flex-wrap:wrap; gap:6px; }
.chapters a {
  display:inline-block; font-size:13.5px; text-decoration:none; color:var(--ink);
  border:1px solid var(--rule); border-radius:999px; padding:4px 10px; background:var(--card);
}
.chapters a b { font-family:"Overpass Mono",ui-monospace,monospace; font-weight:600; color:var(--ink-3); margin-right:4px; }

/* ---------- FAQ ---------- */
.faq-group { margin:34px 0 0; }
.faq-group > h2 { font-size:22px; margin-bottom:6px; }
details.q { border-bottom:1px solid var(--rule); }
details.q > summary {
  list-style:none; cursor:pointer; padding:14px 30px 14px 0; position:relative;
  font-weight:700; font-size:17px; line-height:1.35;
}
details.q > summary::-webkit-details-marker { display:none; }
details.q > summary::after {
  content:"+"; position:absolute; right:4px; top:12px; font-weight:400; font-size:22px; color:var(--ink-3);
}
details.q[open] > summary::after { content:"−"; }
details.q .a { padding:0 0 16px; color:var(--ink-2); max-width:680px; }
details.q .a p:last-child { margin-bottom:0; }
.more { font-weight:700; text-decoration:none; }
.more::after { content:" →"; }

/* ---------- Citations ---------- */
.cite {
  font-family:"Overpass Mono",ui-monospace,monospace; font-size:.7em; font-weight:600;
  vertical-align:super; line-height:0; text-decoration:none; color:var(--accent);
  padding:0 1px; cursor:pointer; background:none; border:0;
}
.cite-card {
  position:absolute; z-index:60; max-width:min(360px, calc(100vw - 32px));
  background:var(--card); color:var(--ink); border:1px solid var(--rule); border-radius:10px;
  box-shadow:var(--shadow), 0 12px 32px -12px rgba(0,0,0,.35); padding:12px 14px; font-size:14px; line-height:1.45;
}
.cite-card .src-title { font-weight:700; }
.cite-card .src-note { color:var(--ink-2); margin-top:4px; }
.cite-card a { display:inline-block; margin-top:6px; font-weight:600; }
details.sources { margin-top:48px; border-top:1px solid var(--rule); padding-top:14px; font-size:14px; color:var(--ink-2); }
details.sources summary { cursor:pointer; font-weight:700; color:var(--ink); }
details.sources ol { padding-left:22px; margin:10px 0 0; }
details.sources li { margin:0 0 8px; }
details.sources li:target { background:color-mix(in srgb, var(--accent) 12%, transparent); border-radius:4px; }

/* ---------- Placeholders (things still to come) ---------- */
.todo {
  border:1.5px dashed var(--ink-3); border-radius:10px; padding:16px 18px; color:var(--ink-2);
  background:transparent; font-size:15px;
}
.todo b { color:var(--ink); }

/* ---------- Charts ---------- */
.chart-plot { position:relative; }
.chart-plot svg { overflow:visible; }
.chart-plot .axis text { font-family:"Overpass Mono",ui-monospace,monospace; font-size:11px; fill:var(--ink-3); }
.chart-plot .grid line { stroke:var(--grid); stroke-width:1; }
.chart-plot .base { stroke:var(--ink-3); stroke-width:1; }
.chart-plot .endlabel { font-size:12.5px; fill:var(--ink); font-weight:600; }
.chart-plot .endlabel tspan.v { font-family:"Overpass Mono",ui-monospace,monospace; font-weight:400; fill:var(--ink-2); }
.chart-legend { display:flex; flex-wrap:wrap; gap:6px 18px; margin:0 0 6px; padding:0; list-style:none; font-size:14px; color:var(--ink-2); }
.chart-legend li { display:flex; align-items:center; gap:7px; }
.chart-legend i { width:16px; height:3px; border-radius:2px; display:inline-block; }
.chart-tabs { display:flex; gap:4px; margin:0 0 4px; justify-content:flex-end; }
.chart-tabs button { font:inherit; font-size:13px; color:var(--ink-2); background:none; border:1px solid var(--rule); border-radius:6px; padding:4px 10px; cursor:pointer; }
.chart-tabs button[aria-pressed="true"] { color:var(--ink); border-color:var(--ink-3); }
.chart-tip {
  position:absolute; pointer-events:none; background:var(--card); border:1px solid var(--rule);
  border-radius:8px; box-shadow:var(--shadow); padding:8px 10px; font-size:13px; line-height:1.35;
  color:var(--ink); white-space:nowrap; opacity:0; transition:opacity .08s;
}
.chart-tip b { font-family:"Overpass Mono",ui-monospace,monospace; font-weight:600; }
.chart-tip .muted { font-size:12px; }
.table-scroll { overflow-x:auto; }
table.data { width:100%; border-collapse:collapse; font-size:14px; }
table.data th, table.data td { text-align:right; padding:6px 8px; border-bottom:1px solid var(--rule); white-space:nowrap; }
table.data th:first-child, table.data td:first-child { text-align:left; }
table.data th { color:var(--ink-3); font-weight:600; font-size:12px; }
table.data td { font-family:"Overpass Mono",ui-monospace,monospace; }
[hidden] { display:none !important; }

/* ---------- Footer ---------- */
.footer { border-top:1px solid var(--rule); margin-top:56px; padding:24px 0 0; font-size:14px; color:var(--ink-3); }
.footer p { margin:0 0 6px; max-width:680px; }
.footer a { color:var(--ink-2); }
.nextpage {
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:44px;
}
.nextpage a {
  flex:1 1 240px; text-decoration:none; color:var(--ink); background:var(--card);
  border:1px solid var(--rule); border-radius:10px; padding:14px 16px;
}
.nextpage a span { display:block; font-size:12px; color:var(--ink-3); text-transform:uppercase; letter-spacing:.06em; font-family:"Overpass Mono",monospace; }
.nextpage a b { font-size:17px; }
.nextpage a.fwd { text-align:right; }
.nextpage.one { justify-content:flex-end; }
.nextpage.one a { flex:0 1 320px; }

/* ---------- Traffic: scroll-driven replay (site/sim-steps.js) ---------- */
.ss { position:relative; margin-top:18px; min-width:0; }
.ss-panel { padding:12px 14px 10px; min-width:0; box-shadow:var(--shadow); }
.ss-head { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:6px 22px; margin-bottom:6px; }
.ss-vol { display:flex; align-items:baseline; gap:10px; }
.ss-vol b { font-family:"Source Serif 4",Georgia,serif; font-size:40px; font-weight:600; line-height:1; color:var(--ink); font-variant-numeric:lining-nums tabular-nums; }
.ss-vol span { font-size:14px; color:var(--ink-2); max-width:260px; line-height:1.3; }
.ss-ctl { display:flex; align-items:center; gap:10px; }
.ss-clock { font-family:"Overpass Mono",monospace; font-size:13px; color:var(--ink-3); font-variant-numeric:tabular-nums; }
.ss-next { font:inherit; font-size:16px; font-weight:700; padding:14px 22px; border:1px solid var(--accent); border-radius:6px; background:var(--accent); color:var(--accent-ink); cursor:pointer; }
.ss-next:disabled { background:var(--card); color:var(--ink-3); border-color:var(--rule); cursor:default; font-weight:400; font-variant-numeric:tabular-nums; }
.ss-play { font:inherit; font-size:13px; padding:4px 12px; border:1px solid var(--rule); border-radius:6px; background:var(--card); color:var(--ink); cursor:pointer; }
.ss-road + .ss-road { margin-top:4px; }
.ss-label { display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; margin:0; font-size:13.5px; font-weight:700; color:var(--ink); }
.ss-label > i { width:10px; height:10px; border-radius:2px; display:inline-block; }
.ss-stats { margin-left:auto; display:flex; gap:14px; font-weight:400; color:var(--ink-2); font-size:13px; }
.ss-stats b { color:var(--ink); font-variant-numeric:tabular-nums; }
.ss-held b { color:var(--veh-block); }
.ss-road canvas { display:block; width:100%; max-width:100%; height:auto; }
.ss-key { display:flex; flex-wrap:wrap; gap:4px 14px; font-size:12.5px; color:var(--ink-2); margin-top:4px; }
.ss-key i { width:14px; height:9px; border-radius:2px; display:inline-block; margin-right:5px; border:1px solid var(--veh-edge); vertical-align:-1px; }
.ss-steps { min-width:0; }
.ss-step { display:none; background:var(--card); border:1px solid var(--rule); border-radius:10px; padding:16px 18px; box-shadow:var(--shadow); }
.ss-step.on { display:block; }
.ss-step .qc { max-width:540px; }
.ss-step h3 { margin:0 0 8px; }
.ss-step p:last-child { margin-bottom:0; }
@media (max-width:640px) {
  .ss-panel { padding:10px 10px 8px; }
  .ss-vol b { font-size:30px; }
  .ss-vol span { font-size:12.5px; }
  .ss-stats { margin-left:0; width:100%; gap:10px; font-size:12px; }
  .ss-key { font-size:11.5px; }
  .ss-key .muted { display:none; }
}
.ss-scale { position:relative; height:56px; min-width:0; }
.ss-scale .cx-track { position:absolute; left:0; right:0; top:26px; height:2px; background:var(--rule); }
.ss-scale .cx-band { position:absolute; top:6px; bottom:14px; border-radius:3px; background:color-mix(in srgb, var(--s2) 13%, transparent);
  border-left:1px solid color-mix(in srgb, var(--s2) 45%, transparent); border-right:1px solid color-mix(in srgb, var(--s2) 45%, transparent); transition:left .2s, width .2s; }
.ss-scale .cx-dot { position:absolute; top:21px; width:12px; height:12px; margin-left:-6px; border-radius:50%; background:var(--card); border:2.5px solid var(--s1); }
.ss-scale .cx-dot:hover, .ss-scale .cx-dot:focus-visible { background:var(--s1); z-index:3; outline:none; box-shadow:0 0 0 4px color-mix(in srgb, var(--s1) 22%, transparent); }
.ss-scale .cx-tip { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); white-space:nowrap; background:var(--ink); color:var(--paper);
  font-size:12px; padding:5px 9px; border-radius:4px; opacity:0; pointer-events:none; transition:opacity .12s; z-index:4; }
.ss-scale .cx-dot:hover .cx-tip, .ss-scale .cx-dot:focus-visible .cx-tip { opacity:1; }
.ss-scale .cx-tick { position:absolute; top:37px; transform:translateX(-50%); font-family:"Overpass Mono",monospace; font-size:10.5px; color:var(--ink-3); white-space:nowrap; }
.ss-scale .cx-tick i { position:absolute; left:50%; top:-9px; width:1px; height:6px; background:var(--rule); }
.ss-road { position:relative; }
.ss-q b { color:var(--s2); }
.ss-note { position:absolute; z-index:6; max-width:300px; background:var(--ink); color:var(--paper); font-size:13.5px; line-height:1.4;
  padding:9px 12px; border-radius:8px; box-shadow:0 6px 20px -8px rgba(0,0,0,.5); pointer-events:none; }
.ss-note::after { content:""; position:absolute; left:calc(var(--ax, 20px) - 7px); border:7px solid transparent; }
.ss-note[data-side="above"]::after { top:100%; border-top-color:var(--ink); }
.ss-note[data-side="below"]::after { bottom:100%; border-bottom-color:var(--ink); }
.ss-key .k-swerve { border:2px dashed var(--veh-block); background:transparent; }
.qc { margin:12px 0; }
.qc-title { font-size:13.5px; font-weight:700; color:var(--ink); margin:0 0 4px; }
.qc-wrap { position:relative; }
.qc svg { display:block; width:100%; height:auto; }
.qc-ax { font-family:Overpass,sans-serif; font-size:11px; fill:var(--ink-3); }
.qc-lab { font-family:Overpass,sans-serif; font-size:11.5px; font-weight:700; fill:var(--ink-2); }
.qc-tip { position:absolute; top:6px; background:var(--ink); color:var(--paper); font-size:12px; line-height:1.45; padding:6px 9px; border-radius:5px; pointer-events:none; white-space:nowrap; }
.qc-key { display:flex; flex-wrap:wrap; gap:4px 14px; font-size:12px; color:var(--ink-2); margin:4px 0 0; }
.qc-key i { width:14px; height:3px; display:inline-block; margin-right:5px; vertical-align:3px; }
@media (max-width:760px) {
  .ss-head { grid-template-columns:1fr auto; }
  .ss-scale { grid-column:1 / -1; grid-row:2; height:50px; }
  .ss-note { max-width:230px; font-size:12.5px; padding:7px 10px; }
}
.ss-vol { border-radius:8px; margin:-4px -8px; padding:4px 8px; }
.ss-vol.flash { animation:ss-flash 1.1s ease-out; }
.ss-vol.flash b { animation:ss-pop .7s ease-out; }
@keyframes ss-flash { 0% { background:color-mix(in srgb, var(--s2) 30%, transparent); } 100% { background:transparent; } }
@keyframes ss-pop { 0% { transform:scale(1); } 30% { transform:scale(1.12); color:var(--s2); } 100% { transform:scale(1); } }
.ss-vol b { display:inline-block; transform-origin:left bottom; }
@media (prefers-reduced-motion: reduce) { .ss-vol.flash, .ss-vol.flash b { animation:none; } }

/* ---------- Examples: the double-wide feature card ---------- */
.feature { display:grid; grid-template-columns:1.1fr 1fr; gap:26px; align-items:start; background:var(--card); border:1px solid var(--rule); border-radius:12px; padding:22px; box-shadow:var(--shadow); }
.feature h2 { margin:2px 0 10px; }
.feature-stats { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:16px 0; }
.feature-stats > div { border-top:3px solid var(--s1); padding-top:8px; }
.feature-stats > div + div { border-top-color:var(--s2); }
.feature-stats b { display:block; font-family:"Source Serif 4",Georgia,serif; font-size:32px; font-weight:600; line-height:1.1; font-variant-numeric:lining-nums; }
.feature-stats span { font-size:13.5px; color:var(--ink-2); }
@media (max-width:760px) { .feature { grid-template-columns:1fr; padding:16px; } }

/* Google Street View embeds (Google's own embed; its imagery can't be copied as a picture) */
.sv { position:relative; aspect-ratio:16/10; border-radius:8px; overflow:hidden; background:var(--grid); }
.sv iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.study-media .sv { border-radius:10px 10px 0 0; }
.study-media .video { border-radius:10px 10px 0 0; }
.vthumb { position:relative; display:block; aspect-ratio:16/9; overflow:hidden; background:#000; border-radius:10px 10px 0 0; }
.vthumb img { width:100%; height:100%; object-fit:cover; display:block; }
.vplay { position:absolute; left:50%; top:50%; width:68px; height:48px; margin:-24px 0 0 -34px; border-radius:12px; background:rgba(204,0,0,.92); transition:transform .15s; }
.vplay::after { content:""; position:absolute; left:27px; top:14px; border-style:solid; border-width:10px 0 10px 17px; border-color:transparent transparent transparent #fff; }
.vthumb:hover .vplay, .vthumb:focus-visible .vplay { transform:scale(1.08); }

/* ---------- Examples: Virginia's two studies side by side ---------- */
.va-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:12px; }
.va-box { border:1px solid var(--rule); border-radius:10px; padding:16px; background:var(--paper); }
.va-cover { float:right; width:92px; margin:0 0 8px 14px; border:1px solid var(--rule); box-shadow:var(--shadow); transition:transform .15s; }
.va-cover:hover, .va-cover:focus-visible { transform:translateY(-2px); }
.va-cover img { display:block; width:100%; height:auto; }
.va-pie { clear:both; display:flex; align-items:center; gap:16px; margin:12px 0; }
.va-donut { width:132px; height:132px; flex:none; }
.va-donut-big { font:600 30px "Source Serif 4",Georgia,serif; fill:var(--ink); }
.va-donut-sm { font:600 12px Overpass,sans-serif; fill:var(--ink-3); }
.va-pie-q { font-size:13.5px; font-weight:700; color:var(--ink); margin:0 0 6px; }
.va-legend { list-style:none; margin:0; padding:0; font-size:13.5px; color:var(--ink-2); }
.va-legend li { margin:3px 0; }
.va-legend i { display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:7px; vertical-align:-1px; }
.va-legend b { color:var(--ink); margin-right:3px; }
.va-facts { margin:6px 0 10px; padding-left:18px; font-size:14px; color:var(--ink-2); }
.va-facts li { margin:4px 0; }
.va-facts b { color:var(--ink); }
.va-stats > div { border-top:1px solid var(--rule); padding:10px 0 4px; }
.va-stats .big { font:600 30px "Source Serif 4",Georgia,serif; color:var(--ink); margin:0; line-height:1.1; font-variant-numeric:lining-nums; }
.va-stats p:not(.big) { margin:4px 0 0; font-size:14px; color:var(--ink-2); }
@media (max-width:760px) { .va-grid { grid-template-columns:1fr; } }
.va-cover-type { display:flex; flex-direction:column; aspect-ratio:360/466; padding:8px 7px; background:#fff; color:#1a1a1a; text-decoration:none; font-family:Georgia,serif; box-sizing:border-box; }
.va-cover-type .vct-j { font:700 6.5px/1.2 Overpass,sans-serif; letter-spacing:.06em; text-transform:uppercase; color:#fff; background:#8a1c2b; margin:-8px -7px 8px; padding:6px 7px; }
.va-cover-type .vct-t { font-size:9.5px; line-height:1.25; font-weight:700; }
.va-cover-type .vct-a { font-size:7.5px; line-height:1.3; color:#444; margin-top:6px; }
.va-cover-type .vct-y { margin-top:auto; font:700 8px Overpass,sans-serif; color:#8a1c2b; }

/* ---------- Home: who we are ---------- */
.who-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:12px; margin-top:10px; }
.who-grid .tile { padding-top:0; overflow:hidden; }
.who-grid .tile img { display:block; width:calc(100% + 36px); max-width:none; margin:0 -18px 12px; aspect-ratio:4/3; object-fit:cover; height:auto; }
.who-grid .tile .label { font-size:15px; margin-bottom:6px; }
.who-grid .tile p:last-child { font-size:14px; color:var(--ink-2); margin:0; }

/* Traffic replay: the card and its Next button, directly under the panel */
.ss-below { display:grid; grid-template-columns:1fr auto; gap:14px; align-items:start; margin-top:14px; }
.ss-below .ss-next { margin-top:2px; white-space:nowrap; min-width:190px; align-self:stretch; }
@media (max-width:640px) {
  .ss-below { grid-template-columns:1fr; }
  .ss-below .ss-next { width:100%; padding:11px; font-size:15px; }
}

/* Traffic replay: the three intro overlays */
.ss-tour { position:absolute; inset:0; z-index:20; }
.ss-tour-ring { position:absolute; border-radius:10px; box-shadow:0 0 0 3px var(--accent), 0 0 0 9999px rgba(12,12,12,.55); transition:top .2s, left .2s, width .2s, height .2s; }
.ss-tour-bubble { position:absolute; background:var(--ink); color:var(--paper); border-radius:10px; padding:14px 16px; box-shadow:0 10px 30px -10px rgba(0,0,0,.6); }
.ss-tour-text { margin:0 0 10px; font-size:15px; line-height:1.45; }
.ss-tour-row { display:flex; align-items:center; gap:10px; }
.ss-tour-count { font-family:"Overpass Mono",monospace; font-size:12px; opacity:.7; margin-right:auto; }
.ss-tour-skip { font:inherit; font-size:13.5px; background:none; border:0; color:var(--paper); opacity:.75; cursor:pointer; text-decoration:underline; padding:4px; }
.ss-tour-next { font:inherit; font-size:14px; font-weight:700; padding:8px 16px; border:0; border-radius:6px; background:var(--accent); color:var(--accent-ink); cursor:pointer; }
.ss-tour-again { font:inherit; font-size:12.5px; background:none; border:0; padding:0; color:var(--accent); text-decoration:underline; cursor:pointer; }
@media (max-width:640px) { .ss-tour-text { font-size:14px; } }
.sv-pair { display:grid; grid-template-columns:1fr 1fr; gap:2px; }
.sv-pair .sv { aspect-ratio:4/3; border-radius:0; }
.study-media .sv-pair .sv:first-child { border-radius:10px 0 0 0; }
.study-media .sv-pair .sv:last-child { border-radius:0 10px 0 0; }

/* ---------- Home: the Complete Streets illustration ---------- */
.cs-figure { padding:14px; }
.cs-svg { display:block; width:100%; height:auto; border-radius:8px; }
.cs-svg .sky-top { stop-color:#cfe2f0; }
.cs-svg .sky-bot { stop-color:#eef4f7; }
.cs-svg .grass { fill:#c9d4bd; }
.cs-svg .walk { fill:#ded8c9; }
.cs-svg .walk.build { fill:#d6cfbd; }
.cs-svg .road { fill:var(--asphalt); }
.cs-svg .bikelane { fill:#2f7d4a; }
.cs-svg .edge-line { fill:var(--paint); }
.cs-svg .yellow-line { fill:var(--yellow); }
.cs-svg .crosswalk { fill:#55565a; }
.cs-svg .zebra-bar { fill:var(--paint); }
.cs-svg .car { fill:var(--veh); stroke:var(--veh-edge); stroke-width:1; }
.cs-svg .car.turn { fill:var(--veh-turn); }
.cs-svg .car-roof { fill:#9d9a91; }
.cs-svg .car-glass { fill:rgba(20,26,32,.55); }
.cs-svg .tail { fill:#d03b3b; }
.cs-svg .wheel-r { fill:#26262a; }
.cs-svg .frame-r { stroke:#1d5fa8; stroke-width:2.4; }
.cs-svg .kid-a { fill:#e8543f; }
.cs-svg .kid-b { fill:#1d5fa8; }
.cs-svg .kid-c { fill:#eda100; }
.cs-svg .arm { stroke:#2f3b46; stroke-width:1.8; fill:none; stroke-linecap:round; }
.cs-svg .helmet { fill:#f2f0e6; stroke:#2f3b46; stroke-width:1.2; }
.cs-svg .ped-torso { fill:#2f3b46; } .cs-svg .ped-head { fill:#2f3b46; }
.cs-svg .ped-legs { stroke:#2f3b46; stroke-width:2; fill:none; }
.cs-svg .ped2-torso { fill:#6b4b8a; } .cs-svg .ped2-head { fill:#6b4b8a; }
.cs-svg .ped2-legs { stroke:#6b4b8a; stroke-width:2; fill:none; }
.cs-svg .guard-torso { fill:#e0a200; } .cs-svg .guard-head { fill:#e0a200; }
.cs-svg .guard-legs { stroke:#e0a200; stroke-width:2; fill:none; }
.cs-svg .trunk { fill:#7a5c3e; } .cs-svg .leaf { fill:#6f9a5f; }
.cs-svg .bldg { fill:#cfc6b4; stroke:#b3a893; }
.cs-svg .bldg.school { fill:#c9b7a2; }
.cs-svg .win { fill:#8fa4b3; }
.cs-svg .cs-bldg-label { font:700 11px "Overpass Mono",monospace; letter-spacing:.06em; fill:var(--ink-3); }
.cs-svg .cs-label { font:600 13px Overpass,sans-serif; fill:var(--ink); paint-order:stroke; stroke:var(--card); stroke-width:3.5; stroke-linejoin:round; }
.cs-svg .cs-leader { stroke:var(--ink-3); stroke-width:1.3; stroke-dasharray:3 3; fill:none; }
.cs-svg .stop-pole { fill:#6b6c6f; } .cs-svg .stop-flag { fill:#1d5fa8; }
.cs-svg .stop-mark { font:700 10px Overpass,sans-serif; fill:#fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cs-svg .grass { fill:#2b3228; } :root:not([data-theme="light"]) .cs-svg .walk { fill:#484843; } :root:not([data-theme="light"]) .cs-svg .walk.build { fill:#3f3f3a; } :root:not([data-theme="light"]) .cs-svg .sky-top { stop-color:#243040; } :root:not([data-theme="light"]) .cs-svg .sky-bot { stop-color:#1a1c20; } :root:not([data-theme="light"]) .cs-svg .bldg { fill:#3a3a36; stroke:#2c2c29; } }
:root[data-theme="dark"] .cs-svg .grass { fill:#2b3228; }
:root[data-theme="dark"] .cs-svg .walk { fill:#484843; }
:root[data-theme="dark"] .cs-svg .sky-top { stop-color:#243040; }
:root[data-theme="dark"] .cs-svg .sky-bot { stop-color:#1a1c20; }
:root[data-theme="dark"] .cs-svg .walk { fill:#484843; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cs-svg .walk { fill:#484843; } }

/* The standalone email page's letter */
.letter-body { white-space:pre-wrap; font-family:Overpass,system-ui,sans-serif; font-size:15px; line-height:1.6;
  color:var(--ink-2); background:var(--card); border:1px solid var(--rule); border-radius:10px; padding:16px 18px; margin:0; }

/* ---------- Pile of documents (NYSDOT's work to date), stacked like photographs ---------- */
.pile { display:flex; flex-wrap:wrap; align-items:flex-start; justify-content:center; gap:0; margin:24px 0 0; padding:10px 0; }
.snap { margin:0 -5px 14px; transform:rotate(var(--r,0deg)); transition:transform .18s ease, box-shadow .18s ease; }
.snap a { display:block; background:#fdfcf9; padding:9px 9px 0; border:1px solid var(--rule); border-radius:3px;
  box-shadow:0 1px 2px rgba(22,21,15,.10), 0 14px 26px -18px rgba(22,21,15,.6); text-decoration:none; }
.snap img { display:block; width:100%; height:auto; background:#fff; }
.snap figcaption { font-size:12px; line-height:1.35; color:var(--ink-2); padding:8px 12px 10px 2px; }
.snap.tall { width:214px; }
.snap.wide { width:294px; }
.snap:hover, .snap:focus-within { transform:rotate(0deg) translateY(-4px); z-index:2; position:relative; }
.snap:hover a, .snap:focus-within a { box-shadow:0 2px 4px rgba(22,21,15,.14), 0 22px 36px -20px rgba(22,21,15,.75); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .snap a { background:#211f1c; }
}
:root[data-theme="dark"] .snap a { background:#211f1c; }
@media (max-width:560px) {
  .pile { gap:2px; }
  .snap { margin:0 -3px 12px; --r:0deg; }
  .snap.tall { width:150px; }
  .snap.wide { width:210px; }
}
@media (prefers-reduced-motion: reduce) { .snap { transition:none; } }

/* ---------- A row of report covers ---------- */
.doc-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin:16px 0 6px; align-items:start; }
.doc-row a { display:block; text-decoration:none; transition:transform .15s; }
.doc-row a:hover, .doc-row a:focus-visible { transform:translateY(-3px); }
.doc-row img { display:block; width:100%; height:auto; background:#fff; padding:5px;
  border:1px solid var(--rule); border-radius:6px; box-shadow:var(--shadow); box-sizing:border-box; }
.doc-row span { display:block; font-size:12px; line-height:1.35; color:var(--ink-2); margin-top:7px; }

/* ---------- Before / after pairs (the worries page) ---------- */
.ba { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:16px 0 18px; align-items:stretch; }
.ba-side { border:1px solid var(--rule); border-radius:10px; padding:16px 18px; background:var(--card); box-shadow:var(--shadow); }
.ba-before { border-left:4px solid var(--ink-3); }
.ba-after { border-left:4px solid var(--accent); }
.ba-tag { font:700 11.5px Overpass,system-ui,sans-serif; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 8px; }
.ba-after .ba-tag { color:var(--accent); }
.ba blockquote { margin:0; font:400 17px/1.45 "Source Serif 4",Georgia,serif; color:var(--ink); }
.ba-after blockquote { font-weight:600; }
.ba-who { font-size:13px; line-height:1.4; color:var(--ink-2); margin:10px 0 0; }
.ba-note { margin-top:-4px; }
.ba-note.fair { color:var(--ink-2); border-left:3px solid var(--rule); padding-left:14px; }
@media (max-width:640px) { .ba { grid-template-columns:1fr; gap:10px; } .ba blockquote { font-size:16px; } }


/* ---------- Crash types: a pie and its legend ---------- */
:root { --pie-a:#1f5fae; --pie-b:#2a78d6; --pie-c:#7fb0e8;
  --pie-1:#a9a296; --pie-2:#b8b2a7; --pie-3:#c7c1b8; --pie-4:#d6d1ca; --pie-5:#9c9488; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --pie-a:#2f6fc4; --pie-b:#3987e5; --pie-c:#86b6ec;
    --pie-1:#6f6960; --pie-2:#615c54; --pie-3:#534f48; --pie-4:#45413c; --pie-5:#7d766c; }
}
:root[data-theme="dark"] { --pie-a:#2f6fc4; --pie-b:#3987e5; --pie-c:#86b6ec;
  --pie-1:#6f6960; --pie-2:#615c54; --pie-3:#534f48; --pie-4:#45413c; --pie-5:#7d766c; }
.pie-wrap { display:flex; flex-wrap:wrap; align-items:center; gap:10px 30px; margin-top:14px; }
.pie-wrap .pie { width:264px; height:264px; flex:none; }
.pie-pct { font:700 14px Overpass,system-ui,sans-serif; fill:#fff; text-anchor:middle; }
.pie-legend { list-style:none; margin:0; padding:0; flex:1 1 260px; display:grid; gap:7px; }
.pie-legend li { display:grid; grid-template-columns:14px 1fr auto auto; align-items:center; gap:10px;
  font-size:14px; color:var(--ink-2); }
.pie-legend .pl-sw { width:14px; height:14px; border-radius:3px; }
.pie-legend .pl-v { font:600 14px "Overpass Mono",ui-monospace,monospace; }
.pie-legend .pl-p { font-size:13px; color:var(--ink-3); min-width:44px; text-align:right; }
.pie-legend li.on { color:var(--ink); font-weight:600; }
.pie-legend li.on .pl-p { color:var(--ink-2); }
@media (max-width:560px) {
  .pie-wrap .pie { width:230px; height:230px; margin:0 auto; }
  .pie-legend { flex:1 1 100%; }
}


/* ---------- Marking up a screenshot ---------- */
.markup { position:relative; display:block; }
.markup img { display:block; width:100%; height:auto; }
.mk-box { position:absolute; border:3px solid var(--unsafe); border-radius:5px; box-shadow:0 0 0 3px rgba(255,255,255,.55); }
.mk-tag { position:absolute; transform:translateY(2px); background:var(--unsafe); color:#fff; border-radius:4px;
  padding:3px 8px; font:700 12px Overpass,system-ui,sans-serif; letter-spacing:.02em; white-space:nowrap; }
@media (max-width:560px) { .mk-tag { font-size:10px; padding:2px 6px; } }