/* "Where we look" (templates/_us_map.html, static/map.js): the home page's map of the metros
   we read. Builds on the light page's tokens (pages.css body.pg) and the editorial scale
   (landing.css). The land is the page's faint grey with a hairline edge, no state lines; the
   dots are ink rings that fill when picked; the labels are the storyboard's small tracked
   caps for the count and 14px for the name. One reading line under the map, no bubbles.
   --r is each dot's radius at phone width (the server sets it); --k scales it up on wide
   screens. */
.usmap { margin: 36px 0 0; --k: 1; --ink: var(--text); }
.usmap__dek { margin-top: 10px; max-width: 40ch; color: var(--text-3); }
.usmap__stage { position: relative; width: 100%; max-width: 880px; }
.usmap__svg { display: block; width: 100%; height: auto; overflow: visible; }
.usmap__land { fill: var(--surface-2); stroke: var(--line-3); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }

/* the pins: a list of links laid over the land; each <li> is a point, its link a 44px tap
   target centred on it (--c is the centre), the dot and the label inside the link. Where two
   metros sit close, static/map-hit.js trims the boxes so they do not overlap: --cl, --cr, --ct
   and --cb are the box's reach left, right, up and down from the dot (each --c by default). */
.usmap__pins { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }.usmap__pin { position: absolute; width: 0; height: 0; --c: 22px; --cl: var(--c); --cr: var(--c); --ct: var(--c); --cb: var(--c); }
.usmap__pin a {
  position: absolute; left: calc(var(--cl) * -1); top: calc(var(--ct) * -1); width: calc(var(--cl) + var(--cr)); height: calc(var(--ct) + var(--cb));
  display: block; color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.usmap__dot {
  position: absolute; box-sizing: border-box;
  left: calc(var(--cl) - var(--r) * var(--k)); top: calc(var(--ct) - var(--r) * var(--k));
  width: calc(var(--r) * 2 * var(--k)); height: calc(var(--r) * 2 * var(--k));
  border-radius: 50%; border: 1.5px solid var(--ink); background: var(--bg, #fff);
  transition: background-color 160ms ease;
}
.usmap__lab { position: absolute; display: grid; gap: 0; white-space: nowrap; font-family: var(--font); line-height: 1.1; pointer-events: none; }
.usmap__lab b { font-size: 0.75rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); font-variant-numeric: tabular-nums; }
.usmap__lab span { font-size: 0.875rem; color: var(--text-3); }
/* where a label sits (landing.map_label_layout at 390, static/map-labels.js at the page's own
   width; the two share these spots, landing.MAP_SPOTS): e/w beside the dot with its centre
   line --ty of the way down the label (0.5 centred, 0.3 the count beside the dot, 0.7 the
   name; a label slides up or down a crowded coast); n/s above or below it, centred;
   ne/se/nw/sw off its corner at 45 degrees; nne/nnw/sse/ssw above or below it, flush with its
   left (nne, sse) or right (nnw, ssw) edge. --gap is the air between dot and label; --far
   moves a label a leader's length (12px) further out and draws the leader, a hairline back to
   the dot. Every spot stays inside the map, nearer its own dot than any other. */
.usmap { --gap: 4px; }
.usmap__pin { --R: calc(var(--r) * var(--k)); --g: var(--gap); --d: calc(var(--R) * 0.71 + var(--gap) * 0.6); }
.usmap__pin--far { --g: calc(var(--gap) + 12px); --d: calc(var(--R) * 0.71 + var(--gap) * 0.6 + 8.52px); }
.usmap__pin--e .usmap__lab { left: calc(var(--cl) + var(--R) + var(--g)); }
.usmap__pin--w .usmap__lab { right: calc(var(--cr) + var(--R) + var(--g)); text-align: right; }
.usmap__pin--e .usmap__lab, .usmap__pin--w .usmap__lab { top: var(--ct); transform: translateY(calc(var(--ty, 0.5) * -100%)); }
.usmap__pin--n .usmap__lab { bottom: calc(var(--cb) + var(--R) + var(--g)); left: var(--cl); transform: translateX(-50%); text-align: center; }
.usmap__pin--s .usmap__lab { top: calc(var(--ct) + var(--R) + var(--g)); left: var(--cl); transform: translateX(-50%); text-align: center; }
.usmap__pin--ne .usmap__lab { left: calc(var(--cl) + var(--d)); bottom: calc(var(--cb) + var(--d)); }
.usmap__pin--se .usmap__lab { left: calc(var(--cl) + var(--d)); top: calc(var(--ct) + var(--d)); }
.usmap__pin--nw .usmap__lab { right: calc(var(--cr) + var(--d)); bottom: calc(var(--cb) + var(--d)); text-align: right; }
.usmap__pin--sw .usmap__lab { right: calc(var(--cr) + var(--d)); top: calc(var(--ct) + var(--d)); text-align: right; }
.usmap__pin--nne .usmap__lab { left: calc(var(--cl) - var(--R)); bottom: calc(var(--cb) + var(--R) + var(--g)); }
.usmap__pin--nnw .usmap__lab { right: calc(var(--cr) - var(--R)); bottom: calc(var(--cb) + var(--R) + var(--g)); text-align: right; }
.usmap__pin--sse .usmap__lab { left: calc(var(--cl) - var(--R)); top: calc(var(--ct) + var(--R) + var(--g)); }
.usmap__pin--ssw .usmap__lab { right: calc(var(--cr) - var(--R)); top: calc(var(--ct) + var(--R) + var(--g)); text-align: right; }
/* the leader: from 2px off the label back toward the dot, stopping short of its edge */
.usmap__pin--far .usmap__lab::before { content: ""; position: absolute; background: var(--text-3); opacity: 0.55; }
.usmap__pin--far.usmap__pin--e .usmap__lab::before { right: calc(100% + 2px); top: 50%; width: calc(var(--g) - 4px); height: 1px; }
.usmap__pin--far.usmap__pin--w .usmap__lab::before { left: calc(100% + 2px); top: 50%; width: calc(var(--g) - 4px); height: 1px; }
.usmap__pin--far.usmap__pin--n .usmap__lab::before { top: calc(100% + 2px); left: 50%; height: calc(var(--g) - 4px); width: 1px; }
.usmap__pin--far.usmap__pin--s .usmap__lab::before { bottom: calc(100% + 2px); left: 50%; height: calc(var(--g) - 4px); width: 1px; }
.usmap__pin--far.usmap__pin--ne .usmap__lab::before, .usmap__pin--far.usmap__pin--se .usmap__lab::before,
.usmap__pin--far.usmap__pin--nw .usmap__lab::before, .usmap__pin--far.usmap__pin--sw .usmap__lab::before { width: 10px; height: 1px; transform-origin: 0 0; }
.usmap__pin--far.usmap__pin--ne .usmap__lab::before { left: 0; top: 100%; transform: rotate(135deg); }
.usmap__pin--far.usmap__pin--se .usmap__lab::before { left: 0; top: 0; transform: rotate(-135deg); }
.usmap__pin--far.usmap__pin--nw .usmap__lab::before { left: 100%; top: 100%; transform: rotate(45deg); }
.usmap__pin--far.usmap__pin--sw .usmap__lab::before { left: 100%; top: 0; transform: rotate(-45deg); }

/* a metro with nothing open: a small hollow grey ring, no number; its name alone, smaller and
   in the faint grey, where it fits after every open label (a name with no room of its own is
   --tuck). A tucked label shows only while it is picked, hovered or focused, on the page's
   background above the other labels */
.usmap__pin--quiet .usmap__dot { border: 1.5px solid color-mix(in srgb, var(--text-3) 60%, var(--text-2)); background: transparent; }
.usmap__pin--quiet .usmap__lab span { font-size: 0.75rem; color: var(--text-3); }
.usmap__pin--tuck .usmap__lab { opacity: 0; }
.usmap__pin.is-on, .usmap__pin:hover, .usmap__pin:focus-within { z-index: 2; }
.usmap__pin--tuck.is-on .usmap__lab, .usmap__pin--tuck:hover .usmap__lab, .usmap__pin--tuck a:focus-visible .usmap__lab {
  opacity: 1; background: var(--bg, #fff); padding: 1px 4px; margin: -2px -5px; border: 1px solid var(--line);
}

/* picked (tap, focus, the server's first), or under the pointer: the dot fills, the name
   darkens; a quiet ring stays hollow and turns ink */
.usmap__pin.is-on .usmap__dot, .usmap__pin:hover .usmap__dot { background: var(--ink); }
.usmap__pin--quiet.is-on .usmap__dot, .usmap__pin--quiet:hover .usmap__dot { background: transparent; border-color: var(--ink); }
.usmap__pin.is-on .usmap__lab span, .usmap__pin:hover .usmap__lab span { color: var(--ink); }
.usmap__pin a:focus-visible { outline: none; }
.usmap__pin a:focus-visible .usmap__dot { outline: 2px solid var(--ink); outline-offset: 3px; }

/* the reading line: one hairline, then "New York · 212 open · 9 portals · See listings →" */
.usmap__read { margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--line); font-size: var(--ed-small, 0.875rem); color: var(--text-2); font-variant-numeric: tabular-nums; }
.usmap__read b { font-weight: 600; color: var(--ink); }
.usmap__read a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-3); text-underline-offset: 0.22em; }
.usmap__read a:hover { text-decoration-color: var(--ink); }

