/* --- I. IMPERIAL FOUNDATION --- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;900&family=JetBrains+Mono:wght@400;700&display=swap');

:root {
    --crimson: #991b1b;
    --forest: #064e3b;
    --gold: #fbbf24;
    --bg-cream: #ffffff;
    --slate: #334155;
    --slate-light: #64748b;
}

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

body { 
    background-color: var(--bg-cream); 
    color: #1a2e1a; 
    font-family: 'Inter', sans-serif; 
    overflow-x: hidden;
    line-height: 1.6;
}

.mono { font-family: 'JetBrains+Mono', monospace; }

/* --- II. ATMOSPHERIC SYSTEMS --- */
#neural-canvas { 
    position: fixed; 
    inset: 0; 
    z-index: -3; 
    opacity: 0.35; 
    pointer-events: none; 
}

.blob { 
    position: fixed; 
    filter: blur(90px); 
    z-index: -2; 
    opacity: 0.45; 
    border-radius: 50%; 
    animation: spinBlob 15s infinite linear; 
}

.blob-1 { top: -10%; left: 10%; width: 50vw; height: 50vw; background: #fef3c7; }
.blob-2 { bottom: 10%; right: -10%; width: 40vw; height: 40vw; background: #fee2e2; animation-direction: reverse; }

@keyframes spinBlob { 
    0% { transform: rotate(0deg) scale(1); } 
    50% { transform: rotate(180deg) scale(1.1); }
    100% { transform: rotate(360deg) scale(1); } 
}

/* --- III. UI COMPONENTS: CARDS & TICKERS --- */
.glass-card { 
    background: rgba(255, 255, 255, 0.75); 
    backdrop-filter: blur(20px); 
    border: 1px solid rgba(217, 119, 6, 0.15); 
    border-radius: 1.5rem; 
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); 
    padding: 2.5rem;
    height: 100%;
}

.glass-card:hover { 
    box-shadow: 0 25px 50px rgba(153, 27, 27, 0.08); 
    border-color: var(--crimson); 
    transform: translateY(-5px);
}

.ticker-container { width: 100%; overflow: hidden; position: relative; z-index: 20; display: flex; border-top: 1px solid rgba(0,0,0,0.05); }
.ticker-wrap { display: flex; width: max-content; }
.ticker-content { display: flex; white-space: nowrap; padding: 1.2rem 0; animation: ticker-move 40s linear infinite; }
.ticker-green { background: var(--forest); color: var(--gold); }

@keyframes ticker-move { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* --- IV. NAVIGATION: THE SOVEREIGN HIGHLIGHT --- */
.nav-link { 
    display: block;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1); 
    color: var(--slate-light); 
    position: relative;
    transform: translateX(0);
    text-decoration: none;
}

/* The "Push to the Right" Animation requested by the Lord */
.nav-link.active { 
    color: var(--crimson) !important; 
    font-weight: 900 !important;
    transform: translateX(15px);
}

.nav-link::before {
    content: "→";
    position: absolute;
    left: -20px;
    opacity: 0;
    transition: 0.3s;
    color: var(--crimson);
}

.nav-link.active::before {
    opacity: 1;
}

.cursor { display: inline-block; width: 10px; height: 1.1em; background-color: var(--crimson); animation: blink 1s step-end infinite; vertical-align: middle; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* --- V. IMPERIAL DECREE: BLOG & RICH TEXT --- */
/* Unified styling for both Legacy Markdown and C2 Node Rich Text */
#post-content, .rich-text-body {
    font-size: 1.15rem;
    line-height: 1.8;
    color: var(--slate);
}

#post-content h1, .rich-text-body h1 { 
    font-size: 3.5rem; 
    font-weight: 900; 
    color: var(--crimson); 
    line-height: 1.1;
    margin: 2rem 0 1.5rem 0;
    letter-spacing: -0.04em;
}

#post-content h2, .rich-text-body h2 { 
    font-size: 2rem; 
    font-weight: 800; 
    color: var(--forest); 
    margin: 2.5rem 0 1rem 0;
    border-bottom: 2px solid var(--gold);
    display: inline-block;
    padding-bottom: 0.2rem;
}

#post-content p, .rich-text-body p { margin-bottom: 1.5rem; }

#post-content strong, .rich-text-body strong { color: var(--crimson); font-weight: 700; }

#post-content blockquote, .rich-text-body blockquote { 
    border-left: 5px solid var(--gold); 
    padding: 1rem 1.5rem; 
    font-style: italic; 
    background: #fffbeb; 
    margin: 2rem 0;
    border-radius: 0 1rem 1rem 0;
}

#post-content code, .rich-text-body code { 
    background: #fee2e2; 
    color: var(--crimson); 
    padding: 3px 6px; 
    border-radius: 6px; 
    font-family: 'JetBrains Mono'; 
    font-size: 0.9em;
}

#post-content img, .rich-text-body img { 
    border-radius: 1.5rem; 
    box-shadow: 0 20px 40px rgba(0,0,0,0.1); 
    margin: 3rem 0; 
    max-width: 100%; 
}

/* Lists */
#post-content ul, .rich-text-body ul { margin-bottom: 1.5rem; list-style: none; }
#post-content li, .rich-text-body li { position: relative; padding-left: 1.5rem; margin-bottom: 0.75rem; }
#post-content li::before, .rich-text-body li::before { 
    content: "→"; 
    position: absolute; 
    left: 0; 
    color: var(--gold); 
    font-weight: bold; 
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700;900&family=JetBrains+Mono:wght@400;700&display=swap');
:root { --crimson: #991b1b; --forest: #064e3b; --gold: #fbbf24; --bg: #ffffff; }
body { background: var(--bg); color: #1a2e1a; font-family: 'Inter', sans-serif; margin: 0; line-height: 1.6; }
.mono { font-family: 'JetBrains Mono', monospace; }
#neural-canvas { position: fixed; inset: 0; z-index: -3; opacity: 0.3; pointer-events: none; }
.blob { position: fixed; filter: blur(90px); z-index: -2; opacity: 0.4; border-radius: 50%; animation: spin 15s infinite linear; }
.blob-1 { top: -10%; left: 10%; width: 50vw; height: 50vw; background: #fef3c7; }
.blob-2 { bottom: 10%; right: -10%; width: 40vw; height: 40vw; background: #fee2e2; animation-direction: reverse; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.glass-card { background: rgba(255,255,255,0.7); backdrop-filter: blur(15px); border: 1px solid rgba(0,0,0,0.05); border-radius: 1.5rem; transition: 0.3s; padding: 2.5rem; }
.glass-card:hover { border-color: var(--crimson); box-shadow: 0 20px 40px rgba(0,0,0,0.05); }
.nav-link { display: block; transition: 0.4s cubic-bezier(0.23,1,0.32,1); color: #64748b; text-decoration: none; position: relative; }
.nav-link.active { color: var(--crimson) !important; font-weight: 900; transform: translateX(15px); }
.nav-link.active::before { content: "→"; position: absolute; left: -20px; color: var(--crimson); }
.rich-text-body { font-size: 1.15rem; line-height: 1.8; color: #334155; }
.rich-text-body h1 { font-size: 2.5rem; color: var(--crimson); margin: 1.5rem 0; font-weight: 900; }
.rich-text-body p { margin-bottom: 1.2rem; }
.rich-text-body img { border-radius: 1rem; max-width: 100%; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }