/* Crossings — only what this analysis adds on top of the shared base.css
   (tokens, reset, nav, hero, section, #map, .grid/.card shell, footer). */

:root{
  /* length ramp — one hue, monotone lightness (validated light-end 2.08:1 on --paper) */
  --r1:#ee9752; --r2:#e17439; --r3:#cf5528; --r4:#ac4020; --r5:#832f18;
}

#map{height:560px}

/* legend */
.legend{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:16px;
  font-size:.82rem;color:var(--ink2)}
.ramp{display:flex;align-items:center;gap:0}
.ramp i{width:34px;height:12px;display:block}
.ramp .lab{font-family:var(--mono);font-size:.72rem;margin-left:8px;color:var(--ink2)}

/* a card is an intersection; clicking its crossing on the map flashes it */
.card{scroll-margin-top:20px}
.card.flash{animation:cardflash 1.8s ease-out}
@keyframes cardflash{
  0%,12%{box-shadow:0 0 0 3px var(--accent),var(--shadow)}
  100%{box-shadow:0 0 0 0 rgba(228,87,46,0),var(--shadow)}
}
.card .links{display:flex;gap:16px;margin-top:11px;padding-top:10px;border-top:1px solid #f0ece4}
.card .links a{color:var(--ink2);font-size:.75rem;font-weight:600;text-decoration:none;
  letter-spacing:.01em}
.card .links a:hover{color:var(--accent-d);text-decoration:underline}

/* the crossings of one intersection — ranked, no names, length by colour + bar */
table.legs{width:100%;border-collapse:collapse;font-size:.86rem}
table.legs td{padding:5px 10px 5px 0;border-bottom:1px solid #f0ece4;vertical-align:middle}
table.legs tr:last-child td{border-bottom:0}
table.legs .ft{font-family:var(--mono);font-weight:700;color:var(--ink);white-space:nowrap;width:3.4em}
table.legs .bar{width:100%}
table.legs .bar span{display:block;height:9px;border-radius:5px;min-width:7px}

/* methodology */
.method{color:var(--ink2)}
.method h2{color:var(--ink)}
.method p{max-width:72ch;margin:0 0 14px}