:root {
  --soil: #241B14;
  --canopy: #2F6B45;
  --lichen: #B8C95A;
  --clay: #B46A38;
  --mineral: #4E8FA3;
  --paper: #EFE6D1;
  --reed: #6F5C3E;
  --pollen: #E5B94F;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  color: var(--paper);
  font-family: "Hanken Grotesk", Inter, sans-serif;
  background:
    radial-gradient(circle at 22% 8%, rgba(184, 201, 90, .08), transparent 24rem),
    radial-gradient(circle at 88% 28%, rgba(78, 143, 163, .15), transparent 31rem),
    linear-gradient(115deg, #241B14 0%, #1a120d 44%, #2b2118 100%);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .24;
  background-image:
    radial-gradient(circle, rgba(239, 230, 209, .25) 0 1px, transparent 1.6px),
    linear-gradient(22deg, rgba(111, 92, 62, .22), transparent 32% 68%, rgba(180, 106, 56, .16));
  background-size: 17px 17px, 100% 100%;
  mix-blend-mode: overlay;
  z-index: 3;
}

button, a { font: inherit; }

.transect {
  position: relative;
  z-index: 2;
}

.scene {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  padding: clamp(4rem, 7vw, 8rem) clamp(1.3rem, 5vw, 5rem);
  isolation: isolate;
}

.scene::after {
  content: "";
  position: absolute;
  inset: auto -10% -6rem -10%;
  height: 16rem;
  background: radial-gradient(ellipse at 50% 0, rgba(36, 27, 20, .0), rgba(36, 27, 20, .78) 62%, #241B14 100%);
  z-index: -1;
}

.field-nav {
  position: fixed;
  right: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  gap: .5rem;
  z-index: 20;
}

.field-nav a {
  width: 9.6rem;
  color: var(--paper);
  text-decoration: none;
  font-family: "Gabarito", sans-serif;
  font-size: .74rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .55rem .7rem;
  background: rgba(111, 92, 62, .42);
  border: 1px solid rgba(239, 230, 209, .2);
  border-radius: 999px 24px 999px 24px;
  backdrop-filter: blur(8px);
  transform: rotate(var(--tilt, -1deg));
  transition: background .35s ease, color .35s ease, transform .35s ease;
}

.field-nav a:nth-child(even) { --tilt: 1.5deg; }
.field-nav a span { color: var(--lichen); margin-right: .35rem; }
.field-nav a.active { background: var(--paper); color: var(--soil); transform: translateX(-.35rem) rotate(0deg); }

.transect-river {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 500vh;
  z-index: 1;
  pointer-events: none;
  opacity: .58;
}

.transect-river path {
  fill: none;
  stroke: var(--mineral);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 34 24;
  filter: drop-shadow(0 0 18px rgba(78,143,163,.55));
}

.chapter-stamp, .lot-label {
  font-family: "Gabarito", sans-serif;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .78rem;
  color: var(--pollen);
}

h1, h2 {
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "SOFT" 85, "WONK" 1;
  line-height: .92;
  margin: 0;
}

h2 {
  color: var(--soil);
  font-size: clamp(2.6rem, 7vw, 7.6rem);
  max-width: 10ch;
}

p {
  font-size: clamp(1rem, 1.35vw, 1.28rem);
  line-height: 1.52;
}

.artifact {
  position: relative;
  color: var(--soil);
  background:
    radial-gradient(circle at 20% 10%, rgba(229, 185, 79, .22), transparent 12rem),
    linear-gradient(135deg, rgba(239, 230, 209, .96), rgba(221, 205, 166, .88));
  border: 1px solid rgba(36, 27, 20, .22);
  box-shadow: 0 2rem 4rem rgba(0,0,0,.32), inset 0 0 0 2px rgba(239, 230, 209, .28);
}

.artifact::before {
  content: "";
  position: absolute;
  inset: .75rem;
  border: 1px dashed rgba(36, 27, 20, .22);
  pointer-events: none;
}

.first-step {
  display: grid;
  place-items: center;
  background:
    radial-gradient(ellipse at 50% 54%, rgba(47, 107, 69, .16), transparent 22rem),
    radial-gradient(ellipse at 40% 42%, rgba(0, 0, 0, .4), transparent 38rem);
}

.soil-grain {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 72%, rgba(180, 106, 56, .28), transparent 16rem),
    radial-gradient(circle at 72% 12%, rgba(78, 143, 163, .16), transparent 22rem),
    repeating-linear-gradient(168deg, rgba(111, 92, 62, .12) 0 2px, transparent 2px 17px);
  filter: contrast(1.15);
}

.wordmark-wrap {
  position: relative;
  text-align: center;
  width: min(92vw, 76rem);
  padding: 4rem 1rem;
}

.impressed-word {
  position: relative;
  font-size: clamp(3.7rem, 13vw, 12.5rem);
  color: transparent;
  letter-spacing: -.075em;
  text-shadow:
    2px 3px 0 rgba(239, 230, 209, .06),
    -4px -5px 10px rgba(0,0,0,.82),
    0 0 26px rgba(184, 201, 90, .18);
  -webkit-text-stroke: 1px rgba(239, 230, 209, .14);
}

.impressed-word::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: rgba(36, 27, 20, .8);
  text-shadow: inset 0 0 1rem #000;
  filter: blur(.2px);
}

