/*
 * s-narrative.css
 *
 * Story-specific layer on top of the n-* narrative bundle.
 *
 * Loaded AFTER every n-*.css file in dashboard-story.html, so it can
 * override narrative defaults without rewriting them.
 *
 * Scope:
 * - Story-only components (prefix `.s-*`)
 * - Story-only layout overrides (use `.s-*` parent selector to
 *   contain the blast radius)
 * - The story draft banner
 *
 * Each Phase (B-G) adds its section here. Keep rules grouped by phase
 * + section so cross-referencing the UI plan stays trivial.
 *
 * Companion UI plan:
 *   docs/plan/todo/2026-04-19-dashboard-story-ui-implementation.md
 */

/* ─────────────────────────────────────────────────────────────
   Phase A · Draft banner — REMOVED (2026-04-19 v2.1 visual
   unification plan §4.9). The sticky "STORY DRAFT" banner was
   deleted outright; the /dashboard-story URL is enough of a
   draft signal and the banner argued against the calm editorial
   register we're building. No replacement component.
   ───────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────────
   Page-level paper base (2026-04-19 visual unification plan §0).
   Override .n-page's cool slate background with the warm paper
   tone from s-tokens.css so every section inherits the right
   ground color. Applied only on the story surface
   (`body.n-page--story`) to avoid leaking into /dashboard-narrative.
   ───────────────────────────────────────────────────────────── */
body.n-page--story {
  background: var(--c-paper);
  color: var(--c-ink);
}
body.n-page--story.theme-light {
  background: var(--c-paper);
  color: var(--c-ink);
}

/* ─────────────────────────────────────────────────────────────
   Phase B · Intro modal three-beat slide deck
   Companion controller: static/js/story/s-intro.js
   Copy source:          STORY_STRINGS.intro (s-strings.js)

   As of Phase 10 of the visual-unification rollout
   (docs/plan/todo/2026-04-19-dashboard-story-visual-unification.md):
     - All bright emerald/slate chrome is gone. The modal now reads
       as a quiet academic cover card on warm paper, matching the
       Layer-1 "Why this matters" section behind it.
     - All color / typography / radii come from s-tokens.css so the
       modal adopts the botanical accent and IBM Plex type system
       automatically; light/dark themes also fall out naturally.
   ───────────────────────────────────────────────────────────── */

/* Overlay — heavy backdrop blur + two slow-drifting accent blobs.
   Design rationale (2026-04-20 v3):
     The previous overlay was a nearly-opaque warm-paper wall, which
     left the modal floating in dead space. Now the overlay is mostly
     translucent — a strong backdrop blur softens the live dashboard
     behind, a thin warm tint unifies the theme, and two oversized
     accent-colored blobs drift slowly (32 / 38 s cycles) to give the
     scene a living, atmospheric quality without being distracting.
     On dark mode, every color source is a token so the blobs recolor
     automatically; prefers-reduced-motion disables the drift. */
.s-intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 48px);
  overflow: hidden;      /* clip the drifting blobs */
  isolation: isolate;    /* keep pseudo-elements inside the overlay stack */

  /* Thin warm-paper tint — enough to unify the scene with the
     dashboard's warm palette, low enough that the blurred dashboard
     behind still reads through. */
  background: color-mix(in srgb, var(--c-paper-2) 32%, transparent);

  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  font-family: var(--font-sans);
}

/* Two big soft blobs of accent color drift behind the modal. They are
   positioned off-screen and sized way larger than the viewport so the
   scale/translate motion never exposes an edge. `filter: blur()` on
   the blobs themselves stacks with `backdrop-filter`, giving the
   blobs a painterly feel without needing gradient tweaks. */
.s-intro-overlay::before,
.s-intro-overlay::after {
  content: "";
  position: absolute;
  width: 80vmax;
  height: 80vmax;
  border-radius: 50%;
  filter: blur(48px);
  pointer-events: none;
  z-index: 0;
  will-change: transform;
}
.s-intro-overlay::before {
  top: -20%;
  left: -25%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--c-accent) 34%, transparent) 0%,
    color-mix(in srgb, var(--c-accent) 10%, transparent) 40%,
    transparent 65%
  );
  animation: s-intro-atmos-1 32s ease-in-out infinite;
}
.s-intro-overlay::after {
  bottom: -25%;
  right: -25%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--c-accent-ink) 28%, transparent) 0%,
    color-mix(in srgb, var(--c-accent-ink) 8%, transparent) 45%,
    transparent 70%
  );
  animation: s-intro-atmos-2 38s ease-in-out infinite;
}

@keyframes s-intro-atmos-1 {
  0%,  100% { transform: translate(0, 0) scale(1); }
  50%       { transform: translate(7%, 4%) scale(1.12); }
}
@keyframes s-intro-atmos-2 {
  0%,  100% { transform: translate(0, 0) scale(1.06); }
  50%       { transform: translate(-6%, -7%) scale(0.94); }
}

@media (prefers-reduced-motion: reduce) {
  .s-intro-overlay::before,
  .s-intro-overlay::after {
    animation: none;
  }
}

.s-intro-overlay.hidden { display: none; }

.s-intro-modal {
  position: relative;
  z-index: 2;   /* above the overlay's drifting atmospheric blobs */
  width: min(940px, 100%);
  /* 2026-04-20: bumped from 640px → 760px to accommodate the denser
     Beat 1 (stats strip) and Beat 3 (4-card preview grid). Still
     clamps to 90vh so it's usable on short laptop screens. */
  max-height: min(760px, 90vh);
  background: var(--c-paper);
  color: var(--c-ink);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--el-3);
  display: grid;
  grid-template-rows: 1fr auto;
  overflow: hidden;
}

/* Viewport clips overflow; track translates horizontally between beats.
   Each beat can scroll internally if content overflows the viewport
   (e.g. very small laptop screens). */
.s-intro-viewport {
  position: relative;
  overflow: hidden;
  min-height: 480px;
}

.s-intro-track {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  height: 100%;
  transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.s-intro-overlay--reduced .s-intro-track {
  transition: none;
}

.s-intro-beat {
  flex: 0 0 100%;
  min-width: 100%;
  padding: clamp(24px, 4vw, 48px);
  box-sizing: border-box;
  display: grid;
  place-items: start center;
  /* Internal scroll if a beat's density exceeds the viewport height;
     keeps the horizontal track mechanics intact. */
  overflow-y: auto;
}

.s-intro-beat__inner {
  width: 100%;
  max-width: 700px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Beat 1 hero + stats layout. The hero is a wide-narrow band (16/5)
   so it reads as a kicker banner, not a magazine cover — leaves room
   for the denser body + stats strip underneath. */
.s-intro-beat__inner--with-hero {
  gap: 14px;
}

.s-intro-beat__hero {
  margin: 0;
  padding: 0;
  width: 100%;
  /* Wide-narrow band — reads as an editorial masthead banner, not a
     magazine cover. 16/4 leaves room for the denser body + stats
     strip underneath without pushing the beat into internal-scroll
     territory on normal laptop screens. */
  aspect-ratio: 16 / 4;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--c-paper-2);
  border: 1px solid var(--c-line);
}

.s-intro-beat__hero-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 62%;
}

/* Beat 1 stats strip — four editorial data points under the body,
   in the tradition of newspaper infographics (tiny caps label on top
   of a serif-anchored value). */
.s-intro-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: var(--sp-1);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
}

.s-intro-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-2) var(--sp-2);
  border-left: 1px solid var(--c-line);
}
.s-intro-stat:first-child { border-left: none; }

.s-intro-stat__value {
  font-family: var(--font-serif);
  font-size: var(--fs-18);
  font-weight: var(--fw-medium);
  line-height: 1.1;
  color: var(--c-ink);
  letter-spacing: var(--ls-normal);
}

.s-intro-stat__label {
  font-family: var(--font-sans);
  font-size: var(--fs-11);
  font-weight: var(--fw-regular);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-ink-3);
}

/* Narrower viewports: stack stats 2×2 instead of a single row. */
@media (max-width: 640px) {
  .s-intro-stats { grid-template-columns: repeat(2, 1fr); }
  .s-intro-stat { border-left: 1px solid var(--c-line); }
  .s-intro-stat:nth-child(odd) { border-left: none; }
  .s-intro-stat:nth-child(n+3) { border-top: 1px solid var(--c-line); }
}

.s-intro-beat__kicker {
  font-family: var(--font-sans);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-ink-3);
}

.s-intro-beat__title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-22), 3vw, var(--fs-34));
  font-weight: var(--fw-medium);
  line-height: var(--lh-compact);
  letter-spacing: var(--ls-normal);
  color: var(--c-ink);
  outline: none;
}

.s-intro-beat__body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-15);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-2);
  max-width: var(--prose-max);
}

/* Beat 2 — audience list */
.s-intro-aud-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--sp-3);
}

.s-intro-aud {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: var(--sp-3);
  align-items: start;
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-left: 2px solid var(--c-accent);
  border-radius: var(--r-md);
}

.s-intro-aud__icon {
  width: 24px;
  height: 24px;
  color: var(--c-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.s-intro-aud__icon svg { width: 100%; height: 100%; }

.s-intro-aud__text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.s-intro-aud__label {
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
}

.s-intro-aud__body {
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-2);
}

/* Beat 3 — "What's inside" preview.

   The inner column now holds a kicker, serif title, brief intro
   paragraph, a 2×2 preview grid of the dashboard's main sections,
   and a CTA row (button + "don't show again" checkbox) at the bottom.
   This replaces the old "Ready? [CTA floating in whitespace]" layout
   that made the third beat feel empty. */

.s-intro-beat__inner--preview {
  gap: 16px;
  align-items: stretch;
  text-align: left;
}

.s-intro-preview-list {
  list-style: none;
  padding: 0;
  margin: 4px 0 4px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-3);
}

.s-intro-preview {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: var(--sp-3);
  align-items: start;
  padding: var(--sp-3) var(--sp-3);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}

.s-intro-preview__icon {
  width: 22px;
  height: 22px;
  color: var(--c-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.s-intro-preview__icon svg { width: 100%; height: 100%; }

.s-intro-preview__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.s-intro-preview__label {
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
}

.s-intro-preview__body {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-2);
}

@media (max-width: 640px) {
  .s-intro-preview-list { grid-template-columns: 1fr; }
}

/* CTA row — button on the left, dismiss checkbox on the right.
   Sits under the preview grid and replaces the vertical `--cta` inner
   that centered everything in an empty column. */
.s-intro-cta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
  margin-top: var(--sp-2);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--c-line);
}

/* Beat 3 — CTA */
.s-intro-cta {
  appearance: none;
  padding: var(--sp-3) var(--sp-6);
  font-family: var(--font-sans);
  font-size: var(--fs-15);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-micro);
  color: var(--c-paper);
  background: var(--c-accent);
  border: 1px solid var(--c-accent);
  border-radius: var(--r-md);
  cursor: pointer;
  box-shadow: none;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.s-intro-cta:hover {
  background: var(--c-accent-ink);
  border-color: var(--c-accent-ink);
}
.s-intro-cta:active { background: var(--c-accent-ink); }
.s-intro-cta:focus-visible {
  outline: 2px solid var(--c-focus-ring);
  outline-offset: 2px;
}

.s-intro-dismiss {
  display: inline-flex;
  gap: var(--sp-2);
  align-items: center;
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  color: var(--c-ink-3);
  cursor: pointer;
}
.s-intro-dismiss input { accent-color: var(--c-accent); }

/* Nav bar at bottom */
.s-intro-nav {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--sp-3);
  align-items: center;
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--c-line);
  background: var(--c-paper-2);
}

.s-intro-skip {
  appearance: none;
  background: transparent;
  border: none;
  padding: var(--sp-1) var(--sp-2);
  color: var(--c-ink-3);
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard);
}
.s-intro-skip:hover { color: var(--c-ink); background: var(--c-surface); }

.s-intro-dots {
  display: flex;
  gap: var(--sp-2);
  justify-content: center;
}

.s-intro-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-line-strong);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}
.s-intro-dot--active {
  background: var(--c-accent);
  border-color: var(--c-accent);
}

.s-intro-actions {
  display: flex;
  gap: var(--sp-2);
  justify-self: end;
}

.s-intro-prev, .s-intro-next {
  appearance: none;
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-ink-2);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  cursor: pointer;
  min-width: 68px;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.s-intro-prev:hover, .s-intro-next:hover {
  background: var(--c-accent-weak);
  border-color: var(--c-accent);
  color: var(--c-ink);
}
.s-intro-prev:disabled, .s-intro-next:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.s-intro-prev--hidden, .s-intro-next--hidden {
  visibility: hidden;
}

/* ─── Small-screen fallback: vertical scroll, no translateX ───── */
@media (max-width: 720px) {
  .s-intro-modal {
    max-height: 94vh;
    max-height: 94dvh;
    width: 100%;
  }
  .s-intro-viewport {
    min-height: 0;
  }
  .s-intro-track {
    flex-direction: column;
    flex-wrap: nowrap;
    width: 100%;
    height: auto;
    overflow-y: auto;
    transform: none !important;
    scroll-snap-type: y mandatory;
  }
  .s-intro-beat {
    scroll-snap-align: start;
    min-height: auto;
    padding: 28px 20px;
  }
  .s-intro-nav {
    grid-template-columns: auto 1fr auto;
    padding: 10px 14px;
  }
  .s-intro-prev, .s-intro-next { min-width: 0; padding: 8px 10px; }
}

/* ─── Reduced motion ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .s-intro-track { transition: none; }
  .s-intro-cta { transition: none; }
}

/* 2026-05-25 entry redesign: single gateway panel.
   The old three-beat deck styles remain above for rollback, but the
   current controller renders one entry cover with a dashboard preview. */
.s-intro-modal--entry {
  width: min(1080px, 100%);
  max-height: min(720px, 92vh);
  grid-template-rows: 1fr auto;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--c-paper) 96%, white) 0%,
      color-mix(in srgb, var(--c-paper-2) 84%, var(--c-accent-weak)) 100%);
}

.s-intro-modal--entry .s-intro-viewport {
  min-height: 520px;
}

.s-intro-modal--entry .s-intro-track {
  display: flex;
  width: 100%;
  height: 100%;
  transform: none !important;
}

.s-intro-entry {
  flex: 0 0 100%;
  min-width: 100%;
  box-sizing: border-box;
  padding: clamp(26px, 4vw, 52px);
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(320px, 1.05fr);
  grid-template-areas:
    "copy preview"
    "details preview";
  gap: clamp(24px, 4vw, 44px);
  align-items: center;
}

.s-entry-copy {
  grid-area: copy;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.s-entry-kicker {
  width: fit-content;
  padding: 7px 10px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--c-surface) 88%, transparent);
  color: var(--c-ink-3);
  font-family: var(--font-sans);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.s-entry-title {
  margin: 0;
  max-width: 11ch;
  color: var(--c-ink);
  font-family: var(--font-serif);
  font-size: clamp(38px, 6vw, 64px);
  font-weight: var(--fw-medium);
  letter-spacing: -0.035em;
  line-height: 0.94;
}

.s-entry-body {
  margin: 0;
  max-width: 46ch;
  color: var(--c-ink-2);
  font-family: var(--font-sans);
  font-size: clamp(var(--fs-15), 1.7vw, var(--fs-18));
  line-height: var(--lh-relaxed);
}

.s-entry-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}

.s-entry-cta,
.s-entry-secondary {
  appearance: none;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}

.s-entry-cta {
  color: var(--c-paper);
  background: var(--c-accent);
  border: 1px solid var(--c-accent);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--c-accent) 22%, transparent);
}

.s-entry-cta:hover {
  background: var(--c-accent-ink);
  border-color: var(--c-accent-ink);
}

.s-entry-secondary {
  color: var(--c-ink-2);
  background: color-mix(in srgb, var(--c-surface) 78%, transparent);
  border: 1px solid var(--c-line);
}

.s-entry-secondary:hover {
  color: var(--c-ink);
  border-color: var(--c-line-strong);
}

.s-entry-cta:focus-visible,
.s-entry-secondary:focus-visible {
  outline: 2px solid var(--c-focus-ring);
  outline-offset: 3px;
}

.s-entry-dismiss {
  display: inline-flex;
  gap: var(--sp-2);
  align-items: center;
  color: var(--c-ink-3);
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  cursor: pointer;
}
.s-entry-dismiss input { accent-color: var(--c-accent); }

.s-entry-lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: min(330px, 100%);
  margin-top: clamp(20px, 5vh, 58px);
  padding: 10px 14px;
  border: 1px solid var(--c-line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--c-paper) 94%, white);
  box-shadow:
    0 16px 34px color-mix(in srgb, var(--c-ink) 8%, transparent),
    inset 0 1px 0 color-mix(in srgb, white 82%, transparent);
}

.s-entry-lockup__img {
  display: block;
  width: min(250px, 100%);
  height: auto;
  object-fit: contain;
  border-radius: 10px;
}

.s-entry-preview {
  grid-area: preview;
  position: relative;
  padding: clamp(18px, 3vw, 28px);
  overflow: hidden;
  border: 1px solid var(--c-line);
  border-radius: calc(var(--r-lg) + 6px);
  background:
    radial-gradient(circle at 18% 8%,
      color-mix(in srgb, var(--c-accent-weak) 70%, transparent),
      transparent 38%),
    linear-gradient(160deg,
      color-mix(in srgb, var(--c-surface) 92%, white) 0%,
      color-mix(in srgb, var(--c-paper-2) 84%, var(--c-accent-weak)) 100%);
  box-shadow: var(--el-2);
}

.s-entry-preview::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: var(--r-lg);
  border: 1px solid color-mix(in srgb, var(--c-line) 70%, transparent);
  pointer-events: none;
}

.s-entry-preview__topline,
.s-entry-preview__hero,
.s-entry-metrics,
.s-entry-live-reading,
.s-entry-preview__note,
.s-entry-sources {
  position: relative;
  z-index: 1;
}

