/* ============================================
   munju.org - Swiss Celestial Observatory
   ============================================ */
:root {
    --deep-earth: #2C2118;
    --warm-umber: #3D2E1F;
    --pale-linen: #F5E6C8;
    --warm-parchment: #E8D5B7;
    --muted-sand: #C4B49A;
    --sienna-gold: #D4A373;
    --terracotta-glow: #B8704A;
    --celestial-cream: #FFF1D6;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; font-synthesis: none; }
body {
    background: var(--deep-earth);
    color: var(--warm-parchment);
    font-family: 'Libre Baskerville', serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.1vw, 1.2rem);
    line-height: 1.75;
    letter-spacing: 0.01em;
    overflow-x: hidden;
}

/* --- Grain Overlay --- */
.grain-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.02;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    background-size: 200px 200px;
}

/* --- Grid Ghost Lines --- */
.grid-ghost {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.08;
    transition: opacity 200ms ease;
}
.grid-ghost.scrolling {
    opacity: 0.20;
}
.grid-ghost__svg {
    width: 100%;
    height: 100%;
}

/* --- Section Navigation --- */
.section-nav {
    position: fixed;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 24px;
    opacity: 0.3;
    transition: opacity 400ms ease;
}
.section-nav:hover {
    opacity: 1;
}
.section-nav__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 1.5px solid var(--muted-sand);
    background: transparent;
    transition: background 300ms ease, border-color 300ms ease;
    display: block;
    padding: 0;
}
.section-nav__dot.active {
    background: var(--muted-sand);
}

/* --- Section Base --- */
.section {
    min-height: 100vh;
    position: relative;
    padding: clamp(2rem, 4vw, 4rem) clamp(1.5rem, 6vw, 80px);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.section--deep { background: var(--deep-earth); }
.section--umber { background: var(--warm-umber); }
.section--tall { min-height: 150vh; }
.section--departure {
    min-height: 80vh;
    flex-direction: column;
}
.section__content {
    max-width: 1120px;
    width: 100%;
    position: relative;
    z-index: 2;
}

/* --- Bokeh Layer --- */
.bokeh-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.bokeh-circle {
    position: absolute;
    border-radius: 50%;
    will-change: transform;
}

/* --- Typography --- */
.display-title {
    font-family: 'Libre Baskerville', serif;
    font-weight: 700;
    font-size: clamp(4rem, 10vw, 9rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--pale-linen);
    margin-bottom: 1.5rem;
}
.subtitle {
    font-family: 'Libre Baskerville', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 1.25rem;
    line-height: 1.6;
    color: var(--warm-parchment);
    margin-bottom: 2rem;
}
.heading {
    font-family: 'Libre Baskerville', serif;
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--pale-linen);
    margin-bottom: 1.5rem;
}
.heading--centered { text-align: center; }
.body-text {
    font-family: 'Libre Baskerville', serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.1vw, 1.2rem);
    line-height: 1.75;
    color: var(--warm-parchment);
    margin-bottom: 1.5rem;
}
.body-text--centered {
    text-align: center;
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}
.body-text--departure {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}
.label {
    font-family: 'Source Sans 3', sans-serif;
    font-weight: 400;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted-sand);
    display: block;
    margin-bottom: 0.5rem;
}
.annotation {
    font-family: 'Source Sans 3', sans-serif;
    font-weight: 400;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted-sand);
    display: block;
    margin-top: 1rem;
}
.annotation--centered { text-align: center; }
.pull-quote {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-style: italic;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    line-height: 1.3;
    color: var(--sienna-gold);
    padding: 2rem 0;
    margin: 1.5rem 0;
    border-left: 1px solid var(--sienna-gold);
    padding-left: 1.5rem;
}
.pull-quote p { margin: 0; }

/* --- Threshold Section --- */
.threshold-content {
    text-align: center;
}
.threshold-stars {
    margin-top: 2rem;
}
.star {
    display: inline-block;
}
.star--lg {
    width: 16px;
    height: 16px;
    animation: starPulse 4s ease-in-out infinite;
}
@keyframes starPulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* --- Grid Revealed Section --- */
.asym-grid {
    display: grid;
    grid-template-columns: 5fr 4fr 3fr;
    gap: 40px;
    align-items: start;
}
.asym-block { padding-top: var(--drift, 0); }
.asym-block--a { --drift: 0; }
.asym-block--b { --drift: 12px; }
.asym-block--c { --drift: 8px; }

