/* map.css — the orchestras map (markup from src/build/map.mjs, behaviour in
   src/js/map.js). Dark land, fine borders, gold pins: the look of the v2 map. */

.orchestras__map {
  --map-sea: #121010;
  --map-land: #221e1a;
  --map-land-visited: #2c2721;
  --map-border: #121010;
  --map-gold: var(--color-accent, #c39554);
  --map-gold-soft: rgba(195, 149, 84, 0.16);
  --map-text: var(--color-text, #ece7df);
  --map-muted: rgba(236, 231, 223, 0.7);
  --map-card-bg: rgba(10, 9, 8, 0.96);
  --map-height: clamp(440px, 50vw, 640px);
  margin-bottom: 8px;
}

.map { position: relative; }
.map__viewport {
  position: relative; overflow: hidden; background: var(--map-sea);
  border: 1px solid var(--color-line, rgba(236, 231, 223, 0.16));
  aspect-ratio: var(--frame-aspect);
  touch-action: pan-y; /* one finger scrolls the page; two fingers belong to the map */
  -webkit-user-select: none; user-select: none;
}
.map--live .map__viewport { aspect-ratio: auto; height: var(--map-height); }
/* A soft vignette frames the map and hides where the land is cut off. */
.map__viewport::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(ellipse 75% 70% at 50% 50%, transparent 62%, rgba(18, 16, 16, 0.55) 100%);
}
.map__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.map__land { fill: var(--map-land); stroke: var(--map-border); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.map__land--visited { fill: var(--map-land-visited); }
.map__route { fill: none; stroke: var(--map-gold); stroke-opacity: 0.5; stroke-linecap: round; }
.map:not(.map--live) .map__route { stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.map[data-dragging] .map__viewport { cursor: grabbing; }
.map[data-zoomed] .map__viewport { cursor: grab; }

/* ---------- pins ---------- */
.map__pins { position: absolute; inset: 0; z-index: 2; }
.map-pin {
  position: absolute; left: var(--x); top: var(--y); width: 40px; height: 40px; margin: -20px 0 0 -20px;
  padding: 0; border: 0; background: none; color: inherit; cursor: pointer; text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.map--live .map-pin { left: 0; top: 0; }
.map-pin__dot {
  position: absolute; left: 50%; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
  background: var(--map-gold); box-shadow: 0 0 0 6px var(--map-gold-soft);
  transition: box-shadow 0.18s ease, background-color 0.18s ease;
}
.map-pin[data-placeholder] .map-pin__dot { background: var(--map-sea); border: 1.5px solid var(--map-gold); }
/* Forthcoming: a brighter dot with a glowing, breathing ring. */
.map-pin[data-upcoming] .map-pin__dot {
  width: 10px; height: 10px; margin: -5px 0 0 -5px; background: #e2b878;
  box-shadow: 0 0 0 3px var(--map-sea), 0 0 0 4.5px var(--map-gold), 0 0 16px 5px rgba(226, 184, 120, 0.42);
}
.map-pin[data-upcoming] .map-pin__dot::after {
  content: ""; position: absolute; inset: -4.5px; border-radius: 50%; border: 1px solid var(--map-gold);
  opacity: 0; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .map--live:not(.map--intro) .map-pin[data-upcoming] .map-pin__dot::after { animation: map-pulse 2.8s ease-out infinite; }
}
@keyframes map-pulse { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(2.6); opacity: 0; } }
.map-pin:hover .map-pin__dot, .map-pin.is-selected .map-pin__dot, .map-pin:focus-visible .map-pin__dot { box-shadow: 0 0 0 10px rgba(195, 149, 84, 0.32); }
.map-pin[data-upcoming]:hover .map-pin__dot, .map-pin[data-upcoming].is-selected .map-pin__dot, .map-pin[data-upcoming]:focus-visible .map-pin__dot {
  box-shadow: 0 0 0 3px var(--map-sea), 0 0 0 4.5px var(--map-gold), 0 0 0 12px rgba(195, 149, 84, 0.3), 0 0 18px 6px rgba(226, 184, 120, 0.45);
}
.map-pin:focus-visible { outline: none; }
.map-pin:focus-visible::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border-radius: 50%; outline: 2px solid var(--map-text); outline-offset: 0;
}

.map-pin__label {
  position: absolute; left: calc(50% + 11px); top: 50%; transform: translateY(-50%);
  white-space: nowrap; pointer-events: none;
  font: 500 0.6875rem/1.2 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--map-muted);
  text-shadow: 0 0 2px var(--map-sea), 0 0 4px var(--map-sea), 0 0 8px var(--map-sea);
  opacity: 0; transition: opacity 0.2s ease;
}
.map-pin[data-upcoming] .map-pin__label { color: #e2b878; }
.map-pin[data-label="r"] .map-pin__label, .map-pin[data-label="l"] .map-pin__label,
.map-pin[data-label="t"] .map-pin__label, .map-pin[data-label="b"] .map-pin__label { opacity: 1; }
.map-pin[data-label="l"] .map-pin__label { left: auto; right: calc(50% + 11px); }
.map-pin[data-label="t"] .map-pin__label { left: 50%; top: auto; bottom: calc(50% + 9px); transform: translateX(-50%); }
.map-pin[data-label="b"] .map-pin__label { left: 50%; top: calc(50% + 9px); transform: translateX(-50%); }
/* An unlabelled pin shows its name while pointed at or focused. */
.map-pin:hover .map-pin__label, .map-pin:focus-visible .map-pin__label, .map-pin.is-selected .map-pin__label { opacity: 1; color: var(--map-text); z-index: 1; }
.map-pin:hover, .map-pin:focus-visible, .map-pin.is-selected { z-index: 3; }
.map .map-pin[data-pending] .map-pin__label { opacity: 0; transition: none; }

/* ---------- crowded areas: smaller pins with a fine halo, a constellation rather than a blob ---------- */
.map-pin[data-dense] .map-pin__dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; box-shadow: 0 0 0 3px rgba(195, 149, 84, 0.2), 0 0 8px 1px rgba(226, 184, 120, 0.25); }
.map-pin[data-dense][data-upcoming] .map-pin__dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; box-shadow: 0 0 0 2px var(--map-sea), 0 0 0 3.25px var(--map-gold), 0 0 12px 4px rgba(226, 184, 120, 0.4); }
.map-pin[data-dense][data-upcoming] .map-pin__dot::after { inset: -3.25px; }
.map-pin[data-dense][data-placeholder] .map-pin__dot { border-width: 1.25px; }
.map-pin[data-dense]:hover .map-pin__dot, .map-pin[data-dense].is-selected .map-pin__dot, .map-pin[data-dense]:focus-visible .map-pin__dot { box-shadow: 0 0 0 7px rgba(195, 149, 84, 0.32); }
.map-pin[data-dense][data-upcoming]:hover .map-pin__dot, .map-pin[data-dense][data-upcoming].is-selected .map-pin__dot, .map-pin[data-dense][data-upcoming]:focus-visible .map-pin__dot {
  box-shadow: 0 0 0 2px var(--map-sea), 0 0 0 3.25px var(--map-gold), 0 0 0 9px rgba(195, 149, 84, 0.3), 0 0 14px 5px rgba(226, 184, 120, 0.45);
}
.map-pin[data-dense]:focus-visible::before { width: 22px; height: 22px; margin: -11px 0 0 -11px; }
/* The cities offered by the touch picker. */
.map-pin.is-candidate .map-pin__dot { box-shadow: 0 0 0 2px var(--map-sea), 0 0 0 3.5px var(--map-text); }
.map-pin.is-candidate { z-index: 3; }

