/* ==========================================================================
   Investigations: long reads with a strike map that follows the text.
   Builds on the site tokens in site.css (chart by day, cockpit by night).
   Newsreader carries the reading text; Mona Sans and B612 Mono do the rest.
   ========================================================================== */

.inv {
  --read: 'Newsreader', Georgia, 'Times New Roman', serif;
  --measure: 40rem;
  --map-top: calc(var(--nav-h) + 1.1rem);

  /* map palette, day */
  --geo-in: var(--land);
  --geo-pk: #d9dfcb;
  --geo-other: #edefe8;
  --geo-region: #f1e6d2;
  --geo-coast: color-mix(in srgb, var(--blue) 42%, transparent);
  --geo-border: color-mix(in srgb, var(--ink) 58%, transparent);
  --geo-grid: color-mix(in srgb, var(--ink) 9%, transparent);
  --geo-halo: color-mix(in srgb, var(--land) 88%, transparent);

  --k-base: var(--signal);
  --k-camp: var(--caution);
  --k-ad: var(--blue);
  --k-target: var(--ink-3);
  --k-debris: var(--ink);

  display: grid;
  grid-template-columns: minmax(0, 1fr);
  max-width: 44rem;
  margin-inline: auto;
  padding-bottom: 2rem;
}
:root[data-theme="dark"] .inv {
  --geo-pk: #172016;
  --geo-other: #0c110d;
  --geo-region: #1d1a10;
  --geo-coast: color-mix(in srgb, var(--blue) 38%, transparent);
  --geo-border: color-mix(in srgb, var(--ink) 42%, transparent);
  --geo-grid: color-mix(in srgb, var(--ink) 7%, transparent);
  --geo-halo: color-mix(in srgb, #0c1a27 85%, transparent);
}

/* ---------- Cover ---------- */
.inv-cover { padding-block: clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem); }
.inv-kicker { color: var(--signal); font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; }
.inv-title {
  margin-top: 1.1rem;
  font-size: clamp(3.1rem, 9.5vw, 6.2rem);
  font-stretch: 75%;
  font-weight: 820;
  line-height: 0.88;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.inv-sub {
  margin-top: 0.9rem;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-stretch: 88%;
  font-weight: 560;
  line-height: 1.2;
  color: var(--ink-2);
}
.inv-dek {
  margin-top: 1.6rem;
  max-width: 38rem;
  font-family: var(--read);
  font-size: clamp(1.18rem, 1.9vw, 1.36rem);
  line-height: 1.5;
  color: var(--ink);
}
.inv-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 2rem;
  border-top: 1px solid var(--rule-2);
}
.inv-facts > div { padding: 0.8rem 1rem 0 0; }
.inv-facts > div + div { padding-left: 1rem; border-left: 1px solid var(--rule); }
.inv-facts dt { font-family: var(--font-data); font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--blue); }
.inv-facts dd { margin-top: 0.35rem; font-size: 0.95rem; line-height: 1.35; color: var(--ink); }

/* ---------- Reading column ---------- */
.inv-text {
  min-width: 0;
  font-family: var(--read);
  font-size: clamp(1.1rem, 1.35vw, 1.2rem);
  line-height: 1.7;
  color: var(--ink-2);
  font-optical-sizing: auto;
}
.inv-text > * + * { margin-top: 1.15em; }
.inv-text p { hyphens: auto; }
.inv-text strong { color: var(--ink); font-weight: 600; }
.inv-text a:not([class]) {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, var(--signal) 55%, transparent);
  transition: color 0.18s, text-decoration-color 0.18s;
}
.inv-text a:not([class]):hover { color: var(--signal); text-decoration-color: currentColor; }
.inv-lede { font-size: 1.14em; line-height: 1.58; color: var(--ink); }

