:root {
  /* Interpret “continua” as an elegant continuum rather than generic continuity: a sequence of states. Space Grotesk** in 600–700 weights. Use large Space Grotesk** wordmark slides in from the left as if pulled along an orbital rail. The user’s vertical scroll or wheel movement should translate into horizontal travel through the continuum. Each plate should have a distinct celestial state. */
  --star-milk: #F8FBFF;
  --violet: #B8A7FF;
  --midnight: #171A2E;
  --ink: #101018;
  --frost: #EAF7FF;
  --gold: #FFD86B;
  --rose: #F2A7C8;
  --cyan: #8FE7F2;
  --glass: rgba(234, 247, 255, 0.62);
  --space: "Space Grotesk", "Space", Inter, system-ui, sans-serif;
  --archivo: Archivo, Inter, system-ui, sans-serif;
  --fraunces: Fraunces, Georgia, serif;
}

* { box-sizing: border-box; }

html { height: 100%; scroll-behavior: smooth; }

body {
  min-height: 640vh;
  margin: 0;
  overflow-x: hidden;
  background: radial-gradient(circle at 12% 18%, rgba(143, 231, 242, .18), transparent 28%), linear-gradient(115deg, #101018 0%, #171A2E 58%, #101018 100%);
  color: var(--star-milk);
  font-family: var(--archivo);
}

.fixed-sky, .continuum-shell {
  position: fixed;
  inset: 0;
}

.fixed-sky { overflow: hidden; pointer-events: none; }

.fixed-sky::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(var(--frost) 1px, transparent 1px), radial-gradient(var(--gold) 1px, transparent 2px);
  background-size: 72px 72px, 190px 190px;
  opacity: .28;
}

.watercolor {
  position: absolute;
  filter: blur(18px) saturate(115%);
  border-radius: 42% 58% 62% 38% / 44% 42% 58% 56%;
  opacity: .72;
  mix-blend-mode: screen;
}

.wash-cyan { width: 42vw; height: 38vh; left: 8vw; top: 19vh; background: rgba(143, 231, 242, .44); animation: bloom 9s ease-in-out infinite; }
.wash-violet { width: 50vw; height: 52vh; right: -10vw; bottom: 3vh; background: rgba(184, 167, 255, .38); animation: bloom 12s ease-in-out infinite reverse; }
.wash-rose { width: 28vw; height: 27vh; left: 43vw; bottom: 12vh; background: rgba(242, 167, 200, .32); animation: bloom 10s ease-in-out infinite; }

.celestial-baseline {
  position: absolute;
  left: 0;
  right: 0;
  top: 53vh;
  height: 4px;
  background: var(--ink);
  box-shadow: 0 0 0 1px rgba(248,251,255,.35), 0 10px 0 rgba(143,231,242,.32);
}

.rail-ticks {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(53vh - 18px);
  height: 40px;
  background: repeating-linear-gradient(90deg, transparent 0 56px, rgba(248,251,255,.68) 56px 58px, transparent 58px 112px);
  opacity: .55;
}

.opening-star {
  position: fixed;
  z-index: 20;
  left: 50%;
  top: 45%;
  color: var(--gold);
  font-size: clamp(38px, 6vw, 86px);
  transform: translate(-50%, -50%) scale(.5);
  opacity: 0;
  animation: blinkOnce 1.55s ease forwards;
  pointer-events: none;
}

.continuum-shell { z-index: 2; overflow: hidden; }

.h-track {
  position: absolute;
  height: 100vh;
  display: flex;
  align-items: stretch;
  will-change: transform;
  transform: translate3d(0,0,0);
}

.plate {
  position: relative;
  flex: 0 0 96vw;
  height: 100vh;
  padding: clamp(24px, 4vw, 58px);
  isolation: isolate;
}

.plate-origin { flex-basis: 112vw; }
.plate-drift { flex-basis: 92vw; }
.plate-align { flex-basis: 108vw; }
.plate-echo { flex-basis: 94vw; }
.plate-return { flex-basis: 100vw; }

.wordmark-wrap {
  position: absolute;
  left: clamp(24px, 4vw, 58px);
  top: 12vh;
  transform: translateX(-18vw);
  opacity: 0;
  animation: wordmarkIn 1.35s cubic-bezier(.2,.8,.18,1) .72s forwards;
}

.wordmark {
  margin: 0;
  font-family: var(--space);
  font-size: clamp(86px, 17vw, 260px);
  line-height: .78;
  letter-spacing: -.085em;
  color: var(--frost);
  text-shadow: 5px 5px 0 var(--ink), 11px 11px 0 var(--violet);
  white-space: nowrap;
}

