/* Élément Magique, alt draft: the groovy title card from the Soul Credit trailer.
   Hot-pink swirls on oxblood, cream type with screen-print echoes (pink, orange, yellow, blue),
   paper grain, oil-pastel marks, and the jointed lobster crawling into frame. */

:root {
  --maroon: #5c1610;
  --maroon-deep: #3a0806;
  --pink: #f98bb8;
  --pink-hot: #ee5f99;
  --cream: #fdf5c9;
  --paper: #e9d9c7;
  /* Real paper (ASSETS/TT_4x_PaperPage.jpg): the page itself, and under a cream wash for cards */
  --paper-bg: var(--paper) url("/alt/img/paper.jpg") 0 0 / 1200px;
  --card-bg: linear-gradient(rgb(255 248 218 / .55) 0 0), var(--paper) url("/alt/img/paper.jpg") center / 900px;
  --orange: #f2552a;
  --yellow: #f7c430;
  --blue: #4a9ac4;
  --ink: #2b0d09;
  --display: "DM Serif Display", Georgia, serif;
  --groove: "Shrikhand", "DM Serif Display", serif;
  --body: "Young Serif", Georgia, serif;
  --script: "Courier Prime", "Courier New", monospace;
  /* The trailer's stacked echoes, nearest first */
  --echo: .035em .035em 0 var(--pink), .07em .07em 0 var(--orange), .1em .1em 0 var(--yellow), .13em .13em 0 var(--pink-hot), .155em .155em 0 var(--blue);
  /* On cream paper the letters are solid maroon, so they stand off the paper; the echoes stay bright */
  --echo-light: .03em .03em 0 var(--pink-hot), .06em .06em 0 var(--orange), .09em .09em 0 var(--yellow), .115em .115em 0 var(--blue);
  --stack: 6px 6px 0 var(--pink), 12px 12px 0 var(--orange), 18px 18px 0 var(--yellow), 22px 22px 0 var(--blue);
  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .3  0 0 0 0 .15  0 0 0 0 .1  0 0 0 .12 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --wave: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 40' preserveAspectRatio='none'><path d='M0 22 C25 2 50 2 75 22 S125 42 150 22 S190 4 200 14 V40 H0Z' fill='black'/></svg>");
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  position: relative; margin: 0; overflow-x: hidden;
  color: var(--ink); background: var(--paper-bg);
  font: 400 18px/1.65 var(--body);
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 3px; }
a:hover { color: var(--pink-hot); }
:focus-visible { outline: 2px dashed var(--pink-hot); outline-offset: 4px; }
::selection { background: var(--yellow); }
.wrap { width: min(1120px, 100% - 32px); margin-inline: auto; }
main, .foot { position: relative; }
main { overflow-x: clip; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: .92; margin: 0; }
.kicker { font: 400 12px/1.3 var(--body); letter-spacing: .26em; text-transform: uppercase; }
.hand { font-family: var(--groove); color: var(--pink-hot); }
.tk { font: italic 400 .8em/1.3 var(--display); opacity: .7; border-bottom: 1px dashed currentColor; }

/* Cream type with the trailer's stacked echoes and blue keyline */
.groovy {
  color: var(--cream); text-transform: uppercase; letter-spacing: .01em;
  -webkit-text-stroke: .028em var(--blue); paint-order: stroke fill;
  text-shadow: var(--echo);
}
.groovy.small, .sleeve h3, .statement p.big::first-letter { color: var(--maroon); -webkit-text-stroke: 0; }
.statement p.big::first-letter { text-shadow: var(--echo-light); }
.groovy.small { font-size: clamp(44px, 6.4vw, 86px); }

/* A sticker: cream pill with a hand-cut edge */
.sticker {
  display: inline-block; margin: 0; padding: 8px 18px; border-radius: 999px;
  background: var(--card-bg); color: var(--maroon);
  box-shadow: 3px 3px 0 var(--maroon-deep); transform: rotate(-2deg);
}
.sticker.center { display: table; margin: 0 auto 34px; }

/* ---------- Nav: a cream strip with a wavy hem ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px max(16px, calc((100% - 1180px) / 2)) 14px;
  background: var(--card-bg);
}
.nav::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; background: var(--card-bg); -webkit-mask: var(--wave) 0 0 / 120px 100% repeat-x; mask: var(--wave) 0 0 / 120px 100% repeat-x; rotate: 180deg; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 400 25px/1 var(--display); color: var(--maroon); white-space: nowrap; text-shadow: 1px 1px 0 var(--pink), 2px 2px 0 var(--yellow); }
.brand img { width: 46px; transition: transform .6s cubic-bezier(.3, 1.6, .5, 1); }
.brand:hover img { transform: rotate(-14deg) scale(1.08); }
.nav nav { display: flex; align-items: center; gap: clamp(14px, 2.6vw, 30px); font: 400 15px var(--groove); color: var(--maroon); }
.nav nav a { text-decoration: none; white-space: nowrap; }
.nav nav .out { color: var(--pink-hot); }

/* ---------- Hero: the stage ----------
   Red curtains part from the middle on load. Behind them: the trailer's swirls as the backdrop,
   three spotlights that swing to follow the lobster, and the title.
   Layers, back to front: backdrop + pool of light, beams, glow, lobster, type, curtain. */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: max(min(calc(100svh - 64px), 980px), 680px);
  display: grid; place-items: center; align-content: center; gap: 26px;
  padding: clamp(110px, 17vw, 210px) 16px clamp(50px, 5vw, 70px); /* clear of the painted swag */
  background: var(--maroon);
}
.backdrop { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.swirl {
  position: absolute; inset: -8%;
  background: var(--maroon) url("/alt/img/swirl.webp") center / cover;
  animation: lava 46s ease-in-out infinite alternate;
}
@keyframes lava { from { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.08) rotate(1.6deg) translate(1%, -1%); } to { transform: scale(1.04) rotate(-1.2deg) translate(-1%, 1%); } }
/* A spotlight on the lobster (alt.js moves --lx/--ly); the rest of the stage sits a little darker */
.spot {
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at var(--lx, 76%) var(--ly, 78%), rgb(255 228 170 / .3), transparent clamp(90px, 11vw, 170px)),
    radial-gradient(circle at var(--lx, 76%) var(--ly, 78%), transparent clamp(110px, 13vw, 200px), rgb(25 5 2 / .42) clamp(300px, 40vw, 640px));
}
.hero::after { /* a warm glow behind the title, like the trailer */
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(40% 34% at 50% 60%, rgb(120 30 20 / .7), rgb(90 20 14 / .3) 60%, transparent 80%);
}
/* Spotlights hung above the stage; alt.js aims them at the lobster (--a angle, --len reach) */
.beams { position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen; }
.beam {
  --from: .5;
  position: absolute; top: -12px; left: calc(var(--from) * 100%); width: clamp(160px, 18vw, 300px); height: var(--len, 80%);
  translate: -50% 0; transform-origin: 50% 0; rotate: var(--a, 0deg);
  background: linear-gradient(rgb(255 242 205 / .55), rgb(255 228 170 / .12) 85%, transparent);
  clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%); filter: blur(3px);
  opacity: 0; transition: opacity 1.4s ease .2s;
}
.hero.open .beam { opacity: 1; }
/* The title and tickets wait behind the curtain (alt.js adds .closed, then .open as it parts) */
.hero.closed .title-card *, .hero.closed .tickets, .hero.closed .tickets * { animation-play-state: paused; }
.title-card { position: relative; z-index: 6; text-align: center; }
.hero h1 { font-size: clamp(60px, min(10vw, 15vh), 150px); display: flex; flex-direction: column; align-items: center; line-height: .9; }
.hero h1 .word:last-child { font-size: 1.22em; }
/* The title moves like the trailer's: the letters pop in, the echoes fan out from behind them,
   then the echoes keep circling and the letters bob in a slow wave. */