.inv-text h2 {
  margin-top: 3.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule-2);
  font-family: var(--font-sans);
  font-size: clamp(1.85rem, 3.4vw, 2.55rem);
  font-stretch: 78%;
  font-weight: 780;
  line-height: 0.98;
  letter-spacing: -0.008em;
  color: var(--ink);
  scroll-margin-top: calc(var(--nav-h) + 1.5rem);
}
.inv-act {
  display: block;
  width: fit-content;
  margin-bottom: 0.9rem;
  padding: 0.28rem 0.55rem 0.25rem;
  border: 1px solid var(--signal);
  border-radius: 3px;
  font-family: var(--font-data);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--signal);
  font-stretch: 100%;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 0 100%);
}
.inv-text h3 {
  margin-top: 2.4rem;
  font-family: var(--font-sans);
  font-size: clamp(1.28rem, 2vw, 1.5rem);
  font-stretch: 90%;
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink);
  scroll-margin-top: calc(var(--nav-h) + 1.5rem);
}
.inv-text h2 + *, .inv-text h3 + * { margin-top: 0.85rem; }

.inv-text blockquote {
  margin-block: 2rem;
  padding-left: 1.2rem;
  border-left: 3px solid var(--signal);
  font-size: 1.28em;
  font-style: italic;
  line-height: 1.45;
  color: var(--ink);
}

/* Place names that also live on the map */
@media (min-width: 1180px) {
  .inv-text span[data-site] {
    text-decoration: underline dotted;
    text-decoration-color: color-mix(in srgb, var(--signal) 60%, transparent);
    text-underline-offset: 0.22em;
    transition: color 0.15s;
  }
  .inv-text span[data-site]:hover { color: var(--signal); }
}

/* ---------- Figures ---------- */
.inv-fig, .inv-sat, .inv-strips, .annun-fig, .vidfig { margin-block: 2rem; }
.inv-fig img {
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--paper-2);
}
.fig-zoom {
  display: block;
  width: 100%;
  padding: 0;
  border-radius: 4px;
  cursor: zoom-in;
  transition: transform 0.16s var(--ease-out);
}
.fig-zoom:active { transform: scale(0.99); }
.inv-fig figcaption, .inv-strips figcaption, .annun-fig figcaption, .sat-cap {
  margin-top: 0.7rem;
  font-family: var(--font-sans);
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 38rem;
}
.inv-fig figcaption a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 0.18em; }
.credit, .sat-credit {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--font-sans);
  font-size: 0.76rem;
  color: var(--ink-3);
}
.inv-fig.portrait img { max-width: 20rem; margin-inline: auto; }
.inv-fig.portrait .fig-zoom { max-width: 20rem; margin-inline: auto; }

.inv-sat .sat-frame { border-radius: 4px; }
.inv-sat .sat-cap { display: block; }

.clip video, .clip img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: #0b0f14;
}
.clip--lead video { aspect-ratio: auto; max-height: 30rem; object-fit: contain; }
.clip .lab { display: block; margin-top: 0.4rem; font-family: var(--font-data); font-size: 0.7rem; color: var(--ink-3); line-height: 1.35; }
.clipgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem 0.9rem;
  margin-block: 2rem;
}
@media (max-width: 640px) {
  .clipgrid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 82%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    padding-bottom: 0.6rem;
    margin-inline: calc(-1 * var(--gutter));
    padding-inline: var(--gutter);
    scroll-padding-inline: var(--gutter);
    scrollbar-width: thin;
  }
  .clipgrid .clip { scroll-snap-align: start; }
}

/* ---------- Tables ---------- */
.tbl { container-type: inline-size; margin-block: 1.8rem 0; }
.tbl table { width: 100%; border-collapse: collapse; font-family: var(--font-sans); font-size: 0.86rem; line-height: 1.4; }
.tbl thead th {
  padding: 0 0.7rem 0.55rem 0;
  border-bottom: 1px solid var(--ink);
  font-family: var(--font-data);
  font-size: 0.66rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: left;
  color: var(--ink-3);
}
.tbl td { padding: 0.62rem 0.7rem 0.62rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; color: var(--ink-2); }
.tbl td:first-child { color: var(--ink); font-weight: 600; }
.tbl td.num { font-family: var(--font-data); font-size: 0.74rem; white-space: nowrap; color: var(--ink-3); }
.tbl tr[data-site] { transition: background-color 0.15s; }
.tbl tr[data-site].is-hot td { background: var(--signal-wash); }
@container (max-width: 560px) {
  .tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tbl tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.15rem 1rem; padding: 0.8rem 0; border-bottom: 1px solid var(--rule); }
  .tbl td { grid-column: 1 / -1; display: block; padding: 0; border: 0; }
  .tbl td[data-label="#"] { display: none; }
  .tbl td:first-child, .tbl td[data-label="#"] + td { grid-column: 1; grid-row: 1; color: var(--ink); font-weight: 600; }
  .tbl td.num { grid-column: 2; grid-row: 1; justify-self: end; padding-top: 0.15em; }
}
.footnote {
  margin-top: 0.75rem !important;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--ink-3);
}

