:root {
  /* Typography proof: IBM Plex Mono for case numbers; Space Grotesk for evidence labels; Grotesk* Interrogation* */
  --lupine-violet: #6C4DFF;
  --delphinium-blue: #3B73D9;
  --pollen-yellow: #F5D75E;
  --pressed-cream: #F8F0D8;
  --leaf-green: #2F6F52;
  --mask-navy: #12172B;
  --glove-red: #C9394F;
  --vellum-lavender: #D9C9FF;
  --petal-hue: #6C4DFF;
  --sunlight-angle: 18deg;
  --paper-shadow: 18px 28px 55px rgba(18, 23, 43, .20);
  --clue-color: #C9394F;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--mask-navy);
  background:
    radial-gradient(circle at 20% 10%, rgba(245, 215, 94, .30), transparent 28rem),
    radial-gradient(circle at 85% 35%, rgba(217, 201, 255, .70), transparent 34rem),
    linear-gradient(115deg, var(--pressed-cream), #fff9e9 50%, var(--vellum-lavender));
  font-family: 'Newsreader', Georgia, serif;
  overflow-x: hidden;
}

.paper-grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 20;
  opacity: .35;
  background-image:
    radial-gradient(rgba(18, 23, 43, .13) 1px, transparent 1px),
    radial-gradient(rgba(47, 111, 82, .10) .8px, transparent .8px);
  background-size: 22px 26px, 13px 17px;
  mix-blend-mode: multiply;
}

.evidence-tags {
  position: fixed;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  z-index: 30;
  display: grid;
  gap: .65rem;
}

.tag {
  width: 5.8rem;
  padding: .45rem .55rem .5rem;
  text-decoration: none;
  color: var(--mask-navy);
  background: rgba(248, 240, 216, .82);
  border: 1px solid rgba(18, 23, 43, .28);
  border-left: .45rem solid var(--pollen-yellow);
  box-shadow: 3px 6px 0 rgba(18, 23, 43, .10);
  font: 700 .68rem/1 'Space Grotesk', sans-serif;
  letter-spacing: .06em;
  text-transform: uppercase;
  transform: rotate(-2deg);
  transition: transform .35s ease, background .35s ease, border-color .35s ease;
}

.tag:nth-child(even) { transform: rotate(3deg); }
.tag span { display: block; font-family: 'IBM Plex Mono', monospace; color: var(--delphinium-blue); margin-bottom: .18rem; }
.tag.active { background: var(--pollen-yellow); border-color: var(--glove-red); transform: translateX(-.55rem) rotate(-5deg); }

.scene {
  min-height: 100vh;
  padding: clamp(1.3rem, 3vw, 3rem) clamp(1rem, 5vw, 5rem);
  display: grid;
  place-items: center;
  position: relative;
}

.slanted-board {
  width: min(112rem, 94vw);
  min-height: 88vh;
  position: relative;
  overflow: hidden;
  transform: rotate(-1.3deg);
  background:
    linear-gradient(var(--sunlight-angle), rgba(245, 215, 94, .18), transparent 45%),
    repeating-linear-gradient(90deg, rgba(18, 23, 43, .035) 0 1px, transparent 1px 8.33%),
    var(--pressed-cream);
  border: 1px solid rgba(18, 23, 43, .18);
  border-radius: 1.2rem;
  box-shadow: var(--paper-shadow);
}

.scene:nth-child(even) .slanted-board { transform: rotate(1.15deg); }