@property --ex { syntax: "<number>"; inherits: true; initial-value: .035; } /* echo step, in em */
@property --ey { syntax: "<number>"; inherits: true; initial-value: .035; }
@property --spread { syntax: "<number>"; inherits: true; initial-value: 1; } /* hover fans the echoes wider */
.hero h1 {
  text-shadow:
    calc(var(--ex) * var(--spread) * 1em) calc(var(--ey) * var(--spread) * 1em) 0 var(--pink),
    calc(var(--ex) * var(--spread) * 2em) calc(var(--ey) * var(--spread) * 2em) 0 var(--orange),
    calc(var(--ex) * var(--spread) * 2.9em) calc(var(--ey) * var(--spread) * 2.9em) 0 var(--yellow),
    calc(var(--ex) * var(--spread) * 3.75em) calc(var(--ey) * var(--spread) * 3.75em) 0 var(--pink-hot),
    calc(var(--ex) * var(--spread) * 4.45em) calc(var(--ey) * var(--spread) * 4.45em) 0 var(--blue);
  animation: fan-out 1.1s cubic-bezier(.3, 1.7, .5, 1) .9s both, orbit 7s ease-in-out 2s infinite;
  transition: --spread .5s cubic-bezier(.3, 1.8, .5, 1);
}
.hero h1:hover { --spread: 1.7; }

/* The same live echoes for titles on cream: they fan out when their card is pasted in,
   circle slowly, and spread wider on hover. */
.echo-live {
  --k: 1.7; /* smaller type needs a bigger step to show its echoes */
  text-shadow:
    calc(var(--ex) * var(--spread) * var(--k) * .86em) calc(var(--ey) * var(--spread) * var(--k) * .86em) 0 var(--pink-hot),
    calc(var(--ex) * var(--spread) * var(--k) * 1.7em) calc(var(--ey) * var(--spread) * var(--k) * 1.7em) 0 var(--orange),
    calc(var(--ex) * var(--spread) * var(--k) * 2.55em) calc(var(--ey) * var(--spread) * var(--k) * 2.55em) 0 var(--yellow),
    calc(var(--ex) * var(--spread) * var(--k) * 3.3em) calc(var(--ey) * var(--spread) * var(--k) * 3.3em) 0 var(--blue);
  animation: orbit 7s ease-in-out infinite;
  transition: --spread .5s cubic-bezier(.3, 1.8, .5, 1);
}
@keyframes spread-in { from { --spread: 0; } to { --spread: 1; } }
.cut-in:not(.in) .echo-live { --spread: 0; }
.cut-in.in .echo-live { animation: spread-in 1.1s cubic-bezier(.3, 1.7, .5, 1) .35s backwards, orbit 7s ease-in-out infinite; }
.section-head:hover .echo-live, .sleeve:hover .echo-live { --spread: 1.6; }
.tickets a:hover .echo-live { --spread: 1.4; }
@keyframes fan-out { from { --ex: 0; --ey: 0; } to { --ex: .035; --ey: .035; } }
@keyframes orbit {
  0%, 100% { --ex: .035; --ey: .035; }
  25% { --ex: .055; --ey: .02; }
  50% { --ex: .04; --ey: .058; }
  75% { --ex: .015; --ey: .04; }
}
.hero h1 .ch { animation: pop-in .7s cubic-bezier(.3, 1.6, .5, 1) forwards, bob 3.4s ease-in-out 1.4s infinite; }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -.06em; } }
[data-letters] .word { display: inline-flex; }
[data-letters] .ch {
  display: inline-block; transform-origin: 50% 85%;
  transition: transform .45s cubic-bezier(.3, 1.9, .5, 1);
  opacity: 0; animation: pop-in .7s cubic-bezier(.3, 1.6, .5, 1) forwards;
}
[data-letters] .ch:hover { transform: translateY(-.12em) rotate(-8deg) scale(1.06); }
@keyframes pop-in { from { opacity: 0; transform: translateY(.4em) scale(.6) rotate(-10deg); } to { opacity: 1; transform: none; } }
.tagline {
  display: inline-block; margin: 22px 0 0; padding: 4px 22px 10px;
  font: 400 clamp(22px, 2.8vw, 34px) var(--groove); color: var(--maroon);
  background: var(--pink); border-radius: 999px; transform: rotate(-3deg);
  box-shadow: 4px 4px 0 var(--maroon-deep);
}
/* Once the title has popped in, the tagline and then the two tickets are dealt in one by one
   (scale/translate, so their rotate transforms and hovers are untouched) */
.tagline { animation: deal-in .6s cubic-bezier(.3, 1.6, .5, 1) 1.5s backwards; }
.tickets a { animation: deal-in .6s cubic-bezier(.3, 1.6, .5, 1) 1.8s backwards; }
.tickets li:nth-child(2) a { animation-delay: 2.05s; }
@keyframes deal-in { from { opacity: 0; translate: 0 .9em; scale: .7; } }
/* What the lobster says when clicked: a speech bubble that rides above him, in front of the tickets */
.puppet-note {
  position: absolute; z-index: 7; left: clamp(130px, var(--lx, 50%), calc(100% - 130px)); top: var(--ly, 80%);
  translate: -50% calc(-100% - clamp(56px, 7vw, 96px)); width: max-content; max-width: min(260px, 70vw); margin: 0; padding: 8px 18px 11px;
  font: 400 18px/1.2 var(--groove); color: var(--maroon); text-align: center; pointer-events: none;
  background: var(--cream); border-radius: 20px; box-shadow: 3px 3px 0 var(--maroon-deep);
  transition: opacity .25s, scale .35s cubic-bezier(.3, 1.8, .5, 1);
}
.puppet-note::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -9px; border: 9px solid transparent; border-top-color: var(--cream); border-bottom: 0; }
.puppet-note:empty { opacity: 0; scale: .5; }

/* The lobster chases the ticket cursor about the stage (alt.js sets translate, rotate and scale) */
.hero .puppet {
  position: absolute; z-index: 2; left: 0; top: 0; width: clamp(130px, 16vw, 250px);
  translate: calc(76vw - 50%) 60vh;
}
.hero .puppet.tucked { opacity: 0; } /* touch screens: out of sight until the Soul Credit ticket lands on him */
.hero .puppet.walking { animation: trot .15s steps(2) infinite; }
@keyframes trot { 50% { transform: translateY(-3%) rotate(1.5deg); } } /* transform only: translate/rotate place him */
/* Close to the ticket, he snaps his big claw at it */
.hero .puppet.snap .claw-big { animation: snap .32s ease-in-out infinite alternate; }
@keyframes snap { from { transform: rotate(-12deg); } to { transform: rotate(10deg); } }

