:root {
  /* compliance tokens from DESIGN.md typography parser: Grotesk** zine-greenhouse voice. labels */
  --daycream: #FFF3D6;
  --petal-pink: #F7A8C9;
  --mint-static: #BFF3D4;
  --butter-glow: #FFE878;
  --bruised-lilac: #B9A7FF;
  --rebellious-ink: #231421;
  --glitch-coral: #FF5A7A;
  --display: "Monoton", "Arial Black", system-ui, sans-serif;
  --botanical: "Fraunces", Georgia, serif;
  --label: "Space Grotesk", Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html,
body {
  margin: 0;
  min-height: 100%;
  overflow: hidden;
  background: var(--daycream);
  color: var(--rebellious-ink);
}

body {
  font-family: var(--label);
  cursor: crosshair;
}

button {
  font: inherit;
  color: inherit;
}

.grain,
.scanline-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
}

.grain {
  opacity: .26;
  background:
    radial-gradient(circle at 14% 21%, rgba(35, 20, 33, .16) 0 1px, transparent 1.5px),
    radial-gradient(circle at 84% 66%, rgba(255, 90, 122, .18) 0 1px, transparent 1.5px),
    linear-gradient(115deg, rgba(255, 243, 214, .18), rgba(185, 167, 255, .12));
  background-size: 17px 19px, 23px 21px, 100% 100%;
  mix-blend-mode: multiply;
}

.scanline-field {
  opacity: .19;
  background: repeating-linear-gradient(180deg, transparent 0 9px, rgba(35, 20, 33, .16) 10px, transparent 12px);
}

.day-stack,
.chapter {
  position: relative;
  width: 100vw;
  height: 100vh;
}

.chapter {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(8, 1fr);
  padding: clamp(20px, 4vw, 58px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(34px) rotate(.4deg) scale(1.025);
  transition: opacity .65s ease, transform .9s cubic-bezier(.18, .82, .17, 1), visibility .65s;
  overflow: hidden;
}

.chapter.is-active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) rotate(0) scale(1);
  z-index: 5;
}

.chapter::before,
.chapter::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.chapter::before {
  inset: 4vh 5vw;
  border: 2px solid rgba(35, 20, 33, .18);
  border-radius: 34px 8px 48px 18px;
  box-shadow: 12px 12px 0 rgba(185, 167, 255, .38), -10px -8px 0 rgba(247, 168, 201, .33);
  transform: rotate(-1.3deg);
}

.chapter::after {
  inset: -20%;
  background: radial-gradient(circle at var(--mx, 56%) var(--my, 44%), rgba(255, 232, 120, .7), transparent 25%), radial-gradient(circle at 78% 16%, rgba(191, 243, 212, .44), transparent 18%);
  mix-blend-mode: multiply;
  opacity: .56;
}

.chapter-rail {
  position: fixed;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.rail-dot {
  width: 11px;
  height: 42px;
  border: 1px solid var(--rebellious-ink);
  background: rgba(255, 243, 214, .74);
  color: transparent;
  overflow: hidden;
  padding: 0;
  box-shadow: 4px 0 0 var(--petal-pink), -3px 0 0 var(--mint-static);
  transition: width .25s ease, background .25s ease, transform .25s ease;
}

.rail-dot.is-active {
  width: 18px;
  background: var(--glitch-coral);
  transform: translateX(-5px) rotate(6deg);
}

.advance {
  position: absolute;
  z-index: 15;
  right: clamp(32px, 8vw, 110px);
  bottom: clamp(28px, 7vh, 74px);
  border: 2px solid var(--rebellious-ink);
  background: var(--butter-glow);
  padding: 13px 18px;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 700;
  box-shadow: 7px 7px 0 var(--glitch-coral), -5px -4px 0 var(--mint-static);
  transform: rotate(-2deg);
  cursor: pointer;
}

.advance:hover { transform: rotate(2deg) translateY(-3px); }

.paper-sheet,
.acetate-pane,
.poster-strip,
.leaf-silhouette,
.diagram-window,
.peel-card,
.solar-note,
.archive-sheet,
.glitch-bloom,
.sunburst,
.bruise-orbit,
.pollen-word,
.botanical-tag,
.wordmark-wrap {
  position: relative;
  z-index: 2;
}

.paper-sheet {
  grid-column: 2 / 12;
  grid-row: 1 / 8;
  background: rgba(255, 243, 214, .72);
  border: 2px solid rgba(35, 20, 33, .23);
  box-shadow: 32px 24px 0 rgba(185, 167, 255, .27);
  transform: rotate(-4deg);
}

.acetate-pane {
  grid-column: 5 / 12;
  grid-row: 2 / 7;
  border: 1px solid rgba(35, 20, 33, .2);
  background: linear-gradient(135deg, rgba(191, 243, 212, .42), rgba(247, 168, 201, .22));
  backdrop-filter: blur(1px);
  transform: rotate(7deg) translateY(2vh);
}

.wordmark-wrap {
  grid-column: 1 / 12;
  grid-row: 2 / 6;
  align-self: center;
  transform: translateX(-3vw) rotate(-3deg);
}

.wordmark {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(4.4rem, 15vw, 14.5rem);
  font-weight: 400;
  line-height: .84;
  color: var(--daycream);
  text-shadow: 5px 0 0 var(--glitch-coral), -7px 0 0 var(--mint-static), 0 13px 0 var(--bruised-lilac), 0 0 1px var(--rebellious-ink);
  filter: drop-shadow(0 0 20px rgba(255, 232, 120, .55));
}

.wordmark::before,
.wordmark::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  mix-blend-mode: multiply;
  opacity: .72;
}

