:root {
  --frost-white: #F0F3F8;
  --midnight: #1B2236;
  --frost-blue: #8FA7C6;
  --hoshi-gold: #C9A87C;
  --ink-frost: #3A4254;
  --pale-frost: #C8D2E0;
  --glass-frost: #E8EDF4;
  --petal-trace: #D4B8C4;
  --sidebar-width: clamp(60px, 8vw, 200px);
}

/* Compliance vocabulary from DESIGN.md: Intersection Observer they playing their enters (threshold: `rootMargin: '-20%'` Space Grotesk pairing breaks mono-dominance (94% frequency */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink-frost);
  background: var(--frost-white);
  font-family: "Karla", sans-serif;
  font-weight: 300;
  overflow-x: hidden;
}

body.dark-current { background: var(--midnight); }

.celestial-index {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 20;
  height: 100vh;
  width: var(--sidebar-width);
  background: rgba(232, 237, 244, 0.4);
  backdrop-filter: blur(20px) saturate(1.2);
  border-right: 1px solid rgba(143, 167, 198, 0.18);
  transition: width 900ms ease, background 1500ms ease, opacity 1200ms ease;
  will-change: transform, width;
}

body.dark-current .celestial-index {
  background: rgba(27, 34, 54, 0.45);
  border-right-color: rgba(200, 210, 224, 0.14);
}

body.in-crystal .celestial-index { width: 40vw; }
body.in-closing .celestial-index { opacity: 0.22; }

.star-nav {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  padding: 8vh 0;
}

.star-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 54px;
  padding: 0 0 0 clamp(18px, 2.8vw, 42px);
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--ink-frost);
}

.glyph-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  transition: transform 400ms ease;
}

.glyph-wrap::before {
  content: "";
  position: absolute;
  inset: -13px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 168, 124, 0.15), transparent 62%);
  opacity: 0;
  transition: opacity 400ms ease;
}

.star-link svg {
  width: 24px;
  height: 24px;
  overflow: visible;
  fill: none;
  stroke: var(--frost-blue);
  stroke-width: 0.75px;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.star-link circle {
  fill: rgba(240, 243, 248, 0.35);
  transition: fill 400ms ease, r 400ms ease;
}

.star-link:hover .glyph-wrap { transform: scale(1.15); }
.star-link:hover .glyph-wrap::before { opacity: 1; }
.star-link.active circle { fill: rgba(201, 168, 124, 0.6); }

.nav-label {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1rem, 1.25vw, 1.3rem);
  color: var(--ink-frost);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 400ms ease, transform 400ms ease, color 1500ms ease;
}

.star-link:hover .nav-label, body.in-crystal .nav-label {
  opacity: 1;
  transform: translateX(0);
}

body.dark-current .nav-label { color: var(--pale-frost); }

.sidebar-passage {
  position: absolute;
  top: 52%;
  left: clamp(96px, 11vw, 180px);
  width: min(24vw, 420px);
  color: var(--pale-frost);
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: clamp(1.25rem, 2vw, 2.3rem);
  line-height: 1.45;
  opacity: 0;
  transform: translateY(-50%) translateX(-20px);
  transition: opacity 900ms ease, transform 900ms ease;
  pointer-events: none;
}

body.in-crystal .sidebar-passage { opacity: 1; transform: translateY(-50%) translateX(0); }

.scroll-narrative { margin-left: var(--sidebar-width); }

.season {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 10vw, 130px);
  transition: background-color 1500ms ease, color 1500ms ease;
}

.season.light { background: var(--frost-white); color: var(--ink-frost); }
.season.dark { background: var(--midnight); color: var(--pale-frost); }
.season + .season::before {
  content: "";
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: rgba(143, 167, 198, 0.2);
}

.season-mark {
  display: block;
  margin-bottom: 1.4rem;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 300;
  letter-spacing: 0.16em;
  color: var(--hoshi-gold);
}

h1, h2 {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-weight: 300;
  line-height: 1.05;
}

h1 {
  font-size: clamp(3rem, 8vw, 7rem);
  letter-spacing: 0.12em;
}

h2 {
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  letter-spacing: 0.06em;
  font-weight: 400;
}

p {
  font-size: clamp(0.95rem, 1.1vw, 1.15rem);
  line-height: 1.85;
  letter-spacing: 0.01em;
}

.hero-section {
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(320px, 1.2fr);
  align-items: center;
  gap: 3vw;
}

.moon-bloom {
  position: absolute;
  right: -18vw;
  top: -20vh;
  width: 70vw;
  height: 70vw;
  background: radial-gradient(circle, rgba(232, 237, 244, 0.95), rgba(232, 237, 244, 0.24) 42%, transparent 70%);
  pointer-events: none;
}

.hero-title { align-self: start; margin-top: 9vh; z-index: 2; }

.illustration { position: relative; max-width: 90vw; }
.hero-constellation { min-height: 560px; }
.lottie-stage { position: absolute; inset: 0; pointer-events: none; opacity: 0.75; }

.constellation-svg, .star-map, .branch-svg, .frost-crystal, .closing-constellation svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.const-line {
  fill: none;
  stroke: rgba(143, 167, 198, 0.3);
  stroke-width: 0.5px;
}