/* The curtain: painted pieces from ASSETS (paper made transparent). Both panels start closed, meeting
   in the middle, then are drawn out to the sides, tops leading and hems trailing, until they leave the
   frame; then the gilded pelmet flies up out of sight. Pure CSS, so it opens without JS. */
.curtain { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.curtain .half {
  position: absolute; inset: 0; transform-origin: 0 0;
  background: url("/alt/img/curtain/left.webp") left top / 100% 100% no-repeat;
  filter: drop-shadow(0 12px 18px rgb(20 4 2 / .4));
  animation: open-l 3.2s cubic-bezier(.55, 0, .35, 1) .6s both;
}
.curtain .half.r { background-image: url("/alt/img/curtain/right.webp"); background-position: right top; transform-origin: 100% 0; animation-name: open-r; }
/* Each panel starts stretched ~4% from its outer edge so the two meet all the way up */
@keyframes open-l {
  from { transform: scaleX(1.04); }
  40% { transform: translateX(-34%) skewX(5deg); }
  to { transform: translateX(-106%) skewX(2deg); }
}
@keyframes open-r {
  from { transform: scaleX(1.04); }
  40% { transform: translateX(34%) skewX(-5deg); }
  to { transform: translateX(106%) skewX(-2deg); }
}
.curtain .valance {
  position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 1869 / 284;
  background: url("/alt/img/curtain/valance.webp") center top / 100% 100% no-repeat;
  filter: drop-shadow(0 8px 10px rgb(20 4 2 / .45));
  animation: fly-out 1.3s cubic-bezier(.5, 0, .75, .3) 3.5s both; /* as the panels clear the frame */
}
@keyframes fly-out { 12% { transform: translateY(4%); } to { transform: translateY(-130%); } }

/* In the stage and the header the cursor is a tiny ticket, and the lobster chases it */
.nav, .nav *, .hero, .hero * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='22' viewBox='0 0 34 22'%3E%3Cg transform='rotate(-8 17 11)'%3E%3Cpath d='M3 3h28v5a3 3 0 0 0 0 6v5H3v-5a3 3 0 0 0 0-6z' fill='%23fdf5c9' stroke='%235c1610' stroke-width='2'/%3E%3Cpath d='M11 6v10' stroke='%23ee5f99' stroke-width='1.5' stroke-dasharray='2 2'/%3E%3Cpath d='M15 9h11M15 13h8' stroke='%235c1610' stroke-width='1.5'/%3E%3C/g%3E%3C/svg%3E") 4 4, pointer;
}

