/* HACH paper-collage kit — shared by all five mockups.
   Everything here is lifted from the Year 8 films: torn cream labels in Luckiest Guy,
   washi tape, sticker-bordered cut-outs, ransom-note titles, real paper grounds,
   and the 8 fps "boil" the characters have on screen. */

:root {
  color-scheme: light;
  /* film palette (sampled from the art) */
  --navy: #26305e;      /* blazer */
  --ink: #1d2448;       /* label text */
  --sky: #a8d2ec;       /* shirt */
  --mustard: #d8a536;
  --coral: #e46f55;
  --teal: #2f7f83;
  --kraft: #c29c6e;
  --label: #f6efe2;     /* torn label paper */
  --pink: #e7a59c;
  --hach: #3f7fc0;      /* end-card blue */
  --sage: #7a9d62;

  /* subject colours — one per subject, used in every concept */
  --s-english: #e46f55;  --s-maths: #2f7f83;     --s-science: #6e9a4e;
  --s-history: #d8a536;  --s-geography: #3f7fc0; --s-re: #8a5a8c;
  --s-french: #d9798e;   --s-spanish: #ef8a3c;   --s-german: #5d6b75;
  --s-mandarin: #c0413b; --s-latin: #9a7b4f;
  --s-computing: #4b5a8a; --s-dt: #a4784a;       --s-art: #c9573c;
  --s-music: #b8487a;    --s-drama: #7c3b45;     --s-food: #8aa04a;
  --s-pe: #3f8f5f;       --s-citizenship: #3c8c9e; --s-pshe: #5fa7cf;

  --f-label: "Luckiest Guy", "Arial Black", system-ui, sans-serif;
  --f-slab: "Alfa Slab One", "Rockwell", Georgia, serif;
  --f-hand: "Caveat", "Segoe Print", "Comic Sans MS", cursive;
  --f-body: "Lexend", "Atkinson Hyperlegible", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--f-body); color: var(--ink); line-height: 1.55; font-size: 17px; }
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px dashed var(--coral); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { text-wrap: balance; margin: 0; }

/* ---------- paper grounds ---------- */
.bg-kraft   { background: #b8966c url(/img/tile_kraft.webp) 0 0/1200px auto repeat; }
.bg-cream   { background: #efe8da url(/img/tile_cream.webp) 0 0/1200px auto repeat; }
.bg-navy    { background: #1f2a55 url(/img/tile_navy.webp) 0 0/1200px auto repeat; color: var(--label); }
.bg-blue    { background: #3a78b8 url(/img/tile_blue.webp) 0 0/1200px auto repeat; color: #fff; }
.bg-mustard { background: #cf9d33 url(/img/tile_mustard.webp) 0 0/1200px auto repeat; }
.bg-teal    { background: #5c9ea0 url(/img/tile_teal.webp) 0 0/1200px auto repeat; }
.bg-pink    { background: #e19b90 url(/img/tile_pink.webp) 0 0/1200px auto repeat; }
.bg-grid {
  background-color: #f1ece2;
  background-image:
    linear-gradient(rgba(47,127,131,.13) 1px, transparent 1px),
    linear-gradient(90deg, rgba(47,127,131,.13) 1px, transparent 1px),
    url(/img/tile_cream.webp);
  background-size: 28px 28px, 28px 28px, 1200px auto;
}

/* a section with `style=tear(n)`: its torn bottom edge is a strip of its own paper hanging
   over the next section. The strip spans the whole section so the texture lines up, and the
   clip keeps only the 18px below it (plus 2px of overlap, so no seam shows at the join). */
[style*="--tear"] { position: relative; }
[style*="--tear"]::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: -18px; z-index: 1;
  background: inherit; clip-path: var(--tear); pointer-events: none;
}

/* ---------- torn label (the film's caption device) ---------- */
.torn {
  position: relative; isolation: isolate; display: inline-block;
  padding: .35em .8em .3em; color: var(--ink);
  font-family: var(--f-label); letter-spacing: .02em; line-height: 1.1;
  --torn-bg: var(--label);
}
.torn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--torn-bg);
  filter: url(#rough) drop-shadow(0 2px 1.5px rgba(30, 25, 15, .28));
}
.torn.tilt-l { transform: rotate(-1.6deg); }
.torn.tilt-r { transform: rotate(1.4deg); }

/* torn paper panel for longer text */
.sheet { position: relative; isolation: isolate; padding: 1.4rem 1.5rem; --torn-bg: var(--label); }
.sheet::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--torn-bg);
  filter: url(#rough-soft) drop-shadow(0 3px 3px rgba(30, 25, 15, .25));
}

/* ---------- washi tape ---------- */
.tape {
  position: absolute; width: 96px; height: 24px; z-index: 3; pointer-events: none;
  background: url(/img/tape_sheet_00.webp) center/100% 100% no-repeat; opacity: .92;
}
.tape.t1 { background-image: url(/img/tape_sheet_01.webp); }
.tape.t2 { background-image: url(/img/tape_sheet_02.webp); }
.tape.t3 { background-image: url(/img/tape_sheet_03.webp); }

/* ---------- cut-outs ---------- */
.cutout { filter: drop-shadow(0 6px 5px rgba(20, 18, 30, .28)); }
@keyframes boil {
  0%   { transform: rotate(-.5deg) translate(0, 0); }
  33%  { transform: rotate(.35deg) translate(.5px, -1px); }
  66%  { transform: rotate(-.15deg) translate(-.5px, .5px); }
}
.boil { animation: boil .375s steps(1) infinite; transform-origin: 50% 90%; }

/* ---------- ransom-note title (film title cards) ---------- */
.ransom { display: inline-flex; flex-wrap: wrap; gap: .06em .04em; line-height: 1; }
.ransom .w { display: inline-flex; gap: .04em; margin-right: .28em; }
.ransom .ch {
  display: inline-grid; place-items: center; min-width: .78em; padding: .08em .1em .02em;
  font-family: var(--f-slab); color: var(--ink); background: var(--label);
  box-shadow: 0 2px 2px rgba(0,0,0,.22);
}

/* ---------- pills / buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5em; cursor: pointer; border: 0;
  font: 400 1rem/1 var(--f-label); letter-spacing: .03em; color: var(--ink);
  padding: .8em 1.2em .7em; background: var(--mustard); text-decoration: none;
  box-shadow: 0 3px 0 rgba(0,0,0,.25); transition: transform .15s;
}
.btn:hover { transform: rotate(-1.5deg) scale(1.03); }
.hand { font-family: var(--f-hand); font-weight: 600; }

.subj-dot { width: .8em; height: .8em; border-radius: 50%; display: inline-block; flex: none; }

@media (prefers-reduced-motion: reduce) {
  .boil { animation: none; }
  * { transition: none !important; scroll-behavior: auto !important; }
}