:root {
  /* DESIGN typography tokens: Source Sans 3**a 3** from Google Fonts for narrative copy */
  --berry: #B94E73;
  --mint: #8EF6C5;
  --lilac: #C9A7FF;
  --ink: #26351F;
  --moss: #5E7F4B;
  --peach: #FFB98A;
  --cream: #FFF7DF;
  --shadow: rgba(38, 53, 31, .22);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background: var(--cream);
  font-family: "Source Sans 3**", "Source Sans 3", Inter, system-ui, sans-serif;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -3;
  background:
    radial-gradient(circle at 12% 18%, rgba(185, 78, 115, .08) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 34%, rgba(94, 127, 75, .13) 0 1px, transparent 2px),
    repeating-linear-gradient(90deg, rgba(38, 53, 31, .035) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(0deg, rgba(38, 53, 31, .025) 0 1px, transparent 1px 18px);
  mix-blend-mode: multiply;
}

.aurora-weather {
  position: fixed;
  inset: -22%;
  z-index: -2;
  background:
    linear-gradient(135deg, rgba(142, 246, 197, .42) 0%, rgba(201, 167, 255, .38) 48%, rgba(255, 185, 138, .36) 100%),
    radial-gradient(ellipse at 35% 20%, rgba(142, 246, 197, .5), transparent 42%),
    radial-gradient(ellipse at 70% 74%, rgba(201, 167, 255, .38), transparent 46%);
  filter: blur(32px) saturate(105%);
  opacity: .8;
  transform: translate3d(0,0,0);
  animation: auroraDrift 18s ease-in-out infinite alternate;
}

@keyframes auroraDrift {
  from { transform: translate(-5%, -2%) rotate(-2deg) scale(1.03); }
  to { transform: translate(5%, 4%) rotate(3deg) scale(1.1); }
}

.bookmark-ribbon {
  position: fixed;
  top: 0;
  right: clamp(18px, 4vw, 56px);
  z-index: 10;
  display: grid;
  gap: 6px;
  padding: 18px 13px 24px;
  background: linear-gradient(180deg, var(--berry), #9f3f61);
  border-radius: 0 0 22px 22px;
  box-shadow: 0 18px 30px rgba(38, 53, 31, .18);
}

.bookmark-ribbon::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -14px;
  width: 28px;
  height: 28px;
  background: inherit;
  transform: translateX(-50%) rotate(45deg);
  z-index: -1;
}

.bookmark-ribbon a {
  color: var(--cream);
  text-decoration: none;
  font: 18px/1 "Patrick Hand", cursive;
  letter-spacing: .03em;
}

.chapter {
  min-height: 100vh;
  position: relative;
  padding: clamp(72px, 8vw, 118px) clamp(22px, 6vw, 94px);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(14px, 2vw, 28px);
  isolation: isolate;
}

h1, h2, h3 {
  font-family: "Fraunces", Georgia, serif;
  font-variation-settings: "SOFT" 75, "WONK" 1;
  margin: 0;
}

h1 {
  font-size: clamp(4.2rem, 13vw, 13rem);
  letter-spacing: .015em;
  line-height: .82;
  color: var(--ink);
  text-shadow: 0 4px 0 rgba(255, 185, 138, .45);
}

h2 { font-size: clamp(3.2rem, 8vw, 8.5rem); line-height: .88; }
h3 { font-size: clamp(1.8rem, 3vw, 3.2rem); line-height: 1; }
p { font-size: clamp(1.05rem, 1.45vw, 1.35rem); line-height: 1.55; }

.cover { align-content: center; padding-top: 92px; }

.linen-banner {
  grid-column: 1 / 12;
  padding: clamp(22px, 4vw, 46px);
  border: 2px dashed rgba(185, 78, 115, .6);
  border-radius: 42px 26px 50px 32px;
  background: rgba(255, 247, 223, .72);
  box-shadow: 0 28px 70px rgba(38, 53, 31, .13), inset 0 0 0 10px rgba(255, 255, 255, .24);
  transform: rotate(-1deg);
}

.cover-grid { grid-column: 1 / -1; display: contents; }
.intro-copy { grid-column: 1 / 5; align-self: end; }
.badge-nest { grid-column: 5 / 10; min-height: 440px; position: relative; }
.margin-note, .scribble-note {
  font: clamp(1.2rem, 2vw, 1.8rem)/1.05 "Patrick Hand", cursive;
  color: var(--moss);
  background: rgba(255, 247, 223, .78);
  border: 1px solid rgba(94, 127, 75, .24);
  box-shadow: 0 16px 30px rgba(38, 53, 31, .1);
}
.margin-note { grid-column: 10 / 12; align-self: center; padding: 24px; border-radius: 12px 30px 18px 24px; transform: rotate(3deg); }

.seed-label, .specimen-tag, .caption {
  font-family: "Patrick Hand", cursive;
  color: var(--berry);
  font-size: 1.15rem;
  letter-spacing: .04em;
}

.handnote { font-family: "Patrick Hand", cursive; color: var(--moss); }

.blob {
  position: absolute;
  border-radius: 44% 56% 62% 38% / 52% 34% 66% 48%;
  background: radial-gradient(circle at 35% 25%, var(--mint), var(--moss) 62%, #426135);
  box-shadow: inset -24px -28px 50px rgba(38, 53, 31, .2), 0 32px 70px rgba(38, 53, 31, .22);
  animation: blobMorph 8s ease-in-out infinite alternate;
}

.clover-bed { inset: 42px 8% 20px 2%; }
.clover-bed::before, .clover-bed::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(142, 246, 197, .42);
  border: 2px dashed rgba(255,247,223,.45);
}
.clover-bed::before { width: 38%; height: 44%; left: 2%; top: 4%; }
.clover-bed::after { width: 34%; height: 38%; right: 7%; bottom: 9%; }

@keyframes blobMorph {
  to { border-radius: 58% 42% 45% 55% / 38% 59% 41% 62%; transform: rotate(2deg) scale(1.025); }
}

.hero-badge {
  position: absolute;
  width: clamp(230px, 31vw, 410px);
  aspect-ratio: 1;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%) rotate(-8deg);
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 30% 24%, #fffdf3, var(--peach) 28%, var(--berry) 72%);
  border: 18px solid var(--cream);
  box-shadow: inset -22px -28px 36px rgba(38, 53, 31, .2), inset 12px 12px 20px rgba(255,255,255,.48), 0 42px 65px rgba(38, 53, 31, .34);
}