/* Tonight's tickets */
.tickets { position: relative; z-index: 6; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; }
.tickets a {
  display: grid; min-width: min(300px, 82vw); padding: 14px 26px 16px; text-align: center; text-decoration: none;
  background: var(--card-bg); color: var(--maroon);
  border-radius: 14px; box-shadow: 4px 4px 0 var(--pink), 8px 8px 0 var(--orange), 11px 11px 0 var(--maroon-deep);
  /* ticket notches */
  -webkit-mask: radial-gradient(circle 11px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 11px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 11px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
  transform: rotate(-2deg); transition: transform .45s cubic-bezier(.3, 1.8, .5, 1);
}
.tickets li:nth-child(2) a { transform: rotate(2.5deg); }
/* The tickets sway on their own, and their titles' echoes fan out after the big title's */
.tickets li { animation: ticket-sway 4.6s ease-in-out infinite alternate; }
.tickets li:nth-child(2) { animation-duration: 3.8s; animation-delay: -1.2s; }
@keyframes ticket-sway { from { rotate: -1.6deg; translate: 0 2px; } to { rotate: 1.8deg; translate: 0 -4px; } }
.tickets .echo-live { --k: .8; animation: spread-in 1.1s cubic-bezier(.3, 1.7, .5, 1) 2.2s backwards, orbit 6s ease-in-out infinite; }
.tickets li:nth-child(2) .echo-live { animation-delay: 2.45s, -2s; animation-duration: 1.1s, 8s; }
/* "Coming soon" flickers like a dressing-room bulb */
.tickets .soon .when { animation: bulb 3.2s steps(1) infinite; }
@keyframes bulb { 0%, 100% { opacity: 1; } 8% { opacity: .35; } 10% { opacity: 1; } 13% { opacity: .5; } 15% { opacity: 1; } }
.tickets a:hover { transform: rotate(0) translateY(-6px) scale(1.04); color: var(--maroon); }
.tickets .when { font: 400 11px var(--body); letter-spacing: .26em; text-transform: uppercase; color: var(--pink-hot); }
.tickets .what { font: 400 clamp(28px, 3vw, 36px)/1.05 var(--display); }
.tickets .how { font: italic 400 15px var(--display); opacity: .8; }

/* ---------- Statement ---------- */
.section { position: relative; padding: clamp(60px, 7vw, 100px) 0; }
.statement { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.statement .kicker { color: var(--pink-hot); margin: 0; }
.statement p.big { font: 400 clamp(25px, 3vw, 36px)/1.3 var(--display); margin: 16px 0 0; color: var(--maroon); }
.statement p.big::first-letter { float: left; font-size: 3.1em; line-height: .95; margin: .02em .12em 0 0; }
.statement p.big em { font-style: normal; font-family: var(--groove); color: var(--maroon); background: linear-gradient(transparent 55%, var(--pink) 55% 92%, transparent 92%); padding: 0 .1em; }
.tape { position: absolute; z-index: 2; width: 110px; height: 30px; background: rgb(249 139 184 / .72); top: -14px; left: 50%; margin-left: -55px; transform: rotate(-4deg); box-shadow: 0 1px 2px rgb(0 0 0 / .15); }

/* Paste-in reveal */
.cut-in { opacity: 0; transform: translateY(26px) rotate(var(--r, -1deg)) scale(.96); transition: opacity .7s, transform .9s cubic-bezier(.25, 1.7, .45, 1); }
.cut-in.in { opacity: 1; transform: translateY(0) rotate(var(--r2, 0deg)); }

/* ---------- Award ribbon: a tilted pink band ---------- */
.ribbon {
  position: relative; z-index: 3; margin: 70px -120px; overflow: hidden; padding: 14px 0;
  background: var(--yellow) var(--noise); color: var(--maroon); transform: rotate(-4deg);
  border-block: 4px solid var(--maroon); box-shadow: 0 6px 0 var(--pink-hot), 0 12px 0 var(--orange);
  font: 400 22px var(--groove);
}
.ribbon .track { display: flex; gap: 44px; width: max-content; animation: marquee 60s linear infinite; }
/* Each award sits between two laurel branches, like a festival laurel */
.ribbon span::before, .ribbon span::after {
  content: ""; display: inline-block; width: .95em; height: 1.6em; vertical-align: -.4em; background: var(--maroon);
  -webkit-mask: url("/alt/img/laurel-branch.svg") center / contain no-repeat; mask: url("/alt/img/laurel-branch.svg") center / contain no-repeat;
}
.ribbon span::before { margin-right: .35em; }
.ribbon span::after { margin-left: .35em; scale: -1 1; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Slate: films as record sleeves ---------- */
.section-head { text-align: center; margin-bottom: 54px; }
.section-head .kicker { color: var(--pink-hot); margin: 0 0 8px; }
.slate { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(44px, 6vw, 90px); align-items: start; }
.sleeve {
  position: relative; display: block; padding: 22px 22px 28px; text-decoration: none; color: var(--maroon);
  background: var(--card-bg); border: 3px solid var(--maroon); border-radius: 22px;
  box-shadow: var(--stack);
}
.sleeve:nth-child(2) { margin-top: 70px; }
.sleeve:hover { color: var(--maroon); animation: wobble .8s ease-in-out; }
@keyframes wobble { 25% { rotate: -2.2deg; } 55% { rotate: 1.6deg; } 80% { rotate: -.6deg; } }
.sleeve .frame { border-radius: 14px; overflow: hidden; border: 3px solid var(--maroon); }
.sleeve .frame img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .8s, filter .6s; filter: saturate(1.15) contrast(1.05); }
.sleeve:hover .frame img { transform: scale(1.06) rotate(.6deg); }
.sleeve .bill-head { margin: 18px 0 0; text-align: center; font: 400 11px var(--body); letter-spacing: .24em; text-transform: uppercase; color: var(--pink-hot); }
.sleeve h3 { text-align: center; font-size: clamp(44px, 5.2vw, 70px); margin: 8px 0 0; text-transform: uppercase; }
.sleeve .sub { text-align: center; margin: 10px 0 14px; font: 400 22px var(--groove); color: var(--maroon); }
.sleeve p { margin: 0 0 14px; }
.sleeve .facts { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 12px; border-top: 3px dotted var(--maroon); font: 400 11px var(--body); letter-spacing: .2em; text-transform: uppercase; }
.sleeve .go { display: inline-block; margin-top: 18px; padding: 4px 16px 8px; border-radius: 999px; background: var(--maroon); color: var(--cream); font: 400 18px var(--groove); }
.burst { /* a starburst sticker */
  position: absolute; z-index: 3; right: -26px; top: -30px; width: 116px; aspect-ratio: 1;
  display: grid; place-items: center; text-align: center;
  font: 400 12px/1.05 var(--groove); color: var(--maroon);
  background: var(--yellow);
  clip-path: polygon(50% 0, 59% 13%, 75% 6%, 76% 22%, 93% 25%, 86% 40%, 100% 50%, 86% 60%, 93% 75%, 76% 78%, 75% 94%, 59% 87%, 50% 100%, 41% 87%, 25% 94%, 24% 78%, 7% 75%, 14% 60%, 0 50%, 14% 40%, 7% 25%, 24% 22%, 25% 6%, 41% 13%);
  animation: spin 24s linear infinite;
}
.burst > span { animation: spin 24s linear infinite reverse; }
.burst b { display: block; font: 400 34px/1 var(--display); color: var(--orange); }
.burst.pink { background: var(--pink); font-size: 18px; }
@keyframes spin { to { rotate: 360deg; } }

/* ---------- Laurels: a wreath (alt/img/laurel.svg, drawn by scripts/laurel_svg.py) around the award ---------- */
.laurel {
  position: relative; display: grid; align-content: center; justify-items: center; aspect-ratio: 1; padding: 0 22%;
  text-align: center; color: var(--orange); /* the wreath */
  transition: transform .45s cubic-bezier(.3, 1.8, .5, 1);
}
.laurel svg { position: absolute; inset: 0; width: 100%; height: 100%; filter: drop-shadow(.06em .06em 0 var(--yellow)); transition: color .25s, rotate .6s cubic-bezier(.3, 1.8, .5, 1); }
.laurel .award { position: relative; font: 400 var(--fa, 15px)/1.02 var(--groove); color: var(--maroon); }
.laurel .fest { position: relative; margin-top: .45em; font: 400 var(--ff, 8.5px)/1.25 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--maroon); opacity: .85; }
.laurel .yr { position: relative; margin-top: .4em; font: 400 var(--ff, 8.5px)/1 var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--pink-hot); }
.laurel:hover { transform: rotate(-5deg) scale(1.08); }
.laurel:hover svg { color: var(--pink-hot); rotate: 8deg; }
/* A row of three on the Bad Vintage sleeve */
.laurel-row { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 14px -8px 0; padding: 0; }
.laurel-row .laurel:nth-child(2) svg { color: var(--pink-hot); }
.laurel-row .laurel:nth-child(2):hover svg { color: var(--orange); }
.sleeve.in .laurel-row .laurel { animation: laurel-pop .7s cubic-bezier(.3, 1.8, .5, 1) backwards; }
.sleeve.in .laurel-row .laurel:nth-child(1) { animation-delay: .5s; }
.sleeve.in .laurel-row .laurel:nth-child(2) { animation-delay: .65s; }
.sleeve.in .laurel-row .laurel:nth-child(3) { animation-delay: .8s; }
@keyframes laurel-pop { from { opacity: 0; scale: .4; rotate: -20deg; } }

/* ---------- Distributors: the script page taped onto the swirls ---------- */
.swirl-band { background: #f4e6d6 url("/alt/img/swirl-wide.webp") center / cover; } /* one wide painting, no tiling */
.swirl-band::before, .swirl-band::after { content: ""; position: absolute; left: 0; right: 0; height: 36px; background: var(--paper-bg); -webkit-mask: var(--wave) 0 0 / 260px 100% repeat-x; mask: var(--wave) 0 0 / 260px 100% repeat-x; }
.swirl-band::before { top: -1px; rotate: 180deg; }
.swirl-band::after { bottom: -1px; }
.swirl-band { padding-block: clamp(90px, 10vw, 140px); }
.script-page {
  position: relative; width: min(760px, 100%); margin-inline: auto; padding: clamp(40px, 6vw, 72px) clamp(24px, 7vw, 92px);
  font: 400 17px/1.5 var(--script); color: #1f1a16; background: linear-gradient(rgb(255 252 240 / .7) 0 0), var(--paper) url("/alt/img/paper.jpg") center / 900px;
  box-shadow: 10px 10px 0 var(--maroon-deep);
}
.script-page .tape.l { left: 8%; margin: 0; transform: rotate(-8deg); }
.script-page .tape.r { left: auto; right: 8%; margin: 0; transform: rotate(6deg); background: rgb(247 196 48 / .75); }
.script-page .slug { text-transform: uppercase; font-weight: 700; margin: 0 0 18px; }
.script-page .action { margin: 0 0 18px; }
.script-page .char { text-align: center; text-transform: uppercase; margin: 26px 0 0; }
.script-page .paren { text-align: center; margin: 0; }
.script-page .dialogue { width: min(380px, 100%); margin: 0 auto 18px; }
.script-page .trans { text-align: right; text-transform: uppercase; margin: 24px 0 0; }
.script-page .num { position: absolute; right: 26px; top: 22px; font-size: 14px; }
.untyped { visibility: hidden; }
.caret::after { content: "▌"; animation: blink .9s steps(1) infinite; margin-left: 1px; }
@keyframes blink { 50% { opacity: 0; } }

/* Pill buttons with a print-echo shadow */
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin-top: 40px; }
.btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 26px 14px; border-radius: 999px; cursor: pointer; text-decoration: none;
  font: 400 19px var(--groove); color: var(--cream); background: var(--pink-hot);
  border: 3px solid var(--maroon-deep); box-shadow: 4px 4px 0 var(--yellow), 8px 8px 0 var(--maroon-deep);
  transition: transform .35s cubic-bezier(.3, 1.8, .5, 1), box-shadow .35s;
}
.btn:hover { color: var(--cream); transform: translate(-2px, -3px) rotate(-2deg); box-shadow: 6px 7px 0 var(--yellow), 11px 12px 0 var(--maroon-deep); }
.btn.alt { color: var(--maroon); background: var(--cream); }
.btn.alt:hover { color: var(--maroon); }
.btn .tk { font-size: 13px; }

