:root {
  /* Compliance typography token: 3** */
  --observatory-black: #080B16;
  --ink-navy: #111B35;
  --shadow-gray: #687083;
  --copper: #B8753A;
  --vellum: #F1E6CC;
  --red: #D94B3D;
  --blue: #5CA7D8;
  --violet: #6950A1;
  --display: "Cormorant Garamond", serif;
  --text: "Source Sans 3", sans-serif;
  --mono: "IBM Plex Mono", monospace;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  color: var(--vellum);
  font-family: var(--text);
  background:
    radial-gradient(circle at 70% 10%, rgba(105, 80, 161, .22), transparent 34vw),
    linear-gradient(145deg, var(--ink-navy), var(--observatory-black) 58%);
  overflow-x: hidden;
}

button { font: inherit; color: inherit; }

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: .18;
  background-image:
    repeating-radial-gradient(circle at 13% 19%, rgba(241,230,204,.18) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(96deg, transparent 0 13px, rgba(184,117,58,.06) 14px 15px);
  mix-blend-mode: screen;
}

.starfield {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 12% 25%, rgba(241,230,204,.7) 0 1px, transparent 1.5px),
    radial-gradient(circle at 42% 18%, rgba(92,167,216,.75) 0 1px, transparent 1.5px),
    radial-gradient(circle at 82% 34%, rgba(241,230,204,.5) 0 1px, transparent 1.5px),
    radial-gradient(circle at 28% 75%, rgba(184,117,58,.65) 0 1px, transparent 1.5px),
    radial-gradient(circle at 67% 82%, rgba(241,230,204,.45) 0 1px, transparent 1.5px);
  transform: translate3d(var(--star-x, 0), var(--star-y, 0), 0);
}

.chamber-rail {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: grid;
  gap: 12px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(241,230,204,.48);
}

.chamber-rail span {
  border-right: 1px solid rgba(184,117,58,.45);
  padding: 6px 14px 6px 0;
  cursor: pointer;
  transition: color .5s, border-color .5s, transform .5s;
}

.chamber-rail span.active {
  color: var(--vellum);
  border-color: var(--red);
  transform: translateX(-9px);
}

.chamber {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  z-index: 1;
  padding: 8vh 8vw;
  display: grid;
  grid-template-columns: minmax(240px, .75fr) minmax(420px, 1.45fr);
  align-items: center;
  gap: 4vw;
  border-bottom: 1px solid rgba(184,117,58,.18);
  background:
    radial-gradient(circle at 20% 20%, rgba(92,167,216,.09), transparent 30vw),
    radial-gradient(circle at 72% 70%, rgba(105,80,161,.16), transparent 32vw);
}

.hero { grid-template-columns: 1fr; padding: 0; }

.orrery {
  width: min(88vw, 980px);
  height: min(88vw, 780px);
  min-height: 620px;
  margin: auto;
  position: relative;
  transform: rotate(var(--orrery-rotation, 0deg));
  transition: transform .2s linear;
}

.ring, .balance-ring {
  position: absolute;
  inset: 50%;
  border: 1px solid rgba(184,117,58,.65);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  box-shadow: inset 0 0 25px rgba(184,117,58,.16), 0 0 25px rgba(184,117,58,.1);
}

.ring::before, .balance-ring::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: inherit;
  border: 1px dashed rgba(241,230,204,.16);
}

.ring-a { width: 92%; height: 76%; animation: turn 80s linear infinite; }
.ring-b { width: 74%; height: 58%; animation: turn 66s linear infinite reverse; border-color: rgba(241,230,204,.34); }
.ring-c { width: 54%; height: 42%; animation: turn 48s linear infinite; border-color: rgba(92,167,216,.45); }
.ring-d { width: 34%; height: 26%; animation: turn 38s linear infinite reverse; border-color: rgba(105,80,161,.75); }

