/* ==========================================================================
   Zachary Zhang // Dimension of Thought — Aesthetic Architecture & Styling
   Dual-Mode Personal Portfolio & Holistic Digital Platform
   ========================================================================== */

:root {
    --font-serif: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, serif;
    --font-heading: "Cormorant Garamond", "Fraunces", Georgia, serif;
    --font-sans: "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    --ease: 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    --ease-slow: 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 22px;
    --nav-height: 76px;
}

[data-theme="dark"] {
    --bg: #07080d;
    --bg-elev: #0f111a;
    --bg-card: rgba(15, 17, 26, 0.72);
    --bg-card-hover: rgba(22, 25, 38, 0.88);
    --glass: rgba(7, 8, 13, 0.82);
    --ink: #f7f3eb;
    --muted: #a8a092;
    --dim: #6d665b;
    --gold: #d8b46e;
    --gold-2: #ecd496;
    --teal: #6ee7d8;
    --star: #fff9e6;
    --line: rgba(245, 240, 230, 0.08);
    --line-strong: rgba(216, 180, 110, 0.38);
    --glow: rgba(216, 180, 110, 0.16);
    --shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
    --term-bg: #050609;
    --term-head: #0d0f16;
    --term-text: #c8e6df;
    --term-prompt: #d8b46e;
}

[data-theme="light"] {
    --bg: #faf7f0;
    --bg-elev: #ffffff;
    --bg-card: rgba(255, 255, 255, 0.84);
    --bg-card-hover: #ffffff;
    --glass: rgba(250, 247, 240, 0.86);
    --ink: #181510;
    --muted: #5e574b;
    --dim: #8c8375;
    
    /* Vibrant Daytime Colors */
    --gold: #f28529; /* Vibrant Orange */
    --gold-2: #d96918;
    --teal: #0e99cc; /* Sky Blue */
    --star: #f28529;
    
    --line: rgba(24, 21, 16, 0.08);
    --line-strong: rgba(242, 133, 41, 0.38);
    --glow: rgba(242, 133, 41, 0.15);
    --shadow: 0 16px 45px rgba(242, 133, 41, 0.08);
    
    --term-bg: #191612;
    --term-head: #13100c;
    --term-text: #d8eee9;
    --term-prompt: #f28529;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-height) + 16px);
}

body {
    font-family: var(--font-sans);
    background-color: var(--bg);
    color: var(--ink);
    line-height: 1.7;
    overflow-x: hidden;
    transition: background-color var(--ease-slow), color var(--ease-slow);
}

/* Ambient Animated Aurora & Cosmic Nebula Background */
body::before {
    content: "";
    position: fixed;
    top: -30%;
    left: -30%;
    width: 160%;
    height: 160%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.85;
    background-image:
        radial-gradient(ellipse 45% 35% at 18% 15%, rgba(216, 180, 110, 0.25), transparent 60%),
        radial-gradient(ellipse 48% 38% at 82% 22%, rgba(110, 231, 216, 0.25), transparent 65%),
        radial-gradient(ellipse 42% 42% at 75% 82%, rgba(168, 85, 247, 0.25), transparent 65%),
        radial-gradient(ellipse 50% 40% at 22% 78%, rgba(244, 63, 94, 0.20), transparent 60%),
        radial-gradient(circle 35% at 65% 55%, rgba(67, 206, 162, 0.20), transparent 70%),
        radial-gradient(circle 32% at 50% 50%, rgba(216, 180, 110, 0.15), transparent 70%);
    animation: auroraSlowDrift 25s ease-in-out infinite alternate;
    will-change: transform;
}

[data-theme="light"] body::before {
    opacity: 0.65;
    background-image:
        radial-gradient(ellipse 45% 35% at 18% 15%, rgba(146, 110, 37, 0.20), transparent 60%),
        radial-gradient(ellipse 48% 38% at 82% 22%, rgba(13, 117, 109, 0.18), transparent 65%),
        radial-gradient(ellipse 42% 42% at 75% 82%, rgba(147, 51, 234, 0.15), transparent 65%),
        radial-gradient(ellipse 50% 40% at 22% 78%, rgba(225, 29, 72, 0.15), transparent 60%),
        radial-gradient(circle 35% at 65% 55%, rgba(46, 175, 130, 0.15), transparent 70%),
        radial-gradient(circle 32% at 50% 50%, rgba(146, 110, 37, 0.10), transparent 70%);
}

@keyframes auroraSlowDrift {
    0% {
        transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
    }
    33% {
        transform: translate3d(-2.5%, 3%, 0) scale(1.05) rotate(1.8deg);
    }
    66% {
        transform: translate3d(3%, -2.5%, 0) scale(0.97) rotate(-1.5deg);
    }
    100% {
        transform: translate3d(-1%, -1.5%, 0) scale(1.03) rotate(0.8deg);
    }
}

a { color: inherit; text-decoration: none; }
.inline-link {
    color: var(--teal);
    font-weight: 600;
    position: relative;
    transition: color var(--ease);
}
.inline-link:hover {
    color: var(--gold);
}
.inline-link::after {
    content: '';
    position: absolute;
    width: 100%;
    transform: scaleX(0);
    height: 2px;
    bottom: -2px;
    left: 0;
    background: linear-gradient(90deg, var(--gold), var(--teal), #a855f7);
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
}
.inline-link:hover::after {
    transform: scaleX(1);
    transform-origin: bottom left;
}
button, input, select, textarea { font-family: inherit; color: inherit; }
code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    color: var(--gold);
}

.skip-link {
    position: absolute;
    left: 16px;
    top: -50px;
    z-index: 10000;
    background: var(--gold);
    color: #07080d;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-weight: 700;
}
.skip-link:focus { top: 14px; }

.scroll-progress-bar {
    position: fixed;
    top: 0; left: 0;
    height: 2.5px;
    width: 0;
    background: linear-gradient(90deg, var(--gold), var(--teal));
    z-index: 1001;
}

.constellation-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    pointer-events: none;
    opacity: 0.85;
}

.container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
    position: relative;
    z-index: 1;
}

.section {
    padding: 108px 0;
    position: relative;
    z-index: 1;
    background: transparent;
}
.hero.section { background: transparent; }

.section-header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 56px;
}
.section-header.left {
    text-align: left;
    margin-left: 0;
}

.section-tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.76rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 12px;
    background: var(--glow);
    border: 1px solid var(--line-strong);
    padding: 4px 12px;
    border-radius: 999px;
}

.section-title {
    font-family: var(--font-serif);
    font-size: clamp(2.2rem, 4.5vw, 3.2rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.18;
    margin-bottom: 12px;
}
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.section-title em {
    font-style: italic;
    background: linear-gradient(135deg, var(--gold-2), var(--teal), #a855f7, var(--gold));
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientShift 6s ease infinite;
}

.section-subtitle {
    color: var(--muted);
    font-size: 1.1rem;
}

/* ==========================================================================
   Navigation Bar & Fancy Mode Switcher
   ========================================================================== */

.navbar {
    position: fixed;
    inset: 0 0 auto 0;
    height: var(--nav-height);
    z-index: 1000;
    background: color-mix(in srgb, var(--bg) 84%, transparent);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--line);
    transition: height var(--ease), box-shadow var(--ease), background var(--ease);
}
.navbar.scrolled {
    height: 64px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    background: color-mix(in srgb, var(--bg) 92%, transparent);
}

.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
    gap: 16px;
}

/* Top Left Mode Switcher */
.nav-left-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mode-switcher-pill {
    display: inline-flex;
    align-items: center;
    background: var(--bg-card);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    padding: 4px;
    gap: 3px;
    backdrop-filter: blur(16px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition: border-color var(--ease), box-shadow var(--ease);
}
.mode-switcher-pill:hover {
    border-color: var(--gold);
    box-shadow: 0 8px 24px var(--glow);
}

.mode-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: var(--muted);
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--ease);
    white-space: nowrap;
    position: relative;
}

.mode-btn:hover {
    color: var(--ink);
    background: rgba(216, 180, 110, 0.08);
}

.mode-btn.active {
    background: linear-gradient(135deg, var(--gold-2), var(--gold));
    color: #0c0b08;
    box-shadow: 0 3px 14px var(--glow);
    font-weight: 700;
}

.mode-btn-icon {
    font-size: 0.9rem;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 22px;
    align-items: center;
}

.nav-link {
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--muted);
    padding: 6px 0;
    position: relative;
    transition: color var(--ease);
}
.nav-link:hover, .nav-link.active {
    color: var(--ink);
}
.nav-link::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 0; height: 2px;
    background: linear-gradient(90deg, var(--gold), var(--teal), #a855f7);
    border-radius: 2px;
    transition: width var(--ease);
}
.nav-link:hover::after, .nav-link.active::after {
    width: 100%;
}

.nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--bg-card);
    border: 1px solid var(--line);
    color: var(--ink);
    padding: 7px 14px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    backdrop-filter: blur(12px);
    transition: border-color var(--ease), background var(--ease), transform var(--ease), box-shadow var(--ease);
}
.icon-btn:hover {
    border-color: var(--gold);
    background: var(--glow);
    box-shadow: 0 4px 14px var(--glow);
    transform: translateY(-1.5px);
}

.cli-glyph {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--gold);
    font-weight: 700;
}

.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}
.hamburger span {
    width: 20px;
    height: 1.5px;
    background: var(--ink);
    transition: transform var(--ease), opacity var(--ease);
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ==========================================================================
   Dual View Containers (Personal vs Dimension)
   ========================================================================== */

.site-mode-view {
    display: none;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.site-mode-view.active-mode {
    display: block;
    opacity: 1;
}

/* ==========================================================================
   Vertical Section Scroll Navigator
   ========================================================================== */

.vertical-scroll-nav {
    position: fixed;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 950;
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--bg-card);
    border: 1px solid var(--line-strong);
    padding: 14px 10px;
    border-radius: 999px;
    backdrop-filter: blur(20px);
    box-shadow: 0 14px 38px rgba(0, 0, 0, 0.45);
    transition: opacity var(--ease), transform var(--ease);
}

.v-nav-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
}

.v-nav-item {
    position: relative;
    display: flex;
    align-items: center;
}

.v-nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    position: relative;
}

.v-nav-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dim);
    transition: transform var(--ease), background var(--ease), box-shadow var(--ease);
}

.v-nav-link:hover .v-nav-dot,
.v-nav-link.active .v-nav-dot {
    background: var(--gold);
    transform: scale(1.4);
    box-shadow: 0 0 12px var(--gold);
}

.v-nav-label {
    position: absolute;
    right: 32px;
    white-space: nowrap;
    background: var(--bg-elev);
    border: 1px solid var(--line-strong);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    border-radius: 6px;
    opacity: 0;
    pointer-events: none;
    transform: translateX(8px);
    transition: opacity var(--ease), transform var(--ease);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

.v-nav-link:hover .v-nav-label {
    opacity: 1;
    transform: translateX(0);
}

/* ==========================================================================
   Buttons & Core Components
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    border: 1px solid transparent;
    transition: transform var(--ease), background var(--ease), border-color var(--ease), box-shadow var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
    background: linear-gradient(135deg, var(--gold-2), var(--teal), #a855f7, var(--gold));
    background-size: 300% 300%;
    color: #0c0b08;
    box-shadow: 0 8px 24px rgba(110, 231, 216, 0.25);
    font-weight: 700;
    animation: gradientShift 6s ease infinite;
}
.btn-primary:hover {
    box-shadow: 0 12px 30px rgba(168, 85, 247, 0.4);
    filter: brightness(1.1);
}
.btn-secondary, .btn-ghost {
    background: var(--bg-card);
    border-color: var(--line);
    color: var(--ink);
    backdrop-filter: blur(12px);
}
.btn-secondary:hover, .btn-ghost:hover {
    border-color: var(--gold);
    background: var(--glow);
    box-shadow: 0 6px 18px var(--glow);
}
.btn-small { padding: 6px 14px; font-size: 0.84rem; }

:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
}

/* ==========================================================================
   Card Spotlight & Glass Layering
   ========================================================================== */

.stat-card, .now-card, .project-card, .about-grid .pillar-card,
.skill-category-card, .story-card, .manifesto-card, .essay-card,
.initiative-card, .contact-item-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--bg-card);
    backdrop-filter: blur(16px);
    transition: transform var(--ease), border-color var(--ease), box-shadow var(--ease);
}

/* Dynamic Spotlight Glow overlay on hover */
.stat-card::before, .now-card::before, .project-card::before, .about-grid .pillar-card::before,
.skill-category-card::before, .story-card::before, .manifesto-card::before, .essay-card::before,
.initiative-card::before, .contact-item-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(420px circle at var(--mouse-x, -999px) var(--mouse-y, -999px), rgba(216, 180, 110, 0.15), rgba(110, 231, 216, 0.05), transparent 45%);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
    z-index: 1;
}

.stat-card:hover::before, .now-card:hover::before, .project-card:hover::before, .about-grid .pillar-card:hover::before,
.skill-category-card:hover::before, .story-card:hover::before, .manifesto-card:hover::before, .essay-card:hover::before,
.initiative-card:hover::before, .contact-item-card:hover::before {
    opacity: 1;
}

/* ==========================================================================
   Hero Section
   ========================================================================== */

.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: calc(var(--nav-height) + 36px);
    padding-bottom: 84px;
    position: relative;
    overflow: hidden;
}
.hero-container {
    text-align: left;
    max-width: 1140px;
    margin: 0 auto;
}

.hero-split-layout {
    display: grid;
    grid-template-columns: 1.3fr 0.8fr;
    gap: 48px;
    align-items: center;
    margin-bottom: 48px;
}

.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    color: var(--muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 22px;
}
.pulse-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--teal);
    box-shadow: 0 0 12px var(--teal);
    animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.45; transform: scale(1.35); }
}

.hero-title {
    font-family: var(--font-serif);
    font-size: clamp(2.4rem, 5.5vw, 4rem);
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1.1;
    margin-bottom: 20px;
}
.hero-title em {
    font-style: italic;
    background: linear-gradient(135deg, var(--gold-2), var(--teal), #a855f7, var(--gold));
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 500;
    animation: gradientShift 6s ease infinite;
}

.hero-typewriter-container {
    font-family: var(--font-mono);
    font-size: clamp(0.92rem, 1.8vw, 1.1rem);
    color: var(--muted);
    min-height: 34px;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}
.typewriter-prefix { color: var(--gold); font-weight: 700; }
.typewriter-text { color: var(--ink); font-weight: 500; }
.cursor { color: var(--gold); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.hero-bio {
    max-width: 680px;
    font-size: 1.15rem;
    color: var(--muted);
    margin-bottom: 32px;
    line-height: 1.75;
}
.hero-bio strong { color: var(--ink); font-weight: 650; }

.hero-cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.emblem-showcase-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 34px 26px;
    background: var(--bg-card);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    backdrop-filter: blur(20px);
    box-shadow: var(--shadow);
    transition: transform var(--ease-slow), box-shadow var(--ease-slow);
}
.emblem-showcase-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.65), 0 0 30px var(--glow);
}

.emblem-glow-ring {
    position: absolute;
    width: 250px;
    height: 250px;
    top: 32px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--glow) 0%, transparent 70%);
    filter: blur(16px);
    pointer-events: none;
    animation: ringPulse 4s ease-in-out infinite;
}
@keyframes ringPulse {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.18); }
}

.hero-emblem-img {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--gold);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
    margin-bottom: 18px;
    position: relative;
    z-index: 2;
    transition: transform var(--ease-slow);
}
.emblem-showcase-card:hover .hero-emblem-img { transform: scale(1.04); }

.emblem-tag {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 6px;
    position: relative;
    z-index: 2;
}
.emblem-caption p {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--muted);
    max-width: 240px;
    line-height: 1.4;
    position: relative;
    z-index: 2;
}

.hero-stats {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}
.stat-card {
    border-radius: var(--radius-md);
    padding: 20px 22px;
}
.stat-card:hover {
    transform: translateY(-3px);
    border-color: var(--gold);
    box-shadow: 0 10px 28px rgba(216, 180, 110, 0.25);
}
.stat-value {
    display: block;
    font-family: var(--font-serif);
    font-size: 1.22rem;
    color: var(--gold);
    margin-bottom: 4px;
    font-weight: 600;
    position: relative;
    z-index: 2;
}
.stat-label { font-size: 0.84rem; color: var(--muted); line-height: 1.45; position: relative; z-index: 2; }

.scroll-indicator {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dim);
    animation: float 2.4s ease-in-out infinite;
}
.scroll-chevron {
    width: 10px; height: 10px;
    border-right: 1.5px solid var(--dim);
    border-bottom: 1.5px solid var(--dim);
    transform: rotate(45deg);
}
@keyframes float {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, 8px); }
}

/* ==========================================================================
   Personal Mode Specific Layouts (Now, Work, About, Skills)
   ========================================================================== */

.now-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 20px;
}
.now-card {
    border-radius: var(--radius-lg);
    padding: 30px;
}
.now-card:hover { border-color: var(--gold); transform: translateY(-4px); box-shadow: 0 12px 30px rgba(216, 180, 110, 0.25); }
.now-featured { background: linear-gradient(160deg, var(--bg-card), rgba(216, 180, 110, 0.1)); border-color: var(--line-strong); }
.now-label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 10px;
    position: relative;
    z-index: 2;
}
.now-card h3 {
    font-family: var(--font-serif);
    font-size: 1.38rem;
    font-weight: 600;
    margin-bottom: 10px;
    letter-spacing: -0.02em;
    position: relative;
    z-index: 2;
}
.now-card p { color: var(--muted); font-size: 0.98rem; position: relative; z-index: 2; }
.now-chips {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
    position: relative;
    z-index: 2;
}
.now-chips li {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    border: 1px solid var(--line);
    padding: 4px 12px;
    border-radius: 999px;
    color: var(--muted);
    background: var(--bg-elev);
}

/* Earthcall Layout */
.pull-quote {
    font-family: var(--font-serif);
    font-size: clamp(1.25rem, 2.4vw, 1.7rem);
    font-weight: 500;
    font-style: italic;
    line-height: 1.5;
    color: var(--ink);
    border-left: 3px solid var(--gold);
    background: linear-gradient(90deg, var(--glow) 0%, transparent 100%);
    padding: 14px 24px 14px 28px;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin: 0 0 48px;
    max-width: 880px;
}
.pull-quote cite {
    display: block;
    margin-top: 14px;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-style: normal;
    letter-spacing: 0.06em;
    color: var(--dim);
}

.earthcall-layout {
    display: grid;
    grid-template-columns: 1.35fr 0.85fr;
    gap: 40px;
    align-items: start;
    margin-bottom: 36px;
}
.earthcall-copy p {
    color: var(--muted);
    margin-bottom: 16px;
    font-size: 1.05rem;
}
.project-links-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

.ontology-stack {
    background: var(--bg-card);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    padding: 26px;
    backdrop-filter: blur(18px);
    position: sticky;
    top: calc(var(--nav-height) + 16px);
    box-shadow: var(--shadow);
}
.ontology-stack h3 {
    font-family: var(--font-serif);
    font-size: 1.25rem;
    margin-bottom: 16px;
    color: var(--gold);
}
.stack-list { list-style: none; display: flex; flex-direction: column; gap: 0; }
.stack-list li {
    display: grid;
    gap: 2px;
    padding: 12px 0;
    border-top: 1px solid var(--line);
}
.stack-list li:first-child { border-top: 0; padding-top: 0; }
.stack-name {
    font-family: var(--font-mono);
    font-size: 0.84rem;
    color: var(--gold);
    letter-spacing: 0.04em;
    font-weight: 600;
}
.stack-desc { font-size: 0.88rem; color: var(--muted); }

.primitive-row {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 48px;
}
.primitive-row li {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--line-strong);
    color: var(--gold);
    background: var(--glow);
}

.refusals h3 {
    font-family: var(--font-serif);
    font-size: 1.55rem;
    margin-bottom: 6px;
}
.refusals-lead { color: var(--muted); margin-bottom: 20px; }
.refusal-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.refusal-grid article {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 22px;
    background: var(--bg-card);
    backdrop-filter: blur(14px);
    transition: transform var(--ease), border-color var(--ease);
}
.refusal-grid article:hover {
    transform: translateY(-2px);
    border-color: var(--line-strong);
}
.refusal-grid h4 {
    font-family: var(--font-serif);
    font-size: 1.1rem;
    margin-bottom: 8px;
    color: var(--gold);
}
.refusal-grid p { color: var(--muted); font-size: 0.92rem; }

/* Projects Grid */
.project-filters {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}
.filter-btn {
    background: var(--bg-card);
    border: 1px solid var(--line);
    color: var(--muted);
    padding: 8px 18px;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.88rem;
    backdrop-filter: blur(12px);
    transition: background var(--ease), border-color var(--ease), color var(--ease), box-shadow var(--ease);
}
.filter-btn:hover, .filter-btn.active {
    color: #0c0b08;
    background: linear-gradient(135deg, var(--gold-2), var(--gold));
    border-color: var(--gold);
    box-shadow: 0 4px 14px var(--glow);
    font-weight: 700;
}

.projects-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}
.project-card {
    border-radius: var(--radius-lg);
    padding: 30px;
    display: flex;
    flex-direction: column;
}
.project-card:hover {
    transform: translateY(-4px);
    border-color: var(--gold);
    box-shadow: 0 12px 30px rgba(216, 180, 110, 0.25);
}
.project-card-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 14px;
    position: relative;
    z-index: 2;
}
.project-card h3 {
    font-family: var(--font-serif);
    font-size: 1.45rem;
    font-weight: 600;
}
.project-role {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--gold);
    margin-top: 4px;
}
.proj-link-btn {
    font-size: 0.82rem;
    font-weight: 600;
    border: 1px solid var(--line);
    padding: 6px 12px;
    border-radius: 999px;
    color: var(--muted);
    background: var(--bg-elev);
    white-space: nowrap;
    transition: border-color var(--ease), color var(--ease);
}
.proj-link-btn:hover { color: var(--ink); border-color: var(--gold); }
.project-description { color: var(--muted); margin-bottom: 18px; position: relative; z-index: 2; }
.tech-tag-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; position: relative; z-index: 2; }
.tech-tag {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    border: 1px solid var(--line);
    background: var(--bg-elev);
    padding: 4px 10px;
    border-radius: 6px;
    color: var(--muted);
}

/* About Grid */
.about-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.95fr;
    gap: 48px;
}
.about-text-column p { color: var(--muted); margin-bottom: 16px; font-size: 1.05rem; }
.lead-text { color: var(--ink) !important; font-size: 1.2rem !important; font-weight: 500; }

.quick-facts {
    margin-top: 28px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    padding: 8px 22px;
    background: var(--bg-card);
    backdrop-filter: blur(14px);
}
.fact-item {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}
.fact-item:last-child { border-bottom: 0; }
.fact-item dt {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold);
    padding-top: 3px;
    font-weight: 600;
}
.fact-item dd { color: var(--muted); }
.fact-item a { color: var(--ink); border-bottom: 1px solid var(--line-strong); }

