*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
body{background:#0B0E14;color:#B8BCC6;font-family:'Cormorant Garamond',serif;font-weight:400;font-size:clamp(1rem,1.15vw,1.25rem);line-height:1.75;overflow-x:hidden}

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

/* Aurora field */
.aurora-field{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.aurora-layer{position:absolute;width:120%;height:40%;left:-10%}
.aurora-1{top:0;background:radial-gradient(ellipse at 30% 50%,rgba(94,212,165,0.06) 0%,transparent 70%);animation:auroraDrift1 20s ease-in-out infinite}
.aurora-2{top:10%;background:radial-gradient(ellipse at 60% 40%,rgba(155,114,207,0.04) 0%,transparent 60%);animation:auroraDrift2 15s ease-in-out infinite}
.aurora-3{top:5%;background:radial-gradient(ellipse at 50% 60%,rgba(79,184,196,0.05) 0%,transparent 65%);animation:auroraDrift3 12s ease-in-out infinite}

@keyframes auroraDrift1{0%,100%{transform:translateX(-5%)}50%{transform:translateX(5%)}}
@keyframes auroraDrift2{0%,100%{transform:scaleY(0.8)}50%{transform:scaleY(1.2)}}
@keyframes auroraDrift3{0%,100%{opacity:0.03}50%{opacity:0.12}}

/* Compass rose */
.compass-rose{position:fixed;bottom:24px;right:24px;z-index:50;opacity:0.6}
.compass-needle{transform-origin:24px 24px;transition:transform 0.5s ease}

/* Scenes */
.scene{position:relative;z-index:2;min-height:90vh;padding:clamp(40px,6vw,80px) clamp(16px,4vw,48px)}

/* Hero */
.scene-hero{min-height:100vh;display:flex;align-items:center;justify-content:center}
.hero-frame{position:relative;width:70vw;max-width:900px;min-height:60vh;display:flex;align-items:center;justify-content:center}
.terminus-frame{width:60vw;max-width:700px;min-height:40vh}

/* Corner ornaments */
.ornament{position:absolute;width:clamp(60px,10vw,120px);height:clamp(60px,10vw,120px)}
.corner-tl{top:0;left:0}
.corner-tr{top:0;right:0}
.corner-bl{bottom:0;left:0}
.corner-br{bottom:0;right:0}

/* Path draw animation */
.draw-path{stroke-dasharray:300;stroke-dashoffset:300;animation:drawIn 2.5s cubic-bezier(0.25,0.1,0.25,1) forwards}
@keyframes drawIn{to{stroke-dashoffset:0}}

/* Border rails */
.border-rail{position:absolute;background:#3A4158}
.rail-top{top:clamp(30px,5vw,60px);left:clamp(40px,7vw,80px);right:clamp(40px,7vw,80px);height:1px;opacity:0.4}
.rail-bottom{bottom:clamp(30px,5vw,60px);left:clamp(40px,7vw,80px);right:clamp(40px,7vw,80px);height:1px;opacity:0.4}

/* Ring silhouette */
.ring-silhouette{position:absolute;width:80%;left:10%;top:35%;pointer-events:none}

/* Hero content */
.hero-content{text-align:center;position:relative;z-index:5}
.hero-title{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:clamp(4rem,10vw,10rem);letter-spacing:0.3em;color:#D4D7DD;line-height:1}
.hero-subtitle{font-family:'Cormorant Garamond',serif;font-weight:600;font-style:italic;font-size:clamp(1.4rem,3vw,2.2rem);color:#8A9BAE;margin-top:8px}
.hero-epigraph{font-family:'IM Fell English',serif;font-style:italic;font-size:clamp(1rem,1.5vw,1.3rem);color:#8A9BAE;max-width:50ch;margin:clamp(16px,3vw,32px) auto 0;line-height:1.6}

/* Divider ornaments */
.divider-ornament{position:relative;z-index:2;padding:clamp(16px,3vw,32px) 0;max-width:800px;margin:0 auto}
.divider-ornament svg{width:100%;height:40px}

/* Section titles */
.section-title{font-family:'Bebas Neue',sans-serif;font-weight:400;font-size:clamp(2rem,5vw,4.5rem);letter-spacing:0.25em;color:#D4D7DD;margin-bottom:clamp(24px,4vw,48px)}

/* Text column */
.text-column{max-width:520px;padding-left:8vw}
.body-text{color:#B8BCC6;margin-bottom:clamp(16px,3vw,28px);max-width:50ch}

/* Atmospheric zone */
.atmo-zone{position:absolute;right:5%;top:20%;width:40%;pointer-events:none}
.ring-diagram{width:100%;animation:ringRotate 120s linear infinite}
@keyframes ringRotate{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.ring-label{animation:counterRotate 120s linear infinite}
@keyframes counterRotate{0%{transform:rotate(0deg)}100%{transform:rotate(-360deg)}}

/* Scene backgrounds */
.scene-cartography{background:#161B26}
.scene-archives{background:#0B0E14}
.scene-spectrograph{background:#161B26}
.scene-codex{background:#0B0E14;overflow:hidden}
.scene-terminus{min-height:100vh;display:flex;align-items:center;justify-content:center}

/* Archives */
.archive-entry{position:relative;padding-left:clamp(40px,5vw,60px);margin-bottom:clamp(32px,5vw,56px)}
.archive-numeral{position:absolute;left:0;top:0;font-family:'IM Fell English',serif;font-size:clamp(1.2rem,2vw,1.8rem);color:#5ED4A5;opacity:0;transition:opacity 0.8s ease}
.archive-entry.visible .archive-numeral{opacity:1}
.drop-cap{font-family:'IM Fell English',serif;font-size:clamp(2.4rem,4vw,3.6rem);float:left;line-height:0.8;margin-right:8px;margin-top:4px;color:#9B72CF}

/* Spectrograph */
.spectrograph-diagram{max-width:800px;margin:clamp(32px,5vw,64px) auto;padding:0 clamp(16px,4vw,48px)}
.spec-svg{width:100%}
.spec-ring{stroke-dasharray:1200;stroke-dashoffset:1200;transition:stroke-dashoffset 2s cubic-bezier(0.25,0.1,0.25,1)}
.spectrograph-diagram.visible .spec-ring{stroke-dashoffset:0}
.spec-ring-1{transition-delay:0s}
.spec-ring-2{transition-delay:0.3s}
.spec-ring-3{transition-delay:0.6s}
.spec-ring-4{transition-delay:0.9s}
.spec-line{stroke-dasharray:400;stroke-dashoffset:400;transition:stroke-dashoffset 1.5s ease 1.2s}
.spectrograph-diagram.visible .spec-line{stroke-dashoffset:0}

/* Codex */
.codex-column{max-width:520px;padding-left:8vw}
.codex-text{line-height:1.85}
.ring-watermark{position:absolute;width:120vw;left:-10vw;top:30%;pointer-events:none}
.ornament-flourish{text-align:center;margin:clamp(16px,3vw,28px) 0}
.ornament-flourish svg{width:60px;height:20px}

/* Terminus */
.terminus-content{text-align:center;position:relative;z-index:5}
.terminus-inscription{font-family:'IM Fell English',serif;font-style:italic;font-size:clamp(1.1rem,1.5vw,1.5rem);color:#8A9BAE;max-width:40ch;margin:0 auto;line-height:1.6}
.terminus-colophon{font-family:'Cormorant Garamond',serif;font-weight:400;font-size:0.85rem;color:#8A9BAE;opacity:0.5;display:block;margin-top:clamp(24px,4vw,48px)}

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

/* Responsive */
@media(max-width:768px){
.hero-frame,.terminus-frame{width:90vw}
.text-column,.codex-column{padding-left:clamp(16px,4vw,32px);max-width:100%}
.atmo-zone{position:relative;right:auto;top:auto;width:80%;margin:0 auto clamp(24px,4vw,48px)}
.ornament{width:60px;height:60px}
.hero-title{letter-spacing:0.15em}
}
@media(max-width:480px){
.hero-title{font-size:clamp(2.5rem,12vw,4rem);letter-spacing:0.1em}
.section-title{letter-spacing:0.15em}
.compass-rose{display:none}
}