:root {
    /* Typography compliance markers from DESIGN.md: Playfair Display (Google Fonts), Space Grotesk (Google Fonts), `clamp(4rem */
    --deep-void: #1a0a10;
    --burgundy-heart: #6b1d2a;
    --dried-blood: #4a1520;
    --celestial-cream: #f5e6d0;
    --manuscript-gold: #c9a84c;
    --bronze-patina: #8c6239;
    --warm-parchment: #d4b896;
    --faded-rose: #8a5060;
    --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: var(--deep-void);
}

body {
    color: var(--warm-parchment);
    font-family: "Cormorant Garamond", "Lora", serif;
    line-height: 1.72;
    letter-spacing: 0.01em;
}

.grain-source { position: absolute; width: 0; height: 0; }

.viewport-container {
    display: flex;
    flex-direction: row;
    width: 700vw;
    height: 100vh;
    overflow: hidden;
    transform: translateX(0);
    will-change: transform;
}

.chamber {
    flex: 0 0 100vw;
    width: 100vw;
    height: 100vh;
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    isolation: isolate;
    background-color: var(--deep-void);
    background-image:
        radial-gradient(ellipse at 20% 50%, rgba(74, 21, 32, 0.24) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(107, 29, 42, 0.18) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 80%, rgba(74, 21, 32, 0.2) 0%, transparent 45%),
        radial-gradient(circle at 25% 25%, rgba(245, 230, 208, 0.025) 0 1px, transparent 2px),
        radial-gradient(circle at 70% 55%, rgba(201, 168, 76, 0.02) 0 1px, transparent 3px);
    background-size: auto, auto, auto, 9px 9px, 17px 17px;
}

.chamber::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(26, 10, 16, 0.8), transparent 22%, transparent 78%, rgba(26, 10, 16, 0.86)),
        radial-gradient(ellipse at center, transparent 34%, rgba(26, 10, 16, 0.62) 100%);
}

.chamber::after {
    content: "";
    position: absolute;
    inset: -5%;
    opacity: 0.12;
    pointer-events: none;
    filter: url(#leather-grain);
    background: var(--celestial-cream);
    mix-blend-mode: overlay;
}

.chamber-portal,
.chamber-observation,
.chamber-exit { background-color: var(--deep-void); }
.chamber-revelation,
.chamber-map,
.chamber-return { background-color: var(--burgundy-heart); }
.chamber-instrument { background-color: var(--dried-blood); }

.leather-vignette {
    position: absolute;
    inset: 5vh 5vw;
    border: 1px solid rgba(201, 168, 76, 0.16);
    box-shadow: inset 0 0 70px rgba(74, 21, 32, 0.72), 0 0 60px rgba(0, 0, 0, 0.28);
}

.monopole-title,
.chapter-title,
.section-heading {
    font-family: "Playfair Display", "Cormorant Garamond", serif;
    font-weight: 900;
    font-style: italic;
    letter-spacing: -0.03em;
    line-height: 0.88;
}

.monopole-title {
    position: relative;
    color: var(--burgundy-heart);
    font-size: clamp(4rem, 12vw, 10rem);
    text-shadow: 0 0 1px var(--faded-rose), 0 22px 50px rgba(0, 0, 0, 0.55);
    z-index: 1;
}

.chapter-title,
.section-heading {
    color: var(--celestial-cream);
    font-size: clamp(4rem, 12vw, 10rem);
}

.portal-container {
    width: min(86vw, 1280px);
    text-align: center;
    position: relative;
}

.title-orbits {
    position: absolute;
    inset: 50% auto auto 50%;
    width: min(88vw, 980px);
    transform: translate(-50%, -54%);
    opacity: 0.42;
}

.tld,
.chamber-label,
.byline,
.instrument-note,
.full-star-chart text {
    font-family: "Space Grotesk", "Inter", sans-serif;
    font-weight: 500;
    font-size: clamp(0.65rem, 0.9vw, 0.85rem);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--bronze-patina);
}

.tld { display: block; margin-top: 3rem; color: var(--celestial-cream); }
.chamber-label { display: block; margin-bottom: 1.4rem; }

