:root {
  /* compliance lexicon: (Google Mono` showing fictional (e.g. IntersectionObserver` detect which currently update state accordingly. `threshold: [0.2 Grotesk` `letter-spacing: 0.18em` */
  --marble-base: #f2ebe0;
  --stone-shadow: #2a1f16;
  --warm-charcoal: #3d3028;
  --sienna: #a0755a;
  --gold: #c9a06b;
  --terracotta: #b8704a;
  --vein: #d4c4aa;
  --cosmos: #1a120c;
  --glitch-red: #c4493a;
  --glitch-cyan: #5a9e96;
  --plate-depth: #e0d3c0;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "DM Sans", Inter, system-ui, sans-serif;
  color: var(--warm-charcoal);
  background: var(--marble-base);
  overflow: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0.04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  background: repeating-linear-gradient(to bottom, transparent 0 1px, rgba(0, 0, 0, 0.03) 1px 2px);
}

.marble-surface {
  background:
    linear-gradient(137deg, transparent 38%, #c4a88215 40%, transparent 42%),
    linear-gradient(42deg, transparent 55%, #a0755a0d 56%, transparent 58%),
    linear-gradient(195deg, transparent 30%, #d4c4aa18 32%, transparent 34%),
    linear-gradient(310deg, transparent 62%, #c4a88210 63%, transparent 65%),
    radial-gradient(circle at 62% 28%, var(--marble-base) 0%, var(--plate-depth) 100%);
}

.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  width: 260px;
  height: 100vh;
  z-index: 100;
  overflow-y: auto;
  padding: 2rem 1.35rem;
  border-right: 1px solid #d4c4aa88;
  box-shadow: inset -18px 0 35px #2a1f160d, 12px 0 38px #1a120c14;
}

.brand-block { display: grid; grid-template-columns: 2.3rem 1fr; gap: 0.75rem; align-items: start; margin-bottom: 3.6rem; }
.brand-sigil { color: var(--gold); font-size: 2rem; text-shadow: 0 0 18px #c9a06b88; animation: pulseStar 3.4s ease-in-out infinite; }
.eyebrow, .plate-number, .data-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--terracotta);
}

.brand-block h1 {
  margin: 0.2rem 0 0;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 1.36rem;
  line-height: 0.95;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--stone-shadow);
}

.sidebar-crack { position: absolute; inset: 7rem auto auto 7.5rem; width: 5.5rem; height: calc(100vh - 10rem); opacity: 0.75; pointer-events: none; }
.sidebar-crack path, .marble-crack path { fill: none; stroke: #c4a88255; stroke-width: 1; stroke-dasharray: 900; stroke-dashoffset: 900; animation: drawCrack 2s ease forwards; }

.constellation-nav { position: relative; display: flex; flex-direction: column; gap: 2.4rem; }
.nav-item {
  position: relative;
  display: grid;
  grid-template-columns: 1.2rem 1fr;
  column-gap: 0.4rem;
  text-decoration: none;
  color: var(--sienna);
  font-family: "Space Grotesk", Inter, sans-serif;
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: color 240ms ease, transform 240ms ease;
}
.nav-item i { grid-column: 2; margin-top: 0.25rem; font-family: "IBM Plex Mono", monospace; font-style: normal; font-size: 0.61rem; letter-spacing: 0.06em; color: var(--terracotta); opacity: 0.62; }
.nav-item:hover { color: var(--terracotta); transform: translateX(4px); }
.active-star { color: var(--gold); transform: scale(0); transition: transform 300ms ease-out; filter: drop-shadow(0 0 9px #c9a06bbb); }
.nav-item.active { color: var(--stone-shadow); }
.nav-item.active .active-star { transform: scale(1); }
.sidebar-note { margin-top: 3rem; font-size: 0.86rem; line-height: 1.6; color: var(--warm-charcoal); font-style: italic; }

.plates {
  margin-left: 260px;
  height: 100vh;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

.plate {
  position: relative;
  min-height: 100vh;
  scroll-snap-align: start;
  overflow: hidden;
  padding: clamp(2rem, 4vw, 4.5rem);
  isolation: isolate;
}
.plate::before {
  content: "";
  position: absolute;
  inset: 1.3rem;
  border: 1px solid #d4c4aa66;
  box-shadow: inset 0 0 70px #c9a06b14;
  pointer-events: none;
}
.plate-number { position: absolute; top: 2rem; right: 2.2rem; color: var(--terracotta); }

h2 {
  margin: 0;
  font-family: "Space Grotesk", Inter, sans-serif;
  font-weight: 700;
  font-size: clamp(2.2rem, 6vw, 5.5rem);
  line-height: 0.88;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--stone-shadow);
  text-shadow: 0 0 30px #c9a06b44;
}
p { font-size: clamp(0.95rem, 1.2vw, 1.1rem); line-height: 1.72; }

.glitch-target { position: relative; display: inline-block; }
.glitch-target::before, .glitch-target::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.45;
  mix-blend-mode: screen;
  animation: chromaDrift 12s steps(1) infinite;
}
.glitch-target::before { color: var(--glitch-red); transform: translate(-1.5px, 0); }
.glitch-target::after { color: var(--glitch-cyan); transform: translate(1.5px, 0); animation-delay: -4s; }

.observatory { display: grid; grid-template-columns: minmax(18rem, 0.78fr) minmax(24rem, 1.22fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.hero-copy { position: relative; z-index: 3; max-width: 37rem; transform: scale(1.05); filter: blur(2px); opacity: 0.3; transition: transform 700ms ease-out, filter 700ms ease-out, opacity 700ms ease-out; }
.in-view .hero-copy, .in-view .focus-headline, .in-view .journal-copy { transform: scale(1); filter: blur(0); opacity: 1; }
.hero-copy p:last-child { max-width: 31rem; margin-top: 1.4rem; color: var(--warm-charcoal); }
.side-copy { order: 2; }

.star-map {
  position: relative;
  min-height: 36rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle, #f2ebe088, #e0d3c022 62%, transparent 70%);
  transform: scale(0.86);
  opacity: 0.28;
  transition: transform 900ms ease-out, opacity 900ms ease-out;
}
.in-view .star-map { transform: scale(1); opacity: 1; }
.constellation-svg { width: min(90%, 42rem); overflow: visible; filter: drop-shadow(-1.5px 0 0 #c4493a66) drop-shadow(1.5px 0 0 #5a9e9666); animation: svgChroma 15s steps(1) infinite; }
.orbit-rings ellipse { fill: none; stroke: #d4c4aa77; stroke-width: 1; stroke-dasharray: 4 12; }
.constellation-lines line, .scatter-lines path { stroke: var(--gold); stroke-width: 1.15; fill: none; stroke-dasharray: 700; stroke-dashoffset: 700; transition: stroke-dashoffset 1.5s ease-out; }
.in-view .constellation-lines line, .in-view .scatter-lines path { stroke-dashoffset: 0; }
.stars circle { fill: var(--gold); filter: drop-shadow(0 0 8px #c9a06baa); transform-origin: center; animation: pulseStar 3s ease-in-out infinite; }
.coordinates text { font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: 0.06em; fill: var(--terracotta); }

.glitch-panel { overflow: hidden; }
.tear { position: absolute; left: 8%; right: 8%; height: 3px; background: linear-gradient(90deg, transparent, #c4493aaa, #5a9e96aa, transparent); mix-blend-mode: difference; opacity: 0; animation: glitchTear 8s steps(1) infinite; }
.tear-a { top: 31%; animation-delay: -1s; }
.tear-b { top: 52%; animation-delay: -4s; }
.tear-c { top: 67%; animation-delay: -6s; }

.inscription { display: grid; grid-template-columns: minmax(18rem, 0.92fr) 8rem minmax(20rem, 0.8fr); align-items: center; gap: clamp(1.2rem, 4vw, 4rem); }
.focus-headline { max-width: 44rem; transform: scale(1.15); filter: blur(3px); opacity: 0.35; transition: transform 600ms ease-out, filter 600ms ease-out, opacity 600ms ease-out; }
.journal-copy { max-width: 36rem; margin-top: 12vh; transform: scale(1.05); filter: blur(2px); opacity: 0.25; transition: transform 760ms ease-out 120ms, filter 760ms ease-out 120ms, opacity 760ms ease-out 120ms; }
.journal-copy p:not(.data-label) { color: var(--warm-charcoal); }
.marble-crack { width: 8rem; height: 76vh; opacity: 0.82; }
.marble-crack.right { order: 3; }
.spectral .journal-copy { order: 2; margin-top: 0; }

.scatter { display: grid; align-items: center; }
.scatter-copy { position: absolute; top: 12vh; left: clamp(2rem, 5vw, 5rem); z-index: 3; max-width: 44rem; }
.scatter-field { position: absolute; inset: 8vh 5vw 6vh; }
.point { position: absolute; color: var(--gold); font-size: 1.4rem; text-shadow: 0 0 18px #c9a06bcc; opacity: 0.2; transform: scale(0.3); transition: transform 900ms cubic-bezier(.2,.9,.2,1), opacity 900ms ease; }
.point em { display: block; margin-top: 0.25rem; font-family: "IBM Plex Mono", monospace; font-style: normal; font-size: 0.65rem; color: var(--terracotta); letter-spacing: 0.06em; white-space: nowrap; }
.in-view .point { opacity: 1; transform: scale(1); }
.p1 { left: 16%; top: 31%; transition-delay: 40ms; }.p2 { left: 28%; top: 19%; transition-delay: 120ms; }.p3 { left: 43%; top: 29%; transition-delay: 200ms; }.p4 { left: 59%; top: 20%; transition-delay: 280ms; }.p5 { left: 71%; top: 34%; transition-delay: 360ms; }.p6 { left: 60%; top: 49%; transition-delay: 440ms; }.p7 { left: 47%; top: 45%; transition-delay: 520ms; }.p8 { left: 31%; top: 58%; transition-delay: 600ms; }.p9 { left: 22%; top: 77%; transition-delay: 680ms; }
.scatter-lines { position: absolute; inset: 8vh 5vw 6vh; width: 90%; height: 86vh; overflow: visible; filter: drop-shadow(1px 0 0 #5a9e9680) drop-shadow(-1px 0 0 #c4493a80); }

.closing { display: grid; place-items: center; text-align: center; align-content: center; gap: 1.4rem; background: linear-gradient(180deg, #2a1f16 0%, #1a120c 100%); color: var(--marble-base); }
.closing::before { border-color: #c9a06b33; }
.closing h2 { color: var(--marble-base); max-width: 68rem; }
.closing p { max-width: 44rem; color: #e8ddd0; }
.closing-orb { width: 9rem; height: 9rem; border: 1px solid #c9a06b66; border-radius: 50%; display: grid; place-items: center; color: var(--gold); font-size: 3rem; box-shadow: inset 0 0 40px #c9a06b16, 0 0 50px #c9a06b18; animation: pulseStar 4s ease-in-out infinite; }
.coordinate-ring { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; font-family: "IBM Plex Mono", monospace; font-size: 0.76rem; letter-spacing: 0.08em; color: var(--terracotta); text-transform: uppercase; }

@keyframes pulseStar { 0%, 100% { opacity: 0.72; transform: scale(0.94); } 50% { opacity: 1; transform: scale(1.05); } }
@keyframes drawCrack { to { stroke-dashoffset: 0; } }
@keyframes glitchTear { 0%, 88%, 100% { opacity: 0; transform: translateX(0); } 89% { opacity: 0.62; transform: translateX(-8px); } 90% { opacity: 0.45; transform: translateX(7px); } 91% { opacity: 0.7; transform: translateX(-3px); } 92% { opacity: 0; transform: translateX(0); } }
@keyframes chromaDrift { 0%, 94%, 100% { clip-path: inset(0 0 0 0); } 95% { clip-path: inset(12% 0 72% 0); transform: translateX(-2px); } 96% { clip-path: inset(54% 0 28% 0); transform: translateX(2px); } 97% { clip-path: inset(0 0 0 0); } }
@keyframes svgChroma { 0%, 92%, 100% { transform: translateX(0); } 93% { transform: translateX(-2px); } 94% { transform: translateX(2px); } 95% { transform: translateX(0); } }

@media (max-width: 767px) {
  body { overflow: auto; }
  .sidebar { width: 100%; height: 5.7rem; display: grid; grid-template-columns: max-content 1fr; gap: 1rem; padding: 0.8rem 1rem; overflow: hidden; border-right: 0; border-bottom: 1px solid #d4c4aa88; }
  .brand-block { margin: 0; grid-template-columns: 1.6rem 8rem; align-items: center; }
  .brand-sigil { font-size: 1.35rem; }
  .brand-block h1 { font-size: 0.96rem; }
  .brand-block .eyebrow, .sidebar-note, .sidebar-crack { display: none; }
  .constellation-nav { flex-direction: row; gap: 1.2rem; overflow-x: auto; align-items: center; }
  .nav-item { min-width: max-content; font-size: 0.66rem; grid-template-columns: 1rem max-content; }
  .nav-item i { display: none; }
  .plates { margin-left: 0; padding-top: 5.7rem; height: auto; overflow: visible; scroll-snap-type: y proximity; }
  .plate { min-height: calc(100vh - 5.7rem); padding: 5rem 1.2rem 2rem; }
  .plate::before { inset: 0.7rem; }
  .plate-number { top: 1.4rem; left: 1.2rem; right: auto; }
  .observatory, .inscription { grid-template-columns: 1fr; gap: 1.5rem; }
  .hero-copy, .journal-copy { max-width: none; margin-top: 0; }
  .star-map { min-height: 22rem; }
  .marble-crack { position: absolute; right: 0.4rem; top: 5rem; height: 60vh; opacity: 0.38; }
  .scatter-copy { position: relative; top: auto; left: auto; }
  .scatter-field, .scatter-lines { inset: 16rem 1rem 2rem; width: calc(100% - 2rem); height: 58vh; }
  .point em { font-size: 0.55rem; }
}