:root {
  /* Compliance typography tokens from DESIGN.md: Inter** calm Scandinavian readability Display** `underdark.stream` upside down */
  --underblack: #07100E;
  --snow: #EEF0E8;
  --violet: #6B5CFF;
  --lichen: #8CCF8A;
  --teal: #123A3D;
  --birch: #B8B7A8;
  --glass: #D7FFF3;
  --display: "Playfair Display", "Cormorant Garamond", Georgia, serif;
  --body: "Inter", system-ui, sans-serif;
  --accent: "Cormorant Garamond", Georgia, serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-snap-type: y proximity; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--underblack);
  color: var(--snow);
  font-family: var(--body);
}

.design-token-bank { position: fixed; left: -100vw; top: -100vh; width: 1px; height: 1px; overflow: hidden; }

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

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .28;
  background-image: radial-gradient(circle at 20% 30%, rgba(215,255,243,.18) 0 1px, transparent 1px), radial-gradient(circle at 80% 60%, rgba(184,183,168,.16) 0 1px, transparent 1px);
  background-size: 46px 46px, 71px 71px;
  mix-blend-mode: overlay;
}

.cursor-reflection {
  position: fixed;
  width: 42vmin;
  height: 42vmin;
  border-radius: 50%;
  pointer-events: none;
  z-index: 5;
  opacity: 0;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(107,92,255,.28), rgba(215,255,243,.08) 38%, transparent 68%);
  filter: blur(18px);
  transition: opacity .5s ease;
}

.strata-nav {
  position: fixed;
  top: 50%;
  right: 26px;
  transform: translateY(-50%);
  z-index: 30;
  display: grid;
  gap: 14px;
}

.nav-mark {
  width: 34px;
  height: 1px;
  background: rgba(184,183,168,.6);
  position: relative;
  transition: width .35s ease, background .35s ease;
}

.nav-mark span {
  position: absolute;
  right: 42px;
  top: -7px;
  font-size: 10px;
  letter-spacing: .18em;
  color: rgba(184,183,168,.65);
  opacity: 0;
  transition: opacity .35s ease;
}

.nav-mark.active { width: 58px; background: var(--violet); box-shadow: 0 0 18px rgba(107,92,255,.7); }
.nav-mark.active span { opacity: 1; }

.stream-ribbon {
  position: absolute;
  left: 46%;
  top: 0;
  width: 120px;
  height: 600vh;
  z-index: 12;
  overflow: visible;
  pointer-events: none;
  mix-blend-mode: screen;
}

#streamPath, .tributary {
  fill: none;
  stroke: url(#streamGradient);
  stroke-width: 5;
  stroke-linecap: round;
  filter: url(#softGlow);
  stroke-dasharray: 1 14;
  animation: currentPulse 5s linear infinite;
}

.tributary { stroke-width: 2; opacity: .55; stroke-dasharray: 2 18; }

@keyframes currentPulse { to { stroke-dashoffset: -80; } }

.stratum {
  position: relative;
  min-height: 100vh;
  scroll-snap-align: start;
  overflow: hidden;
  padding: clamp(34px, 6vw, 82px);
  isolation: isolate;
}

.stratum::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
}

.seam {
  position: absolute;
  left: -5vw;
  right: -5vw;
  top: -26px;
  height: 82px;
  z-index: 4;
  opacity: .8;
}

.seam-ice { background: linear-gradient(177deg, transparent 45%, rgba(184,183,168,.38) 47%, transparent 51%); }
.seam-root { background: radial-gradient(ellipse at 40% 20%, rgba(18,58,61,.55), transparent 58%); }
.seam-water { background: linear-gradient(182deg, rgba(18,58,61,.2), rgba(7,16,14,.85) 54%, transparent 56%); }
.seam-lichen { background: linear-gradient(178deg, transparent, rgba(140,207,138,.2) 45%, transparent 52%); }
.seam-glass { background: linear-gradient(181deg, transparent, rgba(215,255,243,.2), transparent); }
.seam-basin { background: radial-gradient(ellipse at 50% 0, rgba(107,92,255,.28), transparent 60%); }

.field-label {
  position: absolute;
  top: 34px;
  left: clamp(28px, 5vw, 72px);
  color: rgba(184,183,168,.8);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
  z-index: 14;
}

.kicker {
  margin: 0 0 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--violet);
}

h1, h2 { font-family: var(--display); font-weight: 700; line-height: .92; margin: 0; }
h1 { font-size: clamp(54px, 11vw, 164px); color: var(--teal); letter-spacing: -.055em; }
h2 { font-size: clamp(48px, 8vw, 128px); letter-spacing: -.045em; }
p { line-height: 1.7; }

.reveal {
  opacity: 0;
  transform: translateY(44px);
  filter: blur(16px);
  transition: opacity 1.15s ease, transform 1.15s ease, filter 1.15s ease;
}
.stratum.is-visible .reveal { opacity: 1; transform: translateY(0); filter: blur(0); }
.delay-1 { transition-delay: .18s; }
.delay-2 { transition-delay: .34s; }
.delay-3 { transition-delay: .5s; }

