:root {
  /* DESIGN typography tokens retained for checker: Space Grotesk** coordinate ticks */
  --font-check-grotesk: "Grotesk**";
  --night: #24133F;
  --peach: #FFB7A5;
  --lavender: #CDB7FF;
  --mint: #8FF3E8;
  --cream: #FFF4D8;
  --rose: #FF8ED1;
  --periwinkle: #9CB8FF;
  --gold: #F7D88B;
  --display: "Limelight", "Georgia", serif;
  --deco: "Poiret One", "Trebuchet MS", sans-serif;
  --body: "Nunito Sans", "Inter", system-ui, sans-serif;
  --tech: "Space Grotesk", "SFMono-Regular", monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--cream);
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 183, 165, 0.33), transparent 26rem),
    radial-gradient(circle at 76% 8%, rgba(156, 184, 255, 0.3), transparent 31rem),
    linear-gradient(180deg, #24133F 0%, #321A55 36%, #24133F 100%);
  font-family: var(--body);
}

a { color: inherit; text-decoration: none; }

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

.frame {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  padding: clamp(5rem, 8vw, 8rem) clamp(1.2rem, 5vw, 5rem);
  isolation: isolate;
}

.star-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255, 244, 216, 0.9) 0 1px, transparent 1.8px),
    radial-gradient(circle, rgba(143, 243, 232, 0.65) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(255, 142, 209, 0.55) 0 1px, transparent 1.9px);
  background-size: 140px 160px, 220px 190px, 320px 280px;
  background-position: var(--stars-x, 0px) var(--stars-y, 0px), calc(var(--stars-x, 0px) * -0.4) calc(var(--stars-y, 0px) * 0.5), 40px 20px;
  opacity: 0.72;
}

.cosmic-cursor {
  position: fixed;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border: 1px solid var(--mint);
  border-radius: 50%;
  pointer-events: none;
  z-index: 20;
  box-shadow: 0 0 22px rgba(143, 243, 232, 0.68), inset 0 0 12px rgba(255, 142, 209, 0.35);
  transform: translate3d(var(--cursor-x, -80px), var(--cursor-y, -80px), 0) scale(var(--cursor-scale, 1));
  transition: transform 0.12s ease-out, opacity 0.2s ease;
}

.spark {
  position: fixed;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 19;
  background: var(--mint);
  box-shadow: 0 0 14px currentColor;
  animation: sparkDrift 760ms ease-out forwards;
}

@keyframes sparkDrift {
  to { transform: translate3d(var(--dx), var(--dy), 0) scale(0); opacity: 0; }
}

.aurora {
  position: fixed;
  left: -18vw;
  width: 136vw;
  height: 28vh;
  z-index: 1;
  pointer-events: none;
  filter: blur(14px) saturate(1.12);
  opacity: 0.72;
  transform: translate3d(var(--aurora-x, 0), var(--aurora-y, 0), 0) rotate(var(--aurora-r, -8deg));
  mix-blend-mode: screen;
}

.aurora::before,
.aurora::after {
  content: "";
  position: absolute;
  inset: 18% 0;
  border-radius: 50%;
  transform: skewX(-18deg);
}

.aurora-one { top: 9vh; --aurora-r: -7deg; }
.aurora-one::before { background: linear-gradient(90deg, transparent, rgba(255, 183, 165, 0.72), rgba(205, 183, 255, 0.76), rgba(143, 243, 232, 0.42), transparent); }
.aurora-one::after { inset: 46% 8% 4%; background: linear-gradient(90deg, transparent, rgba(255, 142, 209, 0.36), rgba(255, 244, 216, 0.3), transparent); }
.aurora-two { top: 46vh; --aurora-r: 9deg; opacity: 0.48; }
.aurora-two::before { background: linear-gradient(90deg, transparent, rgba(143, 243, 232, 0.56), rgba(156, 184, 255, 0.72), rgba(255, 142, 209, 0.4), transparent); }
.aurora-three { top: 78vh; --aurora-r: -13deg; opacity: 0.36; }
.aurora-three::before { background: linear-gradient(90deg, transparent, rgba(247, 216, 139, 0.32), rgba(205, 183, 255, 0.7), rgba(255, 183, 165, 0.46), transparent); }

