/* ═══════════════════════════════════════════════════════════════
   Jarvis Playground — "Ember" Warm Theme (v2.22.0)
   ─────────────────────────────────────────────────────────────
   A deep-amber, firelit re-skin of the Aurora theme.

   Contract (binding):
     • Theme state: <html data-theme="ember">  ("aurora" = default/absent)
     • Every rule in this file is scoped under
       :root[data-theme="ember"] or html[data-theme="ember"].
     • Loads AFTER css/design-system.css and css/home-v3.css so
       overrides win at equal specificity.
     • No new fixed-position chrome elements. Ambient layers are
       painted exclusively on body::before, body::after and
       html[data-theme="ember"]::after — all z-index:-1,
       pointer-events:none, never interactive.
     • No layout-affecting overrides: only transform / filter /
       opacity / background / border / color / box-shadow /
       text-decoration (plus positioning of the pseudo layers
       themselves, which is what makes them layers).
     • No JS dependency. @property registrations degrade to a
       static gradient in engines without support.
     • All motion is disabled under prefers-reduced-motion: reduce
       (see final section of this file).

   Palette — warm darks, cream text, fire accents:
     bg base      #140b08   bg elevated  #1c110b
     bg surface   #241610   overlay      rgba(20,11,8,.92)
     text         #f5e9dc   (warm cream)
     amber        #ffb347   coral        #ff6b4a
     gold         #e8a33d   copper       #c1663e
   ═══════════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────────
   1. TOKEN OVERRIDES — full --jp-* warm remap
   :root[data-theme="ember"] beats :root (same specificity,
   later in cascade; this file loads last).
   ───────────────────────────────────────────────────────────── */

