:root {
  /* Compliance trace: IBM Plex Sans**; Space Grotesk**; revealed slow moonlight across small should */
  --abyss: #071426;
  --stone: #101D2E;
  --steel: #7F8C96;
  --marble: #D8D2C4;
  --bronze: #8A6A3D;
  --clay: #4B3528;
  --amber: #C59B5B;
  --space: "Space Grotesk", "Arial Narrow", system-ui, sans-serif;
  --plex: "IBM Plex Sans", Inter, system-ui, sans-serif;
  --archivo: "Archivo Condensed", "Arial Narrow", system-ui, sans-serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  color: var(--marble);
  font-family: var(--plex);
  overflow-x: hidden;
  background:
    radial-gradient(circle at 72% 18%, rgba(197, 155, 91, .14), transparent 13rem),
    radial-gradient(circle at 14% 80%, rgba(127, 140, 150, .12), transparent 17rem),
    linear-gradient(130deg, var(--abyss) 0%, #08172a 45%, var(--stone) 100%);
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}

body::before {
  opacity: .37;
  mix-blend-mode: overlay;
  background-image:
    radial-gradient(circle at 14% 18%, rgba(216, 210, 196, .28) 0 1px, transparent 1.4px),
    radial-gradient(circle at 86% 72%, rgba(75, 53, 40, .45) 0 1px, transparent 1.7px),
    linear-gradient(90deg, transparent 0 47%, rgba(216, 210, 196, .12) 48%, transparent 49%);
  background-size: 3px 3px, 5px 5px, 141px 100%;
  animation: grainBreath 7s steps(4) infinite;
}

body::after {
  opacity: .23;
  background:
    linear-gradient(104deg, transparent 0 25%, rgba(216, 210, 196, .08) 25.2%, transparent 25.8% 100%),
    linear-gradient(178deg, transparent 0 61%, rgba(127, 140, 150, .07) 61.2%, transparent 61.6% 100%);
}

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

.weather {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.bokeh {
  position: absolute;
  display: block;
  border-radius: 999px;
  filter: blur(14px);
  opacity: .68;
  transform: translate3d(0, 0, 0);
  animation: drift 23s ease-in-out infinite alternate;
}

.bokeh-one { width: 8rem; height: 8rem; left: 64%; top: 9%; background: rgba(197, 155, 91, .34); }
.bokeh-two { width: 4.5rem; height: 4.5rem; left: 83%; top: 53%; background: rgba(127, 140, 150, .25); animation-duration: 28s; }
.bokeh-three { width: 13rem; height: 13rem; left: -4rem; top: 70%; background: rgba(16, 29, 46, .8); animation-duration: 31s; }
.bokeh-four { width: 2.3rem; height: 2.3rem; left: 41%; top: 30%; background: rgba(216, 210, 196, .18); animation-duration: 18s; }
.bokeh-five { width: 6rem; height: 6rem; left: 22%; top: 12%; background: rgba(138, 106, 61, .19); animation-duration: 25s; }

.compass-strip {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: clamp(4.2rem, 8vw, 7rem);
  z-index: 10;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 1.3rem .85rem 1.4rem;
  color: var(--steel);
  background: linear-gradient(90deg, rgba(7, 20, 38, .82), rgba(7, 20, 38, .13));
}

.wordmark {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--space);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .04em;
  color: var(--marble);
}

.coordinate-stack {
  align-self: center;
  display: grid;
  gap: 1.15rem;
}

.coord {
  font-family: var(--archivo);
  text-transform: uppercase;
  font-size: .78rem;
  line-height: .86;
  letter-spacing: .09em;
  opacity: .42;
  transition: color .5s ease, opacity .5s ease, transform .5s ease;
}

.coord span { font-size: .58rem; color: var(--bronze); }
.coord.active { color: var(--amber); opacity: 1; transform: translateX(.35rem); }

.progress-rail {
  position: relative;
  height: 30vh;
  width: 1px;
  margin-left: .4rem;
  background: rgba(127, 140, 150, .34);
}

.progress-rail i {
  position: absolute;
  top: 0;
  left: -.28rem;
  width: .58rem;
  height: .58rem;
  border-radius: 50%;
  background: var(--bronze);
  box-shadow: 0 0 0 1px rgba(216, 210, 196, .28), 0 0 1.4rem rgba(197, 155, 91, .55);
  transition: transform .7s cubic-bezier(.2, .8, .2, 1);
}

.scene {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  display: grid;
  place-items: center;
  padding: 9vh 8vw 9vh max(8rem, 14vw);
  overflow: hidden;
  background:
    linear-gradient(148deg, rgba(7, 20, 38, .32), rgba(16, 29, 46, .72)),
    radial-gradient(circle at 70% 83%, rgba(75, 53, 40, .2), transparent 22rem);
}

.scene::before {
  content: "";
  position: absolute;
  inset: 9vh 5vw;
  border: 1px solid rgba(127, 140, 150, .16);
  background: linear-gradient(110deg, rgba(16, 29, 46, .48), transparent 58%);
  clip-path: polygon(0 8%, 82% 0, 100% 86%, 14% 100%);
  z-index: -2;
}

.scene::after {
  content: "";
  position: absolute;
  left: 12vw;
  right: 8vw;
  bottom: 11vh;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--steel), transparent);
  transform: scaleX(0);
  transform-origin: left;
  opacity: .45;
  transition: transform 1.7s ease .35s;
}

