:root {
  --candle-cream: #FFF1D6;
  --strawberry-milk: #F8B7C8;
  --powdered-sugar: #F9F4E8;
  --cherry-lacquer: #B5163A;
  --burnt-caramel: #8A4B2A;
  --wick-charcoal: #241815;
  --mint-wrapper: #BFE8D4;
  --faded-sepia: #C99A70;
  --angle: -10deg;
  --grain-density: 0.18;
  --candle-glow: 0 0 34px rgba(255, 241, 214, 0.72), 0 0 90px rgba(248, 183, 200, 0.28);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--wick-charcoal);
  background: var(--wick-charcoal);
  font-family: "Nunito Sans", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
}

button { font: inherit; }

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 80;
  opacity: var(--grain-density);
  background-image:
    radial-gradient(circle at 22% 33%, rgba(36, 24, 21, 0.92) 0 1px, transparent 1px),
    radial-gradient(circle at 72% 64%, rgba(138, 75, 42, 0.72) 0 1px, transparent 1.2px),
    linear-gradient(115deg, rgba(255, 241, 214, 0.18), transparent 24%, rgba(36, 24, 21, 0.14) 58%, transparent);
  background-size: 9px 9px, 13px 13px, 100% 100%;
  mix-blend-mode: multiply;
}

.paper-shutter {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--wick-charcoal);
  overflow: hidden;
  transition: opacity 0.7s ease 1.45s, visibility 0.7s ease 1.45s;
}

.paper-shutter.open { opacity: 0; visibility: hidden; }

.shutter-strip {
  position: absolute;
  width: 145vw;
  height: 34vh;
  left: -20vw;
  transform: skewY(-13deg) translateX(0);
  background: repeating-linear-gradient(90deg, var(--strawberry-milk) 0 38px, var(--candle-cream) 38px 76px, var(--mint-wrapper) 76px 114px);
  box-shadow: 0 18px 55px rgba(0, 0, 0, 0.4), inset 0 -12px 0 rgba(181, 22, 58, 0.22);
}

.strip-one { top: -4vh; }
.strip-two { top: 31vh; background-position: 26px 0; }
.strip-three { top: 66vh; background-position: 54px 0; }
.paper-shutter.open .strip-one { animation: peelLeft 1.45s cubic-bezier(.2, 1.45, .23, 1) forwards; }
.paper-shutter.open .strip-two { animation: peelRight 1.5s cubic-bezier(.2, 1.52, .22, 1) forwards; }
.paper-shutter.open .strip-three { animation: peelLeft 1.55s cubic-bezier(.2, 1.55, .24, 1) forwards; }
.shutter-title {
  position: absolute;
  right: 7vw;
  bottom: 9vh;
  font: 700 clamp(2rem, 6vw, 6rem) "Caveat", cursive;
  color: var(--candle-cream);
  transform: rotate(-9deg);
  text-shadow: 0 0 22px rgba(248, 183, 200, 0.65);
}

.story-stage { position: relative; }

.serving {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  isolation: isolate;
  padding: clamp(4rem, 7vw, 7rem) clamp(1.25rem, 5vw, 5rem);
  display: grid;
  align-items: center;
}

.serving::before {
  content: "";
  position: absolute;
  inset: -8vh -10vw;
  z-index: -3;
  transform: rotate(var(--angle));
  background: var(--powdered-sugar);
}

.serving::after {
  content: "";
  position: absolute;
  inset: auto -8vw -6vh -8vw;
  height: 20vh;
  z-index: 2;
  transform: rotate(-5deg);
  background:
    radial-gradient(ellipse at 8% 0, var(--candle-cream) 0 16px, transparent 17px),
    radial-gradient(ellipse at 19% 0, var(--candle-cream) 0 25px, transparent 26px),
    radial-gradient(ellipse at 31% 0, var(--candle-cream) 0 14px, transparent 15px),
    radial-gradient(ellipse at 48% 0, var(--candle-cream) 0 30px, transparent 31px),
    linear-gradient(var(--candle-cream), var(--candle-cream));
  background-size: 160px 70px, 190px 90px, 170px 60px, 210px 95px, 100% 34px;
  background-repeat: repeat-x;
  filter: drop-shadow(0 -12px 12px rgba(138, 75, 42, 0.13));
}

