:root {
    --void: #0a0a0a;
    --engine: #111111;
    --ink: #1a1a1a;
    --ebony: #1a1714;
    --gold: #c9a84c;
    --oxidized: #8a7d5a;
    --brass: #e8d48b;
    --parchment: #d4cfc4;
    --patina: #2a4a3a;
    --teal: #1a3a4a;
    --ember: #4a1a0a;
    --gap: 2vw;
}

/* Compliance vocabulary from design: (technical provides pseudo-Latin taxonomic name: *"Machina (Google IntersectionObserver disconnects off-screen elements IntersectionObserver` `threshold: 0.2`: */

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

html { scroll-behavior: smooth; scroll-snap-type: y proximity; background: var(--void); }

body {
    min-height: 100vh;
    overflow-x: hidden;
    background: var(--void);
    color: var(--parchment);
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    line-height: 1.75;
    letter-spacing: 0.01em;
}

.aurora-field {
    position: fixed;
    inset: 0;
    z-index: -3;
    overflow: hidden;
    background: var(--void);
    pointer-events: none;
}

.aurora-layer {
    position: absolute;
    width: 170vw;
    height: 170vh;
    opacity: 0;
    will-change: transform, opacity;
    filter: blur(12px);
    animation: aurora-drift 30s ease-in-out infinite, aurora-rise 3s ease forwards;
}

.aurora-a { left: -42vw; top: -55vh; background: radial-gradient(circle at center, rgba(26,58,74,0.46), rgba(42,74,58,0.18) 30%, transparent 68%); }
.aurora-b { right: -60vw; top: -30vh; background: radial-gradient(circle at center, rgba(42,74,58,0.38), rgba(201,168,76,0.035) 28%, transparent 66%); animation-delay: 0s, .4s; }
.aurora-c { left: -35vw; bottom: -70vh; background: radial-gradient(circle at center, rgba(201,168,76,0.04), rgba(26,58,74,0.22) 25%, transparent 70%); animation-delay: 0s, .8s; }

.noise-veil { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .04; mix-blend-mode: screen; }
.noise-veil rect { fill: var(--teal); }

@keyframes aurora-rise { to { opacity: .08; } }
@keyframes aurora-drift { 0%,100%{transform:translate3d(0,0,0) rotate(0deg)} 33%{transform:translate3d(5vw,7vh,0) rotate(3deg)} 66%{transform:translate3d(-4vw,10vh,0) rotate(-2deg)} }

.golden-stem {
    position: fixed;
    left: clamp(1.4rem, 5vw, 4rem);
    top: 0;
    width: 2px;
    height: 100vh;
    z-index: 8;
    background: linear-gradient(180deg, #c9a84c 0%, #8a7d5a 60%, transparent 100%);
    opacity: .7;
    pointer-events: none;
}

.manuscript-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.section { grid-column: 1 / -1; min-height: 100vh; scroll-snap-align: start; position: relative; padding: clamp(6rem, 12vh, 10rem) clamp(2rem, 5vw, 5rem); }

.aperture { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: center; padding-top: 0; padding-bottom: 0; background: radial-gradient(circle at 58% 50%, rgba(201,168,76,.05), transparent 34%), var(--void); }
.aperture-copy { grid-column: 1 / 7; align-self: start; padding-top: clamp(3rem, 8vh, 5rem); z-index: 2; }
.eyebrow, .section-label, figcaption, .annotation-lines text, .marginalia, .spec-ledger h3, dt {
    font-family: "IBM Plex Mono", monospace;
    font-size: clamp(.7rem, .85vw, .85rem);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--oxidized);
}
.aperture h1, .morph-title {
    font-family: "Share Tech Mono", monospace;
    font-weight: 400;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: .15em;
    color: var(--gold);
}
.aperture h1 { margin-top: 1rem; font-size: clamp(2.5rem, 6vw, 5.5rem); animation: name-arrival 1.2s cubic-bezier(.25,.1,.25,1) .4s both; }
.subtitle { margin-top: 1.3rem; font-size: clamp(1.25rem, 2.5vw, 2.05rem); color: var(--parchment); opacity: 0; animation: simple-fade 1.2s ease 1s forwards; }
.aperture-diagram { grid-column: 5 / 12; justify-self: center; align-self: center; width: min(72vw, 680px); margin-top: 7vh; }
.master-mechanism { width: 100%; height: auto; filter: drop-shadow(0 0 35px rgba(201,168,76,.14)); }

