/* --- Root Variables & Container --- */
.aeterna-container, .aeterna-prose-container {
    --bg-mahogany: #2a1a1f;
    --text-primary: #EAE3D8;
    --text-inactive: #857e78;
    --accent-brass: #c89b3c;
    --accent-glow: rgba(200, 155, 60, 0.4);
    --border-color: rgba(200, 155, 60, 0.2);
    --font-display: 'Cinzel Decorative', serif;
    --font-label: 'Playfair Display SC', serif;
    --font-body: 'Playfair Display', serif;

    font-family: var(--font-label);
    background-color: var(--bg-mahogany);
    background-image: linear-gradient(135deg, rgba(255,255,255,0.05) 25%, transparent 25%),
                      linear-gradient(225deg, rgba(255,255,255,0.05) 25%, transparent 25%),
                      linear-gradient(45deg, rgba(255,255,255,0.05) 25%, transparent 25%),
                      linear-gradient(315deg, rgba(255,255,255,0.05) 25%, transparent 25%);
    background-position: 10px 0, 10px 0, 0 0, 0 0;
    background-size: 20px 20px;
    background-repeat: repeat;

    color: var(--text-primary);
    padding: clamp(20px, 5vw, 40px);
    border-radius: 8px;
    max-width: 1200px;
    margin: 20px auto;
    box-shadow: 0 20px 50px rgba(0,0,0,0.6);
    border: 1px solid var(--border-color);
}

/* === STYLES FOR THE TOOL === */
.aeterna-header { text-align: center; margin-bottom: 30px; padding-bottom: 20px; border-bottom: 1px solid var(--border-color); }
.aeterna-header p { font-family: var(--font-display); font-size: 2.5rem; letter-spacing: 2px; color: var(--text-primary); margin: 0; text-shadow: 0 0 10px var(--accent-glow); }
.aeterna-pantheon { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(15px, 3vw, 30px); }
.node--main { grid-column: 1 / -1; }
.timeline-node { padding: 20px; border: 1px solid var(--border-color); text-align: center; transition: all 0.4s ease; background: rgba(0,0,0,0.2); clip-path: polygon(5% 0%, 95% 0%, 100% 5%, 100% 95%, 95% 100%, 5% 100%, 0% 95%, 0% 5%); }
.node-title { font-size: 1rem; margin-bottom: 20px; letter-spacing: 2px; color: white; }
.node-display { display: flex; justify-content: space-around; gap: 10px; }
.display-unit { display: flex; flex-direction: column; }
.display-unit .node-sign { font-family: var(--font-display); font-size: clamp(1.2rem, 5vw, 2rem); line-height: 1; height: 1em; }
.display-unit span { font-family: var(--font-display); font-size: clamp(1.2rem, 5vw, 2.5rem); line-height: 1; font-feature-settings: 'tnum'; }
.display-unit label { font-size: 0.8rem; margin-top: 5px; color: var(--text-inactive); }
.node--main { padding: 30px; border-color: var(--accent-brass); box-shadow: 0 0 30px var(--accent-glow); }
.node--main .node-title { font-size: 1.2rem; color: var(--accent-brass); text-shadow: 0 0 10px var(--accent-glow); }
.node--main .display-unit span { font-size: clamp(2rem, 8vw, 4rem); }
.timeline-node { color: var(--text-inactive); }
.timeline-node.is-active { color: var(--text-primary); }
.node--main { color: var(--text-primary); }
@media (max-width: 1024px) { .aeterna-pantheon { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .aeterna-pantheon { grid-template-columns: 1fr; } }


/* ========================================= */
/* ===== NEW STYLES FOR CONTENT SECTION ===== */
/* ========================================= */
.aeterna-prose-container { margin-top: 40px; padding: 40px; border: 1px solid transparent; box-shadow: none; background: none; }
.prose-title { font-family: var(--font-display); font-size: 2.2rem; text-align: center; letter-spacing: 1px; margin: 0 0 30px 0; color: var(--accent-brass); text-shadow: 0 0 15px var(--accent-glow); }
.aeterna-prose-container h3 { font-family: var(--font-label); font-size: 1.8rem; letter-spacing: 1px; color: var(--text-primary); margin: 40px 0 15px 0; border-bottom: 1px solid var(--border-color); padding-bottom: 10px; }
.aeterna-prose-container p { font-family: var(--font-body); font-size: 1.2rem; line-height: 1.9; color: var(--text-faded); text-align: justify; }
.drop-cap {
    font-family: var(--font-display);
    color: var(--accent-brass);
    font-size: 4rem;
    float: left;
    line-height: 0.8;
    padding-right: 10px;
    padding-top: 5px;
}
.prose-divider { border: 0; text-align: center; margin: 50px auto; position: relative; height: 1px; background-color: var(--border-color); width: 60%; }
.prose-divider::before {
    content: '⚜'; /* Fleur-de-lis for an ornate touch */
    font-size: 1.5rem;
    font-family: var(--font-label);
    color: var(--accent-brass);
    background-color: var(--bg-mahogany);
    padding: 0 15px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
blockquote {
    border-left: 3px solid var(--accent-brass);
    margin: 30px 20px;
    padding: 10px 20px;
    font-style: italic;
    font-size: 1.1rem;
    color: black;
}