/* 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;
}

/* ---------- 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; }
}