:root {
  --glint: #FFE9F4;
  --cherry: #2A0718;
  --velvet: #5A1630;
  --cream: #FFF1D6;
  --butter: #FFDFA3;
  --rose: #C94364;
  --coral: #FF8A7A;
  --plum: #32101F;
  --fredoka: "Fredoka", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --nunito: "Nunito Sans", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --serif: "DM Serif Display", Georgia, serif;
  --shadow-soft: 0 28px 70px rgba(42, 7, 24, .28);
  --bevel: inset 10px 14px 24px rgba(255, 241, 214, .26), inset -18px -22px 32px rgba(42, 7, 24, .28), 0 24px 46px rgba(42, 7, 24, .24);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

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

button, a { font: inherit; }

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  opacity: .26;
  background-image: radial-gradient(rgba(90, 22, 48, .14) 1px, transparent 1px), radial-gradient(rgba(255, 223, 163, .2) 1px, transparent 1px);
  background-size: 18px 18px, 29px 29px;
  mix-blend-mode: multiply;
}

.cursor-glint {
  position: fixed;
  width: 180px;
  height: 16px;
  border-radius: 999px;
  pointer-events: none;
  z-index: 40;
  opacity: .45;
  transform: translate3d(-50%, -50%, 0) rotate(-18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 233, 244, .92), rgba(255, 138, 122, .45), transparent);
  filter: blur(1px);
}

.object-nav {
  position: fixed;
  top: 22px;
  left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  z-index: 20;
  display: flex;
  gap: 8px;
  padding: 9px;
  border-radius: 999px;
  background: rgba(255, 241, 214, .72);
  box-shadow: 0 14px 42px rgba(42, 7, 24, .16), inset 0 0 0 1px rgba(255, 233, 244, .72);
  backdrop-filter: blur(14px);
}

.object-nav a {
  color: var(--velvet);
  text-decoration: none;
  padding: 9px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 850;
  letter-spacing: .03em;
  transition: transform .25s ease, background .25s ease, color .25s ease;
}

.object-nav a:hover, .object-nav a.is-active {
  background: var(--rose);
  color: var(--cream);
  transform: translateY(-2px) scale(1.04);
}

.review-theater { position: relative; }

.act {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 110px 7vw 70px;
  isolation: isolate;
}

.diagonal-field {
  position: absolute;
  inset: -10vh -8vw;
  z-index: -2;
  transform: rotate(-3deg) scale(1.06);
  box-shadow: var(--shadow-soft);
}

.curtain-field {
  background: radial-gradient(circle at 25% 22%, rgba(255, 138, 122, .5), transparent 26%), linear-gradient(135deg, var(--velvet), var(--cherry) 72%);
  clip-path: polygon(0 0, 72% 0, 49% 100%, 0 100%);
  animation: curtainSwell 1.3s cubic-bezier(.2,.9,.18,1) both;
}

.cream-slip {
  background: linear-gradient(135deg, var(--cream), var(--butter));
  clip-path: polygon(22% 0, 100% 0, 100% 86%, 0 100%, 0 21%);
}

.burgundy-slip {
  background: radial-gradient(circle at 76% 24%, rgba(255, 233, 244, .24), transparent 24%), linear-gradient(140deg, var(--cherry), var(--velvet));
  clip-path: polygon(0 8%, 100% 0, 86% 100%, 0 92%);
}

.coral-slip {
  background: linear-gradient(125deg, var(--coral), var(--rose) 52%, var(--velvet));
  clip-path: polygon(0 0, 100% 14%, 100% 100%, 28% 88%, 0 100%);
}

.final-slip {
  background: linear-gradient(138deg, var(--cream) 0 44%, var(--velvet) 44% 100%);
  clip-path: polygon(0 10%, 100% 0, 100% 92%, 0 100%);
}

.hero-copy {
  width: min(980px, 92vw);
  transform: rotate(-2deg);
  color: var(--cream);
  text-shadow: 0 14px 34px rgba(42, 7, 24, .4);
}

.kicker, .small-label, .ribbon {
  text-transform: uppercase;
  letter-spacing: .16em;
  font-weight: 950;
  font-size: 13px;
}

.inflated-title {
  margin: 8px 0 18px;
  font-family: var(--fredoka);
  font-size: clamp(64px, 15vw, 184px);
  line-height: .82;
  letter-spacing: -.07em;
  color: var(--glint);
  filter: drop-shadow(0 20px 0 rgba(201, 67, 100, .42)) drop-shadow(0 36px 26px rgba(42, 7, 24, .4));
  animation: inflateLetters 1s .28s cubic-bezier(.15,1.3,.35,1) both;
}

.chapter-line {
  max-width: 590px;
  font-size: clamp(18px, 2vw, 26px);
  line-height: 1.35;
  color: var(--butter);
}

