/* ============================================================
   cute erection — style.css
   Order: tokens → fonts → base → scraps & buttons → sections
          → hero & motion → settle → lightbox → reduced motion → mobile
   ============================================================ */

/* ---------- 1. tokens ---------- */
:root {
  --paper: #f3ecd8;
  --paper-dot: #e6dcc0;
  --ink: #232323;
  --ink-soft: #5a5650;
  --pink: #f2a6b8;
  --red: #c4102f;
  --red-dark: #8e0a22;
  --blue: #2b3fb8;
  --rust: #b5533c;
  --lilac: #c9c4d6;
  --tape: rgba(255, 240, 180, .75);
  --white: #fffdf8;
  --shadow: 2px 3px 0 rgba(0, 0, 0, .15);
  --font-title: "Reenie Beanie", "Marker Felt", "Comic Sans MS", cursive;
  --font-body: "Special Elite", "Courier New", monospace;
  /* motion inputs, written by main.js */
  --p: 0;      /* 0..1 scroll progress through the hero */
  --mx: 0;     /* pointer x, -1..1 */
  --my: 0;     /* pointer y, -1..1 */
  /* where the creature drawing is cut into strips (fractions of its height) */
  --cut1: 0.56;   /* just under the chin */
  --cut2: 0.68;   /* where the neck meets the shoulders */
}

