:root {
  --slate: #5E6670;
  --wine: #3D1420;
  --birch: #E7D8C2;
  --lingonberry: #6E1F32;
  --brass: #C8A35D;
  --cream: #F7F0E3;
  --commissioner: "Commissioner", system-ui, sans-serif;
  --cormorant: "Cormorant Garamond", Georgia, serif;
  --inter: "Inter", system-ui, sans-serif;
  --design-font-token: "Inter**";
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--inter);
  color: var(--wine);
  background:
    radial-gradient(circle at 10% 8%, rgba(200, 163, 93, 0.17), transparent 24rem),
    radial-gradient(circle at 94% 0%, rgba(110, 31, 50, 0.20), transparent 33rem),
    linear-gradient(135deg, var(--cream) 0%, #fbf6ed 44%, var(--birch) 100%);
  min-height: 100vh;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(61, 20, 32, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(61, 20, 32, 0.03) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(circle at center, black, transparent 78%);
  z-index: 1;
}

.opening-screen {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 50%, var(--cream) 0 42%, rgba(231, 216, 194, 0.92) 64%, rgba(110, 31, 50, 0.20) 100%);
  animation: openingFade 2.45s ease forwards;
  pointer-events: none;
}

.opening-star {
  width: 16px;
  height: 16px;
  background: var(--brass);
  clip-path: polygon(50% 0, 60% 38%, 100% 50%, 60% 62%, 50% 100%, 40% 62%, 0 50%, 40% 38%);
  filter: drop-shadow(0 0 18px rgba(200, 163, 93, 0.9));
  animation: starBlink 1.2s ease both;
}

.paper-lift {
  position: absolute;
  inset: auto 0 0;
  height: 52vh;
  background: var(--cream);
  box-shadow: 0 -24px 80px rgba(61, 20, 32, 0.15);
  animation: paperLift 2.2s cubic-bezier(.2,.8,.2,1) forwards;
}

.constellation-index {
  position: fixed;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.index-node {
  position: relative;
  width: 12px;
  height: 12px;
  text-decoration: none;
}

.index-node span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--birch);
  border: 1px solid var(--lingonberry);
  transition: transform .45s ease, background .45s ease, box-shadow .45s ease;
}

.index-node::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 12px;
  width: 1px;
  height: 22px;
  background: rgba(110, 31, 50, 0.28);
}

.index-node:last-child::before { display: none; }

.index-node::after {
  content: attr(data-label);
  position: absolute;
  right: 22px;
  top: -4px;
  white-space: nowrap;
  font: 500 10px/1 var(--commissioner);
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--lingonberry);
  opacity: 0;
  transform: translateX(8px);
  transition: opacity .35s ease, transform .35s ease;
}

.index-node:hover::after,
.index-node.active::after { opacity: 1; transform: translateX(0); }
.index-node.active span { background: var(--brass); transform: scale(1.35); box-shadow: 0 0 0 6px rgba(200, 163, 93, 0.16); }

.observatory { position: relative; z-index: 2; }

.chapter {
  position: relative;
  min-height: 100vh;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
  align-items: center;
  padding: 9vh 8vw;
  overflow: hidden;
  isolation: isolate;
}

.chapter::after {
  content: "✶";
  position: absolute;
  right: 12vw;
  bottom: 10vh;
  color: var(--brass);
  font-size: 26px;
  opacity: .64;
  transform: rotate(var(--star-rotation, 0deg));
}

.hero { padding-top: 12vh; }

.star-field,
.distant-orbit,
.calibration-map,
.snow-gradient {
  position: absolute;
  inset: 6vh 7vw;
  z-index: -3;
  border-radius: 38px;
}

.star-field {
  background: radial-gradient(circle at 72% 22%, rgba(61, 20, 32, .10), transparent 20rem);
}

.constellation-lines {
  position: absolute;
  width: min(70vw, 920px);
  height: auto;
  right: -3vw;
  top: 6vh;
  overflow: visible;
}

.constellation-lines path {
  fill: none;
  stroke: var(--lingonberry);
  stroke-width: 1.2;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  opacity: .55;
  animation: drawConstellation 3.3s 1.1s ease forwards;
}

