:root {
  /* Design font token: Mono” */
  --night-loam: #17221C;
  --deep-slate: #31506B;
  --aurora-mint: #73FBD3;
  --violet-sky: #8A63FF;
  --dawn-peach: #FFB86B;
  --leaf-glass: #B8F27D;
  --error-berry: #FF4D6D;
  --cream-paper: #FFF7E6;
  --display: "Cormorant Garamond", serif;
  --body: "Spectral", serif;
  --mono: "IBM Plex Mono", monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--cream-paper);
  background: var(--night-loam);
  font-family: var(--body);
  overflow-x: hidden;
}

.aurora-field {
  position: fixed;
  inset: 0;
  z-index: -3;
  background: linear-gradient(135deg, #17221C 0%, #31506B 32%, #8A63FF 68%, #73FBD3 100%);
}

.aurora-field::before,
.aurora-field::after {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(circle at 18% 24%, rgba(255, 184, 107, .30) 0 2px, transparent 3px),
    radial-gradient(circle at 71% 34%, rgba(255, 247, 230, .20) 0 1px, transparent 2px),
    radial-gradient(circle at 46% 71%, rgba(184, 242, 125, .22) 0 2px, transparent 3px),
    radial-gradient(ellipse at 60% 10%, rgba(115, 251, 211, .24), transparent 42%),
    radial-gradient(ellipse at 25% 85%, rgba(138, 99, 255, .34), transparent 46%);
  background-size: 120px 120px, 86px 86px, 160px 160px, 100% 100%, 100% 100%;
  animation: auroraDrift 24s ease-in-out infinite alternate;
}

.aurora-field::after {
  filter: blur(20px);
  opacity: .55;
  animation-duration: 34s;
  animation-direction: alternate-reverse;
}

.specimen-index {
  position: fixed;
  top: 50%;
  right: 22px;
  transform: translateY(-50%);
  z-index: 20;
  display: grid;
  gap: 10px;
  padding: 10px 8px;
  border: 1px solid rgba(255, 247, 230, .28);
  background: rgba(23, 34, 28, .45);
  backdrop-filter: blur(8px);
  border-radius: 999px;
}

.specimen-index a {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  color: var(--cream-paper);
  text-decoration: none;
  font-family: var(--mono);
  font-size: .72rem;
  border-radius: 50%;
  transition: background .3s ease, color .3s ease, transform .3s ease;
}

.specimen-index a.active,
.specimen-index a:hover {
  background: var(--aurora-mint);
  color: var(--night-loam);
  transform: rotate(-12deg) scale(1.08);
}

.atlas { position: relative; }

.chapter {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(24px, 1fr) minmax(280px, 560px) minmax(300px, 760px) minmax(24px, 1fr);
  align-items: center;
  gap: clamp(1rem, 4vw, 4rem);
  padding: clamp(4rem, 8vw, 8rem) 0;
  position: relative;
  isolation: isolate;
}

.chapter::before {
  content: "";
  position: absolute;
  inset: 8vh 8vw;
  border: 1px solid rgba(255, 247, 230, .08);
  transform: rotate(-1deg);
  z-index: -1;
}

.chapter-copy,
.editorial-note {
  grid-column: 2;
  max-width: 560px;
  position: relative;
}

.opening-copy { align-self: end; }

.folio,
.chapter-num,
.botanical-name {
  font-family: var(--mono);
  color: var(--dawn-peach);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .78rem;
}

h1,
h2 {
  font-family: var(--display);
  margin: 0;
  line-height: .88;
  letter-spacing: -.045em;
  font-weight: 700;
}

h1 { font-size: clamp(3.25rem, 10vw, 9rem); }
h2 { font-size: clamp(3rem, 7vw, 7rem); }

em { color: var(--aurora-mint); font-style: italic; }

p {
  font-size: clamp(1.05rem, 1.45vw, 1.35rem);
  line-height: 1.55;
  color: rgba(255, 247, 230, .88);
}

.code-chip,
.seed-cta,
.trellis-sign {
  font-family: var(--mono);
  font-weight: 700;
}

.code-chip {
  display: inline-block;
  margin-top: 1.2rem;
  padding: .8rem 1rem;
  color: var(--night-loam);
  background: var(--dawn-peach);
  box-shadow: 10px 10px 0 rgba(23, 34, 28, .24);
  transform: rotate(-2deg);
}

.iso-stage,
.patch-grid,
.trellis-scene,
.compost-bed,
.canopy-grove {
  grid-column: 3;
  position: relative;
  min-height: 560px;
  transition: transform .8s cubic-bezier(.2,.8,.2,1);
}

.terminal-tile,
.soil-tile,
.canopy-tile,
.step {
  position: absolute;
  transform-style: preserve-3d;
  clip-path: polygon(50% 0, 100% 28%, 50% 56%, 0 28%);
}

.terminal-tile {
  left: 16%;
  top: 16%;
  width: min(72vw, 470px);
  height: 340px;
  padding: 70px 62px;
  color: var(--cream-paper);
  background: linear-gradient(150deg, #31506B, #17221C 58%, #8A63FF);
  filter: drop-shadow(32px 38px 0 rgba(23, 34, 28, .32));
}

.terminal-bar {
  position: absolute;
  top: 62px;
  left: 95px;
  display: flex;
  gap: 8px;
}

.terminal-bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--dawn-peach); }
.terminal-bar span:nth-child(2) { background: var(--aurora-mint); }
.terminal-bar span:nth-child(3) { background: var(--error-berry); }

