/* ==========================================================================
   xanadu.wiki — Styles
   An encyclopedic pleasure dome
   ========================================================================== */

/* --- Custom Properties --- */
:root {
    --bg-primary: #0a0a0a;
    --bg-content: #111111;
    --text-primary: #e8e0d4;
    --text-secondary: #9a918a;
    --accent-gold: #c9a84c;
    --accent-gold-bright: #dfc06a;
    --marble-vein: #b8a89c;
    --marble-light: #d4cfc5;
    --marble-surface: #e8e0d4;
    --error: #a0522d;
    --spotlight-opacity: 1;
    --column-width: 680px;
    --pilaster-width: 48px;
}

/* --- Reset & Base --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 1.125rem;
    line-height: 1.8;
    overflow-x: hidden;
}

/* --- Nav Lozenge (persistent) --- */
#nav-lozenge {
    position: fixed;
    top: 24px;
    right: 24px;
    z-index: 100;
    background: rgba(10, 10, 10, 0.8);
    border: 1px solid rgba(201, 168, 76, 0.3);
    padding: 10px 12px;
    cursor: pointer;
    transition: border-color 300ms ease, background-color 300ms ease;
}

#nav-lozenge:hover {
    border-color: var(--accent-gold);
    background: rgba(201, 168, 76, 0.08);
}

/* --- The Vestibule (Hero) --- */
.vestibule {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-primary);
    overflow: hidden;
}

.spotlight {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, rgba(201, 168, 76, 0.08) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 1200ms ease-in-out;
    pointer-events: none;
}

.spotlight.visible {
    opacity: var(--spotlight-opacity);
}

.vestibule-content {
    text-align: center;
    z-index: 1;
}

.hero-title {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 300;
    font-size: clamp(3rem, 7vw, 6rem);
    color: var(--text-primary);
    letter-spacing: 0.08em;
    opacity: 0;
    clip-path: inset(0 50% 0 50%);
    transition: opacity 900ms ease, clip-path 900ms ease;
}

.hero-title.visible {
    opacity: 1;
    clip-path: inset(0 0% 0 0%);
}

.hero-subtitle {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-style: italic;
    font-size: 1.1rem;
    color: var(--text-secondary);
    margin-top: 1rem;
    opacity: 0;
    transition: opacity 800ms ease;
}

.hero-subtitle.visible {
    opacity: 1;
}

/* --- Pilasters --- */
.pilaster {
    position: fixed;
    top: 0;
    width: var(--pilaster-width);
    height: 100vh;
    z-index: 50;
    pointer-events: none;
    opacity: 0;
    transition: opacity 600ms ease, transform 600ms ease;
    background:
        repeating-linear-gradient(25deg, transparent, transparent 12px, rgba(184, 168, 156, 0.04) 12px, rgba(184, 168, 156, 0.04) 13px),
        repeating-linear-gradient(65deg, transparent, transparent 18px, rgba(212, 207, 197, 0.03) 18px, rgba(212, 207, 197, 0.03) 19px),
        repeating-linear-gradient(140deg, transparent, transparent 8px, rgba(232, 224, 212, 0.03) 8px, rgba(232, 224, 212, 0.03) 9px),
        linear-gradient(180deg, rgba(232, 224, 212, 0.04), rgba(212, 207, 197, 0.06), rgba(232, 224, 212, 0.04));
}

.pilaster-left {
    left: 0;
    transform: translateX(-20px);
    border-right: 1px solid rgba(184, 168, 156, 0.1);
}

.pilaster-right {
    right: 0;
    transform: translateX(20px);
    border-left: 1px solid rgba(184, 168, 156, 0.1);
}

.pilaster.visible {
    opacity: 1;
    transform: translateX(0);
}

/* --- Greek Key Frieze Divider --- */
.frieze-divider {
    width: 100%;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-primary);
    position: relative;
    overflow: hidden;
}

.frieze-divider::before {
    content: '';
    display: block;
    width: 600px;
    max-width: 90%;
    height: 24px;
    background:
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            transparent 4px,
            rgba(201, 168, 76, 0.15) 4px,
            rgba(201, 168, 76, 0.15) 8px,
            transparent 8px,
            transparent 16px,
            rgba(201, 168, 76, 0.15) 16px,
            rgba(201, 168, 76, 0.15) 20px,
            transparent 20px,
            transparent 24px
        ),
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 4px,
            rgba(201, 168, 76, 0.15) 4px,
            rgba(201, 168, 76, 0.15) 8px,
            transparent 8px,
            transparent 16px,
            rgba(201, 168, 76, 0.15) 16px,
            rgba(201, 168, 76, 0.15) 20px,
            transparent 20px,
            transparent 24px
        );
}

/* --- The Foyer (Table of Contents) --- */
.foyer {
    max-width: var(--column-width);
    margin: 0 auto;
    padding: 60px 20px 80px;
}

