@struq/skill 0.2.1 → 0.3.0

package/skills/struq/recipes/lib/gsap.ts

@@ -0,0 +1,21 @@
+// lib/gsap.ts (Struq recipe)
+// One registry for every GSAP plugin the site uses. Import gsap from here, never from "gsap"
+// directly, so a component rendered on its own still has its plugins registered.
+import gsap from "gsap";
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+import { SplitText } from "gsap/SplitText";
+import { useGSAP } from "@gsap/react";
+
+gsap.registerPlugin(ScrollTrigger, SplitText, useGSAP);
+
+// The Struq entrance: expo.out inside the reveal band.
+gsap.defaults({ ease: "expo.out", duration: 0.9 });
+
+export const EASE = {
+  enter: "expo.out",
+  exit: "power2.in",
+  swap: "power3.inOut",
+  curtain: "power4.inOut",
+} as const;
+
+export { gsap, ScrollTrigger, SplitText, useGSAP };

package/skills/struq/references/anti-patterns.md

@@ -44,7 +44,7 @@ Surface ladder steps (`surface-0 → 1 → 2`) signal depth tonally. Real shadow
 **Agency:** kill the cards; let type and rhythm carry it:
 ```tsx
 <section className="content-grid py-40 gap-y-0">
-  <p className="eyebrow text-eyebrow text-ink-muted">Capabilities</p>
+  <h2 className="font-display text-h2 max-w-[18ch]">What we take on, start to finish</h2>
   <div className="mt-16 divide-y divide-line">
     {features.map((f) => (
       <div key={f.title} className="group grid grid-cols-12 items-baseline gap-4 py-10">
@@ -55,7 +55,7 @@ Surface ladder steps (`surface-0 → 1 → 2`) signal depth tonally. Real shadow
   </div>
 </section>
 ```
-Editorial rows, left-aligned, divided by hairlines, asymmetric columns. Hierarchy comes from type scale and the eyebrow, not from a number on every row (see §16). ([composition.md](composition.md))
+Editorial rows, left-aligned, divided by hairlines, asymmetric columns. Hierarchy comes from type scale and the hairlines, not from a label or a number on every row (see §16). ([composition.md](composition.md))
 
 ---
 
