/* ==========================================================================
   UNDER KENTUCKY — karst.closeenough.lol
   A descent. The page goes down through rock and comes back up at the river.

   Palette is taken from the material: weathered limestone grey-green at the
   surface, warm sediment black below the caprock, carbide-lamp amber for
   anything human, and Green River teal for anything wet.
   ========================================================================== */

/* ---------- tokens ---------- */
:root {
  /* surface: weathered limestone, lichen grey-green. not cream. */
  --paper:      #ccd2c6;
  --paper-deep: #b6bdae;
  --ink:        #14170f;
  --ink-soft:   #454a3c;
  --contour:    #a8b09c;
  --ochre:      #8c6a17;   /* surface accent — dark goldenrod, not terracotta */

  /* underground: sediment black is warm, not slate */
  --dark:       #0b0907;
  --rock-1:     #14100c;
  --rock-2:     #1e1811;
  --rock-3:     #2b2319;

  --dust:       #cbc2ae;   /* body text below ground */
  --dust-dim:   #8c8474;
  --bloom:      #f5f0e2;   /* gypsum crust — headings */

  --flame:      #e9a13b;   /* carbide lamp. everything human. */
  --flame-deep: #b9701d;
  --water:      #4e9c8f;   /* Green River */
  --water-deep: #2c6a60;
  --nitre:      #bf5a37;   /* saltpetre vats. used once or twice. */

  /* lamp */
  --lx: 50vw;
  --ly: 40vh;
  --lamp-r: 280px;
  --lamp-hue: 32;
  --lamp-warmth: #e9a13b;
  --flicker: 1;

  /* type */
  --display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --data: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* scale — a 1.25 ratio, tightened at the top for display sizes */
  --s-xs:  0.75rem;
  --s-sm:  0.875rem;
  --s-base: 1.0625rem;
  --s-md:  1.25rem;
  --s-lg:  1.75rem;
  --s-xl:  clamp(2rem, 6vw, 3.5rem);
  --s-2xl: clamp(2.75rem, 11vw, 7rem);
  --s-3xl: clamp(3.5rem, 16vw, 11rem);

  --rail-w: 76px;
  --gutter: clamp(1.15rem, 4vw, 3rem);
  --measure: 34rem;
}

@media (max-width: 860px) {
  :root { --rail-w: 0px; --lamp-r: 200px; }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  background: var(--dark);
  color: var(--dust);
  font-family: var(--body);
  font-size: var(--s-base);
  line-height: 1.62;
  font-synthesis-weight: none;
  overflow-x: hidden;
}

/* ---------- ambient layers (fixed, behind everything) ---------- */

