:root {
  --cream: #FFF8E7;
  --petal: #FDFDF6;
  --gold: #F4C84A;
  --green: #4F7D4A;
  --sepia: #3E2F23;
  --dew: #A7D8E8;
  --violet: #8E6BBE;
  --shadow: rgba(62, 47, 35, 0.22);
}

/* compliance tokens from typography brief: JP** JPP JPPP annotations */

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--sepia);
  font-family: "IBM Plex Sans JP", "Hiragino Sans", "Yu Gothic", Inter, system-ui, sans-serif;
  background:
    radial-gradient(circle at 12% 4%, rgba(167, 216, 232, 0.42), transparent 28rem),
    radial-gradient(circle at 88% 18%, rgba(244, 200, 74, 0.18), transparent 22rem),
    linear-gradient(105deg, rgba(253, 253, 246, 0.78), rgba(255, 248, 231, 0.96));
  cursor: none;
}

.paper-fibers {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.48;
  background-image:
    linear-gradient(91deg, rgba(62, 47, 35, 0.035) 1px, transparent 1px),
    linear-gradient(2deg, rgba(79, 125, 74, 0.025) 1px, transparent 1px),
    radial-gradient(circle, rgba(62, 47, 35, 0.10) 0 1px, transparent 1.5px);
  background-size: 97px 100%, 100% 83px, 29px 31px;
  mix-blend-mode: multiply;
}

.cursor-lens {
  position: fixed;
  width: 76px;
  height: 76px;
  border: 1px solid rgba(62, 47, 35, 0.34);
  border-radius: 50%;
  background: radial-gradient(circle at 36% 31%, rgba(253,253,246,.88), rgba(167,216,232,.35) 49%, transparent 72%);
  box-shadow: inset -10px -10px 24px rgba(79,125,74,.10), 0 10px 30px rgba(62,47,35,.12);
  pointer-events: none;
  z-index: 20;
  transform: translate(-50%, -50%) scale(.65);
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
}

.cursor-lens.visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.herbarium-index {
  position: fixed;
  top: 50%;
  right: 24px;
  transform: translateY(-50%);
  z-index: 15;
  display: flex;
  flex-direction: column;
  gap: 17px;
  padding: 16px 10px;
  background: rgba(253, 253, 246, 0.58);
  border: 1px solid rgba(62, 47, 35, 0.18);
  border-radius: 999px;
  box-shadow: 0 16px 45px rgba(62, 47, 35, 0.10);
}

.index-petal {
  position: relative;
  width: 22px;
  height: 34px;
  border: 1px solid rgba(62,47,35,.28);
  background: var(--petal);
  border-radius: 80% 80% 55% 55%;
  transform: rotate(18deg);
  transition: transform .45s ease, background .45s ease;
}

.index-petal span {
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transform: translateX(-50%);
  background: rgba(79,125,74,.38);
}

.index-petal.active { background: var(--gold); transform: rotate(52deg) scale(1.08); }
.index-petal.active span { background: var(--violet); }

.quest-scroll { position: relative; z-index: 2; }

.station {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  padding: clamp(44px, 7vw, 110px);
}

.winding-stem {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 520vh;
  z-index: 2;
  pointer-events: none;
}

.winding-stem path {
  fill: none;
  stroke: var(--green);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  filter: drop-shadow(0 3px 0 rgba(253,253,246,.75));
}

.vellum {
  position: absolute;
  background: rgba(253,253,246,.68);
  border: 1px solid rgba(62,47,35,.14);
  box-shadow: 0 24px 80px rgba(62,47,35,.12);
  backdrop-filter: blur(2px);
  clip-path: polygon(3% 8%, 92% 0, 100% 84%, 62% 96%, 19% 90%, 0 54%);
}

.gate-vellum {
  width: min(58vw, 720px);
  height: 48vh;
  left: 33vw;
  top: 12vh;
  transform: rotate(-5deg);
}

.measuring-rule {
  position: absolute;
  top: 11vh;
  bottom: 12vh;
  width: 22px;
  background: repeating-linear-gradient(to bottom, var(--sepia) 0 1px, transparent 1px 18px);
  opacity: .45;
}

.left-rule { left: 26px; }

.specimen-card {
  position: absolute;
  left: clamp(34px, 12vw, 190px);
  top: 20vh;
  width: clamp(210px, 28vw, 360px);
  height: clamp(290px, 46vh, 470px);
  border: 1px solid rgba(62,47,35,.22);
  background: rgba(253,253,246,.64);
  box-shadow: 0 28px 80px rgba(62,47,35,.14);
  transform: rotate(-7deg);
}

