:root {
  /* Design typography token: Space Grotesk** from Google Fonts for tiny tab numbers. */
  --moon-milk: #FFF4C7;
  --sour-cherry: #FF3B7F;
  --electric-mint: #31F5A6;
  --blue-raspberry: #38B6FF;
  --lemon-orbit: #FFE45E;
  --grape-night: #24113F;
  --fizzy-lilac: #CBA6FF;
  --serif-display: "Cormorant Garamond", Georgia, serif;
  --serif-body: "Libre Baskerville", Georgia, serif;
  --accent-sans: "Space Grotesk", Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--grape-night);
  background:
    radial-gradient(circle at 72% 12%, rgba(255, 228, 94, .34) 0 9rem, transparent 9.2rem),
    radial-gradient(circle at 8% 80%, rgba(203, 166, 255, .26), transparent 21rem),
    linear-gradient(135deg, #24113F 0%, #321456 52%, #1b0c31 100%);
  overflow-x: hidden;
}

.tabletop {
  position: relative;
  min-height: 390vh;
  padding: 4vw 4vw 12vw;
  isolation: isolate;
  perspective: 1100px;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .42;
  background-image:
    repeating-linear-gradient(33deg, rgba(255,244,199,.04) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(101deg, rgba(49,245,166,.03) 0 1px, transparent 1px 9px);
  mix-blend-mode: screen;
}

.moon-disk {
  position: fixed;
  right: 3vw;
  top: 4vh;
  width: clamp(140px, 18vw, 270px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--lemon-orbit);
  border: 8px solid var(--grape-night);
  box-shadow: -18px 22px 0 var(--sour-cherry), 0 0 70px rgba(255,228,94,.65);
  z-index: 1;
  transform: rotate(var(--moon-roll, -8deg));
  transition: transform .55s cubic-bezier(.2,1.5,.3,1);
}

.moon-disk span, .moon-disk::before, .moon-disk::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(36,17,63,.12);
}
.moon-disk span { width: 22%; height: 22%; left: 23%; top: 22%; }
.moon-disk::before { width: 14%; height: 14%; right: 23%; top: 46%; }
.moon-disk::after { width: 28%; height: 28%; left: 38%; bottom: 14%; }

.chapter {
  position: relative;
  min-height: 92vh;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
  margin-bottom: 9vh;
}

.chapter-label {
  align-self: start;
  grid-column: 1 / 5;
  width: max-content;
  font: 700 .78rem/1 var(--accent-sans);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--moon-milk);
  background: var(--sour-cherry);
  border: 3px solid var(--grape-night);
  padding: .7rem .95rem;
  box-shadow: 7px 7px 0 var(--electric-mint);
  transform: rotate(-3deg);
  z-index: 7;
}

.card, .note, .receipt-card, .chat-card {
  position: relative;
  border: 5px solid var(--grape-night);
  box-shadow: 14px 15px 0 rgba(36,17,63,.68), -8px -8px 0 var(--blue-raspberry);
  transform: rotate(var(--r)) rotateX(calc(var(--my) * -1deg)) rotateY(calc(var(--mx) * 1deg)) translateZ(var(--tz, 0));
  transform-style: preserve-3d;
  transition: transform .18s ease, box-shadow .18s ease;
  z-index: var(--z);
}

.tilt-card.is-near {
  --tz: 16px;
  box-shadow: 24px 26px 0 rgba(36,17,63,.78), -11px -11px 0 var(--electric-mint);
}

.wordmark-card {
  grid-column: 1 / 8;
  margin-top: 6vh;
  margin-left: -7vw;
  padding: 2.4rem 3rem 3.2rem 8vw;
  background: var(--moon-milk);
  border-radius: 1rem .2rem 2rem .5rem;
}

.wordmark-card::after, .plate-card::after, .drink-card::after {
  content: "";
  position: absolute;
  inset: 10px -14px -14px 10px;
  border: 4px solid var(--sour-cherry);
  z-index: -1;
  border-radius: inherit;
}

.stamp, .ticket-number {
  display: inline-block;
  font: 700 .72rem/1 var(--accent-sans);
  letter-spacing: .13em;
  color: var(--moon-milk);
  background: var(--grape-night);
  padding: .55rem .7rem;
  transform: rotate(2deg);
}

h1, h2, h3 { margin: 0; font-family: var(--serif-display); }

h1 {
  margin-top: .5rem;
  font-size: clamp(5.6rem, 15vw, 15rem);
  line-height: .68;
  letter-spacing: -.07em;
}

h1 em { color: var(--sour-cherry); font-weight: 500; }

h2 { font-size: clamp(2.1rem, 4vw, 4.7rem); line-height: .9; }
h3 { font-size: 2.4rem; }
p { font-family: var(--serif-body); line-height: 1.55; }

