:root {
  --cream: #F2E8D2;
  --teal: #6FA7A0;
  --coral: #D9826B;
  --navy: #243043;
  --mustard: #D6B25E;
  --mint: #A8E6CF;
  --lavender: #9B8FC7;
  --brown: #2E2622;
  --display: "Outfit", "Inter", system-ui, sans-serif;
  --interface: "Space Grotesk", "Inter", system-ui, sans-serif;
  --accent: "Fraunces", Georgia, serif;
}

* { box-sizing: border-box; }

html, body { margin: 0; width: 100%; min-height: 100%; overflow: hidden; }

body {
  font-family: var(--interface);
  color: var(--brown);
  background: var(--navy);
}

button { font: inherit; color: inherit; }

.observatory {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-height: 720px;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 12%, rgba(155, 143, 199, .35), transparent 30%),
    linear-gradient(165deg, #243043 0%, #34465a 40%, #F2E8D2 100%);
  isolation: isolate;
}

.sky-field, .grain, .aurora, .horizon-line, .weather { position: absolute; inset: 0; }

.grain {
  opacity: .24;
  background-image:
    radial-gradient(circle, rgba(46, 38, 34, .35) 0 1px, transparent 1.4px),
    radial-gradient(circle, rgba(242, 232, 210, .28) 0 1px, transparent 1.8px);
  background-size: 18px 18px, 31px 31px;
  mix-blend-mode: multiply;
}

.aurora {
  width: 150vw;
  height: 36vh;
  left: -24vw;
  top: 44vh;
  filter: blur(18px);
  transform: rotate(-10deg);
  opacity: .74;
  animation: auroraDrift 13s ease-in-out infinite alternate;
}

.aurora-one { background: linear-gradient(90deg, transparent, rgba(168, 230, 207, .7), rgba(155, 143, 199, .42), transparent); }
.aurora-two { top: 52vh; opacity: .42; transform: rotate(-7deg); background: linear-gradient(90deg, transparent, rgba(214, 178, 94, .35), rgba(111, 167, 160, .6), transparent); animation-duration: 17s; }

.horizon-line {
  top: auto;
  height: 30vh;
  bottom: -8vh;
  border-top: 4px solid rgba(242, 232, 210, .56);
  border-radius: 50% 50% 0 0 / 36% 36% 0 0;
  animation: breathe 5.8s ease-in-out infinite;
}

.weather { pointer-events: none; }
.weather::before, .weather::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-left: 18px solid transparent;
  border-right: 18px solid transparent;
  border-bottom: 26px solid rgba(242, 232, 210, .55);
  filter: drop-shadow(14px 14px 0 rgba(155, 143, 199, .28));
  animation: birdDrift 18s linear infinite;
}
.weather-a::before { left: 12vw; top: 58vh; }
.weather-a::after { left: 70vw; top: 28vh; animation-delay: -8s; transform: scale(.7); }
.weather-b::before { left: 38vw; top: 72vh; animation-delay: -4s; transform: scale(.55); }
.weather-b::after { left: 84vw; top: 62vh; animation-delay: -13s; transform: scale(.85); }
.weather-c::before { left: 20vw; top: 21vh; animation-delay: -10s; transform: scale(.45); }

.hud-frame { position: absolute; inset: 24px; z-index: 5; pointer-events: none; }
.corner { position: absolute; width: 112px; height: 112px; border-color: rgba(242, 232, 210, .8); }
.corner-tl { left: 0; top: 0; border-left: 4px solid; border-top: 4px solid; border-radius: 34px 0 0 0; }
.corner-tr { right: 0; top: 0; border-right: 4px solid; border-top: 4px solid; border-radius: 0 34px 0 0; }
.corner-bl { left: 0; bottom: 0; border-left: 4px solid; border-bottom: 4px solid; border-radius: 0 0 0 34px; }
.corner-br { right: 0; bottom: 0; border-right: 4px solid; border-bottom: 4px solid; border-radius: 0 0 34px 0; }

.frame-orbit { position: absolute; width: 130px; height: 130px; border: 2px dashed rgba(168, 230, 207, .42); border-radius: 50%; animation: rotateSlow 19s linear infinite; }
.frame-orbit span { position: absolute; width: 18px; height: 18px; background: var(--coral); border-radius: 50%; top: 8px; left: 26px; }
.orbit-left { left: 7vw; bottom: 13vh; }
.orbit-right { right: 9vw; top: 18vh; animation-direction: reverse; }

