/* ─── EDITORIAL ATLAS SVG ─── */
  .atlas-svg { display: block; width: 100%; height: auto; }
  .atlas-svg .water       { fill: #b8cfc4; opacity: 0.45; }
  .atlas-svg .water-edge  { fill: none; stroke: #6e8f7c; stroke-width: 1.4; opacity: 0.55; stroke-linecap: round; stroke-linejoin: round; }
  .atlas-svg .water-creek { fill: none; stroke: #6e8f7c; stroke-width: 2; opacity: 0.4; stroke-linecap: round; }
  .atlas-svg .water-label    { font-family: var(--display); font-style: italic; font-weight: 500; font-size: 26px; fill: #4a6e58; opacity: 0.75; letter-spacing: 0.04em; }
  .atlas-svg .water-sublabel { font-family: var(--body); font-size: 9.5px; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; fill: #4a6e58; opacity: 0.6; }
  .atlas-svg .land-bg     { fill: var(--hk-paper-soft); }
  .atlas-svg .frame-outer { fill: none; stroke: var(--hk-ink); stroke-width: 1; opacity: 0.18; }
  .atlas-svg .frame-inner { fill: none; stroke: var(--hk-ink); stroke-width: 0.5; opacity: 0.10; }
  .atlas-svg .road        { fill: none; stroke: var(--hk-ink); stroke-width: 2; opacity: 0.62; stroke-linecap: round; stroke-linejoin: round; }
  .atlas-svg .road.major  { stroke-width: 3.4; opacity: 0.78; }
  .atlas-svg .road.major-shadow { stroke: var(--hk-paper); stroke-width: 6; opacity: 1; }
  .atlas-svg .road.shadow { stroke: var(--hk-paper); stroke-width: 4; opacity: 1; }
  .atlas-svg .road.minor  { stroke-width: 1.2; opacity: 0.45; stroke-dasharray: 4 3; }
  .atlas-svg .road-label  { font-family: var(--body); font-size: 10px; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; fill: var(--hk-ink-64); }
  .atlas-svg .road-shield text { font-family: var(--body); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; }
  .atlas-svg .road-shield.dark text  { fill: var(--hk-paper); }
  .atlas-svg .road-shield.light text { fill: var(--hk-ink); }
  .atlas-svg .compass-bg   { fill: var(--hk-paper); stroke: var(--hk-ink); stroke-width: 0.8; opacity: 0.85; }
  .atlas-svg .compass-ring { fill: none; stroke: var(--hk-ink); stroke-width: 0.4; opacity: 0.25; }
  .atlas-svg .compass-needle-n { fill: var(--hk-accent); }
  .atlas-svg .compass-needle-s { fill: var(--hk-ink); opacity: 0.4; }
  .atlas-svg .compass-tick { stroke: var(--hk-ink); stroke-width: 0.5; opacity: 0.4; }
  .atlas-svg .compass-letter { font-family: var(--body); font-size: 9.5px; font-weight: 700; letter-spacing: 0.18em; fill: var(--hk-ink-64); }
  .atlas-svg .title-rule { stroke: var(--hk-ink); stroke-width: 0.6; opacity: 0.45; }
  .atlas-svg .title-eyebrow { font-family: var(--body); font-size: 10px; font-weight: 700; letter-spacing: 0.36em; text-transform: uppercase; fill: var(--hk-accent); }
  .atlas-svg .title-main { font-family: var(--display); font-weight: 500; font-size: 36px; fill: var(--hk-ink); letter-spacing: -0.005em; }
  .atlas-svg .scale-line { stroke: var(--hk-ink); stroke-width: 1.4; opacity: 0.6; }
  .atlas-svg .scale-tick { stroke: var(--hk-ink); stroke-width: 1; opacity: 0.6; }
  .atlas-svg .scale-label { font-family: var(--body); font-size: 9px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; fill: var(--hk-ink-64); }
  .atlas-svg .off-map text { font-family: var(--display); font-style: italic; font-size: 14px; fill: var(--hk-ink-64); letter-spacing: 0.02em; }
  .atlas-svg .atlas-marker { cursor: pointer; }
  .atlas-svg .atlas-marker .pin-bg { transition: fill-opacity 0.25s, stroke-width 0.2s, stroke-opacity 0.25s; transform-origin: center; transform-box: fill-box; }
  .atlas-svg .atlas-marker .pin-num { font-family: var(--display); font-style: italic; font-weight: 600; font-size: 13px; fill: var(--hk-accent); text-anchor: middle; pointer-events: none; letter-spacing: 0.04em; }
  .atlas-svg .atlas-marker .pin-name { font-family: var(--display); font-weight: 500; fill: var(--hk-ink); text-anchor: middle; pointer-events: none; letter-spacing: -0.01em; }
  .atlas-svg .atlas-marker .pin-zip { font-family: var(--body); font-size: 9.5px; font-weight: 700; letter-spacing: 0.24em; fill: var(--hk-ink-64); text-anchor: middle; text-transform: uppercase; pointer-events: none; }
  .atlas-svg .atlas-marker:hover .pin-bg { fill-opacity: 0.42; stroke-width: 2; stroke-opacity: 0.95; }
  .atlas-svg .atlas-marker:hover .pin-name { fill: var(--hk-accent); }
  /* Picker pulse — preserved from original CSS for the hub */
  .atlas-svg .atlas-marker.is-pulse .pin-bg { fill: var(--hk-lime); fill-opacity: 0.55; animation: atlas-pulse 1.4s ease-in-out infinite; }
  @keyframes atlas-pulse {
    0%, 100% { transform: scale(1.0);  filter: drop-shadow(0 0 0 rgba(193,249,170,0)); }
    50%      { transform: scale(1.04); filter: drop-shadow(0 0 12px rgba(193,249,170,0.85)); }
  }
  @media (prefers-reduced-motion: reduce) { .atlas-svg .atlas-marker.is-pulse .pin-bg { animation: none; } }
  /* HIGHLIGHT MODE — fades non-focal markers, pops the focal one */
  .atlas-svg[class*="highlight-"] .atlas-marker:not(.is-focus) .pin-bg     { fill-opacity: 0.10; stroke-opacity: 0.30; }
  .atlas-svg[class*="highlight-"] .atlas-marker:not(.is-focus) .pin-name   { fill: rgba(27, 80, 78, 0.40); font-size: 18px; }
  .atlas-svg[class*="highlight-"] .atlas-marker:not(.is-focus) .pin-num    { opacity: 0.40; }
  .atlas-svg[class*="highlight-"] .atlas-marker:not(.is-focus) .pin-zip    { opacity: 0.30; }
  .atlas-svg .atlas-marker.is-focus .pin-bg     { fill-opacity: 0.45; stroke-width: 2.4; stroke-opacity: 1; }
  .atlas-svg .atlas-marker.is-focus .pin-num    { fill: var(--hk-accent); opacity: 1; }
  .atlas-svg .atlas-marker.is-focus .pin-zip    { fill: var(--hk-ink); opacity: 0.85; }
  /* ─── LANDMARKS ─── */
  .atlas-svg .landmarks { pointer-events: none; }
  .atlas-svg .landmark { pointer-events: auto; }
  .atlas-svg .lm-glyph { stroke: var(--hk-accent); stroke-width: 1.2; fill: none; opacity: 0.85; }
  .atlas-svg .lm-glyph.lm-school { fill: var(--hk-accent); stroke: none; opacity: 0.95; }
  .atlas-svg .lm-glyph.lm-park   { stroke-linecap: round; opacity: 0.78; }
  .atlas-svg .lm-glyph.lm-shop   { fill: var(--hk-paper); stroke: var(--hk-accent); stroke-width: 1.1; opacity: 0.9; }
  .atlas-svg .lm-label { font-family: var(--display); font-style: italic; font-weight: 500; font-size: 11.5px; fill: var(--hk-ink-64); letter-spacing: 0.01em; pointer-events: none; }
  .atlas-svg[class*="highlight-"] .lm-glyph,
  .atlas-svg[class*="highlight-"] .lm-label { opacity: 0.45; }
  /* ─── BRIDGE HATCHES ─── */
  .atlas-svg .bridge-tick { stroke: var(--hk-ink); stroke-width: 1.3; opacity: 0.55; stroke-linecap: round; }
  /* ─── MINOR ROAD LABELS ─── */
  .atlas-svg .minor-road-label { font-family: var(--body); font-size: 8px; font-weight: 600; letter-spacing: 0.20em; text-transform: uppercase; fill: var(--hk-ink-64); opacity: 0.75; pointer-events: none; }
  /* ─── LEGEND ─── */
  .atlas-svg .legend-bg { fill: var(--hk-paper); stroke: var(--hk-ink); stroke-width: 0.5; opacity: 0.92; }
  .atlas-svg .legend-title { font-family: var(--body); font-size: 8px; font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; fill: var(--hk-ink-64); }
  .atlas-svg .legend-label { font-family: var(--display); font-style: italic; font-size: 11px; fill: var(--hk-ink); opacity: 0.78; }

/* ─── ATLAS SECTION (per-neighborhood pages) ─── */
.atlas-section { background: var(--hk-paper); padding: 64px 0 32px; }
.atlas-section-inner { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
.atlas-frame {
  background: var(--hk-paper-soft);
  border: 1px solid var(--hk-ink-12);
  border-radius: var(--radius-lg);
  padding: 22px 22px 14px;
  box-shadow: var(--shadow-md);
}
.atlas-caption {
  text-align: center;
  font-family: var(--body); font-size: 11px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--hk-ink-64); margin-top: 14px;
}
.atlas-caption em {
  font-family: var(--display); font-style: italic; font-weight: 500;
  font-size: 14px; letter-spacing: 0.02em; color: var(--hk-accent);
  text-transform: none;
}
.atlas-caption a { color: var(--hk-accent); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.atlas-caption a:hover { color: var(--hk-ink); }
@media (max-width: 720px) {
  .atlas-section { padding: 40px 0 20px; }
  .atlas-section-inner { padding: 0 16px; }
  .atlas-frame { padding: 12px 10px 8px; }
}