@keyframes name-arrival { from { opacity: 0; letter-spacing: .5em; transform: translateY(.6rem); } to { opacity: 1; letter-spacing: .15em; transform: translateY(0); } }
@keyframes simple-fade { to { opacity: 1; } }

svg .gold-line, .botanical-plate circle, .botanical-plate path, .botanical-plate ellipse { fill: none; stroke: var(--gold); stroke-width: 1; vector-effect: non-scaling-stroke; }
svg .brass-line { fill: none; stroke: var(--brass); stroke-width: .8; opacity: .8; vector-effect: non-scaling-stroke; }
svg .green-line { fill: none; stroke: var(--patina); stroke-width: .7; vector-effect: non-scaling-stroke; }
.annotation-lines path { fill: none; stroke: rgba(201,168,76,.45); stroke-width: .7; }
.annotation-lines text { fill: var(--oxidized); font-size: 10px; }
.draw-line path, .draw-line circle, .draw-line ellipse, .botanical-plate path, .botanical-plate circle, .botanical-plate ellipse { stroke-dasharray: 1200; stroke-dashoffset: 1200; animation: draw-stroke 2.6s cubic-bezier(.25,.1,.25,1) forwards; }
.aperture .draw-line path, .aperture .draw-line circle, .aperture .draw-line ellipse { animation-delay: .4s; }
@keyframes draw-stroke { to { stroke-dashoffset: 0; } }
.rotating-slow { transform-origin: 310px 310px; animation: wheel-turn 330s linear infinite; }
.reverse-wheel { transform-origin: 310px 310px; animation: wheel-turn 220s linear infinite reverse; }
@keyframes wheel-turn { to { transform: rotate(360deg); } }
.botanical-pulse { animation: morph-color 330s ease-in-out infinite; }
@keyframes morph-color { 0%,100%{opacity:.72} 50%{opacity:1; filter:drop-shadow(0 0 8px rgba(42,74,58,.35))} }