.pillars-heading {
    font-family: var(--font-serif);
    font-size: 1.45rem;
    margin-bottom: 18px;
}
.pillar-card {
    border-radius: var(--radius-md);
    padding: 22px;
    margin-bottom: 16px;
}
.pillar-card:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow); }
.pillar-header { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; position: relative; z-index: 2; }
.pillar-num { font-family: var(--font-mono); font-size: 0.8rem; color: var(--gold); font-weight: 700; }
.pillar-card h4 { font-family: var(--font-serif); font-size: 1.15rem; font-weight: 600; }
.pillar-card p { color: var(--muted); font-size: 0.94rem; position: relative; z-index: 2; }

/* Skills Grid */
.skills-categories-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}
.skill-category-card {
    border-radius: var(--radius-md);
    padding: 24px;
}
.skill-category-card:hover { transform: translateY(-3px); border-color: var(--line-strong); box-shadow: var(--shadow); }
.skill-category-card h3 {
    font-family: var(--font-serif);
    font-size: 1.18rem;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
    color: var(--gold);
    position: relative;
    z-index: 2;
}
.skill-list { list-style: none; display: flex; flex-direction: column; gap: 12px; position: relative; z-index: 2; }
.skill-list li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    font-size: 0.92rem;
}
.skill-level {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--dim);
}

/* ==========================================================================
   Dimension of Thought Mode Specific Layouts
   ========================================================================== */

.story-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}
.story-card {
    border-radius: var(--radius-lg);
    padding: 38px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.story-card:hover { border-color: var(--line-strong); transform: translateY(-4px); box-shadow: var(--shadow); }
.story-card-tag {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
    position: relative;
    z-index: 2;
}
.story-heading {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 600;
    line-height: 1.2;
    position: relative;
    z-index: 2;
}
.story-quote {
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 1.14rem;
    color: var(--ink);
    border-left: 3px solid var(--gold);
    padding-left: 18px;
    line-height: 1.6;
    position: relative;
    z-index: 2;
}
.story-card p { color: var(--muted); font-size: 1.02rem; line-height: 1.7; position: relative; z-index: 2; }
.story-footer-note {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    font-size: 0.88rem;
    color: var(--muted);
    position: relative;
    z-index: 2;
}
.badge {
    background: var(--glow);
    border: 1px solid var(--line-strong);
    color: var(--gold);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    padding: 4px 10px;
    border-radius: 999px;
}

.manifesto-pull-quote {
    font-family: var(--font-serif);
    font-size: clamp(1.25rem, 2.4vw, 1.7rem);
    font-weight: 500;
    font-style: italic;
    line-height: 1.5;
    color: var(--ink);
    border-left: 3px solid var(--gold);
    background: linear-gradient(90deg, var(--glow) 0%, transparent 100%);
    padding: 14px 24px 14px 30px;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin: 0 0 52px;
    max-width: 900px;
}
.manifesto-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 48px;
}
.manifesto-card {
    border-radius: var(--radius-lg);
    padding: 32px;
}
.manifesto-card:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: var(--shadow); }
.manifesto-icon { font-size: 1.6rem; color: var(--gold); margin-bottom: 16px; position: relative; z-index: 2; }
.manifesto-card h3 { font-family: var(--font-serif); font-size: 1.38rem; font-weight: 600; margin-bottom: 12px; position: relative; z-index: 2; }
.manifesto-card p { color: var(--muted); font-size: 0.98rem; line-height: 1.65; margin-bottom: 12px; position: relative; z-index: 2; }

/* Essays Grid */
.essay-filter-bar {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 38px;
}
.essay-filter-btn {
    background: var(--bg-card);
    border: 1px solid var(--line);
    color: var(--muted);
    padding: 8px 20px;
    border-radius: 999px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.88rem;
    backdrop-filter: blur(12px);
    transition: background var(--ease), border-color var(--ease), color var(--ease), box-shadow var(--ease);
}
.essay-filter-btn:hover, .essay-filter-btn.active {
    color: #0c0b08;
    background: linear-gradient(135deg, var(--gold-2), var(--gold));
    border-color: var(--gold);
    box-shadow: 0 4px 14px var(--glow);
    font-weight: 700;
}
.essays-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.essay-card {
    border-radius: var(--radius-lg);
    padding: 32px;
    display: flex;
    flex-direction: column;
}
.essay-card:hover {
    transform: translateY(-5px);
    border-color: var(--line-strong);
    box-shadow: var(--shadow);
}
.essay-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    position: relative;
    z-index: 2;
}
.essay-tag {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--gold);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.essay-read-time { font-family: var(--font-mono); font-size: 0.72rem; color: var(--dim); }
.essay-title {
    font-family: var(--font-heading);
    font-size: 1.58rem;
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: 8px;
    position: relative;
    z-index: 2;
}
.essay-subtitle {
    font-size: 0.94rem;
    color: var(--gold);
    margin-bottom: 14px;
    font-weight: 500;
    position: relative;
    z-index: 2;
}
.essay-excerpt { color: var(--muted); font-size: 0.96rem; line-height: 1.65; margin-bottom: 20px; position: relative; z-index: 2; }
.essay-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    position: relative;
    z-index: 2;
}
.essay-author { font-size: 0.82rem; color: var(--dim); }

/* Initiatives Grid */
.initiatives-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr 1fr;
    gap: 24px;
}
.initiative-card {
    border-radius: var(--radius-lg);
    padding: 34px;
    display: flex;
    flex-direction: column;
}
.initiative-card:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: var(--shadow); }
.initiative-highlight {
    background: linear-gradient(160deg, var(--bg-card), rgba(216, 180, 110, 0.1));
    border-color: var(--line-strong);
}
.initiative-badge {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 12px;
    position: relative;
    z-index: 2;
}
.initiative-card h3 { font-family: var(--font-serif); font-size: 1.65rem; font-weight: 600; margin-bottom: 10px; position: relative; z-index: 2; }
.initiative-lead { font-size: 1.05rem; color: var(--ink); font-weight: 500; margin-bottom: 14px; position: relative; z-index: 2; }
.initiative-card p { color: var(--muted); font-size: 0.98rem; line-height: 1.65; margin-bottom: 16px; position: relative; z-index: 2; }
.initiative-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; padding-top: 14px; position: relative; z-index: 2; }

/* Contact Section */
.contact-wrapper { max-width: 860px; margin: 0 auto; }
.contact-card-main {
    background: var(--bg-card);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    padding: 40px;
    backdrop-filter: blur(20px);
    box-shadow: var(--shadow);
}
.contact-links-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 36px;
}
.contact-item-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    border-radius: var(--radius-md);
    padding: 18px 20px;
    background: var(--bg-elev);
}
.item-label {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dim);
    margin-bottom: 2px;
    position: relative;
    z-index: 2;
}
.item-link { font-weight: 650; font-size: 0.94rem; word-break: break-word; position: relative; z-index: 2; }
.item-link:hover { color: var(--gold); }

.quick-composer { border-top: 1px solid var(--line); padding-top: 30px; }
.quick-composer h3 { font-family: var(--font-serif); font-size: 1.45rem; margin-bottom: 6px; }
.composer-desc { color: var(--muted); font-size: 0.94rem; margin-bottom: 22px; }
.composer-form { display: flex; flex-direction: column; gap: 16px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-group { display: flex; flex-direction: column; gap: 6px; }
.form-group label { font-size: 0.85rem; font-weight: 600; color: var(--muted); }
.form-group input, .form-group select, .form-group textarea {
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    font-size: 0.95rem;
    outline: none;
    transition: border-color var(--ease), box-shadow var(--ease);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--glow);
}
.btn-submit { align-self: flex-start; margin-top: 6px; }

/* Terminal Window & Modal */
.terminal-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.terminal-modal[hidden] { display: none; }
.terminal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(10px);
}
.terminal-window {
    position: relative;
    width: 100%;
    max-width: 820px;
    height: min(530px, 80vh);
    background: var(--term-bg);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    box-shadow: 0 35px 90px rgba(0, 0, 0, 0.75), 0 0 40px var(--glow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modalIn 0.2s ease-out;
}
@keyframes modalIn {
    from { opacity: 0; transform: translateY(10px) scale(0.98); }
    to { opacity: 1; transform: none; }
}
.terminal-header {
    background: var(--term-head);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.terminal-controls { display: flex; gap: 8px; }
.control-dot { width: 12px; height: 12px; border-radius: 50%; border: none; padding: 0; }
.close-dot { background: #ef4444; cursor: pointer; }
.min-dot { background: #f59e0b; }
.max-dot { background: #10b981; }
.terminal-title { font-family: var(--font-mono); font-size: 0.82rem; color: #a1a1aa; }
.terminal-hint { font-size: 0.72rem; color: #71717a; }
.terminal-body {
    flex: 1;
    padding: 18px;
    overflow-y: auto;
    font-family: var(--font-mono);
    font-size: 0.88rem;
    color: var(--term-text);
    display: flex;
    flex-direction: column;
}
.terminal-output { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.term-line { line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.term-welcome { color: var(--teal); font-weight: 600; }
.term-sub { color: #a1a1aa; }
.term-cmd-highlight { color: var(--gold); font-weight: 600; }
.term-prompt-echo { color: #a1a1aa; }
.term-error { color: #f87171; }
.term-accent { color: var(--teal); font-weight: 500; }
.term-gold { color: var(--gold); font-weight: 600; }
.term-cyan { color: #38bdf8; font-weight: 500; }
.term-purple { color: #c084fc; }
.term-success { color: #34d399; font-weight: 500; }
.term-warn { color: #fbbf24; }
.term-dim { color: #71717a; }
.term-pre { font-family: var(--font-mono); white-space: pre; line-height: 1.35; font-size: 0.82rem; }
.term-divider { border-top: 1px dashed rgba(255, 255, 255, 0.15); margin: 4px 0; }
.terminal-input-line { display: flex; align-items: center; gap: 8px; margin-top: auto; }
.term-prompt { color: var(--term-prompt); font-weight: 600; white-space: nowrap; }
.terminal-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-family: var(--font-mono);
    font-size: 0.88rem;
}

/* Toast Notification & Back to top */
.toast-notification {
    position: fixed;
    bottom: 28px;
    right: 28px;
    background: var(--bg-elev);
    border: 1px solid var(--teal);
    color: var(--ink);
    padding: 12px 20px;
    border-radius: var(--radius-md);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4);
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 650;
    z-index: 3000;
    opacity: 0;
    transform: translateY(16px);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
}
.toast-notification.show { opacity: 1; transform: none; }
.toast-icon { color: var(--teal); font-weight: 700; }

.back-to-top-btn {
    position: fixed;
    bottom: 28px;
    left: 28px;
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 1px solid var(--line-strong);
    background: var(--bg-card);
    color: var(--ink);
    cursor: pointer;
    z-index: 900;
    opacity: 0;
    visibility: hidden;
    backdrop-filter: blur(12px);
    transition: opacity var(--ease), transform var(--ease), background var(--ease), box-shadow var(--ease);
}
.back-to-top-btn.show { opacity: 1; visibility: visible; }
.back-to-top-btn:hover { background: var(--gold); color: #0c0b08; transform: translateY(-3px); box-shadow: 0 6px 20px var(--glow); }

/* Footer */
.footer {
    position: relative;
    z-index: 1;
    border-top: 1px solid var(--line);
    padding: 48px 0;
    background: color-mix(in srgb, var(--bg-elev) 82%, transparent);
    backdrop-filter: blur(16px);
}
.footer-container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    align-items: center;
}
.footer-brand-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.footer-emblem { border-radius: 50%; border: 1.5px solid var(--gold); box-shadow: 0 2px 8px var(--glow); }
.footer-copy { font-weight: 650; }
.footer-tagline { color: var(--dim); font-size: 0.88rem; }
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-links a { color: var(--muted); font-size: 0.9rem; transition: color var(--ease); }
.footer-links a:hover { color: var(--gold); }

/* Media Queries */
@media (max-width: 1100px) {
    .hero-split-layout, .now-grid, .earthcall-layout, .about-grid, .refusal-grid, .skills-categories-grid {
        grid-template-columns: 1fr; gap: 36px;
    }
    .hero-stats, .manifesto-grid, .essays-grid, .initiatives-grid, .projects-grid {
        grid-template-columns: 1fr 1fr;
    }
    .ontology-stack { position: static; }
}

@media (max-width: 900px) {
    .vertical-scroll-nav { display: none; }
}

@media (max-width: 768px) {
    .nav-links {
        display: none;
        position: absolute;
        top: 100%; left: 0; right: 0;
        background: var(--bg);
        flex-direction: column;
        align-items: stretch;
        padding: 8px 24px 18px;
        gap: 0;
        border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow);
    }
    .nav-links.open { display: flex; }
    .nav-link {
        display: block;
        padding: 14px 0;
        border-bottom: 1px solid var(--line);
        font-size: 1.05rem;
    }
    .nav-links li:last-child .nav-link { border-bottom: none; }
    .nav-link::after { display: none; }
    .hamburger { display: flex; }
    .btn-label { display: none; }
    .mode-btn-text { display: none; }
    .mode-btn { padding: 6px 10px; }

    .hero-split-layout, .hero-stats, .story-grid, .manifesto-grid, .essays-grid, .initiatives-grid, .projects-grid, .contact-links-grid, .form-row {
        grid-template-columns: 1fr;
    }
    .hero-title { font-size: 2.3rem; }
    .story-card, .contact-card-main, .project-card { padding: 24px; }
    .btn-submit { width: 100%; }
    .back-to-top-btn { display: none; }
    .constellation-canvas { opacity: 0.55; }
    .toast-notification { left: 16px; right: 16px; bottom: 16px; }
    .hero-emblem-img { width: 180px; height: 180px; }
    .emblem-glow-ring { width: 190px; height: 190px; }
}

/* ==========================================================================
   Rich Chromatic Palette, Iridescent Borders & Graphic Accents
   ========================================================================== */

/* Iridescent Multi-Hue Card Highlights */
.project-card:hover, .essay-card:hover, .now-featured:hover, .initiative-highlight:hover {
    border-color: rgba(216, 180, 110, 0.6);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(216, 180, 110, 0.14);
}

/* Layered Substrate Blueprint Ribbons (Earthcall) */
.stack-list li {
    position: relative;
    padding-left: 14px;
    border-left: 3px solid transparent;
    transition: all var(--ease);
}
.stack-list li:hover {
    background: rgba(255, 255, 255, 0.02);
    transform: translateX(4px);
}
.stack-list li:nth-child(1) { border-left-color: #f59e0b; } /* Person - Celestial Amber */
.stack-list li:nth-child(2) { border-left-color: #a855f7; } /* Ontology - Royal Violet */
.stack-list li:nth-child(3) { border-left-color: #06b6d4; } /* Laws - Electric Cyan */
.stack-list li:nth-child(4) { border-left-color: #10b981; } /* OntoMath - Spring Emerald */
.stack-list li:nth-child(5) { border-left-color: #6366f1; } /* Singularity - Deep Indigo */
.stack-list li:nth-child(6) { border-left-color: #d4b06a; } /* Vessel - Radiant Gold */

/* Color-Coded Semantic Category Badges */
[data-category="ontology"] .essay-tag {
    color: #c084fc;
    background: rgba(168, 85, 247, 0.12);
    border: 1px solid rgba(168, 85, 247, 0.35);
    padding: 3px 10px;
    border-radius: 999px;
}
[data-category="narrative"] .essay-tag {
    color: #fb7185;
    background: rgba(244, 63, 94, 0.12);
    border: 1px solid rgba(244, 63, 94, 0.35);
    padding: 3px 10px;
    border-radius: 999px;
}
[data-category="reflections"] .essay-tag {
    color: #34d399;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.35);
    padding: 3px 10px;
    border-radius: 999px;
}

[data-category="robotics"] .project-role {
    color: #2dd4bf;
}
[data-category="systems"] .project-role {
    color: #f59e0b;
}
[data-category="tools"] .project-role {
    color: #a78bfa;
}

/* Light Mode Semantic Badge & Role Contrast */
[data-theme="light"] [data-category="ontology"] .essay-tag {
    color: #7e22ce;
    background: rgba(126, 34, 206, 0.08);
    border-color: rgba(126, 34, 206, 0.28);
}
[data-theme="light"] [data-category="narrative"] .essay-tag {
    color: #be123c;
    background: rgba(190, 18, 60, 0.08);
    border-color: rgba(190, 18, 60, 0.28);
}
[data-theme="light"] [data-category="reflections"] .essay-tag {
    color: #047857;
    background: rgba(4, 120, 87, 0.08);
    border-color: rgba(4, 120, 87, 0.28);
}

[data-theme="light"] [data-category="robotics"] .project-role {
    color: #0f766e;
}
[data-theme="light"] [data-category="systems"] .project-role {
    color: #b45309;
}
[data-theme="light"] [data-category="tools"] .project-role {
    color: #6d28d9;
}

/* Initiative Emblems & Heraldic Accents */
.initiative-card:nth-child(1) .initiative-badge {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.35);
    padding: 3px 10px;
    border-radius: 999px;
}
.initiative-card:nth-child(2) .initiative-badge {
    color: #fb7185;
    background: rgba(251, 113, 133, 0.12);
    border: 1px solid rgba(251, 113, 133, 0.35);
    padding: 3px 10px;
    border-radius: 999px;
}
.initiative-card:nth-child(3) .initiative-badge {
    color: #2dd4bf;
    background: rgba(45, 212, 191, 0.12);
    border: 1px solid rgba(45, 212, 191, 0.35);
    padding: 3px 10px;
    border-radius: 999px;
}

[data-theme="light"] .initiative-card:nth-child(1) .initiative-badge {
    color: #b45309;
    background: rgba(180, 83, 9, 0.08);
    border-color: rgba(180, 83, 9, 0.28);
}
[data-theme="light"] .initiative-card:nth-child(2) .initiative-badge {
    color: #be123c;
    background: rgba(190, 18, 60, 0.08);
    border-color: rgba(190, 18, 60, 0.28);
}
[data-theme="light"] .initiative-card:nth-child(3) .initiative-badge {
    color: #0f766e;
    background: rgba(15, 118, 110, 0.08);
    border-color: rgba(15, 118, 110, 0.28);
}

/* ==========================================================================
   Article Drafting Studio & Authoring Environment
   ========================================================================== */

.studio-body-page {
    background-color: var(--bg);
    color: var(--ink);
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.studio-navbar {
    height: 62px;
    background: color-mix(in srgb, var(--bg-elev) 88%, transparent);
    border-bottom: 1px solid var(--line);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    z-index: 1000;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.studio-nav-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.studio-nav-left, .studio-nav-center, .studio-nav-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.studio-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--muted);
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: var(--bg-card);
    transition: all var(--ease);
}
.studio-back-link:hover {
    color: var(--gold);
    border-color: var(--gold);
    background: var(--glow);
}

.studio-nav-sep {
    color: var(--dim);
    font-size: 0.9rem;
}

.studio-brand-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--ink);
    font-family: var(--font-serif);
}

.studio-status-pill, .studio-metrics-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-mono);
    font-size: 0.76rem;
    background: var(--bg-card);
    border: 1px solid var(--line);
    padding: 4px 12px;
    border-radius: 999px;
    color: var(--dim);
    backdrop-filter: blur(10px);
}

.status-indicator-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--teal);
    box-shadow: 0 0 8px var(--teal);
    transition: background 0.3s ease;
}
.status-indicator-dot.unsaved {
    background: #f59e0b;
    box-shadow: 0 0 8px #f59e0b;
}

.metric-dot {
    color: var(--dim);
}

.studio-view-toggle {
    display: inline-flex;
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 3px;
    gap: 2px;
}

.view-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: none;
    background: transparent;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    cursor: pointer;
    transition: all var(--ease);
}
.view-btn:hover {
    color: var(--ink);
    background: rgba(216, 180, 110, 0.08);
}
.view-btn.active {
    background: var(--gold);
    color: #0c0b08;
    font-weight: 700;
    box-shadow: 0 2px 8px var(--glow);
}

.dropdown-wrapper {
    position: relative;
}

.studio-dropdown-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    background: var(--bg-elev);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
    padding: 6px;
    min-width: 240px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 3px;
    backdrop-filter: blur(16px);
}
.studio-dropdown-menu[hidden] {
    display: none;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    background: transparent;
    color: var(--ink);
    font-size: 0.85rem;
    font-weight: 500;
    text-align: left;
    border-radius: 6px;
    cursor: pointer;
    transition: background var(--ease), color var(--ease);
}
.dropdown-item:hover {
    background: var(--glow);
    color: var(--gold);
}

/* Studio Workspace & Layout */
.studio-main-workspace {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.studio-meta-panel {
    background: color-mix(in srgb, var(--bg-card) 95%, transparent);
    border-bottom: 1px solid var(--line);
    padding: 12px 24px;
    flex-shrink: 0;
    backdrop-filter: blur(16px);
}

.studio-meta-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.meta-row {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    width: 100%;
}

.meta-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.meta-field-title { flex: 1.4; }
.meta-field-category { width: 310px; }
.meta-field-subtitle { flex: 1.4; }
.meta-field-slug { flex: 0.9; }
.meta-field-author { width: 170px; }
.meta-field-excerpt { flex: 1.5; }
.meta-field-tags { flex: 1; }

.meta-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--dim);
    font-weight: 600;
}

.studio-title-input {
    font-family: var(--font-serif);
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--ink);
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 7px 14px;
    outline: none;
    transition: border-color var(--ease), box-shadow var(--ease);
    width: 100%;
}
.studio-title-input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--glow);
}

.studio-text-input, .studio-select-input {
    font-family: var(--font-sans);
    font-size: 0.86rem;
    color: var(--ink);
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 6px 12px;
    outline: none;
    transition: border-color var(--ease), box-shadow var(--ease);
    width: 100%;
}
.studio-text-input:focus, .studio-select-input:focus {
    border-color: var(--gold);
    box-shadow: 0 0 0 3px var(--glow);
}
.studio-mono-input {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--teal);
}

/* Split Pane Layout */
.studio-split-layout {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
}

.studio-pane {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height: 100%;
}

.studio-editor-pane {
    border-right: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg) 75%, transparent);
    backdrop-filter: blur(12px);
}

.studio-toolbar {
    background: var(--bg-elev);
    border-bottom: 1px solid var(--line);
    padding: 7px 16px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

.toolbar-group {
    display: flex;
    align-items: center;
    gap: 4px;
}
.toolbar-sep {
    width: 1px;
    height: 18px;
    background: var(--line);
    margin: 0 3px;
}

.tool-btn {
    background: var(--bg-card);
    border: 1px solid var(--line);
    color: var(--ink);
    padding: 4px 9px;
    border-radius: 5px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--ease);
    font-family: var(--font-sans);
}
.tool-btn:hover {
    border-color: var(--gold);
    background: var(--glow);
    color: var(--gold);
}
.tool-btn-danger:hover {
    border-color: #ef4444 !important;
    background: rgba(239, 68, 68, 0.12) !important;
    color: #ef4444 !important;
}

.editor-textarea-wrapper {
    flex: 1;
    display: flex;
    padding: 20px 24px;
    overflow: hidden;
}

.studio-textarea {
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    resize: none;
    font-family: var(--font-serif);
    font-size: 1.12rem;
    line-height: 1.8;
    color: var(--ink);
    overflow-y: auto;
    tab-size: 4;
}

#studio-body {
    position: absolute;
    top: 20px; left: 24px; right: 24px; bottom: 20px;
    width: calc(100% - 48px);
    height: calc(100% - 40px);
    color: transparent; /* Makes text invisible */
    caret-color: var(--ink); /* Keeps cursor visible */
    z-index: 2;
    background: transparent;
}
#studio-body::placeholder {
    color: var(--muted);
}

#syntax-layer {
    position: absolute;
    top: 20px; left: 24px; right: 24px; bottom: 20px;
    width: calc(100% - 48px);
    height: calc(100% - 40px);
    z-index: 1;
    color: var(--ink);
    pointer-events: none;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-y: hidden; /* Hide scrollbar here, controlled by textarea */
}

/* Syntax Highlighting Colors */
.md-h1, .md-h2, .md-h3, .md-h4 { color: var(--gold); font-weight: 700; }
.md-bold { font-weight: 700; color: var(--teal); }
.md-italic { font-style: italic; color: var(--muted); }
.md-code { font-family: var(--font-mono); color: var(--teal); background: rgba(13, 117, 109, 0.1); border-radius: 4px; }
.md-link { color: var(--gold-2); text-decoration: underline; }
.md-quote { color: var(--dim); border-left: 2px solid var(--gold); padding-left: 12px; }
.md-bullet { color: var(--gold); font-weight: 700; }

/* Preview Pane */
.studio-preview-pane {
    background: color-mix(in srgb, var(--bg-card) 60%, transparent);
    overflow: hidden;
}

.preview-scroll-container {
    flex: 1;
    overflow-y: auto;
    padding: 36px 44px 60px;
}

.preview-article-frame {
    max-width: 800px;
    margin: 0 auto;
}

.preview-hero {
    padding: 0 0 24px 0;
}

.drop-cap {
    float: left;
    font-family: var(--font-serif);
    font-size: 4rem;
    line-height: 0.8;
    padding-top: 4px;
    padding-right: 12px;
    padding-bottom: 2px;
    color: var(--gold);
    font-weight: 700;
}

/* View Mode Toggles */
.studio-split-layout.view-editor {
    grid-template-columns: 1fr;
}
.studio-split-layout.view-editor .studio-preview-pane {
    display: none;
}

.studio-split-layout.view-preview {
    grid-template-columns: 1fr;
}
.studio-split-layout.view-preview .studio-editor-pane {
    display: none;
}

/* Zen Mode */
body.zen-mode .studio-navbar,
body.zen-mode .studio-meta-panel,
body.zen-mode .studio-preview-pane {
    display: none !important;
}
body.zen-mode .studio-split-layout {
    grid-template-columns: 1fr !important;
}
body.zen-mode .studio-editor-pane {
    border-right: none;
    max-width: 900px;
    margin: 0 auto;
    background: transparent;
    backdrop-filter: none;
}

/* Drafts Drawer */
.drafts-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(8px);
    z-index: 2100;
}
.drafts-drawer-backdrop[hidden] {
    display: none;
}

