/* ---- the city map (docs/design-research/city-map-2026-10-07/SPEC.md) ----
   Our OpenStreetMap render (tools/maps/basemap.html), with the bubbles over
   it. The only motion is the pink bubbles' breathe; the hero's bulbs are the
   page's hero, this glows. */
.citymap-sec{padding:56px 0 8px}
.citymap{max-width:600px; margin:0}
.map-kicker{margin:0 0 4px; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tube-p)}
.citymap h2{margin:0 0 14px; font-family:var(--body); font-weight:500; font-size:22px;
  letter-spacing:-.01em; line-height:1.3}
.map-card{border-radius:18px; padding:1px;
  background:linear-gradient(160deg, rgba(224,85,155,.75), rgba(145,132,217,.35) 45%, rgba(232,162,74,.55));
  box-shadow:0 0 28px rgba(224,85,155,.22), 0 18px 48px rgba(7,5,13,.8)}
.map-inner{border-radius:17px; overflow:hidden; background:var(--night)}
.map-frame{position:relative; aspect-ratio:600/640; background:var(--surface)}
.map-frame img{display:block; width:100%; height:100%}
.map-frame svg{position:absolute; inset:0; width:100%; height:100%}
.map-frame svg.phone{display:none}
@media (max-width:480px){
  .map-frame{aspect-ratio:360/400}
  .map-frame svg.wide{display:none}
  .map-frame svg.phone{display:block}
}
.citymap .disc{fill:var(--tb); stroke:var(--accent-400); stroke-width:1.5}
.citymap .ct{font-family:var(--display); fill:#f3efff; stroke:#f3efff; stroke-width:.45px;
  paint-order:stroke; text-anchor:middle; dominant-baseline:central; letter-spacing:-.02em;
  filter:drop-shadow(0 0 1px rgba(145,132,217,.85))}
.citymap .bulbs circle{fill:var(--accent-400); opacity:.85}
.citymap .mk.is-lit .disc{fill:var(--tp); stroke:var(--tube-p);
  filter:drop-shadow(0 0 4px rgba(224,85,155,.75))}