/* the rock face you only see where the lamp falls */
#cavewall {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 900ms ease;
  background-color: transparent;
  background-image:
    repeating-linear-gradient(118deg, rgba(233,161,59,.10) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(62deg,  rgba(233,161,59,.07) 0 1px, transparent 1px 11px),
    radial-gradient(ellipse 60% 40% at 20% 30%, rgba(191,90,55,.16), transparent 70%),
    radial-gradient(ellipse 50% 60% at 78% 66%, rgba(78,156,143,.13), transparent 70%);
  -webkit-mask-image: radial-gradient(circle var(--lamp-r) at var(--lx) var(--ly), #000 0%, #000 34%, rgba(0,0,0,.35) 68%, transparent 100%);
  mask-image: radial-gradient(circle var(--lamp-r) at var(--lx) var(--ly), #000 0%, #000 34%, rgba(0,0,0,.35) 68%, transparent 100%);
}
/* the pool of light itself */
#lamp {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 900ms ease;
  background: radial-gradient(circle var(--lamp-r) at var(--lx) var(--ly),
      color-mix(in srgb, var(--lamp-warmth) 13%, transparent) 0%,
      color-mix(in srgb, var(--lamp-warmth) 6%, transparent) 45%,
      transparent 100%);
  mix-blend-mode: screen;
}
body.underground #cavewall { opacity: calc(0.85 * var(--flicker)); }
body.underground #lamp { opacity: var(--flicker); }

/* grain — keeps flat colour from looking like a UI kit */
#grain {
  position: fixed;
  inset: -50%;
  z-index: 2;
  pointer-events: none;
  opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ---------- depth rail ---------- */
#rail {
  position: fixed;
  left: 0; top: 0; bottom: 0;
  width: var(--rail-w);
  z-index: 40;
  pointer-events: none;
  border-right: 1px solid rgba(203,194,174,.13);
  font-family: var(--data);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .5rem;
  mix-blend-mode: normal;
}
#rail .rail-track {
  position: absolute;
  left: 50%; top: 12%; bottom: 12%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(203,194,174,.3) 8%, rgba(203,194,174,.3) 92%, transparent);
}
#rail .rail-mark {
  position: absolute;
  left: 50%;
  width: 15px; height: 15px;
  margin-left: -7px; margin-top: -7px;
  border: 1px solid var(--flame);
  border-radius: 50%;
  background: rgba(233,161,59,.16);
  transition: top 120ms linear;
  box-shadow: 0 0 14px rgba(233,161,59,.4);
}
#rail .rail-mark::after {
  content: "";
  position: absolute; inset: 4px;
  background: var(--flame);
  border-radius: 50%;
}
#rail .rail-read {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  top: 12%;
  margin-top: -3.6rem;
  text-align: center;
  width: var(--rail-w);
}
.rail-elev { display: block; font-size: .78rem; color: var(--flame); letter-spacing: .02em; }
.rail-elev small { display:block; font-size: .55rem; letter-spacing: .16em; color: var(--dust-dim); text-transform: uppercase; }
#rail .rail-strat {
  position: absolute;
  left: 50%;
  bottom: 12%;
  transform: translateX(-50%);
  margin-bottom: -3.4rem;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: .58rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--dust-dim);
  white-space: nowrap;
  max-height: 40vh;
  overflow: hidden;
}
@media (max-width: 860px) { #rail { display: none; } }

/* mobile depth chip */
#chip {
  position: fixed;
  z-index: 40;
  right: .7rem; top: .7rem;
  display: none;
  font-family: var(--data);
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--flame);
  background: rgba(11,9,7,.82);
  border: 1px solid rgba(233,161,59,.28);
  padding: .34rem .55rem;
  border-radius: 2px;
  backdrop-filter: blur(6px);
  line-height: 1.35;
  text-align: right;
}
#chip b { font-weight: 400; color: var(--bloom); }
#chip span { display:block; color: var(--dust-dim); font-size: .55rem; }
@media (max-width: 860px) {
  body.underground #chip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    left: 0; right: 0; top: 0;
    border: 0;
    border-bottom: 1px solid rgba(233,161,59,.22);
    border-radius: 0;
    padding: .32rem var(--gutter);
    background: rgba(11,9,7,.9);
    text-align: left;
    pointer-events: none;
  }
  #chip span { display: inline; font-size: .58rem; }
}

/* ---------- layout ---------- */
main { position: relative; z-index: 10; }

.band {
  position: relative;
  padding: clamp(3.5rem, 8vw, 6rem) var(--gutter) clamp(3.5rem, 8vw, 6rem) calc(var(--rail-w) + var(--gutter));
}
.wrap { max-width: 1140px; margin: 0 auto; }
.col  { max-width: var(--measure); }

/* editorial spread: reading column + a margin for field notes.
   the margin is where a surveyor writes in the side of the notebook. */