.s-entry-preview__topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--c-ink-3);
  font-family: var(--font-sans);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.s-entry-live-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c-accent);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--c-accent) 16%, transparent);
}

.s-entry-preview__hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-top: 24px;
  padding: 18px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--c-paper) 76%, transparent);
}

.s-entry-preview__eyebrow {
  display: block;
  margin-bottom: 8px;
  color: var(--c-ink-3);
  font-family: var(--font-sans);
  font-size: var(--fs-11);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.s-entry-preview__title {
  display: block;
  color: var(--c-ink);
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-22), 3vw, var(--fs-28));
  font-weight: var(--fw-medium);
  line-height: var(--lh-compact);
}

.s-entry-preview__badge {
  padding: 5px 9px;
  border-radius: var(--r-pill);
  color: var(--c-accent-ink);
  background: var(--c-accent-weak);
  font-family: var(--font-sans);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.s-entry-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 12px;
}

.s-entry-metric {
  min-height: 88px;
  padding: 14px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--c-paper) 72%, transparent);
}

.s-entry-metric__label {
  display: block;
  color: var(--c-ink-3);
  font-family: var(--font-sans);
  font-size: var(--fs-11);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.s-entry-metric__value {
  display: block;
  margin-top: 10px;
  color: var(--c-ink);
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-18), 2.5vw, var(--fs-24));
  font-weight: var(--fw-medium);
}

.s-entry-metric--aqi { border-top: 3px solid #f59e0b; }
.s-entry-metric--pm { border-top: 3px solid var(--c-accent); }
.s-entry-metric--wind { border-top: 3px solid #38bdf8; }

.s-entry-live-reading {
  margin-top: 14px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--c-paper) 72%, transparent);
}

.s-entry-live-reading--ready {
  border-color: color-mix(in srgb, var(--c-accent) 48%, var(--c-line));
  background:
    linear-gradient(135deg,
      color-mix(in srgb, var(--c-accent-weak) 38%, transparent),
      color-mix(in srgb, var(--c-paper) 78%, transparent));
}

.s-entry-live-reading--error {
  border-color: color-mix(in srgb, #f59e0b 42%, var(--c-line));
}

.s-entry-live-reading__main,
.s-entry-live-reading__side {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.s-entry-live-reading__label,
.s-entry-live-reading__side span {
  color: var(--c-ink-3);
  font-family: var(--font-sans);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.s-entry-live-reading__value,
.s-entry-live-reading__side strong {
  color: var(--c-ink);
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-24), 3.6vw, var(--fs-34));
  font-weight: var(--fw-medium);
  line-height: 1;
}

.s-entry-live-reading__side {
  min-width: 76px;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--c-surface) 82%, transparent);
}

.s-entry-live-reading p {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--c-ink-2);
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  line-height: var(--lh-relaxed);
}

.s-entry-preview__note {
  margin: 12px 0 0;
  color: var(--c-ink-2);
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  line-height: var(--lh-relaxed);
}

.s-entry-sources {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.s-entry-source {
  padding: 6px 9px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  color: var(--c-ink-2);
  background: color-mix(in srgb, var(--c-paper) 66%, transparent);
  font-family: var(--font-sans);
  font-size: var(--fs-11);
}

.s-entry-details {
  grid-area: details;
  padding: 14px 16px;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--c-surface) 80%, transparent);
  color: var(--c-ink-2);
  font-family: var(--font-sans);
  font-size: var(--fs-13);
}
.s-entry-details strong {
  display: block;
  margin-bottom: 8px;
  color: var(--c-ink);
}
.s-entry-details ul {
  margin: 0;
  padding-left: 18px;
}

.s-intro-modal--entry .s-intro-nav {
  grid-template-columns: auto 1fr;
}
.s-intro-modal--entry .s-intro-dots {
  justify-content: end;
}
.s-intro-modal--entry .s-intro-actions {
  display: none;
}

@media (max-width: 860px) {
  .s-intro-modal--entry {
    max-height: 94vh;
    max-height: 94dvh;
  }
  .s-intro-modal--entry .s-intro-viewport {
    min-height: 0;
    overflow-y: auto;
  }
  .s-intro-entry {
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "preview"
      "details";
    padding: 24px;
  }
  .s-entry-title {
    max-width: 13ch;
    font-size: clamp(34px, 12vw, 52px);
  }
  .s-entry-metrics {
    grid-template-columns: 1fr;
  }
  .s-entry-metric {
    min-height: 0;
  }
  .s-entry-lockup {
    margin-top: 8px;
  }
  .s-entry-live-reading {
    grid-template-columns: 1fr;
  }
  .s-entry-live-reading__side {
    align-items: flex-start;
  }
}

/* ─── Dark theme ───────────────────────────────────────────────
   No per-element overrides needed: body.n-page--story:not(.theme-light)
   in s-tokens.css already re-maps every token (--c-paper, --c-ink,
   --c-accent, --c-line, --el-3, ...) to the warm-neutral dark
   palette, so every rule above recomputes automatically.
   The one compensation: the CTA fill uses --c-accent which in dark
   mode is a mid-green; override its label color from --c-paper
   (warm near-black in dark) to a darker ink for legibility against
   the lifted green fill. */
body.n-page--story:not(.theme-light) .s-intro-cta { color: #14231c; }

/* ─────────────────────────────────────────────────────────────
   Phase C · Layer 1 "Why this platform exists" framing strip
   Companion controller: static/js/story/s-why.js
   Copy source:          STORY_STRINGS.why (s-strings.js)

   As of Phase 3 (visual-unification rollout, 2026-04-19):
     - The dark slate panel that wrapped this strip is REMOVED.
     - Card chrome is provided by .s-card in s-components.css.
     - The section is laid out by .s-section (from s-components.css),
       so padding / max-width / top-rule come from there.
     - This block only contains the 4-card grid and its responsive
       collapse rules. Everything else consumes tokens.
   ───────────────────────────────────────────────────────────── */

.n-page--story .s-why .s-section-header {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin-bottom: clamp(var(--sp-3), 1.4vw, var(--sp-4));
  padding: 0 0 var(--sp-2);
}

.n-page--story .s-why .s-section-header::before {
  content: "Miami sensor story";
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-bottom: 8px;
  padding: 4px 10px;
  border: 1px solid rgba(14, 116, 144, 0.12);
  border-radius: 999px;
  background:
    linear-gradient(90deg, rgba(236, 254, 255, 0.92), rgba(240, 253, 250, 0.88));
  color: #047857;
  font-family: var(--font-sans);
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.n-page--story .s-why .s-section-header::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: min(240px, 72vw);
  height: 4px;
  border-radius: 999px;
  background:
    linear-gradient(90deg, #14b8a6 0%, #38bdf8 45%, #fb923c 74%, #84cc16 100%);
  box-shadow: 0 8px 22px rgba(14, 165, 168, 0.18);
}

.n-page--story .s-why .s-section-header__title {
  position: relative;
  margin: 0;
  font-size: clamp(1.55rem, 2.25vw, 2.05rem);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: -0.045em;
  color: #09233c;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.78);
}

.n-page--story .s-why .s-section-header__title::after {
  content: "";
  position: absolute;
  inset: -16px -28px -12px -18px;
  z-index: -1;
  border-radius: 24px;
  background:
    radial-gradient(circle at 18% 20%, rgba(56, 189, 248, 0.16) 0, transparent 34%),
    radial-gradient(circle at 78% 72%, rgba(34, 197, 94, 0.12) 0, transparent 32%);
  pointer-events: none;
}

.n-page--story .s-why__cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(var(--sp-3), 1.6vw, var(--sp-4));
  align-items: stretch;
}

.n-page--story .s-why__cards > .s-card {
  overflow: hidden;
  min-height: 100%;
  border-color: rgba(14, 116, 144, 0.13);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 251, 247, 0.98)),
    var(--c-surface);
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.055);
}

.n-page--story .s-why__cards > .s-card:hover {
  border-color: rgba(14, 165, 168, 0.24);
}

.n-page--story .s-why__cards .s-card__figure {
  position: relative;
  aspect-ratio: 16 / 7.2;
  background:
    radial-gradient(circle at 20% 20%, rgba(14, 165, 168, 0.14), transparent 30%),
    linear-gradient(135deg, #eef9f6, #eff8ff);
}

.n-page--story .s-why__cards .s-card__figure::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 58%;
  background:
    linear-gradient(180deg, transparent 0%, rgba(7, 26, 47, 0.14) 24%, rgba(7, 26, 47, 0.52) 66%, rgba(7, 26, 47, 0.78) 100%);
  pointer-events: none;
}

.n-page--story .s-why__cards .s-card__figure--icon {
  display: grid;
  place-items: center;
}

.n-page--story .s-why__cards .s-card__figure--icon > svg {
  width: 70%;
  height: 70%;
  object-fit: contain;
}

.n-page--story .s-why__cards .s-card__num {
  display: none;
}

.n-page--story .s-why__cards .s-card__title {
  font-size: clamp(var(--fs-18), 1.4vw, var(--fs-20));
  letter-spacing: -0.02em;
}

.n-page--story .s-why__cards .s-card__title--overlay {
  position: absolute;
  z-index: 1;
  left: 50%;
  right: auto;
  bottom: clamp(14px, 1.8vw, 22px);
  transform: translateX(-50%);
  width: min(calc(100% - 44px), 520px);
  color: #ffffff;
  font-size: clamp(var(--fs-15), 1.16vw, var(--fs-18));
  font-weight: var(--fw-bold);
  line-height: 1.08;
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.42);
}

.n-page--story .s-why__cards .s-card__body,
.n-page--story .s-why__cards .s-card__bullet {
  font-size: var(--fs-13);
  line-height: 1.45;
}

.n-page--story .s-why__cards .s-card__footnote {
  margin-top: auto;
}

@media (max-width: 1120px) {
  .n-page--story .s-why__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .n-page--story .s-why__cards {
    grid-template-columns: 1fr;
  }
}

/* ─────────────────────────────────────────────────────────────
   Phase D · Layer 2 preambles + inline research hooks
   Companion controller: static/js/story/s-layer2.js
   Copy source:          STORY_STRINGS.layer2 (s-strings.js)

   As of Phase 4 (visual-unification rollout, 2026-04-19):
     - Every Layer-2 sub-section header (Now / Time series /
       Drivers) uses the §4.1 grammar via .n-page--story overrides
       of the .n-section-head tree (eyebrow → serif h2 → intro).
     - Preamble + research-hook callouts consume tokens from
       s-tokens.css — the electric-blue / bright-green palette is
       gone.
   ───────────────────────────────────────────────────────────── */

/* D1 · Section-head overrides for Layer-2+ `.n-section`.
   The base .n-section-head markup already carries our grammar
   (.n-story-label → eyebrow, .n-section-title → h2, .s-preamble
    + .n-section-sub → intro lines). We only need to restyle the
   pieces so they match .s-section-header from s-components.css. */

.n-page--story .n-section {
  padding-block: clamp(var(--sp-5), 3vw, var(--sp-7));
  max-width: var(--page-max);
}

.n-page--story .n-section-head {
  margin-bottom: var(--sp-5);
  gap: var(--sp-4);
}

.n-page--story .n-section-meta {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  max-width: var(--prose-max);
}

.n-page--story .n-story-label {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-ink-3);
  margin: 0;
}

.n-page--story .n-section-title {
  font-family: var(--font-serif);
  font-size: var(--fs-28);
  font-weight: var(--fw-medium);
  line-height: var(--lh-compact);
  letter-spacing: var(--ls-normal);
  color: var(--c-ink);
  margin: 0;
}

/* The diagonal/gradient accent bar after the title is too loud for
   the academic register — collapse to a calm hairline rule. */
.n-page--story .n-section-title-accent {
  display: block;
  width: 100%;
  max-width: var(--prose-max);
  height: 1px;
  margin: var(--sp-2) 0 var(--sp-1);
  background: var(--c-line);
  border: 0;
}

.n-page--story .n-section-sub {
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-3);
  margin: 0;
  max-width: var(--prose-max);
}

/* The "Live" real-time pill — swap the n-kpi.css green palette for
   the muted botanical accent. */
.n-page--story .n-realtime-pill {
  font-family: var(--font-sans);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-accent-ink);
  background: var(--c-accent-weak);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  padding: 2px var(--sp-2);
}
.n-page--story .n-realtime-pill::before {
  background: var(--c-accent);
}
.n-page--story.theme-light .n-realtime-pill {
  color: var(--c-accent-ink);
  background: var(--c-accent-weak);
  border-color: var(--c-line);
}
.n-page--story.theme-light .n-realtime-pill::before {
  background: var(--c-accent);
}

/* D2 · Preamble — editorial framing line under each section title.
   Serif italic in muted ink. No more bright green. */
.n-page--story .s-preamble {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--fs-17);
  font-weight: var(--fw-regular);
  font-style: italic;
  line-height: var(--lh-relaxed);
  letter-spacing: var(--ls-normal);
  color: var(--c-ink-2);
  max-width: var(--prose-max);
}

.n-page--story .s-preamble:empty {
  display: none;
}

/* D3 · Research hook — short italic callout with a "Research hook"
   tag + arrow link to the matching Layer-3 question. Tokens-based:
   accent-weak bg, 2 px accent left border, ink-2 text. */
.n-page--story .s-hook {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-2);
  margin: var(--sp-3) 0 0;
  padding: var(--sp-2) var(--sp-3);
  border-left: 2px solid var(--c-accent);
  background: var(--c-accent-weak);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-2);
}

.n-page--story .s-hook:empty { display: none; }

.n-page--story .s-hook__tag {
  font-family: var(--font-sans);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-accent-ink);
  padding: 1px var(--sp-2);
  border-radius: var(--r-sm);
  background: transparent;
  flex: 0 0 auto;
}

.n-page--story .s-hook__text {
  font-style: italic;
  font-family: var(--font-serif);
  font-size: var(--fs-15);
  flex: 1 1 auto;
  min-width: 200px;
  color: var(--c-ink-2);
}

.n-page--story .s-hook__link {
  font-style: normal;
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  color: var(--c-accent-ink);
  text-decoration: none;
  white-space: nowrap;
  flex: 0 0 auto;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.n-page--story .s-hook__link:hover {
  color: var(--c-accent);
  border-bottom-color: var(--c-accent);
}

/* Panel variant — stacked: tag / full-width text / link */
.n-page--story .s-hook--panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  padding: var(--sp-3);
  font-size: var(--fs-12);
}

.n-page--story .s-hook--panel .s-hook__tag {
  flex: 0 0 auto;
  align-self: flex-start;
}

.n-page--story .s-hook--panel .s-hook__text {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  flex: none;
  text-wrap: pretty;
}

.n-page--story .s-hook--panel .s-hook__link {
  flex: 0 0 auto;
  align-self: flex-start;
  white-space: normal;
  margin-top: var(--sp-1);
}

/* D3.5 · Current conditions section — bento dashboard treatment.
   Keep the existing DOM/JS hooks intact, but give the section the same
   coastal, rounded-card language as the header and About cards. */
.n-page--story #s-conditions {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  margin-top: clamp(var(--sp-4), 3vw, var(--sp-6));
  padding: clamp(var(--sp-4), 3vw, var(--sp-6));
  border: 1px solid rgba(14, 165, 168, 0.2);
  border-radius: clamp(20px, 2vw, 30px);
  background:
    radial-gradient(circle at 12% 12%, rgba(34, 197, 94, 0.13) 0, transparent 25%),
    radial-gradient(circle at 92% 5%, rgba(14, 165, 233, 0.18) 0, transparent 30%),
    linear-gradient(135deg, #f8fbf7 0%, #eef9f6 46%, #eff8ff 100%);
  box-shadow:
    0 20px 52px rgba(15, 23, 42, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.n-page--story #s-conditions::before {
  content: "";
  position: absolute;
  top: clamp(26px, 4vw, 48px);
  right: clamp(20px, 5vw, 72px);
  z-index: 0;
  width: min(38vw, 460px);
  height: min(22vw, 270px);
  min-width: 300px;
  min-height: 190px;
  pointer-events: none;
  opacity: 0.86;
  background:
    radial-gradient(circle at 18% 22%, rgba(251, 191, 36, 0.52) 0 24px, rgba(251, 191, 36, 0.18) 25px 44px, transparent 45px),
    radial-gradient(ellipse at 38% 42%, rgba(255, 255, 255, 0.72) 0 30px, transparent 31px),
    radial-gradient(ellipse at 50% 38%, rgba(255, 255, 255, 0.66) 0 38px, transparent 39px),
    radial-gradient(ellipse at 61% 45%, rgba(255, 255, 255, 0.58) 0 28px, transparent 29px),
    linear-gradient(112deg, transparent 0 46%, rgba(56, 189, 248, 0.32) 46.4% 47%, transparent 47.4%),
    linear-gradient(112deg, transparent 0 55%, rgba(56, 189, 248, 0.24) 55.4% 56%, transparent 56.4%),
    linear-gradient(112deg, transparent 0 64%, rgba(14, 165, 233, 0.2) 64.4% 65%, transparent 65.4%),
    radial-gradient(ellipse at 62% 78%, rgba(20, 184, 166, 0.18) 0 34%, transparent 35%);
  filter: blur(0.1px);
  transform: rotate(-2deg);
}

.n-page--story #s-conditions::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 72% 42%, rgba(14, 165, 233, 0.55) 0 2px, transparent 3px),
    radial-gradient(circle at 80% 34%, rgba(34, 197, 94, 0.45) 0 2px, transparent 3px),
    linear-gradient(116deg, transparent 0 58%, rgba(14, 165, 233, 0.1) 58.2% 58.8%, transparent 59%),
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(14, 116, 144, 0.035) 24px 25px),
    repeating-linear-gradient(90deg, transparent 0 27px, rgba(14, 116, 144, 0.03) 28px 29px);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.08) 30%, rgba(0, 0, 0, 0.55) 100%);
  opacity: 0.85;
}

