:root {
  /* Technical annotation font: IBM Plex Mono” from Google Fonts */
  --obsidian: #090B0E;
  --graphite: #181D23;
  --fog-silver: #C8CDD2;
  --ash: #747C85;
  --glacial: #9FB8C8;
  --lichen: #6F8067;
  --signal-white: #F2F5F6;
  --display: "Archivo Black", Impact, sans-serif;
  --serif: "Cormorant Garamond", Georgia, serif;
  --mono: "IBM Plex Mono", monospace;
}

* { box-sizing: border-box; }
html { background: var(--obsidian); scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--fog-silver);
  background: linear-gradient(180deg, #090B0E 0%, #181D23 48%, #090B0E 100%);
  overflow-x: hidden;
  font-family: var(--serif);
}

.grain, .fog, .floating-field, .fixed-instrument { pointer-events: none; position: fixed; z-index: 20; }
.grain { inset: 0; opacity: .18; mix-blend-mode: overlay; background-image: radial-gradient(circle at 20% 30%, rgba(242,245,246,.08) 0 1px, transparent 1px), radial-gradient(circle at 70% 60%, rgba(116,124,133,.08) 0 1px, transparent 1px); background-size: 5px 7px, 9px 11px; }
.fog { width: 70vw; height: 45vh; filter: blur(52px); opacity: .25; border-radius: 50%; background: radial-gradient(circle, rgba(159,184,200,.22), transparent 68%); animation: driftFog 18s ease-in-out infinite alternate; }
.fog-one { left: -18vw; top: 12vh; }
.fog-two { right: -18vw; bottom: 2vh; animation-duration: 24s; background: radial-gradient(circle, rgba(116,124,133,.20), transparent 70%); }

.chapter-index { position: fixed; z-index: 40; top: 50%; left: 1.6rem; transform: translateY(-50%); display: grid; gap: .7rem; }
.index-notch { width: 2.6rem; height: 1px; border: 0; padding: 0; background: var(--ash); transition: width .45s ease, background .45s ease; cursor: pointer; }
.index-notch span { position: absolute; transform: translate(.45rem,-.65rem); color: var(--ash); font: 500 .58rem var(--mono); letter-spacing: .18em; opacity: 0; transition: opacity .35s ease; }
.index-notch.active { width: 4.8rem; background: var(--glacial); box-shadow: 0 0 18px rgba(159,184,200,.45); }
.index-notch.active span { opacity: 1; color: var(--signal-white); }

.fixed-instrument { right: 2rem; top: 1.8rem; display: flex; align-items: center; gap: 1rem; color: var(--ash); font: 500 .72rem var(--mono); letter-spacing: .16em; }
.third-mark { width: 58px; height: 34px; position: relative; transform: rotate(var(--mark-rotate, 0deg)); transition: transform .5s ease; }
.third-mark i { position: absolute; top: 4px; width: 3px; height: 27px; background: var(--fog-silver); box-shadow: 0 0 12px rgba(159,184,200,.2); }
.third-mark i:nth-child(1) { left: 8px; }
.third-mark i:nth-child(2) { left: 25px; }
.third-mark i:nth-child(3) { left: 43px; height: 12px; background: var(--glacial); filter: drop-shadow(0 13px 0 var(--glacial)); }
.compass-readout { min-width: 16rem; text-align: right; text-shadow: 0 0 12px rgba(159,184,200,.25); }

.floating-field { inset: 0; z-index: 9; overflow: hidden; }
.specimen { position: absolute; filter: drop-shadow(0 30px 28px rgba(0,0,0,.45)); opacity: .75; transform: translate3d(0, var(--float-y, 0px), 0) rotate(var(--float-r, 0deg)); transition: transform .2s linear; }
.specimen-ice { width: 8vw; min-width: 72px; right: 13vw; top: 22vh; }
.specimen-seed { width: 7vw; min-width: 62px; left: 12vw; top: 250vh; }
.specimen-root { width: 9vw; min-width: 80px; right: 8vw; top: 370vh; opacity: .5; }