.spread { display: grid; gap: 2.2rem clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 1040px) {
  .spread { grid-template-columns: minmax(0, 33rem) minmax(0, 21rem); }
}
.spread .col { max-width: none; }
.marg { position: relative; }
@media (min-width: 1040px) { .marg { padding-top: .5rem; } }
.fieldnote {
  border-top: 1px solid rgba(233,161,59,.42);
  padding-top: .85rem;
  margin-bottom: 1.8rem;
}
.fieldnote h4 {
  font-family: var(--data);
  font-size: .58rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--flame);
  margin: 0 0 .55rem;
  font-weight: 400;
}
.fieldnote p { font-size: .84rem; line-height: 1.55; margin: 0 0 .7rem; color: var(--dust); }
.fieldnote p:last-child { margin-bottom: 0; }
.fieldnote dl { margin: 0; font-family: var(--data); font-size: .72rem; line-height: 1.5; }
.fieldnote dt { color: var(--dust-dim); letter-spacing: .06em; }
.fieldnote dd {
  margin: 0 0 .6rem; color: var(--bloom);
  display: flex; justify-content: space-between; gap: .8rem;
  border-bottom: 1px dotted rgba(203,194,174,.22); padding-bottom: .35rem;
}
.fieldnote dd b { font-weight: 400; color: var(--flame); white-space: nowrap; }
.surface .fieldnote { border-top-color: rgba(140,106,23,.55); }
.surface .fieldnote h4 { color: var(--ochre); }
.surface .fieldnote p { color: var(--ink-soft); }

/* section eyebrow: a real survey station id, not decoration —
   these mark where in the descent you are */
.eyebrow {
  font-family: var(--data);
  font-size: .62rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--flame);
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 0 0 1.6rem;
}
.eyebrow::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, rgba(233,161,59,.5), transparent);
}
.eyebrow .depth { color: var(--dust-dim); letter-spacing: .18em; }

/* Fraunces held at a LOW optical size even at display scale — that keeps the
   chunky, low-contrast, slightly wonky old-style character and keeps it from
   turning into a high-contrast fashion serif. */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  font-variation-settings: "SOFT" 40, "WONK" 1, "opsz" 22;
  color: var(--bloom);
  letter-spacing: -0.018em;
  line-height: 1.04;
  margin: 0 0 1rem;
  text-wrap: balance;
}
h2 { font-size: var(--s-xl); }
h3 {
  font-size: var(--s-lg);
  font-variation-settings: "SOFT" 30, "WONK" 0, "opsz" 14;
  letter-spacing: -0.005em;
  line-height: 1.16;
}
p { margin: 0 0 1.15rem; }
.lede {
  font-size: var(--s-md);
  line-height: 1.5;
  color: var(--bloom);
  font-family: var(--display);
  font-variation-settings: "SOFT" 45, "WONK" 0, "opsz" 14;
  font-weight: 400;
}
a { color: var(--flame); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--bloom); }
:focus-visible {
  outline: 2px solid var(--flame);
  outline-offset: 3px;
  border-radius: 1px;
}

.note {
  font-family: var(--data);
  font-size: .68rem;
  line-height: 1.6;
  color: var(--dust-dim);
  letter-spacing: .01em;
  border-left: 1px solid rgba(203,194,174,.2);
  padding-left: .8rem;
  margin-top: 1.4rem;
  max-width: 30rem;
}

/* ==========================================================================
   SURFACE — daylight. inverted palette. you are standing on the sinkhole plain
   ========================================================================== */