.n-page--story #s-conditions > * {
  position: relative;
  z-index: 1;
}

.n-page--story #s-conditions .n-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--sp-3);
  margin-bottom: clamp(var(--sp-3), 2.4vw, var(--sp-5));
}

.n-page--story #s-conditions .n-section-meta {
  max-width: 100%;
  width: 100%;
}

/* Conditions intro — full section width (preamble + data note) */
.n-page--story #s-conditions .n-section-intro--conditions {
  width: 100%;
  max-width: 100%;
  margin: var(--sp-1) 0 var(--sp-2);
}

.n-page--story #s-conditions .n-section-intro--conditions .s-preamble,
.n-page--story #s-conditions .n-section-intro--conditions .n-section-sub {
  width: 100%;
  max-width: 100%;
  margin: 0;
  text-wrap: balance;
}

.n-page--story #s-conditions .n-section-intro--conditions .s-preamble {
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  line-height: 1.5;
  color: #475569;
}

.n-page--story #s-conditions .n-section-intro--conditions .n-section-sub {
  margin-top: 0.35rem;
  font-size: clamp(0.84rem, 1vw, 0.92rem);
  line-height: 1.55;
  color: #64748b;
}

/* Drivers intro — full section width (preamble + explainer) */
.n-page--story #s-drivers .n-section-meta {
  max-width: 100%;
  width: 100%;
}

.n-page--story #s-drivers .n-section-intro--drivers {
  width: 100%;
  max-width: 100%;
  margin: var(--sp-1) 0 var(--sp-2);
}

.n-page--story #s-drivers .n-section-intro--drivers .s-preamble,
.n-page--story #s-drivers .n-section-intro--drivers .n-section-sub {
  width: 100%;
  max-width: 100%;
  margin: 0;
  text-wrap: balance;
}

.n-page--story #s-drivers .n-section-intro--drivers .s-preamble {
  font-size: clamp(0.95rem, 1.2vw, 1.05rem);
  line-height: 1.5;
  color: #475569;
}

.n-page--story #s-drivers .n-section-intro--drivers .n-section-sub {
  margin-top: 0.35rem;
  font-size: clamp(0.84rem, 1vw, 0.92rem);
  line-height: 1.55;
  color: #64748b;
}

.n-page--story #s-drivers .n-section-title-accent {
  width: min(100%, 100%);
}

.n-page--story #s-drivers .n-section-head {
  display: block;
}

.n-page--story #s-conditions .n-story-label {
  width: fit-content;
  padding: 4px 10px;
  border: 1px solid rgba(14, 116, 144, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  color: #047857;
  font-weight: var(--fw-bold);
}

.n-page--story #s-conditions .n-section-title {
  position: relative;
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  margin-top: var(--sp-2);
  font-size: clamp(1.9rem, 3vw, 2.65rem);
  font-weight: var(--fw-semibold);
  line-height: 1.03;
  letter-spacing: -0.04em;
  color: #08243b;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72);
}

.n-page--story #s-conditions .n-section-title-accent {
  width: min(100%, 520px);
  max-width: none;
  height: 4px;
  margin-top: var(--sp-2);
  border-radius: 999px;
  background: linear-gradient(90deg, #14b8a6 0%, #38bdf8 42%, #fb923c 72%, #84cc16 100%);
  box-shadow: 0 8px 18px rgba(14, 165, 168, 0.14);
}

.n-page--story #s-conditions .n-section-title-accent {
  width: min(100%, 100%);
}

.n-page--story #s-conditions .n-explain-card--section {
  margin-top: var(--sp-4);
  padding: var(--sp-3);
  border: 1px solid rgba(14, 116, 144, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(10px);
}

.n-page--story #s-conditions .n-explain-kicker {
  color: #0f766e;
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
}

.n-page--story #s-conditions .n-explain-list--inline {
  gap: var(--sp-2);
}

.n-page--story #s-conditions .n-explain-list--inline li {
  position: relative;
  padding: 10px 12px;
  border: 1px solid rgba(20, 184, 166, 0.12);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(240, 253, 250, 0.7));
  color: #41635d;
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  line-height: 1.58;
}

.n-page--story #s-conditions .n-explain-list--inline li::before {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  margin-bottom: 9px;
  border-radius: 999px;
  background: linear-gradient(90deg, #14b8a6, #38bdf8);
}

.n-page--story #s-conditions .n-explain-list--inline li:nth-child(2)::before {
  background: linear-gradient(90deg, #38bdf8, #8b5cf6);
}

.n-page--story #s-conditions .n-explain-list--inline li:nth-child(3)::before {
  background: linear-gradient(90deg, #fb923c, #84cc16);
}

.n-page--story #s-conditions .n-explain-list--inline strong {
  color: #047857;
  font-weight: var(--fw-bold);
}

.n-page--story #s-conditions .n-realtime-pill {
  justify-self: start;
  color: #ffffff;
  background: linear-gradient(135deg, #0f2a3d 0%, #075985 100%);
  border-color: rgba(7, 89, 133, 0.28);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

.n-page--story #s-conditions .n-realtime-pill::before {
  background: #86efac;
  box-shadow: 0 0 0 3px rgba(134, 239, 172, 0.16);
}

.n-page--story #s-conditions .n-overview-split {
  grid-template-columns: minmax(0, 1.12fr) minmax(360px, 0.88fr);
  gap: clamp(var(--sp-4), 2.6vw, var(--sp-5));
  align-items: stretch;
}

/* D4 · "Right now" hero card — warm surface + hairline, consume
   tokens. Keeps the existing hero internal layout; overrides only
   chrome, typography, and status-pill color. The big number uses
   --c-ink unless status is moderate/poor, per plan §4.3. */

.n-page--story .n-hero-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background:
    radial-gradient(circle at 10% 4%, rgba(20, 184, 166, 0.18) 0, transparent 28%),
    radial-gradient(circle at 92% 16%, rgba(251, 191, 36, 0.12) 0, transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(247, 252, 248, 0.98));
  border: 1px solid rgba(14, 116, 144, 0.14);
  border-radius: 24px;
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.075);
  padding: clamp(var(--sp-4), 2.4vw, var(--sp-5));
}

.n-page--story .n-hero-kpi-stack {
  padding: 0;
  gap: var(--sp-4);
  align-items: stretch;
}

.n-page--story .n-hero-status-block {
  flex: 0 1 190px;
  max-width: 220px;
  padding: var(--sp-3);
  border: 1px solid rgba(14, 116, 144, 0.11);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(240, 253, 250, 0.58));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.n-page--story .n-kpi-group {
  flex: 1 1 300px;
  max-width: none;
  padding: var(--sp-3);
  border: 1px solid rgba(14, 116, 144, 0.11);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(239, 248, 255, 0.54));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.n-page--story .n-hero-status-card {
  min-height: 76px;
  border-radius: 18px;
  background:
    radial-gradient(circle at 10% 12%, rgba(134, 239, 172, 0.18) 0, transparent 36%),
    linear-gradient(135deg, rgba(15, 42, 61, 0.98) 0%, rgba(7, 89, 133, 0.94) 100%);
  border-color: rgba(7, 89, 133, 0.25);
  box-shadow:
    0 14px 28px rgba(15, 23, 42, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
}

.n-page--story .n-hero-status-value {
  color: #ffffff;
}

.n-page--story .n-hero-card.n-hero-green .n-hero-status-card,
.n-page--story .n-hero-card.n-hero-yellow .n-hero-status-card,
.n-page--story .n-hero-card.n-hero-orange .n-hero-status-card,
.n-page--story .n-hero-card.n-hero-red .n-hero-status-card {
  background:
    linear-gradient(135deg, rgba(15, 42, 61, 0.96) 0%, rgba(7, 89, 133, 0.92) 100%);
}

.n-page--story .n-hero-status-eyebrow,
.n-page--story .n-kpi-group-label,
.n-page--story .n-kpi-metric-label,
.n-page--story .n-hero-rec-label,
.n-page--story .n-kpi-secondary-label {
  font-family: var(--font-sans);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: #41635d;
}

.n-page--story .n-hero-status-value {
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-22), 2.2vw, var(--fs-28));
  font-weight: var(--fw-semibold);
}

/* Override n-kpi.js's inline styles on the metric block so it
   always reads as a calm paper tile (warm surface + hairline),
   regardless of the status color the JS writes inline.  */
.n-page--story .n-kpi-metric-block,
.n-page--story.theme-light .n-kpi-metric-block {
  background:
    radial-gradient(circle at 90% 8%, rgba(56, 189, 248, 0.12) 0, transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(240, 253, 250, 0.72)) !important;
  border: 1px solid rgba(14, 116, 144, 0.13) !important;
  border-radius: 18px;
  padding: var(--sp-3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.n-page--story .n-kpi-metric-value {
  font-family: var(--font-sans) !important;
  font-size: clamp(2rem, 4vw, 2.8rem) !important;
  font-weight: var(--fw-semibold) !important;
  letter-spacing: var(--ls-tight) !important;
  color: #09233c !important;
  line-height: 1 !important;
}

.n-page--story .n-kpi-metric-unit,
.n-page--story .n-kpi-secondary-unit,
.n-page--story .n-updated-text {
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  font-weight: var(--fw-regular);
  color: var(--c-ink-3);
}

.n-page--story .n-kpi-desc,
.n-page--story .n-hero-summary {
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
  color: #41635d;
}

/* Plan §4.3: the big number is always --c-ink on the story surface.
   The status color is carried by the pill, not the numeral. This
   removes the "all green everywhere" feel when conditions are good
   and matches the calm editorial register.  */

/* KPI pill — neutralize n-kpi.js's inline color/bg/border and let
   the pill read as a muted status chip. The JS writes one of 4
   hex colors as background/color inline; we replace all of them
   with a single calm accent-weak tone. Status is still legible
   because the pill TEXT remains ("Good", "Moderate", etc).  */
.n-page--story .n-kpi-pill {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-11) !important;
  font-weight: var(--fw-semibold) !important;
  letter-spacing: var(--ls-caps) !important;
  text-transform: uppercase !important;
  border-radius: var(--r-pill) !important;
  padding: 2px var(--sp-2) !important;
  border: 1px solid var(--c-line) !important;
  background: var(--c-accent-weak) !important;
  color: var(--c-accent-ink) !important;
}

.n-page--story .n-hero-expand-btn {
  width: 100%;
  justify-content: space-between;
  margin-top: var(--sp-1);
  border-radius: 999px;
  border: 1px solid rgba(14, 116, 144, 0.14);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(240, 253, 250, 0.62));
  color: #24423e;
  font-weight: var(--fw-semibold);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.n-page--story .n-hero-recommendation {
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  border-radius: 20px;
  border: 1px solid rgba(251, 191, 36, 0.22);
  background:
    radial-gradient(circle at 92% 10%, rgba(251, 191, 36, 0.2) 0, transparent 32%),
    linear-gradient(180deg, rgba(255, 251, 235, 0.78), rgba(255, 255, 255, 0.74));
}

.n-page--story .n-hero-weather-story {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: center;
  margin-top: auto;
  padding: var(--sp-4);
  border: 1px solid rgba(20, 184, 166, 0.13);
  border-radius: 22px;
  background:
    radial-gradient(circle at 92% 14%, rgba(251, 191, 36, 0.2) 0, transparent 22%),
    radial-gradient(circle at 12% 100%, rgba(56, 189, 248, 0.16) 0, transparent 32%),
    linear-gradient(135deg, rgba(240, 253, 250, 0.82), rgba(239, 248, 255, 0.78));
  box-shadow:
    0 12px 26px rgba(15, 23, 42, 0.045),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.n-page--story .n-hero-weather-story__visual {
  width: 82px;
  height: 64px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 24% 24%, #facc15 0 10px, rgba(250, 204, 21, 0.22) 11px 22px, transparent 23px),
    radial-gradient(ellipse at 56% 48%, rgba(255, 255, 255, 0.86) 0 18px, transparent 19px),
    radial-gradient(ellipse at 72% 54%, rgba(255, 255, 255, 0.72) 0 14px, transparent 15px),
    linear-gradient(118deg, transparent 0 55%, rgba(56, 189, 248, 0.55) 55.5% 57%, transparent 57.5%),
    linear-gradient(118deg, transparent 0 68%, rgba(14, 165, 233, 0.38) 68.5% 70%, transparent 70.5%),
    linear-gradient(135deg, rgba(236, 254, 255, 0.94), rgba(220, 252, 231, 0.74));
  border: 1px solid rgba(14, 116, 144, 0.1);
}

.n-page--story .n-hero-weather-story__copy {
  min-width: 0;
}

.n-page--story .n-hero-weather-story__label {
  display: block;
  margin-bottom: 4px;
  color: #047857;
  font-family: var(--font-sans);
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.n-page--story .n-hero-weather-story__copy p {
  margin: 0;
  color: #41635d;
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
}

.n-page--story .n-hero-weather-story__chips {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 2px;
}

.n-page--story .n-hero-weather-story__chips span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid rgba(20, 184, 166, 0.13);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.68);
  color: #31566b;
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
}

/* Sensor-map card (right column) — match the hero's surface
   grammar so they sit as two siblings on paper. */
.n-page--story .n-mini-map-card {
  overflow: hidden;
  background:
    radial-gradient(circle at 84% 8%, rgba(56, 189, 248, 0.18) 0, transparent 30%),
    radial-gradient(circle at 12% 92%, rgba(20, 184, 166, 0.12) 0, transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(239, 248, 255, 0.9));
  border: 1px solid rgba(14, 116, 144, 0.14);
  border-radius: 24px;
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.075);
}

.n-page--story .n-mini-map-head {
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  border-bottom: 1px solid rgba(14, 116, 144, 0.1);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(236, 254, 255, 0.38));
}

.n-page--story .n-mini-map-title {
  font-family: var(--font-sans);
  font-size: clamp(var(--fs-17), 1.5vw, var(--fs-20));
  font-weight: var(--fw-bold);
  color: #09233c;
  margin: 0;
}
.n-page--story .n-mini-map-sub {
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  color: #41635d;
  margin: 0;
}

.n-page--story .n-explain-text--mini {
  color: #5b716d;
  font-weight: var(--fw-medium);
}

.n-page--story .n-mini-map-tabs {
  padding: var(--sp-3) var(--sp-4);
  gap: 8px;
}

.n-page--story .n-mmtab {
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  border-color: rgba(14, 116, 144, 0.12);
  color: #334155;
}

.n-page--story .n-mmtab.n-mmtab--active {
  color: #ffffff;
  background: linear-gradient(135deg, #0f2a3d 0%, #075985 100%);
  border-color: rgba(7, 89, 133, 0.28);
}

.n-page--story .n-mini-map-canvas {
  margin: 0 var(--sp-4) var(--sp-3);
  border: 1px solid rgba(14, 116, 144, 0.12);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.n-page--story .n-mini-map-detail {
  padding: var(--sp-4);
  margin: 0 var(--sp-4) var(--sp-4);
  border: 1px solid rgba(14, 116, 144, 0.11);
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(248, 251, 247, 0.72));
}

.n-page--story .n-mmd-name {
  color: #09233c;
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
}

.n-page--story .n-mmd-loc,
.n-page--story .n-mmd-desc {
  color: #41635d;
}

.n-page--story .n-mmd-param {
  border-color: rgba(20, 184, 166, 0.13);
  border-radius: 999px;
  background: rgba(240, 253, 250, 0.78);
  color: #047857;
  font-weight: var(--fw-semibold);
}

.n-page--story .n-mmd-peer {
  border-color: rgba(14, 116, 144, 0.11);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(239, 248, 255, 0.62));
}

.n-page--story .n-mmd-peer-id {
  color: #64748b;
}

.n-page--story .n-mmd-peer-value {
  color: #09233c;
}

.n-page--story #s-conditions .n-status-bar {
  margin-top: clamp(var(--sp-4), 2.4vw, var(--sp-5));
  padding: var(--sp-4);
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(240, 253, 250, 0.76));
  border: 1px solid rgba(14, 116, 144, 0.13);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.055);
}

.n-page--story #s-conditions .n-status-bar-icon {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: linear-gradient(135deg, #0f2a3d 0%, #075985 100%);
  color: #ffffff;
}

/* Conditions status bar — insight + alerts use full card width (not prose-max) */
.n-page--story #s-conditions .n-status-bar-inner {
  align-items: flex-start;
  width: 100%;
}

.n-page--story #s-conditions .n-status-bar-text {
  flex: 1 1 0;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.n-page--story #s-conditions .n-status-bar-alerts,
.n-page--story #s-conditions .n-status-bar-insight {
  width: 100%;
  max-width: none;
  text-wrap: pretty;
}

.n-page--story #s-conditions .n-status-bar-insight {
  font-size: var(--fs-13);
  line-height: 1.58;
  color: #64748b;
  font-weight: var(--fw-regular);
}

/* Insight emphasis — readable scan line without heavy bold blocks */
.n-page--story #s-conditions .n-status-bar-insight .n-insight-lead {
  font-weight: var(--fw-medium);
  color: #475569;
}

.n-page--story #s-conditions .n-status-bar-insight .n-insight-val {
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  color: #334155;
  letter-spacing: -0.01em;
}

.n-page--story #s-conditions .n-status-bar-insight .n-insight-cat {
  font-weight: var(--fw-semibold);
  font-size: 0.96em;
  letter-spacing: 0.01em;
}

.n-page--story #s-conditions .n-status-bar-insight .n-insight-cat--good {
  color: #15803d;
}

.n-page--story #s-conditions .n-status-bar-insight .n-insight-cat--moderate {
  color: #a16207;
}

.n-page--story #s-conditions .n-status-bar-insight .n-insight-cat--unhealthy-for-sensitive-groups,
.n-page--story #s-conditions .n-status-bar-insight .n-insight-cat--unhealthy-for-some {
  color: #c2410c;
}