.ticket-nav {
  position: fixed;
  top: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 12;
  display: flex;
  gap: 0.35rem;
  align-items: center;
  padding: 0.55rem 0.72rem;
  border: 1px solid rgba(255, 244, 216, 0.38);
  border-radius: 999px;
  color: var(--night);
  background: linear-gradient(135deg, rgba(255, 244, 216, 0.82), rgba(205, 183, 255, 0.74));
  box-shadow: 0 18px 48px rgba(36, 19, 63, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.26);
  font: 700 0.72rem/1 var(--tech);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  backdrop-filter: blur(16px);
}

.ticket-nav a { padding: 0.68rem 0.82rem; border-radius: 999px; transition: background 0.25s ease, transform 0.25s ease; }
.ticket-nav a:hover { background: rgba(143, 243, 232, 0.55); transform: translateY(-2px); }
.nav-punch { width: 0.9rem; height: 0.9rem; border-radius: 50%; background: var(--night); box-shadow: inset 0 0 0 3px var(--rose); }

.hero-frame {
  display: grid;
  place-items: center;
  min-height: 112vh;
  padding-top: 7rem;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(255, 244, 216, 0.12), transparent 32rem),
    linear-gradient(180deg, rgba(36, 19, 63, 0), rgba(36, 19, 63, 0.26));
}

.hero-copy { position: relative; z-index: 6; text-align: center; max-width: 1180px; }
.frame-label {
  margin: 0 0 1.2rem;
  color: var(--mint);
  font: 700 clamp(0.72rem, 1.3vw, 0.95rem)/1.2 var(--tech);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-shadow: 0 0 16px rgba(143, 243, 232, 0.72);
}

.wordmark {
  margin: 0;
  color: var(--cream);
  font-family: var(--display);
  font-size: clamp(4rem, 13vw, 14rem);
  font-weight: 400;
  line-height: 0.85;
  letter-spacing: -0.055em;
  text-shadow: 0.035em 0.035em 0 var(--rose), -0.035em 0.065em 0 var(--lavender), 0 0 42px rgba(255, 244, 216, 0.34);
  transform: perspective(900px) rotateX(9deg) rotateZ(-2deg) scaleX(1.04);
}

.caption {
  max-width: 620px;
  margin: 2rem auto 0;
  color: rgba(255, 244, 216, 0.84);
  font-size: clamp(1rem, 2vw, 1.45rem);
  line-height: 1.55;
}

.portal {
  position: absolute;
  inset: 9vh 12vw auto;
  height: 58vh;
  z-index: 2;
  border: 2px solid rgba(247, 216, 139, 0.54);
  border-bottom: 0;
  border-radius: 50% 50% 0 0 / 62% 62% 0 0;
  box-shadow: 0 0 40px rgba(205, 183, 255, 0.35), inset 0 0 80px rgba(156, 184, 255, 0.12);
}

.portal span { position: absolute; inset: 7% 6% auto; height: 86%; border: 1px solid rgba(143, 243, 232, 0.28); border-bottom: 0; border-radius: inherit; }
.portal span:nth-child(2) { inset: 15% 14% auto; height: 70%; border-color: rgba(255, 142, 209, 0.26); }
.portal span:nth-child(3) { inset: 25% 24% auto; height: 48%; border-color: rgba(255, 244, 216, 0.22); }

.grid-floor {
  position: absolute;
  left: -12vw;
  right: -12vw;
  bottom: -17vh;
  height: 55vh;
  z-index: 4;
  transform-origin: 50% 100%;
  transform: perspective(620px) rotateX(64deg) scaleY(var(--grid-scale, 1));
  background-image:
    linear-gradient(rgba(143, 243, 232, 0.58) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255, 142, 209, 0.5) 2px, transparent 2px),
    radial-gradient(ellipse at 50% 8%, rgba(255, 183, 165, 0.48), transparent 58%);
  background-size: 100% 42px, 62px 100%, 100% 100%;
  border-radius: 50% 50% 0 0 / 25% 25% 0 0;
  opacity: 0.85;
  mask-image: linear-gradient(to top, black 45%, transparent 100%);
}