.ledger-label, .bracket-tab, .end-marker, .index-card {
  font-family: var(--archivo);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.ledger-label { margin: 0 0 12px; font-size: 12px; color: var(--gold); }

.bracket-tab {
  display: inline-block;
  margin-top: 18px;
  padding: 10px 18px;
  border: 3px solid var(--ink);
  background: var(--gold);
  color: var(--ink);
  box-shadow: 7px 7px 0 var(--cyan);
  transform: rotate(-1.5deg);
}

.frost-panel {
  position: absolute;
  border: 4px solid var(--ink);
  background: var(--glass);
  color: var(--ink);
  box-shadow: 12px 12px 0 var(--violet);
  backdrop-filter: blur(14px);
  padding: clamp(22px, 3vw, 42px);
  transition: opacity .45s ease, transform .55s ease, background-color .45s ease;
}

.frost-panel h2 {
  margin: 0 0 18px;
  font-family: var(--space);
  font-size: clamp(34px, 5vw, 82px);
  line-height: .9;
  letter-spacing: -.045em;
}

.frost-panel p { max-width: 620px; font-size: clamp(17px, 1.4vw, 22px); line-height: 1.34; }
.accent-line { font-family: var(--fraunces); font-style: italic; color: var(--midnight); font-size: clamp(24px, 2.7vw, 44px) !important; }

.intro-panel { width: 38vw; min-width: 420px; right: 11vw; bottom: 12vh; transform: rotate(1.5deg); }
.tall-panel { width: 46vw; min-width: 460px; left: 13vw; top: 14vh; box-shadow: -12px 12px 0 var(--cyan); }
.wide-panel { width: 60vw; min-width: 620px; left: 31vw; top: 26vh; box-shadow: 14px 14px 0 var(--gold); }
.final-panel { width: 56vw; min-width: 560px; left: 18vw; top: 18vh; box-shadow: 16px 16px 0 var(--violet); }

.bolt {
  position: absolute;
  width: 13px;
  height: 13px;
  background: var(--ink);
  border: 2px solid var(--star-milk);
}
.tl { left: 10px; top: 10px; } .tr { right: 10px; top: 10px; } .bl { left: 10px; bottom: 10px; } .br { right: 10px; bottom: 10px; }

.chapter-gate {
  position: absolute;
  z-index: 4;
  left: 3vw;
  top: 8vh;
  width: 74px;
  height: 78vh;
  border: 4px solid var(--ink);
  background: rgba(248, 251, 255, .82);
  color: var(--ink);
  box-shadow: 10px 10px 0 var(--rose);
  transform: rotate(-2deg);
}

.chapter-gate span {
  position: absolute;
  left: 50%;
  top: 50%;
  font-family: var(--space);
  font-weight: 700;
  letter-spacing: .16em;
  transform: translate(-50%, -50%) rotate(-90deg);
  font-size: 18px;
}

.gate-origin { left: auto; right: 10vw; top: 5vh; }
.gate-tilt { transform: rotate(3deg); box-shadow: 10px 10px 0 var(--cyan); }
.gate-return { box-shadow: 10px 10px 0 var(--gold); }

.draw-star {
  position: absolute;
  right: 18vw;
  top: 12vh;
  width: 160px;
  fill: rgba(255,216,107,.18);
  stroke: var(--gold);
  stroke-width: 5;
  stroke-linejoin: bevel;
  stroke-dasharray: 830;
  stroke-dashoffset: 830;
  animation: drawStar 4s ease-in-out 1s infinite;
}

.local { z-index: -1; }
.local-cyan { width: 38vw; height: 44vh; left: 24vw; top: 35vh; background: rgba(143,231,242,.55); animation: bloom 8s ease-in-out infinite; }
.local-gold { width: 30vw; height: 30vh; left: 42vw; top: 16vh; background: rgba(255,216,107,.46); animation: bloom 7s ease-in-out infinite reverse; }
.local-rose { width: 48vw; height: 38vh; left: 8vw; bottom: 11vh; background: rgba(242,167,200,.5); animation: bloom 9s ease-in-out infinite; }
.local-violet { width: 44vw; height: 45vh; left: 32vw; top: 28vh; background: rgba(184,167,255,.52); animation: bloom 10s ease-in-out infinite reverse; }

.orbit-window {
  position: absolute;
  right: 7vw;
  bottom: 11vh;
  width: 310px;
  height: 310px;
  border: 4px solid var(--ink);
  border-radius: 50%;
  background: rgba(234,247,255,.35);
  box-shadow: 12px 12px 0 var(--cyan);
  backdrop-filter: blur(12px);
}
.eclipse-disc { position: absolute; width: 88px; height: 88px; left: 105px; top: 105px; border-radius: 50%; background: var(--midnight); box-shadow: inset -18px 0 0 var(--violet), 0 0 0 4px var(--ink); }
.orbit-line { position: absolute; inset: 34px; border: 3px solid var(--ink); border-left-color: transparent; border-radius: 50%; animation: orbit 12s steps(36) infinite; }
.orbit-two { inset: 70px 24px; transform: rotate(62deg); animation-duration: 16s; border-color: var(--gold); border-right-color: transparent; }
.node { position: absolute; width: 14px; height: 14px; background: var(--gold); border: 3px solid var(--ink); border-radius: 50%; }
.n1 { left: 40px; top: 62px; } .n2 { right: 54px; top: 84px; } .n3 { left: 135px; bottom: 28px; }

.side-note {
  position: absolute;
  left: 51vw;
  bottom: 17vh;
  width: 280px;
  font-family: var(--fraunces);
  font-style: italic;
  font-size: 32px;
  color: var(--frost);
}

.index-card {
  position: absolute;
  left: 16vw;
  top: 16vh;
  display: grid;
  border: 4px solid var(--ink);
  color: var(--ink);
  background: var(--gold);
  box-shadow: 10px 10px 0 var(--rose);
}
.index-card span { padding: 10px 16px; border-bottom: 3px solid var(--ink); }
.index-card span:last-child { border-bottom: 0; }
.asterisk-anchor { position: absolute; right: 6vw; top: 10vh; font-size: 140px; color: var(--gold); text-shadow: 5px 5px 0 var(--ink); animation: pulsePin 4s ease-in-out infinite; }

.constellation-map {
  position: relative;
  height: 120px;
  margin-top: 20px;
  background: linear-gradient(32deg, transparent 47%, var(--ink) 48% 50%, transparent 51%), linear-gradient(-15deg, transparent 56%, var(--ink) 57% 59%, transparent 60%);
}
.constellation-map span { position: absolute; width: 18px; height: 18px; border: 3px solid var(--ink); background: var(--cyan); transform: rotate(45deg); }
.constellation-map span:nth-child(1) { left: 8%; top: 56%; } .constellation-map span:nth-child(2) { left: 26%; top: 18%; } .constellation-map span:nth-child(3) { left: 48%; top: 66%; } .constellation-map span:nth-child(4) { left: 70%; top: 34%; } .constellation-map span:nth-child(5) { left: 88%; top: 58%; }

.stacked-panels { position: absolute; left: 16vw; top: 18vh; width: 52vw; height: 62vh; }
.small-panel { width: 38vw; min-width: 410px; left: 0; top: 0; }
.offset-panel { left: 12vw; top: 30vh; box-shadow: 12px 12px 0 var(--rose); transform: rotate(-1.8deg); }
.transit-svg { position: absolute; right: 5vw; bottom: 12vh; width: 42vw; min-width: 430px; fill: var(--gold); stroke: var(--ink); stroke-width: 5; overflow: visible; }
.dotted-path { fill: none; stroke: var(--frost); stroke-width: 4; stroke-dasharray: 2 18; animation: dashTransit 9s linear infinite; }

.end-marker {
  position: absolute;
  right: 7vw;
  bottom: 10vh;
  padding: 16px 22px;
  border: 4px solid var(--ink);
  background: var(--frost);
  color: var(--ink);
  box-shadow: 9px 9px 0 var(--gold);
}

.scroll-meter {
  position: fixed;
  z-index: 12;
  left: 24px;
  right: 24px;
  bottom: 18px;
  height: 14px;
  border: 3px solid var(--ink);
  background: rgba(234,247,255,.22);
}
.scroll-meter span { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--cyan), var(--violet), var(--gold)); transition: width .12s linear; }