.terminal-tile code {
  display: block;
  font-family: var(--mono);
  font-size: clamp(.82rem, 1.8vw, 1.08rem);
  margin: .5rem 0;
  transform: rotate(-.5deg);
}

.error-line { color: var(--error-berry); }

.anxious { animation: anxiousShake 1.35s ease-in-out 1.1s both; }

.error-seed,
.beetle {
  position: absolute;
  width: 38px;
  height: 48px;
  border-radius: 58% 42% 54% 46%;
  background: var(--error-berry);
  box-shadow: inset 9px -7px 0 rgba(23, 34, 28, .18);
}

.drop-seed { left: 52%; bottom: 74px; animation: seedDrop 1.9s cubic-bezier(.22,.8,.32,1) .7s both; }

.leaf-arrow {
  position: absolute;
  width: 74px;
  height: 40px;
  border: 11px solid var(--aurora-mint);
  border-left: 0;
  border-bottom: 0;
  border-radius: 0 80px 0 0;
  opacity: 0;
}

.leaf-arrow::after {
  content: "";
  position: absolute;
  right: -14px;
  top: 21px;
  width: 32px;
  height: 22px;
  background: var(--leaf-glass);
  border-radius: 100% 0 100% 0;
  transform: rotate(-28deg);
}

.sprout-a { left: 47%; bottom: 96px; animation: sprout 1.2s ease-out 1.75s both; }
.sprout-b { left: 55%; bottom: 108px; transform: scaleX(-1) rotate(18deg); animation: sprout 1.2s ease-out 2.05s both; }

.soft-shadow { position: absolute; width: 420px; height: 70px; border-radius: 50%; background: rgba(23, 34, 28, .28); filter: blur(3px); left: 20%; top: 62%; transform: rotate(-12deg); }
.margin-label,.field-guide-label { position: absolute; font-family: var(--body); color: var(--night-loam); background: var(--cream-paper); padding: .8rem 1rem; box-shadow: 9px 9px 0 rgba(23,34,28,.18); }
.label-one { right: 10%; top: 8%; transform: rotate(4deg); }

.chapter-shake { grid-template-columns: minmax(24px,1fr) minmax(330px,760px) minmax(280px,480px) minmax(24px,1fr); }
.chapter-shake .left-note { grid-column: 3; }
.patch-grid { grid-column: 2; }

.seed-packet {
  position: absolute;
  width: 230px;
  height: 310px;
  border: 0;
  cursor: pointer;
  background: var(--cream-paper);
  color: var(--night-loam);
  box-shadow: 18px 24px 0 rgba(23, 34, 28, .25);
  padding: 2rem 1.4rem;
  transform: rotate(-9deg);
  transition: transform .45s ease;
}

.seed-packet::before { content: ""; position: absolute; inset: 18px; border: 2px dashed rgba(49,80,107,.42); }
.seed-packet:nth-child(1) { left: 10%; top: 10%; }
.packet-tilt { left: 42%; top: 28%; transform: rotate(7deg); }
.seed-packet:hover { animation: packetShake .38s linear both; }
.seed-packet.flipped { background: var(--leaf-glass); transform: rotate(2deg) scale(.96); }

.seed-label { display: block; font-family: var(--mono); color: var(--error-berry); font-weight: 700; margin-bottom: 5rem; }
.seed-packet code { position: relative; z-index: 1; font-family: var(--mono); }
.beetle { left: 92px; top: 104px; width: 48px; height: 38px; border-radius: 50%; animation: beetleWobble 2.1s ease-in-out infinite; }
.beetle::before,.beetle::after { content:""; position:absolute; width:18px; height:3px; background:var(--night-loam); top:17px; }
.beetle::before { left:-12px; transform:rotate(28deg); }
.beetle::after { right:-12px; transform:rotate(-28deg); }
.beetle.small { transform: scale(.75); }
.flipped .beetle { background: var(--aurora-mint); border-radius: 42% 58%; }