.petal-node { animation: petalDrift 12s ease-in-out infinite; animation-delay: var(--d); }
.petal-node path, .branch-blossoms use, .falling-petals use { fill: rgba(212, 184, 196, 0.72); stroke: rgba(143, 167, 198, 0.5); stroke-width: 0.8px; }
.petal-node.gold path { fill: rgba(201, 168, 124, 0.55); }

@keyframes petalDrift {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.82; }
  50% { transform: translateY(22px) rotate(8deg); opacity: 0.45; }
}

.starmap-section {
  display: grid;
  grid-template-columns: minmax(240px, 0.75fr) minmax(420px, 1.35fr);
  align-items: center;
  gap: 6vw;
}

.season-copy { max-width: 440px; }
.season-copy p { color: var(--pale-frost); margin-top: 2rem; }
.star-map-wrap { aspect-ratio: 1; width: min(64vw, 720px); }
.star-map { animation: mapRotate 120s linear infinite; }
.orbital-rings circle, .orbital-rings ellipse { fill: none; stroke: rgba(143, 167, 198, 0.22); stroke-width: 1px; }
.map-lines path { fill: none; stroke: rgba(143, 167, 198, 0.32); stroke-width: 0.7px; }
.map-stars circle { fill: url(#starGlow); animation: starPulse 4s ease-in-out infinite; }

@keyframes mapRotate { to { transform: rotate(60deg); transform-origin: center; } }
@keyframes starPulse { 0%, 100% { opacity: 0.25; } 50% { opacity: 0.9; } }

.draw-divider {
  position: absolute;
  top: 11vh;
  left: 6%;
  width: 88%;
  height: 90px;
}

.draw-divider path {
  fill: none;
  stroke: var(--frost-blue);
  stroke-width: 1px;
  opacity: 0.55;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
}

.draw-divider.drawn path { animation: drawLine 3s ease-in-out forwards; }
@keyframes drawLine { to { stroke-dashoffset: 0; } }

.branch-composition { min-height: 70vh; display: grid; place-items: center; }
.branch-svg { max-width: min(82vw, 1000px); margin-top: 10vh; }
.branch-main, .branch-small { fill: none; stroke: var(--midnight); stroke-linecap: round; stroke-linejoin: round; }
.branch-main { stroke-width: 3px; }
.branch-small { stroke-width: 1.6px; opacity: 0.84; }
.branch-text { position: absolute; right: 12%; top: 41%; width: min(33vw, 440px); }

.crystal-section { display: grid; grid-template-columns: 0.8fr 1.2fr; align-items: center; }
.sidebar-echo { max-width: 360px; opacity: 0.86; }
.sidebar-echo p { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: clamp(1.4rem, 2.4vw, 2.8rem); line-height: 1.35; }
.crystal-wrap { width: min(58vw, 680px); aspect-ratio: 1; justify-self: center; }
.frost-crystal { animation: breathe 12s ease-in-out infinite; }
.crystal-arm { transform-origin: 310px 310px; fill: none; stroke: rgba(143, 167, 198, 0.6); stroke-width: 1.4px; stroke-linecap: round; }
.crystal-arm:nth-child(1) { transform: rotate(0deg); }
.crystal-arm:nth-child(2) { transform: rotate(120deg); }
.crystal-arm:nth-child(3) { transform: rotate(240deg); }
.gold-core { fill: rgba(201, 168, 124, 0.7); }
@keyframes breathe { 0%, 100% { transform: scale(0.96); opacity: 0.68; } 50% { transform: scale(1.04); opacity: 1; } }

.closing-section { display: grid; grid-template-columns: 1.1fr 0.9fr; align-items: center; }
.closing-constellation { width: min(52vw, 660px); }
.falling-petals use { animation: petalDrift 10s ease-in-out infinite; }
.closing-line {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.7rem, 3.2vw, 4rem);
  line-height: 1.2;
  color: var(--ink-frost);
}

footer {
  position: absolute;
  bottom: 22px;
  left: 0;
  right: 0;
  text-align: center;
  color: rgba(58, 66, 84, 0.28);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
}

@media (max-width: 1024px) {
  :root { --sidebar-width: 60px; }
  .nav-label, .sidebar-passage { display: none; }
  body.in-crystal .celestial-index { width: 60px; }
  .season { padding: clamp(54px, 8vw, 90px); }
  .hero-section, .starmap-section, .crystal-section, .closing-section { grid-template-columns: 1fr; }
  .hero-title { margin-top: 2vh; }
  .hero-constellation { min-height: 420px; }
  .star-map-wrap, .crystal-wrap, .closing-constellation { width: min(82vw, 680px); justify-self: center; }
  .branch-text { position: relative; top: auto; right: auto; width: min(70vw, 520px); justify-self: end; }
}

@media (max-width: 767px) {
  .celestial-index {
    top: auto;
    bottom: 0;
    height: 48px;
    width: 100vw;
    border-right: 0;
    border-top: 1px solid rgba(143, 167, 198, 0.18);
  }
  .star-nav { flex-direction: row; padding: 0 10px; }
  .star-link { min-height: 48px; justify-content: center; padding: 0; }
  .scroll-narrative { margin-left: 0; }
  .season { padding: 54px 24px 76px; }
  .hero-section { align-content: center; }
  .hero-constellation { min-height: 320px; }
  .branch-text { width: 86vw; }
  h1 { font-size: clamp(3rem, 18vw, 5.6rem); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
  .draw-divider path { stroke-dashoffset: 0; }
}