@keyframes turn { to { rotate: 360deg; } }
@keyframes breathe { 50% { box-shadow: 0 0 55px currentColor, inset 0 0 40px rgba(241,230,204,.16); } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes hesitate { 0%, 100% { rotate: -8deg; } 38% { rotate: 14deg; } 64% { rotate: -3deg; } }

.axis {
  position: absolute;
  left: 50%; top: 50%;
  width: 12px; height: 12px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--copper);
  box-shadow: 0 0 0 12px rgba(184,117,58,.12), 0 0 60px rgba(241,230,204,.25);
}

.vellum-disc {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(calc(var(--orrery-rotation, 0deg) * -1));
  width: min(460px, 58vw);
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 42px;
  color: var(--ink-navy);
  background:
    radial-gradient(circle, rgba(241,230,204,.94), rgba(241,230,204,.72) 58%, rgba(241,230,204,.18));
  border: 1px solid rgba(241,230,204,.75);
  box-shadow: 0 0 95px rgba(241,230,204,.18), 0 0 0 18px rgba(241,230,204,.04);
}

.vellum-disc h1, .scene-copy h2, .final-disc h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  letter-spacing: -.04em;
}

.vellum-disc h1 { font-size: clamp(48px, 8vw, 104px); font-style: italic; line-height: .82; }
.vellum-disc p:last-child { font-size: 18px; margin: 22px 0 0; }
.mono { font-family: var(--mono); letter-spacing: .16em; text-transform: uppercase; font-size: 11px; }

.glyph {
  position: absolute;
  width: 92px;
  height: 92px;
  margin: -46px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transform: translate(var(--tug-x, 0), var(--tug-y, 0));
}

.glyph span {
  position: absolute;
  inset: 20px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 28px currentColor;
  animation: breathe 5.5s ease-in-out infinite;
}

.glyph em {
  position: absolute;
  top: 78px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: 10px;
  font-style: normal;
  color: rgba(241,230,204,.72);
  letter-spacing: .12em;
}