.scene.visible::after { transform: scaleX(1); }

.scene-inner { max-width: 58rem; width: 100%; }
.basin-inner { align-self: end; transform: translate(-3vw, -3vh); }
.threshold-inner { max-width: 47rem; margin-left: auto; transform: translateY(-7vh); }
.terrace-inner { max-width: 42rem; margin-right: auto; transform: translate(3vw, 5vh); }
.observatory-inner { max-width: 61rem; text-align: right; transform: translateY(-1vh); }

.micro-label {
  margin: 0 0 1.1rem;
  font-family: var(--archivo);
  font-size: clamp(.72rem, 1.2vw, .95rem);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--bronze);
}

.domain-title,
.inscription {
  margin: 0;
  font-family: var(--space);
  font-weight: 700;
  letter-spacing: -.055em;
  line-height: .86;
  color: var(--marble);
  text-shadow: 0 1px 0 rgba(127, 140, 150, .22), 0 2rem 4rem rgba(0, 0, 0, .45);
}

.domain-title {
  font-size: clamp(4.3rem, 14vw, 15rem);
  position: relative;
  overflow: hidden;
}

.domain-title::after {
  content: "";
  position: absolute;
  inset: -20% auto -20% -30%;
  width: 30%;
  background: linear-gradient(100deg, transparent, rgba(216, 210, 196, .5), transparent);
  mix-blend-mode: screen;
  animation: moonSweep 4.8s cubic-bezier(.18, .65, .28, 1) .35s both;
}

.inscription { font-size: clamp(2.6rem, 7vw, 7.3rem); max-width: 14ch; }
.inscription.final { margin-left: auto; max-width: 16ch; }

.body-copy {
  max-width: 36rem;
  margin: 1.6rem 0 0;
  color: rgba(216, 210, 196, .76);
  font-size: clamp(1rem, 1.55vw, 1.25rem);
  line-height: 1.65;
}

.observatory-inner .body-copy { margin-left: auto; }

.bronze-pin {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  margin-top: 1.2rem;
  font-family: var(--archivo);
  color: var(--steel);
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: .82rem;
}

.bronze-pin span,
.signal-row span {
  display: inline-block;
  border-radius: 50%;
  background: var(--bronze);
  box-shadow: 0 0 1.1rem rgba(197, 155, 91, .58);
}

.bronze-pin span { width: .7rem; height: .7rem; }

.fragment-list {
  display: grid;
  gap: .7rem;
  margin-top: 2rem;
  max-width: 34rem;
}

.fragment-list p {
  margin: 0;
  padding-left: 1.2rem;
  border-left: 1px solid rgba(127, 140, 150, .45);
  color: rgba(216, 210, 196, .78);
  font-size: clamp(1rem, 1.4vw, 1.2rem);
}

.advance-marker {
  position: absolute;
  z-index: 4;
  left: max(8rem, 14vw);
  bottom: 4.8vh;
  border: 1px solid rgba(138, 106, 61, .72);
  border-radius: 999px;
  background: rgba(16, 29, 46, .55);
  color: var(--amber);
  padding: .72rem 1rem;
  font-family: var(--archivo);
  text-transform: uppercase;
  letter-spacing: .14em;
  cursor: pointer;
  transition: transform .45s ease, background .45s ease;
}

.advance-marker:hover { transform: translateY(-.25rem); background: rgba(75, 53, 40, .58); }
.advance-marker.right { left: auto; right: 7vw; }

.marble-mask,
.threshold-plate,
.observatory-ring {
  position: absolute;
  pointer-events: none;
  z-index: -1;
}

.mask-profile {
  right: -6vw;
  top: 12vh;
  width: 33vw;
  height: 62vh;
  opacity: .24;
  background:
    radial-gradient(circle at 38% 20%, var(--marble) 0 9%, transparent 9.5%),
    linear-gradient(92deg, transparent 0 30%, var(--marble) 31% 55%, transparent 56%),
    linear-gradient(165deg, transparent 0 43%, var(--steel) 44% 51%, transparent 52%);
  clip-path: polygon(48% 0, 75% 8%, 80% 27%, 64% 40%, 70% 72%, 44% 100%, 18% 91%, 28% 50%, 14% 28%);
  filter: drop-shadow(-1rem 2rem 3rem rgba(0, 0, 0, .55));
  animation: shardSlide 12s ease-in-out infinite alternate;
}

.mask-column {
  left: 57vw;
  top: 3vh;
  width: 24vw;
  height: 82vh;
  opacity: .18;
  background:
    repeating-linear-gradient(90deg, rgba(216, 210, 196, .62) 0 9px, rgba(127, 140, 150, .26) 10px 16px),
    linear-gradient(var(--marble), var(--steel));
  clip-path: polygon(16% 0, 80% 0, 72% 100%, 4% 90%);
  animation: shardSlide 15s ease-in-out infinite alternate-reverse;
}

