@struq/skill 0.4.2 → 0.5.0

package/skills/struq/SKILL.md

@@ -1,23 +1,20 @@
 ---
 name: struq
-description: "Award-tier studio websites for coding agents, built from Struq's catalogue of admitted blocks: preloaders, page transitions, headers, heroes, WebGL backgrounds, showpieces, sections and footers, each with three real variants, judged at FWA level and shipped as files. Struq's palettes and type pairings as one token block, art-directed CC0 photos from the Struq beeldbank, Lenis on one GSAP clock, and a self-check against the AI tells. Works offline from its own copy; uses the Struq MCP (struq_richting, struq_blokken, struq_blok, struq_controle) when connected. Use when designing, building, redesigning, animating or auditing a marketing, studio, agency or portfolio site that must feel cinematic and custom instead of templated. Stack: Next.js App Router + Tailwind v4."
+description: "Award-tier studio websites for coding agents, built from Struq's catalogue of admitted blocks and directed as one film: one idea, one motion language, one motif and one centerpiece, cast into a storyboard before a block is installed. Preloaders, page transitions, headers, heroes, WebGL backgrounds, showpieces, sections and footers, each with real variants, judged at FWA level and shipped as files. Struq's palettes and type pairings as one token block, art-directed CC0 photos from the Struq beeldbank, Lenis on one GSAP clock, and a self-check against the AI tells. Works offline from its own copy; uses the Struq MCP (struq_richting, struq_blokken, struq_blok, struq_controle) when connected. Use when designing, building, redesigning, animating or auditing a marketing, studio, agency or portfolio site that must feel cinematic and custom instead of templated. Stack: Next.js App Router + Tailwind v4."
 argument-hint: "[brief] | redesign <path> | audit <path-or-url> | direct <brief>"
 ---
 
 # Struq
 
-A site looks like a template because every choice in it is the likeliest one. Struq replaces those choices with
-blocks a studio would ship: each one built, reviewed against a named award-tier reference and admitted by hand. Your
-job is the direction, the order, the copy and the seams between blocks. Do not rebuild what a block already does.
-
-`<skill-dir>` is the folder this file is in. The catalogue is [blocks/CATALOG.md](blocks/CATALOG.md); the craft that
-makes the blocks feel high end is [references/craft.md](references/craft.md); the tell list is
-[references/tells.md](references/tells.md).
+A site looks like a template when every choice is the likeliest one, and like a showreel when every slot gets the
+loudest block. Struq casts studio blocks into one film; your job is the treatment, the copy and the seams, never a
+rebuild of what a block does. `<skill-dir>` is this file's folder; the catalogue is [blocks/CATALOG.md](blocks/CATALOG.md),
+a worked treatment per language [references/film.md](references/film.md), the craft [references/craft.md](references/craft.md).
 
 | Invocation | Mode |
 |---|---|
 | `/struq <brief>` | **Build**: the checklist below, start to finish. |
-| `/struq redesign <path>` | Keep the brand, copy and components ([references/triage.md](references/triage.md)); swap in blocks where the page is weakest, then run the checklist from step 3. |
+| `/struq redesign <path>` | Keep the brand, copy and components ([references/triage.md](references/triage.md)); write a treatment of the page as it will be (kept sections as own scenes) and stop once as in step 2, then swap in blocks where the page is weakest and run the checklist from step 3. |
 | `/struq audit <path-or-url>` | Change nothing. Run `check.mjs` (and `struq_controle` when connected), report every FAIL and WARN and the three fixes with the most visual payoff. Never a numeric score. |
 | `/struq direct <brief>` | One continuous WebGL experience across chapters: steps 1 to 4, then [cinematic/README.md](cinematic/README.md). |
 
@@ -36,8 +33,7 @@ For a dashboard or product UI keep the tokens, faces and tells; drop the preload
 
 ## The MCP, or the skill's own copy
 
-The Struq MCP and this skill serve the same blocks and the same derivation. Use the tool when it is connected; the
-offline column does the same from the skill's copy.
+Same blocks, same derivation: use the MCP tool when it is connected, else the offline column from the skill's copy.
 
 | Need | MCP connected | Offline |
 |---|---|---|
@@ -46,8 +42,8 @@ offline column does the same from the skill's copy.
 | A block as files | `struq_blok(slug, variant?)` | `blocks.mjs add <slug>` |
 | The tell check | `struq_controle()`: run its detectors on your own files | `check.mjs` |
 
