:root {
  --basalt: #111418;
  --graphite: #252B31;
  --fog: #D7DEE5;
  --slate: #6F7E8C;
  --clay: #8A7864;
  --lichen: #7F8B75;
  --cyan: #8DEBFF;
  --violet: #B9A7FF;
  --pink: #FFB7E6;
  --spine: clamp(72px, 12vw, 168px);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--fog);
  background:
    radial-gradient(circle at 72% 16%, rgba(141, 235, 255, 0.12), transparent 32rem),
    radial-gradient(circle at 30% 72%, rgba(185, 167, 255, 0.09), transparent 36rem),
    linear-gradient(115deg, #0c0f12 0%, var(--basalt) 45%, #171b20 100%);
  font-family: "IBM Plex Sans", Inter, system-ui, sans-serif;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.2;
  background-image:
    linear-gradient(rgba(215, 222, 229, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(215, 222, 229, 0.04) 1px, transparent 1px);
  background-size: 48px 48px, 48px 48px;
  mask-image: linear-gradient(90deg, transparent, black 18%, black 88%, transparent);
  z-index: 0;
}

.inspection-lens {
  position: fixed;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 30;
  opacity: 0;
  background:
    radial-gradient(circle, rgba(141, 235, 255, 0.24) 0 2%, rgba(185, 167, 255, 0.15) 28%, rgba(255, 183, 230, 0.09) 45%, transparent 68%),
    repeating-radial-gradient(circle, rgba(215, 222, 229, 0.18) 0 1px, transparent 1px 16px);
  mix-blend-mode: screen;
  filter: blur(0.2px);
  transition: opacity 300ms ease;
}

.research-spine {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--spine);
  z-index: 20;
  background:
    linear-gradient(180deg, rgba(37, 43, 49, 0.96), rgba(17, 20, 24, 0.98)),
    repeating-linear-gradient(0deg, transparent 0 32px, rgba(215, 222, 229, 0.05) 33px 34px);
  border-right: 1px solid rgba(141, 235, 255, 0.22);
  box-shadow: 18px 0 60px rgba(0, 0, 0, 0.38), inset -1px 0 rgba(185, 167, 255, 0.2);
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 18px 10px;
}

.spine-title {
  font-family: "Bebas Neue", Impact, sans-serif;
  writing-mode: vertical-rl;
  letter-spacing: 0.08em;
  font-size: clamp(1.25rem, 2.1vw, 2.4rem);
  color: var(--fog);
  text-shadow: 0 0 22px rgba(141, 235, 255, 0.28);
}

.spine-rule {
  width: 1px;
  flex: 1;
  min-height: 54px;
  margin: 18px 0;
  background: linear-gradient(180deg, transparent, var(--slate), transparent);
}

.index-tabs {
  display: grid;
  gap: 10px;
  width: 100%;
}

.index-tabs a {
  position: relative;
  text-decoration: none;
  color: rgba(215, 222, 229, 0.58);
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: clamp(1rem, 1.5vw, 1.5rem);
  letter-spacing: 0.08em;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 7px;
  border-left: 2px solid transparent;
  transition: color 240ms ease, border-color 240ms ease, background 240ms ease;
}

.index-tabs a span {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.58rem;
  letter-spacing: 0;
}

.index-tabs a.active {
  color: var(--cyan);
  border-left-color: var(--pink);
  background: rgba(141, 235, 255, 0.07);
}

.coordinate-ticks {
  width: 100%;
  display: grid;
  gap: 9px;
  margin: 24px 0 16px;
}

.coordinate-ticks i {
  height: 1px;
  width: 44%;
  justify-self: end;
  background: rgba(215, 222, 229, 0.34);
}

.coordinate-ticks i:nth-child(3n) { width: 70%; background: rgba(141, 235, 255, 0.42); }

.scroll-track {
  position: absolute;
  right: 5px;
  top: 28px;
  bottom: 28px;
  width: 3px;
  background: rgba(111, 126, 140, 0.22);
}

