:root {
  /* Compliance vocabulary from design: Roboto Slab statements as environmental objects; Roboto Slab** from Google Fonts for the primary wordmark; Source Sans 3** from Google Fonts for longer explanatory text. */
  --basalt: #17110F;
  --clay: #A65F3B;
  --sage: #8C9A72;
  --mauve: #B07A91;
  --peach: #E7B982;
  --bone: #F1E4C8;
  --plum: #3B2840;
  --cyan: #79B8A8;
  --slab: "Roboto Slab", Georgia, serif;
  --caption: "Zilla Slab", Georgia, serif;
  --sans: "Source Sans 3", Inter, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--basalt);
  color: var(--bone);
  font-family: var(--sans);
  overflow-x: hidden;
}

button, a { font: inherit; color: inherit; }

.grain,
.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
}

.grain {
  opacity: .18;
  background-image:
    radial-gradient(circle at 18% 31%, rgba(241,228,200,.18) 0 1px, transparent 1.5px),
    radial-gradient(circle at 71% 63%, rgba(166,95,59,.18) 0 1px, transparent 1.7px),
    radial-gradient(circle at 42% 82%, rgba(121,184,168,.12) 0 1px, transparent 1.4px);
  background-size: 13px 17px, 19px 23px, 29px 31px;
  mix-blend-mode: overlay;
}

.scanlines {
  opacity: .17;
  background: repeating-linear-gradient(to bottom, transparent 0 7px, rgba(23,17,15,.55) 8px, rgba(23,17,15,.55) 10px);
  animation: driftScan 9s linear infinite;
}

.field-nav {
  position: fixed;
  inset: 22px auto auto 22px;
  z-index: 40;
  display: grid;
  gap: 28px;
  width: 132px;
  color: var(--bone);
}

.wordmark {
  font-family: var(--slab);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: .03em;
  text-shadow: 0 0 22px rgba(231,185,130,.35);
}

.coordinates {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-family: var(--slab);
  font-size: 10px;
  line-height: 1.7;
  letter-spacing: .18em;
  color: rgba(241,228,200,.72);
  border-left: 1px solid rgba(241,228,200,.25);
  padding-left: 8px;
  min-height: 174px;
}

.section-tags { display: flex; flex-direction: column; gap: 10px; }

.section-tags a {
  position: relative;
  display: block;
  width: 39px;
  padding: 5px 0;
  border-top: 1px solid rgba(241,228,200,.28);
  color: rgba(241,228,200,.66);
  font: 600 11px var(--sans);
  text-decoration: none;
}