.tape {
  position: absolute;
  background: rgba(255,244,199,.66);
  border: 2px solid rgba(36,17,63,.45);
  width: 8rem;
  height: 2rem;
  transform: rotate(17deg);
  top: -1rem;
  right: 17%;
}

.bartender-note {
  grid-column: 7 / 12;
  margin-top: 18vh;
  padding: 1.25rem 1.5rem;
  background: var(--electric-mint);
  border-radius: .3rem 2.4rem .4rem 1.2rem;
}
.bartender-note p { margin: 0; font-size: 1.35rem; }
.bartender-note span, .final-note { font: 700 .75rem/1.3 var(--accent-sans); text-transform: uppercase; }

.specimen-card {
  grid-column: 8 / 12;
  margin-top: -18vh;
  padding: 1.4rem;
  min-height: 28rem;
  background: var(--fizzy-lilac);
  border-radius: 3rem .4rem 1rem .4rem;
}

.botanical {
  position: relative;
  height: 14rem;
  margin: .3rem auto 1rem;
  filter: drop-shadow(7px 5px 0 rgba(255,59,127,.8));
}
.stem, .branch { position: absolute; left: 50%; top: 16%; width: 6px; height: 75%; background: var(--grape-night); border-radius: 999px; transform: rotate(10deg); }
.leaf { position: absolute; width: 5.2rem; height: 2.5rem; background: var(--electric-mint); border: 4px solid var(--grape-night); border-radius: 90% 10% 90% 10%; }
.crescent-basil .l1 { left: 28%; top: 27%; transform: rotate(-32deg); }
.crescent-basil .l2 { left: 47%; top: 45%; transform: rotate(28deg); }
.crescent-basil .l3 { left: 26%; top: 61%; transform: rotate(-20deg); }
.bloom { position: absolute; left: 53%; top: 5%; width: 4rem; height: 4rem; border: 10px solid var(--lemon-orbit); border-left-color: transparent; border-radius: 50%; transform: rotate(-25deg); }

.sticker.loud {
  grid-column: 2 / 5;
  align-self: end;
  background: var(--sour-cherry);
  color: var(--moon-milk);
  border: 4px solid var(--grape-night);
  border-radius: 50% 45% 60% 40%;
  padding: 1.2rem;
  font: 700 1rem/1.1 var(--accent-sans);
  text-transform: uppercase;
  transform: rotate(12deg);
  box-shadow: 9px 8px 0 var(--lemon-orbit);
}
.arrow-scribble { grid-column: 5 / 8; align-self: end; color: var(--electric-mint); font: italic 2rem var(--serif-display); transform: rotate(-9deg); }

.menu .drink-card:first-of-type { grid-column: 2 / 6; margin-top: 12vh; }
.coaster { grid-column: 6 / 11; margin-top: 22vh; border-radius: 3rem; background: var(--blue-raspberry); }
.drink-card { padding: 1.6rem; background: var(--moon-milk); min-height: 22rem; }
.drink-card p { font-size: 1rem; }
.reveal-btn, .coaster-button {
  border: 4px solid var(--grape-night);
  background: var(--lemon-orbit);
  color: var(--grape-night);
  font: 700 .8rem/1 var(--accent-sans);
  text-transform: uppercase;
  padding: .8rem .95rem;
  cursor: pointer;
  box-shadow: 5px 5px 0 var(--sour-cherry);
  transform: rotate(-2deg);
}
.reveal-btn:hover, .coaster-button:hover { background: var(--electric-mint); transform: rotate(3deg) translateY(-4px); }

