:root {
  /* compliance language: coordinates around Then introduce clusters by with assigned **stagger** pattern: simple fade-ins Grotesk** 500/700 IDs */
  --paper: #F4EBDD;
  --plum: #6E1234;
  --blue: #78D7FF;
  --black: #12070B;
  --burgundy: #4A061D;
  --rose: #9B3154;
  --amber: #FFB000;
  --font-body: "Noto Sans", "Inter", system-ui, sans-serif;
  --font-display: "Afacad", "Arial Narrow", system-ui, sans-serif;
  --font-accent: "Space Grotesk", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--burgundy);
  color: var(--paper);
  font-family: var(--font-body);
  overflow-x: hidden;
}

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

.observatory {
  min-height: 100vh;
  background:
    linear-gradient(90deg, rgba(18,7,11,.18) 1px, transparent 1px),
    linear-gradient(0deg, rgba(244,235,221,.05) 1px, transparent 1px),
    var(--burgundy);
  background-size: 9vw 9vw, 9vw 9vw, auto;
  position: relative;
}

.fixed-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 26px;
  font-family: var(--font-accent);
  font-size: 12px;
  letter-spacing: .12em;
  color: var(--paper);
  mix-blend-mode: difference;
}

.nav-coords { display: flex; gap: 18px; }
.nav-coords a { transition: color .2s ease, transform .2s ease; }
.nav-coords a:hover, .nav-coords a.active { color: var(--amber); transform: translateY(-2px); }