.pin {
  position: absolute;
  left: 50%;
  top: 18%;
  width: 20px;
  height: 20px;
  background: radial-gradient(circle at 35% 35%, #FFF8E7, var(--gold) 58%, #9e7829);
  border-radius: 50%;
  box-shadow: 15px 18px 18px rgba(62,47,35,.22);
  z-index: 5;
  transform: translate(-50%, -50%);
}

.petal-compass {
  position: absolute;
  width: 210px;
  height: 210px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 18px 24px rgba(62,47,35,.12));
}

.petal-compass i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 92px;
  margin-left: -17px;
  margin-top: -88px;
  background: radial-gradient(ellipse at 50% 18%, var(--petal), #f6f0df 78%);
  border: 1px solid rgba(62,47,35,.28);
  border-radius: 80% 80% 48% 48%;
  transform-origin: 50% 88px;
  transition: transform .8s cubic-bezier(.2,.8,.2,1), background .6s ease;
}

.petal-compass i:nth-child(1) { transform: rotate(0deg) translateY(-3px); }
.petal-compass i:nth-child(2) { transform: rotate(30deg) translateY(-6px); }
.petal-compass i:nth-child(3) { transform: rotate(60deg) translateY(-2px); }
.petal-compass i:nth-child(4) { transform: rotate(90deg) translateY(-8px); }
.petal-compass i:nth-child(5) { transform: rotate(120deg) translateY(-3px); }
.petal-compass i:nth-child(6) { transform: rotate(150deg) translateY(-7px); }
.petal-compass i:nth-child(7) { transform: rotate(180deg) translateY(-2px); }
.petal-compass i:nth-child(8) { transform: rotate(210deg) translateY(-6px); }
.petal-compass i:nth-child(9) { transform: rotate(240deg) translateY(-4px); }
.petal-compass i:nth-child(10) { transform: rotate(270deg) translateY(-9px); }
.petal-compass i:nth-child(11) { transform: rotate(300deg) translateY(-3px); }
.petal-compass i:nth-child(12) { transform: rotate(330deg) translateY(-7px); }

.petal-compass b {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(circle, rgba(62,47,35,.20) 0 2px, transparent 2px 6px),
    var(--gold);
  background-size: 11px 11px, auto;
  border: 1px solid rgba(62,47,35,.3);
  z-index: 3;
}

.is-awake .gate-compass i:nth-child(4),
.active-station-2 .labyrinth-compass i:nth-child(10),
.active-station-4 .bloom-compass i:nth-child(2) { background: linear-gradient(var(--petal), rgba(142,107,190,.34)); }

.title-cluster {
  position: absolute;
  right: clamp(42px, 8vw, 130px);
  bottom: 14vh;
  width: min(48vw, 670px);
  z-index: 4;
}

h1, h2 {
  font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-weight: 500;
  line-height: .9;
  margin: 0;
}

h1 {
  font-size: clamp(72px, 13vw, 180px);
  letter-spacing: -0.075em;
}

h1 span { display: block; padding-left: .24em; color: var(--green); }

h2 {
  font-size: clamp(48px, 7vw, 108px);
  letter-spacing: -0.045em;
}

.poem, .station-copy p:not(.eyebrow), .clue em, .closing-line {
  font-size: clamp(17px, 1.55vw, 24px);
  line-height: 1.55;
}

.poem { max-width: 530px; margin-left: auto; }

.hand-note {
  font-family: Caveat, "Segoe Print", "Bradley Hand", cursive;
  color: var(--violet);
  font-size: clamp(20px, 2.5vw, 35px);
  margin: 0 0 10px;
  transform: rotate(-4deg);
}

.specimen-tag, .eyebrow, .annotation, .seed-packet, .clue span {
  font-family: "IBM Plex Sans JP", system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: .17em;
  font-size: 12px;
}

.typography-token-JP::after { content: "JP**"; }

.specimen-tag {
  position: absolute;
  left: 18px;
  bottom: 14px;
}

.clue, .station-copy, .annotation, .seed-packet {
  position: absolute;
  z-index: 5;
  background: rgba(253,253,246,.72);
  border: 1px solid rgba(62,47,35,.20);
  box-shadow: 0 18px 56px rgba(62,47,35,.10);
}

