:root {
  /* Compliance tokens: Space Grotesk** for headlines and large navigation labels; IBM Plex Sans** for body copy and annotations; IBM Plex Mono** only for tiny prototype labels. */
  --cream: #FFF4D8;
  --blue: #B9E7F2;
  --mint: #CFF3CF;
  --peach: #FFC7A8;
  --lavender: #D9C7FF;
  --cherry: #F25F7A;
  --ink: #27243A;
  --shadow: rgba(39, 36, 58, .18);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: "IBM Plex Sans", sans-serif;
  overflow-x: hidden;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .22;
  background-image: radial-gradient(var(--ink) .7px, transparent .7px);
  background-size: 18px 18px;
  mix-blend-mode: multiply;
}

.orbit-nav {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  display: flex;
  gap: 8px;
  padding: 8px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: rgba(255, 244, 216, .86);
  box-shadow: 6px 7px 0 var(--blue);
}
.orbit-nav a {
  color: var(--ink);
  text-decoration: none;
  font: 600 12px/1 "Space Grotesk", sans-serif;
  letter-spacing: .04em;
  padding: 10px 14px;
  border-radius: 999px;
  transition: transform .25s ease, background .25s ease;
}
.orbit-nav a:hover { background: var(--peach); transform: translateY(-3px) rotate(-1deg); }

.chamber {
  position: relative;
  min-height: 100vh;
  padding: 110px clamp(22px, 5vw, 72px) 70px;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
}
.chamber::before {
  content: "";
  position: absolute;
  inset: 5vw;
  background-image: linear-gradient(30deg, rgba(39,36,58,.08) 1px, transparent 1px), linear-gradient(150deg, rgba(39,36,58,.06) 1px, transparent 1px);
  background-size: 96px 56px;
  opacity: .32;
  z-index: -2;
}

h1, h2, h3 { font-family: "Space Grotesk", sans-serif; margin: 0; letter-spacing: -.045em; line-height: .92; }
h1 { font-size: clamp(58px, 10vw, 142px); }
h2 { font-size: clamp(42px, 6.5vw, 92px); }
h3 { font-size: clamp(24px, 3vw, 38px); }
p { font-size: clamp(16px, 1.55vw, 21px); line-height: 1.45; margin: 18px 0 0; }
.mono { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }

.hex-cell, .dominant-hex {
  clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0 50%);
  border: 0;
  color: var(--ink);
  position: relative;
  display: grid;
  place-items: center;
  text-align: center;
  outline: 2px solid transparent;
  filter: drop-shadow(9px 10px 0 var(--shadow));
  transition: transform .32s cubic-bezier(.2,.9,.2,1), filter .32s ease;
}
.hex-cell::after, .dominant-hex::after {
  content: "";
  position: absolute;
  inset: 10px;
  clip-path: inherit;
  border: 2px solid var(--ink);
  pointer-events: none;
}
.liftable:hover, .liftable.is-lifted { transform: translateY(-10px) rotate(var(--tilt, 1deg)); filter: drop-shadow(15px 18px 0 rgba(242,95,122,.22)); }
.assembling { transform: translateY(-8px) rotate(var(--tilt, 1deg)); }
.cell-blue { background: var(--blue); }
.cell-mint { background: var(--mint); }
.cell-peach { background: var(--peach); }
.cell-lavender { background: var(--lavender); }

.hero { background: radial-gradient(circle at 80% 20%, rgba(185,231,242,.8), transparent 28%), radial-gradient(circle at 10% 85%, rgba(217,199,255,.75), transparent 30%), var(--cream); }
.hero-cluster {
  width: min(1050px, 96vw);
  min-height: 690px;
  position: relative;
}
.launch-window {
  width: min(610px, 82vw);
  height: min(610px, 82vw);
  background: var(--peach);
  padding: 78px;
  margin: 40px auto 0;
  --tilt: -1deg;
}
.launch-window p { max-width: 440px; }
.capsule-code { position: relative; z-index: 2; background: var(--cream); border: 2px solid var(--ink); padding: 7px 12px; border-radius: 999px; margin-bottom: 16px; }
.window-ellipse { width: 120px; height: 58px; border: 3px solid var(--ink); border-radius: 50%; background: var(--blue); margin-top: 25px; box-shadow: inset 18px 0 0 var(--lavender); }
.small { width: 190px; height: 166px; position: absolute; padding: 24px; }
.hero-cluster .small:nth-child(1) { left: 70px; top: 70px; --tilt: -2deg; }
.hero-cluster .small:nth-child(2) { right: 120px; top: 42px; --tilt: 2deg; }
.hero-cluster .small:nth-child(4) { left: 145px; bottom: 55px; --tilt: 1deg; }
.hero-cluster .small:nth-child(5) { right: 55px; bottom: 95px; --tilt: -1deg; }
.reveal-label { position: absolute; bottom: 28px; opacity: 0; transform: translateY(8px); transition: .25s ease; background: var(--cream); padding: 5px 9px; border: 1px solid var(--ink); }
.liftable:hover .reveal-label { opacity: 1; transform: translateY(0); }
.blink-dot { width: 28px; height: 28px; background: var(--cherry); border: 2px solid var(--ink); border-radius: 50%; animation: blink 1.2s infinite steps(2); }
.phases { display: flex; gap: 7px; }
.phases i { width: 24px; height: 24px; border-radius: 50%; background: var(--cream); border: 2px solid var(--ink); box-shadow: inset 9px 0 0 var(--ink); }
.paper-star { font-size: 72px; color: var(--cherry); }

