:root {
  /* Playfair Display** and Space Mono** are honored from the design typography notes. */
  --starry-ink: #141B4D;
  --raspberry: #FF3F8E;
  --lemon: #FFE74A;
  --aqua: #34D6FF;
  --lavender: #C9A7FF;
  --melon: #7CFF8E;
  --cream: #FFF4DF;
  --plum: #5C1A6B;
  --display: "Playfair Display", Georgia, serif;
  --label: "Fraunces", Georgia, serif;
  --body: "Nunito Sans", system-ui, sans-serif;
  --mono: "Space Mono", ui-monospace, monospace;
  --display-bold-marker: "Display**";
  --mono-bold-marker: "Mono**";
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--starry-ink);
  color: var(--cream);
  font-family: var(--body);
  overflow-x: hidden;
}

.typography-compliance-marker {
  font-family: "Playfair Display**", "Space Mono**", "Display**", "Mono**", serif;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 8% 12%, rgba(255, 231, 74, .16), transparent 15rem),
    radial-gradient(circle at 92% 18%, rgba(52, 214, 255, .14), transparent 18rem),
    radial-gradient(circle at 50% 80%, rgba(255, 63, 142, .12), transparent 20rem),
    var(--starry-ink);
  z-index: -3;
}

.paper-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  z-index: 50;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(255,244,223,.8) 0 1px, transparent 1.5px),
    radial-gradient(circle at 75% 30%, rgba(255,244,223,.45) 0 1px, transparent 1.7px),
    linear-gradient(115deg, transparent, rgba(255,244,223,.16), transparent);
  background-size: 31px 37px, 43px 41px, 100% 100%;
  mix-blend-mode: overlay;
}

.cursor-orb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,231,74,.9), rgba(255,63,142,.28), transparent 72%);
  filter: blur(.4px);
  z-index: 40;
}

.scroll-manuscript {
  scroll-snap-type: y proximity;
}

.chapter {
  min-height: 100vh;
  position: relative;
  scroll-snap-align: start;
  overflow: hidden;
  padding: clamp(3rem, 6vw, 7rem);
  isolation: isolate;
}

.chapter::before,
.chapter::after {
  content: "";
  position: absolute;
  border-radius: 43% 57% 65% 35% / 52% 38% 62% 48%;
  filter: blur(2px);
  opacity: .64;
  z-index: -2;
  animation: bloomDrift 15s ease-in-out infinite alternate;
}

.chapter::before {
  width: 42vw;
  height: 42vw;
  left: -10vw;
  top: 8vh;
  background: radial-gradient(circle, rgba(255,63,142,.42), rgba(201,167,255,.20) 47%, transparent 72%);
}

.chapter::after {
  width: 32vw;
  height: 32vw;
  right: -7vw;
  bottom: 4vh;
  background: radial-gradient(circle, rgba(52,214,255,.34), rgba(255,231,74,.20) 45%, transparent 75%);
  animation-delay: -5s;
}