.surface {
  background: var(--paper);
  color: var(--ink-soft);
  overflow: hidden;
}
.surface::before {
  /* contour lines of the sinkhole plain */
  content: "";
  position: absolute; inset: 0;
  background-image:
    repeating-radial-gradient(circle at 12% 82%, transparent 0 26px, rgba(20,18,14,.055) 26px 27px),
    repeating-radial-gradient(circle at 74% 18%, transparent 0 34px, rgba(20,18,14,.05) 34px 35px),
    repeating-radial-gradient(circle at 44% 58%, transparent 0 21px, rgba(20,18,14,.045) 21px 22px);
  pointer-events: none;
}
.surface h1, .surface h2, .surface h3 { color: var(--ink); }
.surface .eyebrow { color: var(--ink); }
.surface .eyebrow::after { background: linear-gradient(to right, rgba(20,18,14,.4), transparent); }
.surface a { color: var(--ochre); }
.surface .note { color: #5f6455; border-left-color: rgba(20,23,15,.2); }

/* ---------- hero ---------- */
#hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(3rem, 8vh, 5rem);
  padding-bottom: clamp(3rem, 8vh, 5rem);
}
.hero-kicker {
  font-family: var(--data);
  font-size: .62rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: .6;
  margin: 0 0 clamp(1.6rem, 5vh, 3rem);
}
h1 {
  font-size: var(--s-2xl);
  font-variation-settings: "SOFT" 45, "WONK" 1, "opsz" 26;
  font-weight: 700;
  letter-spacing: -0.028em;
  line-height: .96;
  margin: 0;
  color: var(--ink);
  max-width: 15ch;
}
h1 .swap { display: block; }
h1 .num {
  color: var(--ochre);
  font-feature-settings: "tnum";
}
/* the setup line steps back so the payoff line carries the weight */
h1 .lead-in { color: #5f6455; }

/* the two bars: a state and a hole, side by side */
.bars { margin: clamp(2.2rem, 6vh, 3.4rem) 0 0; max-width: 1000px; }
.bar-row { margin-bottom: 1.5rem; }
.bar-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--data);
  font-size: .64rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: .78;
  margin-bottom: .45rem;
}
.bar-label b { font-weight: 400; letter-spacing: .04em; opacity: 1; }
.bar-track { height: 12px; position: relative; }
.bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 0;
  transition: width 1.9s cubic-bezier(.16,.8,.28,1);
}
.bar-fill.state {
  background: repeating-linear-gradient(90deg, rgba(20,23,15,.8) 0 2px, transparent 2px 6px);
  border-bottom: 1px solid rgba(20,23,15,.8);
}
.bar-fill.cave {
  background: linear-gradient(90deg, #6d4f0e, var(--ochre) 55%, #b98f2a);
}
.bar-note {
  font-family: var(--data);
  font-size: .66rem;
  color: #5f6455;
  margin-top: .5rem;
}
.hero-sub {
  margin-top: clamp(2rem, 6vh, 3rem);
  max-width: 30rem;
  font-size: var(--s-md);
  line-height: 1.5;
  color: var(--ink);
  font-family: var(--display);
  font-variation-settings: "SOFT" 45, "WONK" 0, "opsz" 16;
}
.scroll-cue {
  margin-top: clamp(2rem, 7vh, 3.5rem);
  font-family: var(--data);
  font-size: .6rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: .55;
  display: flex; align-items: center; gap: .7rem;
}
.scroll-cue i {
  display: block; width: 1px; height: 34px;
  background: linear-gradient(to bottom, rgba(20,18,14,.6), transparent);
  animation: drip 2.6s ease-in-out infinite;
}
@keyframes drip { 0%,100% { transform: scaleY(.5); transform-origin: top; opacity: .4 } 50% { transform: scaleY(1); opacity: .9 } }

/* ---------- caprock transition ---------- */
#caprock {
  position: relative;
  height: clamp(240px, 34vh, 340px);
  background: linear-gradient(to bottom, var(--paper) 0%, var(--paper-deep) 22%, #4a4238 55%, var(--dark) 100%);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
#caprock .cap-copy {
  position: relative;
  z-index: 3;
  padding: 0 var(--gutter);
  max-width: 40rem;
}
#caprock .cap-copy p {
  font-family: var(--data);
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #d6cdbb;
  margin: 0;
  line-height: 1.9;
  text-shadow: 0 1px 12px rgba(0,0,0,.6);
}
#caprock .cap-copy em { color: var(--flame); font-style: normal; }
.cap-stipple {
  position: absolute; left: 0; right: 0;
  height: 90px; top: 30%;
  background-image: radial-gradient(circle, rgba(20,18,14,.5) 1px, transparent 1.4px);
  background-size: 9px 9px;
  opacity: .5;
  z-index: 2;
}