/* ---------- Strike windows: a clock and two racks of flight strips ---------- */
.inv-strips { font-family: var(--font-sans); }
.strip-clock {
  position: relative;
  height: 2.6rem;
  margin: 0 0.1rem 2.5rem;
  border-bottom: 1px solid var(--ink);
  background:
    repeating-linear-gradient(to right, var(--ink-3) 0 1px, transparent 1px calc(100% / 18)) bottom / 100% 0.4rem no-repeat,
    repeating-linear-gradient(to right, var(--ink) 0 1px, transparent 1px calc(100% / 6)) bottom / 100% 0.75rem no-repeat;
}
.sc-day { position: absolute; left: 0; top: 0; color: var(--ink); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; }
.sc-h { position: absolute; top: calc(100% + 0.3rem); left: calc(var(--t) / 18 * 100%); color: var(--ink-3); font-size: 0.64rem; transform: translateX(-50%); }
.sc-win {
  position: absolute; bottom: 0; height: 1.35rem;
  left: calc(var(--a) / 18 * 100%);
  width: calc((var(--b) - var(--a)) / 18 * 100%);
  background: var(--signal-wash);
  border-top: 2px solid var(--signal);
  box-shadow: inset 1px 0 0 var(--signal), inset -1px 0 0 var(--signal);
}
.sc-stop { position: absolute; top: 0.2rem; bottom: 0; left: calc(var(--t) / 18 * 100%); border-left: 1.5px solid var(--ink); }
.sc-stop i { position: absolute; top: 0; right: 0.4rem; font-style: normal; font-size: 0.64rem; color: var(--ink); white-space: nowrap; }

.strip-bay + .strip-bay { margin-top: 1.25rem; }
.bay-head { display: flex; align-items: baseline; gap: 0.7rem; margin-bottom: 0.45rem; font-size: 0.92rem; font-weight: 650; color: var(--ink); }
.bay-head .data { color: var(--signal); font-size: 0.74rem; font-weight: 400; }
.strips {
  list-style: none;
  display: grid;
  gap: 3px;
  padding: 4px;
  background: color-mix(in srgb, var(--ink) 9%, var(--paper-2));
  border-radius: 3px;
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--ink) 14%, transparent);
}
.strip {
  --h: color-mix(in srgb, var(--ink) 30%, var(--paper-2));
  display: grid;
  grid-template-columns: minmax(0, 1fr) 9.6rem 6.4rem;
  min-height: 2.75rem;
  background: var(--panel);
  border-left: 6px solid var(--h);
  border-radius: 1px;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 16%, transparent);
  transition: background-color 0.15s;
}
.strip > * { display: flex; flex-direction: column; justify-content: center; padding: 0.3rem 0.75rem; }
.strip > * + * { border-left: 1px solid var(--rule-2); }
.s-name { font-size: 1.02rem; font-stretch: 80%; font-weight: 760; line-height: 1.05; text-transform: uppercase; letter-spacing: 0.02em; color: var(--ink); }
.s-name small { margin-top: 0.12rem; font-size: 0.66rem; font-stretch: 100%; font-weight: 500; letter-spacing: 0.05em; color: var(--ink-3); }
.s-pos { font-family: var(--font-data); font-size: 0.7rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.s-hit { align-items: flex-start; font-family: var(--font-data); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.04em; color: var(--ink); }
.strip--c2 { --h: var(--signal); }
.strip--c2 .s-hit { color: var(--signal); }
.strip--ad { --h: var(--blue); }
.strip--ad .s-hit { color: var(--blue); }
.strip.is-hot { background: color-mix(in srgb, var(--signal) 7%, var(--panel)); }
.inv-strips figcaption { margin-top: 1rem; }
@media (max-width: 560px) {
  .strip { grid-template-columns: minmax(0, 1fr) 6.2rem; }
  .s-name { grid-column: 1; grid-row: 1; padding-bottom: 0; }
  .s-pos { grid-column: 1; grid-row: 2; padding-top: 0.15rem; border-left: 0 !important; }
  .s-hit { grid-column: 2; grid-row: 1 / span 2; justify-content: center; }
  .sc-stop i { font-size: 0.58rem; }
}

/* ---------- Receipts ---------- */
.inv-receipts { list-style: none; margin-block: 1.6rem !important; border-top: 1px solid var(--rule-2); }
.inv-receipts li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1.2rem; padding: 1rem 0; border-bottom: 1px solid var(--rule); }
.rc-k { padding-top: 0.28rem; font-size: 0.78rem; color: var(--signal); text-transform: uppercase; letter-spacing: 0.04em; }
.inv-receipts p { margin: 0; }
@media (max-width: 520px) { .inv-receipts li { grid-template-columns: 1fr; gap: 0.3rem; } }