.scene {
  min-height: 100vh;
  position: relative;
  padding: 106px clamp(20px, 5vw, 78px) 70px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.hero-scene { background: var(--burgundy); }

.void-grid {
  position: absolute;
  inset: 12vh 8vw;
  border: 2px solid rgba(244,235,221,.12);
  background-image: radial-gradient(var(--rose) 2px, transparent 2px);
  background-size: 58px 58px;
  clip-path: polygon(0 0, 78% 0, 78% 32%, 100% 32%, 100% 100%, 18% 100%, 18% 74%, 0 74%);
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(78px, 17vw, 240px);
  letter-spacing: -.055em;
  line-height: .72;
  margin: 0 0 0 7vw;
  max-width: 880px;
  transform: rotate(-2deg);
  z-index: 2;
}

.hero-declare {
  z-index: 2;
  max-width: 620px;
  margin: 36px 0 0 10vw;
  font-size: clamp(18px, 2.2vw, 30px);
  line-height: 1.16;
  color: var(--amber);
  font-weight: 700;
}

.blink-coord, .scene-label, .tile-index, .final-coordinate, .control-chip {
  font-family: var(--font-accent);
  letter-spacing: .14em;
  font-weight: 700;
}

.blink-coord {
  position: absolute;
  padding: 8px 10px;
  border: 1px solid currentColor;
  font-size: 11px;
  animation: blinkCoord 2.6s steps(2, end) infinite;
}
.coord-a { top: 24vh; left: 10vw; color: var(--blue); }
.coord-b { right: 8vw; top: 35vh; color: var(--paper); animation-delay: .7s; }
.coord-c { left: 64vw; bottom: 18vh; color: var(--amber); animation-delay: 1.2s; }

@keyframes blinkCoord { 0%, 72% { opacity: 1; } 73%, 100% { opacity: .22; } }

.control-chip {
  position: absolute;
  right: 9vw;
  bottom: 10vh;
  background: var(--paper);
  color: var(--burgundy);
  padding: 14px 18px;
  cursor: pointer;
  box-shadow: 10px 10px 0 var(--black);
}

.scene-label {
  display: flex;
  gap: 14px;
  align-items: center;
  font-size: 12px;
  color: var(--amber);
  text-transform: uppercase;
  margin-bottom: 22px;
}
.scene-label span { color: var(--blue); }

h2 {
  font-family: var(--font-display);
  font-size: clamp(44px, 8vw, 116px);
  line-height: .88;
  letter-spacing: -.035em;
  max-width: 1120px;
  margin: 0 0 42px;
}

.masonry-field {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: 72px;
  gap: 16px;
  grid-auto-flow: dense;
  perspective: 800px;
}

.tile {
  position: relative;
  padding: 18px;
  overflow: hidden;
  color: var(--paper);
  transform: translateY(48px) translateX(var(--lane, 0px));
  opacity: 0;
  transition: transform .8s cubic-bezier(.2,.9,.1,1), opacity .8s ease, clip-path .8s ease;
  border: 2px solid var(--black);
}
.scene.in-view .tile { transform: translateY(0) translateX(var(--scroll-shift, 0px)); opacity: 1; }
.scene.in-view .tile:nth-child(2) { transition-delay: .12s; }
.scene.in-view .tile:nth-child(3) { transition-delay: .24s; }
.scene.in-view .tile:nth-child(4) { transition-delay: .36s; }
.scene.in-view .tile:nth-child(5) { transition-delay: .48s; }

.tile-cream { background: var(--paper); color: var(--burgundy); }
.tile-black { background: var(--black); }
.tile-plum { background: var(--plum); }
.tile-rose { background: var(--rose); }
.tile-burgundy { background: var(--burgundy); }
.tile-blue { background: var(--blue); color: var(--black); }

.tall { grid-column: span 3; grid-row: span 5; }
.wide { grid-column: span 6; grid-row: span 3; }
.square { grid-column: span 3; grid-row: span 3; }
.small { grid-column: span 2; grid-row: span 2; }
.horizon { grid-column: span 7; grid-row: span 2; }
.column { grid-column: span 2; grid-row: span 5; }

.tile p { position: absolute; bottom: 18px; left: 18px; right: 18px; margin: 0; font-size: 16px; line-height: 1.3; }
.tile-index { font-size: 11px; position: relative; z-index: 3; }

.seed-stack { position: absolute; inset: 78px 32px 32px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.seed-stack i { background: var(--burgundy); display: block; clip-path: polygon(0 0, 74% 0, 74% 26%, 100% 26%, 100% 100%, 0 100%); }
.amber-star, .cold-star, .selected-star { position: absolute; width: 28px; height: 28px; background: var(--amber); clip-path: polygon(50% 0, 61% 36%, 100% 50%, 61% 64%, 50% 100%, 39% 64%, 0 50%, 39% 36%); }
.amber-star { left: 50%; top: 50%; transform: translate(-50%, -50%) scale(2.4); }
.cold-star { right: 24px; bottom: 24px; background: var(--blue); transform: scale(1.8); }
.nested-worlds { position: absolute; inset: 58px; border: 3px solid var(--paper); }
.nested-worlds b { position: absolute; border: 3px solid var(--paper); }
.nested-worlds b:nth-child(1) { inset: 22px; }
.nested-worlds b:nth-child(2) { inset: 46px 88px 20px 34px; }
.nested-worlds b:nth-child(3) { inset: 28px 24px 58px 124px; border-color: var(--amber); }
.nested-worlds b:nth-child(4) { inset: 78px 184px 18px 18px; border-color: var(--blue); }
.dot-field { position: absolute; inset: 46px 22px 22px; background-image: radial-gradient(var(--paper) 3px, transparent 4px); background-size: 26px 26px; }
.moon-strip { position: absolute; left: 24px; right: 24px; bottom: 22px; height: 76px; background: var(--paper); clip-path: ellipse(48% 44% at 50% 100%); }

.wind-map { position: absolute; inset: 54px 24px 18px; width: calc(100% - 48px); height: calc(100% - 72px); }
.wind-map path { fill: none; stroke: var(--burgundy); stroke-width: 9; stroke-linecap: square; stroke-dasharray: 520; stroke-dashoffset: 520; transition: stroke-dashoffset 1.4s ease; }
.scene.in-view .wind-map path { stroke-dashoffset: 0; }
.prob-column { position: absolute; bottom: 20px; left: 22px; right: 22px; height: 72%; display: flex; align-items: end; gap: 12px; }
.prob-column i { flex: 1; background: var(--burgundy); border-top: 10px solid var(--amber); }
.branch-lines { position: absolute; inset: 68px 24px 24px; }
.branch-lines:before { content: ""; position: absolute; left: 12%; top: 14%; width: 18px; height: 18px; background: var(--amber); }
.branch-lines i { position: absolute; left: 20%; top: 21%; width: 62%; height: 3px; background: var(--paper); transform-origin: left; }
.branch-lines i:nth-child(1) { transform: rotate(-24deg); }
.branch-lines i:nth-child(2) { transform: rotate(12deg); width: 74%; }
.branch-lines i:nth-child(3) { transform: rotate(42deg); width: 48%; background: var(--blue); }

.diagram-ring { width: min(82vw, 760px); aspect-ratio: 1; margin: 0 auto; position: relative; border: 18px solid var(--paper); border-radius: 50%; }
.ring-panel { position: absolute; width: 160px; height: 118px; background: var(--plum); color: var(--paper); display: grid; place-items: center; font-family: var(--font-accent); font-weight: 700; border: 3px solid var(--black); transition: transform .8s ease; }
.p1 { left: -24px; top: 18%; } .p2 { right: -30px; top: 12%; background: var(--rose); } .p3 { right: 10%; bottom: -28px; background: var(--paper); color: var(--burgundy); } .p4 { left: 12%; bottom: 4%; background: var(--black); }
.eclipse-core { position: absolute; inset: 20%; background: var(--black); border-radius: 50%; box-shadow: -40px 0 0 var(--amber); transition: transform .8s ease; }
.scene.in-view .eclipse-core { animation: eclipse 4s ease-in-out infinite; }
@keyframes eclipse { 0%,100% { transform: translateX(-20px); } 50% { transform: translateX(24px); } }

.collapse-wall { display: grid; grid-template-columns: repeat(4, 1fr); min-height: 54vh; border: 4px solid var(--black); }
.collapse-lane { display: flex; align-items: end; padding: 24px; font-family: var(--font-display); font-size: clamp(30px, 5vw, 70px); line-height: .82; letter-spacing: -.04em; color: var(--black); transform: scaleY(.18); transform-origin: bottom; transition: transform .9s cubic-bezier(.2,.8,.1,1); }
.scene.in-view .collapse-lane { transform: scaleY(1); }
.collapse-lane:nth-child(2) { transition-delay: .14s; } .collapse-lane:nth-child(3) { transition-delay: .28s; } .collapse-lane:nth-child(4) { transition-delay: .42s; }
.rose { background: var(--rose); } .amber { background: var(--amber); } .cream { background: var(--paper); } .blue { background: var(--blue); }

.one-scene { background: var(--black); align-items: center; }
.selected-monolith { width: min(86vw, 980px); min-height: 68vh; background: var(--burgundy); border: 4px solid var(--paper); padding: clamp(28px, 6vw, 76px); position: relative; display: flex; flex-direction: column; justify-content: end; box-shadow: 22px 22px 0 var(--plum); }
.selected-monolith h2 { font-size: clamp(42px, 7vw, 104px); margin-bottom: 22px; }
.selected-monolith p { max-width: 540px; color: var(--paper); font-size: 20px; line-height: 1.35; }
.selected-star { right: 12%; top: 18%; background: var(--blue); transform: scale(3); animation: starSnap 2s steps(2, end) infinite; }
@keyframes starSnap { 0%, 100% { clip-path: polygon(50% 0, 61% 36%, 100% 50%, 61% 64%, 50% 100%, 39% 64%, 0 50%, 39% 36%); } 50% { clip-path: polygon(42% 0, 58% 0, 58% 42%, 100% 42%, 100% 58%, 58% 58%, 58% 100%, 42% 100%, 42% 58%, 0 58%, 0 42%, 42% 42%); } }
.final-coordinate { margin-top: 28px; color: var(--blue); font-size: 12px; }

.constellation-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 5; opacity: .45; }
.constellation-overlay path { fill: none; stroke: var(--paper); stroke-width: 2; stroke-dasharray: 1200; stroke-dashoffset: var(--draw, 1200); transition: stroke-dashoffset .4s linear; }
.constellation-overlay circle { fill: var(--amber); transform-origin: center; opacity: .75; }
.align-mode .tile { clip-path: inset(8% 8% 8% 8%); }
.align-mode .diagram-ring { border-color: var(--blue); }

@media (max-width: 820px) {
  .fixed-nav { align-items: flex-start; gap: 10px; flex-direction: column; padding: 14px; }
  .nav-coords { gap: 10px; flex-wrap: wrap; }
  .wordmark { margin-left: 0; font-size: clamp(72px, 24vw, 140px); }
  .hero-declare { margin-left: 0; }
  .control-chip { left: 20px; right: auto; bottom: 8vh; }
  .masonry-field { grid-template-columns: repeat(6, 1fr); grid-auto-rows: 58px; gap: 12px; }
  .tall, .wide, .square, .small, .horizon, .column { grid-column: span 6; grid-row: span 3; }
  .collapse-wall { grid-template-columns: 1fr; }
  .collapse-lane { min-height: 18vh; }
  .diagram-ring { width: 92vw; border-width: 10px; }
  .ring-panel { width: 112px; height: 82px; font-size: 12px; }
}