/* ==========================================================================
   UNDERGROUND
   ========================================================================== */
.deep { background: var(--dark); }
.deep-2 { background: linear-gradient(to bottom, var(--dark), var(--rock-1)); }
.deep-3 { background: var(--rock-1); }

/* generic figure frame — a survey plate */
.plate {
  border: 1px solid rgba(203,194,174,.16);
  background: rgba(20,16,12,.55);
  padding: clamp(1rem, 3vw, 1.6rem);
  position: relative;
  margin: 2rem 0;
}
.plate::before {
  content: attr(data-plate);
  position: absolute;
  top: 0; left: clamp(1rem, 3vw, 1.6rem);
  transform: translateY(-50%);
  background: var(--dark);
  padding: 0 .55rem;
  font-family: var(--data);
  font-size: .58rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--dust-dim);
}
.plate svg { display: block; width: 100%; height: auto; }
.surface .plate { background: rgba(255,255,255,.28); border-color: rgba(20,18,14,.2); }
.surface .plate::before { background: var(--paper); color: #545a4a; }

/* ---------- controls (native inputs, styled) ---------- */
.control { margin: 1.6rem 0 .5rem; }
.control-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; margin-bottom: .7rem;
  font-family: var(--data);
  font-size: .62rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--dust-dim);
}
.control-head output { color: var(--flame); font-size: .8rem; letter-spacing: .04em; }

input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%;
  background: transparent;
  cursor: grab;
  margin: 0;
  padding: 12px 0;          /* fat touch target */
}
input[type="range"]:active { cursor: grabbing; }
input[type="range"]::-webkit-slider-runnable-track {
  height: 2px;
  background: linear-gradient(to right, rgba(233,161,59,.65), rgba(203,194,174,.22));
}
input[type="range"]::-moz-range-track {
  height: 2px;
  background: linear-gradient(to right, rgba(233,161,59,.65), rgba(203,194,174,.22));
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; margin-top: -10px;
  border-radius: 50%;
  background: var(--flame);
  border: 3px solid var(--dark);
  box-shadow: 0 0 0 1px var(--flame), 0 0 18px rgba(233,161,59,.55);
}
input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--flame);
  border: 3px solid var(--dark);
  box-shadow: 0 0 0 1px var(--flame), 0 0 18px rgba(233,161,59,.55);
}
.surface input[type="range"]::-webkit-slider-thumb { border-color: var(--paper); background: var(--ochre); box-shadow: 0 0 0 1px var(--ochre); }
.surface input[type="range"]::-moz-range-thumb { border-color: var(--paper); background: var(--ochre); box-shadow: 0 0 0 1px var(--ochre); }

/* ---------- the mile ruler ---------- */
#ruler-readout {
  display: flex;
  align-items: baseline;
  gap: .8rem;
  flex-wrap: wrap;
  margin-bottom: .3rem;
}
#ruler-miles {
  font-family: var(--display);
  font-variation-settings: "SOFT" 30, "WONK" 0, "opsz" 20;
  font-weight: 700;
  font-size: clamp(3rem, 13vw, 6rem);
  line-height: .88;
  color: var(--bloom);
  font-feature-settings: "tnum";
  letter-spacing: -0.04em;
}
#ruler-miles span { font-size: .3em; color: var(--dust-dim); letter-spacing: .1em; font-family: var(--data); font-weight: 400; }
#ruler-card {
  min-height: 7.5rem;
  border-top: 1px solid rgba(233,161,59,.3);
  padding-top: .9rem;
  margin-top: .4rem;
}
#ruler-card .rc-tag {
  font-family: var(--data); font-size: .6rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--flame); display: block; margin-bottom: .4rem;
}
#ruler-card .rc-title {
  font-family: var(--display); font-size: var(--s-lg); color: var(--bloom);
  font-variation-settings: "SOFT" 30, "WONK" 0, "opsz" 14;
  line-height: 1.14; margin: 0 0 .35rem;
}
#ruler-card .rc-body { margin: 0; font-size: var(--s-sm); color: var(--dust); max-width: 34rem; }
#ruler-card.flash { animation: rcflash 600ms ease; }
@keyframes rcflash { from { opacity: .25; transform: translateY(5px) } to { opacity: 1; transform: none } }