.case-number, .chapter, .specimen-label, .caption-strip, .calling-card, .specimen-tape, .checker-stamp {
  font-family: 'Space Grotesk', sans-serif;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.case-number {
  position: absolute;
  top: 1.3rem;
  left: 1.6rem;
  font: 500 .72rem/1 'IBM Plex Mono', monospace;
  color: rgba(18, 23, 43, .62);
}

.title-lockup {
  position: absolute;
  left: 8%;
  top: 18%;
  z-index: 4;
  max-width: 58rem;
}

.chapter {
  margin: 0 0 .7rem;
  font-size: clamp(.72rem, 1vw, .92rem);
  color: var(--leaf-green);
  font-weight: 700;
}

h1, h2 {
  font-family: 'Fraunces', serif;
  font-weight: 850;
  font-variation-settings: 'SOFT' 90, 'WONK' 1;
  letter-spacing: -.055em;
  margin: 0;
}

h1 {
  font-size: clamp(5rem, 15vw, 15.8rem);
  line-height: .78;
  color: var(--mask-navy);
  text-shadow: .06em .06em 0 rgba(108, 77, 255, .16);
}

h1 span { color: var(--glove-red); }
h2 { font-size: clamp(2.4rem, 7vw, 7.4rem); line-height: .88; }

.subtitle {
  margin: 1.2rem 0 0 12vw;
  font-size: clamp(1.45rem, 3vw, 3rem);
  color: var(--delphinium-blue);
  opacity: 0;
  transform: translateY(-1rem) rotate(-1deg);
  transition: opacity .8s ease, transform .8s ease;
}

body.flap-open .subtitle { opacity: 1; transform: translateY(0) rotate(-1deg); }

.vellum-flap {
  position: absolute;
  z-index: 10;
  top: 14%;
  left: 6%;
  width: min(44rem, 72vw);
  height: 17rem;
  border: 1px solid rgba(108, 77, 255, .26);
  background: linear-gradient(145deg, rgba(217, 201, 255, .78), rgba(248, 240, 216, .46));
  backdrop-filter: blur(2px);
  box-shadow: 0 20px 50px rgba(18, 23, 43, .14);
  transform-origin: top left;
  transform: rotate(-5deg);
  cursor: pointer;
  font: 700 .78rem 'Space Grotesk', sans-serif;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--mask-navy);
  transition: transform 1s cubic-bezier(.2,.8,.15,1), opacity .8s ease;
}

body.flap-open .vellum-flap { transform: translate(-9rem, -5rem) rotate(-26deg) skewY(8deg); opacity: .26; pointer-events: none; }

.navy-mask, .giant-mask {
  background: var(--mask-navy);
  clip-path: polygon(5% 40%, 25% 20%, 43% 34%, 58% 18%, 78% 23%, 96% 45%, 80% 67%, 58% 59%, 43% 72%, 20% 65%);
}

.navy-mask {
  position: absolute;
  width: 18rem;
  height: 7.2rem;
  right: 5%;
  top: 34%;
  transform: rotate(-9deg);
  box-shadow: 0 1.2rem 0 rgba(18, 23, 43, .12);
  animation: maskDrift 8s ease-in-out infinite;
}

.navy-mask::before, .navy-mask::after, .giant-mask::before, .giant-mask::after {
  content: '';
  position: absolute;
  top: 37%;
  width: 18%;
  height: 22%;
  border-radius: 50%;
  background: var(--pressed-cream);
}
.navy-mask::before, .giant-mask::before { left: 28%; }
.navy-mask::after, .giant-mask::after { right: 25%; }

.lupine {
  position: absolute;
  width: 5rem;
  height: 44rem;
  z-index: 5;
  transform-origin: bottom center;
}

.lupine::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 7%;
  bottom: 0;
  width: .42rem;
  border-radius: 1rem;
  background: linear-gradient(var(--leaf-green), #224c3c);
  transform: translateX(-50%);
}

.stalk-one { right: 21%; top: 2%; transform: rotate(32deg); }
.stalk-two { right: 10%; bottom: -12%; transform: rotate(-19deg) scale(1.05); }
.stalk-three { left: 9%; bottom: -10%; transform: rotate(24deg) scale(.92); }

.lupine i {
  --side: calc((var(--i) % 2) * 2 - 1);
  position: absolute;
  left: calc(50% + (var(--side) * 1.15rem));
  top: calc(1.1rem + var(--i) * 2.35rem);
  width: 3rem;
  height: 1.55rem;
  display: grid;
  place-items: center;
  border-radius: 70% 20% 70% 20%;
  background: linear-gradient(135deg, var(--petal-hue), var(--delphinium-blue) 58%, var(--vellum-lavender));
  color: var(--pressed-cream);
  font: 700 .44rem 'Space Grotesk', sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
  box-shadow: inset .2rem .2rem .4rem rgba(255,255,255,.22), .2rem .3rem .6rem rgba(18, 23, 43, .16);
  transform-origin: calc(50% - var(--side) * 1.7rem) center;
  transform: translateX(-50%) rotate(calc(var(--side) * 28deg));
  animation: petalHinge 4.5s ease-in-out infinite;
  animation-delay: calc(var(--i) * -.22s);
}

.caption-strip, .specimen-label, .glassine, .fold-card, .final-envelope, .closing-note, .interview-title {
  position: absolute;
  background: rgba(248, 240, 216, .86);
  box-shadow: 0 14px 30px rgba(18, 23, 43, .14);
  border: 1px solid rgba(18, 23, 43, .18);
}