/* ---------- 2. fonts ---------- */
@font-face {
  font-family: "Reenie Beanie";
  src: url("assets/fonts/reenie-beanie.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Special Elite";
  src: url("assets/fonts/special-elite.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

/* ---------- 3. base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper) radial-gradient(var(--paper-dot) 1px, transparent 1.5px) 0 0 / 6px 6px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.05rem;
  line-height: 1.5;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--font-title); font-weight: 400; line-height: .9; margin: 0; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--paper); padding: .5rem 1rem; z-index: 100; }
.skip:focus { left: 1rem; top: 1rem; }

/* ---------- 4. scraps & buttons ---------- */
.scrap {
  position: relative;
  display: block;
  background: var(--white);
  padding: 10px;
  box-shadow: var(--shadow);
  rotate: var(--tilt, 0deg);
}
.scrap::before {                       /* the tape */
  content: "";
  position: absolute;
  top: -9px;
  left: 50%;
  width: 58px;
  height: 17px;
  background: var(--tape);
  translate: -50% 0;
  rotate: var(--tape-rot, -3deg);
  z-index: 2;
  pointer-events: none;
}
.scrap--note {
  display: inline-block;
  padding: 14px 20px;
  font-family: var(--font-title);
  font-size: 1.7rem;
  line-height: 1;
}
.scrap--note p { margin: 0; }

.btn {
  display: inline-block;
  font-family: var(--font-title);
  font-size: 1.7rem;
  line-height: 1;
  padding: .45em .9em .35em;
  border: 2px solid var(--ink);
  border-radius: 20px 18px 22px 16px / 18px 22px 16px 20px;
  background: var(--white);
  color: var(--ink);
  text-decoration: none;
  rotate: var(--tilt, -1deg);
  transition: background .15s ease, rotate .15s ease;
}
.btn:hover, .btn:focus-visible { background: var(--pink); rotate: 0deg; }
.btn.is-todo { border-style: dashed; color: var(--ink-soft); pointer-events: none; }
.btn.is-todo::after { content: " (soon)"; font-size: .7em; }
.links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .9rem 1.1rem; }

/* ---------- 5. sections ---------- */
main { position: relative; z-index: 2; background: inherit; }
.section { max-width: 1100px; margin: 0 auto; padding: 6rem 1.5rem; }
.section__title {
  font-size: clamp(3rem, 8vw, 5rem);
  display: inline-block;
  rotate: var(--tilt, -2deg);
  margin-bottom: 2rem;
}
.section__row { display: flex; flex-wrap: wrap; gap: 2.5rem 3rem; align-items: flex-start; }

/* listen */
.scrap--embed { flex: 1 1 420px; max-width: 640px; }
.embed { display: block; border: 0; border-radius: 12px; width: 100%; height: 352px; background: #e9e4d6; }
.embed__note { font-family: var(--font-title); font-size: 1.3rem; color: var(--ink-soft); margin: .6rem 0 0; text-align: center; }
.scrap--embed.is-live .embed__note { display: none; }
/* the doodled aura around the player: three hand-wobbly rings and two squiggles whose dashed
   strokes crawl round the loop at different speeds while the whole thing wobbles. Runs only while
   the scrap is on screen (.settled), and not under reduced motion. */
.aura {
  position: absolute;
  left: -14%;
  top: -22%;
  width: 128%;
  height: 144%;
  pointer-events: none;
  z-index: -1;                                 /* under the player, over the paper */
}
.aura svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform-origin: 50% 50%; }
.aura path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .5;
  stroke-dasharray: 11 7;
}
.aura .ring--b { stroke: var(--red); stroke-dasharray: 4 10; opacity: .62; }
.aura .ring--c { stroke-dasharray: 18 6; opacity: .32; stroke-width: 1.8; }
.aura .squiggle { stroke-dasharray: none; opacity: .55; }
.aura .squiggle--b { stroke: var(--red); }
/* the two layers drift against each other. The transforms sit on the <svg> elements themselves so
   the compositor handles them — animating stroke-dashoffset, or anything inside the drawing,
   repaints the whole thing every frame. Runs only while the player is on screen. */
.scrap--embed.is-onscreen .aura__a { animation: aura-turn-a 11s ease-in-out infinite; }
.scrap--embed.is-onscreen .aura__b { animation: aura-turn-b 14s ease-in-out infinite; }
@keyframes aura-turn-a { 0%, 100% { rotate: -1.7deg; scale: 1; }    50% { rotate: 1.7deg; scale: 1.025; } }
@keyframes aura-turn-b { 0%, 100% { rotate: 2deg;    scale: 1.02; } 50% { rotate: -2deg;  scale: 1; } }
.scrap--embed.settled .aura, .scrap--embed.settled .aura path { animation-play-state: running; }

/* stuff — the wall */
.wall {
  list-style: none;
  margin: 0;
  padding: 1rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 3.5rem 2.5rem;
  align-items: start;
}
.wall__item:nth-child(3n + 2) { margin-top: 2.5rem; }
.wall__item:nth-child(4n + 3) { margin-top: -1rem; }
.wall__open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
/* entrance: each scrap drops onto the paper (one small bounce), then its tape slaps on a beat later;
   several arriving together are staggered. Hover: the scrap peels up towards the pointer
   (main.js writes --rx/--ry from the pointer's position over it). */
.js .wall__item.settle.settled { animation: scrap-drop .7s cubic-bezier(.2, .9, .3, 1.15) both; }   /* outranks the generic settle */
.js .wall__item.settled::before { animation: tape-slap .3s ease-out .55s both; }
.js .wall__item:nth-child(2).settle.settled { animation-delay: .12s; } .js .wall__item:nth-child(2).settled::before { animation-delay: .67s; }
.js .wall__item:nth-child(3).settle.settled { animation-delay: .24s; } .js .wall__item:nth-child(3).settled::before { animation-delay: .79s; }
.js .wall__item:nth-child(4).settle.settled { animation-delay: .36s; } .js .wall__item:nth-child(4).settled::before { animation-delay: .91s; }
@keyframes scrap-drop {
  from { opacity: 0; translate: 0 -70px; rotate: calc(var(--tilt, 0deg) - 9deg); }
  60%  { opacity: 1; translate: 0 8px;   rotate: calc(var(--tilt, 0deg) + 1.5deg); }
  to   { opacity: 1; translate: 0 0;     rotate: var(--tilt, 0deg); }
}
@keyframes tape-slap {
  from { opacity: 0; scale: 1.6; }
  to   { opacity: 1; scale: 1; }
}
.wall__item { transition: translate .18s ease, rotate .18s ease, transform .22s ease; }
.wall__item::after {                           /* the deeper shadow of a lifted scrap, faded in rather
                                                  than transitioned as box-shadow (a paint property) */
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: 6px 12px 0 rgba(0, 0, 0, .10);
  opacity: 0;
  transition: opacity .22s ease;
  pointer-events: none;
}
.wall__item:hover, .wall__item:focus-within { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.wall__item:hover::after, .wall__item:focus-within::after { opacity: 1; }
.wall__caption { display: block; font-family: var(--font-title); font-size: 1.4rem; color: var(--ink-soft); padding: .5rem .2rem 0; }

/* who */
.bio { flex: 1 1 320px; max-width: 520px; }
.bio p { margin: 0 0 1rem; }
#who .scrap { flex: 0 1 300px; }

.footer {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1.5rem 3rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem 2rem;
  font-size: .9rem;
  color: var(--ink-soft);
}

/* ---------- 6. hero & motion ---------- */
/* The hero is a pinned paper theatre: .hero is 2.2 screens tall, .stage sticks to the top
   for the first 1.2 screens while --p runs 0→1 (written by main.js). Six torn sheets sit at
   different depths (far = pale/blurred/slow, near = dark/sharp/fast), the creature's pieces
   fall between them, and the whole stack shifts sideways with the pointer (--mx on .hero). */
.hero { position: relative; min-height: 100vh; min-height: 100svh; isolation: isolate; --mx: 0; --my: 0;
  --creature-w: min(46vw, 440px, 50svh); }         /* about a screen tall; its feet hide in the hills */
.js .hero { min-height: 220vh; min-height: 220svh; }   /* 1.2 screens of pinned travel, only when the script can drive it */
.stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) var(--creature-w) minmax(0, .6fr);   /* title needs the room */
  grid-template-rows: auto auto 1fr;
  grid-template-areas:
    "title   creature ."
    "tagline creature ."
    "hint    hint     hint";
  column-gap: 2rem;
  padding: 5rem max(1.5rem, calc((100vw - 1200px) / 2)) 3rem;
}
.hero__title {
  grid-area: title;
  align-self: end;
  position: relative;
  z-index: 11;
  white-space: nowrap;
  margin-top: 3svh;
  font-size: clamp(4.5rem, 12vw, 9rem);
  rotate: -3deg;
  translate: calc(var(--mx) * 6px) calc(var(--p) * -14svh);
}
.hero__title span { display: block; }
@media (min-width: 721px) and (max-width: 960px) {
  .hero__title { font-size: 11.9vw; }         /* the widest that still fits its column here */
}
.hero__tagline {
  grid-area: tagline;
  align-self: start;
  position: relative;
  z-index: 11;
  font-family: var(--font-title);
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  margin: .2rem 0 0 .5rem;
  rotate: -2deg;
  translate: calc(var(--mx) * 6px) calc(var(--p) * -14svh);
}
.hero__hint {
  grid-area: hint;
  justify-self: center;
  align-self: end;
  position: relative;
  z-index: 11;
  font-family: var(--font-title);
  font-size: 1.5rem;
  color: var(--ink-soft);
  text-decoration: none;
}
.hero.is-onscreen .hero__hint { animation: nudge 2s ease-in-out infinite; }
@keyframes nudge { 50% { opacity: .35; } }

