/* Nubi — illustration kit (`il-`). Load AFTER nubi.css on pages that use it.
   Nubi illustrates with a scrapbook made of real photos and paper things: tilted photo frames, polaroids, tape
   strips, pastel blobs, hard-shadow stickers, little UI pieces (a class chip, a time tag, an avatar bubble, a speech
   bubble) and the crayon doodles (`.dd`, already in nubi.css). No drawn people, no images in CSS, every colour a token.
   Grammar: see ILLUSTRATIONS.md. Catalogue: pages/illustrations.html (never shipped to a buyer).

   How a composition works
   · `.il` is the stage (a container: everything inside is sized in `cqw`, so the whole scene scales as one piece
     from 1440 down to a 340px phone column). Put `data-mock` on it.
   · Every part is placed with `.il-abs` + `--x` / `--y` (its centre, % of the stage), `--w` (width, cqw), `--rot`, `--z`.
   · A pattern class (`.il-overlay`, `.il-cluster`, `.il-polaroids`, `.il-blobcut`, `.il-scrapbook`, `.il-orbit`) gives
     default positions to its slots `.il-s1 … .il-s6` (zero specificity via :where). Keep the slot order and you write
     no positions; to move a part, give it your own class and set the variables in a <style> rule — never inline.
   · Doodles: copy an `<svg class="dd dd--NAME">` from pages/_doodles.html into the stage and give it `il-abs` + a slot
     or your own class; inside `.il` a doodle takes --x/--y/--w/--rot like every other part.
   · One pop colour: the crayon `--pop` appears on the doodles only (max 2 per scene); stickers, blobs and tape use the
     five pastels, text is always navy ink. */

/* ═════════ Stage ═════════ */
.il { position: relative; container-type: inline-size; width: 100%; aspect-ratio: var(--il-ratio, 4 / 3); isolation: isolate;
  color: var(--text); font-family: var(--font); }
.il--wide { --il-ratio: 16 / 10; }
.il--square { --il-ratio: 1 / 1; }
.il--tall { --il-ratio: 4 / 5; }
.il--paper { background: var(--paper); border-radius: var(--r-lg); }
.il--white { background: var(--bg); border-radius: var(--r-lg); }
.il--clip { overflow: hidden; }   /* only when the stage sits flush in a card; by default parts may overhang */

/* Placement (individual translate/rotate so the motion engine's transform never fights the layout) */
.il-abs, .il > .dd { position: absolute; left: var(--x, 50%); top: var(--y, 50%); width: var(--w, auto); translate: -50% -50%;
  rotate: var(--rot, 0deg); z-index: var(--z, 1); margin: 0; }
.il > .dd { width: var(--w, 14cqw); height: auto; z-index: var(--z, 3); }

/* ═════════ Atoms ═════════ */

/* Pastel blob — the soft ground a cut-out photo or a sticker cluster stands on */
.il-blob { aspect-ratio: var(--ar, 1 / 1); background: var(--blob, var(--butter)); z-index: var(--z, 0);
  border-radius: 58% 42% 55% 45% / 48% 56% 44% 52%; }
.il-blob--2 { border-radius: 42% 58% 38% 62% / 55% 38% 62% 45%; }
.il-blob--3 { border-radius: 50% 50% 46% 54% / 62% 60% 40% 38%; }
.il-blob--butter { --blob: var(--butter); } .il-blob--mint { --blob: var(--mint); } .il-blob--sky { --blob: var(--sky); } .il-blob--lilac { --blob: var(--lilac); }
.il-blob--peach { --blob: var(--peach); } .il-blob--paper { --blob: var(--paper); } .il-blob--white { --blob: var(--bg); }

/* Photo frame — white border, card radius, soft lift; tilt with --rot */
.il-photo { aspect-ratio: var(--ar, 4 / 3); overflow: hidden; border-radius: clamp(14px, 4cqw, var(--r)); background: var(--surface-2);
  border: clamp(4px, 1.3cqw, 8px) solid var(--bg); box-shadow: var(--shadow-2); }
.il-photo img { width: 100%; height: 100%; object-fit: cover; }
.il-photo--bare { border: 0; }
.il-photo--round { border-radius: 50%; --ar: 1 / 1; }
.il-photo--arch { border-radius: 999px 999px clamp(14px, 4cqw, var(--r)) clamp(14px, 4cqw, var(--r)); --ar: 4 / 5; }
.il-photo--cut { border: 0; box-shadow: none; background: none; }   /* the "cut-out" photo standing on a blob */