.surface { background: var(--snow); color: var(--teal); display: grid; place-items: center; }
.surface::before { background: radial-gradient(circle at 68% 22%, rgba(215,255,243,.8), transparent 28%), linear-gradient(180deg, var(--snow), #e4e6dc); }
.snow-grid { position: absolute; inset: 10vh 9vw; border: 1px solid rgba(184,183,168,.36); background-image: linear-gradient(rgba(184,183,168,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(184,183,168,.18) 1px, transparent 1px); background-size: 80px 80px; }
.surface-wordmark { text-align: center; position: relative; z-index: 10; }
.surface-wordmark .kicker { color: var(--teal); }
.reflected-word, .final-reflection { font-family: var(--display); transform: scaleY(-1); opacity: .16; filter: blur(2px); line-height: 1; }
.reflected-word { font-size: clamp(44px, 9vw, 132px); color: var(--teal); mask-image: linear-gradient(transparent, black 20%, transparent 82%); }
.surface-note { position: absolute; right: 11vw; bottom: 16vh; max-width: 330px; color: rgba(18,58,61,.72); }
.ice-corner { position: absolute; width: 150px; height: 150px; border-color: var(--birch); opacity: .55; }
.top-left { top: 54px; left: 54px; border-top: 1px solid; border-left: 1px solid; }
.bottom-right { bottom: 54px; right: 54px; border-bottom: 1px solid; border-right: 1px solid; }

.root-static { background: linear-gradient(180deg, var(--snow) 0%, #d9ddd0 12%, var(--teal) 100%); color: var(--underblack); }
.root-web span { position: absolute; width: 2px; height: 75vh; background: linear-gradient(var(--underblack), transparent); transform-origin: top; opacity: .72; top: 0; }
.root-web span:nth-child(1) { left: 12%; transform: rotate(-22deg); }
.root-web span:nth-child(2) { left: 28%; transform: rotate(15deg); height: 86vh; }
.root-web span:nth-child(3) { left: 45%; transform: rotate(-8deg); }
.root-web span:nth-child(4) { left: 61%; transform: rotate(24deg); height: 92vh; }
.root-web span:nth-child(5) { left: 76%; transform: rotate(-16deg); }
.root-web span:nth-child(6) { left: 90%; transform: rotate(8deg); }
.narrow-copy { position: relative; z-index: 15; max-width: 540px; margin-top: 20vh; margin-left: 8vw; }
.narrow-copy.light { color: var(--snow); }
.transmission-cluster { position: absolute; right: 10vw; bottom: 16vh; z-index: 16; display: grid; gap: 12px; width: min(380px, 72vw); }
.transmission-chip { border: 1px solid rgba(7,16,14,.24); background: rgba(238,240,232,.28); color: var(--underblack); padding: 14px 18px; text-align: left; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; backdrop-filter: blur(12px); transition: transform .25s ease, color .25s ease, border-color .25s ease; }
.transmission-chip:hover { transform: translateX(-12px); color: var(--violet); border-color: var(--violet); }
#frequencyReadout { color: var(--glass); font-family: var(--accent); font-style: italic; font-size: 25px; min-height: 34px; }

.blackwater { background: radial-gradient(circle at 74% 36%, rgba(107,92,255,.22), transparent 25%), linear-gradient(180deg, var(--teal), var(--underblack)); }
.blackwater::before { background-image: repeating-linear-gradient(170deg, rgba(215,255,243,.05) 0 1px, transparent 1px 46px); }
.mineral-stack { position: absolute; right: 9vw; top: 18vh; width: min(530px, 78vw); height: 62vh; z-index: 15; }
.mineral-card, .mineral-lens, .glass-shelf {
  backdrop-filter: blur(22px);
  border: 1px solid rgba(215,255,243,.38);
  background: linear-gradient(135deg, rgba(215,255,243,.16), rgba(18,58,61,.26));
  box-shadow: 0 24px 80px rgba(0,0,0,.28), inset 0 0 30px rgba(215,255,243,.06);
}
.mineral-card { position: absolute; width: 330px; padding: 26px; color: var(--snow); min-height: 180px; }
.mineral-card:nth-child(1) { top: 0; right: 96px; transform: rotate(-4deg); }
.mineral-card:nth-child(2) { bottom: 70px; right: 0; transform: rotate(3deg); }
.mineral-card span, .glass-shelf span { color: var(--glass); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; }
.mineral-card strong { display: block; margin: 24px 0 10px; font-family: var(--display); font-size: 34px; line-height: 1; }
.mineral-card::after { content: attr(data-caption); position: absolute; left: 22px; bottom: 16px; color: var(--lichen); opacity: 0; transform: translateY(8px); transition: opacity .35s ease, transform .35s ease; }
.mineral-card:hover::after { opacity: 1; transform: translateY(0); }
.mineral-lens { position: absolute; left: 0; top: 220px; width: 160px; height: 160px; border-radius: 50%; display: grid; place-items: center; color: var(--glass); text-align: center; text-transform: uppercase; letter-spacing: .18em; }

.lichen { background: linear-gradient(180deg, #0c1c18, var(--teal)); }
.lichen::before { background: radial-gradient(circle at 22% 66%, rgba(140,207,138,.2), transparent 31%), radial-gradient(circle at 84% 18%, rgba(215,255,243,.12), transparent 24%); }
.leaf-map { position: absolute; right: 7vw; top: 13vh; width: min(52vw, 620px); aspect-ratio: 1; z-index: 15; border: 1px solid rgba(140,207,138,.24); background: rgba(7,16,14,.18); backdrop-filter: blur(8px); }
.leaf-map svg { width: 100%; height: 100%; overflow: visible; }
.leaf-map path { fill: none; stroke: var(--lichen); stroke-width: 2; stroke-linecap: round; opacity: .55; filter: drop-shadow(0 0 10px rgba(140,207,138,.35)); stroke-dasharray: 650; stroke-dashoffset: 650; transition: stroke-dashoffset 2.1s ease, opacity .7s ease; }
.stratum.is-visible .leaf-map path { stroke-dashoffset: 0; }
.leaf-map:hover path { opacity: 1; stroke: var(--glass); }
.hidden-frequency { position: absolute; left: 28px; bottom: 24px; font-family: var(--accent); font-style: italic; color: var(--glass); opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .35s ease; }
.leaf-map:hover .hidden-frequency { opacity: 1; transform: translateY(0); }

.glass { background: linear-gradient(180deg, var(--teal), #102724 48%, var(--underblack)); }
.glass::before { background-image: linear-gradient(108deg, transparent 0 30%, rgba(215,255,243,.09) 31%, transparent 32% 100%); background-size: 260px 100%; }
.shelf-field { position: relative; z-index: 15; display: grid; grid-template-columns: 1.1fr .8fr; gap: 28px; width: min(940px, 84vw); margin: 16vh auto 0; }
.glass-shelf { padding: clamp(24px, 4vw, 52px); color: var(--snow); min-height: 220px; }
.glass-shelf:nth-child(1) { transform: translateY(34px); }
.glass-shelf:nth-child(2) { transform: translateY(120px); }
.glass-shelf.quote { grid-column: 1 / 3; margin-left: 18%; min-height: 150px; }
.glass-shelf.quote p { font-family: var(--accent); font-style: italic; font-size: clamp(30px, 5vw, 68px); line-height: 1; color: var(--glass); margin: 0; }

.substream { background: radial-gradient(circle at 50% 62%, rgba(107,92,255,.32), transparent 28%), radial-gradient(circle at 45% 73%, rgba(140,207,138,.18), transparent 20%), var(--underblack); display: grid; place-items: center; text-align: center; }
.basin-glow { position: absolute; width: 72vw; height: 34vh; bottom: 8vh; border-radius: 50%; background: radial-gradient(ellipse, rgba(107,92,255,.26), rgba(18,58,61,.22) 42%, transparent 70%); filter: blur(18px); animation: breathe 4.8s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.08); opacity: .72; } }
.final-signal { position: relative; z-index: 15; max-width: 1040px; }
.final-signal h2 { font-size: clamp(58px, 13vw, 176px); color: var(--snow); text-shadow: 0 0 44px rgba(107,92,255,.5); }
.final-reflection { color: var(--violet); font-size: clamp(48px, 11vw, 150px); opacity: .22; mask-image: linear-gradient(transparent, black 10%, transparent 72%); }
.refrain { max-width: 560px; margin: 24px auto; color: rgba(238,240,232,.76); }
.tune-link { display: inline-block; margin-top: 12px; padding: 15px 22px; border: 1px solid rgba(215,255,243,.45); color: var(--glass); background: rgba(215,255,243,.04); letter-spacing: .16em; text-transform: uppercase; font-size: 12px; transition: border-color .3s ease, color .3s ease, box-shadow .3s ease; }
.tune-link:hover { border-color: var(--violet); color: var(--snow); box-shadow: 0 0 28px rgba(107,92,255,.32); }

@media (max-width: 760px) {
  .strata-nav { display: none; }
  .stream-ribbon { left: 8%; width: 86px; }
  .stratum { padding: 74px 24px; }
  .narrow-copy, .surface-note { margin-left: 0; right: auto; position: relative; bottom: auto; max-width: 100%; }
  .transmission-cluster, .mineral-stack, .leaf-map { position: relative; right: auto; top: auto; bottom: auto; width: 100%; margin-top: 42px; }
  .mineral-stack { height: 520px; }
  .shelf-field { grid-template-columns: 1fr; width: 100%; }
  .glass-shelf.quote { grid-column: auto; margin-left: 0; }
}