@@ -180,7 +180,7 @@ Lines rising from individual overflow masks. ([scroll-reveals.md](scroll-reveals
 **Reflex:** h1 `text-4xl`, h2 `text-3xl`, h3 `text-2xl`, h4 `text-xl`: five steps between 20 and 36px, all `font-bold`, default tracking.
 **The tell:** compressed mid-range hierarchy. Nothing leads, everything is "kind of big."
 
-**Agency:** two extremes, set through the role tokens so nothing is improvised: `font-display text-display` for the hero (the token carries the pairing's clamp, tracking and leading), `font-display text-h2` per section, `type-h3 text-h3` for items, `text-body` at 1 to 1.0625rem, and `eyebrow text-eyebrow text-ink-muted` (uppercase 0.75rem, tracked 0.12 to 0.18em per face) as wayfinding between. No `tracking-tight`: tracking belongs to the face and the role ([typography.md](typography.md) §3.1). **Hero/display runs light (300 to 400)**. Large + light is the agency signal; heavy display (600+) is a deliberate genre choice only, never the reflex. **Floor:** body ≥1rem, muted ≥0.875rem, nothing below 12px. **Contrast:** body ≥4.5:1 (WCAG AA), large/≥24px ≥3:1; `ink-faint` is never text. ([baseline-prompt.md](baseline-prompt.md); the Signature pairings, roles and fluid scale are in [typography.md](typography.md))
+**Agency:** two extremes, set through the role tokens so nothing is improvised: `font-display text-display` for the hero (the token carries the pairing's clamp, tracking and leading), `font-display text-h2` per section, `type-h3 text-h3` for items, `text-body` at 1 to 1.0625rem, and quiet `text-small text-ink-muted` meta lines (sentence case) for captions and dates. No label above a heading (§19). No `tracking-tight`: tracking belongs to the face and the role ([typography.md](typography.md) §3.1). **Hero/display runs light (300 to 400)**. Large + light is the agency signal; heavy display (600+) is a deliberate genre choice only, never the reflex. **Floor:** body ≥1rem, muted ≥0.875rem, nothing below 12px. **Contrast:** body ≥4.5:1 (WCAG AA), large/≥24px ≥3:1; `ink-faint` is never text. ([baseline-prompt.md](baseline-prompt.md); the Signature pairings, roles and fluid scale are in [typography.md](typography.md))
 
 ---
 
@@ -216,7 +216,7 @@ Lines rising from individual overflow masks. ([scroll-reveals.md](scroll-reveals
 **Reflex:** `01 / 02 / 03 / 04` stamped on every section header, every feature, every list row (often oversized in a corner) as the page's wayfinding system.
 **The tell:** uniform sequencing is reflexive, not editorial. No art director numbers *everything*; it is the same impulse as `py-16` on every section, applied to labels. It signals "I needed a decoration and reached for the nearest one."
 
-**Agency:** wayfinding through variety: tracked uppercase eyebrows, hairline rules, scale jumps, surface changes. A numeral earns its place only as a **single deliberate accent** (one oversized `03` against a manifesto line), never as a per-row counter. If you can delete the numbers and lose no meaning, they were filler.
+**Agency:** wayfinding through variety: hairline rules, scale jumps, surface changes, the headings themselves. Never tracked uppercase eyebrows: they are a tell of their own (§19). A numeral earns its place only as a **single deliberate accent** (one oversized `03` against a manifesto line), never as a per-row counter. If you can delete the numbers and lose no meaning, they were filler.
 
 **The boundary:** ordinal numbering *inside one genuinely stepped component* (the phase kickers of a pinned sequence, see [pinning-scrub.md](pinning-scrub.md) §1, or a numbered process that really is ordered) is legitimate content, not this tell. The tell is *page-wide* stamping: numerals as the default decoration on every section, feature, and row.
 
@@ -229,7 +229,7 @@ Lines rising from individual overflow masks. ([scroll-reveals.md](scroll-reveals
 <p className="font-mono text-xs uppercase tracking-widest">// System online</p>
 <span className="font-mono text-sm">[ 2024 ]</span>
 ```
-**The tell:** monospace on eyebrows, labels, stats, badges, timestamps, or body to look "technical / engineered / terminal." It is the aesthetic of a code editor, not a designed page, and it has become a default reach for "techy," which makes it read as generated.
+**The tell:** monospace on labels, stats, badges, timestamps, or body to look "technical / engineered / terminal." It is the aesthetic of a code editor, not a designed page, and it has become a default reach for "techy," which makes it read as generated.
 
 **Agency:** a real text face carries all UI and copy; "precision" comes from tracking, `tabular-nums` on figures, and tight type, not from a typewriter font. **Mono is reserved for literal code** (snippets, inline `code`, terminal output on a dev-tool site where it is genuinely the subject). Anywhere else, it is a tell. The same logic kills the scramble/decode "terminal" loader ([loaders.md](loaders.md)).
 
@@ -249,8 +249,72 @@ Lines rising from individual overflow masks. ([scroll-reveals.md](scroll-reveals
 
 ---
 
+## 19. Eyebrows
+
+**Reflex:**
+```tsx
+<p className="text-xs font-medium uppercase tracking-[0.18em] text-ink-muted">Restaurant in Amsterdam-Noord</p>
+<h1 className="font-display text-display">Vis en groente, van het seizoen.</h1>
+```
+**The tell:** a small uppercase tracked label above every heading. Generated pages put one on every section because it looks "designed" at no cost; the result is the most recognisable AI marketing page there is, and it competes with the heading it sits on.
+
+**Agency:** the heading carries the section alone. Wayfinding comes from a hairline rule (`border-t border-line`), a change of surface step, a jump in scale, an image. A place or a date the reader needs goes in the lead line under the heading, in sentence case. `check.mjs` fails on `uppercase` with `tracking-`.
+
+---
+
+## 20. Gradients, tinted fills and glass
+
+**Reflex:** `bg-linear-to-b from-surface-0 to-surface-2` on a section, `bg-accent/10` behind a label, `bg-white/5 backdrop-blur` on a card, a radial glow behind the hero.
+
+**The tell:** colour that is neither a surface nor the accent. Translucent tints and gradients are the generator's way to make a flat page "rich"; they muddy the palette and read as a template on sight.
+
+**Agency:** flat, opaque surface steps (`bg-surface-1`, `bg-surface-2`) and hairlines. The only translucent fill is a flat black scrim over a photo so type in `text-on-photo` reads. Depth comes from the WebGL hero, the photography and the overlap of sections, not from washes.
+
+---
+
+## 21. Pills
+
+**Reflex:** `rounded-full px-4 py-1.5 bg-accent/10 text-accent` badges, a "New" pill with a pulsing dot, pill-shaped buttons.
+
+**The tell:** the pill with a dot is the badge of every generated launch page. Pills everywhere also break the site's radius system.
+
+**Agency:** the site radius (0 to 4px) on every button and frame; status as words in the lead line; no badges. The primary CTA is a `MagneticButton`, square-cornered, its fill rising on hover.
+
+---
+
+## 22. Empty frames
+
+**Reflex:** an `aspect-[16/9] bg-surface-2` box with "Foto volgt" in it, or a placeholder component standing in for a photo that never came.
+
+**The tell:** the reader sees the site was not finished, and a plain page with no images at all beats it.
+
+**Agency:** every frame holds a real image: the client's photo, or the Struq beeldbank pack (`scripts/images.mjs`, automatic, CC0), or, when struq.nl is unreachable, the graded fallback plate the script writes. Never ship an empty frame ([struq-imagery.md](struq-imagery.md)).
+
+---
+
+## 23. The smaller tells
+
+Each is cheap on its own; three of them together read as generated.
+
+| Tell | Reflex | Instead |
+|---|---|---|
+| Side-stripe borders | `border-l-4 border-accent` down a card or a quote | a hairline, or nothing |
+| Status badges | `bg-green-100 text-green-700` "Available" chips | the fact in the lead line |
+| Live dots | an `animate-ping` dot beside "Now open" | the words alone |
+| Uppercase marquees | a scrolling band of tracked capitals | a large display line in sentence case, if any marquee at all |
+| Generic CTAs | "Learn more", "Get started", "Lees meer" | a verb and the thing: "Reserveer een tafel", "Bekijk de projecten" |
+| Generic headings | "Our Services", "Why Choose Us", "Over ons" | a heading only this business could write |
+| Hype copy | "seamless", "elevate", "next-level", "naadloos", "revolutionair" | the plain, specific claim from the brief |
+| Hero-metric template | a hero followed by a strip of four big numbers | numbers only when the brief gives them, set inside the copy |
+| Category-reflex colours | green for every eco brand, blue for every bank, purple for every AI | the canon palette that fits the mood; the reflex hue only when it is the brand's own |
+| Restated headings | a paragraph that repeats the heading in more words | the paragraph adds the next fact |
+
+---
+
 ## The 30-second tell scan
 
+The script does this scan for you: `node <skill-dir>/scripts/check.mjs` prints every hit with its file and line. By hand:
+
 Before shipping, run these grep-level checks:
 - `shadow-md|shadow-lg` on cards → §1 · `from-blue|to-purple|bg-clip-text` → §11
 - `py-16` ≥3 times → §8 · `grid-cols-3` of identical children → §2
@@ -262,4 +326,5 @@ Before shipping, run these grep-level checks:
 - `font-bold` on the hero/`h1` / largest size = `text-4xl` → §12 · faint text on body copy / contrast below AA → §12
 - size ladders like `text-2xl md:text-4xl lg:text-6xl`, `px-`/`py-` tuned per breakpoint, fixed-`px` layout widths, or no fluid root font-size → §18
 - `text-4xl` as the largest size on the page → §12 · "Lorem|Acme|John Doe" → §15
-- `tracking-tight`, `text-ink-faint`, or `text-xs uppercase tracking-[` on headings and eyebrows (role tokens bypassed) → §12 · `Inter|Roboto|Open_Sans|Poppins|Montserrat|Lato|Space_Grotesk|Geist` in `next/font` imports → [typography.md](typography.md) §3.4
+- `uppercase` with `tracking-`, or an `eyebrow`/`kicker` class → §19 · `gradient|bg-linear-|backdrop-blur|bg-accent/` → §20 · `rounded-full` with `px-` → §21 · `Placeholder`, an empty `aspect-` div → §22
+- `tracking-tight`, `text-ink-faint`, or `uppercase` with `tracking-` anywhere (the eyebrow tell, §19), or `text-xs` on headings (role tokens bypassed) → §12 · `Inter|Roboto|Open_Sans|Poppins|Montserrat|Lato|Space_Grotesk|Geist` in `next/font` imports → [typography.md](typography.md) §3.4

package/skills/struq/references/baseline-prompt.md

@@ -1,10 +1,10 @@
 # The Minimal Baseline: rationale + standalone paste block
 
-**The canonical baseline block lives in [SKILL.md](../SKILL.md).** This file does two jobs. It explains **why each rule earns its place** (the rationale below), and it carries the one **standalone copy-paste block** for agents that do not load Struq as a skill: the canonical block plus two role-priming lines.
+**SKILL.md carries the short form of this baseline ("The taste baseline") and the Build checklist that enforces it.** This file does two jobs. It explains **why each rule earns its place** (the rationale below), and it carries the one **standalone copy-paste block** for agents that do not load Struq as a skill.
 
-<!-- GENERATED FROM SKILL.md: the block below is a copy of the canonical baseline block, with two role-priming lines above its title and one blank line between them. Do not edit it here. Edit SKILL.md, then re-copy the block and keep the two role-priming lines. -->
+<!-- The paste block below must agree with SKILL.md ("The taste baseline" and "Three rules that never bend"). When a rule changes there, change it here in the same commit. -->
 
-## The paste block (generated, for any LLM, any stack)
+## The paste block (for any LLM, any stack)
 
 Paste this at the top of any project prompt to lift the output into the top tier. Include the rationale section only when the agent has room.
 
@@ -28,10 +28,11 @@ about half that. Body 1rem to 1.0625rem at 400, leading 1.6+, 55 to 75ch;
 emphasis 500, never 700. Hierarchy from scale contrast, not medium sizes.
 ROLES: every string takes a role token, never text-xs, text-lg or text-5xl:
 font-display text-display, font-display text-h2, type-h3 text-h3,
-text-lead, text-body, text-small, eyebrow text-eyebrow, font-ui text-ui,
+text-lead, text-body, text-small, meta text-meta, font-ui text-ui,
 stat text-stat, and font-display text-statement for the one Orient line
-or manifesto. Eyebrows: uppercase 0.75rem (the 12px floor), tracked 0.12
-to 0.18em per face, ink-muted, one per section, never ink-faint.
+or manifesto. NO EYEBROWS: no small uppercase tracked label above a
+heading, no uppercase marquee. The heading, a hairline and scale do the
+wayfinding; captions and dates are meta in sentence case, ink-muted.
 FLOOR: body at least 1rem, muted at least 0.875rem, nothing under 12px.
 CONTRAST: body at least 4.5:1, large text at least 3:1. ink-faint is never
 text: hairlines and disabled states only.
@@ -65,8 +66,10 @@ flat gray hex. Shadows only for true floating elements, then large, soft and fai
 COLOR: One accent, used sparingly (links, the key CTA, one highlight per
 viewport). Neutrals are temperature-shifted (warm cream and off-black, or cool
 charcoal), never pure #FFF and #000 with gray-500 text. A second accent is a
-declared genre choice with its own token and the same budget. No blue to
-purple gradients, no gradient text, no glassmorphism cards.
+declared genre choice with its own token and the same budget. NO gradients
+of any kind, no gradient text, no glass, no tinted translucent fills (a
+flat black scrim over a photo is the one exception), no pills, no pulsing
+dots. No blue or purple unless the brand is that colour.
 
 MOTION: Lenis smooth scroll (lerp 0.09 to 0.11) on one gsap.ticker clock,
 unless the genre calls for native scroll. Every entrance animates opacity AND
@@ -90,20 +93,21 @@ ink-colored. Never emoji, never the AI-cliche icons (Sparkles, Rocket, Zap),
 never icons in colored chips. Animated icons run under 500ms on click and
 never loop in standard UI.
 
-DETAILS THAT SELL IT: Real running copy. Tracked uppercase eyebrows as
-wayfinding, not 01/02/03 stamped on every section (one deliberate oversized
-numeral is fine). The footer is designed as hard as the hero. Custom
+DETAILS THAT SELL IT: Real running copy, never invented facts. Never
+01/02/03 stamped on every section (one deliberate oversized numeral is
+fine). Never an empty image frame. The footer is designed as hard as the
+hero. Custom
 ::selection color. Visible, designed focus-visible states. Every route change
 is a designed transition, not a hard cut.
 ```
 
-The block is the floor, not the ceiling. For the full recipe stack (two-face type system, the Lenis + GSAP single clock, showpieces, route transitions, WebGL) start from [direction.md](direction.md), which turns a brief into one contract file, `STRUQ.md`, that cites the other reference files.
+The block is the floor, not the ceiling. For the full recipe stack (Struq's canon, the beeldbank, the Lenis + GSAP single clock, the SplitText hero, a showpiece, the WebGL hero layer) run the Build checklist in [SKILL.md](../SKILL.md).
 
 ## Why each rule matters
 
 **Spacing asymmetry.** Uniform `py-16` is the single most reliable template tell. Real art direction treats vertical rhythm as pacing: a hero breathes, a feature block is dense, a manifesto line sits in 20rem of air. Varying section padding by role is free and reads instantly as "someone decided this." The "too empty" instruction exists because LLMs systematically under-use whitespace; what feels wasteful in code feels expensive in the browser.
 
-**Type scale contrast.** Templates use five sizes between 16 and 36px, so nothing leads. Agencies compress hierarchy into two extremes: enormous display type (it is the visual, not decoration around the visual) and small, quiet everything else. Negative tracking matters because text faces are spaced for 16px, and at 96px+ the gaps look broken; how much depends on the face (a geometric sans takes about -0.03em, a hairline serif about -0.01em), which is why tracking lives in the pairing row and not in one `tracking-tight`. The tracked-uppercase eyebrow replaces the "medium subhead" that flattens hierarchy. Role tokens (`text-display`, `text-h2`, `eyebrow text-eyebrow`) exist so no component improvises a size, and the one signature move exists so two Struq sites never open the same way. The deeper type system (Signature pairings, roles, fluid scale, SplitText typography) lives in [typography.md](typography.md).
+**Type scale contrast.** Templates use five sizes between 16 and 36px, so nothing leads. Agencies compress hierarchy into two extremes: enormous display type (it is the visual, not decoration around the visual) and small, quiet everything else. Negative tracking matters because text faces are spaced for 16px, and at 96px+ the gaps look broken; how much depends on the face (a geometric sans takes about -0.03em, a hairline serif about -0.01em), which is why tracking lives in the pairing row and not in one `tracking-tight`. The fix for the "medium subhead" that flattens hierarchy is not a tracked-uppercase eyebrow (that is a tell of its own) but a bigger gap between display and body. Role tokens (`text-display`, `text-h2`, `meta text-meta`) exist so no component improvises a size, and the one signature move exists so two Struq sites never open the same way. The deeper type system (Signature pairings, roles, fluid scale, SplitText typography) lives in [typography.md](typography.md).
 
 **Tonal elevation.** Drop shadows on light cards are the Bootstrap-era elevation model; design-led products (Linear, Vercel, Arc) moved to tonal ladders, where closer surfaces are lighter (dark mode) or distinguished by hairline borders and a subtle tone step (light mode). The light-mode direction is a preset decision: editorial/luxury pages are the lightest layer with panels stepping deeper; brutalist pages are toned with white panels lifting off them. One step per layer keeps depth legible either way. When you do shadow a floating element, the large/soft/low-opacity recipe reads as ambient light, while `shadow-lg` reads as a 2015 component library.
 
@@ -115,4 +119,4 @@ The block is the floor, not the ceiling. For the full recipe stack (two-face typ
 
 **Grid-breaking.** A layout where every element respects the container communicates "theme." Bleed, overlap, and stickiness communicate "art direction" because they require coordinating elements across section boundaries, which is exactly what templates cannot do. Twice per page is the floor; it should look intentional, not chaotic.
 
-**Details.** Real copy forces real layout decisions (lorem hides widow/orphan and width problems). Tracked eyebrow labels give long pages an editorial spine. Note what is *removed* here: stamping `01/02/03` on every section/feature/row is one of the most reliable AI tells. It is reflexive wayfinding that no editor would apply uniformly. One deliberate oversized numeral can be a strong accent; sequencing the whole page is filler. (Ordinal numbering *inside* one genuinely stepped component, such as a pinned phase sequence or a numbered process, is legitimate; page-wide stamping is the tell.) The same logic bans two other reflexes: **monospace as flavor** (it is the look of a code editor, not a designed page, and belongs only around literal code) and the **cliché icon set** (`Sparkles`/`Rocket`/`Zap` and their emoji forms 🚀✨💡 are the visual signature of generated UI). The footer is where everyone quits, so finishing it signals the whole build is finished. Selection color and focus states are tiny, but they are the difference between "surface-level styling" and "someone touched every state."
+**Details.** Real copy forces real layout decisions (lorem hides widow/orphan and width problems). Long pages get their editorial spine from hairline rules, surface steps and headings that say something, never from tracked eyebrow labels. Note what is *removed* here: stamping `01/02/03` on every section/feature/row is one of the most reliable AI tells. It is reflexive wayfinding that no editor would apply uniformly. One deliberate oversized numeral can be a strong accent; sequencing the whole page is filler. (Ordinal numbering *inside* one genuinely stepped component, such as a pinned phase sequence or a numbered process, is legitimate; page-wide stamping is the tell.) The same logic bans two other reflexes: **monospace as flavor** (it is the look of a code editor, not a designed page, and belongs only around literal code) and the **cliché icon set** (`Sparkles`/`Rocket`/`Zap` and their emoji forms 🚀✨💡 are the visual signature of generated UI). The footer is where everyone quits, so finishing it signals the whole build is finished. Selection color and focus states are tiny, but they are the difference between "surface-level styling" and "someone touched every state."

package/skills/struq/references/brief-router.md

@@ -82,8 +82,8 @@ Steps marked **SYSTEM** are decided in [direction.md](direction.md) §4; they ar
 7. **Route transitions.** Multi-page: plan a full-screen transition and its variant ([route-transitions.md](route-transitions.md), with [page-entrances.md](page-entrances.md) for what happens after the curtain). One-pager: none, but reserve the hook if routes are coming. Loader yes or no from the genre's register (loaders suit narrative, portfolio and launch only, see [loaders.md](loaders.md)).
 8. **WebGL gate.** Only if a section genuinely calls for it AND the deadline allows. If yes, plan the poster first and name the moment (what the user sees, where in the arc, the fallback, one gate for canvas and pin) per [webgl-r3f.md](webgl-r3f.md) §1 and [webgl-scenes.md](webgl-scenes.md) §5. **No model file?** Walk the ladder in [webgl-scenes.md](webgl-scenes.md) §4 ("No model file yet"): ask for the GLB in the gate, a declared primitive stand-in built to be replaced, or a downgrade to photography or a type-led showpiece; label the rung under ASSUMPTIONS. A whole page as one directed scene is [../cinematic/README.md](../cinematic/README.md) instead.
 9. **Motion, icons, imagery grade.** SYSTEM. Motion is the [SKILL.md](../SKILL.md) baseline unless a deviation is recorded with its reason.
-10. **Copy budget.** Per section, from [page-architecture.md](page-architecture.md) §5: hero h1 at most 8 words, eyebrows 1 to 3 words, section headlines at most 10, body 2 to 4 sentences at 44 to 52ch, CTAs 2 to 4 verb-first words, exactly one manifesto line on the whole page.
-11. **Shot list.** Per section: subject, grade, ratio and source (real, generate, treated stock), mapped onto the arc. The grade and ratio set come from SYSTEM; missing imagery is planned as placeholders per [imagery.md](imagery.md) §4b.
+10. **Copy budget.** Per section, from [page-architecture.md](page-architecture.md) §5: hero h1 at most 8 words, no eyebrows, section headlines at most 10, body 2 to 4 sentences at 44 to 52ch, CTAs 2 to 4 verb-first words, exactly one manifesto line on the whole page.
+11. **Shot list.** Per section: subject, grade, ratio and source (real, generate, treated stock), mapped onto the arc. The grade and ratio set come from SYSTEM; missing imagery is filled from the Struq beeldbank pack (struq-imagery.md) per [imagery.md](imagery.md) §4b.
 
 ---
 
@@ -147,7 +147,7 @@ Stack: Next.js App Router · React · Tailwind · GSAP · Lenis, each with the i
 ## MATERIALS
 Have: black wordmark (SVG requested), roastery photo set (bar room, hands and pour, roaster machine)
 Missing: all copy (written from the first draft, no lorem); roast bag and bean shots
-  (planned as graded placeholders, imagery.md §4b); no numbers or quotes (no proof faked)
+  (filled from the beeldbank pack proof, struq-imagery.md); no numbers or quotes (no proof faked)
 
 ## CONCEPT
 Idea: the site reads like a roast log: one week, one batch, written down by people who taste everything
@@ -160,8 +160,8 @@ Niche: food and drink product brand, buyer = the person buying beans · genre Pr
   · preset Warm Editorial · borrowed: none (the tasting bar is a room, but imagery is not a
   borrowable field; Warm Editorial already carries the warmth)
 Display: Fraunces 300, SOFT 50 (Google Fonts, OFL) · pairing S2
-Text: Urbanist 400 body, 500 eyebrow and UI (Google Fonts, OFL)
-  · roles per typography.md §3.1 S2: display 300, h2 300, h3 400, eyebrow 500, body 400
+Text: Urbanist 400 body, 500 UI (Google Fonts, OFL)
+  · roles per typography.md §3.1 S2: display 300, h2 300, h3 400, body 400
 Signature move: soft-scrub (the roast date headline softens as the reader leaves the hero)
 Hero entrance: Warm Editorial's soft-scrub plus line rise
 Palette: light · --surface-0 #FAF6F0 --surface-1 #F3EDE2 --surface-2 #EAE1D2 --surface-3 #DFD3BF
@@ -198,7 +198,7 @@ Copy budget: h1 at most 8 words ("Roasted Tuesday. Gone by Friday."), manifesto
   line only, roast frames = name + 2 tasting words + origin, CTAs "Visit the bar", "Get the beans"
 Assets to produce (8 images):
   1 hero bean macro, 21/9, generate on-brief
-  4 roast bags, 1/1, shoot (placeholders until then)
+  4 roast bags, 1/1, shoot (beeldbank pack images until then)
   1 bar room, 21/9, existing set, regraded
   1 hands and pour, 4/5, existing set, regraded
   1 roaster machine, 4/5, existing set, regraded
@@ -208,8 +208,7 @@ Assets to produce (8 images):
 - "best roaster in the city" read as craft-serious: one accent (the preset's oxblood, not the
   cream-plus-terracotta reflex), no second accent
 - wordmark stays black on cream (ink #1E1A16)
-- the gallery is never staged on placeholders: until the 4 roast shots exist, row 3 is a
-  static 2 by 2 grid of placeholder frames (no pin), and the pin switches on when they land
+- the gallery runs on beeldbank pack images until the 4 roast shots exist, then swaps them in
 - shop deferred: row 6 collects newsletter sign-ups instead of a cart
 - one-pager now, /shop reserved in the nav
 ```

package/skills/struq/references/composition.md

@@ -65,7 +65,6 @@ The arithmetic: trespasser gets `-mb-32` + `relative z-10`; receiver gets `pt-56
 
 ```tsx
 <section className="content-grid gap-y-10 py-32">
-  <p className="eyebrow text-eyebrow text-ink-muted">Selected Work</p>
   <h2 className="font-display text-h2">Selected projects</h2>
   <p className="text-body max-w-[52ch] text-ink-muted">…</p>
   <img className="bleed-full aspect-[21/9] w-full object-cover" src="/wide.jpg" alt="" />

package/skills/struq/references/depth-parallax.md

@@ -168,7 +168,7 @@ export function StackingCards({ items }: { items: { kicker: string; title: strin
         <section key={item.title} data-card
                  className={`sticky top-0 flex flex-col justify-between gap-16 overflow-hidden
                              px-8 py-12 md:min-h-[100svh] ${SURFACES[i % SURFACES.length]}`}>
-          <span className="eyebrow text-eyebrow text-ink-muted">{item.kicker}</span>
+          <span className="text-small text-ink-muted">{item.kicker}</span>
           <div className="max-w-3xl">
             <h3 className="font-display text-h2">{item.title}</h3>
             <p className="text-lead mt-6 max-w-[48ch] text-ink-muted">{item.body}</p>

package/skills/struq/references/direction.md

@@ -13,7 +13,7 @@ This file is the orchestrator for **Build**, **Redesign** and the planning half
 | 2 | **Concept** | CONCEPT | this file §3; the tension from [brief-router.md](brief-router.md) §1 | never |
 | 3 | **System** | SYSTEM | this file §4 (sole owner of type, palette, icons, imagery, motion) | never |
 | 4 | **Site plan** | PLAN | [brief-router.md](brief-router.md) §2 | never |
-| Gate | **Veto** | one message: summary, materials request, "Veto anything?" | this file §5 | the user said "just build it", or the run is non-interactive |
+| Gate | **Approval** | one message: summary, materials request, "Akkoord?" | this file §5 | never: it is the one stop, and there is no second |
 | 5 | **Build** | the site | [../SKILL.md](../SKILL.md) workflow steps 2 to 7 | |
 | 6 | **Verify** | VERIFY | [../SKILL.md](../SKILL.md) workflow step 8 | never |
 
@@ -43,13 +43,13 @@ What MATERIALS tracks:
 - No biography, training, process or sourcing stated as fact ("trained as a production thrower", "eats at the restaurant before drawing", "clay dug in Alentejo") unless the brief says it.
 - No catalogue facts: invented works, sizes, glazes, materials, prices, editions, sold-out states, stockists or client names.
 
-When the layout needs that copy to exist, draft it as a labelled placeholder and list every drafted claim under ASSUMPTIONS ("Studio paragraph: drafted, replace with Ana's words"; "Work index: 8 entries drafted as layout copy, no prices, no client names"). A portfolio with no work list gets its entries drafted the same way, titled as layout copy, never as the record. The gate message names the drafts so the client can replace them.
+When the layout needs that copy to exist, draft it as plain layout copy and list every drafted claim under ASSUMPTIONS ("Studio paragraph: drafted, replace with Ana's words"; "Work index: 8 entries drafted as layout copy, no prices, no client names"). A portfolio with no work list gets its entries drafted the same way, titled as layout copy, never as the record. The gate message names the drafts so the client can replace them.
 
 **No real imagery yet.** Plan for it instead of papering over it:
 
-- Prefer type-led showpieces (`manifesto-fill`, `scrub-headline`, `ghost-marquee`) over media-led ones; a horizontal gallery of placeholders is worse than a static grid ([showcase.md](showcase.md) Choosing).
+- Media-led showpieces work from the first build: the beeldbank pack supplies the photos. Never stage one on empty frames.
 - Every missing image becomes a shot-list line (subject, grade, ratio) under PLAN `Assets to produce`, so it can be shot, sourced or generated later ([imagery.md](imagery.md) §4).
-- In the build, a missing image renders as a placeholder frame per [imagery.md](imagery.md) §4b: a graded tonal frame at the declared ratio, with the shot-list caption set in the eyebrow style. Never grey boxes, never random stock.
+- In the build, every image slot is filled from the Struq beeldbank pack ([struq-imagery.md](struq-imagery.md)), automatically and without asking: the images are CC0. A frame is never empty and never a placeholder.
 
 ## 2. Brand
 
@@ -103,7 +103,7 @@ Decide in this order:
 
 Write `STRUQ.md` (template below), then send one message with: the name, the idea line, the two typefaces and pairing id, the signature move and hero entrance, the palette as hex, the icon family, the arc as one line, the showpiece ids, the open assumptions, and the materials request. End it with exactly this:
 
-> **Veto anything? If you have a logo, photos or real numbers, send them now.**
+> **Akkoord? Heb je een logo, foto's of echte cijfers, stuur ze nu.**
 
 Apply edits and new materials to the file; do not re-interview. This is the only stop between the brief and the build (the wizard in [brief-router.md](brief-router.md) §1b is the one exception, and it runs before this gate, not instead of it).
 

package/skills/struq/references/hero-scenes.md

@@ -0,0 +1,107 @@
+# Hero scenes: the WebGL layer behind the hero
+
+Every Struq marketing site carries a WebGL layer in its hero. `components/struq/HeroCanvas.tsx` owns everything that makes such a layer safe in production; a scene owns only what it draws.
+
+| HeroCanvas owns | The scene owns |
+|---|---|
+| Loading three.js in its own chunk after first paint | Its `THREE.Scene` and camera |
+| The poster (the photo, or the flat surface) and the fade-in after the first frame | Its geometry, material and uniforms |
+| The DPR cap (1.75, phones 1.5) and a 2.4 million pixel budget | Reading the palette it is given |
+| Pausing offscreen and in a hidden tab | `update(state)`: time, pointer, scroll, velocity into uniforms |
+| One composed still frame under `prefers-reduced-motion` and on phones | `resize(w, h)`, an optional multi-pass `render(renderer)`, `dispose()` |
+| The quiet zones: up to four `[data-quiet]` rects behind the copy, in device pixels | Calling `hush(v, gl_FragCoord.xy)` on its intensity |
+| The pointer's `presence`, easing in on move and out on rest | Using it as a gentle modulation only |
+| Running on `gsap.ticker`, the page's one clock | |
+| Keeping the poster when WebGL or the scene fails | |
+
+## The three shipped scenes
+
+| Scene | Looks like | Needs | Suits |
+|---|---|---|---|
+| `contours` | contour lines drifting like a slow survey map, every sixth in the accent | nothing | architecture, studios, consultancy, nature, research |
+| `ripple` | the hero photo as a liquid surface, rippling under the pointer, pushing in on scroll | `image` | hospitality, food, hotels, fashion, wellness |
+| `dots` | a field of points rolling like a swell, a hill under the pointer | nothing | mobility, logistics, technology, sport, energy |
+
+Props: `scene`, `image` (poster, and the texture for ripple), `grade` (0 to 1, how far ripple pulls the photo into the palette), `scrim` (0 to 0.6, a flat black layer for type in `text-on-photo`), `priority` (the poster is the LCP image).
+
+## The craft bar
+
+What separates a high-end ambient hero from a screensaver, and what every shipped scene does:
+
+- **Clean:** fine marks (hairlines, small dots) on a flat ground, antialiased with `fwidth`, and where marks crowd closer than the screen can draw, they fade into a mist instead of moire.
+- **Deep:** a perspective field (a horizon just above the top edge or in the upper third), marks compressing and thinning toward it, a fog toward the far side.
+- **Calm behind the copy:** `hush` holds the field under a soft ceiling behind every `data-quiet` element, so the copy reads at 4.5:1 and the field still runs on behind it.
+- **Composed:** the field is weighted to the right or the vanishing point sits on the right third; the left, where the headline sits, is the quiet side.
+- **Slow:** the ambient clock is 0.02 to 0.06 of real time. The pointer only modulates (a soft lift, a ripple) and only while it is present.
+- **Cheap:** noise runs once per field cell into a small target, never per screen pixel, where the look allows (`contours` shows the two-pass pattern).
+
+## Writing a scene (or porting the MCP background)
+
+A scene is one file in `components/struq/scenes/` that exports `createScene`:
+
+```ts
+// components/struq/scenes/<name>.ts
+import { NOISE_GLSL, QUIET_GLSL, quietUniforms, type CreateScene } from "./types";
+
+export const createScene: CreateScene = async ({ THREE, renderer, palette, image, grade, dark }) => {
+  const scene = new THREE.Scene();
+  const camera = new THREE.OrthographicCamera(-1, 1, 1, -1, 0, 1);
+  const quiet = quietUniforms(THREE, dark ? 0.08 : 0.12);
+  const uniforms = {
+    ...quiet.uniforms,
+    uTime: { value: 0 },
+    uRes: { value: new THREE.Vector2(1, 1) },
+    uPointer: { value: new THREE.Vector2() },
+    uScroll: { value: 0 },
+    uSurface: { value: new THREE.Color(palette.surface) },
+    uInk: { value: new THREE.Color(palette.ink) },
+    uAccent: { value: new THREE.Color(palette.accent) },
+  };
+  const material = new THREE.ShaderMaterial({
+    uniforms,
+    vertexShader: `varying vec2 vUv; void main() { vUv = uv; gl_Position = vec4(position.xy, 0.0, 1.0); }`,
+    fragmentShader: `
+      uniform float uTime; uniform vec2 uRes; uniform vec2 uPointer; uniform float uScroll;
+      uniform vec3 uSurface; uniform vec3 uInk; uniform vec3 uAccent;
+      varying vec2 vUv;
+      ${NOISE_GLSL}
+      ${QUIET_GLSL}
+      void main() {
+        float v = 0.0; // ... the look's intensity, from noise per cell where you can
+        v = hush(v, gl_FragCoord.xy);
+        vec3 col = mix(uSurface, uInk, v); // the three palette colours only
+        gl_FragColor = vec4(col, 1.0);
+        #include <colorspace_fragment>
+      }`,
+  });
+  const geometry = new THREE.PlaneGeometry(2, 2);
+  scene.add(new THREE.Mesh(geometry, material));
+  return {
+    scene,
+    camera,
+    update(s) { uniforms.uTime.value = s.time; uniforms.uPointer.value.set(s.pointer.x, s.pointer.y); uniforms.uScroll.value = s.scroll; quiet.update(s); },
+    resize(w, h) { uniforms.uRes.value.set(w, h); },
+    dispose() { geometry.dispose(); material.dispose(); },
+  };
+};
+```
+
+Then register it in `HeroCanvas.tsx`:
+
+```ts
+const SCENES = {
+  contours: () => import("./scenes/contours"),
+  ripple: () => import("./scenes/ripple"),
+  dots: () => import("./scenes/dots"),
+  "<name>": () => import("./scenes/<name>"),
+};
+```
+
+**The MCP background (`struq_achtergrond`).** It returns a background family with its shader or scene description and its parameters. Port it into this contract: its shader becomes the fragment shader, its colour inputs become `uSurface`, `uInk` and `uAccent` built from `palette` (that is the recolour: the site's tokens, never the colours in the MCP sample), its animation reads `uTime`, and its pointer or scroll inputs read `uPointer` and `uScroll`. Build it even when you cannot watch it: if it fails to compile, HeroCanvas logs the error and keeps the poster, so the hero is never empty. Check the browser console when you do have a browser.
+
+## Rules that keep it fast
+
+- Colours are linear inside the shader; end every fragment shader with `#include <colorspace_fragment>` and set `texture.colorSpace = THREE.SRGBColorSpace` on photo textures, or the palette renders too dark.
+- One full-screen pass, at most five noise octaves, no loops over pixels. Points: up to about 15,000.
+- One HeroCanvas per page. A second canvas further down is a deliberate WebGL moment ([webgl-r3f.md](webgl-r3f.md)), not a reflex.
+- Never a glossy 3D blob, a purple glow or a mesh-gradient wash: the scene works in the palette's neutrals with the accent as a thread.

package/skills/struq/references/iconography.md

@@ -103,7 +103,7 @@ import { ArrowRight, Search } from "@struq/icons";
 - **Name clashes.** `Link`, `Image`, `File` and `Text` collide with `next/link`, `next/image` and DOM globals; import the `LinkIcon`, `ImageIcon`, `FileIcon` and `TextIcon` aliases instead.
 - **Accent off in one area:** `data-icon-accent="off"` on a parent paints the accent in the base colour (needs `icons.css`). `data-icons="live"` keeps the accent on at rest in an area when `states.css` is loaded.
 - **Status icons** (one tone) take their colour from the place they sit in: they follow `currentColor`, or a token through `color="var(--color-...)"`, never a hex.
-- **Without React:** `sprite.svg` (copy it to `public/`, `<use href="/sprite.svg#search" />`, two-tone, no hover motion), plain SVG files under `svg/`, or `iconify.json` (prefix `struq`, for Iconify loaders in Vue, Svelte, Astro or Tailwind). Same family, same rules.
+- **Without React:** `sprite.svg` (copy it to `public/`, `<use href="/sprite.svg#search" />`, two-tone, no hover motion), plain SVG files under `svg/`, or `iconify.json` (prefix `struq`, for Iconify loaders in Vue, Svelte, Astro or Tailwind: the icon in the text colour with the accent at half strength, no hover motion, and `struq:<name>-draw` for a draw-in that plays once and ignores reduced motion). Same family, same rules.
 - **A missing icon** is drawn to the set's rules (24 grid, round caps and joins, the site's stroke, base and accent as two parts) or the whole site moves to row 3. Never patch the gap with a Phosphor glyph.
 
 **Never Lucide as the reflex.** It is the default of every generated UI, so it reads as

package/skills/struq/references/imagery.md

@@ -23,6 +23,7 @@ Pick one:
 Apply the grade in one reusable layer, not per-image in an editor:
 
 ```tsx
+// The grade as a component. On a Struq build MediaFrame is this layer: add the filter to its <Image> className.
 // components/ui/GradedImage.tsx: every content image renders through this
 export function GradedImage({ src, alt, ratio = "4/3", className = "" }: {
   src: string; alt: string; ratio?: string; className?: string;
@@ -31,15 +32,13 @@ export function GradedImage({ src, alt, ratio = "4/3", className = "" }: {
     <div className={`relative overflow-hidden ${className}`} style={{ aspectRatio: ratio }}>
       <img src={src} alt={alt} className="h-full w-full scale-[1.18] object-cover
                                           [filter:saturate(0.82)_contrast(1.05)]" />
-      {/* the tint: surface temperature washed over every image */}
-      <div aria-hidden className="absolute inset-0 bg-surface-0/15 mix-blend-color" />
     </div>
   );
 }
 ```
 
-- The `filter` + tint values are **per-project constants**: tune once against the preset, then never per-image. (Static CSS filters are fine; it's *scrubbed* filters that cost, see [setup.md](setup.md) §5.)
-- Duotone variant: `[filter:grayscale(1)]` on the img + an accent-colored overlay with `mix-blend-screen` (dark pages) or `mix-blend-multiply` (light pages).
+- The `filter` values are **per-project constants**: tune once against the preset, then never per-image. (Static CSS filters are fine; it's *scrubbed* filters that cost, see [setup.md](setup.md) §5.)
+- Duotone variant: `[filter:grayscale(1)_sepia(0.2)]` on the img. Never a tinted translucent layer over the photo: that is a tell of its own ([anti-patterns.md](anti-patterns.md) §20).
 - `scale-[1.18]` is the parallax headroom from [depth-parallax.md](depth-parallax.md) §2, so grading and panning share the same frame component.
 
 **Cheap tell:** every image at its source colors, six looks on one page. **Instead:** One `GradedImage` component; swap the page's grade by editing one filter line.
@@ -97,38 +96,20 @@ In order of preference:
    - Avoid the AI-render look: no glossy 3D blobs, no purple-glow gradients, no hyperdetailed-everything. The §1 grade pass over generated output hides most remaining tells.
 4. **Treated stock**: last resort, and only *through* the grade layer. Untreated stock (beaming laptop people, handshake photos) is below the floor.
 
-**Beeldbank, stock and generated images show context, never the client's product.** The city, the canal, a rider, a room, a material: yes. A stranger's e-bike, a generated bottle or a stock ceramic presented as the product: never, because the visitor reads it as the thing they would buy. Until the real product is shot, it is a placeholder frame (§4b), a declared 3D stand-in ([webgl-scenes.md](webgl-scenes.md) §4, "No model file yet"), or type.
+**Beeldbank, stock and generated images show context, never the client's product.** The city, the canal, a rider, a room, a material: yes. A stranger's e-bike, a generated bottle or a stock ceramic presented as the product: never, because the visitor reads it as the thing they would buy. Until the real product is shot, it is type, a context image of the client's world, a declared 3D stand-in ([webgl-scenes.md](webgl-scenes.md) §4, "No model file yet"), or type.
 
 **Never:** browser-chrome screenshot mockups tilted in perspective, generic "dashboard glow" renders, or watermark-adjacent placeholder imagery. If a section has no honest image, the strongest move is **no image**: type, space, and surface carry it (same logic as the no-icon rule, [iconography.md](iconography.md) §1).
 
 ---
 
-## 4b. Placeholders: when the real image is not here yet
+## 4b. Never an empty frame
 
-A slot that will hold a real image (planned in the shot list, not yet shot or generated) ships as a **graded tonal frame**, never a grey box and never random stock dropped in to fill it. It must look like part of the page's system, so the layout can be judged honestly before the photography exists.
+A slot that will one day hold the client's own photo holds a beeldbank image today. There is no placeholder state on a Struq site: no grey box, no tonal frame with a "photo to come" caption, no placeholder component.
 
-- **Frame:** the declared ratio for that role (`--ratio-standard`, `--ratio-wide`, `--ratio-portrait`, §2), with the same radius and mask as the real `GradedImage` frame.
-- **Tone:** a vertical gradient between two adjacent surface steps of the palette (for example `surface-2` to `surface-3`), with the page's grain on top. No icon, no "image" glyph, no diagonal cross.
-- **Caption:** the shot-list line (subject and ratio) set in the eyebrow style, bottom left inside the frame's padding, in `ink-muted`. Example: `ROASTER MACHINE, 4/5`.
-- **Markup:** `role="img"` with an `aria-label` that names the planned subject, so the placeholder is honest to screen readers too.
-- **Never inside a showpiece.** A media-led showpiece is not staged on placeholders; it waits for the real assets ([showcase.md](showcase.md) Choosing).
-
-```tsx
-// components/ui/ImagePlaceholder.tsx: the stand-in for one shot-list line
-export function ImagePlaceholder({ caption, ratio = "4/3", className = "" }: {
-  caption: string; ratio?: string; className?: string;
-}) {
-  return (
-    <div role="img" aria-label={`Planned image: ${caption}`}
-         className={`relative overflow-hidden bg-linear-to-b from-surface-2 to-surface-3 ${className}`}
-         style={{ aspectRatio: ratio }}>
-      <span className="eyebrow text-eyebrow absolute bottom-4 left-4 text-ink-muted">
-        {caption}
-      </span>
-    </div>
-  );
-}
-```
+- **Default:** `node <skill-dir>/scripts/images.mjs <pack>` fills every slot from the pack that matches the brief ([struq-imagery.md](struq-imagery.md)). It runs on every build, without asking: the images are free and CC0.
+- **struq.nl unreachable:** the same script writes graded fallback plates in the site palette (two planes of light, a horizon hairline, grain) at each slot's ratio, and `lib/struq-images.ts` points at them. They are abstract images, not boxes. Run the script again when the network is back and the photos replace them in place.
+- **The client's product, team or projects:** a beeldbank photo never stands in for those. Those sections use type, the WebGL layer or a context image of the client's world (the material, the place), and the gap is listed under Assumptions.
+- **Markup:** every image goes through `MediaFrame`, which requires an `image`, so an empty frame cannot be written by accident. `check.mjs` fails on placeholder components, "photo to come" captions and empty `aspect-` boxes.
 
 ---
 

package/skills/struq/references/micro-interactions.md

@@ -120,7 +120,7 @@ export function Cursor() {
     <div ref={dot} className="pointer-events-none fixed left-0 top-0 z-[100] -translate-x-1/2 -translate-y-1/2">
       <div className={`flex items-center justify-center rounded-full bg-ink text-surface-0
                        transition-all duration-300 ease-out-expo
-                       ${variant === "view" ? "eyebrow text-eyebrow h-20 w-20" : "h-2.5 w-2.5"}`}>
+                       ${variant === "view" ? "text-small h-20 w-20" : "h-2.5 w-2.5"}`}>
         {variant === "view" && "View"}
       </div>
     </div>

package/skills/struq/references/mobile-composition.md

@@ -11,7 +11,7 @@ The principle: **mobile keeps the attitude, not the geometry.** Asymmetry, tresp
 | Desktop technique | Mobile translation | What survives |
 |---|---|---|
 | **Layered lockup** ([composition.md](composition.md) §3): type and image sharing grid cells | Stack, but keep a *deliberate small overlap*: headline pulls `-mb-[0.5em]` over the image top (or image pulls under the headline's last line). Drop `mix-blend-difference` if the overlap zone gets busy at small width; a `pointer-events-none` scrim or plain ink type is more legible | the trespass |
-| **Asymmetric 12-col rows** (features as editorial rows, [anti-patterns.md](anti-patterns.md) §2) | Single column with **alternating indents** (`even:pl-[10vw]`) or a hanging eyebrow column (`grid-cols-[5rem_1fr]`). Never centered | the off-axis rhythm |
+| **Asymmetric 12-col rows** (features as editorial rows, [anti-patterns.md](anti-patterns.md) §2) | Single column with **alternating indents** (`even:pl-[10vw]`) or a hanging meta column (`grid-cols-[5rem_1fr]`, a year or a place in `text-small`). Never centered | the off-axis rhythm |
 | **Section bleed / seam** ([composition.md](composition.md) §1) | Keep it: negative margins are width-independent. Reduce overlap depth ~50% (`-mb-16` not `-mb-32`) so the seam doesn't eat a whole viewport | the trespass |
 | **Full-bleed breakout** ([composition.md](composition.md) §2) | The `content-grid` collapses gracefully (side lanes hit their 1.5rem floor), but full-bleed only *contrasts* if contained content is visibly inset. Keep body at the `content` lane; never let everything go edge-to-edge | contained vs escaping |
 | **Off-canvas ghost type** ([composition.md](composition.md) §4) | Shrink to ~24-30vw and keep the crop, or drop it. At 18vw-of-360px it's a smudge: if it can't be huge, it shouldn't exist | scale contrast (or nothing) |