.drafts-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(440px, 92vw);
    background: var(--bg-elev);
    border-left: 1px solid var(--line-strong);
    box-shadow: -10px 0 45px rgba(0, 0, 0, 0.65);
    z-index: 2200;
    display: flex;
    flex-direction: column;
    padding: 24px;
    animation: drawerIn 0.25s ease-out;
}
.drafts-drawer[hidden] {
    display: none;
}
@keyframes drawerIn {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

.drawer-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}
.drawer-title-group h3 {
    font-family: var(--font-serif);
    font-size: 1.35rem;
    color: var(--gold);
}
.drawer-subtitle {
    font-size: 0.78rem;
    color: var(--dim);
}

.btn-block {
    width: 100%;
}

.drawer-list-wrapper {
    flex: 1;
    overflow-y: auto;
    margin-top: 16px;
    padding-right: 4px;
}

.drafts-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.draft-item-card {
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: all var(--ease);
    cursor: pointer;
}
.draft-item-card:hover {
    border-color: var(--gold);
    transform: translateX(-3px);
    box-shadow: 0 4px 16px var(--glow);
}
.draft-item-card.active {
    border-color: var(--gold);
    background: var(--glow);
}

.draft-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}
.draft-card-title {
    font-family: var(--font-serif);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--ink);
    line-height: 1.3;
}

.draft-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--dim);
    font-family: var(--font-mono);
}

.draft-actions-row {
    display: flex;
    gap: 6px;
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
}

/* Templates Modal */
.modal-dialog-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(10px);
    z-index: 2500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.modal-dialog-backdrop[hidden] {
    display: none;
}

.modal-dialog-box {
    background: var(--bg-elev);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    width: min(800px, 95vw);
    max-height: 90vh;
    overflow-y: auto;
    padding: 32px;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
}

.modal-dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.modal-dialog-header h3 {
    font-family: var(--font-serif);
    font-size: 1.5rem;
    color: var(--gold);
}
.modal-lead {
    font-size: 0.95rem;
    color: var(--muted);
}

.templates-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 20px;
}

.template-card {
    background: var(--bg-card);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: all var(--ease);
}
.template-card:hover {
    border-color: var(--gold);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--glow);
}
.template-icon {
    font-size: 1.6rem;
}
.template-card h4 {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--ink);
}
.template-card p {
    font-size: 0.88rem;
    color: var(--muted);
    line-height: 1.5;
    flex: 1;
}

@media (max-width: 1000px) {
    .studio-meta-panel .meta-row {
        flex-direction: column;
        align-items: stretch;
    }
    .meta-field-category, .meta-field-author {
        width: 100%;
    }
    .studio-split-layout {
        grid-template-columns: 1fr;
    }
    .templates-grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
    .constellation-canvas { display: none; }
}

/* =========================================================================
   Project Technical Spec Slide-Out Drawers & Interactive Visualizers
   ========================================================================= */
.project-drawer-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    justify-content: flex-end;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.project-drawer-modal:not([hidden]) {
    display: flex;
}
.project-drawer-modal.open {
    opacity: 1;
    pointer-events: auto;
}
.project-drawer-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.project-drawer-content {
    position: relative;
    width: 100%;
    max-width: 820px;
    height: 100%;
    background: var(--bg-elev);
    border-left: 1px solid var(--line-strong);
    box-shadow: -25px 0 80px rgba(0, 0, 0, 0.85), 0 0 40px var(--glow);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}
.project-drawer-modal.open .project-drawer-content {
    transform: translateX(0);
}
.drawer-header {
    padding: 24px 32px 20px;
    border-bottom: 1px solid var(--line);
    background: rgba(18, 16, 14, 0.88);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    position: sticky;
    top: 0;
    z-index: 10;
}
[data-theme="light"] .drawer-header {
    background: rgba(253, 252, 248, 0.92);
}
.drawer-tag {
    font-family: var(--font-mono);
    font-size: 0.76rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--teal);
    margin-bottom: 6px;
    display: inline-block;
}
.drawer-title {
    font-family: var(--font-heading);
    font-size: 1.85rem;
    line-height: 1.2;
    color: var(--ink);
    margin-bottom: 4px;
}
.drawer-role {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--gold);
}
.drawer-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}
.drawer-close-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: var(--bg-card);
    color: var(--ink);
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--ease);
}
.drawer-close-btn:hover {
    border-color: #ef4444;
    color: #ef4444;
    transform: scale(1.05);
}
.drawer-body {
    flex: 1;
    padding: 28px 32px 48px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.drawer-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.drawer-section-title {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--teal);
    display: flex;
    align-items: center;
    gap: 8px;
}
.drawer-section-title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--line);
}
.drawer-lead-text {
    font-size: 1.02rem;
    line-height: 1.68;
    color: var(--ink);
}

/* Interactive Simulator Container */
.drawer-sim-box {
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    background: rgba(8, 7, 6, 0.75);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: relative;
    overflow: hidden;
}
[data-theme="light"] .drawer-sim-box {
    background: rgba(245, 243, 238, 0.88);
}
.drawer-sim-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}
.drawer-sim-status {
    font-family: var(--font-mono);
    font-size: 0.82rem;
    padding: 4px 12px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.status-separated {
    background: rgba(110, 231, 216, 0.14);
    border: 1px solid var(--teal);
    color: var(--teal);
}
.status-colliding {
    background: rgba(239, 68, 68, 0.18);
    border: 1px solid #ef4444;
    color: #f87171;
}
.drawer-sim-canvas-wrapper {
    position: relative;
    width: 100%;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--line);
    background: #09090b;
}
.drawer-sim-canvas {
    display: block;
    width: 100%;
    height: 250px;
    touch-action: none;
    cursor: grab;
}
.drawer-sim-canvas:active {
    cursor: grabbing;
}
.drawer-sim-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: 0.82rem;
}
.drawer-sim-btn {
    padding: 6px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: var(--bg-card);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    cursor: pointer;
    transition: all var(--ease);
}
.drawer-sim-btn:hover, .drawer-sim-btn.active {
    border-color: var(--teal);
    color: var(--teal);
    background: rgba(110, 231, 216, 0.08);
}
.drawer-sim-slider-group {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 0.8rem;
}
.drawer-sim-slider {
    accent-color: var(--teal);
    cursor: pointer;
}

/* Spec Metrics Grid */
.drawer-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}
.drawer-metric-card {
    padding: 16px;
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    border: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.drawer-metric-val {
    font-family: var(--font-mono);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--gold);
}
.drawer-metric-label {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Refusal / Architecture Cards */
.drawer-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
}
.drawer-info-card {
    padding: 16px;
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    border: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.drawer-info-card h4 {
    font-size: 0.95rem;
    color: var(--teal);
    font-family: var(--font-mono);
}
.drawer-info-card p {
    font-size: 0.88rem;
    color: var(--muted);
    line-height: 1.5;
}

/* Tree Ontology Inspector */
.ontology-tree-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}
.ontology-tree-btn {
    padding: 6px 14px;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--bg-card);
    color: var(--ink);
    cursor: pointer;
    transition: all var(--ease);
}
.ontology-tree-btn.active, .ontology-tree-btn:hover {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(216, 180, 110, 0.12);
}
.ontology-detail-box {
    padding: 18px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: rgba(10, 10, 12, 0.65);
    font-family: var(--font-mono);
    font-size: 0.86rem;
    line-height: 1.6;
    color: var(--ink);
}
[data-theme="light"] .ontology-detail-box {
    background: rgba(240, 238, 232, 0.85);
}

/* Project Card Actions & Triggers */
.proj-card-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
[data-theme="light"] .proj-card-actions {
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.proj-spec-btn {
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* =========================================================================
   Global Command Palette (Cmd + K) Styling
   ========================================================================= */
.palette-modal {
    position: fixed;
    inset: 0;
    z-index: 11000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 14vh;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.palette-modal:not([hidden]) {
    display: flex;
}
.palette-modal.open {
    opacity: 1;
    pointer-events: auto;
}
.palette-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.palette-window {
    position: relative;
    width: 100%;
    max-width: 650px;
    background: var(--bg-elev);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-md);
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.85), 0 0 40px var(--glow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: modalIn 0.18s ease-out;
}
.palette-input-line {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--line);
    gap: 12px;
    background: rgba(18, 16, 14, 0.9);
}
[data-theme="light"] .palette-input-line {
    background: rgba(253, 252, 248, 0.95);
}
.palette-search-icon {
    font-size: 1.1rem;
    color: var(--teal);
}
.palette-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    font-family: var(--font-body);
    font-size: 1.05rem;
    color: var(--ink);
}
.palette-kbd-badge {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    padding: 3px 7px;
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    border: 1px solid var(--line);
    color: var(--muted);
}
.palette-results {
    max-height: 380px;
    overflow-y: auto;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.palette-group-title {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 8px 12px 4px;
}
.palette-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid transparent;
}
.palette-item.active, .palette-item:hover {
    background: rgba(110, 231, 216, 0.12);
    border-color: rgba(110, 231, 216, 0.3);
}
.palette-item-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.palette-item-icon {
    font-size: 1.1rem;
}
.palette-item-text {
    font-size: 0.92rem;
    color: var(--ink);
    font-weight: 500;
}
.palette-item-desc {
    font-size: 0.78rem;
    color: var(--muted);
    font-family: var(--font-mono);
}
.palette-footer {
    padding: 10px 18px;
    background: var(--term-head);
    border-top: 1px solid var(--line);
    display: flex;
    gap: 16px;
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--muted);
}
.palette-footer kbd {
    background: var(--bg-card);
    padding: 2px 5px;
    border-radius: 3px;
    border: 1px solid var(--line);
    color: var(--ink);
}

/* =========================================================================
   Print-Ready LaTeX Résumé / CV Layout
   ========================================================================= */
.cv-printable-body {
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.cv-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cv-section-title {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--teal);
    border-bottom: 1px solid var(--line);
    padding-bottom: 4px;
    margin: 0;
}
.cv-entry {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cv-entry h4 {
    font-family: var(--font-heading);
    font-size: 1.15rem;
    color: var(--ink);
    margin: 0;
}
.cv-meta {
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--gold);
    margin: 0;
}
.cv-entry p {
    font-size: 0.92rem;
    color: var(--muted);
    line-height: 1.55;
    margin: 0;
}

@media print {
    body * { visibility: hidden; }
    #resume-modal, #resume-modal * { visibility: visible; }
    #resume-modal {
        position: absolute;
        inset: 0;
        width: 100%;
        background: #fff !important;
        color: #000 !important;
        display: block !important;
        opacity: 1 !important;
        padding: 0 !important;
    }
    .project-drawer-content {
        max-width: 100% !important;
        box-shadow: none !important;
        border: none !important;
        background: #fff !important;
        color: #000 !important;
    }
    .drawer-header {
        border-bottom: 2px solid #000 !important;
        background: #fff !important;
        color: #000 !important;
    }
    .drawer-actions, .project-drawer-backdrop { display: none !important; }
    .cv-section-title { color: #000 !important; border-bottom: 1px solid #000 !important; }
    .cv-entry h4, .cv-meta, .cv-entry p { color: #000 !important; }
}


/* Global Strict Hidden Rule & Modal Safeguards */
[hidden],
.project-drawer-modal[hidden],
.palette-modal[hidden],
.terminal-modal[hidden],
#resume-modal[hidden],
.drafts-drawer[hidden],
.drafts-drawer-backdrop[hidden],
.modal-dialog-backdrop[hidden] {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

/* Ensure interactive elements always receive pointer events */
.btn, .nav-link, .mode-btn, .filter-btn, .proj-spec-btn, .icon-btn, .hamburger, .v-nav-link, .copy-email-btn, .proj-link-btn {
    position: relative;
    z-index: 2;
    pointer-events: auto;
    cursor: pointer;
}

/* =========================================================================
   Library Celestial Constellation Mode & Interactive Graph HUD
   ========================================================================= */
.constellation-view-container {
    height: 740px;
    width: 100%;
    position: relative;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: radial-gradient(circle at center, rgba(14, 13, 16, 0.96) 0%, rgba(8, 7, 10, 0.98) 100%);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    margin-bottom: 44px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6), 0 0 30px var(--glow);
    display: flex;
    flex-direction: column;
    user-select: none;
}
[data-theme="light"] .constellation-view-container {
    background: radial-gradient(circle at center, rgba(250, 248, 242, 0.97) 0%, rgba(240, 237, 228, 0.98) 100%);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12), 0 0 30px rgba(216, 180, 110, 0.1);
}
.constellation-main-canvas {
    width: 100%;
    height: 100%;
    display: block;
    cursor: grab;
}
.constellation-main-canvas:active {
    cursor: grabbing;
}

/* Top HUD Toolbar */
.constellation-hud-top {
    position: absolute;
    top: 14px;
    left: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    z-index: 10;
    pointer-events: none;
    flex-wrap: wrap;
}
.constellation-filter-group {
    display: flex;
    align-items: center;
    gap: 6px;
    pointer-events: auto;
    background: rgba(18, 16, 20, 0.75);
    padding: 4px 6px;
    border-radius: 999px;
    border: 1px solid var(--line);
    backdrop-filter: blur(12px);
}
[data-theme="light"] .constellation-filter-group {
    background: rgba(255, 255, 255, 0.85);
}
.c-filter-chip {
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--ease);
    white-space: nowrap;
}
.c-filter-chip:hover {
    color: var(--ink);
    background: rgba(255, 255, 255, 0.06);
}
.c-filter-chip.active {
    background: rgba(110, 231, 216, 0.14);
    border-color: var(--teal);
    color: var(--teal);
    font-weight: 600;
}
.constellation-hud-right {
    display: flex;
    align-items: center;
    gap: 10px;
    pointer-events: auto;
}
.constellation-search-box {
    display: flex;
    align-items: center;
    background: rgba(18, 16, 20, 0.75);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 4px 12px;
    gap: 6px;
    backdrop-filter: blur(12px);
    transition: border-color var(--ease);
}
[data-theme="light"] .constellation-search-box {
    background: rgba(255, 255, 255, 0.85);
}
.constellation-search-box:focus-within {
    border-color: var(--gold);
}
.c-search-icon {
    font-size: 0.85rem;
    color: var(--muted);
}
.c-search-input {
    background: transparent;
    border: none;
    outline: none;
    font-family: var(--font-mono);
    font-size: 0.8rem;
    color: var(--ink);
    width: 170px;
    transition: width 0.2s ease;
}
.c-search-input:focus {
    width: 220px;
}
.c-search-clear {
    background: transparent;
    border: none;
    color: var(--muted);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0 2px;
}
.c-search-clear:hover {
    color: var(--ink);
}
.constellation-layout-selector {
    display: flex;
    align-items: center;
    background: rgba(18, 16, 20, 0.75);
    padding: 4px;
    border-radius: 999px;
    border: 1px solid var(--line);
    backdrop-filter: blur(12px);
    gap: 3px;
}
[data-theme="light"] .constellation-layout-selector {
    background: rgba(255, 255, 255, 0.85);
}
.c-layout-btn {
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.76rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--ease);
}
.c-layout-btn:hover {
    color: var(--ink);
}
.c-layout-btn.active {
    background: rgba(216, 180, 110, 0.16);
    border-color: var(--gold);
    color: var(--gold);
    font-weight: 600;
}

/* Star Tooltip */
.constellation-star-tooltip {
    position: absolute;
    display: none;
    padding: 10px 14px;
    background: var(--bg-elev);
    border: 1px solid var(--gold);
    border-radius: var(--radius-sm);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6), 0 0 20px var(--glow);
    pointer-events: none;
    max-width: 280px;
    z-index: 25;
    font-family: var(--font-mono);
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--ink);
    transform: translate(-50%, -120%);
    transition: opacity 0.15s ease;
}

/* Interactive Star Inspector Card */
.constellation-inspector-card {
    position: absolute;
    bottom: 56px;
    right: 18px;
    width: 340px;
    max-width: calc(100% - 36px);
    background: rgba(18, 16, 22, 0.92);
    border: 1px solid var(--gold);
    border-radius: var(--radius-md);
    padding: 18px 20px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 30px var(--glow);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: 10px;
    animation: modalIn 0.22s ease-out;
}
[data-theme="light"] .constellation-inspector-card {
    background: rgba(253, 252, 248, 0.95);
}
.constellation-inspector-card[hidden] {
    display: none !important;
}
.inspector-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.inspector-tags-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.inspector-cat-badge {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(110, 231, 216, 0.12);
    border: 1px solid var(--teal);
    color: var(--teal);
}
.inspector-read-time {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--muted);
}
.inspector-close-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--muted);
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--ease);
}
.inspector-close-btn:hover {
    color: #ef4444;
    border-color: #ef4444;
}
.inspector-title {
    font-family: var(--font-heading);
    font-size: 1.22rem;
    line-height: 1.3;
    color: var(--ink);
    margin: 0;
}
.inspector-subtitle {
    font-size: 0.86rem;
    color: var(--gold);
    line-height: 1.4;
    margin: 0;
}
.inspector-excerpt {
    font-size: 0.84rem;
    color: var(--muted);
    line-height: 1.5;
    margin: 0;
    max-height: 70px;
    overflow-y: auto;
}
.inspector-concepts-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 6px;
    border-top: 1px solid var(--line);
}
.inspector-section-label {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted);
}
.inspector-concepts-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.inspector-concept-tag {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    padding: 2px 7px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--line);
    color: #cbd5e1;
    cursor: pointer;
    transition: all var(--ease);
}
.inspector-concept-tag:hover {
    border-color: var(--teal);
    color: var(--teal);
}
.inspector-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid var(--line);
}
.inspector-read-btn {
    flex: 1;
    text-align: center;
    font-size: 0.82rem;
    padding: 7px 12px;
}
.inspector-focus-btn {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    padding: 7px 12px;
}

/* Bottom HUD Toolbar */
.constellation-hud-bottom {
    position: absolute;
    bottom: 12px;
    left: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    z-index: 10;
    pointer-events: none;
    flex-wrap: wrap;
}
.constellation-stats {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(18, 16, 20, 0.75);
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px solid var(--line);
    backdrop-filter: blur(12px);
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--muted);
    pointer-events: auto;
}
[data-theme="light"] .constellation-stats {
    background: rgba(255, 255, 255, 0.85);
}
.constellation-stats strong {
    color: var(--teal);
}
.constellation-view-controls {
    display: flex;
    align-items: center;
    gap: 5px;
    pointer-events: auto;
    background: rgba(18, 16, 20, 0.75);
    padding: 4px 6px;
    border-radius: 999px;
    border: 1px solid var(--line);
    backdrop-filter: blur(12px);
}
[data-theme="light"] .constellation-view-controls {
    background: rgba(255, 255, 255, 0.85);
}
.c-zoom-btn {
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.76rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--ease);
}
.c-zoom-btn:hover {
    color: var(--ink);
    background: rgba(255, 255, 255, 0.08);
}
.c-zoom-btn.active {
    color: var(--gold);
    border-color: rgba(216, 180, 110, 0.3);
    background: rgba(216, 180, 110, 0.1);
}


/* ==========================================================================
   Personal Portfolio — Evidence-Dense Engineering Presentation
   ========================================================================== */

.hero-opportunity-note {
    max-width: 760px;
    margin: -12px 0 28px;
    padding: 12px 16px;
    border-left: 2px solid var(--teal);
    background: linear-gradient(90deg, rgba(110, 231, 216, 0.08), transparent);
    color: var(--muted);
    font-size: 0.94rem;
    line-height: 1.6;
}
.hero-opportunity-note strong { color: var(--ink); }

