:root {
  --parchment: #FFF7E3;
  --honey: #D89B2B;
  --oat: #C8AD78;
  --olive: #28342A;
  --leaf: #A8D66D;
  --aqua: #8EDAD2;
  --cream: #F7E8BC;
  --brown: #76542A;
  --display: "Bebas Neue", Impact, sans-serif;
  --body: "Nunito Sans", Arial, sans-serif;
  --accent: "Fraunces", Georgia, serif;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  color: var(--olive);
  font-family: var(--body);
  overflow-x: hidden;
  background:
    radial-gradient(circle at 18% 8%, rgba(142, 218, 210, .42), transparent 28rem),
    radial-gradient(circle at 78% 18%, rgba(216, 155, 43, .24), transparent 28rem),
    linear-gradient(115deg, var(--parchment) 0%, var(--cream) 48%, #fff1cf 100%);
}

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

.grain {
  opacity: .23;
  background-image:
    radial-gradient(circle, rgba(118, 84, 42, .18) 1px, transparent 1.5px),
    radial-gradient(circle, rgba(255, 247, 227, .55) 1px, transparent 1.5px);
  background-size: 24px 24px, 37px 37px;
}

.scanlines {
  opacity: .16;
  background: repeating-linear-gradient(to bottom, transparent 0 5px, rgba(40, 52, 42, .11) 6px 7px);
  mix-blend-mode: multiply;
}

.route-stage {
  position: relative;
  min-height: 700vh;
  isolation: isolate;
}

.chapter {
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  padding: 8vh 7vw;
}

.hero {
  justify-content: flex-end;
  padding-right: 9vw;
}

.hero-screen {
  width: min(760px, 68vw);
  min-height: 58vh;
  padding: clamp(2rem, 5vw, 5.5rem);
  transform: translateX(0) rotate(-1.5deg);
}

.acrylic-panel, .label-panel {
  position: relative;
  border: 2px solid rgba(255, 247, 227, .86);
  background:
    linear-gradient(138deg, rgba(255, 247, 227, .74), rgba(247, 232, 188, .42) 34%, rgba(142, 218, 210, .18) 100%),
    linear-gradient(180deg, rgba(216, 155, 43, .28), rgba(255, 247, 227, .18));
  box-shadow: 0 28px 70px rgba(118, 84, 42, .22), inset 0 0 34px rgba(255, 255, 255, .62);
  backdrop-filter: blur(14px);
  clip-path: polygon(0 5%, 88% 0, 100% 15%, 96% 100%, 10% 96%, 0 82%);
}

.screen-ribbon, .stamp, .angled-caption, .wiki-sticker b {
  font-family: var(--display);
  letter-spacing: .07em;
}

.screen-ribbon {
  display: inline-block;
  padding: .45rem .8rem .32rem;
  color: var(--brown);
  background: rgba(142, 218, 210, .58);
  border: 1px solid var(--aqua);
  clip-path: polygon(0 0, 92% 0, 100% 50%, 92% 100%, 0 100%);
}

.hero-title-wrap { display: flex; align-items: center; gap: 1.3rem; margin: 2.2rem 0 1rem; }

h1, h2 { font-family: var(--display); margin: 0; font-weight: 400; line-height: .9; }

h1 { font-size: clamp(4.8rem, 11vw, 10.8rem); letter-spacing: .015em; text-shadow: 3px 4px 0 rgba(216, 155, 43, .25); }

h2 { font-size: clamp(3.4rem, 7vw, 7.5rem); max-width: 820px; color: var(--olive); }

p { font-size: clamp(1.03rem, 1.45vw, 1.42rem); line-height: 1.6; max-width: 620px; font-weight: 700; }

.hero-note { color: var(--brown); max-width: 700px; }

.seed-pod {
  flex: 0 0 auto;
  width: 86px;
  height: 120px;
  border-radius: 52% 48% 55% 45% / 60% 56% 44% 40%;
  background: radial-gradient(circle at 35% 25%, white, transparent 16%), linear-gradient(145deg, var(--leaf), var(--honey));
  border: 3px solid var(--cream);
  box-shadow: 0 0 0 8px rgba(142, 218, 210, .25), 0 20px 42px rgba(118, 84, 42, .25);
  transform: rotate(18deg);
}

.seed-pod span {
  display: block;
  width: 24px;
  height: 70px;
  margin: 24px auto;
  border-left: 3px solid rgba(40, 52, 42, .52);
  border-radius: 50%;
}

.barcode-blades { display: flex; gap: .35rem; align-items: flex-end; height: 70px; margin-top: 2rem; }
.barcode-blades i { width: clamp(10px, 1.1vw, 18px); background: var(--olive); border-radius: 8px 8px 0 0; opacity: .8; transform-origin: bottom; animation: sprout 2.8s ease-in-out infinite; }
.barcode-blades i:nth-child(1) { height: 28px; }
.barcode-blades i:nth-child(2) { height: 58px; animation-delay: .1s; }
.barcode-blades i:nth-child(3) { height: 42px; animation-delay: .25s; }
.barcode-blades i:nth-child(4) { height: 66px; animation-delay: .4s; }
.barcode-blades i:nth-child(5) { height: 34px; animation-delay: .55s; }
.barcode-blades i:nth-child(6) { height: 60px; animation-delay: .7s; }
.barcode-blades i:nth-child(7) { height: 46px; animation-delay: .85s; }
.barcode-blades i:nth-child(8) { height: 30px; animation-delay: 1s; }

.supply-vine {
  position: absolute;
  left: 16vw;
  top: 0;
  width: 28vw;
  height: 700vh;
  z-index: 2;
  pointer-events: none;
  overflow: visible;
}

.vine-shadow, .vine-main { fill: none; stroke-linejoin: bevel; stroke-linecap: round; }
.vine-shadow { stroke: rgba(118, 84, 42, .28); stroke-width: 28; transform: translate(8px, 9px); }
.vine-main { stroke: url(#none); stroke: var(--leaf); stroke-width: 13; filter: url(#glow); stroke-dasharray: 1; stroke-dashoffset: 1; }

.route-dots circle { fill: var(--aqua); stroke: var(--cream); stroke-width: 5; filter: drop-shadow(0 0 14px rgba(142, 218, 210, .9)); }

.node-rail {
  position: fixed;
  top: 50%;
  left: 3.4vw;
  transform: translateY(-50%);
  z-index: 20;
  display: grid;
  gap: .65rem;
}

.route-node {
  width: 54px;
  height: 42px;
  border: 2px solid var(--cream);
  color: var(--olive);
  background: rgba(255, 247, 227, .72);
  box-shadow: inset 0 0 16px rgba(255, 255, 255, .72), 0 8px 20px rgba(118, 84, 42, .18);
  clip-path: polygon(12% 0, 100% 0, 88% 100%, 0 100%);
  cursor: pointer;
  transition: transform .45s cubic-bezier(.2, 1.7, .28, 1), background .35s;
}

.route-node span { font-family: var(--display); font-size: 1.45rem; }
.route-node.is-active { background: var(--honey); transform: translateX(11px) rotate(-5deg); }

.story.left { justify-content: flex-end; padding-left: 28vw; }
.story.right { justify-content: flex-start; padding-left: 8vw; padding-right: 28vw; }

.label-panel {
  width: min(780px, 61vw);
  min-height: 57vh;
  padding: clamp(1.7rem, 4vw, 4.2rem);
  transform: translateY(52px) rotate(var(--tilt, 1.2deg)) scale(.96);
  opacity: .36;
  transition: transform .8s cubic-bezier(.18, 1.55, .32, 1), opacity .65s ease, filter .65s ease;
  filter: saturate(.8);
}

.left .label-panel { --tilt: -2deg; }
.right .label-panel { --tilt: 2deg; clip-path: polygon(8% 0, 100% 6%, 100% 84%, 90% 100%, 0 94%, 0 12%); }
.chapter.is-active .label-panel { transform: translateY(0) rotate(var(--tilt, 0deg)) scale(1); opacity: 1; filter: saturate(1.08); }
.chapter.is-active .hinged { animation: hingeOpen .9s cubic-bezier(.2, 1.55, .35, 1) both; transform-origin: 0 22%; }

.stamp {
  display: inline-flex;
  margin-bottom: 1rem;
  padding: .42rem .75rem .28rem;
  font-size: 1.35rem;
  color: var(--parchment);
  background: var(--brown);
  clip-path: polygon(0 0, 94% 0, 100% 42%, 88% 100%, 0 100%);
}

blockquote {
  margin: 1.8rem 0 0;
  max-width: 560px;
  color: var(--brown);
  font-family: var(--accent);
  font-size: clamp(1.1rem, 1.55vw, 1.55rem);
  line-height: 1.38;
  border-left: 7px solid var(--honey);
  padding: .3rem 0 .3rem 1rem;
}

.wiki-sticker, .angled-caption, .starter-tag {
  position: absolute;
  z-index: 6;
  padding: 1rem 1.2rem;
  background: rgba(255, 247, 227, .72);
  border: 2px solid rgba(255, 255, 255, .82);
  color: var(--brown);
  box-shadow: 0 16px 34px rgba(118, 84, 42, .2), inset 0 0 18px rgba(255,255,255,.7);
  backdrop-filter: blur(10px);
}

.starter-tag { left: 12vw; bottom: 13vh; transform: rotate(-4deg); clip-path: polygon(0 0, 100% 8%, 92% 100%, 8% 92%); }
.starter-tag b { display: block; font-family: var(--display); font-size: 1.5rem; }
.wiki-sticker { left: 28vw; top: 22vh; transform: rotate(-9deg); clip-path: polygon(0 0, 92% 0, 100% 100%, 8% 92%); }
.right .wiki-sticker { left: auto; right: 27vw; }
.wiki-sticker.aqua { background: rgba(142, 218, 210, .55); }
.angled-caption { right: 14vw; bottom: 18vh; transform: rotate(7deg); clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%); font-family: var(--display); font-size: 1.55rem; }
.story.right .angled-caption { left: 12vw; right: auto; transform: rotate(-7deg); }
.angled-caption.brown { background: rgba(200, 173, 120, .58); }
.angled-caption.leaf { background: rgba(168, 214, 109, .58); }

.mini-diagram, .greenhouse-panes, .cloud-labels, .nest-rings, .shelf-tags, .compost-loop {
  position: absolute;
  right: 7%;
  bottom: 8%;
  width: 190px;
  height: 130px;
  opacity: .9;
}

.sprouts i { position: absolute; bottom: 0; width: 16px; background: var(--olive); border-radius: 9px 9px 0 0; }
.sprouts i::before { content: ""; position: absolute; width: 38px; height: 22px; background: var(--leaf); border-radius: 100% 0 100% 0; left: -14px; top: -12px; transform: rotate(-25deg); }
.sprouts i:nth-child(1) { left: 18px; height: 42px; }
.sprouts i:nth-child(2) { left: 62px; height: 74px; }
.sprouts i:nth-child(3) { left: 110px; height: 54px; }
.sprouts i:nth-child(4) { left: 150px; height: 92px; }

.greenhouse-panes { display: flex; gap: 10px; align-items: flex-end; }
.greenhouse-panes i { flex: 1; height: 105px; border: 3px solid var(--aqua); background: rgba(142, 218, 210, .22); clip-path: polygon(0 16%, 50% 0, 100% 16%, 100% 100%, 0 100%); }

.cloud-labels i { position: absolute; width: 88px; height: 42px; border-radius: 50px; background: rgba(142, 218, 210, .48); border: 2px solid var(--cream); }
.cloud-labels i:nth-child(1) { left: 0; top: 30px; }
.cloud-labels i:nth-child(2) { left: 58px; top: 7px; background: rgba(216,155,43,.36); }
.cloud-labels i:nth-child(3) { right: 0; top: 48px; }

.nest-rings i, .compost-loop i { position: absolute; border: 5px solid var(--honey); border-radius: 50%; inset: calc(var(--n) * 18px); opacity: .72; }
.nest-rings i:nth-child(1), .compost-loop i:nth-child(1) { --n: 0; }
.nest-rings i:nth-child(2), .compost-loop i:nth-child(2) { --n: 1; border-color: var(--leaf); }
.nest-rings i:nth-child(3), .compost-loop i:nth-child(3) { --n: 2; border-color: var(--aqua); }

.shelf-tags { display: flex; gap: 14px; align-items: center; }
.shelf-tags i { width: 52px; height: 92px; background: rgba(255,247,227,.66); border: 3px solid var(--brown); clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%); }
.shelf-tags i:nth-child(2) { height: 118px; background: rgba(216,155,43,.38); }

.scanner-bee {
  position: fixed;
  left: 0;
  top: 0;
  width: 38px;
  height: 26px;
  z-index: 12;
  border-radius: 50%;
  background: repeating-linear-gradient(90deg, var(--honey) 0 8px, var(--olive) 8px 12px);
  box-shadow: 0 0 18px rgba(216,155,43,.75);
  transform: translate3d(16vw, 18vh, 0);
  transition: filter .25s;
}
.scanner-bee::before, .scanner-bee::after { content: ""; position: absolute; width: 24px; height: 16px; border-radius: 50%; background: rgba(142,218,210,.45); top: -8px; }
.scanner-bee::before { left: 3px; transform: rotate(-25deg); }
.scanner-bee::after { right: 3px; transform: rotate(25deg); }
.scanner-bee span { position: absolute; right: -18px; top: 8px; width: 24px; height: 3px; background: var(--aqua); box-shadow: 0 6px 0 var(--aqua), 0 -6px 0 var(--aqua); }

@keyframes sprout { 0%, 100% { transform: scaleY(.82); } 50% { transform: scaleY(1.08); } }
@keyframes hingeOpen { 0% { transform: perspective(900px) rotateY(-38deg) rotate(-7deg) translateY(45px); } 70% { transform: perspective(900px) rotateY(5deg) rotate(-1deg); } 100% { transform: perspective(900px) rotateY(0deg) rotate(var(--tilt, -2deg)); } }

@media (max-width: 860px) {
  .supply-vine { left: -4vw; width: 45vw; opacity: .72; }
  .node-rail { left: 1vw; transform: translateY(-50%) scale(.82); }
  .chapter, .story.left, .story.right { justify-content: flex-end; padding: 8vh 5vw 8vh 20vw; }
  .hero { padding-left: 18vw; padding-right: 5vw; }
  .hero-screen, .label-panel { width: 100%; }
  .wiki-sticker, .angled-caption, .starter-tag { display: none; }
  .mini-diagram, .greenhouse-panes, .cloud-labels, .nest-rings, .shelf-tags, .compost-loop { opacity: .36; right: 2%; }
}