.constellation-lines circle {
  fill: var(--brass);
  opacity: 0;
  animation: nodeAppear .8s 2s ease forwards;
}

.paper-slab,
.cream-window {
  position: absolute;
  background: rgba(247, 240, 227, .80);
  border: 1px solid rgba(231, 216, 194, .9);
  box-shadow: 0 34px 90px rgba(61, 20, 32, .16), inset 0 1px rgba(255,255,255,.78);
  backdrop-filter: blur(5px);
  z-index: -1;
}

.slab-wide {
  width: 58vw;
  height: 62vh;
  left: 7vw;
  top: 18vh;
  border-radius: 10px 44px 10px 44px;
  transform: rotate(-2deg);
}

.slab-small {
  width: 25vw;
  height: 31vh;
  right: 15vw;
  bottom: 14vh;
  background: rgba(231,216,194,.68);
  transform: rotate(4deg);
}

.copy-plane {
  grid-column: 1 / span 6;
  position: relative;
  z-index: 4;
  transition: transform .4s ease-out;
}

.hero-copy { animation: wordmarkRise 1.5s .55s cubic-bezier(.2,.8,.2,1) both; }

.chapter-label {
  margin: 0 0 20px;
  font: 600 11px/1 var(--commissioner);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--lingonberry);
}

h1, h2 {
  margin: 0;
  font-family: var(--commissioner);
  font-weight: 500;
  letter-spacing: -.045em;
  color: var(--wine);
}

h1 { font-size: clamp(4.5rem, 13vw, 12rem); line-height: .78; }
h2 { font-size: clamp(3rem, 7vw, 7.8rem); line-height: .9; max-width: 900px; }

p {
  font: 400 clamp(1rem, 1.35vw, 1.22rem)/1.8 var(--inter);
  color: var(--slate);
  max-width: 620px;
}

.serif-line,
blockquote {
  font-family: var(--cormorant);
  font-size: clamp(1.55rem, 3vw, 3rem);
  line-height: 1.08;
  color: var(--lingonberry);
  max-width: 680px;
}

blockquote {
  margin: 32px 0 0;
  padding-left: 28px;
  border-left: 1px solid var(--brass);
  color: var(--cream);
}

.artifact {
  position: absolute;
  z-index: 3;
  filter: drop-shadow(24px 34px 30px rgba(61, 20, 32, .20));
  transition: transform .4s ease-out;
  transform-style: preserve-3d;
}

.observatory-table {
  right: 13vw;
  top: 29vh;
  width: 310px;
  height: 220px;
  animation: artifactFloat 7s ease-in-out infinite;
}

.iso-table-top {
  position: absolute;
  width: 260px;
  height: 145px;
  left: 24px;
  top: 22px;
  background: linear-gradient(135deg, var(--birch), var(--cream));
  transform: skewY(-24deg) rotate(8deg);
  border: 2px solid rgba(110,31,50,.22);
}

.iso-table-top span {
  position: absolute;
  background: var(--lingonberry);
  opacity: .72;
}
.iso-table-top span:nth-child(1){width: 84px;height: 2px;left: 36px;top: 38px;transform: rotate(24deg)}
.iso-table-top span:nth-child(2){width: 56px;height: 56px;right: 38px;top: 36px;border-radius: 50%;background: transparent;border: 2px solid var(--brass)}
.iso-table-top span:nth-child(3){width: 118px;height: 2px;left: 80px;bottom: 36px;transform: rotate(-12deg)}