.badge-face { font: 800 clamp(5rem, 10vw, 10rem)/1 "Fraunces", serif; color: var(--cream); text-shadow: 0 4px 0 rgba(38, 53, 31, .18); }
.badge-ribbon { position: absolute; bottom: 18%; padding: 8px 20px; border-radius: 999px; background: var(--cream); color: var(--moss); font: 1.2rem "Patrick Hand"; box-shadow: 0 8px 16px rgba(38, 53, 31, .16); }

.dew { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,.75); box-shadow: 0 0 18px var(--mint); }
.dew-one { left: 18%; top: 24%; } .dew-two { right: 16%; bottom: 22%; }
.leaf { position: absolute; width: 64px; height: 32px; border-radius: 80% 12% 80% 12%; background: var(--moss); box-shadow: inset 8px 4px 0 rgba(142, 246, 197, .24); }
.leaf-one { left: 8%; bottom: 26%; transform: rotate(-24deg); } .leaf-two { right: 11%; top: 26%; transform: rotate(42deg); }

.spread { align-items: center; }
.chapter-title { grid-column: 1 / 5; align-self: start; position: relative; z-index: 2; }
.chapter-title h2 { color: var(--ink); }
.wide-title { grid-column: 1 / 7; }

.paper-panel {
  position: relative;
  z-index: 2;
  padding: clamp(26px, 4vw, 54px);
  background: rgba(255, 247, 223, .86);
  border: 1px solid rgba(94, 127, 75, .22);
  border-radius: 48px 20px 58px 28px;
  box-shadow: 0 26px 55px rgba(38, 53, 31, .14);
}
.paper-panel::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 2px dashed rgba(185, 78, 115, .28);
  border-radius: inherit;
  pointer-events: none;
}
.left-panel { grid-column: 2 / 7; }
.specimen { grid-column: 8 / 12; position: relative; min-height: 370px; }
.specimen::before { content: ""; position: absolute; inset: 8% 0 0 0; border-radius: 48% 52% 44% 56%; background: linear-gradient(135deg, rgba(142,246,197,.55), rgba(201,167,255,.45)); box-shadow: 0 24px 48px rgba(38,53,31,.15); }
.specimen-tag { position: absolute; top: 18px; left: 20px; background: var(--cream); padding: 8px 14px; border-radius: 12px; z-index: 2; transform: rotate(-5deg); }

