/* satellite-v2.css — Magna Satellite v2
 *
 * Bone-white sacred-architecture sky composition.
 * Typography contract:
 *   Cinzel       — headlines, section markers (display)
 *   Cormorant    — editorial body, italic distance annotations
 *   JetBrains    — timestamps, coordinates, instrument names (UI mono)
 */

body.satellite-v2 {
  --s2-bg:        #04060d;
  --s2-bg-deep:   #02030a;
  --s2-bg-panel:  rgba(10, 12, 22, 0.66);
  --s2-fg:        #e8e6dd;            /* warm bone-white, not pure white */
  --s2-fg-strong: #f6f4ec;
  --s2-fg-muted:  rgba(232, 230, 221, 0.55);
  --s2-fg-dim:    rgba(232, 230, 221, 0.30);
  --s2-fg-fade:   rgba(232, 230, 221, 0.12);
  --s2-gold:      #d4af37;
  --s2-rule:      rgba(232, 230, 221, 0.10);
  --s2-display:   'Cinzel', 'Times New Roman', serif;
  --s2-serif:     'Cormorant Garamond', 'Cinzel', 'Times New Roman', serif;
  --s2-mono:      'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  background: var(--s2-bg);
  color: var(--s2-fg);
  font-family: var(--s2-mono);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ─── HERO (above-the-fold) ─────────────────────────────────────────────── */
.s2-hero {
  position: relative;
  width: 100%;
  padding: 80px 0 16px;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(0, 2fr);
  /* Content row is auto (sized to the editorial column), NOT 1fr — a 1fr row
     stretches the sky panel to fill 100vh, which on a maximized desktop forces
     the GOES map (a 5:3 image) into a near-square frame and cover-crops ~18%
     off each coast. align-content:center then centers the whole spread in the
     viewport instead of stretching the rows to fill it. */
  grid-template-rows: auto auto;
  align-content: space-between;
  grid-template-areas:
    "editorial sky"
    "timeline  timeline";
  column-gap: 32px;
  row-gap: 16px;
  padding-left: max(28px, env(safe-area-inset-left));
  padding-right: max(28px, env(safe-area-inset-right));
  box-sizing: border-box;
}
.s2-hero-editorial { grid-area: editorial; align-self: center; max-width: 480px; }
.s2-hero-sky       { grid-area: sky; position: relative; min-height: 420px; }
.s2-hero-timeline  { grid-area: timeline; }

/* ─── EDITORIAL COLUMN ─────────────────────────────────────────────────── */
.mside-host {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.mside-date {
  font-family: var(--s2-display);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  color: var(--s2-gold);
  font-weight: 500;
}
.mside-headline {
  font-family: var(--s2-display);
  font-weight: 500;
  font-size: clamp(1.6rem, 2.6vw + 0.6rem, 2.85rem);
  line-height: 1.12;
  margin: 0;
  color: var(--s2-fg-strong);
  letter-spacing: 0.005em;
}
.mside-dek {
  font-family: var(--s2-serif);
  font-size: 1.18rem;
  line-height: 1.5;
  color: var(--s2-fg);
  max-width: 38ch;
  font-weight: 400;
}
.mside-body {
  font-family: var(--s2-serif);
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--s2-fg-muted);
  max-width: 42ch;
  font-weight: 400;
}
.mside-meta {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mside-listen {
  appearance: none;
  background: transparent;
  border: 1px solid var(--s2-fg-fade);
  color: var(--s2-fg-strong);
  font-family: var(--s2-display);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  padding: 9px 18px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  width: fit-content;
  transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
}
.mside-listen:hover { border-color: var(--s2-gold); color: var(--s2-gold); }
.mside-listen-glyph {
  display: inline-block;
  width: 0.9em; text-align: center;
  font-size: 0.85em;
  font-family: var(--s2-mono);
  letter-spacing: 0;
  opacity: 0.85;
}
.mside-listen-label { font-weight: 600; }
.mside-listen-time {
  font-family: var(--s2-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--s2-fg-muted);
}
.mside-listen-progress {
  width: 100%;
  max-width: 240px;
  height: 1px;
  background: var(--s2-fg-fade);
  margin-top: 8px;
  opacity: 0;
  transition: opacity 200ms ease;
}
.mside-host.is-playing .mside-listen-progress { opacity: 1; }
.mside-listen-progress span {
  display: block; height: 100%;
  width: 0%;
  background: var(--s2-gold);
  transition: width 80ms linear;
}
.mside-context {
  font-family: var(--s2-mono);
  font-size: 0.7rem;
  letter-spacing: 0.10em;
  color: var(--s2-fg-muted);
  margin-top: 8px;
}

/* ─── SKY COMPOSITION ───────────────────────────────────────────────── */
.msky-host {
  width: 100%;
  height: 100%;
  min-height: 420px;
  background:
    radial-gradient(ellipse at center, rgba(14, 18, 32, 0.55) 0%, var(--s2-bg) 70%);
  border-radius: 4px;
  overflow: hidden;
}
.msky-host canvas, .msky-host svg {
  display: block;
  width: 100%;
  height: 100%;
}
.msky-hero text {
  paint-order: stroke;
  pointer-events: none;
}
.msky-ring-pulse {
  animation: msky-ring 1.6s ease-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes msky-ring {
  0%   { stroke-opacity: 0.85; transform: scale(1); }
  100% { stroke-opacity: 0;    transform: scale(3.2); }
}
.msky-breath {
  animation: msky-breath 3.6s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes msky-breath {
  0%, 100% { transform: scale(1);    opacity: 0.85; }
  50%      { transform: scale(1.6);  opacity: 1; }
}
.msky-signal { transition: filter 160ms ease; }
.msky-signal:hover { filter: drop-shadow(0 0 4px currentColor) brightness(1.2); }
@media (prefers-reduced-motion: reduce) {
  .msky-ring-pulse, .msky-breath { animation: none; }
}

/* ─── TIMELINE RIBBON ──────────────────────────────────────────────────── */
.mline-host {
  width: 100%;
  background: linear-gradient(to bottom,
    rgba(232, 230, 221, 0.02) 0%,
    rgba(232, 230, 221, 0.05) 50%,
    rgba(232, 230, 221, 0.02) 100%);
  border-top: 1px solid var(--s2-rule);
  border-bottom: 1px solid var(--s2-rule);
  padding: 4px 0;
}
.mline-multimessenger { animation: mline-mm-pulse 2.4s ease-in-out infinite; }
@keyframes mline-mm-pulse {
  0%, 100% { stroke-opacity: 0.62; }
  50%      { stroke-opacity: 0.95; }
}

/* ─── KICKERS ──────────────────────────────────────────────────────────── */
.s2-kickers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  padding: 56px 32px 40px;
  border-top: 1px solid var(--s2-rule);
  margin-top: 24px;
}
.s2-kicker {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 12px;
  border-right: 1px solid var(--s2-fg-fade);
}
.s2-kicker:last-child { border-right: none; }
.s2-kicker-type {
  font-family: var(--s2-mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  color: var(--s2-fg-muted);
}
.s2-kicker-headline {
  font-family: var(--s2-display);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--s2-fg-strong);
  margin: 0;
}
.s2-kicker-dek {
  font-family: var(--s2-serif);
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--s2-fg-muted);
  margin: 0;
}

/* ─── INSTRUMENT REGISTER ──────────────────────────────────────────────── */
.s2-section {
  padding: 48px 32px 24px;
}
.s2-section-title {
  font-family: var(--s2-display);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  color: var(--s2-gold);
  margin-bottom: 22px;
  display: flex;
  align-items: baseline;
  gap: 14px;
}
.s2-section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--s2-rule);
  margin-left: 4px;
}