.iso-table-side { position:absolute; background: var(--lingonberry); opacity:.95; }
.iso-table-side.left { width: 45px; height: 145px; left: 5px; top: 69px; transform: skewY(31deg); background: #6E1F32; }
.iso-table-side.right { width: 260px; height: 42px; left: 26px; top: 164px; transform: skewX(-58deg); background: #3D1420; }

.brass-instrument { position:absolute; width: 72px; height: 72px; right: 58px; top: 28px; border-radius:50%; border:2px solid var(--brass); transform: rotateX(55deg) rotateZ(25deg); }
.brass-instrument i { position:absolute; left:50%; top:-20px; width:2px; height:112px; background:var(--brass); transform:rotate(38deg); }

.lower-left { grid-column: 1 / span 5; align-self: end; margin-bottom: 8vh; }

.paper-stack {
  position: absolute;
  right: 10vw;
  top: 15vh;
  width: 52vw;
  height: 68vh;
  z-index: -1;
}
.paper-stack div { position:absolute; inset:0; border:1px solid rgba(110,31,50,.12); background:rgba(247,240,227,.68); box-shadow:0 28px 70px rgba(61,20,32,.12); }
.paper-stack div:nth-child(1){ transform:translate(0,0) rotate(2deg); }
.paper-stack div:nth-child(2){ transform:translate(24px,20px) rotate(-1deg); background:rgba(231,216,194,.70); }
.paper-stack div:nth-child(3){ transform:translate(48px,42px) rotate(3deg); background:rgba(247,240,227,.50); }

.distant-orbit { border: 1px solid rgba(94,102,112,.22); transform: rotate(-11deg); }
.distant-orbit::before, .distant-orbit::after { content:""; position:absolute; border:1px solid rgba(200,163,93,.55); border-radius:50%; }
.distant-orbit::before { width:36vw; height:36vw; right:10vw; top:4vh; }
.distant-orbit::after { width:12px; height:12px; right:28vw; top:18vh; background:var(--brass); }

.instrument-cluster { right: 14vw; bottom: 22vh; width: 330px; height: 270px; animation: artifactFloat 8s -1s ease-in-out infinite; }
.archive-box { position:absolute; width:160px; height:92px; left:92px; top:114px; background:var(--lingonberry); transform:skewY(-22deg) rotate(8deg); border:8px solid #3D1420; }
.archive-box::before { content:""; position:absolute; inset:-42px 18px auto; height:48px; background:var(--birch); border:1px solid rgba(61,20,32,.18); transform:skewX(42deg); }
.paper-map { position:absolute; left:8px; top:32px; width:142px; height:112px; background:var(--cream); transform:rotate(-13deg) skewY(-10deg); border:1px solid rgba(110,31,50,.18); }
.paper-map span { position:absolute; inset:20px; border-top:1px solid var(--brass); border-bottom:1px solid var(--lingonberry); opacity:.75; }
.floating-compass { position:absolute; right:18px; top:6px; width:96px; height:96px; border:2px solid var(--brass); border-radius:50%; background:rgba(247,240,227,.72); }
.floating-compass span, .floating-compass i { position:absolute; left:47px; top:10px; width:2px; height:76px; background:var(--lingonberry); transform:rotate(36deg); }
.floating-compass i { transform:rotate(-54deg); background:var(--brass); }

.burgundy-chapter {
  background: radial-gradient(circle at 80% 26%, rgba(200,163,93,.18), transparent 22rem), linear-gradient(145deg, var(--lingonberry), var(--wine));
  color: var(--cream);
}
.burgundy-chapter h2, .burgundy-chapter .chapter-label { color: var(--cream); }
.burgundy-chapter p { color: rgba(247,240,227,.72); }
.cream-window { right: 5vw; top: 10vh; width: 58vw; height: 74vh; border-radius: 44px 6px 44px 6px; background: rgba(247,240,227,.13); border-color: rgba(231,216,194,.28); }
.side-plane { grid-column: 2 / span 6; }
.calibration-map { opacity:.75; background-image: radial-gradient(circle, rgba(200,163,93,.55) 1px, transparent 2px); background-size: 78px 78px; }
.calibration-map span { position:absolute; height:1px; width:26vw; background:rgba(200,163,93,.45); transform-origin:left center; }
.calibration-map span:nth-child(1){left:14vw;top:16vh;transform:rotate(22deg)}
.calibration-map span:nth-child(2){left:35vw;top:38vh;transform:rotate(-18deg)}
.calibration-map span:nth-child(3){left:9vw;bottom:20vh;transform:rotate(8deg)}
.calibration-map span:nth-child(4){right:7vw;bottom:32vh;transform:rotate(-42deg)}

.prism-room { right: 10vw; top: 27vh; width: 390px; height: 330px; animation: artifactFloat 9s -2s ease-in-out infinite; }
.prism { position:absolute; left:130px; top:18px; width:0; height:0; border-left:70px solid transparent; border-right:70px solid transparent; border-bottom:150px solid rgba(200,163,93,.72); filter:drop-shadow(0 20px 18px rgba(0,0,0,.18)); }
.room-tile { position:absolute; width:150px; height:110px; background:var(--birch); border:2px solid rgba(61,20,32,.28); transform:skewY(-25deg) rotate(8deg); }
.room-tile.a { left:20px; bottom:66px; }
.room-tile.b { left:144px; bottom:40px; background:var(--cream); }
.room-tile.c { right:8px; bottom:88px; background:#C8A35D; }

.final { background: linear-gradient(180deg, var(--cream), #fffaf2 48%, var(--birch)); }
.snow-gradient { background: radial-gradient(circle at 48% 35%, rgba(255,255,255,.86), transparent 22rem), radial-gradient(circle at 16% 80%, rgba(94,102,112,.13), transparent 24rem); }
.final-slab { width: 68vw; height: 66vh; right: 9vw; top: 18vh; border-radius: 50px 8px 50px 8px; transform: rotate(1.6deg); }
.final-copy { grid-column: 2 / span 6; }
.star-label { display:inline-flex; align-items:center; gap:12px; margin-top:28px; color:var(--lingonberry); text-decoration:none; font:600 12px/1 var(--commissioner); letter-spacing:.24em; text-transform:uppercase; }
.star-label span { color:var(--brass); font-size:22px; transition:transform .45s ease; }
.star-label:hover span { transform:rotate(90deg) scale(1.15); }
.birch-plinth { right: 15vw; bottom: 16vh; width: 280px; height: 230px; animation: artifactFloat 8s -3s ease-in-out infinite; }
.plinth-top { position:absolute; width:210px; height:128px; left:34px; top:35px; background:linear-gradient(135deg, var(--birch), var(--cream)); transform:skewY(-24deg) rotate(8deg); border:1px solid rgba(110,31,50,.18); }
.plinth-side { position:absolute; width:210px; height:54px; left:36px; top:162px; background:#E7D8C2; transform:skewX(-58deg); border-bottom:8px solid rgba(110,31,50,.2); }
.lunar-arc { position:absolute; width:150px; height:150px; left:66px; top:8px; border:2px solid transparent; border-top-color:var(--brass); border-left-color:var(--brass); border-radius:50%; transform:rotate(34deg); }

[data-parallax] { will-change: transform; }
.is-visible .paper-slab, .is-visible .paper-stack, .is-visible .cream-window { box-shadow: 0 46px 110px rgba(61, 20, 32, .20), inset 0 1px rgba(255,255,255,.74); }
.is-visible .artifact { transform: rotate(var(--scroll-tilt, 0deg)); }

@keyframes openingFade { 0%,72%{opacity:1} 100%{opacity:0;visibility:hidden} }
@keyframes starBlink { 0%{opacity:0;transform:scale(.4) rotate(0)} 35%{opacity:1;transform:scale(1.4) rotate(45deg)} 68%{opacity:.5;transform:scale(.9) rotate(90deg)} 100%{opacity:1;transform:scale(1) rotate(135deg)} }
@keyframes paperLift { 0%{transform:translateY(0)} 100%{transform:translateY(-116vh)} }
@keyframes wordmarkRise { 0%{opacity:0;transform:translateY(58px)} 100%{opacity:1;transform:translateY(0)} }
@keyframes drawConstellation { to { stroke-dashoffset: 0; } }
@keyframes nodeAppear { to { opacity: 1; } }
@keyframes artifactFloat { 0%,100%{ translate:0 0; rotate:-1deg; } 50%{ translate:0 -18px; rotate:3deg; } }

@media (max-width: 900px) {
  .chapter { display:block; padding: 14vh 8vw; }
  .copy-plane, .lower-left, .side-plane, .final-copy { max-width: 86vw; margin: 0; }
  .artifact { opacity:.42; transform: scale(.78); right: 2vw; }
  .constellation-index { right: 14px; }
  h1 { font-size: clamp(4rem, 22vw, 7rem); }
  h2 { font-size: clamp(2.8rem, 13vw, 5.5rem); }
  .slab-wide, .final-slab { width: 86vw; left: 4vw; right:auto; }
}