.section-tags a::after {
  content: attr(data-tag);
  position: absolute;
  left: 47px;
  top: 3px;
  color: rgba(241,228,200,.43);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.section-tags a.active { color: var(--peach); border-color: var(--clay); }

.station {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  padding: 8vw 8vw 7vw 17vw;
}

.dusk-blind {
  display: flex;
  align-items: flex-end;
  background:
    linear-gradient(180deg, #17110F 0%, #3B2840 33%, #B07A91 62%, #E7B982 100%);
}

.dusk-blind::before,
.release-protocol::before {
  content: "";
  position: absolute;
  inset: auto -10% 0;
  height: 36vh;
  background: repeating-linear-gradient(178deg, rgba(23,17,15,.88) 0 20px, rgba(59,40,64,.82) 21px 42px, rgba(166,95,59,.64) 43px 62px, rgba(140,154,114,.36) 63px 80px);
  transform: skewY(-4deg);
  z-index: -1;
}

.horizon-breath {
  position: absolute;
  inset: 22% 5% 19%;
  background: radial-gradient(ellipse at 64% 62%, rgba(231,185,130,.48), rgba(176,122,145,.25) 28%, transparent 57%);
  animation: breathe 7s ease-in-out infinite;
}

.waveform {
  position: absolute;
  inset: 20vh 0 auto 13vw;
  width: 73vw;
  height: 18vh;
  opacity: .38;
}

.waveform path {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 3;
  stroke-dasharray: 14 18;
  filter: drop-shadow(0 0 12px rgba(121,184,168,.45));
}

.photo-strip {
  position: absolute;
  right: 6vw;
  bottom: 19vh;
  width: 44vw;
  height: 16vh;
  border: 1px solid rgba(241,228,200,.22);
  box-shadow: 0 24px 70px rgba(23,17,15,.48);
  transform: rotate(-2deg);
}

.bark-strip {
  background:
    linear-gradient(90deg, rgba(23,17,15,.15), rgba(23,17,15,.65)),
    repeating-linear-gradient(101deg, #3B2840 0 9px, #A65F3B 10px 15px, #8C9A72 16px 18px, #17110F 19px 27px, #E7B982 28px 29px);
  background-blend-mode: multiply, normal;
}

.tape,
.vhs-time {
  position: absolute;
  font-family: var(--caption);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--basalt);
}

.tape {
  top: -13px;
  left: 28px;
  padding: 5px 15px;
  background: rgba(231,185,130,.82);
  transform: rotate(1deg);
}

.vhs-time { right: 12px; bottom: 9px; color: var(--peach); }

.hero-copy { max-width: 900px; position: relative; z-index: 3; }

.stamp,
.kicker {
  margin: 0 0 18px;
  color: var(--clay);
  font-family: var(--caption);
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
}

h1,
h2 {
  margin: 0;
  font-family: var(--slab);
  line-height: .88;
  letter-spacing: -.06em;
  color: var(--bone);
}

h1 { font-size: clamp(64px, 13vw, 190px); max-width: 1000px; }
h2 { font-size: clamp(48px, 8vw, 128px); }

.lead {
  max-width: 540px;
  margin: 28px 0 0;
  color: rgba(241,228,200,.81);
  font-size: clamp(18px, 2vw, 25px);
  line-height: 1.35;
}

.blind-peel {
  position: absolute;
  right: 7vw;
  top: 9vh;
  border: 1px solid rgba(241,228,200,.3);
  background: rgba(59,40,64,.36);
  color: var(--peach);
  padding: 12px 18px;
  text-transform: uppercase;
  letter-spacing: .15em;
  cursor: pointer;
}

.acetate {
  position: absolute;
  background: linear-gradient(120deg, rgba(176,122,145,.36), rgba(241,228,200,.12));
  border: 1px solid rgba(241,228,200,.22);
  backdrop-filter: blur(2px);
  transition: transform 1.1s cubic-bezier(.2,.8,.15,1), opacity 1.1s ease;
}

.veil {
  inset: 0 0 0 37%;
  z-index: 8;
  display: grid;
  place-items: center;
  color: rgba(241,228,200,.72);
  font: 700 12px var(--caption);
  letter-spacing: .25em;
}

.veil.revealed { transform: translateX(78%) rotate(4deg); opacity: .18; }

.track-logic {
  background:
    radial-gradient(circle at 78% 18%, rgba(121,184,168,.12), transparent 34%),
    linear-gradient(145deg, #17110F 0%, #3B2840 48%, #17110F 100%);
}

.station-head { position: relative; z-index: 4; max-width: 760px; }
.station-head.right { margin-left: auto; text-align: right; }

.strata-field {
  position: absolute;
  inset: 22vh -8vw 8vh 13vw;
  transform: rotate(-11deg);
  display: grid;
  align-content: center;
  gap: 12px;
}

.soil-band {
  height: 78px;
  border: 0;
  cursor: pointer;
  text-align: left;
  padding-left: calc(17vw + var(--i) * 36px);
  color: transparent;
  box-shadow: 0 18px 38px rgba(23,17,15,.22);
  transition: transform .7s ease, filter .7s ease;
}

.soil-band span {
  font-family: var(--caption);
  font-size: 16px;
  color: rgba(241,228,200,0);
  letter-spacing: .2em;
  text-transform: uppercase;
  transition: color .5s ease;
}

.soil-band.active,
.soil-band:hover { transform: translateX(24px); filter: brightness(1.18); }
.soil-band.active span,
.soil-band:hover span { color: var(--bone); }

.band-premise { background: linear-gradient(90deg, #A65F3B, #E7B982 54%, #8C9A72); }
.band-exception { background: linear-gradient(90deg, #3B2840, #B07A91 52%, #A65F3B); }
.band-inference { background: linear-gradient(90deg, #8C9A72, #17110F 58%, #79B8A8); }
.band-appetite { background: linear-gradient(90deg, #17110F, #A65F3B 48%, #3B2840); }

.field-label,
.caption-drawer {
  position: absolute;
  z-index: 5;
  width: min(360px, 74vw);
  padding: 22px;
  background: rgba(241,228,200,.92);
  color: var(--basalt);
  border-left: 8px solid var(--clay);
  box-shadow: 0 28px 70px rgba(23,17,15,.38);
}

.field-label { right: 8vw; bottom: 10vh; }
.field-label small, .caption-drawer small { color: var(--clay); letter-spacing: .16em; font-weight: 800; }
.field-label strong { display: block; margin: 8px 0; font: 700 28px var(--slab); }
.field-label p, .caption-drawer p { margin: 0; line-height: 1.45; }

.root-proof {
  position: absolute;
  left: 24vw;
  bottom: 7vh;
  width: min(420px, 44vw);
  opacity: .62;
}

.trace {
  fill: none;
  stroke: var(--sage);
  stroke-width: 3;
  stroke-dasharray: 580;
  stroke-dashoffset: 580;
  animation: drawTrace 7s ease-in-out infinite alternate;
}
.trace.delayed { stroke: var(--peach); animation-delay: 1.1s; }
.trace.slow { stroke: var(--cyan); animation-delay: 2.2s; }

.specimen-plates {
  background:
    linear-gradient(180deg, rgba(23,17,15,.92), rgba(59,40,64,.94)),
    repeating-linear-gradient(90deg, transparent 0 58px, rgba(241,228,200,.05) 59px 60px);
}

.plates-grid {
  margin-top: 10vh;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  transform: translateX(-2vw);
}

.plate {
  position: relative;
  min-height: 48vh;
  border: 1px solid rgba(241,228,200,.2);
  background: rgba(241,228,200,.06);
  cursor: pointer;
  box-shadow: 0 32px 80px rgba(23,17,15,.42);
  transform: translateY(26px) rotate(var(--r, -1deg));
  transition: transform .9s ease, border-color .7s ease;
}
.plate:nth-child(2) { --r: 2deg; margin-top: 7vh; }
.plate:nth-child(3) { --r: -3deg; margin-top: 2vh; }
.plate.inspected, .plate:hover { transform: translateY(0) rotate(0deg); border-color: rgba(231,185,130,.65); }

.photo {
  position: absolute;
  inset: 22px;
  overflow: hidden;
}
.photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(23,17,15,.4));
}
.moss-photo { background: radial-gradient(circle at 22% 30%, #8C9A72 0 5px, transparent 7px), repeating-linear-gradient(128deg, #17110F 0 12px, #8C9A72 13px 20px, #3B2840 21px 29px, #E7B982 30px 32px); }
.clay-photo { background: radial-gradient(ellipse at 50% 45%, #79B8A8 0 7%, transparent 9%), repeating-linear-gradient(25deg, #A65F3B 0 17px, #E7B982 18px 23px, #3B2840 24px 36px); }
.track-photo { background: radial-gradient(ellipse at 34% 66%, #17110F 0 8%, transparent 9%), radial-gradient(ellipse at 58% 41%, #17110F 0 7%, transparent 8%), repeating-linear-gradient(92deg, #E7B982 0 10px, #A65F3B 11px 16px, #8C9A72 17px 18px); }

.plate-veil { inset: 0; display: grid; place-items: center; color: var(--bone); font: 700 11px var(--caption); letter-spacing: .18em; text-align: center; padding: 20px; }
.plate.inspected .plate-veil, .plate:hover .plate-veil { transform: translateX(74%) rotate(5deg); opacity: .22; }
.plate p { position: absolute; left: 24px; bottom: 14px; margin: 0; font: 600 20px var(--caption); color: var(--peach); }

.caption-drawer { right: 8vw; bottom: 7vh; border-color: var(--sage); }

.cave-assumptions {
  display: grid;
  place-items: center;
  background: radial-gradient(ellipse at 50% 42%, #3B2840 0 16%, #17110F 54%);
  padding-left: 12vw;
}

.cave-eye {
  position: absolute;
  width: 24vw;
  height: 12vw;
  min-width: 220px;
  min-height: 110px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(121,184,168,.55) 0 8%, rgba(231,185,130,.22) 9% 16%, transparent 42%);
  filter: blur(1px);
  opacity: .48;
  animation: eyePulse 8s ease-in-out infinite;
}

.cave-title { position: absolute; left: 17vw; top: 12vh; max-width: 720px; }

.drawer-stack {
  width: min(760px, 78vw);
  margin-top: 16vh;
  display: grid;
  gap: 18px;
  z-index: 4;
}

.stone-drawer {
  display: block;
  width: 100%;
  overflow: hidden;
  border: 1px solid rgba(241,228,200,.16);
  background: linear-gradient(90deg, rgba(241,228,200,.07), rgba(176,122,145,.10));
  color: var(--bone);
  text-align: left;
  padding: 20px 24px;
  cursor: pointer;
  max-height: 74px;
  transition: max-height 1s cubic-bezier(.2,.8,.15,1), background .7s ease, transform .7s ease;
}
.stone-drawer.open { max-height: 190px; background: linear-gradient(90deg, rgba(166,95,59,.32), rgba(241,228,200,.10)); transform: translateX(20px); }
.stone-drawer span { display: block; font: 700 18px var(--caption); color: var(--peach); letter-spacing: .08em; text-transform: uppercase; }
.stone-drawer em { display: block; max-width: 560px; margin-top: 18px; color: rgba(241,228,200,.8); font-style: normal; line-height: 1.55; }

.release-protocol {
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, #17110F 0%, #3B2840 42%, #B07A91 74%, #E7B982 100%);
}

.protocol-panel {
  position: relative;
  z-index: 3;
  width: min(880px, 82vw);
  margin-left: 5vw;
  padding: 46px;
  background: rgba(23,17,15,.42);
  border: 1px solid rgba(241,228,200,.22);
  box-shadow: 0 35px 100px rgba(23,17,15,.48);
}
.protocol-panel h2 { font-size: clamp(46px, 7vw, 108px); }
.protocol-panel p:not(.stamp) { max-width: 620px; color: rgba(241,228,200,.82); font-size: 20px; line-height: 1.45; }

.route-map { margin-top: 34px; display: flex; align-items: center; gap: 14px; font-family: var(--caption); color: var(--peach); text-transform: uppercase; letter-spacing: .13em; }
.route-map i { display: block; width: 80px; height: 1px; background: var(--sage); position: relative; }
.route-map i::after { content: ""; position: absolute; right: -3px; top: -3px; width: 7px; height: 7px; background: var(--cyan); border-radius: 50%; }

.silhouette {
  position: absolute;
  left: 25vw;
  bottom: 18vh;
  width: 50vw;
  height: 42vh;
  opacity: 0;
  background: radial-gradient(ellipse at 47% 57%, rgba(23,17,15,.62) 0 22%, transparent 23%), radial-gradient(ellipse at 36% 39%, rgba(23,17,15,.54) 0 8%, transparent 9%), radial-gradient(ellipse at 61% 38%, rgba(23,17,15,.54) 0 8%, transparent 9%);
  filter: blur(7px);
  animation: fleeting 10s ease-in-out infinite;
}

.final-horizon {
  position: absolute;
  inset: auto 0 0;
  height: 18vh;
  background: linear-gradient(180deg, transparent, rgba(231,185,130,.42));
  animation: breathe 8s ease-in-out infinite;
}

@keyframes driftScan { to { transform: translateY(18px); } }
@keyframes breathe { 0%,100% { opacity: .5; transform: scale(1); } 50% { opacity: .9; transform: scale(1.035); } }
@keyframes drawTrace { to { stroke-dashoffset: 0; } }
@keyframes eyePulse { 0%,100% { transform: scaleX(.82); opacity: .28; } 45%,60% { transform: scaleX(1); opacity: .62; } }
@keyframes fleeting { 0%,31%,100% { opacity: 0; transform: translateY(25px); } 44%,56% { opacity: .5; transform: translateY(0); } }

@media (max-width: 860px) {
  .field-nav { inset: 14px auto auto 14px; width: auto; gap: 12px; }
  .coordinates { display: none; }
  .section-tags { flex-direction: row; }
  .section-tags a::after { display: none; }
  .station { padding: 110px 22px 60px; }
  .photo-strip { width: 70vw; right: 4vw; bottom: 30vh; }
  .veil { inset-left: 14%; }
  .strata-field { inset: 32vh -30vw 18vh -14vw; }
  .field-label, .caption-drawer { right: 20px; bottom: 35px; }
  .plates-grid { grid-template-columns: 1fr; gap: 18px; }
  .plate { min-height: 34vh; margin-top: 0 !important; }
  .cave-title { left: 22px; top: 110px; }
  .drawer-stack { width: 100%; margin-top: 26vh; }
  .protocol-panel { width: 100%; margin: 0; padding: 28px; }
  .route-map { flex-wrap: wrap; }
}