:root {
  --observatory: #0B2F22;
  --pine: #174C36;
  --malachite: #2F7A55;
  --parchment: #E8DDC2;
  --brass: #B9974B;
  --gold-shadow: #6F5A28;
  --moon: #F6F1E5;
  --rose: #D86A7A;
  --cyan: #62C9BF;
  --display: "Nunito Sans", "Arial Rounded MT Bold", system-ui, sans-serif;
  --body: "Quicksand", "Trebuchet MS", system-ui, sans-serif;
  --mono: "Azeret Mono", "SFMono-Regular", Consolas, monospace;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--observatory);
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--parchment);
  font-family: var(--body);
  background:
    radial-gradient(circle at 78% 4%, rgba(98, 201, 191, 0.18), transparent 32rem),
    radial-gradient(circle at 14% 85%, rgba(185, 151, 75, 0.14), transparent 36rem),
    linear-gradient(135deg, #0B2F22 0%, #174C36 46%, #071d16 100%);
}

body.seal-open { overflow-x: hidden; }

.lacquer-sheen,
.scanline-veil {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}

.lacquer-sheen {
  opacity: 0.34;
  mix-blend-mode: screen;
  background:
    linear-gradient(112deg, transparent 0 28%, rgba(246, 241, 229, 0.08) 34%, transparent 42% 100%),
    repeating-linear-gradient(90deg, rgba(246, 241, 229, 0.025) 0 1px, transparent 1px 8px);
}

.scanline-veil {
  opacity: 0.12;
  background: repeating-linear-gradient(0deg, transparent 0 5px, rgba(98, 201, 191, 0.35) 6px, transparent 7px 12px);
  animation: veilDrift 11s linear infinite;
}

.observatory-atlas { position: relative; z-index: 1; }

.chapter {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  padding: clamp(3rem, 7vw, 7rem);
  isolation: isolate;
}

.chapter::before {
  content: attr(data-chapter);
  position: absolute;
  right: clamp(1.2rem, 4vw, 4rem);
  bottom: clamp(1rem, 4vw, 3rem);
  font: 600 clamp(0.72rem, 1.2vw, 0.95rem)/1 var(--mono);
  letter-spacing: 0.5em;
  color: rgba(185, 151, 75, 0.55);
  writing-mode: vertical-rl;
}

.hero-chapter {
  background:
    radial-gradient(circle at 87% 7%, rgba(98, 201, 191, 0.16), transparent 31rem),
    radial-gradient(circle at 10% 72%, rgba(47, 122, 85, 0.54), transparent 34rem),
    linear-gradient(160deg, rgba(11, 47, 34, 0.92), rgba(23, 76, 54, 0.78));
}

.hero-chapter::after,
.ledger-chapter::after,
.botanical-chapter::after,
.seal-chapter::after {
  content: "";
  position: absolute;
  inset: 1.1rem;
  border: 1px solid rgba(185, 151, 75, 0.33);
  box-shadow: inset 0 0 0 1px rgba(246, 241, 229, 0.06), inset 0 0 46px rgba(11, 47, 34, 0.9);
  pointer-events: none;
  z-index: -1;
}

.hero-copy {
  position: absolute;
  left: clamp(1.5rem, 8vw, 8rem);
  bottom: clamp(5rem, 14vh, 9rem);
  width: min(45rem, 72vw);
}

.kicker,
.mono-label,
.annotation-panel span,
.annotation-panel em,
.vertical-ribbon,
.vellum-strip,
.hero-slip span,
.seal-button em {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.kicker {
  margin: 0 0 0.75rem;
  color: var(--brass);
  font-size: clamp(0.72rem, 1vw, 0.95rem);
}

h1,
h2 {
  font-family: var(--display);
  margin: 0;
  color: var(--moon);
  letter-spacing: 0.08em;
  text-transform: lowercase;
}

h1 {
  font-size: clamp(4.5rem, 15vw, 14rem);
  line-height: 0.78;
  font-weight: 900;
  text-shadow: 0 0 32px rgba(98, 201, 191, 0.24), 0 8px 0 rgba(11, 47, 34, 0.38);
}

h2 {
  font-size: clamp(2.1rem, 5.4vw, 5.8rem);
  line-height: 0.95;
  max-width: 13ch;
}

p {
  font-size: clamp(1rem, 1.45vw, 1.3rem);
  line-height: 1.75;
  font-weight: 500;
}

.lead { max-width: 40rem; color: rgba(232, 221, 194, 0.88); }

.glitch-title { position: relative; }
.glitch-title::before,
.glitch-title::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
}
.glitch-title::before { color: var(--rose); transform: translate(-0.045em, 0.025em); }
.glitch-title::after { color: var(--cyan); transform: translate(0.04em, -0.02em); }
body.loaded .glitch-title::before,
body.loaded .glitch-title::after { animation: glassFault 1450ms steps(2, end) 220ms 1; }

