/* about/nairobi.css: the nairobi section of about.html. Owned by nairobi.
   Seattle to Nairobi, and the page's only map: one line, the true great circle from the Swedish
   Neuroscience Institute to Kenyatta National Hospital, drawn as the reader arrives.

   The section is also the sheet that slides up over the pinned pull statement (pull.css pins the
   stage; pull.js measures this section). So .nairobi is positioned above it, opaque and light,
   with rounded top corners and a soft shadow, the way an iOS sheet rises over a view.

   Round 2 (council): the map no longer retells his life (training owns the itinerary), nothing on
   the sheet has an arrival of its own (the slide is the arrival), and the arc draws only after
   the sheet has settled, then the section rests.

   Resting (no script, reduced motion): the arc is drawn and Nairobi is marked. Live
   (.a-nairobi--live, added by about/nairobi.js): the arc draws with the scroll and Nairobi is
   marked when the line reaches it (.a-nairobi-arrived). */

/* ── The sheet ─────────────────────────────────────────────────────────── */
.nairobi {
  --a-nairobi-r: 28px;
  position: relative;
  z-index: 2;
  display: block;
  min-height: 0;
  margin: 0;
  padding: 96px 0 120px;
  background: var(--bg);
  color: var(--ink);
  /* --a-nairobi-sq (1 to 0, nairobi.js) squares the corners as the sheet reaches full height. */
  border-radius: calc(var(--a-nairobi-r) * var(--a-nairobi-sq, 1)) calc(var(--a-nairobi-r) * var(--a-nairobi-sq, 1)) 0 0;
  box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.5), 0 -22px 60px -18px rgba(0, 0, 0, 0.55);
  overflow: clip;
}
.a-nairobi-inner {
  width: min(1200px, calc(100% - 2 * clamp(20px, 5vw, 48px)));
  margin: 0 auto;
}
.a-nairobi-title {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.75rem, 5vw, 5rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}