.scroll-track span {
  position: absolute;
  left: 50%;
  top: 0;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--cyan);
  box-shadow: 0 0 18px var(--cyan), 0 0 36px var(--violet);
}

.readout {
  font-family: "IBM Plex Mono", monospace;
  font-size: clamp(0.56rem, 0.8vw, 0.72rem);
  color: rgba(215, 222, 229, 0.62);
  writing-mode: vertical-rl;
  margin-top: 16px;
}

.descent {
  margin-left: var(--spine);
  position: relative;
  z-index: 1;
}

.plate {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  padding: clamp(42px, 7vw, 92px);
  isolation: isolate;
  border-bottom: 1px solid rgba(111, 126, 140, 0.18);
}

.plate::before {
  content: attr(data-label) " / XND ARCHIVE";
  position: absolute;
  top: 24px;
  right: 28px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.72rem;
  color: rgba(215, 222, 229, 0.36);
  letter-spacing: 0.14em;
}

.plate::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--lens-x, 50%) var(--lens-y, 50%), rgba(141, 235, 255, 0.1), transparent 18rem);
  opacity: 0.85;
  pointer-events: none;
  mix-blend-mode: screen;
}

.ghost-word {
  position: absolute;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-size: clamp(5rem, 17vw, 16rem);
  line-height: 0.78;
  letter-spacing: 0.04em;
  color: rgba(215, 222, 229, 0.045);
  text-shadow: 1px 0 rgba(141, 235, 255, 0.14), -1px 0 rgba(255, 183, 230, 0.12);
  z-index: -1;
  white-space: nowrap;
}

.panel-copy {
  position: relative;
  max-width: 560px;
  z-index: 4;
}

.kicker {
  margin: 0 0 16px;
  font-family: "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--cyan);
  font-size: 0.76rem;
}

h1, h2 {
  margin: 0;
  font-family: "Bebas Neue", Impact, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 0.86;
  color: var(--fog);
}

h1 { font-size: clamp(4rem, 13vw, 13rem); max-width: 980px; }
h2 { font-size: clamp(3.6rem, 9vw, 10rem); }

.panel-copy p:not(.kicker) {
  font-size: clamp(1rem, 1.55vw, 1.22rem);
  line-height: 1.62;
  color: rgba(215, 222, 229, 0.78);
  max-width: 34rem;
}

.artifact, .paper-card, .instrument, .collage-stack, .final-plate { will-change: transform; }

.map-acetate {
  position: absolute;
  right: 7vw;
  top: 13vh;
  width: min(48vw, 680px);
  min-width: 320px;
  aspect-ratio: 1.24;
  padding: 24px;
  border: 1px solid transparent;
  border-image: linear-gradient(135deg, rgba(141, 235, 255, 0.72), rgba(185, 167, 255, 0.35), rgba(255, 183, 230, 0.55)) 1;
  background: linear-gradient(135deg, rgba(215, 222, 229, 0.08), rgba(141, 235, 255, 0.035));
  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.35), inset 0 0 44px rgba(141, 235, 255, 0.06);
  backdrop-filter: blur(10px);
  transform: rotate(3deg);
  animation: acetateDrift 8s ease-in-out infinite alternate;
}