.flare {
  position: absolute;
  height: 20px;
  width: min(760px, 78vw);
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, var(--glint), rgba(255, 138, 122, .7), transparent);
  filter: blur(.5px);
  transform: rotate(-16deg);
  opacity: .88;
}

.title-flare {
  top: 42%;
  left: -30vw;
  animation: skimTitle 4.8s 1s ease-in-out infinite;
}

.charm-cloud { position: absolute; inset: 0; pointer-events: none; }

.charm, .specimen, .orbit-piece, .memory-stamp, .flip-tag {
  border: 0;
  cursor: pointer;
  pointer-events: auto;
  transition: transform .22s ease, filter .22s ease, box-shadow .22s ease;
}

.charm {
  position: absolute;
  display: grid;
  place-items: center;
  color: var(--cream);
  background: var(--rose);
  box-shadow: var(--bevel);
  animation: bob 5.6s ease-in-out infinite;
}

.charm:hover, .specimen:hover, .orbit-piece:hover { filter: saturate(1.15) brightness(1.04); }

.charm-star { right: 13vw; top: 24vh; width: 118px; height: 118px; border-radius: 38% 46% 42% 50%; font-size: 56px; color: var(--butter); }
.charm-check { right: 23vw; bottom: 16vh; width: 106px; height: 82px; border-radius: 999px; font-size: 48px; background: var(--coral); animation-delay: -.8s; }
.charm-quote { left: 8vw; bottom: 14vh; width: 92px; height: 110px; border-radius: 46% 38% 50% 42%; font-family: var(--serif); font-size: 74px; background: var(--butter); color: var(--velvet); animation-delay: -1.6s; }
.charm-lens { right: 5vw; top: 54vh; width: 86px; height: 86px; border-radius: 50%; background: radial-gradient(circle at 36% 32%, var(--glint), rgba(255, 233, 244, .35) 28%, rgba(201, 67, 100, .65) 52%, var(--velvet) 72%); }
.charm-lens::after { content: ""; position: absolute; width: 56px; height: 15px; border-radius: 999px; background: var(--velvet); right: -38px; bottom: -10px; transform: rotate(42deg); }

.plaque, .final-card, .evidence-table, .mood-verdict {
  border-radius: 34px;
  padding: clamp(28px, 5vw, 56px);
  box-shadow: var(--shadow-soft), inset 0 1px rgba(255, 233, 244, .7);
}

.plaque {
  background: rgba(255, 241, 214, .93);
  max-width: 620px;
  transform: rotate(-5deg);
}

h2 {
  margin: 8px 0 14px;
  font-family: var(--fredoka);
  font-size: clamp(42px, 7vw, 96px);
  line-height: .9;
  letter-spacing: -.045em;
}

p { font-size: clamp(16px, 1.55vw, 21px); line-height: 1.55; }

.ribbon-one {
  position: absolute;
  top: 20vh;
  left: 7vw;
  padding: 15px 30px;
  color: var(--cream);
  background: var(--rose);
  clip-path: polygon(0 0, 91% 0, 100% 50%, 91% 100%, 0 100%, 7% 50%);
  transform: rotate(-12deg);
  box-shadow: var(--shadow-soft);
}

.left-stage { justify-self: start; width: min(670px, 92vw); }

.flip-tag {
  margin-left: 8vw;
  margin-top: 22px;
  padding: 18px 28px;
  border-radius: 999px;
  color: var(--cream);
  background: var(--velvet);
  box-shadow: var(--bevel);
  font-weight: 950;
}

.flip-tag.is-flipped { background: var(--coral); color: var(--cherry); transform: rotate(6deg) scale(1.08); }

.envelope-prop {
  position: absolute;
  right: 8vw;
  bottom: 12vh;
  width: min(360px, 38vw);
  height: 230px;
  border-radius: 30px;
  background: linear-gradient(145deg, var(--butter), var(--cream));
  box-shadow: var(--shadow-soft), inset -20px -20px 38px rgba(201, 67, 100, .18);
  transform: rotate(9deg);
}

.envelope-prop::before { content: ""; position: absolute; inset: 0; clip-path: polygon(0 0, 50% 62%, 100% 0, 100% 100%, 0 100%); background: rgba(255, 138, 122, .16); border-radius: inherit; }

.stamp-button {
  position: absolute;
  right: 28px;
  top: 28px;
  border-radius: 50%;
  width: 98px;
  height: 98px;
  display: grid;
  place-items: center;
  text-align: center;
  font-weight: 950;
  color: var(--cream);
  background: var(--rose);
  box-shadow: var(--bevel);
}

.stamp-button.is-pressed, .memory-stamp.is-pressed, .specimen.is-pressed { transform: scale(.92) rotate(-2deg); filter: brightness(.95) saturate(1.2); }

.mini-dots::before { content: "• • • • • •"; position: absolute; left: 24px; bottom: 22px; color: var(--rose); letter-spacing: .35em; font-weight: 950; }

