/* Duck the Rules — landing page

   A full-width bathroom wall with the logo across it, crumbling away into a bento grid of tiles.
   Caution tape across the page, then the wall again: what you do in the game in giant words, with
   screenshots taped over them. The class photos edge to edge, the rules on a cork board and the
   waitlist again on a salmon band. Kids peek in from the window edges. No eyebrow labels.
   - Type: Fira Sans Condensed. Giant solid words for the headings (.mega), then four sizes (title,
     h3, body, small). Pangolin only for handwriting inside the game world (graffiti, sticky notes,
     names on the photos).
   - Dark slab with gold text means "button". Nothing else looks like that.
   - Tile colours come from the game: bathroom tiles, cork, sticky-note blue, trim salmon, coin gold. */

:root {
  color-scheme: light;

  --bg: #ebe5d8;
  --tile: #fbf8f1;
  --hud: #f0ece3;
  --ink: #22242e;
  --ink-2: #555867;
  --ink-3: #6b6c66;
  --line-2: #cbc2ad;
  --slab: #23242a;
  --slab-ink: #fff4e0;
  --slab-ink-2: #c9c0ae;
  --gold: #fac93c;
  --red: #b74f45;
  --ok: #3f6b4a;
  --card: #eee4cb;
  --rule: #c9d9e3;
  --margin: #b2654a;
  --tape: rgba(213, 198, 161, 0.85);
  --note: #c9dddf;
  --cork: #d8c59c;
  --salmon: #e7aa8b;
  --tile-green: #c8d5ac;

  --font-ui: "Fira Sans Condensed", "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
  --font-hand: "Pangolin", "Comic Sans MS", "Segoe Print", cursive;

  --fs-mega: clamp(4.1rem, 0.5rem + 13.4vw, 15.5rem);
  --fs-title: clamp(1.6rem, 1.1rem + 1.6vw, 2.4rem);
  --fs-h3: 1.3rem;
  --fs-body: 1.0625rem;
  --fs-small: 0.9rem;

  --gap: clamp(10px, 1.2vw, 16px);
  --pad: clamp(16px, 2vw, 26px);
  --radius: clamp(18px, 2vw, 28px);
  --gutter: clamp(12px, 3vw, 40px);
  --topbar-h: 58px;
  --fade: 220px;  /* the strip where the wall breaks up into the page: five tile rows */
  --peek: 52px;   /* how much of it shows on the first screen */
  --row: 250px;
  --shadow-hud: 0 1px 2px rgba(34, 36, 46, 0.08), 0 8px 24px rgba(34, 36, 46, 0.12);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--topbar-h) + 12px); -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--fs-body)/1.5 var(--font-ui);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

img,
video,
iframe,
canvas { display: block; max-width: 100%; }

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; }
kbd { font: inherit; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid #6d93b8; outline-offset: 3px; border-radius: 8px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 10px;
  background: var(--slab); color: var(--gold);
  font-weight: 700; text-decoration: none;
}
.skip:focus { top: 12px; }

/* ---------- type: four sizes ---------- */

.title { font: 800 var(--fs-title)/1.05 var(--font-ui); letter-spacing: -0.01em; text-wrap: balance; }
.h3 { font: 700 var(--fs-h3)/1.2 var(--font-ui); }
.small { font-size: var(--fs-small); line-height: 1.4; color: var(--ink-2); }
.icon { width: 1em; height: 1em; fill: currentColor; flex: none; }

/* ---------- buttons: two kinds ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 48px; padding: 0.7em 1.2em;
  border: 1px solid transparent; border-radius: 12px;
  font: 700 var(--fs-body)/1 var(--font-ui);
  text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(34, 36, 46, 0.18); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn[disabled] { cursor: default; opacity: 0.75; transform: none; box-shadow: none; }
.btn-primary { background: var(--slab); color: var(--gold); }
.btn-secondary { background: var(--tile); color: var(--ink); border-color: var(--line-2); }
.btn-sm { min-height: 38px; padding: 0.5em 0.9em; font-size: 0.95rem; border-radius: 10px; }

/* ---------- top bar ---------- */

.topbar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: var(--topbar-h);
  padding: 8px var(--gutter);
  background: rgba(235, 229, 216, 0.9);
  backdrop-filter: blur(10px);
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  font: 800 1.2rem/1 var(--font-ui);
  text-decoration: none; white-space: nowrap;
}
.brand img { transition: transform 0.2s ease; }
.brand:hover img { transform: rotate(-8deg); }
.topbar-cta { display: flex; gap: 8px; }
.topbar .lang { min-width: 40px; padding-inline: 0.6em; letter-spacing: 0.04em; } /* the other language */

@media (max-width: 560px) { .brand span { display: none; } }
@media (max-width: 359px) { .topbar-cta a[href="#support"] { display: none; } } /* the head and the waitlist button come first; support is at the end of the page */
.brand img { flex: none; }
@media (max-width: 359px) { :root { --fs-mega: 3.4rem; } } /* the longest lines still fit on the smallest phones */

/* ---------- the bento ---------- */

.bento {
  position: relative;
  max-width: 1320px; margin: calc(var(--fade) * -0.35) auto 0;
  padding: 0 var(--gutter);
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(3, var(--row));
  grid-template-areas:
    "reel  reel  reel  join  join  join"
    "reel  reel  reel  ball  ball  duck"
    "wreck wreck run   run   chase chase";
}
.t-reel { grid-area: reel; }
.t-duck { grid-area: duck; }
.t-join { grid-area: join; }
.t-ball { grid-area: ball; }
.t-run { grid-area: run; }
.t-wreck { grid-area: wreck; }
.t-chase { grid-area: chase; }

@media (max-width: 1199px) {
  .bento {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: 300px repeat(3, 250px);
    grid-template-areas:
      "reel  reel  reel  reel"
      "join  join  join  duck"
      "ball  ball  wreck wreck"
      "chase chase run   run";
  }
}
@media (max-width: 719px) {
  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: 210px auto 230px 210px 210px 210px;
    grid-template-areas:
      "reel  reel"
      "join  join"
      "duck  run"
      "ball  ball"
      "wreck wreck"
      "chase chase";
  }
}

.tile {
  position: relative; overflow: hidden;
  min-width: 0;
  border-radius: var(--radius);
  background: var(--tile);
}
button.tile { display: block; width: 100%; padding: 0; border: 0; text-align: left; cursor: pointer; }

