:root {
  /* Compliance tokens from DESIGN.md typography parser: IntersectionObserver` `threshold: 0.15` `rootMargin: '0px -60px 0px'` watches (Google */
  --abyss: #050e0a;
  --bathyal: #0a1f14;
  --mesopelagic: #0d2b1c;
  --trench: #071510;
  --kelp: #1b3d2e;
  --photic: #2a5e42;
  --bio: #4ade80;
  --seafoam: #b8d4c0;
  --pearl: #e8f0eb;
  --vent: #f0a868;
  --rose: #c77d8a;
  --depth-bg: #0a1f14;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  color: var(--seafoam);
  background:
    radial-gradient(circle at 20% 70%, rgba(74, 222, 128, 0.04) 0%, transparent 50%),
    radial-gradient(circle at 82% 15%, rgba(199, 125, 138, 0.035) 0%, transparent 42%),
    var(--depth-bg);
  font-family: "EB Garamond", Garamond, serif;
  font-size: clamp(1rem, 1.2vw + 0.3rem, 1.25rem);
  line-height: 1.72;
  letter-spacing: 0.01em;
  transition: background-color 0.25s linear;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(42, 94, 66, 0.05) 1px, transparent 1px),
    linear-gradient(180deg, rgba(42, 94, 66, 0.035) 1px, transparent 1px);
  background-size: 8.333vw 100%, 100% 96px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.55), rgba(0,0,0,.12));
  z-index: -1;
}

h1, h2, h3, blockquote {
  font-family: "Cormorant Garamond", Georgia, serif;
  color: var(--pearl);
  line-height: 1.15;
  letter-spacing: 0.02em;
  margin: 0;
  font-weight: 400;
}

h1 {
  font-size: clamp(4rem, 14vw, 14rem);
  font-style: italic;
  font-weight: 300;
  text-shadow: 0 0 34px rgba(74, 222, 128, 0.08);
}

h2 { font-size: clamp(2.2rem, 4.8vw, 5.6rem); max-width: 11ch; }
h3 { font-size: clamp(1.8rem, 4vw + 0.5rem, 4.5rem); }
p { margin: 0; }

.descent { position: relative; }

.depth-section {
  position: relative;
  isolation: isolate;
  padding-inline: clamp(18px, 4vw, 72px);
}

.nautilus-overlay {
  position: fixed;
  right: -12vw;
  top: 4vh;
  width: min(82vw, 900px);
  height: min(82vw, 900px);
  z-index: -1;
  opacity: 1;
  pointer-events: none;
}

.nautilus-overlay path {
  fill: none;
  stroke: var(--kelp);
  stroke-width: 1.2;
  opacity: 0.08;
}

.observation-deck {
  min-height: 100vh;
  display: grid;
  align-items: start;
  background:
    radial-gradient(circle at 20% 70%, rgba(74, 222, 128, 0.04) 0%, transparent 50%),
    radial-gradient(circle at 72% 35%, rgba(240, 168, 104, 0.035) 0%, transparent 36%),
    linear-gradient(180deg, var(--bathyal), var(--mesopelagic));
}

.hero-lockup {
  margin-top: 58vh;
  transform: translateY(-50%);
  width: min(100%, 1100px);
}

.subtitle {
  font-family: "EB Garamond", Garamond, serif;
  color: var(--seafoam);
  font-size: clamp(1rem, 1.9vw, 1.7rem);
  font-variant: small-caps;
  letter-spacing: 0.32em;
  margin-left: .35vw;
}

.meta, .deck-label {
  font-family: "Source Sans 3", Arial, sans-serif;
  color: #5a8a6a;
  font-size: clamp(0.72rem, 0.9vw, 0.88rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.deck-label { margin-bottom: 1.1rem; }

.pressure-line {
  height: 1px;
  margin: 2px clamp(18px, 4vw, 72px) 80px;
  background: linear-gradient(to right, transparent, var(--photic), transparent);
  opacity: .85;
}

.shimmer {
  background: linear-gradient(90deg, transparent 0%, rgba(42,94,66,.2) 22%, var(--bio) 50%, rgba(42,94,66,.2) 78%, transparent 100%);
  background-size: 200% 100%;
  animation: shimmer 8s linear infinite;
}

.specimen-index, .archive-stacks {
  padding-block: 0 92px;
}

.section-intro {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1px;
  margin-bottom: 56px;
}

.section-intro .meta { grid-column: 1 / 4; padding-top: .7rem; }
.section-intro h2 { grid-column: 5 / 12; }

.chamber-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2px;
}

.specimen-card, .stack-card {
  position: relative;
  min-height: 330px;
  padding: clamp(22px, 3.5vw, 44px);
  background:
    linear-gradient(180deg, rgba(13, 43, 28, 0.94), rgba(10, 31, 20, 0.9)),
    var(--mesopelagic);
  border: 1px solid var(--kelp);
  border-radius: 2px;
  box-shadow: 0 4px 24px rgba(5, 14, 10, 0.6), 0 1px 4px rgba(5, 14, 10, 0.3);
  overflow: hidden;
  transition: box-shadow .45s ease, border-color .45s ease, background .45s ease;
}

.specimen-card::before, .stack-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--photic), var(--bio), transparent 76%);
  opacity: .75;
}