.caption-strip { left: 10%; bottom: 15%; padding: .8rem 1rem; transform: rotate(4deg); color: var(--glove-red); font-weight: 700; }
.day-slip { position: absolute; z-index: 6; padding: .55rem .8rem; background: var(--pollen-yellow); color: var(--mask-navy); font: 500 .8rem 'IBM Plex Mono', monospace; box-shadow: .35rem .45rem 0 rgba(18, 23, 43, .13); transition: transform .7s ease; }
.slip-a { right: 14%; bottom: 20%; transform: rotate(8deg); }
.slip-b { left: 32%; top: 21%; transform: rotate(-10deg); }
.slip-c { right: 17%; bottom: 23%; transform: rotate(13deg); }
.slip-d { right: 45%; bottom: 12%; transform: rotate(-4deg); }
.current .day-slip { transform: translateY(-.8rem) rotate(0deg); }

.clue-strings { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .88; }
.clue-strings path { fill: none; stroke: var(--clue-color); stroke-width: .24; stroke-dasharray: 130; stroke-dashoffset: 130; transition: stroke-dashoffset 1.5s ease; }
.current .clue-strings path { stroke-dashoffset: 0; }
.left-label { top: 14%; left: 8%; width: 19rem; padding: 1rem; transform: rotate(-4deg); }
.left-label b { display: block; margin-bottom: .5rem; color: var(--delphinium-blue); }
.left-label span { display: block; font: 500 .62rem 'IBM Plex Mono', monospace; letter-spacing: .08em; }

.blue-glove { position: absolute; left: 36%; top: 28%; width: 25rem; height: 17rem; transform: rotate(-15deg); }
.blue-glove span { position: absolute; bottom: 6.5rem; width: 3.9rem; height: 11rem; background: var(--delphinium-blue); border-radius: 2rem 2rem .8rem .8rem; box-shadow: inset .8rem .2rem 0 rgba(217,201,255,.25); }
.blue-glove span:nth-child(1){ left: 2rem; transform: rotate(-19deg); }
.blue-glove span:nth-child(2){ left: 6rem; height: 12.5rem; }
.blue-glove span:nth-child(3){ left: 10rem; height: 12rem; }
.blue-glove span:nth-child(4){ left: 14rem; height: 10rem; transform: rotate(14deg); }
.blue-glove em { position: absolute; left: 2.4rem; bottom: 0; width: 16rem; height: 8rem; background: var(--delphinium-blue); border-radius: 45% 35% 35% 45%; }
.pocket { right: 20%; bottom: 15%; width: 25rem; padding: 2rem; background: rgba(217, 201, 255, .45); transform: rotate(5deg); }
.pocket p, .fold-card p, .final-envelope p, .closing-note p { margin: 0; font-size: clamp(1.45rem, 2.5vw, 2.4rem); }
.pocket small, .final-envelope small { display: block; margin-top: .8rem; font: 500 .72rem 'Space Grotesk', sans-serif; text-transform: uppercase; letter-spacing: .12em; }

.giant-mask { position: absolute; width: 66vw; height: 34vw; left: 20%; top: 18%; opacity: .94; animation: maskDrift 10s ease-in-out infinite reverse; }
.fold-card { left: 7%; bottom: 10%; width: min(45rem, 68vw); padding: 2rem; transform-origin: left center; transform: perspective(900px) rotateY(8deg) rotate(-3deg); }
.fold-card p:not(.chapter) { font-size: 1.45rem; line-height: 1.25; margin-top: 1rem; max-width: 33rem; }
.wax-seal { position: absolute; right: 14%; top: 17%; width: 7rem; height: 7rem; display: grid; place-items: center; border-radius: 50%; background: var(--glove-red); color: var(--pressed-cream); font: 850 4rem 'Fraunces', serif; box-shadow: 0 .7rem 0 rgba(18, 23, 43, .18); }
.calling-card { position: absolute; right: 10%; bottom: 15%; padding: 1rem 1.4rem; border: 1px solid var(--mask-navy); background: var(--pressed-cream); transform: rotate(8deg); }