.minst-host {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.minst-summary {
  font-family: var(--s2-mono);
  font-size: 0.78rem;
  letter-spacing: 0.10em;
  color: var(--s2-fg-muted);
}
.minst-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.minst-chip {
  appearance: none;
  background: transparent;
  border: 1px solid var(--s2-fg-fade);
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--s2-fg);
  font-family: var(--s2-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}
.minst-chip:hover, .minst-chip.is-active {
  border-color: var(--s2-gold);
  background: rgba(212, 175, 55, 0.04);
}
.minst-dot {
  width: 7px; height: 7px; border-radius: 50%;
  display: inline-block; flex-shrink: 0;
}
.minst-chip-green .minst-dot { background: #34d399; box-shadow: 0 0 6px rgba(52,211,153,0.5); }
.minst-chip-amber .minst-dot { background: #fbbf24; }
.minst-chip-red   .minst-dot { background: #f43f5e; }
.minst-chip-grey  .minst-dot { background: rgba(232,230,221,0.20); }
.minst-name { font-weight: 600; letter-spacing: 0.12em; }
.minst-hb   { color: var(--s2-fg-muted); font-size: 0.65rem; }
.minst-count {
  color: var(--s2-gold);
  font-size: 0.65rem;
  border-left: 1px solid var(--s2-fg-fade);
  padding-left: 9px;
}

/* ─── LENS EXPLORER + WATCHLIST ────────────────────────────────────────── */
.s2-lenses {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.s2-lens-pill {
  appearance: none;
  background: transparent;
  border: 1px solid var(--s2-fg-fade);
  padding: 6px 12px;
  font-family: var(--s2-mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  color: var(--s2-fg);
  cursor: pointer;
  display: inline-flex;
  gap: 7px;
  align-items: center;
}
.s2-lens-pill:hover, .s2-lens-pill.is-active {
  border-color: var(--s2-gold);
  color: var(--s2-gold);
}
.s2-watchlist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
}
.s2-watch-item {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--s2-rule);
  align-items: center;
}
.s2-watch-thumb {
  width: 48px; height: 24px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--s2-fg-fade);
  border-radius: 2px;
  flex-shrink: 0;
}
.s2-watch-name {
  font-family: var(--s2-mono);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  color: var(--s2-fg);
}
.s2-watch-meta {
  font-family: var(--s2-mono);
  font-size: 0.62rem;
  color: var(--s2-fg-muted);
  margin-top: 2px;
}

/* ─── FOOTER PROVENANCE ────────────────────────────────────────────────── */
.s2-prov {
  padding: 32px 32px 64px;
  border-top: 1px solid var(--s2-rule);
  margin-top: 32px;
  font-family: var(--s2-mono);
  font-size: 0.66rem;
  color: var(--s2-fg-muted);
  letter-spacing: 0.06em;
  line-height: 1.7;
}
.s2-prov a { color: var(--s2-fg); text-decoration: none; border-bottom: 1px solid var(--s2-fg-fade); }
.s2-prov a:hover { color: var(--s2-gold); border-color: var(--s2-gold); }

/* ─── EMPTY / LOADING STATES ───────────────────────────────────────────── */
.s2-empty {
  font-family: var(--s2-serif);
  font-style: italic;
  color: var(--s2-fg-muted);
  font-size: 1rem;
  padding: 24px 0;
}

/* ─── HERO OVERLAY — variant compositions ──────────────────────────────── */
.s2-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  overflow: hidden;
  display: none;
  pointer-events: none;
}
.s2-hero-overlay.is-active { display: block; pointer-events: auto; }

/* When a non-cosmic variant is active, hide the sky-engine layers behind it so
   the Mollweide star-dots don't show through. The engine mounts its layers as
   direct children of .s2-hero-sky — canvas.msky-stars, canvas.msky-ambient and
   two bare <svg>s — NOT a wrapping .msky-host, so the old `.msky-host` selector
   matched nothing and the dots leaked through any uncovered band (e.g. the
   letterbox below a top-anchored GOES map). Target the real layers directly.
   The overlay <div> is the only direct child we keep visible. Cosmic variant
   leaves them visible and only adds depth treatments. */
.s2-hero-sky[data-hero-variant="amber"]    > canvas,
.s2-hero-sky[data-hero-variant="amber"]    > svg,
.s2-hero-sky[data-hero-variant="earthGeo"] > canvas,
.s2-hero-sky[data-hero-variant="earthGeo"] > svg,
.s2-hero-sky[data-hero-variant="solar"]    > canvas,
.s2-hero-sky[data-hero-variant="solar"]    > svg { visibility: hidden; }

/* ─── AMBER / Earth-geo shared map + stamp ──────────────────────────────── */
.s2-amber-map {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #0a0d18 0%, #04060d 100%);
}
.s2-amber-map .leaflet-container {
  background: #04060d !important;
  height: 100%; width: 100%;
  font-family: var(--s2-mono);
}
.s2-amber-map.s2-amber-map-fallback {
  background: repeating-linear-gradient(45deg,
    rgba(212, 175, 55, 0.02) 0 14px,
    transparent 14px 28px), #04060d;
}

.s2-amber-stamp {
  position: absolute;
  top: 14px; left: 16px; z-index: 1000;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 11px;
  background: rgba(5, 8, 17, 0.78);
  border: 1px solid rgba(239, 68, 68, 0.35);
  font-family: var(--s2-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  color: rgba(255, 220, 220, 0.92);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.s2-amber-pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: #ef4444;
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  animation: s2-amber-pulse 1.6s ease-out infinite;
}
@keyframes s2-amber-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(239, 68, 68, 0.7); }
  70%  { box-shadow: 0 0 0 11px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0   rgba(239, 68, 68, 0); }
}

.s2-amber-meta {
  position: absolute;
  top: 14px; right: 16px; z-index: 1000;
  text-align: right;
  font-family: var(--s2-mono);
  text-shadow: 0 1px 2px rgba(0,0,0,0.7);
}
.s2-amber-agency {
  font-size: 0.66rem;
  letter-spacing: 0.18em;
  color: var(--s2-gold);
  text-transform: uppercase;
}
.s2-amber-time {
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: var(--s2-fg-muted);
  margin-top: 3px;
}

.s2-amber-chips {
  position: absolute;
  bottom: 16px; left: 16px; right: 16px; z-index: 1000;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.s2-amber-chip {
  appearance: none;
  background: rgba(5, 8, 17, 0.7);
  border: 1px solid rgba(212, 175, 55, 0.42);
  padding: 5px 10px;
  font-family: var(--s2-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: var(--s2-gold);
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: border-color 160ms ease, background 160ms ease, transform 120ms ease;
}
.s2-amber-chip:hover {
  border-color: var(--s2-gold);
  background: rgba(212, 175, 55, 0.10);
  transform: translateY(-1px);
}

.s2-amber-cta {
  position: absolute;
  right: 16px; bottom: 16px; z-index: 1001;
  font-family: var(--s2-display);
  font-size: 0.7rem;
  letter-spacing: 0.20em;
  color: var(--s2-fg-strong);
  text-decoration: none;
  padding: 8px 14px;
  background: rgba(212, 175, 55, 0.10);
  border: 1px solid var(--s2-gold);
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
  transition: background 160ms ease, color 160ms ease;
}
.s2-amber-cta:hover {
  background: var(--s2-gold);
  color: #1a1a1a;
}

/* Pins (amber + earth) */
.s2-amber-pin-wrap, .s2-earth-pin-wrap { background: transparent !important; border: none !important; }
.s2-amber-pin, .s2-earth-pin {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid #fff;
  animation: s2-pin-ring 2.2s ease-out infinite;
}
.s2-amber-pin {
  background: rgba(212, 175, 55, 0.92);
  box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.22), 0 0 22px rgba(212, 175, 55, 0.55);
}
.s2-earth-pin {
  background: rgba(239, 68, 68, 0.92);
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.22), 0 0 22px rgba(239, 68, 68, 0.55);
}
@keyframes s2-pin-ring {
  0%   { box-shadow: 0 0 0 0   rgba(212, 175, 55, 0.55), 0 0 18px rgba(212, 175, 55, 0.5); }
  70%  { box-shadow: 0 0 0 18px rgba(212, 175, 55, 0),    0 0 18px rgba(212, 175, 55, 0.2); }
  100% { box-shadow: 0 0 0 0   rgba(212, 175, 55, 0),    0 0 18px rgba(212, 175, 55, 0.5); }
}

/* ─── SOLAR variant ────────────────────────────────────────────────────── */
.s2-solar-canvas {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, #1a0e02 0%, #04060d 70%);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.s2-solar-disc {
  max-width: 78%; max-height: 78%;
  filter: contrast(1.06) saturate(1.15) brightness(1.04);
  border-radius: 50%;
  box-shadow: 0 0 80px rgba(255, 140, 60, 0.35), 0 0 180px rgba(255, 80, 30, 0.18);
}
.s2-solar-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, transparent 50%, rgba(4, 6, 13, 0.65) 100%);
  pointer-events: none;
}
.s2-solar-meta { color: rgba(255, 200, 130, 0.9); }
.s2-solar-meta .s2-amber-agency { color: rgba(255, 200, 130, 0.95); }