.threshold-plate {
  right: 8vw;
  top: 18vh;
  width: 36vw;
  height: 58vh;
  opacity: .22;
  background:
    linear-gradient(120deg, rgba(216, 210, 196, .58), rgba(127, 140, 150, .18)),
    repeating-linear-gradient(0deg, transparent 0 28px, rgba(75, 53, 40, .36) 29px 31px);
  clip-path: polygon(13% 3%, 100% 17%, 81% 100%, 0 78%);
}

.chisel-lines {
  position: absolute;
  left: 13vw;
  top: 18vh;
  display: grid;
  gap: 1.35rem;
  opacity: .46;
}

.chisel-lines i {
  width: 22vw;
  height: 1px;
  background: linear-gradient(90deg, var(--steel), transparent);
  transform: rotate(-6deg);
}

.ripples {
  position: absolute;
  right: 12vw;
  bottom: 15vh;
  width: 28vw;
  aspect-ratio: 1;
  opacity: .34;
}

.ripples span {
  position: absolute;
  inset: 18%;
  border: 1px solid rgba(127, 140, 150, .55);
  border-radius: 50%;
  animation: ripple 4.5s ease-in-out infinite;
}

.ripples span:nth-child(2) { inset: 31%; animation-delay: .7s; }
.ripples span:nth-child(3) { inset: 44%; animation-delay: 1.2s; border-color: rgba(197, 155, 91, .44); }

.signal-row {
  display: flex;
  gap: 1.3rem;
  margin-top: 2.1rem;
}

.signal-row span { width: .55rem; height: .55rem; }
.signal-row span:nth-child(2) { background: var(--amber); transform: translateY(.9rem); }
.signal-row span:nth-child(3) { background: var(--steel); transform: translateY(-.35rem); }

.observatory-ring {
  left: 10vw;
  top: 12vh;
  width: min(52vw, 42rem);
  aspect-ratio: 1;
  border: 1px solid rgba(127, 140, 150, .34);
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 48%, rgba(138, 106, 61, .16) 48.4% 49%, transparent 49.4%),
    conic-gradient(from 24deg, transparent, rgba(197, 155, 91, .18), transparent 21%, rgba(127, 140, 150, .16), transparent 56%);
  animation: ringTurn 34s linear infinite;
}

.closing-mark {
  margin-top: 2.3rem;
  color: var(--amber);
  font-family: var(--archivo);
  letter-spacing: .2em;
  text-transform: uppercase;
}

.reveal {
  opacity: 0;
  transform: translateY(1.4rem);
  transition: opacity 1s ease, transform 1s cubic-bezier(.18, .65, .2, 1);
}

.visible .reveal { opacity: 1; transform: translateY(0); }
.visible .delay-one { transition-delay: .18s; }
.visible .delay-two { transition-delay: .38s; }
.visible .delay-three { transition-delay: .58s; }
.visible .delay-four { transition-delay: .76s; }
.visible .delay-five { transition-delay: .94s; }

@keyframes drift {
  from { transform: translate3d(-1vw, -1vh, 0) scale(.96); }
  to { transform: translate3d(4vw, 3vh, 0) scale(1.08); }
}

@keyframes grainBreath {
  0%, 100% { transform: translate(0, 0); opacity: .31; }
  25% { transform: translate(-1%, 1%); opacity: .4; }
  50% { transform: translate(1%, -.5%); opacity: .34; }
  75% { transform: translate(.5%, 1%); opacity: .45; }
}

@keyframes moonSweep {
  0% { transform: translateX(0) skewX(-14deg); opacity: 0; }
  28% { opacity: 1; }
  100% { transform: translateX(520%) skewX(-14deg); opacity: 0; }
}

@keyframes shardSlide {
  from { transform: translate3d(0, 0, 0) rotate(-1deg); }
  to { transform: translate3d(.7rem, -.45rem, 0) rotate(1deg); }
}

@keyframes ripple {
  0%, 100% { transform: scale(.94); opacity: .35; }
  50% { transform: scale(1.06); opacity: .75; }
}

@keyframes ringTurn { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
  .compass-strip { width: 100%; height: 4.1rem; bottom: auto; grid-template-columns: auto 1fr auto; grid-template-rows: 1fr; padding: .75rem 1rem; }
  .wordmark { writing-mode: initial; transform: none; }
  .coordinate-stack { display: flex; justify-content: center; gap: .75rem; }
  .coord span { display: none; }
  .progress-rail { height: 1px; width: 20vw; align-self: center; margin: 0; }
  .progress-rail i { top: -.28rem; }
  .scene { padding: 7rem 1.35rem 6rem; place-items: end start; }
  .scene::before { inset: 5.8rem .8rem 5rem; }
  .basin-inner, .threshold-inner, .terrace-inner, .observatory-inner { transform: none; margin: 0; text-align: left; }
  .observatory-inner .body-copy, .inscription.final { margin-left: 0; }
  .advance-marker, .advance-marker.right { left: 1.35rem; right: auto; }
  .mask-profile, .mask-column, .threshold-plate { width: 60vw; opacity: .14; }
}