.citymap .mk.is-lit .ct{fill:#ffe3f1; stroke:#ffe3f1; filter:drop-shadow(0 0 1.2px var(--gel-a))}
.citymap .mk.is-lit .bulbs circle{fill:var(--tube-p); filter:drop-shadow(0 0 2px var(--gel-a))}
@media (prefers-reduced-motion:no-preference){
  .citymap .mk.is-lit .disc{animation:map-breathe 3.2s ease-in-out infinite}
  @keyframes map-breathe{0%,100%{filter:drop-shadow(0 0 3px rgba(224,85,155,.55))}
    50%{filter:drop-shadow(0 0 7px rgba(224,85,155,.95))}}
}
.map-band{padding:10px 14px; background:#120f1e; border-top:1px solid var(--hairline);
  font-size:12px; color:#d7d1ea; display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:8px 14px; line-height:1.5}
.map-key{display:inline-flex; align-items:center; gap:8px}
.map-key i{width:12px; height:12px; border-radius:50%; flex:none;
  background:radial-gradient(circle, #120f1e 50%, rgba(224,85,155,.6));
  border:1.5px solid var(--tube-p); box-shadow:0 0 4px rgba(224,85,155,.75)}
.map-band a{color:var(--muted); text-decoration:none; border-bottom:1px solid var(--hairline);
  display:inline-block; padding:12px 0; margin:-12px 0}
.map-band a:hover{color:var(--text)}
.map-cta{display:inline-flex; align-items:center; min-height:44px; margin-top:18px;
  padding:10px 20px; border-radius:var(--r-pill); border:1.5px solid var(--tube-p);
  background:rgba(224,85,155,.14); color:#ffd0e7; text-decoration:none; font-size:15.5px;
  box-shadow:0 0 6px rgba(224,85,155,.4)}
.map-cta:hover{background:rgba(224,85,155,.28)}

/* ---- neighborhood pages + the guides' neighborhood directory ---------- */
.hoods{padding:60px 0 8px}
.hoods > .wrap > h2{font-size:clamp(30px,4.4vw,44px); line-height:1.1; text-shadow:var(--neon-b)}
.hoods .lede{color:var(--muted); max-width:62ch; margin:14px 0 30px}
.hood-grid{columns:3 280px; column-gap:22px}
.hood{break-inside:avoid; margin:0 0 22px; padding:16px 18px 10px; background:var(--surface);
  border:1px solid var(--divider); border-radius:var(--r-lg)}
.hood h3{font-family:var(--body); font-weight:500; font-size:17.5px; line-height:1.3;
  display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin:0 0 6px}
.hood h3 a{color:var(--text); text-decoration:underline; text-underline-offset:4px;
  text-decoration-thickness:1px; text-decoration-color:var(--accent-600);
  display:inline-block; padding:10px 0; margin:-10px 0}
.hood h3 a:hover{color:var(--accent-400)}
.hood h3 .n{flex:none; font-size:12.5px; font-weight:400; color:var(--ghost); letter-spacing:.04em}
.hood h3 .soft{font-weight:400; color:var(--muted)}
.hood ul{list-style:none; margin:0; padding:0}
.hood li{display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:7px 0; border-top:1px solid var(--hairline); font-size:15.5px; line-height:1.4}
.hood li a, .hood li .nm{color:var(--text); text-decoration:none; min-height:30px;
  display:inline-flex; align-items:center}
.hood li a:hover{color:var(--accent-400); text-decoration:underline; text-underline-offset:4px}
.hood li .nt{flex:none; font-size:13px; color:var(--ghost); text-align:right}
.hood .more-link{display:inline-flex; align-items:center; min-height:44px; font-size:14px;
  color:var(--accent-400); text-decoration:none}
.hood .more-link:hover{text-decoration:underline}
/* The directory filtered to one night (#night-<day>, site-dead-night-pills.md). */
.hoods .night-a{display:block; scroll-margin-top:88px}
.hoods .night-only{display:flex; flex-wrap:wrap; align-items:center; gap:4px 14px;
  margin:-12px 0 24px; font-size:16.5px; color:var(--text)}
.hoods .night-only[hidden]{display:none}
.hoods .night-only a{display:inline-flex; align-items:center; min-height:44px;
  color:var(--accent-400); text-decoration:underline; text-underline-offset:4px}
.hoods.one-night .hood-grid.folds .hood.solo{display:block}
.hoods.one-night .hood-grid.folds .hood.one-each{display:none}
.hoods [hidden]{display:none !important}
.hood-sub{font-size:clamp(22px,3vw,28px); line-height:1.2; margin:16px 0 18px;
  text-shadow:var(--neon-b)}
.hood.one-each{display:none}
.hood.one-each li{align-items:flex-start}
.hood.one-each .who{display:flex; flex-direction:column; min-width:0}
.hood.one-each .pl{font-size:13px; color:var(--ghost)}
/* Phones: the one-bar groups fold into one card per part (review, 2026-10-07). */
@media (max-width:600px){
  .hood-grid.folds .hood.solo{display:none}
  .hood-grid.folds .hood.one-each{display:block}
}

.week{list-style:none; margin:0; padding:0; max-width:var(--prose)}
.week li{display:grid; grid-template-columns:7.5em minmax(0,1fr); gap:6px 18px;
  padding:13px 0; border-top:1px solid var(--hairline)}
.week li:last-child{border-bottom:1px solid var(--hairline)}
.week .dn{font-weight:500}
.week .dn a{color:var(--text); text-decoration:underline; text-underline-offset:4px;
  text-decoration-color:var(--accent-800)}
.week .dn a:hover{color:var(--accent-400)}
.week .who{color:var(--muted); font-size:15.5px}
.week .quiet .dn, .week .quiet .who{color:var(--ghost)}
.hood-intro{display:grid; gap:14px; max-width:var(--prose); padding:30px 0 0}
.hood-intro p{color:var(--muted); padding-left:18px; border-left:2px solid rgba(224,85,155,.55)}
.hood-intro p + p{border-left-color:rgba(232,162,74,.55)}
.list .addr-line{color:var(--ghost); font-size:14px; margin-top:6px}
.credit{margin-top:10px; font-size:12px; color:var(--ghost); max-width:66ch}
.credit a{display:inline; min-height:0; padding:0; margin:0; color:var(--muted);
  text-decoration:underline; text-decoration-color:var(--hairline)}