.receipt-card {
  grid-column: 9 / 12;
  align-self: start;
  padding: 1.2rem;
  background: repeating-linear-gradient(0deg, var(--moon-milk) 0 1.6rem, #f4e7b0 1.6rem 1.7rem);
  border-radius: .1rem;
}

.greenhouse .plate-card { grid-column: 2 / 7; margin-top: 16vh; padding: 1.5rem; background: var(--moon-milk); }
.greenhouse .acetate-card { grid-column: 6 / 11; margin-top: 8vh; padding: 2rem; background: rgba(56,182,255,.72); backdrop-filter: blur(1px); border-radius: .4rem; }
.orbital-citrus .branch { height: 70%; transform: rotate(-18deg); }
.orbital-citrus .fruit { position: absolute; width: 3.4rem; height: 3.4rem; background: var(--lemon-orbit); border: 4px solid var(--grape-night); border-radius: 50%; }
.orbital-citrus .f1 { left: 38%; top: 24%; } .orbital-citrus .f2 { left: 55%; top: 52%; }
.orbital-citrus .l1 { left: 30%; top: 47%; transform: rotate(-44deg); } .orbital-citrus .l2 { left: 52%; top: 18%; transform: rotate(24deg); }
.caption { font-style: italic; }
.label-stack { grid-column: 8 / 12; align-self: end; position: relative; min-height: 5rem; }
.label-stack span { position: absolute; font: 700 1rem/1 var(--accent-sans); text-transform: uppercase; padding: .85rem; border: 3px solid var(--grape-night); background: var(--electric-mint); transform: rotate(5deg); }
.label-stack span:last-child { left: 13px; top: 11px; color: var(--sour-cherry); background: transparent; }

.gossip .chat-card { grid-column: 2 / 6; margin-top: 14vh; background: var(--fizzy-lilac); padding: 1.7rem; border-radius: 2rem .2rem 2rem 2rem; }
.chat-card p { font: italic 2rem/1.1 var(--serif-display); margin: 0 0 .6rem; }
.crossed-card { grid-column: 6 / 11; margin-top: 25vh; background: var(--moon-milk); padding: 1.7rem; overflow: hidden; }
.crossed-card::before { content: ""; position: absolute; left: -8%; top: 45%; width: 120%; height: 12px; background: var(--sour-cherry); transform: rotate(-11deg); }
.mini-coasters { grid-column: 3 / 11; align-self: end; display: flex; gap: 1rem; flex-wrap: wrap; transform: rotate(-2deg); }

.lastcall { min-height: 80vh; }
.crescent-settle { grid-column: 3 / 10; margin-top: 17vh; padding: 2rem; background: var(--moon-milk); border-radius: 8rem 8rem 1rem 1rem; box-shadow: 18px 18px 0 var(--fizzy-lilac), -12px -12px 0 var(--sour-cherry); }
.final-note { grid-column: 8 / 12; align-self: end; background: var(--electric-mint); border: 4px solid var(--grape-night); padding: 1rem; transform: rotate(8deg); box-shadow: 8px 8px 0 var(--blue-raspberry); }

.floating-props { position: fixed; inset: 0; pointer-events: none; z-index: 20; }
.prop { position: absolute; display: block; animation: bob 5s ease-in-out infinite; }
.umbrella { left: 8%; top: 17%; color: var(--sour-cherry); font-size: 3rem; animation-delay: -.7s; }
.peel { right: 16%; top: 44%; color: var(--lemon-orbit); font-size: 4rem; animation-delay: -1.6s; }
.star { left: 72%; top: 71%; color: var(--electric-mint); font-size: 2rem; animation-delay: -2.1s; }
.pin { left: 42%; top: 11%; color: var(--blue-raspberry); font-size: 2rem; }
.olive { left: 16%; top: 66%; width: 2.2rem; height: 2.2rem; background: var(--electric-mint); border: 5px solid var(--grape-night); border-radius: 50%; box-shadow: inset 7px 0 0 var(--sour-cherry); }
.ice { width: 2.4rem; height: 2.4rem; background: rgba(56,182,255,.5); border: 3px solid var(--moon-milk); transform: rotate(18deg); }
.ice.one { left: 53%; top: 28%; } .ice.two { right: 9%; top: 78%; animation-delay: -3s; }
.receipt { right: 28%; top: 18%; background: var(--moon-milk); border: 3px solid var(--grape-night); color: var(--grape-night); padding: .6rem; font: 700 .68rem/1.1 var(--accent-sans); transform: rotate(13deg); }

.reveal-pop {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 50;
  max-width: 19rem;
  padding: 1rem 1.2rem;
  background: var(--sour-cherry);
  color: var(--moon-milk);
  border: 4px solid var(--grape-night);
  font: 700 1rem/1.25 var(--accent-sans);
  text-transform: uppercase;
  box-shadow: 10px 10px 0 var(--electric-mint);
  transform: translate(-50%, -50%) rotate(-5deg) scale(.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .22s cubic-bezier(.2,1.6,.3,1);
}
.reveal-pop.show { opacity: 1; transform: translate(-50%, -50%) rotate(3deg) scale(1); }

@keyframes bob {
  0%, 100% { translate: 0 0; rotate: -3deg; }
  50% { translate: 0 -18px; rotate: 7deg; }
}

@media (max-width: 820px) {
  .tabletop { min-height: auto; padding: 7vw 5vw 18vw; }
  .chapter { display: block; min-height: auto; margin-bottom: 5rem; }
  .wordmark-card, .bartender-note, .specimen-card, .menu .drink-card:first-of-type, .coaster, .receipt-card, .greenhouse .plate-card, .greenhouse .acetate-card, .gossip .chat-card, .crossed-card, .crescent-settle, .final-note { margin: 1.4rem 0; width: 100%; }
  .wordmark-card { margin-left: -12vw; width: 112%; padding-left: 12vw; }
  .moon-disk { opacity: .8; right: -3rem; top: 1rem; }
  .specimen-card { min-height: 24rem; }
  .mini-coasters { display: flex; }
}