.compact-header { margin-bottom: 32px; }
.subsection-title {
    font-size: clamp(1.8rem, 3.4vw, 2.45rem);
}

.portfolio-snapshot-section {
    padding-top: 42px;
    padding-bottom: 96px;
}
.portfolio-snapshot-grid,
.evidence-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
.portfolio-snapshot-card,
.evidence-card,
.depth-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    background: linear-gradient(160deg, var(--bg-card), color-mix(in srgb, var(--bg-elev) 86%, transparent));
    backdrop-filter: blur(16px);
    border-radius: var(--radius-lg);
    padding: 26px;
    transition: transform var(--ease), border-color var(--ease), box-shadow var(--ease);
}
.portfolio-snapshot-card:hover,
.evidence-card:hover,
.depth-card:hover {
    transform: translateY(-4px);
    border-color: var(--line-strong);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28), 0 0 22px var(--glow);
}
.snapshot-index,
.evidence-label,
.depth-kicker,
.project-eyebrow {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 10px;
}
.portfolio-snapshot-card h3,
.evidence-card h4,
.depth-card h3 {
    font-family: var(--font-serif);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.25;
    color: var(--ink);
    margin-bottom: 10px;
}
.portfolio-snapshot-card h3 { font-size: 1.28rem; }
.evidence-card h4 { font-size: 1.22rem; }
.depth-card h3 { font-size: 1.34rem; }
.portfolio-snapshot-card p,
.evidence-card p,
.depth-card p {
    color: var(--muted);
    font-size: 0.94rem;
    line-height: 1.65;
}
.snapshot-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 18px;
}
.snapshot-tags span {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--teal);
    border: 1px solid color-mix(in srgb, var(--teal) 32%, transparent);
    background: color-mix(in srgb, var(--teal) 8%, transparent);
    padding: 3px 8px;
    border-radius: 999px;
}

.earthcall-evidence {
    margin: 66px 0 52px;
    padding: 34px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(145deg, rgba(216, 180, 110, 0.06), rgba(110, 231, 216, 0.035)),
        var(--bg-card);
}
.evidence-card {
    border-radius: var(--radius-md);
    padding: 22px;
    background: color-mix(in srgb, var(--bg-elev) 86%, transparent);
}

/* Earthcall Manifestation Integrity / Cathedral Rendering Arc */
.manifestation-showcase {
    margin: 58px 0 64px;
    padding: clamp(24px, 4vw, 44px);
    border: 1px solid color-mix(in srgb, #c084fc 24%, var(--line));
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 88% 10%, rgba(192,132,252,0.13), transparent 31%),
        radial-gradient(circle at 12% 88%, rgba(110,231,216,0.10), transparent 34%),
        linear-gradient(145deg, rgba(216,180,110,0.055), transparent 58%),
        var(--bg-card);
    overflow: hidden;
}
[data-theme="light"] .manifestation-showcase {
    background:
        radial-gradient(circle at 88% 10%, rgba(126,34,206,0.08), transparent 31%),
        radial-gradient(circle at 12% 88%, rgba(13,148,136,0.08), transparent 34%),
        linear-gradient(145deg, rgba(180,128,43,0.05), transparent 58%),
        var(--bg-card);
}
.manifestation-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
    gap: 30px;
    align-items: stretch;
}
.manifestation-hero h3 {
    margin: 8px 0 14px;
    max-width: 900px;
    font-family: var(--font-serif);
    font-size: clamp(2rem, 4vw, 3.15rem);
    line-height: 1.02;
    letter-spacing: -0.035em;
}
.manifestation-lede {
    max-width: 860px;
    color: var(--muted);
    font-size: 1.02rem;
    line-height: 1.74;
}
.manifestation-equation {
    margin-top: 24px;
    padding: 16px 18px;
    border-left: 2px solid #c084fc;
    background: color-mix(in srgb, var(--bg-elev) 84%, transparent);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.manifestation-equation span,
.manifestation-equation small {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--muted);
}
.manifestation-equation span {
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: #c084fc;
}
.manifestation-equation code {
    white-space: normal;
    overflow-wrap: anywhere;
    color: var(--teal);
    font-family: var(--font-mono);
    font-size: clamp(0.9rem, 1.8vw, 1.15rem);
    font-weight: 650;
}
.manifestation-person-witness {
    padding: 26px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(160deg, rgba(216,180,110,0.08), rgba(192,132,252,0.045)),
        color-mix(in srgb, var(--bg-elev) 90%, transparent);
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.manifestation-witness-kicker,
.manifestation-card-kicker {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
}
.manifestation-person-witness blockquote {
    margin: 14px 0 16px;
    font-family: var(--font-serif);
    font-size: clamp(1.5rem, 3vw, 2.15rem);
    line-height: 1.12;
    color: var(--ink);
}
.manifestation-person-witness p {
    color: var(--muted);
    line-height: 1.65;
    font-size: 0.92rem;
}
.manifestation-person-witness em { color: var(--ink); }

.manifestation-arc {
    margin: 34px 0 22px;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.manifestation-arc article {
    min-height: 232px;
    padding: 19px;
    border-right: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg-card) 92%, transparent);
}
.manifestation-arc article:last-child { border-right: 0; }
.manifestation-arc article > span {
    display: inline-block;
    margin-bottom: 16px;
    color: var(--dim);
    font: 0.68rem var(--font-mono);
    letter-spacing: 0.12em;
}
.manifestation-arc h4 {
    margin-bottom: 9px;
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: 1.1rem;
    line-height: 1.18;
}
.manifestation-arc p {
    color: var(--muted);
    font-size: 0.84rem;
    line-height: 1.58;
}
.manifestation-arc article.is-live {
    background:
        linear-gradient(160deg, rgba(110,231,216,0.12), rgba(192,132,252,0.05)),
        var(--bg-card);
    box-shadow: inset 0 2px 0 var(--teal);
}
.manifestation-arc article.is-live > span,
.manifestation-arc article.is-live h4 { color: var(--teal); }

.manifestation-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.manifestation-code-card {
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--bg-elev) 88%, transparent);
}
.manifestation-code-card.frontier {
    border-top: 2px solid #c084fc;
}
.manifestation-code-card h4 {
    margin: 8px 0 11px;
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: 1.42rem;
}
.manifestation-code-card p {
    color: var(--muted);
    font-size: 0.91rem;
    line-height: 1.65;
}
.manifestation-code-flow {
    margin: 18px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}
.manifestation-code-flow code {
    padding: 6px 8px;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--bg-card);
    color: var(--teal);
    font-family: var(--font-mono);
    font-size: 0.76rem;
}
.manifestation-code-flow span {
    color: var(--gold);
    font-family: var(--font-mono);
}

.manifestation-thesis {
    margin-top: 20px;
    padding: 22px;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-md);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    align-items: center;
}
.manifestation-thesis strong {
    display: block;
    margin: 6px 0 8px;
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: 1.55rem;
}
.manifestation-thesis p {
    max-width: 820px;
    color: var(--muted);
    line-height: 1.65;
    font-size: 0.9rem;
}
.manifestation-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
}
.manifestation-links a {
    color: var(--teal);
    font-family: var(--font-mono);
    font-size: 0.74rem;
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--teal) 36%, transparent);
}
.manifestation-links a:hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}

@media (max-width: 1040px) {
    .manifestation-arc {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .manifestation-arc article {
        border-bottom: 1px solid var(--line);
    }
}
@media (max-width: 860px) {
    .manifestation-hero,
    .manifestation-details,
    .manifestation-thesis {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 620px) {
    .manifestation-arc {
        grid-template-columns: 1fr;
    }
    .manifestation-arc article {
        min-height: 0;
        border-right: 0;
    }
    .manifestation-links a {
        overflow-wrap: anywhere;
    }
}

/* Law-Direct / Self-Refining Relevance Showcase */
.relevance-showcase {
    margin: 54px 0 58px;
    padding: clamp(24px, 4vw, 42px);
    border: 1px solid color-mix(in srgb, var(--teal) 28%, var(--line));
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 88% 8%, rgba(110, 231, 216, 0.12), transparent 32%),
        radial-gradient(circle at 10% 92%, rgba(216, 180, 110, 0.10), transparent 34%),
        linear-gradient(145deg, rgba(8, 12, 14, 0.88), color-mix(in srgb, var(--bg-card) 92%, transparent));
    overflow: hidden;
    position: relative;
}
[data-theme="light"] .relevance-showcase {
    background:
        radial-gradient(circle at 88% 8%, rgba(13, 148, 136, 0.10), transparent 32%),
        radial-gradient(circle at 10% 92%, rgba(180, 128, 43, 0.08), transparent 34%),
        var(--bg-card);
}
.relevance-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
    gap: 34px;
    align-items: start;
}
.relevance-hero h3 {
    margin: 8px 0 14px;
    font-family: var(--font-serif);
    font-size: clamp(2rem, 4vw, 3.2rem);
    line-height: 1.02;
    letter-spacing: -0.035em;
}
.relevance-lede {
    max-width: 820px;
    color: var(--muted);
    font-size: 1.02rem;
    line-height: 1.72;
}
.relevance-lede strong { color: var(--ink); }
.relevance-equation {
    margin-top: 24px;
    padding: 16px 18px;
    border-left: 2px solid var(--teal);
    background: color-mix(in srgb, var(--bg-elev) 82%, transparent);
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.relevance-equation span,
.relevance-equation small {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.72rem;
}
.relevance-equation code {
    color: var(--teal);
    font-family: var(--font-mono);
    font-size: clamp(1rem, 2vw, 1.32rem);
    font-weight: 700;
}
.relevance-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.relevance-metric {
    min-height: 116px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--bg-elev) 88%, transparent);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 6px;
}
.relevance-metric strong {
    font-family: var(--font-mono);
    color: var(--gold);
    font-size: clamp(1.05rem, 2.3vw, 1.5rem);
    letter-spacing: -0.04em;
}
.relevance-metric span {
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.35;
}
.relevance-flow {
    margin: 34px 0;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.relevance-step {
    min-height: 126px;
    padding: 16px;
    border-right: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg-card) 91%, transparent);
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.relevance-step:last-child { border-right: 0; }
.relevance-step > span {
    color: var(--dim);
    font: 0.68rem var(--font-mono);
    letter-spacing: 0.1em;
}
.relevance-step strong {
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 0.86rem;
}
.relevance-step small {
    color: var(--muted);
    line-height: 1.45;
    font-size: 0.76rem;
}
.relevance-step.is-live {
    background: linear-gradient(160deg, rgba(110, 231, 216, 0.12), rgba(110, 231, 216, 0.025));
    box-shadow: inset 0 2px 0 var(--teal);
}
.relevance-step.is-live strong { color: var(--teal); }
.relevance-step.is-frontier {
    background: linear-gradient(160deg, rgba(216, 180, 110, 0.12), rgba(216, 180, 110, 0.025));
    box-shadow: inset 0 2px 0 var(--gold);
}
.relevance-step.is-frontier strong { color: var(--gold); }
.relevance-frontier {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.relevance-frontier-card {
    padding: 26px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--bg-card) 92%, transparent);
}
.relevance-frontier-card.implemented { border-top: 2px solid var(--teal); }
.relevance-frontier-card.frontier { border-top: 2px solid var(--gold); }
.relevance-card-kicker {
    display: inline-block;
    margin-bottom: 9px;
    color: var(--dim);
    font: 0.7rem var(--font-mono);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
.relevance-frontier-card h4 {
    margin-bottom: 9px;
    font-family: var(--font-serif);
    font-size: 1.45rem;
}
.relevance-frontier-card p,
.relevance-frontier-card li {
    color: var(--muted);
    line-height: 1.62;
    font-size: 0.91rem;
}
.relevance-frontier-card ul {
    margin: 15px 0 0 18px;
    display: grid;
    gap: 8px;
}
.relevance-frontier-card li::marker { color: var(--teal); }
.relevance-frontier-card.frontier li::marker { color: var(--gold); }
.relevance-frontier-card li strong { color: var(--ink); }
.relevance-thesis {
    margin-top: 20px;
    padding: 18px 20px;
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius-md);
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 12px 16px;
    align-items: center;
    color: var(--muted);
}
.relevance-thesis strong {
    color: var(--gold);
    font-family: var(--font-mono);
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}
.relevance-thesis a {
    color: var(--teal);
    font-family: var(--font-mono);
    font-size: 0.76rem;
    white-space: nowrap;
}
.relevance-thesis a:hover { color: var(--gold); }

@media (max-width: 960px) {
    .relevance-hero,
    .relevance-frontier {
        grid-template-columns: 1fr;
    }
    .relevance-flow {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .relevance-step { border-bottom: 1px solid var(--line); }
    .relevance-thesis { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .relevance-metrics,
    .relevance-flow {
        grid-template-columns: 1fr;
    }
    .relevance-step { border-right: 0; }
    .relevance-thesis a { white-space: normal; }
}

.project-card-featured {
    grid-column: span 2;
    background:
        linear-gradient(145deg, rgba(216, 180, 110, 0.09), rgba(110, 231, 216, 0.035)),
        var(--bg-card);
    border-color: var(--line-strong);
}
.project-card-featured .project-description {
    max-width: 780px;
    font-size: 1.01rem;
}
.project-eyebrow { margin-bottom: 5px; }
[data-category~="creative"] .project-role { color: #fb7185; }
[data-category~="systems"] .project-role { color: #f59e0b; }
[data-category~="robotics"] .project-role { color: #2dd4bf; }
[data-category~="tools"] .project-role { color: #a78bfa; }

.engineering-depth-section {
    padding-top: 72px;
    border-top: 1px solid var(--line);
}
.depth-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}
.depth-card {
    min-height: 230px;
    padding: 30px;
}
.depth-card:nth-child(1) { border-top: 2px solid #f59e0b; }
.depth-card:nth-child(2) { border-top: 2px solid #2dd4bf; }
.depth-card:nth-child(3) { border-top: 2px solid #a78bfa; }
.depth-card:nth-child(4) { border-top: 2px solid #60a5fa; }

[data-theme="light"] [data-category~="creative"] .project-role { color: #be123c; }
[data-theme="light"] [data-category~="systems"] .project-role { color: #b45309; }
[data-theme="light"] [data-category~="robotics"] .project-role { color: #0f766e; }
[data-theme="light"] [data-category~="tools"] .project-role { color: #6d28d9; }

@media (max-width: 1100px) {
    .portfolio-snapshot-grid,
    .evidence-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .project-card-featured { grid-column: span 2; }
}

@media (max-width: 768px) {
    .portfolio-snapshot-section { padding-top: 20px; }
    .portfolio-snapshot-grid,
    .evidence-grid,
    .depth-grid {
        grid-template-columns: 1fr;
    }
    .project-card-featured { grid-column: span 1; }
    .earthcall-evidence { padding: 22px; }
    .hero-opportunity-note { margin-top: -6px; }
}

.portfolio-snapshot-card::before,
.evidence-card::before,
.depth-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(
        420px circle at var(--mouse-x, -999px) var(--mouse-y, -999px),
        rgba(216, 180, 110, 0.14),
        rgba(110, 231, 216, 0.045),
        transparent 46%
    );
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
    z-index: 1;
}
.portfolio-snapshot-card:hover::before,
.evidence-card:hover::before,
.depth-card:hover::before { opacity: 1; }

.portfolio-snapshot-card > *,
.evidence-card > *,
.depth-card > * {
    position: relative;
    z-index: 2;
}


/* ==========================================================================
   Earthcall Law Execution Explorer
   ========================================================================== */
.ontomath-evaluator-wrapper {
    margin-top: 52px;
}
.ontology-law-demo {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.ontology-demo-toolbar {
    align-items: flex-start;
    gap: 16px;
}
.ontology-demo-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.7fr) minmax(260px, 0.8fr);
    gap: 18px;
    align-items: stretch;
}
.ontology-canvas-panel {
    min-height: 390px;
}
.ontology-canvas-panel .drawer-sim-canvas {
    width: 100%;
    height: auto;
    min-height: 360px;
}
.ontology-canvas-hint {
    margin-top: 8px;
    color: var(--dim);
    font-family: var(--font-mono);
    font-size: 0.72rem;
    line-height: 1.5;
}
.ontology-being-inspector {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--bg-elev) 92%, transparent);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.ontology-inspector-heading {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
}
.ontology-inspector-heading strong {
    font-family: var(--font-serif);
    font-size: 1.25rem;
}
.ontology-inspector-heading code {
    color: var(--teal);
    font-size: 0.75rem;
}
.ontology-property-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ontology-property-list > div {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
}
.ontology-property-list dt {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--muted);
}
.ontology-property-list dd {
    font-family: var(--font-mono);
    font-size: 0.74rem;
    color: var(--gold);
    text-align: right;
}
.ontology-slider-label {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 0.82rem;
    color: var(--muted);
}
.ontology-signal-slider {
    width: 100%;
    accent-color: var(--gold);
}
.ontology-signal-slider:disabled {
    opacity: 0.35;
}
.ontology-inspector-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.ontology-inspector-note {
    margin-top: auto;
    color: var(--dim);
    font-size: 0.78rem;
    line-height: 1.55;
}
.ontology-trace-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.ontology-trace-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 14px;
    background: color-mix(in srgb, var(--bg-card) 92%, transparent);
    min-height: 135px;
}
.ontology-trace-card span {
    display: block;
    margin-bottom: 7px;
    font-family: var(--font-mono);
    font-size: 0.66rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold);
}
.ontology-trace-card strong {
    display: block;
    margin-bottom: 7px;
    font-family: var(--font-mono);
    font-size: 0.76rem;
    line-height: 1.45;
    color: var(--ink);
}
.ontology-trace-card p {
    color: var(--dim);
    font-size: 0.75rem;
    line-height: 1.5;
}
.ontology-event-log-wrap {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: rgba(5, 6, 9, 0.6);
    overflow: hidden;
}
[data-theme="light"] .ontology-event-log-wrap {
    background: rgba(255,255,255,0.6);
}
.ontology-event-log-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--muted);
}
.ontology-event-log {
    list-style: none;
    margin: 0;
    padding: 10px 14px;
    min-height: 110px;
    max-height: 190px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ontology-event-log-item {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    line-height: 1.45;
    color: var(--muted);
}
.ontology-event-log-item.change { color: #38bdf8; }
.ontology-event-log-item.write { color: #d8b46e; }
.ontology-event-log-item.event { color: #c084fc; }
.ontology-law-source {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.ontology-law-source > div {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 14px;
    background: color-mix(in srgb, var(--bg-card) 92%, transparent);
}
.ontology-law-source code {
    display: block;
    margin-top: 5px;
    white-space: normal;
    color: var(--ink);
    font-size: 0.74rem;
    line-height: 1.5;
}

@media (max-width: 980px) {
    .ontology-demo-layout,
    .ontology-law-source {
        grid-template-columns: 1fr;
    }
    .ontology-trace-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 640px) {
    .ontology-trace-grid {
        grid-template-columns: 1fr;
    }
    .ontology-demo-toolbar {
        align-items: stretch;
    }
    .ontology-canvas-panel .drawer-sim-canvas {
        min-height: 300px;
    }
}

/* ==========================================================================
   Earthcall Engineering Atlas + Live Bridge
   ========================================================================== */
.earthcall-atlas,
.earthcall-measured-wins,
.earthcall-proof-story {
    margin-top: 72px;
}
.earthcall-atlas-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.earthcall-atlas-card {
    position: relative;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 24px;
    background:
        linear-gradient(145deg, rgba(216,180,110,0.04), rgba(110,231,216,0.025)),
        var(--bg-card);
}
.earthcall-atlas-card h4 {
    margin: 6px 0 10px;
    font-family: var(--font-serif);
    font-size: 1.35rem;
    color: var(--ink);
}
.earthcall-atlas-card p {
    color: var(--muted);
    line-height: 1.65;
}
.atlas-status {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    padding: 4px 9px;
    font-family: var(--font-mono);
    font-size: 0.65rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid var(--line);
}
.atlas-status.implemented { color: var(--teal); }
.atlas-status.frontier { color: var(--gold); }
.atlas-status.principle { color: #c084fc; }
.atlas-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 16px;
    color: var(--dim);
    font-family: var(--font-mono);
    font-size: 0.72rem;
}
.atlas-proof code {
    color: var(--ink);
    background: var(--bg-elev);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 3px 6px;
}

.earthcall-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
.earthcall-metric-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 22px;
    background: var(--bg-card);
}
.metric-before,
.metric-after,
.metric-arrow {
    font-family: var(--font-mono);
}
.metric-before {
    color: var(--dim);
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}
.metric-arrow {
    color: var(--muted);
    margin: 0 5px;
}
.metric-after {
    color: var(--teal);
    font-size: 1.18rem;
}
.earthcall-metric-card h4 {
    margin: 14px 0 8px;
    font-family: var(--font-serif);
    color: var(--ink);
}
.earthcall-metric-card p {
    color: var(--muted);
    font-size: 0.88rem;
    line-height: 1.55;
}

.earthcall-proof-story {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
    gap: 28px;
    align-items: center;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    padding: 30px;
    background:
        radial-gradient(circle at 85% 20%, rgba(168,85,247,0.08), transparent 35%),
        var(--bg-card);
}
.proof-story-copy h3 {
    font-family: var(--font-serif);
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    color: var(--ink);
    margin: 8px 0 16px;
}
.proof-story-copy p {
    color: var(--muted);
    line-height: 1.7;
    margin-bottom: 12px;
}
.proof-story-diagram {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
}
.proof-story-diagram > div {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    background: var(--bg-elev);
}
.proof-story-diagram span {
    display: block;
    color: var(--dim);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}
.proof-story-diagram strong {
    display: block;
    margin-top: 4px;
    color: var(--ink);
}
.proof-story-diagram .proof-arrow {
    text-align: center;
    color: var(--gold);
    font-size: 1.1rem;
}
.proof-story-diagram .proof-result {
    border-color: color-mix(in srgb, var(--teal) 48%, var(--line));
}

.ontology-live-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--bg-elev);
}
.ontology-live-bar > div:first-child {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ontology-mode-badge,
.ontology-zone-badge {
    font-family: var(--font-mono);
}
.ontology-mode-badge {
    font-size: 0.72rem;
    font-weight: 600;
}
.ontology-mode-badge.demo { color: var(--gold); }
.ontology-mode-badge.live { color: var(--teal); }
.ontology-zone-badge {
    color: var(--muted);
    font-size: 0.7rem;
}
.ontology-live-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.is-hidden { display: none !important; }

.ontology-live-law-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.ontology-live-law-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 16px;
    background: var(--bg-card);
}
.ontology-live-law-card strong,
.ontology-live-law-card code,
.ontology-live-law-card p {
    display: block;
}
.ontology-live-law-card strong {
    color: var(--ink);
    margin-bottom: 4px;
}
.ontology-live-law-card code {
    color: var(--teal);
    margin-bottom: 10px;
    font-size: 0.72rem;
}
.ontology-live-law-card p {
    color: var(--muted);
    line-height: 1.5;
    font-size: 0.8rem;
    margin-top: 5px;
}
.ontology-empty-live {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.78rem;
}
.ontology-live-footnote {
    color: var(--dim);
    font-size: 0.76rem;
    line-height: 1.55;
    border-left: 2px solid var(--teal);
    padding-left: 10px;
}

@media (max-width: 1100px) {
    .earthcall-metrics-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 820px) {
    .earthcall-atlas-grid,
    .earthcall-proof-story,
    .ontology-live-law-list {
        grid-template-columns: 1fr;
    }
    .ontology-live-bar {
        align-items: flex-start;
        flex-direction: column;
    }
}
@media (max-width: 640px) {
    .earthcall-metrics-grid {
        grid-template-columns: 1fr;
    }
    .earthcall-proof-story {
        padding: 20px;
    }
}

.earthcall-frontier {
    margin-top: 72px;
    padding-top: 54px;
    border-top: 1px solid var(--line);
}
.earthcall-frontier-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
.earthcall-frontier-grid article {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 19px;
    background: color-mix(in srgb, var(--bg-card) 92%, transparent);
}
.frontier-state {
    display: inline-flex;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: 0.64rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.frontier-state.active {
    color: #60a5fa;
    border-color: rgba(96,165,250,0.32);
    background: rgba(96,165,250,0.07);
}
.frontier-state.guarded {
    color: #fb7185;
    border-color: rgba(251,113,133,0.32);
    background: rgba(251,113,133,0.07);
}
.earthcall-frontier-grid h4 {
    margin: 11px 0 8px;
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: 1.04rem;
}
.earthcall-frontier-grid p {
    color: var(--muted);
    font-size: 0.84rem;
    line-height: 1.58;
}
.atlas-proof {
    align-items: center;
}
.atlas-proof a {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--teal);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--teal) 35%, transparent);
}
.atlas-proof a:hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
@media (max-width: 1080px) {
    .earthcall-frontier-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}
@media (max-width: 640px) {
    .earthcall-frontier-grid {
        grid-template-columns: 1fr;
    }
    .atlas-proof a {
        width: 100%;
        margin-left: 0;
        margin-top: 4px;
    }
}

/* ==========================================================================
   Earthcall Engineering Dossier
   ========================================================================== */
.earthcall-atlas,
.earthcall-measured-wins,
.earthcall-proof-story,
.earthcall-frontier {
    margin-top: 72px;
}
.earthcall-atlas-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}
.earthcall-atlas-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 24px;
    background:
        linear-gradient(150deg, color-mix(in srgb, var(--bg-elev) 94%, transparent), color-mix(in srgb, var(--bg-card) 86%, transparent));
    transition: transform var(--ease), border-color var(--ease), box-shadow var(--ease);
}
.earthcall-atlas-card:hover {
    transform: translateY(-3px);
    border-color: var(--line-strong);
    box-shadow: 0 18px 42px rgba(0,0,0,0.24), 0 0 20px var(--glow);
}
.earthcall-atlas-card h4 {
    margin: 8px 0 10px;
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: 1.26rem;
}
.earthcall-atlas-card p {
    color: var(--muted);
    line-height: 1.66;
    font-size: 0.92rem;
}
.atlas-status,
.frontier-state {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 0.64rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 4px 8px;
    border: 1px solid var(--line);
}
.atlas-status.implemented {
    color: var(--teal);
    border-color: color-mix(in srgb, var(--teal) 38%, transparent);
    background: color-mix(in srgb, var(--teal) 8%, transparent);
}
.atlas-status.frontier {
    color: #60a5fa;
    border-color: rgba(96,165,250,0.35);
    background: rgba(96,165,250,0.08);
}
.atlas-status.principle {
    color: #c084fc;
    border-color: rgba(192,132,252,0.35);
    background: rgba(192,132,252,0.08);
}
.atlas-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    color: var(--dim);
}
.atlas-proof code {
    font-size: 0.69rem;
    color: var(--gold);
    background: color-mix(in srgb, var(--gold) 7%, transparent);
    border: 1px solid color-mix(in srgb, var(--gold) 18%, transparent);
    border-radius: 5px;
    padding: 3px 6px;
}

.earthcall-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 14px;
}
.earthcall-metric-card {
    min-height: 240px;
    border: 1px solid var(--line);
    border-top: 2px solid var(--teal);
    border-radius: var(--radius-lg);
    padding: 22px;
    background: linear-gradient(160deg, rgba(110,231,216,0.055), var(--bg-card));
}
.metric-before,
.metric-arrow,
.metric-after {
    font-family: var(--font-mono);
    display: inline-block;
    vertical-align: baseline;
}
.metric-before {
    color: var(--dim);
    font-size: 0.8rem;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}
.metric-arrow {
    color: var(--muted);
    margin: 0 5px;
}
.metric-after {
    color: var(--teal);
    font-size: 1.28rem;
}
.earthcall-metric-card h4 {
    margin: 18px 0 8px;
    font-family: var(--font-serif);
    font-size: 1.18rem;
    color: var(--ink);
}
.earthcall-metric-card p {
    color: var(--muted);
    line-height: 1.6;
    font-size: 0.87rem;
}

.earthcall-proof-story {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
    gap: 28px;
    align-items: center;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    padding: 32px;
    background:
        radial-gradient(circle at 90% 10%, rgba(216,180,110,0.09), transparent 34%),
        linear-gradient(145deg, rgba(110,231,216,0.035), var(--bg-card));
}
.proof-story-copy h3 {
    margin: 10px 0 14px;
    font-family: var(--font-serif);
    font-size: clamp(1.55rem, 3vw, 2.15rem);
    color: var(--ink);
}
.proof-story-copy p {
    color: var(--muted);
    line-height: 1.72;
    margin-top: 10px;
}
.proof-story-diagram {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
}
.proof-story-diagram > div {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--bg-elev) 91%, transparent);
    padding: 13px 15px;
}
.proof-story-diagram span:not(.proof-arrow) {
    display: block;
    margin-bottom: 4px;
    color: var(--gold);
    font-family: var(--font-mono);
    font-size: 0.64rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.proof-story-diagram strong {
    color: var(--ink);
    font-size: 0.9rem;
}
.proof-arrow {
    text-align: center;
    color: var(--teal);
    font-family: var(--font-mono);
}
.proof-story-diagram .proof-result {
    border-color: color-mix(in srgb, var(--teal) 42%, transparent);
    background: color-mix(in srgb, var(--teal) 8%, var(--bg-elev));
}

.earthcall-frontier {
    border-top: 1px solid var(--line);
    padding-top: 54px;
}
.earthcall-frontier-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 14px;
}
.earthcall-frontier-grid article {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 19px;
    background: color-mix(in srgb, var(--bg-card) 92%, transparent);
}
.frontier-state.active {
    color: #60a5fa;
    border-color: rgba(96,165,250,0.32);
    background: rgba(96,165,250,0.07);
}
.frontier-state.guarded {
    color: #fb7185;
    border-color: rgba(251,113,133,0.32);
    background: rgba(251,113,133,0.07);
}
.earthcall-frontier-grid h4 {
    margin: 11px 0 8px;
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: 1.04rem;
}
.earthcall-frontier-grid p {
    color: var(--muted);
    font-size: 0.84rem;
    line-height: 1.58;
}