/* Polaroid — square photo, thick white bottom with a hand-lettered caption */
.il-polaroid { display: grid; gap: 0; padding: clamp(6px, 2cqw, 12px) clamp(6px, 2cqw, 12px) 0; background: var(--bg); border-radius: 6px;
  box-shadow: var(--shadow-2); }
.il-polaroid img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 3px; }
.il-polaroid figcaption, .il-polaroid b { display: block; padding: clamp(6px, 2cqw, 12px) 2px clamp(8px, 2.6cqw, 16px); text-align: center;
  font: 600 clamp(11px, 2.6cqw, 16px)/1.15 var(--font-display); letter-spacing: -0.01em; color: var(--text); }

/* Tape strip — translucent pastel washi with torn ends; sits across a frame corner */
.il-tape { width: var(--w, 20cqw); height: clamp(14px, 5cqw, 30px); background: color-mix(in srgb, var(--tape, var(--butter)) 82%, transparent);
  clip-path: polygon(0 8%, 6% 0, 12% 10%, 18% 0, 82% 0, 88% 10%, 94% 0, 100% 8%, 100% 92%, 94% 100%, 88% 90%, 82% 100%, 18% 100%, 12% 90%, 6% 100%, 0 92%);
  z-index: var(--z, 4); }
.il-tape--butter { --tape: var(--butter); } .il-tape--mint { --tape: var(--mint); } .il-tape--sky { --tape: var(--sky); } .il-tape--lilac { --tape: var(--lilac); } .il-tape--peach { --tape: var(--peach); }

/* Stickers — the hard ink shadow (--shadow-sticker) is the tell. Circle badge, star, burst. */
.il-sticker, .il-star, .il-burst { width: var(--w, 18cqw); aspect-ratio: 1 / 1; display: grid; place-items: center; text-align: center;
  padding: .5em; font: 600 clamp(11px, 2.5cqw, 17px)/1.05 var(--font-display); letter-spacing: -0.01em; color: var(--text); z-index: var(--z, 3); }
.il-sticker { border-radius: 50%; background: var(--st, var(--butter)); border: 2px solid var(--text); box-shadow: var(--shadow-sticker); }
.il-sticker > span, .il-burst > span { display: grid; gap: .3em; justify-items: center; }
.il-sticker small, .il-star small, .il-burst small { display: block; font: 700 clamp(12px, 1.8cqw, 13px)/1.2 var(--font); letter-spacing: .06em; text-transform: uppercase; }
.il-sticker big, .il-burst big { display: block; font-size: 1.7em; line-height: 1; }
.il-star, .il-burst { filter: drop-shadow(var(--shadow-sticker)); }
.il-star:not(.il-abs), .il-burst:not(.il-abs), .il-sticker:not(.il-abs), .il-speech:not(.il-abs) { position: relative; }
.il-star::before, .il-burst::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--st, var(--butter)); }
.il-star::before { clip-path: polygon(50% 5%, 68.2% 29.9%, 97.6% 39.5%, 79.5% 64.6%, 79.4% 95.5%, 50% 86%, 20.6% 95.5%, 20.5% 64.6%, 2.4% 39.5%, 31.8% 29.9%); }
.il-star { padding: 1em .6em .3em; }   /* em, not %: % padding would resolve against the stage */
.il-burst::before { clip-path: polygon(50% 0%, 59.1% 10%, 71.7% 5%, 75.6% 17.9%, 89.1% 18.8%, 86.9% 32.2%, 98.7% 38.9%, 91% 50%, 98.7% 61.1%, 86.9% 67.8%, 89.1% 81.2%, 75.6% 82.1%, 71.7% 95%, 59.1% 90%, 50% 100%, 40.9% 90%, 28.3% 95%, 24.4% 82.1%, 10.9% 81.2%, 13.1% 67.8%, 1.3% 61.1%, 9% 50%, 1.3% 38.9%, 13.1% 32.2%, 10.9% 18.8%, 24.4% 17.9%, 28.3% 5%, 40.9% 10%); }
.il-st--butter { --st: var(--butter); } .il-st--mint { --st: var(--mint); } .il-st--sky { --st: var(--sky); } .il-st--lilac { --st: var(--lilac); }
.il-st--peach { --st: var(--peach); } .il-st--white { --st: var(--bg); }

