/* MCRO research atlas — self-contained styles. Tokens from DESIGN-SYSTEM.md. */
@font-face { font-family: "MCRO Hind"; src: url("assets/fonts/Hind-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "MCRO Hind"; src: url("assets/fonts/Hind-SemiBold.otf") format("opentype"); font-weight: 600; font-display: swap; }
@font-face { font-family: "MCRO Hind"; src: url("assets/fonts/Hind-Bold.otf") format("opentype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "MCRO Khand"; src: url("assets/fonts/Khand-SemiBold.otf") format("opentype"); font-weight: 600; font-display: swap; }

.mcro-atlas {
  --mcro-blue: #08337d;
  --mcro-ink: #06265e;
  --mcro-navy: #071f4b;
  --mcro-map-blue: #0b3779;
  --mcro-ocean: #05102d;             /* ocean + country borders (2026-09-19) */
  --mcro-yellow: #fbb52a;
  --mcro-paper: #fffdf9;
  --mcro-pale: #dbe8f2;
  --mcro-muted: #87a5c4;
  --mcro-grid: #31548b;
  --mcro-body: "MCRO Hind", "Hind", system-ui, sans-serif;
  --mcro-display: "MCRO Khand", "Khand", "MCRO Hind", system-ui, sans-serif;

  position: relative;
  overflow: hidden;
  background: var(--mcro-navy);
  color: var(--mcro-paper);
  font-family: var(--mcro-body);
}

/* ---------- editorial copy floating over the map ---------- */
.mcro-atlas__copy {
  position: absolute;
  z-index: 3;
  top: clamp(1.5rem, 4vw, 4.5rem);
  left: clamp(1rem, 4vw, 4rem);
  max-width: 24rem;
  pointer-events: none;
}
.mcro-atlas__copy .mcro-atlas__chip { pointer-events: auto; }   /* text stays click-through so pins under it remain usable */
.mcro-atlas__eyebrow {
  display: flex; align-items: center; gap: .6rem;
  margin: 0;
  font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--mcro-yellow);
}
.mcro-atlas__eyebrow::before { content: ""; width: 1.4rem; height: 2px; background: var(--mcro-yellow); }
.mcro-atlas__title {
  margin: 1rem 0 0;
  font-family: var(--mcro-display);
  font-size: clamp(2.4rem, 5vw, 4.4rem);
  font-weight: 600; line-height: .9;
  color: var(--mcro-paper);
}
.mcro-atlas__lede { margin: 1.2rem 0 0; max-width: 22rem; font-size: .98rem; line-height: 1.55; color: #bfd0df; }

.mcro-atlas__filters { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.4rem; }
.mcro-atlas__chip {
  appearance: none; cursor: pointer;
  padding: .45rem .8rem;
  border: 1px solid #4b6ba1; border-radius: 999px;
  background: transparent; color: var(--mcro-pale);
  font: 700 .72rem/1 var(--mcro-body); letter-spacing: .04em;
  transition: border-color .18s, color .18s, background .18s;
}
.mcro-atlas__chip:hover { border-color: var(--mcro-yellow); color: var(--mcro-yellow); }
.mcro-atlas__chip[aria-pressed="true"] { background: var(--mcro-yellow); border-color: var(--mcro-yellow); color: var(--mcro-ink); }
.mcro-atlas__chip:focus-visible { outline: 2px solid var(--mcro-yellow); outline-offset: 2px; }

.mcro-atlas__legend {
  display: flex; align-items: center; gap: .5rem;
  margin: 1.6rem 0 0;
  font-size: .66rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mcro-muted);
}
.mcro-atlas__legend::before {
  content: ""; width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--mcro-yellow); box-shadow: 0 0 0 5px rgba(251, 181, 42, .14);
}

/* ---------- the stage: ONE svg holds map + pins in the same 950x620 frame ---------- */
.mcro-atlas__stage {
  position: relative;
  width: 100%;
  aspect-ratio: 950 / 620;            /* contain mode: the whole world, never cropped */
  background: var(--mcro-ocean);
}
.mcro-atlas[data-fit="cover"] .mcro-atlas__stage {
  aspect-ratio: auto;
  min-height: var(--mcro-atlas-cover-height, 1200px);   /* full-bleed editorial height; svg uses slice */
}
.mcro-atlas__svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  overflow: hidden;
}
.mcro-atlas__ocean { fill: var(--mcro-ocean); }
.mcro-atlas__land { opacity: .82; }
.mcro-atlas__land path { transition: fill .2s; }
.mcro-atlas__land path.is-active { fill: #eef5fb; }
.mcro-atlas__grid line { stroke: rgba(132, 170, 210, .10); stroke-width: .6; }

/* routes between hubs (decorative, computed from real pin positions) */
.mcro-atlas__route { fill: none; stroke: rgba(251, 181, 42, .55); stroke-width: .9; stroke-dasharray: 3 2.4; vector-effect: non-scaling-stroke; }
.mcro-atlas__route-dot { fill: var(--mcro-yellow); filter: drop-shadow(0 0 3px rgba(251, 181, 42, .7)); }

/* pins */
.mcro-atlas__pin { cursor: pointer; outline: none; }
.mcro-atlas__pin .pin-halo { fill: rgba(251, 181, 42, .16); transition: r .2s; }
.mcro-atlas__pin .pin-dot { fill: var(--mcro-yellow); stroke: var(--mcro-navy); stroke-width: 1.1; transition: transform .2s; }
.mcro-atlas__pin .pin-count {
  fill: var(--mcro-ink); font: 700 5px/1 var(--mcro-body); text-anchor: middle; dominant-baseline: central; pointer-events: none;
}
.mcro-atlas__pin .pin-ring { fill: none; stroke: var(--mcro-yellow); stroke-width: 1; opacity: 0; }
.mcro-atlas__pin:hover .pin-dot, .mcro-atlas__pin:focus-visible .pin-dot, .mcro-atlas__pin.is-active .pin-dot { transform: scale(1.16); }
.mcro-atlas__pin.is-locked .pin-ring { opacity: 1; animation: mcro-pin-pulse 1.8s ease-out infinite; }
.mcro-atlas__pin:focus-visible .pin-ring { opacity: 1; }
@keyframes mcro-pin-pulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(2.1); opacity: 0; } }