/* --- Celestial Map --- */
.star-chart {
    width: 100%;
    margin-bottom: 3rem;
}
.star-chart__svg {
    width: 100%;
    height: auto;
    display: block;
}
.star-point {
    animation: starPulse var(--pulse-dur, 4s) ease-in-out infinite;
}
.star-label {
    font-family: 'Libre Baskerville', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 11px;
    color: var(--muted-sand);
    margin: 0;
    padding: 0;
}
.constellation-line {
    stroke-dasharray: 4 8;
    stroke-dashoffset: 200;
    transition: stroke-dashoffset 2s ease-out;
}
.section.revealed .constellation-line {
    stroke-dashoffset: 0;
}

/* --- Typography Specimen --- */
.type-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 2rem;
}
.type-label {
    font-family: 'Source Sans 3', sans-serif;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted-sand);
    display: block;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(196, 180, 154, 0.2);
}
.type-sample--display {
    font-family: 'Libre Baskerville', serif;
    font-weight: 700;
    font-size: clamp(2rem, 4vw, 4rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--pale-linen);
}
.type-sample--body {
    font-family: 'Libre Baskerville', serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.1vw, 1.2rem);
    line-height: 1.75;
    color: var(--warm-parchment);
}
.type-sample--pull {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-style: italic;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    line-height: 1.3;
    color: var(--sienna-gold);
}
.type-sample--functional {
    font-family: 'Source Sans 3', sans-serif;
    font-weight: 400;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted-sand);
    line-height: 1.4;
}
.type-block--pull {
    grid-column: 1 / -1;
}

/* --- Warmth / Palette --- */
.palette-field {
    position: relative;
    width: 100%;
    height: 400px;
    margin: 3rem 0;
}
.palette-orb {
    position: absolute;
    width: var(--orb-size);
    height: var(--orb-size);
    left: var(--orb-x);
    top: var(--orb-y);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, var(--orb-color) 0%, transparent 70%);
    filter: blur(60px);
    opacity: 0.15;
}
.palette-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Libre Baskerville', serif;
    font-weight: 400;
    font-size: 0.85rem;
    color: var(--pale-linen);
    text-align: center;
    white-space: nowrap;
    opacity: 0;
    transition: opacity 600ms ease;
    filter: blur(0);
}
.palette-field:hover .palette-label,
.palette-field.visible .palette-label {
    opacity: 1;
}
.palette-label em {
    font-style: italic;
    color: var(--muted-sand);
    font-size: 0.75rem;
}

/* --- Departure --- */
.vanish-star {
    text-align: center;
    margin-bottom: 3rem;
}
.vanish-star svg {
    animation: starPulse 3s ease-in-out infinite;
    filter: drop-shadow(0 0 12px rgba(255, 241, 214, 0.4));
}
.departure-silence {
    height: 196px;
}

/* --- Reveal System --- */
[data-reveal-order] {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal-order].visible {
    opacity: 1;
    transform: translateY(0);
}

/* ============================
   RESPONSIVE
   ============================ */
@media (max-width: 768px) {
    .asym-grid {
        grid-template-columns: 1fr;
    }
    .type-grid {
        grid-template-columns: 1fr;
    }
    .palette-field {
        height: 300px;
    }
    .section-nav {
        flex-direction: row;
        top: auto;
        bottom: 16px;
        right: 50%;
        transform: translateX(50%);
    }
    .section-nav__dot {
        width: 10px;
        height: 10px;
        padding: 16px;
        background-clip: content-box;
        border: none;
        box-shadow: inset 0 0 0 1.5px var(--muted-sand);
    }
    .section-nav__dot.active {
        box-shadow: inset 0 0 0 5px var(--muted-sand);
    }
    .constellation-line {
        display: none;
    }
}
@media (max-width: 480px) {
    .display-title {
        font-size: clamp(2.5rem, 12vw, 4rem);
    }
}