.n-page--story #s-conditions .n-status-bar-insight .n-insight-cat--unhealthy,
.n-page--story #s-conditions .n-status-bar-insight .n-insight-cat--very-unhealthy,
.n-page--story #s-conditions .n-status-bar-insight .n-insight-cat--hazardous {
  color: #b91c1c;
}

.n-page--story #s-conditions .n-status-bar-insight .n-insight-metric {
  font-weight: var(--fw-medium);
  color: #475569;
}

.n-page--story #s-conditions .n-status-bar-insight .n-insight-metric .n-insight-val {
  color: #1e293b;
}

.n-page--story #s-conditions .n-status-bar-alerts .n-alert-line {
  width: 100%;
  max-width: none;
  margin: 0 0 0.45rem;
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  line-height: 1.55;
  color: #991b1b;
  text-wrap: pretty;
}

.n-page--story #s-conditions .n-status-bar-alerts .n-alert-line:last-child {
  margin-bottom: 0.4rem;
}

.n-page--story #s-conditions .n-status-bar--has-alerts .n-status-bar-insight {
  padding-top: 0.15rem;
}

.n-page--story #s-conditions .n-status-bar-time {
  margin-top: 0.35rem;
}

@media (max-width: 1199px) {
  .n-page--story #s-conditions .n-overview-split,
  .n-page--story #s-conditions .n-section-head {
    grid-template-columns: 1fr;
  }

  .n-page--story #s-conditions .n-realtime-pill {
    justify-self: start;
  }
}

/* D3.6 · Remaining dashboard sections — reuse the same environmental
   data-story shell so Time Series, Drivers, Research, and Partners no
   longer feel like a different page. */
.n-page--story #s-timeseries,
.n-page--story #s-drivers,
.n-page--story #s-research,
.n-page--story #s-partners {
  position: relative;
  overflow: hidden;
  margin-top: clamp(var(--sp-5), 4vw, var(--sp-7));
  border: 1px solid rgba(14, 116, 144, 0.13);
  border-radius: clamp(20px, 2vw, 30px);
  background:
    radial-gradient(circle at 88% 6%, rgba(56, 189, 248, 0.13) 0, transparent 28%),
    radial-gradient(circle at 10% 16%, rgba(34, 197, 94, 0.1) 0, transparent 24%),
    linear-gradient(135deg, #fbfdf9 0%, #f3fbf8 46%, #f3f9ff 100%);
  box-shadow:
    0 18px 46px rgba(15, 23, 42, 0.065),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.n-page--story #s-timeseries {
  border-color: rgba(20, 184, 166, 0.18);
  background:
    radial-gradient(circle at 88% 6%, rgba(56, 189, 248, 0.13) 0, transparent 28%),
    radial-gradient(circle at 12% 14%, rgba(34, 197, 94, 0.13) 0, transparent 26%),
    radial-gradient(circle at 46% 92%, rgba(132, 204, 22, 0.08) 0, transparent 24%),
    linear-gradient(135deg, #fbfdf9 0%, #eefbf4 42%, #edf9ff 100%);
}

.n-page--story #s-timeseries,
.n-page--story #s-drivers,
.n-page--story #s-research,
.n-page--story #s-partners {
  padding: clamp(var(--sp-4), 3vw, var(--sp-6));
}

.n-page--story #s-timeseries::after,
.n-page--story #s-drivers::after,
.n-page--story #s-research::after,
.n-page--story #s-partners::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(116deg, transparent 0 58%, rgba(14, 165, 233, 0.08) 58.2% 58.8%, transparent 59%),
    repeating-linear-gradient(0deg, transparent 0 24px, rgba(14, 116, 144, 0.025) 25px 26px),
    repeating-linear-gradient(90deg, transparent 0 30px, rgba(14, 116, 144, 0.022) 31px 32px);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.05) 34%, rgba(0, 0, 0, 0.42) 100%);
  opacity: 0.8;
}

.n-page--story #s-timeseries > *,
.n-page--story #s-drivers > *,
.n-page--story #s-research > *,
.n-page--story #s-partners > * {
  position: relative;
  z-index: 1;
}

.n-page--story #s-timeseries .n-section-head--timeseries {
  display: block;
  margin-bottom: clamp(var(--sp-4), 3vw, var(--sp-6));
}

.n-page--story #s-timeseries .n-section-meta {
  max-width: 100%;
  width: 100%;
}

/* Time Series intro — full width; preamble + switch line use the right-side space */
.n-page--story #s-timeseries .n-section-intro--timeseries {
  width: 100%;
  max-width: 100%;
  margin: var(--sp-1) 0 var(--sp-2);
}

.n-page--story #s-timeseries .n-section-intro--timeseries .s-preamble {
  width: 100%;
  max-width: 100%;
  margin: 0;
  font-size: var(--fs-13);
  font-style: italic;
  line-height: 1.5;
  color: #475569;
  text-wrap: balance;
}

.n-page--story #s-timeseries .n-section-sub--switch-views {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.35rem 1rem;
  width: 100%;
  max-width: 100%;
  margin: 0.4rem 0 0;
  font-size: var(--fs-13);
  line-height: 1.5;
  color: #475569;
}

.n-page--story #s-timeseries .n-switch-views__label {
  white-space: nowrap;
  font-weight: var(--fw-semibold);
  color: #334155;
}

.n-page--story #s-timeseries .n-switch-views__items {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem clamp(0.75rem, 2.5vw, 2rem);
  min-width: 0;
}

@media (min-width: 960px) {
  .n-page--story #s-timeseries .n-switch-views__items {
    flex-wrap: nowrap;
    justify-content: space-between;
  }
}

.n-page--story #s-timeseries .n-switch-views__item {
  flex: 1 1 auto;
  min-width: 0;
}

.n-page--story #s-timeseries .n-switch-views__item strong {
  color: #0f766e;
  font-weight: var(--fw-semibold);
}

.n-page--story #s-timeseries .n-time-control--timeseries-bottom.n-time-toolbar {
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  margin-top: var(--sp-4);
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid rgba(14, 116, 144, 0.12);
  background: #f8fafc;
  box-shadow: none;
}

.n-page--story #s-timeseries .n-section-title,
.n-page--story #s-drivers .n-section-title,
.n-page--story #s-research .s-section-header__title,
.n-page--story #s-partners .s-accordion__section-title {
  font-size: clamp(1.85rem, 3vw, 2.6rem);
  font-weight: var(--fw-semibold);
  line-height: 1.02;
  letter-spacing: -0.04em;
  color: #09233c;
}

.n-page--story #s-timeseries .n-section-title-accent,
.n-page--story #s-drivers .n-section-title-accent {
  width: min(100%, 560px);
  max-width: none;
  height: 3px;
  margin-top: var(--sp-2);
  border-radius: 999px;
  background: linear-gradient(90deg, #14b8a6 0%, #38bdf8 46%, #84cc16 100%);
}

.n-page--story #s-timeseries .n-story-label,
.n-page--story #s-drivers .n-story-label,
.n-page--story #s-research .s-section-header__eyebrow,
.n-page--story #s-partners .s-accordion__tag {
  color: #047857;
}

.n-page--story #s-timeseries .n-section-sub,
.n-page--story #s-drivers .n-section-sub,
.n-page--story #s-research .s-section-header__hook {
  color: #475569;
}

.n-page--story #s-timeseries .n-explain-card--section,
.n-page--story #s-drivers .n-explain-card--section,
.n-page--story #s-research .n-explain-card--section {
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  border: 1px solid rgba(14, 116, 144, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.74);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(10px);
}

.n-page--story #s-timeseries .n-explain-card--section {
  width: 100%;
  max-width: 100%;
  border-color: rgba(20, 184, 166, 0.14);
  background:
    radial-gradient(circle at 12% 18%, rgba(34, 197, 94, 0.1) 0, transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(240, 253, 250, 0.72) 55%, rgba(239, 248, 255, 0.7));
}

.n-page--story #s-timeseries .n-explain-kicker {
  color: #047857;
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
}

.n-page--story #s-timeseries .n-explain-list--inline li {
  position: relative;
  padding: 11px 13px;
  border: 1px solid rgba(20, 184, 166, 0.12);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(240, 253, 250, 0.68));
  color: #41635d;
  font-size: var(--fs-13);
  font-weight: var(--fw-medium);
  line-height: 1.55;
}

.n-page--story #s-timeseries .n-explain-list--inline li::before {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  margin-bottom: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, #14b8a6, #38bdf8);
}

.n-page--story #s-timeseries .n-explain-list--inline li:nth-child(2)::before {
  background: linear-gradient(90deg, #38bdf8, #8b5cf6);
}

.n-page--story #s-timeseries .n-explain-list--inline li:nth-child(3)::before {
  background: linear-gradient(90deg, #84cc16, #14b8a6);
}

.n-page--story #s-timeseries .n-explain-list--inline strong {
  color: #047857;
  font-weight: var(--fw-bold);
}

.n-page--story #s-timeseries .n-time-control--section {
  min-width: 330px;
  padding: var(--sp-3);
  border-radius: 22px;
  border-color: rgba(20, 184, 166, 0.16);
  background:
    radial-gradient(circle at 14% 12%, rgba(132, 204, 22, 0.14) 0, transparent 26%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.88), rgba(240, 253, 250, 0.78) 52%, rgba(236, 254, 255, 0.76));
  box-shadow:
    0 12px 28px rgba(15, 23, 42, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(10px);
}

.n-page--story #s-timeseries .n-time-label {
  color: #047857;
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
}

.n-page--story #s-timeseries .n-time-help {
  color: #5b716d;
  font-weight: var(--fw-medium);
}

.n-page--story #s-timeseries .n-time-btns {
  width: 100%;
  gap: 4px;
  padding: 4px;
  border-color: rgba(20, 184, 166, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
}

.n-page--story #s-timeseries .n-time-btn {
  flex: 1 1 auto;
  border-radius: 999px;
  color: #41635d;
  font-weight: var(--fw-bold);
}

.n-page--story #s-timeseries .n-time-btn--active {
  color: #ffffff !important;
  background: linear-gradient(135deg, #047857 0%, #0f766e 48%, #0ea5e9 100%);
  box-shadow: 0 8px 16px rgba(14, 116, 144, 0.16);
}

.n-page--story #s-timeseries .n-tab-group {
  position: relative;
  overflow: hidden;
  padding: clamp(var(--sp-3), 2vw, var(--sp-4));
  border: 1px solid rgba(20, 184, 166, 0.14);
  border-radius: 28px;
  background:
    radial-gradient(circle at 8% 10%, rgba(34, 197, 94, 0.1) 0, transparent 24%),
    radial-gradient(circle at 92% 4%, rgba(56, 189, 248, 0.12) 0, transparent 28%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(240, 253, 250, 0.62) 48%, rgba(239, 248, 255, 0.68));
  box-shadow:
    0 16px 34px rgba(15, 23, 42, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.76);
  backdrop-filter: blur(10px);
}

.n-page--story #s-timeseries .n-tab-group::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(116deg, transparent 0 63%, rgba(56, 189, 248, 0.08) 63.4% 64%, transparent 64.4%),
    repeating-linear-gradient(90deg, transparent 0 36px, rgba(14, 116, 144, 0.018) 37px 38px);
  opacity: 0.8;
}

.n-page--story #s-timeseries .n-tab-group > * {
  position: relative;
  z-index: 1;
}

.n-page--story #s-timeseries .n-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  padding: 0;
  background: transparent;
  border: 0;
}

.n-page--story #s-timeseries .n-tab-btn {
  min-height: 82px;
  align-items: flex-start;
  justify-content: center;
  padding: var(--sp-3);
  border: 1px solid rgba(20, 184, 166, 0.12);
  border-radius: 20px;
  background:
    radial-gradient(circle at 92% 10%, rgba(56, 189, 248, 0.08) 0, transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(240, 253, 250, 0.7));
  color: #41635d;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.045);
}

.n-page--story #s-timeseries .n-tab-btn--active {
  color: #ffffff;
  border-color: rgba(4, 120, 87, 0.32);
  background:
    radial-gradient(circle at 92% 0%, rgba(134, 239, 172, 0.24) 0, transparent 34%),
    linear-gradient(135deg, #0f2a3d 0%, #047857 52%, #075985 100%);
  box-shadow: 0 16px 30px rgba(14, 116, 144, 0.16);
}

.n-page--story #s-timeseries .n-tab-btn-sub {
  color: currentColor;
  opacity: 0.72;
}

.n-page--story #s-timeseries .n-tab-panel-header,
.n-page--story #s-drivers .n-panel-header,
.n-page--story #s-timeseries .n-panel-header {
  border-bottom-color: rgba(14, 116, 144, 0.11);
}

.n-page--story #s-timeseries .n-tab-panel-header {
  gap: 10px;
  margin-bottom: var(--sp-3);
}

.n-page--story #s-timeseries .n-tab-btn:not(.n-tab-btn--active) .n-tab-btn-icon {
  filter: hue-rotate(30deg) saturate(0.82);
}

.n-page--story #s-timeseries .n-tab-btn:not(.n-tab-btn--active) strong,
.n-page--story #s-timeseries .n-tab-btn:not(.n-tab-btn--active) {
  color: #41635d;
}

.n-page--story #s-timeseries .n-tab-btn:not(.n-tab-btn--active) .n-tab-btn-sub {
  color: #6b8b82;
  opacity: 1;
}

.n-page--story #s-timeseries .n-toggle-label {
  border-color: rgba(20, 184, 166, 0.16);
  background: rgba(240, 253, 250, 0.78);
  color: #047857;
  font-weight: var(--fw-bold);
}

.n-page--story #s-timeseries #panel-multi-sensor-n {
  position: relative;
  overflow: hidden;
  border-color: rgba(20, 184, 166, 0.14);
  background:
    radial-gradient(circle at 88% 8%, rgba(56, 189, 248, 0.14) 0, transparent 30%),
    radial-gradient(circle at 10% 92%, rgba(34, 197, 94, 0.08) 0, transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(244, 252, 249, 0.96));
}

.n-page--story #s-timeseries #panel-multi-sensor-n::before {
  content: "";
  position: absolute;
  top: 18px;
  right: 24px;
  width: 190px;
  height: 108px;
  pointer-events: none;
  opacity: 0.72;
  background:
    radial-gradient(circle at 20% 18%, rgba(250, 204, 21, 0.3) 0 12px, transparent 13px),
    radial-gradient(ellipse at 52% 48%, rgba(255, 255, 255, 0.52) 0 22px, transparent 23px),
    linear-gradient(116deg, transparent 0 58%, rgba(56, 189, 248, 0.24) 58.5% 59.5%, transparent 60%),
    linear-gradient(116deg, transparent 0 70%, rgba(14, 165, 233, 0.18) 70.5% 71.5%, transparent 72%);
}

.n-page--story #s-timeseries #panel-multi-sensor-n > * {
  position: relative;
  z-index: 1;
}

.n-page--story #s-timeseries .n-panel-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.35rem 1rem;
  padding-bottom: var(--sp-4);
}

.n-page--story #s-timeseries .n-panel-header > div:first-child {
  display: contents;
}

.n-page--story #s-timeseries .n-panel-header .n-panel-title {
  grid-column: 1;
  grid-row: 1;
}

.n-page--story #s-timeseries .n-panel-header .n-panel-sub {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
  max-width: 100%;
  margin-top: 0.35rem;
  text-wrap: pretty;
  color: #52746d;
  font-weight: var(--fw-medium);
  line-height: 1.55;
}

.n-page--story #s-timeseries .n-panel-header .n-chart-time-ctrl {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
}

.n-page--story #s-timeseries #panel-multi-sensor-n .n-panel-title {
  color: #0f766e;
  font-size: clamp(var(--fs-18), 1.45vw, var(--fs-22));
}

.n-page--story #s-timeseries .n-chart-time-ctrl {
  padding: 8px 10px;
  border: 1px solid rgba(20, 184, 166, 0.13);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
}

.n-page--story #s-timeseries .n-chart-time-label {
  color: #6b8b82;
  font-weight: var(--fw-bold);
}

.n-page--story #s-timeseries .n-detail-sensor-select {
  color: #41635d;
  font-weight: var(--fw-semibold);
}

.n-page--story #s-timeseries .n-stale-bar {
  border-color: rgba(251, 191, 36, 0.24);
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(255, 251, 235, 0.9), rgba(255, 255, 255, 0.76));
  color: #8a5a13;
  font-weight: var(--fw-medium);
}

.n-page--story #s-timeseries .n-chart-hint {
  color: #6b8b82;
  font-weight: var(--fw-bold);
  letter-spacing: 0.07em;
}

.n-page--story #s-timeseries #panel-multi-sensor-n .n-chart-wrap {
  padding: var(--sp-4);
  border-color: rgba(14, 116, 144, 0.13);
  border-radius: 22px;
  background:
    repeating-linear-gradient(0deg, transparent 0 28px, rgba(14, 116, 144, 0.032) 29px 30px),
    linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(239, 248, 255, 0.86));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    0 10px 22px rgba(15, 23, 42, 0.045);
}

.n-page--story #s-timeseries .n-chart-legend {
  gap: 8px;
}

.n-page--story #s-timeseries .n-legend-chip {
  min-height: 30px;
  border-color: rgba(20, 184, 166, 0.13);
  background: rgba(255, 255, 255, 0.76);
  color: #41635d;
}

.n-page--story #s-timeseries .n-delayed-pill {
  color: #6b8b3f;
}

.n-page--story #s-timeseries .n-explain-summary {
  color: #41635d;
}

.n-page--story #s-timeseries #panel-multi-sensor-n > .n-explain-card {
  border-color: rgba(168, 85, 247, 0.13);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(250, 245, 255, 0.72), rgba(236, 254, 255, 0.56));
}