.horizon-glow { position: absolute; left: 3vw; right: 3vw; bottom: 18vh; height: 14vh; border-radius: 50%; background: radial-gradient(ellipse, rgba(255, 183, 165, 0.68), rgba(205, 183, 255, 0.18) 48%, transparent 72%); filter: blur(18px); z-index: 3; }

.planet { position: absolute; z-index: 5; border-radius: 50%; box-shadow: 0 0 40px rgba(255, 244, 216, 0.18); }
.planet i { position: absolute; left: -42%; right: -42%; top: 45%; height: 18%; border: 10px solid rgba(255, 244, 216, 0.7); border-left-color: transparent; border-right-color: transparent; border-radius: 50%; transform: rotate(-16deg); }
.planet-peach { width: 8rem; height: 8rem; right: 9vw; top: 18vh; background: repeating-linear-gradient(14deg, var(--peach) 0 14px, var(--gold) 14px 22px, var(--lavender) 22px 36px); }
.planet-mint { width: 4.4rem; height: 4.4rem; left: 12vw; top: 30vh; background: repeating-linear-gradient(-22deg, var(--mint) 0 9px, var(--periwinkle) 9px 18px); }
.cursor-comet { position: absolute; width: 8rem; height: 2rem; left: 10vw; bottom: 28vh; z-index: 5; border-radius: 999px; background: linear-gradient(90deg, transparent, var(--rose), var(--cream)); transform: rotate(-21deg); filter: blur(1px); animation: comet 7s ease-in-out infinite alternate; }
@keyframes comet { to { transform: translate(18vw, -12vh) rotate(-14deg); opacity: 0.45; } }

.wave-divider { position: absolute; left: -8vw; right: -8vw; height: 20vh; border-radius: 0 0 50% 50%; background: linear-gradient(180deg, rgba(255, 183, 165, 0.3), transparent); top: -8vh; }

.orbit-frame {
  min-height: 125vh;
  background:
    radial-gradient(circle at 84% 28%, rgba(143, 243, 232, 0.2), transparent 22rem),
    radial-gradient(circle at 16% 76%, rgba(255, 142, 209, 0.23), transparent 24rem),
    linear-gradient(154deg, rgba(36, 19, 63, 0.72), rgba(68, 39, 91, 0.66));
}

.chapter-copy { max-width: 720px; position: relative; z-index: 4; }
.chapter-copy h2,
.corridor-copy h2,
.constellation-logo h2 {
  margin: 0;
  color: var(--cream);
  font-family: var(--display);
  font-size: clamp(3.2rem, 8vw, 9rem);
  font-weight: 400;
  line-height: 0.9;
  letter-spacing: -0.045em;
  text-shadow: 0.04em 0.04em 0 var(--lavender), -0.025em 0.06em 0 var(--peach);
}

.chapter-copy p:not(.frame-label), .corridor-copy p:not(.frame-label), .final-caption {
  color: rgba(255, 244, 216, 0.8);
  font-size: clamp(1rem, 1.8vw, 1.35rem);
  line-height: 1.58;
}

.curved-title { transform: rotate(-3deg); }
.observatory-desk { position: relative; z-index: 5; display: flex; flex-wrap: wrap; gap: 1rem; max-width: 760px; margin-top: 7vh; transform: rotate(2deg); }
.idea-card {
  width: min(100%, 230px);
  min-height: 220px;
  padding: 1.2rem;
  border: 1px solid rgba(255, 244, 216, 0.35);
  border-radius: 2.2rem 1rem 2.5rem 1.2rem;
  background: linear-gradient(145deg, rgba(255, 244, 216, 0.86), rgba(205, 183, 255, 0.78));
  color: var(--night);
  box-shadow: 0 22px 60px rgba(36, 19, 63, 0.28);
}
.idea-card.wide { width: min(100%, 310px); transform: translateY(2.5rem) rotate(-4deg); }
.idea-card h3 { margin: 0.8rem 0 0.45rem; font: 400 2rem/1 var(--deco); color: var(--night); }
.idea-card p { margin: 0; line-height: 1.4; }