-Put `struq_richting`'s token block in `app/globals.css` in place of the STRUQ TOKENS block and its font URLs in
-`app/fonts.ts`; drop `struq_blok`'s files into `components/struq/` at the paths it gives. Log each tool call:
+`struq_richting`'s token block replaces STRUQ TOKENS in `app/globals.css`, its font URLs go in `app/fonts.ts`;
+`struq_blok`'s files go into `components/struq/` at their paths. Log each call:
 `node <skill-dir>/scripts/log.mjs mcp <tool> --note "<what you took>"`. Run `check.mjs` either way.
 
 ## Build checklist
@@ -59,107 +55,168 @@ their own). `check.mjs` fails while a line is open or a ticked step has no entry
 ```
 ## Build checklist
 - [ ] 1 Project: Next.js App Router + Tailwind v4; blocks.mjs init printed OK
-- [ ] 2 Direction and approval: palette, pairing, pack and the block order in STRUQ.md; the one stop sent and answered
+- [ ] 2 Treatment and approval: the treatment in STRUQ.md, the plan check at PLAN: PASS; the one stop sent and answered
 - [ ] 3 Canon: the token block and fonts written (canon.mjs palette and type, or struq_richting)
 - [ ] 4 Images: images.mjs --brief printed OK; only photos whose alt fits the client
-- [ ] 5 Blocks: every block on the order installed and composed in app/page.tsx with real copy
+- [ ] 5 Scenes: frames and the centerpiece installed, every other scene built as the storyboard says, composed in app/page.tsx with real copy
 - [ ] 6 Build: npm run build passes
 - [ ] 7 Look: 390 and 1440 screenshots and one full scroll, fixes made (or "Verify: not seen, no browser")
 - [ ] 8 Check: check.mjs prints RESULT: PASS
 ```
 
 **1 Project.** Empty folder: `npx create-next-app@latest . --ts --tailwind --app --eslint --yes`, then
-`node <skill-dir>/scripts/blocks.mjs init`. It copies the kit to `components/struq/kit/`, writes the layout (the
-`sq-js` script before paint, the font links, `data-blocks` on `<body>`, `SmoothScroll`), `globals.css` (the kit
-import, the theme names, the STRUQ TOKENS block) and `fonts.ts` over a starter, and installs gsap, @gsap/react and
-lenis. Your own layout or stylesheet is never overwritten: merge from `recipes/app/`.
-
-**2 Direction and the one stop.** Pick from the canon, never invent a palette or pairing while one fits. Palette by
-the brief's mood, then its sector; a palette marked "kept out" (blue, purple, teal) only for a brand that is that
-colour, declared as `Cool hue: declared because <brand colour>`. The brand's own colours and faces beat the canon:
-write them into the same token names. Pairing by temperament: Fraunces (serif-editorial) warm and premium, Newsreader
-literate, Sora calm and architectural, Urbanist soft and current, Bodoni Moda for fashion, Big Shoulders
-(condensed-poster) for a campaign at poster scale, Unbounded for a wide agency voice. Then choose the order (below)
-and write the top of STRUQ.md:
+`node <skill-dir>/scripts/blocks.mjs init`: the kit in `components/struq/kit/`, the layout (`sq-js` before paint,
+font links, `data-blocks` on `<body>`, `SmoothScroll`), `globals.css` (kit import, theme names, STRUQ TOKENS),
+`fonts.ts`, gsap, @gsap/react and lenis. It never overwrites your layout or stylesheet: merge from `recipes/app/`.
+
+**2 Treatment and the one stop.** Pick from the canon, never invent a palette or pairing while one fits: palette by
+mood, then sector; a "kept out" palette (blue, purple, teal) only for a brand of that colour, declared as `Cool hue:
+declared because <brand colour>`; the brand's own colours and faces beat the canon, in the same token names. Pairing
+by temperament: Fraunces (serif-editorial) warm and premium, Newsreader literate, Sora calm and architectural,
+Urbanist soft and current, Bodoni Moda for fashion, Big Shoulders (condensed-poster) for a campaign at poster scale,
+Unbounded for a wide agency voice. Pick the language (The film, below), then run
+`node <skill-dir>/scripts/blocks.mjs arc <language>` and paste the Tone arc and Storyboard it prints into the
+treatment at the top of STRUQ.md. Fill every `<...>`, one pick per line (`or:` lists what else fits; swap at most one
+scene; a block the user names goes in first):
 
 ```
 # STRUQ.md: <name>
 Brief: <one line: what, for whom, where>
-Idea: <the one idea the site is about>
+Idea: <a point of view in one sentence, never a description of the client: what a visitor believes when they leave>
+Language: <weight | cut | curtain> (<the client's sector, or the brief's own words for another feel>)
+Motif: <line | frame | aperture | cut | word | field>: <what it is in this client's world and how it changes down the page>
+Lexicon: <three to five working words of the client's trade (a material, a part, a tool, a unit), never the brief repeated; every label, counter and caption uses these, no film or studio jargon the client does not own>
 Palette: <id> (<mood>)
 Type: <pairing id>: <display> + <body>
 Images: pack <slug> (or the client's photos, then pack <slug>)
-Order: <block slug:variant>, <block slug:variant>, ...
+Centerpiece: <block>: <why this is this site's one moment>
+Tone arc: <as blocks.mjs arc printed it>
+Storyboard:
+1. Arrival   (frame)  <preloader of the language> | lands on: <what>
+2. Opening   (loud)   <block:variant> | on screen: <...> | enters: <...> | hands over: <...>
+3. <scene>   (quiet)  <block:variant or kit scene> | on screen: <...> | enters: <...> | hands over: <...>
+...
+N. Close     (quiet)  <block or kit scene> | echoes the opening: <how> | footer: <block>
 Assumptions: <every drafted line and every fact left out>
 Verify: <filled in at step 7>
 ```
 
