/* ==========================================================================
   Find-us walking-proximity map — "Find us" page signature element.
   Owned by the findusmap task. Loaded after assets/style.css.
   All colour here is var(--token) from style.css's :root — no new literals.
   Accent (var(--accent)) is spent in exactly one role: the studio marker.
   Every other mark (rings, pins, labels, north arrow, scale bar) is
   ink / muted / line / card / paper-2. CastleCourt (#2) is deliberately
   lighter than the other seven pins — muted colour, not opacity, so it
   stays at full contrast while receding visually.
   No animation, transition, transform or rotation anywhere in this file.
   ========================================================================== */

.findusmap{
  margin:0;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:20px 20px 16px;
}

.findusmap svg{
  display:block;
  width:100%;
  height:auto;
}

/* Type is inherited Archivo — never named inside the SVG itself. */
.findusmap svg text{
  font-family:var(--ui);
}

.findusmap figcaption{
  margin-top:12px;
  font-size:.85rem;
  color:var(--muted);
}

/* --------------------------------------------------------------------------
   Walk-time rings — full circles, cropped at the viewBox edge on purpose
   -------------------------------------------------------------------------- */
.fm-ring{
  fill:none;
  stroke:var(--line);
  stroke-width:2.5;
}

.fm-ring-label{
  font-size:20px;
  font-weight:600;
  fill:var(--muted);
}

/* --------------------------------------------------------------------------
   North arrow — drawn already pointing north, never rotated
   -------------------------------------------------------------------------- */
.fm-north text{
  font-size:18px;
  font-weight:700;
  fill:var(--ink);
}

.fm-north polygon{
  fill:var(--ink);
}

.fm-north line{
  stroke:var(--ink);
  stroke-width:3;
}

/* --------------------------------------------------------------------------
   Scale bar — 200 m, drawn length is exactly 200 user units
   -------------------------------------------------------------------------- */
.fm-scale-bar,
.fm-scale-tick{
  stroke:var(--ink);
  stroke-width:3;
}

.fm-scale-label{
  font-size:18px;
  font-weight:600;
  fill:var(--ink);
}

/* --------------------------------------------------------------------------
   Studio — the one place accent is spent. Always legible, never hidden.
   -------------------------------------------------------------------------- */
.fm-studio-dot{
  fill:var(--accent);
  stroke:var(--card);
  stroke-width:4;
}

.fm-studio-label{
  fill:var(--ink-deep);
}

.fm-studio-label-1{
  font-size:26px;
  font-weight:800;
}

.fm-studio-label-2{
  font-size:18px;
  font-weight:600;
  fill:var(--muted);
}

/* --------------------------------------------------------------------------
   Landmark pins — ink/muted only, numbered by walking time
   -------------------------------------------------------------------------- */
.fm-pin circle{
  fill:var(--card);
  stroke:var(--ink);
  stroke-width:2.5;
}

.fm-pin-num{
  font-size:15px;
  font-weight:700;
  fill:var(--ink);
}

/* Name labels — redundant with the page's adjacent numbered list once it's
   readable, so they're dropped below 720px rather than clipped/overlapped
   (see the media query at the bottom of this file). */
.fm-pin-label{
  font-size:15px;
  font-weight:600;
  fill:var(--ink);
}

/* CastleCourt (#2) — the one pin off the east corridor. Lighter weight via
   the muted token, not opacity, so it stays fully legible while receding. */
.fm-pin-light circle{
  fill:var(--paper-2);
  stroke:var(--muted);
  stroke-width:2;
}

.fm-pin-light .fm-pin-num{
  font-weight:600;
  fill:var(--muted);
}

.fm-pin-light .fm-pin-label{
  font-weight:500;
  fill:var(--muted);
}

/* --------------------------------------------------------------------------
   Responsive — name labels only. Numbered pins, ring labels, the scale bar
   and the studio's own label stay legible at every width; the adjacent
   numbered list on the page carries the names below 720px so nothing is lost.
   -------------------------------------------------------------------------- */
@media (max-width:720px){
  .fm-pin-label{display:none}
}

@media (max-width:480px){
  .findusmap{padding:16px 14px 14px}
}