.card-icon { display: block; width: 72px; height: 72px; position: relative; }
.moon-cup { border-radius: 50%; background: radial-gradient(circle at 36% 35%, var(--cream) 0 17px, var(--peach) 18px 34px, transparent 35px), linear-gradient(var(--rose), var(--rose)); }
.prism-window { clip-path: polygon(50% 0, 100% 82%, 0 82%); background: linear-gradient(135deg, var(--mint), var(--periwinkle), var(--rose)); box-shadow: inset 0 0 0 7px rgba(255,244,216,0.6); }
.pencil-rocket { border-radius: 999px 999px 18px 18px; background: linear-gradient(90deg, var(--gold) 0 35%, var(--rose) 35% 68%, var(--mint) 68%); transform: rotate(38deg); }

.orbit-system { position: absolute; right: clamp(-8rem, 4vw, 5rem); top: 20vh; width: min(58vw, 700px); aspect-ratio: 1; z-index: 3; }
.orbit-ring { position: absolute; inset: var(--inset); border: 1px dashed rgba(143, 243, 232, 0.62); border-radius: 50%; animation: orbitSpin var(--duration) linear infinite; transform: rotate(var(--start)); }
.orbit-ring span { position: absolute; top: 50%; left: -2.1rem; padding: 0.38rem 0.7rem; border-radius: 999px; color: var(--night); background: var(--mint); font: 700 0.72rem/1 var(--tech); text-transform: uppercase; letter-spacing: 0.08em; }
.ring-one { --inset: 10%; --duration: 28s; --start: 10deg; }
.ring-two { --inset: 24%; --duration: 21s; --start: 88deg; border-color: rgba(255, 142, 209, 0.58); }
.ring-two span { background: var(--rose); }
.ring-three { --inset: 38%; --duration: 16s; --start: 186deg; border-color: rgba(247, 216, 139, 0.58); }
.ring-three span { background: var(--gold); }
@keyframes orbitSpin { to { transform: rotate(calc(var(--start) + 360deg)); } }
.sticky-satellite { position: absolute; right: 26%; top: 18%; display: grid; place-items: center; width: 5rem; height: 5rem; border-radius: 1.2rem 1.2rem 1.2rem 0.25rem; color: var(--night); background: var(--gold); font: 400 3rem/1 var(--deco); box-shadow: 0 16px 36px rgba(36,19,63,0.3); }
.foreground-crescent { position: absolute; right: -14rem; bottom: -18rem; width: 36rem; height: 36rem; z-index: 6; border-radius: 50%; background: radial-gradient(circle at 34% 34%, transparent 0 43%, rgba(255, 183, 165, 0.92) 44% 58%, rgba(255, 142, 209, 0.5) 72%, transparent 73%); filter: blur(0.2px); }