.star-map {
  position: absolute;
  width: min(72rem, 86vw);
  aspect-ratio: 1;
  right: max(-18rem, -18vw);
  top: max(-16rem, -20vw);
  opacity: 0.86;
  filter: drop-shadow(0 0 40px rgba(98, 201, 191, 0.12));
  animation: starRotate 88s linear infinite;
}

.star-map svg { width: 100%; height: 100%; }
.etched-ring,
.orbit-line,
.constellation path,
.radials path {
  fill: none;
  stroke: var(--brass);
  stroke-width: 1.2;
  stroke-dasharray: 7 8;
  opacity: 0.78;
}
.etched-ring.thin { stroke-width: 0.7; opacity: 0.45; }
.orbit-line { stroke: var(--cyan); stroke-dasharray: 620; stroke-dashoffset: 620; animation: drawLine 3.4s ease forwards; }
.orbit-line.delay { animation-delay: 0.6s; stroke: var(--brass); }
.orbit-line.ghost { animation-delay: 1s; stroke: var(--rose); opacity: 0.35; }
.constellation circle { fill: var(--moon); animation: candlePulse 3.4s ease-in-out infinite alternate; }
.constellation path { stroke-dasharray: 18 10; opacity: 0.72; }
.radials path { opacity: 0.18; stroke-dasharray: 4 12; }

.ornate-corner {
  position: absolute;
  width: clamp(7rem, 15vw, 15rem);
  aspect-ratio: 1;
  border: 2px solid var(--brass);
  opacity: 0.72;
}
.ornate-corner::before,
.ornate-corner::after {
  content: "";
  position: absolute;
  border: 1px solid var(--brass);
  border-radius: 50%;
}
.ornate-corner::before { inset: 18%; }
.ornate-corner::after { inset: 36%; background: radial-gradient(circle, var(--brass) 0 14%, transparent 16%); }
.corner-nw { left: 1.2rem; top: 1.2rem; border-right: 0; border-bottom: 0; animation: cornerFault 1.2s steps(2, end) 1; }
.corner-se { right: 1.2rem; bottom: 1.2rem; border-left: 0; border-top: 0; animation: cornerFault 1.2s steps(2, end) 140ms 1; }

.vertical-ribbon {
  position: absolute;
  color: rgba(232, 221, 194, 0.72);
  font-size: 0.72rem;
  writing-mode: vertical-rl;
  padding: 1rem 0.7rem;
  border: 1px solid rgba(185, 151, 75, 0.44);
  background: rgba(11, 47, 34, 0.42);
}
.left-ribbon { left: 4.2rem; top: 23%; }
.right-ribbon { right: 5vw; top: 17%; }

.annotation-panel,
.vellum-slip,
.tilted-ledger,
.constellation-specimen,
.sealed-envelope {
  border: 1px solid rgba(185, 151, 75, 0.55);
  background:
    linear-gradient(135deg, rgba(246, 241, 229, 0.15), rgba(232, 221, 194, 0.06)),
    rgba(11, 47, 34, 0.72);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28), inset 0 0 0 1px rgba(246, 241, 229, 0.05);
  backdrop-filter: blur(5px);
}