.act-evidence { color: var(--cream); }
.evidence-table { justify-self: start; width: min(760px, 92vw); background: rgba(90, 22, 48, .64); transform: rotate(3deg); }
.serif-mark { font-family: var(--serif); color: var(--butter); font-size: clamp(26px, 4vw, 46px); margin: 0; }
.specimen-row { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 28px; }
.specimen { min-width: 145px; min-height: 116px; color: var(--cream); background: var(--rose); box-shadow: var(--bevel); font-weight: 950; }
.stamp-circle { border-radius: 50%; }
.capsule-bar { border-radius: 999px; background: var(--coral); color: var(--cherry); }
.diamond-fan { border-radius: 26px; transform: rotate(9deg); background: var(--butter); color: var(--velvet); }
.pin-note { position: absolute; max-width: 260px; padding: 20px 24px; border-radius: 24px; color: var(--plum); background: var(--cream); box-shadow: var(--shadow-soft); font-weight: 850; }
.note-a { right: 12vw; top: 24vh; transform: rotate(-8deg); }
.note-b { right: 20vw; bottom: 17vh; transform: rotate(7deg); }

.mood-verdict { justify-self: end; width: min(650px, 92vw); background: rgba(255, 241, 214, .88); transform: rotate(4deg); }
.mood-orbit { position: absolute; left: 8vw; top: 22vh; width: 40vw; height: 58vh; min-width: 330px; }
.orbit-piece { position: absolute; box-shadow: var(--bevel); }
.rounded-triangle { width: 160px; height: 145px; background: var(--butter); clip-path: polygon(50% 0, 100% 86%, 0 100%); border-radius: 30px; left: 6%; top: 7%; }
.bevel-circle { width: 142px; height: 142px; border-radius: 50%; background: var(--velvet); right: 16%; top: 0; }
.capsule-fat { width: 230px; height: 104px; border-radius: 999px; background: var(--cream); left: 20%; bottom: 18%; }
.tiny-gavel { width: 165px; height: 78px; border-radius: 28px; background: var(--rose); right: 4%; bottom: 8%; transform: rotate(-24deg); }
.tiny-gavel::after { content: ""; position: absolute; width: 120px; height: 24px; border-radius: 999px; background: var(--cherry); right: -72px; top: 30px; }

.final-card { justify-self: start; max-width: 660px; background: var(--cream); transform: rotate(-4deg); }
.memory-stamp { margin-top: 14px; padding: 22px 30px; border-radius: 999px; color: var(--cream); background: var(--rose); box-shadow: var(--bevel); font-weight: 950; text-transform: uppercase; letter-spacing: .08em; }
.stamp-shadow { position: absolute; right: 10vw; bottom: 12vh; width: 290px; height: 290px; border: 16px solid rgba(255, 233, 244, .78); color: rgba(255, 233, 244, .8); border-radius: 50%; display: grid; place-items: center; text-align: center; font-family: var(--fredoka); font-size: 48px; line-height: .9; transform: rotate(14deg) scale(.75); opacity: 0; }
.stamp-shadow.is-visible { animation: stampReveal .7s cubic-bezier(.1,1.3,.3,1) both; }
.floating-punctuation { position: absolute; right: 8vw; top: 18vh; color: var(--butter); font-family: var(--serif); font-size: clamp(42px, 8vw, 118px); transform: rotate(-9deg); opacity: .72; }

@keyframes curtainSwell { from { transform: rotate(-3deg) scale(.78) translateX(-18vw); border-radius: 40%; } to { transform: rotate(-3deg) scale(1.06); border-radius: 0; } }
@keyframes inflateLetters { from { transform: scale(.78); opacity: 0; letter-spacing: -.12em; } to { transform: scale(1); opacity: 1; letter-spacing: -.07em; } }
@keyframes skimTitle { 0%, 22% { left: -40vw; opacity: 0; } 35%, 60% { opacity: .92; } 78%, 100% { left: 76vw; opacity: 0; } }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-18px) rotate(5deg); } }
@keyframes stampReveal { 0% { opacity: 0; transform: rotate(28deg) scale(1.35); filter: blur(6px); } 68% { opacity: .95; transform: rotate(11deg) scale(.7); filter: blur(0); } 100% { opacity: .82; transform: rotate(14deg) scale(.75); } }

@media (max-width: 820px) {
  .object-nav { width: calc(100vw - 20px); overflow-x: auto; justify-content: flex-start; }
  .charm-star { right: 6vw; top: 18vh; }
  .charm-check { right: 8vw; bottom: 7vh; }
  .charm-quote { left: 4vw; bottom: 8vh; }
  .charm-lens, .envelope-prop, .pin-note, .stamp-shadow { display: none; }
  .mood-orbit { position: relative; left: auto; top: auto; width: 90vw; height: 330px; }
  .mood-verdict, .evidence-table, .plaque, .final-card { transform: rotate(0deg); }
}