.gravity-frame { min-height: 120vh; display: grid; grid-template-columns: minmax(280px, 1fr) minmax(280px, 0.9fr); gap: 2rem; align-items: center; background: radial-gradient(circle at 48% 50%, rgba(205, 183, 255, 0.25), transparent 21rem), linear-gradient(180deg, rgba(36, 19, 63, 0.98), rgba(60, 31, 82, 0.95)); }
.sunburst-portal { position: absolute; inset: 8vh auto auto -8vw; width: 54vw; height: 76vh; opacity: 0.4; background: repeating-conic-gradient(from -18deg, rgba(247,216,139,0.26) 0 5deg, transparent 5deg 13deg); clip-path: ellipse(48% 50% at 50% 50%); }
.gravity-well { position: relative; z-index: 4; width: min(80vw, 620px); aspect-ratio: 1; margin: auto; border-radius: 50%; background: radial-gradient(circle, rgba(36,19,63,0.15) 0 18%, rgba(143,243,232,0.18) 19% 20%, transparent 21% 33%, rgba(255,142,209,0.25) 34% 35%, transparent 36% 51%, rgba(205,183,255,0.2) 52% 53%, transparent 54%); transform: rotate(var(--well-rotate, 0deg)); transition: transform 0.2s ease-out; }
.well-core { position: absolute; inset: 34%; display: grid; place-items: center; border-radius: 50%; color: var(--night); background: radial-gradient(circle at 35% 30%, var(--cream), var(--peach) 45%, var(--rose)); box-shadow: 0 0 70px rgba(255, 142, 209, 0.45), 0 0 120px rgba(143, 243, 232, 0.22); }
.well-core span { font: 400 clamp(1rem, 2.5vw, 2rem)/1 var(--deco); letter-spacing: 0.05em; }
.process-fragment { position: absolute; padding: 0.55rem 0.9rem; border: 1px solid rgba(255,244,216,0.45); border-radius: 999px; background: rgba(36,19,63,0.74); color: var(--cream); font: 700 0.85rem/1 var(--tech); text-transform: uppercase; letter-spacing: 0.12em; animation: fragmentFloat 5s ease-in-out infinite alternate; }
.fragment-a { left: 5%; top: 28%; color: var(--mint); }
.fragment-b { right: 8%; top: 16%; color: var(--gold); animation-delay: -1s; }
.fragment-c { right: 9%; bottom: 24%; color: var(--rose); animation-delay: -2s; }
.fragment-d { left: 14%; bottom: 12%; color: var(--lavender); animation-delay: -3s; }
@keyframes fragmentFloat { to { transform: translateY(-18px) rotate(8deg) scale(1.08); } }
.gravity-copy { z-index: 5; transform: rotate(2deg); }
.elastic-lines { position: absolute; inset: 8vh 4vw; width: 92vw; height: 78vh; z-index: 2; fill: none; stroke: rgba(143, 243, 232, 0.36); stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 0 12px rgba(143,243,232,0.36)); }
.elastic-lines path:nth-child(2) { stroke: rgba(255, 142, 209, 0.34); }
.elastic-lines path:nth-child(3) { stroke: rgba(247, 216, 139, 0.28); }

.corridor-frame { min-height: 105vh; background: linear-gradient(115deg, rgba(255,183,165,0.17), transparent 35%), radial-gradient(circle at 72% 45%, rgba(156,184,255,0.32), transparent 25rem), var(--night); }
.corridor-copy { position: relative; z-index: 6; max-width: 760px; transform: rotate(-2deg); }
.artifact-layer { position: absolute; inset: 0; pointer-events: none; }
.artifact { position: absolute; display: grid; place-items: center; border: 1px solid rgba(255,244,216,0.42); color: var(--night); background: rgba(255,244,216,0.82); box-shadow: 0 20px 60px rgba(36,19,63,0.32); font: 700 0.75rem/1 var(--tech); text-transform: uppercase; letter-spacing: 0.08em; }
.far .ruler { right: 12%; top: 22%; width: 16rem; height: 2.5rem; border-radius: 999px; background: repeating-linear-gradient(90deg, var(--cream) 0 14px, var(--gold) 14px 17px); transform: rotate(17deg); }
.far .cassette { left: 7%; bottom: 18%; width: 13rem; height: 8rem; border-radius: 1.5rem; background: linear-gradient(135deg, var(--lavender), var(--periwinkle)); transform: rotate(-9deg); }
.far .arrow { right: 30%; bottom: 25%; width: 10rem; height: 3rem; clip-path: polygon(0 25%, 70% 25%, 70% 0, 100% 50%, 70% 100%, 70% 75%, 0 75%); background: var(--mint); }
.mid .checker { left: 18%; top: 32%; width: 15rem; height: 15rem; border-radius: 2rem; background-color: var(--cream); background-image: linear-gradient(45deg, var(--rose) 25%, transparent 25%), linear-gradient(-45deg, var(--rose) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--rose) 75%), linear-gradient(-45deg, transparent 75%, var(--rose) 75%); background-size: 42px 42px; background-position: 0 0, 0 21px, 21px -21px, -21px 0; transform: perspective(400px) rotateX(42deg) rotateZ(-22deg); }
.mid .stool { right: 18%; top: 54%; width: 8rem; height: 8rem; border-radius: 50% 50% 16% 16%; background: var(--peach); }
.near .big-planet { position: absolute; right: -12rem; bottom: -8rem; width: 34rem; height: 34rem; border-radius: 50%; background: repeating-linear-gradient(-24deg, var(--periwinkle) 0 30px, var(--lavender) 30px 55px, var(--mint) 55px 78px); box-shadow: 0 0 80px rgba(156,184,255,0.38); }
.near .big-planet::after { content: ""; position: absolute; left: -22%; right: -22%; top: 46%; height: 15%; border: 18px solid rgba(255,244,216,0.72); border-left-color: transparent; border-right-color: transparent; border-radius: 50%; transform: rotate(-13deg); }

