:root {
  /* Design compliance tokens: Space Groteskkkk Grotesk** for coordinates */
  --night: #050712;
  --eclipse: #151A3D;
  --chalk: #E9E4D2;
  --silver: #A7B0C6;
  --cyan: #75F4FF;
  --gold: #F7C85A;
  --violet: #6E5BD7;
  --mare: #0B2442;
  --phase: 12%;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--chalk);
  background:
    radial-gradient(circle at 18% 12%, rgba(110, 91, 215, .22), transparent 28rem),
    radial-gradient(circle at 85% 30%, rgba(11, 36, 66, .8), transparent 34rem),
    linear-gradient(145deg, var(--night) 0%, #070815 42%, var(--mare) 100%);
  font-family: "Space Grotesk", sans-serif;
  overflow-x: hidden;
}

body.inked .moon { filter: drop-shadow(0 0 46px rgba(117, 244, 255, .18)); }
body.inked .route-svg path { stroke-dashoffset: 0; }
body.inked .crater { opacity: 1; transform: scale(1); }

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  z-index: 8;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(233,228,210,.16) 0 1px, transparent 1px),
    radial-gradient(circle at 54% 68%, rgba(167,176,198,.13) 0 1px, transparent 1px),
    linear-gradient(90deg, transparent 0 47%, rgba(233,228,210,.05) 48% 52%, transparent 53% 100%);
  background-size: 29px 31px, 43px 47px, 11px 100%;
  mix-blend-mode: screen;
}

.sky-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(circle, rgba(233,228,210,.88) 0 1px, transparent 1.6px),
    radial-gradient(circle, rgba(117,244,255,.56) 0 1px, transparent 1.4px),
    radial-gradient(ellipse at 50% 50%, transparent 56%, rgba(117,244,255,.13) 57%, transparent 58%);
  background-size: 137px 151px, 211px 173px, 100vw 90vh;
  animation: starDrift 24s linear infinite;
}

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

.chapter {
  min-height: 112vh;
  position: relative;
  display: grid;
  align-items: center;
  padding: 8vh 8vw;
}

.chapter-landing {
  min-height: 100vh;
  align-items: end;
  padding-bottom: 13vh;
}

.chapter-copy, .map-note {
  position: relative;
  max-width: 34rem;
  padding: 2rem;
  color: var(--chalk);
}

.landing-copy { margin-left: 5vw; }

h1, h2 {
  font-family: "Unbounded", sans-serif;
  letter-spacing: -.05em;
  margin: 0;
  text-transform: lowercase;
}

h1 {
  font-size: clamp(3.7rem, 10vw, 10.8rem);
  line-height: .85;
  color: transparent;
  background: linear-gradient(100deg, var(--chalk), var(--silver) 44%, var(--cyan) 66%, var(--chalk));
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 0 34px rgba(233, 228, 210, .12);
}

h2 {
  font-size: clamp(2.1rem, 5vw, 5.2rem);
  line-height: .95;
}

p { font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.55; }

.inscription {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.35rem, 2.2vw, 2.15rem);
  font-style: italic;
  color: rgba(233, 228, 210, .86);
}

.inscription.small { font-size: 1.5rem; color: var(--gold); }

.coord, .route-label {
  font-family: "Space Grotesk", sans-serif;
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .76rem;
}

.route-label {
  position: absolute;
  transform: rotate(-8deg);
  padding: .6rem .85rem;
  border: 1px solid rgba(117, 244, 255, .32);
  border-radius: 99rem;
  background: rgba(5, 7, 18, .62);
  box-shadow: 0 0 26px rgba(117, 244, 255, .16);
}

#mare-questions .route-label { left: 58vw; top: 22vh; }
#crater-gate .route-label { left: 17vw; bottom: 24vh; }
#silver-switchback .route-label { right: 13vw; top: 28vh; }
#rabbit-observatory .route-label { left: 52vw; bottom: 18vh; }
#full-moon-return .route-label { right: 14vw; bottom: 30vh; }

.map-note {
  border: 1px solid rgba(233, 228, 210, .24);
  background:
    radial-gradient(circle at 20% 10%, rgba(247,200,90,.14), transparent 9rem),
    linear-gradient(135deg, rgba(233,228,210,.13), rgba(11,36,66,.48));
  box-shadow: inset 0 0 42px rgba(5, 7, 18, .45), 0 30px 80px rgba(0,0,0,.34);
  backdrop-filter: blur(12px);
  clip-path: polygon(0 13%, 8% 0, 100% 0, 100% 84%, 91% 100%, 0 100%);
}