.mini-badge {
  position: absolute;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--cream);
  box-shadow: inset -10px -14px 18px rgba(38,53,31,.22), 0 26px 42px rgba(38,53,31,.24);
}
.clover-badge { width: 190px; height: 190px; left: 50%; top: 52%; transform: translate(-50%, -50%); background: radial-gradient(circle at 28% 22%, #fff, var(--mint) 22%, var(--moss) 74%); font: 8rem "Fraunces"; }
.invite-button, .garden-gate {
  display: inline-block;
  border: 0;
  border-radius: 999px;
  padding: 13px 22px;
  background: var(--berry);
  color: var(--cream);
  font: 1.2rem "Patrick Hand", cursive;
  box-shadow: 0 12px 20px rgba(185, 78, 115, .24);
  cursor: pointer;
  text-decoration: none;
}
.invite-button:hover, .garden-gate:hover { transform: translateY(-3px) rotate(-1deg); box-shadow: 0 0 26px rgba(142, 246, 197, .7), 0 14px 26px rgba(185, 78, 115, .24); }
.scribble-note { grid-column: 7 / 10; align-self: end; padding: 22px; border-radius: 24px 12px 26px 16px; transform: rotate(-4deg); }

.proof { overflow: hidden; }
.aurora-wash { position: absolute; inset: 14% -8%; background: linear-gradient(135deg, #8EF6C5 0%, #C9A7FF 48%, #FFB98A 100%); opacity: .36; border-radius: 44% 56% 38% 62%; filter: blur(16px); animation: blobMorph 10s ease-in-out infinite alternate; }
.proof-panel { grid-column: 2 / 6; }
.seed-packet { margin-top: 22px; width: min(280px, 100%); min-height: 150px; position: relative; perspective: 700px; cursor: pointer; }
.packet-front, .packet-inside { position: absolute; inset: 0; border-radius: 12px 12px 34px 34px; padding: 24px; box-shadow: 0 18px 34px rgba(38,53,31,.14); backface-visibility: hidden; transition: transform .7s cubic-bezier(.2,.8,.2,1); }
.packet-front { background: var(--peach); color: var(--ink); font: 2rem "Patrick Hand"; border: 2px dashed var(--berry); }
.packet-inside { background: var(--cream); border: 2px solid rgba(94,127,75,.28); transform: rotateX(180deg); font: 1.5rem "Patrick Hand"; color: var(--moss); }
.seed-packet.open .packet-front { transform: rotateX(180deg); }
.seed-packet.open .packet-inside { transform: rotateX(360deg); }
.thread-card { grid-column: 6 / 12; min-height: 350px; position: relative; border-radius: 50px; background: rgba(255,247,223,.58); box-shadow: inset 0 0 0 2px rgba(255,247,223,.5); }
.thread-path { position: absolute; inset: 12% 4%; width: 92%; height: 70%; overflow: visible; }
.thread-path path { fill: none; stroke: var(--berry); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 18 16; filter: drop-shadow(0 0 10px rgba(142,246,197,.75)); stroke-dashoffset: 280; transition: stroke-dashoffset 1.8s ease; }
.thread-card.in-view .thread-path path { stroke-dashoffset: 0; }
.moth-badge { width: 150px; height: 150px; left: 18%; top: 16%; background: radial-gradient(circle at 28% 22%, white, var(--lilac) 28%, var(--berry)); font-size: 4rem; }
.acorn-badge { width: 116px; height: 116px; right: 12%; bottom: 16%; background: radial-gradient(circle at 25% 22%, white, var(--peach) 25%, var(--moss)); font-size: 3rem; }
.thread-card .handnote { position: absolute; bottom: 24px; left: 36px; }

.rosette-stage { grid-column: 2 / 7; min-height: 430px; position: relative; }
.peach-blob { inset: 4% 5% 3% 0; background: radial-gradient(circle at 30% 20%, #fff3cf, var(--peach) 40%, var(--berry)); }
.rosette { position: absolute; left: 50%; top: 50%; width: 260px; height: 260px; transform: translate(-50%, -50%) rotate(-8deg); border-radius: 50%; display: grid; place-items: center; background: var(--berry); color: var(--cream); box-shadow: inset -18px -20px 30px rgba(38,53,31,.22), 0 36px 55px rgba(38,53,31,.25); transition: transform .45s cubic-bezier(.22,1.5,.36,1); }
.rosette span { position: absolute; inset: -24px; border-radius: 42%; background: rgba(185,78,115,.75); z-index: -1; }
.rosette span:nth-child(2) { transform: rotate(28deg); background: rgba(255,185,138,.8); }
.rosette span:nth-child(3) { transform: rotate(56deg); background: rgba(185,78,115,.65); }
.rosette span:nth-child(4) { transform: rotate(84deg); background: rgba(255,185,138,.75); }
.rosette strong { font: 4rem "Fraunces"; }
.rosette.pressed { transform: translate(-50%, -50%) rotate(8deg) scale(.97); }
.ceremony-panel { grid-column: 7 / 12; }

.carry { align-content: center; }
.carry-panel { grid-column: 2 / 8; padding: clamp(30px, 5vw, 70px); border-radius: 60px 24px 70px 32px; background: rgba(255,247,223,.88); box-shadow: 0 30px 70px rgba(38,53,31,.14); border: 2px dashed rgba(94,127,75,.28); }
.badge-clothesline { grid-column: 8 / 12; min-height: 360px; position: relative; }
.line { position: absolute; top: 35%; left: 0; right: 0; height: 4px; background: var(--moss); transform: rotate(-6deg); box-shadow: 0 0 18px rgba(142,246,197,.8); }
.hanging-badge { position: absolute; top: 38%; display: grid; place-items: center; width: 116px; height: 116px; border-radius: 34px 50% 42px 50%; font: 1.4rem "Patrick Hand"; color: var(--cream); box-shadow: 0 22px 35px rgba(38,53,31,.22); animation: sway 4s ease-in-out infinite; }
.hanging-badge::before { content: ""; position: absolute; top: -30px; width: 4px; height: 32px; background: var(--berry); }
.jam { left: 4%; background: var(--berry); }
.moon { left: 36%; background: var(--lilac); animation-delay: -.8s; }
.seed { right: 3%; background: var(--moss); animation-delay: -1.5s; }
@keyframes sway { 50% { transform: rotate(5deg) translateY(6px); } }

.bounce-item { opacity: 0; transform: translateY(56px) scale(.94); animation: bounceEnter .9s cubic-bezier(.22,1.45,.34,1) forwards; }
.delay-1 { animation-delay: .12s; } .delay-2 { animation-delay: .25s; } .delay-3 { animation-delay: .38s; }
@keyframes bounceEnter { 72% { opacity: 1; transform: translateY(-12px) scale(1.025); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
.reveal-panel { opacity: 0; transform: translateY(60px) rotate(var(--tilt, 0deg)); transition: opacity .8s ease, transform .8s cubic-bezier(.22,1.25,.36,1); }
.reveal-panel.in-view { opacity: 1; transform: translateY(0) rotate(var(--tilt, 0deg)); }
.is-floating { transition: transform .15s linear; }

@media (max-width: 900px) {
  .bookmark-ribbon { right: 12px; transform: scale(.86); transform-origin: top right; }
  .chapter { display: block; padding: 82px 22px; }
  .linen-banner, .intro-copy, .badge-nest, .margin-note, .chapter-title, .paper-panel, .specimen, .scribble-note, .thread-card, .rosette-stage, .carry-panel, .badge-clothesline { margin: 22px 0; }
  .badge-nest, .specimen, .rosette-stage, .badge-clothesline { min-height: 360px; }
  h1 { font-size: clamp(4rem, 20vw, 8rem); }
}