-Then **stop once**, in the user's language: the plan in five lines (idea, palette, type, pack, order) and
-"Akkoord? Heb je een logo, foto's of echte cijfers, stuur ze nu." (English: "Approve? If you have a logo, photos or
-real numbers, send them now."). The build request is not the approval. Log the reply word for word:
-`log.mjs "Step 2 Approval" "Asked: ..." "Reply: \"<their words>\""`. Any yes builds the plan; what they send replaces
-the matching pick; a veto changes only what it names. Never ask a second time. When no pack shows the client's own
-product, add: "Ik heb geen foto's van je <product>: stuur ze, dan komen ze in de hero."
-
-**3 Canon.** `canon.mjs palette <id>` and `canon.mjs type <id>` rewrite the one STRUQ TOKENS block and `app/fonts.ts`:
-the surface ladder, the field and inverse roles, `--photo-ground`, the accent's ink, the pairing's display weight and
-faces, and each Google face asked for its real weights. It is the block Struq's lab judged every block in.
-
-**4 Images.** `node <skill-dir>/scripts/images.mjs --brief "<the brief, in the user's words>"` picks the pack, keeps
-only the photos whose alt fits the client, downloads and verifies them to `public/images/` and writes
-`lib/struq-images.ts` (`images.hero`, `.band`, `.card`, `.column`, `.detail`, `.backdrop`, `imageCredit`, `imageFit`).
-`images.mjs --list` shows every pack. Read the alts before you place a photo; with `imageFit` "none" use no photos and
-let a background block carry the hero. Offline it writes plates graded to the palette. Set the title, description and
-`lang` in the layout.
-
-**5 Blocks.** Install the order with `blocks.mjs add <slug> ...` (or `struq_blok`), read each block's file header for
-its props, variants and how it mounts, and compose `app/page.tsx` with the brief's real copy. Glue between blocks uses
-the kit (`Reveal`, `MediaFrame`, `SplitHeadline`, `MagneticButton`) and the craft rules, never a fresh motion system.
-
-**6 to 8.** `npm run build` passes (fix your code, never delete a block to get green). Look at the production build
-(`npx next start -p 4321`) at 390 and 1440 and scroll it once: the preloader lands on the hero, every frame fills, each
-pin engages and releases without a jump, nothing overflows at 390, scrolling back reverses. Never claim you saw what
-you did not. Then `check.mjs` until `RESULT: PASS`.
-
-## The order of a studio site
-
-Read top to bottom; each line is a slot with the blocks that fill it. Seven to nine slots, not all of them every time.
-
-1. **Arrival, once:** a preloader on the first visit (`preloader-wordmark`, `-slices`, `-gate`, `-stack`) and the
-   page transition of the same language on every navigation (`page-transition-slices`, `-gate`, `-stack`; mount it in
-   the layout). Slices with slices, gate with gate, stack with stack: they share one handover.
-2. **Header:** `header-bar` (quiet, settle, split) or `menu-curtain` for a full-screen menu. Sections under it say
-   their ground with `data-bar-tone`.
-3. **Hero:** `hero-still` (one photo, calm side measured), `hero-framed` (the print on the wall), `hero-split` (a
-   seam), `hero-index` (the work list as the first screen), `hero-poster` (type as poster), `hero-opener` (full bleed
-   with the WebGL layer), or a background block (`background-aurora`, `-silk`, `-facets`) when the hero is type on a
-   live field.
-4. **Manifesto:** `manifesto`, `manifesto-scrub`, `velocity-type` or `reveals`: the one statement, given a screen.
-5. **About:** `about-studio` or `split-pair`.
-6. **Approach:** `approach`, `sticky-chapters`, `panel-accordion` or `fill-rows`. Never numbered steps.
-7. **Work:** `project-stack`, `hover-list`, `image-trail`, `film-strip`, `grid-assembly`, `fanned-cards`, or a scene
-   move (`image-to-fullbleed`, `panel-wipe`, `zoom-through`, `scrub-connector`, `pixel-resolve`) between two slots.
-8. **Closing call to action:** `cta-closing`, with `contact-form` when the site asks for input.
-9. **Footer:** `footer-reveal`, `footer-contact` or `wordmark-finale`.
-
-**Picking.** One lead move per page, the hero or a work piece, and the rest quieter around it. Never two pinned
-pieces back to back: a plain slot breathes between them. One contrast scene, at most two: wrap a slot in
-`scene-inverse` or `scene-field`. Choose the variant by the brief and the photos, not by novelty: a variant is a
-different composition of the same idea, and every variant works light and dark. Name a block the user asks for first.
-A studio with real project photos leads with work (`hero-index`, `project-stack`); a studio without them leads with
-type and one photo (`hero-poster`, `hero-still`, `manifesto`).
+Run `node <skill-dir>/scripts/check.mjs --plan` and fix every FAIL and every `quiet-is-quiet`, `loud-adjacent` and
+`quiet-share` warning until it prints `PLAN: PASS` without them. `canon.mjs` and `blocks.mjs add` refuse until the
+plan passes and the reply is logged. Then **stop once**, in the user's language, and show the treatment, never block
+slugs: idea, language, motif and centerpiece in plain words; the storyboard as numbered lines, one sentence each of
+what the visitor sees; palette, type and pack on one line; then "Akkoord? Heb je een logo, foto's of echte cijfers,
+stuur ze nu." (English: "Approve? If you have a logo, photos or real numbers, send them now."). The build request is
+not the approval. Log the reply word for word: `log.mjs "Step 2 Approval" "Asked: ..." "Reply: \"<their words>\""`.
+Any yes builds the treatment; what they send replaces the matching pick; a veto changes only what it names. Never
+ask twice. No pack shows the client's product? Add: "Ik heb geen foto's van je <product>: stuur ze, dan komen ze in de hero."
+
+**3 Canon.** `canon.mjs palette <id>` and `canon.mjs type <id>` rewrite the one STRUQ TOKENS block and `app/fonts.ts`.
+
+**4 Images.** `node <skill-dir>/scripts/images.mjs --brief "<the brief, in the user's words>"` keeps only the pack's
+photos whose alt fits the client, verifies them into `public/images/` and writes `lib/struq-images.ts` (`images.hero`,
+`.band`, `.card`, `.column`, `.detail`, `.backdrop`, `imageCredit`, `imageFit`). Read the alts before you place a
+photo; with `imageFit` "none" a background block carries the hero. Title and `lang` go in the layout.
+
+**5 Scenes.** Install the frames and the centerpiece first (`blocks.mjs add <slug>:<variant>` or `struq_blok`), then
+each scene as its storyboard line says, the quiet ones with the kit's four (The film, below). Read each file header
+for its props and how it mounts; fill every label, counter and caption from the lexicon; wrap the tone arc's ink or
+field scenes in `scene-inverse` or `scene-field` (a kit scene takes it as `className`). Glue and an own scene use
+`Reveal`, `MediaFrame` and `SplitHeadline`, and an own scene's root carries `data-scene="<name>"`.
+
+**6 to 8.** `npm run build` passes (fix your code; never delete a block for green). View `npx next start -p 4321` at
+390 and 1440, scroll once: the preloader lands on the hero, every frame fills, each pin engages and lets go without a
+jump, nothing overflows, scrolling back reverses. Never claim what you did not see. Then `check.mjs` to `RESULT: PASS`.
+
+## The film
+
+One film, not a showreel: every frame from one language, one arc, one centerpiece, one motif seen at the arrival,
+the opening, the centerpiece and the close. A loud scene moves with the scroll (a pin, a scrub, a reveal to full
+bleed); a quiet scene is type and a photo that enter once and sit still. Two tags only: `(loud)` when the block's
+energy in the catalogue is 2 or more, `(quiet)` at 1 or less, for a kit scene or for an own scene.
+
+| Language | For | Feel | Frames: preloader, page transition, menu | Motif |
+|---|---|---|---|---|
+| weight | architecture, hotels, craft, interiors | photographic and slow; a print grows into place; long holds | `preloader-stack`, `page-transition-stack`, `menu-curtain:stack` | frame |
+| cut | fashion, agencies, portfolios, music | hard cuts, short masks, no fades, short holds | `preloader-slices`, `page-transition-slices`, `menu-curtain:slices` | cut or word |
+| curtain | campaigns, launches, events, culture | a light line, panels part, a long hold before the reveal | `preloader-gate` or `preloader-wordmark:split`, `page-transition-gate`, `menu-curtain:gate` | line or aperture |
+
+Pick the language by the client's sector in the For column. Another language only when the brief asks for that feel
+in its own words; then quote those words on the `Language:` line. The idea may pick another motif of the six.
+`preloader-gate` and `page-transition-gate` show a neutral hairline ring; the film leader (a dial counting 3, 2, 1)
+only for a film client, through `dial="leader"` and `marks`. The header is `header-bar:quiet` or `:settle`; sections
+say their ground with `data-bar-tone`. Each arc is loud only at the opening, the centerpiece and at most one gentle
+scene with a quiet scene on each side. The arcs below are the printed arcs in short; the first pick is the default.
+
+**Quiet scenes** are the kit's four, imported from `@/components/struq/kit/quiet` (props in each file's header):
+- `Statement`: the one sentence and the page's first type moment, with an `accent` word and a margin `label` or a
+  small `image`, so it is composed, never a lone line.
+- `PhotoText`: a photo and a short text side by side on the grid.
+- `Rows`: three to six hairline rows, a term and one sentence each, never numbered.
+- `Close`: the closing line and its one link, echoing the opening; `frame` when the motif is the frame.
+- An own scene only when none of the four fits: your type beside a photo with `SplitHeadline`, `MediaFrame` and
+  `Reveal`, entering once, its root marked `data-scene="<name>"` (the check warns `own-scene-unmarked` without it).
+
+**weight.** Paper throughout, ink at the centerpiece.
+1. Arrival (frame): `preloader-stack`; the print lands on the hero photo.
+2. Opening (loud, short hold): `hero-framed:wand`, `hero-framed:portret` or `hero-still:frame`; calmer, `hero-still:still` (quiet).
+3. Statement (quiet): `Statement`.
+4. About (loud, the gentle one): `about-studio:wandeling` or `about-studio:plaat` (a full-bleed reveal); quiet, `PhotoText`.
+5. Approach (quiet): `approach:schuif` or `Rows`.
+6. Centerpiece (loud, ink): `image-to-fullbleed`, `grid-assembly`, `zoom-through` or `project-stack` (real projects).
+7. Release (quiet): `PhotoText`.
+8. Close (quiet): `Close`, type only after a full-bleed centerpiece. Footer: `wordmark-finale`.
+
+**cut.** Paper and ink in hard alternation, never a fade.
+1. Arrival (frame): `preloader-slices`, its caption from the lexicon.
+2. Opening (loud): `hero-poster`; quiet, `hero-index:lijst`, `hero-index:venster`, `hero-split:naad` or `hero-split:liggend`.
+3. Work (quiet): `hover-list` or `image-trail`; after `hero-index`, already a list, `reveals:clip`.
+4. Statement (quiet): `Statement`.
+5. Centerpiece (loud, ink): `split-pair`, `panel-wipe`, `project-stack`, `fanned-cards` or `film-strip` (film clients).
+6. Release (quiet): `fill-rows` or `Rows`.
+7. Close (quiet): `Close`, type only, or `cta-closing:pointer`. Footer: `footer-contact`.
+
+**curtain.** Field or ink at the opening, paper between, ink at the centerpiece.
+1. Arrival (frame): `preloader-gate`, the ring fills and the gate parts; or `preloader-wordmark:split`.
+2. Opening (loud): `hero-opener`, `background-aurora`, `background-silk` or `background-facets`, the line at poster scale; calmer, `hero-still:horizon` (quiet).
+3. Statement (quiet): `Statement`.
+4. Details (loud, the gentle one): `sticky-chapters`, or quiet `panel-accordion`: the programme, places and dates given.
+5. Build (quiet): `PhotoText`, who makes it.
+6. Centerpiece (loud, ink): `scrub-connector`, `zoom-through`, `manifesto-scrub` or `panel-wipe`.
+7. Release (quiet): `PhotoText`.
+8. Close (quiet): `cta-closing:pointer`, the line returning. Footer: `footer-reveal`, the curtain closing.
+
+**Budgets.** Hard rules: a storyboard that breaks one is rewritten before the stop.
+- Exactly one centerpiece; nothing pins after it. The opening holds at most 1.5 screens, all pins together about 4.5.
+  Screens pinned: `hero-opener` 1, `hero-framed` and `hero-poster` 1.5, `manifesto-scrub` 2, `image-to-fullbleed`
+  2.2, `grid-assembly` 2.5, `panel-wipe` 1.7 (2.6 when it closes), `film-strip` up to 3, `fanned-cards`, `split-pair`,
+  `zoom-through` and `scrub-connector` 3, `project-stack` 1.1 per project after the first. Pinned in one variant, so
+  never quiet: `hero-still:frame`, `hero-split:opening`, `hero-index:doorlopen`, `about-studio:doorkijk`,
+  `approach:zin`, `manifesto:writes` and `:split`.
+- Never two loud scenes side by side. At least four in ten scenes are quiet.
+- Every frame from the site's language. A page transition only when the site has more than one route.
+- Install only what the storyboard names, plus the header and the language's menu.
+- One motif on the page. At most two full-bleed photo reveals, built the same way: `hero-framed:wand` and `:portret`,
+  `hero-poster`, `hero-still:frame`, `image-to-fullbleed`, `zoom-through`, `grid-assembly`, `about-studio:plaat` and
+  `cta-closing:photo` each count one.
+- At most one marquee (`cta-closing:marquee`, `velocity-type`) and one custom cursor. One accent word, set in the
+  accent face through the `accent` prop: in the opening's headline, in `Statement` and again in `Close`.
+- No clock unless the lexicon is about time; then one, turned on by its prop (`clock`, `timeZone` on `wordmark-finale`).
+- Two or three type moments at poster scale (12 to 20vw) on the page; everything else from the scale.
+- Labels: no eyebrows above headings, no mono, no uppercase labels, no numbered steps. A small sentence-case label in
+  the body face may sit beside a headline in the margin column or under a photo, in words from the lexicon.
 
 ## What makes it feel high end
 
 The blocks hold this already; your glue must too. Detail in [references/craft.md](references/craft.md).
 