/* video and photo tiles */
.t-video { background: #15161a; }
.t-video video,
.t-photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: scale 0.4s ease;
}
.t-video video { scale: 1.22; transform-origin: 50% 55%; } /* crops the game's HUD and hotbar */
.t-video:hover video { scale: 1.27; }
.t-photo:hover img { scale: 1.04; }
.cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  display: flex; align-items: center; gap: 8px;
  padding: 44px var(--pad) 14px;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
  color: #fff; font-weight: 700; line-height: 1.2;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* waitlist, as the in-game task */
.t-join { display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: 14px; padding: var(--pad); }
.task { display: flex; align-items: center; gap: 12px; }
.task-box {
  flex: none; width: 22px; height: 22px;
  border: 2px solid var(--ink-2); border-radius: 50%;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.task.is-done .task-box {
  border-color: var(--ok);
  background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat;
}
.task.is-done .task-title { text-decoration: line-through var(--ink) 2px; color: var(--ink-2); }
.wl-form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.wl-row { display: flex; gap: 8px; }
.wl-row input {
  flex: 1 1 auto; min-width: 0; min-height: 48px;
  padding: 0 1em;
  font: 400 var(--fs-body)/1.2 var(--font-ui); color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-2); border-radius: 12px;
}
.wl-row input::placeholder { color: var(--ink-3); }
.wl-row input[aria-invalid="true"] { border-color: var(--red); }
.wl-status { min-height: 1.4em; }
.wl-status[data-tone="error"] { color: var(--red); font-weight: 700; }
.wl-status[data-tone="info"] { color: var(--ink); font-weight: 700; }
.wl-status[data-tone="ok"] { color: var(--ok); font-weight: 700; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* support: its own slab under the board, as wide as the bento */
.t-support { /* a dark band edge to edge, right under the demo */
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; justify-items: start; gap: 10px;
  min-height: 240px; margin: calc(var(--gap) * -1) 0 0; border-radius: 0;
  padding: clamp(40px, 5vw, 64px) max(var(--gutter), calc((100% - 1600px) / 2 + var(--gutter)));
  background: var(--slab); color: var(--slab-ink);
}
.t-support .h3 { color: var(--gold); font-size: var(--fs-title); font-weight: 900; text-transform: uppercase; }
.t-support .small { color: var(--slab-ink-2); }
.btn-coin { /* on the dark band the button flips: coin gold with dark text */
  margin-top: 8px; min-height: 56px; padding-inline: 1.2em 1.4em;
  background: var(--gold); color: var(--ink); font-size: 1.1rem; font-weight: 800;
}
.btn-coin .coin { width: 26px; height: 26px; box-shadow: inset 0 0 0 3px #c99416, inset 0 0 0 6px #fbe08a; }
.btn-coin:hover { box-shadow: 0 8px 20px rgba(250, 201, 60, 0.28); }
.coin-stack { position: absolute; right: 7%; top: 50%; translate: 0 -50%; width: clamp(110px, 22%, 190px); aspect-ratio: 1; pointer-events: none; }
.coin-stack i {
  position: absolute; width: 58%; aspect-ratio: 1; border-radius: 50%;
  background: #f2c230; box-shadow: inset 0 0 0 7px #d9a420, inset 0 0 0 12px #f6d35a, 0 10px 20px rgba(0, 0, 0, 0.3);
}
.coin-stack i:nth-child(1) { left: 0; top: 30%; rotate: -12deg; }
.coin-stack i:nth-child(2) { right: 0; top: 4%; rotate: 14deg; }
.coin-stack i:nth-child(3) { left: 26%; bottom: 0; }

@media (max-width: 719px) {
  .coin-stack { width: 76px; right: 4%; top: 24px; translate: none; } /* up in the corner, clear of the button */
  .t-support .duck-egg { top: auto; bottom: 16px; }
}

/* ---------- hero: the bathroom wall, edge to edge, with the logo across it ---------- */

.hero {
  position: relative; isolation: isolate;
  overflow: clip; /* not hidden: that would stop the hotbar sticking to the bottom of the screen */
  min-height: calc(100vh - var(--topbar-h) - var(--peek) + var(--fade));
  min-height: calc(100svh - var(--topbar-h) - var(--peek) + var(--fade));
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 1fr auto;
  grid-template-areas: "art art" "copy tools";
  align-items: center;
  gap: 8px 32px;
  padding: clamp(12px, 2vw, 28px) max(var(--gutter), calc((100% - 1320px) / 2 + var(--gutter))) var(--fade);
}
.hero::before { /* the wall, its last row sitting right on top of the strip below */
  content: ""; position: absolute; inset: 0 0 var(--fade) 0; z-index: -2;
  background: url("../img/tile-wall.svg") left -20px bottom 0 / 288px 88px repeat, var(--tile-green);
}
.hero::after { /* …and the wall breaking up into the page */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: -2; height: var(--fade);
  background: url("../img/tile-fade.svg") -20px 0 / 1536px 220px repeat-x;
}
.hero.is-drawing { -webkit-user-select: none; user-select: none; }

.hero-art { /* as wide as the screen, past the padding; on wide, short screens no taller than it, so the
               name stays above the fold */
  --w: min(100vw, 1760px, (100svh - var(--topbar-h)) * 1.62);
  grid-area: art; position: relative;
  width: var(--w); margin-inline: calc((100% - var(--w)) / 2);
}
.hero-art::before { /* a soft light on the wall behind the logo */
  content: ""; position: absolute; inset: -4% 6%; z-index: -1;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
}
.hero-logo {
  width: 100%; height: auto;
  filter: drop-shadow(0 22px 26px rgba(34, 36, 46, 0.25));
  animation: float 7s ease-in-out infinite;
}
@keyframes float { 50% { translate: 0 -10px; } }

.hero-copy { grid-area: copy; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.hero-copy .btn { position: relative; z-index: 4; }
.hero-copy .lede { flex-basis: 100%; max-width: 60ch; color: var(--ink-2); } /* what the game is, in one plain line */

/* the drawing layer: above the logo and the title, under the button and the hotbar */
.wall {
  position: absolute; inset: 0; z-index: 2;
  width: 100%; height: 100%;
  pointer-events: none;
  mix-blend-mode: multiply;
  transition: opacity 0.5s ease;
}
.wall.is-wiping { opacity: 0; }
.hero.is-drawing .wall {
  pointer-events: auto; touch-action: none;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg transform='rotate(45 16 16)'%3E%3Crect x='12' y='3' width='8' height='18' rx='2' fill='%23f3efe6' stroke='%2322242e' stroke-width='1.5'/%3E%3Crect x='12' y='3' width='8' height='7' rx='2' fill='%2322242e'/%3E%3Cpath d='M13 21h6l-1.6 4.5h-2.8z' fill='%23cbc2ad' stroke='%2322242e' stroke-width='1.2'/%3E%3Cpath d='M14.6 25.5h2.8L16 29.5z' fill='%2322242e'/%3E%3C/g%3E%3C/svg%3E") 6 26, crosshair;
}

/* the hotbar: while the wall is on screen it stays at the bottom, like the game's HUD */
.toolbar {
  grid-column: 2; grid-row: 1 / span 2; align-self: end; justify-self: end;
  position: sticky; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 4;
  display: grid; justify-items: center; gap: 8px;
}
.hint {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(35, 36, 42, 0.8); color: #fff;
  font-size: var(--fs-small); font-weight: 700; line-height: 1.25; text-align: center;
}
.hint kbd { padding: 1px 7px; border-radius: 5px; background: rgba(255, 255, 255, 0.2); }
.hotbar { display: flex; gap: 6px; }
.slot {
  position: relative;
  display: grid; place-items: center;
  width: 50px; height: 50px; padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.14); border-radius: 8px;
  background: rgba(52, 54, 63, 0.84);
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}
.slot svg { width: 30px; height: 30px; }
.slot:hover { background: rgba(66, 68, 78, 0.9); }
.slot[aria-pressed="true"] { border-color: var(--gold); background: rgba(72, 74, 84, 0.95); transform: translateY(-3px); }
.slot-key { position: absolute; top: 3px; left: 5px; font-size: 0.7rem; font-weight: 700; line-height: 1; color: rgba(255, 255, 255, 0.7); }
.coins {
  display: inline-flex; align-items: center; gap: 8px;
  height: 50px; padding: 0 14px; border-radius: 8px;
  background: rgba(52, 54, 63, 0.84); color: #fff;
  font: 700 var(--fs-h3)/1 var(--font-ui); font-variant-numeric: tabular-nums;
}
.coin { width: 24px; height: 24px; border-radius: 50%; background: #f2c230; box-shadow: inset 0 0 0 3px #d9a420, inset 0 0 0 5px #f6d35a; }
.coins.is-bump { animation: bump 0.25s ease; }
@keyframes bump { 50% { scale: 1.12; } }

/* spotted: the card and the Deputy Head show up in the middle of the screen, wherever you were drawing */
.spotted {
  position: fixed; left: 50%; top: 50%; z-index: 90;
  display: grid; grid-template-columns: auto auto; align-items: center; gap: 14px;
  width: min(440px, calc(100vw - 48px));
  padding: 30px 26px 32px 56px;
  background:
    linear-gradient(90deg, transparent 34px, var(--margin) 34px 36px, transparent 36px),
    repeating-linear-gradient(to bottom, transparent 0 30px, var(--rule) 30px 31.5px),
    var(--card);
  border-radius: 10px;
  box-shadow: 0 24px 40px rgba(34, 36, 46, 0.3);
  translate: -50% -50%; rotate: -4deg;
  animation: drop-in 0.55s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}
.spotted::before,
.spotted::after {
  content: ""; position: absolute; top: -10px; width: 66px; height: 22px;
  background: var(--tape); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.spotted::before { left: 14px; rotate: -28deg; }
.spotted::after { right: 14px; rotate: 26deg; }
.spotted b { font: 800 clamp(2.2rem, 1.6rem + 2.4vw, 3.2rem)/1 var(--font-ui); color: var(--red); }
.spotted svg { width: 28px; fill: none; stroke: var(--red); stroke-width: 4; stroke-linecap: round; }
@keyframes drop-in { from { translate: -50% -170%; rotate: 10deg; opacity: 0; } }

.busted-duck { /* jumps up from the bottom of the screen, by the card's left corner */
  --dw: clamp(120px, 15vw, 210px);
  position: fixed; bottom: 0; left: max(0px, calc(50% - 200px - var(--dw))); z-index: 91;
  width: var(--dw); height: auto;
  filter: drop-shadow(0 10px 16px rgba(34, 36, 46, 0.35));
  animation: duck-jump 2.4s ease both;
}
@keyframes duck-jump {
  0% { translate: 0 110%; rotate: 8deg; }
  12% { translate: 0 -12%; rotate: -10deg; }
  20%, 84% { translate: 0 6%; rotate: -6deg; }
  100% { translate: 0 110%; rotate: 8deg; }
}

/* marker graffiti on the wall, in the corners the logo leaves free */
.graffiti { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.tag {
  position: absolute;
  display: grid; justify-items: center; gap: 2px;
  font: 400 1.1rem/1 var(--font-hand);
  -webkit-text-stroke: 0.5px currentColor; /* marker-thick, same colour */
  opacity: 0.86; mix-blend-mode: multiply;
}
.tag svg { width: 100%; height: auto; fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.tag-red { color: #b8473d; }
.tag-blue { color: #3a6aa3; }
.tag-lol { top: 3%; right: 7%; width: 110px; grid-template-columns: 50px auto; align-items: center; font-size: 2rem; rotate: 8deg; }
.tag-heart { top: 4%; left: 8%; width: 96px; rotate: -8deg; }
.tag-heart > * { grid-area: 1 / 1; }
.tag-heart span { align-self: center; margin-top: -10px; font-size: 1.25rem; }
.tag-701 { bottom: 5%; left: 2%; width: 150px; font-size: 1.7rem; rotate: -4deg; }

@media (max-width: 1199px) {
  .tag-heart, .tag-701 { display: none; }
}
@media (max-width: 719px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 1fr auto auto;
    grid-template-areas: "art" "copy" "tools";
    justify-items: center;
    padding-top: 56px;
    text-align: center;
  }
  .hero-art { --w: 106vw; }
  .hero-copy { flex-direction: column; justify-content: center; }
  .toolbar { grid-area: tools; position: relative; bottom: auto; justify-self: center; }
  .tag-lol { top: -16%; right: 6%; width: 86px; grid-template-columns: 38px auto; font-size: 1.5rem; }
}
@media (max-width: 400px) {
  .slot, .coins { height: 46px; }
  .slot { width: 46px; }
  .slot svg { width: 28px; height: 28px; }
  .coins { padding: 0 10px; }
}

/* ---------- two strips of tape across the page, sliding as you scroll ---------- */

.tapes { /* straddles the top of the wall below */
  --p: 0.5; --h: clamp(150px, 18vw, 280px);
  position: relative; z-index: 4; height: var(--h);
  margin: clamp(40px, 6vw, 90px) 0 calc(var(--h) * -0.55);
}
.tape {
  position: absolute; left: 50%; top: 50%; width: 140vw;
  padding: 0.38em 0 0.42em;
  font: 900 clamp(1.6rem, 0.8rem + 2.7vw, 3.8rem)/1 var(--font-ui); letter-spacing: 0.02em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden;
  box-shadow: 0 12px 26px rgba(34, 36, 46, 0.22);
  translate: -50% -50%;
}
.tape span { display: inline-block; translate: calc((var(--p) - 0.5) * var(--dir) * 24vw) 0; }
.tape-caution {
  --dir: -1;
  background:
    repeating-linear-gradient(-45deg, var(--ink) 0 12px, transparent 12px 24px) top / 100% 0.2em no-repeat,
    repeating-linear-gradient(-45deg, var(--ink) 0 12px, transparent 12px 24px) bottom / 100% 0.2em no-repeat,
    var(--gold);
  color: var(--ink);
  rotate: -4deg;
}
.tape-slab { --dir: 1; z-index: 1; background: var(--slab); color: var(--gold); rotate: 3deg; }

/* ---------- giant words ---------- */

.mega {
  --stroke: max(2px, 0.026em); /* for the bits drawn around the words (the eyes) */
  position: relative; z-index: 2;
  font: 900 var(--fs-mega)/0.86 var(--font-ui);
  letter-spacing: -0.015em; text-transform: uppercase;
  color: var(--ink);
}
.mega .line { display: block; position: relative; width: fit-content; max-width: 100%; }
.mega .line[data-drift="1"] { --d: 1; }
.mega .line[data-drift="-1"] { --d: -1; }
.mega .line[data-drift] { translate: calc((var(--p, 0.5) - 0.5) * var(--d) * 5vw) 0; } /* --p: main.js */
.mega .fit { font-size: calc(var(--fit, 1) * 1em); white-space: nowrap; max-width: none; } /* main.js measures it on one line */

/* ---------- what you do: one giant word each, screenshots taped over them ---------- */

.features { /* on the bathroom wall again: salmon trim along the top, crumbling into the page at the bottom */
  position: relative;
  display: grid; gap: clamp(110px, 15vw, 240px);
  margin-bottom: var(--fade);
  padding: clamp(120px, 14vw, 220px) 0 clamp(70px, 9vw, 140px);
  border-top: 16px solid #c98d70;
  background: url("../img/tile-wall.svg") left -20px bottom 0 / 288px 88px repeat, var(--tile-green);
}
.features::before { /* the trim: a row of salmon tiles */
  content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 44px;
  background:
    linear-gradient(#c98d70 0 3px, transparent 3px calc(100% - 3px), #c98d70 0),
    repeating-linear-gradient(90deg, #e7aa8b 0 93px, #c98d70 93px 96px) -20px 0;
}
.features::after { /* …and the wall breaking up into the page, like the hero's */
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: var(--fade);
  background: url("../img/tile-fade.svg") -20px 0 / 1536px 220px repeat-x;
}
.feature {
  --p: 0.5;
  position: relative;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap);
  width: min(100%, 1600px); margin: 0 auto; padding: 0 var(--gutter);
}
.feature > * { min-width: 0; }

.poster { /* a print of the screenshot, taped to the page; drifts against the words as you scroll */
  position: relative; z-index: 1;
  align-self: start;
  padding: clamp(6px, 0.8vw, 12px);
  background: #fdfbf6;
  box-shadow: 0 2px 4px rgba(34, 36, 46, 0.12), 0 28px 50px rgba(34, 36, 46, 0.25);
  rotate: calc(var(--r, 0deg) + (var(--p) - 0.5) * 5deg);
  translate: 0 calc((0.5 - var(--p)) * 90px);
}
.poster img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: #15161a; }
.poster::before,
.poster::after {
  content: ""; position: absolute; top: -12px; z-index: 1; width: clamp(64px, 7vw, 110px); height: 26px;
  background: var(--tape); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.poster::before { left: -18px; rotate: -32deg; }
.poster::after { right: -18px; rotate: 30deg; }

.memo { /* the sticky note that says what it is */
  position: relative; z-index: 3;
  align-self: start;
  width: min(100%, 340px); padding: 24px 22px 26px;
  background: var(--note); color: #3d4852;
  font: 400 clamp(1.15rem, 1rem + 0.4vw, 1.4rem)/1.32 var(--font-hand);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05), 0 14px 24px rgba(80, 60, 30, 0.22);
  rotate: var(--r, -2deg);
}
.memo::before {
  content: ""; position: absolute; top: -13px; left: 50%; width: 96px; height: 26px;
  background: var(--tape); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  translate: -50% 0; rotate: -4deg;
}

/* 1. mind the eyes: the eyes follow you around (main.js sets --x and --y) */
.f-eyes .mega { grid-column: 1 / -1; grid-row: 1; }
.f-eyes .poster { grid-column: 6 / -1; grid-row: 2; margin-top: calc(var(--fs-mega) * -0.62); }
.f-eyes .memo { grid-column: 1 / 5; grid-row: 2; margin: clamp(30px, 5vw, 80px) 0 0 4%; }
.googly { display: inline-flex; gap: 0.05em; margin-left: 0.12em; vertical-align: baseline; }
.googly i {
  --x: 0; --y: 0;
  position: relative; width: 0.69em; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff 0 40%, #ece8de 72%);
  border: var(--stroke) solid var(--ink);
  box-shadow: 0.016em 0.016em 0 var(--ink), 0.032em 0.032em 0 var(--ink), 0.048em 0.048em 0 var(--ink);
}
.googly i::after { /* the pupil */
  content: ""; position: absolute; left: 50%; top: 50%; width: 42%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 34% 32%, #fff 0 9%, var(--ink) 11%);
  translate: calc(-50% + var(--x) * 0.15em) calc(-50% + var(--y) * 0.15em);
  transition: translate 0.15s ease-out;
}

/* 2. grab anything: the letters drop in and land wherever they land */
.f-grab .poster { grid-column: 1 / 8; grid-row: 1 / span 2; margin-top: calc(var(--fs-mega) * 0.35); }
.f-grab .mega { grid-column: 4 / -1; grid-row: 1; justify-self: end; text-align: right; } /* a wrapped line stays on the right, off the screenshot */
.f-grab .mega .line { margin-left: auto; }
.f-grab .memo { grid-column: 9 / -1; grid-row: 2; justify-self: center; margin-top: clamp(24px, 3vw, 48px); }
.tumble { display: inline-block; rotate: var(--r); translate: 0 var(--y); transform-origin: 50% 85%; }
.tumble + .tumble { margin-left: 0.02em; }
.tumble-word { display: inline-block; white-space: nowrap; } /* wraps between words, never inside one */

/* 3. tag the stalls: somebody got to the letters too */
.f-tag .mega { grid-column: 1 / -1; grid-row: 1; justify-self: center; rotate: -3deg; }
.f-tag .mega .line { margin-inline: auto; }
.f-tag .poster { grid-column: 3 / 11; grid-row: 2; margin-top: calc(var(--fs-mega) * -0.3); }
.f-tag .memo { grid-column: 10 / -1; grid-row: 2; align-self: end; justify-self: start; margin-bottom: -40px; }
.doodle { position: absolute; z-index: 1; overflow: visible; pointer-events: none; }
.doodle path { fill: none; stroke: currentColor; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; }
.doodle-star { left: -0.2em; top: -0.34em; width: 0.56em; color: #c23b2f; rotate: -14deg; }
.doodle-swoosh { left: 2%; right: 2%; bottom: -0.12em; width: 96%; height: 0.2em; color: #2e67b1; }
.doodle-swoosh path { stroke-width: max(4px, 0.035em); stroke-dasharray: none; vector-effect: non-scaling-stroke; }
.doodle-smile { left: calc(100% + 0.08em); top: 0.02em; width: 0.62em; color: var(--ink); rotate: 10deg; }
.doodle-lol {
  right: 0.3em; top: -0.42em;
  font: 400 0.36em/1 var(--font-hand); letter-spacing: 0; text-transform: none;
  color: #c23b2f; -webkit-text-stroke: 0.02em currentColor;
  rotate: 7deg;
}

/* 4. the class talks back: the bubbles pop out of the screenshot */
.f-talk .poster { grid-column: 6 / -1; grid-row: 1 / span 2; margin-top: calc(var(--fs-mega) * 0.9); }
.f-talk .mega { grid-column: 1 / -1; grid-row: 1; }
.f-talk .memo { grid-column: 1 / 5; grid-row: 2; justify-self: end; margin-top: clamp(30px, 5vw, 80px); }
.bubble {
  position: absolute; z-index: 2;
  padding: 0.55em 0.95em 0.6em; border-radius: 999px;
  background: #fff; color: var(--ink);
  border: 3px solid var(--ink);
  box-shadow: 4px 5px 0 var(--ink);
  font: 800 clamp(1rem, 0.7rem + 1vw, 1.7rem)/1 var(--font-ui); text-transform: uppercase; white-space: nowrap;
  rotate: var(--r, 0deg);
}
.bubble::after { /* the tail */
  content: ""; position: absolute; top: calc(100% - 2px); left: var(--tail, 30%); width: 22px; height: 18px;
  background: var(--ink); clip-path: polygon(0 0, 100% 0, 20% 100%);
}
.bubble-1 { --r: -6deg; left: -9%; bottom: 20%; }
.bubble-2 { --r: 9deg; --tail: 55%; left: 44%; top: -9%; }
.bubble-3 { --r: 4deg; --tail: 62%; right: 5%; bottom: -6%; }

/* 5. the whole school: the yard edge to edge, and the bell */
.f-yard .panorama { grid-column: 1 / -1; grid-row: 1; }
.f-yard .mega { grid-column: 1 / 10; grid-row: 2; margin-top: clamp(20px, 3vw, 44px); }
.f-yard .memo { grid-column: 10 / -1; grid-row: 2; align-self: end; justify-self: center; margin-bottom: 2%; }
.panorama {
  position: relative; overflow: hidden;
  width: 100vw; margin-left: calc(50% - 50vw); /* past the gutters, to the window's edges */
  height: clamp(320px, 52vw, 82vh);
}
.panorama img {
  width: 100%; height: 115%; object-fit: cover; object-position: 50% 40%;
  translate: 0 calc((0.5 - var(--p)) * 12%); /* the yard moves slower than the page */
}
.bell { position: absolute; right: 9%; top: 24%; display: grid; justify-items: center; gap: 4px; width: clamp(84px, 10vw, 160px); }
.bell svg { width: 100%; overflow: visible; transform-origin: 50% 12%; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.3)); }
.bell-cup, .bell-knob { fill: #f2c230; stroke: var(--ink); stroke-width: 6; stroke-linejoin: round; }
.bell-clapper { fill: #4a4c55; stroke: var(--ink); stroke-width: 6; }
.bell-shine { fill: none; stroke: #fff; stroke-width: 6; stroke-linecap: round; opacity: 0.7; }
.bell-ring { font: 400 clamp(1.2rem, 0.9rem + 1vw, 2rem)/1 var(--font-hand); color: #fff; text-shadow: 0 2px 0 var(--ink), 0 0 12px rgba(0, 0, 0, 0.4); rotate: -6deg; }

/* coming into view (only with motion; without it everything just sits where it ends up) */
.fx .tumble { transition: translate 0.75s cubic-bezier(0.3, 1.55, 0.5, 1), rotate 0.75s ease, opacity 0.25s ease; transition-delay: calc(var(--i) * 70ms); }
.fx [data-reveal]:not(.is-in) .tumble { translate: 0 -1.6em; rotate: calc(var(--r) * -4); opacity: 0; }
.fx .doodle path { transition: stroke-dashoffset 0.7s ease 0.3s; }
.fx .doodle-swoosh { clip-path: inset(-60% -4%); transition: clip-path 0.6s ease 0.7s; } /* wiped in: dashes and non-scaling strokes don't mix */
.fx [data-reveal]:not(.is-in) .doodle-swoosh { clip-path: inset(-60% 104% -60% -4%); }
.fx .doodle-smile path { transition-delay: 1s; }
.fx [data-reveal]:not(.is-in) .doodle path { stroke-dashoffset: 1; }
.fx .doodle-lol { transition: opacity 0.3s ease 1.3s, scale 0.3s ease 1.3s; }
.fx [data-reveal]:not(.is-in) .doodle-lol { opacity: 0; scale: 0.4; }
.fx .bubble { transition: scale 0.45s cubic-bezier(0.3, 1.8, 0.5, 1), opacity 0.2s ease; }
.fx .bubble-2 { transition-delay: 0.25s; }
.fx .bubble-3 { transition-delay: 0.5s; }
.fx [data-reveal]:not(.is-in) .bubble { scale: 0; opacity: 0; }
.fx .is-in .bell svg { animation: ring 3.2s ease-in-out 0.4s infinite; }
@keyframes ring {
  0%, 30%, 100% { rotate: 0deg; }
  3%, 11%, 19% { rotate: -14deg; }
  7%, 15%, 23% { rotate: 14deg; }
}

@media (max-width: 1099px) {
  .f-grab .mega { grid-column: 3 / -1; }
  .f-talk .poster { grid-column: 5 / -1; }
  .f-tag .memo { grid-column: 9 / -1; }
}
@media (max-width: 719px) { /* one column: the word, the screenshot, the note */
  .feature { grid-template-columns: minmax(0, 1fr); }
  .feature > .mega,
  .feature > .poster,
  .feature > .memo { grid-column: 1; grid-row: auto; margin: 0; }
  .feature > .mega { order: -1; }
  .feature > .poster { margin-top: clamp(14px, 4vw, 24px); }
  .feature > .memo { justify-self: end; width: min(86%, 320px); margin-top: -18px; margin-right: 2%; }
  .f-grab .mega { justify-self: start; text-align: left; }
  .f-grab .mega .line { margin-left: 0; }
  .f-yard .panorama { grid-row: auto; order: -2; }
  .f-yard .mega { margin-top: 18px; }
  .bubble { font-size: 0.85rem; border-width: 2px; box-shadow: 3px 3px 0 var(--ink); }
  .bubble-1 { left: -2%; bottom: 18%; }
  .bubble-2 { top: -12%; }
  .bubble-3 { right: -3%; top: 40%; bottom: auto; }
  .f-yard .memo { margin-top: 20px; }
}

/* ---------- kids peeking in from the edges of the window as you scroll past ---------- */

.peeker { /* --in: 0 hidden past the edge, 1 peeking; --p: 0 to 1 on the way past (main.js) */
  --side: 1; --in: 1; --p: 0.5;
  position: absolute; top: var(--at, 50%); z-index: 3;
  width: clamp(120px, 11vw, 190px); height: auto;
  pointer-events: none;
  filter: drop-shadow(0 16px 20px rgba(34, 36, 46, 0.3));
  transform:
    translateY(-50%)
    perspective(900px)
    translate(calc(var(--side) * (30% + (1 - var(--in)) * 95%)), calc((0.5 - var(--p)) * 180px))
    rotate(calc(var(--side) * (-9deg + (1 - var(--in)) * 20deg)))
    rotateY(calc(var(--side) * (1 - var(--in)) * -45deg));
  will-change: transform;
}
.peeker-left { --side: -1; left: calc(50% - 50vw); } /* the window's edge, from inside a centred box */
.peeker-right { right: calc(50% - 50vw); }
main { overflow-x: clip; } /* whatever hides past the edge doesn't widen the page */

@media (max-width: 899px) {
  .peeker { display: none; }
}

/* ---------- the class: photos, edge to edge ---------- */

.class { position: relative; padding: clamp(56px, 8vw, 104px) var(--gutter) clamp(24px, 4vw, 48px); }
.class > .mega,
.board > .mega { max-width: calc(1600px - 2 * var(--gutter)); margin: 0 auto; }
.class > .mega .line + .line { margin-left: 24%; }
.class .photos { position: relative; z-index: 3; margin-top: calc(var(--fs-mega) * -0.2); }
.photos {
  --overlap: 0.1; /* each photo slides this far under the next one */
  --w: min(220px, calc((100vw - 2 * var(--gutter)) / (10 - 9 * var(--overlap))));
  display: flex; justify-content: center;
  padding-block: 12px;
}
.photos li { flex: 0 1 var(--w); min-width: 0; }
.photos li + li { margin-left: calc(var(--w) * var(--overlap) * -1); }
.photo {
  position: relative; display: block; width: 100%;
  padding: 7% 7% 0; border: 0; border-radius: 3px;
  background: #fdfbf6;
  box-shadow: 0 1px 2px rgba(34, 36, 46, 0.12), 0 12px 24px rgba(60, 48, 30, 0.18);
  rotate: var(--r, 0deg);
  cursor: pointer;
  transition: rotate 0.2s ease, translate 0.2s ease, scale 0.2s ease, box-shadow 0.2s ease;
}
.photo:hover,
.photo:focus-visible {
  z-index: 2; rotate: 0deg; translate: 0 -10px; scale: 1.08;
  box-shadow: 0 2px 4px rgba(34, 36, 46, 0.12), 0 22px 36px rgba(60, 48, 30, 0.26);
}
.photo-pic { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #cac4bd; }
.photo-pic img { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 0.25s ease, transform 0.35s ease; }
.photo .front { object-fit: cover; }
.photo .back { object-fit: cover; object-position: 50% var(--back-y, 22%); opacity: 0; transform: scaleX(0.2); } /* head and shoulders, like the front */
.photo[aria-pressed="true"] .front { opacity: 0; transform: scaleX(0.2); }
.photo[aria-pressed="true"] .back { opacity: 1; transform: none; }
.photo-name { display: block; padding: 0.45em 0 0.55em; font: 400 clamp(1rem, 0.75rem + 0.5vw, 1.3rem)/1 var(--font-hand); color: var(--ink); text-align: center; }

@media (max-width: 1099px) {
  .photos { display: grid; grid-template-columns: repeat(5, minmax(0, 180px)); justify-content: center; gap: 22px 16px; }
  .photos li + li { margin-left: 0; }
}
@media (max-width: 719px) { /* one swipeable row */
  .photos {
    display: flex; justify-content: flex-start; gap: 14px;
    margin-inline: calc(var(--gutter) * -1); padding: 14px var(--gutter) 22px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .photos::-webkit-scrollbar { display: none; }
  .photos li { flex: 0 0 40%; scroll-snap-align: center; }
}

/* ---------- the rules: sticky notes on the corridor cork board ---------- */

.board { padding: clamp(110px, 14vw, 220px) var(--gutter) clamp(48px, 7vw, 96px); }
.board > .mega { margin-bottom: clamp(24px, 4vw, 56px); }
.board > .mega .line + .line { margin-left: 18%; }
.strike { /* somebody crossed out "school"… */
  position: absolute; left: -4%; top: 30%; z-index: 1; width: 108%; height: 0.26em;
  overflow: visible; color: #c23b2f;
}
.strike path { fill: none; stroke: currentColor; stroke-width: 0.075em; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.fix { /* …and wrote the game's name over it */
  position: absolute; left: 38%; bottom: 84%;
  font: 400 0.44em/1 var(--font-hand); letter-spacing: 0; text-transform: none; white-space: nowrap;
  color: #c23b2f; -webkit-text-stroke: 0.03em currentColor;
  rotate: -7deg;
}
.fx .strike { clip-path: inset(-60% -4%); transition: clip-path 0.5s ease 0.2s; }
.fx [data-reveal]:not(.is-in) .strike { clip-path: inset(-60% 104% -60% -4%); }
.fx .fix { transition: opacity 0.25s ease 0.8s, scale 0.35s cubic-bezier(0.3, 1.7, 0.5, 1) 0.8s; }
.fx [data-reveal]:not(.is-in) .fix { opacity: 0; scale: 0.3; }
.cork {
  position: relative;
  max-width: calc(1320px - 2 * var(--gutter)); margin: 0 auto;
  padding: clamp(30px, 4vw, 56px) clamp(16px, 4vw, 56px) clamp(36px, 5vw, 64px);
  border: clamp(8px, 1vw, 12px) solid #a87a4f; border-radius: 16px;
  background:
    radial-gradient(circle at 30% 40%, rgba(122, 86, 40, 0.3) 0 1px, transparent 1.6px) 0 0 / 9px 11px,
    radial-gradient(circle at 70% 60%, rgba(255, 246, 222, 0.5) 0 1px, transparent 1.6px) 3px 5px / 13px 9px,
    radial-gradient(circle at 50% 50%, rgba(140, 100, 55, 0.22) 0 1.3px, transparent 2px) 6px 2px / 17px 15px,
    var(--cork);
  box-shadow: inset 0 2px 10px rgba(70, 45, 15, 0.35), 0 14px 30px rgba(70, 50, 25, 0.18);
}
.notes {
  display: grid; grid-template-columns: repeat(3, minmax(0, 300px)); justify-content: space-evenly;
  gap: clamp(30px, 4vw, 48px) clamp(18px, 4vw, 48px);
}
.note {
  position: relative;
  padding: 20px 18px 22px;
  background: var(--note); color: #4a5560;
  line-height: 1.35;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.05), 0 10px 18px rgba(80, 60, 30, 0.22);
  rotate: var(--r, -2deg);
  translate: 0 var(--y, 0);
  transition: rotate 0.2s ease, scale 0.2s ease;
}
.note:hover { rotate: 0deg; scale: 1.04; }
.note::before { /* the pin */
  content: ""; position: absolute; top: -7px; left: 50%; width: 16px; height: 16px; border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #f39a8c, #c23b2f 55%, #8e2a22);
  box-shadow: 0 3px 4px rgba(0, 0, 0, 0.35);
  translate: -50% 0;
}
.note:nth-child(3n + 2)::before { background: radial-gradient(circle at 35% 32%, #a9c8ee, #2e67b1 55%, #1e4677); }
.note:nth-child(3n)::before { background: radial-gradient(circle at 35% 32%, #fbe39a, #e0a91c 55%, #a6780c); }
.note::after { /* the Deputy Head's seal */
  content: ""; position: absolute; top: 10px; right: 10px; width: 24px; height: 24px;
  background: url("../img/deputy-duck.svg") center / contain no-repeat;
}
.note b { display: block; margin-bottom: 4px; padding-right: 28px; font-size: var(--fs-h3); text-transform: uppercase; color: var(--ink); }
.note s { text-decoration: line-through var(--red) 2.5px; color: #6b7680; }
.note em { display: block; margin-top: 6px; font: 400 1.6rem/1 var(--font-hand); color: var(--red); rotate: -3deg; }

@media (max-width: 719px) {
  .notes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 16px; }
  .note { padding: 16px 12px; font-size: var(--fs-small); translate: none; }
  .note b { font-size: var(--fs-body); }
}

/* ---------- questions: a page out of a notebook ---------- */

.faq { padding: clamp(90px, 11vw, 170px) var(--gutter) clamp(30px, 5vw, 70px); }
.faq > .mega { max-width: calc(1600px - 2 * var(--gutter)); margin: 0 auto clamp(28px, 4vw, 56px); }
@media (min-width: 720px) { .faq > .mega .line + .line { margin-left: 10%; } }
.sheet { /* the text sits on the ruling: one line of text per rule */
  --lh: 30px; --edge: clamp(34px, 5vw, 72px);
  position: relative;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--lh) clamp(28px, 4vw, 64px);
  max-width: 1180px; margin: 0 auto;
  padding: calc(var(--lh) * 2) clamp(20px, 4vw, 56px) calc(var(--lh) * 2) calc(var(--edge) + clamp(18px, 2.4vw, 32px));
  background:
    linear-gradient(90deg, transparent var(--edge), var(--margin) 0 calc(var(--edge) + 2px), transparent 0),
    repeating-linear-gradient(to bottom, transparent 0 calc(var(--lh) - 1.5px), var(--rule) 0 var(--lh)),
    #fdfbf6;
  box-shadow: 0 2px 4px rgba(34, 36, 46, 0.1), 0 26px 48px rgba(60, 48, 30, 0.2);
  rotate: -0.6deg;
}
.sheet::before,
.sheet::after { /* taped to the page */
  content: ""; position: absolute; top: -13px; width: 110px; height: 26px;
  background: var(--tape); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.sheet::before { left: 8%; rotate: -5deg; }
.sheet::after { right: 8%; rotate: 4deg; }
.qa { display: grid; align-content: start; }
.qa h3 { font: 800 var(--fs-h3)/var(--lh) var(--font-ui); color: var(--ink); text-wrap: balance; }
.qa p { line-height: var(--lh); color: var(--ink-2); }

@media (max-width: 719px) {
  .sheet { grid-template-columns: minmax(0, 1fr); --lh: 28px; rotate: 0deg; }
  .qa h3 { font-size: 1.15rem; }
}

/* ---------- the demo: the waitlist once more, full width, with a tear-off calendar ---------- */

.demo { /* edge to edge */
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "task" "body";
  align-items: start; gap: clamp(24px, 3vw, 40px);
  margin: clamp(40px, 6vw, 90px) 0 var(--gap);
  padding: clamp(60px, 8vw, 120px) max(var(--gutter), calc((100% - 1600px) / 2 + var(--gutter)));
  background: var(--salmon);
}
.demo .task { grid-area: task; gap: 0.14em; font-size: var(--fs-mega); }
.demo .task-box { width: 0.6em; height: 0.6em; border: max(3px, 0.06em) solid var(--ink); }
.demo .task.is-done .task-box { background-color: var(--ok); }
.demo .task.is-done .task-title { color: rgba(34, 36, 46, 0.45); }
.demo .task.is-done .line { text-decoration: line-through var(--ink) 0.07em; }
.demo-body { grid-area: body; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; width: 100%; max-width: 620px; margin-left: calc(var(--fs-mega) * 0.74); }
.calendar { /* hangs over the top edge of the band, next to the short first line */
  position: absolute; right: max(var(--gutter), calc((100% - 1600px) / 2 + var(--gutter) + 2vw)); top: clamp(-70px, -4vw, -36px);
  z-index: 3; overflow: hidden;
  display: grid; justify-items: center; gap: 4px;
  width: clamp(130px, 17vw, 250px); padding-bottom: 16px;
  border-radius: 10px;
  background: #fdfbf6;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.06), 0 16px 28px rgba(80, 40, 20, 0.25);
  rotate: 6deg;
}
.calendar::before,
.calendar::after { /* binder holes */
  content: ""; position: absolute; top: 7px; width: 9px; height: 9px; border-radius: 50%;
  background: #7d241c;
}
.calendar::before { left: 26%; }
.calendar::after { right: 26%; }
.calendar b {
  width: 100%; padding: 20px 0 8px;
  background: var(--red); color: #fff;
  font: 800 var(--fs-h3)/1 var(--font-ui); text-align: center; text-transform: uppercase; letter-spacing: 0.08em;
}
.calendar span { font: 900 clamp(4.5rem, 2rem + 6.5vw, 9.5rem)/0.95 var(--font-ui); color: var(--ink); }
.calendar em { font: 400 clamp(1.2rem, 1rem + 0.5vw, 1.6rem)/1 var(--font-hand); color: var(--red); rotate: -3deg; }

@media (max-width: 719px) {
  .demo { padding-top: 84px; }
  .demo-body { margin-left: 0; }
  .calendar { width: 96px; top: -66px; right: 5%; }
}

/* ---------- footer ---------- */

.footer {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 18px var(--gutter) calc(28px + env(safe-area-inset-bottom, 0px));
}

/* ---------- video player ---------- */

.player {
  width: min(1100px, calc(100vw - 24px)); max-width: none;
  padding: 0; border: 0; background: transparent;
  overflow: visible;
}
.player::backdrop { background: rgba(23, 24, 29, 0.88); }
.player-box { position: relative; overflow: hidden; border-radius: var(--radius); background: #000; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5); }
.player video { width: 100%; aspect-ratio: 16 / 9; max-width: 100%; background: #000; }
.player-close {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  display: grid; place-items: center; width: 42px; height: 42px;
  border: 0; border-radius: 50%;
  background: var(--hud); color: var(--ink); cursor: pointer;
}
.player-close svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 3; stroke-linecap: round; fill: none; }

/* ---------- the torn note, hidden rubber ducks, toast ---------- */

.torn {
  position: fixed; left: 50%; bottom: calc(26px + env(safe-area-inset-bottom, 0px)); z-index: 85;
  max-width: calc(100vw - 32px);
  padding: 16px 34px 18px;
  background: var(--hud); color: var(--ink);
  font: 700 var(--fs-h3)/1 var(--font-ui); white-space: nowrap;
  box-shadow: 0 12px 30px rgba(20, 22, 28, 0.3);
  clip-path: polygon(0 6%, 4% 0, 9% 5%, 15% 1%, 22% 6%, 30% 2%, 38% 6%, 47% 1%, 55% 5%, 63% 0, 71% 5%, 80% 1%, 88% 6%, 95% 1%, 100% 5%, 100% 94%, 96% 100%, 90% 95%, 83% 99%, 75% 94%, 67% 100%, 58% 95%, 49% 99%, 40% 94%, 31% 100%, 23% 95%, 15% 99%, 8% 94%, 0 98%);
  translate: -50% 0;
  animation: torn-drop 0.45s cubic-bezier(0.2, 1.5, 0.4, 1);
}
.torn s { text-decoration: line-through var(--ink) 3px; }
@keyframes torn-drop { from { translate: -50% -40px; opacity: 0; rotate: -4deg; } }

.duck-egg {
  position: absolute; left: var(--x); top: var(--y); z-index: 3;
  width: 28px; height: auto;
  translate: -50% -50%; rotate: var(--r, 0deg);
  cursor: pointer;
  filter: drop-shadow(1px 2px 0 rgba(34, 36, 46, 0.35));
  transition: scale 0.15s ease;
}
.duck-egg:hover { scale: 1.25; }
.duck-egg.is-found { animation: squeak 0.5s ease forwards; pointer-events: none; }
@keyframes squeak { 30% { scale: 1.6; } 100% { scale: 0; opacity: 0; } }

.toast {
  position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 80;
  translate: -50% 0; max-width: calc(100vw - 32px);
  padding: 12px 18px; border-radius: 14px;
  background: var(--hud); color: var(--ink);
  box-shadow: var(--shadow-hud);
  font-weight: 700; text-align: center;
}

/* ---------- motion preferences ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .busted-duck { animation: none; } /* its keyframes end off-screen */
}