/* Live Earthcall bridge state */
.ontology-live-status {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}
#ontomath-source-badge {
    transition: border-color 180ms ease, color 180ms ease, background 180ms ease;
}
.ontology-law-demo:has(#ontomath-source-badge:not(:empty)) .drawer-sim-btn:disabled {
    cursor: not-allowed;
    opacity: 0.48;
}
.drawer-sim-btn.read-only {
    border-style: dashed;
}
.ontology-signal-slider:disabled {
    cursor: not-allowed;
}
@media (max-width: 768px) {
    .ontology-live-status {
        justify-content: flex-start;
    }
}

.is-hidden { display: none !important; }
.ontology-live-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--bg-elev) 90%, transparent);
}
.ontology-live-bar > div:first-child {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
}
.ontology-mode-badge,
.ontology-zone-badge {
    font-family: var(--font-mono);
    font-size: 0.68rem;
}
.ontology-mode-badge {
    border-radius: 999px;
    padding: 5px 9px;
    border: 1px solid var(--line);
    letter-spacing: 0.06em;
}
.ontology-mode-badge.demo {
    color: var(--gold);
    border-color: color-mix(in srgb, var(--gold) 36%, transparent);
    background: color-mix(in srgb, var(--gold) 8%, transparent);
}
.ontology-mode-badge.live {
    color: var(--teal);
    border-color: color-mix(in srgb, var(--teal) 42%, transparent);
    background: color-mix(in srgb, var(--teal) 9%, transparent);
    box-shadow: 0 0 16px color-mix(in srgb, var(--teal) 14%, transparent);
}
.ontology-zone-badge { color: var(--muted); }
.ontology-live-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.ontology-live-law-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 10px;
}
.ontology-live-law-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 14px;
    background: color-mix(in srgb, var(--bg-card) 93%, transparent);
}
.ontology-live-law-card strong,
.ontology-live-law-card code {
    display: block;
}
.ontology-live-law-card strong {
    color: var(--ink);
    margin: 3px 0;
}
.ontology-live-law-card code {
    color: var(--teal);
    font-size: 0.7rem;
    margin-bottom: 8px;
}
.ontology-live-law-card p,
.ontology-empty-live {
    color: var(--muted);
    font-size: 0.76rem;
    line-height: 1.5;
    margin-top: 5px;
}
.ontology-live-footnote {
    color: var(--dim);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    line-height: 1.5;
    padding-top: 4px;
}

@media (max-width: 1080px) {
    .earthcall-metrics-grid,
    .earthcall-frontier-grid {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}
@media (max-width: 820px) {
    .earthcall-atlas-grid,
    .earthcall-proof-story,
    .ontology-live-law-list {
        grid-template-columns: 1fr;
    }
    .earthcall-proof-story { padding: 23px; }
    .ontology-live-bar {
        align-items: flex-start;
        flex-direction: column;
    }
}
@media (max-width: 620px) {
    .earthcall-metrics-grid,
    .earthcall-frontier-grid {
        grid-template-columns: 1fr;
    }
    .earthcall-atlas-card,
    .earthcall-metric-card {
        padding: 18px;
    }
}

.atlas-proof a {
    margin-left: auto;
    font-family: var(--font-mono);
    font-size: 0.68rem;
    color: var(--teal);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--teal) 35%, transparent);
}
.atlas-proof a:hover {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
@media (max-width: 620px) {
    .atlas-proof a {
        width: 100%;
        margin-left: 0;
        margin-top: 4px;
    }
}


/* ==========================================================================
   Longform Editorial Reading System
   Essays, story chapters, manifesto prose, and other text-first pages
   ========================================================================== */

.page-hero {
    position: relative;
    z-index: 1;
    padding: calc(var(--nav-height) + 78px) 0 70px;
    border-bottom: 1px solid var(--line);
    overflow: hidden;
}
.page-hero::before {
    content: "";
    position: absolute;
    width: min(760px, 72vw);
    height: min(420px, 48vw);
    left: 50%;
    top: 42%;
    transform: translate(-50%, -50%);
    background:
        radial-gradient(ellipse at center, color-mix(in srgb, var(--gold) 13%, transparent), transparent 62%),
        radial-gradient(ellipse at 65% 45%, color-mix(in srgb, var(--teal) 8%, transparent), transparent 60%);
    filter: blur(12px);
    pointer-events: none;
    opacity: .9;
}
.page-hero::after {
    content: "✦";
    position: absolute;
    left: 50%;
    bottom: -13px;
    transform: translateX(-50%);
    width: 34px;
    height: 26px;
    display: grid;
    place-items: center;
    color: var(--gold);
    font-size: .78rem;
    background: var(--bg);
    border: 1px solid var(--line-strong);
    border-radius: 999px;
}
.page-hero > .container {
    position: relative;
    z-index: 2;
}
.page-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 28px;
    color: var(--dim);
    font-family: var(--font-mono);
    font-size: .74rem;
    letter-spacing: .055em;
    text-transform: uppercase;
}
.page-breadcrumb a {
    color: var(--muted);
    transition: color var(--ease);
}
.page-breadcrumb a:hover { color: var(--gold); }
.page-breadcrumb-sep {
    color: var(--gold);
    opacity: .5;
}
.page-title {
    max-width: 920px;
    margin: 0;
    font-family: var(--font-heading);
    font-size: clamp(3rem, 6vw, 5.7rem);
    font-weight: 600;
    line-height: .99;
    letter-spacing: -.035em;
    text-wrap: balance;
}
.page-subtitle {
    max-width: 760px;
    margin-top: 20px;
    color: var(--muted);
    font-family: var(--font-serif);
    font-size: clamp(1.15rem, 2.1vw, 1.52rem);
    line-height: 1.55;
    text-wrap: pretty;
}
.page-hero .essay-meta {
    margin-bottom: 18px !important;
    padding: 0;
    border: 0;
}
.page-hero .essay-tag {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 11px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    background: color-mix(in srgb, var(--glow) 56%, transparent);
}
.page-hero .essay-read-time {
    color: var(--dim);
    letter-spacing: .035em;
}
.essay-author-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 24px !important;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: .9rem;
}
.essay-author-bar strong {
    color: var(--ink);
    font-weight: 650;
}
.essay-dot {
    color: var(--gold);
    opacity: .7;
}

/* The reading column is deliberately narrower than the page hero.
   Long lines make prose feel like documentation; this feels like a book. */
.essay-prose,
.longform-shell {
    width: min(100%, 760px);
    margin-inline: auto;
}
.essay-prose {
    position: relative;
    padding: 18px 0 12px;
    color: color-mix(in srgb, var(--ink) 88%, var(--muted));
    font-family: var(--font-serif);
    font-size: clamp(1.08rem, 1.35vw, 1.18rem);
    line-height: 1.82;
    letter-spacing: .002em;
}
.essay-prose::before,
.essay-prose::after {
    content: "";
    display: block;
    width: 82px;
    height: 1px;
    margin: 2px auto 42px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    box-shadow: 0 0 18px var(--glow);
}
.essay-prose::after {
    margin: 52px auto 8px;
}
.essay-prose p {
    margin: 0 0 1.48em;
    text-wrap: pretty;
}
.essay-prose > p:not(.lead-text):first-of-type::first-letter {
    float: left;
    margin: .11em .12em 0 0;
    color: var(--gold-2);
    font-family: var(--font-heading);
    font-size: 4.15em;
    font-weight: 600;
    line-height: .72;
    text-shadow: 0 0 28px var(--glow);
}
.essay-prose .lead-text {
    position: relative;
    margin: 0 0 2.25em !important;
    padding: 0 0 1.45em 24px;
    border-left: 2px solid var(--gold);
    color: var(--ink) !important;
    font-family: var(--font-serif);
    font-size: clamp(1.22rem, 2vw, 1.48rem) !important;
    font-weight: 500 !important;
    line-height: 1.65 !important;
}
.essay-prose .lead-text::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: min(240px, 44%);
    height: 1px;
    background: linear-gradient(90deg, var(--gold), transparent);
}
.essay-prose h2,
.essay-prose h3,
.essay-prose h4,
.essay-prose h5 {
    color: var(--ink);
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.14;
    letter-spacing: -.018em;
    text-wrap: balance;
}
.essay-prose h2 {
    margin: 2.7em 0 .8em;
    font-size: clamp(2rem, 4vw, 3rem);
}
.essay-prose h3 {
    margin: 2.45em 0 .75em;
    font-size: clamp(1.72rem, 3vw, 2.3rem);
}
.essay-prose h4 {
    position: relative;
    margin: 2.65em 0 .8em;
    padding-top: 1.05em;
    font-size: clamp(1.48rem, 2.4vw, 1.92rem);
}
.essay-prose h4::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 54px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--gold), var(--teal));
    box-shadow: 0 0 14px var(--glow);
}
.essay-prose h5 {
    margin: 2em 0 .65em;
    font-size: 1.25rem;
}
.essay-prose strong {
    color: var(--ink);
    font-weight: 680;
}
.essay-prose em { color: color-mix(in srgb, var(--gold-2) 76%, var(--ink)); }
.essay-prose a:not(.btn) {
    color: var(--teal);
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
    text-decoration-color: color-mix(in srgb, var(--teal) 45%, transparent);
    transition: color var(--ease), text-decoration-color var(--ease);
}
.essay-prose a:not(.btn):hover {
    color: var(--gold-2);
    text-decoration-color: var(--gold);
}
.essay-prose blockquote,
.chapter-block blockquote {
    position: relative;
    margin: 2.35em -32px;
    padding: 30px 34px 30px 42px;
    border: 1px solid var(--line);
    border-left: 2px solid var(--gold);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    background:
        linear-gradient(105deg, color-mix(in srgb, var(--glow) 72%, transparent), transparent 68%),
        color-mix(in srgb, var(--bg-card) 74%, transparent);
    box-shadow: 0 20px 55px rgba(0,0,0,.12);
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: clamp(1.28rem, 2.4vw, 1.72rem);
    font-style: italic;
    line-height: 1.5;
    text-wrap: pretty;
}
.essay-prose blockquote::before,
.chapter-block blockquote::before {
    content: "“";
    position: absolute;
    left: 13px;
    top: 7px;
    color: var(--gold);
    font-family: Georgia, serif;
    font-size: 3.7rem;
    font-style: normal;
    line-height: 1;
    opacity: .42;
}
.essay-prose blockquote p { margin: 0; }
.essay-prose ul,
.essay-prose ol {
    margin: .4em 0 1.65em 1.15em;
    padding-left: .95em;
}
.essay-prose li {
    margin: .48em 0;
    padding-left: .25em;
}
.essay-prose li::marker { color: var(--gold); }
.essay-divider {
    position: relative;
    width: 100%;
    height: 34px;
    margin: 3.3em 0 2.6em;
    border: 0;
    overflow: visible;
}
.essay-divider::before {
    content: "✦  ·  ✧  ·  ✦";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--gold);
    font-family: var(--font-mono);
    font-size: .78rem;
    letter-spacing: .35em;
    opacity: .8;
}
.essay-prose img {
    display: block;
    width: min(100%, 940px);
    height: auto;
    margin: 2.35em auto;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
}
.essay-prose table {
    width: 100%;
    margin: 2em 0;
    border-collapse: collapse;
    font-family: var(--font-sans);
    font-size: .94rem;
    line-height: 1.55;
}
.essay-prose th,
.essay-prose td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    text-align: left;
}
.essay-prose th {
    color: var(--gold);
    font-family: var(--font-mono);
    font-size: .78rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Existing essay reflection cards become a deliberate closing chamber. */
.essay-prose > .essay-divider + div,
.essay-prose > hr.essay-divider + div {
    position: relative;
    overflow: hidden;
    border-color: var(--line-strong) !important;
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--teal) 9%, transparent), transparent 45%),
        linear-gradient(135deg, color-mix(in srgb, var(--glow) 48%, transparent), transparent 56%),
        var(--bg-card) !important;
    box-shadow: 0 18px 45px rgba(0,0,0,.16);
}
.essay-prose > .essay-divider + div::before,
.essay-prose > hr.essay-divider + div::before {
    content: "AFTERWORD // CONTINUE THE DIALOGUE";
    display: block;
    margin-bottom: 13px;
    color: var(--teal);
    font-family: var(--font-mono);
    font-size: .67rem;
    letter-spacing: .11em;
}

/* Story + manifesto: chapter pages should feel ceremonial rather than card-like. */
.longform-shell {
    counter-reset: longform-chapter;
}
.chapter-block {
    counter-increment: longform-chapter;
    position: relative;
    margin: 0 0 74px;
    padding: 38px 44px 42px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--bg-card) 86%, transparent), color-mix(in srgb, var(--bg) 70%, transparent));
    box-shadow: 0 18px 50px rgba(0,0,0,.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.chapter-block::before {
    content: "CHAPTER " counter(longform-chapter, upper-roman);
    display: block;
    margin-bottom: 12px;
    color: var(--gold);
    font-family: var(--font-mono);
    font-size: .67rem;
    font-weight: 600;
    letter-spacing: .16em;
}
.chapter-block::after {
    content: "";
    position: absolute;
    left: 44px;
    right: 44px;
    bottom: -38px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--line-strong), transparent);
}
.chapter-block:last-of-type::after { display: none; }
.chapter-block > h3:first-child {
    margin: 0 0 22px;
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 3.4vw, 2.55rem);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -.02em;
    text-wrap: balance;
}
.chapter-block > p {
    margin: 0 0 1.35em;
    color: color-mix(in srgb, var(--ink) 86%, var(--muted));
    font-family: var(--font-serif);
    font-size: clamp(1.06rem, 1.35vw, 1.16rem);
    line-height: 1.8;
    text-wrap: pretty;
}
.chapter-block > p:first-of-type {
    color: var(--ink);
    font-size: clamp(1.14rem, 1.6vw, 1.27rem);
}
.chapter-block > p:first-of-type::first-letter {
    float: left;
    margin: .12em .12em 0 0;
    color: var(--gold-2);
    font-family: var(--font-heading);
    font-size: 3.7em;
    font-weight: 600;
    line-height: .72;
}
.chapter-block strong { color: var(--ink); }
.chapter-block .principles-banner {
    margin-top: 30px !important;
}

/* Manifesto pull quote gets the visual gravity of an opening invocation. */
.manifesto-pull-quote {
    position: relative;
    margin: 0 auto 64px;
    padding: 38px 44px 40px;
    border: 1px solid var(--line-strong);
    border-left: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 10% 10%, color-mix(in srgb, var(--gold) 13%, transparent), transparent 44%),
        radial-gradient(circle at 92% 84%, color-mix(in srgb, var(--teal) 8%, transparent), transparent 42%),
        var(--bg-card);
    box-shadow: 0 24px 65px rgba(0,0,0,.15), 0 0 34px color-mix(in srgb, var(--glow) 34%, transparent);
    text-align: center;
}
.manifesto-pull-quote::before {
    content: "✦";
    display: block;
    margin-bottom: 13px;
    color: var(--gold);
    font-style: normal;
    font-size: .95rem;
}
.manifesto-pull-quote::after {
    content: "DIMENSION OF THOUGHT // FOUNDATIONAL TEXT";
    display: block;
    margin-top: 18px;
    color: var(--dim);
    font-family: var(--font-mono);
    font-size: .64rem;
    font-style: normal;
    letter-spacing: .12em;
}

/* Fine-grained reading comfort in light mode. */
[data-theme="light"] .chapter-block,
[data-theme="light"] .essay-prose blockquote,
[data-theme="light"] .chapter-block blockquote,
[data-theme="light"] .manifesto-pull-quote {
    box-shadow: 0 18px 45px rgba(76, 58, 28, .07);
}