-- Reveals clip from numbers (inset values tweened as numbers), never scale a box; positions in whole pixels.
-- Photos are decoded before they show, cut or swap.
+- Reveals clip from numbers, never scale a box; whole pixels; photos decoded before they show, cut or swap.
 - Scroll effects are scroll-tied and reverse when the visitor scrolls back; key frames hold.
 - The gate: `sq-js` on `<html>` before paint hides only what will animate, and shows it anyway after 3 s.
 - Type on a photo sits on the measured calm side over the lightest flat veil that reaches 3:1.
-- Display faces run light (300, or the poster pairing's own weight); fitted lines are measured with the real face
-  after `document.fonts.ready`.
+- Display runs light (300, or the poster pairing's weight); fitted lines measured after `document.fonts.ready`.
+- Never clip a descender: the kit's masks already keep them; never `overflow-hidden` on a heading of your own, and
+  look at a line with a g and a j before calling type done.
 - Tokens only, mixes in oklab, a surface step and a hairline instead of a shadow, one accent.
 - Icons: Struq Icons (`@struq/icons`), functional only ([references/iconography.md](references/iconography.md)).
 
@@ -167,7 +224,6 @@ The blocks hold this already; your glue must too. Detail in [references/craft.md
 
 - **Nothing scrolls:** an overlay called `getLenis()?.stop()` without `start()`, or `SmoothScroll` is not mounted.
 - **Content stays invisible for 3 s:** the block never set `data-ready`; usually it threw. Read the console.
-- **Blocks render in the wrong colours or faces:** `data-blocks` is missing on `<body>`, or the STRUQ TOKENS block
-  sits before the kit import in `globals.css`.
+- **Wrong colours or faces:** `data-blocks` is missing on `<body>`, or STRUQ TOKENS sits before the kit import.
 - **A fitted line overflows or jumps:** the face did not load (check `app/fonts.ts` and the links in the layout).
 - **Vite:** [references/stack-targets.md](references/stack-targets.md).