.tickstrip { position: relative; height: 58px; margin-top: .2rem; }
.tickstrip .tk {
  position: absolute; top: 0; width: 1px; height: 9px;
  background: rgba(203,194,174,.3);
}
.tickstrip .tk.major { height: 15px; background: rgba(233,161,59,.75); }
.tickstrip .tk.major::after {
  content: attr(data-l);
  position: absolute; top: 18px; left: 0;
  transform: translateX(-50%);
  font-family: var(--data); font-size: .53rem; letter-spacing: .06em;
  color: var(--dust-dim); white-space: nowrap;
}
.tickstrip .tk.major.low::after { top: 34px; }
.tickstrip .tk.major.low { height: 30px; }
.tickstrip .tk.major.lft::after { transform: none; }
.tickstrip .tk.major.rgt::after { transform: translateX(-100%); }

/* narrow screens: keep the ticks, drop the labels — the card says what you passed */
@media (max-width: 760px) {
  .tickstrip { height: 20px; }
  .tickstrip .tk.major::after { display: none; }
  .tickstrip .tk.major.low { height: 15px; }
}

/* SVG type has to grow when the diagram shrinks, or it is unreadable on a phone */
/* SVG text is in viewBox units, so it shrinks with the diagram. On a phone the
   diagram is ~0.4 scale, so the labels have to be set much larger to survive. */
@media (max-width: 760px) {
  #ridgemap text { font-size: 26px; }
  #ridgemap .rn { font-size: 30px; }
  #ridgemap .rs { font-size: 24px; }
  #xsec text { font-size: 25px; }
  #xsec .lvlab { font-size: 23px; }
}
@media (max-width: 460px) {
  #ridgemap text { font-size: 30px; }
  #ridgemap .rn { font-size: 34px; }
  #ridgemap .rs { font-size: 27px; }
  #xsec text { font-size: 29px; }
  #xsec .lvlab { font-size: 26px; }
}
.tickstrip .tk.hit { background: var(--bloom); }
.tickstrip .tk.hit::after { color: var(--bloom); }

/* ---------- cross-section / base level ---------- */
#xsec { max-width: 900px; }
#xsec .lvl { transition: opacity 500ms ease; }
#xsec text { font-family: var(--data); }

/* ---------- timeline ---------- */
.tl-year {
  font-family: var(--display);
  font-variation-settings: "SOFT" 30, "WONK" 0, "opsz" 20;
  font-weight: 700;
  font-size: clamp(2.4rem, 10vw, 4.6rem);
  line-height: 1;
  color: var(--bloom);
  letter-spacing: -0.03em;
  font-feature-settings: "tnum";
}
.tl-len {
  font-family: var(--data);
  font-size: .8rem;
  color: var(--flame);
  letter-spacing: .1em;
  margin-top: .3rem;
}
.tl-len em { font-style: normal; color: var(--dust-dim); }
#tl-card { min-height: 9rem; margin-top: 1rem; }
#tl-card h4 {
  font-family: var(--display); font-size: var(--s-md); color: var(--bloom);
  margin: 0 0 .4rem; font-variation-settings: "SOFT" 30, "WONK" 0, "opsz" 14; font-weight: 600;
}
#tl-card p { margin: 0; font-size: var(--s-sm); max-width: 36rem; }
#ridgemap .conn { transition: opacity 600ms ease, stroke-dashoffset 900ms ease; }
#ridgemap .ridge { transition: fill 600ms ease, stroke 600ms ease; }