@media (max-width: 768px) {
    .page-hero {
        padding-top: calc(var(--nav-height) + 52px);
        padding-bottom: 54px;
    }
    .page-title {
        font-size: clamp(2.55rem, 12vw, 4rem) !important;
        line-height: 1;
    }
    .page-subtitle {
        font-size: 1.12rem;
    }
    .page-hero .essay-meta,
    .essay-author-bar {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }
    .essay-dot { display: none; }
    .essay-prose {
        width: 100%;
        font-size: 1.04rem;
        line-height: 1.76;
    }
    .essay-prose blockquote,
    .chapter-block blockquote {
        margin-inline: 0;
        padding: 26px 24px 26px 34px;
    }
    .essay-prose .lead-text {
        padding-left: 18px;
    }
    .chapter-block {
        margin-bottom: 52px;
        padding: 28px 24px 30px;
    }
    .chapter-block::after {
        left: 24px;
        right: 24px;
        bottom: -27px;
    }
    .manifesto-pull-quote {
        padding: 30px 24px 32px;
        text-align: left;
    }
}

@media (max-width: 520px) {
    .page-breadcrumb {
        margin-bottom: 22px;
        font-size: .67rem;
    }
    .page-hero::after { display: none; }
    .essay-prose > p:not(.lead-text):first-of-type::first-letter,
    .chapter-block > p:first-of-type::first-letter {
        font-size: 3.35em;
    }
}

.manifesto-longform .chapter-block::before {
    content: "ARTICLE " counter(longform-chapter, upper-roman);
}


/* Manifesto Constitutional Axiom Triptych */
.principles-banner {
    position: relative;
    margin-top: 32px !important;
    padding: 34px 30px 30px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 14% 0%, color-mix(in srgb, var(--gold) 10%, transparent), transparent 38%),
        radial-gradient(circle at 90% 100%, color-mix(in srgb, var(--teal) 8%, transparent), transparent 42%),
        color-mix(in srgb, var(--bg-card) 88%, transparent);
    box-shadow: 0 22px 58px rgba(0,0,0,.14);
    overflow: hidden;
}
.principles-banner::before {
    content: "CONSTITUTIONAL AXIOMS";
    display: block;
    margin-bottom: 8px;
    color: var(--teal);
    font-family: var(--font-mono);
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .16em;
}
.principles-banner > h3 {
    margin: 0 0 26px !important;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 3vw, 2.45rem);
    font-weight: 600;
    letter-spacing: -.02em;
}
.principles-columns {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
.principles-columns::before {
    content: "";
    position: absolute;
    left: 8%;
    right: 8%;
    top: 34px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--line-strong), var(--gold), var(--line-strong), transparent);
    opacity: .6;
    pointer-events: none;
}
.principle-item {
    position: relative;
    z-index: 1;
    min-height: 250px;
    padding: 24px 22px 22px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background:
        linear-gradient(165deg, color-mix(in srgb, var(--bg-card) 94%, transparent), color-mix(in srgb, var(--bg) 82%, transparent));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
    transition: transform var(--ease), border-color var(--ease), box-shadow var(--ease), background var(--ease);
}
.principle-item:hover {
    transform: translateY(-5px);
    border-color: var(--line-strong);
    box-shadow: 0 18px 38px rgba(0,0,0,.18), 0 0 24px color-mix(in srgb, var(--glow) 30%, transparent);
    background:
        linear-gradient(165deg, color-mix(in srgb, var(--bg-card-hover) 94%, transparent), color-mix(in srgb, var(--bg) 78%, transparent));
}
.principle-num {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin-bottom: 22px;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: var(--bg-elev);
    color: var(--gold-2);
    font-family: var(--font-mono);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .06em;
    box-shadow: 0 0 0 7px color-mix(in srgb, var(--glow) 42%, transparent), 0 0 24px color-mix(in srgb, var(--glow) 46%, transparent);
}
.principle-item:nth-child(2) .principle-num {
    color: var(--teal);
    border-color: color-mix(in srgb, var(--teal) 48%, transparent);
    box-shadow: 0 0 0 7px color-mix(in srgb, var(--teal) 8%, transparent), 0 0 24px color-mix(in srgb, var(--teal) 18%, transparent);
}
.principle-item:nth-child(3) .principle-num {
    color: #c084fc;
    border-color: rgba(192,132,252,.38);
    box-shadow: 0 0 0 7px rgba(168,85,247,.07), 0 0 24px rgba(168,85,247,.14);
}
.principle-item h4 {
    margin: 0 0 12px;
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: clamp(1.35rem, 2vw, 1.68rem);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -.015em;
    text-wrap: balance;
}
.principle-item p {
    margin: 0 !important;
    color: var(--muted) !important;
    font-family: var(--font-serif) !important;
    font-size: 1.02rem !important;
    line-height: 1.68 !important;
    text-wrap: pretty;
}
.principle-item::after {
    content: "";
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 0;
    height: 2px;
    border-radius: 999px 999px 0 0;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    opacity: .55;
}
.principle-item:nth-child(2)::after {
    background: linear-gradient(90deg, transparent, var(--teal), transparent);
}
.principle-item:nth-child(3)::after {
    background: linear-gradient(90deg, transparent, #a855f7, transparent);
}
[data-theme="light"] .principle-item {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}
@media (max-width: 820px) {
    .principles-banner {
        padding: 28px 22px 24px;
    }
    .principles-columns {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .principles-columns::before {
        left: 23px;
        right: auto;
        top: 28px;
        bottom: 28px;
        width: 1px;
        height: auto;
        background: linear-gradient(180deg, transparent, var(--line-strong), var(--gold), var(--line-strong), transparent);
    }
    .principle-item {
        min-height: 0;
        padding: 20px 20px 22px 76px;
    }
    .principle-num {
        position: absolute;
        left: 20px;
        top: 20px;
        width: 40px;
        height: 40px;
        margin: 0;
    }
}


/* Constellation Visibility Tuning — translucent card hierarchy
   Keep content fully opaque; only soften the card surfaces so the living sky
   remains visible behind the interface. */

.stat-card,
.now-card,
.project-card,
.about-grid .pillar-card,
.skill-category-card,
.story-card,
.manifesto-card,
.essay-card,
.initiative-card {
    background: color-mix(in srgb, var(--bg-card) 80%, transparent);
}

.contact-item-card {
    background: color-mix(in srgb, var(--bg-elev) 84%, transparent);
}

.portfolio-snapshot-card,
.evidence-card {
    background:
        linear-gradient(
            160deg,
            color-mix(in srgb, var(--bg-card) 82%, transparent),
            color-mix(in srgb, var(--bg-elev) 72%, transparent)
        );
}

.depth-card {
    background:
        linear-gradient(
            160deg,
            color-mix(in srgb, var(--bg-card) 86%, transparent),
            color-mix(in srgb, var(--bg-elev) 78%, transparent)
        );
}

/* Long-form prose chambers need more reading contrast than summary cards. */
.chapter-block {
    background:
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--bg-card) 82%, transparent),
            color-mix(in srgb, var(--bg) 66%, transparent)
        );
}

.manifesto-pull-quote {
    background:
        radial-gradient(circle at 10% 10%, color-mix(in srgb, var(--gold) 13%, transparent), transparent 44%),
        radial-gradient(circle at 92% 84%, color-mix(in srgb, var(--teal) 8%, transparent), transparent 42%),
        color-mix(in srgb, var(--bg-card) 84%, transparent);
}

.principles-banner {
    background:
        radial-gradient(circle at 14% 0%, color-mix(in srgb, var(--gold) 10%, transparent), transparent 38%),
        radial-gradient(circle at 90% 100%, color-mix(in srgb, var(--teal) 8%, transparent), transparent 42%),
        color-mix(in srgb, var(--bg-card) 80%, transparent);
}

.principle-item {
    background:
        linear-gradient(
            165deg,
            color-mix(in srgb, var(--bg-card) 82%, transparent),
            color-mix(in srgb, var(--bg) 68%, transparent)
        );
}

.principle-item:hover {
    background:
        linear-gradient(
            165deg,
            color-mix(in srgb, var(--bg-card-hover) 90%, transparent),
            color-mix(in srgb, var(--bg) 74%, transparent)
        );
}

/* Contact and composition surfaces stay calmer and more opaque for legibility. */
.contact-card-main {
    background: color-mix(in srgb, var(--bg-card) 88%, transparent);
}

.form-group input,
.form-group select,
.form-group textarea {
    background: color-mix(in srgb, var(--bg-elev) 92%, transparent);
}

/* Studio library cards can show some sky, but not as much as public browse cards. */
.draft-item-card,
.template-card {
    background: color-mix(in srgb, var(--bg-card) 88%, transparent);
}

/* Hover should feel like the card condenses toward the visitor. */
.stat-card:hover,
.now-card:hover,
.project-card:hover,
.about-grid .pillar-card:hover,
.skill-category-card:hover,
.story-card:hover,
.manifesto-card:hover,
.essay-card:hover,
.initiative-card:hover {
    background: color-mix(in srgb, var(--bg-card-hover) 88%, transparent);
}

[data-theme="light"] .stat-card,
[data-theme="light"] .now-card,
[data-theme="light"] .project-card,
[data-theme="light"] .about-grid .pillar-card,
[data-theme="light"] .skill-category-card,
[data-theme="light"] .story-card,
[data-theme="light"] .manifesto-card,
[data-theme="light"] .essay-card,
[data-theme="light"] .initiative-card {
    background: color-mix(in srgb, var(--bg-card) 88%, transparent);
}

[data-theme="light"] .chapter-block,
[data-theme="light"] .contact-card-main {
    background: color-mix(in srgb, var(--bg-card) 92%, transparent);
}


/* === LUMINOUS CONSTELLATION FX PASS · 2026-09-23 === */
/*
   A deliberately restrained "living instrument" layer:
   cursor-responsive prismatic rims, spectral card depth, and typographic
   constellation accents. Decorative-only and reduced-motion aware.
*/

:root {
    --fx-amber: 216, 180, 110;
    --fx-cyan: 110, 231, 216;
    --fx-violet: 168, 85, 247;
    --fx-rose: 244, 114, 182;
    --fx-green: 74, 222, 128;
    --fx-blue: 96, 165, 250;
}

/* Shared reactive card substrate.
   The JS only assigns .fx-reactive-card to semantic card surfaces, so this
   remains generic: newly-added card families do not require another CSS audit. */
.fx-reactive-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    contain: paint;
    will-change: box-shadow, border-color;
    transition:
        border-color 320ms cubic-bezier(.16, 1, .3, 1),
        box-shadow 420ms cubic-bezier(.16, 1, .3, 1),
        filter 420ms cubic-bezier(.16, 1, .3, 1);
}

.fx-reactive-card:hover {
    border-color: color-mix(in srgb, var(--gold) 48%, var(--teal) 24%, transparent);
    box-shadow:
        0 26px 70px rgba(0, 0, 0, .34),
        0 0 0 1px rgba(var(--fx-amber), .05),
        0 0 30px rgba(var(--fx-cyan), .075),
        0 0 64px rgba(var(--fx-violet), .055);
}

/* Mouse-following inner atmosphere. This is a real child rather than a pseudo
   element so it never collides with the site's pre-existing spotlight layer. */
.fx-card-atmosphere,
.fx-card-rim {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}

.fx-card-atmosphere {
    z-index: 3;
    opacity: 0;
    background:
        radial-gradient(
            300px circle at var(--fx-x, 50%) var(--fx-y, 50%),
            rgba(var(--fx-cyan), .105),
            rgba(var(--fx-amber), .06) 26%,
            rgba(var(--fx-violet), .035) 44%,
            transparent 68%
        );
    mix-blend-mode: screen;
    transition: opacity 300ms ease;
}

.fx-reactive-card:hover > .fx-card-atmosphere {
    opacity: 1;
}

[data-theme="light"] .fx-card-atmosphere {
    mix-blend-mode: multiply;
    opacity: 0;
    background:
        radial-gradient(
            320px circle at var(--fx-x, 50%) var(--fx-y, 50%),
            rgba(14, 153, 204, .055),
            rgba(242, 133, 41, .05) 30%,
            rgba(147, 51, 234, .025) 48%,
            transparent 70%
        );
}

[data-theme="light"] .fx-reactive-card:hover > .fx-card-atmosphere {
    opacity: .9;
}

/* Aurora-current perimeter.
   The earlier rim only breathed in place. This version keeps the faint spectral
   shell, then sends a deliberately irregular auroral current around it: broad
   transparent gaps, cyan/green/violet/rose filaments, changing brightness, and
   a second slower opacity pulse. The oversized field is clipped back to the
   card's rounded perimeter by the mask, so the light reads as a current moving
   through the outline rather than a rotating disc. */
.fx-card-rim {
    z-index: 4;
    inset: -1px;
    padding: 1.8px;
    opacity: .52;
    overflow: hidden;
    background:
        linear-gradient(
            115deg,
            rgba(var(--fx-cyan), .18),
            rgba(var(--fx-green), .11) 26%,
            rgba(var(--fx-violet), .14) 52%,
            rgba(var(--fx-rose), .09) 76%,
            rgba(var(--fx-amber), .14)
        );
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    transition: opacity 320ms ease;
    animation: fx-rim-breathe 8.6s ease-in-out infinite;
    animation-delay: calc(var(--fx-seed, 0) * -0.63s);
}

.fx-card-rim::before {
    content: "";
    position: absolute;
    inset: -72%;
    pointer-events: none;
    background:
        radial-gradient(ellipse 17% 34% at 21% 22%, rgba(var(--fx-cyan), .92), transparent 70%),
        radial-gradient(ellipse 13% 29% at 76% 17%, rgba(var(--fx-green), .92), transparent 72%),
        radial-gradient(ellipse 16% 31% at 82% 72%, rgba(var(--fx-violet), .88), transparent 72%),
        radial-gradient(ellipse 12% 27% at 27% 79%, rgba(var(--fx-rose), .72), transparent 70%),
        conic-gradient(
            from 8deg,
            transparent 0deg 18deg,
            rgba(var(--fx-cyan), .96) 31deg,
            rgba(var(--fx-blue), .82) 43deg,
            transparent 58deg 90deg,
            rgba(var(--fx-green), .96) 108deg,
            rgba(var(--fx-cyan), .72) 122deg,
            transparent 140deg 182deg,
            rgba(var(--fx-violet), .94) 202deg,
            rgba(var(--fx-rose), .68) 218deg,
            transparent 236deg 277deg,
            rgba(var(--fx-amber), .78) 294deg,
            rgba(var(--fx-green), .82) 311deg,
            transparent 329deg 360deg
        );
    opacity: .82;
    transform-origin: 50% 50%;
    filter: blur(.72px) saturate(1.42) brightness(1.08);
    mix-blend-mode: screen;
    will-change: transform, opacity, filter;
    animation:
        fx-aurora-rim-travel 9.8s linear infinite,
        fx-aurora-rim-flare 5.4s ease-in-out infinite;
    animation-delay:
        calc(var(--fx-seed, 0) * -0.71s),
        calc(var(--fx-seed, 0) * -0.41s);
}

.fx-reactive-card:hover > .fx-card-rim {
    opacity: .96;
}

[data-theme="light"] .fx-card-rim {
    opacity: .4;
}

[data-theme="light"] .fx-reactive-card:hover > .fx-card-rim {
    opacity: .74;
}

[data-theme="light"] .fx-card-rim::before {
    mix-blend-mode: multiply;
    filter: blur(.65px) saturate(1.3) brightness(1.03);
}

@keyframes fx-aurora-rim-travel {
    0% {
        transform: rotate(0deg) scale(1.02, .96) translate3d(-1.2%, .4%, 0);
    }
    23% {
        transform: rotate(83deg) scale(.96, 1.055) translate3d(.8%, -1.2%, 0);
    }
    51% {
        transform: rotate(187deg) scale(1.045, .95) translate3d(1.4%, .8%, 0);
    }
    76% {
        transform: rotate(278deg) scale(.955, 1.04) translate3d(-.7%, 1.1%, 0);
    }
    100% {
        transform: rotate(360deg) scale(1.02, .96) translate3d(-1.2%, .4%, 0);
    }
}

@keyframes fx-aurora-rim-flare {
    0%, 100% {
        opacity: .43;
        filter: blur(1.05px) saturate(1.22) brightness(.9);
    }
    24% {
        opacity: .72;
        filter: blur(.78px) saturate(1.42) brightness(1.08);
    }
    46% {
        opacity: .98;
        filter: blur(.48px) saturate(1.7) brightness(1.42);
    }
    69% {
        opacity: .62;
        filter: blur(.9px) saturate(1.35) brightness(1.02);
    }
    84% {
        opacity: .88;
        filter: blur(.58px) saturate(1.56) brightness(1.26);
    }
}

/* A tiny "star" lives exactly where the pointer meets the card. */
.fx-card-rim::after {
    content: "";
    position: absolute;
    left: var(--fx-x, 50%);
    top: var(--fx-y, 50%);
    width: 3px;
    height: 3px;
    border-radius: 50%;
    opacity: 0;
    background: var(--star);
    transform: translate(-50%, -50%) scale(.5);
    box-shadow:
        0 0 5px 1px rgba(var(--fx-amber), .9),
        0 0 13px 3px rgba(var(--fx-cyan), .38),
        0 0 22px 5px rgba(var(--fx-violet), .15);
    transition: opacity 180ms ease, transform 220ms cubic-bezier(.16, 1, .3, 1);
}

.fx-reactive-card:hover > .fx-card-rim::after {
    opacity: .92;
    transform: translate(-50%, -50%) scale(1);
}

@keyframes fx-rim-breathe {
    0%, 100% { filter: saturate(.9) brightness(.9); }
    50% { filter: saturate(1.12) brightness(1.12); }
}

/* Card titles gain a restrained optical "charge" rather than a loud neon glow. */
.fx-reactive-card :is(h2, h3, h4, .project-title, .initiative-lead, .item-link) {
    transition:
        color 240ms ease,
        text-shadow 320ms ease,
        letter-spacing 320ms cubic-bezier(.16, 1, .3, 1);
}

.fx-reactive-card:hover :is(h2, h3, h4, .project-title) {
    text-shadow:
        0 0 18px rgba(var(--fx-amber), .13),
        0 0 34px rgba(var(--fx-cyan), .08);
    letter-spacing: .006em;
}

.fx-reactive-card:hover :is(.initiative-lead, .item-link) {
    text-shadow: 0 0 16px rgba(var(--fx-cyan), .11);
}

/* Major headings receive a quiet constellation rule that grows in when the
   heading enters the viewport. */
.fx-luminous-heading {
    position: relative;
}

.fx-title-constellation {
    position: absolute;
    left: 0;
    bottom: -.28em;
    width: clamp(54px, 14%, 116px);
    height: 1px;
    border-radius: 999px;
    pointer-events: none;
    opacity: 0;
    transform: scaleX(.18);
    transform-origin: left center;
    background: linear-gradient(
        90deg,
        rgba(var(--fx-amber), .95),
        rgba(var(--fx-cyan), .82) 48%,
        rgba(var(--fx-violet), .5),
        transparent
    );
    box-shadow: 0 0 12px rgba(var(--fx-cyan), .16);
    transition:
        transform 900ms cubic-bezier(.16, 1, .3, 1),
        opacity 650ms ease;
}

.section-header:not(.left) .fx-title-constellation {
    left: 50%;
    transform: translateX(-50%) scaleX(.18);
    transform-origin: center center;
}

.fx-luminous-heading.fx-entered > .fx-title-constellation {
    opacity: .82;
    transform: scaleX(1);
}

.section-header:not(.left) .fx-luminous-heading.fx-entered > .fx-title-constellation {
    transform: translateX(-50%) scaleX(1);
}

.fx-title-constellation::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--star);
    transform: translate(-50%, -50%);
    box-shadow:
        0 0 6px rgba(var(--fx-amber), .95),
        0 0 12px rgba(var(--fx-cyan), .55);
    animation: fx-star-travel 5.8s cubic-bezier(.4, 0, .2, 1) infinite;
}

@keyframes fx-star-travel {
    0%, 18% { left: 0; opacity: 0; }
    26% { opacity: 1; }
    72% { opacity: .9; }
    82%, 100% { left: 100%; opacity: 0; }
}

/* The already-gradient hero/section emphasis gets a spectral "breath", not a
   second competing gradient animation. */
:is(.hero-title, .section-title) em {
    filter:
        drop-shadow(0 0 0 rgba(var(--fx-cyan), 0))
        drop-shadow(0 0 0 rgba(var(--fx-violet), 0));
    transition: filter 360ms ease, letter-spacing 360ms ease;
}

:is(.hero-title, .section-title):hover em {
    filter:
        drop-shadow(0 0 9px rgba(var(--fx-cyan), .2))
        drop-shadow(0 0 20px rgba(var(--fx-violet), .11));
    letter-spacing: .008em;
}

/* A one-time focus bloom when important words arrive on screen. */
.fx-word-bloom {
    transition: filter 900ms cubic-bezier(.16, 1, .3, 1);
}

.fx-word-bloom:not(.fx-entered) {
    filter: blur(3px) brightness(.85);
}

.fx-word-bloom.fx-entered {
    filter: blur(0) brightness(1);
}

/* Small typographic delight that also makes keyboard/selection interactions feel
   designed rather than browser-default. */
::selection {
    background: rgba(var(--fx-amber), .28);
    color: var(--ink);
    text-shadow: 0 0 10px rgba(var(--fx-cyan), .16);
}

/* Very subtle living sheen on badges and section tags. */
:is(.section-tag, .initiative-badge, .project-badge, .drawer-tag) {
    background-image:
        linear-gradient(110deg, transparent 0 38%, rgba(255,255,255,.12) 47%, transparent 56%),
        linear-gradient(var(--glow), var(--glow));
    background-size: 240% 100%, 100% 100%;
    background-position: 140% 0, 0 0;
    transition: background-position 650ms cubic-bezier(.16, 1, .3, 1), box-shadow 320ms ease;
}

:is(.section-tag, .initiative-badge, .project-badge, .drawer-tag):hover {
    background-position: -40% 0, 0 0;
    box-shadow: 0 0 18px rgba(var(--fx-amber), .08);
}

/* Respect users who prefer less movement and spare low-precision/touch devices
   from cursor-only ornament. */
@media (hover: none), (pointer: coarse) {
    .fx-card-rim::after {
        display: none;
    }

    .fx-reactive-card > .fx-card-atmosphere {
        background:
            radial-gradient(circle at 72% 18%, rgba(var(--fx-cyan), .055), transparent 36%),
            radial-gradient(circle at 18% 82%, rgba(var(--fx-amber), .045), transparent 34%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .fx-card-rim,
    .fx-title-constellation::after {
        animation: none !important;
    }

    .fx-title-constellation,
    .fx-word-bloom,
    .fx-card-atmosphere,
    .fx-card-rim {
        transition-duration: 1ms !important;
    }

    .fx-word-bloom:not(.fx-entered) {
        filter: none;
    }

    .fx-title-constellation {
        opacity: .52;
        transform: scaleX(1);
    }

    .section-header:not(.left) .fx-title-constellation {
        transform: translateX(-50%) scaleX(1);
    }
}

/* === END LUMINOUS CONSTELLATION FX PASS === */


/* ==========================================================================
   Build Pulse — make "publish the construction site" literal
   ========================================================================== */

.build-pulse {
    margin-top: 34px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle at 12% 0%, rgba(216, 180, 110, 0.10), transparent 34%),
        var(--bg-card);
    box-shadow: var(--shadow);
    overflow: hidden;
    position: relative;
}

.build-pulse::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(115deg, rgba(255,255,255,0.025), transparent 32%, rgba(216,180,110,0.025));
}