.panel-shell {
  position: relative;
  z-index: 3;
  height: 100%;
  padding: clamp(30px, 4vw, 62px);
  transform-style: preserve-3d;
  transition: transform .25s ease-out;
}

.panel-shadow {
  position: absolute;
  inset: 10vh 7vw 8vh 9vw;
  background: rgba(46, 38, 34, .18);
  border-radius: 56px;
  transform: translate(16px, 16px);
  z-index: -1;
}

.top-hud { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.mini-label, .timestamp, .sticker, .readout-stack span {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgba(46, 38, 34, .22);
  background: rgba(242, 232, 210, .62);
  padding: 7px 13px;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 12px;
  font-weight: 700;
}

h1 {
  margin: 8px 0 0;
  font-family: var(--display);
  font-size: clamp(40px, 7vw, 104px);
  line-height: .82;
  letter-spacing: -.055em;
  color: var(--cream);
  text-shadow: 12px 14px 0 rgba(46, 38, 34, .18);
}

.gauge-cluster { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; max-width: 490px; }
.pill-gauge { width: 138px; height: 38px; padding: 5px; border-radius: 999px; background: rgba(36, 48, 67, .62); border: 2px solid rgba(242, 232, 210, .56); display: flex; align-items: center; gap: 8px; color: var(--cream); }
.pill-gauge span { display: block; height: 24px; width: 54px; border-radius: inherit; background: var(--mustard); animation: gaugePulse 3s ease-in-out infinite; }
.pill-gauge.coral span { background: var(--coral); animation-delay: -1.2s; }
.pill-gauge b { font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }
.timestamp { color: var(--cream); background: rgba(36, 48, 67, .48); border-color: rgba(242, 232, 210, .36); }

.instrument-grid {
  height: calc(100% - 130px);
  display: grid;
  grid-template-columns: minmax(220px, .72fr) minmax(420px, 1.35fr) minmax(220px, .72fr);
  align-items: center;
  gap: clamp(18px, 3vw, 44px);
}

.acetate-card {
  position: relative;
  padding: 24px;
  border-radius: 34px;
  background: rgba(242, 232, 210, .62);
  border: 2px solid rgba(46, 38, 34, .18);
  box-shadow: 16px 16px 0 rgba(36, 48, 67, .16), inset 0 0 0 9px rgba(255,255,255,.08);
  backdrop-filter: blur(6px);
}

.left-console { align-self: end; transform: rotate(-2.5deg); }
.right-console { align-self: start; transform: rotate(2deg); }
.archived { color: var(--cream); background: rgba(36, 48, 67, .72); }
.active { background: rgba(168, 230, 207, .68); }

h2 {
  margin: 24px 0 12px;
  font-family: var(--display);
  font-size: clamp(44px, 5vw, 78px);
  line-height: .86;
  letter-spacing: -.045em;
  color: var(--navy);
}

.left-console p {
  margin: 0;
  font-size: clamp(17px, 1.45vw, 23px);
  line-height: 1.24;
  color: var(--brown);
}

.readout-stack { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; align-items: flex-start; }
.readout-stack span:nth-child(2) { font-family: var(--accent); text-transform: lowercase; letter-spacing: 0; color: var(--coral); }

.calendar-stage { position: relative; min-height: 560px; display: grid; place-items: center; perspective: 1100px; }
.connector { position: absolute; height: 2px; background: rgba(46, 38, 34, .32); transform-origin: left center; }
.connector::after { content: ""; position: absolute; right: -7px; top: -5px; width: 12px; height: 12px; border-radius: 50%; background: var(--mustard); }
.connector-a { width: 34%; left: 2%; top: 36%; transform: rotate(-13deg); }
.connector-b { width: 29%; right: 0; bottom: 33%; transform: rotate(194deg); }

.day-tile {
  position: absolute;
  width: clamp(232px, 28vw, 390px);
  height: clamp(270px, 32vw, 430px);
  border-radius: 54px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: var(--display);
  transform-style: preserve-3d;
}

.day-one {
  background: rgba(36, 48, 67, .62);
  color: rgba(242, 232, 210, .62);
  transform: translate(-86px, 38px) rotate(-9deg) scale(.82);
  box-shadow: 14px 18px 0 rgba(46, 38, 34, .18);
  animation: dayOneIntro 1.15s cubic-bezier(.2,.78,.18,1) both;
}

.day-two {
  color: var(--brown);
  background: var(--cream);
  border: 4px solid rgba(46, 38, 34, .12);
  box-shadow: 18px 20px 0 rgba(46, 38, 34, .18), 0 0 46px rgba(168, 230, 207, .45);
  clip-path: inset(0 0 0 0 round 54px);
  animation: dayTwoIntro 1.25s cubic-bezier(.2,.85,.16,1) both, tileMorph 14s ease-in-out infinite;
  transition: border-radius .8s ease, transform .8s ease, background .8s ease, clip-path .8s ease;
}

.tile-face { text-align: center; z-index: 2; transition: transform .8s ease; }
.day-tile span { font-size: 20px; letter-spacing: .28em; font-weight: 800; }
.day-tile strong { display: block; font-size: clamp(118px, 16vw, 230px); line-height: .78; letter-spacing: -.08em; }
.day-tile em { font-family: var(--interface); font-style: normal; text-transform: uppercase; letter-spacing: .18em; font-size: 13px; font-weight: 700; }

.clock-ring { position: absolute; inset: -26px; border: 3px dashed rgba(111, 167, 160, .78); border-radius: inherit; opacity: .65; animation: rotateSlow 24s linear infinite; }
.clock-ring i { position: absolute; width: 10px; height: 28px; border-radius: 999px; background: var(--coral); left: calc(50% - 5px); top: -8px; transform-origin: 5px calc(clamp(270px, 32vw, 430px) / 2 + 34px); }
.clock-ring i:nth-child(2) { transform: rotate(90deg); }
.clock-ring i:nth-child(3) { transform: rotate(180deg); }
.clock-ring i:nth-child(4) { transform: rotate(270deg); }

.hatch-glow { position: absolute; inset: 24%; border-radius: 40%; background: radial-gradient(circle, rgba(168, 230, 207, .95), rgba(155, 143, 199, .18) 60%, transparent 72%); opacity: 0; transform: scale(.5); transition: opacity .8s ease, transform .8s ease; }
.domain-unfold { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); font-family: var(--display); font-weight: 800; font-size: clamp(26px, 4vw, 58px); color: var(--cream); letter-spacing: -.05em; text-shadow: 10px 10px 0 rgba(46, 38, 34, .2); opacity: 0; animation: unfoldName 1.1s .75s ease both; }