.impressed-word::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  color: rgba(184, 201, 90, .86);
  clip-path: polygon(0 58%, 100% 46%, 100% 62%, 0 72%);
  opacity: .74;
  animation: lichenWake 4.8s ease-in-out infinite alternate;
}

@keyframes lichenWake {
  from { filter: blur(9px); opacity: .18; transform: translateY(.25rem); }
  to { filter: blur(1px); opacity: .82; transform: translateY(0); }
}

.word-river {
  position: absolute;
  left: 50%;
  top: 46%;
  width: min(66vw, 43rem);
  transform: translate(-50%, -50%);
  overflow: visible;
}

.word-river path, .watershed-map path {
  fill: none;
  stroke: var(--mineral);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 760;
  stroke-dashoffset: 760;
  animation: drawWater 5.5s ease forwards;
}

@keyframes drawWater { to { stroke-dashoffset: 0; } }

.field-permit {
  position: relative;
  margin-top: 2rem;
  border: 0;
  color: var(--soil);
  background: var(--pollen);
  font-family: "Gabarito", sans-serif;
  text-transform: uppercase;
  letter-spacing: .11em;
  padding: 1rem 1.35rem;
  border-radius: 4px 18px 6px 18px;
  box-shadow: .42rem .42rem 0 rgba(36, 27, 20, .8), 0 0 0 1px rgba(36, 27, 20, .3) inset;
  cursor: pointer;
  transform: rotate(-2deg);
}

.field-permit.pressed { transform: rotate(1deg) translateY(.2rem); }

.tag-panel {
  position: absolute;
  left: 9vw;
  bottom: 9vh;
  width: min(20rem, 76vw);
  padding: 2.6rem 1.4rem 1.2rem;
  color: var(--soil);
  background: var(--paper);
  border-radius: 4px 28px 4px 18px;
  transform: rotate(5deg);
  box-shadow: 0 1.4rem 2.7rem rgba(0,0,0,.38);
  transition: transform .45s ease;
}

.tag-panel.lifted { transform: rotate(-3deg) translateY(-1.1rem); }
.tag-panel strong { font-family: "Gabarito"; color: var(--clay); text-transform: uppercase; letter-spacing: .12em; }
.twine { position: absolute; top: .65rem; left: 50%; width: 42%; height: 2px; background: var(--reed); transform: translateX(-50%) rotate(-6deg); }

.print-chain {
  position: absolute;
  display: grid;
  gap: 1.4rem;
  transform: rotate(28deg);
}

