/* Film grammar shared by every station, loaded last so it wins the cascade.
   One cold light, one warm light. No monospace. No cards, no pills —
   words sit directly on the picture, held up only by the darkness around them. */

:root {
  --moon: #c9d5e2;
  --accent: var(--moon);
  --mono: var(--sans, "Inter", system-ui, sans-serif);
}

/* Bloom overlay (see station-film.js) */
.film-bloom {
  position: absolute;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.42;
  filter: blur(6px);
  transition: opacity 1.2s ease;
}

/* When the settling words arrive, the scene dims behind them — no card needed */
#c {
  transition: filter 1.2s ease;
}
body:has(.exit.show) #c {
  filter: brightness(0.16) saturate(0.7) blur(2px);
}
body:has(.exit.show) .film-bloom {
  opacity: 0.12;
}

/* Chapter labels ("01 · Inside the Frame") narrate the structure instead of enacting it,
   and when embedded the page scroll — not these buttons — drives the station. */
.nav-pills {
  display: none !important;
}

/* Anything that used to be a panel: the settle card, the question box, the verdict callback */
.exit,
.q-box,
.verdict-callback,
.story-card,
.nav-pills {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.exit,
.q-box,
.verdict-callback {
  text-shadow: 0 1px 2px rgba(2, 4, 8, 0.9), 0 0 32px rgba(2, 4, 8, 0.95);
}

/* Anything that used to be a pill or button: plain serif words that warm on hover */
.exit-btn,
.exit-link,
.exit-lab-link,
.nav-pill,
.stab,
.btn-deeper,
.deeper,
button.go {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0.35em 0.15em !important;
  font-family: var(--serif) !important;
  font-style: italic;
  font-weight: 400 !important;
  font-size: clamp(1.1rem, 1.9vw, 1.45rem) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--muted, #9aa8b8) !important;
  transition: color 0.5s ease !important;
}

.exit-btn,
.exit-link {
  color: var(--gold) !important;
}

/* the closing line is the settle: large enough to land, with room around it */
.exit .lead {
  font-family: var(--serif) !important;
  font-size: clamp(1.6rem, 3.6vw, 2.6rem) !important;
  line-height: 1.3 !important;
  margin-bottom: 0.9em !important;
}
.exit .sublead {
  font-size: clamp(1.1rem, 2vw, 1.45rem) !important;
}
.exit-flow {
  gap: 0.6em !important;
}

.exit-btn:hover,
.exit-link:hover,
.exit-lab-link:hover,
.nav-pill:hover,
.stab:hover,
.btn-deeper:hover,
.deeper:hover,
.nav-pill.active,
.stab.active {
  color: var(--pale, #f4ede0) !important;
  background: transparent !important;
  transform: none !important;
}

.exit-btn span,
.exit-btn * {
  font-family: inherit !important;
}

/* Small uppercase labels: keep them quiet and in the sans, never technical */
.eyebrow,
.q-eyebrow,
.verdict-label,
.sc-tag,
.cmi-tag,
.hint {
  font-family: var(--sans) !important;
  letter-spacing: 0.22em !important;
}