:root {
  --peat: #14130E;
  --loam: #3B2F24;
  --cream: #F1E6C8;
  --chlorophyll: #2F6B3F;
  --lichen: #B8D94A;
  --teal: #2F8C84;
  --clay: #B8663B;
  --indigo: #26334D;
  --gold: #E4B84A;
  --mist: #C9DAD7;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--peat); }
body {
  margin: 0;
  color: var(--cream);
  font-family: "Atkinson Hyperlegible", sans-serif;
  background: var(--peat);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  opacity: .2;
  background-image:
    radial-gradient(circle at 12% 17%, rgba(241,230,200,.22) 0 1px, transparent 1.5px),
    radial-gradient(circle at 82% 71%, rgba(228,184,74,.18) 0 1px, transparent 1.5px),
    linear-gradient(115deg, transparent 0 45%, rgba(201,218,215,.08) 49%, transparent 52%);
  background-size: 19px 23px, 31px 37px, 240px 240px;
  mix-blend-mode: screen;
}

.field-lamp {
  position: fixed;
  width: 34vmin;
  height: 34vmin;
  margin: -17vmin 0 0 -17vmin;
  border-radius: 50%;
  z-index: 20;
  pointer-events: none;
  opacity: .55;
  background: radial-gradient(circle, rgba(241,230,200,.18), rgba(184,217,74,.08) 34%, transparent 68%);
  transform: translate(var(--lamp-x, 50vw), var(--lamp-y, 50vh));
  transition: opacity .4s ease;
  mix-blend-mode: screen;
}

.transect {
  position: fixed;
  left: 22px;
  top: 8vh;
  bottom: 8vh;
  z-index: 25;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-left: 18px;
  border-left: 1px solid rgba(241,230,200,.35);
}

.transect a {
  color: rgba(241,230,200,.68);
  text-decoration: none;
  font-family: "Azeret Mono", monospace;
  font-size: 10px;
  letter-spacing: .08em;
  writing-mode: vertical-rl;
  text-transform: uppercase;
  position: relative;
}

.transect a::before {
  content: attr(data-depth);
  position: absolute;
  left: -34px;
  top: 0;
  color: var(--gold);
  writing-mode: horizontal-tb;
  transform: rotate(-90deg);
  transform-origin: center;
}

.chamber {
  min-height: 100vh;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 10vh 7vw 10vh 12vw;
}

.mono-tag {
  font-family: "Azeret Mono", monospace;
  font-size: clamp(10px, .85vw, 13px);
  letter-spacing: .12em;
  color: var(--gold);
  text-transform: uppercase;
}

h1, h2 {
  font-family: "Fraunces", serif;
  font-weight: 900;
  line-height: .9;
  margin: 0;
}

h2 { font-size: clamp(50px, 9vw, 132px); letter-spacing: -.05em; }
p { font-size: clamp(18px, 2vw, 25px); line-height: 1.35; }
em, .field-note {
  font-family: "Newsreader", serif;
  font-style: italic;
  color: var(--mist);
}

.loam-opening {
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse at 50% 110%, rgba(47,107,63,.45), transparent 45%),
    radial-gradient(ellipse at 24% 18%, rgba(184,102,59,.18), transparent 33%),
    linear-gradient(180deg, var(--peat), var(--loam) 72%, #241b14);
}

.soil-split {
  position: absolute;
  inset: 0;
  z-index: -1;
  clip-path: polygon(0 0, 48% 0, 43% 100%, 0 100%, 0 0, 52% 0, 57% 100%, 100% 100%, 100% 0);
  background: linear-gradient(90deg, rgba(20,19,14,.78), rgba(59,47,36,.25), rgba(20,19,14,.78));
  transition: clip-path 1.4s cubic-bezier(.19,1,.22,1);
}

body.parted .soil-split { clip-path: polygon(0 0, 38% 0, 29% 100%, 0 100%, 0 0, 62% 0, 71% 100%, 100% 100%, 100% 0); }

.opening-mark { max-width: 1100px; transform: rotate(-2deg); }
.carved-word {
  font-size: clamp(68px, 16vw, 210px);
  color: transparent;
  text-shadow: 0 2px 0 rgba(241,230,200,.12), 0 -2px 0 rgba(0,0,0,.75), 0 18px 45px rgba(0,0,0,.55);
  -webkit-text-stroke: 1px rgba(241,230,200,.08);
}
.carved-word span { display: block; }
.opening-mark .field-note { max-width: 520px; margin-left: 8vw; }
.spore-field i, .pollen-map i {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 18px var(--gold);
  animation: sporePulse 2.8s ease-in-out infinite;
}
.spore-field i:nth-child(1){left:23%;top:37%;animation-delay:.1s}.spore-field i:nth-child(2){left:31%;top:47%;animation-delay:.8s}.spore-field i:nth-child(3){left:41%;top:40%;animation-delay:1.2s}.spore-field i:nth-child(4){left:51%;top:49%;animation-delay:.3s}.spore-field i:nth-child(5){left:63%;top:39%;animation-delay:1.7s}.spore-field i:nth-child(6){left:72%;top:50%;animation-delay:.6s}.spore-field i:nth-child(7){left:38%;top:58%;animation-delay:2s}.spore-field i:nth-child(8){left:55%;top:31%;animation-delay:1s}.spore-field i:nth-child(9){left:67%;top:61%;animation-delay:.2s}.spore-field i:nth-child(10){left:27%;top:62%;animation-delay:1.4s}.spore-field i:nth-child(11){left:78%;top:34%;animation-delay:2.2s}.spore-field i:nth-child(12){left:46%;top:67%;animation-delay:.5s}

.sediment-label, .annotation-card {
  position: absolute;
  background: rgba(241,230,200,.12);
  border: 1px solid rgba(241,230,200,.28);
  color: var(--cream);
  padding: 14px 18px;
  font-family: "Newsreader", serif;
  font-style: italic;
  backdrop-filter: blur(10px);
  clip-path: polygon(5% 0,100% 8%,94% 100%,0 92%);
}
.label-one { right: 9vw; bottom: 14vh; }

.contours, .night-contours {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .32;
  background: repeating-radial-gradient(ellipse at 35% 55%, transparent 0 26px, rgba(241,230,200,.16) 27px 29px, transparent 30px 54px);
  animation: drift 18s linear infinite;
}

.root-ledger {
  background: linear-gradient(180deg, #241b14, var(--peat) 45%, var(--loam));
}
.root-network { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .95; }
.root-path {
  fill: none;
  stroke: var(--cream);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 1300;
  stroke-dashoffset: calc(1300 - (var(--draw, 0) * 1300));
  filter: drop-shadow(0 0 12px rgba(184,217,74,.35));
}
.main-root { stroke: var(--lichen); stroke-width: 7; }
.vellum {
  position: absolute;
  max-width: 390px;
  padding: 28px;
  color: var(--loam);
  background: linear-gradient(145deg, rgba(241,230,200,.93), rgba(201,218,215,.76));
  box-shadow: 0 24px 70px rgba(0,0,0,.32);
  clip-path: polygon(3% 6%, 96% 0, 100% 88%, 84% 100%, 0 94%);
}
.slip-a { left: 14vw; top: 18vh; transform: rotate(-4deg); }
.slip-b { right: 9vw; bottom: 17vh; transform: rotate(5deg); }
.slip h2 { font-size: clamp(42px, 6vw, 88px); color: var(--chlorophyll); }
.slip p { font-size: 19px; }
.root-annotation { right: 23vw; top: 45vh; opacity: 0; transform: translateY(16px); transition: .45s ease; }
.root-ledger.root-lit .root-annotation { opacity: 1; transform: translateY(0); }
.root-ledger.root-lit .root-path { stroke: var(--gold); }

.watershed {
  background: linear-gradient(160deg, var(--teal), var(--indigo) 62%, var(--peat));
  display: grid;
  align-items: center;
}
.basin-rings { position: absolute; inset: 4vh 2vw; filter: url(#none); }
.basin-rings span {
  position: absolute;
  border: 2px solid rgba(201,218,215,.35);
  border-radius: 45% 55% 52% 48%;
  inset: calc(var(--n) * 7%);
  animation: ripple 9s ease-in-out infinite;
}
.basin-rings span:nth-child(1){--n:1}.basin-rings span:nth-child(2){--n:2;animation-delay:-2s}.basin-rings span:nth-child(3){--n:3;animation-delay:-4s}.basin-rings span:nth-child(4){--n:4;animation-delay:-6s}
.water-copy { width: min(700px, 80vw); margin-left: 35vw; padding: 4vw; background: rgba(20,19,14,.22); clip-path: ellipse(73% 49% at 50% 50%); }
.water-copy h2 { color: var(--mist); }
.dew { position: absolute; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, var(--mist) 24%, rgba(47,140,132,.35) 70%); box-shadow: 0 18px 45px rgba(20,19,14,.45); }
.bead-a { width: 92px; height: 92px; left: 18vw; top: 26vh; }.bead-b { width: 48px; height: 48px; right: 16vw; top: 18vh; }.bead-c { width: 70px; height: 70px; left: 39vw; bottom: 13vh; }

.canopy {
  background: linear-gradient(180deg, var(--chlorophyll), #18321f 55%, var(--peat));
}
.leaf-shadow { position: absolute; inset: -10%; background: radial-gradient(ellipse at 15% 18%, rgba(184,217,74,.42), transparent 18%), radial-gradient(ellipse at 77% 8%, rgba(241,230,200,.22), transparent 20%), radial-gradient(ellipse at 56% 50%, rgba(20,19,14,.42), transparent 33%); filter: blur(2px); animation: leafSway 11s ease-in-out infinite alternate; }
.canopy-ticket { position: relative; width: min(620px,80vw); margin: 12vh 0 0 45vw; padding: 36px; background: rgba(241,230,200,.86); color: var(--loam); clip-path: polygon(0 11%, 88% 0, 100% 83%, 12% 100%); }
.canopy-ticket h2 { color: var(--chlorophyll); }
.canopy-note { position: absolute; left: 13vw; bottom: 18vh; max-width: 430px; }
.pollen-map i:nth-child(1){left:18%;top:24%}.pollen-map i:nth-child(2){left:27%;top:72%;animation-delay:1s}.pollen-map i:nth-child(3){left:42%;top:18%;animation-delay:2s}.pollen-map i:nth-child(4){left:52%;top:68%;animation-delay:.5s}.pollen-map i:nth-child(5){left:81%;top:39%;animation-delay:1.3s}.pollen-map i:nth-child(6){left:69%;top:22%;animation-delay:2.2s}.pollen-map i:nth-child(7){left:13%;top:58%;animation-delay:.8s}.pollen-map i:nth-child(8){left:36%;top:44%;animation-delay:1.7s}.pollen-map i:nth-child(9){left:74%;top:75%;animation-delay:.2s}

.compost { background: radial-gradient(ellipse at 50% 80%, rgba(184,102,59,.55), transparent 38%), linear-gradient(180deg, var(--peat), var(--loam)); display: grid; place-items: center; }
.compost-copy { width: min(760px, 82vw); text-align: center; }
.compost-copy h2 { color: var(--clay); text-shadow: 0 2px 0 rgba(241,230,200,.12); }
.steam { position: absolute; bottom: 12vh; width: 18vw; height: 54vh; border-radius: 50%; background: linear-gradient(180deg, transparent, rgba(201,218,215,.18), transparent); filter: blur(18px); animation: steamRise 7s ease-in-out infinite; }
.steam-one{left:18vw}.steam-two{left:42vw;animation-delay:-2s}.steam-three{right:15vw;animation-delay:-4s}
.clay-seal { position: absolute; right: 14vw; top: 16vh; width: 130px; height: 130px; border-radius: 50%; display: grid; place-items: center; font: 900 42px "Fraunces", serif; color: var(--peat); background: var(--clay); box-shadow: inset 0 0 0 8px rgba(59,47,36,.35), 0 25px 50px rgba(0,0,0,.35); transform: rotate(14deg); }
.tally-knots { position: absolute; left: 15vw; bottom: 18vh; display: flex; gap: 16px; }.tally-knots span { width: 18px; height: 52px; border-radius: 60% 40%; background: var(--lichen); transform: rotate(22deg); }

.night-close { background: radial-gradient(ellipse at 60% 0%, rgba(201,218,215,.15), transparent 42%), linear-gradient(180deg, var(--loam), var(--indigo) 45%, var(--peat)); display: grid; place-items: center; }
.closing-ledger { width: min(860px, 82vw); padding: 5vw; background: rgba(20,19,14,.42); border: 1px solid rgba(241,230,200,.22); clip-path: polygon(8% 0,100% 5%,92% 100%,0 91%); }
.closing-ledger h2 { color: var(--cream); }
.night-contours { opacity: .22; background: repeating-radial-gradient(ellipse at 70% 50%, transparent 0 42px, rgba(228,184,74,.18) 43px 45px, transparent 46px 82px); }

@keyframes sporePulse { 0%,100% { opacity:.22; transform: scale(.7); } 50% { opacity:1; transform: scale(1.7); } }
@keyframes drift { to { transform: translate3d(-40px, 20px, 0) rotate(.5deg); } }
@keyframes ripple { 0%,100% { transform: scale(.98) rotate(0deg); opacity:.28; } 50% { transform: scale(1.04) rotate(4deg); opacity:.62; } }
@keyframes leafSway { to { transform: translate3d(3vw, -2vh, 0) rotate(4deg); } }
@keyframes steamRise { 0%,100% { transform: translateY(8vh) scaleX(.8); opacity:.12; } 50% { transform: translateY(-5vh) scaleX(1.15); opacity:.44; } }

@media (max-width: 760px) {
  .transect { display: none; }
  .chamber { padding: 9vh 7vw; }
  .carved-word { font-size: 18vw; }
  .water-copy, .canopy-ticket { margin-left: 0; }
  .slip-a, .slip-b { position: relative; left: auto; right: auto; top: auto; bottom: auto; margin: 12vh 0; }
}