.map-acetate svg { width: 100%; height: 100%; overflow: visible; }
.map-acetate .contour { fill: none; stroke: url(#holoStroke); stroke-width: 2; opacity: 0.42; }
.map-acetate .strong { opacity: 0.8; stroke-width: 3; }
.map-acetate .faint { opacity: 0.24; }
.map-acetate circle { fill: var(--cyan); filter: drop-shadow(0 0 12px var(--cyan)); }
.map-acetate text { fill: rgba(215, 222, 229, 0.64); font: 15px "IBM Plex Mono", monospace; letter-spacing: 0.1em; }

.surface-copy { margin-top: 47vh; }
.plate-surface .ghost-word { top: 8vh; left: -1vw; }

.field-tag {
  position: absolute;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.74rem;
  color: rgba(17, 20, 24, 0.9);
  background: rgba(138, 120, 100, 0.86);
  padding: 9px 14px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}
.tag-a { left: 13vw; top: 25vh; transform: rotate(-5deg); }
.tag-b { right: 16vw; bottom: 16vh; background: rgba(127, 139, 117, 0.9); transform: rotate(4deg); }

.plate-sediment { background: linear-gradient(180deg, rgba(37, 43, 49, 0.5), rgba(17, 20, 24, 0.96)); }
.plate-sediment .ghost-word { right: -3vw; top: 7vh; }
.sediment-copy { margin-left: auto; margin-top: 44vh; }

.mineral-slice {
  position: absolute;
  left: 7vw;
  top: 12vh;
  width: min(44vw, 620px);
  aspect-ratio: 1.45;
  border-radius: 44% 56% 48% 52% / 58% 44% 56% 42%;
  background:
    radial-gradient(ellipse at 44% 45%, rgba(141, 235, 255, 0.18) 0 10%, transparent 11%),
    repeating-radial-gradient(ellipse at 46% 46%, rgba(215, 222, 229, 0.16) 0 10px, rgba(37, 43, 49, 0.9) 12px 24px, rgba(127, 139, 117, 0.36) 26px 32px, rgba(138, 120, 100, 0.36) 34px 42px);
  box-shadow: inset 0 0 60px rgba(0,0,0,0.55), 0 40px 80px rgba(0,0,0,0.36);
  transform: rotate(-12deg);
  opacity: 0.9;
}

.mineral-slice span { position: absolute; inset: 12%; border: 1px solid rgba(255, 183, 230, 0.12); border-radius: inherit; }
.mineral-slice span:nth-child(2) { inset: 25%; border-color: rgba(141, 235, 255, 0.18); }
.mineral-slice span:nth-child(3) { inset: 38%; border-color: rgba(185, 167, 255, 0.2); }
.mineral-slice span:nth-child(4) { inset: 48%; background: rgba(17,20,24,0.54); }

.paper-card {
  background: linear-gradient(135deg, rgba(215, 222, 229, 0.86), rgba(190, 184, 171, 0.76));
  color: var(--basalt);
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.34);
}
.paper-card b { display: block; font-family: "Bebas Neue", Impact, sans-serif; font-size: 2rem; letter-spacing: 0.06em; }
.paper-card em { font-family: "IBM Plex Mono", monospace; font-style: normal; font-size: 0.72rem; color: rgba(17,20,24,0.58); }
.paper-card p { margin-bottom: 0; line-height: 1.55; }
.equation-card { position: absolute; right: 16vw; top: 13vh; width: 290px; padding: 22px; transform: rotate(7deg); }

.plate-signal .ghost-word { left: 8vw; bottom: 12vh; }
.signal-copy { margin-top: 9vh; margin-left: 4vw; }

.instrument {
  position: absolute;
  right: 11vw;
  top: 17vh;
  width: min(42vw, 560px);
  aspect-ratio: 1;
  border-radius: 50%;
  mix-blend-mode: screen;
}
.ring { position: absolute; inset: 14%; border: 1px solid rgba(141, 235, 255, 0.42); border-radius: 50%; animation: rotate 24s linear infinite; }
.ring-two { inset: 25%; border-color: rgba(185, 167, 255, 0.46); border-style: dashed; animation-duration: 18s; animation-direction: reverse; }
.ring-three { inset: 37%; border-color: rgba(255, 183, 230, 0.38); clip-path: polygon(0 0, 100% 0, 72% 100%, 0 66%); animation-duration: 30s; }
.instrument-core { position: absolute; inset: 45%; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 50px var(--cyan), 0 0 100px var(--violet); }
.node { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 16px var(--pink); }
.n1 { left: 21%; top: 34%; } .n2 { right: 18%; top: 48%; } .n3 { left: 48%; bottom: 17%; } .n4 { right: 33%; top: 18%; }

.signal-strip {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 12vh;
  display: flex;
  gap: 3vw;
  padding: 14px 0 14px 8vw;
  font-family: "IBM Plex Mono", monospace;
  color: rgba(215, 222, 229, 0.66);
  background: linear-gradient(90deg, rgba(141,235,255,0.08), transparent);
  border-block: 1px solid rgba(141, 235, 255, 0.15);
}

.plate-synthesis .ghost-word { top: 13vh; left: 2vw; }
.synthesis-copy { margin-top: 50vh; }
.collage-stack { position: absolute; right: 9vw; top: 9vh; width: min(44vw, 610px); height: 62vh; }
.acetate {
  position: absolute;
  border: 1px solid rgba(141, 235, 255, 0.28);
  background:
    repeating-linear-gradient(132deg, transparent 0 18px, rgba(141,235,255,0.05) 19px 20px),
    linear-gradient(135deg, rgba(141,235,255,0.09), rgba(185,167,255,0.06));
  backdrop-filter: blur(8px);
  box-shadow: inset 0 0 42px rgba(255, 183, 230, 0.045), 0 24px 60px rgba(0,0,0,0.28);
}
.acetate span { position: absolute; left: 18px; bottom: 14px; font-family: "IBM Plex Mono", monospace; font-size: 0.7rem; color: rgba(215,222,229,0.62); }
.pane-one { inset: 2% 18% 20% 0; transform: rotate(-6deg); }
.pane-two { inset: 18% 0 0 18%; transform: rotate(5deg); border-color: rgba(255, 183, 230, 0.34); }
.small-note { position: absolute; left: 5%; bottom: 9%; width: 260px; padding: 18px; transform: rotate(-3deg); }

.plate-xanadu .ghost-word { left: -2vw; top: 18vh; color: rgba(215,222,229,0.065); }
.xanadu-copy { margin-left: auto; margin-top: 12vh; }
.final-plate {
  position: absolute;
  left: 8vw;
  bottom: 8vh;
  width: min(56vw, 760px);
  height: 48vh;
  border: 1px solid rgba(185, 167, 255, 0.28);
  background:
    radial-gradient(circle at 50% 58%, rgba(141,235,255,0.18), transparent 13rem),
    linear-gradient(180deg, rgba(37,43,49,0.28), rgba(17,20,24,0.9));
  overflow: hidden;
}
.horizon { position: absolute; inset: auto 0 30%; height: 2px; background: linear-gradient(90deg, transparent, var(--cyan), var(--violet), transparent); box-shadow: 0 0 28px var(--cyan); }
.x-mark { position: absolute; left: 44%; top: 15%; font-family: "Bebas Neue", Impact, sans-serif; font-size: clamp(6rem, 15vw, 13rem); color: transparent; -webkit-text-stroke: 1px rgba(255, 183, 230, 0.7); text-shadow: 0 0 34px rgba(185, 167, 255, 0.28); }
.spectral-note { position: absolute; right: 20px; bottom: 18px; font-family: "IBM Plex Mono", monospace; color: rgba(215,222,229,0.62); font-size: 0.75rem; }

.reveal { opacity: 0; transform: translateY(36px) rotate(var(--tilt, 0deg)); transition: opacity 800ms ease, transform 900ms cubic-bezier(.2,.8,.2,1); }
.reveal.visible { opacity: 1; transform: translateY(0) rotate(var(--tilt, 0deg)); }

@keyframes acetateDrift { from { transform: rotate(3deg) translateY(-8px); } to { transform: rotate(1deg) translateY(10px); } }
@keyframes rotate { to { transform: rotate(360deg); } }

@media (max-width: 820px) {
  :root { --spine: 74px; }
  .plate { padding: 34px 24px; }
  .map-acetate, .instrument, .collage-stack, .final-plate { position: relative; inset: auto; width: 100%; margin: 28px 0; }
  .surface-copy, .sediment-copy, .signal-copy, .synthesis-copy, .xanadu-copy { margin: 12vh 0 0; }
  .equation-card { position: relative; right: auto; top: auto; margin-left: auto; }
  .mineral-slice { position: relative; left: auto; top: auto; width: 92%; }
  .signal-strip { position: relative; bottom: auto; flex-wrap: wrap; padding-left: 4vw; }
}