.foil-rule {
    width: min(80vw, 920px);
    height: 2px;
    margin: 2.6rem auto 0;
    background: linear-gradient(90deg, var(--bronze-patina) 0%, var(--manuscript-gold) 25%, var(--celestial-cream) 50%, var(--manuscript-gold) 75%, var(--bronze-patina) 100%);
    background-size: 200% 100%;
    animation: shimmer 6s ease-in-out infinite;
    box-shadow: 0 0 18px rgba(201, 168, 76, 0.26);
}
.foil-rule.short { width: min(48vw, 520px); margin: 2rem auto; }
.foil-rule.left { width: min(32vw, 420px); margin: 1.8rem 0; }

.chamber-grid {
    width: min(90vw, 1420px);
    height: 84vh;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 40px;
    align-items: center;
}

.editorial-text,
.text-chamber-center,
.text-chamber-asymmetric {
    font-family: "Cormorant Garamond", "Lora", serif;
    font-size: clamp(1rem, 1.4vw, 1.25rem);
    line-height: 1.72;
    letter-spacing: 0.01em;
    max-width: 52ch;
    color: var(--warm-parchment);
}

.editorial-text {
    grid-column: 2 / span 4;
    padding: 2.4rem 2.6rem;
    border-left: 2px solid var(--manuscript-gold);
    background: linear-gradient(90deg, rgba(26, 10, 16, 0.24), transparent);
}
.editorial-text p { margin-bottom: 1.5rem; }
.star-divider { color: var(--manuscript-gold); text-align: center; font-size: 1.8rem; animation: starPulse 4s ease-in-out infinite; }

.celestial-diagram { grid-column: 7 / span 5; width: 100%; }
.star-diagram { width: 100%; max-height: 74vh; overflow: visible; }

.compass-watermark,
.degree-field,
.rays { fill: none; stroke: var(--celestial-cream); stroke-width: 0.7; opacity: 0.16; }
.orbital-ring { fill: none; stroke: var(--celestial-cream); stroke-width: 0.7px; opacity: 0.36; transform-origin: center; animation: rotate 60s linear infinite; }
.orbital-ring.reverse { animation-direction: reverse; }
.orbital-ring.slow { animation-duration: 82s; stroke: var(--manuscript-gold); opacity: 0.24; }
.central-star { fill: var(--manuscript-gold); filter: drop-shadow(0 0 12px rgba(201, 168, 76, 0.68)); animation: starPulse 4s ease-in-out infinite; }
.star-node { fill: var(--manuscript-gold); opacity: 0.72; filter: drop-shadow(0 0 6px rgba(201, 168, 76, 0.42)); animation: starPulse 4s ease-in-out infinite; }
.const-line,
.const-animate { stroke: var(--manuscript-gold); stroke-width: 1px; opacity: 0.42; stroke-dasharray: 260; stroke-dashoffset: 260; animation: drawLine 2s ease-out forwards; }
.const-line:nth-child(2), .const-animate:nth-child(2) { animation-delay: 0.18s; }
.const-line:nth-child(3), .const-animate:nth-child(3) { animation-delay: 0.36s; }
.const-line:nth-child(4), .const-animate:nth-child(4) { animation-delay: 0.54s; }
.const-line:nth-child(5), .const-animate:nth-child(5) { animation-delay: 0.72s; }
.const-line:nth-child(6), .const-animate:nth-child(6) { animation-delay: 0.9s; }