.afterglow-frame { min-height: 105vh; display: grid; place-items: center; text-align: center; background: radial-gradient(circle at 50% 20%, rgba(255,244,216,0.2), transparent 25rem), linear-gradient(180deg, rgba(36,19,63,0.94), rgba(156,184,255,0.34)); }
.calm-sky { position: absolute; inset: 8vh 7vw; border-radius: 48% 52% 45% 55%; background: linear-gradient(160deg, rgba(255,183,165,0.23), rgba(143,243,232,0.14), rgba(205,183,255,0.22)); filter: blur(3px); }
.constellation-logo { position: relative; width: min(88vw, 720px); min-height: 360px; display: grid; place-items: center; z-index: 5; }
.constellation-logo svg { position: absolute; width: 80%; height: 72%; fill: none; stroke: rgba(143, 243, 232, 0.7); stroke-width: 3; filter: drop-shadow(0 0 16px rgba(143,243,232,0.48)); }
.constellation-logo h2 { font-size: clamp(2.8rem, 8vw, 8rem); text-shadow: 0.035em 0.035em 0 var(--rose), -0.026em 0.055em 0 var(--lavender); }
.star { position: absolute; width: 17px; height: 17px; border-radius: 50%; background: var(--cream); box-shadow: 0 0 24px var(--cream); animation: twinkle 2.4s ease-in-out infinite alternate; }
.s1 { left: 16%; top: 54%; } .s2 { left: 34%; top: 25%; animation-delay: -0.7s; } .s3 { right: 42%; top: 43%; animation-delay: -1.4s; } .s4 { right: 16%; top: 21%; animation-delay: -0.3s; } .s5 { right: 11%; bottom: 23%; animation-delay: -1s; }
@keyframes twinkle { to { transform: scale(1.65); background: var(--mint); } }
.final-caption { position: relative; z-index: 6; margin-top: -4rem; }
.final-ticket { position: absolute; right: 7vw; bottom: 8vh; z-index: 6; display: grid; gap: 0.4rem; padding: 1rem 1.2rem; border-radius: 1.4rem; background: linear-gradient(135deg, rgba(255,244,216,0.88), rgba(255,183,165,0.82)); color: var(--night); text-align: left; font-family: var(--tech); box-shadow: 0 22px 55px rgba(36,19,63,0.35); }
.final-ticket span { text-transform: uppercase; letter-spacing: 0.11em; font-size: 0.72rem; }

.gravitate { transform-style: preserve-3d; transition: transform 0.22s ease-out; }

@media (max-width: 860px) {
  .ticket-nav { left: 1rem; right: 1rem; transform: none; overflow-x: auto; justify-content: flex-start; }
  .wordmark { font-size: clamp(3.2rem, 18vw, 7rem); }
  .portal { inset: 14vh 4vw auto; height: 48vh; }
  .planet-peach { right: -1rem; top: 14vh; }
  .planet-mint { left: 4vw; top: 22vh; }
  .observatory-desk { transform: none; }
  .idea-card, .idea-card.wide { width: 100%; transform: none; }
  .orbit-system { position: relative; right: auto; top: auto; width: 92vw; margin: 4rem auto 0; }
  .gravity-frame { grid-template-columns: 1fr; }
  .gravity-copy { transform: none; }
  .foreground-crescent { opacity: 0.45; }
  .near .big-planet { width: 22rem; height: 22rem; right: -9rem; }
}

@media (max-width: 560px) {
  .frame { padding-left: 1rem; padding-right: 1rem; }
  .chapter-copy h2, .corridor-copy h2, .constellation-logo h2 { font-size: clamp(2.7rem, 15vw, 5rem); }
  .artifact { transform: scale(0.75); }
  .far .ruler { right: -4rem; }
  .mid .checker { left: -3rem; }
}