.n-page--story .n-panel {
  border: 1px solid rgba(14, 116, 144, 0.13);
  border-radius: 24px;
  background:
    radial-gradient(circle at 92% 6%, rgba(56, 189, 248, 0.1) 0, transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 247, 0.98));
  box-shadow: 0 16px 34px rgba(15, 23, 42, 0.06);
}

.n-page--story .n-panel-title {
  font-size: clamp(var(--fs-17), 1.3vw, var(--fs-20));
  font-weight: var(--fw-bold);
  color: #09233c;
}

.n-page--story .n-panel-sub,
.n-page--story .n-panel-meta {
  color: #475569;
}

.n-page--story .n-chart-wrap,
.n-page--story .n-panel .n-rose-wrap {
  border-color: rgba(14, 116, 144, 0.12);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(239, 248, 255, 0.78));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.n-page--story .n-legend-chip,
.n-page--story .n-toggle-label,
.n-page--story .n-detail-sensor-select {
  border-color: rgba(14, 116, 144, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.84);
  color: #334155;
}

.n-page--story .n-delayed-pill,
.n-page--story .n-causal-label {
  border-radius: 999px;
  border: 1px solid rgba(14, 116, 144, 0.12);
  background: rgba(255, 255, 255, 0.84);
  color: #0f2a3d;
}

.n-page--story #s-drivers .n-drivers-row--split {
  gap: clamp(var(--sp-4), 2.6vw, var(--sp-5));
}

/* Rain / wind panel headers — research hook spans full column width */
.n-page--story #s-drivers #panel-rain-event-n .n-panel-header,
.n-page--story #s-drivers #panel-wind-rose-n .n-panel-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0.35rem 1rem;
}

.n-page--story #s-drivers #panel-rain-event-n .n-panel-header > div:first-child,
.n-page--story #s-drivers #panel-wind-rose-n .n-panel-header > div:first-child {
  display: contents;
}

.n-page--story #s-drivers #panel-rain-event-n .n-panel-header .n-causal-label,
.n-page--story #s-drivers #panel-wind-rose-n .n-panel-header .n-causal-label {
  grid-column: 1;
  grid-row: 1;
}

.n-page--story #s-drivers #panel-rain-event-n .n-panel-header .n-panel-title,
.n-page--story #s-drivers #panel-wind-rose-n .n-panel-header .n-panel-title {
  grid-column: 1;
  grid-row: 2;
}

.n-page--story #s-drivers #panel-rain-event-n .n-panel-header .n-panel-sub,
.n-page--story #s-drivers #panel-wind-rose-n .n-panel-header .n-panel-sub {
  grid-column: 1 / -1;
  grid-row: 3;
  width: 100%;
  max-width: 100%;
  margin-top: 0.35rem;
}

.n-page--story #s-drivers #panel-rain-event-n .n-panel-header .s-hook--panel,
.n-page--story #s-drivers #panel-wind-rose-n .n-panel-header .s-hook--panel {
  grid-column: 1 / -1;
  grid-row: 4;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-top: var(--sp-2);
}

.n-page--story #s-drivers #panel-rain-event-n .n-panel-header .n-driver-control-stack,
.n-page--story #s-drivers #panel-wind-rose-n .n-panel-header .n-driver-control-stack {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
}

.n-page--story #s-drivers #panel-rain-event-n {
  background:
    radial-gradient(circle at 90% 8%, rgba(56, 189, 248, 0.15) 0, transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(239, 248, 255, 0.9));
}

.n-page--story #s-drivers #panel-rain-scatter-n {
  background:
    radial-gradient(circle at 86% 6%, rgba(132, 204, 22, 0.15) 0, transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(240, 253, 250, 0.9));
}

.n-page--story #s-drivers #panel-wind-rose-n {
  background:
    radial-gradient(circle at 88% 7%, rgba(168, 85, 247, 0.12) 0, transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(239, 248, 255, 0.92));
}

.n-page--story #s-drivers .n-chart-rain {
  height: 280px;
  padding: var(--sp-4);
  border-color: rgba(14, 165, 233, 0.18);
  border-radius: 22px;
  background:
    radial-gradient(circle at 10% 12%, rgba(56, 189, 248, 0.16) 0, transparent 28%),
    radial-gradient(circle at 92% 86%, rgba(34, 197, 94, 0.08) 0, transparent 26%),
    repeating-linear-gradient(0deg, transparent 0 29px, rgba(14, 116, 144, 0.035) 30px 31px),
    linear-gradient(180deg, rgba(248, 250, 252, 0.98), rgba(239, 248, 255, 0.88));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    0 12px 24px rgba(14, 116, 144, 0.055);
}

.n-page--story #s-drivers .n-chart-rain::before {
  content: "";
  position: absolute;
  top: 16px;
  right: 18px;
  width: 120px;
  height: 72px;
  pointer-events: none;
  opacity: 0.68;
  background:
    radial-gradient(ellipse at 42% 38%, rgba(255, 255, 255, 0.68) 0 20px, transparent 21px),
    linear-gradient(116deg, transparent 0 54%, rgba(56, 189, 248, 0.34) 54.5% 56%, transparent 56.5%),
    linear-gradient(116deg, transparent 0 70%, rgba(14, 165, 233, 0.24) 70.5% 72%, transparent 72.5%);
}

.n-page--story #s-drivers .n-chart-rain canvas {
  position: relative;
  z-index: 1;
}

.n-page--story #s-drivers #panel-rain-event-n .n-chart-legend,
.n-page--story #s-drivers #panel-wind-rose-n .n-rose-scale {
  padding: 8px 10px;
  border: 1px solid rgba(20, 184, 166, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.68);
}

.n-page--story #s-drivers #panel-wind-rose-n .n-rose-wrap {
  position: relative;
  min-height: 390px;
  padding: var(--sp-4);
  border-color: rgba(20, 184, 166, 0.16);
  border-radius: 28px;
  background:
    radial-gradient(circle at 50% 50%, rgba(34, 197, 94, 0.18) 0 22%, transparent 23%),
    radial-gradient(circle at 50% 50%, rgba(56, 189, 248, 0.12) 0 46%, transparent 47%),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 44px, rgba(14, 116, 144, 0.055) 45px 46px),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(239, 248, 255, 0.82));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.84),
    0 12px 26px rgba(14, 116, 144, 0.06);
}

.n-page--story #s-drivers #panel-wind-rose-n .n-rose-wrap::before {
  content: "Wind rose";
  position: absolute;
  top: 14px;
  left: 16px;
  z-index: 1;
  padding: 4px 9px;
  border: 1px solid rgba(20, 184, 166, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #047857;
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
}

.n-page--story #s-drivers .n-rose-scale-label {
  color: #41635d;
  font-weight: var(--fw-bold);
}

.n-page--story #s-drivers .n-rose-chip {
  min-height: 24px;
  border-radius: 999px;
  padding: 0.2rem 0.65rem;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08);
}

.n-page--story #s-drivers .n-rose-takeaway {
  color: #41635d;
  font-weight: var(--fw-medium);
  border-top-color: rgba(20, 184, 166, 0.14);
}

.n-page--story #s-drivers .n-insight-box {
  padding: var(--sp-4);
  border: 1px solid rgba(14, 116, 144, 0.13);
  border-left: 0;
  border-radius: 22px;
  background:
    linear-gradient(135deg, rgba(15, 42, 61, 0.96), rgba(7, 89, 133, 0.92));
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.1);
}

.n-page--story #s-drivers .n-insight-box-text {
  color: #ffffff;
}

.n-page--story #s-research .s-section__body,
.n-page--story #s-partners .s-section__body {
  gap: var(--sp-4);
}

.n-page--story #s-research .s-section-header,
.n-page--story #s-partners .s-accordion__summary--section {
  max-width: none;
  margin-bottom: 0;
}

.n-page--story #s-research {
  border-color: rgba(20, 184, 166, 0.18);
  background:
    radial-gradient(circle at 86% 10%, rgba(56, 189, 248, 0.15) 0, transparent 28%),
    radial-gradient(circle at 12% 18%, rgba(34, 197, 94, 0.12) 0, transparent 24%),
    radial-gradient(circle at 68% 88%, rgba(168, 85, 247, 0.06) 0, transparent 24%),
    linear-gradient(135deg, #fbfdf9 0%, #eefbf4 42%, #edf9ff 100%);
}

.n-page--story #s-research::before {
  content: "";
  position: absolute;
  top: 54px;
  right: clamp(28px, 6vw, 84px);
  width: min(34vw, 360px);
  height: 210px;
  pointer-events: none;
  opacity: 0.72;
  background:
    radial-gradient(circle at 24% 22%, rgba(250, 204, 21, 0.18) 0 18px, transparent 19px),
    linear-gradient(116deg, transparent 0 54%, rgba(56, 189, 248, 0.2) 54.5% 55.5%, transparent 56%),
    linear-gradient(116deg, transparent 0 66%, rgba(20, 184, 166, 0.18) 66.5% 67.5%, transparent 68%),
    repeating-linear-gradient(0deg, transparent 0 22px, rgba(14, 116, 144, 0.035) 23px 24px),
    repeating-linear-gradient(90deg, transparent 0 30px, rgba(14, 116, 144, 0.03) 31px 32px);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 72%, transparent);
}

.n-page--story #s-research .s-section-header {
  position: relative;
  max-width: 980px;
  padding-bottom: var(--sp-3);
}

.n-page--story #s-research .s-section-header::after {
  content: "";
  width: min(100%, 640px);
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #14b8a6 0%, #38bdf8 44%, #8b5cf6 76%, #84cc16 100%);
}

.n-page--story #s-research .s-section-header__title {
  max-width: 980px;
  color: #09233c;
}

.n-page--story #s-research .s-section-header__hook {
  max-width: 1040px;
  color: #41635d;
  font-size: clamp(var(--fs-15), 1.25vw, var(--fs-17));
}

.n-page--story #s-research .n-explain-card--section {
  max-width: none;
  width: min(100%, 980px);
  border-color: rgba(20, 184, 166, 0.14);
  background:
    radial-gradient(circle at 92% 8%, rgba(56, 189, 248, 0.11) 0, transparent 26%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(240, 253, 250, 0.68));
}

.n-page--story #s-research .n-explain-kicker {
  color: #047857;
  font-weight: var(--fw-bold);
}

.n-page--story #s-research .n-explain-text {
  color: #41635d;
  font-weight: var(--fw-medium);
}

.n-page--story #s-research .s-research__questions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}

.n-page--story #s-research .s-accordion,
.n-page--story #s-partners .s-accordion--section {
  overflow: hidden;
  border: 1px solid rgba(14, 116, 144, 0.13);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(248, 251, 247, 0.98));
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.055);
}

.n-page--story #s-research .s-accordion {
  position: relative;
  min-height: 76px;
  border-color: rgba(20, 184, 166, 0.1);
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(248, 253, 250, 0.64));
  box-shadow:
    0 8px 18px rgba(15, 23, 42, 0.035),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease;
}

.n-page--story #s-research .s-accordion:hover {
  transform: translateY(-1px);
  border-color: rgba(20, 184, 166, 0.16);
  box-shadow:
    0 10px 22px rgba(15, 23, 42, 0.045),
    inset 0 1px 0 rgba(255, 255, 255, 0.76);
}

.n-page--story #s-research .s-accordion[open] {
  border-color: rgba(14, 116, 144, 0.16);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(240, 253, 250, 0.66));
}

.n-page--story #s-research .s-accordion__summary {
  min-height: 74px;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
}

.n-page--story #s-research .s-accordion__tag {
  display: inline-grid;
  place-items: center;
  width: auto;
  height: auto;
  min-width: 28px;
  padding: 2px 7px;
  border: 1px solid rgba(20, 184, 166, 0.12);
  border-radius: 999px;
  background: rgba(240, 253, 250, 0.66);
  color: #2f6f62;
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
}

.n-page--story #s-research .s-accordion__title {
  color: #31566b;
  font-size: clamp(var(--fs-15), 1.15vw, var(--fs-17));
  font-weight: var(--fw-semibold);
  letter-spacing: -0.005em;
}

.n-page--story #s-research .s-accordion__chevron {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.58);
  color: #6b8b82;
}

.n-page--story #s-research .s-accordion__body {
  border-top-color: rgba(20, 184, 166, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(240, 253, 250, 0.54));
  color: #41635d;
}

.n-page--story #s-research .s-accordion__lead {
  margin: 0;
  color: #24423e;
  font-family: var(--font-serif);
  font-size: var(--fs-17);
  font-style: italic;
  line-height: var(--lh-relaxed);
}

.n-page--story #s-research .s-accordion__note {
  padding: var(--sp-3);
  border: 1px solid rgba(20, 184, 166, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.68);
  color: #41635d;
}

.n-page--story #s-research .s-accordion__note-label {
  color: #047857;
  font-weight: var(--fw-bold);
}

.n-page--story #s-partners .s-accordion__summary--section {
  min-height: 116px;
  background:
    radial-gradient(circle at 92% 0%, rgba(56, 189, 248, 0.18) 0, transparent 32%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(240, 253, 250, 0.72));
}

.n-page--story #s-partners {
  margin-bottom: 0;
  border-color: rgba(20, 184, 166, 0.18);
  background:
    radial-gradient(circle at 86% 10%, rgba(56, 189, 248, 0.16) 0, transparent 28%),
    radial-gradient(circle at 14% 20%, rgba(34, 197, 94, 0.12) 0, transparent 24%),
    linear-gradient(135deg, #fbfdf9 0%, #eefbf4 42%, #edf9ff 100%);
}

.n-page--story #s-partners .s-accordion--section {
  border: 0;
  background: transparent;
  box-shadow: none;
}

.n-page--story #s-partners .s-accordion__summary--section {
  min-height: 132px;
  padding: clamp(var(--sp-4), 3vw, var(--sp-6));
  border: 1px solid rgba(20, 184, 166, 0.14);
  border-radius: 28px;
  background:
    radial-gradient(circle at 82% 14%, rgba(56, 189, 248, 0.18) 0, transparent 30%),
    radial-gradient(circle at 8% 84%, rgba(132, 204, 22, 0.13) 0, transparent 26%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(240, 253, 250, 0.74) 48%, rgba(239, 248, 255, 0.78));
  box-shadow:
    0 18px 40px rgba(15, 23, 42, 0.065),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.n-page--story #s-partners .s-accordion__summary--section::after {
  content: "";
  position: absolute;
  left: clamp(var(--sp-4), 3vw, var(--sp-6));
  right: clamp(var(--sp-4), 3vw, var(--sp-6));
  bottom: clamp(var(--sp-3), 2vw, var(--sp-4));
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #14b8a6 0%, #38bdf8 44%, #84cc16 100%);
  opacity: 0.9;
}

.n-page--story #s-partners .s-accordion__section-title {
  color: #09233c;
  font-size: clamp(2rem, 3.2vw, 3rem);
  letter-spacing: -0.05em;
}

.n-page--story #s-partners .s-accordion__tag {
  width: fit-content;
  padding: 4px 10px;
  border: 1px solid rgba(20, 184, 166, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.62);
  color: #047857;
  font-weight: var(--fw-bold);
}

.n-page--story #s-partners .s-accordion__chevron {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: linear-gradient(135deg, #0f2a3d, #075985);
  color: #ffffff;
}

.n-page--story #s-partners .s-accordion__body--section {
  margin-top: var(--sp-4);
  padding: 0;
  border-top: 0;
  background: transparent;
}

.n-page--story #s-partners .s-partners__grid {
  gap: var(--sp-4);
}

.n-page--story #s-partners .s-card {
  border-color: rgba(20, 184, 166, 0.13);
  border-radius: 22px;
  background:
    radial-gradient(circle at 92% 10%, rgba(56, 189, 248, 0.1) 0, transparent 26%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(240, 253, 250, 0.68));
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.055);
}

.n-page--story #s-partners .s-card__eyebrow {
  color: #047857;
  font-weight: var(--fw-bold);
}

.n-page--story #s-partners .s-card__bullet,
.n-page--story #s-partners .s-card__item-body,
.n-page--story #s-partners .s-card__body {
  color: #41635d;
  font-weight: var(--fw-medium);
}

.n-page--story #s-partners .s-card__item {
  background: rgba(255, 255, 255, 0.66);
  border-left-color: #14b8a6;
}

@media (max-width: 1100px) {
  .n-page--story #s-drivers .n-section-head {
    grid-template-columns: 1fr;
  }

  .n-page--story #s-timeseries .n-section-sub--switch-views {
    grid-template-columns: 1fr;
  }

  .n-page--story #s-timeseries .n-switch-views__items {
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .n-page--story #s-timeseries .n-time-control--timeseries-bottom {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .n-page--story #s-timeseries .n-tabs,
  .n-page--story #s-research .s-research__questions {
    grid-template-columns: 1fr;
  }
}

/* ─────────────────────────────────────────────────────────────
   Phase E · Researchers section (Layer 3)
   Companion controller: static/js/story/s-research.js
   Copy source:          STORY_STRINGS.research (s-strings.js)

   As of Phase 6 (visual-unification rollout, 2026-04-19):
     - Section header uses the §4.1 grammar (.s-section-header).
     - Every question row is a .s-accordion from s-components.css.
     - All of the old .s-research__* CSS was deleted; only the
       section wrapper + questions list needs layout here.
   ───────────────────────────────────────────────────────────── */

.n-page--story .s-research {
  padding-block: clamp(var(--sp-5), 3vw, var(--sp-7));
}

.n-page--story .s-research__questions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* Anchor highlight when the user navigates via a Layer-2 research
   hook ("See research question →"). A soft focus-ring tells the
   eye where it landed without pulling the page's calm register. */
.n-page--story .s-accordion:target {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 2px var(--c-accent-weak);
}