/* ─── COSMIC depth treatment (sky-engine still renders behind) ─────────── */
.s2-cosmic-band {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 12% at 50% 50%, rgba(168, 184, 224, 0.10) 0%, transparent 70%),
    radial-gradient(ellipse 60%  8% at 50% 50%, rgba(232, 230, 221, 0.06) 0%, transparent 70%);
  pointer-events: none;
}
.s2-cosmic-vignette {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, transparent 55%, rgba(4, 6, 13, 0.85) 100%);
  pointer-events: none;
}

/* ─── QUIET fallback ───────────────────────────────────────────────────── */
.s2-quiet-mark {
  position: absolute;
  top: 50%; left: 0; right: 0;
  transform: translateY(-50%);
  text-align: center;
  font-family: var(--s2-display);
  font-size: 0.85rem;
  letter-spacing: 0.30em;
  color: var(--s2-fg-dim);
  pointer-events: none;
}

/* ─── EDITORIAL — eyebrow above headline + body link affordance ────────── */
.mside-eyebrow {
  font-family: var(--s2-display);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  font-weight: 600;
  color: #d4af37;
  margin-bottom: 2px;
  text-transform: uppercase;
}

/* ─── KICKERS — clickable affordance ───────────────────────────────────── */
.s2-kicker {
  cursor: pointer;
  transition: transform 180ms ease, opacity 180ms ease;
}
.s2-kicker:hover {
  transform: translateY(-2px);
  opacity: 1;
}
.s2-kicker:hover .s2-kicker-headline { color: var(--s2-gold); }

