:root {
  --night: #241428;
  --violet: #6E4B7E;
  --foxglove: #E989B8;
  --moss: #5E7C55;
  --paper: #F6E8C8;
  --moonwater: #A9D8E8;
  --copper: #C07A4B;
  --firefly: #FFE36E;
  --serif: Fraunces, Georgia, 'Times New Roman', serif;
  --sans: 'Nunito Sans', Inter, ui-sans-serif, system-ui, sans-serif;
  --hand: Gaegu, 'Comic Sans MS', 'Bradley Hand', cursive;
  --mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Space Mono only for tiny specimen numbers or coordinates etched into well stones. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--night); }
body {
  margin: 0;
  min-height: 100%;
  color: var(--paper);
  font-family: var(--sans);
  overflow-x: hidden;
  background:
    radial-gradient(circle at 78% 12%, rgba(169, 216, 232, .34), transparent 22rem),
    radial-gradient(circle at 13% 38%, rgba(233, 137, 184, .17), transparent 21rem),
    linear-gradient(180deg, #241428 0%, #35213d 31%, #5E7C55 100%);
}

.night-vignette, .paper-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}
.night-vignette { box-shadow: inset 0 0 12vw 5vw #241428; mix-blend-mode: multiply; opacity: .72; }
.paper-grain {
  opacity: .17;
  background-image:
    radial-gradient(circle at 20% 30%, #F6E8C8 0 1px, transparent 1.5px),
    radial-gradient(circle at 72% 66%, #FFE36E 0 .8px, transparent 1.3px),
    repeating-linear-gradient(88deg, transparent 0 11px, rgba(246,232,200,.23) 12px, transparent 13px);
  background-size: 39px 41px, 53px 57px, 100% 100%;
}

.storybook { position: relative; isolation: isolate; }
.fold {
  min-height: 100vh;
  position: relative;
  display: grid;
  align-items: center;
  padding: 8vh 8vw;
  overflow: hidden;
  transform-style: preserve-3d;
}
.fold::before {
  content: '';
  position: absolute;
  inset: 1.4rem 2vw;
  border: 1px dashed rgba(246,232,200,.25);
  border-radius: 38px 12px 44px 18px;
  background:
    linear-gradient(120deg, rgba(246,232,200,.06), transparent 43%),
    radial-gradient(circle at 70% 30%, rgba(255,227,110,.08), transparent 18rem);
  transform: rotate(var(--tilt, -1deg)) translateY(40px);
  opacity: .2;
  transition: opacity 900ms ease, transform 900ms cubic-bezier(.2,.8,.2,1);
  z-index: -1;
}
.fold.is-open::before { opacity: 1; transform: rotate(var(--tilt, -1deg)) translateY(0); }
.fold-one { --tilt: -1.3deg; }
.fold-two { --tilt: 1.1deg; background: linear-gradient(180deg, rgba(36,20,40,0), rgba(110,75,126,.28)); }
.fold-three { --tilt: -1.8deg; background: linear-gradient(180deg, rgba(94,124,85,.18), rgba(36,20,40,.2)); }
.fold-four { --tilt: .8deg; background: radial-gradient(circle at 74% 34%, rgba(169,216,232,.24), transparent 25rem); }
.fold-five { --tilt: -1deg; min-height: 112vh; background: linear-gradient(180deg, rgba(36,20,40,.04), #241428 92%); }

.hill-path {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 0 10px rgba(255,227,110,.2));
}
#stitchedPath {
  fill: none;
  stroke: var(--paper);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-dasharray: 4 5;
  opacity: .72;
}

.artifact {
  position: relative;
  z-index: 5;
  width: min(33rem, 82vw);
  padding: clamp(1.2rem, 3vw, 2.4rem);
  color: var(--night);
  background:
    radial-gradient(circle at 11% 16%, rgba(255,227,110,.2), transparent 5rem),
    linear-gradient(135deg, rgba(246,232,200,.98), rgba(246,232,200,.82));
  border: 2px solid rgba(192,122,75,.5);
  border-radius: 26px 8px 32px 14px;
  box-shadow: 0 24px 70px rgba(20,9,25,.38), inset 0 0 0 7px rgba(246,232,200,.32);
  transform: rotate(-2deg) translateY(35px);
  opacity: 0;
  transition: transform 850ms cubic-bezier(.2,.9,.2,1), opacity 850ms ease;
}
.is-open .artifact { transform: rotate(var(--paper-tilt, -2deg)) translateY(0); opacity: 1; }
.seed-packet { --paper-tilt: -3deg; margin-left: 6vw; }
.pail-note { --paper-tilt: 2deg; margin-left: auto; margin-right: 11vw; }
.rhyme-scrap { --paper-tilt: -1deg; margin-left: 18vw; border-style: dashed; }
.stone-inscription { --paper-tilt: 1.5deg; margin-left: 8vw; }
.reflection-card { --paper-tilt: -2deg; margin-left: 9vw; align-self: start; margin-top: 9vh; }

h1, h2 {
  font-family: var(--serif);
  margin: 0 0 .75rem;
  line-height: .9;
  letter-spacing: -.05em;
  color: var(--violet);
}
h1 { font-size: clamp(4rem, 13vw, 10rem); text-shadow: 2px 3px 0 rgba(233,137,184,.32); }
h2 { font-size: clamp(2.7rem, 7vw, 6.7rem); }
p { font-size: clamp(1rem, 1.35vw, 1.28rem); line-height: 1.68; margin: 0; }
.eyebrow, .specimen, .runes {
  font-family: var(--mono);
  color: var(--copper);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: .65rem;
}
.handnote {
  position: absolute;
  z-index: 8;
  font-family: var(--hand);
  font-size: clamp(1.35rem, 2.5vw, 2.2rem);
  color: var(--firefly);
  text-shadow: 0 0 12px rgba(255,227,110,.45);
  transform: rotate(-8deg);
  opacity: .86;
}
.note-one { left: 55vw; bottom: 21vh; }
.note-two { left: 14vw; top: 22vh; color: var(--foxglove); }
.note-three { right: 12vw; bottom: 17vh; }
.note-four { right: 10vw; top: 20vh; color: var(--moonwater); }

.hill { position: absolute; left: -10vw; right: -10vw; bottom: -18vh; height: 55vh; border-radius: 50% 50% 0 0; }
.hill-back { background: #6E4B7E; opacity: .54; transform: translateY(-13vh) rotate(-2deg); }
.hill-front { background: #5E7C55; box-shadow: inset 0 30px 60px rgba(36,20,40,.25); }
.grass, .fixed-grass {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 24vh;
  z-index: 9;
  background:
    repeating-linear-gradient(102deg, transparent 0 16px, rgba(94,124,85,.95) 17px 20px, transparent 21px 28px),
    linear-gradient(0deg, #241428, transparent);
  clip-path: polygon(0 100%, 0 52%, 4% 70%, 7% 36%, 10% 72%, 15% 28%, 18% 76%, 24% 41%, 27% 80%, 34% 38%, 39% 78%, 46% 31%, 51% 77%, 57% 42%, 62% 83%, 70% 35%, 74% 77%, 81% 28%, 85% 74%, 92% 39%, 96% 69%, 100% 45%, 100% 100%);
}
.fixed-grass { position: fixed; pointer-events: none; z-index: 12; opacity: .7; height: 16vh; }

.pail {
  position: absolute;
  left: 18vw;
  bottom: 18vh;
  width: 130px;
  height: 116px;
  z-index: 10;
  border-radius: 15px 15px 34px 34px;
  background: linear-gradient(100deg, #C07A4B, #F6E8C8 44%, #8d4f35 82%);
  transform: rotate(-12deg);
  box-shadow: inset -12px -22px 30px rgba(36,20,40,.28), 0 24px 35px rgba(36,20,40,.42);
  animation: pailSwing 4s ease-in-out infinite;
}
.pail-handle { position: absolute; left: 18px; right: 18px; top: -58px; height: 84px; border: 5px solid #C07A4B; border-bottom: 0; border-radius: 80px 80px 0 0; }
.pail-rim { position: absolute; inset: -8px -7px auto; height: 22px; border-radius: 50%; background: #F6E8C8; border: 3px solid #C07A4B; }
.pail-glow { position: absolute; right: 25px; top: 23px; width: 16px; height: 16px; border-radius: 50%; background: #FFE36E; box-shadow: 0 0 22px 9px #FFE36E; animation: pulse 1.8s ease-in-out infinite; }
@keyframes pailSwing { 50% { transform: rotate(-6deg) translateY(-5px); } }
@keyframes pulse { 50% { transform: scale(1.28); opacity: .65; } }

.lace-cloud { position: absolute; width: 260px; height: 80px; border-radius: 50px; background: rgba(246,232,200,.25); top: 13vh; right: 12vw; filter: blur(.2px); }
.lace-cloud::before, .lace-cloud::after { content: ''; position: absolute; border-radius: 50%; background: inherit; }
.lace-cloud::before { width: 110px; height: 110px; left: 30px; top: -45px; }
.lace-cloud::after { width: 130px; height: 130px; right: 25px; top: -62px; }
.foxgloves { position: absolute; left: 13vw; bottom: 12vh; display: flex; gap: 38px; align-items: flex-end; z-index: 7; }
.foxglove { position: relative; width: 74px; height: 280px; border: 0; background: transparent; padding: 0; transform-origin: bottom; animation: nod 5s ease-in-out infinite; cursor: pointer; }
.foxglove:nth-child(2) { height: 340px; animation-delay: -1s; }
.foxglove:nth-child(3) { height: 245px; animation-delay: -2.4s; }
.foxglove::before { content: ''; position: absolute; bottom: 0; left: 36px; width: 6px; height: 100%; background: #5E7C55; border-radius: 5px; }
.foxglove span { position: absolute; left: 0; width: 54px; height: 60px; border-radius: 60% 60% 52% 52%; background: #E989B8; box-shadow: inset 0 -14px 0 rgba(110,75,126,.22); transform: rotate(-18deg); transition: transform .35s ease, box-shadow .35s ease; }
.foxglove span:nth-child(1) { top: 30px; left: 17px; }
.foxglove span:nth-child(2) { top: 95px; left: -3px; }
.foxglove span:nth-child(3) { top: 160px; left: 24px; }
.foxglove.bloom span, .foxglove:hover span { transform: rotate(-8deg) scale(1.1); box-shadow: inset 0 -18px 0 rgba(110,75,126,.22), 0 0 0 5px rgba(255,227,110,.23); }
@keyframes nod { 50% { transform: rotate(4deg); } }

.moth { position: absolute; width: 42px; height: 24px; z-index: 9; animation: orbit 8s linear infinite; }
.moth-a { right: 23vw; top: 34vh; }
.moth-b { right: 21vw; top: 22vh; animation-duration: 10s; }
.moth span, .moth::before, .moth::after { position: absolute; content: ''; }
.moth span { width: 8px; height: 18px; left: 17px; top: 3px; border-radius: 50%; background: #FFE36E; box-shadow: 0 0 14px #FFE36E; }
.moth::before, .moth::after { width: 22px; height: 22px; background: rgba(169,216,232,.62); border-radius: 80% 20%; top: 0; }
.moth::before { left: 0; transform: rotate(-28deg); } .moth::after { right: 0; transform: scaleX(-1) rotate(-28deg); }
@keyframes orbit { from { transform: rotate(0deg) translateX(36px) rotate(0deg); } to { transform: rotate(360deg) translateX(36px) rotate(-360deg); } }

.mushroom-steps { position: absolute; right: 13vw; top: 26vh; z-index: 6; display: grid; gap: 38px; }
.mushroom-steps span { display: block; width: 130px; height: 34px; border-radius: 50%; background: linear-gradient(#F6E8C8, #C07A4B); box-shadow: 0 12px 0 #5E7C55; transform: rotate(var(--r)); }
.mushroom-steps span:nth-child(1) { --r: 8deg; margin-left: 90px; } .mushroom-steps span:nth-child(2) { --r: -6deg; margin-left: 35px; } .mushroom-steps span:nth-child(3) { --r: 4deg; margin-left: 100px; } .mushroom-steps span:nth-child(4) { --r: -8deg; margin-left: 15px; } .mushroom-steps span:nth-child(5) { --r: 5deg; margin-left: 70px; }
.bootprints { position: absolute; left: 45vw; top: 34vh; z-index: 6; }
.bootprints i { display: block; width: 20px; height: 36px; border-radius: 50% 50% 45% 45%; margin: 20px; background: rgba(36,20,40,.36); transform: rotate(25deg); }
.pressed-clover { position: absolute; left: 10vw; bottom: 20vh; width: 82px; height: 82px; transform: rotate(15deg); }
.pressed-clover span { position: absolute; width: 39px; height: 39px; border-radius: 50% 50% 8px 50%; background: rgba(94,124,85,.75); transform-origin: 100% 100%; }
.pressed-clover span:nth-child(2) { transform: rotate(90deg); } .pressed-clover span:nth-child(3) { transform: rotate(180deg); } .pressed-clover span:nth-child(4) { transform: rotate(270deg); }

.well { position: absolute; right: 10vw; bottom: 12vh; width: 315px; height: 380px; z-index: 6; }
.well-roof { position: absolute; left: 20px; top: 0; width: 275px; height: 82px; background: #C07A4B; clip-path: polygon(50% 0, 100% 100%, 0 100%); filter: drop-shadow(0 12px 0 rgba(36,20,40,.18)); }
.well-arch { position: absolute; left: 35px; top: 62px; width: 245px; height: 210px; border: 15px solid #F6E8C8; border-bottom: 0; border-radius: 130px 130px 0 0; }
.well-mouth { position: absolute; left: 35px; bottom: 35px; width: 245px; height: 145px; border-radius: 50% 50% 36px 36px; background: linear-gradient(#A9D8E8, #6E4B7E 35%, #241428); border: 13px solid #F6E8C8; box-shadow: inset 0 0 38px rgba(255,227,110,.28), 0 0 46px rgba(169,216,232,.4); overflow: hidden; }
.well-mouth span { position: absolute; inset: auto 10%; height: 2px; background: rgba(169,216,232,.8); border-radius: 50%; animation: ripple 4s ease-in-out infinite; }
.well-mouth span:nth-child(1) { top: 40%; } .well-mouth span:nth-child(2) { top: 56%; animation-delay: -1.5s; } .well-mouth span:nth-child(3) { top: 70%; animation-delay: -2.8s; }
.rope { position: absolute; left: 151px; top: 76px; width: 4px; height: 178px; background: repeating-linear-gradient(#C07A4B 0 8px, #F6E8C8 9px 12px); }
.runes { position: absolute; right: 13vw; bottom: 8vh; z-index: 7; color: var(--moonwater); }
@keyframes ripple { 50% { transform: scaleX(.55) translateY(6px); opacity: .45; } }

.moonwell { position: absolute; right: 10vw; top: 18vh; width: min(52vw, 620px); height: min(52vw, 620px); border-radius: 50%; background: radial-gradient(circle, #A9D8E8 0 9%, #6E4B7E 34%, #241428 70%); box-shadow: inset 0 0 90px rgba(255,227,110,.18), 0 0 80px rgba(169,216,232,.24); overflow: hidden; }
.crescent { position: absolute; top: 13%; left: 19%; width: 92px; height: 92px; border-radius: 50%; box-shadow: 24px 0 0 #FFE36E; transform: rotate(-22deg); }
.water-word { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--serif); font-size: clamp(4rem, 10vw, 9rem); color: #F6E8C8; letter-spacing: -.06em; text-shadow: 0 0 26px #A9D8E8; animation: liquid 5.5s ease-in-out infinite; }
.ripples span { position: absolute; border: 1px solid rgba(169,216,232,.42); border-radius: 50%; inset: 42%; animation: expand 5s ease-out infinite; }
.ripples span:nth-child(2) { animation-delay: -1.7s; } .ripples span:nth-child(3) { animation-delay: -3.3s; }
@keyframes liquid { 50% { transform: skewX(-5deg) translateY(7px); letter-spacing: -.02em; } }
@keyframes expand { to { inset: 7%; opacity: 0; } }

.stitched-tag { position: absolute; left: 15vw; bottom: 16vh; z-index: 7; color: #241428; background: #FFE36E; font-family: var(--hand); font-size: 1.6rem; text-decoration: none; padding: .9rem 1.5rem; border: 2px dashed #C07A4B; border-radius: 999px; transform: rotate(3deg); box-shadow: 0 13px 30px rgba(36,20,40,.34); }
.charm-nav { position: fixed; right: 1rem; top: 50%; transform: translateY(-50%); z-index: 30; display: grid; gap: .65rem; }
.charm-nav a { color: rgba(246,232,200,.72); text-decoration: none; font-family: var(--hand); font-size: 1rem; display: flex; align-items: center; gap: .45rem; }
.charm-nav span { width: 14px; height: 14px; border-radius: 50%; background: #6E4B7E; border: 1px solid #F6E8C8; box-shadow: 0 0 0 rgba(255,227,110,0); transition: .3s ease; }
.charm-nav a.active span { background: #FFE36E; box-shadow: 0 0 18px #FFE36E; }
.fireflies { position: fixed; inset: 0; pointer-events: none; z-index: 18; }
.firefly { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #FFE36E; box-shadow: 0 0 12px 5px rgba(255,227,110,.7); opacity: .8; transform: translate3d(var(--x), var(--y), 0); }

@media (max-width: 760px) {
  .fold { padding: 7vh 6vw; align-items: start; }
  .artifact { margin: 10vh 0 0 !important; }
  .charm-nav { display: none; }
  .pail { left: 52vw; transform: scale(.78) rotate(-12deg); }
  .foxgloves { left: 2vw; transform: scale(.75); transform-origin: bottom left; }
  .mushroom-steps, .well, .moonwell { transform: scale(.72); transform-origin: top right; right: -4vw; }
  .moonwell { top: 42vh; width: 92vw; height: 92vw; }
  .handnote { font-size: 1.35rem; }
}