:root {
    --tarnished-velvet: #1B1720;
    --parchment-haze: #2A2530;
    --oxidized-silver: #C8BFB0;
    --moth-wing: #8A7E72;
    --patinated-gilt: #B8963E;
    --faded-cinnabar: #9B5A42;
    --verdigris: #5A7C6E;
    --tallow-glow: #E8D8B4;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    background: var(--tarnished-velvet);
    color: var(--oxidized-silver);
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: clamp(0.95rem, 1.2vw, 1.1rem);
    line-height: 1.75;
    letter-spacing: 0.01em;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: rgba(184, 150, 62, 0.2);
}

/* Grain Overlay */
.grain-overlay {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1000;
    opacity: 0.06;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
    background-size: 256px 256px;
    mix-blend-mode: overlay;
    animation: grain-breathe 8s ease-in-out infinite;
}

@keyframes grain-breathe {
    0%, 100% { opacity: 0.06; }
    50% { opacity: 0.10; }
}

/* Fixed Monogram */
.monogram {
    position: fixed;
    top: 24px;
    left: 24px;
    z-index: 100;
}

.mono-path {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
    animation: path-draw 2.5s ease-in-out forwards;
}

@keyframes path-draw {
    to { stroke-dashoffset: 0; }
}

/* Chamber Base */
.chamber {
    min-height: 100vh;
    position: relative;
    padding: clamp(4rem, 8vw, 8rem);
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 2rem;
}

.corridor {
    min-height: 85vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}

.seal {
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Z-Pattern Poles */
.z-pole { position: relative; z-index: 2; }
.z-upper-left { align-self: start; justify-self: start; }
.z-upper-right { align-self: start; justify-self: end; text-align: right; }
.z-lower-left { align-self: end; justify-self: start; }
.z-lower-right { align-self: end; justify-self: end; }

/* Chamber Reveal */
.chamber-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 600ms ease-out, transform 600ms ease-out;
}

.chamber-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Typography */
.site-title {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 700;
    font-size: clamp(3rem, 7vw, 6rem);
    letter-spacing: 0.04em;
    color: var(--tallow-glow);
    line-height: 1;
}

.site-subtitle {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-style: italic;
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    color: var(--moth-wing);
    margin-top: 1rem;
    line-height: 1.7;
}

.section-heading {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: clamp(2rem, 5vw, 5.5rem);
    letter-spacing: 0.04em;
    color: var(--tallow-glow);
    line-height: 1.1;
}

.body-text {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: clamp(0.95rem, 1.2vw, 1.1rem);
    line-height: 1.75;
    color: var(--oxidized-silver);
    max-width: 50ch;
}

.body-secondary {
    color: var(--moth-wing);
}

.body-faded {
    color: var(--moth-wing);
}

.section-sub {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.5vw, 1.3rem);
    color: var(--moth-wing);
    margin-top: 1rem;
    max-width: 35ch;
    line-height: 1.6;
}

/* Filigree Path Animations */
.filigree-path {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    transition: stroke-dashoffset 3s ease-in-out;
}

.chamber.paths-drawn .filigree-path {
    stroke-dashoffset: 0;
}

/* Solder Nodes */
.solder-node {
    opacity: 0.6;
    animation: solder-pulse 3s ease-in-out infinite;
    animation-delay: var(--pulse-delay, 0s);
}

@keyframes solder-pulse {
    0%, 100% { transform: scale(1); opacity: 0.6; }
    50% { transform: scale(1.15); opacity: 1; }
}

/* Hero Filigree */
.filigree-hero {
    width: clamp(200px, 40vw, 400px);
    height: clamp(200px, 40vw, 400px);
}

/* Z-Stroke Diagonal */
.z-stroke {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
}

/* Mini Mandala */
.mini-mandala {
    width: 80px;
    height: 80px;
}

.mandala-spin {
    animation: slow-spin 30s linear infinite;
    transform-origin: 60px 60px;
}

@keyframes slow-spin {
    to { transform: rotate(360deg); }
}

/* Circuit Node */
.circuit-node {
    width: 60px;
    height: 60px;
}

/* Pulse Cluster */
.pulse-cluster {
    width: 150px;
    height: 150px;
}

/* Corridor */
.corridor-text {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-style: italic;
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    color: var(--oxidized-silver);
    text-align: center;
    max-width: 30ch;
}

.full-divider {
    width: 100%;
    height: 60px;
}

/* Observatory */
.observatory {
    background: var(--tarnished-velvet);
}

.bg-mandala {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60vw;
    max-width: 600px;
    height: 60vw;
    max-height: 600px;
    z-index: 0;
}

.mandala-loop {
    stroke-dasharray: 2000;
    stroke-dashoffset: 2000;
    animation: mandala-draw 30s linear infinite;
}

@keyframes mandala-draw {
    0% { stroke-dashoffset: 2000; }
    50% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -2000; }
}

.obs-heading {
    color: var(--verdigris);
}

/* Archive */
.archive-heading {
    color: var(--moth-wing);
    font-size: clamp(1.5rem, 3vw, 3rem);
}

.section-divider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    z-index: 1;
}

/* Seal */
.seal-content {
    text-align: center;
}

.seal-monogram {
    width: 120px;
    height: 120px;
    margin: 0 auto 2rem;
}

.seal-path {
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
}

.chamber.paths-drawn .seal-path {
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 4s ease-in-out;
}

.seal-text {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 300;
    font-style: italic;
    font-size: 1.1rem;
    color: var(--moth-wing);
}

/* Responsive */
@media (max-width: 768px) {
    .chamber {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        padding: 3rem 1.5rem;
        min-height: auto;
    }

    .z-upper-right { justify-self: start; text-align: left; }
    .z-lower-right { justify-self: start; }

    .filigree-hero { width: 200px; height: 200px; }
    .bg-mandala { width: 80vw; height: 80vw; }
    .monogram { top: 12px; left: 12px; }

    .vestibule { min-height: 100vh; }
}

@media (prefers-reduced-motion: reduce) {
    .grain-overlay { animation: none; opacity: 0.06; }
    .mono-path { animation: none; stroke-dashoffset: 0; }
    .solder-node { animation: none; opacity: 0.6; }
    .mandala-spin { animation: none; }
    .mandala-loop { animation: none; stroke-dashoffset: 0; opacity: 0.1; }

    .chamber-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .filigree-path {
        stroke-dashoffset: 0;
        transition: none;
    }
}