/* ─────────────────────────────────────────────────────────────
   Phase F · Partners section (Layer 4 · collapsed by default)
   Companion controller: static/js/story/s-partners.js
   Copy source:          STORY_STRINGS.partners (s-strings.js)

   As of Phase 7 (visual-unification rollout, 2026-04-19):
     - Outer accordion uses .s-accordion.s-accordion--section, so the
       summary reads as a full section header (eyebrow + serif h2 +
       chevron) — see s-components.css.
     - Each of the 4 content blocks is a .s-card (with .s-card__eyebrow
       + .s-card__bullets or .s-card__items).
     - The contact tile is a .s-card.s-card--quiet sharing grammar with
       the Layer-5 contact band.
   ───────────────────────────────────────────────────────────── */

.n-page--story .s-partners {
  padding-block: clamp(var(--sp-5), 3vw, var(--sp-7));
}

.n-page--story .s-partners__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}

.n-page--story .s-partners__contact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
}

.n-page--story .s-partners__contact-line {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-2);
}

.n-page--story .s-partners__contact-name {
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  font-weight: var(--fw-semibold);
  color: var(--c-ink);
}

@media (max-width: 720px) {
  .n-page--story .s-partners__grid { grid-template-columns: 1fr; }
}

/* (Phase 7 — deleted stale html[data-theme="light"] .s-partners__* overrides.
   Old .s-partners__* class names no longer exist in the DOM; Partners now
   uses .s-accordion--section + .s-card from s-components.css which inherits
   theme from design tokens automatically.) */

/* ─────────────────────────────────────────────────────────────
   Phase G · Footer (Layer 5 · academic colophon)
   Companion controller: static/js/story/s-footer.js
   Copy source:          STORY_STRINGS.footer (s-strings.js)

   As of Phase 8 of the visual-unification rollout
   (docs/plan/todo/2026-04-19-dashboard-story-visual-unification.md):
     - All slate/green chrome is gone. The footer now reads as a
       calm academic colophon on the same warm-paper surface as the
       rest of the page.
     - Headings use the shared eyebrow grammar (§4.1 s-section-header
       eyebrow → same tokens).
     - Citation blocks reuse .s-card.s-card--quiet chrome via tokens.
     - All color comes from design tokens so light/dark themes are
       picked up automatically from body.theme-light / body (default).
   ───────────────────────────────────────────────────────────── */

.n-page--story .s-footer__svg-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.n-page--story .s-footer {
  width: min(var(--page-max), calc(100% - clamp(var(--sp-4), 6vw, var(--sp-8))));
  margin: clamp(var(--sp-4), 3vw, var(--sp-5)) auto var(--sp-7);
  padding: clamp(var(--sp-4), 3vw, var(--sp-6));
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(20, 184, 166, 0.16);
  border-radius: 30px;
  background:
    radial-gradient(circle at 10% 8%, rgba(34, 197, 94, 0.11) 0, transparent 24%),
    radial-gradient(circle at 90% 12%, rgba(56, 189, 248, 0.15) 0, transparent 28%),
    linear-gradient(135deg, #fbfdf9 0%, #eefbf4 42%, #edf9ff 100%);
  box-shadow:
    0 22px 54px rgba(15, 23, 42, 0.075),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  color: #41635d;
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  line-height: var(--lh-relaxed);
}

.n-page--story .s-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(116deg, transparent 0 58%, rgba(56, 189, 248, 0.08) 58.2% 58.8%, transparent 59%),
    repeating-linear-gradient(0deg, transparent 0 26px, rgba(14, 116, 144, 0.026) 27px 28px),
    repeating-linear-gradient(90deg, transparent 0 34px, rgba(14, 116, 144, 0.022) 35px 36px);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.08) 28%, rgba(0, 0, 0, 0.42) 100%);
}

.n-page--story .s-footer__inner {
  position: relative;
  z-index: 1;
  max-width: none;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  align-items: start;
}

.n-page--story .s-footer__heading {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-sans);
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: #047857;
}

.n-page--story .s-footer__section {
  min-width: 0;
}

.n-page--story .s-footer__section--affiliations,
.n-page--story .s-footer__section--citation,
.n-page--story .s-footer__section--ack,
.n-page--story .s-footer__bottom {
  border: 1px solid rgba(20, 184, 166, 0.13);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(240, 253, 250, 0.62));
  box-shadow:
    0 14px 28px rgba(15, 23, 42, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.n-page--story .s-footer__section--affiliations {
  grid-column: 1;
  padding: var(--sp-4);
}

/* ---- Affiliations ------------------------------------------------ */

.n-page--story .s-footer__affil-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
}

.n-page--story .s-footer__support {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid rgba(20, 184, 166, 0.1);
}

.n-page--story .s-footer__heading--support {
  margin-bottom: var(--sp-2);
  color: #6b8b82;
}

.n-page--story .s-footer__affil-list--support {
  gap: var(--sp-2) var(--sp-4);
}

.n-page--story .s-footer__affil-list--support .s-footer__affil-link {
  font-size: var(--fs-12);
  color: #41635d;
}

.n-page--story .s-footer__affil-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 42px;
  padding: 8px 12px;
  border: 1px solid rgba(20, 184, 166, 0.1);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.58);
  color: #24423e;
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  font-weight: var(--fw-regular);
  line-height: 1.2;
  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;
}
.n-page--story .s-footer__affil-link:hover {
  color: #047857;
  border-color: rgba(20, 184, 166, 0.22);
  background: rgba(255, 255, 255, 0.82);
}
.n-page--story .s-footer__affil-link--static { cursor: default; }

.n-page--story .s-footer__logo {
  height: 60px;
  width: auto;
  max-width: min(440px, 100%);
  object-fit: contain;
  filter: grayscale(0.12);
  transition: filter 140ms ease;
}
.n-page--story .s-footer__affil-link:hover .s-footer__logo { filter: none; }

.n-page--story .s-footer__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: #047857;
}
.n-page--story .s-footer__icon svg { width: 100%; height: 100%; display: block; }

.n-page--story .s-footer__affil-label { font-weight: var(--fw-medium); }

/* ---- Citation + Acknowledgments 2-col grid ---------------------- */

.n-page--story .s-footer__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-4);
  grid-column: 1;
  padding-top: 0;
  border-top: 0;
}

.n-page--story .s-footer__section--citation,
.n-page--story .s-footer__section--ack {
  padding: var(--sp-4);
}

.n-page--story .s-footer__citation-block {
  padding: var(--sp-3) var(--sp-4);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(248, 251, 247, 0.7));
  border: 1px solid rgba(20, 184, 166, 0.11);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.n-page--story .s-footer__citation-block + .s-footer__citation-block {
  margin-top: var(--sp-2);
}

.n-page--story .s-footer__citation-label {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: #047857;
}

.n-page--story .s-footer__citation-body {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  line-height: var(--lh-relaxed);
  color: #334155;
  word-break: break-word;
}

.n-page--story .s-footer__citation-link {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  color: #047857;
  text-decoration: none;
  border-bottom: 1px dashed color-mix(in srgb, var(--c-accent) 45%, transparent);
  align-self: flex-start;
  padding-block: 2px;
  transition: border-color 140ms ease;
}
.n-page--story .s-footer__citation-link:hover {
  border-bottom-color: var(--c-accent);
}

.n-page--story .s-footer__citation-copy {
  align-self: flex-start;
  padding: 4px 10px;
  font-family: var(--font-sans);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: #0f766e;
  background: rgba(240, 253, 250, 0.72);
  border: 1px solid rgba(20, 184, 166, 0.16);
  border-radius: 999px;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.n-page--story .s-footer__citation-copy:hover {
  background: rgba(20, 184, 166, 0.12);
  color: #064e3b;
  border-color: rgba(20, 184, 166, 0.28);
}
.n-page--story .s-footer__citation-copy.is-copied {
  background: #047857;
  color: #ffffff;
  border-color: #047857;
}

.n-page--story .s-footer__ack-body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  line-height: var(--lh-relaxed);
  color: #41635d;
  font-weight: var(--fw-medium);
}

/* ---- Bottom row ------------------------------------------------- */

.n-page--story .s-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-5);
  grid-column: 1 / -1;
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid rgba(20, 184, 166, 0.13);
  font-size: var(--fs-12);
}

.n-page--story .s-footer__bottom-cell {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-2);
  color: #41635d;
}

.n-page--story .s-footer__bottom-label {
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  color: #047857;
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  font-size: var(--fs-11);
}

.n-page--story .s-footer__contact-pair {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-1);
}
.n-page--story .s-footer__contact-name {
  color: #24423e;
  font-weight: var(--fw-medium);
}
.n-page--story .s-footer__contact-email {
  color: #047857;
  text-decoration: none;
  border-bottom: 1px dashed color-mix(in srgb, var(--c-accent) 45%, transparent);
  padding-block: 1px;
  transition: border-color 140ms ease;
}
.n-page--story .s-footer__contact-email:hover {
  border-bottom-color: var(--c-accent);
}

.n-page--story .s-footer__time {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: #41635d;
}

@media (max-width: 980px) {
  .n-page--story .s-footer__inner {
    grid-template-columns: 1fr;
  }

  .n-page--story .s-footer__section--affiliations,
  .n-page--story .s-footer__cols {
    grid-column: 1;
  }
}

@media (max-width: 720px) {
  .n-page--story .s-footer__cols { grid-template-columns: 1fr; }
  .n-page--story .s-footer__logo { height: 24px; }
}

/* ─────────────────────────────────────────────────────────────
   Phase H · Cross-cutting polish — header + TOC + theme toggle
   ─────────────────────────────────────────────────────────────
   Re-skins the header chrome (inherited from the narrative
   variant) so it matches the academic register of Layers 1-5.
   The narrative variant is built for a commercial SaaS pitch —
   teal/sky-blue accents, Inter-looking titles, dark panels —
   and we do not touch those originals. All Phase-9 rules are
   scoped to .n-page--story.

   What changes (scoped to /dashboard-story):
     - Header brand: title in IBM Plex Serif (same family as
       section headings), subtitle in IBM Plex Sans Medium
       ink-3, mark uses muted-accent soft wash.
     - Time-window button group: warm paper-2 surface, hairline
       border, active button uses --c-accent-weak fill + ink.
     - Theme toggle: paper + hairline border, chevron-sized
       label in caps tokens, accent hover — matches the .s-chip
       grammar rather than the bright sky-blue ring.
     - Connection status + header-desc + source badges: muted
       ink-3 tokens, no bright brand colors.
     - Status/alert bar: accent-weak wash + accent left rail,
       prose-max body width.
     - Sticky TOC: warm paper background with a subtle blur,
       hairline bottom border; active link uses --c-accent +
       --c-accent-weak (not teal/cyan).

   Companion rules live in s-components.css and s-tokens.css.
   ───────────────────────────────────────────────────────────── */

/* ---- Header shell ------------------------------------------------ */

.n-page--story .n-header {
  position: relative;
  overflow: hidden;
  margin-top: clamp(var(--sp-4), 3vw, var(--sp-6));
  padding: clamp(var(--sp-4), 3vw, var(--sp-6));
  border: 1px solid rgba(14, 165, 168, 0.24);
  border-radius: clamp(18px, 2vw, 28px);
  background:
    radial-gradient(circle at 9% 18%, rgba(34, 197, 94, 0.16) 0, transparent 23%),
    radial-gradient(circle at 78% 8%, rgba(14, 165, 233, 0.22) 0, transparent 28%),
    radial-gradient(circle at 101% 85%, rgba(168, 85, 247, 0.11) 0, transparent 24%),
    linear-gradient(135deg, #f8fbf7 0%, #eef9f6 44%, #eff8ff 100%);
  box-shadow:
    0 22px 60px rgba(15, 23, 42, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
  max-width: var(--page-max);
}

.n-page--story .n-header::before {
  content: none;
}

.n-page--story .n-header::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 71% 39%, rgba(14, 165, 233, 0.72) 0 3px, transparent 4px),
    radial-gradient(circle at 78% 31%, rgba(34, 197, 94, 0.58) 0 3px, transparent 4px),
    radial-gradient(circle at 85% 44%, rgba(168, 85, 247, 0.46) 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 92% 25%, rgba(14, 165, 233, 0.42) 0 2.5px, transparent 3.5px),
    linear-gradient(115deg, transparent 0 61%, rgba(14, 165, 233, 0.12) 61.2% 61.8%, transparent 62%),
    linear-gradient(122deg, transparent 0 66%, rgba(34, 197, 94, 0.11) 66.2% 66.8%, transparent 67%),
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(14, 116, 144, 0.045) 24px 25px),
    repeating-linear-gradient(90deg, transparent 0 27px, rgba(14, 116, 144, 0.035) 28px 29px);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.08) 32%, rgba(0, 0, 0, 0.7) 100%);
  opacity: 0.9;
  z-index: 0;
}

.n-page--story .n-header-top {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  column-gap: clamp(48px, 6vw, 96px);
  row-gap: var(--sp-4);
}

.n-page--story .n-header-brand {
  display: grid;
  grid-template-columns: auto minmax(470px, 1fr);
  align-items: center;
  gap: clamp(var(--sp-3), 2vw, var(--sp-5));
  min-width: 0;
}

/* Header mark — collaboration lockup (Phase 10, 2026-04-19).
   Two institutional marks stacked vertically with a × between them,
   following the academic "Lab A × Lab B" convention for joint
   publications:
     ┌───────────────────────┐
     │  [FIU · GIS Center]   │  wide, ~4:1  → top row
     │          ×            │  muted ink-3 glyph
     │        [ECL]          │  square, ~1:1 → bottom row
     └───────────────────────┘
   Both marks are colored assets designed for light backgrounds, so
   the well is pinned to a light paper tone in both themes (theming
   the well would make the ECL blue+green triangle and the FIU navy
   wordmark unreadable in dark). The cross glyph, border, and focus
   ring DO track tokens so the lockup feels integrated with the rest
   of the header chrome. */
.n-page--story .n-header-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  padding: 9px 12px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(14, 116, 144, 0.16);
  border-radius: 18px;
  box-shadow:
    0 16px 34px rgba(14, 116, 144, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.n-page--story .n-header-mark--lockup {
  flex-direction: column;
  gap: 8px;
  min-width: 170px;
}

.n-page--story .n-header-mark--generated-lockup {
  padding: 7px 10px;
  min-width: 0;
  background-color: #ffffff00;
  border: 0;
  box-shadow: none;
}

.n-page--story .n-header-mark__img--generated-lockup {
  width: clamp(178px, 17vw, 232px);
  height: auto;
  max-height: 58px;
}

.n-page--story .n-header-mark__cell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 2px;
  transition: opacity var(--dur-fast) var(--ease-standard);
}
.n-page--story .n-header-mark__cell:hover { opacity: 0.78; }
.n-page--story .n-header-mark__cell:focus-visible {
  outline: 2px solid var(--c-focus-ring);
  outline-offset: 3px;
}

.n-page--story .n-header-mark__img {
  display: block;
  object-fit: contain;
}
.n-page--story .n-header-mark__img--wide {
  height: 26px;
  width: auto;
  max-width: 190px;
}
.n-page--story .n-header-mark__img--square {
  height: 72px;
  width: 72px;
}

.n-page--story .n-header-mark__cross {
  font-family: var(--font-serif);
  font-size: var(--fs-18);
  font-weight: var(--fw-regular);
  line-height: 1;
  color: var(--c-ink-3);
  letter-spacing: var(--ls-normal);
  opacity: 0.55;
  user-select: none;
  /* Vertically connect the two logos with a subtle rule on each side */
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-block: 2px;
}
.n-page--story .n-header-mark__cross::before,
.n-page--story .n-header-mark__cross::after {
  content: "";
  flex: 1;
  height: 1px;
  /* Pinned light-theme hairline — the well below us is pinned to
     light paper regardless of theme, so the rule must use a dark
     stroke in BOTH themes. Using var(--c-line) here would go
     invisible in dark mode (dark token is translucent light). */
  background: rgba(28, 25, 23, 0.14);
  margin-inline: 8px;
}

.n-page--story .n-header-copy {
  min-width: 0;
  max-width: 720px;
}

.n-page--story .n-header-kicker {
  margin: 0 0 7px;
  font-family: var(--font-sans);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.14em;
  line-height: 1;
  text-transform: uppercase;
  color: #047857;
}

.n-page--story .n-header-title {
  position: relative;
  display: block;
  width: fit-content;
  max-width: 100%;
  font-family: var(--font-serif);
  font-weight: var(--fw-semibold);
  font-size: clamp(1.82rem, 2.45vw, 2.36rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: #09233c !important;
  -webkit-text-fill-color: #09233c;
  white-space: nowrap;
  text-wrap: nowrap;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72), 0 10px 22px rgba(15, 23, 42, 0.08);
}

.n-page--story .n-header-title-accent {
  color: #087f8c;
  -webkit-text-fill-color: #087f8c;
}

.n-page--story .n-header-title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.18em;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #14b8a6 0%, #38bdf8 46%, #84cc16 100%);
  opacity: 0.92;
}

.n-page--story .n-header-org {
  margin-top: 6px;
  font-family: var(--font-sans);
  font-size: clamp(var(--fs-12), 1vw, var(--fs-14));
  font-weight: var(--fw-medium);
  color: #334155;
  letter-spacing: 0.01em;
}

.n-page--story .n-header-controls {
  justify-self: end;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 5px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(14, 116, 144, 0.18);
  border-radius: 999px;
  box-shadow:
    0 8px 22px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.76);
  backdrop-filter: blur(14px);
}

.n-page--story .n-connection-status {
  min-height: 32px;
  padding: 0 11px;
  border-radius: 999px;
  color: #64748b;
  background: rgba(248, 250, 252, 0.92);
  border: 1px solid rgba(148, 163, 184, 0.32);
  box-shadow: none;
}

.n-page--story .n-header-meta-strip {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: clamp(var(--sp-3), 1.8vw, var(--sp-4));
  padding-top: var(--sp-3);
  border-top: 1px solid rgba(14, 116, 144, 0.12);
}