.glyph-orbit { position: absolute; width: min(46vw, 620px); height: min(46vw, 620px); border-radius: 50%; animation: rotateSlow 32s linear infinite; pointer-events: none; transition: transform .2s ease-out; }
.glyph { position: absolute; display: block; filter: drop-shadow(12px 12px 0 rgba(46, 38, 34, .12)); }
.sunburst { width: 42px; height: 42px; border-radius: 50%; background: var(--mustard); top: 8%; left: 48%; }
.sunburst::after { content: ""; position: absolute; inset: -12px; border: 3px dashed rgba(214, 178, 94, .7); border-radius: 50%; }
.boomerang { width: 70px; height: 34px; border-radius: 999px 999px 999px 10px; background: var(--lavender); top: 62%; left: 4%; transform: rotate(-20deg); }
.dot { width: 24px; height: 24px; border-radius: 50%; background: var(--coral); right: 8%; top: 30%; }
.bird { width: 0; height: 0; border-left: 24px solid transparent; border-right: 24px solid transparent; border-bottom: 34px solid var(--mint); right: 18%; bottom: 8%; transform: rotate(22deg); }

.dial { width: 146px; height: 146px; border-radius: 50%; border: 18px solid rgba(36, 48, 67, .74); border-right-color: var(--mustard); border-bottom-color: var(--teal); margin: 0 auto 18px; position: relative; animation: dialSweep 7s ease-in-out infinite; }
.dial span { position: absolute; width: 8px; height: 54px; border-radius: 999px; background: var(--coral); left: calc(50% - 4px); top: 20px; transform-origin: 4px 52px; animation: handSweep 5s ease-in-out infinite; }
.accent-line { font-family: var(--accent); font-size: clamp(23px, 2.3vw, 36px); line-height: 1; color: var(--navy); margin: 20px 0; }
.switchboard { display: flex; flex-direction: column; gap: 8px; }
.chapter-pill, .rail-dot { cursor: pointer; border: 0; }
.chapter-pill { text-align: left; border-radius: 999px; padding: 9px 13px; background: rgba(36, 48, 67, .12); text-transform: uppercase; letter-spacing: .12em; font-size: 12px; font-weight: 700; transition: transform .25s ease, background .25s ease; }
.chapter-pill.active { background: var(--coral); color: var(--cream); transform: translateX(8px); }