/* ---------- Contact: the typed script page, taped onto the swirls ---------- */
.script-title { margin: 6px 0 16px; text-align: center; font: 700 clamp(22px, 3vw, 30px)/1.2 var(--script); text-transform: uppercase; text-decoration: underline; text-underline-offset: 6px; letter-spacing: .04em; }
.script-page .note { /* a sticky note taped to the corner */
  position: absolute; z-index: 3; top: -22px; right: -26px; width: 190px; margin: 0; padding: 22px 16px 16px;
  font: 400 17px/1.25 var(--groove); color: var(--maroon); text-align: center;
  background: var(--yellow); rotate: 4deg; box-shadow: 4px 6px 0 rgb(58 8 6 / .35);
}
.script-page .note::before { content: ""; position: absolute; top: -10px; left: 50%; width: 70px; height: 22px; margin-left: -35px; background: rgb(249 139 184 / .75); rotate: -6deg; }
.script-page.letter label { font: 400 14px var(--script); letter-spacing: .08em; color: #1f1a16; }
.script-page.letter input, .script-page.letter textarea, .script-page.letter select { font: 400 18px var(--script); border-bottom: 2px dotted #1f1a16; }
.script-page.letter select { background: linear-gradient(45deg, transparent 50%, #1f1a16 50%) right 6px center / 9px 9px no-repeat; }
.letter form { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.letter label { display: grid; gap: 4px; font: 400 11px var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--maroon); }
.letter .full { grid-column: 1 / -1; }
.letter input, .letter textarea, .letter select {
  font: 400 20px var(--display); color: var(--ink); background: transparent;
  border: 0; border-bottom: 3px dotted var(--maroon); padding: 6px 0; border-radius: 0; resize: vertical;
}
.letter select { appearance: none; background: linear-gradient(45deg, transparent 50%, var(--maroon) 50%) right 6px center / 9px 9px no-repeat; }
.letter input:focus, .letter textarea:focus, .letter select:focus { outline: none; border-bottom: 3px solid var(--pink-hot); }
.letter .hp { position: absolute; left: -9999px; }
.seal { /* a starburst sticker, like the badges */
  justify-self: start; width: 108px; aspect-ratio: 1; border: 0; cursor: pointer;
  display: grid; place-items: center; font: 400 17px/1 var(--groove); color: var(--maroon);
  background: radial-gradient(circle, var(--yellow) 0 40%, var(--pink) 41%);
  clip-path: polygon(50% 0, 59% 13%, 75% 6%, 76% 22%, 93% 25%, 86% 40%, 100% 50%, 86% 60%, 93% 75%, 76% 78%, 75% 94%, 59% 87%, 50% 100%, 41% 87%, 25% 94%, 24% 78%, 7% 75%, 14% 60%, 0 50%, 14% 40%, 7% 25%, 24% 22%, 25% 6%, 41% 13%);
  transition: transform .4s cubic-bezier(.3, 1.8, .5, 1);
}
.seal:hover { transform: rotate(30deg) scale(1.06); }
.seal.stamped { animation: stamp .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes stamp { 0% { transform: scale(1.5) rotate(-60deg); } 100% { transform: scale(1) rotate(0); } }
.form-status { grid-column: 1 / -1; margin: 0; min-height: 1.4em; font: italic 400 17px var(--display); }

/* ---------- Work-in-progress film pages: one typed script page on the swirls ---------- */
.wip { min-height: calc(100svh - 64px); display: grid; align-content: center; }
.script-page .facts { margin: -6px 0 22px; font: 400 13px var(--body); letter-spacing: .2em; text-transform: uppercase; color: var(--pink-hot); }
.script-page .back { margin: 34px 0 0; text-align: center; }

/* ---------- Film pages (Bad Vintage): the title on the swirls, the film, laurels, story, stills ---------- */
.film-top {
  position: relative; isolation: isolate; overflow: hidden; padding: clamp(60px, 8vw, 110px) 0 clamp(70px, 8vw, 110px); color: var(--cream);
  background: var(--maroon) url("/alt/img/swirl.webp") center / cover;
}
.film-top::before { /* the same warm glow as the stage, so the cream type reads on the swirls */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(60% 70% at 30% 50%, rgb(70 12 8 / .82), rgb(70 12 8 / .45) 70%, rgb(70 12 8 / .2));
}
.film-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(36px, 5vw, 70px); align-items: center; }
.film-bill .sticker { transform: rotate(-3deg); }
.film-top h1 { margin: 26px 0 0; font-size: clamp(60px, 8.4vw, 124px); line-height: .9; }
.film-top .tagline { margin-top: 18px; animation: none; }
.film-specs { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 22px 0 0; font: 400 12px var(--body); letter-spacing: .22em; text-transform: uppercase; color: var(--pink); }
.film-top .laurel-row { margin: 22px 0 0; max-width: 520px; }
.film-top .laurel, .laurel-band .laurel { color: var(--yellow); }
.film-top .laurel svg, .laurel-band .laurel svg { filter: drop-shadow(.07em .07em 0 var(--pink-hot)); }
.film-top .laurel .award, .film-top .laurel .fest, .laurel-band .laurel .award, .laurel-band .laurel .fest { color: var(--cream); }
.film-top .laurel-row .laurel:nth-child(2) svg { color: var(--pink); }
.film-top .laurel-row .laurel { animation: laurel-pop .7s cubic-bezier(.3, 1.8, .5, 1) backwards; }
.film-top .laurel-row .laurel:nth-child(1) { animation-delay: .3s; }
.film-top .laurel-row .laurel:nth-child(2) { animation-delay: .45s; }
.film-top .laurel-row .laurel:nth-child(3) { animation-delay: .6s; }
.actions.left { justify-content: flex-start; margin-top: 28px; }
.sleeve.poster { margin: 0; padding: 18px 18px 14px; }
.sleeve.poster .frame img { aspect-ratio: 1600 / 980; }
.sleeve.poster.tall { justify-self: center; width: min(400px, 100%); }
.sleeve.poster.tall .frame { background: #fff; }
.sleeve.poster.tall .frame img { aspect-ratio: 2 / 3; object-fit: contain; }
.sleeve.poster figcaption a { color: var(--maroon); }
.sleeve.poster figcaption { margin-top: 10px; text-align: center; font: 400 20px var(--groove); color: var(--pink-hot); }
/* Until the film is uploaded, the play button gives way to a note (alt.js checks /media/) */
.screen[data-check] video { object-fit: cover; } /* the poster fills the frame; the film itself is 16:9 */
.screen-soon { display: none; }
.screen.unavailable .play { display: none; }
.screen.unavailable .screen-soon {
  position: absolute; inset: clamp(10px, 1.4vw, 18px); display: grid; place-content: center; justify-items: center; gap: 18px; margin: 0;
  border-radius: 6px; background: rgb(40 8 5 / .62); color: var(--cream); text-align: center; font: 400 clamp(20px, 2.4vw, 30px)/1.3 var(--groove);
}
.screen.unavailable .screen-soon .btn { font-size: 19px; }
/* All the laurels, gold on oxblood */
.laurel-band { color: var(--cream); background: radial-gradient(circle, rgb(249 139 184 / .2) 0 5px, transparent 6px) 0 0 / 34px 34px, var(--maroon) var(--noise); }
.laurel-band .groovy.small { color: var(--cream); -webkit-text-stroke: .028em var(--blue); text-shadow: var(--echo); }
.laurel-band .hand { margin: 14px 0 0; font-size: clamp(20px, 2.4vw, 28px); color: var(--pink); }
.laurel-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px 18px; margin: 0; padding: 0; }
.laurel-grid .laurel { --fa: 19px; --ff: 9.5px; padding: 0 21%; }
.laurel-grid .laurel:nth-child(3n + 2) svg { color: var(--pink); }
.laurel-grid .laurel:nth-child(3n) svg { color: var(--orange); }
.laurel-grid .laurel .yr { color: var(--yellow); }
.laurel-grid .laurel.bronze svg { color: #d69a5c; }
.laurel-grid .laurel.cut-in { transition-delay: calc(var(--i) * 70ms); }
.laurel-grid .laurel.cut-in.in:hover { transform: rotate(-5deg) scale(1.08); transition-delay: 0s; }
.noms { margin: 34px auto 0; max-width: 760px; text-align: center; font: italic 400 17px/1.5 var(--display); color: var(--pink); }
/* Stills on a table: drag them about, click for a closer look (em.js) */
.table-hint { margin: 16px 0 0; font: italic 400 17px var(--display); color: var(--maroon); }
.table { position: relative; height: clamp(560px, 62vw, 820px); touch-action: pan-y; }
.still {
  position: absolute; margin: 0; width: clamp(200px, 30vw, 360px); padding: 10px 10px 36px; cursor: grab;
  background: var(--card-bg); box-shadow: 4px 5px 0 var(--maroon-deep); transform: rotate(var(--rot));
  user-select: none; -webkit-user-select: none; touch-action: none; transition: box-shadow .3s;
}
.still img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; pointer-events: none; }
.still .cap { position: absolute; left: 12px; right: 12px; bottom: 6px; font: 400 17px var(--groove); color: var(--pink-hot); }
.still:hover { box-shadow: 6px 8px 0 var(--pink-hot), 10px 12px 0 var(--maroon-deep); }
.still.dragging { cursor: grabbing; box-shadow: 10px 16px 0 rgb(58 8 6 / .35); }
.lightbox { border: 0; padding: 14px 14px 50px; background: var(--card-bg); max-width: min(1200px, 94vw); box-shadow: var(--stack); }
.lightbox::backdrop { background: rgb(40 8 5 / .85); }
.lightbox img { max-height: 78vh; width: auto; }
.lightbox p { position: absolute; left: 18px; bottom: 12px; margin: 0; font: 400 20px var(--groove); color: var(--pink-hot); }
.lightbox button { position: absolute; right: 14px; bottom: 10px; border: 0; padding: 4px 16px 7px; border-radius: 999px; cursor: pointer; font: 400 16px var(--groove); color: var(--cream); background: var(--maroon); }

/* ---------- Footer: oxblood with pink dots ---------- */
.foot {
  margin-top: 60px; padding: 70px 16px 44px; text-align: center; color: var(--pink);
  background: radial-gradient(circle, rgb(249 139 184 / .22) 0 5px, transparent 6px) 0 0 / 34px 34px, var(--maroon) var(--noise);
  font: 400 15px/1.9 var(--body);
}
.foot::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 36px; margin-bottom: -1px; background: var(--maroon); -webkit-mask: var(--wave) 0 0 / 260px 100% repeat-x; mask: var(--wave) 0 0 / 260px 100% repeat-x; }
.foot a:hover { color: var(--cream); }
.foot .peek { width: 130px; margin: 0 auto 10px; rotate: -10deg; }
.foot .cross { font: 400 24px var(--groove); color: var(--cream); margin: 0 0 12px; }
.foot .small { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; opacity: .8; }


/* ---------- The flip book next to the studio blurb ----------
   Each frame is printed on its own paper page, pinned at the top like a pad. Hovered, the top page's
   bottom edge lifts up and over to show the next one underneath; edges of the pages below peek out. */
.flipbook { position: relative; margin: 0; cursor: pointer; transition: rotate .5s cubic-bezier(.3, 1.8, .5, 1); }
.flipbook .pages { position: relative; aspect-ratio: 640 / 470; perspective: 1100px; }
.flipbook .pages::before, .flipbook .pages::after { /* the block of pages underneath */
  content: ""; position: absolute; inset: 0; border-radius: 3px; background: var(--card-bg);
  box-shadow: 0 1px 0 rgb(31 23 17 / .25);
}
.flipbook .pages::before { translate: 7px 9px; rotate: 1.4deg; box-shadow: 0 1px 0 rgb(31 23 17 / .25), var(--stack); }
.flipbook .pages::after { translate: 3px 4px; rotate: .6deg; }
.flipbook .page {
  position: absolute; inset: 0; z-index: 1; padding: 12px 12px 0; border-radius: 3px;
  background: var(--card-bg); box-shadow: 0 1px 2px rgb(31 23 17 / .3);
  opacity: 0; transform-origin: 50% 0; backface-visibility: hidden;
}
.flipbook .page img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.flipbook .page .cap { display: block; padding: 6px 4px 0; text-align: center; font: 400 18px var(--groove); color: var(--pink-hot); }
.flipbook .page.on { opacity: 1; z-index: 2; }
/* The page being turned lifts from the bottom, toward you and up over the top */
.flipbook .page.lift { opacity: 1; z-index: 3; animation: lift .55s cubic-bezier(.45, 0, .75, .6) forwards; }
@keyframes lift {
  from { transform: none; }
  50% { filter: brightness(1.12); box-shadow: 0 18px 30px rgb(31 23 17 / .3); }
  to { transform: rotateX(110deg); filter: brightness(1.2); }
}
.flipbook:hover, .flipbook.flipping { rotate: -3deg; }
.flip-hint {
  position: absolute; z-index: 5; right: -16px; bottom: 30px; padding: 2px 14px 6px; border-radius: 999px;
  font: 400 17px var(--groove); color: var(--maroon); background: var(--yellow); rotate: 8deg;
  box-shadow: 3px 3px 0 var(--maroon-deep); animation: nudge 2.4s ease-in-out infinite;
}
@keyframes nudge { 0%, 70%, 100% { scale: 1; } 80% { scale: 1.15; } 90% { scale: .96; } }
.flipbook.flipping .flip-hint { animation: none; scale: 0; transition: scale .25s; }
.flipbook > .tape { z-index: 6; }

/* ---------- Divider: wavy stripes in the trailer's colours, drifting sideways ----------
   One 200×100 tile of five sine-wave stripes that repeats seamlessly; it slides one tile per loop. */
.wavy {
  --h: clamp(64px, 8vw, 110px);
  height: var(--h); margin: 50px 0 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 100' preserveAspectRatio='none'%3E%3Cg fill='none' stroke-width='15'%3E%3Cpath stroke='%235c1610' d='M-100 18C-50 32 -50 32 0 18S50 4 100 18S150 32 200 18S250 4 300 18'/%3E%3Cpath stroke='%23ee5f99' d='M-100 34C-50 48 -50 48 0 34S50 20 100 34S150 48 200 34S250 20 300 34'/%3E%3Cpath stroke='%23f2552a' d='M-100 50C-50 64 -50 64 0 50S50 36 100 50S150 64 200 50S250 36 300 50'/%3E%3Cpath stroke='%23f7c430' d='M-100 66C-50 80 -50 80 0 66S50 52 100 66S150 80 200 66S250 52 300 66'/%3E%3Cpath stroke='%234a9ac4' d='M-100 82C-50 96 -50 96 0 82S50 68 100 82S150 96 200 82S250 68 300 82'/%3E%3C/g%3E%3C/svg%3E") 0 50% / calc(var(--h) * 2) 100% repeat-x;
  animation: wave-drift 14s linear infinite;
}
@keyframes wave-drift { to { background-position: calc(var(--h) * -2) 50%; } }

/* ---------- Trailer: a plain box frame, wide ---------- */
.screen-note { margin: 34px 16px 0; text-align: center; font: 400 12px var(--body); letter-spacing: .24em; text-transform: uppercase; color: var(--maroon); }
.screen-note.co { margin-top: 12px; font-size: 15px; }
.screen-note.co a { color: var(--pink-hot); text-decoration-thickness: 2px; transition: color .3s, letter-spacing .4s; }
.screen-note.co a:hover { color: var(--orange); letter-spacing: .34em; }
.screen {
  position: relative; width: min(1200px, 100% - 32px); margin-inline: auto; padding: clamp(10px, 1.4vw, 18px);
  border-radius: 16px; background: var(--maroon) var(--noise); box-shadow: var(--stack);
}

.screen video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 6px; background: #000; }
/* An understated play button: a thin cream ring with a triangle, the words underneath */
.play {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; border: 0; padding: 0; cursor: pointer; background: none;
  display: grid; justify-items: center; gap: 14px; color: var(--cream);
  font: 400 13px var(--body); letter-spacing: .26em; text-transform: uppercase; white-space: nowrap; text-shadow: 0 1px 6px rgb(0 0 0 / .6);
}
.play svg { width: clamp(68px, 7vw, 96px); overflow: visible; transition: scale .4s cubic-bezier(.3, 1.8, .5, 1); }
.play circle { fill: rgb(12 3 2 / .35); stroke: rgb(253 245 201 / .9); stroke-width: 2.5; transition: fill .3s; }
.play path { fill: var(--cream); }
.play:hover svg { scale: 1.1; }
.play:hover circle { fill: rgb(238 95 153 / .5); }
.screen.playing .play { display: none; }

/* ---------- Everything answers the cursor ---------- */
.nav nav a, .sticker, .tagline, .statement p.big em, .sleeve .go, .burst, .foot .peek, .script-page, .script-page .note, .tape, .letter label {
  transition: transform .45s cubic-bezier(.3, 1.8, .5, 1), scale .45s cubic-bezier(.3, 1.8, .5, 1), rotate .45s cubic-bezier(.3, 1.8, .5, 1), translate .45s cubic-bezier(.3, 1.8, .5, 1), color .2s, background-color .2s, box-shadow .3s, text-shadow .3s;
}
.nav nav a { display: inline-block; }
.nav nav a:hover { transform: rotate(-5deg) scale(1.1); text-shadow: 1px 1px 0 var(--yellow), 2px 2px 0 var(--pink); }
.sticker:hover { transform: rotate(2deg) scale(1.06); box-shadow: 5px 5px 0 var(--pink-hot); }
.tagline:hover { background: var(--yellow); transform: rotate(2deg) scale(1.06); box-shadow: 4px 4px 0 var(--pink-hot), 8px 8px 0 var(--maroon-deep); }
.statement p.big em { display: inline-block; }
.nobr { white-space: nowrap; }
.statement p.big em:hover { transform: rotate(-3deg) scale(1.08); background: linear-gradient(transparent 30%, var(--yellow) 30% 95%, transparent 95%); }
.statement .kicker { display: inline-block; transition: letter-spacing .4s; }
.statement-band:hover .kicker { letter-spacing: .4em; }
.ribbon span { display: inline-block; transition: transform .35s cubic-bezier(.3, 1.8, .5, 1), color .2s; }
.ribbon span:hover { color: var(--cream); transform: scale(1.12) rotate(-2deg); text-shadow: 2px 2px 0 var(--maroon); }
.ribbon span::before, .ribbon span::after { transition: rotate .5s cubic-bezier(.3, 1.8, .5, 1), background-color .2s; }
.ribbon span:hover::before { rotate: -14deg; background-color: var(--pink-hot); }
.ribbon span:hover::after { rotate: 14deg; background-color: var(--pink-hot); }
.sleeve:hover .go { translate: 8px 0; background: var(--pink-hot); }
.sleeve:hover .burst, .burst:hover { scale: 1.18; }
.sleeve .facts span { transition: color .2s; }
.sleeve:hover .facts span:nth-child(2) { color: var(--pink-hot); }
.script-page:hover { translate: 0 -6px; rotate: -.6deg; box-shadow: 16px 16px 0 var(--maroon-deep); }
.script-page:hover .tape.l { rotate: -6deg; }
.script-page:hover .tape.r { rotate: 8deg; }
.script-page:hover .note { rotate: 7deg; scale: 1.05; }
.letter label:hover { color: var(--pink-hot); }
.btn .tk { transition: opacity .2s; }
.foot .peek:hover { animation: scuttle .18s steps(2) 4; }
@keyframes scuttle { 50% { translate: 4px -3px; rotate: -4deg; } }
.foot .cross a { display: inline-block; transition: transform .4s cubic-bezier(.3, 1.8, .5, 1); }
.foot .cross a:hover { transform: rotate(-4deg) scale(1.08); color: var(--yellow); }

/* ---------- The jointed lobster (same rig as the theatre version) ---------- */
.puppet {
  display: block; aspect-ratio: 4354 / 3008; border: 0; padding: 0; background: none; cursor: pointer;
  filter: drop-shadow(6px 14px 10px rgb(20 2 0 / .45));
}
.puppet .part { position: absolute; display: block; height: auto; max-width: none; pointer-events: none; transition: transform .7s cubic-bezier(.3, 1.4, .5, 1), opacity .5s; }
.puppet .joint        { left: 14.03%; top: 23.54%; width: 21.84%; }
.puppet .claw-far     { left: 0;      top: 31.38%; width: 36.84%; transform-origin: 92% 6%; }
.puppet .antenna-up   { left: 24.53%; top: 8.94%;  width: 52.96%; transform-origin: 1% 97%; }
.puppet .body         { left: 8.57%;  top: 0;      width: 91.43%; }
.puppet .antenna-flat { left: 28.71%; top: 38.03%; width: 61.83%; transform-origin: 0 10%; }
.puppet .claw-big     { left: 25.72%; top: 56.08%; width: 27.29%; transform-origin: 85% 4%; }
.puppet .brass { position: absolute; width: 1.6%; aspect-ratio: 1; border-radius: 50%; translate: -50% -50%; z-index: 2;
  background: radial-gradient(circle at 35% 30%, #fff1c4, #d8b56a 35%, #b0852f 60%, #6e5016);
  box-shadow: 0 1px 2px rgb(0 0 0 / .45); opacity: 0; transition: opacity .3s .1s; }
.puppet .brass.b1 { left: 49.1%; top: 57.2%; }
.puppet .brass.b2 { left: 34.1%; top: 33.3%; }
.puppet.assembled .brass { opacity: 1; }
.puppet .claw-far { --fx: -14%; --fy: 10%; --fr: -30deg; transition-delay: .35s; }
.puppet .claw-big { --fx: 4%; --fy: 26%; --fr: 40deg; transition-delay: .5s; }
.puppet .joint { --fx: -8%; --fy: -6%; transition-delay: .2s; }
.puppet .antenna-up { --fx: 10%; --fy: -20%; --fr: 12deg; transition-delay: .65s; }
.puppet .antenna-flat { --fx: 16%; --fy: 8%; --fr: -10deg; transition-delay: .75s; }
.puppet .body { --fy: -6%; }
.puppet:not(.assembled) .part { transform: translate(var(--fx, 0), var(--fy, 0)) rotate(var(--fr, 0deg)); opacity: 0; }
.puppet.settled .part { transition-delay: 0s; }

/* Pastel marks and cursor trail (drawn by em.js) */
#marks { position: absolute; left: 0; top: 0; width: 100%; z-index: 40; pointer-events: none; overflow: hidden; }
#marks canvas { position: absolute; mix-blend-mode: multiply; }
#trail { position: fixed; inset: 0; z-index: 60; pointer-events: none; }

/* ---------- Small screens ---------- */
@media (max-width: 820px) {
  body { font-size: 17px; }
  .nav nav .hide-sm { display: none; }
  .nav nav { gap: 12px; font-size: 14px; }
  .brand { font-size: 21px; }
  .beam { width: 130px; }
  .curtain .half { background-size: cover; } /* tall screens: crop the panels rather than stretch them */
  .script-page .note { top: -40px; right: -8px; width: 150px; font-size: 15px; padding: 18px 12px 12px; }
  .statement, .slate { grid-template-columns: 1fr; }
  .sleeve:nth-child(2) { margin-top: 0; }
  .burst { right: -8px; width: 92px; }
  .burst b { font-size: 28px; }
  .laurel-row .laurel { --fa: 12.5px; --ff: 7px; padding: 0 20%; }
  .film-grid { grid-template-columns: 1fr; }
  .film-top .laurel-row { margin-inline: -6px; }
  .sleeve.poster .burst { right: -6px; }
  .laurel-grid { grid-template-columns: repeat(2, 1fr); gap: 0 6px; }
  .laurel-grid .laurel { --fa: 14px; --ff: 7.5px; padding: 0 24%; }
  .laurel-grid .laurel .fest, .laurel-row .laurel .fest { letter-spacing: .06em; }
  /* A phone shows the stills as a tidy pile of prints; tap one for a closer look */
  .table { height: auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 12px; }
  .still { position: static; width: auto; padding: 6px 6px 28px; }
  .still .cap { font-size: 14px; bottom: 4px; left: 8px; }
  /* Soul Credit's rushes: just the frames on a phone, no hint or captions */
  .table-hint.hide-sm, .bare-sm .still .cap { display: none; }
  .bare-sm .still { padding: 6px; }
  .letter form { grid-template-columns: 1fr; }
  /* Room under the tickets for the lobster (alt.js starts him there on narrow screens) */
  .hero { padding-bottom: 130px; }
  /* Thumb-sized tap targets, without making the header or footer any taller */
  .nav nav a { padding: 12px 2px; margin: -12px -2px; }
  .foot a { display: inline-block; padding: 10px 4px; margin: -10px -4px; }
  .letter input, .letter select { min-height: 44px; }
  /* Small caps type stays readable on a phone */
  .kicker, .sleeve .bill-head, .letter label { font-size: 13px; }
  .tickets .how { text-wrap: balance; }
  .tickets .when, .sleeve .facts, .foot .small, .screen-note { font-size: 12.5px; letter-spacing: .18em; }
  /* No hover on a phone: a tap gives the same lift */
  .tickets a:active { transform: rotate(0) translateY(-6px) scale(1.04); }
  .sleeve:active .frame img { transform: scale(1.06) rotate(.6deg); }
  }
/* Touch screens: the Slate cards beckon by themselves once they're in. Every few seconds the card
   gives a little wobble, its "Step inside" button tugs, and the still drifts slowly. */
@media (hover: none) and (prefers-reduced-motion: no-preference) {
  /* The lobster hides under the Soul Credit ticket but walks over the Bad Vintage one, which sits
     below it on a phone (alt.js) */
  .tickets { z-index: auto; row-gap: 72px; } /* stacked on a phone: room for him to peek out between them */
  .tickets li { position: relative; z-index: 6; }
  .tickets li:not(.soon) { z-index: 2; }
  .hero .puppet { z-index: 3; }
  .sleeve.in { animation: beckon 5.5s ease-in-out 1.2s infinite; }
  .sleeve.in:nth-child(2) { animation-delay: 3.9s; }
  .sleeve.in .go { animation: tug 2.8s ease-in-out 1.6s infinite; }
  .sleeve.in:nth-child(2) .go { animation-delay: 3s; }
  .sleeve.in .frame img { animation: drift 9s ease-in-out infinite alternate; }
  .sleeve.in:nth-child(2) .frame img { animation-duration: 11s; animation-delay: -4s; }
}
@keyframes beckon { 0%, 22%, 100% { rotate: 0deg; } 5% { rotate: -1.8deg; } 11% { rotate: 1.3deg; } 17% { rotate: -.5deg; } }
@keyframes tug { 0%, 60%, 100% { transform: none; } 68% { transform: translateX(5px) rotate(-3deg) scale(1.06); } 76% { transform: translateX(-2px) rotate(2deg); } 84% { transform: translateX(3px) rotate(-1deg); } }
@keyframes drift { from { transform: scale(1.02); } to { transform: scale(1.09) translate(-1.5%, -1%) rotate(.5deg); } }
@media (max-width: 480px) {
  .brand-text { display: none; }
  .brand { padding: 8px 0; margin: -8px 0; }
  .brand img { width: 40px; flex-shrink: 0; }
  .nav nav { gap: 9px; font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
  .cut-in, [data-letters] .ch { opacity: 1; transform: none; }
  .curtain .half, .curtain .valance { display: none; }
}