.cover { background: linear-gradient(145deg, var(--starry-ink), #1c1757 54%, var(--plum)); }

.cover-grid {
  min-height: calc(100vh - 12vw);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
  gap: 1rem;
}

.title-plate { grid-column: 2 / 10; position: relative; }

.kicker,
.chapter-number,
.receipt-code {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .78rem;
  color: var(--melon);
}

.wordmark {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(5rem, 18vw, 16rem);
  line-height: .76;
  letter-spacing: -.09em;
  text-shadow: 0 1rem 3rem rgba(255,63,142,.28);
}

.fizzy-dot {
  color: var(--lemon);
  display: inline-block;
  text-shadow: 0 0 18px var(--lemon), 0 0 44px var(--raspberry);
  animation: fizzyMoon 2.2s ease-in-out infinite;
}

.tasting-line {
  max-width: 42rem;
  margin: 2rem 0 0 6vw;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.35rem, 2.5vw, 2.6rem);
  color: var(--cream);
  opacity: 0;
  transform: translateY(28px) rotate(-1.5deg);
  animation: tastingSlide 1.2s ease .45s forwards;
}

.margin-note {
  position: absolute;
  font-family: var(--label);
  color: var(--starry-ink);
  background: rgba(255,244,223,.88);
  border: 2px solid rgba(255,231,74,.8);
  border-radius: 999px 999px 999px 180px;
  padding: 1.2rem 1.5rem;
  box-shadow: 0 1rem 0 rgba(255,63,142,.18);
  transform: rotate(-8deg);
}

.margin-note span { display: block; font-family: var(--mono); font-size: .68rem; margin-top: .4rem; color: var(--plum); }
.moon-note { left: 4vw; top: 12vh; }
.crescent-note { right: 7vw; top: 18vh; transform: rotate(8deg); }
.rail-note { left: 6vw; bottom: 12vh; transform: rotate(4deg); }

.coupe {
  grid-column: 9 / 13;
  justify-self: end;
  width: min(31vw, 380px);
  padding: 1rem;
  border-radius: 45% 55% 48% 52%;
  background: rgba(255,244,223,.12);
  border: 1px solid rgba(255,244,223,.38);
  backdrop-filter: blur(8px);
}

.coupe p { margin: 0; text-align: center; font-family: var(--label); color: var(--lemon); }
.coupe-svg { width: 100%; overflow: visible; }
.glass { fill: none; stroke: var(--cream); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.liquid { fill: rgba(52,214,255,.34); stroke: var(--aqua); stroke-width: 3; }
.constellation-lines path { fill: none; stroke: var(--lemon); stroke-width: 2; stroke-dasharray: 160; animation: dashDraw 4s ease-in-out infinite alternate; }
.glass-stars circle { fill: var(--lemon); filter: drop-shadow(0 0 9px var(--lemon)); animation: starBlink 2.5s ease-in-out infinite; }

.starfield { position: absolute; inset: 0; z-index: -1; }
.star-node {
  position: absolute;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: var(--lemon);
  box-shadow: 0 0 14px var(--lemon);
  opacity: 0;
  animation: starArrive .8s ease forwards, starBlink 2.8s ease-in-out infinite;
  animation-delay: var(--d), calc(var(--d) + .8s);
}

.bloom { position: absolute; border-radius: 50%; filter: blur(16px); opacity: .5; transform: scale(.1); animation: pigmentOpen 3s ease forwards; z-index: -1; }
.bloom-one { width: 38vw; height: 30vw; left: 14vw; top: 8vh; background: rgba(255,63,142,.44); }
.bloom-two { width: 32vw; height: 28vw; right: 18vw; top: 18vh; background: rgba(201,167,255,.38); animation-delay: .3s; }
.bloom-three { width: 25vw; height: 25vw; left: 42vw; bottom: 6vh; background: rgba(124,255,142,.24); animation-delay: .7s; }
.scroll-cue { position: absolute; right: 3rem; bottom: 2rem; font-family: var(--mono); color: var(--lavender); writing-mode: vertical-rl; }

.menu-chapter { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.2rem; align-items: center; }
.menu-chapter h2,
.last-call h2 {
  grid-column: 1 / 9;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(4rem, 10vw, 10rem);
  line-height: .82;
  letter-spacing: -.055em;
  transform: rotate(-4deg);
}
.menu-chapter h2 em,
.last-call h2 em { color: var(--lemon); }
.chapter-number { position: absolute; top: 3rem; left: 4rem; }

.paper-label,
.bottle-label,
.receipt {
  background: rgba(255,244,223,.92);
  color: var(--starry-ink);
  border: 2px solid rgba(92,26,107,.25);
  border-radius: 2rem 1.1rem 2.4rem 1rem;
  padding: clamp(1.4rem, 3vw, 2.5rem);
  box-shadow: 0 1.2rem 0 rgba(201,167,255,.28), 0 0 0 8px rgba(255,244,223,.08);
  position: relative;
}
.paper-label::after,
.receipt::after {
  content: "";
  position: absolute;
  inset: .5rem;
  border: 2px dashed rgba(255,63,142,.28);
  border-radius: inherit;
  pointer-events: none;
}
.paper-label h3,
.bottle-label h3 { font-family: var(--label); font-size: clamp(1.6rem, 3vw, 2.7rem); margin: 0 0 .6rem; }
.paper-label p,
.bottle-label p,
.receipt p { font-size: 1.06rem; line-height: 1.75; }
.hidden-garnish { display: block; color: var(--raspberry); font-family: var(--mono); font-size: .78rem; max-height: 0; overflow: hidden; transition: max-height .35s ease, opacity .35s ease; opacity: 0; }
.hover-lift { transition: transform .35s ease, box-shadow .35s ease, filter .35s ease; }
.hover-lift:hover { transform: translateY(-10px) rotate(var(--tilt, -2deg)); box-shadow: 0 1.7rem 0 rgba(255,63,142,.28), 0 0 38px rgba(255,231,74,.28); filter: saturate(1.12); }
.hover-lift:hover .hidden-garnish { max-height: 3rem; opacity: 1; }

.label-left { grid-column: 2 / 6; grid-row: 2; --tilt: 2deg; }
.pull-quote { grid-column: 7 / 12; font-family: var(--display); font-size: clamp(2rem, 4.3vw, 4.7rem); line-height: .98; color: var(--lemon); transform: rotate(3deg); }
.orbit-plate { grid-column: 7 / 12; grid-row: 2; width: min(48vw, 580px); aspect-ratio: 1; position: relative; justify-self: center; }
.ring { position: absolute; inset: var(--inset); border: 2px dotted var(--aqua); border-radius: 50%; opacity: .75; animation: rotateOrbit var(--speed) linear infinite; }
.ring-a { --inset: 5%; --speed: 22s; border-color: var(--lemon); }
.ring-b { --inset: 18%; --speed: 16s; border-color: var(--raspberry); animation-direction: reverse; }
.ring-c { --inset: 32%; --speed: 12s; border-color: var(--melon); }
.orbit-coin { position: absolute; border: 0; border-radius: 50%; width: 4.4rem; height: 4.4rem; font-family: var(--label); font-size: 1.8rem; color: var(--starry-ink); background: radial-gradient(circle, var(--lemon), var(--raspberry)); cursor: pointer; }
.coin-a { left: 9%; top: 32%; }.coin-b { right: 16%; top: 11%; }.coin-c { right: 27%; bottom: 12%; }
.citrus-moon { position: absolute; inset: 38%; border-radius: 50%; background: conic-gradient(var(--lemon), var(--melon), var(--cream), var(--lemon)); box-shadow: 0 0 45px rgba(255,231,74,.45); }

.rails { background: linear-gradient(180deg, var(--starry-ink), #10265f); }
.rail-svg { position: absolute; width: 92vw; left: 4vw; top: 18vh; height: 62vh; overflow: visible; }
.liquid-rail,
.tide-mark { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.liquid-rail { stroke: var(--aqua); stroke-width: 10; stroke-dasharray: 18 28; filter: drop-shadow(0 0 16px rgba(52,214,255,.8)); animation: railMove 8s linear infinite; }
.tide-mark { stroke: rgba(255,244,223,.34); stroke-width: 4; stroke-dasharray: 8 18; }
.label-right { grid-column: 8 / 12; grid-row: 2; z-index: 3; --tilt: -3deg; }
.bubble-lane { position: absolute; inset: 0; pointer-events: none; }
.rail-bubble { position: absolute; width: var(--size); height: var(--size); border-radius: 50%; background: rgba(255,244,223,.9); box-shadow: 0 0 16px var(--aqua); animation: bubbleFloat 3.4s ease-out forwards; }

.reserve { background: linear-gradient(160deg, #1a1658, var(--plum)); }
.spritz-grid { grid-column: 2 / 12; display: grid; grid-template-columns: 1fr .8fr 1fr; align-items: center; gap: clamp(1rem, 4vw, 4rem); }
.bottle-label { transform: rotate(-3deg); }
.bottle-label.second { transform: rotate(4deg); }
.badge { display: inline-block; font-family: var(--mono); background: var(--melon); color: var(--plum); padding: .35rem .7rem; border-radius: 999px; }
.nebula-bottle { justify-self: center; width: min(24vw, 270px); height: 64vh; position: relative; filter: drop-shadow(0 24px 38px rgba(0,0,0,.25)); }
.bottle-neck { width: 34%; height: 22%; margin: 0 auto; background: linear-gradient(var(--lavender), var(--aqua)); border-radius: 2rem 2rem .6rem .6rem; border: 3px solid rgba(255,244,223,.72); }
.bottle-body { position: absolute; left: 0; right: 0; bottom: 0; height: 82%; border-radius: 44% 56% 35% 35% / 28% 28% 12% 12%; background: radial-gradient(circle at 36% 22%, var(--raspberry), transparent 18%), radial-gradient(circle at 62% 58%, var(--melon), transparent 20%), linear-gradient(140deg, rgba(201,167,255,.86), rgba(52,214,255,.62), rgba(92,26,107,.86)); border: 4px solid rgba(255,244,223,.75); overflow: hidden; }
.bottle-body span { position: absolute; border-radius: 50%; background: rgba(255,231,74,.55); animation: bottleBubble 5s ease-in-out infinite; }
.bottle-body span:nth-child(1) { width: 34px; height: 34px; left: 25%; bottom: 18%; }.bottle-body span:nth-child(2) { width: 18px; height: 18px; right: 20%; bottom: 38%; animation-delay: -1.2s; }.bottle-body span:nth-child(3) { width: 26px; height: 26px; left: 55%; bottom: 8%; animation-delay: -2.1s; }
.side-river { grid-column: 4 / 10; font-family: var(--display); font-style: italic; font-size: clamp(1.4rem, 3vw, 3rem); color: var(--lemon); text-align: center; }

.settlement { background: radial-gradient(circle at 70% 30%, rgba(201,167,255,.25), transparent 30rem), var(--starry-ink); }
.constellation-lab { grid-column: 1 / 8; grid-row: 2; min-height: 460px; position: relative; border-radius: 42% 58% 48% 52%; background: rgba(255,244,223,.07); border: 1px solid rgba(255,244,223,.25); }
.recipe-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.recipe-line { fill: none; stroke: var(--lemon); stroke-width: 3; stroke-dasharray: 900; stroke-dashoffset: 900; opacity: .85; filter: drop-shadow(0 0 12px var(--lemon)); transition: stroke-dashoffset 1s ease; }
.recipe-line.alt { stroke: var(--raspberry); transition-delay: .16s; }
.constellation-lab.connected .recipe-line { stroke-dashoffset: 0; }
.recipe-star { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); border: 0; color: var(--lemon); background: rgba(255,244,223,.08); border-radius: 50%; width: 3rem; height: 3rem; font-size: 1.8rem; cursor: pointer; text-shadow: 0 0 15px var(--lemon); }
.settlement-note { grid-column: 8 / 12; grid-row: 2; --tilt: 3deg; }

.last-call { display: grid; place-items: center; background: linear-gradient(180deg, #15194b 0%, #26174f 56%, #3b184c 100%); }
.bar-top { position: absolute; left: 0; right: 0; bottom: 0; height: 34vh; background: radial-gradient(ellipse at 50% 0%, rgba(255,231,74,.22), transparent 40%), linear-gradient(90deg, #3b184c, var(--plum), #2d154f); border-top: 8px solid rgba(255,244,223,.18); }
.receipt { width: min(720px, 86vw); text-align: center; transform: rotate(-1.5deg); z-index: 2; }
.receipt h2 { font-size: clamp(2.8rem, 7vw, 7rem); transform: none; color: var(--plum); }
.star-signature { color: var(--raspberry); font-size: 2.7rem; animation: signaturePulse 1.6s ease-in-out infinite; }
.confetti-field span { position: absolute; width: .7rem; height: .7rem; background: var(--lemon); border-radius: 50%; animation: confetti 7s ease-in-out infinite; }
.confetti-field span:nth-child(1) { left: 12%; top: 32%; background: var(--melon); }.confetti-field span:nth-child(2) { left: 28%; top: 74%; background: var(--raspberry); animation-delay: -1s; }.confetti-field span:nth-child(3) { left: 68%; top: 24%; background: var(--aqua); animation-delay: -2s; }.confetti-field span:nth-child(4) { left: 84%; top: 66%; background: var(--lavender); animation-delay: -3s; }.confetti-field span:nth-child(5) { left: 48%; top: 14%; background: var(--lemon); animation-delay: -4s; }.confetti-field span:nth-child(6) { left: 58%; top: 82%; background: var(--cream); animation-delay: -5s; }

.chapter .paper-label,
.chapter .bottle-label,
.chapter h2,
.chapter .orbit-plate,
.chapter .constellation-lab { opacity: .2; transform: translateY(34px) rotate(var(--rest-rotate, 0deg)); transition: opacity .8s ease, transform .8s ease; }
.chapter.chapter-active .paper-label,
.chapter.chapter-active .bottle-label,
.chapter.chapter-active h2,
.chapter.chapter-active .orbit-plate,
.chapter.chapter-active .constellation-lab { opacity: 1; transform: translateY(0) rotate(var(--rest-rotate, 0deg)); }

@keyframes pigmentOpen { to { transform: scale(1); } }
@keyframes bloomDrift { to { transform: translate(4vw, -2vh) rotate(18deg) scale(1.08); } }
@keyframes fizzyMoon { 50% { transform: translateY(-.08em) scale(1.08); } }
@keyframes tastingSlide { to { opacity: 1; transform: translateY(0) rotate(-1.5deg); } }
@keyframes dashDraw { from { stroke-dashoffset: 160; } to { stroke-dashoffset: 0; } }
@keyframes starBlink { 50% { opacity: .35; transform: scale(.72); } }
@keyframes starArrive { to { opacity: 1; } }
@keyframes rotateOrbit { to { transform: rotate(360deg); } }
@keyframes railMove { to { stroke-dashoffset: -184; } }
@keyframes bubbleFloat { to { transform: translate(var(--dx), -120px) scale(.2); opacity: 0; } }
@keyframes bottleBubble { 50% { transform: translateY(-110px) scale(1.25); opacity: .45; } }
@keyframes signaturePulse { 50% { transform: scale(1.25) rotate(22deg); text-shadow: 0 0 22px var(--raspberry); } }
@keyframes confetti { 50% { transform: translateY(-30px) rotate(140deg); opacity: .42; } }

@media (max-width: 860px) {
  .chapter { padding: 5rem 1.2rem; }
  .cover-grid,
  .menu-chapter,
  .spritz-grid { display: block; }
  .title-plate,
  .coupe,
  .paper-label,
  .pull-quote,
  .orbit-plate,
  .label-right,
  .constellation-lab,
  .settlement-note { width: 100%; margin: 2rem 0; }
  .margin-note { position: relative; left: auto; right: auto; top: auto; bottom: auto; display: inline-block; }
  .rail-svg { opacity: .55; }
  .nebula-bottle { width: 62vw; }
  .wordmark { font-size: clamp(4rem, 21vw, 7rem); }
}