.chapter-rail { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); display: flex; gap: 12px; padding: 10px 14px; border-radius: 999px; background: rgba(36, 48, 67, .45); border: 1px solid rgba(242, 232, 210, .34); }
.rail-dot { width: 52px; height: 16px; border-radius: 999px; background: rgba(242, 232, 210, .52); position: relative; transition: width .35s ease, background .35s ease; }
.rail-dot span { position: absolute; width: max-content; left: 50%; top: -28px; transform: translateX(-50%); color: var(--cream); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; opacity: 0; transition: opacity .25s ease; }
.rail-dot.active { width: 92px; background: var(--mint); }
.rail-dot.active span { opacity: 1; }

.observatory[data-chapter="1"] .day-two { border-radius: 50%; background: #D6B25E; transform: rotate(8deg) scale(.96); }
.observatory[data-chapter="1"] .clock-ring { opacity: 1; border-color: rgba(36, 48, 67, .72); }
.observatory[data-chapter="2"] .day-two { border-radius: 34% 66% 48% 52% / 52% 36% 64% 48%; background: #A8E6CF; transform: translateX(22px) rotate(-4deg); }
.observatory[data-chapter="2"] .aurora-one { opacity: .96; }
.observatory[data-chapter="3"] .day-two { clip-path: polygon(0 0, 100% 0, 100% 78%, 70% 78%, 58% 100%, 46% 78%, 0 78%); background: #9B8FC7; color: #F2E8D2; }
.observatory[data-chapter="4"] .day-two { border-radius: 80px; background: #243043; color: #F2E8D2; transform: rotateY(-18deg) scale(1.03); }
.observatory[data-chapter="4"] .tile-face { transform: translateY(-26px) scale(.82); }
.observatory[data-chapter="4"] .hatch-glow { opacity: 1; transform: scale(1.25); }

@keyframes auroraDrift { from { transform: translateX(-3vw) rotate(-10deg) scaleY(.92); } to { transform: translateX(7vw) rotate(-7deg) scaleY(1.14); } }
@keyframes breathe { 0%, 100% { transform: translateY(0) scaleX(1); opacity: .58; } 50% { transform: translateY(-18px) scaleX(1.04); opacity: .9; } }
@keyframes rotateSlow { to { transform: rotate(360deg); } }
@keyframes gaugePulse { 0%,100% { transform: translateX(0); } 50% { transform: translateX(58px); } }
@keyframes dayOneIntro { from { opacity: 1; transform: translate(0, 0) rotate(0) scale(1); } to { opacity: .82; transform: translate(-86px, 38px) rotate(-9deg) scale(.82); } }
@keyframes dayTwoIntro { from { opacity: 0; transform: translate(90px, 40px) rotateY(-65deg) scale(.74); } to { opacity: 1; transform: translate(0, 0) rotateY(0) scale(1); } }
@keyframes tileMorph { 0%,100% { border-radius: 54px; } 24% { border-radius: 50%; } 48% { border-radius: 34% 66% 48% 52% / 52% 36% 64% 48%; } 72% { border-radius: 70px 70px 110px 70px; } }
@keyframes unfoldName { from { opacity: 0; transform: translate(-50%, 24px) scaleX(.7); } to { opacity: 1; transform: translate(-50%, 0) scaleX(1); } }
@keyframes dialSweep { 50% { transform: rotate(24deg); } }
@keyframes handSweep { 50% { transform: rotate(230deg); } }
@keyframes birdDrift { from { translate: -6vw 0; } to { translate: 16vw -3vh; } }

@media (max-width: 980px) {
  html, body { overflow: auto; }
  .observatory { min-height: 1120px; height: auto; }
  .instrument-grid { grid-template-columns: 1fr; height: auto; padding-top: 42px; }
  .calendar-stage { min-height: 520px; order: -1; }
  .left-console, .right-console { transform: none; align-self: auto; }
  .chapter-rail { position: fixed; z-index: 10; }
}