.print-chain i, .final-footprint i {
  display: block;
  width: 3.3rem;
  height: 5.7rem;
  background:
    radial-gradient(circle at 48% 18%, rgba(184, 201, 90, .62), transparent 11%),
    radial-gradient(ellipse at center, rgba(0,0,0,.58), rgba(36,27,20,.86) 58%, rgba(184,201,90,.22) 62%, transparent 65%);
  border-radius: 48% 52% 56% 44% / 34% 34% 66% 66%;
  box-shadow: inset .5rem .8rem 1rem rgba(0,0,0,.6), 0 0 1.3rem rgba(184,201,90,.2);
}

.print-chain i:nth-child(even) { transform: translateX(3rem) rotate(-14deg); }
.intro-chain { right: 16vw; bottom: 11vh; opacity: .7; }

.soil-ledger {
  background:
    linear-gradient(174deg, transparent 0 18%, rgba(180, 106, 56, .24) 18% 34%, rgba(111, 92, 62, .28) 34% 49%, rgba(47, 107, 69, .16) 49% 63%, transparent 63%),
    radial-gradient(circle at 70% 40%, rgba(229,185,79,.08), transparent 24rem);
}

.clay-tablet {
  width: min(45rem, 84vw);
  padding: clamp(2.2rem, 5vw, 4rem);
  margin: 5vh 0 0 8vw;
  border-radius: 2rem 4rem 1.2rem 3rem;
  transform: rotate(-2deg);
}

.ledger-drawer {
  position: absolute;
  right: 10vw;
  top: 20vh;
  display: grid;
  gap: .85rem;
  width: min(23rem, 76vw);
}

.ledger-drawer div {
  display: flex;
  justify-content: space-between;
  padding: 1rem;
  color: var(--paper);
  font-family: "Gabarito";
  background: rgba(36, 27, 20, .72);
  border: 1px solid rgba(239,230,209,.18);
  border-radius: 1.4rem .3rem 1.4rem .3rem;
}

.ledger-drawer b { color: var(--lichen); font-weight: 500; }

.root-map {
  position: absolute;
  inset: 34% 4% 8% 20%;
  pointer-events: none;
}

.root-map span {
  position: absolute;
  width: 46%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--lichen), transparent);
  transform-origin: left center;
  opacity: .5;
}

.root-map span:nth-child(1) { left: 9%; top: 35%; transform: rotate(18deg); }
.root-map span:nth-child(2) { left: 30%; top: 48%; transform: rotate(-12deg); }
.root-map span:nth-child(3) { left: 21%; top: 60%; transform: rotate(34deg); }
.root-map span:nth-child(4) { left: 45%; top: 36%; transform: rotate(62deg); }
.root-map span:nth-child(5) { left: 13%; top: 72%; transform: rotate(-28deg); }
.soil-chain { left: 50vw; bottom: 7vh; opacity: .45; }

.canopy-exchange {
  background:
    radial-gradient(circle at 22% 15%, rgba(184, 201, 90, .18), transparent 18rem),
    linear-gradient(145deg, rgba(47, 107, 69, .72), rgba(36, 27, 20, .92) 58%);
}

.canopy-shadow {
  position: absolute;
  inset: -14% -10% auto -8%;
  height: 58vh;
  background:
    radial-gradient(ellipse at 18% 42%, rgba(184,201,90,.22), transparent 15rem),
    radial-gradient(ellipse at 42% 32%, rgba(184,201,90,.18), transparent 14rem),
    radial-gradient(ellipse at 66% 46%, rgba(184,201,90,.2), transparent 18rem),
    radial-gradient(ellipse at 86% 26%, rgba(184,201,90,.12), transparent 13rem);
  filter: blur(4px);
}

.seed-envelope {
  width: min(48rem, 86vw);
  margin: 15vh 0 0 auto;
  padding: clamp(2.3rem, 4vw, 4.4rem);
  border-radius: .3rem .3rem 4rem .3rem;
  transform: rotate(2deg);
}