.locked {
  background:
    radial-gradient(circle at 74% 23%, rgba(255, 241, 214, 0.95), transparent 11%),
    radial-gradient(circle at 24% 72%, rgba(248, 183, 200, 0.42), transparent 20%),
    linear-gradient(135deg, var(--wick-charcoal) 0 35%, var(--burnt-caramel) 36% 45%, var(--candle-cream) 46% 100%);
  clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
}

.diagonal-bg {
  position: absolute;
  inset: -25vh -20vw;
  z-index: -1;
  transform: rotate(-13deg);
  opacity: 0.78;
}

.candy-diagonal {
  background: repeating-linear-gradient(90deg, rgba(248, 183, 200, 0.9) 0 42px, rgba(255, 241, 214, 0.72) 42px 84px, rgba(191, 232, 212, 0.62) 84px 126px);
  clip-path: polygon(0 22%, 100% 0, 88% 70%, 10% 100%);
}

.hero-counter {
  max-width: 940px;
  transform: rotate(-3deg);
  padding: clamp(1rem, 3vw, 3rem);
}

.chapter-label {
  margin: 0 0 1rem;
  color: var(--cherry-lacquer);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.78rem;
}

.wordmark,
.chapter-card h2,
.final-label h2 {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 900;
  letter-spacing: -0.055em;
  line-height: 0.88;
}

.wordmark {
  font-size: clamp(4rem, 15vw, 14rem);
  color: var(--candle-cream);
  text-shadow: var(--candle-glow), 4px 7px 0 rgba(181, 22, 58, 0.34);
}

.wordmark span { display: inline-block; animation: letterFlicker 3.2s infinite; }
.wordmark span:nth-child(2n) { color: var(--strawberry-milk); animation-delay: .18s; }
.wordmark span:nth-child(3n) { color: var(--mint-wrapper); animation-delay: .3s; }
.wordmark span:nth-child(5n) { color: var(--candle-cream); animation-delay: .5s; }

.noir-copy {
  max-width: 630px;
  font-size: clamp(1.05rem, 2vw, 1.42rem);
  color: var(--powdered-sugar);
  line-height: 1.55;
  text-shadow: 0 1px 18px rgba(36, 24, 21, 0.65);
}