/* the nav: handwritten on the top strip, rides along with it */
.topnav {
  position: absolute;
  left: 12%;
  right: 4%;
  top: 0;
  height: 14svh;
  z-index: 12;
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.6rem);
  translate: calc(var(--mx) * 12px) calc(var(--p) * -40svh);
}
.topnav a {
  font-family: var(--font-title);
  font-size: clamp(1.4rem, 2vw, 1.9rem);
  color: var(--ink);
  text-decoration: none;
  rotate: var(--tilt, 0deg);
  position: relative;
}
.topnav a::after {                              /* scribbled underline on hover */
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: -2px;
  height: 3px;
  background: var(--red);
  border-radius: 3px 2px 4px 2px;
  scale: 0 1;
  transform-origin: left;
  transition: scale .18s ease;
}
.topnav a:hover::after, .topnav a:focus-visible::after { scale: 1 1; }

/* the sheets, far → near. --top = where the torn edge sits at rest, --rise = how far it
   drifts up over the scroll, --mx-px = how far it follows the pointer, --tear = the torn edge.
   No filters anywhere here (they re-render every frame): the shadow a sheet casts on the one
   behind it is a second copy of its own torn shape, darker and shifted, painted underneath.
   Tall enough to still cover the bottom after rising. */
.sheet {
  position: absolute;
  left: -6%;
  width: 112%;
  top: var(--top);
  height: calc(100% - var(--top) + 4svh + var(--rise));
  pointer-events: none;
  will-change: transform;
  translate: calc(var(--mx) * var(--mx-px)) calc(var(--p) * var(--rise) * -1);
}
.sheet::before, .sheet__paper { position: absolute; inset: 0; clip-path: var(--tear); }
.sheet::before { content: ""; background: rgba(40, 30, 10, var(--shade, .12)); translate: 0 calc(var(--shade-dy, -6px)); }
.sheet__paper { background-color: var(--tone); background-image: radial-gradient(var(--dot) 1px, transparent 1.5px); background-size: 6px 6px; }
/* each sheet is a different material from a collage-maker's desk, most of it her own artwork:
   far mist (the tree photo's sky), her red/white painting, the pink brushwork from the cherries
   painting, squared paper, kraft paper, and a torn strip of ruled notebook paper on top */