.wordmark::before { color: var(--petal-pink); clip-path: inset(0 0 52% 0); transform: translate(10px, -3px); }
.wordmark::after { color: var(--mint-static); clip-path: inset(48% 0 0 0); transform: translate(-8px, 4px); }

.ransom-label,
.coordinate,
.botanical-tag,
.stamp,
.domain-seal {
  font-family: var(--label);
  text-transform: uppercase;
  letter-spacing: .13em;
}

.ransom-label {
  display: inline-block;
  margin: 18px 0 0 14vw;
  padding: 9px 12px;
  background: var(--rebellious-ink);
  color: var(--daycream);
  transform: rotate(2deg);
}

.botanical-tag {
  grid-column: 2 / 5;
  grid-row: 6 / 8;
  align-self: center;
  padding: 18px;
  background: rgba(191, 243, 212, .8);
  border-left: 9px solid var(--glitch-coral);
  box-shadow: 10px 10px 0 rgba(247, 168, 201, .7);
  font-size: .78rem;
}

.botanical-tag strong {
  display: block;
  margin-top: 9px;
  font-family: var(--botanical);
  font-size: clamp(1.2rem, 2vw, 2rem);
  letter-spacing: normal;
  text-transform: none;
}

.glitch-bloom {
  width: clamp(170px, 24vw, 330px);
  height: clamp(170px, 24vw, 330px);
}

.bloom-seed { grid-column: 8 / 12; grid-row: 2 / 6; transform: rotate(16deg); z-index: 8; }
.bloom-final { width: min(43vh, 360px); height: min(43vh, 360px); margin: 0 auto 12px; }

.petal,
.core {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
}

.petal {
  width: 33%;
  height: 51%;
  border: 2px solid rgba(35, 20, 33, .55);
  border-radius: 70% 14% 70% 20%;
  transform-origin: 0 0;
  background: linear-gradient(135deg, var(--petal-pink), var(--daycream) 54%, var(--mint-static));
  box-shadow: 7px 0 0 rgba(255, 90, 122, .54), -7px 0 0 rgba(185, 167, 255, .52);
}

.p1 { transform: rotate(0deg) translate(-8%, -96%); }
.p2 { transform: rotate(62deg) translate(-8%, -96%); }
.p3 { transform: rotate(126deg) translate(-8%, -96%); }
.p4 { transform: rotate(190deg) translate(-8%, -96%); }
.p5 { transform: rotate(252deg) translate(-8%, -96%); }
.p6 { transform: rotate(310deg) translate(-8%, -96%); }
.core { width: 23%; height: 23%; background: var(--butter-glow); border: 2px solid var(--rebellious-ink); border-radius: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 10px rgba(255, 90, 122, .18); }

.poster-strip {
  height: 10vh;
  border: 2px solid var(--rebellious-ink);
  box-shadow: 8px 8px 0 rgba(35, 20, 33, .16);
}

.strip-coral { grid-column: 1 / 10; grid-row: 2; background: var(--glitch-coral); transform: rotate(-7deg) translateX(-7vw); }
.strip-lilac { grid-column: 4 / 13; grid-row: 6; background: var(--bruised-lilac); transform: rotate(5deg) translateX(4vw); }

.diagram-window {
  grid-column: 2 / 8;
  grid-row: 3 / 7;
  align-self: center;
  padding: clamp(24px, 4vw, 54px);
  background: rgba(255, 243, 214, .84);
  border: 2px solid var(--rebellious-ink);
  box-shadow: 16px 16px 0 var(--mint-static), -12px -10px 0 var(--petal-pink);
  transform: rotate(-1.8deg);
}

h2 {
  margin: 10px 0 14px;
  font-family: var(--botanical);
  font-size: clamp(2.4rem, 6vw, 6.7rem);
  line-height: .87;
  font-weight: 850;
}

p {
  font-size: clamp(1rem, 1.45vw, 1.3rem);
  line-height: 1.45;
}

.coordinate { font-size: .76rem; font-weight: 700; color: var(--glitch-coral); }

.leaf-silhouette {
  width: 19vw;
  height: 56vh;
  background: var(--mint-static);
  border: 2px solid var(--rebellious-ink);
  border-radius: 100% 0 100% 0;
  opacity: .72;
  mix-blend-mode: multiply;
}

