:root {
  --obsidian: #080814;
  --sapphire: #111B4A;
  --emerald: #047A63;
  --amethyst: #6D3FA0;
  --ruby: #B21F4B;
  --gold: #D8B15A;
  --pearl: #F2E9D2;
  --scroll: 0;
  --mist: 0px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--pearl);
  background: var(--obsidian);
  font-family: "Albert Sans", sans-serif;
  font-weight: 300;
  letter-spacing: 0.035em;
}

.atmosphere {
  position: fixed;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 70%, rgba(17, 27, 74, 0.9), transparent 36%),
    radial-gradient(circle at 15% 20%, rgba(4, 122, 99, 0.38), transparent 27%),
    radial-gradient(circle at 82% 28%, rgba(109, 63, 160, 0.45), transparent 31%),
    radial-gradient(circle at 70% 88%, rgba(178, 31, 75, 0.18), transparent 20%),
    linear-gradient(180deg, #080814 0%, #111B4A 55%, #080814 100%);
}

.fog {
  position: absolute;
  width: 78vmax;
  height: 78vmax;
  border-radius: 50%;
  filter: blur(38px);
  opacity: 0.22;
  transform: translate3d(calc(var(--mist) * 0.25), calc(var(--mist) * -0.12), 0);
  animation: fogDrift 18s ease-in-out infinite alternate;
}