.object-tab {
  border: 0;
  cursor: pointer;
  color: var(--wick-charcoal);
  background: var(--mint-wrapper);
  padding: 0.9rem 1.4rem;
  box-shadow: 10px 13px 0 rgba(36, 24, 21, 0.24);
  transform: rotate(-5deg) skewX(-8deg);
  transition: transform .45s cubic-bezier(.16, 1.55, .3, 1), box-shadow .35s;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.object-tab:hover,
.object-tab.pulled { transform: rotate(2deg) skewX(-8deg) translate(8px, -7px) scale(1.05); box-shadow: 3px 5px 0 rgba(36, 24, 21, 0.27); }

.candle-cluster { position: absolute; right: 11vw; bottom: 13vh; width: 90px; height: 160px; transform: rotate(8deg); }
.flame,
.meter-flame,
.final-flame {
  position: absolute;
  width: 28px;
  height: 44px;
  border-radius: 60% 40% 70% 30%;
  background: radial-gradient(circle at 45% 70%, var(--cherry-lacquer) 0 18%, #ffd86b 20% 48%, var(--candle-cream) 50% 100%);
  filter: blur(.2px) drop-shadow(0 0 18px rgba(255, 241, 214, 0.9));
  animation: flameWaver 1.6s infinite alternate ease-in-out;
}
.flame { top: 0; left: 34px; }
.wax { position: absolute; bottom: 0; width: 38px; background: var(--candle-cream); border-radius: 18px 18px 5px 5px; box-shadow: inset -8px 0 rgba(201, 154, 112, 0.25); }
.wax-a { height: 108px; left: 18px; }
.wax-b { height: 78px; left: 49px; background: var(--strawberry-milk); }

.receipt-note,
.hand-note {
  position: absolute;
  font: 700 clamp(1.2rem, 2.6vw, 2.2rem) "Caveat", cursive;
  color: var(--cherry-lacquer);
  background: rgba(255, 241, 214, 0.9);
  padding: .5rem 1rem;
  transform: rotate(-8deg) translateY(24px) scale(.96);
  opacity: 0;
  transition: opacity .45s, transform .55s cubic-bezier(.16, 1.65, .3, 1);
  box-shadow: 0 12px 25px rgba(36, 24, 21, 0.2);
}
.receipt-note.show,
.hand-note.show { opacity: 1; transform: rotate(-4deg) translateY(0) scale(1); }
.hero-note { left: 10vw; bottom: 8vh; }

.evidence { background: var(--candle-cream); clip-path: polygon(0 7%, 100% 0, 100% 92%, 0 100%); }
.evidence::before { background: linear-gradient(115deg, var(--powdered-sugar) 0 42%, var(--strawberry-milk) 43% 61%, var(--mint-wrapper) 62% 100%); }
.section-slash { position: absolute; inset: 6vh -16vw auto -16vw; height: 24vh; transform: rotate(-11deg); background: rgba(191, 232, 212, .88); box-shadow: 0 18px 0 rgba(181, 22, 58, .16); }
.chapter-card { position: relative; z-index: 5; max-width: 520px; padding: clamp(1.2rem, 3vw, 2.8rem); background: rgba(249, 244, 232, 0.82); box-shadow: 18px 21px 0 rgba(138, 75, 42, 0.18); border: 2px solid rgba(36, 24, 21, .12); }
.chapter-card h2 { font-size: clamp(3rem, 8vw, 8.4rem); color: var(--wick-charcoal); }
.chapter-card p:not(.chapter-label) { font-size: clamp(1rem, 1.55vw, 1.32rem); line-height: 1.55; }
.evidence-title { transform: rotate(-4deg); align-self: start; }
.collage { position: absolute; inset: 10vh 3vw 7vh 42vw; }
.snap-item { transition: transform .55s cubic-bezier(.16, 1.55, .28, 1), filter .45s; }
.snap-item:hover,
.snap-item.snapped { transform: rotate(var(--hover-rot, -6deg)) translateY(-14px) scale(1.04); filter: saturate(1.1); }
.polaroid { position: absolute; width: clamp(145px, 20vw, 260px); padding: 12px 12px 38px; background: var(--powdered-sugar); box-shadow: 0 18px 30px rgba(36, 24, 21, .24); }
.polaroid p { margin: .5rem 0 0; font-family: "Caveat", cursive; font-size: 1.35rem; }
.photo-flash { height: clamp(115px, 18vw, 220px); background: linear-gradient(135deg, rgba(255,255,255,.75), transparent 28%), radial-gradient(circle at 70% 30%, rgba(255, 241, 214, .9), transparent 22%), linear-gradient(125deg, var(--faded-sepia), var(--strawberry-milk), var(--wick-charcoal)); filter: sepia(.25) contrast(.95); }
.photo-one { left: 4%; top: 2%; transform: rotate(8deg); --hover-rot: 2deg; }
.photo-two { right: 8%; top: 19%; transform: rotate(-12deg); --hover-rot: -16deg; }
.receipt.slip { position: absolute; left: 23%; bottom: 7%; width: 230px; min-height: 250px; padding: 1.2rem; background: repeating-linear-gradient(180deg, var(--powdered-sugar) 0 22px, #efe3cf 22px 24px); transform: rotate(12deg); box-shadow: 0 15px 20px rgba(36,24,21,.17); }
.receipt span, .receipt em { display: block; margin-top: .75rem; }
.receipt em { font-family: "Caveat", cursive; color: var(--cherry-lacquer); font-size: 1.45rem; }
.wrapper { position: absolute; left: 3%; bottom: 28%; padding: 1.3rem 2rem; background: repeating-linear-gradient(45deg, var(--mint-wrapper) 0 14px, var(--candle-cream) 14px 28px); font-weight: 900; transform: rotate(-19deg); box-shadow: inset 10px 0 rgba(36, 24, 21, .1), 0 14px 18px rgba(36, 24, 21, .16); }
.matchbook-card { position: absolute; right: 0; bottom: 5%; padding: 1.4rem; color: var(--candle-cream); background: var(--cherry-lacquer); transform: rotate(8deg); font: 900 1.5rem "Fraunces", serif; box-shadow: 0 14px 22px rgba(36,24,21,.2); }
.matchbook-card span { font: 700 1.25rem "Caveat", cursive; color: var(--candle-cream); }

.pour { background: linear-gradient(140deg, var(--candle-cream) 0 30%, var(--cherry-lacquer) 31% 63%, var(--wick-charcoal) 64% 100%); color: var(--candle-cream); clip-path: polygon(0 0, 100% 9%, 100% 100%, 0 89%); }
.pour::before { background: transparent; }
.syrup-ribbon { position: absolute; height: 8vh; width: 130vw; left: -15vw; border-radius: 999px; background: linear-gradient(90deg, transparent, rgba(181, 22, 58, .9), var(--strawberry-milk), rgba(255, 241, 214, .65), transparent); filter: blur(.4px) drop-shadow(0 14px 18px rgba(36,24,21,.25)); transform-origin: center; animation: syrupStretch 5s ease-in-out infinite; }
.ribbon-a { top: 23vh; transform: rotate(-15deg); }
.ribbon-b { bottom: 22vh; transform: rotate(10deg); animation-delay: -1.2s; }
.pour-copy { margin-left: auto; margin-right: 8vw; color: var(--wick-charcoal); transform: rotate(3deg); }
.pour-board { position: absolute; left: 7vw; bottom: 14vh; display: flex; gap: .2rem; transform: rotate(-9deg); font-family: "Fraunces", serif; font-size: clamp(4rem, 13vw, 11rem); color: var(--candle-cream); text-shadow: 0 0 25px rgba(255,241,214,.72), 8px 9px 0 rgba(36,24,21,.24); }
.menu-letter { animation: menuBlink 2.7s infinite; }
.menu-letter:nth-child(2) { animation-delay: .2s; color: var(--strawberry-milk); }
.menu-letter:nth-child(4) { animation-delay: .42s; color: var(--mint-wrapper); }
.cherry-dot { width: .45em; height: .45em; align-self: flex-end; margin-bottom: .18em; border-radius: 50%; background: var(--cherry-lacquer); box-shadow: 0 0 20px var(--strawberry-milk); }
.wrapper-tab { position: absolute; right: 15vw; bottom: 16vh; background: var(--candle-cream); }
.hand-note { right: 7vw; bottom: 29vh; }

.mirror { background: linear-gradient(115deg, var(--wick-charcoal), var(--burnt-caramel) 36%, var(--strawberry-milk) 37% 52%, var(--powdered-sugar) 53%); clip-path: polygon(0 8%, 100% 0, 100% 93%, 0 100%); }
.mirror-field { position: absolute; inset: 8vh 42vw 9vh 4vw; }
.mirror-panel { position: absolute; width: clamp(190px, 29vw, 420px); height: clamp(180px, 36vh, 340px); background: linear-gradient(135deg, rgba(255,255,255,.55), rgba(191,232,212,.2) 35%, rgba(36,24,21,.55)), radial-gradient(circle at 65% 25%, rgba(255,241,214,.8), transparent 24%); border: 10px solid rgba(255,241,214,.62); box-shadow: 0 25px 45px rgba(0,0,0,.28), inset 0 0 50px rgba(255,255,255,.12); overflow: hidden; }
.mirror-panel span { position: absolute; left: 14%; top: 42%; font: 900 clamp(2rem, 5vw, 5rem) "Fraunces", serif; color: rgba(255,241,214,.48); transform: skewX(-17deg); white-space: nowrap; text-shadow: 0 0 17px rgba(248,183,200,.5); }
.panel-one { left: 0; top: 4%; transform: rotate(-11deg); }
.panel-two { right: 0; top: 23%; transform: rotate(10deg); }
.panel-three { left: 22%; bottom: 0; transform: rotate(-4deg); }
.mirror-copy { margin-left: auto; transform: rotate(-3deg); }
.photo-booth-strip { position: absolute; right: 6vw; top: 10vh; width: 110px; padding: 10px; background: var(--powdered-sugar); transform: rotate(14deg); box-shadow: 0 18px 22px rgba(36,24,21,.23); }
.photo-booth-strip span { display: block; height: 94px; margin-bottom: 10px; background: linear-gradient(135deg, var(--faded-sepia), var(--wick-charcoal)); opacity: .7; }

.final { background: radial-gradient(circle at 60% 52%, rgba(255,241,214,.3), transparent 22%), linear-gradient(132deg, var(--wick-charcoal) 0 45%, var(--burnt-caramel) 46% 49%, var(--candle-cream) 50% 54%, var(--wick-charcoal) 55%); color: var(--candle-cream); min-height: 105vh; }
.final::after { display: none; }
.last-line { position: absolute; left: -12vw; right: -12vw; top: 51%; height: 20px; background: linear-gradient(90deg, transparent, var(--strawberry-milk), var(--candle-cream), var(--cherry-lacquer), transparent); transform: rotate(-9deg); box-shadow: 0 0 30px rgba(255,241,214,.6); }
.final-label { position: relative; max-width: 850px; margin: auto; text-align: left; transform: rotate(-4deg); }
.final-label h2 { font-size: clamp(4rem, 16vw, 13rem); text-shadow: var(--candle-glow), 7px 9px 0 rgba(181,22,58,.4); }
.final-label p:last-child { max-width: 610px; font-size: clamp(1rem, 1.8vw, 1.4rem); line-height: 1.55; }
.snuffer { position: absolute; right: 10vw; bottom: 12vh; color: var(--wick-charcoal); background: var(--mint-wrapper); padding: 1rem 1.5rem; transform: rotate(7deg); font-weight: 900; cursor: pointer; box-shadow: 10px 10px 0 rgba(248,183,200,.3); }
.final-flame { right: 20vw; top: 26vh; }
.final.snuffed .final-flame { opacity: .15; transform: scale(.55) rotate(-12deg); filter: blur(2px); }
.final.snuffed .last-line { opacity: .35; }

.candle-meter { position: fixed; left: 1rem; top: 50%; width: 14px; height: 36vh; z-index: 90; transform: translateY(-50%); background: rgba(255,241,214,.25); border-radius: 999px; box-shadow: inset 0 0 0 2px rgba(255,241,214,.2); }
.meter-wick { position: absolute; left: 5px; bottom: 0; width: 4px; height: 100%; background: var(--wick-charcoal); border-radius: 999px; transform-origin: bottom; }
.meter-flame { left: -7px; top: -38px; width: 27px; height: 38px; }

@keyframes peelLeft { 0% { transform: skewY(-13deg) translateX(0) scaleX(1); } 58% { transform: skewY(-13deg) translateX(-92vw) scaleX(1.12); } 78% { transform: skewY(-13deg) translateX(-78vw) scaleX(.94); } 100% { transform: skewY(-13deg) translateX(-120vw) scaleX(1); } }
@keyframes peelRight { 0% { transform: skewY(-13deg) translateX(0) scaleX(1); } 58% { transform: skewY(-13deg) translateX(92vw) scaleX(1.13); } 78% { transform: skewY(-13deg) translateX(77vw) scaleX(.93); } 100% { transform: skewY(-13deg) translateX(120vw) scaleX(1); } }
@keyframes letterFlicker { 0%, 100% { opacity: 1; transform: translateY(0); } 48% { opacity: .9; } 52% { opacity: .64; transform: translateY(2px); } 56% { opacity: 1; } }
@keyframes flameWaver { from { transform: translateX(-1px) skewX(-4deg) scaleY(.94); } to { transform: translateX(3px) skewX(5deg) scaleY(1.08); } }
@keyframes syrupStretch { 0%, 100% { width: 126vw; border-radius: 999px 45% 999px 60%; } 50% { width: 145vw; border-radius: 45% 999px 52% 999px; } }
@keyframes menuBlink { 0%, 100% { opacity: 1; transform: translateY(0); } 44% { opacity: .9; } 50% { opacity: .42; transform: translateY(5px); } 58% { opacity: 1; } }

@media (max-width: 800px) {
  .collage { position: relative; inset: auto; min-height: 72vh; margin-top: 2rem; }
  .evidence, .mirror { display: block; }
  .mirror-field { position: relative; inset: auto; height: 70vh; margin-top: 4rem; }
  .pour-copy, .mirror-copy { margin: 0; }
  .pour-board { left: 6vw; bottom: 25vh; }
  .photo-booth-strip { display: none; }
  .wordmark { font-size: clamp(3.2rem, 16vw, 6rem); }
  .candle-meter { display: none; }
}