/* ---------- popup, anchored next to the pin ---------- */
.mcro-atlas__popup {
  position: absolute; z-index: 6;
  width: min(360px, 60%);
  max-height: min(60vh, 520px);
  display: flex; flex-direction: column;
  padding: 1.1rem 1.15rem 1rem;
  border-left: 3px solid var(--mcro-yellow);
  background: rgba(7, 31, 75, .94);
  box-shadow: 0 16px 35px rgba(1, 12, 35, .35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: var(--mcro-paper);
}
.mcro-atlas__popup[hidden] { display: none; }
.mcro-atlas__popup::before {          /* connector nub pointing at the pin */
  content: ""; position: absolute; top: var(--nub-top, 50%); width: 10px; height: 10px;
  background: rgba(7, 31, 75, .94); transform: translateY(-50%) rotate(45deg);
}
.mcro-atlas__popup[data-side="right"]::before { left: -8px; border-left: 3px solid var(--mcro-yellow); border-bottom: 3px solid var(--mcro-yellow); }
.mcro-atlas__popup[data-side="left"]::before { right: -5px; }
.mcro-atlas__popup-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.mcro-atlas__popup-place { margin: 0; font-size: .62rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--mcro-yellow); }
.mcro-atlas__popup-title { margin: .55rem 0 0; font-family: var(--mcro-display); font-size: 1.7rem; font-weight: 600; line-height: .95; color: var(--mcro-paper); }
.mcro-atlas__popup-close {
  appearance: none; cursor: pointer; flex: 0 0 auto;
  width: 1.8rem; height: 1.8rem; border: 1px solid var(--mcro-grid); border-radius: 50%;
  background: transparent; color: var(--mcro-muted); font: 700 1rem/1 var(--mcro-body);
}
.mcro-atlas__popup-close:hover { color: var(--mcro-yellow); border-color: var(--mcro-yellow); }
.mcro-atlas__popup-list { margin: .8rem 0 0; padding: 0; list-style: none; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--mcro-grid) transparent; }
.mcro-atlas__popup-item { padding: .7rem 0; border-top: 1px solid rgba(49, 84, 139, .6); }
.mcro-atlas__popup-item:first-child { border-top: 0; padding-top: .2rem; }
.mcro-atlas__popup-meta { margin: 0; font-size: .66rem; font-weight: 700; letter-spacing: .06em; color: var(--mcro-muted); }
.mcro-atlas__popup-meta strong { color: var(--mcro-yellow); }
.mcro-atlas__popup-item h4 { margin: .3rem 0 0; font-family: var(--mcro-display); font-size: 1.15rem; font-weight: 600; line-height: 1.05; color: var(--mcro-paper); }
.mcro-atlas__popup-item p { margin: .4rem 0 0; font-size: .82rem; line-height: 1.5; color: #bfd0df; }
.mcro-atlas__popup-item a { display: inline-flex; align-items: center; gap: .3rem; margin-top: .45rem; font-size: .8rem; font-weight: 700; color: var(--mcro-yellow); text-decoration: none; }
.mcro-atlas__popup-item a:hover { color: var(--mcro-paper); }
.mcro-atlas__popup-foot { margin: .8rem 0 0; padding-top: .6rem; border-top: 1px solid rgba(49, 84, 139, .6); font-size: .64rem; line-height: 1.45; color: var(--mcro-muted); }

/* ---------- footer strip ---------- */
.mcro-atlas__footer {
  position: relative; z-index: 4;
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .85rem clamp(1rem, 4vw, 1.6rem);
  border-top: 1px solid var(--mcro-grid);
  background: rgba(7, 31, 75, .56);
  font-size: .62rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--mcro-muted);
}
.mcro-atlas__footer span:last-child { display: flex; align-items: center; gap: .5rem; }
.mcro-atlas__footer span:last-child::before { content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: var(--mcro-yellow); }