/* ---------- Scoreboard: a warning panel with every lamp lit ----------
   The panel is an instrument, so it stays dark in both themes, like the terminals. */
.annun {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  padding: 7px;
  border-radius: 5px;
  background: #151a21;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 0 0 1px rgba(0, 0, 0, 0.6), 0 1px 0 var(--rule), 0 14px 30px -18px rgba(8, 12, 18, 0.7);
}
.annun-lamp {
  --c: #ffb547;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 0.4rem;
  min-height: 6.4rem;
  padding: 0.75rem 0.35rem;
  border-radius: 2px;
  text-align: center;
  font-family: var(--font-sans);
  text-transform: uppercase;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 15%, #0b0f14);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 38%, transparent), inset 0 0 22px color-mix(in srgb, var(--c) 16%, transparent);
}
.annun-lamp--warn { --c: #ff5a4f; }
.annun-lamp--advisory { --c: #5cc6f2; }
.annun-lamp b {
  font-size: clamp(1.6rem, 2.6vw, 2.05rem);
  font-stretch: 75%;
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: 0.01em;
  text-shadow: 0 0 12px color-mix(in srgb, var(--c) 55%, transparent);
}
.annun-lamp span { font-size: 0.64rem; font-stretch: 85%; font-weight: 700; letter-spacing: 0.08em; line-height: 1.25; }
/* Lamp test: the panel starts dark and lights up when it scrolls into view */
.js .annun .annun-lamp { transition: color 0.1s, background-color 0.1s, box-shadow 0.1s; transition-delay: calc(var(--i) * 55ms); }
.js .annun:not(.is-lit) .annun-lamp { color: color-mix(in srgb, var(--c) 20%, #3a4350); background: #0e1318; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); }
.js .annun:not(.is-lit) .annun-lamp b { text-shadow: none; }
@media (max-width: 720px) {
  .annun { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .annun-lamp { min-height: 5.6rem; }
}

.inv-sources { list-style: none; margin-top: 1.1rem; display: grid; gap: 0.55rem; font-family: var(--font-sans); font-size: 0.88rem; line-height: 1.45; }
.inv-sources li { padding-left: 1rem; position: relative; }
.inv-sources li::before { content: ""; position: absolute; left: 0; top: 0.58em; width: 5px; height: 5px; background: var(--signal); transform: rotate(45deg); }

/* ==========================================================================
   The strike map
   ========================================================================== */
.theatre { margin-block: 0.5rem 2.5rem; font-family: var(--font-sans); }
.theatre-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 0.7rem; }
.theatre-when { color: var(--signal); font-size: 0.74rem; letter-spacing: 0.04em; text-transform: uppercase; }
.theatre-title { margin-top: 0.15rem; font-size: 1.45rem; font-stretch: 80%; font-weight: 760; line-height: 1.05; color: var(--ink); text-wrap: balance; }
.theatre-play {
  flex: none;
  display: inline-flex; align-items: center; gap: 0.45rem;
  min-height: 2.25rem; padding: 0 0.8rem;
  border: 1px solid var(--rule-2); border-radius: 999px;
  font-size: 0.82rem; font-weight: 600; color: var(--ink);
  transition: border-color 0.18s, color 0.18s, transform 0.12s var(--ease-out);
}
.theatre-play:hover { border-color: var(--signal); color: var(--signal); }
.theatre-play:active { transform: scale(0.97); }
.theatre-play svg { width: 0.85rem; height: 0.85rem; fill: currentColor; }
.theatre-play .ico-stop { display: none; }
.theatre-play[aria-pressed="true"] .ico-stop { display: block; }
.theatre-play[aria-pressed="true"] .ico-play { display: none; }

.theatre-frame {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--rule-2);
  border-radius: 6px;
  overflow: hidden;
  background: var(--water);
  touch-action: pan-y;
}
.theatre-frame .geo-svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.theatre-reset {
  position: absolute; top: 0.6rem; right: 0.6rem;
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--rule-2); border-radius: 4px;
  background: color-mix(in srgb, var(--panel) 90%, transparent);
  font-size: 0.68rem; color: var(--ink-2);
  transition: color 0.15s, border-color 0.15s;
}
.theatre-reset:hover { color: var(--signal); border-color: var(--signal); }

.map-tip {
  position: absolute; z-index: 3; left: 0; top: 0;
  width: max-content; max-width: min(17rem, 80%);
  padding: 0.55rem 0.7rem 0.6rem;
  border: 1px solid var(--rule-2); border-radius: 6px;
  background: var(--panel);
  box-shadow: var(--shadow);
  font-size: 0.82rem; line-height: 1.4; color: var(--ink-2);
  pointer-events: none;
  opacity: 0;
  transform: translateY(3px);
  transition: opacity 0.14s var(--ease-out), transform 0.14s var(--ease-out);
}
.map-tip.is-on { opacity: 1; transform: none; }
.map-tip b { display: block; font-size: 0.9rem; color: var(--ink); line-height: 1.25; }
.map-tip .tip-meta { display: block; margin-top: 0.2rem; font-family: var(--font-data); font-size: 0.66rem; color: var(--ink-3); }
.map-tip .tip-note { display: block; margin-top: 0.35rem; }
.map-tip .tip-go { display: block; margin-top: 0.35rem; font-family: var(--font-data); font-size: 0.64rem; color: var(--signal); }

/* The rail: five stops across the four days */
.theatre-rail {
  list-style: none;
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin-top: 0.9rem;
}
.rail-track { position: absolute; left: 0.45rem; right: calc(20% - 0.45rem); top: 0.42rem; height: 1px; background: var(--rule-2); pointer-events: none; }
.rail-fill { position: absolute; inset: 0; background: var(--signal); transform-origin: left; transform: scaleX(0); transition: transform 0.6s var(--ease-in-out); }
.theatre-rail li:not(.rail-track) { min-width: 0; }
.theatre-rail button {
  display: grid; justify-items: start; gap: 0.15rem;
  width: 100%; padding: 0 0.3rem 0.2rem 0;
  text-align: left;
  color: var(--ink-3);
  transition: color 0.18s;
}
.theatre-rail button:hover { color: var(--ink); }
.rail-dot {
  position: relative; z-index: 1;
  width: 0.85rem; height: 0.85rem; margin-bottom: 0.35rem;
  border: 1.5px solid var(--ink-3); border-radius: 50%;
  background: var(--paper);
  transition: background-color 0.2s, border-color 0.2s, transform 0.2s var(--ease-out);
}
.rail-when { font-size: 0.64rem; }
.rail-what { font-size: 0.8rem; font-weight: 600; line-height: 1.2; }
.theatre-rail button.is-past .rail-dot { background: var(--ink-3); }
.theatre-rail button[aria-pressed="true"] { color: var(--ink); }
.theatre-rail button[aria-pressed="true"] .rail-dot { border-color: var(--signal); background: var(--signal); transform: scale(1.15); box-shadow: 0 0 0 4px var(--signal-wash); }

.theatre-cap { margin-top: 0.85rem; min-height: 4.4em; font-size: 0.9rem; line-height: 1.48; color: var(--ink-2); }
.theatre-key { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem 0.95rem; margin-top: 0.35rem; font-family: var(--font-data); font-size: 0.66rem; color: var(--ink-3); }
.theatre-key li { display: inline-flex; align-items: center; gap: 0.35rem; }
.theatre-key svg { width: 0.95rem; height: 0.95rem; overflow: visible; }
.theatre-key .key-note { font-style: normal; }

/* ---------- Map drawing ---------- */
.geo-water { fill: var(--water); }
.geo-grid { fill: none; stroke: var(--geo-grid); stroke-width: 1; vector-effect: non-scaling-stroke; }
.geo-land { fill: var(--geo-in); stroke: var(--geo-coast); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.geo-u { stroke: none; }
.geo-u--other { fill: var(--geo-other); }
.geo-u--pak { fill: var(--geo-pk); }
.geo-u--region { fill: var(--geo-region); }
.geo-border { fill: none; stroke: var(--geo-border); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.geo-border--region { stroke-width: 1.1; }

.pin-g, .geo-lbl { transform: scale(var(--u)); }
.geo-lbl {
  font-family: var(--font-sans);
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.3em;
  fill: var(--ink-3);
  opacity: 0.72;
  pointer-events: none;
}
.geo-lbl--sm { font-size: 8.5px; letter-spacing: 0.18em; }
.geo-lbl--region { font-size: 9px; letter-spacing: 0.2em; fill: color-mix(in srgb, var(--caution) 70%, var(--ink-3)); opacity: 0.9; }
.geo-lbl--sea { font-style: italic; font-weight: 500; fill: var(--blue); opacity: 0.55; letter-spacing: 0.34em; }
.geo-lbl--note { font-style: italic; font-weight: 500; letter-spacing: 0.08em; font-size: 10px; }

.ref-dot { fill: var(--paper); stroke: var(--ink-2); stroke-width: 1.2; }
.ref--home .ref-dot { fill: var(--ink); stroke: none; }
.ref-label {
  font-family: var(--font-sans); font-size: 10.5px; font-style: italic; font-weight: 500;
  fill: var(--ink-2);
  paint-order: stroke; stroke: var(--geo-halo); stroke-width: 3px; stroke-linejoin: round;
  opacity: 0; transition: opacity 0.2s;
}
.ref.is-labelled .ref-label { opacity: 1; }
.ref--home { opacity: 0; transition: opacity 0.3s; }
.theatre[data-state="overview"] .ref--home { opacity: 1; }

.fleet { opacity: 0; transition: opacity 0.4s; pointer-events: none; }
.theatre[data-state="sea"] .fleet, .fleet.is-on { opacity: 1; }
.fleet-hull { fill: var(--blue); }
.fleet-deck { fill: color-mix(in srgb, var(--blue) 60%, var(--paper)); }
.fleet-arc { fill: none; stroke: var(--blue); stroke-width: 1.4; stroke-dasharray: 5 5; vector-effect: non-scaling-stroke; }
.fleet-label { opacity: 1 !important; fill: var(--blue) !important; }

/* Pins. Each kind has its own shape as well as colour. */
.pin, .key-glyph { --k: var(--k-base); }
.pin { cursor: pointer; transition: opacity 0.3s var(--ease-out); }
.pin--camp { --k: var(--k-camp); }
.pin--ad { --k: var(--k-ad); }
.pin--target { --k: var(--k-target); }
.pin--debris { --k: var(--k-debris); }
.pin-ring { fill: var(--geo-halo); stroke: var(--k); stroke-width: 1.7; stroke-linejoin: round; }
.pin--debris .pin-ring { fill: none; stroke-width: 2.4; stroke-linecap: round; }
.pin-dot { fill: var(--k); }
.pin-slash { stroke: var(--k); stroke-width: 1.4; stroke-linecap: round; }
.pin[data-conf="reported"] .pin-dot, .pin[data-conf="unconfirmed"] .pin-dot { display: none; }
.pin[data-conf="unconfirmed"] .pin-ring { stroke-dasharray: 2.5 2; }
.pin-pulse { fill: none; stroke: var(--k); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.pin-hit { fill: transparent; stroke: none; }
.pin-label {
  font-family: var(--font-data); font-size: 10.5px;
  fill: var(--ink);
  paint-order: stroke; stroke: var(--geo-halo); stroke-width: 3.2px; stroke-linejoin: round;
  opacity: 0; transition: opacity 0.2s;
  pointer-events: none;
}
.pin.is-labelled .pin-label, .pin.is-hot .pin-label, .pin-label.is-shown { opacity: 1; }
.pin.is-focus .pin-label { font-weight: 700; }

/* States set by the script: now (this step), past (earlier steps), off */
.js .theatre .pin { opacity: 0; pointer-events: none; }
.js .theatre .pin.is-now { opacity: 1; pointer-events: auto; }
.js .theatre .pin.is-past { opacity: 0.38; pointer-events: auto; }
.js .theatre .pin.is-past .pin-dot { fill: var(--ink-3); }
.js .theatre .pin.is-past .pin-ring { stroke: var(--ink-3); }
.js .theatre .pin.is-hot, .js .theatre .pin.is-focus { opacity: 1; }
.pin.is-hot .pin-ring, .pin.is-focus .pin-ring { stroke-width: 2.4; }
.pin.is-hot .pin-g, .pin.is-focus .pin-g { transform: scale(calc(var(--u) * 1.35)); }
.pin-g { transition: transform 0.2s var(--ease-out); }

.pin:focus-visible { outline: none; }

/* ---------- Locators (phones and tablets) ---------- */
.locator { margin-block: 1.2rem 1.6rem; }
.locator .geo-svg { display: block; width: 100%; aspect-ratio: 16 / 10; border: 1px solid var(--rule-2); border-radius: 6px; background: var(--water); }
.locator figcaption { margin-top: 0.45rem; font-size: 0.7rem; color: var(--ink-3); }
.locator .pin { cursor: default; }

/* ---------- Wide screens: map rides beside the text ---------- */
@media (min-width: 1180px) {
  .inv {
    max-width: none;
    grid-template-columns: minmax(0, var(--measure)) minmax(23rem, 1fr);
    column-gap: clamp(2.5rem, 4.5vw, 4.75rem);
    align-items: start;
  }
  .inv-cover { grid-column: 1; grid-row: 1; }
  .inv-text { grid-column: 1; grid-row: 2; }
  .inv-map {
    grid-column: 2; grid-row: 1 / span 2;
    position: sticky; top: var(--map-top);
    margin: clamp(1.5rem, 4vw, 3rem) 0 0;
  }
  .locator { display: none; }
}
@media (min-width: 1180px) and (max-height: 820px) {
  .theatre-frame { aspect-ratio: 16 / 11; }
  .theatre-cap { min-height: 3em; }
  .theatre-key { display: none; }
}
@media (max-width: 1179.98px) {
  .theatre-frame { aspect-ratio: 1 / 1; }
}
@media (max-width: 1179.98px) and (min-width: 600px) {
  .theatre-frame { aspect-ratio: 5 / 4; }
}
@media (max-width: 560px) {
  .inv-facts { grid-template-columns: 1fr; }
  .inv-facts > div { padding: 0.65rem 0 0; }
  .inv-facts > div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); margin-top: 0.65rem; }
  .theatre-play span { display: none; }
  .theatre-play { width: 2.4rem; padding: 0; justify-content: center; }
  .rail-when { font-size: 0.58rem; }
  .rail-what { font-size: 0.72rem; }
  .theatre-title { font-size: 1.3rem; }
}

/* ---------- Lightbox ---------- */
.lightbox {
  width: min(100% - 1.5rem, 72rem);
  max-width: none;
  max-height: calc(100dvh - 1.5rem);
  margin: auto;
  padding: 0.8rem;
  border: 1px solid var(--rule-2);
  border-radius: 8px;
  background: var(--panel);
  color: var(--ink);
}
.lightbox[open] { animation: lb-in 0.2s var(--ease-out); }
.lightbox::backdrop { background: rgba(6, 10, 16, 0.8); }
.lightbox[open]::backdrop { animation: lb-fade 0.2s var(--ease-out); }
@keyframes lb-in { from { opacity: 0; transform: scale(0.98); } }
@keyframes lb-fade { from { opacity: 0; } }
.lightbox img { display: block; width: 100%; max-height: calc(100dvh - 8rem); object-fit: contain; border-radius: 4px; }
.lightbox-cap { margin-top: 0.7rem; max-width: 60rem; font-size: 0.9rem; line-height: 1.5; color: var(--ink-2); }
.lightbox-close {
  position: absolute; top: 1.2rem; right: 1.2rem; z-index: 1;
  display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--panel) 88%, transparent);
  border: 1px solid var(--rule-2);
}
.lightbox-close svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.inv-end { border-top: 1px solid var(--rule); margin-top: 1rem; }

@media (prefers-reduced-motion: reduce) {
  .rail-fill, .pin, .pin-g, .map-tip, .fig-zoom, .js .annun .annun-lamp { transition: none; }
  .lightbox[open], .lightbox[open]::backdrop { animation: none; }
}