.map-note:before {
  content: "";
  position: absolute;
  inset: .8rem;
  border: 1px dashed rgba(167,176,198,.32);
  border-radius: 50% 46% 48% 54%;
  pointer-events: none;
}

.note-left { margin-left: 3vw; }
.note-right { margin-left: auto; margin-right: 5vw; }
.note-top { margin: 0 auto; transform: translateY(-10vh) rotate(-2deg); }
.return-note { margin: 0 auto; text-align: center; }

.clipped-crater { clip-path: circle(72% at 50% 45%); padding: 3.3rem; }

.phase-wheel {
  position: fixed;
  top: 2rem;
  right: 2rem;
  width: 9.5rem;
  height: 9.5rem;
  border: 1px solid rgba(167,176,198,.3);
  border-radius: 50%;
  z-index: 7;
  background: radial-gradient(circle, rgba(21,26,61,.74), rgba(5,7,18,.24));
  box-shadow: 0 0 35px rgba(110, 91, 215, .22);
}

.phase-wheel:before, .phase-wheel:after {
  content: "";
  position: absolute;
  inset: 1.25rem;
  border: 1px dashed rgba(117,244,255,.24);
  border-radius: 50%;
}

.phase-wheel:after {
  inset: 4.25rem;
  background: var(--gold);
  box-shadow: 0 0 22px var(--gold);
  border: 0;
}

.phase-dot {
  --angle: 0deg;
  position: absolute;
  left: 50%;
  top: 50%;
  width: .9rem;
  height: .9rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--silver);
  transform: rotate(var(--angle)) translateX(4.3rem) rotate(calc(var(--angle) * -1));
  cursor: pointer;
}

.phase-dot:nth-child(1) { --angle: -90deg; }
.phase-dot:nth-child(2) { --angle: -18deg; }
.phase-dot:nth-child(3) { --angle: 54deg; }
.phase-dot:nth-child(4) { --angle: 126deg; }
.phase-dot:nth-child(5) { --angle: 198deg; }
.phase-dot.active { background: var(--cyan); box-shadow: 0 0 18px var(--cyan), 0 0 42px rgba(117,244,255,.35); }
.phase-dot span { position: absolute; left: 1.1rem; top: -.4rem; color: var(--chalk); font: 600 .6rem "Space Grotesk"; letter-spacing: .12em; text-transform: uppercase; opacity: .7; }

.moon-stage {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  display: grid;
  place-items: center;
}

.moon {
  position: relative;
  width: min(74vw, 760px);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(var(--moon-x, 18vw), var(--moon-y, 1vh)) rotate(var(--moon-rot, -8deg));
  transition: transform 900ms cubic-bezier(.2,.8,.2,1), filter 900ms ease;
  background:
    radial-gradient(circle at 40% 35%, #E9E4D2 0%, #A7B0C6 42%, #151A3D 72%, #050712 100%);
  box-shadow: inset -42px -58px 90px rgba(5,7,18,.72), inset 28px 18px 58px rgba(233,228,210,.22), 0 0 88px rgba(233,228,210,.12);
  overflow: hidden;
}

.moon:before {
  content: "";
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 24% 29%, transparent 0 5%, rgba(11,36,66,.23) 5.4% 6.2%, transparent 6.6%),
    radial-gradient(circle at 65% 24%, transparent 0 7%, rgba(21,26,61,.24) 7.4% 8.4%, transparent 8.8%),
    radial-gradient(circle at 48% 63%, transparent 0 10%, rgba(11,36,66,.22) 10.5% 11.2%, transparent 11.8%),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 26px, rgba(5,7,18,.09) 27px 29px);
  opacity: .86;
}

.moon-shadow {
  position: absolute;
  inset: -2%;
  border-radius: 50%;
  background: var(--night);
  transform: translateX(var(--shadow-x, -12%));
  clip-path: inset(0 var(--phase) 0 0 round 50%);
  transition: clip-path 700ms ease, transform 700ms ease;
  mix-blend-mode: multiply;
  opacity: .9;
  z-index: 4;
}

.crater {
  position: absolute;
  border: 2px solid rgba(21, 26, 61, .28);
  border-radius: 50%;
  opacity: .25;
  transform: scale(.72);
  transition: opacity 900ms ease, transform 900ms ease;
  box-shadow: inset 5px 5px 14px rgba(5,7,18,.2), 0 0 0 8px rgba(233,228,210,.05);
}
.c1 { width: 16%; height: 16%; left: 23%; top: 22%; }
.c2 { width: 25%; height: 25%; left: 57%; top: 18%; }
.c3 { width: 20%; height: 20%; left: 43%; top: 58%; }
.c4 { width: 10%; height: 10%; left: 19%; top: 66%; }
.c5 { width: 13%; height: 13%; left: 72%; top: 61%; }