.speech { left: 77%; top: 42%; color: var(--blue); }
.speech span::before { content: ""; position: absolute; inset: -15px; border: 1px solid currentColor; border-radius: 50%; box-shadow: 0 0 0 12px rgba(92,167,216,.08); }
.dignity { left: 22%; top: 54%; color: var(--vellum); }
.privacy { left: 63%; top: 18%; color: var(--violet); }
.privacy span { background: radial-gradient(circle at 25% 30%, var(--shadow-gray), var(--violet) 55%, var(--observatory-black)); }
.safety { left: 49%; top: 83%; color: var(--red); }
.safety span { inset: 14px; background: radial-gradient(circle, var(--red), var(--observatory-black) 68%); }
.movement { left: 86%; top: 66%; color: var(--vellum); }
.movement span { border-radius: 55% 45% 60% 40%; }
.property { left: 34%; top: 20%; color: var(--copper); }
.property span { clip-path: polygon(48% 0, 90% 28%, 78% 86%, 22% 92%, 4% 35%); }
.belief { left: 11%; top: 72%; color: var(--vellum); }
.belief span { border-radius: 50% 50% 45% 45%; background: radial-gradient(circle at 50% 20%, #F1E6CC, #B8753A 72%); }
.autonomy { left: 18%; top: 31%; color: var(--copper); }
.autonomy span::after { content: ""; position: absolute; inset: -10px; border: 2px solid rgba(241,230,204,.38); border-radius: 50%; }

.marginal, .annotation-panel {
  position: absolute;
  z-index: 8;
  max-width: 320px;
  color: rgba(241,230,204,.88);
}

.marginal.left { left: 5vw; top: 14vh; }
.marginal h2, .annotation-panel h3 { font-family: var(--display); font-size: 42px; line-height: .95; margin: 10px 0 16px; }
.annotation-panel {
  right: 6vw;
  bottom: 9vh;
  padding: 22px;
  background: rgba(17,27,53,.72);
  border: 1px solid rgba(184,117,58,.5);
  box-shadow: 0 20px 80px rgba(0,0,0,.32);
}
.annotation-panel dt { color: var(--copper); font-family: var(--mono); text-transform: uppercase; font-size: 10px; margin-top: 14px; }
.annotation-panel dd { margin: 4px 0 0; color: rgba(241,230,204,.8); }

.scene-copy { position: relative; z-index: 4; max-width: 430px; }
.right-copy { grid-column: 2; grid-row: 1; }
.scene-copy h2 { font-size: clamp(58px, 8vw, 112px); font-style: italic; line-height: .78; color: var(--vellum); }
.scene-copy p:not(.mono) { font-size: 20px; line-height: 1.45; color: rgba(241,230,204,.78); }

.comparison-stage {
  position: relative;
  min-height: 68vh;
  border: 1px solid rgba(184,117,58,.22);
  border-radius: 42%;
  background: radial-gradient(circle at 50% 50%, rgba(241,230,204,.05), transparent 60%);
  box-shadow: inset 0 0 100px rgba(0,0,0,.36);
}

.orbit-label, .marker, .well-label, .constrained-label {
  position: absolute;
  font-family: var(--mono);
  color: var(--copper);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
}
.orbit-label { left: 8%; top: 10%; }
.large-body { position: absolute; left: 38%; top: 31%; width: 220px; height: 220px; border-radius: 50%; color: var(--blue); background: radial-gradient(circle at 35% 30%, #F1E6CC, #5CA7D8 42%, #111B35 82%); box-shadow: 0 0 80px rgba(92,167,216,.45); }
.large-body i, .moon-body::before, .moon-body::after { content: ""; position: absolute; border: 1px solid rgba(92,167,216,.55); border-radius: 50%; inset: -34px; }
.moon-body::after { inset: -68px; opacity: .35; }
.dignity-shadow { position: absolute; right: 16%; bottom: 22%; width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center; color: rgba(241,230,204,.5); background: radial-gradient(circle at 20% 30%, rgba(241,230,204,.2), rgba(8,11,22,.9) 65%); font-family: var(--mono); }
.linework { position: absolute; inset: 0; width: 100%; height: 100%; }
.linework path { fill: none; stroke: rgba(184,117,58,.52); stroke-width: 1.2; stroke-dasharray: 900; stroke-dashoffset: 900; animation: draw 4s ease forwards infinite alternate; }

.pinned-card { position: absolute; z-index: 6; width: 260px; padding: 20px; background: rgba(241,230,204,.9); color: var(--ink-navy); border: 1px solid var(--copper); box-shadow: 0 18px 42px rgba(0,0,0,.38); transform: rotate(-4deg); }
.pinned-card::before { content: ""; position: absolute; top: -10px; left: 50%; width: 18px; height: 18px; background: var(--red); border-radius: 50%; box-shadow: 0 0 0 8px rgba(217,75,61,.18); }
.warning { right: 8vw; bottom: 12vh; border-color: var(--red); }
.copper { left: 8vw; bottom: 10vh; transform: rotate(3deg); }

.lens { position: absolute; inset: 14% 18%; border: 1px solid rgba(241,230,204,.38); border-radius: 50%; box-shadow: 0 0 0 28px rgba(92,167,216,.04), inset 0 0 90px rgba(92,167,216,.12); }
.privacy-planet { position: absolute; left: 34%; top: 28%; width: 230px; height: 230px; border-radius: 50%; background: radial-gradient(circle at 30% 20%, #687083, #6950A1 35%, #080B16 70%); box-shadow: 0 0 85px rgba(105,80,161,.55); }
.eclipse-shadow { position: absolute; left: 47%; top: 24%; width: 210px; height: 270px; border-radius: 50%; background: rgba(8,11,22,.86); filter: blur(1px); box-shadow: -30px 0 60px rgba(8,11,22,.8); }
.security-grid { position: absolute; inset: 16%; background-image: linear-gradient(rgba(92,167,216,.15) 1px, transparent 1px), linear-gradient(90deg, rgba(92,167,216,.15) 1px, transparent 1px); background-size: 38px 38px; transform: perspective(450px) rotateX(52deg); }
.marker { right: 14%; bottom: 16%; color: var(--violet); }

.gravity-well { position: absolute; left: 50%; top: 52%; width: 340px; height: 340px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, #080B16 18%, #D94B3D 19%, rgba(217,75,61,.28) 34%, rgba(17,27,53,.15) 64%, transparent 66%); box-shadow: 0 0 100px rgba(217,75,61,.3); }
.gravity-well::before { content: ""; position: absolute; inset: -80px; border-radius: 50%; border: 1px dashed rgba(217,75,61,.34); }
.comet-path { position: absolute; border: 1px solid rgba(241,230,204,.38); border-color: rgba(241,230,204,.38) transparent transparent transparent; border-radius: 50%; }
.path-one { width: 78%; height: 42%; left: 8%; top: 27%; rotate: -14deg; }
.path-two { width: 72%; height: 58%; left: 13%; top: 20%; rotate: 18deg; border-color: rgba(92,167,216,.45) transparent transparent transparent; }
.moving-comet { position: absolute; left: 18%; top: 42%; width: 30px; height: 30px; border-radius: 50%; background: var(--vellum); box-shadow: 0 0 28px var(--vellum), 80px 20px 70px rgba(241,230,204,.25); animation: comet 7s ease-in-out infinite alternate; }
@keyframes comet { to { transform: translate(390px, 70px) scale(.62); background: var(--shadow-gray); } }
.well-label { left: 47%; top: 49%; color: var(--red); }
.constrained-label { right: 10%; top: 22%; color: var(--shadow-gray); }

.tide-stage { border-radius: 30%; }
.tide-ring { position: absolute; inset: 18%; border-radius: 50%; border: 1px solid rgba(92,167,216,.32); box-shadow: 0 0 75px rgba(92,167,216,.15); }
.tide-dot { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 18px var(--blue); transform: translate(var(--tx), var(--ty)); transition: transform .9s ease; }
.bracket { position: absolute; padding: 12px 18px; border: solid rgba(184,117,58,.7); border-width: 1px 0 1px 1px; font-family: var(--mono); text-transform: uppercase; font-size: 11px; color: var(--copper); }
.bracket-one { left: 12%; top: 18%; }
.bracket-two { right: 12%; bottom: 22%; border-width: 1px 1px 1px 0; color: var(--red); }

.finale { grid-template-columns: 1fr; text-align: center; }
.final-orrery { position: relative; width: min(740px, 80vw); height: min(740px, 80vw); min-height: 520px; margin: auto; }
.balance-ring { width: 100%; height: 100%; }
.needle { position: absolute; left: 50%; top: 50%; width: 4px; height: 42%; background: linear-gradient(var(--red), var(--copper), var(--vellum)); transform-origin: bottom center; translate: -50% -100%; animation: hesitate 8s ease-in-out infinite; box-shadow: 0 0 24px rgba(184,117,58,.5); }
.final-disc { position: absolute; inset: 17%; border-radius: 50%; display: grid; place-content: center; padding: 48px; background: radial-gradient(circle, rgba(241,230,204,.9), rgba(241,230,204,.12)); color: var(--vellum); border: 1px solid rgba(241,230,204,.4); }
.final-disc h2 { font-size: clamp(52px, 7vw, 94px); font-style: italic; line-height: .85; text-shadow: 0 8px 40px rgba(0,0,0,.6); }
.final-disc p:not(.mono) { max-width: 480px; margin: 22px auto 0; color: rgba(241,230,204,.8); }
.maxim { font-family: var(--display); font-size: clamp(28px, 4vw, 54px); font-style: italic; color: rgba(241,230,204,.7); max-width: 880px; margin: -8vh auto 0; }

body.scene-1 .orrery, body.scene-2 .orrery, body.scene-3 .orrery, body.scene-4 .orrery, body.scene-5 .orrery { filter: saturate(1.2); }

@media (max-width: 900px) {
  .chamber { grid-template-columns: 1fr; padding: 9vh 7vw; }
  .right-copy { grid-column: auto; }
  .chamber-rail { display: none; }
  .annotation-panel, .marginal.left { position: relative; right: auto; bottom: auto; left: auto; top: auto; margin: 24px auto; }
  .orrery { width: 100vw; min-height: 720px; }
  .comparison-stage { min-height: 58vh; }
  .pinned-card { position: relative; right: auto; bottom: auto; left: auto; margin: 24px 0; }
}