.build-pulse-header,
.build-pulse-toolbar,
.build-pulse-footer {
    position: relative;
    z-index: 1;
}

.build-pulse-header {
    display: flex;
    justify-content: space-between;
    gap: 28px;
    align-items: flex-start;
    padding: 30px 32px 24px;
}

.build-pulse-header h3 {
    margin: 8px 0 6px;
    font-family: var(--font-heading);
    font-size: clamp(1.45rem, 3vw, 2rem);
    line-height: 1.1;
}

.build-pulse-header p {
    max-width: 720px;
    margin: 0;
    color: var(--muted);
    line-height: 1.65;
}

.build-pulse-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--gold);
}

.build-pulse-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #62d394;
    box-shadow: 0 0 0 4px rgba(98, 211, 148, 0.10), 0 0 18px rgba(98, 211, 148, 0.55);
    animation: build-pulse-breathe 2.2s ease-in-out infinite;
}

.build-pulse-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.build-pulse-refresh:disabled {
    opacity: 0.58;
    cursor: wait;
}

.build-pulse-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 32px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: rgba(0, 0, 0, 0.08);
}

.build-pulse-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.build-pulse-filter {
    appearance: none;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: transparent;
    color: var(--muted);
    padding: 6px 12px;
    font: 600 0.75rem/1 var(--font-mono);
    cursor: pointer;
    transition: color var(--ease), border-color var(--ease), background var(--ease), transform var(--ease);
}

.build-pulse-filter:hover {
    color: var(--ink);
    border-color: var(--line-strong);
    transform: translateY(-1px);
}

.build-pulse-filter.active {
    color: #0c0b08;
    border-color: var(--gold);
    background: linear-gradient(135deg, var(--gold-2), var(--gold));
}

.build-pulse-status {
    color: var(--dim);
    font: 0.72rem/1.4 var(--font-mono);
    text-align: right;
}

.build-pulse-feed {
    position: relative;
    z-index: 1;
    padding: 10px 32px 8px;
}

.build-pulse-item {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 8px;
    min-height: 92px;
}

.build-pulse-rail {
    position: relative;
    display: flex;
    justify-content: center;
}

.build-pulse-rail::after {
    content: "";
    position: absolute;
    top: 25px;
    bottom: -8px;
    width: 1px;
    background: linear-gradient(var(--line-strong), var(--line));
}

.build-pulse-item:last-child .build-pulse-rail::after {
    display: none;
}

.build-pulse-node {
    width: 9px;
    height: 9px;
    margin-top: 18px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 5px var(--glow);
    z-index: 1;
}

.build-pulse-item-body {
    padding: 12px 0 18px;
    border-bottom: 1px solid var(--line);
    min-width: 0;
}

.build-pulse-item:last-child .build-pulse-item-body {
    border-bottom: 0;
}

.build-pulse-item-top,
.build-pulse-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.build-pulse-repo {
    color: var(--gold);
    font: 600 0.72rem/1.3 var(--font-mono);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.build-pulse-time {
    color: var(--dim);
    font: 0.7rem/1.3 var(--font-mono);
    white-space: nowrap;
}

.build-pulse-message {
    display: block;
    margin: 7px 0 8px;
    color: var(--ink);
    font-family: var(--font-serif);
    font-size: 1.08rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
    transition: color var(--ease);
}

.build-pulse-message:hover {
    color: var(--gold);
}

.build-pulse-meta {
    justify-content: flex-start;
    color: var(--dim);
    font: 0.7rem/1.3 var(--font-mono);
}

.build-pulse-meta code {
    color: var(--muted);
    background: var(--glow);
    border: 1px solid var(--line);
    border-radius: 5px;
    padding: 2px 6px;
}

.build-pulse-skeleton {
    height: 72px;
    margin: 12px 0;
    border-radius: var(--radius-md);
    background: linear-gradient(90deg, transparent, var(--glow), transparent);
    background-size: 220% 100%;
    animation: build-pulse-shimmer 1.4s linear infinite;
}

.build-pulse-empty,
.build-pulse-fallback-card {
    display: block;
    margin: 12px 0;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: rgba(255,255,255,0.02);
    color: var(--muted);
}

.build-pulse-fallback-card {
    transition: border-color var(--ease), transform var(--ease);
}

.build-pulse-fallback-card:hover {
    border-color: var(--line-strong);
    transform: translateY(-2px);
}

.build-pulse-fallback-card strong,
.build-pulse-fallback-card span {
    display: block;
}

.build-pulse-fallback-card strong {
    color: var(--ink);
    margin-bottom: 4px;
}

.build-pulse-fallback-card span {
    color: var(--gold);
    font-size: 0.82rem;
}

.build-pulse-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 32px 20px;
    border-top: 1px solid var(--line);
    color: var(--dim);
    font: 0.72rem/1.4 var(--font-mono);
}

.build-pulse-footer a {
    color: var(--gold);
}

@keyframes build-pulse-breathe {
    0%, 100% { transform: scale(0.92); opacity: 0.78; }
    50% { transform: scale(1.08); opacity: 1; }
}

@keyframes build-pulse-shimmer {
    from { background-position: 120% 0; }
    to { background-position: -120% 0; }
}

@media (max-width: 760px) {
    .build-pulse-header,
    .build-pulse-toolbar,
    .build-pulse-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .build-pulse-header,
    .build-pulse-feed,
    .build-pulse-toolbar,
    .build-pulse-footer {
        padding-left: 22px;
        padding-right: 22px;
    }

    .build-pulse-actions {
        justify-content: flex-start;
    }

    .build-pulse-status {
        text-align: left;
    }

    .build-pulse-item-top {
        align-items: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .build-pulse-live-dot,
    .build-pulse-skeleton {
        animation: none;
    }
}


/* ==========================================================================
   LIBRARY READING ARCHITECTURES · Gallery / Journal / Shelf / Mosaic
   ========================================================================== */

.library-layout-toolbar {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: -10px 0 30px;
    padding: 18px 20px;
    border: 1px solid var(--line);
    border-radius: calc(var(--radius-lg) + 4px);
    background:
        linear-gradient(120deg, color-mix(in srgb, var(--bg-card) 91%, transparent), color-mix(in srgb, var(--bg-elev) 72%, transparent));
    backdrop-filter: blur(20px) saturate(125%);
    box-shadow: 0 18px 54px rgba(0, 0, 0, 0.13);
    overflow: hidden;
}

.library-layout-toolbar::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--gold), var(--teal));
    opacity: 0.78;
}

.library-layout-kicker {
    display: block;
    margin-bottom: 2px;
    font-family: var(--font-mono);
    color: var(--gold);
    font-size: 0.69rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.library-layout-description {
    margin: 0;
    color: var(--muted);
    font-family: var(--font-serif);
    font-size: 0.97rem;
    line-height: 1.45;
}

.library-layout-switcher {
    display: inline-grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    flex: 0 0 auto;
    padding: 5px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: color-mix(in srgb, var(--bg) 70%, transparent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.library-layout-btn {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: 11px;
    background: transparent;
    color: var(--muted);
    font: 600 0.78rem/1 var(--font-sans);
    letter-spacing: 0.01em;
    cursor: pointer;
    transition:
        color var(--ease),
        background var(--ease),
        border-color var(--ease),
        box-shadow var(--ease),
        transform var(--ease);
}

.library-layout-btn:hover {
    color: var(--ink);
    background: color-mix(in srgb, var(--bg-card-hover) 74%, transparent);
    transform: translateY(-1px);
}

.library-layout-btn.active,
.library-layout-btn[aria-pressed="true"] {
    color: var(--ink);
    border-color: color-mix(in srgb, var(--gold) 42%, var(--line));
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--gold) 19%, var(--bg-card)),
            color-mix(in srgb, var(--teal) 10%, var(--bg-card)));
    box-shadow:
        0 5px 18px color-mix(in srgb, var(--glow) 75%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.library-layout-icon {
    color: var(--gold);
    font-size: 0.92rem;
}

/* All layouts retain the same semantic article DOM. Only spatial grammar changes. */
.essays-grid[data-layout] {
    transition: max-width var(--ease-slow);
}

.essays-grid[data-layout] .essay-card {
    animation: library-layout-enter 300ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* 1. Gallery — the original luminous card wall, deliberately preserved. */
.essays-grid[data-layout="gallery"] .essay-card {
    min-height: 100%;
}

/* 2. Journal — a quiet editorial index with metadata as a marginal column. */
.essays-grid[data-layout="journal"] {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    max-width: 1120px;
    margin-inline: auto;
}

.essays-grid[data-layout="journal"] .essay-card {
    display: grid;
    grid-template-columns: minmax(155px, 0.26fr) minmax(0, 1fr);
    grid-template-areas:
        "meta title"
        "meta subtitle"
        "meta excerpt"
        "meta footer";
    column-gap: clamp(24px, 4vw, 54px);
    row-gap: 0;
    min-height: 0;
    padding: clamp(26px, 4vw, 44px);
    border-radius: 18px;
}

.essays-grid[data-layout="journal"] .essay-card:hover {
    transform: translateX(5px);
}

.essays-grid[data-layout="journal"] .essay-meta {
    grid-area: meta;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
    margin: 0;
    padding: 4px clamp(18px, 3vw, 32px) 0 0;
    border-right: 1px solid var(--line);
}

.essays-grid[data-layout="journal"] .essay-tag {
    max-width: 18ch;
    line-height: 1.55;
}

.essays-grid[data-layout="journal"] .essay-read-time {
    color: var(--teal);
}

.essays-grid[data-layout="journal"] .essay-title {
    grid-area: title;
    margin: -4px 0 8px;
    font-size: clamp(1.8rem, 3vw, 2.55rem);
    line-height: 1.07;
}

.essays-grid[data-layout="journal"] .essay-subtitle {
    grid-area: subtitle;
    max-width: 56rem;
    margin-bottom: 15px;
    font-family: var(--font-serif);
    font-size: 1.02rem;
    line-height: 1.45;
}

.essays-grid[data-layout="journal"] .essay-excerpt {
    grid-area: excerpt;
    max-width: 65rem;
    margin-bottom: 22px;
    font-size: 1rem;
    line-height: 1.78;
}

.essays-grid[data-layout="journal"] .essay-card-footer {
    grid-area: footer;
    margin-top: 0;
}

/* 3. Shelf — denser, bookish, fast to scan without becoming a spreadsheet. */
.essays-grid[data-layout="shelf"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    max-width: 1180px;
    margin-inline: auto;
}

.essays-grid[data-layout="shelf"] .essay-card {
    min-height: 0;
    padding: 22px 24px 20px 28px;
    border-radius: 11px 20px 20px 11px;
    border-left: 4px solid color-mix(in srgb, var(--gold) 68%, var(--teal));
    box-shadow:
        -7px 0 18px rgba(0, 0, 0, 0.08),
        inset 1px 0 0 color-mix(in srgb, var(--gold) 30%, transparent);
}

.essays-grid[data-layout="shelf"] .essay-card:nth-child(3n + 2) {
    border-left-color: color-mix(in srgb, var(--teal) 72%, var(--gold));
}

.essays-grid[data-layout="shelf"] .essay-card:nth-child(3n) {
    border-left-color: color-mix(in srgb, #a855f7 54%, var(--gold));
}

.essays-grid[data-layout="shelf"] .essay-card:hover {
    transform: translateX(4px);
}

.essays-grid[data-layout="shelf"] .essay-meta {
    margin-bottom: 9px;
}

.essays-grid[data-layout="shelf"] .essay-title {
    font-size: 1.34rem;
    line-height: 1.18;
}

.essays-grid[data-layout="shelf"] .essay-subtitle {
    margin-bottom: 9px;
    font-size: 0.87rem;
}

.essays-grid[data-layout="shelf"] .essay-excerpt {
    display: -webkit-box;
    margin-bottom: 14px;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    font-size: 0.89rem;
    line-height: 1.5;
}

.essays-grid[data-layout="shelf"] .essay-card-footer {
    padding-top: 12px;
}

.essays-grid[data-layout="shelf"] .essay-card-footer .btn {
    padding: 5px 10px;
    font-size: 0.76rem;
}

/* 4. Mosaic — asymmetric editorial rhythm; large essays breathe, smaller ones orbit. */
.essays-grid[data-layout="mosaic"] {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-flow: dense;
    grid-auto-rows: minmax(82px, auto);
    gap: 18px;
}

.essays-grid[data-layout="mosaic"] .essay-card {
    grid-column: span 4;
    min-height: 330px;
    padding: clamp(24px, 2.5vw, 34px);
}

.essays-grid[data-layout="mosaic"] .essay-card:nth-child(7n + 1),
.essays-grid[data-layout="mosaic"] .essay-card:nth-child(7n + 5) {
    grid-column: span 8;
    min-height: 370px;
    background:
        radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--gold) 15%, transparent), transparent 35%),
        color-mix(in srgb, var(--bg-card) 84%, transparent);
}

.essays-grid[data-layout="mosaic"] .essay-card:nth-child(7n + 1) .essay-title,
.essays-grid[data-layout="mosaic"] .essay-card:nth-child(7n + 5) .essay-title {
    max-width: 22ch;
    font-size: clamp(1.8rem, 3.2vw, 2.55rem);
    line-height: 1.08;
}

.essays-grid[data-layout="mosaic"] .essay-card:nth-child(4n + 3) {
    border-radius: 34px 12px 34px 12px;
}

.essays-grid[data-layout="mosaic"] .essay-card:nth-child(4n + 4) {
    border-radius: 12px 34px 12px 34px;
}

.essays-grid[data-layout="mosaic"] .essay-excerpt {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
}

.essays-grid[data-layout="mosaic"] .essay-card:nth-child(7n + 1) .essay-excerpt,
.essays-grid[data-layout="mosaic"] .essay-card:nth-child(7n + 5) .essay-excerpt {
    max-width: 66ch;
    -webkit-line-clamp: 5;
    line-clamp: 5;
}

@keyframes library-layout-enter {
    from {
        opacity: 0.45;
        transform: translateY(8px) scale(0.992);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 1100px) {
    .library-layout-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .library-layout-switcher {
        width: 100%;
    }

    .essays-grid[data-layout="mosaic"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .essays-grid[data-layout="mosaic"] .essay-card,
    .essays-grid[data-layout="mosaic"] .essay-card:nth-child(7n + 1),
    .essays-grid[data-layout="mosaic"] .essay-card:nth-child(7n + 5) {
        grid-column: span 1;
        min-height: 0;
    }

    .essays-grid[data-layout="mosaic"] .essay-card:nth-child(5n + 1) {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .library-layout-toolbar {
        margin-top: -4px;
        padding: 16px;
    }

    .library-layout-description {
        font-size: 0.9rem;
    }

    .library-layout-switcher {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .library-layout-btn {
        min-height: 40px;
        padding-inline: 9px;
    }

    .essays-grid[data-layout="journal"] .essay-card {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "meta"
            "title"
            "subtitle"
            "excerpt"
            "footer";
        padding: 24px;
    }

    .essays-grid[data-layout="journal"] .essay-meta {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 16px;
        padding: 0 0 12px;
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .essays-grid[data-layout="journal"] .essay-tag {
        max-width: none;
    }

    .essays-grid[data-layout="journal"] .essay-title {
        font-size: 1.72rem;
    }

    .essays-grid[data-layout="shelf"],
    .essays-grid[data-layout="mosaic"] {
        grid-template-columns: minmax(0, 1fr);
    }

    .essays-grid[data-layout="mosaic"] .essay-card,
    .essays-grid[data-layout="mosaic"] .essay-card:nth-child(5n + 1),
    .essays-grid[data-layout="mosaic"] .essay-card:nth-child(7n + 1),
    .essays-grid[data-layout="mosaic"] .essay-card:nth-child(7n + 5) {
        grid-column: 1;
        min-height: 0;
    }

    .essays-grid[data-layout="mosaic"] .essay-card:nth-child(7n + 1) .essay-title,
    .essays-grid[data-layout="mosaic"] .essay-card:nth-child(7n + 5) .essay-title {
        font-size: 1.58rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .essays-grid[data-layout] .essay-card {
        animation: none;
    }

    .library-layout-btn {
        transition: none;
    }
}


/* ==========================================================================
   DEEP LIBRARY ARCHITECTURES · Cathedral / Manuscript / Chronicle /
   Observatory / Constellation Scroll
   ========================================================================== */

/* Nine modes need a denser but still finger-friendly control altar. */
.library-layout-switcher {
    grid-template-columns: repeat(3, minmax(118px, 1fr));
    width: min(100%, 560px);
}

.observatory-focus-control {
    display: none;
}

/* --------------------------------------------------------------------------
   5. Cathedral — tall luminous windows arranged as a nave of ideas.
   -------------------------------------------------------------------------- */
.essays-grid[data-layout="cathedral"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 2.2vw, 30px);
    align-items: stretch;
}

.essays-grid[data-layout="cathedral"] .essay-card {
    --cathedral-accent: var(--gold);
    min-height: 520px;
    justify-content: flex-end;
    padding: clamp(40px, 4vw, 58px) clamp(24px, 3vw, 36px) 30px;
    border-color: color-mix(in srgb, var(--cathedral-accent) 38%, var(--line));
    border-radius: 46% 46% 22px 22px / 18% 18% 22px 22px;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--cathedral-accent) 16%, transparent) 0%,
            color-mix(in srgb, var(--bg-card) 82%, transparent) 37%,
            color-mix(in srgb, var(--bg-card) 93%, transparent) 100%);
    box-shadow:
        inset 0 1px 0 color-mix(in srgb, var(--cathedral-accent) 28%, transparent),
        0 26px 64px rgba(0, 0, 0, 0.20);
    isolation: isolate;
}

.essays-grid[data-layout="cathedral"] .essay-card[data-category="ontology"] {
    --cathedral-accent: var(--gold);
}

.essays-grid[data-layout="cathedral"] .essay-card[data-category="narrative"] {
    --cathedral-accent: #a855f7;
}

.essays-grid[data-layout="cathedral"] .essay-card[data-category="reflections"] {
    --cathedral-accent: var(--teal);
}

.essays-grid[data-layout="cathedral"] .essay-card[data-category="ai"] {
    --cathedral-accent: #60a5fa;
}

.essays-grid[data-layout="cathedral"] .essay-card::after {
    content: "✦";
    position: absolute;
    z-index: 0;
    top: 28px;
    left: 50%;
    width: 78px;
    height: 78px;
    display: grid;
    place-items: center;
    transform: translateX(-50%);
    border: 1px solid color-mix(in srgb, var(--cathedral-accent) 52%, transparent);
    border-radius: 50%;
    color: color-mix(in srgb, var(--cathedral-accent) 88%, var(--ink));
    background:
        radial-gradient(circle,
            color-mix(in srgb, var(--cathedral-accent) 30%, transparent),
            color-mix(in srgb, var(--cathedral-accent) 8%, transparent) 48%,
            transparent 70%);
    box-shadow:
        0 0 0 12px color-mix(in srgb, var(--cathedral-accent) 5%, transparent),
        0 0 38px color-mix(in srgb, var(--cathedral-accent) 23%, transparent);
    font-size: 1.45rem;
}

.essays-grid[data-layout="cathedral"] .essay-card:hover {
    transform: translateY(-8px);
    border-color: color-mix(in srgb, var(--cathedral-accent) 70%, var(--line));
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.30),
        0 0 44px color-mix(in srgb, var(--cathedral-accent) 12%, transparent);
}

.essays-grid[data-layout="cathedral"] .essay-meta {
    margin-top: 88px;
    padding-top: 18px;
    border-top: 1px solid color-mix(in srgb, var(--cathedral-accent) 28%, var(--line));
}

.essays-grid[data-layout="cathedral"] .essay-title {
    font-family: var(--font-heading);
    font-size: clamp(1.62rem, 2.2vw, 2rem);
    line-height: 1.08;
    text-wrap: balance;
}

.essays-grid[data-layout="cathedral"] .essay-subtitle {
    color: color-mix(in srgb, var(--cathedral-accent) 72%, var(--ink));
    font-family: var(--font-serif);
    font-style: italic;
}

.essays-grid[data-layout="cathedral"] .essay-excerpt {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    line-clamp: 5;
}

.essays-grid[data-layout="cathedral"] .essay-card-footer {
    border-top-color: color-mix(in srgb, var(--cathedral-accent) 22%, var(--line));
}

/* --------------------------------------------------------------------------
   6. Manuscript — almost no cards: typography, margins, and silence.
   -------------------------------------------------------------------------- */
.essays-grid[data-layout="manuscript"] {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    max-width: 920px;
    margin-inline: auto;
    counter-reset: manuscript-entry;
}

.essays-grid[data-layout="manuscript"] .essay-card {
    counter-increment: manuscript-entry;
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr);
    grid-template-areas:
        "folio meta"
        "folio title"
        "folio subtitle"
        "folio excerpt"
        "folio footer";
    column-gap: clamp(20px, 4vw, 42px);
    min-height: 0;
    padding: clamp(42px, 6vw, 68px) 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    overflow: visible;
}

.essays-grid[data-layout="manuscript"] .essay-card:first-child {
    border-top: 1px solid var(--line);
}

.essays-grid[data-layout="manuscript"] .essay-card:hover {
    transform: none;
    border-color: var(--line-strong);
    box-shadow: none;
    background: transparent;
}

.essays-grid[data-layout="manuscript"] .essay-card::after {
    content: counter(manuscript-entry, decimal-leading-zero);
    grid-area: folio;
    position: static;
    display: block;
    align-self: start;
    padding-top: 4px;
    color: var(--dim);
    font-family: var(--font-mono);
    font-size: 0.76rem;
    letter-spacing: 0.14em;
    writing-mode: vertical-rl;
    text-orientation: mixed;
}

.essays-grid[data-layout="manuscript"] .essay-meta {
    grid-area: meta;
    margin-bottom: 17px;
}

.essays-grid[data-layout="manuscript"] .essay-title {
    grid-area: title;
    max-width: 24ch;
    margin-bottom: 12px;
    font-family: var(--font-serif);
    font-size: clamp(2rem, 4.3vw, 3.5rem);
    font-weight: 500;
    line-height: 1.03;
    letter-spacing: -0.025em;
}

.essays-grid[data-layout="manuscript"] .essay-subtitle {
    grid-area: subtitle;
    max-width: 54ch;
    margin-bottom: 20px;
    color: var(--muted);
    font-family: var(--font-heading);
    font-size: clamp(1.12rem, 2vw, 1.38rem);
    font-style: italic;
    line-height: 1.42;
}

.essays-grid[data-layout="manuscript"] .essay-excerpt {
    grid-area: excerpt;
    max-width: 68ch;
    margin-bottom: 26px;
    color: color-mix(in srgb, var(--ink) 74%, var(--muted));
    font-family: var(--font-serif);
    font-size: 1.06rem;
    line-height: 1.9;
}

.essays-grid[data-layout="manuscript"] .essay-card-footer {
    grid-area: footer;
    margin-top: 0;
    padding-top: 17px;
}

/* --------------------------------------------------------------------------
   7. Chronicle — sequence without pretending we know publication dates.
   -------------------------------------------------------------------------- */
.essays-grid[data-layout="chronicle"] {
    position: relative;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px 76px;
    max-width: 1160px;
    margin-inline: auto;
    padding-block: 24px;
    counter-reset: chronicle-entry;
}

.essays-grid[data-layout="chronicle"]::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    transform: translateX(-50%);
    background:
        linear-gradient(180deg,
            transparent,
            color-mix(in srgb, var(--gold) 48%, var(--line)) 8%,
            color-mix(in srgb, var(--teal) 44%, var(--line)) 92%,
            transparent);
    box-shadow: 0 0 18px var(--glow);
}