.section-heading {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 300;
    font-size: clamp(1.8rem, 4vw, 3rem);
    color: var(--text-primary);
    text-align: center;
    margin-bottom: 48px;
    letter-spacing: 0.06em;
}

.volume-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 600px;
    margin: 0 auto;
}

.volume-item {
    display: block;
    border: 2px solid rgba(201, 168, 76, 0.6);
    padding: 12px 20px;
    text-decoration: none;
    transition: border-color 300ms ease, background-color 300ms ease, box-shadow 300ms ease, border-width 0ms;
}

.volume-item:hover {
    border-color: var(--accent-gold);
    background-color: rgba(201, 168, 76, 0.06);
    box-shadow: 0 0 20px rgba(201, 168, 76, 0.08);
}

.volume-item:active {
    background-color: rgba(201, 168, 76, 0.12);
}

.volume-title {
    display: block;
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 500;
    font-size: 1.1rem;
    color: var(--text-primary);
    letter-spacing: 0.04em;
}

.volume-subtitle {
    display: block;
    font-family: 'Libre Baskerville', Georgia, serif;
    font-style: italic;
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* --- Articles --- */
.article {
    max-width: var(--column-width);
    margin: 0 auto;
    padding: 40px 20px 80px;
}

.article-header {
    text-align: center;
    margin-bottom: 48px;
}

.drop-cap-container {
    display: flex;
    justify-content: center;
    margin-bottom: 24px;
}

.drop-cap {
    display: block;
}

.article-title {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 600;
    font-size: clamp(2rem, 5vw, 4rem);
    color: var(--text-primary);
    letter-spacing: 0.04em;
    margin-bottom: 12px;
}

.provenance {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 300;
    font-size: 0.85rem;
    letter-spacing: 0.2em;
    color: var(--accent-gold);
    font-variant: small-caps;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    flex-wrap: wrap;
}

.lozenge-inline {
    display: inline-block;
    vertical-align: middle;
}

.article-body p {
    margin-bottom: 1.6em;
    color: var(--text-primary);
}

.article-body em {
    font-style: italic;
}

/* --- Animate Paragraphs --- */
.animate-paragraph {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.animate-paragraph.visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Pull Quotes --- */
.pull-quote {
    font-family: 'Josefin Sans', sans-serif;
    font-style: italic;
    font-size: 2rem;
    line-height: 1.4;
    color: var(--text-primary);
    margin: 2em 0 2em 40px;
    padding-left: 20px;
    border-left: 3px solid var(--accent-gold);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.pull-quote.visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Illustrations --- */
.illustration-container {
    margin: 2.5em -10%;
    padding: 24px 0;
}

.illustration {
    display: block;
    width: 100%;
    max-width: 120%;
}

.draw-path {
    stroke-dasharray: var(--path-length, 1000);
    stroke-dashoffset: var(--path-length, 1000);
    transition: stroke-dashoffset 2000ms ease-in-out;
}

.draw-path.drawn {
    stroke-dashoffset: 0;
}

/* --- End Mark --- */
.end-mark {
    text-align: center;
    padding-top: 1em;
    padding-bottom: 1em;
}

/* --- The Colonnade (Footer) --- */
.colonnade {
    background-color: var(--bg-primary);
    text-align: center;
    padding: 80px 20px 60px;
    border-top: 1px solid rgba(184, 168, 156, 0.1);
}

.footer-divider {
    margin-bottom: 32px;
}

.footer-title {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 300;
    font-size: 1.2rem;
    color: var(--text-primary);
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}

.footer-copyright {
    font-family: 'Libre Baskerville', Georgia, serif;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-bottom: 32px;
}

.footer-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.footer-nav a {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 300;
    font-size: 0.8rem;
    letter-spacing: 0.12em;
    color: var(--accent-gold);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color 200ms ease, text-decoration-thickness 200ms ease;
}

.footer-nav a:hover {
    color: var(--accent-gold-bright);
    text-decoration-thickness: 2px;
}

/* --- Links (general) --- */
a {
    color: var(--accent-gold);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color 200ms ease, text-decoration-thickness 200ms ease;
}

a:hover {
    color: var(--accent-gold-bright);
    text-decoration-thickness: 2px;
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition-duration: 0ms !important;
        animation-duration: 0ms !important;
    }

    .animate-paragraph,
    .pull-quote,
    .hero-title,
    .hero-subtitle,
    .spotlight {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
    }

    .draw-path {
        stroke-dashoffset: 0 !important;
        stroke-dasharray: none !important;
    }
}

/* --- Mobile Adjustments --- */
@media (max-width: 768px) {
    .pilaster {
        display: none;
    }

    .illustration-container {
        margin: 2em -5%;
    }

    .pull-quote {
        font-size: 1.4rem;
        margin-left: 20px;
    }

    .provenance {
        font-size: 0.75rem;
        letter-spacing: 0.12em;
    }
}