:root {
  /* Compliance echo: IBM Plex Mono** sparingly coordinate stamps */
  --moon-vellum: #F4F0E6;
  --ether-blue: #BFDFFF;
  --deep-observatory: #10233F;
  --star-ink: #355D88;
  --pale-cyan: #DDF8FF;
  --old-brass: #B99A5B;
  --error-carmine: #C24A5A;
  --commissioner: "Commissioner", "Inter", system-ui, sans-serif;
  --cormorant: "Cormorant Garamond", Georgia, serif;
  --plex: "IBM Plex Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--deep-observatory);
  font-family: var(--commissioner);
  background:
    radial-gradient(circle at 20% 10%, rgba(221, 248, 255, 0.34), transparent 28rem),
    radial-gradient(circle at 84% 62%, rgba(191, 223, 255, 0.24), transparent 34rem),
    linear-gradient(145deg, #10233F 0%, #17365f 44%, #10233F 100%);
}

#starfield,
.atmosphere {
  position: fixed;
  inset: 0;
  pointer-events: none;
}

#starfield { z-index: 0; }

.atmosphere {
  z-index: 1;
  opacity: 0.72;
  background:
    linear-gradient(90deg, rgba(244, 240, 230, 0.04) 1px, transparent 1px) 0 0 / 72px 72px,
    linear-gradient(0deg, rgba(191, 223, 255, 0.035) 1px, transparent 1px) 0 0 / 72px 72px,
    radial-gradient(circle at 50% 50%, transparent 0 48%, rgba(16, 35, 63, 0.38) 80%);
  mix-blend-mode: screen;
}

.atlas-scroll { position: relative; z-index: 2; }

.plate {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  display: grid;
  place-items: center;
  padding: clamp(2rem, 6vw, 6rem);
  overflow: hidden;
}

.paper {
  position: relative;
  background:
    radial-gradient(circle at 12% 22%, rgba(185, 154, 91, 0.18) 0 0.18rem, transparent 0.22rem),
    radial-gradient(circle at 78% 36%, rgba(194, 74, 90, 0.09) 0 0.14rem, transparent 0.18rem),
    linear-gradient(113deg, rgba(255,255,255,0.38), transparent 24%),
    repeating-linear-gradient(92deg, rgba(53, 93, 136, 0.045) 0 1px, transparent 1px 12px),
    var(--moon-vellum);
  box-shadow: 0 2.2rem 5rem rgba(0, 0, 0, 0.34), inset 0 0 0 1px rgba(53, 93, 136, 0.18);
  clip-path: polygon(1.2% 0, 98.4% 1.1%, 100% 96.5%, 96.2% 100%, 2.4% 99%, 0 3.6%);
}

.paper::before,
.paper::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.paper::before {
  inset: 1.2rem;
  border: 1px solid rgba(53, 93, 136, 0.22);
  border-left-color: rgba(185, 154, 91, 0.34);
}

.paper::after {
  inset: 0;
  background:
    linear-gradient(90deg, transparent 49.6%, rgba(53, 93, 136, 0.1) 50%, transparent 50.4%),
    linear-gradient(174deg, transparent 38%, rgba(185,154,91,0.12) 38.25%, transparent 38.7%);
  opacity: 0.7;
}

.stamp,
.tab,
.kicker,
.coordinate-readout,
.final-stamp,
.stamp-button {
  font-family: var(--plex);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.stamp {
  display: inline-block;
  color: var(--star-ink);
  font-size: 0.74rem;
  border: 1px solid rgba(53, 93, 136, 0.36);
  padding: 0.42rem 0.62rem;
  transform: rotate(-1.2deg);
}

.brass { color: var(--old-brass); border-color: rgba(185,154,91,0.52); }
.carmine { color: var(--error-carmine); border-color: rgba(194,74,90,0.56); }

.hero-sheet {
  width: min(74rem, 86vw);
  min-height: 54vh;
  padding: clamp(2rem, 5vw, 5rem);
  transform: rotate(-1.6deg);
}

h1,
h2,
p { margin: 0; }

h1 {
  display: flex;
  flex-wrap: wrap;
  gap: 0.04em 0.16em;
  margin-top: 10vh;
  color: var(--deep-observatory);
  font-size: clamp(4rem, 15vw, 13rem);
  line-height: 0.78;
  font-weight: 800;
  letter-spacing: -0.08em;
}

h1 span:nth-child(2) { transform: translateY(0.22em); color: var(--star-ink); }
h1 span:nth-child(3) { color: var(--old-brass); }

h2 {
  max-width: 11ch;
  color: var(--deep-observatory);
  font-size: clamp(2.6rem, 7vw, 7rem);
  line-height: 0.9;
  font-weight: 800;
  letter-spacing: -0.06em;
}

p {
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  line-height: 1.7;
  font-weight: 500;
}

.caption {
  max-width: 38rem;
  margin-top: 2rem;
  font-family: var(--cormorant);
  font-size: clamp(1.35rem, 2.3vw, 2rem);
  font-style: italic;
  color: var(--star-ink);
}

.coordinate-readout {
  position: absolute;
  right: 6vw;
  bottom: 12vh;
  color: var(--pale-cyan);
  font-size: 0.85rem;
  border-left: 2px solid var(--old-brass);
  padding: 0.8rem 0 0.8rem 1rem;
  text-shadow: 0 0 1rem rgba(221, 248, 255, 0.55);
}

.orbit {
  position: absolute;
  width: min(48rem, 80vw);
  right: -8rem;
  top: 3rem;
  fill: none;
  stroke: var(--ether-blue);
  stroke-width: 1.4;
  opacity: 0.42;
  animation: breathe 8s ease-in-out infinite;
}

.orbit path { stroke: var(--old-brass); stroke-dasharray: 8 12; }

.edge-nav {
  position: fixed;
  z-index: 5;
  top: 50%;
  right: 1.1rem;
  transform: translateY(-50%);
  display: grid;
  gap: 1rem;
}

.edge-nav a {
  color: rgba(221, 248, 255, 0.62);
  font-family: var(--plex);
  font-size: 0.7rem;
  text-decoration: none;
  writing-mode: vertical-rl;
  border-left: 1px solid rgba(191, 223, 255, 0.28);
  padding-left: 0.38rem;
}

.plate-fold {
  background: radial-gradient(circle at 70% 30%, rgba(244,240,230,0.13), transparent 24rem);
}

.map-sheet {
  width: min(58rem, 76vw);
  padding: clamp(2rem, 5vw, 4.8rem);
  justify-self: start;
  transform: rotate(2.2deg);
}

.map-sheet p,
.chamber-sheet p { max-width: 34rem; margin-top: 1.6rem; color: rgba(16,35,63,0.82); }

.tab {
  position: absolute;
  top: -1.15rem;
  left: 11%;
  background: var(--old-brass);
  color: var(--deep-observatory);
  padding: 0.58rem 1rem;
  font-size: 0.72rem;
}

.annotation {
  position: absolute;
  max-width: 18rem;
  color: var(--pale-cyan);
  font-family: var(--cormorant);
  font-size: 1.35rem;
  line-height: 1.45;
  border-top: 1px solid rgba(191, 223, 255, 0.35);
  padding-top: 1rem;
}

.annotation strong {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--old-brass);
  font-family: var(--plex);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.annotation-right { right: 10vw; bottom: 18vh; }

.compass {
  position: absolute;
  right: 10%;
  bottom: 10%;
  width: 12rem;
  aspect-ratio: 1;
  border: 1px solid rgba(53,93,136,0.35);
  border-radius: 50%;
}

.compass::before,
.compass::after,
.compass span {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 11rem;
  height: 1px;
  background: rgba(53,93,136,0.35);
  transform-origin: 0 0;
}
.compass::before { transform: rotate(0deg) translateX(-50%); }
.compass::after { transform: rotate(90deg) translateX(-50%); }
.compass span { transform: rotate(34deg) translateX(-50%); }

.fold-line {
  position: absolute;
  width: 140vw;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(185,154,91,0.55), transparent);
}
.fold-one { transform: rotate(-24deg); }
.fold-two { transform: rotate(18deg); opacity: 0.7; }

.plate-chart { color: var(--pale-cyan); }

.star-index {
  position: absolute;
  left: 8vw;
  top: 12vh;
  color: var(--pale-cyan);
}

.star-index h2 {
  max-width: 12ch;
  color: var(--pale-cyan);
  text-shadow: 0 0 2rem rgba(191,223,255,0.25);
}

.kicker {
  margin-bottom: 1rem;
  color: var(--old-brass);
  font-size: 0.72rem;
}

.constellation-lines {
  width: min(78rem, 94vw);
  overflow: visible;
  filter: drop-shadow(0 0 1rem rgba(191, 223, 255, 0.34));
}

.draw-line {
  fill: none;
  stroke: var(--ether-blue);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1500;
  stroke-dashoffset: calc(1500 - (var(--scroll-progress, 0) * 1500));
}

.draw-line.delay { stroke: var(--star-ink); stroke-dashoffset: calc(1500 - (max(var(--scroll-progress, 0) - 0.14, 0) * 1700)); }

.star-dots circle {
  fill: var(--pale-cyan);
  stroke: var(--deep-observatory);
  stroke-width: 2;
  animation: twinkle 3.4s ease-in-out infinite alternate;
}

.index-card {
  position: absolute;
  right: 8vw;
  bottom: 10vh;
  width: min(26rem, 78vw);
  padding: 2rem;
  transform: rotate(-2.4deg);
}

.plate-calibrate {
  background:
    radial-gradient(circle at 30% 52%, rgba(194, 74, 90, 0.15), transparent 23rem),
    radial-gradient(circle at 65% 32%, rgba(191, 223, 255, 0.18), transparent 28rem);
}

.calibration-grid {
  position: absolute;
  inset: 12vh 10vw;
  border: 1px solid rgba(194,74,90,0.22);
  background:
    linear-gradient(90deg, rgba(194,74,90,0.13) 1px, transparent 1px) 0 0 / 6rem 6rem,
    linear-gradient(0deg, rgba(194,74,90,0.13) 1px, transparent 1px) 0 0 / 6rem 6rem;
  transform: rotate(-1.2deg);
}

.chamber-sheet {
  width: min(52rem, 82vw);
  padding: clamp(2rem, 5vw, 5rem);
  transform: rotate(1.1deg);
}

.stamp-button {
  position: absolute;
  right: 12vw;
  bottom: 14vh;
  border: 1px solid rgba(221,248,255,0.48);
  background: rgba(16,35,63,0.62);
  color: var(--pale-cyan);
  padding: 1rem 1.15rem;
  cursor: pointer;
  box-shadow: 0 0 2rem rgba(191,223,255,0.15);
}

.stamp-button:hover { border-color: var(--old-brass); color: var(--old-brass); }

.correction-mark {
  position: absolute;
  left: 17vw;
  bottom: 18vh;
  color: var(--error-carmine);
  font-family: var(--cormorant);
  font-size: 12rem;
  font-style: italic;
  opacity: 0.24;
  transform: rotate(-12deg);
}

.is-calibrating { animation: calibrationShake 560ms cubic-bezier(.36,.07,.19,.97); }

.plate-horizon {
  background: linear-gradient(180deg, transparent, rgba(244,240,230,0.08) 65%, rgba(191,223,255,0.18));
}

.horizon-glow {
  position: absolute;
  left: -10vw;
  right: -10vw;
  bottom: -22vh;
  height: 45vh;
  background: radial-gradient(ellipse at center, rgba(221,248,255,0.58), rgba(191,223,255,0.2) 36%, transparent 68%);
}

.final-coordinate {
  text-align: center;
  color: var(--pale-cyan);
}

.final-coordinate h2 {
  max-width: none;
  color: var(--moon-vellum);
  font-size: clamp(4rem, 13vw, 12rem);
}

.final-coordinate .caption { margin-inline: auto; color: var(--ether-blue); }

.final-stamp {
  display: inline-block;
  margin-top: 2rem;
  color: var(--deep-observatory);
  background: var(--moon-vellum);
  text-decoration: none;
  padding: 1rem 1.25rem;
  box-shadow: 0 1rem 3rem rgba(0,0,0,0.26);
  transform: rotate(-1deg);
}

.slide-note,
.drift-layer,
.calibration-target { transition: transform 700ms ease, opacity 700ms ease; }

@keyframes breathe {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.34; }
  50% { transform: scale(1.035) rotate(1.2deg); opacity: 0.58; }
}

@keyframes twinkle {
  from { transform: scale(0.8); opacity: 0.55; }
  to { transform: scale(1.22); opacity: 1; }
}

@keyframes calibrationShake {
  10%, 90% { transform: translate3d(-1px, 0, 0) rotate(1.1deg); }
  20%, 80% { transform: translate3d(2px, -1px, 0) rotate(0.6deg); }
  30%, 50%, 70% { transform: translate3d(-4px, 1px, 0) rotate(1.7deg); }
  40%, 60% { transform: translate3d(4px, 0, 0) rotate(0.2deg); }
}

@media (max-width: 760px) {
  .plate { padding: 5rem 1.25rem; place-items: center; }
  .hero-sheet, .map-sheet, .chamber-sheet { width: 94vw; }
  .annotation, .coordinate-readout, .stamp-button { position: relative; inset: auto; margin-top: 2rem; }
  .edge-nav { display: none; }
  h1 { margin-top: 6vh; }
  .compass { opacity: 0.35; transform: scale(0.72); right: 2%; }
  .index-card { position: relative; right: auto; bottom: auto; margin-top: 2rem; }
  .star-index { position: relative; left: auto; top: auto; margin-bottom: 2rem; }
}