/* ---------- light source switcher ---------- */
.lamps {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: 1.5rem 0 1rem;
  padding: 0; list-style: none;
}
.lamps button {
  font-family: var(--data);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--dust-dim);
  background: transparent;
  border: 1px solid rgba(203,194,174,.22);
  padding: .6rem .8rem;
  cursor: pointer;
  transition: all 200ms ease;
  border-radius: 1px;
  line-height: 1.3;
  text-align: left;
}
.lamps button b { display: block; color: var(--dust); font-weight: 400; letter-spacing: .06em; }
.lamps button:hover { border-color: rgba(233,161,59,.55); color: var(--dust); }
.lamps button[aria-pressed="true"] {
  border-color: var(--flame);
  background: rgba(233,161,59,.1);
  color: var(--flame);
}
.lamps button[aria-pressed="true"] b { color: var(--flame); }
.lamp-desc {
  font-size: var(--s-sm);
  color: var(--dust);
  min-height: 4.5rem;
  border-left: 1px solid rgba(233,161,59,.4);
  padding-left: 1rem;
  max-width: 34rem;
}
.lamp-desc strong { color: var(--bloom); font-weight: 600; }

/* ---------- fauna ---------- */
.fauna { display: grid; gap: 1px; background: rgba(203,194,174,.14); margin: 2rem 0; }
@media (min-width: 700px) { .fauna { grid-template-columns: repeat(3, 1fr); } }
.fauna article { background: var(--dark); padding: 1.4rem 1.2rem; }
.fauna .f-sci {
  font-family: var(--data); font-size: .6rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--water); margin: 0 0 .5rem; display: block;
}
.fauna h3 { font-size: 1.35rem; margin-bottom: .5rem; }
.fauna p { font-size: var(--s-sm); margin: 0; }
.fauna .f-stat {
  font-family: var(--data); font-size: .68rem; color: var(--flame);
  margin-top: .9rem; padding-top: .7rem; border-top: 1px solid rgba(203,194,174,.14);
  display: block;
}

/* ---------- history entries ---------- */
.hist { margin: 2.5rem 0 0; }
.hist-item {
  display: grid;
  gap: .3rem 2rem;
  padding: 1.7rem 0;
  border-top: 1px solid rgba(203,194,174,.14);
}
@media (min-width: 780px) {
  .hist-item { grid-template-columns: 8.5rem 1fr; }
}
.hist-when {
  font-family: var(--data); font-size: .68rem; letter-spacing: .1em;
  color: var(--flame); padding-top: .35rem;
}
.hist-body { max-width: 40rem; }
.hist-body h3 { font-size: 1.5rem; margin-bottom: .55rem; }
.hist-body p { margin: 0 0 .8rem; }
.hist-body p:last-child { margin-bottom: 0; }
.pull {
  font-family: var(--display);
  font-variation-settings: "SOFT" 45, "WONK" 1, "opsz" 16;
  font-size: var(--s-md);
  line-height: 1.35;
  color: var(--bloom);
  border-left: 2px solid var(--nitre);
  padding-left: 1.1rem;
  margin: 1.2rem 0;
  max-width: 30rem;
}