.torn-label {
  left: 46vw;
  top: 22vh;
  width: min(330px, 34vw);
  padding: 24px;
  transform: rotate(6deg);
  clip-path: polygon(0 7%, 100% 0, 96% 82%, 78% 100%, 5% 92%);
}

.clue strong { display: block; margin: 12px 0 8px; font-family: Fraunces, Georgia, serif; font-size: 28px; }
.clue em { font-style: normal; }

.pollen-field::before,
.pollen-field::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(244,200,74,.75) 0 2px, transparent 2.5px);
  background-size: 87px 101px;
  animation: pollenDrift 16s linear infinite;
  pointer-events: none;
  opacity: .28;
}
.pollen-field::after { animation-duration: 23s; background-size: 53px 71px; opacity: .18; }

.dew-station { min-height: 112vh; }
.chapter-mark {
  position: absolute;
  right: 13vw;
  top: 11vh;
  font-family: Fraunces, Georgia, serif;
  font-size: clamp(100px, 18vw, 260px);
  color: rgba(167,216,232,.38);
}

.large-dew {
  position: absolute;
  left: 10vw;
  top: 18vh;
  width: min(48vw, 560px);
  aspect-ratio: 1;
  border-radius: 52% 48% 57% 43%;
  background: radial-gradient(circle at 34% 26%, rgba(253,253,246,.95), rgba(167,216,232,.63) 42%, rgba(167,216,232,.18) 72%, transparent 74%);
  border: 1px solid rgba(62,47,35,.18);
  box-shadow: inset -32px -28px 70px rgba(79,125,74,.12), 0 30px 80px rgba(62,47,35,.13);
}

.dew-compass { transform: translate(-50%, -50%) scale(1.22) rotate(14deg); }
.dew-compass i { opacity: .68; }

.station-copy {
  padding: clamp(22px, 4vw, 48px);
  width: min(520px, 43vw);
  clip-path: polygon(2% 0, 92% 4%, 100% 89%, 62% 100%, 0 92%);
}
.dew-copy { right: 10vw; top: 42vh; transform: rotate(3deg); }
.eyebrow { color: var(--green); margin: 0 0 14px; }

.annotation { padding: 10px 16px; color: var(--violet); }
.dew-note { left: 46vw; top: 21vh; transform: rotate(-8deg); }

.dew-drop {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 25%, var(--petal), rgba(167,216,232,.62), rgba(167,216,232,.08));
  border: 1px solid rgba(62,47,35,.16);
}
.d1 { width: 72px; height: 72px; right: 17vw; top: 20vh; }
.d2 { width: 42px; height: 42px; left: 49vw; bottom: 22vh; }
.d3 { width: 95px; height: 95px; right: 7vw; bottom: 14vh; }

.labyrinth-station { min-height: 112vh; }
.labyrinth-copy { left: 9vw; top: 13vh; transform: rotate(-2deg); }
.labyrinth-orbit {
  position: absolute;
  right: 7vw;
  top: 17vh;
  width: min(58vw, 690px);
  aspect-ratio: 1;
}
.maze-ring {
  position: absolute;
  inset: 7%;
  border: 2px solid rgba(79,125,74,.42);
  border-radius: 50%;
  clip-path: polygon(0 0, 62% 0, 62% 12%, 18% 12%, 18% 88%, 100% 88%, 100% 100%, 0 100%);
}
.r2 { inset: 21%; transform: rotate(34deg); border-color: rgba(62,47,35,.34); }
.r3 { inset: 35%; transform: rotate(-19deg); border-color: rgba(142,107,190,.48); }
.petal-island {
  position: absolute;
  width: 90px;
  height: 160px;
  background: var(--petal);
  border: 1px solid rgba(62,47,35,.22);
  border-radius: 85% 85% 52% 52%;
}
.p1 { left: 8%; top: 45%; transform: rotate(61deg); }
.p2 { right: 16%; top: 7%; transform: rotate(-32deg); }
.p3 { right: 22%; bottom: 5%; transform: rotate(19deg); background: linear-gradient(var(--petal), rgba(142,107,190,.24)); }
.labyrinth-compass { transform: translate(-50%, -50%) scale(.83); }
.seed-packet {
  left: 18vw;
  bottom: 17vh;
  width: 170px;
  padding: 28px 18px;
  text-align: center;
  background: rgba(244,200,74,.18);
  transform: rotate(8deg);
}
.seed-packet strong { display: block; font-family: Fraunces, Georgia, serif; font-size: 31px; margin-top: 10px; text-transform: none; letter-spacing: 0; }
.maze-arrow { position: absolute; right: 37vw; bottom: 24vh; }