.moon { position: absolute; border-radius: 50%; border: 2px solid var(--ink); background: var(--mint); box-shadow: inset -30px 0 0 var(--cream), 10px 12px 0 var(--shadow); }
.moon-large { width: 150px; height: 150px; right: 10vw; top: 19vh; }
.sticker { position: absolute; z-index: 3; color: var(--cherry); text-shadow: 4px 4px 0 var(--cream); animation: twinkle 2.5s infinite ease-in-out; }
.star-one { left: 10vw; top: 23vh; font-size: 64px; }
.star-two { right: 18vw; bottom: 14vh; font-size: 46px; animation-delay: .8s; }
.paper-scrap { background: var(--cream); border: 2px solid var(--ink); box-shadow: 7px 8px 0 var(--shadow); padding: 18px; position: absolute; }
.rocket-note { right: 8vw; top: 28vh; width: 170px; z-index: 4; background: var(--mint); }
.rocket-note svg { width: 100%; fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.tilt-left { transform: rotate(-5deg); }
.scroll-stamp { position: absolute; bottom: 28px; padding: 10px 16px; border: 2px solid var(--ink); background: var(--lavender); box-shadow: 5px 5px 0 var(--ink); }

.orbit-lines, .star-chart, .connector-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; }
.draw-line, .dot-path { fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 10 12; opacity: .55; stroke-dashoffset: 900; transition: stroke-dashoffset 1s ease; }
.chamber.in-view .draw-line, .chamber.in-view .dot-path { stroke-dashoffset: 0; }
.delay { transition-delay: .18s; }
.star-chart circle { fill: var(--cherry); stroke: var(--ink); stroke-width: 2; animation: twinkle 2s infinite ease-in-out; }
.section-marker { position: absolute; left: clamp(22px,5vw,72px); top: 95px; background: var(--ink); color: var(--cream); padding: 9px 13px; border-radius: 999px; }

.corkboard { background: radial-gradient(circle at 22% 30%, rgba(255,199,168,.7), transparent 28%), var(--cream); }
.dominant-hex { width: min(620px, 82vw); height: min(540px, 72vw); background: var(--blue); padding: 70px; justify-self: start; margin-left: 5vw; }
.scrap-field { position: absolute; inset: 0; }
.note-card { right: 12vw; top: 22vh; width: 240px; transform: rotate(3deg); background: var(--mint); }
.tag-card { right: 24vw; bottom: 20vh; width: 220px; transform: rotate(-4deg); background: var(--lavender); }
.arrow-card { left: 54vw; top: 54vh; width: 210px; transform: rotate(7deg); background: var(--peach); font: 700 58px/1 "Space Grotesk"; }
.arrow-card span { display: block; font: 600 18px/1.1 "IBM Plex Sans"; }
.tape { position: absolute; width: 74px; height: 24px; top: -14px; left: 42px; background: rgba(255,244,216,.72); border: 1px solid var(--ink); transform: rotate(-6deg); }
.mini { width: 150px; height: 130px; position: absolute; font-size: 48px; }
.scrap-field .mini:nth-last-child(2) { left: 16vw; bottom: 11vh; }
.scrap-field .mini:nth-last-child(1) { right: 8vw; bottom: 12vh; }
.spring { width: 58px; height: 40px; background: repeating-linear-gradient(90deg, transparent 0 8px, var(--ink) 8px 11px); transform: skewX(-20deg); }