/* ── The map ───────────────────────────────────────────────────────────── */
.a-nairobi-map { position: relative; margin: 48px 0 0; }
.a-nairobi-map__canvas { position: relative; aspect-ratio: 1200 / 664.2; }
/* A pale ground with a hairline coast that dissolves into the paper at the crop. */
.a-nairobi-map__land {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent),
                      linear-gradient(180deg, transparent, #000 5%, #000 92%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent),
              linear-gradient(180deg, transparent, #000 5%, #000 92%, transparent);
  mask-composite: intersect;
  user-select: none;
  pointer-events: none;
}
.a-nairobi-map__route {
  --a-nairobi-k: 1;          /* viewBox units per screen pixel; nairobi.js keeps it true */
  --a-nairobi-f: 1;          /* how much of the arc is drawn, 0 to 1 */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
/* pathLength="1" on the arc makes every dash independent of the map's size. */
.a-nairobi-arc { fill: none; stroke-linecap: round; }
/* The whole great circle, waiting as a dotted hairline: where the line is going. */
.a-nairobi-arc--guide {
  stroke: rgba(11, 15, 46, 0.2);
  stroke-width: calc(2px * var(--a-nairobi-k));
  stroke-dasharray: 0 var(--a-nairobi-dot, 0.0075);
}
/* The drawn line: a white casing over coasts, then the sky line. */
.a-nairobi-arc--case,
.a-nairobi-arc--line {
  stroke-dasharray: 1px 1px;
  /* px, not a bare number: Firefox drops a unitless calc() here. With pathLength="1", 1px is
     the whole arc. */
  stroke-dashoffset: calc((1 - var(--a-nairobi-f)) * 1px);
}
.a-nairobi-arc--case { stroke: var(--bg); stroke-width: calc(7px * var(--a-nairobi-k)); }
.a-nairobi-arc--line { stroke: var(--teal); stroke-width: calc(2.5px * var(--a-nairobi-k)); }
.a-nairobi-tip {
  fill: var(--teal);
  stroke: var(--bg);
  stroke-width: calc(2px * var(--a-nairobi-k));
  opacity: 0;
}
.a-nairobi-tip.a-nairobi-on { opacity: 1; }
.a-nairobi--live .a-nairobi-map__route:not(.a-nairobi-on) .a-nairobi-arc--case,
.a-nairobi--live .a-nairobi-map__route:not(.a-nairobi-on) .a-nairobi-arc--line { visibility: hidden; }

/* ── The two ends: a pin and its name, set like a map label with a white halo ─ */
.a-nairobi-end {
  position: absolute;
  left: var(--a-nairobi-x);
  top: var(--a-nairobi-y);
  width: 0;
  height: 0;
}
.a-nairobi-pin {
  position: absolute;
  left: -5px;
  top: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: 0 0 0 2.5px var(--bg);
  transition: background-color 320ms var(--h-ease-out), box-shadow 600ms var(--h-ease),
              scale 560ms var(--h-spring);
}
.a-nairobi-end__label {
  position: absolute;
  top: -11px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  white-space: nowrap;
  text-shadow: 0 0 2px var(--bg), 0 0 5px var(--bg), 0 0 8px var(--bg);
}
.a-nairobi-end--from .a-nairobi-end__label { left: 16px; text-align: left; }
.a-nairobi-end--to .a-nairobi-end__label { right: 18px; text-align: right; align-items: flex-end; }
.a-nairobi-end__place {
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: color 320ms var(--h-ease-out);
}
.a-nairobi-end__inst {
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--text-2);
}
/* Kenyatta: the destination. Resting it is marked; live it is marked when the line arrives,
   the pin filling sky and a still halo settling around it (no pulse, nothing repeats). */
.a-nairobi-end--to .a-nairobi-pin {
  left: -6px;
  top: -6px;
  width: 12px;
  height: 12px;
  background: var(--teal);
  box-shadow: 0 0 0 2.5px var(--bg), 0 0 0 9px rgba(14, 165, 233, 0.16);
}
.a-nairobi--live:not(.a-nairobi-arrived) .a-nairobi-end--to .a-nairobi-pin {
  background: var(--bg);
  box-shadow: inset 0 0 0 1.5px rgba(11, 15, 46, 0.45), 0 0 0 2.5px var(--bg), 0 0 0 2.5px rgba(14, 165, 233, 0);
  scale: 0.8;
}
.a-nairobi--live:not(.a-nairobi-arrived) .a-nairobi-end--to .a-nairobi-end__place { color: var(--text-2); }

.a-nairobi-map__note {
  margin: 28px 0 0;
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-2);
}

/* ── Tablet and phone ──────────────────────────────────────────────────── */
@media (max-width: 899px) {
  .nairobi { padding: 80px 0 88px; }
  .a-nairobi-map { margin-top: 32px; }
  .a-nairobi-map__canvas { margin: 0 -8px; }
  .a-nairobi-map__route { --a-nairobi-k: 2.2; --a-nairobi-dot: 0.012; }
  .a-nairobi-end__place { font-size: 0.9375rem; }
  .a-nairobi-end__inst { font-size: 0.75rem; }
  .a-nairobi-map__note { margin-top: 36px; }
}
@media (max-width: 599px) {
  .nairobi { --a-nairobi-r: 24px; padding: 72px 0 80px; }
  .a-nairobi-map__route { --a-nairobi-k: 3.3; --a-nairobi-dot: 0.016; }
  .a-nairobi-pin { left: -4px; top: -4px; width: 8px; height: 8px; }
  .a-nairobi-end--to .a-nairobi-pin { left: -5px; top: -5px; width: 10px; height: 10px; }
  .a-nairobi-end--from .a-nairobi-end__label { left: 12px; top: -9px; }
  .a-nairobi-end--to .a-nairobi-end__label { right: 14px; top: -9px; }
}

/* ── Reduced motion: still and complete (the script stays in resting mode) ─ */
@media (prefers-reduced-motion: reduce) {
  .a-nairobi-pin, .a-nairobi-end__place { transition: none; }
}
@media (forced-colors: active) {
  .a-nairobi-pin { forced-color-adjust: none; background: CanvasText; box-shadow: none; }
}