:root {
  --elderberry: #2B1635;
  --vellum: #F7EBD2;
  --rose: #C96F86;
  --moss: #4D6B4A;
  --apricot: #F1B36D;
  --rain: #7F9BA8;
  --blackberry: #5B234B;
  --title: "Cormorant Garamond", Cormorant, Georgia, serif;
  --subhead: Fraunces, Georgia, serif;
  --body: "Nunito Sans", Inter, Avenir, system-ui, sans-serif;
  --script: Caveat, "Bradley Hand", "Segoe Print", cursive;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--elderberry);
  background: var(--vellum);
  font-family: var(--body);
  overflow-x: hidden;
}

.vellum-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  opacity: .38;
  background:
    radial-gradient(circle at 18% 20%, rgba(91,35,75,.14) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 80%, rgba(77,107,74,.12) 0 1px, transparent 2px),
    repeating-linear-gradient(103deg, rgba(43,22,53,.03) 0 1px, transparent 1px 7px);
  mix-blend-mode: multiply;
}

.chapter {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.chapter::before,
.chapter::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -1;
}

.bookmark {
  position: fixed;
  left: 18px;
  top: 12vh;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 14px 7px 46px;
  background: linear-gradient(#F7EBD2, #e7d8bd);
  border: 1px solid rgba(91,35,75,.25);
  box-shadow: 0 14px 28px rgba(43,22,53,.18);
  clip-path: polygon(0 0, 100% 0, 100% 88%, 50% 100%, 0 88%);
}

.bookmark button {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px dashed var(--moss);
  color: var(--blackberry);
  background: rgba(247,235,210,.75);
  font: 700 12px var(--subhead);
  cursor: pointer;
  transition: transform .35s ease, background .35s ease, color .35s ease;
}

.bookmark button.active,
.bookmark button:hover {
  transform: rotate(-8deg) scale(1.1);
  background: var(--blackberry);
  color: var(--vellum);
}

.bookmark-thread {
  position: absolute;
  top: 0;
  bottom: 30px;
  width: 2px;
  background: var(--rose);
  opacity: .45;
}

.tassel {
  position: absolute;
  bottom: 10px;
  width: 22px;
  height: 34px;
  background: repeating-linear-gradient(90deg, var(--rose) 0 2px, transparent 2px 5px);
  transform-origin: top center;
  animation: sway 3.4s ease-in-out infinite;
}

@keyframes sway { 50% { transform: rotate(8deg); } }

h1, h2 { font-family: var(--title); font-weight: 500; letter-spacing: -.035em; }
h1 { font-size: clamp(4rem, 11vw, 10rem); margin: 0; line-height: .78; }
h2 { font-size: clamp(3.1rem, 7vw, 7rem); margin: .1em 0; line-height: .82; }
h3 { font-family: var(--subhead); font-size: clamp(1.4rem, 2vw, 2.4rem); margin: 0 0 .4em; }
p { font-size: clamp(1rem, 1.35vw, 1.25rem); line-height: 1.65; }
.stamp { font: 800 .76rem var(--subhead); text-transform: uppercase; letter-spacing: .19em; color: var(--blackberry); }

.gate { background: var(--vellum); }
.paper-half { position: absolute; inset: 0; transition: transform .2s linear; }
.left-page {
  right: 49%;
  background:
    radial-gradient(circle at 25% 44%, rgba(241,179,109,.75) 0 7%, transparent 8%),
    linear-gradient(130deg, #2B1635 0%, #5B234B 50%, #C96F86 110%);
  clip-path: polygon(0 0, 53% 0, 49% 9%, 55% 19%, 48% 31%, 54% 43%, 47% 54%, 55% 67%, 49% 79%, 53% 100%, 0 100%);
}
.right-page {
  left: 49%;
  background:
    radial-gradient(circle at 72% 22%, rgba(247,235,210,.8) 0 4%, transparent 5%),
    linear-gradient(145deg, #7F9BA8, #4D6B4A 55%, #2B1635);
  clip-path: polygon(47% 0, 100% 0, 100% 100%, 48% 100%, 54% 82%, 47% 70%, 55% 58%, 48% 45%, 54% 32%, 47% 18%);
}
.cottage-window {
  position: absolute;
  left: 12vw;
  top: 32vh;
  width: 180px;
  height: 150px;
  border: 10px solid var(--elderberry);
  background: var(--apricot);
  box-shadow: 0 0 70px var(--apricot);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 8px;
  transform: rotate(-3deg);
}
.cottage-window span { background: rgba(247,235,210,.28); }
.moon-path { position: absolute; right: 9vw; bottom: 5vh; width: 34vw; height: 57vh; border-left: 4px dotted rgba(247,235,210,.5); transform: rotate(22deg); }
.moon-path i { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--vellum); box-shadow: 0 0 18px var(--vellum); }
.moon-path i:nth-child(1) { left: 24%; top: 18%; } .moon-path i:nth-child(2) { left: 47%; top: 48%; } .moon-path i:nth-child(3) { left: 68%; top: 74%; }

.locket {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(68vw, 760px);
  aspect-ratio: 1.65;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 38px 35px rgba(43,22,53,.36));
}
.locket-half { position: absolute; top: 0; bottom: 0; width: 53%; border: 10px double rgba(247,235,210,.7); background: radial-gradient(circle at 50% 42%, #F7EBD2, #C96F86 58%, #5B234B); transition: transform .2s linear; }
.locket-left { left: 0; border-radius: 55% 10% 10% 55% / 50%; }
.locket-right { right: 0; border-radius: 10% 55% 55% 10% / 50%; }
.locket-inscription { position: absolute; inset: 16% 8%; display: grid; place-items: center; text-align: center; color: var(--vellum); text-shadow: 0 2px 7px rgba(43,22,53,.7); }
.locket-inscription p { font-family: var(--subhead); letter-spacing: .16em; text-transform: uppercase; }
.locket-inscription em { font-family: var(--script); font-size: clamp(1.4rem, 3vw, 2.4rem); }
.scroll-note { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); font-family: var(--script); color: var(--vellum); font-size: 1.8rem; }
.moth { position: absolute; width: 34px; height: 22px; border-radius: 50%; background: linear-gradient(90deg, transparent 45%, var(--apricot) 46% 54%, transparent 55%); animation: orbit 8s linear infinite; }
.moth::before, .moth::after { content: ""; position: absolute; width: 18px; height: 22px; background: rgba(247,235,210,.75); border-radius: 80% 20%; }
.moth::before { left: 0; transform: rotate(-22deg); } .moth::after { right: 0; transform: scaleX(-1) rotate(-22deg); }
.moth-a { left: 34vw; top: 24vh; } .moth-b { right: 24vw; bottom: 24vh; animation-duration: 11s; }
@keyframes orbit { to { transform: rotate(360deg) translateX(26px) rotate(-360deg); } }

.cipher { background: linear-gradient(155deg, #F7EBD2 0 42%, #d8b88b 43% 100%); }
.tabletop { position: absolute; inset: -20% -12%; background: linear-gradient(120deg, rgba(91,35,75,.16), rgba(241,179,109,.26)), repeating-linear-gradient(92deg, rgba(43,22,53,.05) 0 2px, transparent 2px 22px); transform: rotate(-12deg); border-top: 18px solid rgba(91,35,75,.16); }
.recipe-card, .glass-note, .bridge-copy, .final-note { position: absolute; background: rgba(247,235,210,.88); border: 1px solid rgba(91,35,75,.23); box-shadow: 0 24px 50px rgba(43,22,53,.18); padding: clamp(24px, 4vw, 58px); }
.note-primary { left: 13vw; top: 12vh; width: min(650px, 62vw); transform: rotate(-4deg); }
.note-tilt { right: 9vw; bottom: 13vh; width: min(420px, 39vw); transform: rotate(8deg); }
.recipe-card::before { content: ""; position: absolute; inset: 16px; border: 2px dashed rgba(77,107,74,.35); pointer-events: none; }
.teacup { position: absolute; width: 140px; height: 140px; border: 18px solid var(--rain); border-radius: 50%; background: radial-gradient(circle, transparent 42%, rgba(43,22,53,.15) 43% 48%, transparent 49%); }
.teacup::after { content: ""; position: absolute; right: -50px; top: 38px; width: 55px; height: 48px; border: 14px solid var(--rain); border-left: 0; border-radius: 0 60px 60px 0; }
.cup-one { left: 58vw; top: 12vh; transform: rotate(12deg); } .cup-two { left: 9vw; bottom: 11vh; transform: rotate(-15deg) scale(.8); border-color: var(--moss); }
.berry-stain { position: absolute; width: 110px; height: 88px; border-radius: 49% 51% 44% 56%; background: rgba(91,35,75,.55); filter: blur(.5px); }
.stain-one { right: 28vw; top: 41vh; } .stain-two { left: 42vw; bottom: 20vh; transform: scale(.65); background: rgba(201,111,134,.45); }
.pressed-flower { position: absolute; right: 13vw; top: 30vh; width: 120px; height: 120px; animation: flowerDrift 8s ease-in-out infinite; }
.pressed-flower::before, .pressed-flower::after, .pressed-flower span { content: ""; position: absolute; inset: 35px; background: rgba(201,111,134,.65); border-radius: 85% 15%; transform-origin: 25px 25px; }
.pressed-flower::before { transform: rotate(0deg) translateY(-28px); } .pressed-flower::after { transform: rotate(120deg) translateY(-28px); } .pressed-flower span { transform: rotate(240deg) translateY(-28px); }
@keyframes flowerDrift { 50% { transform: rotate(13deg) translateY(-12px); } }
.route-marks { position: absolute; inset: 0; pointer-events: none; }
.route-marks span { position: absolute; width: 80px; border-top: 3px dotted var(--moss); transform: rotate(-24deg); }
.route-marks span:nth-child(1) { left: 33%; top: 27%; } .route-marks span:nth-child(2) { left: 40%; top: 35%; transform: rotate(28deg); } .route-marks span:nth-child(3) { left: 47%; top: 44%; } .route-marks span:nth-child(4) { left: 54%; top: 53%; transform: rotate(22deg); }
.margin-whisper, .handwriting { font-family: var(--script); font-size: clamp(1.6rem, 3vw, 3rem); }
.margin-whisper { position: absolute; left: 11vw; top: 72vh; color: var(--blackberry); transform: rotate(-9deg); }

.orchard { background: linear-gradient(#7F9BA8, #F7EBD2 54%, #4D6B4A); }
.trunks span { position: absolute; top: -8vh; bottom: -8vh; width: clamp(54px, 7vw, 105px); background: linear-gradient(90deg, #2B1635, #5B234B, #2B1635); border-radius: 45% 55% 42% 58%; box-shadow: 14px 0 0 rgba(77,107,74,.25); }
.trunks span:nth-child(1) { left: 6%; transform: rotate(-3deg); } .trunks span:nth-child(2) { left: 25%; transform: rotate(2deg); } .trunks span:nth-child(3) { left: 49%; transform: rotate(-1deg); } .trunks span:nth-child(4) { left: 70%; transform: rotate(4deg); } .trunks span:nth-child(5) { left: 88%; transform: rotate(-4deg); }
.orchard-mist { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 42%, rgba(247,235,210,.78), transparent 58%); }
.hanging-tag { position: absolute; width: min(470px, 42vw); padding: 34px; background: linear-gradient(#eee0c5, #F7EBD2); border: 1px solid rgba(43,22,53,.28); box-shadow: 0 22px 45px rgba(43,22,53,.25); transform-origin: top center; animation: tagSway 5s ease-in-out infinite; }
.hanging-tag::before { content: ""; position: absolute; left: 50%; top: -92px; width: 2px; height: 92px; background: var(--rose); }
.tag-one { left: 15vw; top: 24vh; transform: rotate(-3deg); } .tag-two { right: 13vw; top: 37vh; transform: rotate(4deg); animation-delay: -2s; }
@keyframes tagSway { 50% { transform: rotate(3deg) translateY(8px); } }
.ladder { position: absolute; right: 22vw; bottom: 4vh; width: 80px; height: 310px; border-left: 9px solid var(--elderberry); border-right: 9px solid var(--elderberry); background: repeating-linear-gradient(0deg, transparent 0 36px, var(--apricot) 37px 46px, transparent 47px); transform: rotate(12deg); }
.ribbons i { position: absolute; width: 10px; height: 260px; background: var(--rose); border-radius: 8px; top: 8vh; } .ribbons i:first-child { left: 32vw; transform: rotate(23deg); } .ribbons i:last-child { right: 25vw; transform: rotate(-23deg); }

.rain { background: linear-gradient(135deg, #2B1635, #5B234B 45%, #7F9BA8); color: var(--vellum); }
.window-stack { position: absolute; inset: 5vh 8vw; perspective: 900px; }
.pane { position: absolute; border: 2px solid rgba(247,235,210,.48); background: linear-gradient(120deg, rgba(127,155,168,.26), rgba(247,235,210,.08)); box-shadow: inset 0 0 40px rgba(247,235,210,.1), 0 30px 80px rgba(0,0,0,.25); backdrop-filter: blur(2px); }
.pane::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(100deg, transparent 0 36px, rgba(247,235,210,.17) 37px 39px, transparent 40px 80px); }
.pane-one { inset: 3% 42% 14% 4%; transform: rotateY(18deg) rotateZ(-2deg); } .pane-two { inset: 12% 18% 10% 26%; transform: translateZ(-100px) rotateY(-8deg); } .pane-three { inset: 6% 3% 20% 58%; transform: rotateY(-18deg) rotateZ(3deg); }
.glass-note { left: 14vw; top: 18vh; width: min(520px, 44vw); background: rgba(43,22,53,.48); border-color: rgba(247,235,210,.3); }
.handwriting { position: absolute; color: rgba(247,235,210,.74); opacity: 0; transform: translateY(18px); transition: opacity 1s ease, transform 1s ease; }
.chapter.in-view .handwriting { opacity: 1; transform: translateY(0); }
.line-a { left: 50vw; top: 24vh; transition-delay: .1s; } .line-b { left: 59vw; top: 48vh; transition-delay: .35s; } .line-c { left: 38vw; bottom: 20vh; transition-delay: .65s; }
.rain-beads span { position: absolute; top: -8vh; width: 2px; height: 58px; background: linear-gradient(transparent, rgba(247,235,210,.7)); border-radius: 50%; animation: rainFall linear infinite; }
@keyframes rainFall { to { transform: translateY(118vh); } }

.bridge { background: radial-gradient(circle at 70% 25%, rgba(241,179,109,.2), transparent 22%), linear-gradient(150deg, #F7EBD2, #d7dcbf 50%, #2B1635 120%); }
.thread-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.thread-svg path { fill: none; stroke: var(--rose); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 3px 0 rgba(91,35,75,.18)); }
#threadRight { stroke: var(--moss); }
.thread-knot { position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; border-radius: 50%; border: 7px solid var(--blackberry); background: var(--apricot); transform: translate(-50%, -50%) scale(.2); box-shadow: 0 0 0 0 rgba(201,111,134,.35); transition: transform .4s ease, box-shadow .4s ease; }
.thread-knot.ready { transform: translate(-50%, -50%) scale(1); box-shadow: 0 0 0 22px rgba(201,111,134,.16); }
.bridge-copy { left: 10vw; bottom: 12vh; width: min(610px, 56vw); }
.lace-moon { position: absolute; right: 12vw; top: 12vh; width: 230px; height: 230px; border-radius: 50%; background: radial-gradient(circle, transparent 12%, rgba(247,235,210,.92) 13% 15%, transparent 16% 22%, rgba(247,235,210,.9) 23% 25%, transparent 26%), var(--apricot); box-shadow: 0 0 80px rgba(241,179,109,.68); }

.hill { background: linear-gradient(#F7EBD2 0%, #f4d8ad 45%, #7F9BA8 100%); }
.morning-sky { position: absolute; inset: 0; background: radial-gradient(circle at 52% 24%, rgba(241,179,109,.76), transparent 20%), radial-gradient(circle at 50% 80%, rgba(77,107,74,.28), transparent 28%); }
.constellation i { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--blackberry); box-shadow: 0 0 13px var(--blackberry); }
.constellation i:nth-child(1) { left: 62%; top: 15%; } .constellation i:nth-child(2) { left: 72%; top: 22%; } .constellation i:nth-child(3) { left: 80%; top: 13%; } .constellation i:nth-child(4) { left: 86%; top: 29%; } .constellation i:nth-child(5) { left: 68%; top: 34%; }
.constellation::before { content: ""; position: absolute; right: 10vw; top: 18vh; width: 330px; height: 150px; border-top: 2px dashed rgba(91,35,75,.4); border-right: 2px dashed rgba(91,35,75,.25); transform: rotate(9deg); }
.final-note { left: 10vw; top: 12vh; width: min(650px, 58vw); background: rgba(247,235,210,.72); }
.figures { position: absolute; left: 50%; bottom: 28vh; width: 170px; transform: translateX(-50%); }
.figures span { position: absolute; bottom: 0; width: 34px; height: 76px; background: var(--elderberry); border-radius: 22px 22px 5px 5px; }
.figures span::before { content: ""; position: absolute; left: 5px; top: -24px; width: 24px; height: 24px; border-radius: 50%; background: var(--elderberry); }
.figures span:first-child { left: 36px; transform: rotate(-4deg); } .figures span:last-child { right: 36px; transform: rotate(4deg); }
.quilt-horizon { position: absolute; left: -2vw; right: -2vw; bottom: 0; height: 25vh; display: grid; grid-template-columns: repeat(5, 1fr); transform: skewY(-2deg); }
.quilt-horizon span:nth-child(1) { background: #4D6B4A; } .quilt-horizon span:nth-child(2) { background: #C96F86; } .quilt-horizon span:nth-child(3) { background: #F1B36D; } .quilt-horizon span:nth-child(4) { background: #7F9BA8; } .quilt-horizon span:nth-child(5) { background: #5B234B; }
.unfurled-map { position: absolute; left: 22vw; right: 22vw; bottom: 5vh; padding: 24px 34px; background: #F7EBD2; border: 1px solid rgba(91,35,75,.34); border-radius: 50% 50% 10% 10% / 14% 14% 8% 8%; text-align: center; box-shadow: 0 22px 34px rgba(43,22,53,.22); }
.unfurled-map b { font-family: var(--title); font-size: 2rem; }

@media (max-width: 760px) {
  .bookmark { left: 6px; transform: scale(.82); transform-origin: top left; }
  .note-primary, .note-tilt, .hanging-tag, .glass-note, .bridge-copy, .final-note { width: 78vw; left: 14vw; right: auto; }
  .note-tilt, .tag-two { top: auto; bottom: 8vh; }
  .teacup, .pressed-flower, .cottage-window { transform: scale(.7); }
  .locket { width: 88vw; }
  .unfurled-map { left: 8vw; right: 8vw; }
}