.is-centered .frost-panel { opacity: .98; background: rgba(234, 247, 255, .78); transform: translateY(-6px) rotate(var(--tilt, 0deg)); }
.plate:not(.is-centered) .frost-panel { opacity: .72; }

@keyframes blinkOnce { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(0deg); } 38% { opacity: 1; transform: translate(-50%, -50%) scale(1.2) rotate(45deg); } 72% { opacity: .85; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(.65) rotate(90deg); } }
@keyframes wordmarkIn { to { opacity: 1; transform: translateX(0); } }
@keyframes bloom { 0%, 100% { transform: scale(.92) rotate(-3deg); border-radius: 42% 58% 62% 38% / 44% 42% 58% 56%; } 50% { transform: scale(1.08) rotate(4deg); border-radius: 58% 42% 39% 61% / 50% 62% 38% 50%; } }
@keyframes drawStar { 0% { stroke-dashoffset: 830; opacity: .25; } 35%, 70% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: -830; opacity: .35; } }
@keyframes orbit { to { transform: rotate(360deg); } }
@keyframes pulsePin { 0%,100% { transform: scale(.96) rotate(-3deg); } 50% { transform: scale(1.04) rotate(3deg); } }
@keyframes dashTransit { to { stroke-dashoffset: -160; } }

@media (max-width: 760px) {
  body { min-height: 760vh; }
  .plate { flex-basis: 118vw; padding: 22px; }
  .wordmark { font-size: 92px; }
  .intro-panel, .tall-panel, .wide-panel, .final-panel, .small-panel { min-width: 0; width: 78vw; left: 16vw; right: auto; }
  .wide-panel { top: 31vh; }
  .orbit-window { right: 6vw; width: 210px; height: 210px; }
  .eclipse-disc { left: 68px; top: 68px; }
  .transit-svg { min-width: 0; width: 82vw; }
}