.interview-title { left: 8%; top: 13%; max-width: 42rem; padding: 1.5rem; transform: rotate(-2deg); }
.petal-board { position: absolute; right: 8%; top: 17%; width: min(47rem, 58vw); height: 33rem; }
.petal-card { position: absolute; width: 15rem; height: 10rem; border: 0; border-radius: 65% 22% 65% 22%; background: linear-gradient(135deg, var(--lupine-violet), var(--delphinium-blue)); color: var(--pressed-cream); box-shadow: 0 20px 35px rgba(18, 23, 43, .20); transform-origin: 20% 80%; cursor: pointer; transition: transform .6s cubic-bezier(.2,.8,.15,1), filter .35s ease; }
.petal-card:nth-child(1){ left: 0; top: 0; transform: rotate(-18deg); }
.petal-card:nth-child(2){ right: 5%; top: 18%; transform: rotate(12deg); }
.petal-card:nth-child(3){ left: 16%; bottom: 8%; transform: rotate(28deg); }
.petal-card:nth-child(4){ right: 0; bottom: 0; transform: rotate(-8deg); background: linear-gradient(135deg, var(--pollen-yellow), var(--vellum-lavender)); color: var(--mask-navy); }
.petal-card.open { transform: rotateY(48deg) rotate(-2deg) translateY(-1rem); filter: saturate(1.25); }
.petal-card span { display: block; font: 700 .75rem 'IBM Plex Mono', monospace; letter-spacing: .12em; text-transform: uppercase; }
.petal-card b { font: 850 2rem 'Fraunces', serif; }
.specimen-tape { left: 21%; bottom: 18%; padding: .6rem 1rem; background: rgba(245, 215, 94, .65); transform: rotate(10deg); font-size: .65rem; }
.checker-stamp { position: absolute; left: 9%; bottom: 9%; padding: .45rem .7rem; color: rgba(18, 23, 43, .55); border: 1px dotted rgba(18, 23, 43, .28); background: rgba(248, 240, 216, .55); font-size: .58rem; transform: rotate(-7deg); }
.magnifier { position: absolute; left: 37%; bottom: 24%; width: 8rem; height: 8rem; display: grid; place-items: center; border: .55rem solid rgba(18,23,43,.75); border-radius: 50%; font: 850 4rem 'Fraunces', serif; color: var(--glove-red); transform: rotate(-20deg); }
.magnifier::after { content: ''; position: absolute; right: -3rem; bottom: -2.2rem; width: 5rem; height: .75rem; border-radius: 1rem; background: rgba(18,23,43,.75); transform: rotate(38deg); }

.sun-seal { position: absolute; left: 12%; top: 18%; width: 26rem; height: 26rem; display: grid; place-items: center; border-radius: 50%; background: var(--pollen-yellow); box-shadow: 0 0 0 1.6rem rgba(245,215,94,.24), 0 30px 60px rgba(18,23,43,.18); }
.sun-seal span { position: absolute; width: 4rem; height: 14rem; background: var(--pollen-yellow); transform-origin: center 13rem; }
.sun-seal span:nth-child(1){ transform: translateY(-13rem) rotate(0deg); }
.sun-seal span:nth-child(2){ transform: translateY(-13rem) rotate(45deg); }
.sun-seal span:nth-child(3){ transform: translateY(-13rem) rotate(90deg); }
.sun-seal span:nth-child(4){ transform: translateY(-13rem) rotate(135deg); }
.sun-seal strong { position: relative; z-index: 2; font: 700 1.5rem/1.05 'Space Grotesk', sans-serif; letter-spacing: .1em; text-align: center; }
.final-envelope { right: 10%; bottom: 15%; width: min(39rem, 50vw); min-height: 18rem; padding: 7rem 2rem 2rem; transform: rotate(3deg); background: #fff6df; }
.final-envelope .flap { position: absolute; top: 0; left: 0; width: 100%; height: 8rem; background: var(--vellum-lavender); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top center; animation: envelopeFold 5s ease-in-out infinite; }
.closing-note { right: 26%; top: 12%; width: min(36rem, 45vw); padding: 1.3rem; transform: rotate(-6deg); }

@keyframes petalHinge {
  0%, 100% { rotate: 0deg; }
  50% { rotate: 11deg; }
}

@keyframes maskDrift {
  0%, 100% { translate: 0 0; }
  50% { translate: 1.2rem -.8rem; }
}

@keyframes envelopeFold {
  0%, 100% { transform: rotateX(0deg); }
  50% { transform: rotateX(42deg); }
}

@media (max-width: 760px) {
  .evidence-tags { right: .35rem; transform: translateY(-50%) scale(.78); transform-origin: right center; }
  .slanted-board { width: 96vw; min-height: 92vh; }
  .title-lockup { left: 6%; top: 19%; }
  h1 { font-size: 21vw; }
  .navy-mask { width: 10rem; height: 4rem; right: 1%; top: 46%; }
  .lupine { scale: .72; }
  .stalk-one { right: 10%; top: 15%; }
  .pocket, .final-envelope, .closing-note, .fold-card, .interview-title { width: 76vw; right: auto; left: 7%; }
  .petal-board { right: -6%; top: 42%; scale: .62; transform-origin: top right; }
  .giant-mask { width: 95vw; height: 52vw; left: 1%; top: 23%; }
  .sun-seal { scale: .62; left: -8%; top: 10%; }
}