:root {
    color-scheme: dark;
    --bg-base: #0e0e0d;
    --bg-elevated: #1c1c1a;
    --bg-raised: #252521;
    --line-subtle: #2a2a26;
    --line-strong: #3a3a34;
    --fg-primary: #e8e8e3;
    --fg-secondary: #9a9a92;
    --fg-tertiary: #5e5e58;
    --accent: #e8d4a0;
    --immune: #7ab87a;
    --threat: #c45a5a;
}

html, body {
    background: var(--bg-base);
    color: var(--fg-primary);
    font-feature-settings: 'cv11' on, 'ss01' on, 'ss03' on;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body { font-family: 'Inter', system-ui, -apple-system, sans-serif; }

.font-display { font-family: 'Fraunces', Georgia, serif; font-optical-sizing: auto; }

/* Editorial display tunings: tighter at large sizes, looser optical at small */
.display-xl { font-variation-settings: 'opsz' 144; }
.display-md { font-variation-settings: 'opsz' 60; }

.font-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-ligatures: none; }

/* Microscope-grid texture, very subtle */
.grid-bg {
    background-image:
        linear-gradient(rgba(232, 232, 227, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(232, 232, 227, 0.025) 1px, transparent 1px);
    background-size: 56px 56px;
    background-position: -1px -1px;
}

.dot-bg {
    background-image: radial-gradient(circle at 1px 1px, rgba(232, 232, 227, 0.05) 1px, transparent 0);
    background-size: 28px 28px;
}

.vignette-radial {
    background: radial-gradient(ellipse at center top, rgba(232, 212, 160, 0.04), transparent 60%);
}

/* Text selection */
::selection { background: rgba(232, 212, 160, 0.28); color: #f5f5f0; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-base); }
::-webkit-scrollbar-thumb { background: var(--line-subtle); border-radius: 5px; border: 2px solid var(--bg-base); }
::-webkit-scrollbar-thumb:hover { background: var(--line-strong); }

/* Live indicator pulse */
@keyframes pulse-soft {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}
.pulse-soft { animation: pulse-soft 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

@keyframes ping-soft {
    75%, 100% { transform: scale(2.4); opacity: 0; }
}
.ping-soft { animation: ping-soft 2.4s cubic-bezier(0, 0, 0.2, 1) infinite; }

/* Hairline divider with optional gradient fade */
.hr-fade {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(232, 232, 227, 0.12), transparent);
}

/* Light-band variants for cream sections */
.hr-fade-light {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(26, 26, 24, 0.18), transparent);
}

.dot-bg-light {
    background-image: radial-gradient(circle at 1px 1px, rgba(26, 26, 24, 0.07) 1px, transparent 0);
    background-size: 28px 28px;
}

.grid-bg-light {
    background-image:
        linear-gradient(rgba(26, 26, 24, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(26, 26, 24, 0.04) 1px, transparent 1px);
    background-size: 56px 56px;
    background-position: -1px -1px;
}

::selection { background: rgba(232, 212, 160, 0.28); color: #f5f5f0; }
.bg-cream-base ::selection,
.bg-cream-elevated ::selection { background: rgba(196, 90, 90, 0.20); color: #1a1a18; }

/* Hero ambient background: warm radial glow + soft horizon line */
.hero-glow {
    background:
        radial-gradient(60% 80% at 78% 18%, rgba(232, 212, 160, 0.10), transparent 70%),
        radial-gradient(40% 60% at 12% 100%, rgba(122, 184, 122, 0.05), transparent 60%);
}

/* Hero ambient video: heavy filter so it reads as background, not foreground.
   Saturate kills the source pink chroma; blur de-emphasizes detail; brightness
   keeps it from competing with the headline. The accompanying mix-blend-mode
   tint overlay does the actual recoloring. */
.hero-video,
.hero-poster {
    filter: saturate(0.85) brightness(0.55);
    object-position: right center;
}
.hero-video { filter: saturate(0.85) brightness(0.55) blur(2px); }

/* Respect prefers-reduced-motion: swap the video for the static poster image */
@media (prefers-reduced-motion: reduce) {
    .hero-video { display: none !important; }
    .hero-poster { display: block !important; }
}

/* ============================================ Nav: transparent → island pill */
.site-nav {
    top: 0;
    transition:
        top 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
.site-nav-inner {
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 0;
    box-shadow: none;
    max-width: 1400px;
    min-height: 64px;
    transition:
        background-color 320ms cubic-bezier(0.4, 0, 0.2, 1),
        backdrop-filter 320ms cubic-bezier(0.4, 0, 0.2, 1),
        -webkit-backdrop-filter 320ms cubic-bezier(0.4, 0, 0.2, 1),
        border-color 320ms cubic-bezier(0.4, 0, 0.2, 1),
        border-radius 320ms cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 320ms cubic-bezier(0.4, 0, 0.2, 1),
        max-width 320ms cubic-bezier(0.4, 0, 0.2, 1),
        min-height 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Tall band only on pages with a hero brand to align with (home).
   Center links + right items sit at y=72, matching the 88px hero mark at top:28. */
body:has(#hero-brand):not([data-scrolled="true"]) .site-nav-inner {
    min-height: 144px;
}
body[data-scrolled="true"] .site-nav {
    top: 18px;
}
body[data-scrolled="true"] .site-nav-inner {
    background-color: rgba(14, 14, 13, 0.55);
    border-color: rgba(42, 42, 38, 0.7);
    border-radius: 9999px;
    box-shadow: 0 8px 32px -12px rgba(0, 0, 0, 0.55), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
    max-width: 1080px;
    min-height: 64px;
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    backdrop-filter: blur(20px) saturate(150%);
}

/* ============================================ Brand handoff: hero ↔ nav */
.nav-brand {
    opacity: 1;
    transform: translateX(0);
    transition:
        opacity 200ms cubic-bezier(0.4, 0, 0.2, 1),
        transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}
/* Hide nav brand only on pages where a hero brand owns the slot */
body:has(#hero-brand):not([data-scrolled="true"]) .nav-brand {
    opacity: 0;
    transform: translateX(-6px);
}

/* Inner pages (no hero) need explicit top padding to clear the fixed nav */
body:not(:has(#hero-brand)) main {
    padding-top: 96px;
}

.hero-brand {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition:
        opacity 240ms cubic-bezier(0.4, 0, 0.2, 1),
        transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
body[data-scrolled="true"] .hero-brand {
    opacity: 0;
    transform: translateY(-12px) scale(0.85);
}

/* Infinite-scroll ticker strip. The track holds two identical lists side-by-side
   so the loop is seamless. */
@keyframes ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
.ticker-track {
    display: inline-flex;
    width: max-content;
    animation: ticker-scroll 60s linear infinite;
    will-change: transform;
}
.ticker-track:hover { animation-play-state: paused; }

@keyframes ticker-scroll-reverse {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}
.ticker-track-reverse {
    display: inline-flex;
    width: max-content;
    animation: ticker-scroll-reverse 80s linear infinite;
    will-change: transform;
}
.ticker-track-reverse:hover { animation-play-state: paused; }

/* Single-fire copy-feedback flash for buttons that toggle a "copied" state */
@keyframes copy-flash {
    0%   { background-color: rgba(122, 184, 122, 0.18); }
    100% { background-color: transparent; }
}
.copy-flash { animation: copy-flash 1.2s ease-out 1; }