.malformed-branch { position: absolute; left: 18%; bottom: 12%; display: flex; gap: 18px; color: var(--error-berry); font-family: var(--mono); font-size: 3.2rem; transform: skewY(-12deg); }
.malformed-branch span { animation: glyphShake 1.5s infinite; }
.malformed-branch span:nth-child(2) { animation-delay: .15s; color: var(--dawn-peach); }
.malformed-branch span:nth-child(3) { animation-delay: .3s; }
.cream-tab { position: absolute; right: 1%; bottom: 2%; max-width: 260px; color: var(--night-loam); background: var(--cream-paper); padding: 1.1rem; box-shadow: 12px 12px 0 rgba(23,34,28,.22); transform: rotate(3deg); }

.chapter-trellis .right-note { grid-column: 3; }
.trellis-scene { grid-column: 2; min-height: 620px; }
.step { width: 210px; height: 150px; display: grid; place-items: center; background: linear-gradient(135deg, var(--cream-paper), var(--dawn-peach)); color: var(--night-loam); box-shadow: 22px 26px 0 rgba(23,34,28,.26); }
.step code { font-family: var(--mono); font-weight: 700; transform: translateY(-20px) rotate(-8deg); }
.step-one { right: 6%; top: 8%; }
.step-two { right: 28%; top: 27%; background: linear-gradient(135deg, #FFF7E6, #73FBD3); }
.step-three { left: 18%; top: 42%; background: linear-gradient(135deg, #B8F27D, #73FBD3); }
.step-four { left: 0; bottom: 5%; background: linear-gradient(135deg, #73FBD3, #8A63FF); }
.vine-path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.vine-path path { fill: none; stroke: var(--aurora-mint); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 22 14; filter: drop-shadow(0 0 8px rgba(115,251,211,.6)); }
.traveler { fill: var(--dawn-peach); }
.vine-tag { position: absolute; font-family: var(--mono); color: var(--night-loam); background: var(--leaf-glass); padding: .35rem .6rem; transform: rotate(-12deg); }
.tag-prev { left: 18%; top: 34%; }
.tag-again { right: 20%; bottom: 22%; }

.chapter-compost { background: linear-gradient(180deg, transparent, rgba(23,34,28,.36)); }
.compost-copy { align-self: start; margin-top: 8vh; }
.soil-tile { left: 8%; top: 14%; width: min(74vw, 580px); height: 430px; background: linear-gradient(145deg, #31506B 0 28%, #17221C 29% 64%, #FFB86B 65% 100%); filter: drop-shadow(32px 36px 0 rgba(23,34,28,.30)); }
.glyph { position: absolute; font-family: var(--mono); font-weight: 700; color: var(--dawn-peach); font-size: 2.4rem; animation: compostSink 4.8s ease-in-out infinite; }
.g1 { left: 32%; top: 30%; } .g2 { left: 48%; top: 38%; animation-delay:.4s; } .g3 { left: 58%; top: 28%; animation-delay:.8s; } .g4 { left: 40%; top: 50%; animation-delay:1.2s; }
.sprout { position: absolute; width: 76px; height: 78px; border-left: 8px solid var(--aurora-mint); border-radius: 50%; }
.sprout::before,.sprout::after { content:""; position:absolute; width:42px; height:24px; background:var(--leaf-glass); border-radius:100% 0 100% 0; }
.sprout::before { left:-42px; top:12px; transform:rotate(-24deg); }
.sprout::after { left:3px; top:28px; background:var(--aurora-mint); transform:rotate(20deg) scaleX(-1); }
.s1 { left: 40%; top: 26%; animation: leafRotate 5s ease-in-out infinite; } .s2 { left: 53%; top: 35%; transform: scale(.75); animation: leafRotate 6s ease-in-out infinite reverse; } .s3 { left: 30%; top: 45%; transform: scale(.65); animation: leafRotate 5.5s ease-in-out infinite; }
.root { position:absolute; width:180px; height:80px; border-bottom: 4px solid rgba(255,247,230,.42); border-radius:50%; }
.root-one { left:32%; top:48%; transform:rotate(12deg); } .root-two { left:45%; top:52%; transform:rotate(-18deg); }
.field-guide-label { right: 0; bottom: 12%; max-width: 300px; }

.chapter-canopy { min-height: 110vh; }
.canopy-grove { min-height: 670px; }
.canopy-tile { width: min(82vw, 620px); height: 440px; left: 4%; top: 18%; background: linear-gradient(145deg, #B8F27D, #73FBD3 55%, #31506B); filter: drop-shadow(34px 42px 0 rgba(23,34,28,.30)); }
.tile-back { left: 20%; top: 5%; opacity: .45; background: linear-gradient(145deg, #8A63FF, #73FBD3); }
.trellis-sign { position: absolute; left: 30%; top: 31%; color: var(--cream-paper); background: var(--night-loam); padding: 1rem 1.3rem; transform: rotate(-8deg); box-shadow: 10px 10px 0 rgba(23,34,28,.22); }
.blink { animation: blink 1s steps(2,end) infinite; color: var(--aurora-mint); }
.vine { position:absolute; width: 170px; height: 150px; border: 8px solid var(--night-loam); border-bottom:0; border-radius: 90px 90px 0 0; opacity:.75; }
.vine-left { left:24%; top:22%; transform:rotate(-18deg); } .vine-right { right:22%; top:27%; transform:rotate(18deg); }
.leaf { position:absolute; width:58px; height:32px; background:var(--leaf-glass); border-radius:100% 0 100% 0; animation: leafRotate 6s ease-in-out infinite; }
.l1 { left:23%; top:24%; } .l2 { left:54%; top:18%; background:var(--aurora-mint); animation-delay:.8s; } .l3 { right:24%; top:42%; animation-delay:1.2s; } .l4 { left:40%; top:54%; background:var(--aurora-mint); animation-delay:1.8s; }
.seed-cta { position:absolute; right:20%; bottom:28%; border:0; background:var(--dawn-peach); color:var(--night-loam); padding:.9rem 1.1rem; cursor:pointer; transform:rotate(7deg); box-shadow: 10px 12px 0 rgba(23,34,28,.22); transition: transform .3s ease, background .3s ease; }
.seed-cta:hover { animation: packetShake .38s linear both; background: var(--leaf-glass); }
.final-copy { align-self: end; margin-bottom: 8vh; }

.reveal-print { opacity: 0; transform: translateY(42px) rotate(.5deg); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.8,.2,1); }
.reveal-print.visible { opacity: 1; transform: translateY(0) rotate(0); }

@keyframes auroraDrift { from { transform: translate3d(-2%, -1%, 0) rotate(0deg); } to { transform: translate3d(2%, 2%, 0) rotate(3deg); } }
@keyframes anxiousShake { 0%,100%{ transform:translate(0) rotate(0); } 15%{ transform:translate(-8px,4px) rotate(-2deg); } 30%{ transform:translate(6px,-3px) rotate(1deg); } 45%{ transform:translate(-4px,2px) rotate(-1deg); } 60%{ transform:translate(3px,-1px) rotate(.6deg); } }
@keyframes packetShake { 0%,100%{ translate:0 0; } 20%{ translate:-5px 3px; } 40%{ translate:5px -2px; } 60%{ translate:-3px -2px; } 80%{ translate:3px 2px; } }
@keyframes seedDrop { 0%{ transform:translateY(-120px) scale(.4); opacity:0; } 55%{ transform:translateY(10px) scale(1.1); opacity:1; } 100%{ transform:translateY(0) scale(1); opacity:1; } }
@keyframes sprout { from{ opacity:0; transform:scale(.1) rotate(-30deg); } to{ opacity:1; transform:scale(1) rotate(0); } }
@keyframes beetleWobble { 0%,100%{ transform:rotate(-3deg); } 50%{ transform:rotate(5deg) translateY(-3px); } }
@keyframes glyphShake { 0%,100%{ transform:translate(0); } 30%{ transform:translate(-3px,2px); } 60%{ transform:translate(2px,-2px); } }
@keyframes compostSink { 0%,100%{ transform:translateY(0) rotate(0); opacity:.85; } 50%{ transform:translateY(28px) rotate(18deg); opacity:.25; } }
@keyframes leafRotate { 0%,100%{ rotate:-4deg; } 50%{ rotate:8deg; } }
@keyframes blink { 50% { opacity: 0; } }

@media (max-width: 900px) {
  .chapter,
  .chapter-shake {
    grid-template-columns: 18px 1fr 18px;
    gap: 2rem;
  }
  .chapter-copy,
  .editorial-note,
  .iso-stage,
  .patch-grid,
  .trellis-scene,
  .compost-bed,
  .canopy-grove,
  .chapter-shake .left-note,
  .patch-grid,
  .chapter-trellis .right-note { grid-column: 2; }
  .specimen-index { right: 8px; }
  .iso-stage,.patch-grid,.trellis-scene,.compost-bed,.canopy-grove { min-height: 480px; }
  .terminal-tile { left: 0; width: 100%; }
  .seed-packet { width: 190px; height: 260px; }
  .packet-tilt { left: 34%; }
}