/* Story, Invent and utility pages: the few parts they share that the kit does not have (10/10 plan, 2026-09-29).
   Linked after the stamped head block on invent, how-a-toy-is-made, meet-the-lab, joseph, secrets, links, 404, mission
   and brand-book. Tokens only: no new colours. Everything here is scoped by its own st- class, so it never touches the frame. */

/* ---------- .st-frame: the chunky crew-card frame for toy-world pictures (a polaroid means a real photo, so renders go here) ---------- */
.st-frame{position:relative;display:block;margin:0;background:var(--card);border:3px solid var(--ink);border-radius:var(--r-card);
  box-shadow:var(--sh-3);padding:10px 10px 0;transform:rotate(2deg)}
.st-frame--l{transform:rotate(-2deg)}
.st-frame img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border:3px solid var(--ink);border-radius:10px;background:var(--sand)}
.st-frame figcaption{font-family:var(--f-hand);font-weight:700;font-size:var(--fs-hand);color:var(--ink);text-align:center;line-height:1.1;padding:10px 6px 12px}
.st-frame::before{content:"";position:absolute;top:-14px;left:50%;width:92px;height:26px;margin-left:-46px;transform:rotate(-4deg);z-index:1;
  background:rgba(255,201,51,.85);border-left:2px dashed rgba(43,35,68,.25);border-right:2px dashed rgba(43,35,68,.25)}

/* ---------- .st-num: a numbered yellow disc, the same as the Imaginator's step pills ---------- */
.st-num{display:inline-grid;place-items:center;width:40px;height:40px;flex:none;border-radius:50%;background:var(--sun);border:3px solid var(--ink);
  box-shadow:var(--sh-1);font-family:var(--f-display);font-weight:400;font-size:1.2rem;line-height:1;color:var(--ink)}

/* ---------- .st-scroll: a sideways scroller that says so (snap, a fading right edge and a hint line) ---------- */
.st-scroll{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-color:var(--ink) var(--sand);
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 40px),transparent)}
.st-scroll.is-end{-webkit-mask-image:none;mask-image:none}
.st-scroll > *{scroll-snap-align:start}
.st-hint{font-family:var(--f-hand);font-weight:700;font-size:var(--fs-hand);color:var(--teal-ink);text-align:right;margin:var(--s-2) 0 0}

/* ---------- .st-seam: a torn paper edge between two grounds (set --seam-from and --seam-to) ---------- */
.st-seam{display:block;height:28px;margin:0;background:var(--seam-to,var(--night));
  -webkit-mask:radial-gradient(14px 12px at 14px 0,transparent 98%,#000) 0 0/28px 28px repeat-x;mask:radial-gradient(14px 12px at 14px 0,transparent 98%,#000) 0 0/28px 28px repeat-x}

/* ---------- .st-classified: yellow-and-ink hazard tape across the page ---------- */
.st-classified{display:flex;align-items:center;justify-content:center;gap:var(--s-5);overflow:hidden;white-space:nowrap;min-height:44px;margin:0;
  font-family:var(--f-display);font-weight:400;font-size:1.1rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
  background:repeating-linear-gradient(-45deg,var(--sun) 0 22px,var(--ink) 22px 30px);border-block:3px solid var(--ink)}
.st-classified span{background:var(--sun);padding:4px 14px;border:3px solid var(--ink);border-radius:var(--r-tag)}

/* ---------- .st-pills: a row of pill links (Lilita, icon circle, one job colour each) ---------- */
.st-pill{display:flex;align-items:center;gap:var(--s-3);min-height:60px;padding:6px 20px 6px 8px;font-family:var(--f-display);font-weight:400;font-size:1.2rem;
  line-height:1.15;color:var(--ink);text-decoration:none;background:var(--card);border:3px solid var(--ink);border-radius:var(--r-pill);box-shadow:var(--sh-2);
  transition:transform var(--t-quick) var(--ease-pop),box-shadow var(--t-quick) var(--ease-pop)}
.st-pill__ic{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;background:var(--paper);border:2px solid var(--ink)}
.st-pill__ic svg{width:28px;height:28px}
.st-pill small{display:block;font-family:var(--f-body);font-weight:700;font-size:var(--fs-small);color:var(--muted)}
.st-pill--buy{background:var(--coral)}.st-pill--make{background:var(--sun)}.st-pill--visit{background:var(--teal)}
.st-pill--buy small,.st-pill--make small,.st-pill--visit small{color:var(--ink)}
@media (hover:hover) and (pointer:fine){.st-pill:hover{transform:translate(-2px,-2px);box-shadow:var(--sh-3)}}
.st-pill:active{transform:translate(2px,2px);box-shadow:var(--sh-1);transition-duration:var(--t-tap)}

@media (prefers-reduced-motion:reduce){.st-pill{transition:none}}
html.calm .st-pill{transition:none}