.fog-a { left: -22vmax; top: 10vh; background: radial-gradient(circle, #6D3FA0, transparent 65%); }
.fog-b { right: -28vmax; bottom: -18vh; background: radial-gradient(circle, #047A63, transparent 68%); animation-duration: 23s; }

.cipher-field {
  position: absolute;
  inset: 7vh 3vw;
  color: rgba(216, 177, 90, 0.045);
  font-family: "Archivo", sans-serif;
  font-size: clamp(4rem, 12vw, 15rem);
  font-weight: 800;
  letter-spacing: 0.18em;
  line-height: 1.2;
  transform: rotate(-9deg) translateY(calc(var(--scroll) * -40px));
}

.progress-rail {
  position: fixed;
  right: 28px;
  top: 18vh;
  width: 18px;
  height: 64vh;
  z-index: 20;
}

.rail-line, .progress-fill {
  position: absolute;
  left: 8px;
  top: 0;
  width: 1px;
  height: 100%;
  background: rgba(216, 177, 90, 0.32);
}

.progress-fill {
  height: calc(var(--scroll) * 100%);
  background: linear-gradient(#D8B15A, #047A63);
  box-shadow: 0 0 18px rgba(4, 122, 99, 0.9);
}

.rail-marker {
  position: absolute;
  left: 4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #047A63;
  border: 1px solid #D8B15A;
  box-shadow: 0 0 12px #047A63;
}
.marker-one { top: 0; } .marker-two { top: 33%; } .marker-three { top: 66%; } .marker-four { bottom: 0; }

.chapter {
  position: relative;
  min-height: 100vh;
  padding: clamp(32px, 6vw, 86px);
}

.deco-panel {
  position: relative;
  border: 1px solid rgba(216, 177, 90, 0.72);
  outline: 1px solid rgba(242, 233, 210, 0.12);
  background:
    linear-gradient(135deg, rgba(216, 177, 90, 0.17), transparent 13px) top left / 42px 42px no-repeat,
    linear-gradient(225deg, rgba(216, 177, 90, 0.17), transparent 13px) top right / 42px 42px no-repeat,
    linear-gradient(45deg, rgba(216, 177, 90, 0.17), transparent 13px) bottom left / 42px 42px no-repeat,
    linear-gradient(315deg, rgba(216, 177, 90, 0.17), transparent 13px) bottom right / 42px 42px no-repeat,
    linear-gradient(180deg, rgba(17, 27, 74, 0.86), rgba(8, 8, 20, 0.72));
  box-shadow: inset 0 0 0 8px rgba(8, 8, 20, 0.28), 0 28px 80px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}

.deco-panel::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(216, 177, 90, 0.28);
  pointer-events: none;
}

.deco-panel::after {
  content: "";
  position: absolute;
  inset: -60% auto auto -35%;
  width: 42%;
  height: 220%;
  background: linear-gradient(90deg, transparent, rgba(242, 233, 210, 0.2), transparent);
  transform: rotate(18deg) translateX(-40%);
  animation: glint 8s cubic-bezier(.2,.7,.1,1) infinite;
  pointer-events: none;
}

.gate { display: grid; place-items: center; }

.gate-shell {
  width: min(1180px, 88vw);
  min-height: 78vh;
  display: grid;
  grid-template-columns: minmax(110px, 1fr) minmax(280px, 2.25fr) minmax(110px, 1fr);
  gap: clamp(14px, 2.2vw, 28px);
}

.title-plaque {
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(28px, 6vw, 78px);
}

.fan-rays {
  position: absolute;
  bottom: 15%;
  left: 50%;
  width: 72%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50% 50% 0 0;
  background: repeating-conic-gradient(from 205deg, rgba(216, 177, 90, 0.2) 0 2deg, transparent 2deg 11deg);
  opacity: 0.55;
}

h1, h2, .seal-cipher { font-family: "Space Grotesk", sans-serif; }
h1 {
  position: relative;
  margin: 0;
  font-size: clamp(2.35rem, 7vw, 7rem);
  line-height: 1.08;
  letter-spacing: 0.16em;
  color: #F2E9D2;
  text-shadow: 0 0 28px rgba(216, 177, 90, 0.25);
}

.plaque-kicker, .cell-label, .foreground-plaque span, .pool-title span {
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: #D8B15A;
  font-size: 0.76rem;
}

.plaque-whisper { max-width: 36rem; color: rgba(242, 233, 210, 0.72); line-height: 1.8; }

.side-vitrine { display: grid; place-items: center; min-height: 100%; }
.corner-glyph { position: absolute; top: 24px; font-family: "Archivo"; font-size: 1rem; color: #D8B15A; }
.leaf-silhouette {
  width: 48%; height: 58%; border-radius: 100% 0 100% 0;
  background: linear-gradient(135deg, rgba(4,122,99,.95), rgba(242,233,210,.2) 45%, rgba(17,27,74,.7));
  box-shadow: inset -18px -16px 38px rgba(8,8,20,.55), 0 0 38px rgba(4,122,99,.35);
  transform: rotate(28deg);
}
.leaf-two { transform: rotate(-118deg); }
.stepped-lines { position: absolute; bottom: 8%; width: 55%; height: 25%; border-top: 1px solid #D8B15A; border-bottom: 1px solid #D8B15A; opacity: .55; }
.reverse { transform: scaleX(-1); }

.cabinet { padding-top: 10vh; }
.chapter-heading, .pool-title { max-width: 900px; margin: 0 auto 34px; }
.chapter-heading h2, .pool-title h2 {
  margin: 8px 0 0;
  font-family: "Archivo", sans-serif;
  font-size: clamp(2rem, 5vw, 5.8rem);
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.bento {
  width: min(1180px, 88vw);
  margin: 0 auto;
  display: grid;
  gap: 18px;
}

.cabinet-grid {
  min-height: 76vh;
  grid-template-columns: 1.15fr .8fr 1.25fr .7fr;
  grid-template-rows: 1fr .8fr 1.05fr;
  grid-template-areas:
    "tall wide wide small"
    "tall specimen quote narrow"
    "bottom specimen quote narrow";
}

.cell { padding: 28px; min-height: 160px; }
.cell-tall { grid-area: tall; } .cell-wide { grid-area: wide; } .cell-small { grid-area: small; } .cell-specimen { grid-area: specimen; }
.cell-quote { grid-area: quote; } .cell-narrow { grid-area: narrow; } .cell-bottom { grid-area: bottom; }
.inscription, .cell-bottom p { max-width: 34rem; font-size: clamp(1.05rem, 2.2vw, 1.8rem); line-height: 1.55; color: rgba(242, 233, 210, .82); }

.enamel-leaf {
  position: absolute;
  left: 50%; top: 55%;
  width: 130px; height: 220px;
  border-radius: 85% 5% 85% 8%;
  background: linear-gradient(145deg, #047A63 0%, #0aa17d 32%, #F2E9D2 48%, #111B4A 72%);
  transform: translate(-50%, -50%) rotate(35deg);
  box-shadow: inset -24px -20px 45px rgba(8,8,20,.48), inset 14px 12px 18px rgba(242,233,210,.18), 0 24px 50px rgba(4,122,99,.28);
}
.cluster-large::before, .cluster-large::after, .cluster-small::before, .cluster-small::after {
  content: ""; position: absolute; inset: 18px; border-radius: inherit; background: inherit; opacity: .7;
}
.cluster-large::before { transform: rotate(-42deg) translate(-54px, 38px); }
.cluster-large::after { transform: rotate(42deg) translate(54px, 30px); }
.cluster-small { width: 96px; height: 150px; animation: leafTurn 9s ease-in-out infinite; }

.specimen-orbit, .moon-flower { position: absolute; inset: 14px; transform-style: preserve-3d; animation: specimenTurn 13s ease-in-out infinite alternate; }
.seed-pod { position: absolute; border-radius: 50%; background: radial-gradient(circle at 32% 25%, #F2E9D2, #D8B15A 34%, #6D3FA0 72%, #080814); box-shadow: 0 0 24px rgba(216,177,90,.35); }
.pod-one { width: 86px; height: 126px; left: 18%; top: 18%; transform: rotate(-22deg); }
.pod-two { width: 64px; height: 92px; right: 16%; bottom: 18%; transform: rotate(30deg); }
.pearl, .droplet-column span { position: absolute; border-radius: 50%; background: radial-gradient(circle at 28% 22%, #fff, #F2E9D2 28%, rgba(242,233,210,.25) 55%, rgba(109,63,160,.4)); box-shadow: 0 0 24px rgba(242,233,210,.32); }
.pearl-one { width: 30px; height: 30px; top: 22%; right: 24%; }
.pearl-two { width: 18px; height: 18px; bottom: 24%; left: 22%; }
.gold-dot { position: absolute; inset: 50% auto auto 50%; width: 18px; height: 18px; border-radius: 50%; background: #D8B15A; box-shadow: 0 0 32px #D8B15A; transform: translate(-50%,-50%); }
.ruby-glint { position: absolute; right: 22%; top: 24%; width: 9px; height: 34px; background: #B21F4B; box-shadow: 0 0 22px #B21F4B; transform: rotate(35deg); }
.monogram-tile { display: grid; place-items: center; height: 100%; font-family: "Archivo"; font-weight: 800; font-size: clamp(3rem, 9vw, 8rem); color: rgba(216,177,90,.55); transform: rotate(-7deg); }
.droplet-column { position: absolute; inset: 25% 0; display: grid; justify-content: center; gap: 34px; }
.droplet-column span { position: static; width: 24px; height: 38px; border-radius: 55% 55% 58% 58%; }

.greenhouse { min-height: 180vh; }
.sticky-specimen { position: sticky; top: 8vh; min-height: 84vh; display: grid; place-items: center; pointer-events: none; }
.greenhouse-frame { width: min(560px, 72vw); height: min(620px, 78vh); }
.moon-flower i {
  position: absolute; left: 50%; top: 50%; width: 90px; height: 190px; transform-origin: 50% 92%;
  border-radius: 80% 80% 38% 38%; background: linear-gradient(160deg, rgba(242,233,210,.88), rgba(109,63,160,.52), rgba(4,122,99,.75));
  box-shadow: inset -20px -26px 34px rgba(8,8,20,.45), 0 0 35px rgba(109,63,160,.36);
}
.moon-flower i:nth-child(1) { transform: translate(-50%,-88%) rotate(0deg); }
.moon-flower i:nth-child(2) { transform: translate(-50%,-88%) rotate(60deg); }
.moon-flower i:nth-child(3) { transform: translate(-50%,-88%) rotate(120deg); }
.moon-flower i:nth-child(4) { transform: translate(-50%,-88%) rotate(180deg); }
.moon-flower i:nth-child(5) { transform: translate(-50%,-88%) rotate(240deg); }
.moon-flower i:nth-child(6) { transform: translate(-50%,-88%) rotate(300deg); }
.moon-flower b { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, #F2E9D2, #D8B15A 46%, #B21F4B); box-shadow: 0 0 40px rgba(216,177,90,.5); }
.drifting-panels { position: absolute; inset: 0; pointer-events: none; }
.drift-panel { position: absolute; display: grid; place-items: center; font-family: "Archivo"; text-transform: uppercase; letter-spacing: .2em; color: rgba(242,233,210,.68); }
.drift-panel:nth-child(1) { width: 270px; height: 170px; left: 7%; top: 28%; }
.drift-panel:nth-child(2) { width: 220px; height: 420px; right: 9%; top: 44%; }
.drift-panel:nth-child(3) { width: 360px; height: 130px; left: 17%; bottom: 12%; }

.pool { min-height: 115vh; display: grid; align-content: center; }
.reflection-grid { width: min(1080px, 84vw); height: 48vh; margin: 0 auto; position: relative; perspective: 900px; }
.reflection { position: absolute; width: 34%; height: 28%; left: 12%; top: 12%; filter: blur(.4px); opacity: .75; transform: rotateX(58deg) rotateZ(-4deg); background: linear-gradient(180deg, rgba(17,27,74,.82), rgba(4,122,99,.18)); }
.reflection.long { width: 52%; height: 20%; left: 34%; top: 38%; transform: rotateX(62deg) rotateZ(3deg); }
.reflection.slim { width: 13%; height: 64%; left: 72%; top: 2%; transform: rotateX(64deg) rotateZ(8deg); }
.reflection.ruby { width: 25%; height: 18%; left: 20%; bottom: 4%; background: linear-gradient(180deg, rgba(178,31,75,.5), rgba(8,8,20,.7)); }
.pool-whisper { max-width: 520px; margin: 26px auto 0; text-align: center; line-height: 1.8; color: rgba(242,233,210,.68); }

.last-jewel { display: grid; place-items: center; }
.seal { width: min(520px, 80vw); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; text-align: center; padding: 52px; background: radial-gradient(circle, rgba(17,27,74,.9), rgba(8,8,20,.96) 64%); }
.seal-cipher { display: grid; place-items: center; width: 150px; height: 150px; border: 1px solid #D8B15A; border-radius: 50%; font-size: 3.3rem; color: #D8B15A; letter-spacing: .08em; box-shadow: inset 0 0 30px rgba(216,177,90,.17), 0 0 40px rgba(216,177,90,.18); }
.seal h2 { margin: 0; font-size: clamp(1.25rem, 3vw, 2.2rem); letter-spacing: .16em; }
.seal p { margin: 0; color: rgba(242,233,210,.66); }

.parallax { transform: translate3d(0, calc(var(--parallax-y, 0px)), 0); transition: transform .18s linear; }

@keyframes glint { 0%, 45% { transform: rotate(18deg) translateX(-80%); } 70%, 100% { transform: rotate(18deg) translateX(420%); } }
@keyframes fogDrift { from { transform: translate3d(-4%, 2%, 0) scale(1); } to { transform: translate3d(7%, -5%, 0) scale(1.12); } }
@keyframes specimenTurn { from { transform: rotateY(-11deg) rotateX(4deg) translateZ(0); } to { transform: rotateY(14deg) rotateX(-3deg) translateZ(28px); } }
@keyframes leafTurn { 0%, 100% { transform: translate(-50%, -50%) rotate(25deg) rotateY(-8deg); } 50% { transform: translate(-50%, -50%) rotate(38deg) rotateY(20deg); } }

@media (max-width: 840px) {
  .chapter { padding: 28px 18px; }
  .gate-shell { grid-template-columns: 1fr; width: 100%; }
  .side-vitrine { min-height: 150px; }
  .cabinet-grid { width: 100%; grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "wide" "specimen" "tall" "quote" "small" "narrow" "bottom"; }
  .cell-specimen { min-height: 440px; }
  .progress-rail { right: 10px; }
  .drift-panel { opacity: .5; }
}