/* ---------- stat strip ---------- */
.stats {
  display: grid; gap: 1px;
  background: rgba(203,194,174,.14);
  margin: 2.4rem 0;
}
@media (min-width: 620px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stats div { background: var(--dark); padding: 1.3rem 1.1rem; }
.stats .sv {
  display: block;
  font-family: var(--display);
  font-variation-settings: "SOFT" 30, "WONK" 0, "opsz" 16;
  font-weight: 700;
  font-size: 2.1rem; line-height: 1; color: var(--water);
  letter-spacing: -.03em; font-feature-settings: "tnum";
  margin-bottom: .5rem;
}
.stats .sl { font-family: var(--body); font-size: .82rem; color: var(--dust-dim); line-height: 1.45; display: block; }
.surface .stats { background: rgba(20,18,14,.16); }
.surface .stats div { background: var(--paper); }
.surface .stats .sv { color: #2f5f49; }
.surface .stats .sl { color: #545a4a; }

/* ---------- census table ---------- */
.census-wrap { overflow-x: auto; margin: 2rem 0; -webkit-overflow-scrolling: touch; }
table.census {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: var(--s-sm);
}
table.census th {
  font-family: var(--data); font-size: .58rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--dust-dim);
  text-align: left; padding: .6rem .8rem; border-bottom: 1px solid rgba(203,194,174,.28);
  font-weight: 400; white-space: nowrap;
}
table.census td {
  padding: .95rem .8rem;
  border-bottom: 1px solid rgba(203,194,174,.1);
  vertical-align: top;
}
table.census tr:hover td { background: rgba(233,161,59,.05); }
table.census .c-name { color: var(--bloom); font-weight: 600; }
table.census .c-len { font-family: var(--data); color: var(--flame); white-space: nowrap; }
table.census .c-note { color: var(--dust-dim); font-size: .82rem; }
table.census .c-open { font-family: var(--data); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.c-yes { color: var(--water); }
.c-no  { color: var(--dust-dim); }

/* ---------- audio toggle ---------- */
#ambient {
  position: fixed;
  z-index: 45;
  left: .7rem; bottom: .7rem;
  font-family: var(--data);
  font-size: .58rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--dust-dim);
  background: rgba(11,9,7,.82);
  border: 1px solid rgba(203,194,174,.2);
  padding: .5rem .7rem;
  cursor: pointer;
  border-radius: 2px;
  backdrop-filter: blur(6px);
  display: none;
  align-items: center; gap: .45rem;
  transition: color 200ms ease, border-color 200ms ease;
}
body.underground #ambient { display: flex; }
#ambient:hover { color: var(--dust); border-color: rgba(233,161,59,.45); }
#ambient[aria-pressed="true"] { color: var(--flame); border-color: rgba(233,161,59,.55); }
#ambient .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .45; }
#ambient[aria-pressed="true"] .dot { opacity: 1; animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%,100% { opacity: .35 } 50% { opacity: 1 } }

/* ---------- resurgence / footer ---------- */
#resurgence {
  background: linear-gradient(to bottom, var(--rock-1) 0%, #23342f 40%, #52706a 78%, var(--paper) 100%);
  padding-top: clamp(5rem, 14vw, 9rem);
}
#resurgence h2 { color: var(--bloom); }
#resurgence .col { color: #d9e2de; }
footer {
  background: var(--paper);
  color: var(--ink-soft);
  padding: clamp(3rem, 8vw, 5rem) var(--gutter) 3rem calc(var(--rail-w) + var(--gutter));
  font-size: var(--s-sm);
}
footer h3 { color: var(--ink); font-size: 1.15rem; }
footer a { color: var(--ochre); }
.src-list { columns: 2; column-gap: 2.2rem; padding: 0; margin: 1.2rem 0 0; list-style: none; font-size: .78rem; line-height: 1.55; }
.src-list li { break-inside: avoid; margin-bottom: .55rem; }
@media (max-width: 640px) { .src-list { columns: 1; } }
.colophon {
  margin-top: 2.5rem; padding-top: 1.5rem;
  border-top: 1px solid rgba(20,23,15,.22);
  font-family: var(--data); font-size: .66rem; line-height: 1.8; color: #545a4a;
  max-width: 44rem;
}

/* ---------- scroll reveal ---------- */
.rise { opacity: 0; transform: translateY(22px); transition: opacity .8s ease, transform .8s cubic-bezier(.16,.8,.3,1); }
.rise.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rise { opacity: 1; transform: none; } }

/* ---------- utility ---------- */
.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--flame); color: var(--dark); padding: .7rem 1rem;
  font-family: var(--data); font-size: .7rem;
}
.skip:focus { left: 0; }