.essays-grid[data-layout="chronicle"] .essay-card {
    counter-increment: chronicle-entry;
    position: relative;
    min-height: 0;
    padding: 28px;
    border-radius: 18px;
}

.essays-grid[data-layout="chronicle"] .essay-card:nth-child(odd) {
    grid-column: 1;
}

.essays-grid[data-layout="chronicle"] .essay-card:nth-child(even) {
    grid-column: 2;
    margin-top: 72px;
}

.essays-grid[data-layout="chronicle"] .essay-card::after {
    content: "ARCHIVE " counter(chronicle-entry, decimal-leading-zero);
    position: absolute;
    z-index: 4;
    top: 18px;
    color: var(--dim);
    font-family: var(--font-mono);
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.11em;
}

.essays-grid[data-layout="chronicle"] .essay-card:nth-child(odd)::after {
    right: -70px;
}

.essays-grid[data-layout="chronicle"] .essay-card:nth-child(even)::after {
    left: -70px;
}

.essays-grid[data-layout="chronicle"] .essay-card:nth-child(odd) {
    border-top-right-radius: 5px;
}

.essays-grid[data-layout="chronicle"] .essay-card:nth-child(even) {
    border-top-left-radius: 5px;
}

.essays-grid[data-layout="chronicle"] .essay-title {
    font-size: clamp(1.45rem, 2.4vw, 2rem);
}

.essays-grid[data-layout="chronicle"] .essay-excerpt {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
}

/* --------------------------------------------------------------------------
   8. Observatory — one essay is the gravitational center.
   -------------------------------------------------------------------------- */
.essays-grid[data-layout="observatory"] {
    position: relative;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 18px;
    padding: clamp(20px, 3vw, 42px);
    border: 1px solid var(--line);
    border-radius: 34px;
    background:
        radial-gradient(circle at 50% 18%, color-mix(in srgb, var(--gold) 12%, transparent), transparent 28%),
        radial-gradient(circle at 14% 76%, color-mix(in srgb, var(--teal) 9%, transparent), transparent 30%),
        color-mix(in srgb, var(--bg) 48%, transparent);
    overflow: hidden;
}

.essays-grid[data-layout="observatory"] .essay-card {
    grid-column: span 4;
    min-height: 255px;
    padding: 24px;
    opacity: 0.78;
    transform: scale(0.985);
}

.essays-grid[data-layout="observatory"] .essay-card:hover {
    opacity: 1;
    transform: translateY(-4px) scale(1);
}

.essays-grid[data-layout="observatory"] .essay-card:not(.observatory-featured) .essay-excerpt {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.essays-grid[data-layout="observatory"] .essay-card:not(.observatory-featured) .essay-subtitle {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.essays-grid[data-layout="observatory"] .essay-card.observatory-featured {
    grid-column: 2 / span 10;
    order: -10;
    min-height: 420px;
    padding: clamp(34px, 5vw, 64px);
    opacity: 1;
    transform: none;
    border-color: color-mix(in srgb, var(--gold) 58%, var(--line));
    border-radius: 32px;
    background:
        radial-gradient(circle at 88% 12%, color-mix(in srgb, var(--gold) 18%, transparent), transparent 34%),
        radial-gradient(circle at 12% 88%, color-mix(in srgb, var(--teal) 12%, transparent), transparent 38%),
        color-mix(in srgb, var(--bg-card) 92%, transparent);
    box-shadow:
        0 34px 90px rgba(0, 0, 0, 0.34),
        0 0 52px color-mix(in srgb, var(--gold) 11%, transparent);
}

.essays-grid[data-layout="observatory"] .essay-card.observatory-featured::after {
    content: "FOCUS STAR";
    position: absolute;
    top: 20px;
    right: 24px;
    color: var(--gold);
    font-family: var(--font-mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.13em;
}

.essays-grid[data-layout="observatory"] .observatory-featured .essay-title {
    max-width: 20ch;
    font-size: clamp(2.25rem, 4.6vw, 4rem);
    line-height: 1;
}

.essays-grid[data-layout="observatory"] .observatory-featured .essay-subtitle {
    max-width: 58ch;
    font-size: 1.08rem;
}

.essays-grid[data-layout="observatory"] .observatory-featured .essay-excerpt {
    max-width: 72ch;
    font-size: 1.02rem;
    line-height: 1.8;
}

.essays-grid[data-layout="observatory"] .observatory-focus-control {
    position: relative;
    z-index: 4;
    display: inline-flex;
    align-self: flex-start;
    margin-top: 14px;
    padding: 7px 11px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: color-mix(in srgb, var(--bg-elev) 72%, transparent);
    color: var(--muted);
    font: 600 0.72rem/1 var(--font-mono);
    cursor: pointer;
    transition: color var(--ease), border-color var(--ease), background var(--ease);
}

.essays-grid[data-layout="observatory"] .observatory-focus-control:hover {
    color: var(--ink);
    border-color: var(--gold);
}

.essays-grid[data-layout="observatory"] .observatory-focus-control[aria-pressed="true"] {
    color: var(--gold);
    border-color: color-mix(in srgb, var(--gold) 58%, var(--line));
}

/* --------------------------------------------------------------------------
   9. Constellation Scroll — readable prose threaded by a living star-road.
   -------------------------------------------------------------------------- */
.essays-grid[data-layout="star-scroll"] {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    max-width: 1080px;
    margin-inline: auto;
    padding: 20px 0 20px 116px;
}

.essays-grid[data-layout="star-scroll"]::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    bottom: 0;
    left: 48px;
    width: 2px;
    background:
        linear-gradient(180deg,
            transparent 0%,
            var(--gold) 9%,
            color-mix(in srgb, var(--teal) 78%, var(--gold)) 48%,
            #a855f7 82%,
            transparent 100%);
    opacity: 0.45;
    box-shadow:
        0 0 12px var(--glow),
        0 0 30px color-mix(in srgb, var(--teal) 12%, transparent);
}

.essays-grid[data-layout="star-scroll"] .essay-card {
    --star-scroll-accent: var(--gold);
    min-height: 0;
    padding: clamp(26px, 4vw, 40px);
    border-left: 1px solid color-mix(in srgb, var(--star-scroll-accent) 36%, var(--line));
    border-radius: 10px 24px 24px 10px;
    background:
        linear-gradient(90deg,
            color-mix(in srgb, var(--star-scroll-accent) 8%, transparent),
            color-mix(in srgb, var(--bg-card) 84%, transparent) 12%,
            color-mix(in srgb, var(--bg-card) 78%, transparent));
}

.essays-grid[data-layout="star-scroll"] .essay-card[data-category="ontology"] {
    --star-scroll-accent: var(--gold);
}

.essays-grid[data-layout="star-scroll"] .essay-card[data-category="narrative"] {
    --star-scroll-accent: #a855f7;
}

.essays-grid[data-layout="star-scroll"] .essay-card[data-category="reflections"] {
    --star-scroll-accent: var(--teal);
}

.essays-grid[data-layout="star-scroll"] .essay-card[data-category="ai"] {
    --star-scroll-accent: #60a5fa;
}

.essays-grid[data-layout="star-scroll"] .essay-card::after {
    content: "✦";
    position: absolute;
    z-index: 6;
    top: 40px;
    left: -83px;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--star-scroll-accent) 62%, transparent);
    border-radius: 50%;
    color: var(--star-scroll-accent);
    background: var(--bg);
    box-shadow:
        0 0 0 7px color-mix(in srgb, var(--star-scroll-accent) 6%, transparent),
        0 0 22px color-mix(in srgb, var(--star-scroll-accent) 28%, transparent);
    font-size: 0.8rem;
}

.essays-grid[data-layout="star-scroll"] .essay-card:nth-child(even) {
    margin-left: 34px;
}

.essays-grid[data-layout="star-scroll"] .essay-card:hover {
    transform: translateX(6px);
    border-left-color: var(--star-scroll-accent);
}

.essays-grid[data-layout="star-scroll"] .essay-title {
    max-width: 25ch;
    font-size: clamp(1.7rem, 3vw, 2.35rem);
}

.essays-grid[data-layout="star-scroll"] .essay-excerpt {
    max-width: 72ch;
}

/* --------------------------------------------------------------------------
   Responsive descent: preserve the idea of each architecture on small screens.
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .library-layout-switcher {
        width: 100%;
        max-width: none;
    }

    .essays-grid[data-layout="cathedral"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .essays-grid[data-layout="observatory"] .essay-card {
        grid-column: span 6;
    }

    .essays-grid[data-layout="observatory"] .essay-card.observatory-featured {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .library-layout-switcher {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .essays-grid[data-layout="cathedral"] {
        grid-template-columns: minmax(0, 1fr);
    }

    .essays-grid[data-layout="cathedral"] .essay-card {
        min-height: 460px;
        border-radius: 38% 38% 22px 22px / 13% 13% 22px 22px;
    }

    .essays-grid[data-layout="manuscript"] .essay-card {
        grid-template-columns: 42px minmax(0, 1fr);
        column-gap: 16px;
        padding-block: 38px;
    }

    .essays-grid[data-layout="manuscript"] .essay-title {
        font-size: clamp(1.8rem, 9vw, 2.6rem);
    }

    .essays-grid[data-layout="chronicle"] {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
        padding-left: 42px;
    }

    .essays-grid[data-layout="chronicle"]::before {
        left: 13px;
        transform: none;
    }

    .essays-grid[data-layout="chronicle"] .essay-card:nth-child(odd),
    .essays-grid[data-layout="chronicle"] .essay-card:nth-child(even) {
        grid-column: 1;
        margin-top: 0;
        border-radius: 18px;
    }

    .essays-grid[data-layout="chronicle"] .essay-card::after,
    .essays-grid[data-layout="chronicle"] .essay-card:nth-child(odd)::after,
    .essays-grid[data-layout="chronicle"] .essay-card:nth-child(even)::after {
        top: 18px;
        right: auto;
        left: -42px;
        width: 30px;
        overflow: hidden;
        color: var(--gold);
        letter-spacing: 0;
    }

    .essays-grid[data-layout="observatory"] {
        grid-template-columns: minmax(0, 1fr);
        padding: 14px;
        border-radius: 24px;
    }

    .essays-grid[data-layout="observatory"] .essay-card,
    .essays-grid[data-layout="observatory"] .essay-card.observatory-featured {
        grid-column: 1;
        min-height: 0;
    }

    .essays-grid[data-layout="observatory"] .essay-card.observatory-featured {
        padding: 30px 24px;
    }

    .essays-grid[data-layout="observatory"] .observatory-featured .essay-title {
        font-size: clamp(2rem, 10vw, 3rem);
    }

    .essays-grid[data-layout="star-scroll"] {
        padding-left: 54px;
    }

    .essays-grid[data-layout="star-scroll"]::before {
        left: 16px;
    }

    .essays-grid[data-layout="star-scroll"] .essay-card::after {
        left: -53px;
        width: 30px;
        height: 30px;
    }

    .essays-grid[data-layout="star-scroll"] .essay-card:nth-child(even) {
        margin-left: 0;
    }
}

@media (max-width: 430px) {
    .library-layout-switcher {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Direct paths into the writing, and navigation that survives small screens. */
.home-mobile-menu { display: none; }
.home-reading-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.home-reading-grid .door-card { display: flex; flex-direction: column; }
.home-reading-link { margin-top: auto; padding-top: 24px; color: var(--gold-2); font-weight: 600; }
.library-search-panel { margin-bottom: 24px; padding: clamp(18px, 3vw, 30px); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-card); }
.library-search-panel label { display: block; margin-bottom: 14px; font-family: var(--font-heading); font-size: clamp(1.35rem, 3vw, 1.8rem); }
.library-search-row { display: flex; gap: 12px; }
.library-search-row input { flex: 1; min-width: 0; width: 100%; padding: 14px 16px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--bg); color: var(--ink); font: inherit; }
.library-search-row input::placeholder { color: var(--muted); }
.library-search-panel [role="status"] { margin: 12px 0 0; color: var(--muted); font-size: .9rem; }
.library-search-row button:disabled { opacity: .5; cursor: default; }
.library-empty-state { padding: 28px; border: 1px dashed var(--line-strong); border-radius: var(--radius-lg); color: var(--muted); }
.home-mobile-menu summary:focus-visible, .home-mobile-menu a:focus-visible,
.library-search-row input:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }
@media (max-width: 1100px) {
    .home-reading-grid { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
    .home-mobile-menu { display: block; margin-left: auto; }
    .home-mobile-menu summary { cursor: pointer; padding: 12px; border: 1px solid var(--line-strong); border-radius: 10px; color: var(--ink); list-style: none; }
    .home-mobile-menu summary::-webkit-details-marker { display: none; }
    .home-mobile-menu summary span { margin-left: 6px; }
    .home-mobile-menu nav { position: absolute; top: 100%; left: 16px; right: 16px; max-height: calc(100dvh - var(--nav-height) - 24px); overflow-y: auto; padding: 12px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--bg); box-shadow: var(--shadow); }
    .home-mobile-menu nav a { display: block; padding: 12px 16px; border-radius: 8px; color: var(--ink); }
    .home-mobile-menu nav a:hover { background: var(--glow); color: var(--gold-2); }
}
@media (max-width: 560px) {
    .library-search-row { flex-direction: column; }
}

/* The constellation has its own search; keep archive controls with the archive. */
.container:has(#toggle-graph-view-btn[aria-pressed="true"]) .library-search-panel,
.container:has(#toggle-graph-view-btn[aria-pressed="true"]) .library-empty-state { display: none; }
@media (max-width: 560px) {
    .navbar:has(.home-mobile-menu) .nav-container { gap: 8px; padding-inline: 12px; }
    .navbar:has(.home-mobile-menu) .personal-brand { gap: 8px; font-size: .95rem; }
    .navbar:has(.home-mobile-menu) .personal-brand span { max-width: 100px; line-height: 1.2; }
    .home-mobile-menu summary { padding: 10px; }
}

/* Presentation pass: a composed entrance and four illustrated destinations.
   All artwork is decorative, responsive, and drawn without external assets. */
.home-page .home-hero { position: relative; isolation: isolate; overflow: clip; padding-bottom: 56px; }
.home-page .home-hero-grid { position: relative; z-index: 1; }
.home-page .home-title { text-wrap: balance; }
.home-page .home-lede { max-width: 57ch; }
.home-page .home-kicker { display: flex; align-items: center; gap: 14px; line-height: 1.6; }
.home-page .home-kicker::before { content: ""; flex: 0 0 30px; height: 1px; background: var(--teal); }
.hero-orbit-art { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; background: radial-gradient(ellipse at 70% 35%, color-mix(in srgb, var(--teal) 6%, transparent), transparent 58%); }
.hero-orbit-art span { position: absolute; width: min(1000px, 110vw); aspect-ratio: 1; top: 50%; left: 76%; border: 1px solid color-mix(in srgb, var(--gold) 12%, transparent); border-radius: 50%; transform: translate(-50%, -50%) rotate(-25deg) scaleY(.65); }
.hero-orbit-art span:nth-child(2) { width: min(1250px, 140vw); border-style: dashed; opacity: .55; }
.hero-orbit-art span:nth-child(3) { width: min(1500px, 165vw); opacity: .4; }
.home-scroll-cue { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 20px; border-bottom: 1px solid var(--line-strong); }
.home-scroll-cue a { display: inline-flex; align-items: center; gap: 14px; color: var(--gold-2); font-size: .85rem; }
.scroll-cue-line { display: block; width: 42px; height: 1px; background: currentColor; }
.home-scroll-note { font-family: var(--font-mono); font-size: .68rem; color: var(--muted); letter-spacing: .07em; }
.home-page main > .section:not(.home-hero) { position: relative; }
.home-page main > .section:not(.home-hero)::before { content: ""; position: absolute; top: 0; left: max(24px, calc((100% - 1160px) / 2)); right: max(24px, calc((100% - 1160px) / 2)); height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong), transparent); }
.home-page .section-header.left { max-width: 820px; }
.home-page .section-header .section-title { text-wrap: balance; }
.home-page .section-header .section-subtitle { max-width: 65ch; }
.home-page .portal-card { --portal-accent: var(--teal); padding: 0 30px 34px; }
.home-page .portal-thought { --portal-accent: #b59aee; }
.home-page .portal-story { --portal-accent: var(--gold-2); }
.home-page .portal-writing { --portal-accent: #dd97b5; }
[data-theme="light"] .home-page .portal-thought { --portal-accent: #7751ad; }
[data-theme="light"] .home-page .portal-writing { --portal-accent: #aa456e; }
.portal-art { position: relative; display: grid; place-items: center; height: clamp(180px, 21vw, 245px); margin: 0 -30px 26px; overflow: hidden; border-bottom: 1px solid var(--line); color: var(--portal-accent); background: radial-gradient(ellipse at 50% 60%, color-mix(in srgb, var(--portal-accent) 12%, transparent), transparent 65%), linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: auto, 32px 32px, 32px 32px; }
.portal-art svg { height: 100%; width: 100%; max-width: 400px; stroke: currentColor; stroke-width: 1.2; transition: transform 650ms cubic-bezier(.2,.7,.2,1); }
.portal-art .portal-detail { opacity: .45; }
.portal-art .portal-star { fill: currentColor; stroke: none; }
.portal-art-label { position: absolute; left: 20px; top: 16px; font: .65rem var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.home-page .portal-card .door-index { margin-bottom: 16px; color: var(--portal-accent); }
.home-page .portal-card p { padding-right: 20px; }
.home-page .portal-card .door-arrow { transition: transform 220ms ease; }
.home-page .portal-card:focus-visible { outline: 2px solid var(--portal-accent); outline-offset: 5px; }
.home-page .portal-card:focus-visible .portal-art svg { transform: scale(1.045); }
.home-page .portal-card:focus-visible .door-arrow { transform: translate(3px, -3px); }
@media (hover: hover) and (pointer: fine) {
    .home-page .portal-card:hover .portal-art svg { transform: scale(1.045); }
    .home-page .portal-card:hover .door-arrow { transform: translate(3px, -3px); }
}
@keyframes home-arrive { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: no-preference) {
    .home-hero-copy > .home-kicker { animation: home-arrive 650ms both; }
    .home-hero-copy > .home-title { animation: home-arrive 800ms 80ms both; }
    .home-hero-copy > .home-lede { animation: home-arrive 800ms 160ms both; }
    .home-hero-copy > .hero-cta-group { animation: home-arrive 800ms 240ms both; }
    .home-page .home-hero-aside { animation: home-arrive 1000ms 160ms both; }
    /* Native same-origin transitions progressively enhance ordinary links. */
    @view-transition { navigation: auto; }
    ::view-transition-old(root) { animation-duration: 140ms; }
    ::view-transition-new(root) { animation-duration: 200ms; }
}
@media (prefers-reduced-motion: reduce) {
    .home-page .portal-card, .portal-art svg, .home-page .portal-card .door-arrow { transition: none; }
    .home-page .portal-card:hover, .home-page .portal-card:hover .portal-art svg,
    .home-page .portal-card:focus-visible .portal-art svg { transform: none; }
}
@media (max-width: 560px) {
    .home-scroll-note { display: none; }
    .home-page .home-hero { min-height: auto; padding-bottom: 32px; }
    .home-page .home-kicker { font-size: .72rem; }
    .home-page .portal-card { padding-inline: 24px; }
    .portal-art { margin-inline: -24px; height: 185px; }
}

/* A compact reading desk on published essays. */
.reading-toolbar { position: sticky; top: calc(var(--nav-height) + 12px); z-index: 30; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; width: min(100%, 760px); margin: 0 auto 28px; padding: 10px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--bg); box-shadow: 0 8px 28px rgba(0,0,0,.12); font-family: var(--font-sans); }
.reading-toolbar button, .reading-contents summary { min-height: 44px; padding: 10px 14px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; font: inherit; font-size: .85rem; }
.reading-toolbar button:hover, .reading-contents summary:hover { color: var(--ink); background: var(--glow); }
.reading-toolbar button[aria-pressed="true"] { color: var(--gold-2); border-color: var(--line-strong); background: var(--glow); }
.reading-toolbar :is(button, summary, a):focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.reading-contents { margin-right: auto; }
.reading-contents summary { display: list-item; list-style-position: inside; }
.reading-contents nav { position: absolute; left: 0; right: 0; top: calc(100% + 8px); display: grid; gap: 4px; max-height: min(50dvh, 360px); overflow-y: auto; padding: 14px; border: 1px solid var(--line-strong); border-radius: 14px; background: var(--bg); box-shadow: var(--shadow); }
.reading-contents a { padding: 10px 12px; color: var(--muted); border-radius: 8px; font-size: .9rem; }
.reading-contents a:hover { color: var(--gold-2); background: var(--glow); }
.reading-page .essay-prose > :is(h2,h3,h4) { scroll-margin-top: calc(var(--nav-height) + 150px); }
.reading-page .essay-prose.reading-large { font-size: clamp(1.24rem, 1.7vw, 1.4rem); }
.reading-quiet-mode #global-bg-canvas, .reading-quiet-mode .fx-card-atmosphere,
.reading-quiet-mode .fx-card-rim { visibility: hidden; }
.reading-quiet-mode .page-hero::before, .reading-quiet-mode .page-hero::after { display: none; }
.reading-quiet-mode .essay-prose { color: var(--ink); }
.reading-quiet-mode .essay-prose *, .reading-quiet-mode .essay-prose *::before,
.reading-quiet-mode .essay-prose *::after { animation: none !important; text-shadow: none !important; }
@media (max-width: 480px) {
    .reading-toolbar { gap: 3px; padding: 6px; top: calc(var(--nav-height) + 6px); }
    .reading-toolbar button, .reading-contents summary { padding: 10px 8px; font-size: .76rem; }
}
@media print {
    .reading-toolbar { display: none; }
}