/* Earth kickers — red-tinted left rule */
.s2-kicker-earth {
  padding-left: 14px;
  border-left: 2px solid rgba(239, 68, 68, 0.6);
}
.s2-kicker-earth[data-level="CRITICAL"] {
  border-left-color: #ef4444;
  background: linear-gradient(to right, rgba(239, 68, 68, 0.04), transparent 60%);
}
.s2-kicker-earth[data-level="WARNING"] {
  border-left-color: #fbbf24;
}

/* ─── DRAWER ───────────────────────────────────────────────────────────── */
body.s2-drawer-locked { overflow: hidden; }
.s2-drawer {
  position: fixed; inset: 0;
  z-index: 1200;
  pointer-events: none;
}
.s2-drawer-scrim {
  position: absolute; inset: 0;
  background: rgba(4, 6, 13, 0);
  transition: background 260ms ease;
  pointer-events: none;
}
.s2-drawer.is-open .s2-drawer-scrim {
  background: rgba(4, 6, 13, 0.62);
  pointer-events: auto;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.s2-drawer-panel {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: min(560px, 92vw);
  background: linear-gradient(180deg, #07090f 0%, #04060d 100%);
  border-left: 1px solid var(--s2-rule);
  box-shadow: -24px 0 60px rgba(0, 0, 0, 0.55);
  transform: translateX(100%);
  transition: transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
  overflow-y: auto;
  overflow-x: hidden;
  pointer-events: auto;
  outline: none;
}
.s2-drawer.is-open .s2-drawer-panel { transform: translateX(0); }
.s2-drawer-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 32px; height: 32px;
  appearance: none;
  background: transparent;
  border: 1px solid var(--s2-fg-fade);
  color: var(--s2-fg-strong);
  font-size: 14px;
  cursor: pointer;
  font-family: var(--s2-mono);
  z-index: 2;
  transition: border-color 160ms ease, color 160ms ease;
}
.s2-drawer-close:hover { border-color: var(--s2-gold); color: var(--s2-gold); }
.s2-drawer-content {
  padding: 56px 36px 64px;
  color: var(--s2-fg);
}
.s2-drawer-eyebrow {
  font-family: var(--s2-display);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  font-weight: 600;
  color: var(--s2-gold);
  margin-bottom: 12px;
  text-transform: uppercase;
}
.s2-drawer-headline {
  font-family: var(--s2-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.4vw + 0.6rem, 2.2rem);
  line-height: 1.16;
  color: var(--s2-fg-strong);
  margin: 0 0 14px;
  letter-spacing: 0.005em;
}
.s2-drawer-dek {
  font-family: var(--s2-serif);
  font-size: 1.12rem;
  line-height: 1.5;
  color: var(--s2-fg);
  margin: 0 0 18px;
}
.s2-drawer-time {
  font-family: var(--s2-mono);
  font-size: 0.7rem;
  letter-spacing: 0.10em;
  color: var(--s2-fg-muted);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--s2-rule);
  margin-bottom: 18px;
}
.s2-drawer-meta {
  display: flex; flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 22px;
}
.s2-drawer-pill {
  font-family: var(--s2-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  padding: 4px 10px;
  border: 1px solid var(--s2-fg-fade);
  color: var(--s2-fg);
}
.s2-drawer-pill.is-critical { border-color: rgba(239,68,68,0.5); color: #fca5a5; }
.s2-drawer-pill.is-warning  { border-color: rgba(251,191,36,0.5); color: #fcd34d; }
.s2-drawer-pill.is-elevated { border-color: rgba(56,189,248,0.5); color: #7dd3fc; }
.s2-drawer-body {
  font-family: var(--s2-serif);
  font-size: 1.04rem;
  line-height: 1.62;
  color: var(--s2-fg-muted);
  margin-bottom: 24px;
}
.s2-drawer-card {
  margin-top: 14px;
  padding: 12px 14px;
  background: rgba(232, 230, 221, 0.03);
  border-left: 2px solid var(--s2-gold);
}
.s2-drawer-card-label {
  font-family: var(--s2-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: var(--s2-fg-muted);
  margin-bottom: 4px;
}
.s2-drawer-card-value {
  font-family: var(--s2-mono);
  font-size: 0.92rem;
  color: var(--s2-fg-strong);
  word-break: break-word;
}
.s2-drawer-cta {
  display: inline-block;
  margin-top: 22px;
  padding: 11px 18px;
  font-family: var(--s2-display);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  color: var(--s2-fg-strong);
  text-decoration: none;
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid var(--s2-gold);
  transition: background 160ms ease, color 160ms ease;
}
.s2-drawer-cta:hover {
  background: var(--s2-gold);
  color: #1a1a1a;
}

/* ─── DRAWER — live source + related links ────────────────────────────── */
.s2-drawer-loading {
  font-family: var(--s2-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--s2-fg-dim);
  padding: 14px 0;
  text-align: center;
  border: 1px dashed var(--s2-fg-fade);
  margin-bottom: 16px;
}
.s2-drawer-empty {
  font-family: var(--s2-serif);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--s2-fg-muted);
  padding: 12px 0;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--s2-rule);
}
.s2-drawer-source-body {
  white-space: pre-wrap;
  font-family: var(--s2-serif);
  font-size: 1.04rem;
  line-height: 1.6;
  color: var(--s2-fg);
  border-left: 2px solid var(--s2-gold);
  padding: 4px 0 4px 14px;
  margin-left: 0;
}
.s2-drawer-instruction { border-left-color: rgba(239, 68, 68, 0.6); }
.s2-drawer-instruction .s2-drawer-card-value {
  font-family: var(--s2-serif);
  font-size: 1rem;
  line-height: 1.5;
  white-space: pre-wrap;
}
.s2-drawer-related {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--s2-rule);
}
.s2-drawer-related .s2-drawer-card-label {
  margin-bottom: 12px;
}
.s2-drawer-related-link {
  display: block;
  font-family: var(--s2-display);
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  color: var(--s2-fg);
  text-decoration: none;
  padding: 10px 0;
  border-bottom: 1px solid var(--s2-fg-fade);
  transition: color 160ms ease, padding-left 160ms ease, border-color 160ms ease;
}
.s2-drawer-related-link:last-child { border-bottom: none; }
.s2-drawer-related-link:hover {
  color: var(--s2-gold);
  padding-left: 6px;
  border-bottom-color: var(--s2-gold);
}

/* ─── KICKER — outbound indicator ──────────────────────────────────────── */
.s2-kicker::after {
  content: 'READ →';
  display: inline-block;
  margin-top: 8px;
  font-family: var(--s2-mono);
  font-size: 0.58rem;
  letter-spacing: 0.20em;
  color: var(--s2-fg-dim);
  align-self: flex-start;
  transition: color 160ms ease;
}
.s2-kicker:hover::after { color: var(--s2-gold); }

/* ─── DRAWER responsive ────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .s2-drawer-panel { width: 100vw; }
  .s2-drawer-content { padding: 56px 22px 56px; }
  .s2-amber-chips { gap: 4px; }
  .s2-amber-chip { font-size: 0.58rem; padding: 4px 8px; }
  .s2-amber-stamp { font-size: 0.6rem; padding: 5px 9px; }
  .s2-amber-meta { right: 12px; top: 12px; }
  .s2-amber-agency { font-size: 0.58rem; }
}

/* ─── RESPONSIVE ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .s2-hero {
    grid-template-columns: 1fr;
    grid-template-areas:
      "editorial"
      "sky"
      "timeline";
    min-height: auto;
    padding-top: 96px;
  }
  .s2-hero-editorial { max-width: none; }
  .s2-hero-sky { min-height: 56vw; }
  .s2-kickers {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .s2-kicker { border-right: none; border-bottom: 1px solid var(--s2-fg-fade); padding-bottom: 18px; padding-right: 0; }
  .s2-kicker:last-child { border-bottom: none; }
}
@media (max-width: 640px) {
  /* Edge-to-edge hero map at phone widths — wipe the grid auto-margin AND
     parent padding for the sky tile, but keep editorial column padded.
     Also kill the browser default body margin (8px) that was the last
     residual indent. */
  body.satellite-page { margin: 0; }
  .s2-hero {
    padding-left: 0;
    padding-right: 0;
    column-gap: 0;
    grid-template-columns: 1fr;
  }
  .s2-hero-editorial { padding: 0 18px; max-width: none; margin: 0; }
  .s2-hero-sky { margin: 0; padding: 0; min-height: 70vw; border-radius: 0; }
  .s2-hero-timeline { padding: 0; }
  .s2-section { padding: 32px 18px 18px; }
  .s2-prov { padding: 24px 18px 48px; }
  .s2-kickers { padding: 32px 18px; }
  .mside-headline { font-size: clamp(1.45rem, 6vw, 2rem); }
  .mside-dek { font-size: 1.05rem; }

  /* Compact transport pill — drop the label */
  .s2-goes-hud { gap: 6px; padding: 4px 10px 4px 6px; font-size: 9.5px; }
  .s2-goes-label { display: none; }
  .s2-goes-frame-btn { width: 14px; }

  /* Timeline ribbon scrolls horizontally so 13 lanes stay legible — but
     hide the scrollbar (touch scroll still works, swipe to pan). */
  .mline-host {
    overflow-x: auto; overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;          /* Firefox */
    -ms-overflow-style: none;       /* legacy Edge / IE */
  }
  .mline-host::-webkit-scrollbar { display: none; width: 0; height: 0; }
  .mline-svg { min-width: 560px; }
}

/* ─── Earth-geo host (NOAA STAR time-lapse, replaces Leaflet) ──────────── */
/* The GOES-19 CONUS GeoColor JPG is 1250x750 (5:3). object-fit:cover (set in
   earth-monitor-shared.js) fills the host and crops the overflow, so the host
   MUST hold the map's native 5:3 aspect or the coasts get clipped. We constrain
   the host to 5:3 and TOP-anchor it in the (taller) panel — a long NWS headline
   makes the editorial column taller than the 5:3 image, so centering left dead
   black space above the map and pushed its bottom below the fold. Anchoring to
   the top pins the map beside the headline (no wasted space above) and collects
   any leftover band at the bottom by the timeline, where it reads as quiet. */
.s2-hero-overlay.s2-hero-earth.is-active {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.s2-earth-host {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 3;
  max-height: 100%;
  background: #04060d;
  overflow: hidden;
  border-radius: inherit;
}
.s2-earth-host .em-noaa-star-stack { border-radius: inherit; }
/* NOAA burns a white credit strip onto the bottom ~4% of every JPG. Clip it
   off and replace with our own neon-green-on-black credit bar below. */
.s2-earth-host .em-noaa-star-stack img { clip-path: inset(0 0 4.5% 0); }
.s2-earth-credit {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 450;
  height: 22px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #000;
  color: #00ff88;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-shadow: 0 0 6px rgba(0,255,136,0.55), 0 0 14px rgba(0,255,136,0.25);
  border-top: 1px solid rgba(0,255,136,0.32);
  pointer-events: none;
  user-select: none;
}
.s2-earth-credit .sec { color: #00ff88; opacity: 0.85; }
.s2-earth-credit .dim { color: rgba(0,255,136,0.45); }

/* ─── GOES transport HUD (Earth-geo hero) ──────────────────────────────── */
.s2-goes-hud {
  position: absolute;
  top: 10px; left: 10px;
  z-index: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px 6px 8px;
  background: rgba(6,10,18,0.72);
  border: 1px solid rgba(255,107,53,0.32);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: rgba(240,245,255,0.85);
  text-transform: uppercase;
  pointer-events: auto;
  user-select: none;
}
.s2-goes-toggle {
  background: transparent; border: 0; padding: 0; margin: 0;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  cursor: pointer;
  touch-action: manipulation;
}
.s2-goes-toggle:focus-visible { outline: 1px solid #ff6b35; outline-offset: 2px; border-radius: 50%; }
.s2-goes-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #ff6b35;
  box-shadow: 0 0 8px #ff6b35, 0 0 14px rgba(255,107,53,0.5);
  animation: s2-goes-pulse 1.4s ease-in-out infinite;
}
.s2-goes-dot.paused {
  animation: none;
  background: rgba(240,245,255,0.45);
  box-shadow: none;
}
@keyframes s2-goes-pulse {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%      { transform: scale(1.35); opacity: 0.65; }
}
.s2-goes-label { color: rgba(240,245,255,0.55); white-space: nowrap; }
.s2-goes-stamp { color: #ff6b35; font-weight: 600; min-width: 6ch; }
.s2-goes-frames {
  display: inline-flex; align-items: center; gap: 2px;
  margin: 0 2px;
}
.s2-goes-frame-btn {
  background: transparent; border: 0; padding: 0; margin: 0;
  width: 16px; height: 28px;
  display: grid; place-items: center;
  cursor: pointer;
  touch-action: manipulation;
}
.s2-goes-frame-btn:focus-visible { outline: 1px solid #ff6b35; outline-offset: 1px; border-radius: 4px; }
.s2-goes-frame-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,107,53,0.32);
  transition: background 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}
.s2-goes-frame-btn:hover .s2-goes-frame-dot { background: rgba(255,107,53,0.62); transform: scale(1.25); }
.s2-goes-frame-btn.is-current .s2-goes-frame-dot {
  background: #ff6b35;
  transform: scale(1.4);
  box-shadow: 0 0 6px #ff6b35, 0 0 10px rgba(255,107,53,0.55);
}
.s2-goes-frame-btn.is-dead { cursor: not-allowed; }
.s2-goes-frame-btn.is-dead .s2-goes-frame-dot {
  background: rgba(255,255,255,0.10);
  box-shadow: none;
  transform: none;
}
.s2-goes-frame-btn.is-dead:hover .s2-goes-frame-dot {
  background: rgba(255,255,255,0.10);
  transform: none;
}

/* ─── Multimessenger timeline: touch + resonance ───────────────────────── */
.mline-tick-hit { cursor: pointer; touch-action: manipulation; }
.mline-tick.is-resonant {
  filter: drop-shadow(0 0 4px rgba(212,175,55,0.95));
  stroke-opacity: 1 !important;
}
.mline-resonance-halo {
  fill: rgba(212,175,55,0.18);
  stroke: rgba(212,175,55,0.7);
  stroke-width: 0.6;
  pointer-events: none;
  animation: mline-resonance-fade 1500ms ease-out forwards;
}
@keyframes mline-resonance-fade {
  0%   { opacity: 1;   r: 2; }
  100% { opacity: 0;   r: 9; }
}
@media (prefers-reduced-motion: reduce) {
  .s2-goes-dot { animation: none; }
  .mline-resonance-halo { animation: none; opacity: 0.4; }
}

/* ─── iPhone-class viewports (≤480px) — phone-first pass ───────────────── */
@media (max-width: 480px) {
  /* Edge-to-edge hero map, padded editorial */
  .s2-hero { padding-left: 0; padding-right: 0; padding-top: 88px; }
  .s2-hero-editorial { padding: 0 18px; }
  .s2-hero-sky { min-height: 75vw; border-radius: 0; }

  /* Compact transport pill — drop the label, keep play + dots + time */
  .s2-goes-hud { gap: 6px; padding: 4px 10px 4px 6px; font-size: 9.5px; }
  .s2-goes-label { display: none; }
  .s2-goes-frame-btn { width: 14px; }
  .s2-goes-frame-dot { width: 5px; height: 5px; }

  /* Timeline ribbon — let it scroll horizontally rather than squish */
  .s2-hero-timeline { padding-left: 0; padding-right: 0; overflow: hidden; }
  .mline-host { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
  .mline-svg { min-width: 560px; }
}