.n-page--story .n-header-desc {
  margin: 0;
  font-family: var(--font-sans);
  font-size: clamp(var(--fs-13), 1vw, var(--fs-15));
  line-height: var(--lh-relaxed);
  color: #475569;
  max-width: var(--prose-max);
}

.n-page--story .n-header-source-list {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
}

.n-page--story .n-source-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: var(--fw-medium);
  color: #475569;
  background: rgba(255, 255, 255, 0.58);
  border: 1px solid rgba(14, 116, 144, 0.1);
  border-radius: 999px;
  letter-spacing: 0.035em;
  margin: 0;
  white-space: nowrap;
  box-shadow: none;
}

.n-page--story .n-source-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--c-accent);
  box-shadow: none;
}

.n-page--story .n-source-badge--pm::before { background: #22c55e; }
.n-page--story .n-source-badge--wind::before { background: #0ea5e9; }
.n-page--story .n-source-badge--chem::before { background: #a855f7; }

@media (max-width: 980px) {
  .n-page--story .n-header-top,
  .n-page--story .n-header-brand {
    grid-template-columns: 1fr;
  }

  .n-page--story .n-header-controls,
  .n-page--story .n-header-source-list {
    justify-content: flex-start;
  }

  .n-page--story .n-header-controls {
    justify-self: start;
  }

  .n-page--story .n-header-meta-strip {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .n-page--story .n-header {
    border-radius: 18px;
  }

  .n-page--story .n-header-mark,
  .n-page--story .n-header-mark--generated-lockup {
    width: 100%;
  }

  .n-page--story .n-header-mark__img--generated-lockup {
    width: min(100%, 320px);
  }

  .n-page--story .n-header-controls {
    border-radius: 18px;
  }
}

/* ---- Time window control ----------------------------------------- */

.n-page--story .n-time-label {
  font-family: var(--font-sans);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--c-ink-3);
}

.n-page--story .n-time-btns {
  background: var(--c-paper-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  padding: 3px;
}

.n-page--story .n-time-btn {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  color: var(--c-ink-2);
  border-radius: var(--r-xs);
  padding: 5px var(--sp-3);
  transition: background 140ms ease, color 140ms ease;
}
.n-page--story .n-time-btn:hover {
  background: var(--c-surface);
  color: var(--c-ink);
}
.n-page--story .n-time-btn--active {
  background: var(--c-accent-weak) !important;
  color: var(--c-ink) !important;
  box-shadow: none !important;
  font-weight: var(--fw-semibold);
}

/* ---- Connection status dot + label ------------------------------- */

.n-page--story .n-status-dot {
  background: #94a3b8;
  width: 8px;
  height: 8px;
  box-shadow: none;
}
.n-page--story .n-status-dot.connected {
  background: #22c55e;
  box-shadow: none;
}
.n-page--story .n-status-dot.stale {
  background: #94a3b8;
}
.n-page--story .n-status-dot.error {
  background: #cbd5e1;
}
.n-page--story .n-status-text {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  color: #64748b;
}

.n-page--story .n-connection-status[data-has-stale="true"] .n-status-text {
  color: #64748b;
}

/* ---- Notes button + theme selector (grouped chip grammar) -------- */

.n-page--story .n-header-tool-btn,
.n-page--story .n-theme-btn,
.n-page--story .n-theme-control {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff;
  background: linear-gradient(135deg, #0f2a3d 0%, #075985 100%);
  border: 1px solid rgba(7, 89, 133, 0.28);
  border-radius: 999px;
  min-height: 32px;
  padding: 0 11px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13);
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.n-page--story .n-theme-btn { min-width: 36px; gap: 6px; }
.n-page--story .n-theme-btn::after { color: inherit; opacity: 1; }

.n-page--story .n-header-tool-btn:hover,
.n-page--story .n-theme-btn:hover,
.n-page--story .n-theme-control:hover {
  background: #e0f2fe;
  color: var(--c-ink);
  border-color: rgba(14, 165, 233, 0.46);
  transform: none;
  box-shadow:
    0 8px 20px rgba(14, 116, 144, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.86);
}
.n-page--story .n-header-tool-btn:hover {
  color: #ffffff;
  background: linear-gradient(135deg, #123d5a 0%, #0284c7 100%);
}
.n-page--story .n-theme-control:hover {
  color: #ffffff;
  background: linear-gradient(135deg, #123d5a 0%, #0284c7 100%);
}
.n-page--story .n-theme-btn:focus-visible,
.n-page--story .n-theme-control:focus-within {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

.n-page--story .n-theme-label {
  color: rgba(255, 255, 255, 0.86);
  opacity: 1;
}

.n-page--story .n-theme-select {
  color: #ffffff;
  border-left-color: rgba(255, 255, 255, 0.22);
  min-width: 72px;
  font-weight: var(--fw-bold);
}

/* ---- Status / alert / insight bar ------------------------------- */

.n-page--story .n-status-bar {
  background: var(--c-accent-weak);
  border: 1px solid color-mix(in srgb, var(--c-accent) 30%, transparent);
  border-left-width: 3px;
  border-radius: var(--r-sm);
  color: var(--c-ink-2);
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
}
.n-page--story .n-status-bar-inner {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}
.n-page--story .n-status-bar-icon {
  flex-shrink: 0;
  font-size: var(--fs-14);
}
.n-page--story .n-status-bar-text {
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  line-height: var(--lh-relaxed);
  color: var(--c-ink-2);
}
.n-page--story .n-status-bar-insight {
  margin: 0;
  max-width: var(--prose-max);
  color: var(--c-ink);
}
.n-page--story .n-status-bar-time {
  display: block;
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  color: var(--c-ink-3);
}

/* ---- Sticky TOC -------------------------------------------------- */

.n-page--story .n-toc {
  width: fit-content;
  max-width: calc(100% - clamp(var(--sp-4), 6vw, var(--sp-8)));
  margin: clamp(var(--sp-3), 2vw, var(--sp-4)) auto calc(var(--sp-3) * -1);
  position: sticky;
  padding: 7px;
  gap: 4px;
  border: 1px solid rgba(14, 116, 144, 0.13);
  border-radius: 999px;
  background:
    radial-gradient(circle at 18% 18%, rgba(251, 146, 60, 0.16) 0, transparent 24%),
    radial-gradient(circle at 48% 0%, rgba(56, 189, 248, 0.18) 0, transparent 34%),
    radial-gradient(circle at 86% 88%, rgba(34, 197, 94, 0.14) 0, transparent 30%),
    linear-gradient(100deg, rgba(255, 255, 255, 0.94) 0%, rgba(236, 254, 255, 0.9) 44%, rgba(240, 253, 250, 0.9) 100%);
  box-shadow:
    0 12px 28px rgba(15, 23, 42, 0.075),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px) saturate(1.12);
  -webkit-backdrop-filter: blur(14px) saturate(1.12);
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  justify-content: center;
  isolation: isolate;
}

.n-page--story .n-toc::before {
  content: "";
  position: absolute;
  inset: 5px;
  z-index: -1;
  border-radius: inherit;
  background:
    linear-gradient(90deg,
      rgba(20, 184, 166, 0.18) 0%,
      rgba(56, 189, 248, 0.18) 36%,
      rgba(251, 146, 60, 0.12) 68%,
      rgba(132, 204, 22, 0.14) 100%);
  opacity: 0.72;
}

.n-page--story .n-toc-label {
  font-family: var(--font-sans);
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: #163247;
  padding: 0 var(--sp-2) 0 var(--sp-3);
  margin-right: 2px;
}

.n-page--story .n-toc-link {
  position: relative;
  min-height: 30px;
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  letter-spacing: 0.01em;
  color: #243447;
  border-radius: var(--r-pill);
  padding: 6px 12px;
  border: 1px solid rgba(14, 116, 144, 0.12);
  background: rgba(255, 255, 255, 0.62);
  transition:
    transform 140ms ease,
    background 140ms ease,
    color 140ms ease,
    border-color 140ms ease,
    box-shadow 140ms ease;
}
.n-page--story .n-toc-link:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.92);
  color: #0b2538;
  border-color: rgba(14, 116, 144, 0.18);
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.06);
}
.n-page--story .n-toc-link--active {
  background: linear-gradient(135deg, #0f2a3d 0%, #075985 100%) !important;
  color: #ffffff !important;
  border-color: rgba(7, 89, 133, 0.32) !important;
  box-shadow: 0 8px 16px rgba(15, 23, 42, 0.12);
}
.n-page--story .n-toc-link-dot {
  width: 6px;
  height: 6px;
  background: #38bdf8;
  opacity: 0.88;
}
.n-page--story .n-toc-link:nth-of-type(1) .n-toc-link-dot { background: #22c55e; }
.n-page--story .n-toc-link:nth-of-type(2) .n-toc-link-dot { background: #38bdf8; }
.n-page--story .n-toc-link:nth-of-type(3) .n-toc-link-dot { background: #0ea5e9; }
.n-page--story .n-toc-link:nth-of-type(4) .n-toc-link-dot { background: #f97316; }
.n-page--story .n-toc-link:nth-of-type(5) .n-toc-link-dot { background: #8b5cf6; }
.n-page--story .n-toc-link:nth-of-type(6) .n-toc-link-dot { background: #84cc16; }

.n-page--story .n-toc-link::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 3px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, #14b8a6, #38bdf8, #fb923c);
  opacity: 0;
  transform: scaleX(0.5);
  transition: opacity 140ms ease, transform 140ms ease;
}

.n-page--story .n-toc-link:hover::after {
  opacity: 0.52;
  transform: scaleX(1);
}
.n-page--story .n-toc-link--active .n-toc-link-dot {
  background: #86efac;
  opacity: 1;
  box-shadow: 0 0 0 3px rgba(134, 239, 172, 0.16);
}

.n-page--story .n-toc-link--active::after {
  opacity: 0;
}

@media (max-width: 720px) {
  .n-page--story .n-toc {
    width: auto;
    max-width: calc(100% - var(--sp-4));
    justify-content: flex-start;
    margin-inline: var(--sp-2);
    border-radius: 22px;
  }

  .n-page--story .n-toc-label {
    display: none;
  }
}

/* ─────────────────────────────────────────────────────────────
   Calm pass · boss feedback, 2026-05-24
   Preserve Header + About. Reduce visual noise from every later
   dashboard section so the page reads as a coherent research dashboard
   instead of a series of decorated experiments.
   ───────────────────────────────────────────────────────────── */

.n-page--story #s-conditions,
.n-page--story #s-timeseries,
.n-page--story #s-drivers,
.n-page--story #s-research,
.n-page--story #s-partners,
.n-page--story .s-footer {
  border-color: rgba(14, 116, 144, 0.12) !important;
  background: linear-gradient(180deg, #fbfdfb 0%, #f4fbf8 100%) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.045) !important;
}

.n-page--story #s-conditions::before,
.n-page--story #s-conditions::after,
.n-page--story #s-timeseries::after,
.n-page--story #s-drivers::after,
.n-page--story #s-research::before,
.n-page--story #s-research::after,
.n-page--story #s-partners::after,
.n-page--story .s-footer::before,
.n-page--story #s-timeseries .n-tab-group::after,
.n-page--story #s-timeseries #panel-multi-sensor-n::before,
.n-page--story #s-drivers .n-chart-rain::before {
  display: none !important;
}

.n-page--story #s-conditions .n-section-title,
.n-page--story #s-timeseries .n-section-title,
.n-page--story #s-drivers .n-section-title,
.n-page--story #s-research .s-section-header__title,
.n-page--story #s-partners .s-accordion__section-title {
  color: #102a3b !important;
  text-shadow: none !important;
}

.n-page--story #s-conditions .n-section-title-accent,
.n-page--story #s-timeseries .n-section-title-accent,
.n-page--story #s-drivers .n-section-title-accent,
.n-page--story #s-research .s-section-header::after,
.n-page--story #s-partners .s-accordion__summary--section::after {
  height: 2px !important;
  background: linear-gradient(90deg, rgba(20, 184, 166, 0.78), rgba(56, 189, 248, 0.58)) !important;
  box-shadow: none !important;
}

.n-page--story #s-conditions .s-preamble,
.n-page--story #s-conditions .n-section-sub,
.n-page--story #s-timeseries .s-preamble,
.n-page--story #s-timeseries .n-section-sub,
.n-page--story #s-drivers .s-preamble,
.n-page--story #s-drivers .n-section-sub,
.n-page--story #s-research .s-section-header__hook,
.n-page--story #s-partners .s-card__body,
.n-page--story .s-footer {
  color: #49665f !important;
}

.n-page--story #s-conditions .n-story-label,
.n-page--story #s-timeseries .n-story-label,
.n-page--story #s-drivers .n-story-label,
.n-page--story #s-research .s-section-header__eyebrow,
.n-page--story #s-partners .s-accordion__tag,
.n-page--story .s-footer__heading {
  color: #217464 !important;
}

.n-page--story #s-conditions .n-hero-card,
.n-page--story #s-conditions .n-mini-map-card,
.n-page--story #s-timeseries .n-tab-group,
.n-page--story #s-timeseries .n-panel,
.n-page--story #s-drivers .n-panel,
.n-page--story #s-research .n-explain-card--section,
.n-page--story #s-research .s-accordion,
.n-page--story #s-partners .s-accordion__summary--section,
.n-page--story #s-partners .s-card,
.n-page--story .s-footer__section--affiliations,
.n-page--story .s-footer__section--citation,
.n-page--story .s-footer__section--ack,
.n-page--story .s-footer__bottom {
  border-color: rgba(14, 116, 144, 0.1) !important;
  background: rgba(255, 255, 255, 0.72) !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.035) !important;
}

.n-page--story #s-conditions .n-hero-status-block,
.n-page--story #s-conditions .n-kpi-group,
.n-page--story #s-conditions .n-kpi-metric-block,
.n-page--story #s-conditions .n-hero-recommendation,
.n-page--story #s-conditions .n-mini-map-detail,
.n-page--story #s-conditions .n-status-bar,
.n-page--story #s-timeseries .n-explain-card--section,
.n-page--story #s-timeseries .n-time-control--section,
.n-page--story #s-timeseries .n-tab-btn,
.n-page--story #s-timeseries .n-chart-wrap,
.n-page--story #s-drivers .n-chart-wrap,
.n-page--story #s-drivers .n-rose-wrap,
.n-page--story #s-drivers .n-insight-box,
.n-page--story #s-research .s-accordion__tag,
.n-page--story #s-research .s-accordion__chevron,
.n-page--story .s-footer__citation-block,
.n-page--story .s-footer__affil-link {
  border-color: rgba(14, 116, 144, 0.1) !important;
  background: rgba(255, 255, 255, 0.62) !important;
  box-shadow: none !important;
}

.n-page--story #s-conditions .n-hero-weather-story {
  display: none !important;
}

.n-page--story #s-conditions .n-overview-split {
  align-items: start !important;
}

.n-page--story #s-timeseries .n-tab-btn--active {
  background: #123a50 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

.n-page--story #s-timeseries #panel-multi-sensor-n .n-panel-title,
.n-page--story #s-drivers .n-panel-title,
.n-page--story #s-research .s-accordion__title {
  color: #24423e !important;
}

.n-page--story #s-drivers .n-insight-box-text {
  color: #24423e !important;
}

.n-page--story #s-drivers .n-insight-box-icon {
  color: #b45309 !important;
}

.n-page--story #s-timeseries #panel-multi-sensor-n .n-panel-sub,
.n-page--story #s-drivers .n-panel-sub,
.n-page--story #s-drivers .n-rose-takeaway,
.n-page--story #s-research .n-explain-text,
.n-page--story #s-research .s-accordion__body,
.n-page--story #s-partners .s-card__bullet,
.n-page--story #s-partners .s-card__item-body,
.n-page--story .s-footer__ack-body,
.n-page--story .s-footer__bottom-cell {
  color: #49665f !important;
  font-weight: var(--fw-regular) !important;
}

.n-page--story #s-drivers .n-rose-wrap {
  min-height: 320px !important;
}

.n-page--story #s-drivers #panel-wind-rose-n .n-rose-wrap::before {
  display: none !important;
}

.n-page--story #s-research .s-accordion {
  min-height: 68px !important;
}

.n-page--story #s-research .s-accordion__summary {
  min-height: 66px !important;
}

.n-page--story #s-partners .s-accordion__summary--section {
  min-height: 104px !important;
  border-radius: 22px !important;
}

.n-page--story #s-partners .s-accordion__section-title {
  font-size: clamp(1.75rem, 2.6vw, 2.35rem) !important;
  letter-spacing: -0.04em !important;
}

.n-page--story .s-footer {
  border-radius: 24px !important;
}

/* ─────────────────────────────────────────────────────────────
   Color lift · after calm pass, 2026-05-24
   Keep the official research-dashboard restraint, but restore a light
   Miami coastal signal so the later sections do not read as pale.
   ───────────────────────────────────────────────────────────── */

.n-page--story #s-conditions,
.n-page--story #s-timeseries,
.n-page--story #s-drivers,
.n-page--story #s-research,
.n-page--story #s-partners,
.n-page--story .s-footer {
  border-color: rgba(14, 116, 144, 0.16) !important;
  background:
    linear-gradient(90deg, rgba(20, 184, 166, 0.2), rgba(56, 189, 248, 0.16), rgba(132, 204, 22, 0.12)) top / 100% 4px no-repeat,
    linear-gradient(180deg, #fefffb 0%, #f1fbf7 54%, #eef9fd 100%) !important;
  box-shadow:
    0 14px 32px rgba(15, 23, 42, 0.055),
    inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}

.n-page--story #s-conditions .n-section-title,
.n-page--story #s-timeseries .n-section-title,
.n-page--story #s-drivers .n-section-title,
.n-page--story #s-research .s-section-header__title,
.n-page--story #s-partners .s-accordion__section-title {
  color: #0f2f3f !important;
}