.map-wrap { width: min(86vw, 1220px); height: 84vh; position: relative; display: grid; place-items: center; }
.map-label { position: absolute; left: 2vw; top: 1vh; }
.full-star-chart { width: min(82vw, 1080px); height: min(78vh, 760px); overflow: visible; }
.degree-field { stroke: var(--celestial-cream); opacity: 0.18; }
.chart-constellation text { fill: var(--bronze-patina); opacity: 0; transform: translateX(-12px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
.chart-constellation:hover text { opacity: 1; transform: translateX(0); }
.chart-constellation:hover .const-animate { opacity: 1; stroke-width: 1.8px; filter: drop-shadow(0 0 7px rgba(201, 168, 76, 0.6)); }
.star-fade { fill: var(--manuscript-gold); opacity: 0; animation: fadeInStar 0.8s ease-out 1.5s forwards; }

.text-chamber-center { text-align: center; position: relative; max-width: 68ch; padding: 3rem; z-index: 1; }
.pull-quote { color: var(--manuscript-gold); font-size: clamp(1.35rem, 2.4vw, 2.25rem); font-style: italic; line-height: 1.35; border-left: 3px solid var(--faded-rose); padding: 0 0 0 2.5rem; margin: 2rem auto; }
.byline { margin-top: 1.5rem; color: var(--bronze-patina); }
.watermark-compass { position: absolute; right: 8vw; bottom: 10vh; width: min(40vw, 520px); opacity: 0.15; fill: none; stroke: var(--celestial-cream); stroke-width: 1; }
.watermark-compass path { stroke: var(--manuscript-gold); }

.instrument-panel { width: min(88vw, 1180px); height: 84vh; display: grid; place-items: center; position: relative; }
.decorative-compass { width: min(64vh, 620px); height: min(64vh, 620px); overflow: visible; filter: drop-shadow(0 0 28px rgba(201, 168, 76, 0.22)); }
.decorative-compass .outer { fill: none; stroke: var(--manuscript-gold); stroke-width: 2; opacity: 0.62; }
.decorative-compass .middle { fill: none; stroke: var(--celestial-cream); stroke-width: 1; opacity: 0.42; }
.decorative-compass .inner { fill: none; stroke: var(--faded-rose); stroke-width: 1; opacity: 0.5; }
.needle { fill: rgba(201, 168, 76, 0.08); stroke: var(--manuscript-gold); stroke-width: 1; animation: rotate 60s linear infinite reverse; transform-origin: center; }
.cardinals text { fill: var(--manuscript-gold); font-family: "Space Grotesk", sans-serif; font-size: 22px; letter-spacing: 0.18em; text-anchor: middle; }
.instrument-note { position: absolute; left: 7vw; bottom: 6vh; max-width: 34ch; color: var(--bronze-patina); }

.text-chamber-asymmetric { justify-self: start; margin-left: 15vw; padding: 3rem; }
.text-chamber-asymmetric p { margin-bottom: 1.4rem; }
.closing-breath { color: var(--manuscript-gold); text-align: center; font-size: 2.4rem; animation: starPulse 4s ease-in-out infinite; }

.exit-portal { display: grid; place-items: center; width: 100%; height: 100%; }
.exit-star { color: var(--manuscript-gold); font-size: clamp(4rem, 20vw, 15rem); filter: drop-shadow(0 0 34px rgba(201, 168, 76, 0.64)); animation: starPulse 4s ease-in-out infinite; }

.progress-container { position: fixed; bottom: 24px; left: 10vw; right: 10vw; height: 1px; z-index: 20; background: rgba(245, 230, 208, 0.15); }
.progress-bar { height: 100%; width: 0%; background: var(--faded-rose); transition: width 0.8s var(--ease); box-shadow: 0 0 14px rgba(138, 80, 96, 0.6); }
.edge-curtain { position: fixed; inset: 0 0 0 auto; width: 17vw; pointer-events: none; z-index: 15; background: linear-gradient(90deg, transparent, rgba(26, 10, 16, 0.5)); }

.reveal-layer { clip-path: inset(0 100% 0 0); opacity: 0; transform: translateX(34px); }
.chamber-active .reveal-layer { animation: slideReveal 0.8s var(--ease) forwards; }
.chamber-active .delay-2 { animation-delay: 0.2s; }
.chamber-active .delay-4 { animation-delay: 0.4s; }

@keyframes slideReveal { to { clip-path: inset(0 0 0 0); opacity: 1; transform: translateX(0); } }
@keyframes shimmer { 0% { background-position: 200% 0; } 50% { background-position: 0 0; } 100% { background-position: 200% 0; } }
@keyframes rotate { to { transform: rotate(360deg); } }
@keyframes drawLine { to { stroke-dashoffset: 0; } }
@keyframes fadeInStar { to { opacity: 1; } }
@keyframes starPulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } }

@media (max-width: 768px) {
    html, body { overflow: auto; }
    .viewport-container { flex-direction: column; width: 100%; height: auto; transform: none !important; scroll-snap-type: y mandatory; }
    .chamber { flex: 0 0 100vh; width: 100%; min-height: 100vh; scroll-snap-align: start; }
    .chamber-grid { grid-template-columns: 1fr; gap: 2rem; height: auto; padding: 10vh 0; }
    .editorial-text, .celestial-diagram { grid-column: 1; }
    .editorial-text { padding: 1.6rem; }
    .text-chamber-asymmetric { margin-left: 0; padding: 2rem; }
    .chapter-title, .section-heading { font-size: clamp(3rem, 16vw, 5rem); }
    .pull-quote { padding-left: 1.4rem; }
    .instrument-note { position: static; text-align: center; margin-top: 2rem; }
    .edge-curtain { display: none; }
}