/* ---------- small screens: copy sits above the map, popup becomes a card under it ---------- */
@media (max-width: 1100px) {
  .mcro-atlas__copy { position: static; max-width: none; padding: 1.5rem clamp(1rem, 4vw, 2rem) .75rem; }
}

@media (max-width: 720px) {
  /* stack: map first (in normal flow), popup card under it */
  .mcro-atlas__stage { display: flex; flex-direction: column; aspect-ratio: auto; overflow: visible; }
  .mcro-atlas__svg { position: relative; inset: auto; height: auto; aspect-ratio: 950 / 620; }
  .mcro-atlas__popup {
    position: relative; left: auto !important; top: auto !important;
    width: auto; max-height: none;
    margin: .75rem 1rem 1rem; border-left-width: 3px;
  }
  .mcro-atlas__popup::before { display: none; }
  .mcro-atlas__popup-list { max-height: 50vh; }
  .mcro-atlas__footer { flex-direction: column; align-items: flex-start; gap: .4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mcro-atlas__pin.is-locked .pin-ring { animation: none; }
  .mcro-atlas__route-dot { display: none; }
}

/* ---------- the pop: pins bubble up from the map when it scrolls into view, west to east ---------- */
.mcro-atlas__pin .pin-pop { transform: scale(0); transform-origin: 0 0; }
.mcro-atlas.is-live .mcro-atlas__pin .pin-pop { animation: pin-pop .16s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--i, 0) * 62ms);   /* one by one: each snap is over before the next starts */ }
@keyframes pin-pop { from { transform: scale(0); } 60% { transform: scale(1.25); } to { transform: scale(1); } }
.mcro-atlas__pin .pin-dot { transform-origin: 0 0; }
@media (prefers-reduced-motion: reduce) { .mcro-atlas__pin .pin-pop, .mcro-atlas.is-live .mcro-atlas__pin .pin-pop { transform: none; animation: none; } }

/* scroll-driven pop (data-live="scroll", set by the home page): each pin snaps up when the scroll reaches it */
.mcro-atlas[data-live="scroll"] .mcro-atlas__pin .pin-pop { animation: none; transform: scale(0); }
.mcro-atlas[data-live="scroll"] .mcro-atlas__pin .pin-pop.is-up { animation: pin-pop .16s cubic-bezier(.3, 1.6, .5, 1) both; }
@media (prefers-reduced-motion: reduce) { .mcro-atlas[data-live="scroll"] .mcro-atlas__pin .pin-pop { transform: none; animation: none; } }

/* no pop: the pins are simply there (2026-09-21) */
.mcro-atlas__pin .pin-pop, .mcro-atlas.is-live .mcro-atlas__pin .pin-pop, .mcro-atlas[data-live="scroll"] .mcro-atlas__pin .pin-pop { animation: none !important; transform: none !important; }

/* the lighter network arcs */
.mcro-atlas__route--minor { stroke: rgba(251, 181, 42, .4); stroke-width: .75; stroke-dasharray: 2.4 2.6; }
.mcro-atlas__route-dot--minor { opacity: .7; }