.leaf-one { grid-column: 8 / 11; grid-row: 2 / 7; transform: rotate(34deg); }
.leaf-two { grid-column: 10 / 13; grid-row: 1 / 6; transform: rotate(-22deg); background: var(--petal-pink); }

.peel-card {
  grid-column: 8 / 12;
  grid-row: 4 / 7;
  align-self: center;
  min-height: 210px;
  background: rgba(255, 232, 120, .76);
  border: 2px solid var(--rebellious-ink);
  overflow: hidden;
  transform: rotate(4deg);
}

.peel-flap {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--petal-pink);
  font-weight: 700;
  letter-spacing: .17em;
  transition: transform .75s cubic-bezier(.2, .9, .12, 1);
  transform-origin: left top;
}

.is-active .peel-flap { transform: translateX(-74%) rotate(-12deg); }

.hidden-caption { padding: 72px 24px 24px; font-family: var(--botanical); font-style: italic; font-size: 2rem; }

.sunburst {
  grid-column: 2 / 11;
  grid-row: 1 / 8;
  border-radius: 50%;
  background: repeating-conic-gradient(from 8deg, var(--butter-glow) 0deg 10deg, rgba(255, 90, 122, .75) 11deg 16deg, transparent 17deg 22deg), radial-gradient(circle, var(--butter-glow), transparent 62%);
  filter: blur(.2px);
  transform: scale(.9) rotate(var(--sun, 0deg));
  opacity: .8;
}

.solar-note {
  grid-column: 2 / 7;
  grid-row: 3 / 7;
  padding: clamp(24px, 4vw, 48px);
  background: rgba(255, 243, 214, .86);
  border: 2px solid var(--rebellious-ink);
  box-shadow: 18px 16px 0 var(--bruised-lilac);
  transform: rotate(2deg);
}

.bruise-orbit {
  border: 3px dashed var(--rebellious-ink);
  border-radius: 50%;
  opacity: .4;
}

.orbit-one { grid-column: 7 / 12; grid-row: 2 / 7; transform: rotate(18deg); }
.orbit-two { grid-column: 6 / 13; grid-row: 1 / 8; transform: rotate(-9deg); border-color: var(--glitch-coral); }

.pollen-word {
  grid-column: 7 / 12;
  grid-row: 5 / 7;
  align-self: center;
  font-family: var(--display);
  font-size: clamp(2.5rem, 6vw, 6.8rem);
  color: var(--daycream);
  text-shadow: 4px 0 0 var(--glitch-coral), -4px 0 0 var(--mint-static), 0 5px 0 var(--rebellious-ink);
  transform: rotate(-5deg);
}

.pollen-word span {
  display: inline-block;
  transition: transform .5s ease, opacity .5s ease;
}

.pollen-word.is-jittering span { transform: translate(var(--jx), var(--jy)) rotate(var(--jr)); opacity: .76; }

.archive-sheet {
  grid-column: 3 / 11;
  grid-row: 1 / 8;
  align-self: center;
  text-align: center;
  padding: clamp(24px, 5vw, 62px);
  background: rgba(255, 243, 214, .9);
  border: 3px double var(--rebellious-ink);
  box-shadow: 22px 22px 0 var(--petal-pink), -18px -16px 0 var(--mint-static), 0 0 0 12px rgba(255, 232, 120, .26) inset;
  transform: rotate(-1deg);
}

.stamp {
  display: inline-block;
  padding: 8px 14px;
  border: 2px solid var(--glitch-coral);
  color: var(--glitch-coral);
  font-weight: 700;
  transform: rotate(8deg);
}

.domain-seal {
  display: inline-block;
  margin-top: 12px;
  padding: 14px 18px;
  background: var(--rebellious-ink);
  color: var(--daycream);
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 3.2rem);
  text-transform: none;
  box-shadow: 7px 0 0 var(--glitch-coral), -7px 0 0 var(--bruised-lilac);
}

.restart { left: clamp(28px, 7vw, 90px); right: auto; }

.chapter.glitching .wordmark,
.chapter.glitching h2,
.chapter.glitching .domain-seal {
  animation: glitchBurst .38s steps(2, end) 1;
}

@keyframes glitchBurst {
  0% { transform: translate(0, 0); filter: hue-rotate(0deg); }
  24% { transform: translate(9px, -3px); filter: hue-rotate(35deg); }
  45% { transform: translate(-7px, 5px); filter: hue-rotate(-20deg); }
  70% { transform: translate(4px, 2px); }
  100% { transform: translate(0, 0); filter: hue-rotate(0deg); }
}

@media (max-width: 760px) {
  .chapter { padding: 18px; grid-template-columns: repeat(6, 1fr); }
  .chapter-rail { right: 10px; }
  .wordmark-wrap, .diagram-window, .solar-note, .archive-sheet { grid-column: 1 / -1; }
  .wordmark { font-size: clamp(3.4rem, 19vw, 7rem); }
  .botanical-tag { grid-column: 1 / 5; }
  .bloom-seed, .peel-card, .pollen-word { grid-column: 2 / -1; }
  .archive-sheet { padding-right: 42px; }
}