.chapter { min-height: 100vh; position: relative; isolation: isolate; display: flex; align-items: center; background: radial-gradient(circle at 70% 50%, rgba(159,184,200, calc(var(--signal) * .12)), transparent 32%), linear-gradient(180deg, #090B0E, #181D23 54%, #090B0E); overflow: hidden; }
.chapter::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9,11,14,.74), transparent 34%, rgba(9,11,14,.72)), radial-gradient(circle at 20% 80%, rgba(111,128,103,.09), transparent 28%); opacity: calc(.55 + var(--fog)); z-index: -2; }
.mask-slab { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 0 58%, rgba(24,29,35,.72) 58% 60%, transparent 60%), linear-gradient(180deg, rgba(200,205,210,.04), transparent 30%); clip-path: inset(var(--mask, 18%) 0 0 0); transition: clip-path 1.2s cubic-bezier(.16,.84,.2,1); }
.chapter.in-view .mask-slab { clip-path: inset(0 0 0 0); }
.triptych { width: 100%; min-height: 74vh; display: grid; grid-template-columns: minmax(9rem, 18vw) 1fr minmax(10rem, 20vw); gap: 2vw; align-items: center; padding: 9vh 7vw 8vh 9vw; }
.field-note { align-self: end; max-width: 18rem; color: var(--ash); font-size: clamp(1.08rem, 1.7vw, 1.55rem); line-height: 1.45; }
.field-note p:last-child { border-left: 1px solid rgba(159,184,200,.35); padding-left: 1rem; }
.eyebrow, .coordinates, .quest-resolve span { font-family: var(--mono); text-transform: uppercase; letter-spacing: .18em; }
.eyebrow { color: var(--glacial); font-size: .7rem; margin-bottom: 2rem; }
.revelation { position: relative; transform: translateY(-3vh); }
.glitch-title, .chapter-word { margin: 0; font-family: var(--display); font-size: clamp(4rem, 13vw, 15rem); line-height: .78; letter-spacing: -.06em; color: var(--signal-white); text-transform: uppercase; text-shadow: 0 0 26px rgba(159,184,200, calc(var(--signal) * .45)); }
.hero .glitch-title { margin-left: -4vw; font-size: clamp(5rem, 15vw, 17rem); }
.glitch-title::before, .glitch-title::after { content: attr(data-text); position: absolute; inset: 0; opacity: 0; clip-path: inset(42% 0 45% 0); pointer-events: none; }
.glitch-title::before { color: var(--glacial); transform: translateX(-8px); }
.glitch-title::after { color: var(--signal-white); transform: translateX(7px); }
.chapter.glitching .glitch-title::before, .chapter.glitching .glitch-title::after { opacity: .58; animation: tear 120ms steps(2) 1; }
.quest-resolve { opacity: 0; transform: translateY(12px); animation: resolveQuest 1.1s ease 1.1s forwards; margin: 1.6rem 0 0 .5vw; color: var(--glacial); font: 500 .82rem var(--mono); letter-spacing: .24em; }
.quest-resolve span { color: var(--ash); margin-left: 1.2rem; font-size: .62rem; }
.chapter-line { max-width: 42rem; color: var(--fog-silver); font-size: clamp(1.4rem, 2.6vw, 2.8rem); line-height: 1.05; margin: 2rem 0 0; }
.coordinates { align-self: start; justify-self: end; display: grid; gap: .9rem; color: var(--ash); font-size: .67rem; text-align: right; }
.coordinates span { display: block; padding-top: .7rem; border-top: 1px solid rgba(116,124,133,.38); }
.specimen-plate { padding: 1.2rem; border: 1px solid rgba(200,205,210,.16); background: rgba(24,29,35,.38); backdrop-filter: blur(8px); box-shadow: inset 0 0 28px rgba(9,11,14,.7); }
.specimen-plate.bright { border-color: rgba(159,184,200,.45); color: var(--glacial); }
.fault-line { position: absolute; left: -12vw; top: 62%; width: 124vw; height: 1px; background: linear-gradient(90deg, transparent, var(--ash), transparent); transform: rotate(-8deg); opacity: .55; }
.fault-line::after { content: ""; position: absolute; left: 45%; top: -1px; width: 17vw; height: 3px; background: var(--glacial); opacity: calc(var(--signal) * .8); box-shadow: 0 0 24px rgba(159,184,200,.55); }
.fault-line.secondary { transform: rotate(11deg); top: 35%; }
.fault-line.flash { background: linear-gradient(90deg, transparent, #F2F5F6, #9FB8C8, transparent); opacity: .7; }
.chapter.glitching .fault-line { animation: faultFlash 120ms steps(1) 1; }
.contours { position: absolute; inset: 8% 8% auto auto; width: 42vw; height: 42vw; opacity: .12; border-radius: 50%; background: repeating-radial-gradient(ellipse at center, transparent 0 18px, #C8CDD2 19px 20px); transform: rotate(-18deg); }
.lens-aperture { position: absolute; right: 9vw; top: 16vh; width: min(32vw, 430px); aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(159,184,200,.38); background: radial-gradient(circle, rgba(159,184,200,.18), transparent 48%, rgba(9,11,14,.6) 49%); box-shadow: 0 0 80px rgba(159,184,200,.18); }
.third-light { background: radial-gradient(circle at 55% 46%, rgba(159,184,200,.2), transparent 28%), linear-gradient(180deg, #090B0E, #181D23 45%, #090B0E); }
.light-word { color: #F2F5F6; }
.closing-seal { position: absolute; right: 8vw; bottom: 8vh; color: var(--glacial); font: 500 .8rem var(--mono); letter-spacing: .5em; }

@keyframes driftFog { from { transform: translate3d(-3vw, -2vh, 0) scale(1); } to { transform: translate3d(5vw, 4vh, 0) scale(1.15); } }
@keyframes resolveQuest { to { opacity: 1; transform: translateY(0); } }
@keyframes tear { 0% { clip-path: inset(10% 0 72% 0); } 50% { clip-path: inset(45% 0 36% 0); } 100% { clip-path: inset(70% 0 8% 0); } }
@keyframes faultFlash { 0%, 100% { opacity: .7; } 50% { opacity: 1; box-shadow: 0 0 38px #F2F5F6; } }

@media (max-width: 900px) {
  .triptych { grid-template-columns: 1fr; padding: 14vh 8vw; gap: 2.4rem; }
  .coordinates { justify-self: start; text-align: left; }
  .chapter-index { left: .8rem; }
  .fixed-instrument { right: 1rem; top: 1rem; transform: scale(.82); transform-origin: top right; }
  .hero .glitch-title { margin-left: -2vw; }
}