.sheet--e .sheet__paper {
  background: var(--tone) url("assets/gallery/sheet-sky.jpg") center 60% / cover no-repeat;
  background-image: image-set(url("assets/gallery/sheet-sky.webp") type("image/webp"), url("assets/gallery/sheet-sky.jpg") type("image/jpeg"));
}
.sheet--d .sheet__paper {
  background: var(--tone) url("assets/gallery/texture-sheet.jpg") center 35% / cover no-repeat;
  background-image: image-set(url("assets/gallery/texture-sheet.webp") type("image/webp"), url("assets/gallery/texture-sheet.jpg") type("image/jpeg"));
}
.sheet--b .sheet__paper {
  background: var(--tone) url("assets/gallery/sheet-pink.jpg") center 40% / cover no-repeat;
  background-image: image-set(url("assets/gallery/sheet-pink.webp") type("image/webp"), url("assets/gallery/sheet-pink.jpg") type("image/jpeg"));
}
.sheet--a .sheet__paper {                     /* squared paper */
  background-color: #ece3cb;
  background-image: linear-gradient(rgba(120, 100, 60, .16) 1px, transparent 1px), linear-gradient(90deg, rgba(120, 100, 60, .16) 1px, transparent 1px);
  background-size: 18px 18px;
}
.sheet--f .sheet__paper {                     /* kraft paper */
  background: #cfb886 url("assets/gallery/sheet-kraft.jpg") center / cover no-repeat;
  background-image: image-set(url("assets/gallery/sheet-kraft.webp") type("image/webp"), url("assets/gallery/sheet-kraft.jpg") type("image/jpeg"));
}
.sheet--c .sheet__paper {                     /* ruled notebook paper, legible: lines, red margin, punched holes */
  background-color: var(--tone);
  background-image:
    radial-gradient(circle at 4.5% 30%, var(--paper) 7px, rgba(0,0,0,.18) 8px, transparent 9.5px),
    radial-gradient(circle at 4.5% 62%, var(--paper) 7px, rgba(0,0,0,.18) 8px, transparent 9.5px),
    linear-gradient(90deg, transparent 0 9%, rgba(214, 70, 70, .55) 9%, rgba(214, 70, 70, .55) calc(9% + 2px), transparent calc(9% + 2px)),
    repeating-linear-gradient(0deg, transparent 0 27px, rgba(70, 105, 190, .42) 27px 28px);
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 28px;
  background-position: 0 0, 0 0, 0 0, 0 6px;
}
.sheet--e { z-index: 1;  --top: 47%; --rise: 0svh;  --mx-px: 2px;  --tone: #e6e6e8; --dot: #dcdce0; --shade: .04; --tear: polygon(0% 7.2%, 3% 9.4%, 6% 10.3%, 8% 9.0%, 11% 11.4%, 14% 13.7%, 17% 12.9%, 19% 11.1%, 22% 11.7%, 25% 13.5%, 28% 10.3%, 31% 7.1%, 33% 8.3%, 36% 8.7%, 39% 6.3%, 42% 3.9%, 44% 4.7%, 47% 6.2%, 50% 6.1%, 53% 4.7%, 56% 7.6%, 58% 10.6%, 61% 10.6%, 64% 9.0%, 67% 12.5%, 69% 14.3%, 72% 12.9%, 75% 11.4%, 78% 12.3%, 81% 12.7%, 83% 10.2%, 86% 7.8%, 89% 8.5%, 92% 8.5%, 94% 5.7%, 97% 3.0%, 100% 4.9%, 100% 100%, 0% 100%); }
.sheet--d { z-index: 2;  --top: 56%; --rise: 2svh;  --mx-px: 4px;  --tone: #f0c6d0; --dot: #e6b7c3; --shade: .06; --tear: polygon(0% 12.8%, 3% 14.3%, 6% 13.5%, 8% 8.3%, 11% 5.8%, 14% 8.0%, 17% 8.6%, 19% 4.8%, 22% 5.1%, 25% 9.7%, 28% 12.5%, 31% 12.4%, 33% 13.0%, 36% 16.6%, 39% 17.0%, 42% 14.4%, 44% 12.4%, 47% 13.9%, 50% 10.9%, 53% 6.4%, 56% 5.7%, 58% 7.7%, 61% 8.9%, 64% 5.4%, 67% 8.8%, 69% 12.3%, 72% 14.9%, 75% 12.5%, 78% 15.1%, 81% 18.0%, 83% 17.3%, 86% 12.2%, 89% 10.8%, 92% 11.1%, 94% 9.7%, 97% 4.9%, 100% 4.5%, 100% 100%, 0% 100%); }
.sheet--b { z-index: 4;  --top: 65%; --rise: 5svh;  --mx-px: 7px;  --tone: #d9d3dd; --dot: #cbc4d1; --shade: .09; --tear: polygon(0% 13.0%, 3% 12.2%, 6% 16.0%, 8% 20.2%, 11% 21.2%, 14% 15.0%, 17% 10.1%, 19% 10.5%, 22% 9.1%, 25% 4.0%, 28% 7.2%, 31% 14.6%, 33% 15.6%, 36% 15.1%, 39% 18.7%, 42% 20.6%, 44% 17.2%, 47% 11.8%, 50% 9.5%, 53% 11.1%, 56% 8.7%, 58% 5.6%, 61% 10.4%, 64% 17.7%, 67% 18.7%, 69% 15.6%, 72% 17.1%, 75% 19.0%, 78% 15.3%, 81% 8.0%, 83% 7.2%, 86% 10.5%, 89% 7.6%, 92% 8.2%, 94% 12.7%, 97% 19.6%, 100% 20.2%, 100% 100%, 0% 100%); }
.sheet--a { z-index: 6;  --top: 75%; --rise: 9svh;  --mx-px: 11px; --tone: #e9dcbe; --dot: #dbcca7; --shade: .13; --shade-dy: -8px; --tear: polygon(0% 21.4%, 3% 26.1%, 6% 19.4%, 8% 8.8%, 11% 8.6%, 14% 11.4%, 17% 10.6%, 19% 11.7%, 22% 17.0%, 25% 26.2%, 28% 25.4%, 31% 16.6%, 33% 17.8%, 36% 14.4%, 39% 9.5%, 42% 3.5%, 44% 10.7%, 47% 19.2%, 50% 19.3%, 53% 20.8%, 56% 23.5%, 58% 24.6%, 61% 15.4%, 64% 7.3%, 67% 8.5%, 69% 11.6%, 72% 13.3%, 75% 12.2%, 78% 23.6%, 81% 28.8%, 83% 22.3%, 86% 16.5%, 89% 15.3%, 92% 13.6%, 94% 6.4%, 97% 5.4%, 100% 14.0%, 100% 100%, 0% 100%); }
.sheet--f { z-index: 10; --top: 87%; --rise: 14svh; --mx-px: 16px; --tone: #d9c99f; --dot: #cbb98c; --shade: .18; --shade-dy: -10px; --tear: polygon(0% 29.6%, 3% 29.8%, 6% 18.6%, 8% 9.6%, 11% 12.3%, 14% 24.4%, 17% 27.2%, 19% 26.4%, 22% 27.1%, 25% 25.6%, 28% 14.2%, 31% 9.2%, 33% 15.3%, 36% 26.0%, 39% 30.2%, 42% 25.4%, 44% 27.2%, 47% 23.1%, 50% 14.5%, 53% 7.2%, 56% 20.7%, 58% 30.1%, 61% 33.6%, 64% 26.5%, 67% 21.8%, 69% 21.6%, 72% 10.2%, 75% 9.8%, 78% 21.5%, 81% 35.7%, 83% 29.0%, 86% 24.5%, 89% 20.4%, 92% 18.5%, 94% 10.2%, 97% 11.5%, 100% 29.3%, 100% 100%, 0% 100%); }
.sheet--c { z-index: 9;  top: -3svh; height: 17svh; --rise: 40svh; --mx-px: 12px; --tone: #fbf8ef; --dot: #ece5d4; --shade: .14; --shade-dy: 7px; --tear: polygon(0% 0%, 100% 0%, 100% 88.3%, 97% 89.0%, 94% 90.8%, 92% 88.2%, 89% 80.6%, 86% 81.7%, 83% 84.3%, 81% 86.6%, 78% 83.9%, 75% 88.7%, 72% 92.4%, 69% 92.5%, 67% 90.1%, 64% 88.7%, 61% 89.8%, 58% 85.2%, 56% 83.7%, 53% 84.7%, 50% 87.7%, 47% 83.8%, 44% 88.2%, 42% 92.2%, 39% 94.0%, 36% 91.0%, 33% 89.2%, 31% 89.0%, 28% 88.3%, 25% 84.9%, 22% 81.8%, 19% 84.8%, 17% 85.2%, 14% 87.2%, 11% 86.1%, 8% 93.3%, 6% 94.7%, 3% 89.2%, 0% 87.4%); }

.hero__scrap { position: absolute; width: clamp(110px, 14vw, 180px); }
.hero__scrap--1 { z-index: 8; right: 8%; top: 8%;   translate: calc(var(--mx) * 10px) calc(var(--p) * 22svh); }   /* under the top sheet's edge */
.hero__scrap--2 { z-index: 5; left: 4%;  bottom: 9%; translate: calc(var(--mx) * 8px)  calc(var(--p) * 26svh); }   /* half behind the front hill */

/* the creature: one drawing shown three times, each strip clipped to its band */
.creature {
  position: absolute;                          /* in its grid area but out of flow: the text rows keep their natural height */
  grid-column: 2;
  grid-row: 1 / 4;
  top: -3svh;                                  /* crown tucked behind the top sheet */
  left: 0;
  margin: 0;
  width: var(--creature-w);
  aspect-ratio: 2456 / 4814;                     /* the drawing's own proportions */
  /* no z-index here: the strips must interleave with the sheets, so the figure is not a stacking context */
}
.creature::before {                          /* the tape stays on the wall while the paper tears out */
  z-index: 8;
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  width: 62px;
  height: 18px;
  background: var(--tape);
  translate: -50% 0;
  rotate: -6deg;
  pointer-events: none;
}
.creature__strip {
  position: absolute;
  left: 0;
  width: 100%;
  overflow: hidden;
  will-change: transform;                      /* no filter on the pieces: a drop-shadow would re-render on every breath/scroll frame */
}
.hero.is-onscreen .creature__strip { animation: breathe 6s ease-in-out infinite; }   /* only while the hero is in view */
@keyframes breathe { 0%, 100% { rotate: -1.5deg; } 50% { rotate: 1.5deg; } }
/* the head: in front of the cream hill while it falls, slides and tips; lands on the hill's edge,
   bounces, and passes behind it at the top of the bounce (main.js writes --head-* and .is-head-behind) */
.creature__strip--1 {
  top: 0;
  height: calc(var(--cut1) * 100%);
  z-index: 7;
  transform-origin: 50% calc(0.5 / var(--cut1) * 100%);
  translate: calc(var(--mx) * 9px + var(--head-x, 0px)) var(--head-y, 0vh);
  transform: rotate(var(--head-r, 0deg));
}
.hero.is-head-behind .creature__strip--1 { z-index: 5; }
/* neck and torso: slide apart early (done by --p ≈ .4), then sink with a gravity curve */
.creature__strip--2 {
  top: calc(var(--cut1) * 100%);
  height: calc((var(--cut2) - var(--cut1)) * 100%);
  z-index: 4;
  transform-origin: 50% calc((0.5 - var(--cut1)) / (var(--cut2) - var(--cut1)) * 100%);
  translate: calc(var(--mx) * 7px) calc(var(--p) * var(--p) * 52svh);
  transform: translateX(calc(min(1, var(--p) * 2.5) * 110px)) rotate(calc(min(1, var(--p) * 2.5) * 7deg));
}
.creature__strip--3 {
  top: calc(var(--cut2) * 100%);
  height: calc((1 - var(--cut2)) * 100%);
  z-index: 3;
  transform-origin: 50% calc((0.5 - var(--cut2)) / (1 - var(--cut2)) * 100%);
  translate: calc(var(--mx) * 5px) calc(var(--p) * var(--p) * 34svh);
  transform: translateX(calc(min(1, var(--p) * 2.5) * -70px)) rotate(calc(min(1, var(--p) * 2.5) * 9deg));
}
/* each img box equals the whole figure (height = strip height / strip fraction), so the
   cuts line up for any drawing ratio; object-fit crops instead of stretching */
.creature__strip > picture > img { position: absolute; left: 0; width: 100%; object-fit: cover; }
.creature__strip--1 > picture > img { top: 0; height: calc(100% / var(--cut1)); }
.creature__strip--2 > picture > img { top: calc(-1 * var(--cut1) / (var(--cut2) - var(--cut1)) * 100%); height: calc(100% / (var(--cut2) - var(--cut1))); }
.creature__strip--3 > picture > img { top: calc(-1 * var(--cut2) / (1 - var(--cut2)) * 100%); height: calc(100% / (1 - var(--cut2))); }

/* eyes: each eye is a round piece cut out of the drawing itself, showing exactly the eye
   underneath, and the piece shifts with the pointer so her drawn eyes look around.
   --ex/--ey = the piece's top-left as fractions of the figure's width/height, --eye-s = its
   diameter as a fraction of the figure width. Tune per drawing. */
.creature__eye {
  --eye-s: 0.15;
  --ratio: 1.96;                               /* figure height / width */
  position: absolute;
  left: calc(var(--ex) * 100%);
  top: calc(var(--ey) / var(--cut1) * 100%);   /* % of the top strip's height */
  width: calc(var(--eye-s) * 100%);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  z-index: 2;
  translate: calc(var(--mx) * 5px) calc(var(--my) * 4px);
  transition: translate .08s linear;
}
.creature__eye--l { --ex: 0.242; --ey: 0.255; }
.creature__eye--r { --ex: 0.528; --ey: 0.264; }
.creature__eye img {
  position: absolute;
  width: calc(100% / var(--eye-s));
  max-width: none;                             /* the base img rule would cap it at the circle */
  height: auto;
  left: calc(-1 * var(--ex) / var(--eye-s) * 100%);
  top: calc(-1 * var(--ey) * var(--ratio) / var(--eye-s) * 100%);
}

/* ---------- 7. settle ----------
   Only when JS runs (html.js) do scraps start hidden; without JS everything is simply visible. */
.js .settle { opacity: 0; }
.js .settle.settled { opacity: 1; animation: settle .6s ease; }
@keyframes settle {
  from { opacity: 0; translate: 0 14px; rotate: calc(var(--tilt, 0deg) - 2deg); }
}
.scrap { transition: translate .18s ease, rotate .18s ease; }
.scrap:not(.hero__scrap):hover { translate: 0 -2px; rotate: calc(var(--tilt, 0deg) * .6); }
.hero__scrap { transition: none; }             /* their translate is the scroll parallax — no lag, no hover jump */

/* ---------- 8. lightbox ---------- */
.lightbox {
  border: 0;
  padding: 0;
  background: transparent;
  max-width: min(92vw, 1000px);
  max-height: 92vh;
  overflow: visible;
}
.lightbox:not([open]) { display: none; }
.lightbox::backdrop { background: rgba(35, 35, 35, .75); }
.lightbox[open]::backdrop { animation: backdrop-in .35s ease both; }
@keyframes backdrop-in { from { opacity: 0; } }
.lightbox__scrap { transform-origin: 50% 50%; will-change: transform; }
.lightbox__scrap { margin: 0; }
.lightbox__img { max-height: 78vh; width: auto; max-width: 100%; margin: 0 auto; }
.lightbox__caption { font-family: var(--font-title); font-size: 1.5rem; padding: .6rem .3rem 0; }
.lightbox__close {
  position: absolute;
  top: -18px;
  right: -18px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  background: var(--white);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
}

/* ---------- 10. mobile ---------- */
@media (max-width: 720px) {
  .stage {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas: "title" "tagline" "creature" "hint";
    padding: 16svh 1.2rem 2rem;                /* below the notebook strip and its nav */
    justify-items: start;
  }
  .hero__title { font-size: clamp(4rem, 22vw, 6rem); margin-top: 0; }
  .hero { --creature-w: min(72vw, 300px, 36svh); }
  .creature { position: relative; grid-area: creature; top: 0; justify-self: center; }   /* in flow again: the column stack needs its height */
  .creature__strip--2 { translate: calc(var(--mx) * 7px) calc(var(--p) * var(--p) * 40svh); transform: translateX(calc(min(1, var(--p) * 2.5) * 60px)) rotate(calc(min(1, var(--p) * 2.5) * 7deg)); }
  .creature__strip--3 { translate: calc(var(--mx) * 5px) calc(var(--p) * var(--p) * 26svh); transform: translateX(calc(min(1, var(--p) * 2.5) * -40px)) rotate(calc(min(1, var(--p) * 2.5) * 9deg)); }
  .sheet { left: -40%; width: 180%; }    /* wider sheets = longer waves on a narrow screen */
  .sheet--e { --top: 58%; } .sheet--d { --top: 65%; } .sheet--b { --top: 72%; } .sheet--a { --top: 80%; } .sheet--f { --top: 90%; }
  .creature__strip { animation: none; }   /* no continuous animation on phones */
  .hero__scrap--1 { top: 3%; right: 4%; width: 96px; translate: calc(var(--mx) * 10px) calc(var(--p) * 8svh); }   /* shorter fall: keeps clear of the tagline */
  .topnav { left: 14%; right: 3%; height: 12svh; gap: 1rem; }
  .topnav a { font-size: 1.3rem; }
  .sheet--c .sheet__paper { background-image: linear-gradient(90deg, transparent 0 10%, rgba(214,70,70,.55) 10%, rgba(214,70,70,.55) calc(10% + 2px), transparent calc(10% + 2px)), repeating-linear-gradient(0deg, transparent 0 23px, rgba(70,105,190,.42) 23px 24px); background-size: 100% 100%, 100% 24px; background-position: 0 0, 0 4px; }
  .hero__scrap--2 { width: 80px; left: 3%; bottom: 5%; }
  .creature__eye { translate: calc(var(--mx) * 3px) calc(var(--my) * 2.5px); }     /* smaller pieces on phones */
  .section { padding: 4rem 1.2rem; }
  .section__title { font-size: clamp(2.8rem, 14vw, 4rem); }
  .wall { grid-template-columns: 1fr; gap: 3rem; max-width: 340px; margin-inline: auto; }
  .wall__item:nth-child(n) { margin-top: 0; }
  .btn { font-size: 1.5rem; }
  .lightbox__close { top: -14px; right: -8px; }
}

/* ---------- 9. reduced motion (last on purpose: must outrank the mobile block) ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero, .js .hero { min-height: 100vh; min-height: 100svh; }
  .stage { position: relative; }
  .hero__title, .hero__tagline, .hero__hint, .hero__scrap, .sheet, .creature__strip, .topnav { translate: none; animation: none; }
  .creature__strip { transform: none; }
  .creature__eye { translate: none; transition: none; }
  .js .settle { transition: opacity .4s ease; }
  .js .settle.settled { animation: none; }
  .js .wall__item.settle.settled, .js .wall__item.settled::before { animation: none; }
  .wall__item:hover, .wall__item:focus-within { transform: none; }
  .lightbox[open]::backdrop { animation: none; }
  .aura, .aura path { animation: none; }
  .scrap, .scrap:not(.hero__scrap):hover { translate: none; rotate: var(--tilt, 0deg); transition: none; }
  .btn { transition: none; }
}