:root[data-theme="ember"] {
    /* fire accents (semantic slots keep their roles) */
    --jp-cyan:    #ffb347;   /* primary accent → amber        */
    --jp-purple:  #c1663e;   /* secondary accent → copper     */
    --jp-magenta: #ff6b4a;   /* hot accent → coral            */
    --jp-pink:    #ff8c5a;   /* soft hot → ember-coral        */
    --jp-green:   #a8c96a;   /* warm olive                    */
    --jp-yellow:  #ffd166;   /* candlelight                   */
    --jp-gold:    #e8a33d;   /* gold                          */

    /* backgrounds — deep amber/maroon family */
    --jp-bg:          #140b08;
    --jp-bg-elevated: #1c110b;
    --jp-bg-surface:  #241610;
    --jp-bg-overlay:  rgba(20, 11, 8, 0.92);

    /* text — warm cream */
    --jp-text:           #f5e9dc;
    --jp-text-secondary: rgba(245, 233, 220, 0.72);
    --jp-text-muted:     rgba(245, 233, 220, 0.45);

    /* borders — warm white / amber */
    --jp-border:      rgba(245, 233, 220, 0.10);
    --jp-border-hover: rgba(255, 179, 71, 0.45);
    --jp-border-focus: #ffb347;

    /* gradients — fire, not ice */
    --jp-grad-brand: linear-gradient(135deg,
        #ffb347 0%, #ff6b4a 55%, #e8a33d 110%);
    --jp-grad-brand-soft: linear-gradient(135deg,
        rgba(255, 179, 71, 0.14), rgba(193, 102, 62, 0.16));

    /* radii — a touch softer than Aurora's crisp edges */
    --jp-radius-sm:   8px;
    --jp-radius:      12px;
    --jp-radius-md:   16px;
    --jp-radius-lg:   22px;
    --jp-radius-xl:   30px;
    --jp-radius-full: 9999px;

    /* shadows — warmer black, amber glows */
    --jp-shadow-sm:    0 1px 2px rgba(8, 4, 2, 0.5);
    --jp-shadow:       0 4px 10px rgba(8, 4, 2, 0.45);
    --jp-shadow-md:    0 10px 24px rgba(8, 4, 2, 0.55);
    --jp-shadow-lg:    0 20px 44px rgba(8, 4, 2, 0.65);
    --jp-shadow-glow:  0 0 24px rgba(255, 179, 71, 0.35);
    --jp-shadow-glow-lg: 0 0 60px rgba(255, 179, 71, 0.28),
                         0 0 120px rgba(255, 107, 74, 0.18);

    /* ember-local helpers (used by the rules below) */
    --ember-amber:   #ffb347;
    --ember-coral:   #ff6b4a;
    --ember-gold:    #e8a33d;
    --ember-copper:  #c1663e;
    --ember-cream:   #f5e9dc;
    --ember-ink:     #140b08;
    --ember-ink-2:   #1c110b;
    --ember-line:    rgba(245, 233, 220, 0.10);
    --ember-glow-sm: 0 0 18px rgba(255, 179, 71, 0.25);
    --ember-glow-md: 0 0 34px rgba(255, 179, 71, 0.30),
                     0 0 80px rgba(255, 107, 74, 0.16);
    --ember-glow-lg: 0 0 60px rgba(255, 179, 71, 0.34),
                     0 0 140px rgba(255, 107, 74, 0.20);
    --ember-grad-text: linear-gradient(95deg,
        #f5e9dc 0%, #ffd166 38%, #ffb347 62%, #ff6b4a 100%);
}

/* ─────────────────────────────────────────────────────────────
   2. NAV TOKENS — warm glass bar (consumed by css_nav.css)
   ───────────────────────────────────────────────────────────── */

:root[data-theme="ember"] {
    --nav-height: 56px;
    --nav-bg:     rgba(24, 13, 9, 0.74);
    --nav-border: rgba(255, 179, 71, 0.16);
    --nav-text:   #f5e9dc;
    --nav-hover:  #ffb347;
    --nav-active: #ff8c5a;
}

/* ─────────────────────────────────────────────────────────────
   3. BODY BASE — warm canvas, native dark form controls
   ───────────────────────────────────────────────────────────── */

html[data-theme="ember"] {
    color-scheme: dark;
}

html[data-theme="ember"] body {
    background-color: var(--jp-bg);
    color: var(--jp-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ─────────────────────────────────────────────────────────────
   4. EMBER AURORA — body::before, three layered fire orbs
      (replaces .jp-aurora's cold light with hearthlight)
      Layers are oversized (inset:-15%) so the drift never
      exposes an edge; motion is transform-only → composited.
   ───────────────────────────────────────────────────────────── */

html[data-theme="ember"] body::before {
    content: '';
    position: fixed;
    inset: -15%;
    z-index: -1;
    pointer-events: none;
    background-image:
        /* orb 1 — amber, upper-left, largest */
        radial-gradient(circle at center,
            rgba(255, 179, 71, 0.30) 0%,
            rgba(255, 179, 71, 0.12) 34%,
            transparent 62%),
        /* orb 2 — coral, lower-right */
        radial-gradient(circle at center,
            rgba(255, 107, 74, 0.24) 0%,
            rgba(255, 107, 74, 0.10) 36%,
            transparent 64%),
        /* orb 3 — gold, mid-center, tight core */
        radial-gradient(circle at center,
            rgba(232, 163, 61, 0.18) 0%,
            rgba(232, 163, 61, 0.07) 40%,
            transparent 66%);
    background-size:
        72vmax 72vmax,
        84vmax 84vmax,
        56vmax 56vmax;
    background-position:
        18% 12%,
        84% 88%,
        52% 46%;
    background-repeat: no-repeat;
    filter: blur(42px);
    will-change: transform, opacity;
    animation:
        ember-orb-drift 52s ease-in-out infinite alternate,
        ember-breathe 9s ease-in-out infinite;
}

@keyframes ember-orb-drift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(4%, -3%, 0) scale(1.12); }
}

/* slow hearth flicker — whole layer breathes */
@keyframes ember-breathe {
    0%, 100% { opacity: 0.85; }
    50%      { opacity: 1; }
}

/* ─────────────────────────────────────────────────────────────
   5. VIGNETTE — body::after, warm candlelit falloff
      Static (no animation): keeps the repaint budget free for
      the drifting orbs above.
   ───────────────────────────────────────────────────────────── */

html[data-theme="ember"] body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        /* faint warm uplight from the bottom edge — "the fire" */
        radial-gradient(90% 42% at 50% 118%,
            rgba(255, 140, 74, 0.10), transparent 70%),
        /* cool-top / warm-bottom ambient split */
        linear-gradient(180deg,
            rgba(10, 5, 3, 0.35) 0%,
            transparent 26%,
            transparent 74%,
            rgba(10, 5, 3, 0.28) 100%),
        /* edge vignette */
        radial-gradient(120% 90% at 50% 45%,
            transparent 52%,
            rgba(8, 4, 2, 0.42) 88%,
            rgba(6, 3, 1, 0.62) 100%);
}

/* ─────────────────────────────────────────────────────────────
   6. FILM GRAIN — html[data-theme="ember"]::after
      A tiled SVG feTurbulence noise, fixed above content but
      non-interactive, at very low opacity with soft-light blend.
      Chosen over a body pseudo (both are already spoken for)
      and over any real element: it adds zero DOM chrome.
   ───────────────────────────────────────────────────────────── */

html[data-theme="ember"]::after {
    content: '';
    position: fixed;
    inset: 0;
    /* Overlay grain (not an ambient bg layer): above page content, below
       nav chrome (10000) and the mobile backdrop (9999). pointer-events
       none keeps it non-interactive. (Conductor decision 2026-09-25: the
       contract's z-index:-1 rule targets ambient background layers; a
       grain at -1 paints behind the body background and the effect is
       lost. See REVIEW-ember.md addendum.) */
    z-index: 9990;
    pointer-events: none;
    opacity: 0.05;
    mix-blend-mode: soft-light;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
    background-size: 180px 180px;
    /* subtle dither drift — cheap, transform-only */
    animation: ember-grain-shift 1.4s steps(2) infinite;
}

@keyframes ember-grain-shift {
    0%   { transform: translate3d(0, 0, 0); }
    50%  { transform: translate3d(-6px, 4px, 0); }
    100% { transform: translate3d(0, 0, 0); }
}

/* ─────────────────────────────────────────────────────────────
   7. SCROLLBAR — warm copper thumb, ember hover flare
   ───────────────────────────────────────────────────────────── */

html[data-theme="ember"] {
    scrollbar-color: rgba(193, 102, 62, 0.55) rgba(245, 233, 220, 0.04);
}

html[data-theme="ember"] ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

html[data-theme="ember"] ::-webkit-scrollbar-track {
    background: rgba(245, 233, 220, 0.03);
}

html[data-theme="ember"] ::-webkit-scrollbar-thumb {
    border-radius: var(--jp-radius-full);
    border: 2px solid transparent;
    background-clip: padding-box;
    background-image: linear-gradient(180deg,
        rgba(232, 163, 61, 0.55),
        rgba(193, 102, 62, 0.75));
}

html[data-theme="ember"] ::-webkit-scrollbar-thumb:hover {
    background-image: linear-gradient(180deg,
        rgba(255, 179, 71, 0.8),
        rgba(255, 107, 74, 0.8));
}

html[data-theme="ember"] ::-webkit-scrollbar-corner {
    background: transparent;
}

/* ─────────────────────────────────────────────────────────────
   8. SELECTION — molten amber highlight
   ───────────────────────────────────────────────────────────── */

html[data-theme="ember"] ::selection {
    background: rgba(255, 179, 71, 0.32);
    color: #fff6ea;
}

/* ─────────────────────────────────────────────────────────────
   9. FOCUS RINGS — amber halo, no cold cyan anywhere
   ───────────────────────────────────────────────────────────── */

html[data-theme="ember"] :focus-visible {
    outline: 2px solid rgba(255, 179, 71, 0.85);
    outline-offset: 2px;
}

/* component-level rings (they set their own outlines) */
html[data-theme="ember"] .jp-input:focus-visible {
    outline: none;
    border-color: var(--jp-border-focus);
    box-shadow: 0 0 0 3px rgba(255, 179, 71, 0.14),
                0 0 18px rgba(255, 179, 71, 0.18);
}

html[data-theme="ember"] .jp-btn:focus-visible {
    outline: 2px solid rgba(255, 179, 71, 0.85);
    outline-offset: 2px;
    box-shadow: var(--ember-glow-sm);
}

/* ─────────────────────────────────────────────────────────────
   10. LINKS — warm base, animated underline sweep
       The underline is a background-image (not an extra
       element): it grows from the left on hover/focus.
   ───────────────────────────────────────────────────────────── */

html[data-theme="ember"] a {
    color: var(--jp-text);
    text-decoration: none;
    background-image: linear-gradient(90deg,
        rgba(255, 179, 71, 0.85), rgba(255, 107, 74, 0.85));
    background-repeat: no-repeat;
    background-size: 0% 1.5px;
    background-position: 0 100%;
    transition: color var(--jp-fast), background-size var(--jp-normal);
}

html[data-theme="ember"] a:hover,
html[data-theme="ember"] a:focus-visible {
    color: var(--ember-amber);
    background-size: 100% 1.5px;
}

/* keep already-accented links (nav, buttons) clean */
html[data-theme="ember"] .global-nav a,
html[data-theme="ember"] .jp-btn,
html[data-theme="ember"] .h3-btn {
    background-image: none;
}

/* ─────────────────────────────────────────────────────────────
   11. TYPE — warm heading glow + animated gradient text
   ───────────────────────────────────────────────────────────── */

html[data-theme="ember"] h1,
html[data-theme="ember"] h2,
html[data-theme="ember"] h3 {
    color: var(--jp-text);
}

/* .jp-gradient-text — Aurora pans cyan→violet→magenta;
   Ember pans cream→gold→amber→coral. Same technique, new fire. */
html[data-theme="ember"] .jp-gradient-text {
    background-image: linear-gradient(95deg,
        #f5e9dc 0%,
        #ffd166 30%,
        #ffb347 52%,
        #ff6b4a 74%,
        #ffb347 88%,
        #f5e9dc 100%);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: ember-gradient-pan 7s linear infinite;
}

@keyframes ember-gradient-pan {
    from { background-position: 0% center; }
    to   { background-position: -220% center; }
}

/* soft warm under-glow on the biggest display headings */
html[data-theme="ember"] h1.jp-gradient-text,
html[data-theme="ember"] .jp-hero-title {
    filter: drop-shadow(0 0 22px rgba(255, 179, 71, 0.22));
}

/* ─────────────────────────────────────────────────────────────
   12. GLASS SURFACES — warm-tinted glass, amber edge light
   ───────────────────────────────────────────────────────────── */

html[data-theme="ember"] .jp-glass {
    background: linear-gradient(160deg,
        rgba(245, 233, 220, 0.07) 0%,
        rgba(255, 179, 71, 0.03) 55%,
        rgba(245, 233, 220, 0.018) 100%);
    border: 1px solid rgba(245, 233, 220, 0.10);
    box-shadow: inset 0 1px 0 rgba(245, 233, 220, 0.06),
                var(--jp-shadow-md);
}

html[data-theme="ember"] .jp-card {
    background: linear-gradient(160deg,
        rgba(245, 233, 220, 0.055) 0%,
        rgba(255, 179, 71, 0.035) 60%,
        rgba(245, 233, 220, 0.014) 100%);
    border: 1px solid var(--jp-border);
    box-shadow: inset 0 1px 0 rgba(245, 233, 220, 0.05),
                var(--jp-shadow);
}

html[data-theme="ember"] .jp-card:hover {
    border-color: var(--jp-border-hover);
    box-shadow: inset 0 1px 0 rgba(245, 233, 220, 0.07),
                var(--jp-shadow-md),
                0 0 30px rgba(255, 179, 71, 0.14);
}

/* ─────────────────────────────────────────────────────────────
   13. ANIMATED GRADIENT BORDER — .jp-glow-border
       Ember registers its own --ember-angle so the spin is
       independent of Aurora's. Fallback: engines without
       @property keep a static warm conic (no spin) — graceful.
   ───────────────────────────────────────────────────────────── */

@property --ember-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

html[data-theme="ember"] .jp-glow-border::after {
    background: conic-gradient(from var(--ember-angle, 0deg),
        transparent 0%,
        rgba(255, 179, 71, 0.8) 12%,
        rgba(255, 107, 74, 0.8) 26%,
        transparent 42%);
}

html[data-theme="ember"] .jp-glow-border:hover::after {
    opacity: 1;
    animation: ember-border-spin 3.2s linear infinite;
}

@keyframes ember-border-spin {
    to { --ember-angle: 360deg; }
}

/* static fallback when @property is unsupported — the same
   conic simply doesn't rotate, which still reads as a warm
   rim light on hover. */
@supports not (background: conic-gradient(from 45deg, #000, #fff)) {
    html[data-theme="ember"] .jp-glow-border::after {
        background: linear-gradient(135deg,
            rgba(255, 179, 71, 0.6), rgba(255, 107, 74, 0.5));
    }
}

/* ─────────────────────────────────────────────────────────────
   14. SHIMMER SWEEP — diagonal light pass on hover
       One pseudo per surface; the sweep is a skewed gradient
       translated across via transform (compositor-only).
   ───────────────────────────────────────────────────────────── */

html[data-theme="ember"] .jp-card,
html[data-theme="ember"] .jp-glass {
    position: relative;
    overflow: hidden;
}

html[data-theme="ember"] .jp-card::before,
html[data-theme="ember"] .jp-glass::before {
    content: '';
    position: absolute;
    top: -20%;
    bottom: -20%;
    left: 0;
    width: 38%;
    background: linear-gradient(105deg,
        transparent 0%,
        rgba(255, 209, 102, 0.07) 42%,
        rgba(255, 179, 71, 0.13) 50%,
        rgba(255, 209, 102, 0.07) 58%,
        transparent 100%);
    transform: translateX(-160%) skewX(-14deg);
    pointer-events: none;
    z-index: 1;
}

html[data-theme="ember"] .jp-card:hover::before,
html[data-theme="ember"] .jp-glass:hover::before {
    animation: ember-shimmer 1.1s ease-out forwards;
}

@keyframes ember-shimmer {
    from { transform: translateX(-160%) skewX(-14deg); }
    to   { transform: translateX(420%)  skewX(-14deg); }
}

/* ─────────────────────────────────────────────────────────────
   15. BUTTONS — warm filled + ghost, ember hover flare
   ───────────────────────────────────────────────────────────── */

html[data-theme="ember"] .jp-btn {
    color: var(--jp-text);
    background: var(--jp-bg-surface);
    border: 1px solid var(--jp-border);
}

html[data-theme="ember"] .jp-btn:hover {
    border-color: rgba(255, 179, 71, 0.45);
    background: rgba(255, 179, 71, 0.10);
    color: var(--ember-amber);
    box-shadow: var(--ember-glow-sm);
}

html[data-theme="ember"] .jp-btn-primary {
    background-image: linear-gradient(135deg,
        #ffb347 0%, #ff6b4a 58%, #e8a33d 115%);
    background-size: 180% auto;
    border: none;
    color: #20100a;
}

html[data-theme="ember"] .jp-btn-primary:hover {
    background-position: right center;
    color: #20100a;
    box-shadow: var(--ember-glow-md);
}

/* ghost variant — transparent fill, amber hairline */
html[data-theme="ember"] .jp-btn-ghost {
    background: transparent;
    border: 1px solid rgba(255, 179, 71, 0.35);
    color: var(--ember-amber);
}

html[data-theme="ember"] .jp-btn-ghost:hover {
    background: rgba(255, 179, 71, 0.08);
    border-color: rgba(255, 179, 71, 0.6);
    color: #ffd166;
    box-shadow: var(--ember-glow-sm);
}

/* ─────────────────────────────────────────────────────────────
   16. BADGES + INPUTS — warm tints
   ───────────────────────────────────────────────────────────── */

html[data-theme="ember"] .jp-badge {
    color: var(--ember-amber);
    background: rgba(255, 179, 71, 0.10);
    border-color: rgba(255, 179, 71, 0.26);
}

html[data-theme="ember"] .jp-badge-success {
    color: #b8d47e;
    background: rgba(168, 201, 106, 0.10);
    border-color: rgba(168, 201, 106, 0.24);
}

html[data-theme="ember"] .jp-badge-warning {
    color: #ffd166;
    background: rgba(255, 209, 102, 0.10);
    border-color: rgba(255, 209, 102, 0.24);
}

html[data-theme="ember"] .jp-badge-danger {
    color: #ff8c5a;
    background: rgba(255, 140, 90, 0.10);
    border-color: rgba(255, 140, 90, 0.26);
}

html[data-theme="ember"] .jp-input {
    color: var(--jp-text);
    background: var(--jp-bg-elevated);
    border: 1px solid var(--jp-border);
}

html[data-theme="ember"] .jp-input::placeholder {
    color: var(--jp-text-muted);
}

/* ─────────────────────────────────────────────────────────────
   17. HEADINGS — breathing warm glow (pulse, not pan)
   ───────────────────────────────────────────────────────────── */

html[data-theme="ember"] .jp-animate-glow {
    animation: ember-glow-pulse 3s ease-in-out infinite;
}

@keyframes ember-glow-pulse {
    0%, 100% { box-shadow: 0 0 6px rgba(255, 179, 71, 0.28); }
    50%      { box-shadow: 0 0 24px rgba(255, 179, 71, 0.55),
                          0 0 60px rgba(255, 107, 74, 0.22); }
}

/* section headers: warm rule under the title */
html[data-theme="ember"] .section-header h2 {
    color: var(--jp-text);
}

/* ─────────────────────────────────────────────────────────────
   18. NAV — warm glass bar, ember hairline, brand glow
       (base shell comes from css_nav.css; tokens above already
        re-tint --nav-*; these rules finish the job)
   ───────────────────────────────────────────────────────────── */

html[data-theme="ember"] .global-nav {
    background: linear-gradient(180deg,
        rgba(36, 22, 16, 0.82) 0%,
        rgba(24, 13, 9, 0.78) 100%);
    border-bottom: 1px solid var(--nav-border);
}

/* hairline — re-point Aurora's animated rule at warm fire */
html[data-theme="ember"] .global-nav::after {
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255, 179, 71, 0.55) 20%,
        rgba(255, 107, 74, 0.65) 50%,
        rgba(232, 163, 61, 0.45) 80%,
        transparent 100%);
    animation-name: ember-nav-hairline;
}

@keyframes ember-nav-hairline {
    to { background-position: 200% 0; }
}

/* brand — warm glow on the mark, amber hover */
html[data-theme="ember"] .nav-brand {
    color: var(--nav-text);
}

html[data-theme="ember"] .nav-brand:hover {
    color: var(--ember-amber);
    text-shadow: 0 0 18px rgba(255, 179, 71, 0.45);
}

html[data-theme="ember"] .nav-brand-icon {
    filter: drop-shadow(0 0 6px rgba(255, 179, 71, 0.35));
}

html[data-theme="ember"] .nav-brand:hover .nav-brand-icon {
    filter: drop-shadow(0 0 12px rgba(255, 179, 71, 0.6));
}

/* links — amber hover, coral active */
html[data-theme="ember"] .nav-links a {
    color: var(--nav-text);
}

html[data-theme="ember"] .nav-links a:hover {
    color: var(--nav-hover);
    text-shadow: 0 0 14px rgba(255, 179, 71, 0.35);
}

html[data-theme="ember"] .nav-links a.active {
    color: var(--nav-active);
}

/* active underline dot — warm */
html[data-theme="ember"] .nav-links a.active::after {
    background: var(--nav-active);
    box-shadow: 0 0 10px rgba(255, 140, 90, 0.7);
}

/* search + hamburger — warm borders/hover */
html[data-theme="ember"] .nav-search-btn {
    color: var(--nav-text);
    border-color: var(--jp-border);
}

html[data-theme="ember"] .nav-search-btn:hover {
    color: var(--nav-hover);
    border-color: rgba(255, 179, 71, 0.4);
    background: rgba(255, 179, 71, 0.08);
}

html[data-theme="ember"] .nav-hamburger span {
    background: var(--nav-text);
}

html[data-theme="ember"] .nav-hamburger:hover span {
    background: var(--nav-hover);
}

/* mobile drawer — warm panel */
@media (max-width: 768px) {
    html[data-theme="ember"] .nav-links::before {
        background: rgba(24, 13, 9, 0.96);
    }

    html[data-theme="ember"] .nav-links a:hover {
        border-left-color: var(--nav-hover);
        background: rgba(255, 179, 71, 0.06);
    }

    html[data-theme="ember"] .nav-links a.active {
        border-left-color: var(--nav-active);
        background: rgba(255, 140, 90, 0.08);
    }
}

/* version badge — warm chip */
html[data-theme="ember"] .version-badge {
    color: var(--jp-text-muted);
    border-color: var(--jp-border);
    background: rgba(245, 233, 220, 0.03);
}

/* ─────────────────────────────────────────────────────────────
   19. THEME TOGGLE — ember variant of the nav pill control
       Markup (injected by nav.js):
         .theme-toggle > .theme-toggle-btn[data-theme-opt]
       Base styles live in css/theme-toggle.css (Tony); this is
       only the warm skin + active state for data-theme="ember".
   ───────────────────────────────────────────────────────────── */

html[data-theme="ember"] .theme-toggle {
    background: rgba(245, 233, 220, 0.04);
    border-color: var(--jp-border);
}

html[data-theme="ember"] .theme-toggle-btn {
    color: var(--jp-text-muted);
    transition: color var(--jp-fast), background var(--jp-fast),
                box-shadow var(--jp-fast), transform var(--jp-fast);
}

html[data-theme="ember"] .theme-toggle-btn:hover {
    color: var(--ember-amber);
    background: rgba(255, 179, 71, 0.08);
}

/* active pill — warm gradient fill + glow */
html[data-theme="ember"] .theme-toggle-btn[aria-checked="true"] {
    color: #20100a;
    background: linear-gradient(135deg,
        #ffb347 0%, #ff6b4a 70%, #e8a33d 110%);
    box-shadow: 0 0 14px rgba(255, 179, 71, 0.45),
                inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

html[data-theme="ember"] .theme-toggle-btn[data-theme-opt="ember"][aria-checked="true"] {
    box-shadow: 0 0 18px rgba(255, 107, 74, 0.6),
                inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

html[data-theme="ember"] .theme-toggle-btn:focus-visible {
    outline: 2px solid rgba(255, 179, 71, 0.85);
    outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────
   20. TICKER — hearth-warm activity strip under the nav
   ───────────────────────────────────────────────────────────── */

html[data-theme="ember"] .jp-ticker {
    background: linear-gradient(180deg,
        rgba(36, 22, 16, 0.85) 0%,
        rgba(24, 13, 9, 0.82) 100%);
    border-bottom: 1px solid rgba(255, 179, 71, 0.14);
    color: rgba(245, 233, 220, 0.78);
}

/* live dot — amber ember pulse instead of green LED */
html[data-theme="ember"] .jp-ticker-dot {
    background: var(--ember-amber);
    box-shadow: 0 0 8px rgba(255, 179, 71, 0.9),
                0 0 18px rgba(255, 107, 74, 0.5);
    animation-name: ember-dot-pulse;
}

@keyframes ember-dot-pulse {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 8px rgba(255, 179, 71, 0.9),
                    0 0 18px rgba(255, 107, 74, 0.5);
    }
    50% {
        opacity: 0.6;
        box-shadow: 0 0 4px rgba(255, 179, 71, 0.5),
                    0 0 8px rgba(255, 107, 74, 0.3);
    }
}

html[data-theme="ember"] .jp-ticker-cta {
    color: var(--ember-amber);
    border-left-color: rgba(245, 233, 220, 0.10);
}

html[data-theme="ember"] .jp-ticker-cta:hover {
    color: #ffd166;
    text-shadow: 0 0 12px rgba(255, 179, 71, 0.5);
}

/* ─────────────────────────────────────────────────────────────
   21. MARQUEE — warm strip, ember label glow
       Track keeps jp-marquee's transform animation (38s loop)
       — only colors change, so timing stays identical.
   ───────────────────────────────────────────────────────────── */

html[data-theme="ember"] .jp-marquee {
    background: linear-gradient(90deg,
        rgba(255, 179, 71, 0.05),
        rgba(193, 102, 62, 0.06) 50%,
        rgba(255, 107, 74, 0.05));
    border: 1px solid rgba(255, 179, 71, 0.16);
}

html[data-theme="ember"] .jp-marquee-item {
    color: rgba(245, 233, 220, 0.7);
}

html[data-theme="ember"] .jp-marquee-item strong {
    color: var(--ember-amber);
}

html[data-theme="ember"] .jp-marquee-dot {
    background: rgba(255, 179, 71, 0.6);
    box-shadow: 0 0 6px rgba(255, 179, 71, 0.5);
}

html[data-theme="ember"] .jp-marquee-label {
    background: linear-gradient(135deg,
        rgba(255, 179, 71, 0.2), rgba(255, 107, 74, 0.22));
    border-color: rgba(255, 179, 71, 0.45);
    color: var(--ember-amber);
    box-shadow: 0 0 14px rgba(255, 179, 71, 0.35),
                inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* ─────────────────────────────────────────────────────────────
   22. SCROLL PROGRESS + RAIL — warm accents
   ───────────────────────────────────────────────────────────── */

html[data-theme="ember"] .scroll-progress {
    background: linear-gradient(90deg,
        rgba(255, 179, 71, 0.8), rgba(255, 107, 74, 0.8));
    box-shadow: 0 0 12px rgba(255, 179, 71, 0.6);
}

html[data-theme="ember"] .scroll-progress::after {
    background: radial-gradient(circle,
        rgba(255, 179, 71, 0.4) 0%, transparent 70%);
}

html[data-theme="ember"] body.is-scrolling .scroll-progress {
    box-shadow: 0 0 18px rgba(255, 179, 71, 0.95);
}

html[data-theme="ember"] .jp-rail-item.active {
    color: var(--ember-amber);
}

html[data-theme="ember"] .jp-rail-item.active::before {
    background: linear-gradient(180deg,
        rgba(255, 179, 71, 0.9), rgba(255, 107, 74, 0.9));
}

html[data-theme="ember"] .jp-rail-item:hover {
    color: var(--ember-amber);
}

/* ─────────────────────────────────────────────────────────────
   23. AURORA PRIMITIVES — warm the existing .jp-aurora layer
       (pages that mount <div class="jp-aurora"> keep their
        orbs but in hearth colors; grid lines go copper)
   ───────────────────────────────────────────────────────────── */

html[data-theme="ember"] .jp-aurora {
    background:
        radial-gradient(ellipse 120% 80% at 50% -20%,
            rgba(193, 102, 62, 0.14), transparent 60%),
        var(--jp-bg);
}

html[data-theme="ember"] .jp-aurora-orb.o1 {
    background: radial-gradient(circle,
        rgba(255, 179, 71, 0.22), transparent 62%);
}

html[data-theme="ember"] .jp-aurora-orb.o2 {
    background: radial-gradient(circle,
        rgba(255, 107, 74, 0.24), transparent 62%);
}

html[data-theme="ember"] .jp-aurora-orb.o3 {
    background: radial-gradient(circle,
        rgba(232, 163, 61, 0.12), transparent 65%);
}

html[data-theme="ember"] .jp-grid-overlay {
    background-image:
        linear-gradient(rgba(255, 179, 71, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 179, 71, 0.04) 1px, transparent 1px);
}

/* particles — warm sparks */
html[data-theme="ember"] .jp-particle.cyan   { --p-color: rgba(255, 179, 71, 0.75); }
html[data-theme="ember"] .jp-particle.purple { --p-color: rgba(255, 107, 74, 0.65); }
html[data-theme="ember"] .jp-particle.magenta{ --p-color: rgba(232, 163, 61, 0.7); }
html[data-theme="ember"] .jp-particle.white  { --p-color: rgba(245, 233, 220, 0.5); }

html[data-theme="ember"] .jp-particle {
    filter: drop-shadow(0 0 4px rgba(255, 179, 71, 0.5));
}

/* WebGPU fluid canvas (aurora2.js, home page only) renders in the cool
   cyan/violet/magenta palette — it would clash with the hearthlight.
   Hide it under ember; the warmed .jp-aurora orbs + body::before carry
   the ambience instead. (display:none also stops the visible GPU work.) */
html[data-theme="ember"] #aurora2-canvas {
    display: none;
}

/* ═══════════════════════════════════════════════════════════════
   HOME PAGE (home-v3) — full warm re-skin
   Strategy: remap the --h3-* custom properties once (every
   var()-driven rule warms automatically), then override each
   hardcoded cyan rgba(77,227,255,*) / rgba(0,242,255,*) value.
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   24. H3 TOKEN REMAP — one rule warms ~60 var-driven rules
   ───────────────────────────────────────────────────────────── */

html[data-theme="ember"] body.home-v3 {
    --h3-ink:         #140b08;
    --h3-ink-2:       #1c110b;
    --h3-paper:       #f5e9dc;
    --h3-muted:       rgba(245, 233, 220, 0.55);
    --h3-faint:       rgba(245, 233, 220, 0.32);
    --h3-cyan:        #ffb347;   /* primary accent → amber  */
    --h3-violet:      #c1663e;   /* secondary → copper      */
    --h3-amber:       #ffd166;   /* candlelight             */
    --h3-line:        rgba(245, 233, 220, 0.09);
    --h3-line-strong: rgba(245, 233, 220, 0.18);
    --h3-card:        rgba(245, 233, 220, 0.028);
    background: var(--h3-ink);
}

/* selection — molten amber (beats body.home-v3::selection) */
html[data-theme="ember"] body.home-v3::selection {
    background: rgba(255, 179, 71, 0.32);
    color: #fff6ea;
}

/* ─────────────────────────────────────────────────────────────
   25. HERO — warm scrim, fire-gradient thin line, glow
   ───────────────────────────────────────────────────────────── */

html[data-theme="ember"] .h3-hero-scrim {
    background:
        linear-gradient(180deg,
            rgba(20, 11, 8, 0.55) 0%,
            rgba(20, 11, 8, 0.18) 34%,
            rgba(20, 11, 8, 0.42) 62%,
            var(--h3-ink) 97%),
        radial-gradient(120% 90% at 50% 108%,
            rgba(255, 140, 74, 0.12), transparent 55%);
}

/* hero title — warm under-glow so the display type reads as firelit */
html[data-theme="ember"] .h3-hero h1 {
    filter: drop-shadow(0 6px 40px rgba(255, 140, 74, 0.28));
}

/* .thin — Aurora: cream→cyan→violet. Ember: cream→gold→coral */
html[data-theme="ember"] .h3-hero h1 .thin {
    background-image: linear-gradient(95deg,
        rgba(245, 233, 220, 0.92) 18%,
        #ffd166 48%,
        #ffb347 66%,
        #ff6b4a 92%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* subtitle emphasis — warm gold instead of paper-white pop */
html[data-theme="ember"] .h3-hero-sub strong {
    color: #ffd166;
}

/* kicker chip — amber dot + warm glass */
html[data-theme="ember"] .h3-hero-kicker {
    border-color: rgba(255, 179, 71, 0.28);
    background: rgba(20, 11, 8, 0.4);
}

/* ─────────────────────────────────────────────────────────────
   26. HERO CTA — warm buttons + breathing glow on primary
   ───────────────────────────────────────────────────────────── */

html[data-theme="ember"] .h3-btn {
    color: var(--h3-paper);
}

html[data-theme="ember"] .h3-btn-primary {
    background-image: linear-gradient(95deg,
        #ffb347 0%, #ff6b4a 62%, #e8a33d 115%);
    color: #20100a;
    animation: ember-cta-breathe 4.5s ease-in-out infinite;
}

@keyframes ember-cta-breathe {
    0%, 100% { box-shadow: 0 8px 32px rgba(255, 179, 71, 0.28); }
    50%      { box-shadow: 0 10px 40px rgba(255, 179, 71, 0.48),
                          0 0 70px rgba(255, 107, 74, 0.22); }
}

html[data-theme="ember"] .h3-btn-primary:hover {
    background-position: right center;
    color: #20100a;
    box-shadow: 0 14px 44px rgba(255, 179, 71, 0.5),
                0 0 90px rgba(255, 107, 74, 0.3);
}

html[data-theme="ember"] .h3-btn-ghost {
    color: var(--h3-paper);
    border-color: var(--h3-line-strong);
}

html[data-theme="ember"] .h3-btn-ghost:hover {
    border-color: rgba(255, 179, 71, 0.55);
    color: var(--ember-amber);
    box-shadow: 0 10px 30px rgba(255, 179, 71, 0.16),
                inset 0 0 18px rgba(255, 179, 71, 0.06);
}

/* focus — warm halo (beats the cyan outline in home-v3.css) */
html[data-theme="ember"] .h3-btn:focus-visible {
    outline: 2px solid rgba(255, 179, 71, 0.85);
    box-shadow: 0 0 0 4px rgba(255, 179, 71, 0.15),
                0 0 18px rgba(255, 179, 71, 0.35);
}

/* scroll cue — amber dropline */
html[data-theme="ember"] .h3-scroll-cue::after {
    background: linear-gradient(180deg,
        rgba(255, 179, 71, 0.7), transparent);
}

/* code chip prompt — warm via var remap; border nudge */
html[data-theme="ember"] body.home-v3 .jp-codechip {
    border-color: var(--h3-line);
}

/* ─────────────────────────────────────────────────────────────
   27. INTRO + STATS — warm numerals, hearth stat tiles
   ───────────────────────────────────────────────────────────── */

html[data-theme="ember"] .h3-intro-statement em {
    background-image: linear-gradient(95deg,
        #ffd166, #ffb347 55%, #ff6b4a);
}

html[data-theme="ember"] .h3-stat {
    background: var(--h3-ink-2);
    border-color: var(--h3-line);
}

/* stat numeral — cream→gold gradient (var-driven, auto-warm) + glow */
html[data-theme="ember"] .h3-stat-num {
    filter: drop-shadow(0 0 18px rgba(255, 179, 71, 0.25));
}

/* ─────────────────────────────────────────────────────────────
   28. FILTER CHIPS — amber active state
   ───────────────────────────────────────────────────────────── */

html[data-theme="ember"] body.home-v3 .chip {
    border-color: var(--h3-line);
}

html[data-theme="ember"] body.home-v3 .chip:hover {
    border-color: rgba(255, 179, 71, 0.5);
    color: var(--ember-amber);
}

html[data-theme="ember"] body.home-v3 .chip:focus-visible {
    outline: 2px solid rgba(255, 179, 71, 0.85);
    border-color: rgba(255, 179, 71, 0.5);
    box-shadow: 0 0 0 4px rgba(255, 179, 71, 0.15),
                0 0 18px rgba(255, 179, 71, 0.35);
}

html[data-theme="ember"] body.home-v3 .chip.active {
    background: linear-gradient(95deg,
        rgba(255, 179, 71, 0.16), rgba(193, 102, 62, 0.2));
    border-color: rgba(255, 179, 71, 0.6);
    color: var(--ember-amber);
    box-shadow: 0 0 24px rgba(255, 179, 71, 0.18),
                inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ─────────────────────────────────────────────────────────────
   29. APP CARDS — warm glass, ember hover lift, animated rim
   (hover lift transform is home-v3's own; we only re-color and
    add the warm glow shadow)
   ───────────────────────────────────────────────────────────── */

html[data-theme="ember"] .app-card,
html[data-theme="ember"] .featured-card {
    background: var(--h3-card);
    border-color: var(--h3-line);
}

html[data-theme="ember"] .app-card:hover,
html[data-theme="ember"] .featured-card:hover {
    border-color: rgba(255, 179, 71, 0.38);
    background: rgba(245, 233, 220, 0.045);
    box-shadow: 0 24px 60px rgba(8, 4, 2, 0.55),
                0 0 44px rgba(255, 179, 71, 0.14);
}

html[data-theme="ember"] .app-card:focus-visible,
html[data-theme="ember"] .featured-card:focus-visible {
    outline: 2px solid rgba(255, 179, 71, 0.85);
    border-color: rgba(255, 179, 71, 0.38);
    background: rgba(245, 233, 220, 0.045);
    box-shadow: 0 24px 60px rgba(8, 4, 2, 0.55),
                0 0 44px rgba(255, 179, 71, 0.14),
                0 0 0 4px rgba(255, 179, 71, 0.15);
}

/* icon tile — copper glass, amber hover flare */
html[data-theme="ember"] .app-icon {
    background: linear-gradient(145deg,
        rgba(255, 179, 71, 0.1), rgba(193, 102, 62, 0.12));
    border-color: rgba(255, 179, 71, 0.2);
}

html[data-theme="ember"] .featured-card:hover .app-icon,
html[data-theme="ember"] .featured-card:focus-visible .app-icon {
    box-shadow: 0 0 30px rgba(255, 179, 71, 0.28);
}

/* title hover — amber (var-driven, auto-warm) */
html[data-theme="ember"] .app-card:hover .app-title {
    color: var(--h3-cyan);
}

/* badges — warm family mapping */
html[data-theme="ember"] .app-badge {
    background: rgba(255, 179, 71, 0.08);
    border-color: rgba(255, 179, 71, 0.3);
    color: var(--ember-amber);
}

html[data-theme="ember"] .app-badge.purple {
    background: rgba(193, 102, 62, 0.1);
    border-color: rgba(193, 102, 62, 0.38);
    color: #e0a583;
}

html[data-theme="ember"] .app-badge.green {
    background: rgba(168, 201, 106, 0.07);
    border-color: rgba(168, 201, 106, 0.3);
    color: #b8d47e;
}

html[data-theme="ember"] .app-badge.orange {
    background: rgba(255, 209, 102, 0.07);
    border-color: rgba(255, 209, 102, 0.34);
    color: #ffd166;
}

html[data-theme="ember"] .app-badge.blue {
    background: rgba(255, 179, 71, 0.08);
    border-color: rgba(255, 179, 71, 0.34);
    color: #ffc46b;
}

/* lead card media — warm fade into the ink */
html[data-theme="ember"] .lead-media::after {
    background: linear-gradient(180deg,
        transparent 30%, rgba(20, 11, 8, 0.88) 92%);
}

/* ─────────────────────────────────────────────────────────────
   30. FEATURED CARD — warm spotlight + rotating conic rim
       (reuses --jp-fc-angle / jp-fc-spin from design-system;
        only the conic colors are re-pointed at fire)
   ───────────────────────────────────────────────────────────── */

html[data-theme="ember"] .featured-card {
    background:
        radial-gradient(90% 160% at 85% -30%, rgba(193, 102, 62, 0.16), transparent 55%),
        radial-gradient(70% 140% at 10% 130%, rgba(255, 179, 71, 0.12), transparent 55%),
        var(--h3-card);
    border-color: rgba(255, 179, 71, 0.26);
}

html[data-theme="ember"] .featured-card.jp-spotlight::before {
    background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%),
        rgba(255, 179, 71, 0.18), transparent 60%);
}

html[data-theme="ember"] .featured-card.jp-spotlight::after {
    background: conic-gradient(from var(--jp-fc-angle, 0deg),
        transparent 0%,
        rgba(255, 179, 71, 0.75) 14%,
        rgba(255, 107, 74, 0.7) 32%,
        rgba(232, 163, 61, 0.6) 50%,
        transparent 64%);
}

/* peek strip — warm glass + amber CTA (var-driven auto-warm) */
html[data-theme="ember"] body.home-v3 .jp-peek {
    background: rgba(20, 11, 8, 0.55) !important;
    color: rgba(245, 233, 220, 0.5) !important;
}

/* ─────────────────────────────────────────────────────────────
   31. SECTION HEADERS — warm rule + amber index
   ───────────────────────────────────────────────────────────── */

html[data-theme="ember"] .section-header h2 {
    color: var(--h3-paper);
}

html[data-theme="ember"] .section-header .h3-idx {
    color: var(--ember-copper);
}

html[data-theme="ember"] .section-header::after {
    background: linear-gradient(90deg,
        rgba(255, 179, 71, 0.35), transparent);
}

/* ─────────────────────────────────────────────────────────────
   32. CTA BAND + STATUS — hearth backdrop, fire gradient em
   ───────────────────────────────────────────────────────────── */

html[data-theme="ember"] .h3-cta {
    background:
        linear-gradient(180deg, rgba(20, 11, 8, 0.84), rgba(20, 11, 8, 0.92)),
        radial-gradient(80% 120% at 50% -20%, rgba(255, 179, 71, 0.1), transparent 60%),
        url('/assets/bg-atmos-1.jpg') center / cover no-repeat,
        var(--h3-ink-2);
}

html[data-theme="ember"] .h3-cta h2 em {
    background-image: linear-gradient(95deg,
        #ffd166 0%, #ffb347 45%, #ff6b4a 80%, #e8a33d 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

html[data-theme="ember"] .status-bar {
    border-color: var(--h3-line);
    background: rgba(20, 11, 8, 0.5);
    color: rgba(245, 233, 220, 0.6);
}

/* ─────────────────────────────────────────────────────────────
   33. FOOTER + MISC — warm links, analytics tile
   ───────────────────────────────────────────────────────────── */

html[data-theme="ember"] .h3-footer {
    background: var(--h3-ink);
}

html[data-theme="ember"] .h3-footer a {
    color: rgba(245, 233, 220, 0.62);
}

html[data-theme="ember"] .h3-footer a:hover {
    color: var(--h3-cyan);
    text-shadow: 0 0 12px rgba(255, 179, 71, 0.4);
}

html[data-theme="ember"] body.home-v3 .jp-analytics-tile {
    border-color: var(--h3-line);
}

/* home-v3 scroll progress — warm gradient (beats both the
   home-v3 rule and our generic one by specificity) */
html[data-theme="ember"] body.home-v3 .scroll-progress {
    background: linear-gradient(90deg,
        #ffb347, #ff6b4a 55%, #e8a33d);
    box-shadow: 0 0 12px rgba(255, 179, 71, 0.6);
}

/* flip card (home-v3 .jp-card-flip) — warm face tint */
html[data-theme="ember"] body.home-v3 .jp-card-flip {
    background: var(--h3-card);
    border-color: var(--h3-line);
}

/* ═══════════════════════════════════════════════════════════════
   ACCESSIBILITY + PRINT
   ═══════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   34. REDUCED MOTION — single guard, every animated selector
       in this file (plus the DS animations ember keeps) goes
       static; transitions collapse to near-instant.
   ───────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    /* ambient layers */
    html[data-theme="ember"] body::before,
    html[data-theme="ember"] body::after,
    html[data-theme="ember"]::after {
        animation: none !important;
    }

    /* text + borders */
    html[data-theme="ember"] .jp-gradient-text,
    html[data-theme="ember"] .jp-glow-border:hover::after,
    html[data-theme="ember"] .jp-card:hover::before,
    html[data-theme="ember"] .jp-glass:hover::before,
    html[data-theme="ember"] .jp-animate-glow {
        animation: none !important;
    }

    /* nav + ticker */
    html[data-theme="ember"] .global-nav::after,
    html[data-theme="ember"] .jp-ticker-dot {
        animation: none !important;
    }

    /* marquee — static strip (items stay readable) */
    html[data-theme="ember"] .jp-marquee-track {
        animation: none !important;
    }

    /* hero CTA breathe + featured conic spin */
    html[data-theme="ember"] .h3-btn-primary,
    html[data-theme="ember"] .featured-card:hover::after {
        animation: none !important;
    }

    /* site-wide DS animations that remain visible in ember */
    html[data-theme="ember"] .jp-aurora-orb.o1,
    html[data-theme="ember"] .jp-aurora-orb.o2,
    html[data-theme="ember"] .jp-aurora-orb.o3,
    html[data-theme="ember"] .h3-hero-bg img,
    html[data-theme="ember"] .h3-scroll-cue::after,
    html[data-theme="ember"] .jp-particle {
        animation: none !important;
    }

    /* transitions — keep the state changes, drop the travel */
    html[data-theme="ember"] a,
    html[data-theme="ember"] .jp-btn,
    html[data-theme="ember"] .jp-card,
    html[data-theme="ember"] .jp-glass,
    html[data-theme="ember"] .jp-input,
    html[data-theme="ember"] .nav-links a,
    html[data-theme="ember"] .theme-toggle-btn,
    html[data-theme="ember"] .app-card,
    html[data-theme="ember"] .featured-card,
    html[data-theme="ember"] body.home-v3 .chip {
        transition-duration: 1ms !important;
    }
}

/* ─────────────────────────────────────────────────────────────
   35. PRINT — flatten to ink-friendly paper
       (no display:none anywhere: layers are cleared via
        background/animation, per the no-layout-overrides rule)
   ───────────────────────────────────────────────────────────── */

@media print {
    html[data-theme="ember"]::after,
    html[data-theme="ember"] body::before,
    html[data-theme="ember"] body::after {
        background: none !important;
        animation: none !important;
        filter: none !important;
        mix-blend-mode: normal !important;
        opacity: 0 !important;
    }

    html[data-theme="ember"] body {
        background: #ffffff !important;
        color: #1a120c !important;
    }

    /* gradient-clipped text → solid warm brown (prints legibly) */
    html[data-theme="ember"] .jp-gradient-text,
    html[data-theme="ember"] .h3-hero h1 .thin,
    html[data-theme="ember"] .h3-cta h2 em,
    html[data-theme="ember"] .h3-intro-statement em {
        background: none !important;
        -webkit-background-clip: initial;
        background-clip: initial;
        -webkit-text-fill-color: #8a4b1f !important;
        color: #8a4b1f !important;
        animation: none !important;
    }

    html[data-theme="ember"] .global-nav,
    html[data-theme="ember"] .jp-ticker,
    html[data-theme="ember"] .jp-marquee {
        background: #ffffff !important;
        border-color: #c9b8a6 !important;
        color: #1a120c !important;
        box-shadow: none !important;
        animation: none !important;
    }

    html[data-theme="ember"] .app-card,
    html[data-theme="ember"] .featured-card,
    html[data-theme="ember"] .jp-card,
    html[data-theme="ember"] .jp-glass {
        background: #ffffff !important;
        border: 1px solid #c9b8a6 !important;
        box-shadow: none !important;
        color: #1a120c !important;
    }

    html[data-theme="ember"] a {
        color: #8a4b1f !important;
        background-image: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   END — theme-ember.css v2.22.0
   Sections: 1 tokens · 2 nav tokens · 3 body base · 4 ember orbs
   5 vignette · 6 film grain · 7 scrollbar · 8 selection ·
   9 focus rings · 10 links · 11 type/gradient-text ·
   12 glass · 13 conic border · 14 shimmer · 15 buttons ·
   16 badges/inputs · 17 heading glow · 18 nav · 19 theme toggle
   20 ticker · 21 marquee · 22 scroll/rail · 23 aurora primitives
   24 h3 tokens · 25 hero · 26 CTA · 27 intro/stats · 28 chips ·
   29 app cards · 30 featured card · 31 section headers ·
   32 CTA band/status · 33 footer/misc · 34 reduced-motion ·
   35 print
   ═══════════════════════════════════════════════════════════════ */