.starchart { background: radial-gradient(circle at 75% 20%, rgba(207,243,207,.82), transparent 24%), var(--cream); }
.honeycomb-map { display: grid; grid-template-columns: repeat(4, minmax(170px, 245px)); gap: 0; transform: rotate(-3deg); margin-top: 80px; }
.map-cell { width: 245px; height: 215px; padding: 44px 28px 28px; margin-left: -20px; }
.map-cell:nth-child(even) { margin-top: 105px; }
.map-cell p { font-size: 16px; }
.stamped-title { position: absolute; left: 8vw; top: 18vh; width: min(520px, 84vw); transform: rotate(2deg); }
.stamped-title h2 { font-size: clamp(38px, 5vw, 68px); }

.exploded { background: radial-gradient(circle at 50% 50%, rgba(217,199,255,.72), transparent 34%), var(--cream); }
.diagram-wrap { position: relative; width: min(980px, 96vw); height: min(700px, 78vh); }
.diagram-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 420px; height: 365px; background: var(--mint); padding: 54px; z-index: 3; }
.diagram-center:hover { transform: translate(-50%, calc(-50% - 10px)) rotate(1deg); }
.part { position: absolute; width: 180px; height: 105px; border: 2px solid var(--ink); border-radius: 28px; background: var(--cream); box-shadow: 7px 9px 0 var(--shadow); display: grid; place-items: center; }
.part::before { content: ""; position: absolute; width: 42px; height: 42px; border: 3px solid var(--ink); border-radius: 50%; background: var(--cherry); top: -22px; }
.part-a { left: 40px; top: 50px; background: var(--blue); --tilt: -3deg; }
.part-b { right: 35px; top: 60px; background: var(--peach); --tilt: 2deg; }
.part-c { left: 30px; bottom: 52px; background: var(--lavender); --tilt: 3deg; }
.part-d { right: 25px; bottom: 66px; background: var(--blue); --tilt: -2deg; }

.landing { background: radial-gradient(circle at 50% 28%, rgba(185,231,242,.78), transparent 34%), var(--cream); }
.final-orbit { position: relative; width: min(1000px, 96vw); height: 680px; display: grid; place-items: center; }
.landing-card { width: min(620px, 86vw); border: 2px solid var(--ink); border-radius: 42px; background: var(--cream); box-shadow: 12px 14px 0 var(--peach); padding: 56px; text-align: center; z-index: 4; }
.crescent { position: absolute; width: 260px; height: 260px; border-radius: 50%; background: var(--lavender); border: 2px solid var(--ink); box-shadow: inset -70px 0 0 var(--cream), 12px 14px 0 var(--shadow); top: 30px; left: 13vw; }
.drift { position: absolute; width: 142px; height: 125px; font: 700 28px "Space Grotesk"; animation: float 5s infinite ease-in-out; }
.d1 { left: 6%; top: 42%; }
.d2 { right: 12%; top: 18%; animation-delay: .4s; }
.d3 { right: 5%; bottom: 16%; animation-delay: .8s; }
.d4 { left: 18%; bottom: 7%; animation-delay: 1.2s; }
.cursor-star { position: fixed; width: 18px; height: 18px; pointer-events: none; z-index: 40; color: var(--cherry); transform: translate(-50%, -50%); }
.cursor-star::before { content: "✦"; font-size: 18px; }

@keyframes blink { 50% { background: var(--cream); } }
@keyframes twinkle { 0%,100% { transform: scale(1) rotate(0); opacity: .8; } 50% { transform: scale(1.16) rotate(8deg); opacity: 1; } }
@keyframes float { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-18px) rotate(2deg); } }

@media (max-width: 820px) {
  .orbit-nav { width: calc(100vw - 24px); overflow: auto; justify-content: flex-start; }
  .small, .rocket-note, .moon-large, .sticker { display: none; }
  .launch-window { padding: 42px; }
  .dominant-hex { justify-self: center; margin: 0; padding: 44px; }
  .paper-scrap { position: relative; inset: auto; margin: 12px; }
  .scrap-field { position: relative; display: flex; flex-wrap: wrap; justify-content: center; margin-top: 24px; }
  .mini { position: relative; inset: auto !important; }
  .honeycomb-map { grid-template-columns: 1fr; transform: none; gap: 14px; }
  .map-cell, .map-cell:nth-child(even) { margin: 0; }
  .stamped-title { position: relative; inset: auto; text-align: center; margin-bottom: 18px; }
  .diagram-wrap { height: 820px; }
  .diagram-center { width: 330px; height: 300px; padding: 42px; }
  .part-a, .part-b, .part-c, .part-d { left: 50%; right: auto; transform: translateX(-50%); }
  .part-a { top: 0; } .part-b { top: 140px; } .part-c { bottom: 140px; } .part-d { bottom: 0; }
}