.annotation-panel {
  position: absolute;
  padding: 1rem 1.1rem;
  width: 15rem;
  color: var(--parchment);
}
.annotation-panel span,
.annotation-panel em { display: block; font-size: 0.62rem; color: rgba(232, 221, 194, 0.65); }
.annotation-panel strong { display: block; margin: 0.35rem 0; font: 900 1.15rem/1 var(--display); color: var(--brass); letter-spacing: 0.08em; }
.top-panel { right: 27vw; top: 5rem; transform: rotate(-4deg); }
.ledger-panel { right: 9vw; bottom: 12vh; transform: rotate(4deg); }

.vellum-slip {
  position: absolute;
  padding: 1rem 1.35rem;
  background: linear-gradient(100deg, rgba(232, 221, 194, 0.9), rgba(246, 241, 229, 0.72));
  color: var(--observatory);
  clip-path: polygon(2% 8%, 96% 0, 100% 84%, 8% 100%);
}
.hero-slip { right: 14vw; bottom: 10vh; transform: rotate(7deg); }
.hero-slip span { display: block; font-size: 0.58rem; color: var(--gold-shadow); }
.hero-slip strong { font-family: var(--display); letter-spacing: 0.08em; }

.ledger-chapter {
  background:
    radial-gradient(circle at 24% 18%, rgba(216, 106, 122, 0.08), transparent 20rem),
    linear-gradient(127deg, #123e2e, #0B2F22 62%, #071b14);
}

.chapter-mark {
  position: absolute;
  left: 11vw;
  top: 9vh;
  font: 900 clamp(7rem, 19vw, 20rem)/0.8 var(--display);
  color: transparent;
  -webkit-text-stroke: 1px rgba(185, 151, 75, 0.28);
  transform: rotate(-12deg);
}

.tilted-ledger {
  position: absolute;
  left: 12vw;
  top: 21vh;
  width: min(43rem, 68vw);
  padding: clamp(2rem, 5vw, 4.5rem);
  transform: rotate(-5deg);
  clip-path: polygon(3% 0, 100% 4%, 95% 100%, 0 92%);
}
.tilted-ledger p:not(.mono-label), .constellation-specimen p:not(.mono-label), .sealed-envelope p:not(.mono-label) { color: rgba(232, 221, 194, 0.86); max-width: 38rem; }
.ledger-rules {
  position: absolute;
  inset: 1.2rem;
  opacity: 0.18;
  background: repeating-linear-gradient(0deg, transparent 0 2.1rem, var(--brass) 2.15rem 2.2rem);
  pointer-events: none;
}
.mono-label { margin: 0 0 1rem; color: var(--brass); font-size: 0.72rem; }

.aperture {
  position: absolute;
  right: 9vw;
  top: 14vh;
  width: clamp(15rem, 30vw, 33rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(98, 201, 191, 0.12), rgba(11, 47, 34, 0.88) 55%, rgba(185, 151, 75, 0.18) 56% 58%, transparent 60%);
}
.aperture-ring {
  position: absolute;
  inset: 8%;
  border: 2px solid rgba(185, 151, 75, 0.72);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.3rem rgba(111, 90, 40, 0.1), 0 0 0 2.2rem rgba(185, 151, 75, 0.06);
}
.moon-crescent {
  position: absolute;
  width: 34%;
  aspect-ratio: 1;
  left: 34%;
  top: 31%;
  border-radius: 50%;
  background: var(--moon);
  box-shadow: -1.2rem 0 0 0 var(--observatory), 0 0 28px rgba(246, 241, 229, 0.34);
}

.botanical-chapter {
  background:
    radial-gradient(circle at 68% 25%, rgba(185, 151, 75, 0.17), transparent 24rem),
    linear-gradient(110deg, #0B2F22, #174C36 50%, #09271d);
}
.constellation-specimen {
  position: absolute;
  right: 14vw;
  top: 18vh;
  width: min(47rem, 70vw);
  min-height: 30rem;
  padding: clamp(2rem, 5vw, 4rem);
  clip-path: polygon(0 6%, 94% 0, 100% 91%, 8% 100%);
}
.stitched-stars {
  position: relative;
  height: 10rem;
  margin-top: 2rem;
  border: 1px dashed rgba(185, 151, 75, 0.4);
  background: rgba(11, 47, 34, 0.3);
}
.stitched-stars i {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 0.65rem;
  height: 0.65rem;
  border-radius: 50%;
  background: var(--brass);
  box-shadow: 0 0 16px rgba(185, 151, 75, 0.8);
  transform: translate(-50%, -50%);
  animation: candlePulse 2.8s ease-in-out infinite alternate;
}
.stitched-stars svg { position: absolute; inset: 12% 6%; width: 88%; height: 76%; }
.stitched-stars path { fill: none; stroke: var(--brass); stroke-width: 0.8; stroke-dasharray: 120; stroke-dashoffset: 120; animation: drawLine 3s ease forwards; }

.fern-shadow {
  position: absolute;
  width: 36rem;
  height: 55rem;
  opacity: 0.22;
  filter: blur(0.2px);
  background:
    linear-gradient(84deg, transparent 49%, #071d16 50% 51%, transparent 52%),
    repeating-radial-gradient(ellipse at 50% 7%, transparent 0 1.15rem, rgba(7, 29, 22, 0.9) 1.2rem 1.34rem, transparent 1.39rem 2.2rem);
  clip-path: polygon(46% 0, 54% 0, 60% 100%, 40% 100%);
}
.fern-a { left: 5vw; top: 2vh; transform: rotate(20deg) scaleX(2.1); }
.fern-b { left: 26vw; bottom: -18vh; transform: rotate(-34deg) scaleX(1.8); opacity: 0.15; }
.vellum-strip {
  position: absolute;
  left: 9vw;
  bottom: 18vh;
  padding: 1rem 1.4rem;
  color: var(--observatory);
  background: var(--parchment);
  transform: rotate(-8deg);
  box-shadow: 0 1rem 2rem rgba(0,0,0,0.28);
}

.seal-chapter {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 50%, rgba(98, 201, 191, 0.14), transparent 22rem),
    radial-gradient(circle at 50% 50%, rgba(185, 151, 75, 0.1), transparent 42rem),
    #0B2F22;
}
.sealed-envelope {
  position: absolute;
  left: 10vw;
  top: 18vh;
  width: min(38rem, 72vw);
  padding: clamp(2rem, 5vw, 4rem);
  clip-path: polygon(0 0, 100% 6%, 96% 100%, 4% 92%);
}
.seal-button {
  position: relative;
  width: clamp(15rem, 25vw, 25rem);
  aspect-ratio: 1;
  border: 2px solid var(--brass);
  border-radius: 50%;
  color: var(--moon);
  background:
    radial-gradient(circle, rgba(185, 151, 75, 0.3) 0 12%, transparent 13% 23%, rgba(111, 90, 40, 0.18) 24% 39%, transparent 40%),
    rgba(23, 76, 54, 0.82);
  box-shadow: 0 0 0 1rem rgba(185,151,75,0.06), 0 0 80px rgba(98,201,191,0.12), inset 0 0 40px rgba(11,47,34,0.82);
  cursor: pointer;
  transition: transform 500ms ease, box-shadow 500ms ease;
  z-index: 3;
}
.seal-button:hover { transform: rotate(-4deg) scale(1.035); box-shadow: 0 0 0 1.4rem rgba(185,151,75,0.09), 0 0 110px rgba(98,201,191,0.2), inset 0 0 40px rgba(11,47,34,0.82); }
.seal-button strong { display: block; font: 900 clamp(2.3rem, 5vw, 5rem)/1 var(--display); letter-spacing: 0.16em; }
.seal-button em { font-size: 0.68rem; color: var(--brass); font-style: normal; }
.seal-moon {
  display: block;
  width: 4rem;
  aspect-ratio: 1;
  border-radius: 50%;
  margin: 0 auto 1rem;
  background: var(--moon);
  box-shadow: -1rem 0 0 var(--pine);
}
.final-glow {
  position: absolute;
  width: 10rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(246,241,229,0.66), rgba(98,201,191,0.22), transparent 70%);
  opacity: 0;
  transform: scale(0.2);
  transition: opacity 700ms ease, transform 900ms ease;
}
body.seal-open .final-glow { opacity: 0.82; transform: scale(6.5); }
body.seal-open .seal-button { animation: sealFault 900ms steps(2, end) 1; }

.orbit-nav {
  position: fixed;
  left: clamp(1rem, 2vw, 2rem);
  top: 50%;
  width: 7rem;
  height: 17rem;
  border-left: 1px solid rgba(185, 151, 75, 0.34);
  border-radius: 50%;
  transform: translateY(-50%) rotate(8deg);
  z-index: 10;
}
.orbit-nav a {
  position: absolute;
  left: 0;
  color: var(--brass);
  font: 600 0.64rem/1 var(--mono);
  text-decoration: none;
  letter-spacing: 0.16em;
}
.orbit-nav a:nth-child(1) { top: 5%; transform: translateX(0.2rem); }
.orbit-nav a:nth-child(2) { top: 33%; transform: translateX(1.9rem); }
.orbit-nav a:nth-child(3) { top: 62%; transform: translateX(1.7rem); }
.orbit-nav a:nth-child(4) { top: 90%; transform: translateX(-0.1rem); }
.orbit-nav a::after { content: attr(data-mark); margin-left: 0.7rem; opacity: 0.55; }
.orbit-nav span { display: inline-block; width: 0.62rem; height: 0.62rem; border-radius: 50%; background: var(--brass); box-shadow: 0 0 12px rgba(185,151,75,0.7); }
.orbit-nav a.active span { background: var(--cyan); box-shadow: 0 0 18px rgba(98,201,191,0.9); }

.reveal { opacity: 0; transition: opacity 900ms ease, transform 900ms cubic-bezier(.2,.75,.2,1); }
.reveal[data-drift="left"] { transform: translate(-3rem, 2rem) rotate(var(--r, 0deg)); }
.reveal[data-drift="right"] { transform: translate(3rem, -2rem) rotate(var(--r, 0deg)); }
.reveal[data-drift="up"] { transform: translateY(3rem); }
.reveal.is-visible { opacity: 1; transform: translate(0,0) rotate(var(--r, 0deg)); }
.tilted-ledger.reveal { --r: -5deg; }
.hero-slip.reveal { --r: 7deg; }
.vellum-strip.reveal { --r: -8deg; }

@keyframes starRotate { to { transform: rotate(360deg); } }
@keyframes drawLine { to { stroke-dashoffset: 0; } }
@keyframes candlePulse { from { opacity: 0.45; transform: scale(0.82); } to { opacity: 1; transform: scale(1.08); } }
@keyframes veilDrift { to { transform: translateY(72px); } }
@keyframes glassFault {
  0%, 18%, 44%, 100% { opacity: 0; clip-path: inset(0 0 0 0); }
  19%, 28% { opacity: 0.72; clip-path: inset(8% 0 69% 0); }
  45%, 54% { opacity: 0.55; clip-path: inset(58% 0 17% 0); }
}
@keyframes cornerFault {
  0%, 100% { filter: none; transform: translate(0); }
  34% { filter: drop-shadow(4px 0 var(--cyan)) drop-shadow(-4px 0 var(--rose)); transform: translate(2px, -1px); }
  52% { filter: drop-shadow(-3px 0 var(--rose)); transform: translate(-1px, 2px); }
}
@keyframes sealFault {
  0%, 100% { filter: none; }
  28% { filter: drop-shadow(7px 0 var(--cyan)) drop-shadow(-7px 0 var(--rose)); }
  52% { filter: hue-rotate(18deg); }
}

@media (max-width: 760px) {
  .orbit-nav { display: none; }
  .chapter { padding: 5rem 1.4rem; }
  .hero-copy, .tilted-ledger, .constellation-specimen, .sealed-envelope { position: relative; left: auto; right: auto; top: auto; bottom: auto; width: auto; }
  .hero-copy { margin-top: 38vh; }
  .star-map { width: 38rem; right: -18rem; top: -10rem; }
  .annotation-panel, .hero-slip, .aperture, .vellum-strip { position: relative; left: auto; right: auto; top: auto; bottom: auto; margin: 2rem 0; width: auto; }
  .vertical-ribbon { display: none; }
  h1 { font-size: clamp(4rem, 22vw, 7rem); }
}