.reveal { opacity: 0; transform: translateY(2rem); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.in-view { opacity: 1; transform: translateY(0); }
.diagram-reveal { transform: translateY(2rem) scale(.95); }
.diagram-reveal.in-view { transform: translateY(0) scale(1); }

.codex { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: start; background: linear-gradient(180deg, transparent, rgba(26,23,20,.32) 50%, transparent); }
.codex > .section-label { grid-column: 1 / 4; margin-bottom: 3rem; }
.plate-stack { grid-column: 1 / 5; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem 1.4rem; }
.botanical-plate { padding: .75rem; border: 1px solid rgba(201,168,76,.3); background: rgba(17,17,17,.58); }
.botanical-plate svg { width: 100%; display: block; background: linear-gradient(135deg, #111111, #1a1714); }
.botanical-plate rect { fill: url(#none); fill: #111111; opacity: .82; }
.botanical-plate figcaption { margin-top: .8rem; text-align: center; font-style: normal; }
.codex-text { grid-column: 5 / 11; max-width: 68ch; text-align: justify; }
.morph-title { font-size: clamp(2.5rem, 6vw, 5.5rem); margin-bottom: 2rem; }
.codex-text p + p, .closing-narrative p + p { margin-top: 1.5rem; }

.divider { grid-column: 2 / 12; height: 80px; opacity: .65; }
.divider svg { width: 100%; height: 100%; }
.divider path { fill: none; stroke: var(--gold); stroke-width: 1; }

.observatory { display: grid; place-items: center; overflow: hidden; background: linear-gradient(135deg, #0a0a0a 0%, #1a3a4a 30%, #2a4a3a 50%, #1a3a4a 70%, #0a0a0a 100%); background-size: 220% 220%; animation: observatory-aurora 30s ease-in-out infinite; }
.observatory::before { content: ""; position: absolute; inset: -20%; background: radial-gradient(circle at 25% 35%, rgba(201,168,76,.08), transparent 28%), radial-gradient(circle at 75% 65%, rgba(42,74,58,.22), transparent 34%); animation: observatory-breathe 18s ease-in-out infinite alternate; }
.rotating-phrase { position: relative; z-index: 1; max-width: 12ch; text-align: center; font-size: clamp(2rem, 5vw, 4rem); line-height: 1.15; font-style: italic; color: var(--brass); text-shadow: 0 0 40px rgba(201,168,76,.2); transition: opacity .8s ease, transform .8s ease; }
.rotating-phrase.fading { opacity: 0; transform: translateY(.6rem); }
@keyframes observatory-aurora { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@keyframes observatory-breathe { to { transform: translate3d(4vw, -3vh, 0) scale(1.08); } }

.workshop { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gap); align-items: start; }
.workshop-main { grid-column: 2 / 9; }
.spec-ledger { display: grid; gap: 3rem; margin-top: 3rem; }
.spec-ledger section { border-top: 1px solid rgba(201,168,76,.3); padding-top: 1.15rem; background: linear-gradient(90deg, rgba(17,17,17,.48), transparent); }
.spec-ledger h3 { color: var(--gold); margin-bottom: 1rem; font-weight: 400; }
dl { display: grid; grid-template-columns: minmax(10rem, .8fr) 1.6fr; gap: .7rem 2rem; }
dt { color: var(--oxidized); }
dd { color: var(--parchment); font-family: "Cormorant Garamond", serif; }
.closing-narrative { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgba(201,168,76,.2); }
.marginalia { grid-column: 9 / 12; position: relative; padding-top: 10rem; color: var(--oxidized); }
.marginalia p { position: relative; margin-bottom: 4rem; padding-left: 1.5rem; }
.marginalia span { display: block; color: var(--gold); margin-bottom: .5rem; }
.leader-map { position: absolute; left: -6rem; top: 7.5rem; width: 10rem; height: 24rem; overflow: visible; }
.leader-map path { fill: none; stroke: rgba(201,168,76,.45); stroke-width: 1; }

.cursor-particle { position: fixed; z-index: 20; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); pointer-events: none; box-shadow: 0 0 12px rgba(201,168,76,.65); animation: particle-fade .8s ease-out forwards; }
@keyframes particle-fade { from { opacity: .4; transform: translate3d(0,0,0) scale(1); } to { opacity: 0; transform: translate3d(var(--tx), var(--ty), 0) scale(.3); } }

@media (max-width: 768px) {
    .golden-stem { left: 0; right: 0; top: 0; width: auto; height: 2px; background: linear-gradient(90deg, #c9a84c 0%, #8a7d5a 60%, transparent 100%); }
    .section { padding: clamp(4rem, 9vh, 6rem) 1.5rem; }
    .aperture, .codex, .workshop { display: block; }
    .aperture-copy { padding-top: 4rem; }
    .aperture-diagram { width: 100%; margin-top: 3rem; }
    .plate-stack { grid-template-columns: 1fr; margin: 3rem 0; }
    .codex-text, .workshop-main { max-width: none; }
    .marginalia { padding-top: 3rem; }
    .leader-map { display: none; }
    dl { grid-template-columns: 1fr; gap: .25rem; }
}

@media (max-width: 480px) {
    .aperture h1, .morph-title { letter-spacing: .1em; font-size: clamp(1.9rem, 11vw, 3rem); }
    .aurora-b, .aurora-c { display: none; }
    .aurora-layer { opacity: .05; }
    .rotating-slow, .reverse-wheel, .botanical-pulse { animation: none; }
}