.route-svg {
  position: absolute;
  inset: 4%;
  z-index: 5;
  overflow: visible;
}

.route-svg path {
  fill: none;
  stroke: rgba(117,244,255,.72);
  stroke-width: 3;
  stroke-dasharray: 8 15;
  stroke-dashoffset: 680;
  transition: stroke-dashoffset 1600ms ease;
  filter: drop-shadow(0 0 8px rgba(117,244,255,.6));
}

.moving-bead { fill: var(--gold); filter: drop-shadow(0 0 12px var(--gold)); transition: cx 450ms ease, cy 450ms ease; }
.mare-glyphs { position: absolute; left: 23%; bottom: 21%; font-family: "Noto Sans Symbols 2"; color: rgba(11,36,66,.54); font-size: 2rem; letter-spacing: .35em; transform: rotate(-17deg); }

.crescent-press {
  position: absolute;
  right: 18vw;
  top: 26vh;
  width: 8rem;
  height: 8rem;
  display: grid;
  place-items: center;
  color: var(--chalk);
  font-family: "Noto Sans Symbols 2";
  font-size: 7rem;
  cursor: pointer;
  pointer-events: auto;
  filter: drop-shadow(0 0 18px rgba(233,228,210,.45));
  animation: crescentBreathe 3.6s ease-in-out infinite;
}

.route-bead, .crater-button {
  border: 1px solid rgba(247,200,90,.5);
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, var(--gold), #8b6f21 70%);
  color: var(--night);
  padding: .86rem 1.2rem;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 0 26px rgba(247,200,90,.26);
}

.begin-bead { margin-top: 1rem; }
.wax-seal { position: absolute; right: 1.4rem; top: 1.2rem; color: var(--gold); font-family: "Noto Sans Symbols 2"; font-size: 2.3rem; }

.crater-story {
  max-height: 0;
  overflow: hidden;
  margin-top: 1rem;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.35rem;
  color: var(--gold);
  transition: max-height 600ms ease;
}
.crater-story.open { max-height: 8rem; }

.compass-orbit {
  width: 9rem;
  aspect-ratio: 1;
  border: 1px dashed rgba(117,244,255,.45);
  border-radius: 50%;
  margin-top: 1.4rem;
  position: relative;
  animation: slowSpin 12s linear infinite;
}
.compass-orbit i { position: absolute; left: 50%; top: 5%; width: .25rem; height: 4rem; background: linear-gradient(var(--cyan), var(--violet)); transform-origin: 50% 4rem; clip-path: polygon(50% 0, 100% 100%, 50% 82%, 0 100%); }

.rabbit-glyph {
  position: relative;
  width: 18rem;
  height: 12rem;
  margin-top: 1.3rem;
  border: 1px solid rgba(167,176,198,.22);
  background: radial-gradient(circle at 50% 50%, rgba(117,244,255,.08), transparent 70%);
}
.rabbit-glyph:before {
  content: "";
  position: absolute;
  inset: 14% 11%;
  opacity: .28;
  background: linear-gradient(32deg, transparent 0 12%, var(--silver) 13% 14%, transparent 15% 31%, var(--silver) 32% 33%, transparent 34% 100%);
  transition: opacity 500ms ease;
}
.rabbit-glyph:hover:before { opacity: .85; }
.rabbit-glyph span { position: absolute; left: var(--x); top: var(--y); width: .55rem; height: .55rem; border-radius: 50%; background: var(--chalk); box-shadow: 0 0 14px var(--cyan); transition: transform 400ms ease, background 400ms ease; }
.rabbit-glyph:hover span { transform: scale(1.55); background: var(--gold); }

@keyframes starDrift { to { background-position: 137px 151px, -211px 173px, 0 0; } }
@keyframes crescentBreathe { 50% { transform: scale(1.08) rotate(4deg); opacity: .68; } }
@keyframes slowSpin { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
  .moon { width: 112vw; transform: translate(18vw, 6vh) rotate(var(--moon-rot, -8deg)); opacity: .78; }
  .phase-wheel { right: .8rem; top: .8rem; transform: scale(.78); transform-origin: top right; }
  .chapter { padding: 8vh 1rem; }
  .chapter-copy, .map-note { padding: 1.3rem; }
  .landing-copy, .note-left, .note-right { margin-left: 0; margin-right: 0; }
  .route-label { display: none; }
  .crescent-press { right: 8vw; top: 19vh; }
}