/* the dots pulse once as the section scrolls in (static/reveal.js adds html.js-reveal and
   .is-in; without the script nothing is hidden or moved) */
html.js-reveal .ed-map .usmap__dot { opacity: 0; transform: scale(0.4); }
html.js-reveal .ed-map.is-in .usmap__dot { animation: usmap-pulse 700ms var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)) both; animation-delay: calc(180ms + 70ms * var(--i, 0)); }
@keyframes usmap-pulse {
  0% { opacity: 0; transform: scale(0.4); }
  60% { opacity: 1; transform: scale(1.3); }
  100% { opacity: 1; transform: scale(1); }
}

@media (min-width: 900px) {
  .usmap { --k: 1.3; --gap: 5px; margin-top: 40px; }
  .usmap__lab b { font-size: 0.8125rem; }
  .usmap__lab span { font-size: 0.9375rem; }
  .usmap__pin--quiet .usmap__lab span { font-size: 0.8125rem; }
  .usmap__read { margin-top: 24px; max-width: 880px; }
}
@media (prefers-reduced-motion: reduce) {
  html.js-reveal .ed-map .usmap__dot, html.js-reveal .ed-map.is-in .usmap__dot { opacity: 1; transform: none; animation: none; }
  .usmap__dot { transition: none; }
}