/* ---------- headline totals ---------- */
.map__stats {
  position: absolute; left: 22px; top: 18px; z-index: 4; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px;
  margin: 0; pointer-events: none; color: var(--map-text);
}
.map__stat { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.map__stat-n { font: 400 clamp(2rem, 3.2vw, 2.75rem)/1 var(--font-display); font-variant-numeric: lining-nums tabular-nums; color: var(--map-gold); }
.map__stat-l { font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--map-muted); }
.map__stat-sep { width: 1px; height: 1.6em; align-self: center; background: rgba(236, 231, 223, 0.2); }
.map:not(.map--live) .map__stats { position: static; margin-bottom: 16px; }
@media (max-width: 760px) {
  .map__stats { position: static; padding: 0 var(--gutter, 20px) 0 calc(var(--gutter, 20px) + var(--rail, 0px)); margin-bottom: 16px; gap: 4px 12px; }
  .map__stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0 22px; }
  .map__stat { flex-direction: column; align-items: flex-start; gap: 4px; }
  .map__stat-n { font-size: 2rem; }
  .map__stat-l { font-size: 0.625rem; letter-spacing: 0.14em; }
  .map__stat-sep { display: none; }
}

/* ---------- controls, legend, hint ---------- */
.map__controls {
  position: absolute; right: 14px; bottom: 14px; z-index: 4; display: flex; gap: 1px;
  background: rgba(236, 231, 223, 0.16); border: 1px solid rgba(236, 231, 223, 0.16);
}
.map__control {
  width: 36px; height: 36px; padding: 0; border: 0; cursor: pointer; display: grid; place-items: center;
  background: #141210; color: rgba(236, 231, 223, 0.75); font: 300 1.125rem/1 var(--font-body);
  transition: color 0.15s ease;
}
.map__control:hover:not(:disabled) { color: var(--map-gold); }
.map__control:disabled { color: rgba(236, 231, 223, 0.28); cursor: default; }
.map__control:focus-visible { outline: 2px solid var(--map-text); outline-offset: -2px; }
.map__reset-icon { width: 13px; height: 13px; border: 1.5px solid currentColor; position: relative; }
.map__reset-icon::after { content: ""; position: absolute; inset: 3px; background: currentColor; }
@media (pointer: coarse) { .map__control { width: 44px; height: 44px; } }