/* Mini UI — class chip (pastel icon dot + label), time tag (navy), avatar bubble, speech bubble */
.il-chip { display: inline-flex; align-items: center; gap: .55em; padding: .45em .95em .45em .45em; border-radius: var(--r-pill); background: var(--bg);
  box-shadow: var(--shadow-2); font: 700 clamp(11px, 2.2cqw, 15px)/1.2 var(--font); color: var(--text); white-space: nowrap; z-index: var(--z, 4); }
.il-chip i { width: 2em; height: 2em; flex: none; border-radius: 50%; background: var(--dot, var(--butter)); display: grid; place-items: center; }
.il-chip i svg { width: 58%; height: 58%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.il-chip small { display: block; font: 600 max(12px, .82em)/1.2 var(--font); color: var(--muted); }
.il-chip--butter { --dot: var(--butter); } .il-chip--mint { --dot: var(--mint); } .il-chip--sky { --dot: var(--sky); } .il-chip--lilac { --dot: var(--lilac); } .il-chip--peach { --dot: var(--peach); }

.il-time { display: inline-flex; align-items: center; gap: .45em; padding: .45em .9em; border-radius: var(--r-pill); background: var(--accent); color: var(--on-accent);
  font: 700 clamp(11px, 2cqw, 14px)/1.2 var(--font); white-space: nowrap; box-shadow: var(--shadow-1); z-index: var(--z, 4); }
.il-time svg { width: 1.15em; height: 1.15em; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }

.il-avatar { display: inline-flex; align-items: center; gap: .5em; font: 700 clamp(11px, 2cqw, 14px)/1.2 var(--font); color: var(--text); white-space: nowrap; z-index: var(--z, 4); }
.il-avatar img { width: clamp(30px, 10cqw, 64px); aspect-ratio: 1 / 1; border-radius: 50%; object-fit: cover; object-position: 50% 15%; background: var(--peach); border: clamp(2px, .7cqw, 4px) solid var(--bg); box-shadow: var(--shadow-2); }
.il-avatar b { padding: .4em .8em; border-radius: var(--r-pill); background: var(--bg); box-shadow: var(--shadow-1); }
.il-avatar--stack { flex-direction: column; gap: .35em; }

.il-speech { max-width: var(--w, 40cqw); width: max-content; padding: .7em 1em; border-radius: clamp(12px, 3cqw, 20px); background: var(--sp, var(--bg)); box-shadow: var(--shadow-2);
  font: 500 clamp(11px, 2.3cqw, 16px)/1.3 var(--font-display); letter-spacing: -0.005em; color: var(--text); z-index: var(--z, 5); }
.il-speech::after { content: ""; position: absolute; left: 18%; bottom: calc(-1 * clamp(8px, 2.2cqw, 14px)); width: clamp(14px, 3.6cqw, 22px); height: clamp(10px, 2.6cqw, 16px);
  background: inherit; clip-path: polygon(0 0, 100% 0, 10% 100%); }
.il-speech--r::after { left: auto; right: 18%; clip-path: polygon(0 0, 100% 0, 90% 100%); }
.il-speech--up::after { bottom: auto; top: calc(-1 * clamp(8px, 2.2cqw, 14px)); clip-path: polygon(10% 0, 100% 100%, 0 100%); }
.il-speech--butter { --sp: var(--butter); } .il-speech--mint { --sp: var(--mint); } .il-speech--sky { --sp: var(--sky); } .il-speech--lilac { --sp: var(--lilac); }

/* Hand label — a short Fredoka note next to a doodle arrow */
.il-label { font: 600 clamp(12px, 2.6cqw, 18px)/1.15 var(--font-display); color: var(--text); white-space: nowrap; z-index: var(--z, 4); }

/* Orbit ring — dashed path the badges sit on */
.il-ring { aspect-ratio: 1 / 1; border-radius: 50%; border: 2px dashed rgba(var(--accent-rgb), .22); z-index: 0; }

/* ═════════ Layout patterns (default slot positions; zero specificity) ═════════ */

/* 1 · Photo + doodle overlay — one big tilted photo, a chip off the bottom edge, a sticker off a top corner, 1–2 doodles */
:where(.il-overlay) > :where(.il-s1) { --x: 50%; --y: 50%; --w: 74cqw; --rot: -2deg; }
:where(.il-overlay) > :where(.il-s2) { --x: 24%; --y: 84%; }
:where(.il-overlay) > :where(.il-s3) { --x: 83%; --y: 15%; --w: 18cqw; --rot: 8deg; }
:where(.il-overlay) > :where(.il-s4) { --x: 10%; --y: 18%; --w: 16cqw; --rot: -10deg; }
:where(.il-overlay) > :where(.il-s5) { --x: 88%; --y: 86%; --w: 14cqw; }

/* 2 · Sticker cluster — no photo needed: one big badge, a star, a burst, a chip, a speech bubble around a blob */
:where(.il-cluster) > :where(.il-s1) { --x: 50%; --y: 52%; --w: 62cqw; }
:where(.il-cluster) > :where(.il-s2) { --x: 50%; --y: 50%; --w: 30cqw; --rot: -6deg; }
:where(.il-cluster) > :where(.il-s3) { --x: 24%; --y: 28%; --w: 19cqw; --rot: -12deg; }
:where(.il-cluster) > :where(.il-s4) { --x: 77%; --y: 72%; --w: 21cqw; --rot: 10deg; }
:where(.il-cluster) > :where(.il-s5) { --x: 74%; --y: 17%; }
:where(.il-cluster) > :where(.il-s6) { --x: 26%; --y: 82%; }

/* 3 · Polaroid stack — three fanned polaroids, tape on the top one, a label */
:where(.il-polaroids) > :where(.il-s1) { --x: 21%; --y: 44%; --w: 31cqw; --rot: -9deg; }
:where(.il-polaroids) > :where(.il-s2) { --x: 79%; --y: 43%; --w: 31cqw; --rot: 7deg; }
:where(.il-polaroids) > :where(.il-s3) { --x: 50%; --y: 56%; --w: 30cqw; --rot: -1.5deg; --z: 2; }
:where(.il-polaroids) > :where(.il-s4) { --x: 50%; --y: 22%; --w: 18cqw; --rot: -4deg; }
:where(.il-polaroids) > :where(.il-s5) { --x: 82%; --y: 88%; }

/* 4 · Pastel blob + cut-out photo — arched photo standing on a blob, chip left, time tag right, an avatar */
:where(.il-blobcut) > :where(.il-s1) { --x: 50%; --y: 54%; --w: 64cqw; }
:where(.il-blobcut) > :where(.il-s2) { --x: 50%; --y: 50%; --w: 42cqw; --z: 2; }
:where(.il-blobcut) > :where(.il-s3) { --x: 20%; --y: 70%; }
:where(.il-blobcut) > :where(.il-s4) { --x: 80%; --y: 30%; }
:where(.il-blobcut) > :where(.il-s5) { --x: 80%; --y: 78%; }

/* 5 · Scrapbook collage — two taped photos, a speech bubble, a star sticker */
:where(.il-scrapbook) > :where(.il-s1) { --x: 38%; --y: 46%; --w: 56cqw; --rot: -4deg; }
:where(.il-scrapbook) > :where(.il-s2) { --x: 74%; --y: 66%; --w: 36cqw; --rot: 5deg; --z: 2; }
:where(.il-scrapbook) > :where(.il-s3) { --x: 22%; --y: 13%; --w: 18cqw; --rot: -18deg; }
:where(.il-scrapbook) > :where(.il-s4) { --x: 80%; --y: 38%; --w: 15cqw; --rot: 14deg; }
:where(.il-scrapbook) > :where(.il-s5) { --x: 74%; --y: 13%; }
:where(.il-scrapbook) > :where(.il-s6) { --x: 16%; --y: 82%; --w: 17cqw; --rot: -8deg; }

/* 6 · Badge orbit — a round photo in the middle, a dashed ring, 3–5 badges riding it */
:where(.il-orbit) > :where(.il-s1) { --x: 50%; --y: 50%; --w: 40cqw; }
:where(.il-orbit) > :where(.il-ring) { --x: 50%; --y: 50%; --w: 66cqw; }
:where(.il-orbit) > :where(.il-s2) { --x: 50%; --y: 9%; }
:where(.il-orbit) > :where(.il-s3) { --x: 84%; --y: 40%; --w: 17cqw; --rot: 8deg; }
:where(.il-orbit) > :where(.il-s4) { --x: 72%; --y: 86%; }
:where(.il-orbit) > :where(.il-s5) { --x: 20%; --y: 72%; --w: 16cqw; --rot: -10deg; }
:where(.il-orbit) > :where(.il-s6) { --x: 18%; --y: 30%; }

/* Motion: everything is still under ?static / reduced motion (tokens.css). One gentle float max per scene: data-m-float. */