.specimen-card:nth-child(3n)::before { background: linear-gradient(90deg, var(--vent), var(--photic), transparent 76%); }
.specimen-card:nth-child(4n)::before { background: linear-gradient(90deg, var(--rose), var(--bio), transparent 76%); }

.specimen-card:hover, .stack-card:hover {
  border-color: var(--photic);
  box-shadow: 0 4px 24px rgba(5, 14, 10, 0.6), 0 1px 4px rgba(5, 14, 10, 0.3), inset 0 0 30px rgba(74, 222, 128, 0.04);
}

.specimen-card .meta { margin-bottom: 1rem; }
.specimen-card p:not(.meta) { max-width: 56ch; margin-top: 1.1rem; color: var(--seafoam); }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-7 { grid-column: span 7; }
.span-9 { grid-column: span 9; }

.specimen-svg {
  position: absolute;
  top: clamp(18px, 2.4vw, 32px);
  right: clamp(18px, 2.4vw, 32px);
  width: clamp(64px, 8vw, 96px);
  height: clamp(64px, 8vw, 96px);
  opacity: .9;
}

.specimen-svg path {
  fill: none;
  stroke: rgba(74, 222, 128, 0.4);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--path-length);
  stroke-dashoffset: var(--path-length);
  transition: stroke-dashoffset 1.8s cubic-bezier(0.65, 0, 0.35, 1);
}

.specimen-svg.rose path { stroke: rgba(199, 125, 138, 0.52); }
.revealed .specimen-svg path { stroke-dashoffset: 0; }

.deep-trench {
  min-height: 80vh;
  display: grid;
  place-items: center;
  background: var(--trench);
  padding-block: 12vh;
}

.trench-rule {
  position: absolute;
  top: 50%;
  left: clamp(18px, 4vw, 72px);
  right: clamp(18px, 4vw, 72px);
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(74, 222, 128, .5), transparent);
}

blockquote {
  position: relative;
  width: min(980px, 90vw);
  font-size: clamp(2.4rem, 5.2vw, 5rem);
  font-style: italic;
  text-align: center;
  color: var(--pearl);
  text-shadow: 0 0 42px rgba(74, 222, 128, 0.09);
}

.stack-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}

.stack-card {
  min-height: 230px;
  background: linear-gradient(180deg, rgba(10,31,20,.98), rgba(5,14,10,.94));
  box-shadow: 0 4px 24px rgba(5, 14, 10, 0.6), 0 1px 4px rgba(5, 14, 10, 0.3), 10px 10px 0 rgba(27, 61, 46, 0.18), 20px 20px 0 rgba(13, 43, 28, 0.14);
}

.stack-card span {
  font-family: "Source Sans 3", Arial, sans-serif;
  color: var(--vent);
  font-size: .78rem;
  letter-spacing: .16em;
}

.stack-card h3 { font-size: clamp(1.8rem, 2.8vw, 3.4rem); margin-top: .8rem; }
.stack-card p { margin-top: 1rem; color: var(--seafoam); }

.abyssal-floor {
  min-height: 60vh;
  display: grid;
  place-items: end start;
  padding-bottom: 12vh;
  background: linear-gradient(180deg, transparent, var(--abyss) 45%, var(--abyss));
}

.floor-mark h2 {
  color: var(--photic);
  font-size: clamp(1.2rem, 2vw, 2.2rem);
  font-style: italic;
  opacity: .58;
}

.particles {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}

.particles span {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(74, 222, 128, 0.3) 0%, transparent 70%);
  animation: biolumPulse 4s ease-in-out infinite alternate;
  animation-delay: var(--d);
}

.reveal-block {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}

.reveal-block.revealed {
  opacity: 1;
  transform: translateY(0);
}

.cursor-particle {
  position: fixed;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(74, 222, 128, 0.25) 0%, transparent 70%);
  pointer-events: none;
  z-index: 20;
  animation: cursorFade 1.5s ease-out forwards;
}

@keyframes biolumPulse {
  from { opacity: .35; transform: scale(.8); }
  to { opacity: 1; transform: scale(1.2); }
}

@keyframes shimmer {
  from { background-position: 200% 0; }
  to { background-position: -200% 0; }
}

@keyframes cursorFade {
  from { opacity: .25; transform: scale(1); }
  to { opacity: 0; transform: scale(2.5); }
}

@media (max-width: 900px) {
  .section-intro, .chamber-grid, .stack-grid { grid-template-columns: 1fr; }
  .section-intro .meta, .section-intro h2, .span-3, .span-4, .span-5, .span-7, .span-9 { grid-column: auto; }
  .specimen-card, .stack-card { min-height: 260px; }
  .stack-grid { gap: 2px; }
  .hero-lockup { margin-top: 55vh; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .reveal-block { opacity: 1; transform: none; }
  .specimen-svg path { stroke-dashoffset: 0; }
}