.n-page--story #s-conditions .n-story-label,
.n-page--story #s-timeseries .n-story-label,
.n-page--story #s-drivers .n-story-label,
.n-page--story #s-research .s-section-header__eyebrow,
.n-page--story #s-partners .s-accordion__tag,
.n-page--story .s-footer__heading {
  color: #147c72 !important;
}

.n-page--story #s-conditions .n-hero-card,
.n-page--story #s-conditions .n-mini-map-card,
.n-page--story #s-timeseries .n-tab-group,
.n-page--story #s-timeseries .n-panel,
.n-page--story #s-drivers .n-panel,
.n-page--story #s-research .n-explain-card--section,
.n-page--story #s-research .s-accordion,
.n-page--story #s-partners .s-accordion__summary--section,
.n-page--story #s-partners .s-card,
.n-page--story .s-footer__section--affiliations,
.n-page--story .s-footer__section--citation,
.n-page--story .s-footer__section--ack,
.n-page--story .s-footer__bottom {
  border-color: rgba(14, 116, 144, 0.15) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(240, 253, 250, 0.72)) !important;
  box-shadow:
    0 10px 24px rgba(15, 23, 42, 0.045),
    inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
}

.n-page--story #s-timeseries .n-chart-wrap,
.n-page--story #s-drivers .n-chart-wrap,
.n-page--story #s-drivers .n-rose-wrap {
  border-color: rgba(14, 165, 233, 0.16) !important;
  background:
    linear-gradient(180deg, rgba(248, 253, 250, 0.9), rgba(239, 248, 255, 0.72)) !important;
}

.n-page--story #s-conditions .n-hero-status-block,
.n-page--story #s-conditions .n-kpi-group,
.n-page--story #s-conditions .n-kpi-metric-block,
.n-page--story #s-conditions .n-hero-recommendation,
.n-page--story #s-conditions .n-mini-map-detail,
.n-page--story #s-conditions .n-status-bar,
.n-page--story #s-timeseries .n-explain-card--section,
.n-page--story #s-timeseries .n-time-control--section,
.n-page--story #s-drivers .n-insight-box,
.n-page--story #s-research .s-accordion__tag,
.n-page--story .s-footer__citation-block,
.n-page--story .s-footer__affil-link {
  border-color: rgba(20, 184, 166, 0.14) !important;
  background: rgba(255, 255, 255, 0.74) !important;
}

.n-page--story #s-timeseries .n-tab-btn,
.n-page--story #s-timeseries .n-time-btn {
  color: #24423e !important;
  border-color: rgba(14, 116, 144, 0.13) !important;
}

.n-page--story #s-timeseries .n-tab-btn--active,
.n-page--story #s-timeseries .n-time-btn--active {
  background: linear-gradient(135deg, #0f3a4a 0%, #087f8c 100%) !important;
  color: #ffffff !important;
  border-color: rgba(8, 127, 140, 0.32) !important;
  box-shadow: 0 8px 18px rgba(8, 127, 140, 0.16) !important;
}

.n-page--story #s-research .s-accordion__title {
  color: #275c55 !important;
}

.n-page--story #s-research .s-accordion[open] .s-accordion__title,
.n-page--story #s-research .s-accordion:hover .s-accordion__title {
  color: #0f766e !important;
}

/* Footer compact strip · reduce empty collaborator whitespace */
.n-page--story .s-footer__section--affiliations {
  display: grid !important;
  grid-template-columns: minmax(150px, 0.22fr) minmax(220px, 0.34fr) minmax(320px, 1fr) !important;
  align-items: center !important;
  gap: var(--sp-3) var(--sp-4) !important;
  padding: var(--sp-3) var(--sp-4) !important;
  min-height: 0 !important;
}

.n-page--story .s-footer__section--affiliations > .s-footer__heading {
  margin: 0 !important;
  align-self: center !important;
}

.n-page--story .s-footer__section--affiliations > .s-footer__affil-list {
  margin: 0 !important;
}

.n-page--story .s-footer__section--affiliations .s-footer__support {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: var(--sp-3) !important;
  margin: 0 !important;
  padding: 0 0 0 var(--sp-4) !important;
  border-top: 0 !important;
  border-left: 1px solid rgba(20, 184, 166, 0.12) !important;
}

.n-page--story .s-footer__section--affiliations .s-footer__heading--support {
  flex: 0 0 auto !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

.n-page--story .s-footer__section--affiliations .s-footer__affil-list--support {
  justify-content: flex-end !important;
  gap: var(--sp-2) !important;
}

.n-page--story .s-footer__section--affiliations .s-footer__affil-link {
  min-height: 48px !important;
  padding: 7px 12px !important;
}

.n-page--story .s-footer__section--affiliations > .s-footer__affil-list .s-footer__affil-link {
  min-height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.n-page--story .s-footer__section--affiliations .s-footer__logo {
  height: 52px !important;
  max-width: min(300px, 100%) !important;
  filter: none !important;
}

.n-page--story .s-footer__section--affiliations .s-footer__affil-list--support .s-footer__affil-link {
  min-height: 32px !important;
  padding: 5px 10px !important;
}

@media (max-width: 980px) {
  .n-page--story .s-footer__section--affiliations {
    grid-template-columns: 1fr !important;
  }

  .n-page--story .s-footer__section--affiliations .s-footer__support {
    justify-content: flex-start !important;
    padding: var(--sp-3) 0 0 !important;
    border-left: 0 !important;
    border-top: 1px solid rgba(20, 184, 166, 0.1) !important;
  }
}

@media (max-width: 720px) {
  .n-page--story .s-footer__section--affiliations .s-footer__support {
    align-items: flex-start !important;
    flex-direction: column !important;
  }
}

/* Miami climate signal pass · light tropical context without extra ornament */
.n-page--story .n-miami-signal {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: var(--sp-3) 0 0;
}

.n-page--story .n-miami-signal span {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 5px 10px;
  border: 1px solid rgba(20, 184, 166, 0.18);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(236, 254, 255, 0.92), rgba(240, 253, 244, 0.82));
  color: #16645d;
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.n-page--story .n-miami-signal span::before {
  content: "";
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 999px;
  background: #14b8a6;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.1);
}

.n-page--story .n-miami-signal span:nth-child(2)::before {
  background: #38bdf8;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.1);
}

.n-page--story .n-miami-signal span:nth-child(3)::before {
  background: #84cc16;
  box-shadow: 0 0 0 3px rgba(132, 204, 22, 0.1);
}

.n-page--story .n-miami-signal span:nth-child(4)::before {
  background: #fbbf24;
  box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.12);
}

.n-page--story .n-miami-climate-note {
  max-width: min(100%, 780px);
  margin-top: var(--sp-3);
  padding: 10px 13px;
  border: 1px solid rgba(14, 116, 144, 0.13);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.84), rgba(236, 254, 255, 0.72));
  color: #375c57;
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  line-height: var(--lh-relaxed);
}

.n-page--story .n-miami-climate-note strong {
  color: #0f766e;
  font-weight: var(--fw-bold);
}

/* Time-window control lift · small dashboard-card treatment */
.n-page--story #s-timeseries .n-time-control--section {
  position: relative !important;
  overflow: hidden !important;
  padding: 14px 16px 13px !important;
  border-color: rgba(14, 116, 144, 0.16) !important;
  background:
    linear-gradient(90deg, rgba(20, 184, 166, 0.28), rgba(56, 189, 248, 0.18)) top / 100% 3px no-repeat,
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(240, 253, 250, 0.84) 58%, rgba(236, 254, 255, 0.78)) !important;
  box-shadow:
    0 10px 24px rgba(15, 23, 42, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}

.n-page--story #s-timeseries .n-time-control--section::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 15px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #14b8a6;
  box-shadow:
    0 0 0 4px rgba(20, 184, 166, 0.1),
    13px 0 0 rgba(56, 189, 248, 0.82);
}

.n-page--story #s-timeseries .n-time-label {
  display: block !important;
  padding-left: 33px !important;
  color: #0f766e !important;
  letter-spacing: 0.095em !important;
}

.n-page--story #s-timeseries .n-time-btns {
  margin-top: 10px !important;
  border-color: rgba(14, 116, 144, 0.14) !important;
  background: rgba(255, 255, 255, 0.7) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}

.n-page--story #s-timeseries .n-time-btn {
  min-height: 30px !important;
  color: #31566b !important;
}

.n-page--story #s-timeseries .n-time-btn--active {
  background: linear-gradient(135deg, #0f3a4a 0%, #087f8c 100%) !important;
  color: #ffffff !important;
  box-shadow:
    0 7px 16px rgba(8, 127, 140, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

.n-page--story #s-timeseries .n-time-help {
  margin-top: 9px !important;
  color: #49665f !important;
  font-weight: var(--fw-medium) !important;
}

/* Footer support chips · subtle hover lift for review/data context */
.n-page--story .s-footer__section--affiliations .s-footer__affil-list--support .s-footer__affil-link {
  color: #24423e !important;
  font-weight: var(--fw-semibold) !important;
  letter-spacing: 0.005em !important;
  border-color: rgba(14, 116, 144, 0.16) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.86), rgba(240, 253, 250, 0.78)) !important;
  box-shadow:
    0 4px 10px rgba(15, 23, 42, 0.035),
    inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
  transform: translateY(0);
  transition:
    transform 150ms ease,
    color 150ms ease,
    border-color 150ms ease,
    background 150ms ease,
    box-shadow 150ms ease !important;
}

.n-page--story .s-footer__section--affiliations .s-footer__affil-list--support .s-footer__affil-link:hover,
.n-page--story .s-footer__section--affiliations .s-footer__affil-list--support .s-footer__affil-link:focus-visible {
  color: #0f766e !important;
  border-color: rgba(20, 184, 166, 0.32) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(236, 254, 255, 0.88)) !important;
  box-shadow:
    0 10px 20px rgba(14, 116, 144, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  transform: translateY(-2px);
}

.n-page--story .s-footer__section--affiliations .s-footer__affil-list--support .s-footer__icon {
  color: #0f766e !important;
}

.n-page--story .s-footer__section--affiliations .s-footer__affil-list--support .s-footer__affil-label {
  font-weight: var(--fw-semibold) !important;
}

/* Professional data polish · provenance, method notes, and section order */
.n-page--story #s-conditions,
.n-page--story #s-timeseries,
.n-page--story #s-drivers,
.n-page--story #s-research,
.n-page--story #s-partners {
  background:
    linear-gradient(90deg, rgba(20, 184, 166, 0.2), rgba(56, 189, 248, 0.16), rgba(132, 204, 22, 0.12)) top / 100% 4px no-repeat,
    linear-gradient(rgba(14, 116, 144, 0.026) 1px, transparent 1px) 0 4px / 28px 28px,
    linear-gradient(90deg, rgba(14, 116, 144, 0.022) 1px, transparent 1px) 0 4px / 28px 28px,
    linear-gradient(180deg, #fefffb 0%, #f1fbf7 54%, #eef9fd 100%) !important;
}

.n-page--story #s-conditions .n-section-title::before,
.n-page--story #s-timeseries .n-section-title::before,
.n-page--story #s-drivers .n-section-title::before,
.n-page--story #s-research .s-section-header__title::before,
.n-page--story #s-partners .s-accordion__section-title::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 22px;
  margin-right: 10px;
  border: 1px solid rgba(20, 184, 166, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: #0f766e;
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: var(--fw-bold);
  letter-spacing: 0.05em;
  vertical-align: 0.18em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.n-page--story #s-conditions .n-section-title::before { content: "01"; }
.n-page--story #s-timeseries .n-section-title::before { content: "02"; }
.n-page--story #s-drivers .n-section-title::before { content: "03"; }
.n-page--story #s-research .s-section-header__title::before { content: "04"; }
.n-page--story #s-partners .s-accordion__section-title::before { content: "05"; }

/* Keep long section titles on one line by taking the number out of flow. */
.n-page--story #s-conditions .n-section-meta,
.n-page--story #s-timeseries .n-section-meta,
.n-page--story #s-drivers .n-section-meta,
.n-page--story #s-research .s-section-header {
  position: relative;
}

.n-page--story #s-conditions .n-section-title,
.n-page--story #s-timeseries .n-section-title,
.n-page--story #s-drivers .n-section-title,
.n-page--story #s-research .s-section-header__title {
  position: relative;
  padding-left: 45px;
}

.n-page--story #s-conditions .n-section-title::before,
.n-page--story #s-timeseries .n-section-title::before,
.n-page--story #s-drivers .n-section-title::before,
.n-page--story #s-research .s-section-header__title::before {
  position: absolute;
  left: 0;
  top: 0.16em;
  margin-right: 0;
}

.n-page--story #s-timeseries .n-section-title {
  font-size: clamp(1.78rem, 2.55vw, 2.32rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.045em !important;
  max-width: 720px;
}

.n-page--story #s-research .s-section-header__title {
  font-size: clamp(1.74rem, 2.45vw, 2.26rem) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.045em !important;
  max-width: 980px;
}

@media (min-width: 1120px) {
  .n-page--story #s-timeseries .n-section-title,
  .n-page--story #s-research .s-section-header__title {
    white-space: nowrap;
  }
}

.n-page--story .n-data-provenance {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: var(--sp-3) 0 0;
}

.n-page--story .n-data-provenance span {
  display: inline-flex;
  align-items: center;
  min-height: 26px;
  padding: 4px 9px;
  border: 1px solid rgba(14, 116, 144, 0.15);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.74);
  color: #31566b;
  font-family: var(--font-mono);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
}

.n-page--story .n-data-provenance span::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-right: 7px;
  border-radius: 2px;
  background: #0f766e;
  opacity: 0.72;
}

.n-page--story .n-chart-meta {
  margin: 8px 0 0;
  padding: 8px 10px;
  border: 1px solid rgba(14, 116, 144, 0.12);
  border-radius: 10px;
  background: rgba(248, 253, 250, 0.78);
  color: #49665f;
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
}

/* ---- Dark-mode rollup (warm neutral, same tokens) --------------- */
/* No per-element overrides needed here — body.n-page--story:not(.theme-light)
   in s-tokens.css already re-maps --c-ink/--c-paper/--c-line/--c-accent to
   the warm-neutral dark palette, so every rule above recomputes correctly
   when the user toggles the theme. */

/* Time Series · research toolbar + segmented time window */
.n-page--story #s-timeseries .n-time-toolbar::before {
  display: none !important;
}

.n-page--story #s-timeseries .n-time-toolbar .n-time-toolbar__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 1.25rem;
  width: 100%;
  margin-bottom: 0.55rem;
}

.n-page--story #s-timeseries .n-time-toolbar .n-time-label {
  padding-left: 0 !important;
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: #475569;
}

.n-page--story #s-timeseries .n-time-toolbar .n-time-scope {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: var(--fw-medium);
  color: #64748b;
  line-height: 1.4;
}

.n-page--story #s-timeseries .n-time-toolbar .n-time-btns--segment {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  gap: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 3px !important;
  border: 1px solid rgba(14, 116, 144, 0.16) !important;
  border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

.n-page--story #s-timeseries .n-time-toolbar .n-time-btns--segment .n-time-btn {
  flex: 0 0 auto !important;
  min-height: 36px !important;
  min-width: 3.25rem !important;
  padding: 0.45rem 1rem !important;
  margin: 0 !important;
  font-size: 0.8125rem !important;
  font-weight: var(--fw-medium) !important;
  font-variant-numeric: tabular-nums;
  color: #334155 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  cursor: pointer;
  transition:
    background 140ms ease,
    color 140ms ease,
    transform 140ms ease,
    box-shadow 140ms ease !important;
}

.n-page--story #s-timeseries .n-time-toolbar .n-time-btns--segment .n-time-btn + .n-time-btn {
  border-left: 1px solid rgba(14, 116, 144, 0.12) !important;
}

.n-page--story #s-timeseries .n-time-toolbar .n-time-btns--segment .n-time-btn:hover {
  transform: translateY(-1px) !important;
  background: #f1f5f9 !important;
  color: #0f172a !important;
  box-shadow: 0 4px 10px rgba(15, 23, 42, 0.06) !important;
  z-index: 1;
}

.n-page--story #s-timeseries .n-time-toolbar .n-time-btns--segment .n-time-btn:active {
  transform: translateY(0) !important;
}

.n-page--story #s-timeseries .n-time-toolbar .n-time-btns--segment .n-time-btn--active {
  transform: none !important;
  background: #1e3a46 !important;
  color: #ffffff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
  z-index: 2;
}

.n-page--story #s-timeseries .n-time-toolbar .n-time-btns--segment .n-time-btn--active:hover {
  transform: translateY(-1px) !important;
  background: #243f4d !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12) !important;
}

.n-page--story #s-timeseries .n-time-toolbar .n-time-btns--segment .n-time-btn:focus-visible {
  outline: 2px solid rgba(14, 116, 144, 0.45) !important;
  outline-offset: 1px !important;
  z-index: 3;
}

.n-page--story #s-timeseries .n-time-toolbar .n-time-help {
  margin: 0.5rem 0 0 !important;
  font-size: 0.72rem !important;
  color: #64748b !important;
  font-weight: var(--fw-regular) !important;
}

/* Phase C — KPI tabular numerals + stronger primary PM2.5 weight */
.n-page--story .n-kpi-metric-value {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.n-page--story #n-kpi-pm-block .n-kpi-metric-value {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
}

.n-page--story #n-kpi-pm-block .n-kpi-metric-label,
.n-page--story #n-kpi-pm-block .n-kpi-metric-unit {
  opacity: 0.55;
}

/* Phase C — lazy panel loading skeleton */
.n-page--story .n-panel.n-panel--loading {
  position: relative;
}

.n-page--story .n-panel.n-panel--loading::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 40%,
    rgba(28, 25, 23, 0.05) 50%,
    transparent 60%
  );
  animation: n-panel-shimmer 1.25s ease-in-out infinite;
}

@keyframes n-panel-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}