@layer reset, base, components, utilities, cinema;

@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: 280ms;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
  ::view-transition-old(site-header),
  ::view-transition-new(site-header) {
    animation: none;
  }
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { color-scheme: dark; scroll-behavior: smooth; overflow-x: clip; }
  body { overflow-x: clip; }
  body, h1, h2, h3, p, ul, pre { margin: 0; }
  img, canvas { display: block; max-width: 100%; }
  button, input { font: inherit; }
}

@layer base {
  :root {
    --bg: #060610;
    --bg-surface: rgba(12, 6, 24, 0.88);
    --bg-panel: rgba(16, 8, 28, 0.92);
    --text: #F0E6FF;
    --text-muted: #8B7FA0;
    --accent-red: #FF1744;
    --accent-red-dim: rgba(255, 23, 68, 0.12);
    --accent-green: #7AFFAE;
    --accent-green-dim: rgba(122, 255, 174, 0.12);
    --accent-purple: #7C3AED;
    --accent-cyan: #00E5FF;
    --accent-orange: #FF6D00;
    --line: rgba(255, 23, 68, 0.15);
    --line-green: rgba(122, 255, 174, 0.12);
    --glow-red: 0 0 40px rgba(255, 23, 68, 0.15);
    --glow-green: 0 0 30px rgba(122, 255, 174, 0.12);
    --glow-purple: 0 0 40px rgba(124, 58, 237, 0.12);
    --shadow: 0 30px 90px rgba(0, 0, 0, 0.5);
    --radius-panel: 24px;
    --radius-soft: 14px;
    --radius-button: 999px;
    --container: min(1120px, calc(100vw - 2rem));
    --font-display: "Inter", "Space Grotesk", "Segoe UI Variable Display", sans-serif;
    --font-heading: "Inter", "Space Grotesk", "Segoe UI Variable Display", sans-serif;
    --font-body: "Sora", "Segoe UI Variable Text", sans-serif;
    --font-mono: "Fira Code", "JetBrains Mono", "SFMono-Regular", monospace;
  }

  body {
    min-height: 100vh;
    font-family: var(--font-body);
    color: var(--text);
    background: #060610;
    line-height: 1.6;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 23, 68, 0.2) transparent;
    position: relative;
  }
  /* Animated multi-hue gradient field — shifting periodically */
  body::before {
    content: "";
    position: fixed;
    inset: -10vmax;
    z-index: -2;
    pointer-events: none;
    background:
      radial-gradient(40vmax 36vmax at 18% 12%, rgba(255, 23, 68, 0.18), transparent 60%),
      radial-gradient(38vmax 34vmax at 82% 18%, rgba(124, 58, 237, 0.18), transparent 60%),
      radial-gradient(42vmax 36vmax at 50% 82%, rgba(0, 229, 255, 0.14), transparent 60%),
      radial-gradient(36vmax 32vmax at 12% 78%, rgba(122, 255, 174, 0.12), transparent 60%),
      radial-gradient(34vmax 30vmax at 88% 70%, rgba(255, 109, 0, 0.13), transparent 60%),
      linear-gradient(180deg, #060610 0%, #0A0618 40%, #060610 100%);
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
    background-position:
      0% 0%,
      100% 0%,
      50% 100%,
      0% 100%,
      100% 50%,
      50% 50%;
    filter: saturate(1.05);
  }
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(70vmax 60vmax at 50% 50%, transparent 0%, rgba(6, 6, 16, 0.55) 100%);
    mix-blend-mode: multiply;
  }

  a { color: inherit; text-decoration: none; }
  button { color: inherit; background: none; border: 0; cursor: pointer; }
  pre, code { font-family: var(--font-mono); }
}

@layer components {
  /* Skip link */
  .skip-link {
    position: absolute; left: 1rem; top: 1rem;
    padding: 0.75rem 1rem;
    background: var(--accent-red); color: #fff;
    border-radius: var(--radius-soft);
    transform: translateY(-140%);
    z-index: 1000;
  }
  .skip-link:focus { transform: translateY(0); }

  /* Noise overlay */
  .noise {
    position: fixed; inset: 0;
    pointer-events: none; opacity: 0.06;
    background-image:
      radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px),
      radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.04) 0 1px, transparent 1px);
    background-size: 20px 20px;
    z-index: 0;
  }

  .shell { width: var(--container); margin-inline: auto; position: relative; z-index: 1; }

  /* Header */
  .site-header {
    view-transition-name: site-header;
    width: 100%; margin-inline: 0;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    position: sticky; top: 0; z-index: 20;
    padding-block: 1rem;
    padding-inline: max(1rem, calc(50vw - 1120px / 2 + 1rem));
    background: rgba(6, 6, 16, 0.94);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    box-shadow:
      0 8px 24px rgba(0, 0, 0, 0.45),
      0 1px 0 rgba(0, 229, 255, 0.08) inset,
      0 14px 38px -18px rgba(0, 229, 255, 0.22);
  }
  .card-label, .eyebrow {
    letter-spacing: 0.32em; text-transform: uppercase;
    font-size: 0.82rem; color: var(--accent-red);
    font-family: var(--font-heading); font-weight: 600;
    opacity: 0.92;
  }
  .brand-mark {
    font-family: 'Space Grotesk', 'Sora', sans-serif;
    font-weight: 800;
    font-size: clamp(0.95rem, 1.1vw + 0.55rem, 1.4rem);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #f4faff;
    line-height: 1;
    text-shadow: 0 0 14px rgba(0, 229, 255, 0.3), 0 0 2px rgba(255, 23, 68, 0.5);
  }
  .brand-hotline {
    font-family: 'Cinzel Decorative', 'Space Grotesk', serif;
    font-weight: 900;
    font-size: clamp(1.5rem, 2.6vw + 0.6rem, 2.6rem);
    line-height: 1;
    color: var(--accent-red);
    padding: 0.25em 0.55em;
    border: 1px solid var(--accent-red);
    border-radius: 999px;
    background: rgba(255, 23, 68, 0.08);
    box-shadow: 0 0 18px rgba(255, 23, 68, 0.28), inset 0 0 12px rgba(255, 23, 68, 0.18);
    transition: transform 0.18s ease, box-shadow 0.25s ease, background-color 0.25s ease;
    text-decoration: none;
    letter-spacing: 0.05em;
  }
  .brand-hotline:hover, .brand-hotline:focus-visible {
    transform: translateY(-1px) scale(1.04);
    background: rgba(255, 23, 68, 0.18);
    box-shadow: 0 0 24px rgba(255, 23, 68, 0.5), inset 0 0 16px rgba(255, 23, 68, 0.32);
    outline: none;
  }
  .brand-lockup { display: inline-flex; align-items: center; gap: 1rem; flex-wrap: wrap; position: relative; isolation: isolate; }
  .brand-lockup::before {
    content: "";
    position: absolute;
    left: -8px; top: 50%;
    width: 80px; height: 80px;
    transform: translateY(-50%);
    border-radius: 50%;
    background:
      radial-gradient(circle at 30% 30%, rgba(0, 229, 255, 0.55), transparent 60%),
      radial-gradient(circle at 70% 70%, rgba(255, 23, 68, 0.45), transparent 60%),
      radial-gradient(circle at 50% 50%, rgba(124, 58, 237, 0.35), transparent 70%);
    filter: blur(18px);
    opacity: 0.55;
    z-index: -1;
    pointer-events: none;
  }
  .brand-logo {
    width: 34px; height: 34px; border-radius: 10px;
    object-fit: contain;
    background:
      radial-gradient(circle at 30% 25%, rgba(0, 229, 255, 0.18), transparent 60%),
      radial-gradient(circle at 75% 80%, rgba(124, 58, 237, 0.18), transparent 65%),
      rgba(6, 6, 16, 0.78);
    padding: 3px;
    box-shadow:
      0 0 0 1px rgba(0, 229, 255, 0.32),
      inset 0 0 14px rgba(0, 229, 255, 0.18),
      0 8px 28px rgba(0, 229, 255, 0.18),
      0 14px 44px rgba(255, 23, 68, 0.14);
    filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.35));
    transition: transform 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.2),
                box-shadow 0.45s ease,
                filter 0.45s ease;
  }
  .brand-lockup:hover .brand-logo,
  .brand-lockup:focus-within .brand-logo {
    transform: scale(1.08) rotate(-2deg);
    box-shadow:
      0 0 0 1px rgba(0, 229, 255, 0.65),
      inset 0 0 18px rgba(0, 229, 255, 0.32),
      0 10px 36px rgba(0, 229, 255, 0.42),
      0 18px 56px rgba(255, 23, 68, 0.28);
    filter: drop-shadow(0 0 12px rgba(0, 229, 255, 0.7))
            drop-shadow(0 0 20px rgba(255, 23, 68, 0.35))
            brightness(1.06);
  }
  .brand-lockup:hover::before,
  .brand-lockup:focus-within::before {
    opacity: 0.95;
    filter: blur(22px);
  }
  .site-nav {
    display: flex; gap: 0.5rem; padding: 0.35rem;
    border: 1px solid var(--line); border-radius: var(--radius-button);
    background: rgba(6, 6, 16, 0.75);
  }
  .site-nav a {
    padding: 0.6rem 0.9rem; border-radius: var(--radius-button);
    transition: background-color 0.2s, transform 0.12s;
    font-size: 0.9rem;
  }
  .site-nav a:hover, .site-nav a[aria-current="page"] {
    background: var(--accent-red-dim); transform: translateY(-1px);
  }
  .nav-hotline {
    background: var(--accent-red-dim) !important;
    color: var(--accent-red) !important;
    font-weight: 700;
  }

  /* Map */
  .map-section {
    position: relative;
    border-top: 1px solid rgba(255, 23, 68, 0.08);
    margin-top: 2rem;
  }
  .map-address {
    position: absolute; top: 1.5rem; left: 50%; transform: translateX(-50%);
    z-index: 2; text-align: center;
    background: rgba(6, 6, 16, 0.92);
    border: 1px solid rgba(0, 229, 255, 0.15);
    border-radius: var(--radius-panel);
    padding: 1rem 1.5rem;
    backdrop-filter: blur(12px);
  }
  .map-address-label {
    font-family: var(--font-display); font-size: 0.7rem;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--accent-red); margin-bottom: 0.4rem;
  }
  .map-address-text {
    color: var(--text-primary); font-size: 0.95rem; line-height: 1.5;
  }
  .map-address-text a {
    color: var(--accent-cyan); text-decoration: none;
  }
  .map-address-text a:hover { text-decoration: underline; }
  .map-container {
    width: 100%; height: 320px; overflow: hidden;
  }
  .map-container iframe {
    width: 100%; height: 100%; border: 0;
    filter: invert(92%) hue-rotate(180deg) saturate(0.6) brightness(0.7) contrast(1.3);
    pointer-events: auto;
  }

  /* Dossier media */
  .dossier-video {
    width: 100%; max-width: 100%; border-radius: var(--radius-panel);
    border: 1px solid rgba(255, 23, 68, 0.1);
    margin-top: 0.75rem;
  }

  /* Cinematic video treatment — every poster'd video (evidence + plates)
     gets a lift, glow-pulse, and saturation bloom on hover/focus.
     Poster-first: the frame stays put until the viewer engages. */
  video[poster] {
    transition:
      transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
      box-shadow 0.35s ease,
      border-color 0.35s ease,
      filter 0.35s ease;
    will-change: transform;
  }
  video[poster]:hover,
  video[poster]:focus-visible {
    transform: translateY(-3px) scale(1.006);
    border-color: rgba(0, 229, 255, 0.5);
    filter: saturate(1.12) contrast(1.04);
    animation: vidGlowPulse 2.2s ease-in-out infinite;
  }
  @keyframes vidGlowPulse {
    0%, 100% {
      box-shadow:
        0 14px 50px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(0, 229, 255, 0.22) inset,
        0 0 42px rgba(0, 229, 255, 0.16);
    }
    50% {
      box-shadow:
        0 18px 60px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(0, 229, 255, 0.3) inset,
        0 0 74px rgba(0, 229, 255, 0.34);
    }
  }
  video[poster]:focus-visible {
    outline: 2px solid rgba(0, 229, 255, 0.85);
    outline-offset: 3px;
  }
  @media (prefers-reduced-motion: reduce) {
    video[poster]:hover,
    video[poster]:focus-visible {
      transform: none;
      animation: none;
    }
  }
  .dossier-evidence-row {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 0.75rem; margin-top: 0.75rem;
  }
  .dossier-evidence-row img,
  .dossier-evidence-row video {
    width: 100%; border-radius: var(--radius-panel);
    border: 1px solid rgba(255, 23, 68, 0.1);
  }

  /* Plate montage */
  .plate-montage-section {
    background: linear-gradient(180deg, rgba(255, 23, 68, 0.03), rgba(6, 6, 16, 0.98));
    padding: 3rem 0;
    border-top: 1px solid rgba(255, 23, 68, 0.08);
  }
  .plate-montage {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.5rem;
  }
  .plate-montage-wide {
    width: 100%;
    padding: 0 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
  }
  @media (min-width: 1024px) {
    .plate-montage-wide {
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
      padding: 0 2.5rem;
    }
  }
  .plate-item {
    margin: 0; position: relative; overflow: hidden;
    border-radius: var(--radius-panel);
    border: 1px solid rgba(255, 23, 68, 0.08);
    background: rgba(16, 8, 28, 0.5);
    transition: transform 0.2s, border-color 0.2s;
  }
  .plate-item:hover {
    transform: scale(1.03);
    border-color: rgba(0, 229, 255, 0.3);
    z-index: 2;
  }
  .plate-item img {
    width: 100%; height: 140px; object-fit: cover;
    display: block;
  }
  .plate-montage-wide .plate-item img {
    height: 240px;
  }
  @media (min-width: 1024px) {
    .plate-montage-wide .plate-item img { height: 320px; }
  }
  .plate-item figcaption {
    padding: 0.5rem 0.75rem;
    font-family: var(--font-mono); font-size: 0.78rem;
    color: var(--accent-cyan); text-align: center;
    letter-spacing: 0.12em; text-transform: uppercase;
  }

  /* Plate Vault — unified Signal Speaks Through Traffic section */
  .plate-vault-section {
    background: linear-gradient(180deg, rgba(255, 23, 68, 0.03), rgba(6, 6, 16, 0.98));
    padding: 3.5rem 0 4rem;
    border-top: 1px solid rgba(255, 23, 68, 0.08);
  }
  .plate-vault-tier {
    width: 100%;
    padding: 0 1.5rem;
    margin-top: 2rem;
  }
  @media (min-width: 1024px) {
    .plate-vault-tier { padding: 0 2.5rem; }
  }
  .plate-vault-tier-archive {
    margin-top: 3rem;
    padding-top: 2.5rem;
    border-top: 1px dashed rgba(0, 229, 255, 0.18);
  }
  .plate-vault-tier-label {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--accent-cyan);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-align: center;
    margin: 0 0 1.25rem;
    opacity: 0.85;
  }
  .plate-vault-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
  }
  @media (min-width: 1024px) {
    .plate-vault-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
  }
  @media (max-width: 720px) {
    .plate-vault-grid { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
  }
  @media (max-width: 460px) {
    .plate-vault-grid { grid-template-columns: 1fr; }
  }
  .plate-vault-card {
    margin: 0;
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-panel);
    border: 1px solid rgba(255, 23, 68, 0.08);
    background: rgba(16, 8, 28, 0.5);
    transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
  }
  .plate-vault-card:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 229, 255, 0.32);
    box-shadow: 0 8px 24px rgba(0, 229, 255, 0.08);
    z-index: 2;
  }
  .plate-vault-card img,
  .plate-vault-card video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #000;
    flex: 1 1 auto;
    min-height: 0;
  }
  .plate-vault-card-video video { cursor: pointer; }
  .plate-vault-card figcaption {
    position: absolute;
    inset: auto 0 0 0;
    padding: 0.45rem 0.6rem;
    background: linear-gradient(180deg, rgba(6, 6, 16, 0) 0%, rgba(6, 6, 16, 0.85) 60%, rgba(6, 6, 16, 0.95) 100%);
    pointer-events: none;
  }
  .plate-vault-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--accent-cyan);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: center;
    line-height: 1.25;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
  }
  .plate-vault-card-text {
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.08), rgba(124, 58, 237, 0.12));
    border: 1px solid rgba(0, 229, 255, 0.22);
    padding: 1rem;
  }
  .plate-vault-text-inner {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 0.6rem;
    padding-bottom: 1.5rem;
  }
  .plate-vault-text-mark {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 3.5vw, 2.4rem);
    font-weight: 700;
    background: linear-gradient(135deg, #fff 0%, var(--accent-cyan) 60%, var(--accent-purple) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    letter-spacing: 0.04em;
  }
  .plate-vault-text-meta {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.4;
  }
  .plate-vault-grid-archive .plate-vault-card { border-color: rgba(0, 229, 255, 0.05); }
  .plate-vault-grid-archive .plate-vault-card:hover { border-color: rgba(0, 229, 255, 0.32); }
  .plate-vault-card[role="button"]:focus-visible {
    outline: 2px solid var(--accent-cyan);
    outline-offset: 2px;
  }
  .plate-vault-card-video::after {
    content: "▶";
    position: absolute;
    top: 0.5rem; right: 0.6rem;
    font-size: 0.7rem;
    color: var(--accent-cyan);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
    opacity: 0.55;
    transition: opacity 0.2s;
    pointer-events: none;
  }
  .plate-vault-card-video:hover::after { opacity: 0; }

  /* Plate Vault — merged fit-to-screen grid + cursor-tracked magnifier loupe */
  .plate-vault-tier-merged {
    margin-top: 1.5rem;
    padding: 0;
    width: 100vw;
    margin-inline: calc(50% - 50vw);
  }
  .plate-loupe-wrap {
    position: relative;
    width: 100%;
    isolation: isolate;
    line-height: 0;
  }
  .plate-vault-grid-merged {
    --plate-cols: 14;
    display: grid;
    grid-template-columns: repeat(var(--plate-cols), 1fr);
    gap: 0;
    width: 100%;
  }
  @media (min-width: 768px) {
    .plate-vault-grid-merged { --plate-cols: 18; }
  }
  @media (min-width: 1280px) {
    .plate-vault-grid-merged { --plate-cols: 24; }
  }
  @media (min-width: 1600px) {
    .plate-vault-grid-merged { --plate-cols: 28; }
  }
  @media (max-width: 600px) {
    .plate-vault-grid-merged { --plate-cols: 9; }
  }
  .plate-vault-grid-merged .plate-vault-card {
    aspect-ratio: 1 / 1;
    border-radius: 0;
    border: 0;
    margin: 0;
    background: #000;
  }
  .plate-vault-grid-merged .plate-vault-card img,
  .plate-vault-grid-merged .plate-vault-card video {
    border-radius: 0;
  }
  .plate-vault-grid-merged .plate-vault-card figcaption,
  .plate-vault-grid-merged .plate-vault-card-video::after { display: none; }
  .plate-vault-grid-merged .plate-vault-card-text {
    aspect-ratio: 1 / 1;
    padding: 0.25rem;
    border: 0;
  }
  .plate-vault-grid-merged .plate-vault-text-mark {
    font-size: clamp(0.55rem, 0.95vw, 0.8rem);
    letter-spacing: 0.02em;
  }
  .plate-vault-grid-merged .plate-vault-text-meta { display: none; }
  .plate-vault-grid-merged .plate-vault-text-inner { padding: 0; gap: 0.1rem; }
  .plate-vault-grid-merged .plate-vault-card:hover {
    transform: none;
    box-shadow: none;
    border: 0;
  }

  /* Cursor-tracked loupe overlay */
  .plate-loupe {
    --loupe-size: 320px;
    position: absolute;
    top: 0;
    left: 0;
    width: var(--loupe-size);
    height: var(--loupe-size);
    border-radius: 50%;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease-out;
    z-index: 5;
    will-change: transform;
    transform: translate3d(-9999px, -9999px, 0);
  }
  .plate-loupe.is-active { opacity: 1; }
  .plate-loupe-clone {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: top left;
    will-change: transform;
  }
  .plate-loupe-clone .plate-vault-grid-merged { gap: 0; }
  .plate-loupe-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(0, 229, 255, 0.85);
    box-shadow:
      0 0 0 1px rgba(6, 6, 16, 0.95) inset,
      0 0 0 1px rgba(255, 255, 255, 0.08),
      0 16px 48px rgba(0, 0, 0, 0.7),
      0 0 32px rgba(0, 229, 255, 0.32);
    pointer-events: none;
  }
  .plate-loupe-wrap { cursor: crosshair; }
  @media (pointer: coarse), (prefers-reduced-motion: reduce) {
    .plate-loupe { display: none; }
    .plate-loupe-wrap { cursor: auto; }
  }

  /* Plate Lightbox */
  .plate-lightbox {
    position: fixed; inset: 0;
    z-index: 9999;
    background: rgba(2, 2, 8, 0.94);
    backdrop-filter: blur(12px);
    display: flex; align-items: center; justify-content: center;
    padding: 1.5rem;
    animation: plate-lightbox-in 0.18s ease-out;
  }
  .plate-lightbox[hidden] { display: none; }
  @keyframes plate-lightbox-in {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  body.plate-lightbox-open { overflow: hidden; }
  .plate-lightbox-stage {
    max-width: min(92vw, 1200px);
    max-height: 82vh;
    display: flex; align-items: center; justify-content: center;
  }
  .plate-lightbox-stage img,
  .plate-lightbox-stage video {
    max-width: 100%;
    max-height: 82vh;
    width: auto; height: auto;
    border-radius: var(--radius-panel);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 229, 255, 0.18);
    background: #000;
  }
  .plate-lightbox-caption {
    position: absolute;
    bottom: 1.2rem; left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-mono); font-size: 0.78rem;
    color: var(--accent-cyan);
    letter-spacing: 0.12em; text-transform: uppercase;
    background: rgba(6, 6, 16, 0.65);
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(0, 229, 255, 0.18);
    max-width: 80vw;
    text-align: center;
    line-height: 1.4;
  }
  .plate-lightbox-close,
  .plate-lightbox-nav {
    position: absolute;
    background: rgba(6, 6, 16, 0.7);
    color: #fff;
    border: 1px solid rgba(0, 229, 255, 0.22);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, transform 0.12s;
    font-family: var(--font-mono);
    line-height: 1;
    z-index: 1;
  }
  .plate-lightbox-close {
    top: 1.2rem; right: 1.2rem;
    width: 2.6rem; height: 2.6rem;
    font-size: 1.5rem;
  }
  .plate-lightbox-nav {
    top: 50%; transform: translateY(-50%);
    width: 3rem; height: 3rem;
    font-size: 1.6rem;
  }
  .plate-lightbox-prev { left: 1.2rem; }
  .plate-lightbox-next { right: 1.2rem; }
  .plate-lightbox-close:hover,
  .plate-lightbox-nav:hover {
    background: rgba(0, 229, 255, 0.18);
    border-color: var(--accent-cyan);
  }
  .plate-lightbox-close:active { transform: scale(0.94); }
  .plate-lightbox-nav:active { transform: translateY(-50%) scale(0.94); }
  .plate-lightbox-close:focus-visible,
  .plate-lightbox-nav:focus-visible {
    outline: 2px solid var(--accent-cyan);
    outline-offset: 2px;
  }
  @media (max-width: 540px) {
    .plate-lightbox-nav { width: 2.4rem; height: 2.4rem; font-size: 1.3rem; }
    .plate-lightbox-prev { left: 0.6rem; }
    .plate-lightbox-next { right: 0.6rem; }
    .plate-lightbox-close { top: 0.6rem; right: 0.6rem; width: 2.2rem; height: 2.2rem; font-size: 1.2rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    .plate-lightbox { animation: none; }
  }

  /* Footer */
  .site-footer {
    display: flex; flex-direction: column; align-items: center; gap: 0.75rem;
    padding: 3rem 0 3.5rem; color: var(--text-muted); font-size: 0.9rem;
    text-align: center;
    border-top: 1px solid rgba(255, 23, 68, 0.08);
    margin-top: 2rem;
  }
  .footer-sep { opacity: 0.4; margin: 0 0.4rem; }

  /* Hero */
  main { padding: 2rem 0 4rem; padding-bottom: 3rem; }
  .hero {
    display: grid; gap: 2rem; align-items: center;
    grid-template-columns: 1.1fr 0.9fr;
    min-height: min(86vh, 880px);
  }
  .hero-copy, .panel, .status-card {
    position: relative; overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-panel);
    background: var(--bg-panel);
    box-shadow: var(--shadow);
  }
  .hero-copy, .panel { padding: clamp(1.4rem, 3vw, 2.2rem); }
  .hero-copy h1 {
    margin-top: 0.7rem;
    font-family: var(--font-display);
    font-size: clamp(3rem, 6vw, 5.8rem);
    line-height: 0.92; letter-spacing: -0.04em;
    text-wrap: balance;
    text-shadow: 0 0 80px rgba(255, 23, 68, 0.15);
  }
  .lede {
    margin-top: 1rem; max-width: 54ch;
    font-size: clamp(1rem, 1.2vw, 1.12rem);
    color: var(--text-muted);
  }
  .hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.4rem; }
  .signal-list { display: grid; gap: 0.5rem; margin-top: 1.2rem; padding-left: 1rem; color: var(--text-muted); }
  .signal-list li::marker { color: var(--accent-red); }

  /* Hero stage with 666 */
  .hero-stage {
    position: relative; min-height: 520px;
    border: 1px solid var(--line); border-radius: var(--radius-panel);
    background:
      radial-gradient(circle at center, rgba(255, 23, 68, 0.08), transparent 55%),
      radial-gradient(circle at 30% 70%, rgba(124, 58, 237, 0.06), transparent 40%),
      linear-gradient(180deg, rgba(6, 6, 16, 0.9), rgba(16, 8, 28, 0.95));
    box-shadow: var(--shadow);
    overflow: hidden;
  }
  .hero-666 {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    font-family: var(--font-display);
    font-size: clamp(12rem, 20vw, 22rem);
    font-weight: 900; line-height: 1;
    color: rgba(255, 23, 68, 0.06);
    user-select: none; pointer-events: none;
  }

  /* Spirits */
  .spirit {
    position: absolute;
    filter: drop-shadow(0 0 18px rgba(122, 255, 174, 0.25));
  }
  .spirit::before, .spirit::after {
    content: ""; position: absolute; inset: 0;
    border-radius: 999px 999px 48% 52% / 78% 78% 32% 32%;
    background: radial-gradient(circle at 40% 30%,
      rgba(246, 255, 249, 0.85),
      rgba(122, 255, 174, 0.5) 35%,
      rgba(23, 255, 106, 0.06) 68%,
      transparent 80%
    );
  }
  .spirit-child { left: 8%; top: 16%; width: 140px; height: 220px; }
  .spirit-woman { right: 18%; top: 10%; width: 160px; height: 260px; }
  .spirit-dog {
    left: 24%; bottom: 12%; width: 170px; height: 110px;
    transform: rotate(-8deg); border-radius: 60% 40% 45% 55%;
  }
  .spirit-hand {
    right: 8%; bottom: 8%; width: 150px; height: 210px;
    transform: rotate(16deg); border-radius: 44% 56% 28% 72% / 25% 25% 75% 75%;
  }

  /* Glitch text */
  .glitch-text {
    position: relative;
  }
  .glitch-text::before, .glitch-text::after {
    content: attr(data-text);
    position: absolute; left: 0; top: 0;
    width: 100%; height: 100%;
    pointer-events: none;
  }
  .glitch-text::before {
    color: var(--accent-red);
    clip-path: inset(0 0 80% 0);
    opacity: 0.4;
    transform: translate3d(-1px, 0, 0);
  }
  .glitch-text::after {
    color: var(--accent-cyan);
    clip-path: inset(80% 0 0 0);
    opacity: 0.4;
    transform: translate3d(1px, 0, 0);
  }

  /* Buttons */
  .button {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 0.75rem 1.1rem;
    border-radius: var(--radius-button);
    border: 1px solid var(--line);
    font-weight: 600; font-size: 0.88rem;
    letter-spacing: 0.06em; text-transform: uppercase;
    transition: transform 0.12s, background-color 0.2s, border-color 0.2s;
  }
  .button:hover { transform: translateY(-1px); }
  .button:focus-visible, .range-button:focus-visible, .input-group input:focus-visible, .site-nav a:focus-visible {
    outline: 2px solid var(--accent-red); outline-offset: 2px;
  }
  .button-primary {
    background: linear-gradient(135deg, rgba(255, 23, 68, 0.9), rgba(124, 58, 237, 0.8));
    color: #fff; border-color: transparent;
    box-shadow: 0 4px 20px rgba(255, 23, 68, 0.25);
    transition: transform 0.12s, box-shadow 0.3s;
  }
  .button-primary:hover {
    box-shadow: 0 6px 30px rgba(255, 23, 68, 0.4);
  }
  .button-secondary { background: var(--accent-red-dim); }
  .button-red {
    background: var(--accent-red-dim);
    color: var(--accent-red); border-color: rgba(255, 23, 68, 0.3);
  }
  .button-ghost { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.08); }

  /* Status grid */
  .status-grid {
    display: grid; gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 2rem;
  }
  .status-card {
    padding: 1.2rem;
    transition: border-color 0.4s, box-shadow 0.4s, transform 0.3s;
  }
  .status-card:hover {
    border-color: rgba(255, 23, 68, 0.3);
    box-shadow: var(--glow-red), var(--shadow);
    transform: translateY(-3px);
  }
  .status-primary {
    background: linear-gradient(180deg, rgba(255, 23, 68, 0.08), rgba(16, 8, 28, 0.92));
    border-color: rgba(255, 23, 68, 0.2);
    box-shadow: inset 0 0 0 1px rgba(255, 23, 68, 0.08);
  }
  .metric {
    margin-top: 0.7rem;
    font-family: var(--font-display);
    font-size: clamp(2.2rem, 4.5vw, 3.8rem);
    line-height: 0.95;
  }
  .metric-small { font-size: clamp(1.4rem, 2vw, 2rem); }
  .metric-unit { margin-left: 0.2rem; font-size: 0.46em; color: var(--text-muted); }
  .card-note, .chart-meta { margin-top: 0.5rem; color: var(--text-muted); font-size: 0.9rem; }
  .pulse-dot {
    position: absolute; top: 1.2rem; right: 1.2rem;
    width: 10px; height: 10px;
    background: var(--accent-red); border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
  }

  /* Chart panel — compact integrated terminal */
  .chart-panel { margin-top: 1.4rem; padding: 0 !important; overflow: hidden; }
  .chart-header {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 0.75rem;
    padding: 0.9rem 1.2rem;
    border-bottom: 1px solid rgba(255, 23, 68, 0.1);
    background: rgba(6, 6, 16, 0.6);
  }
  .chart-header-left { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
  .chart-title {
    font-family: var(--font-display); font-size: 1.1rem; font-weight: 700;
    letter-spacing: 0.02em; margin: 0;
    background: linear-gradient(135deg, var(--accent-red), var(--accent-purple));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .chart-meta { margin: 0; font-size: 0.78rem; color: var(--text-muted); }
  .chart-toolbar { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
  .preset-row { display: flex; gap: 0.35rem; }
  .range-button {
    min-height: 30px; padding: 0.3rem 0.65rem;
    border: 1px solid var(--line); border-radius: 6px;
    background: transparent;
    letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.72rem;
    font-family: var(--font-mono); color: var(--text-muted);
    transition: all 0.15s;
  }
  .range-button:hover { color: var(--text); background: rgba(255, 23, 68, 0.08); border-color: rgba(255, 23, 68, 0.3); }
  .range-button.is-active {
    background: var(--accent-red); color: #fff; border-color: var(--accent-red);
  }
  .chart-export-row { display: flex; gap: 0.25rem; margin-left: 0.35rem; }
  .chart-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 6px;
    border: 1px solid rgba(255, 23, 68, 0.1); background: transparent;
    color: var(--text-muted); transition: all 0.15s; cursor: pointer;
    text-decoration: none;
  }
  .chart-icon-btn:hover { color: var(--accent-red); border-color: rgba(255, 23, 68, 0.3); background: rgba(255, 23, 68, 0.06); }
  .chart-canvas-wrap { position: relative; padding: 0.5rem 0.5rem 0; }
  .chart-y-label {
    position: absolute; left: 6px; top: 50%; transform: rotate(-90deg) translateX(-50%);
    transform-origin: left center;
    font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--text-muted); opacity: 0.6;
    pointer-events: none;
  }
  .chart-x-label {
    display: block; text-align: center;
    font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--text-muted); opacity: 0.6;
    padding-bottom: 0.3rem;
  }
  #history-chart {
    width: 100%; min-height: 300px;
    border-radius: 0;
    border: none;
    background: linear-gradient(180deg, rgba(6, 6, 16, 0.6), rgba(16, 8, 28, 0.8));
  }
  .chart-range-bar {
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
    padding: 0.6rem 1.2rem;
    border-top: 1px solid rgba(255, 23, 68, 0.08);
    background: rgba(6, 6, 16, 0.5);
  }
  .input-compact { display: flex; align-items: center; gap: 0.35rem; }
  .input-compact span {
    font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--text-muted); white-space: nowrap;
  }
  .input-compact input {
    height: 30px; padding: 0 0.5rem;
    border: 1px solid var(--line); border-radius: 6px;
    background: rgba(6, 6, 16, 0.8); color: var(--text);
    font-family: var(--font-mono); font-size: 0.75rem;
    max-width: 180px;
  }

  /* Hero video bg */
  .hero-video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: 0.35;
    z-index: 0;
    pointer-events: none;
  }

  /* Full-bleed sections — FBI briefing slide style */
  .full-bleed {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    position: relative;
    z-index: 1;
    padding: 4rem 0;
  }
  .full-bleed::before {
    content: "";
    position: absolute; inset: 0;
    background:
      linear-gradient(180deg, transparent, rgba(255, 23, 68, 0.03) 20%, rgba(124, 58, 237, 0.02) 80%, transparent);
    pointer-events: none;
  }

  /* Story Slider — inside AVATAR MUD card */
  .story-slider {
    margin-top: 1rem;
    border: 1px solid rgba(0, 229, 255, 0.15);
    border-radius: 12px;
    overflow: hidden;
    background: rgba(6, 6, 16, 0.8);
  }
  .slider-viewport {
    overflow: hidden;
    position: relative;
  }
  .slider-track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
  }
  .slider-slide {
    flex: 0 0 100%;
    min-width: 0;
  }
  .slider-slide img {
    width: 100%;
    height: auto;
    object-fit: contain;
    max-height: 420px;
    display: block;
    margin: 0 auto;
    background: #060610;
  }
  .slider-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 0.6rem 1rem;
    border-top: 1px solid rgba(0, 229, 255, 0.1);
    background: rgba(6, 6, 16, 0.6);
  }
  .slider-btn {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(0, 229, 255, 0.2);
    background: rgba(0, 229, 255, 0.06);
    color: var(--accent-cyan);
    font-size: 1.1rem;
    display: grid; place-items: center;
    transition: all 0.2s;
    cursor: pointer;
  }
  .slider-btn:hover {
    background: rgba(0, 229, 255, 0.15);
    border-color: rgba(0, 229, 255, 0.4);
    transform: scale(1.1);
  }
  .slider-counter {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-muted);
    letter-spacing: 0.08em;
    min-width: 5ch;
    text-align: center;
  }

  /* Avatar spread — inline within dossier card */
  .dossier-card-wide { grid-column: 1 / -1; }
  .avatar-spread-inline {
    margin-top: 1rem;
    padding: 0;
  }
  .dossier-body-muted {
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-top: 0.75rem;
  }
  .avatar-spread-wall {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    padding: 0 1.5rem;
    width: 100%;
    flex: 1;
    align-content: center;
  }
  /* Full-bleed: escape dossier card padding and shell max-width */
  .avatar-spread-inline.avatar-spread-wall {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    max-width: 100vw;
    margin: 1.25rem 0;
    padding: 1.5rem 1.5rem;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
  }
  @media (min-width: 1024px) {
    .avatar-spread-inline.avatar-spread-wall {
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      padding: 2rem 2.5rem;
      gap: 1.25rem;
    }
  }
  .spread-photo {
    position: relative;
    border-radius: var(--radius-soft);
    overflow: hidden;
    background: #111;
    border: 1px solid rgba(255, 23, 68, 0.12);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transform: scale(0.85) rotate(calc(var(--spread-rot, 0) * 1deg));
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s, opacity 0.6s;
    cursor: pointer;
    animation: spread-cascade 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: calc(var(--i, 0) * 0.12s);
  }
  .spread-photo:hover {
    transform: scale(1.6) rotate(0deg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 40px rgba(0, 229, 255, 0.1);
    z-index: 10;
  }
  .spread-photo img {
    width: 100%;
    aspect-ratio: 3/2;
    object-fit: cover;
    display: block;
    filter: saturate(0.6) contrast(1.1);
    transition: filter 0.4s;
  }
  .spread-photo:hover img {
    filter: saturate(1) contrast(1.05);
  }
  .spread-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.3rem 0.5rem;
    background: linear-gradient(transparent, rgba(6, 6, 16, 0.9));
    font-family: var(--font-mono);
    font-size: 0.6rem;
    color: var(--accent-cyan);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-align: center;
    opacity: 0;
    transition: opacity 0.3s;
  }
  .spread-photo:hover .spread-label { opacity: 1; }

  /* Recurring glow pulse — cycles through all photos */
  .spread-photo {
    --glow-dur: 18s;
  }
  .spread-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid transparent;
    border-radius: var(--radius-soft);
    pointer-events: none;
    animation: spread-glow var(--glow-dur) ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * 1s);
  }
  @keyframes spread-glow {
    0%, 88%, 100% { border-color: transparent; box-shadow: none; }
    94% { border-color: var(--accent-cyan); box-shadow: 0 0 20px rgba(0, 229, 255, 0.3), inset 0 0 20px rgba(0, 229, 255, 0.05); }
  }
  @keyframes spread-cascade {
    from { opacity: 0; transform: scale(0.7) rotate(calc(var(--spread-rot, 0) * 1deg)) translateY(30px); }
    to { opacity: 1; transform: scale(1) rotate(calc(var(--spread-rot, 0) * 1deg)); }
  }

  /* Dossier evidence inline image */
  .dossier-evidence-img {
    margin-top: 1rem;
    border-radius: var(--radius-soft);
    overflow: hidden;
    border: 1px solid rgba(255, 23, 68, 0.15);
  }
  .dossier-evidence-img img {
    width: 100%;
    height: auto;
    display: block;
    filter: saturate(0.85) contrast(1.05);
  }
  .dossier-evidence-caption {
    display: block;
    padding: 0.5rem 0.8rem;
    background: rgba(6, 6, 16, 0.8);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--accent-cyan);
    letter-spacing: 0.05em;
  }

  /* Dossier placeholder for pending images */
  .dossier-placeholder {
    margin-top: 0.8rem;
    padding: 2rem;
    border: 2px dashed rgba(255, 23, 68, 0.2);
    border-radius: var(--radius-soft);
    background: rgba(255, 23, 68, 0.03);
    text-align: center;
  }
  .dossier-placeholder-text {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  /* Platform Pillars */
  .platform-pillars { margin-top: 1.4rem; }
  .pillars-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
  }
  .pillar-card {
    padding: 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-panel);
    background: var(--bg-panel);
    box-shadow: var(--shadow);
    transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s;
  }
  .pillar-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 23, 68, 0.2);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(255, 23, 68, 0.06);
  }
  .pillar-icon {
    width: 48px; height: 48px;
    display: grid; place-items: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 1rem;
  }
  .pillar-card h3 {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 0.5rem;
  }
  .pillar-card p {
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--text-muted);
  }

  /* Candidate section (standalone) */
  .candidate-section {
    margin-top: 1.4rem;
    border-color: rgba(124, 58, 237, 0.15);
    background: linear-gradient(180deg, rgba(124, 58, 237, 0.04), var(--bg-panel));
  }

  /* Mission section */
  .mission-section { border: 1px solid rgba(255, 23, 68, 0.2); }
  .mission-section {
    background:
      radial-gradient(ellipse at 20% 20%, rgba(124, 58, 237, 0.08), transparent 50%),
      radial-gradient(ellipse at 80% 80%, rgba(255, 23, 68, 0.06), transparent 50%),
      linear-gradient(180deg, rgba(6, 6, 16, 0.98), rgba(16, 8, 28, 0.95), rgba(6, 6, 16, 0.98));
    border-top: 1px solid rgba(124, 58, 237, 0.15);
    border-bottom: 1px solid rgba(124, 58, 237, 0.15);
  }
  .mission-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
  }
  .mission-block {
    padding: 1.5rem 1.8rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-panel);
    background: var(--bg-panel);
    font-size: 0.92rem;
    line-height: 1.7;
    transition: border-color 0.3s, box-shadow 0.3s;
  }
  .mission-block:hover {
    border-color: rgba(124, 58, 237, 0.3);
    box-shadow: 0 0 30px rgba(124, 58, 237, 0.08);
  }
  .mission-block-hero {
    grid-column: 1 / -1;
    border-color: rgba(255, 23, 68, 0.2);
    background: linear-gradient(135deg, rgba(16, 8, 28, 0.95), rgba(40, 10, 30, 0.8));
  }
  .mission-block-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--accent-cyan);
    margin-bottom: 0.6rem;
    letter-spacing: 0.02em;
  }
  .mission-block p + p { margin-top: 0.6rem; }
  .mission-block a {
    color: var(--accent-cyan);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .mission-pullquote {
    margin: 2rem auto;
    padding: 1.5rem 2rem;
    max-width: 800px;
    border-left: 4px solid var(--accent-purple);
    border-right: 4px solid var(--accent-purple);
    background: rgba(124, 58, 237, 0.06);
    border-radius: var(--radius-soft);
    font-style: italic;
    font-size: 1.15rem;
    line-height: 1.7;
    text-align: center;
    color: var(--text);
  }
  .mission-pullquote p { margin: 0; }
  .mission-pullquote cite {
    display: block; margin-top: 0.5rem;
    font-style: normal; font-size: 0.85rem;
    color: var(--text-muted);
  }
  .mission-cta { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.5rem; justify-content: center; }
  .mission-vote-cta {
    margin-top: 1.2rem;
    padding: 1rem 1.5rem;
    border: 1px solid rgba(255, 23, 68, 0.25);
    border-radius: var(--radius-panel);
    background: rgba(255, 23, 68, 0.04);
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--text);
    text-align: center;
  }

  /* Candidate profile */
  .candidate-profile {
    display: flex; gap: 1.5rem; align-items: center;
    margin-bottom: 1.5rem; padding: 1.5rem;
    border: 1px solid rgba(124, 58, 237, 0.2);
    border-radius: var(--radius-panel);
    background: rgba(124, 58, 237, 0.04);
  }
  .candidate-headshot {
    width: 160px; height: 160px; aspect-ratio: 1; border-radius: 50%;
    border: 3px solid var(--accent-purple);
    object-fit: cover; flex-shrink: 0;
    box-shadow: 0 0 30px rgba(124, 58, 237, 0.3);
    transition: box-shadow 0.4s, transform 0.3s;
  }
  .candidate-profile:hover .candidate-headshot {
    box-shadow: 0 0 50px rgba(124, 58, 237, 0.5);
    transform: scale(1.04);
  }
  .candidate-name {
    font-family: var(--font-display); font-size: 1.4rem;
    color: var(--accent-cyan); margin: 0 0 0.25rem;
  }
  .candidate-title {
    font-size: 0.9rem; color: var(--text-muted);
    margin: 0 0 0.5rem; text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  .candidate-quals {
    font-size: 0.95rem; line-height: 1.5; margin: 0;
  }

  /* Footer social */
  .footer-social {
    display: flex; gap: 0.75rem; justify-content: center;
    margin: 0.75rem 0;
  }
  .footer-social a {
    color: var(--text-muted);
    transition: color 0.2s ease, background 0.25s ease, transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
  }
  .footer-social a:hover,
  .footer-social a:focus-visible { transform: scale(1.15); outline: none; }
  .footer-social a:focus-visible { box-shadow: 0 0 0 2px var(--accent-cyan); }
  .footer-social a:active { transform: scale(0.96); }
  .footer-social a[data-platform="x"]:hover,
  .footer-social a[data-platform="x"]:focus-visible { color: #fff; background: #000; border-color: #000; }
  .footer-social a[data-platform="github"]:hover,
  .footer-social a[data-platform="github"]:focus-visible { color: #fff; background: #181717; border-color: #181717; }
  .footer-social a[data-platform="linkedin"]:hover,
  .footer-social a[data-platform="linkedin"]:focus-visible { color: #fff; background: #0a66c2; border-color: #0a66c2; }
  .footer-social a[data-platform="instagram"]:hover,
  .footer-social a[data-platform="instagram"]:focus-visible {
    color: #fff;
    background: linear-gradient(135deg, #f58529 0%, #dd2a7b 45%, #8134af 75%, #515bd4 100%);
    border-color: #dd2a7b;
  }
  .footer-social a[data-platform="youtube"]:hover,
  .footer-social a[data-platform="youtube"]:focus-visible { color: #fff; background: #ff0000; border-color: #ff0000; }
  .footer-social a[data-platform="facebook"]:hover,
  .footer-social a[data-platform="facebook"]:focus-visible { color: #fff; background: #1877f2; border-color: #1877f2; }
  .footer-social a[data-platform="reddit"]:hover,
  .footer-social a[data-platform="reddit"]:focus-visible { color: #fff; background: #ff4500; border-color: #ff4500; }
  .footer-social a[data-platform="telegram"]:hover,
  .footer-social a[data-platform="telegram"]:focus-visible { color: #fff; background: #0088cc; border-color: #0088cc; }
  .footer-social a[data-platform="threads"]:hover,
  .footer-social a[data-platform="threads"]:focus-visible { color: #fff; background: #000; border-color: #000; }

  /* Evidence section */
  .evidence-section {
    background:
      radial-gradient(ellipse at 60% 40%, rgba(124, 58, 237, 0.08), transparent 50%),
      linear-gradient(180deg, rgba(6, 6, 16, 0.98), rgba(16, 8, 28, 0.95), rgba(6, 6, 16, 0.98));
    border-top: 1px solid rgba(124, 58, 237, 0.15);
    border-bottom: 1px solid rgba(124, 58, 237, 0.15);
  }
  .evidence-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
    margin-top: 1rem; align-items: start;
  }
  .evidence-photo {
    overflow: hidden; border-radius: var(--radius-soft);
  }
  .evidence-photo img {
    width: 100%; height: auto; border-radius: var(--radius-soft);
    border: 1px solid rgba(255, 23, 68, 0.15);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s;
  }
  .evidence-photo:hover img {
    transform: scale(1.03);
    box-shadow: 0 12px 60px rgba(255, 23, 68, 0.12), 0 8px 40px rgba(0, 0, 0, 0.5);
  }
  .evidence-text { font-size: 0.95rem; line-height: 1.7; }
  .evidence-text p + p { margin-top: 0.8rem; }

  /* ───── EMF safety gauge ───── */
  .emf-gauge {
    margin: 1.5rem 0 1.2rem;
    padding: 1.2rem 1.1rem 1.4rem;
    background:
      linear-gradient(180deg, rgba(8, 9, 22, 0.55), rgba(8, 9, 22, 0.85));
    border: 1px solid rgba(0, 229, 255, 0.18);
    border-radius: var(--radius-soft, 12px);
  }
  .emf-gauge-caption {
    display: flex; flex-direction: column; gap: 0.2rem;
    margin: 0 0 1.5rem;
  }
  .emf-gauge-eyebrow {
    font-family: var(--font-mono, "JetBrains Mono", monospace);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--accent-cyan, #00E5FF);
  }
  .emf-gauge-headline {
    font-family: var(--font-display, "Sora", sans-serif);
    font-size: clamp(1rem, 1.6vw, 1.18rem);
    color: rgba(255, 255, 255, 0.94);
    letter-spacing: -0.005em;
  }
  .emf-gauge-bar {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 2px;
    height: 64px;
    border-radius: 6px;
    overflow: visible;
    margin-bottom: 2.4rem;
  }
  .emf-gauge-tier {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 0.18rem;
    padding: 0.4rem 0.3rem;
    font-family: var(--font-mono, "JetBrains Mono", monospace);
    text-align: center;
  }
  .emf-gauge-tier:first-child { border-radius: 6px 0 0 6px; }
  .emf-gauge-tier:last-child  { border-radius: 0 6px 6px 0; }
  .emf-gauge-tier--safe {
    background: linear-gradient(180deg, rgba(0, 200, 120, 0.85), rgba(0, 160, 96, 0.85));
    color: #00150B;
  }
  .emf-gauge-tier--warning {
    background: linear-gradient(180deg, rgba(255, 215, 64, 0.92), rgba(255, 179, 0, 0.92));
    color: #2A1A00;
  }
  .emf-gauge-tier--critical {
    background: linear-gradient(180deg, rgba(255, 109, 0, 0.92), rgba(229, 57, 53, 0.92));
    color: #1F0700;
  }
  .emf-gauge-tier--emergency {
    background: linear-gradient(180deg, rgba(150, 30, 30, 0.95), rgba(60, 0, 0, 0.95));
    color: #FFE5E5;
  }
  .emf-gauge-range {
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    font-weight: 600;
  }
  .emf-gauge-tier-label {
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    opacity: 0.85;
  }
  .emf-gauge-marker {
    position: absolute;
    top: 100%;
    left: var(--emf-pos, 50%);
    transform: translateX(-50%);
    display: flex; flex-direction: column; align-items: center;
    pointer-events: none;
  }
  .emf-gauge-marker-dot {
    width: 14px; height: 14px;
    margin-top: -7px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #ff2a4a;
    box-shadow: 0 0 0 4px rgba(255, 42, 74, 0.25), 0 0 14px rgba(255, 42, 74, 0.6);
  }
  .emf-gauge-marker-label {
    margin-top: 0.45rem;
    font-family: var(--font-mono, "JetBrains Mono", monospace);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: #fff;
    background: rgba(255, 42, 74, 0.92);
    padding: 0.18rem 0.5rem;
    border-radius: 4px;
    box-shadow: 0 6px 18px rgba(255, 42, 74, 0.35);
  }
  .emf-gauge-stats {
    margin: 1.4rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.75rem;
  }
  .emf-gauge-stats li {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 0.85rem 0.95rem;
    background: linear-gradient(180deg, rgba(255, 42, 74, 0.12), rgba(120, 0, 0, 0.18));
    border: 1px solid rgba(255, 42, 74, 0.28);
    border-left: 3px solid #ff2a4a;
    border-radius: 4px;
  }
  .emf-gauge-stat-value {
    font-family: var(--font-mono, "JetBrains Mono", monospace);
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    letter-spacing: 0.02em;
  }
  .emf-gauge-stat-value small {
    font-size: 0.7rem;
    margin-left: 0.15rem;
    color: rgba(255, 230, 230, 0.85);
    letter-spacing: 0.08em;
  }
  .emf-gauge-stat-label {
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 230, 230, 0.78);
    line-height: 1.35;
  }
  @media (max-width: 720px) {
    .emf-gauge-bar { height: 76px; }
    .emf-gauge-range { font-size: 0.62rem; }
    .emf-gauge-tier-label { font-size: 0.5rem; letter-spacing: 0.14em; }
    .emf-gauge-marker-label { font-size: 0.7rem; }
  }
  .evidence-video video {
    width: 100%; height: auto; border-radius: var(--radius-soft);
    border: 1px solid rgba(255, 23, 68, 0.15);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4);
    background: #000;
  }
  .evidence-pullquote {
    margin: 1.4rem 0 0;
    padding: 1.4rem 1.5rem 1.2rem 1.65rem;
    border-radius: var(--radius-panel, 14px);
    background: linear-gradient(135deg, rgba(255, 23, 68, 0.08), rgba(124, 58, 237, 0.05));
    border: 1px solid rgba(255, 23, 68, 0.22);
    border-left: 3px solid var(--accent-red, #ff1744);
    position: relative;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  }
  .evidence-pullquote::before {
    content: "\201C";
    position: absolute;
    top: 0.2rem; left: 0.55rem;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 3.2rem;
    line-height: 1;
    color: rgba(255, 42, 74, 0.32);
    pointer-events: none;
  }
  .evidence-pullquote p {
    margin: 0 0 0.65rem;
    font-family: var(--font-display, "Space Grotesk", sans-serif);
    font-size: clamp(1rem, 1.6vw, 1.18rem);
    line-height: 1.55;
    color: var(--text-primary, #e7e7ef);
    font-style: italic;
  }
  .evidence-pullquote cite {
    display: block;
    font-style: normal;
    font-family: var(--font-mono, "JetBrains Mono", monospace);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 230, 230, 0.7);
  }
  .evidence-video-section {
    border-top: 1px solid rgba(255, 23, 68, 0.1);
  }
  .evidence-callout {
    position: relative;
    margin: 1.6rem 0;
    padding: 1.4rem 1.6rem 1.2rem;
    border-radius: var(--radius-panel);
    background:
      linear-gradient(135deg, rgba(255, 23, 68, 0.08), rgba(124, 58, 237, 0.06)),
      rgba(6, 6, 16, 0.55);
    border: 1px solid rgba(255, 23, 68, 0.22);
    border-left: 3px solid var(--accent-red, #ff1744);
    overflow: hidden;
  }
  .evidence-callout::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
      135deg,
      transparent 0,
      transparent 22px,
      rgba(0, 229, 255, 0.04) 22px,
      rgba(0, 229, 255, 0.04) 23px
    );
    pointer-events: none;
    mix-blend-mode: screen;
  }
  .evidence-callout-mark {
    position: absolute;
    top: -0.4rem; left: 0.6rem;
    font-family: var(--font-display, var(--font-heading, serif));
    font-size: 4.2rem;
    line-height: 1;
    color: rgba(0, 229, 255, 0.22);
    pointer-events: none;
    user-select: none;
  }
  .evidence-callout-text {
    position: relative;
    margin: 0 0 0.6rem;
    padding-left: 1.4rem;
    font-family: var(--font-display, var(--font-heading, inherit));
    font-size: clamp(1.05rem, 1.6vw, 1.32rem);
    line-height: 1.55;
    font-weight: 500;
    color: var(--text);
    letter-spacing: 0.005em;
  }
  .evidence-callout-text strong {
    color: #fff;
    font-weight: 700;
  }
  .evidence-callout-glow {
    color: var(--accent-cyan);
    text-shadow:
      0 0 1px rgba(0, 229, 255, 0.4),
      0 0 14px rgba(0, 229, 255, 0.45);
    font-weight: 600;
  }
  .evidence-callout-meta {
    position: relative;
    margin-top: 0.8rem;
    padding-top: 0.7rem;
    border-top: 1px dashed rgba(0, 229, 255, 0.18);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-cyan);
    opacity: 0.75;
  }
  @media (max-width: 720px) {
    .evidence-callout { padding: 1.1rem 1.1rem 1rem; }
    .evidence-callout-mark { font-size: 3.2rem; top: -0.3rem; left: 0.4rem; }
    .evidence-callout-text { padding-left: 1rem; }
  }
  @media (prefers-reduced-motion: no-preference) {
    .evidence-callout-glow {
      animation: callout-pulse 4.5s ease-in-out infinite;
    }
  }
  @keyframes callout-pulse {
    0%, 100% { text-shadow: 0 0 1px rgba(0, 229, 255, 0.4), 0 0 10px rgba(0, 229, 255, 0.35); }
    50%      { text-shadow: 0 0 1px rgba(0, 229, 255, 0.6), 0 0 22px rgba(0, 229, 255, 0.6); }
  }

  /* Avatar Frame full-width section */
  .avatar-frame-section {
    background:
      radial-gradient(ellipse at 30% 20%, rgba(0, 229, 255, 0.07), transparent 55%),
      radial-gradient(ellipse at 80% 80%, rgba(255, 23, 68, 0.06), transparent 55%),
      linear-gradient(180deg, rgba(6, 6, 16, 0.98), rgba(8, 12, 28, 0.96), rgba(6, 6, 16, 0.98));
    border-top: 1px solid rgba(0, 229, 255, 0.12);
    border-bottom: 1px solid rgba(124, 58, 237, 0.15);
    padding-block: 4rem;
  }
  .avatar-frame-shell {
    width: 100%;
    max-width: min(1800px, 96vw);
    margin: 0 auto;
    padding-inline: clamp(1rem, 3vw, 2.5rem);
  }
  .avatar-frame-section .panel-copy { max-width: 920px; margin: 0 auto; text-align: center; }
  .avatar-frame-section .panel-copy h2 {
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    line-height: 1.1; margin: 0.4rem 0 1rem;
    background: linear-gradient(135deg, #fff 0%, var(--accent-cyan) 60%, var(--accent-purple) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .avatar-frame-section .panel-copy p {
    font-size: 1.05rem; line-height: 1.7; color: var(--text-soft);
  }
  .avatar-frame-section .panel-copy p + p { margin-top: 0.9rem; }
  .avatar-frame-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.4rem;
    margin-top: 2.5rem;
  }
  .avatar-frame-card {
    margin: 0;
    display: flex; flex-direction: column;
    background: rgba(12, 14, 28, 0.6);
    border: 1px solid rgba(0, 229, 255, 0.12);
    border-radius: var(--radius-soft);
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s, box-shadow 0.3s;
  }
  .avatar-frame-card:hover {
    transform: translateY(-4px);
    border-color: rgba(0, 229, 255, 0.35);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 229, 255, 0.1);
  }
  .avatar-frame-card img {
    width: 100%; height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    background: #000;
    border-bottom: 1px solid rgba(0, 229, 255, 0.12);
  }
  .avatar-frame-card figcaption {
    padding: 1.25rem 1.4rem 1.5rem;
    display: flex; flex-direction: column; gap: 0.6rem;
  }
  .avatar-frame-label {
    font-family: var(--font-mono, "Fira Code", monospace);
    font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase;
    color: var(--accent-cyan);
    padding: 0.25rem 0.55rem;
    border: 1px solid rgba(0, 229, 255, 0.3);
    border-radius: 999px;
    align-self: flex-start;
  }
  .avatar-frame-card figcaption p {
    margin: 0;
    font-size: 0.95rem; line-height: 1.6;
    color: var(--text-soft);
  }
  @media (max-width: 720px) {
    .avatar-frame-section { padding-block: 2.5rem; }
    .avatar-frame-grid { grid-template-columns: repeat(2, 1fr); gap: 0.9rem; margin-top: 1.5rem; }
    .avatar-frame-card img { aspect-ratio: 4 / 3; }
    .avatar-frame-card figcaption { padding: 0.9rem 1rem 1.1rem; }
    .avatar-frame-card figcaption p { font-size: 0.85rem; }
    .avatar-frame-card-minimal figcaption { padding: 0.7rem; }
  }
  @media (max-width: 460px) {
    .avatar-frame-grid { grid-template-columns: 1fr; }
  }

  /* Video tiles inside avatar-frame-card */
  .avatar-frame-card-video video {
    width: 100%; height: auto;
    aspect-ratio: 9 / 16;
    object-fit: cover;
    display: block;
    background: #000;
    border-bottom: 1px solid rgba(0, 229, 255, 0.12);
    cursor: pointer;
  }

  /* ───── Avatar Frame slideshow ───── */
  .avatar-slideshow {
    margin-top: 2.5rem;
    display: flex; flex-direction: column;
    gap: 1.1rem;
    border-radius: var(--radius-soft, 12px);
    outline: none;
  }
  .avatar-slideshow:focus-visible {
    outline: 2px solid rgba(0, 229, 255, 0.55);
    outline-offset: 6px;
  }
  .avatar-stage {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: stretch;
    gap: 0.6rem;
  }
  .avatar-stage-frame {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(0, 229, 255, 0.18);
    background:
      radial-gradient(ellipse at 20% 0%, rgba(0, 229, 255, 0.08), transparent 55%),
      radial-gradient(ellipse at 100% 100%, rgba(124, 58, 237, 0.1), transparent 55%),
      rgba(8, 9, 22, 0.85);
    border-radius: var(--radius-soft, 12px);
    min-height: clamp(360px, 56vh, 620px);
  }
  .avatar-slides {
    list-style: none;
    margin: 0; padding: 0;
    height: 100%;
  }
  .avatar-slide {
    position: absolute; inset: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.45s ease;
    pointer-events: none;
  }
  .avatar-slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 1;
  }
  .avatar-slide-figure {
    position: relative;
    margin: 0;
    background: #000;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    border-right: 1px solid rgba(0, 229, 255, 0.12);
  }
  .avatar-slide-figure img {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
    cursor: zoom-in;
    transition: transform 0.4s ease;
  }
  .avatar-slide-figure:hover img { transform: scale(1.03); }
  .avatar-slide-figure::after {
    content: attr(data-caption);
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 1.5rem 1.2rem 0.9rem;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.55) 45%, rgba(0, 0, 0, 0.85) 100%);
    color: #fff;
    font-family: var(--font-mono, monospace);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    pointer-events: none;
  }
  .avatar-slide-body {
    padding: clamp(1.2rem, 2.2vw, 2rem);
    display: flex; flex-direction: column; gap: 1rem;
    background: linear-gradient(180deg, rgba(8, 9, 22, 0.4), rgba(8, 9, 22, 0.78));
  }
  .avatar-slide-body .avatar-frame-label {
    align-self: flex-start;
  }
  .avatar-slide-bullets {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex; flex-direction: column; gap: 0.55rem;
  }
  .avatar-slide-bullets li {
    position: relative;
    padding-left: 1.1rem;
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--text-soft, rgba(255, 255, 255, 0.78));
    letter-spacing: 0.005em;
  }
  .avatar-slide-bullets li::before {
    content: "";
    position: absolute;
    left: 0; top: 0.55rem;
    width: 6px; height: 6px;
    background: var(--accent-cyan, #00E5FF);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.55);
  }
  .avatar-slide-bullets strong {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
    letter-spacing: 0.01em;
  }
  .avatar-nav {
    background: rgba(8, 9, 22, 0.7);
    border: 1px solid rgba(0, 229, 255, 0.22);
    color: var(--accent-cyan, #00E5FF);
    border-radius: 50%;
    width: 42px; height: 42px;
    display: flex; align-items: center; justify-content: center;
    align-self: center;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
  }
  .avatar-nav:hover,
  .avatar-nav:focus-visible {
    background: rgba(0, 229, 255, 0.1);
    border-color: rgba(0, 229, 255, 0.6);
    transform: scale(1.06);
    outline: none;
  }
  .avatar-nav:active { transform: scale(0.96); }
  .avatar-stage-meta {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.75rem;
    font-family: var(--font-mono, "JetBrains Mono", monospace);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted, rgba(255, 255, 255, 0.6));
  }
  .avatar-counter { color: var(--accent-cyan, #00E5FF); }
  .avatar-thumbs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    align-items: center;
    gap: 0.45rem;
    padding: 0.35rem 0.1rem;
    margin: 0 auto;
    width: 100%;
    max-width: 100%;
    text-align: center;
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 229, 255, 0.3) transparent;
  }
  .avatar-thumbs::-webkit-scrollbar { height: 6px; }
  .avatar-thumbs::-webkit-scrollbar-thumb {
    background: rgba(0, 229, 255, 0.3);
    border-radius: 3px;
  }
  .avatar-thumb {
    flex: 0 0 auto;
    width: 72px; height: 54px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 6px;
    background: #000;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.2s, opacity 0.2s;
    opacity: 0.6;
  }
  .avatar-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
  }
  .avatar-thumb:hover,
  .avatar-thumb:focus-visible {
    border-color: rgba(0, 229, 255, 0.5);
    opacity: 0.95;
    outline: none;
  }
  .avatar-thumb.is-active {
    border-color: var(--accent-cyan, #00E5FF);
    opacity: 1;
    box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.25), 0 6px 20px rgba(0, 229, 255, 0.18);
  }
  @media (max-width: 720px) {
    .avatar-slide { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
    .avatar-slide-figure { border-right: none; border-bottom: 1px solid rgba(0, 229, 255, 0.12); aspect-ratio: 4 / 3; height: auto; }
    .avatar-stage-frame { min-height: clamp(420px, 80vh, 700px); }
    .avatar-slide-body { padding: 1.1rem 1.2rem 1.3rem; }
    .avatar-slide-bullets li { font-size: 0.82rem; }
    .avatar-nav { width: 36px; height: 36px; }
    .avatar-thumb { width: 58px; height: 44px; }
  }

  /* Snap Archive — license plate vault */
  .snap-vault-intro {
    margin-top: 3.5rem;
    padding-top: 2.5rem;
    border-top: 1px dashed rgba(0, 229, 255, 0.18);
  }
  .snap-vault-intro .eyebrow {
    color: var(--accent-cyan);
    font-family: var(--font-mono, "Fira Code", monospace);
    font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase;
    margin-bottom: 0.6rem;
  }
  .snap-vault-intro h3 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 2.4vw, 2.1rem);
    line-height: 1.1; letter-spacing: -0.02em;
    margin: 0 0 0.8rem;
    background: linear-gradient(135deg, #fff 0%, var(--accent-cyan) 60%, var(--accent-purple) 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
  .snap-vault-intro p {
    font-size: 1.02rem; line-height: 1.7; color: var(--text-soft);
    max-width: 62ch;
  }
  .snap-vault-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-top: 1.6rem !important;
  }
  .snap-vault-grid .avatar-frame-card img,
  .snap-vault-grid .avatar-frame-card video {
    aspect-ratio: 3 / 4;
  }
  .snap-vault-grid .avatar-frame-card-video video {
    aspect-ratio: 9 / 16;
  }
  .snap-vault-grid figcaption {
    padding: 0.65rem 0.85rem 0.85rem;
  }
  @media (max-width: 720px) {
    .snap-vault-grid { grid-template-columns: repeat(2, 1fr); gap: 0.7rem; }
    .snap-vault-intro { margin-top: 2.5rem; padding-top: 1.8rem; }
  }
  @media (max-width: 460px) {
    .snap-vault-grid { grid-template-columns: 1fr; }
  }

  /* Panel headings */
  .panel-copy { margin-bottom: 0.5rem; }
  .panel h2 {
    margin-top: 0.5rem;
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2vw, 2.1rem);
    line-height: 1.05; text-wrap: balance;
    letter-spacing: -0.02em;
  }
  .panel p + p { margin-top: 0.8rem; }

  /* Panel hover lift for two-up and standalone */
  .two-up > .panel {
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
  }
  .two-up > .panel:hover {
    border-color: rgba(255, 23, 68, 0.2);
    box-shadow: 0 0 40px rgba(255, 23, 68, 0.06), var(--shadow);
    transform: translateY(-2px);
  }

  /* Two-up grid */
  .two-up { display: grid; gap: 1rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 1.4rem; }

  /* Vertical Timeline — FBI Chronicle */
  .timeline-section {
    margin-top: 1.4rem;
    padding: 3rem 0;
  }
  .timeline-vertical {
    position: relative;
    padding: 2rem 0;
    max-width: 960px;
    margin: 0 auto;
  }
  /* Spine — glowing vertical line */
  .timeline-vertical::before {
    content: ""; position: absolute;
    left: 50%; top: 0; bottom: 0; width: 3px;
    background: linear-gradient(180deg,
      transparent,
      rgba(255, 23, 68, 0.4) 5%,
      rgba(124, 58, 237, 0.5) 30%,
      rgba(0, 229, 255, 0.4) 70%,
      rgba(122, 255, 174, 0.4) 95%,
      transparent);
    transform: translateX(-50%);
    box-shadow: 0 0 12px rgba(124, 58, 237, 0.15);
  }
  /* Item */
  .tl-item {
    position: relative;
    display: flex; align-items: flex-start;
    margin-bottom: 2rem;
    width: 100%;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .tl-item.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  .tl-left { justify-content: flex-end; padding-right: calc(50% + 32px); }
  .tl-right { justify-content: flex-start; padding-left: calc(50% + 32px); }
  /* Dot on spine */
  .tl-dot {
    position: absolute;
    left: 50%; top: 1.2rem;
    width: 16px; height: 16px;
    border-radius: 50%;
    border: 3px solid var(--dot-color, rgba(255, 255, 255, 0.45));
    background: var(--bg);
    transform: translateX(-50%);
    z-index: 2;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s;
  }
  .tl-item.is-visible:hover .tl-dot {
    transform: translateX(-50%) scale(1.6);
    box-shadow: 0 0 20px var(--dot-color), 0 0 40px var(--dot-color);
    background: var(--dot-color);
  }
  .tl-dot-now {
    width: 20px; height: 20px;
    background: var(--dot-color);
    box-shadow: 0 0 20px var(--dot-color), 0 0 50px var(--dot-color);
    animation: tlPulseNow 2s ease-in-out infinite;
  }
  @keyframes tlPulseNow {
    0%, 100% { box-shadow: 0 0 12px var(--dot-color); }
    50% { box-shadow: 0 0 30px var(--dot-color), 0 0 60px var(--dot-color); }
  }
  /* Card */
  .tl-card {
    padding: 1.2rem 1.4rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-panel);
    background:
      radial-gradient(ellipse at 20% 20%, color-mix(in oklch, var(--card-accent) 6%, transparent), transparent 60%),
      var(--bg-panel);
    max-width: 400px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  }
  .tl-item.is-visible:hover .tl-card {
    transform: translateY(-4px);
    border-color: color-mix(in oklch, var(--card-accent) 30%, transparent);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.4), 0 0 20px color-mix(in oklch, var(--card-accent) 10%, transparent);
  }
  .tl-card-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 0.5rem;
  }
  .tl-date {
    font-family: var(--font-mono); font-size: 0.72rem;
    color: var(--text-muted); letter-spacing: 0.08em;
    font-weight: 500;
  }
  .tl-cat {
    font-family: var(--font-mono); font-size: 0.62rem;
    letter-spacing: 0.12em; text-transform: uppercase;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    background: color-mix(in oklch, var(--card-accent) 8%, transparent);
    border: 1px solid color-mix(in oklch, var(--card-accent) 15%, transparent);
  }
  .tl-title {
    font-family: var(--font-display);
    font-size: 1.1rem; font-weight: 700;
    line-height: 1.2; margin-bottom: 0.5rem;
    letter-spacing: -0.01em;
  }
  .tl-body {
    font-size: 0.88rem; line-height: 1.65;
    color: rgba(255, 255, 255, 0.65);
  }
  /* Evidence image on each timeline entry */
  .tl-media {
    margin: 0 0 0.75rem;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid color-mix(in oklch, var(--card-accent) 24%, rgba(255, 255, 255, 0.08));
    background: rgba(0, 0, 0, 0.35);
    box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.35);
  }
  .tl-thumb {
    display: block;
    width: 100%;
    height: 156px;
    object-fit: cover;
    filter: saturate(1.05) contrast(1.02);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease;
  }
  .tl-item.is-visible:hover .tl-thumb {
    transform: scale(1.06);
    filter: saturate(1.16) contrast(1.06);
  }
  .tl-media-cap {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.6rem; font-weight: 500;
    letter-spacing: 0.06em; text-transform: uppercase;
    color: var(--text-muted);
    padding: 0.42rem 0.62rem;
    border-top: 1px solid color-mix(in oklch, var(--card-accent) 14%, rgba(255, 255, 255, 0.06));
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.28));
  }
  @media (prefers-reduced-motion: reduce) {
    .tl-thumb { transition: none; }
    .tl-item.is-visible:hover .tl-thumb { transform: none; }
  }
  .tl-severity {
    display: flex; gap: 4px; margin-top: 0.7rem;
  }
  .tl-pip {
    width: 7px; height: 7px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    transition: background 0.3s, box-shadow 0.3s;
  }
  .tl-pip-on { background: var(--pip-color); opacity: 0.8; }
  .tl-item.is-visible:hover .tl-pip-on {
    box-shadow: 0 0 6px var(--pip-color);
    opacity: 1;
  }
  .tl-future { opacity: 0.5; }
  .tl-future .tl-card { border-style: dashed; }

  /* Connector lines from dot to card */
  .tl-left .tl-card::after {
    content: ""; position: absolute;
    right: calc(50% - 32px); top: 1.6rem;
    width: 24px; height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04));
  }
  .tl-right .tl-card::before {
    content: ""; position: absolute;
    left: calc(50% - 32px); top: 1.6rem;
    width: 24px; height: 1px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.12));
  }

  /* Mobile: single column */
  @media (max-width: 700px) {
    .timeline-vertical::before { left: 20px; }
    .tl-item { padding-right: 0 !important; padding-left: 52px !important; justify-content: flex-start !important; }
    .tl-dot { left: 20px; }
    .tl-card { max-width: 100%; }
    .tl-left .tl-card::after, .tl-right .tl-card::before { display: none; }
  }

  /* Hotline section */
  .hotline-section {
    background:
      radial-gradient(ellipse at 50% 50%, rgba(255, 23, 68, 0.1), transparent 60%),
      linear-gradient(180deg, rgba(6, 6, 16, 0.98), rgba(40, 10, 20, 0.9), rgba(6, 6, 16, 0.98));
    border-top: 1px solid rgba(255, 23, 68, 0.2);
    border-bottom: 1px solid rgba(255, 23, 68, 0.2);
    text-align: center;
  }
  .hotline-inner {
    padding: 1rem 0;
    max-width: var(--container);
    margin: 0 auto;
  }
  .hotline-number {
    position: relative;
    display: inline-block;
    margin-top: 0.8rem;
    padding: 0.2rem 0.4rem;
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 900; line-height: 1;
    color: transparent;
    background:
      linear-gradient(120deg, var(--accent-red) 0%, #FF6D00 25%, #FFD600 45%, #FF1744 65%, #7C3AED 90%, var(--accent-red) 100%);
    background-size: 300% 100%;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 40px rgba(255, 23, 68, 0.35));
    isolation: isolate;
    background-position: 50% 50%;
    transition: filter 0.35s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .hotline-number::before,
  .hotline-number::after {
    content: attr(data-text);
    position: absolute;
    inset: 0.2rem 0.4rem;
    pointer-events: none;
    opacity: 0;
    background: inherit;
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: opacity 0.25s ease, transform 0.25s ease;
  }
  .hotline-number::before {
    text-shadow: -2px 0 rgba(255, 23, 68, 0.85), 0 0 18px rgba(255, 23, 68, 0.55);
    transform: translate3d(-1px, 0, 0);
  }
  .hotline-number::after {
    display: none;
  }
  .hotline-number:hover,
  .hotline-number:focus-visible {
    transform: translateY(-3px) scale(1.02);
    filter: drop-shadow(0 0 65px rgba(255, 23, 68, 0.55)) drop-shadow(0 0 30px rgba(0, 229, 255, 0.3));
    outline: none;
  }
  .hotline-number:hover::before,
  .hotline-number:focus-visible::before { opacity: 1; transform: translate3d(-3px, 0, 0); }
  .hotline-number:hover::after,
  .hotline-number:focus-visible::after { opacity: 1; transform: translate3d(3px, 0, 0); }
  .hotline-number:active { transform: translateY(-1px) scale(0.99); }
  @media (prefers-reduced-motion: reduce) {
    .hotline-number::before, .hotline-number::after { display: none; }
  }
  .hotline-tagline {
    margin-top: 0.8rem;
    font-size: 1.1rem; color: var(--text-muted);
    font-style: italic;
  }

  /* Live transmission feed */
  .live-feed-section {
    border-color: rgba(255, 109, 0, 0.2);
    background: linear-gradient(180deg, rgba(255, 109, 0, 0.04), rgba(16, 8, 28, 0.92));
  }
  .feed-controls {
    display: flex; align-items: center; gap: 0.5rem;
    margin-top: 1rem; flex-wrap: wrap;
  }
  .feed-live-indicator {
    display: flex; align-items: center; gap: 0.4rem;
    margin-left: auto;
    font-family: var(--font-mono); font-size: 0.72rem;
    color: var(--accent-red); letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .pulse-dot-inline {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--accent-red);
    animation: pulse 2s ease-in-out infinite;
    display: inline-block;
  }
  .feed-stream {
    margin-top: 1rem;
    max-height: 480px; overflow-y: auto;
    display: flex; flex-direction: column; gap: 0.5rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 109, 0, 0.3) transparent;
  }
  .feed-empty {
    color: var(--text-muted); font-style: italic;
    text-align: center; padding: 2rem;
  }
  .feed-entry {
    padding: 0.8rem 1rem;
    border: 1px solid rgba(255, 109, 0, 0.1);
    border-radius: var(--radius-soft);
    background: rgba(6, 6, 16, 0.6);
    animation: feed-slide-in 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .feed-entry-call { border-left: 3px solid var(--accent-orange); }
  .feed-entry-chat { border-left: 3px solid var(--accent-purple); }
  .feed-entry-header {
    display: flex; align-items: center; gap: 0.5rem;
    flex-wrap: wrap;
  }
  .feed-entry-type {
    font-family: var(--font-mono); font-size: 0.65rem;
    letter-spacing: 0.1em; text-transform: uppercase;
    padding: 0.1rem 0.4rem; border-radius: 4px;
  }
  .feed-entry-call .feed-entry-type {
    color: var(--accent-orange); background: rgba(255, 109, 0, 0.1);
  }
  .feed-entry-chat .feed-entry-type {
    color: var(--accent-purple); background: rgba(124, 58, 237, 0.1);
  }
  .feed-entry-time {
    font-family: var(--font-mono); font-size: 0.68rem;
    color: var(--text-muted); margin-left: auto;
  }
  .feed-entry-content {
    margin-top: 0.4rem; font-size: 0.88rem; line-height: 1.6;
  }
  .feed-entry-speaker {
    font-weight: 600; font-size: 0.75rem;
    text-transform: uppercase; letter-spacing: 0.06em;
    margin-right: 0.4rem;
  }
  .feed-entry-speaker-caller { color: var(--accent-orange); }
  .feed-entry-speaker-signal { color: var(--accent-red); }
  .feed-entry-speaker-human { color: var(--accent-cyan); }
  .feed-turn + .feed-turn { margin-top: 0.3rem; }
  .feed-footer {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 0.75rem;
    margin-top: 1rem; padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 109, 0, 0.1);
  }
  .feed-count {
    font-family: var(--font-mono); font-size: 0.75rem;
    color: var(--text-muted); letter-spacing: 0.04em;
  }

  @keyframes feed-slide-in {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Newsletter */
  .newsletter-section {
    margin-top: 1.4rem;
    background: linear-gradient(180deg, rgba(124, 58, 237, 0.06), rgba(6, 6, 16, 0.95));
    border-color: rgba(124, 58, 237, 0.2);
    text-align: center;
  }
  .newsletter-body {
    margin-top: 1rem; max-width: 640px;
    margin-inline: auto;
  }
  .newsletter-body p { color: var(--text-muted); font-size: 0.95rem; }
  .newsletter-form { margin-top: 1.5rem; }
  .newsletter-input-group {
    display: flex; gap: 0.5rem;
    max-width: 420px; margin-inline: auto;
  }
  .newsletter-input-group input {
    flex: 1; height: 44px;
    padding: 0 1rem;
    border-radius: var(--radius-button);
    border: 1px solid var(--line);
    background: rgba(6, 6, 16, 0.8);
    color: var(--text);
    font-size: 0.9rem;
    font-family: var(--font-mono);
    transition: border-color 0.2s;
  }
  .newsletter-input-group input:focus {
    outline: none;
    border-color: var(--accent-purple);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
  }
  .newsletter-input-group button {
    white-space: nowrap;
    min-height: 44px;
  }
  .newsletter-input-group button[disabled] {
    opacity: 0.6;
    cursor: progress;
  }
  .newsletter-anon-note {
    margin: 0 auto 0.85rem;
    max-width: 420px;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: center;
  }
  #newsletter-status {
    margin-top: 0.75rem;
    min-height: 1.2em;
    transition: color 0.2s;
  }
  #newsletter-status[data-state="pending"] { color: var(--accent-cyan); }
  #newsletter-status[data-state="success"] { color: var(--accent-green, #6ee7b7); }
  #newsletter-status[data-state="error"]   { color: var(--accent-red, #ff5577); }

  /* Gravestone */
  .gravestone-panel { display: grid; gap: 0.8rem; }
  .gravestone {
    position: relative; display: grid; place-items: center;
    min-height: 260px; margin-top: 0.25rem;
    border: 1px solid rgba(255, 23, 68, 0.12);
    border-radius: 999px 999px 30px 30px / 160px 160px 30px 30px;
    background:
      radial-gradient(circle at 50% 24%, rgba(255, 23, 68, 0.08), transparent 34%),
      radial-gradient(circle at 50% 80%, rgba(124, 58, 237, 0.04), transparent 30%),
      linear-gradient(180deg, rgba(16, 8, 28, 0.92), rgba(6, 6, 16, 0.95));
    transition: border-color 0.4s, box-shadow 0.4s;
  }
  .gravestone:hover {
    border-color: rgba(255, 23, 68, 0.2);
    box-shadow: 0 0 60px rgba(255, 23, 68, 0.08);
  }
  .gravestone-top {
    position: absolute; inset: 1rem 1rem auto;
    height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 23, 68, 0.2), transparent);
  }
  .gravestone-text, .gravestone-name {
    position: relative; z-index: 1;
    font-family: var(--font-display); text-align: center;
  }
  .gravestone-text {
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    letter-spacing: 0.2em; color: var(--accent-red);
  }
  .gravestone-name {
    margin-top: 0.3rem;
    font-size: clamp(1.2rem, 2vw, 1.7rem); color: var(--text);
  }

  /* Countdown */
  .countdown {
    margin-top: 0.8rem;
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2.6rem);
    line-height: 1;
  }

  /* VHS Scanlines */
  .scanlines {
    position: fixed; inset: 0; z-index: 0;
    pointer-events: none;
    background:
      repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent 2px,
        rgba(255, 23, 68, 0.015) 2px,
        rgba(255, 23, 68, 0.015) 4px
      );
  }

  /* Dossier — The Evidence */
  .dossier-section { margin-top: 2rem; }
  .dossier-grid { display: grid; gap: 1.8rem; margin-top: 1.5rem; position: relative; }

  /* Full-width dossier feature sections — every card a multimedia experience */
  .dossier-intro {
    text-align: center; padding-block: 4rem 2rem;
    border-bottom: 1px solid rgba(255, 23, 68, 0.12);
  }
  .dossier-intro h2 { font-size: clamp(2.4rem, 5vw, 3.8rem); margin: 0.4rem 0 1rem; }
  .dossier-intro p { max-width: 640px; margin: 0 auto; color: var(--text-soft); }

  .severity-legend {
    margin: 2rem auto 0;
    padding: 1rem 1.25rem;
    max-width: 720px;
    text-align: left;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-soft);
    background: rgba(6, 6, 16, 0.55);
    display: grid;
    gap: 0.5rem;
  }
  .severity-legend-title {
    margin: 0 0 0.4rem;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--text-muted);
  }
  .severity-legend-row {
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    gap: 0.85rem;
    align-items: baseline;
  }
  .severity-legend-row dt { margin: 0; }
  .severity-legend-row dd {
    margin: 0;
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--text-soft);
  }
  .severity-legend-chip {
    display: inline-block;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    border: 1px solid currentColor;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1;
  }
  .severity-legend-chip[data-sev="5"] { color: var(--accent-red); }
  .severity-legend-chip[data-sev="4"] { color: var(--accent-purple); }
  .severity-legend-chip[data-sev="3"] { color: var(--accent-cyan); }
  .severity-legend-chip[data-sev="2"] { color: var(--accent-green); }
  .severity-legend-chip[data-sev="1"] { color: var(--text-muted); }
  @media (max-width: 480px) {
    .severity-legend-row { grid-template-columns: 1fr; gap: 0.25rem; }
  }

  .dossier-feature {
    --feat-accent: var(--accent-red);
    --feat-glow: rgba(255, 23, 68, 0.18);
    --feat-soft: rgba(255, 23, 68, 0.06);
    position: relative;
    padding-block: clamp(4rem, 9vw, 7rem);
    overflow: hidden;
    border-top: 1px solid var(--feat-glow);
  }
  .dossier-feature--narrative {
    --feat-accent: var(--accent-purple);
    --feat-glow: rgba(124, 58, 237, 0.22);
    --feat-soft: rgba(124, 58, 237, 0.08);
  }
  .dossier-feature--discovery {
    --feat-accent: var(--accent-green);
    --feat-glow: rgba(122, 255, 174, 0.18);
    --feat-soft: rgba(122, 255, 174, 0.05);
  }
  .dossier-feature--encounter {
    --feat-accent: var(--accent-cyan);
    --feat-glow: rgba(0, 229, 255, 0.18);
    --feat-soft: rgba(0, 229, 255, 0.05);
  }
  .dossier-feature--signal {
    --feat-accent: var(--accent-red);
    --feat-glow: rgba(255, 23, 68, 0.2);
    --feat-soft: rgba(255, 23, 68, 0.07);
  }

  .dossier-feature-bg {
    position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background:
      radial-gradient(ellipse at 20% 30%, var(--feat-soft), transparent 55%),
      radial-gradient(ellipse at 80% 70%, var(--feat-soft), transparent 55%),
      linear-gradient(180deg, rgba(6, 6, 16, 0.96), rgba(8, 6, 18, 0.92), rgba(6, 6, 16, 0.96));
  }
  .dossier-feature-bg::before,
  .dossier-feature-bg::after {
    content: ""; position: absolute; border-radius: 50%;
    opacity: 0.3;
  }
  .dossier-feature-bg::before {
    width: 380px; height: 380px;
    top: -100px; left: -80px;
    background: radial-gradient(circle, var(--feat-glow), transparent 70%);
  }
  .dossier-feature-bg::after {
    width: 320px; height: 320px;
    bottom: -120px; right: -60px;
    background: radial-gradient(circle, var(--feat-glow), transparent 70%);
  }

  .dossier-feature-shell {
    position: relative; z-index: 1;
    width: 100%;
    max-width: min(1400px, 94vw);
    margin: 0 auto;
    padding-inline: clamp(1rem, 3vw, 2.5rem);
  }
  .dossier-feature--avatar-mud .dossier-feature-shell {
    max-width: 720px;
    margin-inline: auto;
  }
  .dossier-feature--avatar-mud .dossier-feature-meta,
  .dossier-feature--avatar-mud .dossier-feature-title,
  .dossier-feature--avatar-mud .dossier-feature-body { text-align: center; }
  .dossier-feature--avatar-mud .dossier-feature-title { margin-inline: auto; }
  .dossier-feature--avatar-mud .dossier-feature-body { margin-inline: auto; }

  /* AVATAR MUD — "the song I made about it" listen card */
  .mud-song-card {
    display: flex; align-items: center; gap: 1.15rem;
    width: 100%; max-width: 480px;
    margin: 1.85rem auto 0;
    padding: 1rem 1.15rem;
    text-align: left;
    border-radius: 16px;
    border: 1px solid rgba(0, 229, 255, 0.28);
    background:
      radial-gradient(120% 140% at 0% 0%, rgba(124, 58, 237, 0.16), transparent 60%),
      linear-gradient(135deg, rgba(6, 6, 16, 0.9), rgba(10, 12, 26, 0.82));
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.02);
    transition: transform 0.18s ease, border-color 0.25s ease, box-shadow 0.3s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .mud-song-card:hover,
  .mud-song-card:focus-visible {
    transform: translateY(-2px);
    border-color: rgba(0, 229, 255, 0.55);
    box-shadow: 0 14px 52px rgba(0, 229, 255, 0.18), 0 0 0 1px rgba(0, 229, 255, 0.12);
    outline: none;
  }
  .mud-song-visual {
    position: relative; flex: 0 0 auto;
    display: grid; place-items: center;
    width: 58px; height: 58px;
    color: #00E5FF;
  }
  .mud-song-ring {
    position: absolute; inset: 0;
    border-radius: 50%;
    border: 1.5px solid rgba(0, 229, 255, 0.5);
    animation: mudSongPulse 2.8s ease-out infinite;
  }
  .mud-song-ring:nth-child(2) { animation-delay: 0.9s; }
  .mud-song-ring:nth-child(3) { animation-delay: 1.8s; }
  .mud-song-play {
    position: relative; z-index: 1;
    filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.6));
    transition: transform 0.18s ease;
  }
  .mud-song-card:hover .mud-song-play { transform: scale(1.12); }
  .mud-song-copy { display: flex; flex-direction: column; gap: 0.15rem; flex: 1 1 auto; min-width: 0; }
  .mud-song-eyebrow {
    font-family: var(--font-mono);
    font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase;
    color: rgba(0, 229, 255, 0.75);
  }
  .mud-song-title { font-size: 1.12rem; font-weight: 700; line-height: 1.15; color: #fff; }
  .mud-song-artist {
    font-size: 0.76rem; color: rgba(255, 255, 255, 0.55);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .mud-song-cta {
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600;
    color: #00E5FF;
    padding: 0.4rem 0.7rem;
    border: 1px solid rgba(0, 229, 255, 0.35);
    border-radius: 999px;
    transition: background-color 0.2s ease, transform 0.18s ease;
  }
  .mud-song-card:hover .mud-song-cta { background: rgba(0, 229, 255, 0.12); transform: translateX(2px); }
  @keyframes mudSongPulse {
    0% { transform: scale(0.55); opacity: 0.9; }
    100% { transform: scale(1.15); opacity: 0; }
  }
  @media (max-width: 520px) {
    .mud-song-card { flex-wrap: wrap; gap: 0.85rem; padding: 0.9rem 1rem; }
    .mud-song-cta { margin-left: auto; }
  }
  @media (prefers-reduced-motion: reduce) {
    .mud-song-ring { animation: none; opacity: 0.4; }
    .mud-song-card, .mud-song-play, .mud-song-cta { transition: none; }
    .mud-song-card:hover { transform: none; }
  }

  .dossier-feature-shell > .dossier-feature-figure:not(.dossier-feature-figure--float-right),
  .dossier-feature-shell > .dossier-feature-media-row {
    width: 100%; max-width: none;
  }
  .dossier-feature-map {
    position: relative; z-index: 1;
    width: 100%;
    margin-top: 2.5rem;
    border-top: 1px solid var(--feat-glow);
    border-bottom: 1px solid var(--feat-glow);
    background: #000;
    overflow: hidden;
  }
  .dossier-feature-map iframe {
    width: 100%; height: clamp(360px, 60vh, 640px);
    display: block; border: 0;
    filter: invert(0.92) hue-rotate(180deg) saturate(0.7) brightness(0.95);
  }
  .dossier-feature-map--themed {
    background: #060610;
    border-top-color: rgba(0, 229, 255, 0.35);
    border-bottom-color: rgba(0, 229, 255, 0.35);
    box-shadow: 0 0 0 1px rgba(0, 229, 255, 0.08) inset, 0 24px 48px -28px rgba(0, 229, 255, 0.25);
  }
  .dossier-feature-map--themed iframe {
    pointer-events: none;
    user-select: none;
    filter: invert(0.94) hue-rotate(190deg) saturate(0.45) brightness(0.78) contrast(1.05);
  }
  .dossier-feature-map-overlay {
    position: absolute; inset: 0;
    pointer-events: none;
    background:
      radial-gradient(ellipse at center, rgba(6, 6, 16, 0) 0%, rgba(6, 6, 16, 0.55) 100%),
      linear-gradient(180deg, rgba(0, 229, 255, 0.06) 0%, rgba(124, 58, 237, 0.05) 100%);
    mix-blend-mode: screen;
  }
  .dossier-feature-map--lush {
    border-top-color: rgba(122, 255, 174, 0.42);
    border-bottom-color: rgba(122, 255, 174, 0.42);
    box-shadow:
      0 0 0 1px rgba(122, 255, 174, 0.1) inset,
      0 30px 60px -28px rgba(122, 255, 174, 0.32),
      0 -30px 60px -32px rgba(124, 58, 237, 0.28);
  }
  .dossier-feature-map--lush iframe {
    filter: invert(0.93) hue-rotate(85deg) saturate(0.55) brightness(0.72) contrast(1.12);
  }
  .dossier-feature-map--lush .dossier-feature-map-overlay {
    background:
      radial-gradient(ellipse at 50% 45%, rgba(6, 6, 16, 0) 0%, rgba(6, 6, 16, 0.45) 65%, rgba(6, 6, 16, 0.85) 100%),
      linear-gradient(180deg, rgba(122, 255, 174, 0.08) 0%, rgba(0, 229, 255, 0.05) 50%, rgba(124, 58, 237, 0.08) 100%),
      repeating-linear-gradient(135deg, rgba(122, 255, 174, 0.025) 0 2px, transparent 2px 6px);
    mix-blend-mode: screen;
  }
  .dossier-feature-map--lush::before {
    content: ""; position: absolute; inset: 0;
    pointer-events: none; z-index: 2;
    background:
      linear-gradient(90deg, rgba(6, 6, 16, 0.85) 0%, rgba(6, 6, 16, 0) 12%, rgba(6, 6, 16, 0) 88%, rgba(6, 6, 16, 0.85) 100%),
      linear-gradient(180deg, rgba(6, 6, 16, 0.55) 0%, rgba(6, 6, 16, 0) 25%, rgba(6, 6, 16, 0) 75%, rgba(6, 6, 16, 0.55) 100%);
  }
  .dossier-feature-map-pin {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    pointer-events: none;
    width: 0; height: 0;
    display: grid; place-items: center;
  }
  .dossier-feature-map-pin .map-pin-dot {
    grid-area: 1 / 1;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #ffffff 0%, #7affae 50%, #00e5ff 100%);
    box-shadow:
      0 0 0 2px rgba(6, 6, 16, 0.85),
      0 0 16px rgba(122, 255, 174, 0.85),
      0 0 32px rgba(0, 229, 255, 0.55);
  }
  .dossier-feature-map-pin .map-pin-ring {
    grid-area: 1 / 1;
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(122, 255, 174, 0.7);
    animation: ghostPinPulse 2.6s ease-out infinite;
  }
  .dossier-feature-map-pin .map-pin-glow {
    grid-area: 1 / 1;
    width: 110px; height: 110px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(122, 255, 174, 0.35) 0%, rgba(0, 229, 255, 0.15) 40%, transparent 70%);
    filter: blur(2px);
    animation: ghostPinPulse 3.6s ease-in-out infinite alternate;
  }
  .dossier-feature-map-pin .map-pin-label {
    grid-area: 1 / 1;
    transform: translateY(-44px);
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #c8ffd4;
    padding: 0.32rem 0.7rem;
    background: rgba(6, 6, 16, 0.78);
    border: 1px solid rgba(122, 255, 174, 0.45);
    border-radius: 999px;
    backdrop-filter: blur(6px);
    box-shadow: 0 8px 24px -8px rgba(122, 255, 174, 0.35);
  }
  @keyframes ghostPinPulse {
    0% { transform: scale(0.9); opacity: 0.95; }
    70% { transform: scale(1.6); opacity: 0; }
    100% { transform: scale(1.6); opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .dossier-feature-map-pin .map-pin-ring,
    .dossier-feature-map-pin .map-pin-glow { animation: none; }
  }
  .dossier-feature-meta {
    display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap;
    margin-bottom: 1rem;
  }
  .dossier-feature-meta .eyebrow {
    margin: 0;
    color: var(--feat-accent);
    border-color: var(--feat-glow);
  }
  .dossier-severity {
    font-family: var(--font-mono);
    font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase;
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--feat-glow);
    border-radius: 999px;
    color: var(--feat-accent);
    background: var(--feat-soft);
  }
  .dossier-feature-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.6rem);
    line-height: 1.05; margin: 0 0 1.2rem;
    color: #fff;
    text-wrap: balance;
  }
  .dossier-feature-bridge {
    font-family: var(--font-display);
    font-size: clamp(0.95rem, 1.4vw, 1.15rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62);
    margin: 0 0 1.4rem;
    padding-left: 1.1rem;
    border-left: 2px solid var(--feat-accent, #00E5FF);
    line-height: 1.4;
    text-wrap: balance;
  }
  .dossier-feature-title .accent { color: var(--feat-accent); }
  .dossier-feature-title-link {
    color: inherit;
    text-decoration: none;
    background-image: linear-gradient(120deg, var(--feat-accent, #00E5FF), transparent);
    background-size: 0% 2px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size 0.4s ease, color 0.2s ease, text-shadow 0.2s ease;
  }
  .dossier-feature-title-link:hover,
  .dossier-feature-title-link:focus-visible {
    background-size: 100% 2px;
    color: #fff;
    text-shadow: 0 0 18px rgba(0, 229, 255, 0.4);
    outline: none;
  }
  .dossier-link {
    color: var(--feat-accent, #00E5FF);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color 0.2s ease, text-shadow 0.2s ease;
  }
  .dossier-link:hover,
  .dossier-link:focus-visible {
    color: #fff;
    text-shadow: 0 0 12px rgba(0, 229, 255, 0.55);
    outline: none;
  }
  .dossier-feature-body {
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    line-height: 1.7; color: var(--text-soft);
    max-width: 760px;
    text-wrap: pretty;
  }
  .dossier-feature-body + .dossier-feature-body { margin-top: 1rem; }

  .dossier-feature-media {
    margin-top: 2rem;
    display: grid; gap: 1.2rem;
  }
  .dossier-feature-media img,
  .dossier-feature-media video {
    width: 100%; height: auto;
    border-radius: var(--radius-soft);
    border: 1px solid var(--feat-glow);
    box-shadow: 0 16px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--feat-soft) inset;
    background: #000;
  }
  .dossier-feature-media-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem;
    margin-top: 2rem;
  }
  .dossier-feature-figure {
    margin: 2rem auto 0; display: grid; gap: 0.6rem;
    max-width: 1100px;
  }
  .dossier-feature-figure picture {
    display: flex; justify-content: center;
    background: #000; border-radius: var(--radius-soft);
    border: 1px solid var(--feat-glow);
    overflow: hidden;
    box-shadow: 0 16px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--feat-soft) inset;
  }
  .dossier-feature-figure picture img {
    width: auto; max-width: 100%; max-height: 70vh;
    height: auto; display: block;
    object-fit: contain;
    border: none; box-shadow: none; border-radius: 0;
  }
  .dossier-feature-figure > img,
  .dossier-feature-figure > video {
    width: 100%; max-height: 70vh; height: auto; display: block;
    border-radius: var(--radius-soft);
    border: 1px solid var(--feat-glow);
    box-shadow: 0 16px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--feat-soft) inset;
    background: #000;
    object-fit: cover;
  }
  .dossier-feature-figure > iframe {
    width: 100%; aspect-ratio: 16 / 9; height: auto; display: block;
    border-radius: var(--radius-soft);
    border: 1px solid var(--feat-glow);
    box-shadow: 0 16px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--feat-soft) inset;
    background: #000;
  }
  .dossier-feature-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(1.5rem, 3vw, 2.5rem);
    align-items: start;
    margin-top: 0.5rem;
  }
  .dossier-feature-split > .dossier-feature-body { max-width: none; margin: 0; }
  .dossier-feature-split > .dossier-feature-figure { margin: 0; max-width: none; }
  @media (max-width: 880px) {
    .dossier-feature-split { grid-template-columns: 1fr; }
  }
  .dossier-feature-figure figcaption {
    font-family: var(--font-mono);
    font-size: 0.78rem; letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: center;
  }
  .dossier-feature-media-row .dossier-feature-figure {
    margin: 0; max-width: none;
    align-content: start; align-self: start;
  }
  .dossier-feature-media-row .dossier-feature-figure picture img,
  .dossier-feature-media-row .dossier-feature-figure > img,
  .dossier-feature-media-row .dossier-feature-figure > video { max-height: 56vh; }

  .dossier-feature-figure--float-right {
    float: right;
    width: 300px;
    margin: 0.4rem 0 1.2rem 2rem;
    max-width: 100%;
  }
  .dossier-feature-figure--float-right picture img,
  .dossier-feature-figure--float-right > img,
  .dossier-feature-figure--float-right > video {
    width: 300px; height: 300px;
    max-width: 100%; max-height: none;
    object-fit: cover;
  }
  .dossier-feature-figure--fill picture { width: 100%; }
  .dossier-feature-figure--fill picture img {
    width: 100%; max-height: none; object-fit: cover;
  }

  .dossier-feature-split--motif-right {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: clamp(1.5rem, 3vw, 2.75rem);
    align-items: start;
    margin-top: 0.5rem;
  }
  .dossier-feature-split--motif-right > .dossier-feature-split-body {
    display: grid; gap: 1.1rem;
  }
  .dossier-feature-split--motif-right .dossier-feature-split-body > .dossier-feature-body { margin: 0; max-width: none; }
  .dossier-feature-motif--inline {
    margin: 0;
    width: 100%;
    max-width: none;
    aspect-ratio: auto;
    align-self: start;
    position: relative;
  }
  .dossier-feature-motif--inline.dossier-feature-motif--dreamcatcher {
    aspect-ratio: 360 / 520;
    margin: 0 auto;
    max-width: 360px;
  }
  .dossier-feature-motif--inline.dossier-feature-motif--particles {
    min-height: 320px;
    aspect-ratio: 1 / 1;
    max-width: 360px;
    margin: 0 auto;
    display: block;
  }

  /* Wormhole — 3D fly-through tunnel for "Is Time Travel Real?" */
  .dossier-feature-motif--inline.dossier-feature-motif--wormhole {
    position: relative;
    aspect-ratio: 1 / 1;
    max-width: 360px;
    min-height: 320px;
    margin: 0 auto;
    display: block;
  }
  .wormhole {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    overflow: hidden;
    isolation: isolate;
    background:
      radial-gradient(circle at 50% 50%, rgba(124, 58, 237, 0.18) 0%, rgba(0, 0, 0, 0.92) 60%, #050510 100%);
    box-shadow:
      inset 0 0 50px rgba(0, 0, 0, 0.95),
      0 0 60px rgba(0, 229, 255, 0.22),
      0 0 120px rgba(124, 58, 237, 0.22);
    perspective: 760px;
    transform-style: preserve-3d;
  }
  .wormhole::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid rgba(0, 229, 255, 0.4);
    box-shadow:
      0 0 24px rgba(0, 229, 255, 0.45),
      inset 0 0 40px rgba(124, 58, 237, 0.25);
    pointer-events: none;
    z-index: 6;
  }
  .wormhole-glow {
    position: absolute;
    inset: -6%;
    pointer-events: none;
    background: radial-gradient(circle at 50% 50%,
      rgba(0, 229, 255, 0) 28%,
      rgba(0, 229, 255, 0.10) 48%,
      rgba(124, 58, 237, 0.14) 70%,
      rgba(0, 0, 0, 0) 100%);
    animation: wh-pulse 4.6s ease-in-out infinite reverse;
  }
  .wormhole-stars {
    position: absolute;
    inset: -12%;
    background-image:
      radial-gradient(2px 2px at 14% 22%, rgba(255, 255, 255, 0.95), transparent 60%),
      radial-gradient(1.5px 1.5px at 78% 18%, rgba(0, 229, 255, 0.85), transparent 60%),
      radial-gradient(1px 1px at 32% 60%, rgba(255, 255, 255, 0.7), transparent 60%),
      radial-gradient(1.5px 1.5px at 64% 78%, rgba(255, 255, 255, 0.85), transparent 60%),
      radial-gradient(1.2px 1.2px at 86% 52%, rgba(124, 58, 237, 0.85), transparent 60%),
      radial-gradient(1px 1px at 22% 84%, rgba(255, 255, 255, 0.6), transparent 60%),
      radial-gradient(1.4px 1.4px at 50% 8%, rgba(255, 255, 255, 0.85), transparent 60%),
      radial-gradient(1px 1px at 90% 88%, rgba(0, 229, 255, 0.7), transparent 60%);
    background-repeat: no-repeat;
    animation: wh-stars 90s linear infinite;
    -webkit-mask: radial-gradient(circle at 50% 50%, transparent 0%, transparent 16%, rgba(0, 0, 0, 0.55) 32%, #000 70%);
            mask: radial-gradient(circle at 50% 50%, transparent 0%, transparent 16%, rgba(0, 0, 0, 0.55) 32%, #000 70%);
    z-index: 1;
  }
  @keyframes wh-stars {
    to { transform: rotate(360deg); }
  }
  .wormhole-swirl {
    position: absolute;
    inset: 0;
    background: conic-gradient(from 0deg at 50% 50%,
      rgba(0, 229, 255, 0) 0deg,
      rgba(0, 229, 255, 0.22) 45deg,
      rgba(124, 58, 237, 0.28) 90deg,
      rgba(0, 229, 255, 0) 140deg,
      rgba(124, 58, 237, 0.18) 210deg,
      rgba(0, 229, 255, 0.28) 270deg,
      rgba(124, 58, 237, 0) 330deg,
      rgba(0, 229, 255, 0) 360deg);
    mix-blend-mode: screen;
    -webkit-mask: radial-gradient(circle, transparent 0%, transparent 6%, #000 22%, transparent 92%);
            mask: radial-gradient(circle, transparent 0%, transparent 6%, #000 22%, transparent 92%);
    animation: wh-spin-rev 9s linear infinite;
    filter: blur(2px) saturate(1.5);
    z-index: 2;
  }
  @keyframes wh-spin-rev {
    to { transform: rotate(-360deg); }
  }
  .wormhole-tunnel {
    position: absolute;
    inset: 0;
    transform: rotateX(62deg);
    transform-style: preserve-3d;
    z-index: 3;
  }
  .wormhole-ring {
    position: absolute;
    top: 50%; left: 50%;
    width: 130%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 1px solid rgba(0, 229, 255, 0.6);
    box-shadow:
      0 0 16px rgba(0, 229, 255, 0.45),
      inset 0 0 20px rgba(124, 58, 237, 0.4);
    transform: translate(-50%, -50%) scale(0.04) rotate(0deg);
    animation: wh-fly 5s linear infinite;
    opacity: 0;
    will-change: transform, opacity;
  }
  .wormhole-ring:nth-child(1) { animation-delay: 0s; }
  .wormhole-ring:nth-child(2) {
    animation-delay: -0.625s;
    border-color: rgba(124, 58, 237, 0.65);
    box-shadow: 0 0 16px rgba(124, 58, 237, 0.5), inset 0 0 20px rgba(0, 229, 255, 0.35);
  }
  .wormhole-ring:nth-child(3) { animation-delay: -1.25s; }
  .wormhole-ring:nth-child(4) {
    animation-delay: -1.875s;
    border-color: rgba(124, 58, 237, 0.65);
    box-shadow: 0 0 16px rgba(124, 58, 237, 0.5), inset 0 0 20px rgba(0, 229, 255, 0.35);
  }
  .wormhole-ring:nth-child(5) { animation-delay: -2.5s; }
  .wormhole-ring:nth-child(6) {
    animation-delay: -3.125s;
    border-color: rgba(124, 58, 237, 0.65);
    box-shadow: 0 0 16px rgba(124, 58, 237, 0.5), inset 0 0 20px rgba(0, 229, 255, 0.35);
  }
  .wormhole-ring:nth-child(7) { animation-delay: -3.75s; }
  .wormhole-ring:nth-child(8) {
    animation-delay: -4.375s;
    border-color: rgba(124, 58, 237, 0.65);
    box-shadow: 0 0 16px rgba(124, 58, 237, 0.5), inset 0 0 20px rgba(0, 229, 255, 0.35);
  }
  @keyframes wh-fly {
    0%   { transform: translate(-50%, -50%) scale(0.04) rotate(0deg); opacity: 0; }
    8%   { opacity: 1; }
    65%  { opacity: 0.7; }
    100% { transform: translate(-50%, -50%) scale(1.7) rotate(220deg); opacity: 0; }
  }
  .wormhole-streaks {
    position: absolute;
    inset: 0;
    pointer-events: none;
    animation: wh-spin 22s linear infinite;
    z-index: 4;
  }
  @keyframes wh-spin {
    to { transform: rotate(360deg); }
  }
  .wormhole-streaks span {
    position: absolute;
    top: 50%; left: 50%;
    width: 50%;
    height: 1.4px;
    margin-top: -0.7px;
    background: linear-gradient(90deg,
      rgba(0, 229, 255, 0) 0%,
      rgba(0, 229, 255, 0) 25%,
      rgba(0, 229, 255, 0.5) 60%,
      rgba(255, 255, 255, 0.95) 100%);
    transform-origin: 0% 50%;
    filter: blur(0.4px);
  }
  .wormhole-streaks span:nth-child(1)  { transform: rotate(0deg); }
  .wormhole-streaks span:nth-child(2)  { transform: rotate(30deg); opacity: 0.7; }
  .wormhole-streaks span:nth-child(3)  { transform: rotate(60deg); opacity: 0.55; background: linear-gradient(90deg, transparent 25%, rgba(124, 58, 237, 0.55) 60%, rgba(255, 255, 255, 0.9) 100%); }
  .wormhole-streaks span:nth-child(4)  { transform: rotate(90deg); opacity: 0.85; }
  .wormhole-streaks span:nth-child(5)  { transform: rotate(120deg); opacity: 0.6; background: linear-gradient(90deg, transparent 25%, rgba(124, 58, 237, 0.55) 60%, rgba(255, 255, 255, 0.9) 100%); }
  .wormhole-streaks span:nth-child(6)  { transform: rotate(150deg); opacity: 0.55; }
  .wormhole-streaks span:nth-child(7)  { transform: rotate(180deg); opacity: 0.7; background: linear-gradient(90deg, transparent 25%, rgba(124, 58, 237, 0.55) 60%, rgba(255, 255, 255, 0.9) 100%); }
  .wormhole-streaks span:nth-child(8)  { transform: rotate(210deg); opacity: 0.5; }
  .wormhole-streaks span:nth-child(9)  { transform: rotate(240deg); opacity: 0.65; }
  .wormhole-streaks span:nth-child(10) { transform: rotate(270deg); opacity: 0.85; background: linear-gradient(90deg, transparent 25%, rgba(124, 58, 237, 0.55) 60%, rgba(255, 255, 255, 0.95) 100%); }
  .wormhole-streaks span:nth-child(11) { transform: rotate(300deg); opacity: 0.55; }
  .wormhole-streaks span:nth-child(12) { transform: rotate(330deg); opacity: 0.7; }
  .wormhole-throat {
    position: absolute;
    top: 50%; left: 50%;
    width: 30%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle at 50% 50%,
      #ffffff 0%,
      rgba(255, 255, 255, 0.95) 6%,
      rgba(124, 58, 237, 0.85) 22%,
      rgba(0, 229, 255, 0.55) 48%,
      rgba(6, 6, 16, 0) 78%);
    box-shadow:
      0 0 32px rgba(0, 229, 255, 0.6),
      0 0 70px rgba(124, 58, 237, 0.5),
      inset 0 0 16px rgba(255, 255, 255, 0.6);
    animation: wh-pulse 3.2s ease-in-out infinite;
    filter: blur(0.4px);
    z-index: 5;
  }
  .wormhole-throat-core {
    position: absolute;
    top: 50%; left: 50%;
    width: 8%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, #fff 0%, rgba(0, 229, 255, 0.85) 50%, rgba(0, 229, 255, 0) 100%);
    box-shadow: 0 0 18px #fff, 0 0 36px rgba(0, 229, 255, 0.85);
    animation: wh-core-flicker 1.4s ease-in-out infinite;
    z-index: 6;
  }
  @keyframes wh-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); filter: brightness(1) blur(0.4px); }
    50%      { transform: translate(-50%, -50%) scale(1.08); filter: brightness(1.4) blur(0.2px); }
  }
  @keyframes wh-core-flicker {
    0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    50%      { opacity: 0.78; transform: translate(-50%, -50%) scale(1.18); }
  }
  @media (prefers-reduced-motion: reduce) {
    .wormhole-ring,
    .wormhole-streaks,
    .wormhole-stars,
    .wormhole-swirl,
    .wormhole-throat,
    .wormhole-throat-core,
    .wormhole-glow { animation: none !important; }
    .wormhole-ring { opacity: 0.5; }
  }

  .dossier-feature-split-aside {
    position: sticky;
    top: clamp(1rem, 6vh, 5rem);
    align-self: start;
    display: grid;
    gap: 1.4rem;
    max-width: 360px;
    margin: 0 auto;
  }
  .time-travel-quote {
    position: relative;
    margin: 0;
    padding: 1.6rem 1.4rem 1.2rem;
    border-radius: var(--radius-panel, 14px);
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.10), rgba(124, 58, 237, 0.08)), rgba(6, 6, 16, 0.55);
    border: 1px solid rgba(0, 229, 255, 0.22);
    border-left: 3px solid var(--brand-cyan, #00E5FF);
    overflow: hidden;
    isolation: isolate;
  }
  .time-travel-quote::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(135deg, rgba(0, 229, 255, 0.05) 0 1px, transparent 1px 6px);
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 0;
  }
  .time-travel-quote-mark {
    position: absolute;
    top: 0.2rem;
    right: 0.6rem;
    font-family: var(--font-display, 'Sora', sans-serif);
    font-size: 4rem;
    line-height: 1;
    font-weight: 900;
    color: var(--brand-cyan, #00E5FF);
    opacity: 0.18;
    z-index: 0;
  }
  .time-travel-quote-text {
    position: relative;
    z-index: 1;
    margin: 0;
    font-family: var(--font-display, 'Sora', sans-serif);
    font-size: clamp(1.25rem, 1.8vw, 1.6rem);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.15;
    color: #f4faff;
    text-shadow: 0 0 16px rgba(0, 229, 255, 0.35);
  }
  .time-travel-quote-meta {
    position: relative;
    z-index: 1;
    margin-top: 0.8rem;
    padding-top: 0.7rem;
    border-top: 1px dashed rgba(0, 229, 255, 0.28);
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    color: var(--text-muted, rgba(255, 255, 255, 0.6));
    line-height: 1.5;
  }
  @media (max-width: 880px) {
    .dossier-feature-split--motif-right { grid-template-columns: 1fr; }
    .dossier-feature-motif--inline.dossier-feature-motif--particles { max-width: 280px; min-height: 260px; }
    .dossier-feature-split-aside { position: static; max-width: none; }
  }

  .dossier-feature-split--gondor {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: clamp(1.5rem, 3vw, 2.75rem);
    align-items: start;
    margin-top: 1.25rem;
  }
  .dossier-feature-split--gondor .dossier-feature-split-body {
    display: grid; gap: 1.1rem;
  }
  .dossier-feature-split--gondor .dossier-feature-split-body .dossier-feature-body { margin: 0; max-width: none; }
  .dossier-feature-figure--gondor { margin: 0; max-width: none; }
  .dossier-feature-figure--gondor picture { width: 100%; aspect-ratio: 1 / 1; }
  .dossier-feature-figure--gondor picture img {
    width: 100%; height: 100%; max-height: none; object-fit: cover;
  }
  @media (max-width: 880px) {
    .dossier-feature-split--gondor { grid-template-columns: 1fr; }
    .dossier-feature-figure--gondor picture { aspect-ratio: 4 / 3; }
  }
  .dossier-feature-citations {
    margin: 2rem auto 0;
    max-width: 1100px;
    padding: 1.25rem 1.4rem;
    border: 1px solid var(--feat-soft, rgba(255, 255, 255, 0.08));
    border-radius: var(--radius-soft, 12px);
    background: rgba(6, 6, 16, 0.55);
    backdrop-filter: blur(6px);
  }
  .dossier-feature-citations-title {
    font-family: var(--font-mono);
    font-size: 0.78rem; letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 0 0 0.75rem;
  }
  .dossier-feature-citations-list {
    margin: 0; padding-left: 1.4rem;
    display: grid; gap: 0.55rem;
    font-family: var(--font-mono);
    font-size: 0.78rem; line-height: 1.55;
    color: var(--text-muted);
  }
  .dossier-feature-citations-list li { padding-left: 0.2rem; }
  .dossier-feature-citations-list em { color: var(--text-soft, rgba(255, 255, 255, 0.78)); font-style: italic; }
  .dossier-feature-citations-list a {
    color: var(--brand-cyan, #00E5FF);
    text-decoration: underline;
    text-underline-offset: 2px;
    word-break: break-word;
  }
  .dossier-feature-body sup a {
    color: var(--brand-cyan, #00E5FF);
    text-decoration: none;
    font-weight: 600;
    padding: 0 0.1em;
  }
  .dossier-feature-body sup a:hover { text-decoration: underline; }
  .dossier-feature-shell::after {
    content: ""; display: block; clear: both;
  }
  @media (max-width: 720px) {
    .dossier-feature-figure--float-right {
      float: none;
      width: 300px;
      max-width: 100%;
      margin: 1.5rem auto 0;
    }
    .dossier-feature-figure--float-right picture { justify-content: center; }
  }
  .dossier-feature-caption {
    font-family: var(--font-mono);
    font-size: 0.8rem; letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-top: 0.4rem;
  }

  /* Animated motif for text-only features */
  .dossier-feature-motif {
    margin-top: 2.5rem;
    width: 100%; max-width: 640px;
    aspect-ratio: 16 / 6;
    display: flex; align-items: center; justify-content: center;
    position: relative;
  }
  .dossier-feature-motif svg { width: 100%; height: 100%; }

  /* Ring motif */
  @keyframes ring-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
  @keyframes ring-pulse { 0%,100% { opacity: 0.4; } 50% { opacity: 1; } }
  .motif-ring:not(.motif-ring--one) { transform-origin: center; }
  .motif-ring-inner { transform-origin: center; }
  .motif-ring:not(.motif-ring--one) circle,
  .motif-ring-inner circle { stroke: var(--feat-accent); fill: none; }

  /* The One Ring */
  .dossier-feature-motif--ring {
    margin: 3rem auto 0;
    width: min(420px, 80vw);
    aspect-ratio: 1 / 1;
    max-width: none;
    flex-direction: column;
    gap: 1.25rem;
  }
  @keyframes one-ring-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
  @keyframes one-ring-glow {
    0%, 100% { filter: drop-shadow(0 0 18px rgba(255, 170, 40, 0.45)) drop-shadow(0 0 4px rgba(255, 220, 120, 0.6)); }
    50% { filter: drop-shadow(0 0 36px rgba(255, 140, 20, 0.8)) drop-shadow(0 0 10px rgba(255, 240, 180, 0.9)); }
  }
  @keyframes one-ring-spark {
    0% { transform: rotate(0deg); transform-origin: 160px 160px; }
    100% { transform: rotate(360deg); transform-origin: 160px 160px; }
  }
  .one-ring-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    display: grid;
    place-items: center;
    isolation: isolate;
  }
  .one-ring-ember {
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    background:
      radial-gradient(circle at 50% 50%, rgba(255, 220, 140, 0.35) 0%, rgba(255, 140, 30, 0.25) 30%, rgba(255, 60, 0, 0.18) 55%, transparent 75%);
    filter: blur(18px);
    z-index: 0;
  }
  .one-ring-spin {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: grid;
    place-items: center;
    transform-origin: center;
  }
  .one-ring-img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    max-width: 520px;
    object-fit: contain;
    filter: drop-shadow(0 14px 40px rgba(0, 0, 0, 0.65))
            drop-shadow(0 0 24px rgba(255, 170, 40, 0.25));
  }
  .iron-washer {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    max-width: 520px;
    object-fit: contain;
    filter: drop-shadow(0 14px 40px rgba(0, 0, 0, 0.75))
            drop-shadow(0 0 22px rgba(80, 170, 227, 0.18));
  }
  .one-ring-fire {
    position: absolute;
    inset: 12%;
    border-radius: 50%;
    pointer-events: none;
    z-index: 2;
    background:
      radial-gradient(circle at 30% 40%, rgba(255, 220, 120, 0.55) 0%, transparent 18%),
      radial-gradient(circle at 70% 60%, rgba(255, 140, 30, 0.45) 0%, transparent 22%),
      conic-gradient(from 0deg, rgba(255, 80, 0, 0) 0deg, rgba(255, 200, 60, 0.6) 80deg, rgba(255, 90, 10, 0.7) 140deg, rgba(255, 200, 60, 0.45) 220deg, rgba(255, 80, 0, 0) 360deg);
    mix-blend-mode: screen;
    -webkit-mask: radial-gradient(circle, transparent 40%, #000 52%, #000 60%, transparent 72%);
            mask: radial-gradient(circle, transparent 40%, #000 52%, #000 60%, transparent 72%);
    filter: blur(2px) saturate(1.4);
    opacity: 0.75;
  }
  .one-ring-fire--inner {
    inset: 22%;
    -webkit-mask: radial-gradient(circle, transparent 38%, #000 50%, #000 56%, transparent 68%);
            mask: radial-gradient(circle, transparent 38%, #000 50%, #000 56%, transparent 68%);
    opacity: 0.7;
    filter: blur(1.4px) saturate(1.6);
  }
  .motif-ring-caption {
    font-family: 'Cinzel', 'Cinzel Decorative', serif;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-align: center;
    color: #f4d28a;
    text-transform: uppercase;
    text-shadow:
      0 0 12px rgba(255, 170, 40, 0.45),
      0 0 28px rgba(255, 100, 20, 0.25);
    max-width: 56ch;
    margin: 0 auto;
    line-height: 1.7;
  }
  .one-ring-caption {
    font-family: 'Cinzel Decorative', 'Cinzel', serif;
  }
  @media (prefers-reduced-motion: reduce) {
    .one-ring-spin,
    .one-ring-fire,
    .one-ring-ember { animation: none; }
  }

  /* Dreamcatcher motif */
  .dossier-feature-motif--dreamcatcher {
    margin: 3rem auto 0;
    width: min(360px, 78vw);
    aspect-ratio: 360 / 520;
    max-width: none;
    flex-direction: column;
    overflow: visible;
  }
  .dreamcatcher { width: 100%; height: 100%; overflow: visible; }
  @keyframes dc-hoop-glow {
    0%, 100% { filter: drop-shadow(0 0 12px rgba(205, 234, 255, 0.35)) drop-shadow(0 0 4px rgba(232, 213, 168, 0.5)); }
    50% { filter: drop-shadow(0 0 26px rgba(205, 234, 255, 0.7)) drop-shadow(0 0 10px rgba(232, 213, 168, 0.8)); }
  }
  @keyframes dc-web-pulse {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.02); }
  }
  @keyframes dc-sway-left {
    0%, 100% { transform: rotate(-3deg); }
    50% { transform: rotate(2deg); }
  }
  @keyframes dc-sway-center {
    0%, 100% { transform: rotate(2deg); }
    50% { transform: rotate(-2deg); }
  }
  @keyframes dc-sway-right {
    0%, 100% { transform: rotate(3deg); }
    50% { transform: rotate(-2deg); }
  }
  @keyframes dc-mote-rise {
    0% { transform: translate(0, 0) scale(0.4); opacity: 0; }
    15% { opacity: 1; }
    85% { opacity: 0.9; }
    100% { transform: translate(var(--mote-x), var(--mote-y)) scale(1.2); opacity: 0; }
  }
  .dreamcatcher .dc-hoop-group { transform-origin: 180px 170px; }
  .dreamcatcher .dc-web { transform-origin: 180px 170px; transform-box: fill-box; }
  .dreamcatcher .dc-strand--left { transform-origin: 118px 298px; transform-box: fill-box; }
  .dreamcatcher .dc-strand--center { transform-origin: 180px 300px; transform-box: fill-box; }
  .dreamcatcher .dc-strand--right { transform-origin: 242px 298px; transform-box: fill-box; }
  .dreamcatcher .dc-mote {
    opacity: 0;
    transform-origin: center;
    transform-box: fill-box;
  }
  @media (prefers-reduced-motion: reduce) {
    .dreamcatcher .dc-hoop-group,
    .dreamcatcher .dc-web,
    .dreamcatcher .dc-strand--left,
    .dreamcatcher .dc-strand--center,
    .dreamcatcher .dc-strand--right,
    .dreamcatcher .dc-mote { animation: none; }
  }

  /* Celestial Hallucinations — narrative chapters */
  .celestial-narrative {
    display: flex; flex-direction: column;
    gap: 2.4rem;
  }
  .celestial-narrative .dossier-feature-lede {
    margin: 0;
    font-size: clamp(1.05rem, 1.6vw, 1.18rem);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.92);
    padding: 0 0 1.4rem;
    border-bottom: 1px solid rgba(0, 229, 255, 0.18);
    font-style: italic;
    letter-spacing: 0.005em;
  }
  .dossier-feature-lede--highlight {
    position: relative;
    margin: 1.2rem 0 1.6rem;
    padding: 1.35rem 1.5rem 1.35rem 1.65rem;
    border-radius: 14px;
    background:
      linear-gradient(135deg, rgba(0, 229, 255, 0.08), rgba(124, 58, 237, 0.06) 60%, rgba(255, 23, 68, 0.08));
    border: 1px solid rgba(0, 229, 255, 0.22);
    border-left: 3px solid var(--accent-cyan, #00E5FF);
    box-shadow:
      0 10px 36px rgba(0, 0, 0, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.04);
    font-family: 'Space Grotesk', 'Sora', sans-serif;
    font-size: clamp(1.02rem, 1.4vw + 0.4rem, 1.22rem);
    line-height: 1.55;
    color: #f4faff;
    letter-spacing: 0.005em;
    text-wrap: balance;
  }
  .dossier-feature-lede--highlight::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(120% 80% at 0% 0%, rgba(0, 229, 255, 0.10), transparent 55%);
    z-index: 0;
  }
  .dossier-feature-lede--highlight > * { position: relative; z-index: 1; }
  .lede-mark {
    background: transparent;
    color: inherit;
    padding: 0.05em 0.32em;
    border-radius: 4px;
    font-weight: 700;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    transition: background-color 220ms ease, color 220ms ease, box-shadow 220ms ease;
  }
  .lede-mark--cyan {
    color: var(--accent-cyan, #00E5FF);
    background: linear-gradient(180deg, rgba(0, 229, 255, 0.10), rgba(0, 229, 255, 0.18));
    box-shadow: inset 0 -2px 0 rgba(0, 229, 255, 0.55);
    text-shadow: 0 0 14px rgba(0, 229, 255, 0.35);
  }
  .lede-mark--red {
    color: #ffd6dc;
    background: linear-gradient(180deg, rgba(255, 23, 68, 0.18), rgba(255, 23, 68, 0.28));
    box-shadow: inset 0 -2px 0 rgba(255, 23, 68, 0.65);
    text-shadow: 0 0 14px rgba(255, 23, 68, 0.4);
  }
  .lede-link {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.92em;
    color: #cdf6ff;
    background: rgba(0, 229, 255, 0.08);
    padding: 0.08em 0.45em;
    border-radius: 4px;
    border: 1px solid rgba(0, 229, 255, 0.22);
    word-break: break-all;
  }
  @media (prefers-reduced-motion: no-preference) {
    .lede-mark { animation: lede-pulse 4.2s ease-in-out infinite; }
    .lede-mark--red { animation-delay: 1.4s; }
  }
  @keyframes lede-pulse {
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(1.18); }
  }
  .celestial-chapter {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 1.6rem 2rem;
    align-items: start;
  }
  .celestial-chapter-head {
    grid-column: 1 / -1;
    display: flex; flex-direction: column; gap: 0.3rem;
    margin-bottom: 0.4rem;
  }
  .celestial-chapter-tag {
    font-family: var(--font-mono, "JetBrains Mono", monospace);
    font-size: 0.66rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent-cyan, #00E5FF);
  }
  .celestial-chapter-title {
    margin: 0;
    font-family: var(--font-display, "Sora", sans-serif);
    font-size: clamp(1.3rem, 2.2vw, 1.65rem);
    line-height: 1.15;
    letter-spacing: -0.015em;
    background: linear-gradient(135deg, #fff 0%, var(--accent-cyan, #00E5FF) 70%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .celestial-chapter .dossier-feature-body {
    margin: 0 0 0.8rem;
    grid-column: 1;
  }
  .celestial-chapter .dossier-feature-body + .dossier-feature-body { margin-top: 0; }
  .celestial-orb-frame--inline {
    grid-column: 2;
    grid-row: 2 / span 5;
    margin: 0;
    align-self: start;
    position: sticky;
    top: clamp(1rem, 8vh, 5rem);
  }
  @media (max-width: 720px) {
    .celestial-chapter { grid-template-columns: 1fr; gap: 1rem; }
    .celestial-orb-frame--inline { grid-column: 1; grid-row: auto; position: static; max-width: 100%; }
  }

  /* Celestial Hallucinations — pinky-brain frame */
  .celestial-orb-frame {
    margin: 1.6rem 0 0;
    padding: 0;
    max-width: 420px;
  }
  .celestial-orb-frame img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-panel, 14px);
    box-shadow:
      0 18px 48px rgba(0, 0, 0, 0.55),
      0 0 0 1px rgba(255, 255, 255, 0.08),
      0 0 36px rgba(124, 58, 237, 0.18);
    background: rgba(6, 6, 16, 0.5);
  }
  .celestial-orb-frame figcaption {
    margin-top: 0.7rem;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: var(--text-muted, rgba(255, 255, 255, 0.62));
    line-height: 1.55;
  }
  .middle-finger-inline {
    float: right;
    width: clamp(180px, 32%, 320px);
    margin: 0.4rem 0 1rem 1.4rem;
    padding-top: 2rem;
    shape-outside: margin-box;
  }
  .middle-finger-inline img { width: 100%; height: auto; }
  @media (max-width: 720px) {
    .middle-finger-inline {
      float: none;
      width: 100%;
      max-width: 420px;
      margin: 1.2rem auto;
    }
  }
  .dossier-feature-motif--inline.dossier-feature-motif--orbs {
    position: sticky;
    top: clamp(1rem, 6vh, 5rem);
    align-self: start;
    aspect-ratio: 1 / 1;
    max-width: 360px;
    min-height: 320px;
    margin: 0 auto;
    overflow: hidden;
    background: radial-gradient(circle at 50% 50%, rgba(124, 58, 237, 0.10), transparent 70%);
    border-radius: var(--radius-panel, 14px);
  }
  @media (max-width: 880px) {
    .dossier-feature-motif--inline.dossier-feature-motif--orbs { position: static; max-width: 280px; min-height: 260px; }
  }

  /* Celestial chapters now stack full-width inside shell */
  .dossier-feature-split--celestial-stack {
    display: block;
    margin-top: 0.5rem;
  }
  .dossier-feature-split--celestial-stack > .dossier-feature-split-body {
    display: grid; gap: 1.1rem;
  }
  .dossier-feature-split--celestial-stack .dossier-feature-split-body > .dossier-feature-body {
    margin: 0; max-width: none;
  }

  /* Mountain motif — full-bleed cinematic band (escapes shell, pinned to viewport edges) */
  .dossier-feature-motif--full-bleed.dossier-feature-motif--mountains {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-top: clamp(2rem, 4vw, 3.5rem);
    height: clamp(420px, 56vh, 640px);
    overflow: hidden;
    isolation: isolate;
    box-shadow:
      inset 0 1px 0 rgba(255, 245, 220, 0.06),
      inset 0 -2px 24px rgba(0, 0, 0, 0.55);
  }
  .dossier-feature-motif--full-bleed.dossier-feature-motif--mountains::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 80px;
    background: linear-gradient(180deg, rgba(6, 6, 16, 0.85), transparent);
    z-index: 2; pointer-events: none;
  }
  .dossier-feature-motif--full-bleed.dossier-feature-motif--mountains::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 120px;
    background: linear-gradient(0deg, rgba(6, 6, 16, 0.95), transparent);
    z-index: 2; pointer-events: none;
  }
  .roman-mountains {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
  }
  .roman-mountains .roman-mountains-stars {
    transform-origin: 50% 50%;
    animation: roman-stars-twinkle 6.5s ease-in-out infinite;
  }
  .roman-mountains .roman-mountains-far {
    transform-box: fill-box;
    animation: roman-mtn-drift-far 22s ease-in-out infinite alternate;
  }
  .roman-mountains .roman-mountains-mid {
    transform-box: fill-box;
    animation: roman-mtn-drift-mid 18s ease-in-out infinite alternate-reverse;
  }
  .roman-mountains-quote {
    position: absolute;
    inset: auto 0 clamp(2rem, 8vh, 4.5rem) 0;
    z-index: 3;
    margin: 0;
    padding: 0 clamp(1rem, 4vw, 2rem);
    text-align: center;
    color: #f4ecd6;
    text-shadow:
      0 1px 14px rgba(0, 0, 0, 0.9),
      0 0 32px rgba(0, 0, 0, 0.7);
    animation: roman-quote-rise 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.6s both;
  }
  .roman-mountains-quote p {
    margin: 0 0 0.75rem;
    font-family: 'Cormorant Garamond', 'Times New Roman', serif;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.5rem, 3.2vw, 2.6rem);
    line-height: 1.25;
    letter-spacing: 0.005em;
    text-wrap: balance;
  }
  .roman-mountains-quote cite {
    display: block;
    font-family: 'Cormorant Garamond', 'Times New Roman', serif;
    font-style: normal;
    font-size: clamp(0.78rem, 1.2vw, 0.95rem);
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: rgba(244, 236, 214, 0.82);
  }
  @keyframes roman-stars-twinkle {
    0%, 100% { opacity: 0.7; }
    50%      { opacity: 1; }
  }
  @keyframes roman-mtn-drift-far {
    from { transform: translateX(0); }
    to   { transform: translateX(-22px); }
  }
  @keyframes roman-mtn-drift-mid {
    from { transform: translateX(0); }
    to   { transform: translateX(18px); }
  }
  @keyframes roman-quote-rise {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @media (max-width: 880px) {
    .dossier-feature-motif--full-bleed.dossier-feature-motif--mountains {
      height: clamp(340px, 50vh, 460px);
      margin-top: 2rem;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .roman-mountains .roman-mountains-stars,
    .roman-mountains .roman-mountains-far,
    .roman-mountains .roman-mountains-mid { animation: none; }
    .roman-mountains-quote { animation: none; opacity: 1; transform: none; }
  }

  /* Particle motif */
  @keyframes particle-orbit {
    from { transform: rotate(0deg) translateX(80px) rotate(0deg); }
    to { transform: rotate(360deg) translateX(80px) rotate(-360deg); }
  }
  .motif-particle {
    position: absolute; width: 8px; height: 8px; border-radius: 50%;
    background: var(--feat-accent); box-shadow: 0 0 16px var(--feat-accent);
    top: 50%; left: 50%; margin: -4px;
    animation: particle-orbit 6s linear infinite;
  }
  .motif-particle:nth-child(2) { animation-duration: 9s; animation-delay: -1s; opacity: 0.7; }
  .motif-particle:nth-child(3) { animation-duration: 12s; animation-delay: -3s; opacity: 0.5; }
  .motif-particle:nth-child(4) { animation-duration: 7s; animation-delay: -2s; opacity: 0.8; }

  /* Flicker motif (for 666) */
  @keyframes flicker { 0%,18%,22%,25%,53%,57%,100% { opacity: 1; text-shadow: 0 0 12px var(--feat-accent), 0 0 24px var(--feat-accent); } 20%,24%,55% { opacity: 0.4; text-shadow: none; } }
  .motif-glyph {
    font-family: var(--font-display);
    font-size: clamp(4rem, 12vw, 8rem);
    color: var(--feat-accent);
    letter-spacing: 0.15em;
    animation: flicker 3.5s infinite;
  }

  /* Drift motif (dreams/celestial) */
  @keyframes drift-up { from { transform: translateY(20px); opacity: 0; } 50% { opacity: 0.8; } to { transform: translateY(-80px); opacity: 0; } }
  .motif-orb {
    position: absolute; width: 12px; height: 12px; border-radius: 50%;
    background: var(--feat-accent);
    filter: blur(2px);
    animation: drift-up 4s ease-out infinite;
  }
  .motif-orb:nth-child(1) { left: 10%; animation-delay: 0s; }
  .motif-orb:nth-child(2) { left: 30%; animation-delay: 0.8s; }
  .motif-orb:nth-child(3) { left: 50%; animation-delay: 1.6s; }
  .motif-orb:nth-child(4) { left: 70%; animation-delay: 2.4s; }
  .motif-orb:nth-child(5) { left: 90%; animation-delay: 3.2s; }

  /* Crystal motif */
  @keyframes crystal-float { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-12px) rotate(8deg); } }
  .motif-crystal { animation: crystal-float 5s ease-in-out infinite; transform-origin: center; width: 60px; height: 80px; margin: 0 1.2rem; }
  .motif-crystal:nth-child(2) { animation-delay: -1.5s; animation-duration: 6.5s; }
  .motif-crystal:nth-child(3) { animation-delay: -3s; animation-duration: 4.5s; }
  .motif-crystal polygon { fill: var(--feat-soft); stroke: var(--feat-accent); stroke-width: 1.5; }

  @media (max-width: 720px) {
    .dossier-feature { padding-block: 3rem; }
    .dossier-feature-media-row { grid-template-columns: 1fr; }
  }

  @media (prefers-reduced-motion: reduce) {
    .dossier-feature-bg::before,
    .dossier-feature-bg::after,
    .motif-ring,
    .motif-ring-inner,
    .motif-particle,
    .motif-glyph,
    .motif-orb,
    .motif-crystal { animation: none; }
  }

  .dossier-card {
    position: relative;
    padding: 1.6rem 2rem 1.6rem 3rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-panel);
    background: var(--bg-panel);
    box-shadow: var(--shadow);
    opacity: 1;
    transform: translateX(0) rotate(0deg);
    transition: opacity 0.6s ease, transform 0.6s ease, border-color 0.4s, box-shadow 0.4s;
  }
  @media (prefers-reduced-motion: no-preference) {
    .dossier-card {
      opacity: 0;
    }
    .dossier-card.from-left {
      transform: translateX(-80px) rotate(-1.5deg);
    }
    .dossier-card.from-right {
      transform: translateX(80px) rotate(1.5deg);
    }
    .dossier-card.is-visible {
      opacity: 1;
      transform: translateX(0) rotate(0deg);
    }
  }
  .dossier-card.is-visible:hover {
    border-color: rgba(255, 23, 68, 0.25);
    box-shadow: 0 0 50px rgba(255, 23, 68, 0.08), 0 20px 60px rgba(0, 0, 0, 0.4);
    transform: translateY(-3px);
  }
  .dossier-card::before {
    content: "";
    position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    border-radius: 3px 0 0 3px;
    transition: box-shadow 0.4s;
  }
  .dossier-card[data-severity="5"]::before { background: var(--accent-red); box-shadow: 0 0 12px rgba(255, 23, 68, 0.4); }
  .dossier-card[data-severity="4"]::before { background: var(--accent-purple); }
  .dossier-card[data-severity="3"]::before { background: var(--accent-cyan); }
  .dossier-card[data-severity="2"]::before { background: var(--accent-green); }
  .dossier-card.is-visible:hover[data-severity="5"]::before { box-shadow: 0 0 24px rgba(255, 23, 68, 0.6); }
  .dossier-card.is-visible:hover[data-severity="4"]::before { box-shadow: 0 0 20px rgba(124, 58, 237, 0.5); }
  .dossier-card.is-visible:hover[data-severity="3"]::before { box-shadow: 0 0 20px rgba(0, 229, 255, 0.4); }
  .dossier-card.is-visible:hover[data-severity="2"]::before { box-shadow: 0 0 20px rgba(122, 255, 174, 0.4); }

  .dossier-label {
    display: inline-block; padding: 0.15rem 0.5rem;
    border: 1px solid var(--accent-red);
    border-radius: var(--radius-button);
    font-size: 0.65rem; letter-spacing: 0.14em;
    text-transform: uppercase; color: var(--accent-red);
    font-family: var(--font-mono);
  }
  .dossier-title {
    margin-top: 0.5rem;
    font-family: var(--font-display);
    font-size: clamp(1.1rem, 1.8vw, 1.5rem);
    line-height: 1.1;
  }
  .dossier-body {
    margin-top: 0.5rem; color: var(--text-muted);
    font-size: 0.92rem; max-width: 60ch;
  }

  /* MUD Terminal */
  .mud-terminal {
    margin-top: 1rem;
    border: 1px solid rgba(122, 255, 174, 0.15);
    border-radius: 12px;
    overflow: hidden;
    background:
      radial-gradient(ellipse at 50% 0%, rgba(122, 255, 174, 0.03), transparent 60%),
      linear-gradient(180deg, rgba(10, 10, 26, 0.95), rgba(6, 6, 16, 0.98));
    box-shadow:
      0 0 0 1px rgba(122, 255, 174, 0.05),
      0 4px 30px rgba(0, 0, 0, 0.5),
      0 0 60px rgba(122, 255, 174, 0.03),
      inset 0 1px 0 rgba(122, 255, 174, 0.06);
  }

  .mud-terminal-chrome {
    display: flex; align-items: center; gap: 0.8rem;
    padding: 0.6rem 1rem;
    background: linear-gradient(180deg, rgba(122, 255, 174, 0.06), rgba(122, 255, 174, 0.02));
    border-bottom: 1px solid rgba(122, 255, 174, 0.1);
  }
  .mud-chrome-dots { display: flex; gap: 6px; flex-shrink: 0; }
  .mud-dot {
    width: 10px; height: 10px; border-radius: 50%;
    display: inline-block;
  }
  .mud-dot-red { background: #ff5f56; box-shadow: 0 0 4px rgba(255, 95, 86, 0.3); }
  .mud-dot-yellow { background: #ffbd2e; box-shadow: 0 0 4px rgba(255, 189, 46, 0.3); }
  .mud-dot-green { background: #27c93f; box-shadow: 0 0 4px rgba(39, 201, 63, 0.3); }

  .mud-chrome-title {
    display: flex; align-items: center; gap: 0.4rem;
    flex: 1; min-width: 0;
    font-family: var(--font-mono); font-size: 0.72rem;
    color: rgba(122, 255, 174, 0.7); letter-spacing: 0.04em;
  }
  .mud-chrome-title svg { color: rgba(122, 255, 174, 0.4); flex-shrink: 0; }

  .mud-chrome-status {
    display: flex; align-items: center; gap: 0.55rem; flex-shrink: 0;
  }
  .mud-reconnect-btn {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.25rem 0.55rem;
    font-family: var(--font-mono);
    font-size: 0.6rem; letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #c8ffd4;
    background: rgba(122, 255, 174, 0.06);
    border: 1px solid rgba(122, 255, 174, 0.35);
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  }
  .mud-reconnect-btn:hover,
  .mud-reconnect-btn:focus-visible {
    background: rgba(122, 255, 174, 0.18);
    border-color: rgba(122, 255, 174, 0.7);
    color: #ffffff;
    box-shadow: 0 0 12px rgba(122, 255, 174, 0.35);
    outline: none;
  }
  .mud-reconnect-btn:active { transform: scale(0.97); }
  .mud-reconnect-btn svg { display: block; }
  @media (max-width: 540px) {
    .mud-reconnect-btn span { display: none; }
    .mud-reconnect-btn { padding: 0.3rem 0.4rem; }
  }
  .mud-status-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transition: background 0.3s ease, box-shadow 0.3s ease;
  }
  .mud-dot-pulse {
    background: #ffd740;
    box-shadow: 0 0 6px rgba(255, 215, 64, 0.4);
    animation: mudPulse 1.5s ease-in-out infinite;
  }
  .mud-dot-live {
    background: #27c93f;
    box-shadow: 0 0 8px rgba(39, 201, 63, 0.5);
  }
  .mud-dot-dead {
    background: #ff5f56;
    box-shadow: 0 0 6px rgba(255, 95, 86, 0.3);
  }
  @keyframes mudPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
  }

  .mud-terminal-status {
    font-family: var(--font-mono); font-size: 0.62rem;
    color: var(--text-muted); letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .mud-xterm {
    padding: 0.6rem 0.8rem;
    min-height: 450px;
    position: relative;
    cursor: text;
  }
  /* Force xterm helper textarea to be reachable for focus despite overflow:clip on ancestors */
  .mud-xterm .xterm-helper-textarea {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    z-index: -1 !important;
    pointer-events: none;
  }
  .mud-xterm::before {
    content: "";
    position: absolute; inset: 0;
    background: repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,
      rgba(122, 255, 174, 0.008) 2px,
      rgba(122, 255, 174, 0.008) 4px
    );
    pointer-events: none;
    z-index: 1;
  }
  .mud-xterm .xterm-viewport { overflow-y: auto !important; }
  .mud-xterm .xterm-screen { z-index: 2; position: relative; }

  .mud-terminal-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.5rem 1rem;
    border-top: 1px solid rgba(122, 255, 174, 0.08);
    background: rgba(122, 255, 174, 0.02);
    flex-wrap: wrap; gap: 0.3rem;
  }
  .mud-footer-hint, .mud-footer-fallback {
    font-family: var(--font-mono); font-size: 0.65rem;
    color: var(--text-muted); letter-spacing: 0.03em;
  }
  .mud-footer-hint code, .mud-footer-fallback code {
    background: rgba(122, 255, 174, 0.08);
    padding: 0.1rem 0.4rem; border-radius: 4px;
    color: var(--accent-green); font-size: 0.62rem;
  }

  /* Redacted text effect */
  .redacted {
    position: relative;
    background: var(--accent-red);
    color: var(--accent-red);
    padding: 0 0.3rem;
    border-radius: 2px;
    cursor: pointer;
    transition: background 0.3s, color 0.3s;
    user-select: none;
  }
  .redacted:hover, .redacted:focus {
    background: transparent;
    color: var(--accent-red);
    text-shadow: 0 0 8px rgba(255, 23, 68, 0.5);
  }

  /* Emo Duck */
  .emo-duck {
    position: absolute;
    width: 80px; height: 80px;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s ease;
    filter: drop-shadow(0 0 12px rgba(255, 23, 68, 0.3));
    pointer-events: none;
  }
  .emo-duck.peek-left {
    left: -40px;
    transform: translateX(-30px) rotate(-8deg);
  }
  .emo-duck.peek-right {
    right: -40px;
    transform: translateX(30px) rotate(8deg) scaleX(-1);
  }
  .emo-duck.is-peeking {
    opacity: 1;
    transform: translateX(0) rotate(0deg);
  }
  .emo-duck.peek-right.is-peeking {
    transform: translateX(0) rotate(0deg) scaleX(-1);
  }
  .emo-duck-body {
    fill: #1a1a2e;
    stroke: var(--accent-red);
    stroke-width: 1.5;
  }
  .emo-duck-hair { fill: #0d0d0d; }
  .emo-duck-eye { fill: var(--accent-red); }
  .emo-duck-tear {
    fill: var(--accent-cyan);
    opacity: 0.7;
  }
  .emo-duck-beak { fill: var(--accent-orange); }

  .duck-row {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
    min-height: 100px;
  }
  .duck-row .emo-duck {
    position: relative;
    left: auto; right: auto;
    opacity: 0;
  }
  .duck-row .emo-duck.is-peeking {
    animation: duck-waddle 2s ease-in-out infinite;
  }

  /* Floating orbs — narrative-driven ambient particles */
  .orb-canvas {
    position: fixed; inset: 0; z-index: 0;
    pointer-events: none;
  }

  /* Scroll-reveal sections */
  .reveal-section {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  }
  @media (prefers-reduced-motion: no-preference) {
    html.js-reveal-active .reveal-section:not(.is-revealed):not(:target) {
      opacity: 0;
      transform: translateY(40px);
    }
    .reveal-section.is-revealed,
    .reveal-section:target {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Section dividers — glowing separator lines */
  .section-divider {
    width: var(--container); margin: 3.5rem auto 2.5rem;
    height: 1px; border: none;
    background: linear-gradient(90deg,
      transparent,
      rgba(255, 23, 68, 0.4) 20%,
      rgba(124, 58, 237, 0.5) 50%,
      rgba(122, 255, 174, 0.4) 80%,
      transparent
    );
    position: relative; z-index: 1;
  }
  .section-divider::before {
    content: "";
    position: absolute; left: 50%; top: 50%;
    width: 6px; height: 6px;
    transform: translate(-50%, -50%);
    background: var(--accent-purple);
    border-radius: 50%;
    box-shadow: 0 0 12px rgba(124, 58, 237, 0.6);
  }
  .section-divider::after {
    content: "";
    position: absolute; left: 50%; top: 50%;
    width: 280px; height: 24px;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse, rgba(124, 58, 237, 0.3), transparent 70%);
    filter: blur(10px);
  }

  /* Gradient text for emphasis */
  .gradient-text {
    background: linear-gradient(135deg, var(--accent-red), var(--accent-purple), var(--accent-cyan));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .gradient-text-alt {
    background: linear-gradient(135deg, var(--accent-cyan), var(--accent-green));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  /* Hero waveform canvas */
  .hero-waveform {
    position: absolute; inset: 0; z-index: 0;
    opacity: 0.6;
  }
  .hero-stage { position: relative; }

  /* Sensor-specific card accents */
  .status-card-ef {
    border-color: rgba(124, 58, 237, 0.2);
  }
  .status-card-ef:hover {
    border-color: rgba(124, 58, 237, 0.4);
    box-shadow: var(--glow-purple), var(--shadow);
  }
  .status-card-rf {
    border-color: rgba(0, 229, 255, 0.15);
  }
  .status-card-rf:hover {
    border-color: rgba(0, 229, 255, 0.3);
    box-shadow: 0 0 30px rgba(0, 229, 255, 0.12), var(--shadow);
  }

  /* Code blocks */
  pre {
    overflow-x: auto; margin-top: 0.8rem;
    padding: 0.9rem; border-radius: 14px;
    border: 1px solid var(--line-green);
    background: rgba(6, 6, 16, 0.85);
    color: var(--accent-green);
    white-space: pre-wrap; word-break: break-word;
    font-size: 0.88rem;
  }

  /* ── Docs-specific styles ── */

  .docs-layout { padding-top: 1rem; }

  .docs-hero {
    background:
      radial-gradient(ellipse at 30% 20%, rgba(255, 23, 68, 0.08), transparent 50%),
      radial-gradient(ellipse at 70% 80%, rgba(124, 58, 237, 0.06), transparent 40%),
      var(--bg-panel);
    border-color: rgba(255, 23, 68, 0.15);
  }
  .docs-hero h1 {
    margin-top: 0.7rem;
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1.05; letter-spacing: -0.03em;
    text-wrap: balance;
  }

  .docs-base-url {
    margin-top: 1.4rem;
  }
  .docs-url-block {
    font-size: 1.1rem;
    padding: 1rem 1.2rem;
    border-color: rgba(0, 229, 255, 0.2);
    background: rgba(0, 229, 255, 0.04);
    color: var(--accent-cyan);
  }

  .docs-sensor-grid {
    display: flex; flex-wrap: wrap; gap: 0.6rem;
    margin-top: 1rem;
  }
  .docs-sensor-chip {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-soft);
    background: rgba(6, 6, 16, 0.6);
    font-size: 0.82rem;
    transition: border-color 0.3s, box-shadow 0.3s;
  }
  .docs-sensor-chip:hover {
    border-color: rgba(255, 255, 255, 0.15);
  }
  .docs-sensor-dot {
    width: 8px; height: 8px; border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
  }
  .docs-sensor-emf .docs-sensor-dot { background: var(--accent-red); }
  .docs-sensor-ef .docs-sensor-dot { background: var(--accent-purple); }
  .docs-sensor-rf .docs-sensor-dot { background: var(--accent-cyan); }
  .docs-sensor-emf:hover { border-color: rgba(255, 23, 68, 0.3); box-shadow: var(--glow-red); }
  .docs-sensor-ef:hover { border-color: rgba(124, 58, 237, 0.3); box-shadow: var(--glow-purple); }
  .docs-sensor-rf:hover { border-color: rgba(0, 229, 255, 0.3); box-shadow: 0 0 30px rgba(0, 229, 255, 0.12); }
  .docs-sensor-label {
    font-family: var(--font-mono); font-weight: 700;
    font-size: 0.72rem; letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .docs-sensor-emf .docs-sensor-label { color: var(--accent-red); }
  .docs-sensor-ef .docs-sensor-label { color: var(--accent-purple); }
  .docs-sensor-rf .docs-sensor-label { color: var(--accent-cyan); }
  .docs-sensor-chip code {
    color: var(--text-muted); font-size: 0.78rem;
  }

  .docs-grid {
    display: grid; gap: 1.2rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 480px), 1fr));
  }

  /* Endpoint cards */
  .endpoint-card {
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.2s;
  }
  .endpoint-card:hover {
    border-color: rgba(255, 23, 68, 0.25);
    box-shadow: 0 0 40px rgba(255, 23, 68, 0.08), var(--shadow);
    transform: translateY(-2px);
  }
  .endpoint-header {
    display: flex; align-items: center; gap: 0.6rem;
    flex-wrap: wrap;
  }
  .endpoint-header h2 {
    font-family: var(--font-mono);
    font-size: clamp(0.85rem, 1.3vw, 1.05rem);
    line-height: 1.2;
    color: var(--text);
    margin: 0;
    word-break: break-all;
  }
  .endpoint-method {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
    font-family: var(--font-mono); font-size: 0.65rem;
    font-weight: 700; letter-spacing: 0.08em;
    text-transform: uppercase;
    flex-shrink: 0;
  }
  .endpoint-method-get {
    color: var(--accent-green);
    background: rgba(122, 255, 174, 0.1);
    border: 1px solid rgba(122, 255, 174, 0.2);
  }
  .endpoint-method-post {
    color: var(--accent-purple);
    background: rgba(124, 58, 237, 0.1);
    border: 1px solid rgba(124, 58, 237, 0.2);
  }
  .endpoint-card p {
    margin-top: 0.5rem; color: var(--text-muted);
    font-size: 0.9rem;
  }
  .endpoint-card pre {
    margin-top: 0.6rem;
    font-size: 0.78rem;
    max-height: 200px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(122, 255, 174, 0.2) transparent;
  }

  .endpoint-params {
    display: flex; flex-direction: column; gap: 0.25rem;
    margin-top: 0.6rem;
  }
  .endpoint-param {
    font-size: 0.8rem; color: var(--text-muted);
  }
  .endpoint-param code {
    color: var(--accent-cyan);
    background: rgba(0, 229, 255, 0.06);
    padding: 0.1rem 0.3rem; border-radius: 4px;
    font-size: 0.75rem;
  }

  /* Docs examples */
  .docs-examples {
    display: grid; gap: 1rem;
    margin-top: 1.2rem;
  }
  .docs-example {
    position: relative;
  }
  .docs-example-label {
    position: absolute; top: 0.5rem; right: 0.75rem;
    font-family: var(--font-mono); font-size: 0.62rem;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--text-muted); opacity: 0.6;
    z-index: 1;
  }
  .docs-example pre {
    margin-top: 0;
    padding-top: 1.6rem;
  }

  /* Docs hero stats */
  .docs-hero-stats {
    list-style: none;
    margin: 1.6rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
  }
  .docs-hero-stats li {
    display: flex; flex-direction: column; gap: 0.15rem;
    padding: 0.85rem 1rem;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
  }
  .docs-hero-stats strong {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.4vw, 1.9rem);
    font-weight: 700;
    color: var(--accent-cyan);
    letter-spacing: -0.01em;
    line-height: 1;
  }
  .docs-hero-stats span {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
  }

  /* Section heads */
  .docs-section-head {
    margin: 0 0 1.4rem;
    padding: 0 0.25rem;
  }
  .docs-section-head h2 {
    margin: 0.25rem 0 0.4rem;
    font-size: clamp(1.4rem, 2.4vw, 2rem);
    letter-spacing: -0.01em;
  }
  .docs-section-head .lede { margin-top: 0.1rem; max-width: 60ch; font-size: 0.95rem; }

  /* Use case grid */
  .docs-usecase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
    margin-bottom: 0.5rem;
  }
  .usecase-card {
    display: flex; flex-direction: column; gap: 0.5rem;
    padding: 1.4rem !important;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  }
  .usecase-card:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 229, 255, 0.25);
    box-shadow: 0 14px 40px -20px rgba(0, 229, 255, 0.4);
  }
  .usecase-icon {
    font-size: 1.6rem;
    line-height: 1;
    margin-bottom: 0.2rem;
    filter: saturate(0.85);
  }
  .usecase-card h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.05rem;
    letter-spacing: -0.005em;
    color: var(--text);
  }
  .usecase-card p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.55;
  }
  .usecase-card p code {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    background: rgba(0, 229, 255, 0.08);
    color: var(--accent-cyan);
    padding: 0.05rem 0.35rem;
    border-radius: 4px;
  }
  .usecase-link {
    margin-top: auto;
    padding-top: 0.5rem;
    color: var(--accent-cyan);
    font-family: var(--font-mono);
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-decoration: none;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
  }
  .usecase-link:hover { color: #5cf3ff; }

  /* Endpoint family map */
  .docs-family-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
  }
  .family-card {
    display: flex; flex-direction: column; gap: 0.85rem;
    padding: 1.5rem !important;
    position: relative;
    overflow: hidden;
    transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  }
  .family-card::before {
    content: "";
    position: absolute; inset: 0 0 auto 0; height: 2px;
    background: linear-gradient(90deg, transparent, currentColor, transparent);
    opacity: 0.6;
  }
  .family-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 50px -25px rgba(255, 255, 255, 0.12);
  }
  .family-card-cyan { color: var(--accent-cyan); }
  .family-card-violet { color: var(--accent-purple); }
  .family-card-red { color: var(--accent-red); }
  .family-card-cyan:hover { border-color: rgba(0, 229, 255, 0.3); }
  .family-card-violet:hover { border-color: rgba(124, 58, 237, 0.35); }
  .family-card-red:hover { border-color: rgba(255, 23, 68, 0.3); }
  .family-card header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.5rem;
  }
  .family-tag {
    display: inline-flex;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: currentColor;
  }
  .family-count {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-muted);
    letter-spacing: 0.04em;
  }
  .family-card h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.15rem;
    letter-spacing: -0.005em;
    color: var(--text);
  }
  .family-paths {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.4rem;
  }
  .family-paths li {
    display: flex; align-items: center; gap: 0.6rem;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--text-muted);
    padding: 0.35rem 0.6rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    transition: border-color 0.15s ease, background 0.15s ease;
  }
  .family-paths li:hover {
    border-color: rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
  }
  .family-paths code {
    color: var(--text);
    font-family: var(--font-mono);
    background: transparent;
    padding: 0;
  }
  .m {
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 38px;
    padding: 0.18rem 0.45rem;
    border-radius: 5px;
    font-family: var(--font-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
  }
  .m-get { background: rgba(0, 229, 255, 0.14); color: var(--accent-cyan); }
  .m-post { background: rgba(124, 58, 237, 0.18); color: #b794f4; }
  .family-cta {
    margin-top: auto;
    color: currentColor;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    letter-spacing: 0.04em;
    text-decoration: none;
    padding-top: 0.4rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
  }
  .family-cta:hover { filter: brightness(1.2); }

  /* Closing CTA */
  .docs-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 2rem;
    background:
      radial-gradient(600px 200px at 0% 0%, rgba(0, 229, 255, 0.10), transparent 60%),
      radial-gradient(600px 200px at 100% 100%, rgba(124, 58, 237, 0.10), transparent 60%),
      var(--panel-bg, rgba(255,255,255,0.02));
  }
  .docs-cta h2 { margin: 0.2rem 0 0.4rem; }
  .docs-cta p { margin: 0; color: var(--text-muted); max-width: 50ch; }
  .docs-cta .button-primary { white-space: nowrap; }

  @media (max-width: 720px) {
    .docs-hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .docs-cta { flex-direction: column; align-items: flex-start; }
  }

  /* Telemetry strip */
  .telemetry-strip {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
    display: flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.4rem 1rem; padding-right: 5rem;
    background: rgba(6, 6, 16, 0.92);
    border-top: 1px solid rgba(255, 23, 68, 0.15);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    font-family: var(--font-mono); font-size: 0.72rem;
    letter-spacing: 0.04em;
  }
  .telemetry-item { display: flex; align-items: center; gap: 0.3rem; white-space: nowrap; }
  .telemetry-label { color: var(--text-muted); text-transform: uppercase; font-size: 0.62rem; letter-spacing: 0.1em; }
  .telemetry-value { color: var(--accent-red); font-weight: 600; }
  .telemetry-unit { color: var(--text-muted); font-size: 0.6rem; }
  .telemetry-sep { width: 1px; height: 14px; background: rgba(255, 23, 68, 0.15); }
  .telemetry-pulse {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--accent-red);
    animation: pulse 2s ease-in-out infinite;
    margin-left: 0.3rem;
  }

  /* Chat widget — right-side slide-in pane */
  .chat-widget { position: fixed; inset: 0; pointer-events: none; z-index: 200; }
  .chat-toggle {
    position: fixed; bottom: 2rem; right: 1.5rem;
    pointer-events: auto;
    height: 56px;
    padding: 0 1.25rem 0 0.9rem;
    display: inline-flex; align-items: center; gap: 0.55rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent-red), var(--accent-purple));
    color: #fff;
    font-family: var(--font-display);
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    box-shadow: 0 8px 32px rgba(255, 23, 68, 0.32);
    transition: transform 0.2s, box-shadow 0.2s;
    will-change: transform;
  }
  .chat-toggle::after {
    content: ""; position: absolute; inset: -2px;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(255, 23, 68, 0.4), transparent 70%);
    opacity: 0.5; z-index: -1;
  }
  .chat-toggle:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(255, 23, 68, 0.45); }
  .chat-toggle-kbd {
    margin-left: 0.4rem;
    padding: 0.18rem 0.4rem;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.28);
    font-size: 0.62rem;
    letter-spacing: 0.05em;
    border: 1px solid rgba(255, 255, 255, 0.18);
  }
  .chat-toggle-label { white-space: nowrap; }
  .chat-widget.is-open .chat-toggle { transform: scale(0.92) translateX(8px); opacity: 0; pointer-events: none; }

  .chat-backdrop {
    position: fixed; inset: 0;
    background: rgba(2, 2, 8, 0.72);
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s ease;
  }
  .chat-widget.is-open .chat-backdrop { opacity: 1; pointer-events: auto; }

  .chat-panel--pane {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: min(440px, 100vw);
    max-width: 100vw;
    background: linear-gradient(180deg, rgba(10, 10, 22, 0.98) 0%, rgba(6, 6, 16, 0.98) 100%);
    border-left: 1px solid var(--line);
    box-shadow: -24px 0 60px rgba(0, 0, 0, 0.55);
    display: flex; flex-direction: column;
    transform: translateX(105%) translateZ(0);
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0.24, 1);
    pointer-events: auto;
    will-change: transform;
    contain: layout style;
  }
  .chat-panel--pane.is-open { transform: translateX(0) translateZ(0); }

  .chat-header {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem;
    padding: 1.25rem 1.35rem 1rem;
    border-bottom: 1px solid var(--line);
  }
  .chat-header-text { flex: 1; min-width: 0; }
  .chat-header-eyebrow {
    display: block;
    font-family: var(--font-display);
    font-size: 0.65rem;
    letter-spacing: 0.22em;
    color: var(--accent-red);
    margin-bottom: 0.35rem;
  }
  .chat-header h3 {
    font-family: var(--font-display);
    font-size: 1.25rem; letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--text);
    margin: 0;
  }
  .chat-instruction {
    margin-top: 0.45rem;
    font-size: 0.78rem; line-height: 1.5;
    color: var(--text-muted);
  }
  .chat-header-controls {
    display: inline-flex; gap: 0.35rem;
    flex-shrink: 0;
  }
  .chat-icon-btn {
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.03);
    color: var(--text-muted);
    cursor: pointer;
    transition: background-color 0.18s, color 0.18s, border-color 0.18s, transform 0.15s;
  }
  .chat-icon-btn:hover { background: rgba(255, 23, 68, 0.08); color: var(--text); border-color: rgba(255, 23, 68, 0.35); }
  .chat-icon-btn[aria-pressed="true"] {
    background: rgba(255, 23, 68, 0.16);
    color: #fff;
    border-color: var(--accent-red);
  }
  .chat-mic-btn.is-recording {
    background: rgba(255, 23, 68, 0.22);
    color: #fff;
    border-color: var(--accent-red);
  }
  .chat-mic-btn.is-recording::after {
    content: ""; position: absolute; inset: -3px;
    border-radius: 12px;
    border: 1px solid rgba(255, 23, 68, 0.6);
    opacity: 0.6;
    animation: chat-mic-ring 1.4s ease-out infinite;
    pointer-events: none;
  }
  .chat-mic-btn { position: relative; }

  .chat-starters {
    display: flex; flex-wrap: wrap; gap: 0.4rem;
    padding: 0.85rem 1.2rem;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.015);
  }
  .chat-starter {
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background-color 0.18s, color 0.18s, border-color 0.18s, transform 0.15s;
  }
  .chat-starter:hover {
    background: rgba(255, 23, 68, 0.08);
    border-color: rgba(255, 23, 68, 0.4);
    color: var(--text);
    transform: translateY(-1px);
  }
  .chat-starters.is-hidden { display: none; }

  .chat-messages {
    flex: 1; overflow-y: auto;
    padding: 1.1rem 1.2rem;
    display: flex; flex-direction: column; gap: 0.7rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 23, 68, 0.25) transparent;
  }
  .chat-message p {
    padding: 0.7rem 0.95rem;
    border-radius: 14px;
    font-size: 0.88rem; line-height: 1.55;
    max-width: 92%;
    margin: 0;
  }
  .chat-assistant p {
    background: rgba(255, 23, 68, 0.08);
    border: 1px solid rgba(255, 23, 68, 0.14);
    align-self: flex-start;
  }
  .chat-user p {
    background: rgba(122, 255, 174, 0.08);
    border: 1px solid rgba(122, 255, 174, 0.14);
    margin-left: auto;
  }
  .chat-typing {
    padding: 0.5rem 1rem;
    font-size: 0.78rem; color: var(--text-muted);
    font-style: italic;
  }

  .chat-attachments {
    padding: 0.55rem 1.2rem;
    display: flex; flex-wrap: wrap; gap: 0.4rem;
    border-top: 1px solid var(--line);
  }
  .chat-attachment-chip {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    font-size: 0.72rem;
    color: var(--text);
    max-width: 220px;
  }
  .chat-attachment-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .chat-attachment-remove {
    width: 18px; height: 18px;
    display: grid; place-items: center;
    border-radius: 50%;
    background: rgba(255, 23, 68, 0.18);
    color: #fff;
    font-size: 0.75rem;
    cursor: pointer;
    flex-shrink: 0;
  }

  .chat-input-area {
    display: flex; align-items: flex-end; gap: 0.5rem;
    padding: 0.7rem 1rem 0.85rem;
    border-top: 1px solid var(--line);
    background: rgba(0, 0, 0, 0.25);
  }
  .chat-input-tools { display: inline-flex; gap: 0.35rem; flex-shrink: 0; align-self: flex-end; padding-bottom: 0.15rem; }
  .chat-input-field {
    flex: 1; min-width: 0; position: relative;
    display: flex; flex-direction: column;
  }
  .chat-input-area textarea {
    width: 100%;
    min-height: 42px; max-height: 200px;
    padding: 0.6rem 3.2rem 0.6rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-soft);
    background: rgba(6, 6, 16, 0.85);
    color: var(--text);
    font-family: inherit;
    font-size: 0.9rem; line-height: 1.4;
    resize: none;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 23, 68, 0.25) transparent;
    transition: border-color 0.18s, box-shadow 0.18s;
  }
  .chat-input-area textarea:focus {
    border-color: var(--accent-red);
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 23, 68, 0.18);
  }
  .chat-input-count {
    position: absolute; right: 0.75rem; bottom: 0.45rem;
    font-size: 0.62rem; letter-spacing: 0.06em;
    color: var(--text-muted);
    pointer-events: none;
    font-variant-numeric: tabular-nums;
  }
  .chat-input-count.is-near { color: var(--accent-amber, #ffb547); }
  .chat-input-count.is-over { color: var(--accent-red); }
  .chat-send-btn {
    width: 44px; height: 44px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--accent-red), var(--accent-purple));
    color: #fff;
    display: grid; place-items: center;
    transition: transform 0.15s, opacity 0.15s;
    flex-shrink: 0;
    cursor: pointer;
  }
  .chat-send-btn:hover:not(:disabled) { transform: scale(1.08); }
  .chat-send-btn:disabled { opacity: 0.35; cursor: not-allowed; }

  .chat-footnote {
    padding: 0.45rem 1.2rem 0.85rem;
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
    text-align: center;
    margin: 0;
    display: flex; align-items: center; justify-content: center; gap: 0.5rem; flex-wrap: wrap;
  }
  .chat-help-link {
    background: none; border: none; color: var(--text-muted);
    font: inherit; letter-spacing: inherit; text-transform: inherit;
    cursor: pointer; padding: 0;
    border-bottom: 1px dotted rgba(255, 255, 255, 0.18);
  }
  .chat-help-link:hover { color: var(--accent-red); border-bottom-color: var(--accent-red); }

  /* Status dot + resize handle + search bar */
  .chat-status-dot {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--accent-green, #7affae);
    margin-right: 0.35rem;
    vertical-align: middle;
    animation: chat-status-pulse 2.6s ease-in-out infinite;
  }
  .chat-status-dot.is-offline { background: var(--accent-red); animation: none; }
  .chat-status-text {
    margin-left: 0.4rem;
    font-size: 0.6rem;
    color: var(--text-muted);
    letter-spacing: 0.12em;
  }
  .chat-resize-handle {
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 6px;
    cursor: ew-resize;
    z-index: 2;
    background: transparent;
    transition: background-color 0.18s;
  }
  .chat-resize-handle:hover, .chat-resize-handle:focus-visible {
    background: linear-gradient(90deg, rgba(255, 23, 68, 0.5), transparent);
    outline: none;
  }
  .chat-resize-handle::after {
    content: ""; position: absolute; left: 1px; top: 50%;
    transform: translateY(-50%);
    width: 2px; height: 32px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
  }
  .chat-search-bar {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.55rem 1.2rem;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.02);
  }
  .chat-search-bar input {
    flex: 1; min-height: 32px;
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-soft);
    background: rgba(6, 6, 16, 0.85);
    color: var(--text);
    font-size: 0.82rem;
  }
  .chat-search-bar input:focus { border-color: var(--accent-red); outline: none; }
  .chat-search-count {
    font-size: 0.65rem; letter-spacing: 0.1em;
    color: var(--text-muted);
    min-width: 32px; text-align: right;
    font-variant-numeric: tabular-nums;
  }

  /* Per-message row, avatar, body, meta */
  .chat-messages-wrap { position: relative; flex: 1; display: flex; flex-direction: column; min-height: 0; }
  .chat-message { display: block; }
  .chat-message.is-hidden { display: none; }
  .chat-msg-row {
    display: flex; align-items: flex-start; gap: 0.55rem;
    max-width: 100%;
  }
  .chat-user .chat-msg-row { flex-direction: row-reverse; }
  .chat-avatar {
    flex-shrink: 0;
    width: 28px; height: 28px;
    display: grid; place-items: center;
    border-radius: 50%;
    font-size: 0.95rem;
    font-family: var(--font-display);
    background: rgba(255, 23, 68, 0.12);
    color: var(--accent-red);
    border: 1px solid rgba(255, 23, 68, 0.3);
    user-select: none;
  }
  .chat-user .chat-avatar {
    background: rgba(122, 255, 174, 0.1);
    color: var(--accent-green, #7affae);
    border-color: rgba(122, 255, 174, 0.3);
  }
  .chat-msg-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
  .chat-msg-text {
    padding: 0.65rem 0.9rem;
    border-radius: 14px;
    font-size: 0.88rem; line-height: 1.55;
    margin: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
  }
  .chat-assistant .chat-msg-text {
    background: rgba(255, 23, 68, 0.08);
    border: 1px solid rgba(255, 23, 68, 0.14);
  }
  .chat-user .chat-msg-text {
    background: rgba(122, 255, 174, 0.08);
    border: 1px solid rgba(122, 255, 174, 0.14);
  }
  .chat-msg-text a { color: var(--accent-cyan, #00e5ff); text-decoration: underline; }
  .chat-msg-text code {
    padding: 0.08em 0.3em;
    background: rgba(0, 0, 0, 0.35);
    border-radius: 4px;
    font-family: var(--font-mono);
    font-size: 0.85em;
  }
  .chat-msg-text pre {
    margin: 0.4rem 0 0;
    padding: 0.6rem 0.75rem;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow-x: auto;
    font-size: 0.78rem;
  }
  .chat-msg-text pre code { background: transparent; padding: 0; font-size: inherit; }
  .chat-msg-meta {
    display: flex; align-items: center; gap: 0.4rem;
    font-size: 0.6rem;
    color: var(--text-muted);
    letter-spacing: 0.08em;
    opacity: 0;
    transition: opacity 0.18s;
  }
  .chat-user .chat-msg-meta { justify-content: flex-end; }
  .chat-message:hover .chat-msg-meta, .chat-msg-meta:focus-within { opacity: 1; }
  .chat-msg-action {
    background: none; border: none;
    color: var(--text-muted); cursor: pointer;
    padding: 0.15rem 0.35rem;
    border-radius: 4px;
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: color 0.18s, background-color 0.18s;
  }
  .chat-msg-action:hover { color: var(--accent-red); background: rgba(255, 23, 68, 0.06); }
  .chat-msg-time { font-variant-numeric: tabular-nums; }
  .chat-msg-latency {
    padding: 0.05rem 0.3rem;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    font-size: 0.55rem;
  }
  .chat-error .chat-msg-text { color: #ff7676; }
  .chat-msg-retry { color: var(--accent-red) !important; border: 1px solid rgba(255, 23, 68, 0.4) !important; }
  .chat-msg-retry:hover { background: rgba(255, 23, 68, 0.12) !important; }
  .chat-streaming .chat-msg-text::after {
    content: "▍"; display: inline-block; margin-left: 0.1em;
    color: var(--accent-cyan, #00e5ff);
    animation: chatCaretBlink 1s steps(2, end) infinite;
  }
  @keyframes chatCaretBlink { 50% { opacity: 0; } }
  .chat-msg-text h4, .chat-msg-text h5, .chat-msg-text h6 { margin: 0.55rem 0 0.25rem; font-size: 0.95rem; color: var(--text); }
  .chat-msg-text ul, .chat-msg-text ol { margin: 0.3rem 0 0.3rem 1.1rem; padding: 0; }
  .chat-msg-text li { margin: 0.1rem 0; }
  .chat-msg-text blockquote {
    margin: 0.35rem 0; padding: 0.15rem 0.6rem;
    border-left: 2px solid var(--accent-cyan, #00e5ff);
    color: var(--text-muted);
  }
  .chat-msg-text em { font-style: italic; opacity: 0.92; }
  .chat-msg-text pre { margin: 0.4rem 0; padding: 0.5rem 0.7rem; background: rgba(0, 0, 0, 0.35); border-radius: 6px; overflow-x: auto; }
  .chat-msg-text pre code { background: none; padding: 0; font-size: 0.78rem; }
  .chat-msg-attachments { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-top: 0.25rem; }
  .chat-msg-attachment-img {
    max-width: 160px; max-height: 100px;
    border-radius: 6px;
    border: 1px solid var(--line);
  }

  .chat-messages {
    flex: 1; overflow-y: auto;
    padding: 1rem 1.2rem;
    display: flex; flex-direction: column; gap: 0.75rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 23, 68, 0.25) transparent;
    overscroll-behavior: contain;
  }

  /* Scroll-to-bottom button */
  .chat-scroll-bottom {
    position: absolute; right: 1rem; bottom: 0.75rem;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(20, 20, 36, 0.95);
    border: 1px solid var(--line);
    color: var(--text);
    display: grid; place-items: center;
    cursor: pointer;
    z-index: 3;
    transition: transform 0.18s, background-color 0.18s, opacity 0.18s;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  }
  .chat-scroll-bottom:hover { background: rgba(255, 23, 68, 0.18); transform: translateY(-2px); }
  .chat-unread-badge {
    position: absolute; top: -6px; right: -6px;
    min-width: 18px; height: 18px;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: var(--accent-red);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    display: grid; place-items: center;
    font-variant-numeric: tabular-nums;
  }

  /* Drop overlay */
  .chat-drop-overlay {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    background: rgba(2, 2, 8, 0.85);
    border: 2px dashed var(--accent-red);
    border-radius: 8px;
    color: var(--accent-red);
    font-family: var(--font-display);
    font-size: 1.1rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    z-index: 5;
    pointer-events: none;
  }
  .chat-widget.is-dragging .chat-drop-overlay { pointer-events: auto; }
  .chat-drop-overlay[hidden],
  .chat-search-bar[hidden],
  .chat-shortcuts[hidden],
  .chat-settings[hidden],
  .chat-attachments[hidden],
  .chat-scroll-bottom[hidden],
  .chat-tts-stop[hidden],
  .chat-stop-stream[hidden] { display: none; }

  .chat-stop-stream {
    color: var(--accent-red);
    border: 1px solid rgba(255, 23, 68, 0.5);
    background: rgba(255, 23, 68, 0.08);
    transition: background-color 0.18s, transform 0.18s;
  }
  .chat-stop-stream:hover { background: rgba(255, 23, 68, 0.18); transform: translateY(-1px); }
  .chat-stop-stream:focus-visible { outline: 2px solid var(--accent-cyan, #00e5ff); outline-offset: 2px; }

  .chat-suggestion-chips {
    display: flex; flex-wrap: wrap; gap: 0.35rem;
    margin-top: 0.55rem;
  }
  .chat-suggestion-chip {
    appearance: none;
    background: rgba(0, 229, 255, 0.06);
    border: 1px solid rgba(0, 229, 255, 0.28);
    color: var(--text);
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background-color 0.18s, border-color 0.18s, transform 0.18s;
  }
  .chat-suggestion-chip:hover { background: rgba(0, 229, 255, 0.14); border-color: rgba(0, 229, 255, 0.55); transform: translateY(-1px); }
  .chat-suggestion-chip:focus-visible { outline: 2px solid var(--accent-cyan, #00e5ff); outline-offset: 2px; }
  .chat-suggestion-chip:active { transform: translateY(0); }

  .chat-msg-feedback {
    display: inline-flex; gap: 0.1rem;
    margin-left: auto;
  }
  .chat-feedback-btn {
    font-size: 0.78rem;
    padding: 0.05rem 0.35rem;
    line-height: 1;
  }
  .chat-feedback-btn.is-active {
    color: var(--accent-cyan, #00e5ff);
    background: rgba(0, 229, 255, 0.1);
  }
  .chat-feedback-btn.is-error { color: #ff7676; }

  .chat-msg-table-wrap {
    margin: 0.5rem 0;
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 6px;
  }
  .chat-msg-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
  }
  .chat-msg-table th,
  .chat-msg-table td {
    text-align: left;
    padding: 0.4rem 0.55rem;
    border-bottom: 1px solid var(--line);
  }
  .chat-msg-table th {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    font-weight: 600;
    letter-spacing: 0.04em;
  }
  .chat-msg-table tr:last-child td { border-bottom: none; }
  .chat-msg-table tr:nth-child(even) td { background: rgba(255, 255, 255, 0.02); }

  .chat-rate-limit .chat-msg-text { color: #ffb74d; }
  .chat-rate-countdown {
    font-variant-numeric: tabular-nums;
    color: var(--accent-cyan, #00e5ff);
  }

  /* Settings drawer */
  .chat-settings {
    position: absolute; inset: 0;
    background: rgba(6, 6, 16, 0.985);
    overflow-y: auto;
    z-index: 4;
    display: flex; flex-direction: column;
    transform: translateY(8px);
    opacity: 0;
    transition: opacity 0.22s, transform 0.22s;
    pointer-events: none;
  }
  .chat-settings.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
  .chat-settings-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.2rem;
    border-bottom: 1px solid var(--line);
  }
  .chat-settings-header h4 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1rem; letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .chat-settings-body {
    padding: 1rem 1.2rem 1.5rem;
    display: flex; flex-direction: column; gap: 1rem;
  }
  .chat-setting-group {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 0.7rem 0.9rem 0.9rem;
    margin: 0;
  }
  .chat-setting-group legend {
    padding: 0 0.4rem;
    font-family: var(--font-display);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--accent-red);
  }
  .chat-setting-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.75rem;
    padding: 0.45rem 0;
    font-size: 0.85rem;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.05);
  }
  .chat-setting-row:last-child { border-bottom: none; }
  .chat-setting-row > span { flex: 1; min-width: 0; color: var(--text); }
  .chat-setting-row select, .chat-setting-row input[type="range"] {
    flex-shrink: 0;
    max-width: 60%;
  }
  .chat-setting-row select {
    background: rgba(6, 6, 16, 0.85);
    border: 1px solid var(--line);
    color: var(--text);
    padding: 0.3rem 0.5rem;
    border-radius: 6px;
    font-size: 0.82rem;
  }
  .chat-setting-row input[type="checkbox"] {
    appearance: none; -webkit-appearance: none;
    width: 36px; height: 20px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--line);
    position: relative;
    cursor: pointer;
    transition: background-color 0.18s;
    flex-shrink: 0;
  }
  .chat-setting-row input[type="checkbox"]::after {
    content: ""; position: absolute;
    top: 1px; left: 1px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--text-muted);
    transition: transform 0.18s, background-color 0.18s;
  }
  .chat-setting-row input[type="checkbox"]:checked {
    background: rgba(255, 23, 68, 0.4);
    border-color: var(--accent-red);
  }
  .chat-setting-row input[type="checkbox"]:checked::after {
    transform: translateX(16px);
    background: #fff;
  }
  .chat-theme-swatches { display: inline-flex; gap: 0.4rem; }
  .chat-theme-swatch {
    width: 22px; height: 22px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.18s;
  }
  .chat-theme-swatch[data-theme="red"] { background: linear-gradient(135deg, #ff1744, #7c3aed); }
  .chat-theme-swatch[data-theme="purple"] { background: linear-gradient(135deg, #7c3aed, #00e5ff); }
  .chat-theme-swatch[data-theme="neutral"] { background: linear-gradient(135deg, #50aae3, #060610); }
  .chat-theme-swatch.is-active { border-color: #fff; transform: scale(1.1); }
  .chat-font-controls {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-size: 0.78rem;
  }
  .chat-font-controls button {
    width: 26px; height: 26px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--line);
    color: var(--text);
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 0.72rem;
  }
  .chat-font-controls button:hover { background: rgba(255, 23, 68, 0.12); border-color: var(--accent-red); }
  #chat-font-val { min-width: 36px; text-align: center; font-variant-numeric: tabular-nums; color: var(--text-muted); }
  .chat-setting-actions { display: flex; flex-direction: column; gap: 0.4rem; }
  .chat-setting-actions button {
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.82rem;
    text-align: left;
    transition: background-color 0.18s, border-color 0.18s;
  }
  .chat-setting-actions button:hover { background: rgba(255, 23, 68, 0.1); border-color: rgba(255, 23, 68, 0.4); }
  .chat-action-danger { color: var(--accent-red) !important; border-color: rgba(255, 23, 68, 0.4) !important; }

  /* Shortcuts overlay */
  .chat-shortcuts {
    position: absolute; inset: 0;
    background: rgba(2, 2, 8, 0.85);
    display: grid; place-items: center;
    z-index: 6;
    padding: 1.5rem;
    opacity: 0;
    transition: opacity 0.22s;
    pointer-events: none;
  }
  .chat-shortcuts.is-open { opacity: 1; pointer-events: auto; }
  .chat-shortcuts-inner {
    background: rgba(12, 12, 24, 0.98);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 1.3rem 1.4rem;
    max-width: 360px;
    width: 100%;
  }
  .chat-shortcuts-inner h4 {
    margin: 0 0 0.8rem;
    font-family: var(--font-display);
    font-size: 0.9rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-red);
  }
  .chat-shortcuts-inner dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.4rem 1rem;
    margin: 0 0 0.9rem;
    font-size: 0.82rem;
  }
  .chat-shortcuts-inner dt {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    padding: 0.15rem 0.4rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--line);
    border-radius: 4px;
    color: var(--text);
    justify-self: start;
    align-self: start;
  }
  .chat-shortcuts-inner dd { margin: 0; color: var(--text-muted); align-self: center; }
  .chat-shortcuts-cmds {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: 0 0 0.9rem;
    line-height: 1.6;
  }
  .chat-shortcuts-cmds code {
    padding: 0.08em 0.4em;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    font-size: 0.85em;
    color: var(--text);
  }
  .chat-shortcuts-inner > button {
    width: 100%;
    padding: 0.6rem;
    background: linear-gradient(135deg, var(--accent-red), var(--accent-purple));
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: 0.8rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }

  /* Theme accents (settings → appearance → theme swatches) */
  .chat-panel--pane[data-theme="purple"] .chat-msg-row .chat-avatar-ai,
  .chat-panel--pane[data-theme="purple"] .chat-header-eyebrow {
    color: var(--accent-purple);
  }
  .chat-panel--pane[data-theme="neutral"] .chat-msg-row .chat-avatar-ai,
  .chat-panel--pane[data-theme="neutral"] .chat-header-eyebrow {
    color: var(--accent-cyan, #00e5ff);
  }

  /* Density + a11y modifiers */
  .chat-panel--pane.is-compact .chat-messages { gap: 0.45rem; padding: 0.75rem 1rem; }
  .chat-panel--pane.is-compact .chat-msg-text { padding: 0.5rem 0.75rem; font-size: 0.84rem; }
  .chat-panel--pane.is-compact .chat-avatar { width: 22px; height: 22px; font-size: 0.78rem; }
  .chat-panel--pane.is-high-contrast .chat-msg-text { border-width: 1.5px; }
  .chat-panel--pane.is-high-contrast .chat-assistant .chat-msg-text { background: rgba(255, 23, 68, 0.16); border-color: rgba(255, 23, 68, 0.5); }
  .chat-panel--pane.is-high-contrast .chat-user .chat-msg-text { background: rgba(122, 255, 174, 0.16); border-color: rgba(122, 255, 174, 0.5); }
  .chat-panel--pane.is-reduce-motion *,
  .chat-panel--pane.is-reduce-motion *::before,
  .chat-panel--pane.is-reduce-motion *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

  body.chat-open { overflow: hidden; }

  @media (prefers-reduced-motion: reduce) {
    .chat-panel--pane, .chat-backdrop, .chat-toggle,
    .chat-status-dot, .chat-mic-btn.is-recording::after, .chat-toggle::after,
    .chat-scroll-bottom, .chat-settings, .chat-shortcuts {
      transition: none !important; animation: none !important;
    }
  }

  /* Heavy off-screen sections — skip render until close to viewport */
  .full-bleed.evidence-section,
  .dossier-feature,
  .transmissions-section,
  .feed-stream {
    content-visibility: auto;
    contain-intrinsic-size: auto 800px;
  }
}

@layer utilities {
  @keyframes float-ghost {
    0%, 100% { transform: translateY(0) scale(1); opacity: 0.8; }
    50% { transform: translateY(-16px) scale(1.02); opacity: 1; }
  }
  @keyframes beckon {
    0%, 100% { transform: rotate(16deg) translateY(0); }
    50% { transform: rotate(10deg) translateY(-7px); }
  }
  @keyframes skitter {
    0%, 100% { transform: rotate(-8deg) translateX(0); }
    50% { transform: rotate(-4deg) translateX(10px); }
  }
  @keyframes pulse-666 {
    0%, 100% { opacity: 0.04; transform: scale(1); }
    50% { opacity: 0.08; transform: scale(1.02); }
  }
  @keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(1.6); }
  }
  @keyframes pulse-chat {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.04); }
  }
  @keyframes chat-toggle-breathe {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.05); }
  }
  @keyframes chat-mic-ring {
    0% { transform: scale(1); opacity: 0.7; }
    100% { transform: scale(1.6); opacity: 0; }
  }
  @keyframes chat-status-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
  }
  @keyframes glitch-1 {
    0% { clip-path: inset(0 0 92% 0); transform: translateX(0); }
    20% { clip-path: inset(5% 0 85% 0); transform: translateX(-2px); }
    40% { clip-path: inset(15% 0 75% 0); transform: translateX(1px); }
    60% { clip-path: inset(40% 0 50% 0); transform: translateX(-1px); }
    80% { clip-path: inset(70% 0 20% 0); transform: translateX(2px); }
    100% { clip-path: inset(90% 0 0 0); transform: translateX(0); }
  }
  @keyframes glitch-2 {
    0% { clip-path: inset(85% 0 0 0); transform: translateX(0); }
    25% { clip-path: inset(75% 0 10% 0); transform: translateX(2px); }
    50% { clip-path: inset(50% 0 35% 0); transform: translateX(-1px); }
    75% { clip-path: inset(20% 0 65% 0); transform: translateX(1px); }
    100% { clip-path: inset(0 0 90% 0); transform: translateX(0); }
  }
  @keyframes scanline-drift {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
  }
  @keyframes duck-waddle {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-6px) rotate(-4deg); }
    50% { transform: translateY(0) rotate(0deg); }
    75% { transform: translateY(-6px) rotate(4deg); }
  }
  @keyframes tear-drip {
    0%, 80% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(8px); }
  }
  /* card-glow removed for 120fps perf — box-shadow animation forces repaints */

  @keyframes orb-drift {
    0% { transform: translate(0, 0) scale(1); opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translate(var(--dx), var(--dy)) scale(var(--s)); opacity: 0; }
  }

  @media (max-width: 960px) {
    .hero, .two-up {
      grid-template-columns: 1fr;
    }
    .status-grid {
      grid-template-columns: repeat(2, 1fr);
    }
    .site-header, .site-footer {
      flex-direction: column; align-items: flex-start;
    }
    .hero-stage { min-height: 380px; }
    .pillars-grid { grid-template-columns: repeat(2, 1fr); }
    .chart-header { flex-direction: column; align-items: flex-start; }
    .chart-range-bar { flex-direction: column; align-items: stretch; }
    .input-compact input { max-width: 100%; }
    .evidence-grid { grid-template-columns: 1fr; }
    .candidate-profile { flex-direction: column; text-align: center; padding: 1rem; }
    .candidate-headshot { width: 120px; height: 120px; }
    .site-footer { align-items: center; }
    .footer-social { flex-wrap: wrap; }
    .map-address { left: 1rem; right: 1rem; transform: none; }
    .map-container { height: 260px; }
    .docs-grid { grid-template-columns: 1fr; }
    .docs-sensor-grid { flex-direction: column; }
    .docs-hero h1 { font-size: clamp(1.6rem, 5vw, 2.4rem); }
    .avatar-spread-wall { grid-template-columns: repeat(3, 1fr); }
    .mission-grid { grid-template-columns: 1fr; }
    .mission-block-hero { grid-column: auto; }
  }

  @media (max-width: 520px) {
    .status-grid { grid-template-columns: 1fr; }
    .pillars-grid { grid-template-columns: 1fr; }
    .endpoint-header { flex-direction: column; align-items: flex-start; gap: 0.3rem; }
    .avatar-spread-wall { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; padding: 0 0.75rem; }
    .spread-photo:hover { transform: scale(1.3) rotate(0deg); }
    .slider-slide img { max-height: 280px; }
  }

  /* ── Legal pages ── */

  .legal-layout { padding-top: 1rem; padding-bottom: 3rem; }

  .legal-hero {
    background:
      radial-gradient(ellipse at 30% 20%, rgba(124, 58, 237, 0.08), transparent 50%),
      radial-gradient(ellipse at 70% 80%, rgba(0, 229, 255, 0.05), transparent 50%);
    border-color: rgba(124, 58, 237, 0.15);
  }
  .legal-hero h1 {
    margin-top: 0.7rem;
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    letter-spacing: -0.02em;
  }
  .legal-updated {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--muted);
    margin-top: 0.5rem;
    letter-spacing: 0.05em;
  }

  .legal-body {
    max-width: 740px;
    margin: 1.5rem auto 0;
    border-color: rgba(255, 255, 255, 0.06);
  }

  .legal-section {
    padding: 1.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  }
  .legal-section:last-child { border-bottom: none; }

  .legal-section h2 {
    font-family: var(--font-display);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-bottom: 0.75rem;
    color: var(--text);
  }
  .legal-section h3 {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    margin: 1rem 0 0.5rem;
    color: rgba(255, 255, 255, 0.85);
  }
  .legal-section p {
    font-size: 0.92rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.6rem;
  }
  .legal-section ul {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0;
  }
  .legal-section li {
    position: relative;
    padding-left: 1.2rem;
    font-size: 0.92rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.4rem;
  }
  .legal-section li::before {
    content: "—";
    position: absolute;
    left: 0;
    color: var(--accent-red);
    font-weight: 700;
  }
  .legal-section a {
    color: var(--accent-cyan);
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 229, 255, 0.2);
    transition: border-color 0.2s ease;
  }
  .legal-section a:hover {
    border-color: var(--accent-cyan);
  }
  .legal-section strong {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
  }

  @media (max-width: 520px) {
    .legal-body { padding: 1rem; }
    .legal-section { padding: 1rem 0; }
  }

  /* ═══ 14 Interactive Features ═══ */

  /* Feature overlay base */
  .feature-overlay {
    position: fixed; inset: 0; z-index: 200;
    background: rgba(6, 6, 16, 0.97);
    display: flex; flex-direction: column;
    opacity: 0; pointer-events: none;
    transition: opacity 0.3s;
    overflow-y: auto;
  }
  .feature-overlay.is-active {
    opacity: 1; pointer-events: auto;
  }
  .feature-overlay-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid rgba(255, 23, 68, 0.15);
    flex-shrink: 0;
  }
  .feature-overlay-title {
    font-family: var(--font-display); font-size: 1.1rem;
    color: var(--accent-red); letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .feature-overlay-close {
    width: 40px; height: 40px;
    font-size: 1.8rem; color: var(--text-muted);
    display: grid; place-items: center;
    border-radius: 50%;
    transition: background 0.2s, color 0.2s;
    cursor: pointer;
  }
  .feature-overlay-close:hover { background: rgba(255, 23, 68, 0.1); color: var(--accent-red); }

  /* Features grid (legacy) */
  .features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
  }
  .feature-card {
    display: flex; flex-direction: column;
    align-items: center; gap: 0.3rem;
    padding: 1rem 0.75rem;
    border: 1px solid rgba(255, 23, 68, 0.12);
    border-radius: var(--radius-panel);
    background: rgba(16, 8, 28, 0.6);
    cursor: pointer;
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.2s;
  }
  .feature-card:hover {
    border-color: rgba(255, 23, 68, 0.3);
    box-shadow: 0 0 30px rgba(255, 23, 68, 0.08);
    transform: translateY(-2px);
  }
  .feature-icon { font-size: 1.8rem; line-height: 1; }
  .feature-name {
    font-family: var(--font-display); font-size: 0.85rem;
    color: var(--text); font-weight: 600;
  }
  .feature-desc {
    font-size: 0.72rem; color: var(--text-muted);
    font-family: var(--font-mono);
  }

  /* Features inline row */
  .features-inline-row {
    display: flex; align-items: center; gap: 1rem;
    flex-wrap: wrap; margin-top: 1rem;
  }
  .feature-inline-btn.is-active {
    background: rgba(255, 23, 68, 0.15);
    border-color: var(--accent-red);
    color: var(--accent-red);
  }
  .feature-inline-panel {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(122, 255, 174, 0.12);
    border-radius: var(--radius-soft);
    background: rgba(6, 6, 16, 0.6);
    font-family: var(--font-mono); font-size: 0.78rem;
    flex-wrap: wrap;
  }
  .feature-inline-label {
    font-weight: 700; color: var(--accent-green);
    text-transform: uppercase; font-size: 0.65rem;
    letter-spacing: 0.1em;
  }
  .detector-meter {
    width: 80px; height: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px; overflow: hidden;
  }
  .detector-meter-fill {
    height: 100%; width: 0;
    background: linear-gradient(90deg, var(--accent-green), var(--accent-red));
    transition: width 0.3s;
    border-radius: 3px;
  }
  .detector-unit { color: var(--text-muted); font-size: 0.65rem; }
  .detector-status { color: var(--text-muted); font-size: 0.65rem; font-style: italic; }

  /* Ghost-sound row inside chart panel */
  .chart-panel-features {
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
  }

  /* Developer quickstart — standalone framed panel */
  .dev-quickstart {
    margin-top: clamp(1.6rem, 3.2vw, 2.6rem);
    background:
      radial-gradient(120% 140% at 100% 0%, rgba(0, 229, 255, 0.06), transparent 55%),
      var(--bg-panel);
  }
  .dev-quickstart::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(135deg, transparent 0%, transparent 70%, rgba(0, 229, 255, 0.05) 100%);
  }
  .dev-quickstart-header {
    display: flex; flex-direction: column; gap: 0.3rem;
    margin-bottom: 1.1rem;
    position: relative;
  }
  .dev-quickstart-header h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.6vw, 2rem);
    color: var(--text-primary, #fff);
    letter-spacing: -0.015em;
    line-height: 1.1;
  }
  .dev-quickstart-note {
    margin: 0;
    color: var(--text-muted, rgba(255,255,255,0.7));
    font-size: 0.92rem;
  }
  .dev-quickstart-note a {
    color: var(--accent-cyan, #00E5FF);
    text-decoration: none;
    transition: opacity 0.2s;
  }
  .dev-quickstart-note a:hover { opacity: 0.78; }
  .dev-quickstart-snippets {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }
  @media (max-width: 720px) {
    .dev-quickstart-snippets { grid-template-columns: 1fr; }
  }
  .dev-snippet {
    margin: 0;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(0, 229, 255, 0.18);
    border-radius: 8px;
    padding: 0.75rem 0.85rem;
    overflow: hidden;
  }
  .dev-snippet figcaption {
    margin: 0 0 0.4rem;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted, rgba(255,255,255,0.6));
  }
  .dev-snippet-tag {
    color: var(--accent-cyan, #00E5FF);
  }
  .dev-snippet pre {
    margin: 0;
    overflow-x: auto;
  }
  .dev-snippet code {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.92);
    white-space: pre;
  }

  /* Seance overlay */
  .seance-canvas {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
  }
  .seance-hud {
    position: relative; z-index: 1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    flex: 1; gap: 1rem;
    text-align: center;
  }
  .seance-candle {
    width: 4px; height: 40px;
    background: linear-gradient(to top, #FF6D00, #FFD740, transparent);
    border-radius: 2px;
    animation: candle-flicker 1.5s ease-in-out infinite alternate;
  }
  @keyframes candle-flicker {
    0% { opacity: 0.6; transform: scaleY(0.85); }
    100% { opacity: 1; transform: scaleY(1.1); }
  }
  .seance-emf-label {
    font-family: var(--font-mono); font-size: 1.5rem;
    color: var(--accent-red);
  }
  .seance-status {
    font-family: var(--font-mono); font-size: 0.85rem;
    color: var(--text-muted); font-style: italic;
  }

  /* Ouija board */
  .ouija-board {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 2rem; position: relative;
  }
  .ouija-letter-grid {
    display: flex; flex-wrap: wrap; gap: 0.5rem;
    justify-content: center; max-width: 600px;
  }
  .ouija-letter {
    width: 36px; height: 36px;
    display: grid; place-items: center;
    border: 1px solid rgba(124, 58, 237, 0.2);
    border-radius: 4px;
    font-family: var(--font-display); font-size: 1rem;
    color: var(--text-muted);
    transition: color 0.2s, border-color 0.2s, box-shadow 0.2s;
  }
  .ouija-planchette {
    position: absolute;
    width: 50px; height: 50px;
    border: 2px solid var(--accent-purple);
    border-radius: 50% 50% 50% 0;
    background: rgba(124, 58, 237, 0.15);
    transition: left 0.4s, top 0.4s;
    pointer-events: none;
  }
  .ouija-output {
    margin-top: 1.5rem;
    font-family: var(--font-display); font-size: 1.5rem;
    color: var(--accent-cyan); letter-spacing: 0.15em;
    min-height: 2em;
  }
  .ouija-hints {
    display: flex; flex-wrap: wrap; gap: 0.5rem;
    margin-top: 1rem;
  }
  .ouija-hints span {
    padding: 0.3rem 0.6rem;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-soft);
    font-family: var(--font-mono); font-size: 0.72rem;
    color: var(--text-muted); letter-spacing: 0.1em;
    transition: color 0.2s, border-color 0.2s;
  }
  .ouija-hints .ouija-match {
    color: var(--accent-cyan);
    border-color: rgba(0, 229, 255, 0.3);
  }

  /* String board */
  .stringboard-canvas {
    flex: 1; width: 100%; min-height: 400px;
  }

  /* Debate arena */
  .debate-topics {
    display: flex; flex-wrap: wrap; gap: 0.5rem;
    padding: 1rem 1.5rem;
  }
  .debate-scoreboard {
    display: flex; gap: 2rem; justify-content: center;
    padding: 0.5rem 1.5rem;
    font-family: var(--font-mono); font-size: 0.85rem;
    color: var(--text-muted);
  }
  .debate-scoreboard strong { color: var(--accent-cyan); font-size: 1.1rem; }
  .debate-transcript {
    flex: 1; overflow-y: auto;
    padding: 1rem 1.5rem;
    display: flex; flex-direction: column; gap: 0.75rem;
    max-height: 50vh;
  }
  .debate-msg {
    padding: 0.8rem 1rem;
    border-radius: var(--radius-soft);
    max-width: 80%;
  }
  .debate-for {
    background: rgba(0, 229, 255, 0.08);
    border: 1px solid rgba(0, 229, 255, 0.15);
    align-self: flex-start;
  }
  .debate-against {
    background: rgba(255, 23, 68, 0.08);
    border: 1px solid rgba(255, 23, 68, 0.15);
    align-self: flex-end;
  }
  .debate-mod {
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(124, 58, 237, 0.15);
    align-self: center; text-align: center;
    font-style: italic;
  }
  .debate-speaker {
    font-family: var(--font-mono); font-size: 0.65rem;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--text-muted);
  }
  .debate-text { margin-top: 0.3rem; font-size: 0.88rem; line-height: 1.5; }
  .debate-vote-row {
    display: flex; gap: 0.75rem; justify-content: center;
    padding: 1rem 1.5rem;
  }

  /* Casino */
  .casino-games {
    display: flex; gap: 2rem; justify-content: center;
    padding: 2rem 1.5rem; flex-wrap: wrap;
  }
  .casino-game {
    text-align: center;
    padding: 1.5rem 2rem;
    border: 1px solid rgba(255, 23, 68, 0.12);
    border-radius: var(--radius-panel);
    background: rgba(16, 8, 28, 0.6);
    min-width: 180px;
  }
  .casino-game h3 {
    font-family: var(--font-display); font-size: 1rem;
    color: var(--accent-cyan); margin-bottom: 0.75rem;
  }
  .casino-rolling { animation: casino-spin 0.6s ease-in-out; }
  .casino-flipping { animation: casino-flip 0.5s ease-in-out; }
  @keyframes casino-spin { 0%,100%{transform:rotate(0)} 50%{transform:rotate(360deg)} }
  @keyframes casino-flip { 0%,100%{transform:scaleY(1)} 50%{transform:scaleY(0)} }
  .casino-streak {
    text-align: center; font-family: var(--font-mono);
    font-size: 0.85rem; color: var(--accent-orange);
    min-height: 1.5em;
  }
  .casino-hot-streak { color: var(--accent-red); animation: pulse 1s infinite; }
  .casino-history {
    max-height: 200px; overflow-y: auto;
    padding: 0 1.5rem 1rem;
    display: flex; flex-direction: column; gap: 0.25rem;
  }
  .casino-history-item {
    font-family: var(--font-mono); font-size: 0.72rem;
    color: var(--text-muted);
    padding: 0.2rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
  }

  /* Campaign HQ text adventure */
  .hq-output {
    flex: 1; overflow-y: auto;
    padding: 1rem 1.5rem;
    font-family: var(--font-mono); font-size: 0.85rem;
    line-height: 1.6;
    max-height: 60vh;
  }
  .hq-line { margin-bottom: 0.3rem; }
  .hq-desc { color: var(--text); }
  .hq-items { color: var(--accent-green); }
  .hq-input-echo { color: var(--accent-cyan); }
  .hq-title { color: var(--accent-red); font-weight: 700; font-size: 1rem; }
  .hq-subtitle { color: var(--text-muted); font-style: italic; }
  .hq-input {
    width: 100%; padding: 0.8rem 1.5rem;
    border: none; border-top: 1px solid rgba(122, 255, 174, 0.15);
    background: rgba(6, 6, 16, 0.9);
    color: var(--accent-green);
    font-family: var(--font-mono); font-size: 0.88rem;
    outline: none;
  }
  .hq-input::placeholder { color: rgba(122, 255, 174, 0.3); }

  /* Card shuffle */
  .shuffle-count {
    text-align: center; padding: 0.5rem;
    font-family: var(--font-mono); font-size: 0.78rem;
    color: var(--text-muted); letter-spacing: 0.1em;
  }
  .shuffle-deck {
    flex: 1; display: flex; align-items: center;
    justify-content: center; padding: 2rem;
  }
  .shuffle-card {
    max-width: 360px; width: 100%;
    padding: 2rem;
    border: 1px solid rgba(255, 23, 68, 0.2);
    border-radius: var(--radius-panel);
    background: var(--bg-panel);
    text-align: center;
  }
  .shuffle-label {
    font-family: var(--font-mono); font-size: 0.65rem;
    color: var(--accent-red); letter-spacing: 0.15em;
  }
  .shuffle-title {
    font-family: var(--font-display); font-size: 1.3rem;
    margin: 0.5rem 0;
  }
  .shuffle-body { color: var(--text-muted); font-size: 0.92rem; line-height: 1.5; }
  .shuffle-severity {
    margin-top: 0.5rem; color: var(--accent-red);
    font-family: var(--font-mono); letter-spacing: 0.2em;
  }
  .shuffle-actions {
    display: flex; gap: 0.75rem; justify-content: center;
    margin-top: 1rem;
  }
  .shuffle-btn {
    padding: 0.6rem 1.5rem;
    border-radius: var(--radius-button);
    font-family: var(--font-mono); font-size: 0.82rem;
    cursor: pointer; transition: transform 0.2s, box-shadow 0.2s;
  }
  .shuffle-doubt {
    border: 1px solid rgba(255, 23, 68, 0.3);
    background: rgba(255, 23, 68, 0.08);
    color: var(--accent-red);
  }
  .shuffle-believe {
    border: 1px solid rgba(0, 229, 255, 0.3);
    background: rgba(0, 229, 255, 0.08);
    color: var(--accent-cyan);
  }
  .shuffle-btn:hover { transform: scale(1.05); }
  .shuffle-result { padding: 1rem; text-align: center; }
  .shuffle-result-card {
    padding: 2rem;
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: var(--radius-panel);
    background: rgba(124, 58, 237, 0.08);
    display: inline-block;
  }
  .shuffle-result-tier {
    font-family: var(--font-display); font-size: 1.5rem;
    color: var(--accent-purple); letter-spacing: 0.15em;
  }
  .shuffle-result-score {
    font-family: var(--font-mono); font-size: 1rem;
    color: var(--text); margin-top: 0.5rem;
  }
  .shuffle-result-desc { color: var(--text-muted); margin-top: 0.5rem; }
  .shuffle-result-share {
    font-family: var(--font-mono); font-size: 0.72rem;
    color: var(--text-muted); margin-top: 1rem;
  }

  /* Glitch art */
  .glitch-controls {
    display: flex; flex-wrap: wrap; gap: 0.75rem;
    align-items: center; padding: 1rem 1.5rem;
  }
  .glitch-upload-label {
    padding: 0.5rem 1rem;
    border: 1px solid rgba(124, 58, 237, 0.3);
    border-radius: var(--radius-button);
    background: rgba(124, 58, 237, 0.08);
    color: var(--accent-purple);
    cursor: pointer; font-size: 0.85rem;
  }
  .glitch-file-input { display: none; }
  .glitch-intensity { width: 120px; accent-color: var(--accent-red); }
  .glitch-canvas {
    display: block; margin: 0 auto;
    max-width: 100%; border: 1px solid rgba(255, 23, 68, 0.12);
  }

  /* Election map */
  .election-map {
    position: relative;
    width: 100%; max-width: 800px;
    height: 400px;
    margin: 1rem auto;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-panel);
    background:
      radial-gradient(ellipse at 50% 50%, rgba(124, 58, 237, 0.06), transparent 60%),
      var(--bg-panel);
  }
  .election-state {
    position: absolute;
    padding: 0.3rem 0.5rem;
    border: 1px solid rgba(255, 23, 68, 0.2);
    border-radius: 4px;
    background: rgba(255, 23, 68, calc(0.05 + var(--ghost-intensity, 0) * 0.3));
    color: var(--text); font-family: var(--font-mono);
    font-size: 0.72rem; font-weight: 700;
    cursor: pointer; transition: transform 0.2s, box-shadow 0.2s;
    transform: translate(-50%, -50%);
  }
  .election-state:hover {
    transform: translate(-50%, -50%) scale(1.3);
    box-shadow: 0 0 20px rgba(255, 23, 68, 0.3);
    z-index: 2;
  }
  .election-info {
    padding: 1rem 1.5rem; text-align: center;
    font-size: 0.88rem; color: var(--text-muted);
  }
  .election-info h4 {
    font-family: var(--font-display); color: var(--text);
    font-size: 1rem; margin-bottom: 0.3rem;
  }
  .election-ghost-level {
    font-family: var(--font-mono); font-size: 0.78rem;
    color: var(--accent-red);
  }

  /* Possession sequence */
  .possession-complete {
    animation: possession-flash 0.5s ease-out;
  }
  @keyframes possession-flash {
    0% { filter: invert(1) hue-rotate(180deg); }
    100% { filter: none; }
  }

  @media (max-width: 520px) {
    .features-grid { grid-template-columns: repeat(2, 1fr); }
    .casino-games { flex-direction: column; align-items: center; }
    .debate-msg { max-width: 95%; }
    .election-map { height: 300px; }
  }

  /* Jungle Habitat split layout: text+videos left 75%, sticky receipt right 25% */
  .dossier-feature-shell--split {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
    gap: clamp(1.25rem, 3vw, 3rem);
    align-items: start;
  }
  .dossier-feature-col--main { min-width: 0; display: flex; flex-direction: column; gap: 1.25rem; }
  .dossier-feature-col--receipt {
    position: sticky;
    top: clamp(1rem, 4vh, 2rem);
    align-self: start;
    display: flex;
    justify-content: center;
  }
  .dossier-feature-media-row--stacked { display: flex; flex-direction: column; gap: 1.25rem; }
  .dossier-feature-media-row--stacked .dossier-feature-figure { width: 100%; max-width: 720px; margin-inline: auto; }
  .dossier-feature-media-row--stacked .dossier-video { width: 100%; height: auto; max-height: none; }
  @media (max-width: 980px) {
    .dossier-feature-shell--split { grid-template-columns: 1fr; }
    .dossier-feature-col--receipt { position: static; }
  }

  /* Pep Boys receipt — Jungle Habitat exhibit */
  .receipt-evidence {
    display: flex; flex-direction: column; align-items: center; gap: 0.85rem;
    margin: 2rem auto 1.5rem;
  }
  .receipt-caption {
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 0.74rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(0, 229, 255, 0.7);
    text-align: center;
    margin: 0;
  }
  .receipt-paper {
    position: relative;
    width: min(360px, 92vw);
    background: #ffffff;
    color: #1a1a1a;
    box-shadow:
      0 30px 60px rgba(0, 0, 0, 0.55),
      0 8px 18px rgba(0, 0, 0, 0.35),
      inset 0 0 0 1px rgba(0, 0, 0, 0.06);
    transform: rotate(-1.4deg);
    transition: transform 0.4s ease;
  }
  .receipt-paper:hover { transform: rotate(0deg) translateY(-3px); }
  .receipt-tear {
    height: 14px;
    background-color: #ffffff;
    -webkit-mask: radial-gradient(circle at 6px 0, transparent 5px, #000 5.5px) 0 0/12px 14px;
            mask: radial-gradient(circle at 6px 0, transparent 5px, #000 5.5px) 0 0/12px 14px;
  }
  .receipt-tear--top {
    -webkit-mask: radial-gradient(circle at 6px 0, transparent 5px, #000 5.5px) 0 0/12px 14px;
            mask: radial-gradient(circle at 6px 0, transparent 5px, #000 5.5px) 0 0/12px 14px;
  }
  .receipt-tear--bottom {
    -webkit-mask: radial-gradient(circle at 6px 14px, transparent 5px, #000 5.5px) 0 0/12px 14px;
            mask: radial-gradient(circle at 6px 14px, transparent 5px, #000 5.5px) 0 0/12px 14px;
  }
  .receipt-inner {
    padding: 1rem 1.25rem 1.1rem;
  }
  .receipt-header { text-align: center; }
  .receipt-logo {
    font-family: 'Space Grotesk', 'Helvetica', sans-serif;
    font-weight: 900;
    font-size: 2rem;
    line-height: 1;
    letter-spacing: -0.02em;
    margin: 0 0 0.3rem;
    display: inline-flex;
    border: 3px solid #c8102e;
    padding: 0.25rem 0.55rem;
    background: #fff8d8;
  }
  .receipt-logo-pep { color: #c8102e; padding-right: 0.18rem; }
  .receipt-logo-boys { color: #1a1a1a; }
  .receipt-tagline {
    margin: 0.1rem 0 0.05rem;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.32em;
    color: #c8102e;
    font-weight: 700;
  }
  .receipt-storeline {
    margin: 0;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 0.66rem;
    letter-spacing: 0.22em;
    color: #1a1a1a;
  }
  .receipt-divider {
    height: 1px;
    background: #1a1a1a;
    margin: 0.65rem 0 0.55rem;
  }
  .receipt-divider--dashed {
    background: transparent;
    border-top: 1px dashed rgba(26, 26, 26, 0.5);
  }
  .receipt-block {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #ffffff;
    font-family: 'JetBrains Mono', 'Courier New', 'Consolas', monospace;
    font-size: 0.72rem;
    line-height: 1.35;
    color: #1a1a1a;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: visible;
  }
  .receipt-items, .receipt-totals { font-size: 0.7rem; }
  .receipt-foot {
    text-align: center;
    font-size: 0.66rem;
    line-height: 1.45;
    letter-spacing: 0.04em;
  }
  .receipt-barcode {
    margin: 0.85rem auto 0.3rem;
    width: 80%;
    height: 44px;
    background: repeating-linear-gradient(
      90deg,
      #1a1a1a 0 2px,
      transparent 2px 4px,
      #1a1a1a 4px 5px,
      transparent 5px 8px,
      #1a1a1a 8px 11px,
      transparent 11px 13px,
      #1a1a1a 13px 14px,
      transparent 14px 17px,
      #1a1a1a 17px 19px,
      transparent 19px 22px
    );
  }
  .receipt-barcode-num {
    margin: 0.1rem 0 0;
    text-align: center;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    color: #1a1a1a;
  }

  /* Entropy two-up section spacing */
  .entropy-section { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; margin-block: 4rem; }
  @media (max-width: 880px) {
    .entropy-section { grid-template-columns: 1fr; }
  }
  .entropy-panel .metric-small {
    font-family: 'JetBrains Mono', 'Consolas', 'Menlo', monospace;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    color: var(--accent-cyan);
    letter-spacing: 0.04em;
    margin-top: 1rem;
  }

  /* GitHub-flavored code block */
  .codeblock {
    margin: 1.4rem 0 0.75rem;
    border: 1px solid rgba(48, 54, 61, 0.9);
    border-radius: 10px;
    background: #0d1117;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(0, 229, 255, 0.04);
    overflow: hidden;
    font-family: 'JetBrains Mono', 'Consolas', 'Menlo', 'SF Mono', monospace;
  }
  .codeblock-chrome {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.55rem 0.85rem;
    background: linear-gradient(180deg, #161b22 0%, #0d1117 100%);
    border-bottom: 1px solid rgba(48, 54, 61, 0.9);
  }
  .codeblock-dots { display: inline-flex; gap: 0.4rem; }
  .codeblock-dots span {
    width: 11px; height: 11px; border-radius: 50%;
    background: #30363d;
  }
  .codeblock-dots span:nth-child(1) { background: #ff5f57; }
  .codeblock-dots span:nth-child(2) { background: #febc2e; }
  .codeblock-dots span:nth-child(3) { background: #28c840; }
  .codeblock-lang {
    flex: 1;
    font-size: 0.75rem;
    color: #8b949e;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  .codeblock-copy {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.35rem 0.7rem;
    border: 1px solid rgba(48, 54, 61, 0.9);
    border-radius: 6px;
    background: #21262d;
    color: #c9d1d9;
    font-family: inherit;
    font-size: 0.78rem;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease;
  }
  .codeblock-copy:hover, .codeblock-copy:focus-visible {
    background: #30363d;
    border-color: #8b949e;
    color: #ffffff;
    transform: translateY(-1px);
    outline: none;
  }
  .codeblock-copy.is-copied {
    background: rgba(35, 134, 54, 0.18);
    border-color: #2ea043;
    color: #56d364;
  }
  .codeblock-copy svg { display: block; }
  .codeblock-body {
    margin: 0;
    padding: 1rem 1.1rem;
    background: #0d1117;
    overflow-x: auto;
    max-height: 18rem;
  }
  .codeblock-body::-webkit-scrollbar { height: 8px; }
  .codeblock-body::-webkit-scrollbar-thumb { background: #30363d; border-radius: 4px; }
  .codeblock-code {
    font-family: 'JetBrains Mono', 'Consolas', 'Menlo', 'SF Mono', monospace;
    font-size: 0.86rem;
    line-height: 1.6;
    color: #c9d1d9;
    word-break: break-all;
    white-space: pre-wrap;
    tab-size: 2;
  }
  .codeblock-code .tok-fn { color: #d2a8ff; }
  .codeblock-code .tok-str { color: #a5d6ff; }
  .codeblock-code .tok-key { color: #ff7b72; }
  .codeblock-code .tok-num { color: #79c0ff; }
  .codeblock-code .tok-pct { color: #ffa657; }
  .codeblock-code .tok-punc { color: #c9d1d9; }
  .codeblock-code .tok-op { color: #ff7b72; }
  .codeblock-code .tok-com { color: #8b949e; font-style: italic; }
  .codeblock-code .tok-var { color: #ffa657; }
  .codeblock-code .tok-prop { color: #79c0ff; }
  .codeblock-code .tok-cls { color: #d2a8ff; }
  .codeblock-code .tok-bool { color: #79c0ff; }

  /* Docs page — GitHub-flavored code (replaces global green pre) */
  body[data-page="docs"] pre {
    background: #0d1117;
    border: 1px solid rgba(48, 54, 61, 0.9);
    border-radius: 10px;
    color: #c9d1d9;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45);
    font-family: 'JetBrains Mono', 'Consolas', 'Menlo', 'SF Mono', monospace;
    font-size: 0.86rem;
    line-height: 1.6;
    padding: 1rem 1.1rem;
    tab-size: 2;
    white-space: pre-wrap;
    word-break: break-word;
  }
  body[data-page="docs"] pre code,
  body[data-page="docs"] pre {
    color: #c9d1d9;
  }
  body[data-page="docs"] pre .tok-fn { color: #d2a8ff; }
  body[data-page="docs"] pre .tok-str { color: #a5d6ff; }
  body[data-page="docs"] pre .tok-key { color: #ff7b72; }
  body[data-page="docs"] pre .tok-num { color: #79c0ff; }
  body[data-page="docs"] pre .tok-pct { color: #ffa657; }
  body[data-page="docs"] pre .tok-punc { color: #c9d1d9; }
  body[data-page="docs"] pre .tok-op { color: #ff7b72; }
  body[data-page="docs"] pre .tok-com { color: #8b949e; font-style: italic; }
  body[data-page="docs"] pre .tok-var { color: #ffa657; }
  body[data-page="docs"] pre .tok-prop { color: #79c0ff; }
  body[data-page="docs"] pre .tok-cls { color: #d2a8ff; }
  body[data-page="docs"] pre .tok-bool { color: #79c0ff; }
  body[data-page="docs"] .docs-url-block {
    background: #0d1117;
    border-color: rgba(48, 54, 61, 0.9);
    color: #a5d6ff;
  }
  body[data-page="docs"] .docs-url-block code { color: #a5d6ff; }
  body[data-page="docs"] .endpoint-param code {
    color: #d2a8ff;
    background: rgba(48, 54, 61, 0.55);
    border: 1px solid rgba(48, 54, 61, 0.9);
  }
  body[data-page="docs"] .docs-sensor-chip code {
    color: #a5d6ff;
  }
  body[data-page="docs"] .endpoint-method-get {
    color: #56d364;
    background: rgba(35, 134, 54, 0.18);
    border: 1px solid rgba(46, 160, 67, 0.5);
  }
  body[data-page="docs"] .endpoint-method-post {
    color: #d2a8ff;
    background: rgba(124, 58, 237, 0.14);
    border: 1px solid rgba(124, 58, 237, 0.45);
  }
  body[data-page="docs"] .docs-example-label {
    color: #8b949e;
    background: #0d1117;
    border: 1px solid rgba(48, 54, 61, 0.9);
    border-radius: 6px;
    padding: 0.18rem 0.55rem;
    opacity: 1;
    top: 0.65rem; right: 0.65rem;
  }
  body[data-page="docs"] .endpoint-card pre {
    scrollbar-color: rgba(139, 148, 158, 0.4) transparent;
  }
  body[data-page="docs"] .m {
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 0.18rem 0.5rem;
    border-radius: 5px;
    margin-right: 0.45rem;
  }
  body[data-page="docs"] .m-get {
    color: #56d364;
    background: rgba(35, 134, 54, 0.18);
    border: 1px solid rgba(46, 160, 67, 0.5);
  }
  body[data-page="docs"] .m-post {
    color: #d2a8ff;
    background: rgba(124, 58, 237, 0.14);
    border: 1px solid rgba(124, 58, 237, 0.45);
  }
  body[data-page="docs"] .family-paths code {
    color: #a5d6ff;
    background: rgba(48, 54, 61, 0.45);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    font-size: 0.78rem;
  }

  /* Manifesto */
  .manifesto-section {
    margin-block: 4.5rem 4rem;
  }
  .manifesto-frame {
    position: relative;
    padding: clamp(1.8rem, 4vw, 3rem);
    border-radius: var(--radius-panel);
    border: 1px solid rgba(0, 229, 255, 0.18);
    background:
      radial-gradient(circle at 12% 10%, rgba(255, 23, 68, 0.08), transparent 45%),
      radial-gradient(circle at 95% 85%, rgba(0, 229, 255, 0.07), transparent 50%),
      linear-gradient(180deg, rgba(6, 6, 16, 0.85), rgba(12, 8, 24, 0.95));
    box-shadow: 0 0 0 1px rgba(255, 23, 68, 0.04), 0 30px 80px rgba(0, 0, 0, 0.45);
    overflow: hidden;
  }
  .manifesto-frame::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(0, 229, 255, 0.02) 3px 4px);
    pointer-events: none;
    mix-blend-mode: screen;
  }
  .manifesto-heading {
    margin-top: 0.6rem;
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1.02;
    letter-spacing: -0.02em;
    color: #f4faff;
    text-shadow: 0 0 28px rgba(0, 229, 255, 0.18);
    text-wrap: balance;
  }
  .manifesto-body {
    position: relative;
    margin-top: 1.4rem;
    max-width: 68ch;
    display: grid; gap: 1rem;
    color: var(--text-muted);
    font-size: clamp(1rem, 1.15vw, 1.08rem);
    line-height: 1.65;
  }
  .manifesto-body p { margin: 0; }
  .manifesto-body strong { color: #f4faff; font-weight: 600; }
  .manifesto-link {
    color: var(--accent-cyan);
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 229, 255, 0.4);
    transition: color 0.2s ease, border-color 0.2s ease, text-shadow 0.2s ease;
  }
  .manifesto-link:hover, .manifesto-link:focus-visible {
    color: #ffffff;
    border-color: #ffffff;
    text-shadow: 0 0 12px rgba(0, 229, 255, 0.55);
    outline: none;
  }
  .manifesto-tag {
    margin-top: 0.4rem;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(0, 229, 255, 0.7);
  }

  /* ── Universal scroll reveal (anti-FOUC: html.js-reveal-active gates the hidden state) ── */
  .reveal {
    will-change: opacity, transform;
    transition:
      opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms),
      transform 0.7s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms),
      filter 0.7s cubic-bezier(0.16, 1, 0.3, 1) var(--reveal-delay, 0ms);
  }
  html.js-reveal-active .reveal:not(.is-visible):not(.is-revealed) {
    opacity: 0;
    transform: translateY(28px);
    filter: blur(4px);
  }
  html.js-reveal-active .reveal.is-visible,
  html.js-reveal-active .reveal.is-revealed {
    opacity: 1;
    transform: none;
    filter: none;
  }

  /* ── Universal interactive states (hover / active / focus-visible) ── */
  :where(a, button, summary, [role="button"], [role="link"], input[type="submit"], input[type="button"]) {
    transition:
      color 0.2s ease,
      background-color 0.25s ease,
      border-color 0.25s ease,
      box-shadow 0.3s ease,
      transform 0.18s ease;
  }
  :where(a, button, summary, [role="button"], [role="link"]):focus-visible {
    outline: 2px solid var(--accent-cyan);
    outline-offset: 3px;
    border-radius: 4px;
  }
  :where(button, [role="button"], .button, .button-primary, .button-secondary, .button-ghost):hover:not(:disabled) {
    transform: translateY(-1.5px);
  }
  :where(button, [role="button"], .button, .button-primary, .button-secondary, .button-ghost):active:not(:disabled) {
    transform: translateY(1px) scale(0.985);
    transition-duration: 0.06s;
  }
  :where(.usecase-card, .family-card, .dossier-card, .panel) {
    transition:
      border-color 0.4s ease,
      box-shadow 0.4s ease,
      transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
      background-color 0.4s ease;
  }
  :where(.usecase-card, .family-card, .dossier-card):hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 60px rgba(0, 229, 255, 0.08);
    border-color: rgba(0, 229, 255, 0.3);
  }
  :where(.usecase-card, .family-card, .dossier-card):active {
    transform: translateY(-1px) scale(0.995);
  }
  :where(.usecase-card, .family-card, .dossier-card):focus-within {
    border-color: rgba(0, 229, 255, 0.45);
    box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.18), 0 16px 48px rgba(0, 0, 0, 0.5);
  }
  /* Inputs / forms */
  :where(input, textarea, select) {
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
  }
  :where(input, textarea, select):focus-visible {
    outline: none;
    border-color: var(--accent-cyan);
    box-shadow: 0 0 0 3px rgba(0, 229, 255, 0.18);
  }

  /* ── Docs polish ── */
  body[data-page="docs"] .usecase-card {
    position: relative;
    overflow: hidden;
  }
  body[data-page="docs"] .usecase-card::before {
    content: "";
    position: absolute; inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.0), rgba(0, 229, 255, 0.45), rgba(124, 58, 237, 0.4));
    -webkit-mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
            mask: linear-gradient(#000, #000) content-box, linear-gradient(#000, #000);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.45s ease;
    pointer-events: none;
  }
  body[data-page="docs"] .usecase-card:hover::before { opacity: 1; }
  body[data-page="docs"] .usecase-icon {
    display: inline-flex;
    width: 48px; height: 48px;
    align-items: center; justify-content: center;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(0, 229, 255, 0.18), rgba(124, 58, 237, 0.22));
    border: 1px solid rgba(0, 229, 255, 0.25);
    font-size: 1.5rem;
    margin-bottom: 0.6rem;
    box-shadow: 0 0 24px rgba(0, 229, 255, 0.18) inset;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
  }
  body[data-page="docs"] .usecase-card:hover .usecase-icon {
    transform: rotate(-6deg) scale(1.08);
    box-shadow: 0 0 32px rgba(0, 229, 255, 0.35) inset, 0 8px 24px rgba(0, 229, 255, 0.18);
  }
  body[data-page="docs"] .docs-sensor-dot {
    box-shadow: 0 0 12px currentColor;
  }
  body[data-page="docs"] .docs-hero-stats li {
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, background-color 0.3s ease;
  }
  body[data-page="docs"] .docs-hero-stats li:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 229, 255, 0.3);
    background: rgba(0, 229, 255, 0.045);
  }
  body[data-page="docs"] .docs-hero-stats strong {
    background-image: linear-gradient(120deg, #00E5FF 0%, #7C3AED 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
  }
  body[data-page="docs"] .family-card {
    position: relative;
    overflow: hidden;
  }
  body[data-page="docs"] .family-card::after {
    content: "";
    position: absolute;
    top: 0; left: -50%;
    width: 200%; height: 100%;
    background: linear-gradient(115deg, transparent 0%, transparent 40%, rgba(255, 255, 255, 0.05) 50%, transparent 60%, transparent 100%);
    transform: translateX(-100%);
    transition: transform 0.9s ease;
    pointer-events: none;
  }
  body[data-page="docs"] .family-card:hover::after {
    transform: translateX(50%);
  }
  body[data-page="docs"] .family-card-cyan { border-color: rgba(0, 229, 255, 0.18); }
  body[data-page="docs"] .family-card-violet { border-color: rgba(124, 58, 237, 0.22); }
  body[data-page="docs"] .family-card-red { border-color: rgba(255, 23, 68, 0.22); }
  body[data-page="docs"] .family-card-cyan:hover { border-color: rgba(0, 229, 255, 0.5); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 50px rgba(0, 229, 255, 0.16); }
  body[data-page="docs"] .family-card-violet:hover { border-color: rgba(124, 58, 237, 0.5); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 50px rgba(124, 58, 237, 0.18); }
  body[data-page="docs"] .family-card-red:hover { border-color: rgba(255, 23, 68, 0.45); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 50px rgba(255, 23, 68, 0.16); }
  body[data-page="docs"] .family-tag {
    display: inline-flex; align-items: center; gap: 0.4rem;
    font-family: 'JetBrains Mono', 'Consolas', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    background: rgba(0, 229, 255, 0.08);
    border: 1px solid rgba(0, 229, 255, 0.22);
    color: var(--accent-cyan);
  }
  body[data-page="docs"] .family-card-violet .family-tag { background: rgba(124, 58, 237, 0.12); border-color: rgba(124, 58, 237, 0.32); color: #c4a5ff; }
  body[data-page="docs"] .family-card-red .family-tag { background: rgba(255, 23, 68, 0.1); border-color: rgba(255, 23, 68, 0.3); color: #ff7b94; }
  body[data-page="docs"] .family-count {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    color: var(--text-muted);
    letter-spacing: 0.06em;
  }
  body[data-page="docs"] .family-paths {
    list-style: none; padding: 0; margin: 0.85rem 0 0.85rem;
    display: flex; flex-direction: column; gap: 0.45rem;
  }
  body[data-page="docs"] .family-paths li {
    display: flex; align-items: center; gap: 0.5rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.84rem;
    transition: transform 0.25s ease, color 0.25s ease;
  }
  body[data-page="docs"] .family-paths li:hover {
    transform: translateX(3px);
    color: var(--accent-cyan);
  }
  body[data-page="docs"] .family-cta,
  body[data-page="docs"] .usecase-link {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 600;
    color: var(--accent-cyan);
    border-bottom: 1px solid rgba(0, 229, 255, 0.4);
    padding-bottom: 0.12rem;
    transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, text-shadow 0.2s ease;
  }
  body[data-page="docs"] .family-cta:hover, body[data-page="docs"] .family-cta:focus-visible,
  body[data-page="docs"] .usecase-link:hover, body[data-page="docs"] .usecase-link:focus-visible {
    color: #ffffff;
    border-color: #ffffff;
    transform: translateX(3px);
    text-shadow: 0 0 14px rgba(0, 229, 255, 0.55);
    outline: none;
  }
  body[data-page="docs"] .docs-hero h1 {
    text-shadow: 0 0 60px rgba(255, 23, 68, 0.18), 0 0 90px rgba(0, 229, 255, 0.1);
  }
  body[data-page="docs"] .docs-cta {
    background:
      radial-gradient(ellipse at 0% 50%, rgba(0, 229, 255, 0.1), transparent 55%),
      radial-gradient(ellipse at 100% 50%, rgba(124, 58, 237, 0.1), transparent 55%),
      var(--bg-panel);
    border-color: rgba(0, 229, 255, 0.22);
    display: flex; align-items: center; justify-content: space-between;
    gap: clamp(1rem, 4vw, 3rem);
    flex-wrap: wrap;
  }
  body[data-page="docs"] .docs-cta:hover {
    border-color: rgba(0, 229, 255, 0.45);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55), 0 0 70px rgba(0, 229, 255, 0.16);
  }
  body[data-page="docs"] .docs-base-url {
    border-color: rgba(0, 229, 255, 0.16);
    background:
      linear-gradient(135deg, rgba(0, 229, 255, 0.05), rgba(124, 58, 237, 0.04)),
      var(--bg-panel);
  }

  /* Subtle attention nudge — pulses primary CTAs gently */
  @keyframes attention-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.0), 0 12px 36px rgba(0, 229, 255, 0.18); }
    50% { box-shadow: 0 0 0 6px rgba(0, 229, 255, 0.0), 0 12px 48px rgba(0, 229, 255, 0.32); }
  }
  body[data-page="docs"] .button-primary {
    animation: attention-pulse 3.6s ease-in-out infinite;
  }
  body[data-page="docs"] .button-primary:hover {
    animation-play-state: paused;
  }
  @media (prefers-reduced-motion: reduce) {
    body[data-page="docs"] .button-primary { animation: none; }
  }

  /* Beauty pass — warmer ambient glow, smoother card hovers, refined dividers */
  body::before {
    content: "";
    position: fixed; inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
      radial-gradient(circle at 80% 0%, rgba(0, 229, 255, 0.06), transparent 38%),
      radial-gradient(circle at 0% 100%, rgba(255, 23, 68, 0.05), transparent 35%);
    mix-blend-mode: screen;
    opacity: 0.85;
  }
  .panel {
    transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.3s ease;
  }
  .panel:hover {
    border-color: rgba(0, 229, 255, 0.22);
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55), 0 0 50px rgba(0, 229, 255, 0.06);
  }
  .button-primary, .button-secondary, .button-ghost {
    transition: transform 0.2s ease, box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
  }
  .button-primary:hover, .button-secondary:hover, .button-ghost:hover {
    transform: translateY(-2px);
  }
  .button-primary:active, .button-secondary:active, .button-ghost:active {
    transform: translateY(0);
  }
  .section-divider {
    height: 1px;
    border: 0;
    margin-block: clamp(2.4rem, 5vw, 4rem);
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(255, 23, 68, 0.18) 25%,
      rgba(0, 229, 255, 0.32) 50%,
      rgba(124, 58, 237, 0.22) 75%,
      transparent 100%
    );
    box-shadow: 0 0 24px rgba(0, 229, 255, 0.18);
  }
  .gradient-text {
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    background-image: linear-gradient(120deg, #FF1744 0%, #FF6D00 25%, #00E5FF 60%, #7C3AED 100%);
    background-size: 200% 200%;
    animation: gradient-pan 9s ease-in-out infinite;
  }
  @keyframes gradient-pan {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
  }
  /* Site-wide soft underline-on-hover for body links — cyan to match the underline */
  main a:not(.button):not(.brand-mark):not([class*="cta"]):not(.usecase-link):not(.family-cta):not(.manifesto-link):not(.nav-hotline):not(.brand-hotline):not(.dossier-feature-title-link):not(.hotline-number) {
    position: relative;
    color: var(--accent-cyan);
    transition: color 0.2s ease, text-shadow 0.2s ease;
  }
  main a:not(.button):not(.brand-mark):not([class*="cta"]):not(.usecase-link):not(.family-cta):not(.manifesto-link):not(.nav-hotline):not(.brand-hotline):not(.dossier-feature-title-link):not(.hotline-number):hover,
  main a:not(.button):not(.brand-mark):not([class*="cta"]):not(.usecase-link):not(.family-cta):not(.manifesto-link):not(.nav-hotline):not(.brand-hotline):not(.dossier-feature-title-link):not(.hotline-number):focus-visible {
    color: #6cf3ff;
    text-shadow: 0 0 12px rgba(0, 229, 255, 0.45);
  }
  main a:not(.button):not(.brand-mark):not([class*="cta"]):not(.usecase-link):not(.family-cta):not(.manifesto-link):not(.nav-hotline):not(.brand-hotline):not(.dossier-feature-title-link):not(.hotline-number)::after {
    content: "";
    position: absolute;
    left: 51%; right: 51%; bottom: -2px;
    height: 1px;
    background: var(--accent-cyan);
    transition: left 0.3s ease-out, right 0.3s ease-out;
  }
  main a:not(.button):not(.brand-mark):not([class*="cta"]):not(.usecase-link):not(.family-cta):not(.manifesto-link):not(.nav-hotline):not(.brand-hotline):not(.dossier-feature-title-link):not(.hotline-number):hover::after,
  main a:not(.button):not(.brand-mark):not([class*="cta"]):not(.usecase-link):not(.family-cta):not(.manifesto-link):not(.nav-hotline):not(.brand-hotline):not(.dossier-feature-title-link):not(.hotline-number):focus-visible::after {
    left: 0; right: 0;
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      scroll-behavior: auto !important;
      transition-duration: 0.01ms !important;
    }
    .gradient-text { animation: none; }
  }

  /* ═══════════════════════════════════════════════
     Rutgers ultrasound rig schematic
     ═══════════════════════════════════════════════ */
  .rutgers-rig {
    align-self: stretch;
    display: flex; align-items: center; justify-content: center;
    margin: 0;
  }
  .rutgers-rig-frame {
    position: relative; width: 100%;
    background:
      radial-gradient(ellipse at 30% 20%, rgba(0, 229, 255, 0.08), transparent 60%),
      radial-gradient(ellipse at 70% 80%, rgba(124, 58, 237, 0.07), transparent 60%),
      rgba(6, 6, 16, 0.7);
    border: 1px solid rgba(0, 229, 255, 0.18);
    border-radius: 14px;
    padding: 1rem 1rem 0.85rem;
    box-shadow: 0 12px 36px -16px rgba(0, 229, 255, 0.35);
  }
  .rutgers-rig-svg { width: 100%; height: auto; display: block; }
  .rutgers-rig-pulse { animation: rutgers-pulse 1.6s ease-in-out infinite; }
  @keyframes rutgers-pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; filter: drop-shadow(0 0 6px #7affae); }
  }
  .rutgers-rig-resonance {
    transform-box: fill-box; transform-origin: 50% 50%;
    animation: rutgers-resonance 2.2s ease-in-out infinite;
  }
  @keyframes rutgers-resonance {
    0%, 100% { opacity: 0.35; transform: scale(0.9); }
    50% { opacity: 0.85; transform: scale(1.18); }
  }
  .rutgers-rig-wave {
    stroke-dasharray: 6 4; animation: rutgers-wave 2.4s linear infinite;
  }
  @keyframes rutgers-wave {
    to { stroke-dashoffset: -40; }
  }
  .rutgers-rig-trace {
    stroke-dasharray: 200; stroke-dashoffset: 200;
    animation: rutgers-trace 3.2s ease-out infinite;
  }
  @keyframes rutgers-trace {
    0% { stroke-dashoffset: 200; opacity: 0.2; }
    60% { stroke-dashoffset: 0; opacity: 1; }
    100% { stroke-dashoffset: -40; opacity: 0; }
  }
  .rutgers-rig-wire { stroke-dasharray: 4 3; animation: rutgers-wire 1.8s linear infinite; }
  @keyframes rutgers-wire {
    to { stroke-dashoffset: -28; }
  }
  .rutgers-rig-coil {
    transform-box: fill-box; transform-origin: 50% 50%;
    animation: rutgers-coil 1.4s ease-in-out infinite;
  }
  @keyframes rutgers-coil {
    0%, 100% { opacity: 0.55; filter: drop-shadow(0 0 0 rgba(255, 109, 0, 0)); }
    50% { opacity: 1; filter: drop-shadow(0 0 4px rgba(255, 109, 0, 0.8)); }
  }
  .rutgers-rig-field {
    animation: rutgers-field 2s ease-in-out infinite;
  }
  @keyframes rutgers-field {
    0%, 100% { opacity: 0.35; transform: translateY(0); }
    50% { opacity: 0.9; transform: translateY(-1px); }
  }
  .rutgers-rig-coupling {
    stroke-dasharray: 4 3;
    animation: rutgers-coupling 1.6s linear infinite;
  }
  @keyframes rutgers-coupling {
    0% { stroke-dashoffset: 0; opacity: 0.5; }
    50% { opacity: 1; }
    100% { stroke-dashoffset: -28; opacity: 0.5; }
  }
  .rutgers-rig-caption {
    margin-top: 0.7rem; font-size: 0.78rem; line-height: 1.45;
    color: rgba(255, 255, 255, 0.62);
    display: flex; align-items: flex-start; gap: 0.55rem;
  }
  .rutgers-rig-tag {
    flex-shrink: 0;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--accent-cyan);
    border: 1px solid rgba(0, 229, 255, 0.4);
    padding: 0.18rem 0.45rem; border-radius: 4px;
    background: rgba(0, 229, 255, 0.06);
  }

  /* ═══════════════════════════════════════════════

  /* ═══════════════════════════════════════════════
     Signal pullquote — Rutgers ultrasound highlight
     Classified forensic file aesthetic
     ═══════════════════════════════════════════════ */
  .signal-pullquote {
    position: relative;
    margin: 2.25rem 0 2.5rem;
    padding: 3rem 2rem 1.5rem 3rem;
    border-radius: 18px;
    background:
      repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 229, 255, 0.022) 2px 3px),
      radial-gradient(circle at 1px 1px, rgba(0, 229, 255, 0.055) 1px, transparent 0) 0 0/22px 22px,
      radial-gradient(120% 80% at 0% 0%, rgba(0, 229, 255, 0.10), transparent 55%),
      radial-gradient(120% 80% at 100% 100%, rgba(124, 58, 237, 0.10), transparent 55%),
      linear-gradient(135deg, rgba(10, 14, 28, 0.78), rgba(6, 8, 18, 0.96));
    border: 1px solid rgba(0, 229, 255, 0.22);
    border-left: 2px solid rgba(0, 229, 255, 0.6);
    box-shadow:
      0 32px 70px -38px rgba(0, 229, 255, 0.55),
      0 0 0 1px rgba(0, 229, 255, 0.05),
      inset 0 1px 0 rgba(255, 255, 255, 0.05),
      inset 0 -1px 0 rgba(124, 58, 237, 0.18);
    isolation: isolate;
    overflow: hidden;
    transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
  }
  .signal-pullquote:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 229, 255, 0.45);
    box-shadow:
      0 40px 80px -36px rgba(0, 229, 255, 0.75),
      0 0 0 1px rgba(0, 229, 255, 0.10),
      inset 0 1px 0 rgba(255, 255, 255, 0.08),
      inset 0 -1px 0 rgba(124, 58, 237, 0.25);
  }
  .signal-pullquote::before,
  .signal-pullquote::after {
    content: "";
    position: absolute;
    width: 22px; height: 22px;
    border: 1.5px solid rgba(0, 229, 255, 0.55);
    pointer-events: none;
    z-index: 2;
    transition: border-color 0.4s ease, width 0.4s ease, height 0.4s ease;
  }
  .signal-pullquote::before {
    top: 10px; left: 10px;
    border-right: none; border-bottom: none;
    border-top-left-radius: 6px;
  }
  .signal-pullquote::after {
    bottom: 10px; right: 10px;
    border-left: none; border-top: none;
    border-bottom-right-radius: 6px;
  }
  .signal-pullquote:hover::before,
  .signal-pullquote:hover::after {
    border-color: rgba(0, 229, 255, 0.9);
    width: 28px; height: 28px;
  }
  .signal-pullquote-tag {
    position: absolute;
    top: -1px; right: 1.6rem;
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.36rem 0.95rem 0.42rem;
    background: linear-gradient(180deg, rgba(0, 229, 255, 0.22), rgba(0, 229, 255, 0.06));
    border: 1px solid rgba(0, 229, 255, 0.45);
    border-top: none;
    border-radius: 0 0 8px 8px;
    font-family: 'JetBrains Mono', 'Menlo', monospace;
    font-size: 0.6rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgba(0, 229, 255, 0.92);
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.5);
    z-index: 3;
    backdrop-filter: blur(4px);
  }
  .signal-pullquote-tag-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #00E5FF;
    box-shadow: 0 0 8px #00E5FF, 0 0 16px rgba(0, 229, 255, 0.6);
    animation: signal-pullquote-pulse 1.8s ease-in-out infinite;
  }
  @keyframes signal-pullquote-pulse {
    0%, 100% { opacity: 0.5; transform: scale(0.85); }
    50% { opacity: 1; transform: scale(1.18); }
  }
  .signal-pullquote-wave {
    position: absolute;
    left: 1.6rem; right: 1.6rem;
    bottom: 3.6rem;
    width: calc(100% - 3.2rem);
    height: 18px;
    fill: none;
    stroke: rgba(0, 229, 255, 0.32);
    stroke-width: 1.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.6;
    pointer-events: none;
    z-index: 1;
    filter: drop-shadow(0 0 4px rgba(0, 229, 255, 0.45));
  }
  .signal-pullquote-mark {
    position: absolute;
    left: 1rem; top: 0.5rem;
    font-family: 'Cormorant Garamond', 'Times New Roman', serif;
    font-size: 4.2rem;
    line-height: 1;
    background: linear-gradient(135deg, var(--accent-cyan), #7C3AED);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 22px rgba(0, 229, 255, 0.4);
    user-select: none;
    z-index: 1;
    opacity: 0.92;
  }
  .signal-pullquote-line {
    position: relative;
    margin: 0 0 0.75rem;
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    font-size: clamp(1.04rem, 1.85vw, 1.22rem);
    line-height: 1.58;
    color: var(--ink-primary);
    z-index: 1;
  }
  .signal-pullquote-line:last-of-type { margin-bottom: 0; }
  .signal-pullquote-line--accent {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed rgba(0, 229, 255, 0.22);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.96);
    position: relative;
  }
  .signal-pullquote-line--accent::before {
    content: "";
    position: absolute;
    top: -1px; left: 0;
    width: 48px; height: 1px;
    background: linear-gradient(90deg, var(--accent-cyan), transparent);
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.55);
    animation: signal-pullquote-scan 4.5s ease-in-out infinite;
  }
  @keyframes signal-pullquote-scan {
    0%, 100% { left: 0; opacity: 0.95; }
    50% { left: calc(100% - 48px); opacity: 0.4; }
  }
  .signal-pullquote-key {
    color: var(--accent-cyan);
    font-weight: 600;
    letter-spacing: 0.005em;
    text-shadow: 0 0 14px rgba(0, 229, 255, 0.28);
  }
  .signal-pullquote-key--red {
    color: #ff3b5c;
    text-shadow: 0 0 14px rgba(255, 59, 92, 0.4);
  }
  .signal-pullquote-link {
    position: relative;
    color: rgba(0, 229, 255, 0.95);
    border-bottom: 1px solid rgba(0, 229, 255, 0.4);
    text-decoration: none;
    padding: 0 2px;
    transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease, text-shadow 0.25s ease;
  }
  .signal-pullquote-link:hover,
  .signal-pullquote-link:focus-visible {
    color: #6cf3ff;
    border-bottom-color: var(--accent-cyan);
    background: linear-gradient(180deg, transparent 70%, rgba(0, 229, 255, 0.18) 70%);
    text-shadow: 0 0 12px rgba(0, 229, 255, 0.6);
    outline: none;
  }
  .signal-pullquote-foot {
    margin-top: 1.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(0, 229, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
  }
  .signal-pullquote-foot-meta,
  .signal-pullquote-cite {
    font-family: 'JetBrains Mono', 'Menlo', monospace;
    font-size: 0.62rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
  }
  .signal-pullquote-foot-meta {
    color: rgba(124, 58, 237, 0.78);
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
  }
  .signal-pullquote-foot-meta::before {
    content: "▣";
    color: rgba(124, 58, 237, 0.95);
    font-size: 0.72rem;
  }
  .signal-pullquote-cite {
    color: rgba(0, 229, 255, 0.7);
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.2);
  }
  @media (prefers-reduced-motion: reduce) {
    .signal-pullquote,
    .signal-pullquote::before,
    .signal-pullquote::after,
    .signal-pullquote-tag-dot,
    .signal-pullquote-line--accent::before {
      animation: none !important;
      transition: none !important;
    }
  }
  @media (max-width: 600px) {
    .signal-pullquote {
      padding: 2.6rem 1.2rem 1.2rem 1.6rem;
    }
    .signal-pullquote-tag {
      right: 0.8rem;
      padding: 0.3rem 0.7rem 0.36rem;
      font-size: 0.5rem;
      letter-spacing: 0.22em;
    }
    .signal-pullquote-mark { font-size: 3rem; left: 0.5rem; }
    .signal-pullquote-foot {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.4rem;
    }
    .signal-pullquote-wave { display: none; }
  }

  /* ═══════════════════════════════════════════════
     Dream Burden — 2×3 DALL-E dream grid (5 tiles)
     Desktop ≥1024px: 3 cols × 2 rows, last tile centered
     Tablet 721-1023px: 2 cols × 3 rows (last tile spans both cols)
     Mobile <720px: single col stack
     ═══════════════════════════════════════════════ */
  .dossier-feature-media-row--dreams {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    margin-top: 2.25rem;
  }
  .dossier-feature-media-row--dreams .dossier-feature-figure {
    margin: 0; min-width: 0;
    display: flex; flex-direction: column; gap: 0.6rem;
  }
  .dossier-feature-media-row--dreams .dossier-feature-figure picture {
    aspect-ratio: 1 / 1;
    align-items: center;
  }
  .dossier-feature-media-row--dreams .dossier-feature-figure picture img {
    width: 100%; height: 100%;
    max-height: none;
    object-fit: cover;
  }
  .dossier-feature-media-row--dreams .dossier-feature-figure figcaption {
    text-align: left;
    text-transform: none;
    letter-spacing: 0.02em;
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.5;
  }
  @media (min-width: 1024px) {
    .dossier-feature-media-row--dreams {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .dossier-feature-media-row--dreams .dossier-feature-figure:nth-child(4) {
      grid-column: 1 / span 1;
      grid-row: 2;
      grid-column-start: 1;
    }
    .dossier-feature-media-row--dreams .dossier-feature-figure:nth-child(5) {
      grid-column: 2 / span 2;
      grid-row: 2;
    }
    .dossier-feature-media-row--dreams .dossier-feature-figure:nth-child(5) picture {
      aspect-ratio: 16 / 9;
    }
  }
  @media (max-width: 1023px) {
    .dossier-feature-media-row--dreams .dossier-feature-figure:nth-child(5) {
      grid-column: 1 / -1;
    }
    .dossier-feature-media-row--dreams .dossier-feature-figure:nth-child(5) picture {
      aspect-ratio: 16 / 9;
    }
  }
  @media (max-width: 720px) {
    .dossier-feature-media-row--dreams { grid-template-columns: 1fr; gap: 1.25rem; }
    .dossier-feature-media-row--dreams .dossier-feature-figure:nth-child(5) picture {
      aspect-ratio: 1 / 1;
    }
  }

  /* ═══════════════════════════════════════════════
     Jungle Habitat — side-by-side video pair
     ═══════════════════════════════════════════════ */
  .dossier-feature-media-row--jungle {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 1.25rem;
    align-items: start;
  }
  .dossier-feature-media-row--jungle .dossier-feature-figure {
    margin: 0; min-width: 0;
    display: flex; flex-direction: column; gap: 0.5rem;
  }
  .dossier-feature-media-row--jungle .dossier-video {
    width: 100%; height: auto;
    max-height: 500px;
    object-fit: contain;
    background: #0a0a18;
    border-radius: 12px;
  }
  @media (max-width: 720px) {
    .dossier-feature-media-row--jungle { grid-template-columns: 1fr; }
    .dossier-feature-media-row--jungle .dossier-video { max-height: none; }
  }

  /* ═══════════════════════════════════════════════
     Exorcism letter — Diocese of Paterson stationery
     ═══════════════════════════════════════════════ */
  .exorcism-letter {
    margin: 2.25rem 0 0;
    perspective: 1400px;
    padding-top: 1.5rem;
  }
  .exorcism-letter-defs {
    position: absolute;
    width: 0; height: 0;
    overflow: hidden;
    pointer-events: none;
  }
  .exorcism-letter-paper {
    position: relative;
    margin: 0 auto;
    max-width: 760px;
    padding: clamp(2.2rem, 5vw, 3.2rem) clamp(1.4rem, 4vw, 2.4rem) 2rem;
    background:
      radial-gradient(ellipse at 12% 8%, rgba(180, 130, 60, 0.08), transparent 45%),
      radial-gradient(ellipse at 88% 92%, rgba(70, 40, 15, 0.13), transparent 50%),
      linear-gradient(180deg, rgba(252, 247, 232, 0.98) 0%, rgba(241, 230, 204, 0.96) 100%);
    color: #1a1612;
    border-radius: 4px;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.7) inset,
      0 0 0 1px rgba(80, 50, 20, 0.1),
      6px 4px 8px -2px rgba(0, 0, 0, 0.32),
      14px 18px 28px -10px rgba(0, 0, 0, 0.5),
      28px 42px 64px -22px rgba(0, 0, 0, 0.6),
      48px 80px 120px -40px rgba(0, 0, 0, 0.55),
      0 0 0 1px rgba(0, 0, 0, 0.04);
    transform-origin: 22% 18px;
    transform: rotate(-3deg);
    animation: letter-hang-sway 7.2s ease-in-out infinite alternate;
    will-change: transform;
    overflow: hidden;
    font-family: 'Cormorant Garamond', 'Iowan Old Style', 'Palatino', 'Times New Roman', serif;
    line-height: 1.55;
  }
  @keyframes letter-hang-sway {
    0%   { transform: rotate(-3.4deg); }
    50%  { transform: rotate(-2.4deg); }
    100% { transform: rotate(-3.2deg); }
  }
  .exorcism-letter-paper::before {
    content: "";
    position: absolute; inset: 0;
    background:
      radial-gradient(ellipse at 20% 0%, rgba(120, 80, 30, 0.09), transparent 60%),
      radial-gradient(ellipse at 100% 100%, rgba(60, 30, 10, 0.14), transparent 55%),
      repeating-linear-gradient(90deg, transparent 0 2px, rgba(80, 50, 20, 0.02) 2px 4px),
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.35  0 0 0 0 0.22  0 0 0 0 0.08  0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
    background-size: auto, auto, auto, 220px 220px;
    pointer-events: none;
    mix-blend-mode: multiply;
    opacity: 0.9;
  }
  .exorcism-letter-paper::after {
    content: "";
    position: absolute;
    left: 4.5rem; top: 0; bottom: 0;
    width: 1px;
    background: linear-gradient(180deg, transparent 0%, rgba(180, 50, 50, 0.18) 8%, rgba(180, 50, 50, 0.18) 92%, transparent 100%);
    pointer-events: none;
  }
  .exorcism-letter-watermark {
    position: absolute;
    left: 50%; top: 52%;
    width: min(60%, 380px);
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%) rotate(-6deg);
    color: rgba(80, 40, 10, 0.07);
    pointer-events: none;
    z-index: 0;
  }
  .exorcism-letter-watermark svg { width: 100%; height: 100%; display: block; }
  .exorcism-letter-head {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem 1.6rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(80, 40, 10, 0.18);
    margin-bottom: 1.4rem;
    font-size: 0.94rem;
  }
  .exorcism-letter-from { margin: 0; }
  .exorcism-letter-to {
    margin: 0;
    text-align: right;
    color: #2a1f15;
  }
  .exorcism-letter-to strong {
    display: inline-block;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    letter-spacing: 0.05em;
    font-size: 1.05rem;
  }
  .exorcism-letter-date {
    margin: 0;
    grid-column: 1 / -1;
    font-style: italic;
    text-align: right;
    color: #4a3a28;
  }
  .exorcism-letter-re,
  .exorcism-letter-prot {
    grid-column: 1 / -1;
    margin: 0;
    padding: 0.55rem 0.75rem;
    background: rgba(180, 50, 50, 0.08);
    border-left: 3px solid rgba(180, 50, 50, 0.55);
    border-radius: 0 4px 4px 0;
    font-size: 0.92rem;
    line-height: 1.5;
  }
  .exorcism-letter-prot {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    color: #3a2818;
  }
  .exorcism-letter-prot em { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 0.92rem; }
  .exorcism-letter-re a,
  .exorcism-letter-prot a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
  .exorcism-letter-tag {
    display: inline-block;
    margin-right: 0.4rem;
    padding: 0.05rem 0.35rem;
    background: rgba(180, 50, 50, 0.85);
    color: #fff8e8;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.66rem;
    letter-spacing: 0.18em;
    border-radius: 2px;
    vertical-align: middle;
  }
  .exorcism-letter-body {
    position: relative;
    z-index: 1;
    font-size: clamp(0.96rem, 1.6vw, 1.06rem);
  }
  .exorcism-letter-body p { margin: 0 0 0.95rem; }
  .exorcism-letter-body a { color: #5a2010; text-decoration: underline; text-underline-offset: 2px; }
  .exorcism-letter-body a:hover { color: #8a2a18; }
  .exorcism-letter-salute {
    font-style: italic;
    margin-bottom: 1.1rem !important;
  }
  .exorcism-letter-h {
    margin: 1.4rem 0 0.55rem;
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    font-size: 1.08rem;
    letter-spacing: 0.04em;
    color: #2a1610;
    border-bottom: 1px dotted rgba(80, 40, 10, 0.35);
    padding-bottom: 0.25rem;
  }
  .exorcism-letter-h span {
    display: inline;
    font-weight: 500;
    font-style: italic;
    color: #4a2818;
    margin-left: 0.35rem;
  }
  .exorcism-letter-list {
    margin: 0 0 1rem 1.35rem;
    padding: 0;
  }
  .exorcism-letter-list li { margin: 0 0 0.45rem; line-height: 1.5; }
  .exorcism-letter-close {
    margin-top: 1.6rem !important;
    font-style: italic;
  }
  .exorcism-letter-sign { margin: 1.2rem 0 0 !important; line-height: 1.4; }
  .exorcism-letter-signature {
    display: inline-block;
    font-family: 'Caveat', 'Snell Roundhand', 'Brush Script MT', cursive;
    font-size: 1.85rem;
    color: #1a1410;
    transform: rotate(-2deg);
    padding: 0.1rem 0.4rem 0;
  }
  .exorcism-letter-credentials {
    display: inline-block;
    margin-top: 0.3rem;
    font-size: 0.78rem;
    color: #4a3a2a;
    font-style: italic;
    letter-spacing: 0.02em;
  }
  .exorcism-letter-cc {
    margin: 1.4rem 0 0 !important;
    padding-top: 0.85rem;
    border-top: 1px dashed rgba(80, 40, 10, 0.3);
    font-size: 0.82rem;
    color: #3a2818;
  }
  .exorcism-letter-stamp {
    position: absolute;
    right: clamp(0.8rem, 3vw, 2rem);
    bottom: clamp(0.9rem, 3vw, 1.8rem);
    width: 130px; height: 130px;
    transform: rotate(-12deg);
    color: #c33028;
    pointer-events: none;
    z-index: 2;
    opacity: 0.78;
    mix-blend-mode: multiply;
  }
  .exorcism-letter-stamp::before {
    content: "";
    position: absolute; inset: 0;
    border-radius: 50%;
    border: 2px double currentColor;
    box-shadow: 0 0 0 6px transparent, inset 0 0 0 4px transparent;
  }
  .exorcism-letter-stamp::after {
    content: "";
    position: absolute; inset: 8px;
    border-radius: 50%;
    border: 1px dashed currentColor;
  }
  .exorcism-letter-stamp-arc {
    position: absolute; inset: 0;
    font-family: 'JetBrains Mono', monospace;
    font-size: 8px; letter-spacing: 0.18em; font-weight: 700;
    color: currentColor;
    background: conic-gradient(from 270deg at 50% 50%, transparent 0%, transparent 100%);
    text-align: center;
    text-transform: uppercase;
    padding: 14px 0 0;
    line-height: 1;
  }
  .exorcism-letter-stamp-core {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Cormorant Garamond', serif;
    font-weight: 700;
    font-size: 0.86rem;
    letter-spacing: 0.05em;
    text-align: center;
    line-height: 1.05;
    text-transform: uppercase;
  }
  .exorcism-letter-staple {
    position: absolute;
    top: 18px;
    left: 22%;
    width: 28px;
    height: 8px;
    background:
      linear-gradient(180deg, #f4f4f4 0%, #c8c8c8 35%, #8a8a8a 65%, #5a5a5a 100%);
    border-radius: 1px;
    transform: rotate(-6deg);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.7) inset,
      0 1px 2px rgba(0, 0, 0, 0.45),
      0 4px 6px -2px rgba(0, 0, 0, 0.3);
    z-index: 5;
    pointer-events: none;
  }
  .exorcism-letter-staple::before,
  .exorcism-letter-staple::after {
    content: "";
    position: absolute;
    top: -4px;
    width: 2px;
    height: 5px;
    background: linear-gradient(180deg, #d0d0d0 0%, #707070 100%);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
  }
  .exorcism-letter-staple::before { left: 2px; }
  .exorcism-letter-staple::after { right: 2px; }
  .exorcism-letter-rejected {
    position: absolute;
    top: 38%;
    left: 50%;
    z-index: 6;
    transform: translate(-50%, -50%) rotate(-14deg);
    pointer-events: none;
    mix-blend-mode: multiply;
    filter: url(#stamp-rough);
    text-align: center;
    color: #b22020;
    opacity: 0.92;
  }
  .exorcism-letter-rejected-text {
    display: block;
    font-family: 'Bebas Neue', 'Oswald', 'Impact', sans-serif;
    font-size: clamp(2.8rem, 9vw, 5.4rem);
    font-weight: 900;
    letter-spacing: 0.18em;
    line-height: 1;
    padding: 0.45rem 1.1rem 0.3rem;
    border: 6px solid currentColor;
    box-shadow:
      0 0 0 2px transparent,
      inset 0 0 0 2px rgba(178, 32, 32, 0.15);
    text-shadow:
      0 0 1px rgba(178, 32, 32, 0.5),
      1px 1px 0 rgba(120, 15, 15, 0.3);
  }
  .exorcism-letter-rejected-sub {
    display: block;
    margin-top: 0.45rem;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: clamp(0.55rem, 1.6vw, 0.8rem);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 700;
  }
  .exorcism-letter-caption {
    margin-top: 1rem;
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
  }
  @media (prefers-reduced-motion: reduce) {
    .exorcism-letter-paper { transform: rotate(-2deg); animation: none; }
    .exorcism-letter-stamp { transform: rotate(-12deg); }
    .exorcism-letter-signature { transform: none; }
    .exorcism-letter-rejected { transform: translate(-50%, -50%) rotate(-14deg); }
  }
  @media (max-width: 640px) {
    .exorcism-letter-head { grid-template-columns: 1fr; }
    .exorcism-letter-to { text-align: left; }
    .exorcism-letter-paper::after { left: 2rem; }
    .exorcism-letter-stamp { width: 100px; height: 100px; right: 0.6rem; bottom: 0.6rem; }
    .exorcism-letter-staple { left: 18%; }
    .exorcism-letter-rejected-text {
      font-size: clamp(2.2rem, 14vw, 3.8rem);
      border-width: 4px;
      padding: 0.35rem 0.85rem 0.25rem;
    }
    .exorcism-letter-rejected-sub { font-size: 0.5rem; letter-spacing: 0.15em; }
  }

  @media (max-width: 720px) {
    .rutgers-rig { max-width: 100%; }
  }

  /* ═══════════════════════════════════════════════════════════════
     BALLISTIC ANIMATION LIBRARY — site-wide motion enhancement
     keyframes + reveal-* helpers + hover-glow + ambient drifts
     all motion gated by prefers-reduced-motion at the bottom
     ═══════════════════════════════════════════════════════════════ */

  @keyframes bx-fade-up {
    from { opacity: 0; transform: translate3d(0, 36px, 0); filter: blur(6px); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); filter: blur(0); }
  }
  @keyframes bx-fade-left {
    from { opacity: 0; transform: translate3d(-48px, 0, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
  }
  @keyframes bx-fade-right {
    from { opacity: 0; transform: translate3d(48px, 0, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
  }
  @keyframes bx-zoom-in {
    from { opacity: 0; transform: scale(0.86); filter: blur(8px); }
    to   { opacity: 1; transform: scale(1); filter: blur(0); }
  }
  @keyframes bx-blur-in {
    from { opacity: 0; filter: blur(14px) saturate(0.4); }
    to   { opacity: 1; filter: blur(0) saturate(1); }
  }
  @keyframes bx-tilt-in {
    from { opacity: 0; transform: perspective(900px) rotateX(14deg) translateY(40px); transform-origin: top center; }
    to   { opacity: 1; transform: perspective(900px) rotateX(0deg) translateY(0); }
  }
  @keyframes bx-flicker {
    0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; filter: brightness(1); }
    20%, 24%, 55%                     { opacity: 0.55; filter: brightness(0.7); }
  }
  @keyframes bx-pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 229, 255, 0.0), 0 0 18px rgba(0, 229, 255, 0.15); }
    50%      { box-shadow: 0 0 0 6px rgba(0, 229, 255, 0.06), 0 0 36px rgba(124, 58, 237, 0.35); }
  }
  @keyframes bx-drift-slow {
    0%   { transform: translate3d(0, 0, 0); }
    50%  { transform: translate3d(8px, -10px, 0); }
    100% { transform: translate3d(-6px, 6px, 0); }
  }
  @keyframes bx-text-shimmer {
    0%   { background-position: -200% 50%; }
    100% { background-position: 200% 50%; }
  }
  @keyframes bx-ember-rise {
    0%   { transform: translate3d(0, 0, 0) scale(0.8); opacity: 0; }
    20%  { opacity: 1; }
    100% { transform: translate3d(var(--ember-dx, 12px), -120vh, 0) scale(1.2); opacity: 0; }
  }
  @keyframes bx-cyan-edge-sweep {
    0%   { background-position: -150% 50%; }
    100% { background-position: 250% 50%; }
  }
  @keyframes bx-breath {
    0%, 100% { transform: scale(1); opacity: 0.85; }
    50%      { transform: scale(1.04); opacity: 1; }
  }
  @keyframes bx-tilt-hover {
    0%   { transform: rotate(0deg); }
    50%  { transform: rotate(0.6deg); }
    100% { transform: rotate(-0.4deg); }
  }
  @keyframes bx-spin-slow {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }

  /* Reveal helpers — applied alongside .reveal-section to vary the entrance */
  @media (prefers-reduced-motion: no-preference) {
    .reveal-section.bx-from-left:not(.is-revealed)   { transform: translate3d(-60px, 0, 0); opacity: 0; }
    .reveal-section.bx-from-right:not(.is-revealed)  { transform: translate3d(60px, 0, 0); opacity: 0; }
    .reveal-section.bx-zoom:not(.is-revealed)        { transform: scale(0.92); opacity: 0; filter: blur(6px); }
    .reveal-section.bx-tilt:not(.is-revealed)        { transform: perspective(900px) rotateX(10deg) translateY(40px); transform-origin: top center; opacity: 0; }
    .reveal-section.bx-blur:not(.is-revealed)        { filter: blur(12px) saturate(0.5); opacity: 0; }
    .reveal-section.is-revealed.bx-from-left,
    .reveal-section.is-revealed.bx-from-right        { transform: translate3d(0, 0, 0); opacity: 1; }
    .reveal-section.is-revealed.bx-zoom              { transform: scale(1); opacity: 1; filter: blur(0); }
    .reveal-section.is-revealed.bx-tilt              { transform: perspective(900px) rotateX(0deg) translateY(0); opacity: 1; }
    .reveal-section.is-revealed.bx-blur              { filter: blur(0) saturate(1); opacity: 1; }
  }

  /* Stagger children of any .bx-stagger container */
  @media (prefers-reduced-motion: no-preference) {
    .bx-stagger > * {
      opacity: 0;
      animation: bx-fade-up 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
      animation-play-state: paused;
    }
    .bx-stagger.is-revealed > *,
    .bx-stagger.is-visible > * { animation-play-state: running; }
    .bx-stagger > *:nth-child(1) { animation-delay: 0.05s; }
    .bx-stagger > *:nth-child(2) { animation-delay: 0.15s; }
    .bx-stagger > *:nth-child(3) { animation-delay: 0.25s; }
    .bx-stagger > *:nth-child(4) { animation-delay: 0.35s; }
    .bx-stagger > *:nth-child(5) { animation-delay: 0.45s; }
    .bx-stagger > *:nth-child(6) { animation-delay: 0.55s; }
    .bx-stagger > *:nth-child(7) { animation-delay: 0.65s; }
    .bx-stagger > *:nth-child(8) { animation-delay: 0.75s; }
    .bx-stagger > *:nth-child(9) { animation-delay: 0.85s; }
    .bx-stagger > *:nth-child(n+10) { animation-delay: 0.95s; }
  }

  /* Hover-glow utility — accent border halo on cards */
  .bx-hover-glow {
    position: relative;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.3s ease;
  }
  .bx-hover-glow::after {
    content: "";
    position: absolute; inset: -1px;
    border-radius: inherit;
    background: linear-gradient(120deg,
      rgba(0, 229, 255, 0) 0%,
      rgba(0, 229, 255, 0.5) 35%,
      rgba(124, 58, 237, 0.6) 65%,
      rgba(0, 229, 255, 0) 100%);
    background-size: 220% 220%;
    background-position: -150% 50%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    z-index: -1;
    filter: blur(14px);
  }
  @media (hover: hover) and (pointer: fine) {
    .bx-hover-glow:hover,
    .bx-hover-glow:focus-visible {
      transform: translateY(-4px);
      box-shadow: 0 14px 32px -12px rgba(0, 229, 255, 0.35),
                  0 24px 48px -18px rgba(124, 58, 237, 0.4);
    }
    .bx-hover-glow:hover::after,
    .bx-hover-glow:focus-visible::after {
      opacity: 1;
      animation: bx-cyan-edge-sweep 1.4s ease-in-out infinite;
    }
  }

  /* Hero glow ring — apply to large hero-y containers */
  .bx-pulse-ring {
    position: relative;
  }
  .bx-pulse-ring::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    pointer-events: none;
    z-index: -1;
    background: radial-gradient(ellipse at center, rgba(0, 229, 255, 0.18), transparent 70%);
    animation: bx-pulse-glow 4.6s ease-in-out infinite;
  }

  /* Drifting ambient layer — apply to decorative SVG/img backgrounds */
  .bx-drift   { animation: bx-drift-slow 18s ease-in-out infinite alternate; will-change: transform; }
  .bx-spin    { animation: bx-spin-slow 60s linear infinite; transform-origin: center; will-change: transform; }
  .bx-breath  { animation: bx-breath 5s ease-in-out infinite; will-change: transform, opacity; }
  .bx-flicker { animation: bx-flicker 6s ease-in-out infinite; }

  /* Headline shimmer — for hero h1 / section titles */
  .bx-shimmer {
    background: linear-gradient(110deg,
      currentColor 0%,
      currentColor 35%,
      rgba(0, 229, 255, 0.95) 50%,
      currentColor 65%,
      currentColor 100%);
    background-size: 200% auto;
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    animation: bx-text-shimmer 6s linear infinite;
  }

  /* Number-counter pop on reveal */
  @media (prefers-reduced-motion: no-preference) {
    .bx-counter-pop.is-visible,
    .bx-counter-pop.is-revealed {
      animation: bx-zoom-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
    }
  }

  /* MUD scanline overlay — subtle moving phosphor lines */
  .bx-scanlines { position: relative; }
  .bx-scanlines::after {
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
      180deg,
      rgba(0, 229, 255, 0.04) 0px,
      rgba(0, 229, 255, 0.04) 1px,
      transparent 1px,
      transparent 4px
    );
    mix-blend-mode: screen;
    animation: bx-drift-slow 22s linear infinite;
    border-radius: inherit;
    z-index: 1;
  }

  /* Plate-card shimmer — light sweep across image */
  .bx-shimmer-card {
    position: relative;
    overflow: hidden;
  }
  .bx-shimmer-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg,
      transparent 30%,
      rgba(255, 255, 255, 0.18) 50%,
      transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.9s ease;
    pointer-events: none;
    z-index: 2;
  }
  @media (hover: hover) and (pointer: fine) {
    .bx-shimmer-card:hover::before { transform: translateX(100%); }
  }

  /* Dossier-feature variety — alternate entrance per nth-of-type */
  @media (prefers-reduced-motion: no-preference) {
    .dossier-feature.reveal-section:not(.is-revealed) {
      filter: blur(8px) saturate(0.6);
      opacity: 0;
      transform: translate3d(0, 28px, 0) scale(0.985);
    }
    .dossier-feature.reveal-section.is-revealed {
      filter: blur(0) saturate(1);
      opacity: 1;
      transform: translate3d(0, 0, 0) scale(1);
      transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                  transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
                  filter 1.1s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .dossier-feature.reveal-section[data-severity="5"]:not(.is-revealed) {
      transform: translate3d(0, 28px, 0) rotate(-0.4deg) scale(0.98);
    }
    .dossier-feature.reveal-section[data-severity="4"]:not(.is-revealed) {
      transform: translate3d(-22px, 18px, 0) scale(0.985);
    }
  }

  /* Timeline node entrance — pop with stagger when section visible */
  @media (prefers-reduced-motion: no-preference) {
    .timeline-section.is-revealed .tl-item,
    .timeline-section.is-visible .tl-item {
      animation: bx-zoom-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) both;
    }
    .timeline-section .tl-item:nth-child(1) { animation-delay: 0.05s; }
    .timeline-section .tl-item:nth-child(2) { animation-delay: 0.12s; }
    .timeline-section .tl-item:nth-child(3) { animation-delay: 0.19s; }
    .timeline-section .tl-item:nth-child(4) { animation-delay: 0.26s; }
    .timeline-section .tl-item:nth-child(5) { animation-delay: 0.33s; }
    .timeline-section .tl-item:nth-child(6) { animation-delay: 0.40s; }
    .timeline-section .tl-item:nth-child(7) { animation-delay: 0.47s; }
    .timeline-section .tl-item:nth-child(n+8) { animation-delay: 0.54s; }
  }

  /* Pillar / dossier-card hover lift + glow halo */
  @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .pillar, .dossier-card, .live-feed-item, .plate-tile, .evidence-card {
      transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                  box-shadow 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                  border-color 0.3s ease;
    }
    .pillar:hover, .dossier-card:hover, .live-feed-item:hover,
    .plate-tile:hover, .evidence-card:hover {
      transform: translateY(-5px);
      box-shadow:
        0 14px 32px -12px rgba(0, 229, 255, 0.32),
        0 26px 56px -22px rgba(124, 58, 237, 0.42);
    }
  }

  /* Plate vault subtle scan-shimmer on hover */
  @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .plate-tile { position: relative; overflow: hidden; }
    .plate-tile::after {
      content: "";
      position: absolute; inset: 0;
      background: linear-gradient(120deg,
        transparent 30%,
        rgba(0, 229, 255, 0.18) 50%,
        transparent 70%);
      transform: translateX(-110%);
      transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
      pointer-events: none;
      mix-blend-mode: screen;
      z-index: 3;
    }
    .plate-tile:hover::after { transform: translateX(110%); }
  }

  /* Hero MUD terminal phosphor — soft scanlines drifting */
  @media (prefers-reduced-motion: no-preference) {
    .mud-terminal-frame, .mud-shell, #mud-terminal { position: relative; }
    .mud-terminal-frame::after, .mud-shell::after {
      content: "";
      position: absolute; inset: 0;
      pointer-events: none;
      background: repeating-linear-gradient(
        180deg,
        rgba(0, 229, 255, 0.05) 0,
        rgba(0, 229, 255, 0.05) 1px,
        transparent 1px,
        transparent 4px
      );
      mix-blend-mode: screen;
      animation: bx-drift-slow 22s linear infinite;
      border-radius: inherit;
    }
  }

  /* Newsletter button breath */
  @media (prefers-reduced-motion: no-preference) {
    .newsletter-section .btn-primary,
    .newsletter-section button[type="submit"] {
      animation: bx-breath 4.6s ease-in-out infinite;
      will-change: transform;
    }
  }

  /* Hotline number gentle pulse-glow ring */
  @media (prefers-reduced-motion: no-preference) {
    .hotline-section { position: relative; }
    .hotline-section::before {
      content: "";
      position: absolute;
      left: 50%; top: 50%;
      width: 60vmin; height: 60vmin;
      transform: translate(-50%, -50%);
      pointer-events: none;
      z-index: 0;
      background: radial-gradient(circle at center,
        rgba(0, 229, 255, 0.16) 0%,
        rgba(124, 58, 237, 0.10) 35%,
        transparent 70%);
      animation: bx-breath 7s ease-in-out infinite;
      filter: blur(18px);
    }
    .hotline-section > * { position: relative; z-index: 1; }
  }

  /* Universal reduced-motion gate */
  @media (prefers-reduced-motion: reduce) {
    .bx-drift, .bx-spin, .bx-breath, .bx-flicker, .bx-shimmer, .bx-scanlines::after,
    .bx-pulse-ring::before, .bx-counter-pop, .bx-hover-glow::after, .bx-shimmer-card::before {
      animation: none !important;
    }
    .bx-stagger > * { animation: none !important; opacity: 1 !important; }
    .reveal-section.bx-from-left:not(.is-revealed),
    .reveal-section.bx-from-right:not(.is-revealed),
    .reveal-section.bx-zoom:not(.is-revealed),
    .reveal-section.bx-tilt:not(.is-revealed),
    .reveal-section.bx-blur:not(.is-revealed) {
      transform: none !important; opacity: 1 !important; filter: none !important;
    }
  }

  /* ---------- Editorial Typography (refined, elegant, hermosa) ---------- */
  .hero-copy h1, .docs-hero h1, .legal-hero h1, .dossier-feature-title {
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.04;
    text-wrap: balance;
  }
  .panel h2, .endpoint-header h2, .docs-section-head h2,
  .legal-section h2, .dev-quickstart-header h2, .docs-cta h2,
  .footer-cta h2, .api-section h2, .docs-toc h2,
  .dossier-intro h2, .avatar-frame-section .panel-copy h2 {
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.12;
    font-size: clamp(1.65rem, 2.4vw, 2.35rem);
    text-wrap: balance;
  }
  .pillar-card h3, .snap-vault-intro h3, .usecase-card h3, .family-card h3,
  .legal-section h3, .panel h3, .api-section h3, .casino-game h3,
  .chat-header h3, .feature-card h3, .timeline-event h3,
  .transmission-card h3, .newsletter-card h3, .mud-terminal h3,
  .site-footer h3, .footer-cta h3, .celestial-chapter-title {
    font-family: var(--font-heading);
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1.18;
    font-size: clamp(1.15rem, 1.55vw, 1.4rem);
    text-wrap: balance;
  }
  .lede, .dossier-feature-lede, .dossier-intro p,
  .docs-hero p, .legal-hero p {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(1.25rem, 1.55vw, 1.55rem);
    line-height: 1.55;
    letter-spacing: 0.005em;
    color: rgba(255, 255, 255, 0.86);
    text-wrap: pretty;
  }
  .legal-updated { font-size: 0.95rem; opacity: 0.7; letter-spacing: 0.08em; }
  body { text-wrap: pretty; }

  /* ---------- Animation keyframes ---------- */
  @keyframes gx-gradient-flow {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
  }
  @keyframes gx-aurora-drift {
    0%, 100% { transform: translate3d(-4%, -3%, 0) scale(1);    opacity: 0.5; }
    50%      { transform: translate3d(4%, 3%, 0)  scale(1.06); opacity: 0.65; }
  }
  @keyframes gx-aurora-drift-2 {
    0%, 100% { transform: translate3d(5%, 4%, 0)   scale(1.04); opacity: 0.32; }
    50%      { transform: translate3d(-5%, -4%, 0) scale(1.10); opacity: 0.5; }
  }
  @keyframes gx-pulse-glow {
    0%, 100% { filter: drop-shadow(0 0 14px rgba(0, 229, 255, 0.16)); }
    50%      { filter: drop-shadow(0 0 26px rgba(124, 58, 237, 0.32)); }
  }
  @keyframes gx-shimmer {
    0%   { transform: translateX(-120%) skewX(-18deg); opacity: 0; }
    50%  { opacity: 1; }
    100% { transform: translateX(220%)  skewX(-18deg); opacity: 0; }
  }

  /* ---------- Hermosa gradient titles (soft, pearlescent) ---------- */
  .hero-copy h1, .dossier-feature-title, .docs-hero h1, .legal-hero h1,
  .gradient-text {
    background: linear-gradient(115deg,
      #ffffff 0%,
      #d8f4ff 22%,
      #00E5FF 45%,
      #b59cff 68%,
      #ffffff 100%);
    background-size: 240% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: gx-gradient-flow 16s ease-in-out infinite;
  }

  /* ---------- Soft aurora ambient (gentle, atmospheric) ---------- */
  .hero, .dossier-feature, .docs-hero, .legal-hero {
    position: relative;
    isolation: isolate;
  }
  .hero::after, .dossier-feature::after,
  .docs-hero::after, .legal-hero::after {
    content: "";
    position: absolute;
    inset: -8% -4%;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(42% 36% at 24% 28%, rgba(0, 229, 255, 0.10), transparent 65%),
      radial-gradient(38% 32% at 76% 72%, rgba(124, 58, 237, 0.13), transparent 65%);
    filter: blur(50px) saturate(1.05);
    animation: gx-aurora-drift 26s ease-in-out infinite;
    will-change: transform, opacity;
  }
  .hero::before, .dossier-feature::before {
    content: "";
    position: absolute;
    inset: -4% -8%;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(48% 42% at 82% 18%, rgba(0, 229, 255, 0.06), transparent 65%),
      radial-gradient(42% 38% at 14% 82%, rgba(124, 58, 237, 0.08), transparent 65%);
    filter: blur(70px);
    animation: gx-aurora-drift-2 32s ease-in-out infinite;
    will-change: transform, opacity;
  }

  /* ---------- Refined hover micro-interactions ---------- */
  .cta-primary, .cta-secondary, .button-primary, .button-secondary,
  .docs-cta a, button.send-message {
    transition:
      transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
      box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1),
      filter 0.5s ease;
    position: relative;
    overflow: hidden;
  }
  .cta-primary:hover, .cta-secondary:hover, .button-primary:hover,
  .button-secondary:hover, .docs-cta a:hover, button.send-message:hover {
    transform: translateY(-2px);
    filter: drop-shadow(0 10px 28px rgba(0, 229, 255, 0.22));
  }
  .cta-primary::after, .cta-secondary::after,
  .button-primary::after, .button-secondary::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0; width: 60%;
    background: linear-gradient(110deg, transparent 0%,
      rgba(255, 255, 255, 0.22) 50%, transparent 100%);
    transform: translateX(-120%) skewX(-18deg);
    pointer-events: none;
  }
  .cta-primary:hover::after, .cta-secondary:hover::after,
  .button-primary:hover::after, .button-secondary:hover::after {
    animation: gx-shimmer 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  .pillar-card, .feature-card, .usecase-card, .family-card, .transmission-card {
    transition:
      transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
      box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1),
      border-color 0.6s ease;
  }
  .pillar-card:hover, .feature-card:hover, .usecase-card:hover,
  .family-card:hover, .transmission-card:hover {
    transform: translateY(-4px);
    box-shadow:
      0 24px 60px -22px rgba(0, 0, 0, 0.55),
      0 0 0 1px rgba(0, 229, 255, 0.16),
      0 16px 48px -24px rgba(124, 58, 237, 0.32);
  }

  .brand-logo { animation: gx-pulse-glow 6.5s ease-in-out infinite; }

  @media (prefers-reduced-motion: reduce) {
    .hero-copy h1, .dossier-feature-title, .docs-hero h1, .legal-hero h1,
    .gradient-text, .brand-logo,
    .hero::before, .hero::after,
    .dossier-feature::before, .dossier-feature::after,
    .docs-hero::after, .legal-hero::after,
    .cta-primary::after, .cta-secondary::after,
    .button-primary::after, .button-secondary::after {
      animation: none !important;
    }
    .cta-primary:hover, .cta-secondary:hover, .button-primary:hover,
    .button-secondary:hover, .docs-cta a:hover, button.send-message:hover,
    .pillar-card:hover, .feature-card:hover, .usecase-card:hover,
    .family-card:hover, .transmission-card:hover {
      transform: none !important;
    }
  }
}

/* ---------- Middle-Earth Map Background ---------- */
@layer components {
  .middle-earth-section {
    position: relative;
    isolation: isolate;
    min-height: 80vh;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    padding: 0 0 clamp(3.5rem, 6vw, 6rem);
  }

  /* Photo layer */
  .middle-earth-photo {
    position: absolute; inset: 0;
    background: url('/middle-earth-map.webp') center / cover no-repeat;
    transform: scale(1.04);
    animation: me-photo-slow-zoom 40s ease-in-out infinite alternate;
  }
  @keyframes me-photo-slow-zoom {
    0%   { transform: scale(1.04) translateX(0); }
    100% { transform: scale(1.12) translateX(-2%); }
  }

  /* Dark scrim — heavy at top, fades mid, heavier at bottom for text legibility */
  .middle-earth-scrim {
    position: absolute; inset: 0;
    background:
      linear-gradient(to bottom,
        rgba(6, 6, 16, 0.65) 0%,
        rgba(6, 6, 16, 0.20) 38%,
        rgba(6, 6, 16, 0.22) 55%,
        rgba(6, 6, 16, 0.80) 78%,
        rgba(6, 6, 16, 0.97) 100%
      );
    pointer-events: none;
  }

  /* SVG ghost/path overlay — covers full section */
  .middle-earth-overlay {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
  }

  /* Text shell sits at bottom */
  .middle-earth-shell {
    position: relative; z-index: 2;
    display: flex; flex-direction: column; gap: 1.2rem;
    width: 100%;
  }
  .middle-earth-meta {
    display: flex; align-items: center; gap: 1rem;
  }
  .middle-earth-title {
    font-family: "Cinzel", "Cormorant Garamond", serif;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.05;
    font-size: clamp(2rem, 5vw, 4.2rem);
    background: linear-gradient(115deg, #f7d373 0%, #ffffff 30%, #00E5FF 55%, #b59cff 78%, #f7d373 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text; background-clip: text;
    color: transparent;
    text-wrap: balance;
    animation: me-title-flow 18s ease-in-out infinite;
    margin: 0;
    text-shadow: none;
  }
  @keyframes me-title-flow {
    0%, 100% { background-position: 0% 50%; }
    50%       { background-position: 100% 50%; }
  }
  .middle-earth-lede {
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(1.1rem, 2vw, 1.38rem);
    line-height: 1.55;
    color: rgba(232, 230, 240, 0.9);
    text-wrap: pretty;
    max-width: 72ch;
    margin: 0;
  }
  .middle-earth-explainer {
    font-family: "Cormorant Garamond", serif;
    font-style: italic;
    font-size: clamp(1rem, 1.6vw, 1.18rem);
    line-height: 1.6;
    color: rgba(200, 196, 220, 0.82);
    max-width: 78ch;
    margin: 0;
  }
  .middle-earth-explainer a {
    color: #00E5FF;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 229, 255, 0.38);
    transition: color 180ms ease, border-color 180ms ease;
  }
  .middle-earth-explainer a:hover { color: #fff; border-bottom-color: rgba(255,255,255,0.8); }
  .middle-earth-explainer a:focus-visible { outline: 2px solid #00E5FF; outline-offset: 3px; border-radius: 2px; }

  /* Mordor halo pulse */
  .me-mordor-pulse { transform-origin: 970px 555px; animation: me-mordor-breathe 5s ease-in-out infinite; }
  @keyframes me-mordor-breathe {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.1); opacity: 0.78; }
  }

  /* Shire warm breathe */
  .me-shire-breathe { animation: me-shire-pulse 7s ease-in-out infinite; }
  @keyframes me-shire-pulse {
    0%, 100% { opacity: 0.85; r: 120; }
    50%      { opacity: 1; r: 135; }
  }

  /* Fellowship path — always drawing on loop */
  .me-path--on {
    filter: drop-shadow(0 0 7px rgba(255, 209, 102, 0.75));
    stroke-dashoffset: 1800;
    animation: me-path-draw 18s linear infinite;
  }
  @keyframes me-path-draw {
    0%   { stroke-dashoffset: 1800; opacity: 0.3; }
    8%   { opacity: 0.72; }
    85%  { stroke-dashoffset: 0; opacity: 0.72; }
    100% { stroke-dashoffset: 0; opacity: 0; }
  }

  /* Traveler dot */
  .me-traveler--on {
    offset-path: path("M 175 305 C 220 307, 280 315, 340 315 S 410 307, 430 305 S 520 293, 558 275 C 590 305, 580 365, 565 390 C 590 405, 620 420, 645 430 C 660 455, 670 500, 685 535 C 720 550, 770 560, 820 580 C 870 580, 920 580, 950 577");
    animation: me-traveler-walk 18s linear infinite;
  }
  @keyframes me-traveler-walk {
    0%   { offset-distance: 0%; opacity: 0; }
    5%   { opacity: 0.9; }
    85%  { offset-distance: 100%; opacity: 0.9; }
    100% { offset-distance: 100%; opacity: 0; }
  }

  /* Ghost wisps */
  .me-ghost {
    transform: translate(var(--gx-x), var(--gx-y));
    animation: me-ghost-float 7s ease-in-out infinite;
    animation-delay: var(--gx-d);
  }
  @keyframes me-ghost-float {
    0%, 100% { opacity: 0.45; }
    50%      { opacity: 0.9; }
  }
  .me-ghost circle:last-child {
    animation: me-ghost-wisp 7s ease-in-out infinite;
    animation-delay: var(--gx-d);
  }
  @keyframes me-ghost-wisp {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25%      { transform: translate(-3px, -5px) scale(1.08); }
    50%      { transform: translate(2px, -10px) scale(1.15); }
    75%      { transform: translate(4px, -4px) scale(1.06); }
  }

  @media (max-width: 768px) {
    .middle-earth-section { min-height: 60vh; }
  }

  @media (prefers-reduced-motion: reduce) {
    .middle-earth-photo,
    .me-mordor-pulse,
    .me-shire-breathe,
    .me-ghost,
    .me-ghost circle:last-child,
    .middle-earth-title { animation: none !important; }
    .me-path--on { stroke-dashoffset: 0; animation: none !important; opacity: 0.6; }
    .me-traveler--on { animation: none !important; opacity: 0.8; offset-distance: 50%; }
  }
}

/* ---------- Hobbit Section ---------- */
@layer components {
  .hobbit-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }
  .hobbit-section-photo {
    position: absolute;
    inset: 0;
    background: url('/middle-earth-map.webp') center / cover no-repeat;
    z-index: -2;
    transform: scale(1.04);
    animation: hobbit-photo-breathe 40s ease-in-out infinite alternate;
  }
  @keyframes hobbit-photo-breathe {
    0%   { transform: scale(1.04) translateX(0); }
    100% { transform: scale(1.12) translateX(-2%); }
  }
  .hobbit-section-scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      linear-gradient(to bottom,
        rgba(6, 6, 16, 0.78) 0%,
        rgba(6, 6, 16, 0.38) 30%,
        rgba(6, 6, 16, 0.52) 65%,
        rgba(6, 6, 16, 0.90) 100%);
    transition: opacity 0.1s ease-out;
  }
  .hobbit-section[data-beat="1"] .hobbit-section-scrim {
    opacity: 0.85;
  }

  /* Audio player */
  .hobbit-audio-wrap {
    position: relative;
    margin: 2.5rem 0 0.5rem;
    border-radius: 18px;
    background: rgba(6, 6, 16, 0.68);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 148, 38, 0.28);
    overflow: hidden;
    box-shadow: 0 0 50px rgba(255, 110, 18, 0.10), inset 0 0 80px rgba(6, 6, 16, 0.45);
  }
  .hobbit-viz {
    display: block;
    width: 100%;
    height: 280px;
    border-radius: 18px 18px 0 0;
  }
  .hobbit-embers {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 280px;
    pointer-events: none;
    overflow: hidden;
  }
  .hobbit-audio-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1.4rem 1.1rem;
  }
  .hobbit-play-btn {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    background: linear-gradient(135deg, rgba(255, 148, 30, 0.22), rgba(255, 72, 12, 0.12));
    border: 1px solid rgba(255, 148, 30, 0.45);
    border-radius: 50px;
    padding: 0.48rem 1.1rem 0.48rem 0.8rem;
    color: #ffb040;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, color 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .hobbit-play-btn:hover {
    background: linear-gradient(135deg, rgba(255, 148, 30, 0.38), rgba(255, 72, 12, 0.22));
    border-color: rgba(255, 148, 30, 0.75);
    box-shadow: 0 0 22px rgba(255, 115, 18, 0.32);
    color: #ffc85a;
  }
  .hobbit-play-btn[aria-pressed="true"] {
    background: linear-gradient(135deg, rgba(255, 148, 30, 0.42), rgba(255, 72, 12, 0.28));
    border-color: rgba(255, 148, 30, 0.85);
    box-shadow: 0 0 30px rgba(255, 115, 18, 0.45);
    color: #ffd070;
  }
  .hobbit-play-icon svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    flex-shrink: 0;
  }
  .hobbit-track-name {
    font-size: 0.76rem;
    color: rgba(255, 200, 120, 0.88);
    letter-spacing: 0.04em;
  }
  .hobbit-playing-badge {
    font-size: 0.60rem;
    color: #ff5a18;
    letter-spacing: 0.14em;
    opacity: 0;
    transition: opacity 0.5s;
  }
  .hobbit-play-btn[aria-pressed="true"] .hobbit-playing-badge {
    opacity: 1;
    animation: hobbit-badge-pulse 2s ease-in-out infinite;
  }
  @keyframes hobbit-badge-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.3; }
  }
  .hobbit-progress-outer {
    flex: 1;
    height: 5px;
    background: rgba(255, 148, 30, 0.14);
    border-radius: 3px;
    overflow: visible;
    position: relative;
    cursor: pointer;
    min-width: 0;
  }
  .hobbit-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #ff9018, #ff3c08);
    border-radius: 3px;
    transition: width 0.25s linear;
  }
  .hobbit-progress-glow {
    position: absolute;
    inset: -3px -3px -3px 0;
    width: 0%;
    background: linear-gradient(90deg, rgba(255, 130, 20, 0.55), transparent);
    border-radius: 3px;
    pointer-events: none;
    filter: blur(4px);
    transition: width 0.25s linear;
  }
  .hobbit-time {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 0.68rem;
    color: rgba(255, 180, 80, 0.65);
    flex-shrink: 0;
    min-width: 3.2rem;
    text-align: right;
  }

  @media (prefers-reduced-motion: reduce) {
    .hobbit-section-photo { animation: none !important; }
  }
}

/* ---------- Porcine Section ---------- */
@layer components {
  .porcine-section {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }
  .porcine-photo {
    position: absolute;
    inset: 0;
    background: url('/white-house-bg.webp') center / cover no-repeat;
    z-index: -2;
    animation: porcine-photo-pan 60s ease-in-out infinite alternate;
  }
  @keyframes porcine-photo-pan {
    0%   { transform: scale(1.0) translateY(0); }
    100% { transform: scale(1.08) translateY(-2%); }
  }
  .porcine-scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      linear-gradient(to bottom,
        rgba(6, 6, 16, 0.82) 0%,
        rgba(6, 6, 16, 0.38) 30%,
        rgba(6, 6, 16, 0.55) 68%,
        rgba(6, 6, 16, 0.93) 100%);
  }

  /* Animated flag */
  .porcine-flag-wrap {
    position: absolute;
    top: 2.2rem;
    right: clamp(1.5rem, 5vw, 4rem);
    width: clamp(110px, 16vw, 220px);
    z-index: 2;
    filter: drop-shadow(0 6px 28px rgba(0, 0, 40, 0.62));
    transform-origin: 4px 50%;
    animation: flag-wave-wrap 3.5s ease-in-out infinite;
  }
  @keyframes flag-wave-wrap {
    0%   { transform: rotate(-0.8deg) skewY(0deg); }
    20%  { transform: rotate(0.6deg) skewY(0.3deg); }
    40%  { transform: rotate(1.4deg) skewY(-0.2deg); }
    60%  { transform: rotate(0.4deg) skewY(0.15deg); }
    80%  { transform: rotate(-1.0deg) skewY(-0.1deg); }
    100% { transform: rotate(-0.8deg) skewY(0deg); }
  }
  .porcine-flag {
    width: 100%;
    height: auto;
    border: 1.5px solid rgba(255, 255, 255, 0.22);
    border-radius: 2px;
  }

  @media (prefers-reduced-motion: reduce) {
    .porcine-photo  { animation: none !important; }
    .porcine-flag-wrap { animation: none !important; }
  }
}

/* ---------- Signal-fact callout ---------- */
@layer components {
  .dossier-feature-body--signal-fact {
    border-left: 3px solid var(--color-primary, #00e5ff);
    padding-left: 1.1rem;
    font-style: italic;
    color: rgba(0, 229, 255, 0.82);
    margin: 1.1rem 0;
  }
}

/* ---------- Placeholder chapters ---------- */
@layer components {
  .celestial-chapter--placeholder {
    opacity: 0.52;
    border: 1px dashed rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    padding: 1rem 1.2rem;
  }
  .celestial-chapter--placeholder .dossier-feature-body {
    font-style: italic;
    color: rgba(255, 255, 255, 0.42);
    font-size: 0.88rem;
  }
}

/* ---------- Site Doodles ---------- */
@layer components {
  #main { position: relative; }

  #site-doodles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    overflow: hidden;
  }

  .sdoodle {
    position: absolute;
    opacity: 0.13;
    will-change: transform;
  }

  /* Ghost — hero area, right side */
  .sdoodle--ghost {
    top: 6vh;
    right: 3%;
    width: clamp(50px, 7vw, 90px);
    animation: sdoodle-float 7s ease-in-out infinite;
  }
  @keyframes sdoodle-float {
    0%, 100% { transform: translateY(0); opacity: 0.13; }
    50%       { transform: translateY(-18px); opacity: 0.22; }
  }

  /* EMF ripples — chart zone, left */
  .sdoodle--ripples {
    top: 18vh;
    left: 1.5%;
    width: clamp(60px, 9vw, 120px);
    animation: sdoodle-pulse 4s ease-in-out infinite;
  }
  @keyframes sdoodle-pulse {
    0%, 100% { transform: scale(1); opacity: 0.11; }
    50%       { transform: scale(1.08); opacity: 0.19; }
  }

  /* Rune wheel — manifesto zone, right */
  .sdoodle--rune-wheel {
    top: 28vh;
    right: 2%;
    width: clamp(70px, 10vw, 130px);
    animation: sdoodle-spin 40s linear infinite;
    opacity: 0.1;
  }
  @keyframes sdoodle-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }

  /* Constellation — timeline zone, left */
  .sdoodle--constellation {
    top: 38vh;
    left: 0.5%;
    width: clamp(80px, 12vw, 160px);
    animation: sdoodle-twinkle 5s ease-in-out infinite;
  }
  @keyframes sdoodle-twinkle {
    0%, 100% { opacity: 0.12; }
    33%       { opacity: 0.22; }
    66%       { opacity: 0.08; }
  }

  /* Circuit — dev quickstart zone, right */
  .sdoodle--circuit {
    top: 22vh;
    right: 0.5%;
    width: clamp(80px, 11vw, 140px);
    animation: sdoodle-flicker 8s ease-in-out infinite;
    opacity: 0.1;
  }
  @keyframes sdoodle-flicker {
    0%, 90%, 100% { opacity: 0.10; }
    92%            { opacity: 0.22; }
    95%            { opacity: 0.06; }
    97%            { opacity: 0.20; }
  }

  /* Eye — dossier zone, center-left */
  .sdoodle--eye {
    top: 48vh;
    left: 2%;
    width: clamp(70px, 9vw, 110px);
    animation: sdoodle-blink 6s ease-in-out infinite;
    opacity: 0.12;
  }
  @keyframes sdoodle-blink {
    0%, 100% { opacity: 0.12; transform: scaleY(1); }
    45%       { opacity: 0.20; transform: scaleY(1); }
    50%       { opacity: 0.06; transform: scaleY(0.1); }
    55%       { opacity: 0.20; transform: scaleY(1); }
  }

  /* Moth — lower page, right */
  .sdoodle--moth {
    top: 68vh;
    right: 2%;
    width: clamp(60px, 8vw, 110px);
    animation: sdoodle-moth-flutter 0.18s ease-in-out infinite alternate, sdoodle-moth-drift 12s ease-in-out infinite;
    opacity: 0.12;
  }
  @keyframes sdoodle-moth-flutter {
    from { transform: scaleX(1); }
    to   { transform: scaleX(0.88); }
  }
  @keyframes sdoodle-moth-drift {
    0%, 100% { transform: translateY(0) translateX(0); }
    30%       { transform: translateY(-12px) translateX(6px); }
    70%       { transform: translateY(8px) translateX(-4px); }
  }

  /* Signal wave — mid page, left */
  .sdoodle--wave {
    top: 56vh;
    left: 0.5%;
    width: clamp(100px, 15vw, 200px);
    animation: sdoodle-wave-scroll 3s linear infinite;
    opacity: 0.1;
  }
  @keyframes sdoodle-wave-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-20px); }
  }

  /* Sacred geometry — lower page center-right */
  .sdoodle--geometry {
    top: 78vh;
    right: 3%;
    width: clamp(60px, 9vw, 100px);
    animation: sdoodle-geo-spin 80s linear infinite reverse, sdoodle-pulse 8s ease-in-out infinite;
    opacity: 0.08;
  }

  /* Reduce motion */
  @media (prefers-reduced-motion: reduce) {
    .sdoodle { animation: none !important; }
  }
}

/* ---------- Hobbit Player (gorgeous) ---------- */
@layer components {
  .hobbit-player {
    position: relative;
    margin: 2.5rem 0 0.5rem;
    border-radius: 20px;
    background: oklch(8% 0.025 50 / 0.82);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border: 1px solid oklch(60% 0.18 55 / 0.38);
    overflow: hidden;
    box-shadow:
      0 0 0 1px oklch(45% 0.12 55 / 0.12),
      0 8px 32px oklch(35% 0.22 45 / 0.22),
      0 0 80px oklch(45% 0.25 45 / 0.14),
      inset 0 1px 0 oklch(70% 0.18 60 / 0.12),
      inset 0 0 60px oklch(5% 0.01 50 / 0.6);
    transition: box-shadow 0.4s ease;
  }
  .hobbit-player:has(#hobbit-play[aria-pressed="true"]) {
    box-shadow:
      0 0 0 1px oklch(55% 0.2 45 / 0.2),
      0 8px 40px oklch(35% 0.25 45 / 0.35),
      0 0 120px oklch(50% 0.28 48 / 0.22),
      inset 0 1px 0 oklch(75% 0.2 55 / 0.18),
      inset 0 0 60px oklch(5% 0.01 50 / 0.55);
  }

  /* Header */
  .hobbit-player-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem 0.75rem;
    border-bottom: 1px solid oklch(55% 0.16 55 / 0.16);
    background: oklch(10% 0.03 50 / 0.4);
  }
  .hobbit-player-eyebrow {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.58rem;
    letter-spacing: 0.2em;
    color: oklch(70% 0.18 55 / 0.55);
    text-transform: uppercase;
    margin-bottom: 0.2rem;
  }
  .hobbit-player-title {
    display: block;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: oklch(88% 0.14 65);
    letter-spacing: 0.01em;
    margin-bottom: 0.15rem;
  }
  .hobbit-player-meta {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.58rem;
    color: oklch(65% 0.14 55 / 0.48);
    letter-spacing: 0.1em;
  }
  .hobbit-player-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    letter-spacing: 0.14em;
    color: oklch(68% 0.16 55 / 0.65);
    padding: 0.35rem 0.8rem;
    border: 1px solid oklch(58% 0.16 55 / 0.24);
    border-radius: 50px;
    background: oklch(12% 0.03 50 / 0.5);
    transition: color 0.4s, border-color 0.4s, background 0.4s, box-shadow 0.4s;
  }
  .hobbit-player-badge.is-live {
    color: oklch(72% 0.24 45);
    border-color: oklch(60% 0.28 40 / 0.5);
    background: oklch(15% 0.06 45 / 0.6);
    box-shadow: 0 0 12px oklch(55% 0.28 40 / 0.2);
  }
  .hobbit-badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.6;
    flex-shrink: 0;
  }
  .hobbit-player-badge.is-live .hobbit-badge-dot {
    opacity: 1;
    animation: badge-dot-pulse 1.4s ease-in-out infinite;
    box-shadow: 0 0 6px currentColor;
  }
  @keyframes badge-dot-pulse {
    0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 6px currentColor; }
    50%       { opacity: 0.25; transform: scale(0.65); box-shadow: 0 0 2px currentColor; }
  }

  /* Viz shell */
  .hobbit-viz-shell {
    position: relative;
  }
  .hobbit-viz {
    display: block;
    width: 100%;
    height: 280px;
  }
  .hobbit-embers {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 280px;
    pointer-events: none;
    overflow: hidden;
  }
  .hobbit-band-labels {
    position: absolute;
    bottom: 8px;
    left: 0; right: 0;
    display: flex;
    justify-content: space-around;
    padding: 0 1rem;
    pointer-events: none;
  }
  .hobbit-band-labels span {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.48rem;
    letter-spacing: 0.12em;
    color: oklch(68% 0.16 55 / 0.3);
    text-transform: uppercase;
  }

  /* VU meters — segmented LED style */
  .hobbit-vu-row {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 0.6rem 1.5rem 0.2rem;
    border-top: 1px solid oklch(55% 0.16 55 / 0.1);
    background: oklch(7% 0.02 50 / 0.3);
  }
  .hobbit-vu-track {
    display: flex;
    align-items: center;
    gap: 0.6rem;
  }
  .hobbit-vu-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.58rem;
    font-weight: 700;
    color: oklch(68% 0.16 55 / 0.55);
    width: 0.9rem;
    text-align: center;
    letter-spacing: 0.06em;
  }
  .hobbit-vu-meter {
    flex: 1;
    height: 7px;
    background: repeating-linear-gradient(
      90deg,
      oklch(25% 0.05 50 / 0.5) 0px,
      oklch(25% 0.05 50 / 0.5) 6px,
      transparent 6px,
      transparent 8px
    );
    border-radius: 2px;
    overflow: visible;
    position: relative;
  }
  .hobbit-vu-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg,
      oklch(62% 0.28 45) 0%,
      oklch(72% 0.22 70) 65%,
      oklch(82% 0.28 95) 85%,
      oklch(72% 0.32 30) 100%
    );
    border-radius: 2px;
    transition: width 0.04s linear;
    clip-path: inset(0 0 0 0);
    box-shadow: 0 0 8px oklch(60% 0.28 50 / 0.4);
  }

  /* Controls row */
  .hobbit-audio-controls {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 0.75rem 1.5rem 1.25rem;
    background: oklch(8% 0.025 50 / 0.5);
    border-top: 1px solid oklch(55% 0.16 55 / 0.12);
  }

  /* Play button — glowing ring */
  .hobbit-play-btn {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: linear-gradient(135deg, oklch(32% 0.2 50 / 0.55), oklch(22% 0.15 45 / 0.4));
    border: 1px solid oklch(60% 0.22 55 / 0.55);
    border-radius: 50px;
    padding: 0.55rem 1.2rem 0.55rem 0.85rem;
    color: oklch(82% 0.2 65);
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 0.76rem;
    letter-spacing: 0.07em;
    cursor: pointer;
    transition: background 0.25s, border-color 0.25s, box-shadow 0.25s, color 0.25s;
    white-space: nowrap;
    flex-shrink: 0;
    box-shadow: 0 0 14px oklch(50% 0.25 50 / 0.15), inset 0 1px 0 oklch(75% 0.2 65 / 0.12);
    position: relative;
  }
  .hobbit-play-btn::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 54px;
    border: 1px solid oklch(65% 0.28 55 / 0);
    transition: border-color 0.35s, box-shadow 0.35s;
    pointer-events: none;
  }
  .hobbit-play-btn:hover {
    background: linear-gradient(135deg, oklch(38% 0.24 52 / 0.65), oklch(26% 0.18 48 / 0.5));
    border-color: oklch(68% 0.25 58 / 0.75);
    box-shadow: 0 0 24px oklch(55% 0.28 50 / 0.3), inset 0 1px 0 oklch(80% 0.22 65 / 0.18);
    color: oklch(90% 0.18 70);
  }
  .hobbit-play-btn:hover::before {
    border-color: oklch(65% 0.28 55 / 0.25);
    box-shadow: 0 0 12px oklch(65% 0.28 55 / 0.15);
  }
  .hobbit-play-btn[aria-pressed="true"] {
    background: linear-gradient(135deg, oklch(42% 0.28 52 / 0.7), oklch(28% 0.2 48 / 0.55));
    border-color: oklch(72% 0.28 58 / 0.85);
    box-shadow: 0 0 36px oklch(58% 0.3 50 / 0.4), inset 0 1px 0 oklch(85% 0.22 68 / 0.2);
    color: oklch(94% 0.18 72);
  }
  .hobbit-play-btn[aria-pressed="true"]::before {
    border-color: oklch(68% 0.28 55 / 0.4);
    box-shadow: 0 0 18px oklch(65% 0.28 55 / 0.25);
    animation: play-ring-breathe 2.4s ease-in-out infinite;
  }
  @keyframes play-ring-breathe {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.45; }
  }
  .hobbit-play-icon svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
    flex-shrink: 0;
    filter: drop-shadow(0 0 4px currentColor);
  }
  .hobbit-track-name {
    font-size: 0.74rem;
    color: oklch(82% 0.18 65 / 0.9);
    letter-spacing: 0.05em;
  }
  .hobbit-playing-badge {
    font-size: 0.58rem;
    color: oklch(70% 0.32 45);
    letter-spacing: 0.16em;
    opacity: 0;
    transition: opacity 0.5s;
    text-shadow: 0 0 8px currentColor;
  }
  .hobbit-play-btn[aria-pressed="true"] .hobbit-playing-badge {
    opacity: 1;
    animation: hobbit-badge-pulse 2s ease-in-out infinite;
  }
  @keyframes hobbit-badge-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.25; }
  }

  /* Progress bar — thicker + glowing head */
  .hobbit-progress-outer {
    flex: 1;
    height: 7px;
    background: oklch(20% 0.04 50 / 0.6);
    border-radius: 4px;
    overflow: visible;
    position: relative;
    cursor: pointer;
    min-width: 0;
    box-shadow: inset 0 1px 2px oklch(5% 0.01 50 / 0.5);
  }
  .hobbit-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, oklch(52% 0.28 45), oklch(68% 0.28 55));
    border-radius: 4px;
    transition: width 0.25s linear;
    position: relative;
    box-shadow: 0 0 8px oklch(58% 0.28 50 / 0.5);
  }
  .hobbit-progress-fill::after {
    content: '';
    position: absolute;
    right: -1px;
    top: 50%;
    transform: translateY(-50%);
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: oklch(80% 0.22 65);
    box-shadow: 0 0 10px oklch(65% 0.28 55), 0 0 20px oklch(55% 0.28 50 / 0.5);
    opacity: 0;
    transition: opacity 0.3s;
  }
  .hobbit-progress-outer:hover .hobbit-progress-fill::after,
  #hobbit-play[aria-pressed="true"] ~ * .hobbit-progress-fill::after {
    opacity: 1;
  }
  .hobbit-progress-glow {
    position: absolute;
    inset: -4px 0 -4px 0;
    width: 0%;
    background: linear-gradient(90deg, oklch(52% 0.28 45 / 0.4), transparent);
    border-radius: 4px;
    pointer-events: none;
    filter: blur(5px);
    transition: width 0.25s linear;
  }
  .hobbit-time {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 0.66rem;
    color: oklch(70% 0.16 55 / 0.65);
    flex-shrink: 0;
    min-width: 3.2rem;
    text-align: right;
    letter-spacing: 0.04em;
  }

  @media (prefers-reduced-motion: reduce) {
    .hobbit-play-btn::before,
    .hobbit-player-badge.is-live .hobbit-badge-dot { animation: none !important; }
  }

  /* Exhibit evidence chips */
  .exhibit-evidence-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2rem;
  }
  .exhibit-detail-chip {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    background: oklch(14% 0.02 220 / 0.7);
    border: 1px solid oklch(55% 0.25 200 / 0.35);
    border-radius: 8px;
    padding: 0.6rem 1.1rem;
    min-width: 160px;
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .exhibit-detail-chip:hover {
    border-color: oklch(65% 0.28 200 / 0.55);
    box-shadow: 0 0 16px oklch(55% 0.28 200 / 0.12);
  }
  .exhibit-detail-label {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: oklch(65% 0.2 200 / 0.8);
  }
  .exhibit-detail-value {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    font-size: 0.82rem;
    color: #00E5FF;
    background: none;
    padding: 0;
    border-radius: 0;
    text-shadow: 0 0 10px oklch(75% 0.32 205 / 0.4);
  }
}

/* ---------- Global Polish (2026-05-05) ---------- */
@layer components {
  /* Stronger evidence callout glow on hover */
  .evidence-callout {
    transition: border-color 0.3s, box-shadow 0.3s;
  }
  .evidence-callout:hover {
    border-color: rgba(255, 23, 68, 0.38);
    box-shadow: 0 0 24px rgba(255, 23, 68, 0.08), inset 0 0 40px rgba(124, 58, 237, 0.04);
  }
  .evidence-callout-glow {
    background: linear-gradient(90deg, #00E5FF, #50AAE3);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.5));
    font-weight: 700;
  }
  @media (prefers-reduced-motion: no-preference) {
    .evidence-callout-glow {
      animation: callout-glow-breathe 4s ease-in-out infinite;
    }
  }
  @keyframes callout-glow-breathe {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.4)); }
    50%       { filter: drop-shadow(0 0 16px rgba(0, 229, 255, 0.75)); }
  }

  /* Dossier feature title — subtle glow on hover */
  .dossier-feature-title {
    transition: text-shadow 0.4s;
  }
  .dossier-feature-shell:hover .dossier-feature-title {
    text-shadow: 0 0 30px rgba(255, 255, 255, 0.12);
  }

  /* Eyebrow decoration — add left marker */
  .dossier-feature-meta .eyebrow::before {
    content: '▸';
    margin-right: 0.4em;
    opacity: 0.6;
    font-size: 0.75em;
  }

  /* Evidence section h2 — subtle bottom border glow */
  .evidence-section h2 {
    position: relative;
    padding-bottom: 0.6rem;
    margin-bottom: 1.5rem;
  }
  .evidence-section h2::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 3rem; height: 2px;
    background: linear-gradient(90deg, #ff1744, transparent);
    border-radius: 2px;
  }

  /* Progress bar head dot — always visible when playing */
  #hobbit-play[aria-pressed="true"] ~ .hobbit-audio-controls .hobbit-progress-fill::after {
    opacity: 1;
  }

  /* VU meter clip to segment grid */
  .hobbit-vu-fill {
    mask-image: repeating-linear-gradient(
      90deg,
      black 0px,
      black 6px,
      transparent 6px,
      transparent 8px
    );
    -webkit-mask-image: repeating-linear-gradient(
      90deg,
      black 0px,
      black 6px,
      transparent 6px,
      transparent 8px
    );
  }

  /* Section divider — enhanced glow */
  .section-divider {
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 23, 68, 0.35) 18%,
      rgba(124, 58, 237, 0.55) 48%,
      rgba(0, 229, 255, 0.35) 72%,
      rgba(122, 255, 174, 0.25) 88%,
      transparent 100%
    );
    margin: 4rem auto 3rem;
  }

  /* Chart skeleton loader */
  .chart-canvas-wrap { position: relative; }

  .chart-skeleton {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    gap: 2%;
    padding: 28px 28px 38px 52px;
    background: transparent;
    pointer-events: none;
  }

  .chart-skeleton[hidden] { display: none; }

  .chart-skeleton-bar {
    flex: 1;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(180deg, rgba(255,23,68,0.18) 0%, rgba(124,58,237,0.08) 100%);
    animation: skeletonPulse 1.4s ease-in-out infinite;
  }

  .chart-skeleton-bar:nth-child(2n) { animation-delay: 0.18s; }
  .chart-skeleton-bar:nth-child(3n) { animation-delay: 0.35s; }
  .chart-skeleton-bar:nth-child(4n) { animation-delay: 0.52s; }

  @keyframes skeletonPulse {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 0.9; }
  }

  /* Chart hover tooltip */
  .chart-tooltip {
    position: absolute;
    pointer-events: none;
    background: rgba(6, 6, 16, 0.92);
    border: 1px solid rgba(0,229,255,0.25);
    border-radius: 6px;
    padding: 6px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 120ms ease;
    z-index: 10;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .chart-tooltip-val { color: #00e5ff; font-weight: 700; font-size: 0.85rem; }
  .chart-tooltip-time { color: rgba(255,255,255,0.5); font-size: 0.65rem; }

  /* Entropy copy row */
  .entropy-number-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .entropy-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: 1px solid rgba(0,229,255,0.2);
    border-radius: 5px;
    cursor: pointer;
    color: rgba(0,229,255,0.55);
    flex-shrink: 0;
    transition: color 150ms, border-color 150ms, background 150ms;
  }

  .entropy-copy-btn:hover { color: #00e5ff; border-color: rgba(0,229,255,0.5); background: rgba(0,229,255,0.07); }
  .entropy-copy-btn:focus-visible { outline: 2px solid #00e5ff; outline-offset: 2px; }
  .entropy-copy-btn.is-copied { color: #7affae; border-color: rgba(122,255,174,0.4); }
  .entropy-copy-btn svg { width: 14px; height: 14px; }

  /* Hotline sample transcript */
  .hotline-transcript {
    margin: 1.5rem auto 0;
    max-width: 540px;
    background: rgba(6,6,16,0.7);
    border: 1px solid rgba(255,23,68,0.18);
    border-radius: 8px;
    overflow: hidden;
  }

  .hotline-transcript-label {
    display: block;
    padding: 6px 16px;
    background: rgba(255,23,68,0.1);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    color: rgba(255,23,68,0.8);
    text-align: left;
  }

  .hotline-transcript-body {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .transcript-line {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    line-height: 1.5;
    text-align: left;
    color: rgba(255,255,255,0.7);
  }

  .transcript-line--ai .transcript-speaker { color: #00e5ff; }
  .transcript-line--caller .transcript-speaker { color: rgba(255,255,255,0.4); }
  .transcript-speaker { font-weight: 700; margin-right: 0.4em; }

  /* Syntax highlight — inline token colors */
  .sh-kw  { color: #7C3AED; }
  .sh-fn  { color: #00E5FF; }
  .sh-str { color: #7AFFAE; }
  .sh-cmd { color: #FF6D00; font-weight: 600; }
  .sh-url { color: rgba(122,255,174,0.85); text-decoration: underline; text-underline-offset: 3px; }

  /* Bridge section */
  .bridge-section {
    display: flex;
    flex-direction: column;
    gap: 2rem;
  }

  .bridge-copy { max-width: 720px; }
  .bridge-copy h2 { margin-bottom: 1rem; }
  .bridge-copy p { color: rgba(255,255,255,0.72); line-height: 1.7; margin-bottom: 0.75rem; }

  .bridge-stat-row {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
  }

  .bridge-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: rgba(0,229,255,0.04);
    border: 1px solid rgba(0,229,255,0.12);
    border-radius: 8px;
    padding: 12px 20px;
    min-width: 120px;
  }

  .bridge-stat-val {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    font-weight: 700;
    color: #00E5FF;
  }

  .bridge-stat-label {
    font-size: 0.65rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.4);
  }

  .panel-intro-note {
    color: rgba(255,255,255,0.55);
    font-size: 0.95rem;
    margin-top: 0.5rem;
  }

  /* Hotline number secondary (inside hotline section, not hero) */
  .hotline-number--secondary {
    display: inline-block;
    margin-top: 1.25rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(1.1rem, 3vw, 1.5rem);
    font-weight: 700;
    color: rgba(255,255,255,0.55);
    text-decoration: none;
    letter-spacing: 0.05em;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 6px;
    padding: 6px 16px;
    transition: color 200ms, border-color 200ms;
  }

  .hotline-number--secondary:hover { color: #fff; border-color: rgba(255,255,255,0.3); }

  .hotline-number-note {
    font-size: 0.72rem;
    color: rgba(255,255,255,0.35);
    margin-top: 0.4rem;
    font-family: 'JetBrains Mono', monospace;
  }

  .hotline-number-note a { color: rgba(0,229,255,0.6); }

  /* 666 close section */
  .six-six-six-close {
    background: radial-gradient(ellipse at center, rgba(255,23,68,0.06) 0%, transparent 70%);
    border-top: 1px solid rgba(255,23,68,0.15);
    padding: 5rem 1.5rem;
    text-align: center;
  }

  .six-six-six-inner { max-width: 600px; margin: 0 auto; }

  .six-six-six-text {
    font-family: 'Cinzel', serif;
    font-size: clamp(3rem, 10vw, 6rem);
    font-weight: 900;
    color: rgba(255,23,68,0.85);
    line-height: 1;
    margin: 0.5rem 0 1.5rem;
    letter-spacing: 0.05em;
  }

  .six-six-six-sub {
    color: rgba(255,255,255,0.5);
    font-size: 0.9rem;
    line-height: 1.7;
    margin-bottom: 0.75rem;
  }

  .hotline-number--666 {
    display: inline-block;
    margin-top: 2rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(1rem, 3vw, 1.4rem);
    font-weight: 700;
    color: rgba(255,23,68,0.7);
    text-decoration: none;
    letter-spacing: 0.08em;
    border: 1px solid rgba(255,23,68,0.25);
    border-radius: 6px;
    padding: 8px 20px;
    transition: color 200ms, border-color 200ms, background 200ms;
  }

  .hotline-number--666:hover {
    color: #FF1744;
    border-color: rgba(255,23,68,0.5);
    background: rgba(255,23,68,0.07);
  }

  /* Porcine Directive section */
  .dossier-feature--signal { --signal-accent: #FF1744; }

  .dossier-feature-subtitle {
    font-size: clamp(0.9rem, 2vw, 1.1rem);
    color: rgba(255,255,255,0.55);
    font-style: normal;
    margin: 0.5rem 0 2rem;
    max-width: 600px;
  }

  .dossier-feature-subtitle em { color: rgba(255,23,68,0.85); font-style: italic; }

  .porcine-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  @media (min-width: 900px) {
    .porcine-grid {
      grid-template-columns: minmax(340px, 1fr) 1fr;
      align-items: start;
    }
  }

  .evidence-video-caption {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    color: rgba(255,255,255,0.35);
    letter-spacing: 0.08em;
    margin-top: 0.6rem;
    text-transform: uppercase;
  }

  /* button-outline variant */
  .button-outline {
    background: transparent;
    border: 1px solid rgba(0,229,255,0.3);
    color: rgba(0,229,255,0.8);
  }

  .button-outline:hover { border-color: #00E5FF; color: #00E5FF; background: rgba(0,229,255,0.06); }

  /* ═══════════════════════════════════════════════
     Listen to the Ghost — featured stylized section
     ═══════════════════════════════════════════════ */
  .listen-feature {
    position: relative;
    overflow: hidden;
    padding: clamp(4rem, 8vw, 7rem) 0;
    background: radial-gradient(ellipse 90% 70% at 50% 50%, rgba(124,58,237,0.18), rgba(0,229,255,0.04) 45%, #060610 80%);
    border-block: 1px solid rgba(0,229,255,0.18);
    isolation: isolate;
  }

  .listen-feature-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
  }

  .listen-feature-spectrogram {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    mix-blend-mode: screen;
    transition: opacity 1.2s ease-out;
    mask-image: radial-gradient(ellipse 110% 80% at 50% 50%, black 0%, black 55%, transparent 92%);
    -webkit-mask-image: radial-gradient(ellipse 110% 80% at 50% 50%, black 0%, black 55%, transparent 92%);
  }

  .listen-feature-spectrogram.is-active {
    opacity: 0.55;
  }

  .listen-feature-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80vmin;
    height: 80vmin;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,229,255,0.18) 0%, rgba(124,58,237,0.10) 38%, transparent 65%);
    transform: translate(-50%, -50%);
    filter: blur(8px);
    animation: listen-pulse 6s ease-in-out infinite;
  }

  .listen-feature-grid {
    position: absolute;
    inset: 0;
    background-image:
      linear-gradient(rgba(0,229,255,0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(0,229,255,0.05) 1px, transparent 1px);
    background-size: 56px 56px;
    mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 0%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 0%, transparent 75%);
    opacity: 0.45;
  }

  @keyframes listen-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(0.95); opacity: 0.85; }
    50%      { transform: translate(-50%, -50%) scale(1.05); opacity: 1; }
  }

  .listen-feature-shell {
    position: relative;
    text-align: center;
    max-width: 980px;
    margin: 0 auto;
  }

  .listen-feature-meta {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.4rem;
    padding: 0.4rem 0.9rem;
    border: 1px solid rgba(0,229,255,0.25);
    border-radius: 999px;
    background: rgba(6,6,16,0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }

  .listen-feature-meta .eyebrow { margin: 0; color: #00E5FF; }

  .listen-feature-badge {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: rgba(124,58,237,0.18);
    border: 1px solid rgba(124,58,237,0.4);
  }

  .listen-feature-title {
    font-family: 'Sora', sans-serif;
    font-size: clamp(2.6rem, 6.5vw, 5rem);
    line-height: 1.04;
    letter-spacing: -0.02em;
    margin: 0 0 1.2rem;
    text-wrap: balance;
  }

  .listen-feature-lede {
    font-size: clamp(1.05rem, 1.4vw, 1.25rem);
    line-height: 1.55;
    color: rgba(255,255,255,0.78);
    max-width: 720px;
    margin: 0 auto 2.6rem;
    text-wrap: pretty;
  }

  .listen-feature-control {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 3rem;
  }

  .listen-feature-button {
    position: relative;
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
    padding: 1.05rem 2.4rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 0 0 1px rgba(0,229,255,0.4), 0 18px 60px rgba(0,229,255,0.22), 0 6px 22px rgba(124,58,237,0.18);
    transition: transform 0.22s ease, box-shadow 0.22s ease;
    overflow: visible;
  }

  .listen-feature-button:hover {
    transform: translateY(-2px) scale(1.02);
    box-shadow: 0 0 0 1px rgba(0,229,255,0.6), 0 22px 70px rgba(0,229,255,0.32), 0 6px 24px rgba(124,58,237,0.26);
  }

  .listen-feature-button::before {
    content: "";
    position: absolute;
    inset: -10px;
    border-radius: inherit;
    border: 1px solid rgba(255,23,68,0.6);
    opacity: 0;
    pointer-events: none;
  }

  .listen-feature-button.is-active {
    background: linear-gradient(135deg, #FF1744, #7C3AED);
    box-shadow: 0 0 0 1px rgba(255,23,68,0.55), 0 22px 70px rgba(255,23,68,0.35);
  }

  .listen-feature-button.is-active::before {
    animation: listen-button-pulse 1.8s ease-out infinite;
    opacity: 1;
  }

  @keyframes listen-button-pulse {
    0%   { transform: scale(0.98); opacity: 0.65; }
    100% { transform: scale(1.18); opacity: 0; }
  }

  .listen-feature-hint {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    margin: 0;
  }

  .listen-feature-detector {
    display: grid;
    gap: 1.2rem;
    padding: 1.6rem clamp(1.2rem, 3vw, 2.2rem);
    background: rgba(6,6,16,0.6);
    border: 1px solid rgba(0,229,255,0.16);
    border-radius: 18px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    text-align: left;
    max-width: 760px;
    margin: 0 auto;
    box-shadow: 0 12px 40px rgba(0,0,0,0.45);
  }

  .listen-feature-detector-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  .listen-feature-detector .feature-inline-label {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(0,229,255,0.85);
  }

  .listen-feature-status {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
  }

  .listen-feature-meter {
    position: relative;
    height: 10px;
    background: linear-gradient(90deg, rgba(0,229,255,0.08), rgba(124,58,237,0.08));
    border: 1px solid rgba(0,229,255,0.18);
    border-radius: 999px;
    overflow: hidden;
  }

  .listen-feature-meter .detector-meter-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #00E5FF 0%, #7C3AED 60%, #FF1744 100%);
    box-shadow: 0 0 14px rgba(0,229,255,0.45);
    transition: width 0.35s ease, box-shadow 0.4s ease, filter 0.4s ease;
  }
  .listen-feature-meter .detector-meter-fill[data-state="local"] {
    box-shadow: 0 0 18px rgba(0,229,255,0.6);
    filter: saturate(1.15);
  }
  .listen-feature-meter .detector-meter-fill[data-state="remote"] {
    box-shadow: 0 0 22px rgba(255,23,68,0.65);
  }
  .listen-feature-meter .detector-meter-fill[data-state="ghost"] {
    box-shadow: 0 0 28px rgba(255,23,68,0.85), 0 0 14px rgba(124,58,237,0.6);
    animation: detector-ghost-pulse 0.9s ease-in-out infinite alternate;
  }
  @keyframes detector-ghost-pulse {
    from { filter: brightness(1) saturate(1.05); }
    to   { filter: brightness(1.25) saturate(1.4); }
  }
  .listen-feature-status[data-state="live"]    { color: rgba(0,229,255,0.95); }
  .listen-feature-status[data-state="warn"]    { color: rgba(255,23,68,0.95); }
  .listen-feature-status[data-state="waiting"] { color: rgba(255,200,80,0.85); }
  .listen-feature-status[data-state="denied"]  { color: rgba(255,109,0,0.9); }
  .listen-feature-status[data-state="offline"] { color: rgba(255,255,255,0.4); }
  .detector-enable-btn {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(0,229,255,0.18), rgba(124,58,237,0.18));
    border: 1px solid rgba(0,229,255,0.4);
    color: #fff;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.25s ease, background 0.25s ease;
  }
  .detector-enable-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,229,255,0.25); }
  .detector-enable-btn:disabled { opacity: 0.6; cursor: progress; }

  .listen-feature-readings {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  @media (min-width: 640px) {
    .listen-feature-readings { grid-template-columns: 1fr 1fr; }
  }

  .listen-feature-reading {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    padding: 1rem 1.2rem;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    background: rgba(255,255,255,0.02);
  }

  .listen-feature-reading--remote {
    border-color: rgba(255,23,68,0.25);
    background: rgba(255,23,68,0.04);
  }

  .listen-feature-reading-value {
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: #FAFAFF;
    line-height: 1;
    font-variant-numeric: tabular-nums;
  }

  .listen-feature-reading--remote .listen-feature-reading-value {
    color: #FF6D00;
    text-shadow: 0 0 18px rgba(255,109,0,0.4);
  }

  .listen-feature-reading-unit {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
  }

  .listen-feature-scanline {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 0%, transparent 48%, rgba(0,229,255,0.06) 50%, transparent 52%, transparent 100%);
    background-size: 100% 6px;
    mix-blend-mode: screen;
    opacity: 0.4;
    animation: listen-scanline 8s linear infinite;
    pointer-events: none;
  }

  @keyframes listen-scanline {
    0% { background-position: 0 0; }
    100% { background-position: 0 360px; }
  }

  .listen-feature-led {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #FF1744;
    box-shadow: 0 0 12px #FF1744, 0 0 24px rgba(255,23,68,0.6);
    animation: listen-led 1.6s ease-in-out infinite;
    flex-shrink: 0;
  }

  @keyframes listen-led {
    0%, 100% { opacity: 1; box-shadow: 0 0 12px #FF1744, 0 0 24px rgba(255,23,68,0.6); }
    50% { opacity: 0.4; box-shadow: 0 0 6px #FF1744, 0 0 12px rgba(255,23,68,0.3); }
  }

  .listen-feature-scope-wrap {
    position: relative;
    margin: 2.4rem 0 2rem;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(6,6,16,0.92) 0%, rgba(12,12,28,0.92) 100%);
    border: 1px solid rgba(0,229,255,0.18);
    box-shadow: 0 0 0 1px rgba(124,58,237,0.08), 0 30px 80px -30px rgba(0,229,255,0.4), inset 0 0 60px rgba(124,58,237,0.08);
  }

  .listen-feature-scope {
    display: block;
    width: 100%;
    height: clamp(160px, 26vw, 260px);
    background:
      linear-gradient(rgba(0,229,255,0.04) 1px, transparent 1px) 0 0 / 100% 20px,
      linear-gradient(90deg, rgba(0,229,255,0.04) 1px, transparent 1px) 0 0 / 5% 100%;
  }

  .listen-feature-scope-mask {
    position: absolute;
    left: 0;
    right: 0;
    height: 36px;
    pointer-events: none;
    z-index: 2;
  }

  .listen-feature-scope-mask--top {
    top: 0;
    background: linear-gradient(180deg, rgba(6,6,16,0.95) 0%, transparent 100%);
  }

  .listen-feature-scope-mask--bottom {
    bottom: 0;
    background: linear-gradient(0deg, rgba(6,6,16,0.95) 0%, transparent 100%);
  }

  .listen-feature-scope-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
  }

  .listen-feature-scope-tag {
    position: absolute;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 0.35rem 0.6rem;
    border-radius: 4px;
    background: rgba(6,6,16,0.7);
    border: 1px solid rgba(0,229,255,0.2);
    color: rgba(255,255,255,0.7);
    backdrop-filter: blur(4px);
  }

  .listen-feature-scope-tag--tl { top: 12px; left: 12px; color: #00E5FF; border-color: rgba(0,229,255,0.4); }
  .listen-feature-scope-tag--tr { top: 12px; right: 12px; color: #7C3AED; border-color: rgba(124,58,237,0.4); }
  .listen-feature-scope-tag--bl { bottom: 12px; left: 12px; color: #FF1744; border-color: rgba(255,23,68,0.4); }
  .listen-feature-scope-tag--br {
    bottom: 12px;
    right: 12px;
    color: rgba(255,255,255,0.5);
    background: rgba(6,6,16,0.85);
  }
  .listen-feature-scope-tag--br[data-listen-scope-state="LIVE"] {
    color: #FF1744;
    border-color: rgba(255,23,68,0.6);
    box-shadow: 0 0 16px rgba(255,23,68,0.4);
    animation: listen-state-blink 1.2s ease-in-out infinite;
  }
  .listen-feature-scope-tag--br[data-listen-scope-state="LIVE"]::before {
    content: '● ';
    color: #FF1744;
  }

  @keyframes listen-state-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
  }

  .listen-feature-reading-label {
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    margin-bottom: 0.4rem;
  }

  .listen-feature-legend {
    list-style: none;
    margin: 1.6rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.7rem;
    font-size: 0.92rem;
    line-height: 1.5;
    color: rgba(255,255,255,0.78);
  }

  @media (min-width: 720px) {
    .listen-feature-legend { grid-template-columns: repeat(3, 1fr); }
  }

  .listen-feature-legend li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.7rem 0.9rem;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
  }

  .listen-feature-legend strong {
    color: #fff;
    font-weight: 600;
    margin-right: 0.3rem;
  }

  .listen-feature-legend-dot {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-top: 0.45rem;
    box-shadow: 0 0 8px currentColor;
  }

  @media (prefers-reduced-motion: reduce) {
    .listen-feature-pulse,
    .listen-feature-scanline,
    .listen-feature-led,
    .listen-feature-scope-tag--br[data-listen-scope-state="LIVE"],
    .listen-feature-button.is-active::before { animation: none; }
  }
}

/* ============================================================
   CINEMA LAYER — film grain, vignette, letterbox, ken-burns,
   chapter dividers, drop caps, pull-quote upgrade.
   Loaded last so it overrides earlier components by specificity.
   ============================================================ */
@layer components {
  /* Film grain overlay — fixed, fills viewport, very subtle */
  body {
    position: relative;
  }
  html::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9998;
    pointer-events: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.92' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.42 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/></svg>");
    background-size: 240px 240px;
    mix-blend-mode: overlay;
    opacity: 0.16;
    animation: cinema-grain 1.6s steps(6) infinite;
    will-change: transform;
  }
  @keyframes cinema-grain {
    0%   { transform: translate(0, 0); }
    20%  { transform: translate(-3%, 2%); }
    40%  { transform: translate(2%, -3%); }
    60%  { transform: translate(-2%, -1%); }
    80%  { transform: translate(3%, 2%); }
    100% { transform: translate(0, 0); }
  }
  @media (prefers-reduced-motion: reduce) {
    html::after { animation: none; }
  }

  /* Cinematic vignette intensification — replaces the body::after softness */
  body::after {
    background:
      radial-gradient(80vmax 70vmax at 50% 45%, transparent 25%, rgba(6, 6, 16, 0.78) 100%),
      radial-gradient(120vmax 90vmax at 50% 110%, rgba(0, 0, 0, 0.55), transparent 60%);
    mix-blend-mode: multiply;
  }

  /* Hero stage — letterbox cinema bars + ken-burns video */
  .hero-stage {
    isolation: isolate;
  }
  .hero-stage::before,
  .hero-stage::after {
    content: "";
    position: absolute;
    left: 0; right: 0;
    height: clamp(28px, 5vh, 56px);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.96), rgba(0, 0, 0, 0.6));
    z-index: 5;
    pointer-events: none;
  }
  .hero-stage::before {
    top: 0;
    box-shadow: 0 12px 28px -16px rgba(255, 23, 68, 0.45);
  }
  .hero-stage::after {
    bottom: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.96), rgba(0, 0, 0, 0.6));
    box-shadow: 0 -12px 28px -16px rgba(0, 229, 255, 0.35);
  }
  .hero-video {
    transform-origin: 55% 45%;
    animation: cinema-kenburns 22s ease-in-out infinite alternate;
    filter: contrast(1.08) saturate(1.05);
  }
  @keyframes cinema-kenburns {
    0%   { transform: scale(1.02) translate3d(0, 0, 0); }
    50%  { transform: scale(1.12) translate3d(-1.2%, -0.8%, 0); }
    100% { transform: scale(1.18) translate3d(1.4%, 0.6%, 0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-video { animation: none; transform: scale(1.04); }
  }

  /* Hero copy — cinematic glow + curtain reveal */
  .hero-copy h1 {
    text-shadow:
      0 0 80px rgba(255, 23, 68, 0.18),
      0 0 24px rgba(255, 23, 68, 0.32),
      0 2px 0 rgba(0, 0, 0, 0.55);
  }
  .hero-copy .lede {
    position: relative;
  }
  .hero-copy .lede::first-line {
    color: var(--text);
    letter-spacing: 0.005em;
  }

  /* Cinema chapter divider — Roman numeral monolith */
  .cinema-chapter {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    padding: clamp(3rem, 8vw, 6rem) 1rem;
    position: relative;
    text-align: center;
    isolation: isolate;
  }
  .cinema-chapter::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      radial-gradient(50vmax 28vmax at 50% 50%, rgba(255, 23, 68, 0.08), transparent 60%),
      linear-gradient(180deg, transparent, rgba(6, 6, 16, 0.7) 50%, transparent);
    z-index: -1;
    pointer-events: none;
  }
  .cinema-chapter::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: clamp(0.6rem, 1.4vw, 1.2rem);
    width: clamp(80px, 12vw, 180px);
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(255, 23, 68, 0.6), transparent);
    box-shadow: 0 0 18px rgba(255, 23, 68, 0.35);
    pointer-events: none;
  }
  .cinema-chapter-numeral {
    display: block;
    font-family: "Cinzel Decorative", "Cinzel", "Cormorant Garamond", serif;
    font-weight: 900;
    font-size: clamp(4rem, 11vw, 10.5rem);
    line-height: 0.9;
    letter-spacing: 0.04em;
    color: transparent;
    background: linear-gradient(180deg, rgba(255, 240, 220, 0.92) 0%, rgba(255, 23, 68, 0.45) 60%, rgba(124, 58, 237, 0.25) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    text-shadow: 0 0 40px rgba(255, 23, 68, 0.12);
    filter: drop-shadow(0 6px 24px rgba(255, 23, 68, 0.25));
    margin: 0 auto 0.6rem;
  }
  .cinema-chapter-title {
    font-family: "Cinzel", "Cormorant Garamond", serif;
    font-size: clamp(1.1rem, 2.2vw, 1.7rem);
    font-weight: 500;
    letter-spacing: 0.42em;
    text-transform: uppercase;
    color: rgba(240, 230, 255, 0.92);
    margin: 0;
    text-wrap: balance;
  }
  .cinema-chapter-sub {
    margin: 0.85rem auto 0;
    max-width: 56ch;
    font-family: "Cormorant Garamond", "Cinzel", Georgia, serif;
    font-style: italic;
    font-size: clamp(1rem, 1.4vw, 1.2rem);
    line-height: 1.5;
    color: rgba(240, 230, 255, 0.62);
    text-wrap: pretty;
  }
  @media (prefers-reduced-motion: no-preference) {
    .cinema-chapter-numeral {
      animation: cinema-numeral-breathe 7s ease-in-out infinite;
    }
  }
  @keyframes cinema-numeral-breathe {
    0%, 100% { filter: drop-shadow(0 6px 24px rgba(255, 23, 68, 0.22)); transform: scale(1); }
    50%      { filter: drop-shadow(0 8px 38px rgba(255, 23, 68, 0.4));  transform: scale(1.015); }
  }

  /* Drop cap — first paragraph of every dossier feature body */
  .dossier-feature-body > p:first-of-type::first-letter,
  .manifesto-body > p:first-of-type::first-letter {
    initial-letter: 3 2;
    -webkit-initial-letter: 3 2;
    font-family: "Cinzel Decorative", "Cinzel", "Cormorant Garamond", serif;
    font-weight: 900;
    color: transparent;
    background: linear-gradient(180deg, #fff 0%, var(--accent-red) 80%);
    -webkit-background-clip: text;
    background-clip: text;
    margin-right: 0.45rem;
    line-height: 0.95;
    text-shadow: 0 4px 18px rgba(255, 23, 68, 0.28);
  }
  /* Fallback for browsers without initial-letter — float-style drop cap */
  @supports not (initial-letter: 3) {
    .dossier-feature-body > p:first-of-type::first-letter,
    .manifesto-body > p:first-of-type::first-letter {
      float: left;
      font-size: 4.2em;
      line-height: 0.85;
      padding: 0.05em 0.18em 0 0;
    }
  }

  /* Pull-quote upgrade — Cormorant italic, vertical accent rails */
  .evidence-callout {
    border-left: 4px solid var(--accent-red);
    border-right: 1px solid rgba(0, 229, 255, 0.18);
    background:
      linear-gradient(135deg, rgba(255, 23, 68, 0.1), rgba(124, 58, 237, 0.08)),
      radial-gradient(60% 100% at 0% 50%, rgba(255, 23, 68, 0.15), transparent 70%),
      rgba(6, 6, 16, 0.7);
    box-shadow:
      0 18px 60px rgba(0, 0, 0, 0.5),
      0 0 0 1px rgba(255, 23, 68, 0.18) inset,
      -10px 0 28px -12px rgba(255, 23, 68, 0.45);
  }
  .evidence-callout-text {
    font-family: "Cormorant Garamond", "Cinzel", Georgia, serif;
    font-style: italic;
    font-size: clamp(1.2rem, 2vw, 1.7rem);
    line-height: 1.4;
    font-weight: 500;
    letter-spacing: 0.005em;
    color: rgba(248, 244, 255, 0.96);
    text-wrap: pretty;
  }
  .evidence-callout-text strong {
    font-style: normal;
    font-family: var(--font-display);
    font-weight: 700;
    color: #fff;
    background: linear-gradient(180deg, #fff 0%, rgba(255, 23, 68, 0.7) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .evidence-callout-mark {
    font-family: "Cormorant Garamond", "Cinzel Decorative", serif;
    font-size: 6.5rem;
    color: rgba(0, 229, 255, 0.18);
    top: -1.2rem; left: 0.4rem;
    filter: drop-shadow(0 0 24px rgba(0, 229, 255, 0.18));
  }

  /* Aurora atmosphere behind heavy dossier sections */
  .dossier-feature::before {
    background:
      radial-gradient(80vmax 50vmax at 18% 0%, rgba(255, 23, 68, 0.07), transparent 55%),
      radial-gradient(70vmax 50vmax at 82% 100%, rgba(124, 58, 237, 0.07), transparent 55%),
      linear-gradient(180deg, transparent, rgba(255, 23, 68, 0.04) 30%, rgba(124, 58, 237, 0.04) 70%, transparent);
  }

  /* Hero text — subtle shimmer crawl for cinematic title presence */
  @media (prefers-reduced-motion: no-preference) {
    .hero-copy h1 .gradient-text {
      background-size: 220% 220%;
      animation: cinema-shimmer 14s ease-in-out infinite;
    }
  }
  @keyframes cinema-shimmer {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
  }

  /* Section dividers softer, more cinematic */
  .section-divider {
    height: 1px;
    border: 0;
    margin: clamp(2rem, 4vw, 4rem) auto;
    background: linear-gradient(90deg, transparent, rgba(255, 23, 68, 0.4), rgba(0, 229, 255, 0.25), transparent);
    box-shadow: 0 0 24px rgba(255, 23, 68, 0.15);
    width: min(560px, 80vw);
  }

  /* Cinema mode on full-bleed sections — deeper edge falloff */
  .full-bleed::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(90deg, rgba(6, 6, 16, 0.4) 0%, transparent 8%, transparent 92%, rgba(6, 6, 16, 0.4) 100%);
    z-index: 0;
  }

  /* ────────────────────────────────────────────────────────
     Generic Gallery Lightbox (data-zoomable[data-gallery])
     ──────────────────────────────────────────────────────── */
  .gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: grid;
    grid-template-rows: 1fr auto;
    place-items: center;
    background: rgba(2, 2, 8, 0.96);
    backdrop-filter: blur(18px) saturate(1.1);
    -webkit-backdrop-filter: blur(18px) saturate(1.1);
    animation: gallery-lightbox-in 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    padding: clamp(1rem, 4vw, 3rem);
    overscroll-behavior: contain;
  }
  .gallery-lightbox[hidden] { display: none; }
  @keyframes gallery-lightbox-in {
    from { opacity: 0; backdrop-filter: blur(0) saturate(1); }
    to   { opacity: 1; }
  }
  body.gallery-lightbox-open { overflow: hidden; }

  .gallery-lightbox-stage {
    position: relative;
    width: 100%;
    max-width: min(1400px, 92vw);
    max-height: calc(100vh - 9rem);
    display: grid;
    place-items: center;
    isolation: isolate;
  }
  .gallery-lightbox-stage img,
  .gallery-lightbox-stage video {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(100vh - 11rem);
    object-fit: contain;
    border-radius: 14px;
    box-shadow:
      0 30px 90px rgba(0, 0, 0, 0.65),
      0 0 0 1px rgba(255, 255, 255, 0.06),
      0 0 80px rgba(0, 229, 255, 0.18);
    animation: gallery-lightbox-img-in 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    background: #000;
  }
  @keyframes gallery-lightbox-img-in {
    from { opacity: 0; transform: scale(0.96); filter: blur(8px); }
    to   { opacity: 1; transform: scale(1);    filter: blur(0); }
  }

  .gallery-lightbox-caption {
    margin-top: 1.2rem;
    max-width: min(960px, 90vw);
    text-align: center;
    color: rgba(255, 255, 255, 0.88);
    font-family: var(--font-serif, 'Cormorant Garamond', Georgia, serif);
    font-style: italic;
    font-size: clamp(0.95rem, 1.4vw, 1.15rem);
    line-height: 1.5;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6);
  }
  .gallery-lightbox-counter {
    position: fixed;
    top: clamp(0.8rem, 2vw, 1.4rem);
    left: 50%;
    transform: translateX(-50%);
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: rgba(0, 229, 255, 0.85);
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    background: rgba(0, 229, 255, 0.08);
    border: 1px solid rgba(0, 229, 255, 0.28);
    pointer-events: none;
  }

  .gallery-lightbox-close,
  .gallery-lightbox-nav {
    position: fixed;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(6, 6, 16, 0.7);
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
    z-index: 1;
  }
  .gallery-lightbox-close {
    top: clamp(0.8rem, 2vw, 1.4rem);
    right: clamp(0.8rem, 2vw, 1.4rem);
    font-size: 1.8rem;
  }
  .gallery-lightbox-nav {
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    font-size: 2.2rem;
  }
  .gallery-lightbox-prev { left: clamp(0.8rem, 2vw, 1.4rem); }
  .gallery-lightbox-next { right: clamp(0.8rem, 2vw, 1.4rem); }
  .gallery-lightbox-close:hover,
  .gallery-lightbox-nav:hover {
    background: rgba(0, 229, 255, 0.18);
    border-color: rgba(0, 229, 255, 0.6);
    box-shadow: 0 0 24px rgba(0, 229, 255, 0.3);
  }
  .gallery-lightbox-close:active { transform: scale(0.94); }
  .gallery-lightbox-nav:active   { transform: translateY(-50%) scale(0.94); }
  .gallery-lightbox-close:focus-visible,
  .gallery-lightbox-nav:focus-visible {
    outline: 2px solid rgba(0, 229, 255, 0.8);
    outline-offset: 2px;
  }
  @media (max-width: 600px) {
    .gallery-lightbox-nav { width: 44px; height: 44px; font-size: 1.7rem; }
    .gallery-lightbox-prev { left: 0.4rem; }
    .gallery-lightbox-next { right: 0.4rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    .gallery-lightbox,
    .gallery-lightbox-stage img { animation: none; }
  }

  /* ────────────────────────────────────────────────────────
     YouTube Facade — guarantees the video shows up,
     defers iframe load until user clicks Play.
     Markup: <div class="yt-facade" data-yt="VIDEO_ID"
                  data-title="…" data-start="0"
                  data-allow="…"></div>
     ──────────────────────────────────────────────────────── */
  .yt-facade {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    display: block;
    overflow: hidden;
    border-radius: var(--radius-soft, 12px);
    border: 1px solid rgba(0, 229, 255, 0.22);
    box-shadow:
      0 16px 60px rgba(0, 0, 0, 0.55),
      0 0 0 1px rgba(255, 255, 255, 0.04) inset,
      0 0 40px rgba(0, 229, 255, 0.08);
    background:
      radial-gradient(120% 120% at 50% 0%, rgba(124, 58, 237, 0.18), transparent 55%),
      #05060c;
    cursor: pointer;
    isolation: isolate;
    contain: content;
    transition: border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .yt-facade:hover,
  .yt-facade:focus-visible {
    border-color: rgba(0, 229, 255, 0.55);
    box-shadow:
      0 22px 80px rgba(0, 0, 0, 0.6),
      0 0 0 1px rgba(0, 229, 255, 0.15) inset,
      0 0 60px rgba(0, 229, 255, 0.22);
    transform: translateY(-3px);
  }
  /* Poster — self-hosted, Ken Burns idle drift */
  .yt-facade-poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    transform: scale(1.06);
    filter: saturate(1.02) contrast(1.02);
    animation: ytKenBurns 18s ease-in-out infinite alternate;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease;
    will-change: transform;
  }
  @keyframes ytKenBurns {
    0%   { transform: scale(1.06) translate3d(0, 0, 0); }
    100% { transform: scale(1.14) translate3d(-1.5%, -1.5%, 0); }
  }
  .yt-facade:hover .yt-facade-poster,
  .yt-facade:focus-visible .yt-facade-poster {
    transform: scale(1.16);
    filter: saturate(1.14) contrast(1.06) brightness(1.06);
    animation-play-state: paused;
  }
  .yt-facade--noposter .yt-facade-poster { display: none; }
  /* Scrim */
  .yt-facade::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
      linear-gradient(180deg, rgba(5, 6, 12, 0) 30%, rgba(5, 6, 12, 0.72) 100%),
      radial-gradient(70% 70% at 50% 42%, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.42) 100%);
    opacity: 0.95;
    transition: opacity 0.35s ease;
  }
  .yt-facade:hover::before,
  .yt-facade:focus-visible::before { opacity: 0.8; }
  /* Faint scanlines — representative of the medium */
  .yt-facade::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: repeating-linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0 1px, transparent 1px 3px);
    mix-blend-mode: overlay;
    opacity: 0.5;
  }
  /* Scanline sweep on hover/focus */
  .yt-facade-scan {
    position: absolute;
    left: 0; right: 0; top: -40%;
    height: 40%;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(0, 229, 255, 0.18) 55%, rgba(255, 255, 255, 0.28) 78%, transparent);
    opacity: 0;
  }
  .yt-facade:hover .yt-facade-scan,
  .yt-facade:focus-visible .yt-facade-scan {
    animation: ytScan 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  }
  @keyframes ytScan {
    0% { transform: translateY(0); opacity: 0; }
    15% { opacity: 1; }
    100% { transform: translateY(360%); opacity: 0; }
  }
  /* YouTube badge */
  .yt-facade-badge {
    position: absolute;
    top: 0.7rem; left: 0.7rem;
    z-index: 3;
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    gap: 0.38rem;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
    padding: 0.28rem 0.5rem 0.28rem 0.46rem;
    border-radius: 6px;
    background: rgba(255, 23, 68, 0.92);
    box-shadow: 0 6px 18px rgba(255, 23, 68, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  .yt-facade-badge::before {
    content: "";
    width: 0; height: 0;
    border-style: solid;
    border-width: 4px 0 4px 7px;
    border-color: transparent transparent transparent #fff;
  }
  .yt-facade:hover .yt-facade-badge,
  .yt-facade:focus-visible .yt-facade-badge {
    transform: translateY(-1px) scale(1.04);
    box-shadow: 0 8px 24px rgba(255, 23, 68, 0.6);
  }
  /* Play button + pulsing ring */
  .yt-facade-play {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 84px; height: 58px;
    border: 0;
    border-radius: 16px;
    background: rgba(255, 23, 68, 0.94);
    color: #fff;
    z-index: 3;
    cursor: pointer;
    display: grid;
    place-items: center;
    box-shadow:
      0 14px 40px rgba(255, 23, 68, 0.4),
      0 0 0 1px rgba(255, 255, 255, 0.18) inset;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease, box-shadow 0.3s ease;
  }
  .yt-facade-play::after {
    content: "";
    position: relative;
    z-index: 1;
    width: 0; height: 0;
    margin-left: 5px;
    border-style: solid;
    border-width: 12px 0 12px 20px;
    border-color: transparent transparent transparent #fff;
  }
  .yt-facade-play-ring {
    position: absolute;
    inset: -10px;
    border-radius: 20px;
    border: 2px solid rgba(255, 23, 68, 0.55);
    z-index: 0;
    opacity: 0.7;
    animation: ytPulse 2.4s ease-out infinite;
  }
  @keyframes ytPulse {
    0% { transform: scale(0.9); opacity: 0.7; }
    70% { opacity: 0; }
    100% { transform: scale(1.4); opacity: 0; }
  }
  .yt-facade:hover .yt-facade-play,
  .yt-facade:focus-visible .yt-facade-play {
    transform: scale(1.1);
    background: #FF1744;
    box-shadow:
      0 18px 55px rgba(255, 23, 68, 0.6),
      0 0 0 1px rgba(255, 255, 255, 0.24) inset,
      0 0 40px rgba(255, 23, 68, 0.5);
  }
  .yt-facade:focus-visible {
    outline: 2px solid rgba(0, 229, 255, 0.85);
    outline-offset: 3px;
  }
  /* Title */
  .yt-facade-title {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 3;
    pointer-events: none;
    padding: 1.4rem 1rem 0.9rem;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.74rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.94);
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8);
    transition: transform 0.35s ease;
  }
  .yt-facade:hover .yt-facade-title { transform: translateY(-2px); }
  .yt-facade iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    z-index: 5;
  }
  .yt-facade.is-playing .yt-facade-poster,
  .yt-facade.is-playing::before,
  .yt-facade.is-playing::after,
  .yt-facade.is-playing .yt-facade-scan,
  .yt-facade.is-playing .yt-facade-badge,
  .yt-facade.is-playing .yt-facade-play,
  .yt-facade.is-playing .yt-facade-title { display: none; }
  @media (prefers-reduced-motion: reduce) {
    .yt-facade-poster { animation: none; transform: scale(1.04); }
    .yt-facade:hover .yt-facade-poster,
    .yt-facade:focus-visible .yt-facade-poster { transform: scale(1.04); }
    .yt-facade-scan, .yt-facade-play-ring { display: none; }
  }
}

/* ════════════════════════════════════════════════════════════════════════
   ✦ CINEMA-GRADE REDESIGN — HBO Executive Producer Pass ✦
   Goals: cinematic full-bleed presence on every device, generous breathing
   room on ultrawide, perfect mobile responsiveness, preserved integrity.
   This block intentionally lives last so cascade ordering wins everywhere.
   ════════════════════════════════════════════════════════════════════════ */
@layer components {

  /* ── Tokens: wider canvas + cinematic spacing scale ─────────────────── */
  :root {
    --container:        min(1680px, calc(100vw - clamp(1rem, 4vw, 3rem)));
    --container-wide:   min(1880px, calc(100vw - clamp(0.75rem, 3vw, 2rem)));
    --container-cinema: min(2100px, calc(100vw - clamp(0.5rem, 2vw, 1.25rem)));
    --container-reading: min(78ch, calc(100vw - 2rem));
    --shell-pad-x:      clamp(1rem, 4vw, 3rem);
    --space-section:    clamp(3rem, 7vw, 7.5rem);
    --space-section-lg: clamp(4rem, 9vw, 10rem);
    --gutter:           clamp(0.85rem, 1.6vw, 1.6rem);
    --gutter-lg:        clamp(1.4rem, 2.6vw, 2.6rem);
    --radius-cinema:    clamp(18px, 1.6vw, 28px);
    --type-display:     clamp(2.6rem, 6.4vw + 0.4rem, 7.2rem);
    --type-h2:          clamp(2rem, 4vw + 0.4rem, 4.4rem);
    --type-lede:        clamp(1.05rem, 0.8vw + 0.85rem, 1.4rem);
    --type-body:        clamp(0.98rem, 0.35vw + 0.85rem, 1.12rem);
  }

  /* ── Site shell: take the room ──────────────────────────────────────── */
  body { font-size: var(--type-body); }
  html { scroll-padding-top: 6rem; }

  .shell {
    width: var(--container);
    margin-inline: auto;
    padding-inline: 0;
  }

  /* ── Sticky header: align to wider gutter, glassmorphism polish ─────── */
  .site-header {
    padding-inline: clamp(1rem, 3vw, 2.5rem);
    padding-block: clamp(0.6rem, 1.2vw, 1.1rem);
    background: linear-gradient(180deg, rgba(6, 6, 16, 0.86) 0%, rgba(6, 6, 16, 0.62) 100%);
    backdrop-filter: blur(28px) saturate(160%);
    -webkit-backdrop-filter: blur(28px) saturate(160%);
    box-shadow:
      0 10px 30px rgba(0, 0, 0, 0.55),
      0 1px 0 rgba(0, 229, 255, 0.10) inset,
      0 22px 60px -22px rgba(0, 229, 255, 0.20);
  }
  .site-nav { gap: clamp(0.6rem, 1.4vw, 1.6rem); flex-wrap: wrap; }
  .site-nav a {
    padding: 0.5rem 0.85rem;
    border-radius: 999px;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
  }
  .site-nav a:hover, .site-nav a:focus-visible {
    background: rgba(255, 23, 68, 0.10);
    transform: translateY(-1px);
  }

  /* ── HERO: 100vh cinema opening ─────────────────────────────────────── */
  .hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(1.5rem, 3vw, 3rem);
    min-height: min(100svh, 980px);
    padding-block: clamp(1.5rem, 3vw, 3rem);
    align-items: stretch;
  }
  .hero-copy {
    padding: clamp(1.6rem, 3.2vw, 3rem);
    border-radius: var(--radius-cinema);
    background:
      radial-gradient(120% 100% at 0% 0%, rgba(255, 23, 68, 0.08), transparent 55%),
      radial-gradient(120% 100% at 100% 100%, rgba(124, 58, 237, 0.10), transparent 55%),
      var(--bg-panel);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
  }
  .hero-copy h1 {
    font-size: var(--type-display);
    line-height: 0.88;
    letter-spacing: -0.045em;
    text-wrap: balance;
  }
  .lede {
    margin-top: 1.25rem;
    max-width: 60ch;
    font-size: var(--type-lede);
    line-height: 1.55;
  }
  .hero-actions { gap: clamp(0.6rem, 1.2vw, 1rem); margin-top: 1.6rem; }
  .signal-list { gap: 0.6rem; margin-top: 1.4rem; font-size: 0.98rem; }
  .hero-stage {
    min-height: clamp(360px, 60vh, 760px);
    border-radius: var(--radius-cinema);
  }
  .hero-666 { font-size: clamp(10rem, 28vw, 32rem); }

  /* ── Status grid: edge-to-edge cinematic strip ──────────────────────── */
  .status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: var(--gutter-lg);
    margin-block: clamp(1.5rem, 3vw, 3rem);
  }
  .status-card {
    padding: clamp(1.2rem, 2vw, 2rem);
    border-radius: var(--radius-cinema);
    background: linear-gradient(180deg, rgba(16, 8, 28, 0.96) 0%, rgba(8, 4, 18, 0.92) 100%);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease, box-shadow 0.25s ease;
  }
  .status-card:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 229, 255, 0.32);
    box-shadow: 0 22px 60px -28px rgba(0, 229, 255, 0.4), var(--shadow);
  }
  .metric { font-size: clamp(2.2rem, 3.4vw, 3.4rem); }
  .metric-small { font-size: clamp(1.4rem, 2vw, 2rem); }

  /* ── Full-bleed sections: cinematic pacing ──────────────────────────── */
  .full-bleed {
    padding-block: var(--space-section);
  }
  .full-bleed::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.18), transparent);
    pointer-events: none;
  }

  /* ── Dossier features: HBO frame ────────────────────────────────────── */
  .dossier-feature-shell {
    max-width: min(1620px, 96vw);
    padding-inline: clamp(1.1rem, 4vw, 3.5rem);
  }
  .dossier-feature-title {
    font-size: clamp(2rem, 4.2vw + 0.3rem, 4.6rem);
    line-height: 1;
    letter-spacing: -0.035em;
    text-wrap: balance;
  }
  .dossier-feature-body {
    font-size: clamp(1rem, 0.45vw + 0.9rem, 1.2rem);
    line-height: 1.65;
    max-width: 78ch;
  }
  .dossier-feature-body + .dossier-feature-body { margin-top: 1.2rem; }

  /* Cinematic chapter title cards */
  .cinema-chapter {
    padding-block: clamp(2.6rem, 5vw, 5rem);
    text-align: center;
  }

  /* ── Section panels: extra room ─────────────────────────────────────── */
  .panel {
    padding: clamp(1.4rem, 2.6vw, 2.6rem);
    border-radius: var(--radius-cinema);
  }

  /* ── Footer: align to wider canvas ──────────────────────────────────── */
  .site-footer { padding-block: clamp(2.5rem, 4vw, 4.5rem); }

  /* ── Buttons: bigger touch targets, cinema feel ─────────────────────── */
  .button, .button-primary, .button-ghost, .button-outline {
    min-height: 48px;
    padding-inline: clamp(1rem, 1.6vw, 1.6rem);
    letter-spacing: 0.02em;
  }

  /* ── Section spacing rhythm ─────────────────────────────────────────── */
  .reveal-section { scroll-margin-top: 5rem; }
  .shell.platform-pillars,
  .shell.bridge-section,
  .shell.chart-panel,
  .shell.dev-quickstart,
  .shell.entropy-section,
  .shell.manifesto-section,
  .shell.timeline-section,
  .shell.dossier-intro,
  .shell.live-feed-section,
  .shell.newsletter-section {
    margin-block: var(--space-section);
  }

  /* ── Brand lockup: keep hotline prominent on mobile ─────────────────── */
  .brand-lockup { gap: clamp(0.5rem, 1vw, 0.9rem); }
  .brand-mark { font-size: clamp(0.9rem, 0.7vw + 0.55rem, 1.25rem); }
  .brand-hotline { font-size: clamp(1.05rem, 1.6vw + 0.5rem, 2.2rem); padding: 0.3em 0.7em; }

  /* ── Tablet break: hero stacks, status grid 2-col ───────────────────── */
  @media (max-width: 980px) {
    .hero {
      grid-template-columns: 1fr;
      min-height: auto;
    }
    .hero-stage { min-height: clamp(320px, 55vh, 540px); }
    .site-nav { display: none; }
    .site-header { gap: 0.6rem; }
  }

  /* ── Phone break: tighter rhythm, everything readable ──────────────── */
  @media (max-width: 640px) {
    :root { --shell-pad-x: 1rem; }
    .shell { padding-inline: 0.5rem; }
    .hero-copy { padding: 1.4rem; border-radius: 18px; }
    .hero-copy h1 { font-size: clamp(2.4rem, 12vw, 3.6rem); }
    .lede { font-size: 1.05rem; }
    .status-grid { gap: 0.85rem; grid-template-columns: 1fr 1fr; }
    .status-card { padding: 1rem; }
    .metric { font-size: 2rem; }
    .full-bleed { padding-block: clamp(2.5rem, 8vw, 4rem); }
    .dossier-feature-shell { padding-inline: 1rem; }
    .dossier-feature-title { font-size: clamp(1.8rem, 8vw, 2.6rem); }
    .dossier-feature-body { font-size: 1rem; }
    .brand-hotline { font-size: 1rem; padding: 0.3em 0.6em; }
    .site-header { padding-inline: 0.85rem; padding-block: 0.5rem; }
  }

  /* ── Tiny phones: stack status to single column ─────────────────────── */
  @media (max-width: 380px) {
    .status-grid { grid-template-columns: 1fr; }
    .hero-actions { flex-direction: column; align-items: stretch; }
    .hero-actions .button { width: 100%; text-align: center; }
  }

  /* ── Ultrawide / cinema break: cap reading width but widen visuals ── */
  @media (min-width: 1920px) {
    :root { --container: min(1820px, calc(100vw - 4rem)); }
    .dossier-feature-shell { max-width: min(1760px, 92vw); }
    .full-bleed { padding-block: var(--space-section-lg); }
  }
  @media (min-width: 2400px) {
    :root { --container: min(2000px, calc(100vw - 6rem)); }
    .dossier-feature-shell { max-width: min(1880px, 90vw); }
  }

  /* ── Cinematic letterbox accent on full-bleed scenes ────────────────── */
  .full-bleed.dossier-feature {
    background-attachment: fixed;
  }
  @media (max-width: 980px) {
    .full-bleed.dossier-feature { background-attachment: scroll; }
  }

  /* ── Smooth section-to-section depth scrim ─────────────────────────── */
  .full-bleed + .full-bleed::before {
    background:
      linear-gradient(180deg,
        rgba(6, 6, 16, 0.6) 0%,
        transparent 12%,
        transparent 88%,
        rgba(6, 6, 16, 0.6) 100%
      );
  }

  /* ── Site-wide image polish: rounded + cinematic shadow on figures ── */
  .dossier-feature-figure img,
  .dossier-feature-media img,
  .dossier-feature-figure video,
  .dossier-feature-media video {
    border-radius: var(--radius-cinema);
    box-shadow:
      0 24px 80px rgba(0, 0, 0, 0.55),
      0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  }

  /* ── Touch-target floor (WCAG 2.2 2.5.8) ───────────────────────────── */
  a, button { min-height: auto; }
  .site-nav a, .footer-nav a, .button { min-block-size: 44px; }

  /* ── prefers-reduced-motion: hard kill on background effects ───────── */
  @media (prefers-reduced-motion: reduce) {
    .full-bleed.dossier-feature { background-attachment: scroll; }
    .status-card:hover { transform: none; }
    body::before { animation: none !important; }
  }

  /* ── Inner sections: widen to claim full cinema canvas ──────────────── */
  /* Override legacy hard caps that trap content in narrow columns when    */
  /* the outer container has been widened. Every section should breathe.   */
  .timeline-vertical {
    max-width: min(1480px, 96vw);
    margin-inline: auto;
  }
  .dossier-intro p {
    max-width: min(960px, 92vw);
    margin-inline: auto;
  }
  .manifesto-section,
  .manifesto-frame {
    max-width: min(1560px, 96vw);
    margin-inline: auto;
  }
  .live-feed-section,
  .newsletter-section,
  .platform-pillars,
  .bridge-section {
    width: 100%;
    max-width: none;
  }
  .entropy-section {
    width: 100%;
    max-width: none;
    gap: var(--gutter-lg);
  }
  @media (min-width: 1280px) {
    .entropy-section {
      grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    }
  }
  @media (min-width: 1920px) {
    .timeline-vertical { max-width: min(1640px, 94vw); }
    .manifesto-frame  { max-width: min(1720px, 94vw); }
  }
  @media (min-width: 2400px) {
    .timeline-vertical { max-width: min(1820px, 92vw); }
    .manifesto-frame  { max-width: min(1880px, 92vw); }
  }

  /* ── Celestial Hallucinations: world map ────────────────────────────── */
  .celestial-map-wrap {
    width: 100%;
    margin-block: clamp(2.5rem, 6vw, 5rem) 0;
    padding-block: clamp(2rem, 5vw, 4rem);
    background:
      radial-gradient(ellipse at 50% 0%, rgba(124, 58, 237, 0.18) 0%, transparent 70%),
      linear-gradient(180deg, rgba(6, 6, 16, 0.92) 0%, rgba(6, 6, 16, 0.7) 100%);
    border-block: 1px solid rgba(124, 58, 237, 0.28);
    position: relative;
    isolation: isolate;
  }
  .celestial-map-head {
    max-width: min(960px, 92vw);
    margin: 0 auto clamp(1.25rem, 3vw, 2.25rem);
    padding-inline: clamp(1rem, 4vw, 3rem);
    text-align: center;
  }
  .celestial-map-head .celestial-chapter-tag {
    display: inline-block;
    margin-bottom: 0.6rem;
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent, #00E5FF);
    opacity: 0.85;
  }
  .celestial-map-title {
    font-family: 'Cinzel', 'Cormorant Garamond', serif;
    font-size: clamp(1.8rem, 3.6vw + 0.4rem, 3.2rem);
    font-weight: 700;
    line-height: 1.05;
    margin: 0 0 0.6rem;
    letter-spacing: 0.02em;
    background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,0.78) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  .celestial-map-lede {
    margin: 0 auto;
    max-width: 56ch;
    font-size: clamp(1rem, 1.05vw + 0.6rem, 1.18rem);
    color: rgba(255, 255, 255, 0.68);
    line-height: 1.55;
  }
  .celestial-map {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    height: clamp(540px, 78vh, 1040px);
    border-radius: 0;
    overflow: hidden;
    box-shadow:
      0 30px 90px rgba(0, 0, 0, 0.65),
      0 0 0 1px rgba(124, 58, 237, 0.28) inset,
      0 0 60px rgba(0, 229, 255, 0.08) inset;
    background: #060610;
    cursor: grab;
    position: relative;
    z-index: 1;
  }
  .celestial-map:focus-visible {
    outline: 2px solid var(--accent, #00E5FF);
    outline-offset: -4px;
  }
  .celestial-map.leaflet-grab:active { cursor: grabbing; }
  @media (min-width: 1920px) {
    .celestial-map { height: clamp(660px, 80vh, 1180px); }
  }
  @media (min-width: 2400px) {
    .celestial-map { height: clamp(760px, 82vh, 1320px); }
  }
  @media (max-width: 768px) {
    .celestial-map { height: clamp(640px, 90vh, 920px); }
  }

  /* Pin styling */
  .celestial-pin {
    position: relative;
    display: block;
    width: 22px;
    height: 22px;
    pointer-events: auto;
  }
  .celestial-pin-dot {
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #fff 0%, #00E5FF 55%, #7C3AED 100%);
    box-shadow:
      0 0 0 2px rgba(6, 6, 16, 0.85),
      0 0 14px rgba(0, 229, 255, 0.85),
      0 0 28px rgba(124, 58, 237, 0.55);
    z-index: 2;
  }
  .celestial-pin-pulse {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid rgba(0, 229, 255, 0.7);
    animation: celestial-pin-pulse 2.4s ease-out infinite;
    z-index: 1;
  }
  @keyframes celestial-pin-pulse {
    0% { transform: scale(0.6); opacity: 0.9; }
    80% { transform: scale(2.6); opacity: 0; }
    100% { transform: scale(2.6); opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .celestial-pin-pulse { animation: none; opacity: 0.4; }
  }

  /* Popup styling — override Leaflet defaults.
     Boosted specificity + explicit white text on every descendant to defeat
     Leaflet's default .leaflet-popup-content color:#333 cascade. */
  .leaflet-popup.celestial-popup-wrap .leaflet-popup-content-wrapper {
    background: linear-gradient(160deg, rgba(12, 10, 28, 0.97) 0%, rgba(6, 6, 16, 0.99) 100%) !important;
    color: #f4f4f8 !important;
    border: 1px solid rgba(124, 58, 237, 0.45);
    border-radius: 14px;
    box-shadow:
      0 20px 50px rgba(0, 0, 0, 0.75),
      0 0 30px rgba(0, 229, 255, 0.14);
    backdrop-filter: blur(8px);
    padding: 4px;
  }
  .leaflet-popup.celestial-popup-wrap .leaflet-popup-content {
    margin: 14px 18px;
    line-height: 1.55;
    font-family: 'Sora', system-ui, sans-serif;
    color: #f4f4f8 !important;
  }
  .leaflet-popup.celestial-popup-wrap .leaflet-popup-content,
  .leaflet-popup.celestial-popup-wrap .leaflet-popup-content p,
  .leaflet-popup.celestial-popup-wrap .leaflet-popup-content h1,
  .leaflet-popup.celestial-popup-wrap .leaflet-popup-content h2,
  .leaflet-popup.celestial-popup-wrap .leaflet-popup-content h3,
  .leaflet-popup.celestial-popup-wrap .leaflet-popup-content h4,
  .leaflet-popup.celestial-popup-wrap .leaflet-popup-content h5,
  .leaflet-popup.celestial-popup-wrap .leaflet-popup-content span,
  .leaflet-popup.celestial-popup-wrap .leaflet-popup-content strong,
  .leaflet-popup.celestial-popup-wrap .leaflet-popup-content em {
    color: #f4f4f8 !important;
  }
  .leaflet-popup.celestial-popup-wrap .leaflet-popup-content a {
    color: #00E5FF !important;
    text-decoration: underline;
    text-decoration-color: rgba(0, 229, 255, 0.4);
  }
  .leaflet-popup.celestial-popup-wrap .leaflet-popup-content a:hover {
    color: #50AAE3 !important;
    text-decoration-color: rgba(80, 170, 227, 0.7);
  }
  .leaflet-popup.celestial-popup-wrap .leaflet-popup-tip {
    background: rgba(12, 10, 28, 0.98);
    border: 1px solid rgba(124, 58, 237, 0.45);
  }
  .leaflet-popup.celestial-popup-wrap a.leaflet-popup-close-button {
    color: rgba(255, 255, 255, 0.7);
    font-size: 22px;
    padding: 6px 10px;
  }
  .leaflet-popup.celestial-popup-wrap a.leaflet-popup-close-button:hover {
    color: #00E5FF;
  }
  .celestial-popup-tag {
    display: inline-block;
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #00E5FF;
    background: rgba(0, 229, 255, 0.08);
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid rgba(0, 229, 255, 0.3);
    margin-bottom: 8px;
  }
  .celestial-popup-title {
    font-family: 'Cinzel', 'Cormorant Garamond', serif;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 8px;
    color: #ffffff !important;
    letter-spacing: 0.01em;
  }
  .celestial-popup-body {
    font-size: 0.92rem;
    color: rgba(255, 255, 255, 0.86) !important;
    margin: 0;
  }
  .celestial-popup-inner { color: #f4f4f8 !important; }

  /* Permanent tooltips — always-visible field notes anchored to each pin */
  .leaflet-tooltip.celestial-tooltip {
    background: linear-gradient(160deg, rgba(12, 10, 28, 0.94) 0%, rgba(6, 6, 16, 0.96) 100%);
    color: #f4f4f8;
    border: 1px solid rgba(124, 58, 237, 0.42);
    border-radius: 10px;
    box-shadow:
      0 14px 32px rgba(0, 0, 0, 0.55),
      0 0 18px rgba(0, 229, 255, 0.08);
    padding: 0;
    font-family: 'Sora', system-ui, sans-serif;
    backdrop-filter: blur(6px);
    pointer-events: auto;
    white-space: normal;
    max-width: 240px;
    min-width: 160px;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  }
  .leaflet-tooltip.celestial-tooltip:hover {
    border-color: rgba(0, 229, 255, 0.65);
    box-shadow:
      0 18px 40px rgba(0, 0, 0, 0.7),
      0 0 28px rgba(0, 229, 255, 0.18);
    transform: translateY(-1px);
    z-index: 1000;
  }
  .leaflet-tooltip.celestial-tooltip::before { display: none; }
  .celestial-tooltip-inner {
    padding: 8px 10px 9px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .celestial-tooltip-tag {
    display: inline-block;
    align-self: flex-start;
    font-family: 'Space Grotesk', system-ui, sans-serif;
    font-size: 0.55rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #00E5FF;
    background: rgba(0, 229, 255, 0.08);
    padding: 2px 6px;
    border-radius: 999px;
    border: 1px solid rgba(0, 229, 255, 0.28);
    line-height: 1.2;
  }
  .celestial-tooltip-title {
    display: block;
    font-family: 'Cinzel', 'Cormorant Garamond', serif;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    letter-spacing: 0.01em;
    margin: 0;
  }
  .celestial-tooltip-body {
    margin: 0;
    font-size: 0.62rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.78);
  }
  @media (min-width: 1280px) {
    .leaflet-tooltip.celestial-tooltip { max-width: 280px; }
    .celestial-tooltip-title { font-size: 0.78rem; }
    .celestial-tooltip-body  { font-size: 0.66rem; }
  }
  @media (min-width: 1920px) {
    .leaflet-tooltip.celestial-tooltip { max-width: 320px; }
    .celestial-tooltip-title { font-size: 0.84rem; }
    .celestial-tooltip-body  { font-size: 0.7rem;  }
  }
  @media (max-width: 768px) {
    .leaflet-tooltip.celestial-tooltip { max-width: 180px; min-width: 130px; }
    .celestial-tooltip-tag   { font-size: 0.5rem; }
    .celestial-tooltip-title { font-size: 0.66rem; }
    .celestial-tooltip-body  { font-size: 0.58rem; }
  }

  /* Map controls — restyle to match dark theme */
  .celestial-map .leaflet-control-zoom a {
    background: rgba(12, 10, 28, 0.92);
    color: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(124, 58, 237, 0.4);
    backdrop-filter: blur(6px);
  }
  .celestial-map .leaflet-control-zoom a:hover {
    background: rgba(0, 229, 255, 0.18);
    color: #fff;
  }
  .celestial-map .leaflet-control-attribution {
    background: rgba(6, 6, 16, 0.78);
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.65rem;
    backdrop-filter: blur(4px);
  }
  .celestial-map .leaflet-control-attribution a {
    color: rgba(0, 229, 255, 0.85);
  }

  /* Legend (text fallback for screen readers + non-JS) */
  .celestial-map-legend {
    max-width: min(1280px, 92vw);
    margin: clamp(1.5rem, 3vw, 2.5rem) auto 0;
    padding: 0 clamp(1rem, 4vw, 3rem);
    list-style: decimal;
    list-style-position: inside;
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.85rem;
    line-height: 1.6;
    columns: 1;
    column-gap: 2rem;
  }
  .celestial-map-legend li {
    break-inside: avoid;
    margin-bottom: 0.4rem;
  }
  .celestial-map-legend strong {
    color: rgba(0, 229, 255, 0.9);
    font-weight: 600;
  }
  @media (min-width: 800px) {
    .celestial-map-legend { columns: 2; }
  }
  @media (min-width: 1280px) {
    .celestial-map-legend { columns: 3; }
  }
}


/* =============================================================================
 * Wave 50 — UX enhancements: reading progress, back-to-top, Konami, SW toast,
 * network pill, scroll-padding-top, focus polish, print, heartbeat-on-CTA.
 * ============================================================================= */
@layer cinema {
  :root { --gh-progress-color: linear-gradient(90deg, #00E5FF 0%, #7C3AED 60%, #FF1744 100%); }

  html { scroll-padding-top: clamp(72px, 10vh, 110px); }

  /* Reading progress bar */
  .reading-progress {
    position: fixed; top: 0; left: 0; right: 0;
    height: 3px;
    background: rgba(255,255,255,0.04);
    z-index: 9999;
    pointer-events: none;
  }
  .reading-progress-bar {
    height: 100%;
    width: 100%;
    background: var(--gh-progress-color);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 90ms linear;
    box-shadow: 0 0 12px rgba(0,229,255,0.5);
  }
  @media (prefers-reduced-motion: reduce) {
    .reading-progress-bar { transition: none; }
  }

  /* Back-to-top button */
  .back-to-top {
    position: fixed;
    right: clamp(0.9rem, 2.4vw, 1.6rem);
    bottom: clamp(0.9rem, 2.4vw, 1.6rem);
    width: 48px; height: 48px;
    min-width: 44px; min-height: 44px;
    border-radius: 999px;
    border: 1px solid rgba(0,229,255,0.5);
    background: rgba(6,6,16,0.85);
    color: #00E5FF;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: grid;
    place-items: center;
    cursor: pointer;
    z-index: 998;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 240ms ease, transform 240ms ease, background 200ms ease,
                box-shadow 240ms ease, color 200ms ease, border-color 200ms ease;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(124,58,237,0.18) inset;
  }
  .back-to-top.is-visible { opacity: 1; transform: translateY(0); }
  .back-to-top:hover {
    background: rgba(0,229,255,0.12);
    color: #fff;
    border-color: rgba(0,229,255,0.85);
    box-shadow: 0 16px 48px rgba(0,229,255,0.35), 0 0 0 1px rgba(0,229,255,0.4) inset;
    transform: translateY(-2px);
  }
  .back-to-top:active { transform: translateY(0); }
  .back-to-top:focus-visible { outline: 2px solid #00E5FF; outline-offset: 4px; }
  @media (prefers-reduced-motion: reduce) {
    .back-to-top { transition: opacity 200ms linear; transform: none !important; }
  }
  @media print { .back-to-top, .reading-progress { display: none !important; } }

  /* Service worker update toast */
  .sw-update-toast {
    position: fixed;
    bottom: 1.2rem;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #060610 0%, #1a0f2e 100%);
    color: #F0E6FF;
    padding: 0.65rem 0.85rem 0.65rem 1.1rem;
    border-radius: 999px;
    border: 1px solid rgba(0,229,255,0.45);
    box-shadow: 0 18px 50px rgba(0,0,0,0.6), 0 0 0 1px rgba(124,58,237,0.25) inset;
    display: flex; align-items: center; gap: 0.7rem;
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 0.82rem;
    z-index: 9999;
    backdrop-filter: blur(10px);
    animation: gh-toast-in 360ms cubic-bezier(.16,1,.3,1);
    max-width: calc(100vw - 2rem);
  }
  .sw-update-toast button {
    background: transparent;
    border: 1px solid rgba(0,229,255,0.4);
    color: #00E5FF;
    border-radius: 999px;
    padding: 0.32rem 0.85rem;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
    min-height: 32px;
  }
  .sw-update-toast button.sw-update-refresh:hover { background: #00E5FF; color: #060610; border-color: #00E5FF; }
  .sw-update-toast button.sw-update-dismiss {
    border: none; padding: 0.2rem 0.5rem; font-size: 1.1rem; line-height: 1;
    color: rgba(240,230,255,0.55);
  }
  .sw-update-toast button.sw-update-dismiss:hover { color: #FF1744; }
  .sw-update-toast button:focus-visible { outline: 2px solid #FF1744; outline-offset: 2px; }
  @keyframes gh-toast-in {
    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
  }
  @media (prefers-reduced-motion: reduce) {
    .sw-update-toast { animation: none; }
  }

  /* Network status pill */
  .net-status-pill {
    position: fixed;
    top: 1rem; left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #FF1744 0%, #7C3AED 100%);
    color: #060610;
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.45rem 0.95rem;
    border-radius: 999px;
    z-index: 9999;
    box-shadow: 0 8px 28px rgba(255,23,68,0.55);
  }

  /* Konami easter egg */
  .konami-active { animation: gh-konami-flash 1100ms cubic-bezier(.4,0,.2,1); }
  @keyframes gh-konami-flash {
    0%   { filter: hue-rotate(0deg) saturate(1); }
    25%  { filter: hue-rotate(120deg) saturate(2.5); }
    50%  { filter: hue-rotate(240deg) saturate(3); }
    75%  { filter: hue-rotate(360deg) saturate(2.2); }
    100% { filter: hue-rotate(0deg) saturate(1); }
  }
  .konami-notice {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    z-index: 99999;
    pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(124,58,237,0.18) 0%, transparent 60%);
    animation: gh-konami-fade 380ms ease;
  }
  .konami-notice.is-out { animation: gh-konami-fade 800ms ease forwards reverse; }
  .konami-notice-inner {
    background: linear-gradient(135deg, rgba(6,6,16,0.96) 0%, rgba(26,15,46,0.96) 100%);
    border: 1px solid rgba(0,229,255,0.5);
    border-radius: 18px;
    padding: 1.6rem 2.2rem;
    text-align: center;
    box-shadow: 0 30px 80px rgba(0,0,0,0.7), 0 0 80px rgba(124,58,237,0.4);
    pointer-events: auto;
    max-width: min(92vw, 480px);
  }
  .konami-notice-inner strong {
    display: block;
    font-family: 'Cinzel', serif;
    font-weight: 900;
    font-size: clamp(1.4rem, 4vw, 2rem);
    background: linear-gradient(135deg, #00E5FF 0%, #7C3AED 50%, #FF1744 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 0.18em;
    margin-bottom: 0.5rem;
  }
  .konami-notice-inner p { color: #F0E6FF; margin: 0; font-size: 0.92rem; }
  .konami-notice-inner a { color: #00E5FF; font-weight: 700; text-decoration: underline; }
  @keyframes gh-konami-fade { from { opacity: 0; } to { opacity: 1; } }
  @media (prefers-reduced-motion: reduce) {
    .konami-active { animation: none; }
    .konami-notice, .konami-notice.is-out { animation: none; }
  }

  /* Heartbeat pulse on primary hotline CTAs */
  .hero a.button-primary,
  a[href^="tel:+1601666"]:not(.no-pulse) {
    position: relative;
  }
  @media (prefers-reduced-motion: no-preference) {
    a[href^="tel:+1601666"]:not(.no-pulse)::after {
      content: '';
      position: absolute;
      inset: -4px;
      border-radius: inherit;
      border: 1px solid rgba(255,23,68,0.45);
      animation: gh-heartbeat 2.4s ease-in-out infinite;
      pointer-events: none;
    }
  }
  @keyframes gh-heartbeat {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50%      { transform: scale(1.06); opacity: 0; }
  }

  /* Focus polish — visible 2px ring on every interactive */
  a:focus-visible,
  button:focus-visible,
  [role="button"]:focus-visible,
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible,
  summary:focus-visible {
    outline: 2px solid #00E5FF;
    outline-offset: 3px;
    border-radius: 4px;
  }
  /* Don't double-ring elements that already have a custom focus state */
  .button:focus-visible { outline-offset: 4px; }

  /* Print styles — clean reader version */
  @media print {
    body {
      background: #fff !important;
      color: #000 !important;
    }
    .noise, .scanlines, .orb-canvas, #site-doodles,
    .reading-progress, .back-to-top, .sw-update-toast,
    .net-status-pill, .konami-notice, .feature-overlay,
    video, audio, iframe, .celestial-map, .mud-terminal,
    .chat-widget, .feed-stream { display: none !important; }
    .site-header, .site-footer { background: transparent !important; color: #000 !important; }
    a { color: #000 !important; text-decoration: underline; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #444; }
    @page { margin: 1.6cm; }
    h1, h2, h3 { break-after: avoid-page; }
  }
}


/* =============================================================================
 * Wave 100 — HBO-grade cinematic immersion, smooth page transitions,
 * Christ-guided light overlays, mobile-responsive padding/margin polish.
 * High-FPS: only transform/opacity/filter animate. No layout thrash.
 * ============================================================================= */
@layer cinema {

  :root {
    /* Unified spacing scale (mobile-first, fluid). Used by all sections going
       forward; legacy `padding: 2rem` blocks still work but every new edit
       reaches for these tokens so rhythm is consistent. */
    --gh-pad-3xs: clamp(0.25rem, 0.6vw, 0.4rem);
    --gh-pad-2xs: clamp(0.4rem,  1vw,   0.65rem);
    --gh-pad-xs:  clamp(0.6rem,  1.4vw, 0.9rem);
    --gh-pad-sm:  clamp(0.9rem,  2vw,   1.25rem);
    --gh-pad-md:  clamp(1.25rem, 2.8vw, 1.75rem);
    --gh-pad-lg:  clamp(1.75rem, 4vw,   2.75rem);
    --gh-pad-xl:  clamp(2.5rem,  6vw,   4rem);
    --gh-pad-2xl: clamp(3.5rem,  8vw,   6rem);
    --gh-pad-3xl: clamp(5rem,    10vw,  8rem);

    /* Cinematic page transition timings. */
    --gh-page-out: 280ms;
    --gh-page-in:  420ms;
    --gh-page-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

    /* Christ-guided light wash. Subtle gold + white halo, kept under 4% so it
       never competes with brand cyan/red. */
    --gh-light-gold: rgba(255, 220, 150, 0.045);
    --gh-light-white: rgba(255, 255, 255, 0.05);
  }

  /* ── iOS safe-area honest padding (notch + home indicator) ─────────────── */
  @supports (padding: max(env(safe-area-inset-top))) {
    body {
      padding-left: env(safe-area-inset-left);
      padding-right: env(safe-area-inset-right);
    }
    .site-header {
      padding-top: max(0.75rem, env(safe-area-inset-top));
    }
    .footer,
    footer.site-footer {
      padding-bottom: max(1.5rem, calc(env(safe-area-inset-bottom) + 1rem));
    }
    .back-to-top {
      bottom: max(1rem, calc(env(safe-area-inset-bottom) + 0.5rem));
      right: max(1rem, calc(env(safe-area-inset-right) + 0.5rem));
    }
  }

  /* ── Mobile-first responsive padding/margin audit ──────────────────────── */
  @media (max-width: 980px) {
    .full-bleed,
    .full-bleed.dossier-feature {
      padding-block: var(--gh-pad-xl);
    }
    .dossier-feature-shell {
      padding-inline: var(--gh-pad-sm);
    }
    .dossier-feature-title {
      margin-block-end: var(--gh-pad-xs);
    }
    .dossier-feature-subtitle {
      margin-block-end: var(--gh-pad-sm);
    }
    .dossier-feature-body + .dossier-feature-body {
      margin-block-start: var(--gh-pad-xs);
    }
    section + section { margin-block-start: 0; }
  }
  @media (max-width: 640px) {
    .hero { padding-inline: var(--gh-pad-sm); }
    .hero-copy { padding: var(--gh-pad-md); }
    .hero-actions { gap: var(--gh-pad-2xs); margin-block-start: var(--gh-pad-md); }
    .hero-actions .button {
      flex: 1 1 calc(50% - var(--gh-pad-2xs));
      justify-content: center;
      text-align: center;
      padding-inline: var(--gh-pad-sm);
    }
    .status-grid { gap: var(--gh-pad-sm); }
    .status-card { padding: var(--gh-pad-sm); }
    .dossier-feature {
      padding-block: var(--gh-pad-lg);
    }
    .dossier-feature-shell {
      padding-inline: var(--gh-pad-sm);
    }
    .celestial-map-head {
      padding-inline: var(--gh-pad-md);
    }
    .celestial-map-legend {
      padding-inline: var(--gh-pad-md);
      columns: 1;
    }
    /* Cards never butt against the edge */
    .dossier-grid,
    .evidence-grid,
    .timeline-grid,
    .platform-pillars-grid,
    .recent-readings-grid {
      gap: var(--gh-pad-sm);
      padding-inline: var(--gh-pad-2xs);
    }
    /* Footer breathes */
    .site-footer {
      padding: var(--gh-pad-lg) var(--gh-pad-md) var(--gh-pad-xl);
    }
  }
  @media (max-width: 380px) {
    .hero-actions .button { flex: 1 1 100%; }
    .dossier-feature-shell {
      padding-inline: var(--gh-pad-xs);
    }
  }

  /* ── Tighten dossier vertical rhythm — consistent across sections ─────── */
  .dossier-feature-meta {
    margin-block-end: var(--gh-pad-sm);
  }
  .dossier-feature-title + .dossier-feature-subtitle {
    margin-block-start: var(--gh-pad-2xs);
  }
  .dossier-feature-subtitle + .dossier-feature-body,
  .dossier-feature-title + .dossier-feature-body {
    margin-block-start: var(--gh-pad-sm);
  }

  /* ── Full-bleed sections: claim 100vw without horizontal scroll ───────── */
  .full-bleed {
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    max-width: 100vw;
    /* Allow nested .shell to recenter at container width */
  }
  .full-bleed > .shell,
  .full-bleed > .dossier-feature-shell,
  .full-bleed > .dossier-feature-bg + .shell,
  .full-bleed > .dossier-feature-bg + .dossier-feature-shell {
    margin-inline: auto;
  }

  /* ── Smooth page transitions (install.doctor pattern) ──────────────────── */
  /* Cross-document View Transitions are already enabled via @view-transition
     at the top of styles.css. These rules add per-slot choreography and an
     SPA-style fallback for the transitions.js fetch+swap path. */
  @keyframes gh-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  @keyframes gh-fade-out {
    from { opacity: 1; }
    to   { opacity: 0; }
  }
  @keyframes gh-slide-up-in {
    from { opacity: 0; transform: translate3d(0, 22px, 0); filter: blur(4px); }
    to   { opacity: 1; transform: translate3d(0, 0, 0);    filter: blur(0); }
  }
  @keyframes gh-slide-up-out {
    from { opacity: 1; transform: translate3d(0, 0, 0);    filter: blur(0); }
    to   { opacity: 0; transform: translate3d(0, -14px, 0); filter: blur(4px); }
  }
  @keyframes gh-veil-down {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  @keyframes gh-veil-up {
    from { opacity: 1; }
    to   { opacity: 0; }
  }
  @media (prefers-reduced-motion: no-preference) {
    ::view-transition-old(root) {
      animation: gh-fade-out var(--gh-page-out) var(--gh-page-ease) both;
    }
    ::view-transition-new(root) {
      animation: gh-slide-up-in var(--gh-page-in) var(--gh-page-ease) both;
    }
  }

  /* Heaven-veil overlay used during transitions.js navigation (SPA fallback). */
  html::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    background:
      radial-gradient(ellipse at 50% -10%, var(--gh-light-gold) 0%, transparent 55%),
      radial-gradient(ellipse at 50% 110%, rgba(124, 58, 237, 0.16) 0%, transparent 55%),
      linear-gradient(180deg, rgba(6,6,16,0.88) 0%, rgba(6,6,16,0.95) 100%);
    transition: opacity 200ms ease;
    will-change: opacity;
  }
  html.gh-page-leaving::after { opacity: 1; }
  html.gh-page-entering main {
    animation: gh-slide-up-in var(--gh-page-in) var(--gh-page-ease) both;
  }
  html.gh-page-enter main {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
  }
  html.gh-page-entered main {
    animation: gh-slide-up-in 520ms var(--gh-page-ease) both;
  }
  @media (prefers-reduced-motion: reduce) {
    html::after,
    html.gh-page-enter main,
    html.gh-page-entered main,
    html.gh-page-entering main { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
  }

  /* ── Cinematic letterbox bars during transition (HBO open/close) ──────── */
  .gh-letterbox {
    position: fixed;
    left: 0; right: 0;
    height: 0;
    background: linear-gradient(180deg, #000 0%, rgba(0,0,0,0.85) 100%);
    z-index: 9998;
    pointer-events: none;
    transition: height 320ms var(--gh-page-ease);
  }
  .gh-letterbox--top    { top: 0;    }
  .gh-letterbox--bottom { bottom: 0; background: linear-gradient(0deg, #000 0%, rgba(0,0,0,0.85) 100%); }
  html.gh-page-leaving .gh-letterbox { height: 5.5vh; }

  /* ── Divine light beam — subtle, slow, on top of hero only ─────────────── */
  .hero {
    position: relative;
    isolation: isolate;
  }
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      radial-gradient(70% 60% at 50% -10%, var(--gh-light-gold) 0%, transparent 70%),
      radial-gradient(40% 60% at 50% 110%, var(--gh-light-white) 0%, transparent 70%);
    mix-blend-mode: screen;
    opacity: 0.55;
    z-index: 0;
  }
  @media (prefers-reduced-motion: no-preference) {
    .hero::after {
      animation: gh-divine-breath 16s ease-in-out infinite;
    }
  }
  @keyframes gh-divine-breath {
    0%, 100% { opacity: 0.4; transform: translateY(0) scale(1); }
    50%      { opacity: 0.7; transform: translateY(-1.5%) scale(1.015); }
  }

  /* ── Scripture whisper — fixed corner, fades on hover ─────────────────── */
  .gh-scripture-whisper {
    position: fixed;
    left: 1.25rem;
    bottom: 1.25rem;
    z-index: 30;
    max-width: 240px;
    padding: 0.55rem 0.8rem;
    font-family: 'Cormorant Garamond', 'EB Garamond', serif;
    font-style: italic;
    font-size: 0.84rem;
    line-height: 1.45;
    color: rgba(255, 220, 200, 0.62);
    background: linear-gradient(180deg, rgba(12, 6, 24, 0.55) 0%, rgba(6, 6, 16, 0.62) 100%);
    border-left: 2px solid rgba(255, 220, 150, 0.45);
    border-radius: 0 10px 10px 0;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 600ms ease, transform 600ms ease;
    pointer-events: none;
    user-select: none;
  }
  .gh-scripture-whisper.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  .gh-scripture-whisper cite {
    display: block;
    margin-top: 0.25rem;
    font-style: normal;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 220, 150, 0.55);
  }
  @media (max-width: 640px) {
    .gh-scripture-whisper {
      left: 0.75rem;
      bottom: max(0.75rem, env(safe-area-inset-bottom, 0.75rem));
      max-width: 200px;
      font-size: 0.78rem;
    }
  }
  @media print { .gh-scripture-whisper { display: none; } }

  /* ── Star particles — pure CSS, GPU-only animation ────────────────────── */
  .gh-stars {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.55;
    background-image:
      radial-gradient(1px 1px at 20% 30%, rgba(255,255,255,0.7) 50%, transparent 100%),
      radial-gradient(1px 1px at 40% 70%, rgba(0, 229, 255, 0.55) 50%, transparent 100%),
      radial-gradient(1.2px 1.2px at 60% 20%, rgba(255, 220, 150, 0.5) 50%, transparent 100%),
      radial-gradient(0.8px 0.8px at 80% 60%, rgba(255,255,255,0.55) 50%, transparent 100%),
      radial-gradient(1px 1px at 15% 80%, rgba(124, 58, 237, 0.55) 50%, transparent 100%),
      radial-gradient(0.8px 0.8px at 85% 12%, rgba(255,255,255,0.55) 50%, transparent 100%),
      radial-gradient(1px 1px at 30% 50%, rgba(0, 229, 255, 0.55) 50%, transparent 100%);
    background-size: 100% 100%;
    background-repeat: repeat;
    animation: gh-stars-drift 90s linear infinite;
    will-change: transform;
  }
  @keyframes gh-stars-drift {
    0%   { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-6vw, -3vh, 0); }
  }
  @media (prefers-reduced-motion: reduce) { .gh-stars { animation: none; } }
  @media print { .gh-stars { display: none; } }

  /* ── Sacred geometry watermark in the footer ──────────────────────────── */
  .site-footer { position: relative; isolation: isolate; }
  .site-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.045;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><g fill='none' stroke='%23F4FAFF' stroke-width='0.6'><circle cx='100' cy='100' r='80'/><circle cx='100' cy='60' r='40'/><circle cx='100' cy='140' r='40'/><circle cx='60' cy='100' r='40'/><circle cx='140' cy='100' r='40'/><circle cx='71.7' cy='71.7' r='40'/><circle cx='128.3' cy='71.7' r='40'/><circle cx='71.7' cy='128.3' r='40'/><circle cx='128.3' cy='128.3' r='40'/></g></svg>");
    background-position: center;
    background-repeat: no-repeat;
    background-size: min(420px, 60vw);
    mix-blend-mode: screen;
  }

  /* ── Click ripple — refined: gold halo for HBO touch ──────────────────── */
  .gh-click-ripple {
    position: fixed;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,220,150,0.65) 0%, rgba(0,229,255,0.3) 45%, transparent 80%);
    transform: translate(-50%, -50%) scale(0.4);
    opacity: 0;
    z-index: 9997;
    pointer-events: none;
    mix-blend-mode: screen;
  }
  .gh-click-ripple.is-firing {
    animation: gh-ripple-fire 720ms cubic-bezier(0.16, 0.6, 0.3, 1) both;
  }
  @keyframes gh-ripple-fire {
    0%   { transform: translate(-50%, -50%) scale(0.4);  opacity: 0.95; }
    40%  { opacity: 0.7; }
    100% { transform: translate(-50%, -50%) scale(7);   opacity: 0; }
  }
  @media (prefers-reduced-motion: reduce) { .gh-click-ripple { display: none; } }

  /* ── Section-entry choreography — fade + lift, GPU only ─────────────────
     Specificity gotcha: the hide rule MUST exclude .is-revealed/.is-visible
     and html.gh-page-entered or the IntersectionObserver flip never wins
     and every section stays opacity:0. Same for the show rule below — it
     needs html.js-reveal-active to outrank the hide rule's specificity. */
  @media (prefers-reduced-motion: no-preference) {
    html.js-reveal-active .reveal-section:not(.is-revealed):not(.is-visible):not(:target) {
      transform: translate3d(0, 18px, 0);
      opacity: 0;
      transition: transform 720ms var(--gh-page-ease), opacity 720ms ease;
      will-change: transform, opacity;
    }
    html.js-reveal-active .reveal-section.is-revealed,
    html.js-reveal-active .reveal-section.is-visible,
    html.js-reveal-active .reveal-section:target,
    html.gh-page-entered .reveal-section {
      transform: translate3d(0, 0, 0);
      opacity: 1;
    }
  }
  /* Safety net: if JS never fires (no IO, blocked script, error), reveal everything
     after a short delay so content is NEVER permanently invisible. */
  html:not(.js-reveal-active) .reveal-section { opacity: 1; transform: none; }
  @media (prefers-reduced-motion: reduce) {
    .reveal-section { opacity: 1 !important; transform: none !important; }
  }

  /* ── Content-visibility for offscreen sections (huge perf win) ────────── */
  .full-bleed.dossier-feature,
  .timeline-vertical-section,
  .live-feed-section,
  .recent-readings-section {
    content-visibility: auto;
    contain-intrinsic-size: auto 1200px;
  }

  /* ── Image polish — instant-paint hero, lazy everything else ──────────── */
  .hero img, .hero video, .hero-stage img, .hero-stage video {
    /* fetchpriority handled in HTML; here just keep the LCP candidate stable */
    background: linear-gradient(180deg, rgba(6,6,16,0.4), rgba(6,6,16,0.7));
  }

  /* ── Map: collapsed-by-default — teaser tooltip styling ───────────────── */
  .leaflet-tooltip.celestial-tooltip--teaser {
    background: linear-gradient(160deg, rgba(12, 10, 28, 0.95) 0%, rgba(6, 6, 16, 0.98) 100%);
    color: #fff;
    border: 1px solid rgba(0, 229, 255, 0.55);
    border-radius: 10px;
    box-shadow:
      0 14px 36px rgba(0, 0, 0, 0.7),
      0 0 22px rgba(0, 229, 255, 0.18);
    padding: 0;
    max-width: 220px;
    min-width: 150px;
    pointer-events: none;
    backdrop-filter: blur(8px);
  }
  .celestial-tooltip-inner--teaser {
    padding: 8px 10px 9px;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .celestial-tooltip-hint {
    margin-top: 2px;
    font-size: 0.58rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(0, 229, 255, 0.78);
    font-weight: 600;
  }
  /* The expanded popup — what shows on click */
  .leaflet-popup.celestial-popup-wrap .celestial-popup-inner {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 240px;
    max-width: 340px;
  }
  @media (min-width: 1280px) {
    .leaflet-popup.celestial-popup-wrap .celestial-popup-inner { max-width: 360px; }
  }
  @media (max-width: 640px) {
    .leaflet-popup.celestial-popup-wrap .celestial-popup-inner { min-width: 220px; max-width: 80vw; }
    .leaflet-popup.celestial-popup-wrap .celestial-popup-title { font-size: 0.98rem; }
    .leaflet-popup.celestial-popup-wrap .celestial-popup-body  { font-size: 0.86rem; }
  }
  .leaflet-popup.celestial-popup-wrap .celestial-popup-body {
    line-height: 1.6;
  }

  /* ── Cinematic chapter dividers — subtle cross/star between sections ──── */
  .gh-chapter-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: var(--gh-pad-2xl) auto;
    color: rgba(255, 220, 150, 0.45);
    font-family: 'Cinzel', 'Cormorant Garamond', serif;
    letter-spacing: 0.32em;
    font-size: 0.7rem;
    text-transform: uppercase;
  }
  .gh-chapter-divider::before,
  .gh-chapter-divider::after {
    content: "";
    flex: 0 0 min(160px, 18vw);
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 220, 150, 0.35) 50%, transparent 100%);
  }

  /* ── High-FPS guarantees: kill expensive filters on small screens ────── */
  @media (max-width: 640px) {
    .noise, body::after { opacity: 0.04; }
    body::before { animation-duration: 70s, 140s; }
    .hero::after { animation: none; opacity: 0.45; }
    .gh-stars { opacity: 0.4; }
  }

  /* ── Focus-visible polish — gold ring matches divine theme ────────────── */
  a:focus-visible,
  button:focus-visible,
  [role="button"]:focus-visible,
  input:focus-visible,
  textarea:focus-visible,
  select:focus-visible,
  summary:focus-visible {
    outline: 2px solid rgba(0, 229, 255, 0.95);
    outline-offset: 3px;
    box-shadow: 0 0 0 4px rgba(0, 229, 255, 0.18);
    border-radius: 4px;
  }
}

@layer cinema {
  /* ── Candle easter egg ───────────────────────────────────────────────── */
  .gh-candle-flame {
    position: fixed;
    inset: 0;
    z-index: 10000;
    pointer-events: none;
    display: grid;
    place-items: center;
    animation: gh-fade-in 600ms ease both;
    background: radial-gradient(circle at 50% 60%, rgba(255, 200, 90, 0.18) 0%, rgba(0,0,0,0) 55%);
  }
  .gh-candle-flame.is-out { animation: gh-fade-out 1200ms ease both; }
  .gh-candle-glow {
    width: clamp(160px, 28vw, 320px);
    height: clamp(220px, 38vw, 440px);
    background: radial-gradient(ellipse at 50% 65%, #fff8c4 0%, #ffb648 26%, #ff6a00 50%, rgba(255,80,0,0) 75%);
    filter: blur(2px) drop-shadow(0 -20px 50px rgba(255, 180, 80, 0.85));
    animation: gh-candle-flicker 1400ms ease-in-out infinite alternate;
    border-radius: 50% 50% 45% 45% / 70% 70% 35% 35%;
  }
  .gh-candle-text {
    position: absolute;
    bottom: clamp(2rem, 8vh, 5rem);
    left: 50%;
    transform: translateX(-50%);
    font-family: "Cormorant Garamond", "Times New Roman", serif;
    font-style: italic;
    font-size: clamp(1rem, 2vw, 1.4rem);
    color: #ffe7a3;
    text-shadow: 0 0 12px rgba(255, 180, 80, 0.6);
    letter-spacing: 0.04em;
  }
  @keyframes gh-candle-flicker {
    0%   { transform: scale(1)    rotate(-0.4deg); opacity: 0.92; }
    50%  { transform: scale(1.04) rotate( 0.6deg); opacity: 1;    }
    100% { transform: scale(0.98) rotate(-0.2deg); opacity: 0.95; }
  }
  @media (prefers-reduced-motion: reduce) {
    .gh-candle-glow { animation: none; }
  }
}

@layer cinema {
  /* ── Transmission Log Module ─────────────────────────────────────────── */
  .transmissions-section {
    padding: clamp(3rem, 7vw, 5rem) 0;
    background: transparent;
  }
  .transmissions-section .tx-card-frame {
    position: relative;
    padding: clamp(2rem, 4.5vw, 3.25rem) clamp(1.5rem, 4vw, 2.75rem) clamp(1.75rem, 4vw, 2.75rem);
    background:
      radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255, 23, 68, 0.10), transparent 60%),
      radial-gradient(ellipse 60% 50% at 100% 100%, rgba(0, 229, 255, 0.05), transparent 60%),
      linear-gradient(180deg, rgba(10, 8, 22, 0.78), rgba(6, 6, 16, 0.92));
    border: 1px solid rgba(255, 23, 68, 0.20);
    border-radius: 24px;
    box-shadow:
      0 40px 120px -20px rgba(0, 0, 0, 0.7),
      0 0 0 1px rgba(255, 255, 255, 0.02) inset,
      0 0 80px rgba(255, 23, 68, 0.06) inset;
    backdrop-filter: blur(4px) saturate(1.1);
    overflow: hidden;
    isolation: isolate;
  }
  /* top accent rail */
  .transmissions-section .tx-card-frame::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    pointer-events: none;
    background: linear-gradient(90deg,
      transparent 0%,
      rgba(255, 23, 68, 0.55) 18%,
      rgba(124, 58, 237, 0.55) 50%,
      rgba(0, 229, 255, 0.55) 82%,
      transparent 100%);
    z-index: 2;
  }
  /* faint scanline overlay (cinema) */
  .transmissions-section .tx-card-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.012) 0px,
      rgba(255, 255, 255, 0.012) 1px,
      transparent 1px,
      transparent 4px
    );
    mix-blend-mode: screen;
    border-radius: inherit;
    z-index: 1;
  }
  .transmissions-section .tx-layout > * { position: relative; z-index: 3; }

  /* chapter divider tightened to module top-bar */
  .transmissions-section .tx-card-frame > .gh-chapter-divider {
    margin: -0.5rem 0 1.5rem;
    padding-bottom: 1.1rem;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.06);
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    opacity: 0.78;
  }

  /* ── Hero block ──────────────────────────────────────────────────────── */
  .transmissions-section .tx-hero {
    text-align: center;
    padding: 0.25rem 0 2.25rem;
    margin-bottom: 1.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
  .transmissions-section .tx-hero-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
  }
  .transmissions-section .tx-hero-row .eyebrow {
    margin: 0;
    text-align: left;
    flex: 1 1 auto;
    min-width: 0;
  }
  .transmissions-section .tx-hero h2 {
    font-family: var(--font-display, 'Cinzel', serif);
    font-size: clamp(2rem, 5vw, 3.4rem);
    font-weight: 700;
    margin: 0.6rem 0 0.7rem;
    color: #fff;
    letter-spacing: -0.005em;
    line-height: 1.05;
    text-wrap: balance;
    background: linear-gradient(180deg, #ffffff 0%, rgba(244, 250, 255, 0.78) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 60px rgba(255, 23, 68, 0.12);
  }
  .transmissions-section .tx-hero-sub {
    color: var(--text-muted, rgba(255, 255, 255, 0.68));
    max-width: 58ch;
    margin: 0 auto;
    font-size: clamp(0.95rem, 1.1vw, 1.05rem);
    line-height: 1.65;
    text-wrap: pretty;
  }

  /* ── Stats grid (true sub-cards) ─────────────────────────────────────── */
  .transmissions-section .tx-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    margin: 1.75rem auto 0;
    max-width: 720px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(12, 10, 28, 0.4), rgba(6, 6, 16, 0.3));
  }
  .transmissions-section .tx-stats > div {
    padding: 1rem 0.75rem;
    text-align: center;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.62rem;
    color: var(--text-muted, rgba(255, 255, 255, 0.55));
    text-transform: uppercase;
    letter-spacing: 0.16em;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    transition: background 0.3s ease;
  }
  .transmissions-section .tx-stats > div:last-child {
    border-right: none;
  }
  .transmissions-section .tx-stats > div:hover {
    background: rgba(0, 229, 255, 0.04);
  }
  .transmissions-section .tx-stat-val {
    color: var(--accent-cyan, #00E5FF);
    font-weight: 700;
    font-size: clamp(1.5rem, 2.2vw, 1.85rem);
    display: block;
    line-height: 1;
    margin-bottom: 0.45rem;
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 18px rgba(0, 229, 255, 0.35);
  }
  .transmissions-section .tx-stat-since {
    display: block;
    font-size: 0.55rem;
    margin-top: 0.2rem;
    opacity: 0.7;
  }
  @media (max-width: 640px) {
    .transmissions-section .tx-stats {
      grid-template-columns: repeat(2, 1fr);
    }
    .transmissions-section .tx-stats > div:nth-child(2) { border-right: none; }
    .transmissions-section .tx-stats > div:nth-child(1),
    .transmissions-section .tx-stats > div:nth-child(2) {
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }
  }

  /* ── Synopsis panel ──────────────────────────────────────────────────── */
  .transmissions-section .tx-synopsis {
    padding: 1.5rem 1.75rem;
    margin: 0 0 1.75rem;
    border: 1px solid rgba(124, 58, 237, 0.20);
    border-left: 3px solid rgba(124, 58, 237, 0.55);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(20, 14, 38, 0.55) 0%, rgba(8, 6, 18, 0.45) 100%);
    backdrop-filter: blur(8px);
    position: relative;
  }
  .transmissions-section .tx-synopsis h3 {
    font-family: var(--font-display, 'Cinzel', serif);
    font-size: 0.78rem;
    color: var(--accent-purple, #7C3AED);
    margin: 0 0 0.85rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    font-weight: 600;
  }
  .transmissions-section .tx-synopsis ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.84);
  }
  .transmissions-section .tx-synopsis li {
    padding: 0.15rem 0;
    text-wrap: pretty;
  }
  .transmissions-section .tx-synopsis li::before {
    content: "◆";
    color: var(--accent-cyan, #00E5FF);
    font-size: 0.6rem;
    margin-right: 0.6rem;
    vertical-align: middle;
    opacity: 0.85;
  }

  /* ── Filter pill-group ───────────────────────────────────────────────── */
  .transmissions-section .tx-filters {
    display: inline-flex;
    gap: 0;
    margin: 0 0 1.5rem;
    flex-wrap: wrap;
    padding: 4px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(10, 8, 22, 0.5), rgba(6, 6, 16, 0.4));
    backdrop-filter: blur(4px);
  }
  .transmissions-section .tx-filter-btn {
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted, rgba(255, 255, 255, 0.6));
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.7rem;
    cursor: pointer;
    transition: color 0.2s ease, background 0.25s ease, box-shadow 0.25s ease;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 500;
    white-space: nowrap;
  }
  .transmissions-section .tx-filter-btn:hover {
    color: rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.04);
  }
  .transmissions-section .tx-filter-btn.active {
    color: #060610;
    background: linear-gradient(180deg, rgba(0, 245, 255, 1), rgba(0, 200, 230, 1));
    box-shadow:
      0 0 20px rgba(0, 229, 255, 0.45),
      0 0 0 1px rgba(0, 229, 255, 0.3);
    font-weight: 700;
  }

  /* ── List + cards ────────────────────────────────────────────────────── */
  .transmissions-section .tx-list {
    display: grid;
    gap: 0.85rem;
  }
  .transmissions-section .tx-card {
    position: relative;
    padding: 1.15rem 1.4rem 1.15rem 1.6rem;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 12px;
    background: linear-gradient(160deg, rgba(14, 12, 30, 0.55) 0%, rgba(6, 6, 16, 0.45) 100%);
    transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    cursor: pointer;
    overflow: hidden;
  }
  .transmissions-section .tx-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, rgba(0, 229, 255, 0), rgba(0, 229, 255, 0.6), rgba(0, 229, 255, 0));
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .transmissions-section .tx-card:hover {
    border-color: rgba(0, 229, 255, 0.25);
    transform: translateY(-2px);
    box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.6);
    background: linear-gradient(160deg, rgba(16, 14, 34, 0.65) 0%, rgba(8, 6, 20, 0.5) 100%);
  }
  .transmissions-section .tx-card:hover::before { opacity: 1; }
  .transmissions-section .tx-card:has(.tx-card-type.call):hover {
    border-color: rgba(255, 23, 68, 0.35);
  }
  .transmissions-section .tx-card:has(.tx-card-type.call):hover::before {
    background: linear-gradient(180deg, rgba(255, 23, 68, 0), rgba(255, 23, 68, 0.7), rgba(255, 23, 68, 0));
  }
  .transmissions-section .tx-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.6rem;
    gap: 0.6rem;
  }
  .transmissions-section .tx-card-type {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    font-weight: 600;
    line-height: 1;
  }
  .transmissions-section .tx-card-type.call {
    border: 1px solid rgba(255, 23, 68, 0.45);
    background: rgba(255, 23, 68, 0.08);
    color: var(--accent-red, #FF1744);
  }
  .transmissions-section .tx-card-type.chat {
    border: 1px solid rgba(0, 229, 255, 0.4);
    background: rgba(0, 229, 255, 0.06);
    color: var(--accent-cyan, #00E5FF);
  }
  .transmissions-section .tx-card-time {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.68rem;
    color: var(--text-muted, rgba(255, 255, 255, 0.5));
    letter-spacing: 0.05em;
    font-variant-numeric: tabular-nums;
  }
  .transmissions-section .tx-card-preview {
    font-size: 0.9rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.86);
    max-height: 4.8rem;
    overflow: hidden;
    mask-image: linear-gradient(180deg, #000 60%, transparent);
    -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent);
    text-wrap: pretty;
  }
  .transmissions-section .tx-card.expanded .tx-card-preview {
    max-height: none;
    mask-image: none;
    -webkit-mask-image: none;
  }
  .transmissions-section .tx-card-turns {
    margin-top: 0.85rem;
    display: none;
  }
  .transmissions-section .tx-card.expanded .tx-card-turns { display: block; }
  .transmissions-section .tx-turn {
    padding: 0.65rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 0.86rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.86);
  }
  .transmissions-section .tx-turn-label {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    margin-bottom: 0.25rem;
    font-weight: 600;
  }
  .transmissions-section .tx-turn-label.caller { color: var(--accent-red, #FF1744); }
  .transmissions-section .tx-turn-label.signal { color: var(--accent-cyan, #00E5FF); }
  .transmissions-section .tx-empty {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--text-muted, rgba(255, 255, 255, 0.55));
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    border: 1px dashed rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    background: rgba(6, 6, 16, 0.3);
  }
  .transmissions-section .tx-insignificant { opacity: 0.42; }
  .transmissions-section .tx-filters:not(.show-all) + .tx-list .tx-insignificant {
    display: none;
  }
  .transmissions-section .tx-filters.show-all + .tx-list .tx-insignificant {
    display: block;
    opacity: 0.62;
  }
  @media (prefers-reduced-motion: reduce) {
    .transmissions-section .tx-card,
    .transmissions-section .tx-card::before,
    .transmissions-section .tx-filter-btn,
    .transmissions-section .tx-stats > div {
      transition: none;
    }
    .transmissions-section .tx-card:hover { transform: none; }
  }

  /* ── Merged Docs section (was /docs page) ────────────────────────────── */
  .docs-section {
    padding: clamp(3rem, 7vw, 5rem) 0;
    background:
      radial-gradient(ellipse at 50% 0%, rgba(0, 229, 255, 0.05), transparent 55%),
      radial-gradient(ellipse at 50% 100%, rgba(124, 58, 237, 0.05), transparent 55%);
    border-top: 1px solid rgba(0, 229, 255, 0.14);
  }
  .docs-section .docs-layout {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .docs-section .docs-hero {
    text-align: center;
    margin-bottom: 2.5rem;
    padding: 1.5rem 0 1rem;
  }
  .docs-section .docs-hero h2 {
    font-family: var(--font-display, 'Cinzel', serif);
    font-size: clamp(2rem, 5vw, 3.4rem);
    font-weight: 700;
    margin: 0.4rem 0 0.8rem;
    letter-spacing: -0.01em;
  }
  .docs-section .docs-hero-sub {
    color: var(--text-muted, rgba(255,255,255,0.7));
    max-width: 62ch;
    margin: 0 auto;
    font-size: 1rem;
    line-height: 1.65;
  }
  .docs-section .docs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: clamp(1rem, 2.5vw, 1.5rem);
  }
  .docs-section .docs-card {
    padding: clamp(1.3rem, 2.5vw, 1.8rem);
    border: 1px solid rgba(124, 58, 237, 0.22);
    border-radius: var(--radius-panel, 16px);
    background: linear-gradient(160deg, rgba(12, 10, 28, 0.6) 0%, rgba(6, 6, 16, 0.5) 100%);
    backdrop-filter: blur(6px);
    transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s;
  }
  .docs-section .docs-card:hover {
    border-color: rgba(0, 229, 255, 0.42);
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.5), 0 0 24px rgba(0, 229, 255, 0.08);
  }
  .docs-section .docs-card h3 {
    font-family: var(--font-display, 'Cinzel', serif);
    font-size: 1.15rem;
    margin: 0 0 0.9rem;
    color: #fff;
    letter-spacing: 0.02em;
  }
  .docs-section .docs-card p {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.92rem;
    line-height: 1.65;
    margin: 0.7rem 0 0;
  }
  .docs-section .docs-card a {
    color: var(--accent-cyan, #00E5FF);
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 229, 255, 0.3);
    transition: border-color 0.2s;
  }
  .docs-section .docs-card a:hover {
    border-bottom-color: var(--accent-cyan, #00E5FF);
  }
  .docs-section .docs-code {
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 0.9rem 1.05rem;
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    font-size: 0.82rem;
    line-height: 1.6;
    color: #c9f6ff;
    overflow-x: auto;
    margin: 0;
  }
  .docs-section .docs-code code { color: inherit; background: none; padding: 0; font: inherit; }
  .docs-section .docs-endpoint-list {
    list-style: none;
    padding: 0;
    margin: 0 0 0.9rem;
    display: grid;
    gap: 0.55rem;
  }
  .docs-section .docs-endpoint-list li {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.5;
  }
  .docs-section .docs-endpoint-list code {
    font-family: var(--font-mono, 'JetBrains Mono', monospace);
    color: var(--accent-cyan, #00E5FF);
    background: rgba(0, 229, 255, 0.07);
    padding: 0.15rem 0.45rem;
    border-radius: 5px;
    font-size: 0.84rem;
  }

  @media (max-width: 640px) {
    .transmissions-section .tx-filters { gap: 0.45rem; }
    .transmissions-section .tx-filter-btn { padding: 0.4rem 0.75rem; font-size: 0.68rem; }
    .transmissions-section .tx-stats { gap: 0.9rem; font-size: 0.7rem; }
    .docs-section .docs-grid { gap: 0.9rem; }
  }
}

/* ============================================================
   UNLAYERED — Leaflet popup overrides (HIGHEST CASCADE TIER)
   Layered CSS loses to unlayered Leaflet CDN styles regardless
   of !important. These rules sit outside any @layer to win.
   ============================================================ */
.leaflet-popup.celestial-popup-wrap .leaflet-popup-content-wrapper {
  background: linear-gradient(160deg, rgba(12, 10, 28, 0.97) 0%, rgba(6, 6, 16, 0.99) 100%) !important;
  background-color: rgba(6, 6, 16, 0.98) !important;
  color: #f4f4f8 !important;
  border: 1px solid rgba(124, 58, 237, 0.45) !important;
  border-radius: 14px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.75), 0 0 30px rgba(0, 229, 255, 0.14) !important;
  backdrop-filter: blur(8px);
  padding: 4px !important;
}
.leaflet-popup.celestial-popup-wrap .leaflet-popup-content {
  margin: 14px 18px !important;
  line-height: 1.55 !important;
  font-family: 'Sora', system-ui, sans-serif !important;
  color: #f4f4f8 !important;
  background: transparent !important;
}
.leaflet-popup.celestial-popup-wrap .leaflet-popup-content,
.leaflet-popup.celestial-popup-wrap .leaflet-popup-content p,
.leaflet-popup.celestial-popup-wrap .leaflet-popup-content h1,
.leaflet-popup.celestial-popup-wrap .leaflet-popup-content h2,
.leaflet-popup.celestial-popup-wrap .leaflet-popup-content h3,
.leaflet-popup.celestial-popup-wrap .leaflet-popup-content h4,
.leaflet-popup.celestial-popup-wrap .leaflet-popup-content h5,
.leaflet-popup.celestial-popup-wrap .leaflet-popup-content span,
.leaflet-popup.celestial-popup-wrap .leaflet-popup-content strong,
.leaflet-popup.celestial-popup-wrap .leaflet-popup-content em,
.leaflet-popup.celestial-popup-wrap .celestial-popup-inner,
.leaflet-popup.celestial-popup-wrap .celestial-popup-body,
.leaflet-popup.celestial-popup-wrap .celestial-popup-meta {
  color: #f4f4f8 !important;
}
.leaflet-popup.celestial-popup-wrap .celestial-popup-title {
  color: #ffffff !important;
}
.leaflet-popup.celestial-popup-wrap .celestial-popup-body {
  color: rgba(255, 255, 255, 0.86) !important;
}
.leaflet-popup.celestial-popup-wrap .celestial-popup-meta {
  color: rgba(0, 229, 255, 0.85) !important;
}
.leaflet-popup.celestial-popup-wrap .leaflet-popup-content a,
.leaflet-popup.celestial-popup-wrap .celestial-popup-inner a {
  color: #00E5FF !important;
  text-decoration: underline !important;
  text-decoration-color: rgba(0, 229, 255, 0.45) !important;
}
.leaflet-popup.celestial-popup-wrap .leaflet-popup-content a:hover,
.leaflet-popup.celestial-popup-wrap .celestial-popup-inner a:hover {
  color: #50AAE3 !important;
  text-decoration-color: rgba(80, 170, 227, 0.75) !important;
}
.leaflet-popup.celestial-popup-wrap .leaflet-popup-tip {
  background: rgba(12, 10, 28, 0.98) !important;
  background-color: rgba(12, 10, 28, 0.98) !important;
  border: 1px solid rgba(124, 58, 237, 0.45) !important;
}
.leaflet-popup.celestial-popup-wrap a.leaflet-popup-close-button {
  color: rgba(255, 255, 255, 0.75) !important;
  font-size: 22px !important;
  padding: 6px 10px !important;
}
.leaflet-popup.celestial-popup-wrap a.leaflet-popup-close-button:hover {
  color: #00E5FF !important;
}

/* ============================================================
   UNLAYERED — Defensive card edge-padding floor (HIGHEST TIER)
   Cards never touch the viewport edge, at any breakpoint,
   regardless of full-bleed escapes or container math edge cases.
   ============================================================ */
.status-grid,
.pillar-grid,
.platform-pillars-grid,
.docs-grid,
.dossier-grid,
.evidence-grid,
.timeline-grid,
.recent-readings-grid {
  padding-inline: clamp(0.75rem, 2vw, 1.25rem);
}

/* Plate-vault tier (when not the merged mosaic wall) keeps its
   1.5rem floor; the merged mosaic is intentionally edge-to-edge. */
.plate-vault-tier:not(.plate-vault-tier-merged) {
  padding-inline: max(1rem, 1.5vw);
}

/* Generic .card class anywhere in the tree gets a guaranteed
   1rem outer breathing room when it is a direct child of <main>
   or <section> that escaped the .shell container. */
main > .status-card,
main > .pillar-card,
main > .docs-card,
main > .dossier-card,
section > .status-card,
section > .pillar-card,
section > .docs-card,
section > .dossier-card {
  margin-inline: max(1rem, env(safe-area-inset-left));
}

/* Below 460px (smallest phones, foldables) — pin a hard 0.75rem
   inline padding on every card grid so cards keep breathing room
   even when the viewport math collapses to its minimum. */
@media (max-width: 460px) {
  .status-grid,
  .pillar-grid,
  .platform-pillars-grid,
  .docs-grid,
  .dossier-grid,
  .evidence-grid,
  .timeline-grid,
  .recent-readings-grid {
    padding-inline: 0.75rem;
  }
}

/* ── UNLAYERED — Section indent helpers + Snapshot SEV card + Merged Log ── */

.shell .panel-copy.panel-copy--indented,
.panel-copy.panel-copy--indented {
  text-align: left !important;
  padding-inline-start: clamp(1rem, 4vw, 3rem) !important;
  padding-inline-end: clamp(0.5rem, 2vw, 1.5rem) !important;
  margin-bottom: 1.5rem;
  max-width: 64ch;
}
.shell.bridge-section--indented .bridge-copy--indented,
.bridge-section--indented .bridge-copy--indented {
  padding-inline-start: clamp(1rem, 5vw, 4rem) !important;
  padding-inline-end: clamp(0.75rem, 3vw, 2rem) !important;
  max-width: 72ch;
}
/* Pillars grid: breathing room left+right so cards don't kiss the screen edges */
.platform-pillars .pillars-grid {
  padding-inline: clamp(1rem, 4vw, 3rem) !important;
}
@media (max-width: 640px) {
  .platform-pillars .pillars-grid {
    padding-inline: clamp(0.875rem, 4vw, 1.5rem) !important;
  }
}
/* Bridge stat row: same breathing room as pillars so 4 stats don't kiss screen edges */
.shell.bridge-section .bridge-stat-row,
.bridge-section .bridge-stat-row {
  padding-inline: clamp(1rem, 4vw, 3rem) !important;
  justify-content: center;
}
@media (max-width: 640px) {
  .shell.bridge-section .bridge-stat-row,
  .bridge-section .bridge-stat-row {
    padding-inline: clamp(0.875rem, 4vw, 1.5rem) !important;
  }
}
@media (max-width: 640px) {
  .shell .panel-copy.panel-copy--indented,
  .panel-copy.panel-copy--indented,
  .shell.bridge-section--indented .bridge-copy--indented,
  .bridge-section--indented .bridge-copy--indented {
    padding-inline-start: clamp(0.875rem, 4vw, 1.5rem) !important;
  }
}

/* Snapshot SEV-3 dossier card — internal two-up grid */
.dossier-feature--snapshot .dossier-feature-shell {
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.dossier-feature--snapshot .dossier-feature-bg {
  background:
    radial-gradient(60% 50% at 18% 25%, rgba(80, 170, 227, 0.18) 0%, transparent 60%),
    radial-gradient(50% 40% at 82% 75%, rgba(124, 58, 237, 0.14) 0%, transparent 65%),
    linear-gradient(135deg, rgba(6, 6, 16, 0.92) 0%, rgba(12, 12, 28, 0.96) 100%);
}
.dossier-feature--snapshot .dossier-feature-title {
  margin-block-end: 0.5rem;
}
.dossier-feature--snapshot .dossier-feature-subtitle {
  max-width: 64ch;
  margin-block-end: clamp(1.5rem, 3vw, 2.25rem);
  color: rgba(255, 255, 255, 0.78);
}
.dossier-entropy-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.25rem, 3vw, 2rem);
}
@media (min-width: 900px) {
  .dossier-entropy-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
}
.dossier-entropy-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, rgba(255, 255, 255, 0.01) 100%);
  backdrop-filter: blur(4px);
}
.dossier-entropy-card .eyebrow {
  margin-block-end: 0.1rem;
}
.dossier-entropy-card h3 {
  font-size: clamp(1.25rem, 1.8vw, 1.6rem);
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
}
.dossier-entropy-card .hero-actions {
  margin-block: 0.5rem 0.75rem;
}
.dossier-entropy-card .codeblock {
  margin-block-start: 0.25rem;
}

/* Entropy-Origin SEV-4 dossier card — 280 mG First Alarm exhibit */
.dossier-feature--entropy-origin .dossier-feature-shell {
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.dossier-feature--entropy-origin .dossier-feature-bg {
  background:
    radial-gradient(55% 45% at 22% 28%, rgba(255, 23, 68, 0.22) 0%, transparent 62%),
    radial-gradient(45% 35% at 80% 72%, rgba(255, 165, 0, 0.14) 0%, transparent 60%),
    linear-gradient(135deg, rgba(10, 4, 6, 0.94) 0%, rgba(24, 8, 14, 0.96) 100%);
}
.dossier-feature--entropy-origin .dossier-feature-title {
  margin-block-end: 0.5rem;
}
.dossier-feature--entropy-origin .dossier-feature-subtitle {
  max-width: 64ch;
  margin-block-end: clamp(1.5rem, 3vw, 2.25rem);
  color: rgba(255, 255, 255, 0.78);
}
.dossier-feature--entropy-origin .evidence-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.5rem, 3vw, 2.25rem);
}
@media (min-width: 960px) {
  .dossier-feature--entropy-origin .evidence-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    align-items: start;
  }
}

/* Merged Transmission Log — LIVE indicator + last-update timestamp */
.transmissions-section .tx-hero-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-block-end: 0.5rem;
}
.transmissions-section .feed-live-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.25rem 0.65rem;
  border: 1px solid rgba(0, 229, 255, 0.35);
  border-radius: 999px;
  font-family: var(--mono, "Fira Code", monospace);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  color: var(--accent-cyan, #00E5FF);
  background: rgba(0, 229, 255, 0.06);
}
.transmissions-section .feed-live-indicator.is-offline {
  color: var(--accent-red, #FF1744);
  border-color: rgba(255, 23, 68, 0.35);
  background: rgba(255, 23, 68, 0.06);
}
.transmissions-section .feed-live-indicator .pulse-dot-inline {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
  animation: feed-live-pulse 1.6s ease-out infinite;
}
.transmissions-section .feed-live-indicator.is-offline .pulse-dot-inline {
  animation: none;
}
@keyframes feed-live-pulse {
  0%   { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  70%  { box-shadow: 0 0 0 10px transparent; opacity: 0.6; }
  100% { box-shadow: 0 0 0 0 transparent; opacity: 1; }
}
.transmissions-section .tx-stat-since {
  color: var(--text-muted, rgba(255, 255, 255, 0.55));
  font-size: 0.7em;
  letter-spacing: 0.04em;
}

/* Lightbox — native <dialog> driven, click-to-zoom on dream + dossier imagery */
.lightbox-trigger { cursor: zoom-in; }
dialog.lightbox {
  border: none;
  padding: 0;
  background: transparent;
  color: #fff;
  max-width: 100vw;
  max-height: 100vh;
  width: 100vw;
  height: 100vh;
  margin: 0;
  overflow: hidden;
}
dialog.lightbox::backdrop {
  background: rgba(6, 6, 16, 0.94);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
dialog.lightbox[open] {
  display: grid;
  place-items: center;
  grid-template-rows: 1fr auto;
  padding: clamp(1rem, 3vw, 3rem);
  box-sizing: border-box;
  gap: 1.2rem;
}
dialog.lightbox .lightbox-image {
  max-width: min(100%, 1600px);
  max-height: calc(100vh - 8rem);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
  animation: lightbox-pop 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
dialog.lightbox .lightbox-caption {
  margin: 0;
  font-family: var(--font-display, "Sora", system-ui, sans-serif);
  font-size: clamp(0.85rem, 1.1vw, 1rem);
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.82);
  text-align: center;
  max-width: 70ch;
  text-wrap: balance;
}
dialog.lightbox .lightbox-caption[hidden] { display: none; }
dialog.lightbox .lightbox-attribution {
  margin: 0.25rem 0 0;
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  text-align: center;
}
dialog.lightbox .lightbox-attribution[hidden] { display: none; }
dialog.lightbox .lightbox-close {
  position: fixed;
  top: 1rem;
  right: 1rem;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(15, 15, 25, 0.6);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
  z-index: 2;
}
dialog.lightbox .lightbox-close:hover,
dialog.lightbox .lightbox-close:focus-visible {
  background: rgba(0, 229, 255, 0.15);
  border-color: var(--feat-accent, #00E5FF);
  outline: none;
  transform: scale(1.06);
}
@keyframes lightbox-pop {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  dialog.lightbox .lightbox-image { animation: none; }
}

/* ============================================================
   CINEMA LAYER — atmospheric polish on every homepage section.
   Loaded last in cascade order so it can refine without
   rewriting earlier component rules. Every animation gated by
   prefers-reduced-motion. Every novel API gated by @supports.
   ============================================================ */
@layer cinema {
  /* Section rhythm — push hero into the void, then pull every
     subsequent section forward with a thin atmospheric scrim
     so the eye never feels stuck on a flat backdrop. */
  main > section,
  main > .section,
  main > article {
    position: relative;
    isolation: isolate;
  }
  main > section::before,
  main > .section::before,
  main > article::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
      radial-gradient(ellipse 80% 60% at 50% 0%, rgba(124, 58, 237, 0.04), transparent 70%),
      radial-gradient(ellipse 60% 40% at 50% 100%, rgba(0, 229, 255, 0.025), transparent 70%);
    opacity: 0.9;
  }

  /* Section dividers — turn the existing <hr> into a hairline
     glow with a centered diamond glyph for chapter-break feel. */
  main hr.section-divider {
    position: relative;
    height: 1px;
    border: 0;
    margin: clamp(3rem, 6vw, 5rem) auto;
    max-width: min(72rem, 92vw);
    background: linear-gradient(
      90deg,
      transparent 0%,
      rgba(124, 58, 237, 0.18) 25%,
      rgba(0, 229, 255, 0.35) 50%,
      rgba(255, 23, 68, 0.18) 75%,
      transparent 100%
    );
    overflow: visible;
  }
  main hr.section-divider::after {
    content: "◆";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: rgba(0, 229, 255, 0.6);
    background: #060610;
    font-size: 0.65rem;
    line-height: 1;
    padding: 0 0.6rem;
    letter-spacing: 0.4em;
    text-shadow: 0 0 14px rgba(0, 229, 255, 0.4);
  }

  /* Typography — balance hero + section headings so wraps land
     on natural break points; pretty body copy. */
  h1, h2, .hero-headline {
    text-wrap: balance;
  }
  p, li, dd, blockquote {
    text-wrap: pretty;
  }

  /* Hero — vignette + subtle drift on the stage so it never
     feels static. Drift respects reduced-motion. */
  .hero {
    position: relative;
  }
  .hero::after {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(ellipse 70% 50% at 50% 10%, rgba(255, 23, 68, 0.08), transparent 60%),
      radial-gradient(ellipse 80% 60% at 50% 100%, rgba(0, 0, 0, 0.6), transparent 70%);
    mix-blend-mode: screen;
  }
  .hero > * {
    position: relative;
    z-index: 1;
  }
  @media (prefers-reduced-motion: no-preference) {
    .hero-stage .hero-video,
    .hero-stage .hero-waveform {
      will-change: transform;
      animation: cinema-drift 24s ease-in-out infinite alternate;
    }
  }
  @keyframes cinema-drift {
    0% { transform: translate3d(0, 0, 0) scale(1); }
    100% { transform: translate3d(0, -8px, 0) scale(1.015); }
  }

  /* Scroll-reveal hardening — every section that already opts
     into .reveal-section gets a richer entrance with a slight
     blur lift, smoothing the chapter transition. */
  @media (prefers-reduced-motion: no-preference) {
    html.js-reveal-active .reveal-section:not(.is-revealed):not(:target) {
      filter: blur(6px) saturate(0.85);
      transform: translateY(28px);
    }
    .reveal-section.is-revealed,
    .reveal-section:target {
      filter: blur(0) saturate(1);
      transform: translateY(0);
      transition:
        filter 700ms cubic-bezier(0.2, 0.8, 0.2, 1),
        transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1),
        opacity 700ms ease-out;
    }
  }

  /* Scroll-driven progress accent — top hairline bar that
     fills as you read down the page. Modern-browser only. */
  @supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
      body::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        height: 2px;
        width: 100%;
        z-index: 9999;
        background: linear-gradient(
          90deg,
          #FF1744 0%,
          #7C3AED 50%,
          #00E5FF 100%
        );
        transform-origin: 0 50%;
        transform: scaleX(0);
        animation: cinema-scroll-progress linear;
        animation-timeline: scroll(root);
        pointer-events: none;
        box-shadow: 0 0 14px rgba(0, 229, 255, 0.45);
      }
      @keyframes cinema-scroll-progress {
        to { transform: scaleX(1); }
      }
    }
  }

  /* Status grid + sensor grid — soften card frames with a
     conic accent and lift on hover without layout shift. */
  .status-grid > *,
  .sensor-grid > * {
    position: relative;
    transition: transform 320ms ease, box-shadow 320ms ease;
  }
  .status-grid > *::after,
  .sensor-grid > *::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    pointer-events: none;
    background: conic-gradient(
      from 220deg at 50% 50%,
      transparent 0deg,
      rgba(0, 229, 255, 0.06) 90deg,
      transparent 180deg,
      rgba(124, 58, 237, 0.06) 270deg,
      transparent 360deg
    );
    opacity: 0;
    transition: opacity 480ms ease;
  }
  @media (hover: hover) {
    .status-grid > *:hover,
    .sensor-grid > *:hover {
      transform: translateY(-2px);
      box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(0, 229, 255, 0.12) inset;
    }
    .status-grid > *:hover::after,
    .sensor-grid > *:hover::after {
      opacity: 1;
    }
  }

  /* Evidence + dossier section — wrap large blocks in a soft
     vignette so the eye lands on body copy first. */
  .evidence-grid,
  .porcine-grid,
  .mission-block,
  .dossier-block {
    position: relative;
  }
  .evidence-grid::before,
  .porcine-grid::before {
    content: "";
    position: absolute;
    inset: -2rem;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(
      ellipse 70% 50% at 50% 50%,
      rgba(0, 0, 0, 0.4),
      transparent 80%
    );
  }

  /* Newsletter + MUD terminal — refined glow rim. */
  .mud-terminal,
  .newsletter-form,
  .mud-terminal-chrome {
    position: relative;
  }
  .mud-terminal::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    box-shadow:
      0 0 0 1px rgba(0, 229, 255, 0.06) inset,
      0 0 60px rgba(0, 229, 255, 0.05) inset;
  }

  /* Pull-quote callouts — punch up the glyph rendering and
     give every callout a hairline brand frame. */
  .evidence-callout {
    position: relative;
    overflow: hidden;
  }
  .evidence-callout::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(135deg, rgba(255, 23, 68, 0.05), transparent 40%),
      linear-gradient(315deg, rgba(0, 229, 255, 0.04), transparent 40%);
  }
  .evidence-callout-glow {
    background: linear-gradient(120deg, #FF1744, #7C3AED 55%, #00E5FF);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 24px rgba(124, 58, 237, 0.35);
  }

  /* Transmissions card-frame — deepen the existing frame with
     a faint scanline texture for archival/CRT feel. */
  .transmissions-section .tx-card-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background-image: repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, 0.012) 0px,
      rgba(255, 255, 255, 0.012) 1px,
      transparent 1px,
      transparent 3px
    );
    mix-blend-mode: overlay;
    opacity: 0.6;
  }

  /* Reduced-motion + low-power overrides — kill every layered
     animation so the page is calm + accessible. */
  @media (prefers-reduced-motion: reduce) {
    .hero-stage .hero-video,
    .hero-stage .hero-waveform {
      animation: none !important;
    }
    body::before {
      animation: none !important;
      transform: scaleX(0) !important;
    }
    .reveal-section:not(.is-revealed) {
      filter: none !important;
      transform: none !important;
    }
  }
}

/* =============================================================================
 * EMF sensor OFFLINE state + last-known-good SAMPLE data + nav scroll-spy.
 * ========================================================================== */
.emf-offline-banner {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.9rem 1.15rem;
  border-radius: var(--radius-button);
  background: linear-gradient(180deg, rgba(255, 109, 0, 0.16), rgba(255, 23, 68, 0.10));
  border: 1px solid rgba(255, 138, 0, 0.55);
  box-shadow: 0 0 0 1px rgba(255, 138, 0, 0.08) inset, 0 16px 44px -24px rgba(255, 109, 0, 0.55);
  color: #ffd9b8;
}
.emf-offline-banner[hidden] { display: none; }
.emf-offline-dot {
  width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto;
  background: #ff8a00;
  box-shadow: 0 0 0 0 rgba(255, 138, 0, 0.7);
  animation: emfOfflinePulse 1.8s ease-out infinite;
}
@keyframes emfOfflinePulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 138, 0, 0.65); }
  70% { box-shadow: 0 0 0 11px rgba(255, 138, 0, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 138, 0, 0); }
}
.emf-offline-text { display: flex; flex-direction: column; gap: 0.15rem; }
.emf-offline-title {
  font: 600 0.82rem/1.2 var(--font-mono);
  letter-spacing: 0.08em; color: #ffb877;
}
.emf-offline-detail { font-size: 0.85rem; color: rgba(255, 233, 214, 0.92); }

.status-card[data-stale] { position: relative; }
.status-card[data-stale]::after {
  content: "SAMPLE";
  position: absolute; top: 0.6rem; right: 0.6rem;
  font: 600 0.6rem/1 var(--font-mono); letter-spacing: 0.1em;
  color: #ff8a00; padding: 0.2rem 0.42rem; border-radius: 999px;
  background: rgba(255, 138, 0, 0.12); border: 1px solid rgba(255, 138, 0, 0.4);
}
.status-card[data-stale] .metric { color: #ffcaa0; }
.status-card[data-stale] .card-note { color: rgba(255, 200, 160, 0.78); }

.site-nav a.is-active {
  color: #00E5FF;
  background: rgba(0, 229, 255, 0.12);
  box-shadow: inset 0 -2px 0 0 #00E5FF;
}

@media (prefers-reduced-motion: reduce) {
  .emf-offline-dot { animation: none; }
}

/* Reserve plate-vault VIDEO height (mirrors .plate-item img) so the document height is correct
 * on first paint — anchor-nav jumps land instantly instead of chasing lazy media as it loads. */
.plate-item video { width: 100%; height: 140px; object-fit: cover; display: block; }
.plate-montage-wide .plate-item video { height: 240px; }
@media (min-width: 1024px) {
  .plate-montage-wide .plate-item video { height: 320px; }
}

/* During an anchor-nav jump, force the content-visibility:auto sections to render so the
 * document reaches its true height immediately and the jump lands instantly. The perf-saving
 * render-skipping resumes as soon as the jump settles (the html.nav-jumping class is removed). */
html.nav-jumping .full-bleed.evidence-section,
html.nav-jumping .dossier-feature,
html.nav-jumping .transmissions-section,
html.nav-jumping .feed-stream,
html.nav-jumping .timeline-vertical-section,
html.nav-jumping .live-feed-section,
html.nav-jumping .recent-readings-section {
  content-visibility: visible !important;
  contain-intrinsic-size: auto !important;
}