.map__legend {
  position: absolute; left: 14px; bottom: 14px; z-index: 3; display: flex; flex-wrap: wrap; gap: 6px 18px;
  padding: 7px 12px; background: rgba(18, 16, 16, 0.78);
  font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--map-muted);
  pointer-events: none;
}
.map__legend-item { display: inline-flex; align-items: center; gap: 9px; }
.map__key-zoom { color: var(--map-gold); font-size: 1rem; line-height: 0.5; letter-spacing: 0; }
.map__key { width: 7px; height: 7px; border-radius: 50%; background: var(--map-gold); box-shadow: 0 0 0 4px var(--map-gold-soft); }
.map__key--upcoming { width: 8px; height: 8px; background: #e2b878; box-shadow: 0 0 0 2.5px var(--map-sea), 0 0 0 3.5px var(--map-gold), 0 0 10px 3px rgba(226, 184, 120, 0.4); }
.map:not(.map--live) .map__legend { position: static; margin-top: 10px; background: none; padding: 0; }

.map__hint {
  position: absolute; left: 50%; top: 50%; z-index: 6; transform: translate(-50%, -50%);
  max-width: 80%; padding: 10px 16px; background: rgba(10, 9, 8, 0.88); color: var(--map-text);
  font-size: 0.8125rem; text-align: center; pointer-events: none; opacity: 0; transition: opacity 0.25s ease;
}
.map[data-hint] .map__hint { opacity: 1; }

/* ---------- the info card ---------- */
.map-card {
  position: absolute; left: 0; top: 0; z-index: 5; width: min(340px, calc(100% - 28px));
  max-height: calc(var(--map-height) - 28px); overflow: auto; overscroll-behavior: contain;
  padding: 18px 20px 20px; background: var(--map-card-bg); color: var(--map-text);
  border: 1px solid rgba(195, 149, 84, 0.45); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
  scrollbar-width: thin;
}
.map-card[hidden] { display: none; }
.map-card:focus { outline: none; }
.map-card:focus-visible { outline: 2px solid var(--map-text); outline-offset: 2px; }
.map-card__close {
  position: absolute; right: 6px; top: 6px; width: 36px; height: 36px; padding: 0; border: 0; cursor: pointer;
  background: none; color: var(--map-muted); font: 300 1.5rem/1 var(--font-body);
}
.map-card__close:hover { color: var(--map-gold); }
.map-card__close:focus-visible { outline: 2px solid var(--map-text); outline-offset: -4px; }
.map-card:not([data-pinned]) .map-card__close { visibility: hidden; }
.map-card__country { font-size: 0.6875rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--map-gold); margin: 0 40px 4px 0; }
.map-card__city { font-family: var(--font-display); font-weight: 400; font-size: 1.75rem; line-height: 1.1; margin: 0 40px 12px 0; }
.map-card__list { list-style: none; margin: 0; padding: 0; }
.map-card__item { padding: 11px 0 0; margin-top: 11px; border-top: 1px solid rgba(236, 231, 223, 0.12); }
.map-card__item:first-child { margin-top: 0; }
.map-card__orch { font-family: var(--font-display); font-size: 1.125rem; line-height: 1.3; margin-bottom: 3px; }
.map-card__item--tbc .map-card__orch { font-style: italic; color: var(--map-muted); }
.map-card__role, .map-card__note, .map-card__prize, .map-card__summary { font-size: 0.8125rem; line-height: 1.5; color: var(--map-muted); }
.map-card__prize { color: #d9b57f; }
.map-card__concert { margin-top: 8px; padding: 10px 12px; background: rgba(195, 149, 84, 0.08); border-left: 2px solid var(--map-gold); }
.map-card__when { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--map-text); margin-bottom: 2px; }
.map-card__badge { color: #e2b878; margin-right: 6px; }
.map-card__badge::after { content: " ·"; color: var(--map-muted); }
.map-card__summary { color: rgba(236, 231, 223, 0.86); }
.map-card__link {
  display: inline-block; margin-top: 6px; padding: 4px 0; font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--map-gold); text-decoration: none; border-bottom: 1px solid currentColor;
}
.map-card__link::after { content: " ↓"; }
.map-card__city--picker { font-size: 1.375rem; }
.map-card__picks { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(236, 231, 223, 0.12); }
.map-card__pick {
  display: flex; width: 100%; align-items: baseline; justify-content: space-between; gap: 12px; min-height: 44px; padding: 10px 2px;
  border: 0; border-bottom: 1px solid rgba(236, 231, 223, 0.12); background: none; color: var(--map-text); text-align: left; cursor: pointer;
}
.map-card__pick-name { font-family: var(--font-display); font-size: 1.125rem; }
.map-card__pick-meta { font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--map-muted); text-align: right; }
.map-card__pick-meta .map-card__badge { margin: 0; }
.map-card__pick-meta .map-card__badge::after { content: none; }
.map-card__pick:hover .map-card__pick-name { color: var(--map-gold); }
.map-card__pick:focus-visible { outline: 2px solid var(--map-text); outline-offset: -2px; }
.map-card__zoom {
  margin-top: 12px; min-height: 40px; padding: 8px 14px; border: 1px solid rgba(195, 149, 84, 0.6); background: none; cursor: pointer;
  color: var(--map-gold); font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase;
}
.map-card__zoom:hover { background: var(--map-gold); color: var(--color-accent-contrast, #0e0d0c); }
.map-card__zoom:focus-visible { outline: 2px solid var(--map-text); outline-offset: 2px; }
.map-card__link:hover { color: var(--map-text); }

/* ---------- phones and narrow columns ---------- */
@media (max-width: 760px) {
  .orchestras__map { --map-height: min(124vw, 540px); margin-right: calc(-1 * var(--gutter, 20px)); margin-left: calc(-1 * (var(--gutter, 20px) + var(--rail, 0px))); }
  .map__viewport { border-inline: 0; }
}
.map[data-compact] .map__controls { top: 10px; right: 10px; bottom: auto; flex-direction: column; }
.map[data-compact] .map__legend { left: 10px; bottom: 10px; gap: 4px 14px; padding: 6px 10px; font-size: 0.625rem; }
/* On a phone the card sits under the map, so the pin stays in view. */
.map[data-compact] .map-card {
  position: relative; left: auto !important; top: auto !important; width: auto; max-height: none;
  border-width: 0 0 1px; border-top: 2px solid var(--map-gold); box-shadow: none; padding: 16px var(--gutter, 20px) 20px;
}

/* ---------- the text list under the map ---------- */
.orchestras__list { margin-top: 28px; }
.orchestras__list-toggle {
  display: inline-flex; align-items: center; gap: 12px; padding: 10px 0; cursor: pointer; list-style: none;
}
.orchestras__list-toggle::-webkit-details-marker { display: none; }
.orchestras__list-toggle .orchestras__list-title { margin: 0; }
.orchestras__list-toggle::before {
  content: "+"; display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid rgba(195, 149, 84, 0.6);
  color: var(--map-gold, #c39554); font: 300 1rem/1 var(--font-body); transition: transform 0.2s ease;
}
.orchestras__list[open] > .orchestras__list-toggle::before { content: "−"; }
.orchestras__list-toggle:hover .orchestras__list-title { color: var(--color-text); }
.orchestras__list[open] > .orch-list { margin-top: 18px; }

/* ---------- the stave ----------
   #orchestras carries the standard stave (design.css .stave, drawn by motion.js
   like every staved section): the five lines run the full height of the
   section in the rail beside the map, from the section above to #gallery.
   On phones the full-bleed map covers them, so they pass under it. */

/* Readability (Oct 2026): see the matching block at the end of design.css. */
.map { --map-muted: rgba(236, 231, 223, 0.8); }
.map-card__city, .map-card__orch, .map-card__pick-name { font-variation-settings: "opsz" 11; font-weight: 450; }
.map-card__role, .map-card__note, .map-card__prize, .map-card__summary { font-size: 0.875rem; }
.map__legend, .map__stat-l { font-size: 0.75rem; }
/* Agata's source link for each engagement (Oct 2026) */
.map-card__source { display: inline-block; margin-top: 2px; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--map-gold); text-decoration: none; border-bottom: 1px solid currentColor; }
.map-card__source:hover { color: var(--cream, #f0e9de); }