.hanging-tags {
  position: absolute;
  left: 8vw;
  top: 18vh;
  display: flex;
  gap: 2.2rem;
  align-items: flex-start;
  flex-wrap: wrap;
}

.hanging-tags button {
  position: relative;
  border: 0;
  color: var(--soil);
  background: var(--paper);
  font-family: "Gabarito";
  padding: 2.5rem 1rem 1rem;
  min-width: 7.5rem;
  min-height: 7rem;
  border-radius: .2rem .2rem 1.7rem .2rem;
  box-shadow: 0 1rem 2rem rgba(0,0,0,.28);
  cursor: pointer;
  transform: rotate(var(--r, -5deg));
  transform-origin: 50% -2rem;
  animation: tagSwing 4s ease-in-out infinite alternate;
}

.hanging-tags button:nth-child(2) { --r: 4deg; animation-delay: -.8s; background: #E5B94F; }
.hanging-tags button:nth-child(3) { --r: -2deg; animation-delay: -1.4s; background: #B8C95A; }
.hanging-tags button::before { content: ""; position: absolute; top: -3.6rem; left: 50%; width: 1px; height: 3.8rem; background: var(--reed); }

@keyframes tagSwing { to { transform: rotate(calc(var(--r, -5deg) * -1)); } }

.pollen-field { position: absolute; inset: 0; pointer-events: none; }
.pollen {
  position: absolute;
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: var(--pollen);
  box-shadow: 0 0 .9rem var(--pollen);
  animation: puff 1.8s ease-out forwards;
}
@keyframes puff { to { transform: translate(var(--x), var(--y)) scale(.2); opacity: 0; } }

.watershed-stall {
  background:
    radial-gradient(ellipse at 62% 54%, rgba(78, 143, 163, .28), transparent 27rem),
    linear-gradient(18deg, rgba(78, 143, 163, .18), transparent 34%),
    #241B14;
}

.watershed-map {
  position: absolute;
  inset: 7vh auto auto 5vw;
  width: min(70rem, 92vw);
  height: 68vh;
  opacity: .86;
  filter: drop-shadow(0 0 1.7rem rgba(78,143,163,.45));
}

.watershed-map path { stroke-width: 5; animation-delay: .4s; }
.watershed-map .water-main { stroke: #4E8FA3; stroke-width: 9; }

.map-scrap {
  width: min(38rem, 84vw);
  padding: clamp(2.2rem, 5vw, 4rem);
  margin: 34vh 6vw 0 auto;
  border-radius: 3rem .4rem 2rem .4rem;
  transform: rotate(-3deg);
}

.tokens {
  position: absolute;
  left: 9vw;
  bottom: 10vh;
  display: flex;
  gap: .9rem;
  flex-wrap: wrap;
}

.tokens span {
  display: block;
  padding: 1rem 1.1rem;
  color: var(--paper);
  background: rgba(36,27,20,.78);
  border: 1px solid rgba(78,143,163,.52);
  border-radius: 999px;
  font-family: "Gabarito";
}

.tokens b { color: var(--lichen); font-weight: 400; }

.trace-returned {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 84%, rgba(184, 201, 90, .18), transparent 22rem),
    radial-gradient(circle at 82% 20%, rgba(229, 185, 79, .16), transparent 18rem),
    linear-gradient(180deg, #241B14, #2F6B45 140%);
}

.dusk-meadow {
  position: absolute;
  inset: auto 0 0 0;
  height: 38vh;
  background:
    repeating-linear-gradient(94deg, transparent 0 12px, rgba(184,201,90,.28) 13px 15px, transparent 16px 28px),
    linear-gradient(0deg, rgba(47,107,69,.68), transparent);
  mask-image: linear-gradient(transparent, black 36%);
}

.market-chit {
  width: min(52rem, 88vw);
  padding: clamp(2.4rem, 5vw, 4.8rem);
  border-radius: 3rem 3rem .6rem .6rem;
  text-align: center;
  transform: rotate(.8deg);
}

.market-chit h2 { max-width: 12ch; margin: 0 auto; }
.return-permit { background: var(--lichen); }

.meadow-market {
  position: absolute;
  bottom: 7vh;
  left: 9vw;
  right: 9vw;
  height: 12rem;
  pointer-events: none;
}

.meadow-market span {
  position: absolute;
  bottom: 0;
  width: .35rem;
  height: var(--h, 5rem);
  background: linear-gradient(var(--lichen), var(--canopy));
  border-radius: 999px;
  transform: rotate(var(--r));
}
.meadow-market span::after { content: ""; position: absolute; top: 10%; left: -.55rem; width: 1.3rem; height: .65rem; border-radius: 50%; background: rgba(184,201,90,.7); transform: rotate(28deg); }
.meadow-market span:nth-child(1) { left: 4%; --h: 7rem; --r: -8deg; }
.meadow-market span:nth-child(2) { left: 19%; --h: 4.6rem; --r: 9deg; }
.meadow-market span:nth-child(3) { left: 43%; --h: 8rem; --r: -4deg; }
.meadow-market span:nth-child(4) { left: 62%; --h: 5.4rem; --r: 12deg; }
.meadow-market span:nth-child(5) { left: 78%; --h: 6.6rem; --r: -11deg; }
.meadow-market span:nth-child(6) { left: 93%; --h: 4rem; --r: 7deg; }

.final-footprint {
  position: absolute;
  right: 10vw;
  bottom: 11vh;
  display: flex;
  gap: -.3rem;
  opacity: .56;
  transform: rotate(-18deg);
}

.final-footprint.restored i {
  background: radial-gradient(ellipse at center, rgba(184,201,90,.8), rgba(47,107,69,.45) 54%, transparent 70%);
  box-shadow: 0 0 2rem rgba(184,201,90,.45);
}

.cursor-trace {
  position: fixed;
  width: 3rem;
  height: 4.9rem;
  border-radius: 48% 52% 56% 44% / 34% 34% 66% 66%;
  background: radial-gradient(ellipse at center, rgba(184,201,90,.2), rgba(36,27,20,.52) 60%, transparent 68%);
  pointer-events: none;
  z-index: 19;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(20deg);
  transition: opacity .25s ease;
}

.temporary-print {
  position: fixed;
  width: 2.2rem;
  height: 3.5rem;
  border-radius: 48% 52% 56% 44% / 34% 34% 66% 66%;
  background: radial-gradient(ellipse at center, rgba(36,27,20,.5), rgba(184,201,90,.22) 62%, transparent 70%);
  pointer-events: none;
  z-index: 18;
  animation: fadeMoss 2.6s ease-out forwards;
}

@keyframes fadeMoss {
  0% { opacity: .8; transform: translate(-50%, -50%) scale(.7) rotate(var(--rot)); }
  70% { opacity: .55; filter: hue-rotate(18deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.5) rotate(var(--rot)); }
}

.scene:not(.active) .artifact { opacity: .72; }
.scene.active .artifact { animation: settlePlate .9s ease both; }
@keyframes settlePlate { from { transform: translateY(1.6rem) rotate(-6deg); opacity: .35; } }

@media (max-width: 760px) {
  .field-nav { left: .75rem; right: .75rem; top: auto; bottom: .75rem; transform: none; display: flex; overflow-x: auto; }
  .field-nav a { min-width: 7.8rem; }
  .scene { padding-bottom: 7rem; }
  .ledger-drawer, .hanging-tags, .tokens { position: relative; left: auto; right: auto; top: auto; bottom: auto; margin: 2rem 0; }
  .map-scrap, .seed-envelope, .clay-tablet { margin: 3rem auto; }
  .tag-panel { left: 5vw; bottom: 12vh; }
}