.root-station {
  min-height: 112vh;
  background: linear-gradient(to bottom, transparent 0 55%, rgba(62,47,35,.08) 55% 100%);
}
.soil-band {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 43%;
  background:
    radial-gradient(circle, rgba(62,47,35,.22) 0 1px, transparent 1.6px),
    linear-gradient(#d8c19c, #9d815c);
  background-size: 31px 25px, auto;
  opacity: .42;
}
.root-copy { right: 8vw; top: 13vh; transform: rotate(2deg); }
.root-diagram {
  position: absolute;
  left: 5vw;
  bottom: 7vh;
  width: min(63vw, 850px);
  height: auto;
  overflow: visible;
}
.root-diagram circle { fill: var(--violet); opacity: .75; }
.root-line {
  fill: none;
  stroke: var(--green);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.underground-compass { position: absolute; right: 19vw; bottom: 14vh; filter: sepia(.35); opacity: .72; }
.root-compass { transform: translate(-50%, -50%) scale(.62) rotate(180deg); }

.bloom-station { min-height: 105vh; display: grid; place-items: center; }
.morning-halo {
  position: absolute;
  width: 88vw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244,200,74,.24), rgba(167,216,232,.16) 36%, transparent 67%);
}
.final-seal {
  position: relative;
  width: min(62vw, 650px);
  aspect-ratio: 1;
}
.seal-ring {
  position: absolute;
  inset: 5%;
  border: 2px solid var(--green);
  border-radius: 50%;
  box-shadow: inset 0 0 0 20px rgba(253,253,246,.45), 0 0 0 1px rgba(62,47,35,.13);
}
.bloom-compass { width: 430px; height: 430px; transform: translate(-50%, -50%) scale(1.25); }
.bloom-compass i { width: 58px; height: 168px; margin-left: -29px; margin-top: -160px; transform-origin: 50% 160px; }
.bloom-compass b { width: 92px; height: 92px; }
.bloom-copy { left: 9vw; bottom: 11vh; width: min(450px, 36vw); transform: rotate(-4deg); }
.closing-line {
  position: absolute;
  right: 8vw;
  bottom: 12vh;
  max-width: 390px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(28px, 4vw, 60px);
  line-height: .98;
}

.active-station-0 .gate-compass { animation: compassWake 7s ease-in-out infinite; }
.active-station-1 .dew-compass { animation: dewTurn 9s linear infinite; }
.active-station-2 .labyrinth-orbit { animation: slowRotate 24s linear infinite; }
.active-station-4 .bloom-compass { animation: bloomPulse 8s ease-in-out infinite; }
.is-awake .title-cluster { animation: unfurl 1.2s cubic-bezier(.2,.8,.2,1) both; }

@keyframes pollenDrift { to { transform: translate3d(-90px, 140px, 0); } }
@keyframes compassWake { 50% { transform: translate(-50%, -50%) rotate(18deg) scale(1.05); } }
@keyframes dewTurn { to { transform: translate(-50%, -50%) scale(1.22) rotate(374deg); } }
@keyframes slowRotate { to { transform: rotate(360deg); } }
@keyframes bloomPulse { 50% { transform: translate(-50%, -50%) scale(1.33) rotate(8deg); } }
@keyframes unfurl { from { opacity: .25; clip-path: inset(0 100% 0 0); transform: translateX(-20px); } to { opacity: 1; clip-path: inset(0 0 0 0); transform: translateX(0); } }

@media (max-width: 820px) {
  body { cursor: auto; }
  .cursor-lens { display: none; }
  .herbarium-index { right: 8px; }
  .station { padding: 38px 28px 90px; }
  .winding-stem { opacity: .55; }
  .specimen-card, .title-cluster, .clue, .station-copy, .large-dew, .labyrinth-orbit, .root-diagram, .bloom-copy, .closing-line {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    margin: 28px 0;
  }
  .title-cluster { padding-top: 48vh; }
  .gate-vellum { width: 86vw; left: 7vw; }
  .specimen-card { height: 330px; }
  .large-dew, .labyrinth-orbit, .final-seal { width: 78vw; margin-inline: auto; }
  .station-copy { clip-path: none; }
  .chapter-mark, .annotation, .dew-drop, .seed-packet, .maze-arrow, .underground-compass { display: none; }
  .bloom-compass { transform: translate(-50%, -50%) scale(.78); }
}