@struq/skill 0.0.0-stage → 0.2.1

package/skills/struq/references/iconography.md

@@ -0,0 +1,255 @@
+# Iconography: one icon family + craft doctrine
+
+## Decide here
+
+Planning reads only this section ([direction.md](direction.md) §4); the rest is for the build.
+
+- **Family, in this order, stop at the first that fits:** (1) the brand's own drawn set; (2) **Struq Icons**, the default (`npm i @struq/icons`, MIT, 182 icons: 118 two-tone with a hover motion, 14 status, 50 glyphs; browse at [struq.nl/iconen](https://struq.nl/iconen)); (3) **Phosphor, weight `light`** (`@phosphor-icons/react`, `thin` for luxury) when the set lacks what the site needs and drawing it is not worth it, or the concept wants a softer, rounder line; (4) **Iconoir or Tabler** at stroke 1.25 when the concept wants a sharper, technical line.
+- **One icon family per site, never mixed.** Never two, never Lucide by reflex. If the chosen family lacks an icon, draw it to that family's rules or move the whole site down the list (§2).
+- **Struq Icons on a Struq site:** `strokeWidth={1.5}` next to light display type (`1.25` for luxury); the accent mapped to the site's own `--color-accent` (§2), not the set's default flame; `states.css` on, so icons rest in one tone and the accent shows where you act.
+- **Size and color:** one size per context (`size={20}` inline, `size={24}` nav, or a `size-5` / `size-6` class so the icon rides the root-rem knob), ink-colored; color only for state and semantics.
+- **Budget:** functional icons only (nav, close, chevrons, form states, CTA anchors). No 3-up feature-card icons, no Sparkles, Rocket or Zap, no emoji, no colored chips.
+- **Motion:** the set's own hover motion (200ms, hover and focus only, never on load, never looping, off under reduced motion) is inside the budget. Other animated icons under 500ms on click, never looping in standard UI, static under reduced motion.
+- **Record in STRUQ.md SYSTEM:** `Icons: Struq Icons, @struq/icons, strokeWidth 1.5, accent = --color-accent, states.css on`.
+
+---
+
+
+Two separate decisions, never collapse them:
+
+1. **Whether an icon earns its place**: the Struq taste gate. Most marketing
+   sections need *fewer* icons than the reflex wants; icon-as-filler is an AI tell.
+2. **How the icon behaves once it's in**: the craft doctrine below (family, register,
+   color, state, animation timing, accessibility).
+
+The gate (§1) governs *where*; the doctrine (§2 to §8) governs *how*. A perfectly-crafted
+icon in the wrong place is still wrong.
+
+---
+
+## 1. The gate: does it earn its place?
+
+Keep the existing bans hard:
+
+- **Never** as 3-up feature-card filler (centered icon + h3 + two gray lines), the single
+  most recognizable generated section ([anti-patterns.md](anti-patterns.md) §2, §13).
+- **Never** Sparkles / Rocket / Zap / lightning, or emoji (🚀✨💡). They are the visual signature
+  of generated UI.
+- **Never** in a colored circle/chip background.
+- **Never** five sizes / five strokes scattered across a page.
+
+Icons **earn their place** when they do real work:
+
+- **Functional affordances**: nav, search, close, chevrons, form-field states, toggles.
+- **Scannability** in menus and dashboards: a per-row icon lets the eye decode the list
+  faster than text alone (humans parse a glyph in ~1/10s).
+- **Button visual-anchors**: an icon on a CTA gives a fast hint of the action.
+- **Paragraph / feature separators**: between blocks of a "wall of text," an icon marks a
+  visual point of separation. It must *reinforce* the message, never *replace* it.
+
+When in doubt, **no icon**. Hairline rules, ghost type, a single oversized numeral as an
+accent, or real imagery often carry decoration better in a marketing context.
+
+---
+
+## 2. Source: one coherent family per project, chosen in this order
+
+The family is a SYSTEM decision, recorded in STRUQ.md ([direction.md](direction.md) §4), not
+something picked per component. Resolve it top to bottom and stop at the first that fits:
+
+| # | Family | When | Install | Weight to match light display type |
+|---|---|---|---|---|
+| 1 | **The brand's own icons** | The client already has a drawn set | their files, inlined as components | as drawn |
+| 2 | **Struq Icons** | The default for every Struq build: a two-tone set on one 24 grid (a base tone for the shape, an accent on the part that carries the meaning), each icon with its own hover motion and a draw-in variant | `npm i @struq/icons`; sprite, plain SVG and Iconify JSON (prefix `struq`) for non-React stacks | `strokeWidth={1.5}` (the set's default 2 is Lucide weight; `1.25` for luxury) |
+| 3 | **Phosphor** | A softer, rounder line, or a site that needs icons the Struq set does not have | `npm i @phosphor-icons/react`, or Iconify `ph:` | `weight="light"` (or `"thin"` for luxury) |
+| 4 | **Iconoir** or **Tabler** | A sharper, more technical or architectural line | `npm i iconoir-react` / `@tabler/icons-react`, or Iconify `iconoir:` / `tabler:` | Tabler `stroke={1.25}`; Iconoir `strokeWidth={1.25}` |
+
+### Struq Icons: the wiring
+
+Import the stylesheets once, at the root, before the site's own stylesheet; then import icons by name. Every icon is a named PascalCase export (`Search`, `ArrowRight`, `External`, `ChevronDown`, `Close`); the barrel tree-shakes. Check a name against the installed `dist/index.d.ts` or [struq.nl/iconen](https://struq.nl/iconen) before using it: the set names icons by meaning, so the up-right arrow is `External`, not `ArrowUpRight`.
+
+```tsx
+// app/layout.tsx (Next) or src/main.tsx (Vite): once, before globals.css
+import "@struq/icons/tokens.css";
+import "@struq/icons/icons.css";
+import "@struq/icons/states.css"; // optional: one tone at rest, the accent on hover, focus and current
+```
+
+```css
+/* globals.css: the set's accent follows the site's palette, not its default flame.
+   On body, so it wins over tokens.css's :root and .dark rules by inheritance. */
+body {
+  --icon-base: currentColor;
+  --icon-accent: var(--color-accent);
+  --icon-accent-live: var(--color-accent);
+}
+```
+
+```tsx
+import { ArrowRight, Search } from "@struq/icons";
+
+<a href="/work" className="font-ui text-ui inline-flex items-center gap-2">
+  Selected work <ArrowRight size={20} strokeWidth={1.5} />
+</a>
+
+<button type="button" className="grid size-12 place-items-center">
+  <Search size={24} strokeWidth={1.5} label="Search" /> {/* the only content: give it a label */}
+</button>
+```
+
+- **Props:** `size` (16, 20, 24, 32 or 48 px; a `size-5` class overrides it in rem), `strokeWidth`, `label` (names it for screen readers; without one it is `aria-hidden` decoration), `animate` (`"hover"` default, `"draw"`, `"none"`), `color` and `accentColor` (any CSS colour, set per icon; they beat the variables). Other SVG props pass through.
+- **Server components.** The icons use no hooks, so they render in server components. Only the draw-in entry is a client component.
+- **Draw-in** for one empty state, first run or hero moment, never a list: `import { StruqIconDraw } from "@struq/icons/draw"`, `<StruqIconDraw icon={Inbox} size={48} delay={0.2} />`. It needs `motion` (already in the stack), draws once, never loops, and shows the finished icon on the server, without JS and under reduced motion.
+- **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.
+- **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
+generated. **Never two families on one site.** If the chosen family is missing an icon, either
+draw the missing icon to its rules (its grid, its stroke, its caps and joins) or move the whole
+site to the next family. Patching gaps with a second set is the icon version of three display
+fonts on one page.
+
+**Iconify** is an optional transport for families 3 and 4 (and for Struq Icons outside React) when you want any family through one
+component: one API over about 200k icons across every major set. It is a delivery method, not a
+second family.
+
+```bash
+# Next / any React              # Vite (compile-time, zero runtime, tree-shaken)
+npm i @iconify/react            npm i -D unplugin-icons @iconify/json
+```
+
+```tsx
+// @iconify/react: works in both Next and Vite
+import { Icon } from "@iconify/react";
+<Icon icon="ph:arrow-up-right" className="size-5 text-ink" />   // Phosphor
+<Icon icon="iconoir:search" className="size-5 text-ink" />       // Iconoir
+```
+
+```ts
+// Vite alternative: unplugin-icons, imported as components (no runtime fetch)
+import ArrowUpRight from "~icons/ph/arrow-up-right";
+<ArrowUpRight className="size-5 text-ink" />
+```
+
+**Pick one family and stay in it.** Consistency in *style, weight, corner treatment, and
+fill-vs-stroke* is what makes an icon set read as designed. Lock the chosen family in the
+project's icon component so nothing else can be imported by accident.
+
+---
+
+## 3. Two registers: system vs decorative
+
+| Register | Use | Traits |
+|---|---|---|
+| **System** | menus, buttons, inputs, table rows, anything **≤24px** | minimal, reduced to essentials, legible at small size, single stroke |
+| **Decorative / expressive** | bigger explanatory moments, feature anchors, animated (Lordicon/Lottie) | richer, more detail, only at **larger** sizes |
+
+**Complex/decorative icons die at small sizes**: their detail turns to mud below ~24px.
+If it's small, it's a system icon. If it's expressive, it's big. Don't mix the registers
+within one role.
+
+One stroke across the set, as the §2 table sets it (Struq Icons `strokeWidth={1.5}`,
+Phosphor `weight="light"`, Tabler `stroke={1.25}`, Iconoir `strokeWidth={1.25}`), one size per
+context (e.g. `size-5` inline, `size-6` nav), ink-colored by default. Struq Icons' two tones
+are not two colours in the §4 sense: at rest under `states.css` they read as one tone, and the
+accent is the site's one accent, shown only where the visitor acts.
+
+---
+
+## 4. Color
+
+- **One color across the set** by default: ink. An icon set in four hues reads as no
+  decision made (same rule as the one-accent color system).
+- Color earns its place only for **state** (hover/pressed/active) and **semantics**:
+  red/warning for errors, a success check, etc.
+- Never rely on color *alone* to carry meaning (accessibility, see §7).
+
+---
+
+## 5. States & feedback
+
+An icon the user can act on must *look* actionable and must confirm the action:
+
+- Distinct **default / hover / pressed**, via motion, color, or both. A clickable icon
+  that never changes reads as decoration.
+- **Feedback through the icon itself:** a checkmark confirms success, a warning sign flags
+  an error, a state-swap (empty→full trash) signals what happened. Digital UI lacks the
+  physical click of a real switch, so this feedback matters *more*, not less.
+
+---
+
+## 6. Animated icons (Lordicon / Lottie): timing is locked
+
+Animated icons convey more meaning than static ones and drive engagement, but only with
+discipline. The same budget as micro-interactions applies: **2 to 3 per view**, never a field
+of looping motion.
+
+**Timing (hard limits):**
+
+| Trigger | Duration | Notes |
+|---|---|---|
+| **Click / tap** | **≤ 500ms** | must keep up with repeat clicks; longer feels out of sync and becomes a distraction by the 3rd press |
+| **Hover (decorative)** | **1500-3000ms** | the delight sweet spot; more complex symbol → longer end of the range |
+| GIF fallback loop | **2000-5000ms delay between loops** | only if tech forces a looping GIF |
+
+**Rules:**
+
+- **No constant loops in dashboards / standard UI.** They become an unwelcome
+  distraction (especially for attention-sensitive users). Trigger on hover instead.
+  A looping animation is fine *as a page loader*, not as ambient dashboard decoration.
+  (This rhymes with the skill-wide "nothing moves that the user didn't cause" principle,
+  [feel-layer.md](feel-layer.md) §5.)
+- **No extreme flashing or flickering**: a seizure/motion-sensitivity hazard. Smooth the
+  frequency; never strobe.
+- **Natural physics only.** Motion that breaks real-world dynamics (unnatural bounce,
+  impossible 3D, irregular movement) leaves users unsettled and confused. Smooth, weighted,
+  accurate. Every movement must serve a purpose and match the icon's meaning (a security
+  icon shouldn't "wave and wiggle").
+- **Don't overload.** Too many animated icons, especially on loop, drown the message.
+
+Animated icons are a micro-interaction: they obey the same library split and gating as
+everything in [micro-interactions.md](micro-interactions.md). Lottie/Lordicon players are
+state/lifecycle-driven (Motion territory for triggering), hover effects are
+`@media (hover: hover)`-gated, and **reduced-motion → static icon** (render the still
+frame, never the animation).
+
+---
+
+## 7. Accessibility
+
+- **Meaningful icon:** give it an accessible name via `aria-label` (or visible label, §8).
+  An icon that carries content needs alt text so screen readers convey it.
+- **Decorative icon:** `aria-hidden`, which keeps it out of the a11y tree entirely.
+- **Never color-alone** for meaning (color-vision-deficient and low-vision users). Pair
+  with shape, label, or motion.
+- **Touch target ≥ 48×48px**: the tappable area can exceed the visual glyph. Keep spacing
+  between grouped tappable icons so they don't misfire.
+- **Reduced motion** → static icon (see §6).
+
+---
+
+## 8. Labels, universal icons, conflicts
+
+- **Labels:** before users click, they need to know what to expect. Universal icons (home,
+  play, stop, pin, search) are self-evident; anything ambiguous needs a **1 to 3 word label**
+  using an action word (Buy, Continue, Subscribe). Icons reinforce; labels disambiguate.
+- **Universal icons reduce cognitive load.** Lean on the globally-recognized set where it
+  fits, beyond cultural differences.
+- **Conflicting icons** (heart vs star both mean "favorite/save/rate"): don't avoid them,
+  **consciously pick one** and label its function clearly. Don't use one icon for two
+  purposes or two icons for one purpose.
+- **Cultural context** matters for unique/symbolic icons, so consider the audience.
+- **Test** new icons with outsiders for *recognizability* (do they understand it?) and
+  *memorability* (do they recall it a week later?). Re-design or add a label if not.
+
+---
+
+**Cheap tell:** Lucide `Sparkles`/`Rocket`/`Zap` in colored circle chips, 3-up, as
+feature decoration; an animated icon looping forever in a dashboard; a 500ms+ click
+animation that lags the cursor; a tiny decorative icon turned to mud at 16px.
+**Instead:** One deliberately chosen icon family, system vs decorative registers kept separate,
+ink-colored with color only for state/semantics, animated only where it informs and
+within the timing limits, labeled where not universal, `aria` correct, ≥48px targets.

package/skills/struq/references/imagery.md

@@ -0,0 +1,144 @@
+# Imagery & Art Direction: one grade, declared ratios, treated assets
+
+Imagery is now where generated builds fail hardest: the CSS can be flawless and the page still screams "AI" because the images are ungraded stock, glossy renders, or six unrelated looks. The fix is the same shape as the color system: **decide once, apply everywhere**. One grade, one ratio set, one sourcing standard.
+
+Media *behavior* (window parallax, masked reveals, aspect-ratio for CLS) lives in [depth-parallax.md](depth-parallax.md) and [scroll-reveals.md](scroll-reveals.md); this file is about what the pixels *are*.
+
+---
+
+## 1. One grade per page
+
+Every image on a page passes through the **same treatment**, chosen to match the preset's temperature ([vibe-presets.md](vibe-presets.md)). Mixed grading (a warm lifestyle shot next to a cool product render next to a saturated stock photo) is the single most reliable imagery tell. It says the images were *collected*, not *directed*.
+
+Pick one:
+
+| Grade | Character | Pairs with |
+|---|---|---|
+| **Warm film** | lifted blacks, warm midtones, gentle contrast | Warm Editorial |
+| **Desaturated cool** | -20 to -40% saturation, cool shift, deep blacks | Dark Cinematic |
+| **High-contrast BW** | full monochrome, punchy | the Brutalist genre appendix only, when the brief declares the genre (color arrives only via the accent) |
+| **Soft neutral** | low contrast, airy highlights, near-monochrome palette subjects | Soft Modern (cool-leaning), Luxury Minimal (warm-leaning) |
+| **Duotone** | surface color + ink (or accent) mapped to shadows/highlights | any preset, as the *signature* look |
+
+Apply the grade in one reusable layer, not per-image in an editor:
+
+```tsx
+// 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;
+}) {
+  return (
+    <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).
+- `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.
+
+---
+
+## 2. The ratio set: declared like tokens
+
+Pick **2 to 3 aspect ratios per project** and use nothing else. A page whose media is 4/3, 16/9, 3/2, 1/1, and 21/9 at random reads as unplaced; the same images in a disciplined ratio set read as a system. (Explicit ratios are also the CLS guard, see [setup.md](setup.md) §6.)
+
+| Role | Default | Alternatives by genre |
+|---|---|---|
+| Standard content / work thumb | `4/3` | `3/2` editorial, `1/1` brutalist grid |
+| Full-bleed statement (1 per ~3 viewports) | `21/9` | `2/1` |
+| Portrait accent (people, product detail) | `3/4` | `4/5` |
+
+Declare them where the tokens live and reference by role, never ad-hoc:
+
+```css
+@theme {
+  --ratio-standard: 4/3;
+  --ratio-wide: 21/9;
+  --ratio-portrait: 3/4;
+}
+```
+
+---
+
+## 3. Texture: grain, and when to stop
+
+One **global grain overlay** unifies mixed sources better than any filter. It puts every image (and the surfaces) on the same "stock":
+
+```tsx
+// One fixed element at the end of <body>. z-index above content, below nav (composition.md z-ladder).
+<div aria-hidden className="pointer-events-none fixed inset-0 z-40 opacity-[0.05] mix-blend-overlay"
+     style={{ backgroundImage: "url(/noise.png)", backgroundSize: "128px" }} />
+```
+
+- `noise.png`: a 128px tileable monochrome noise tile (or an inline SVG `feTurbulence` data-URI). Opacity 0.03 to 0.06: visible on a dark surface if you look, never legible as a pattern.
+- Grain suits film/cinematic/editorial registers; **skip it** for Luxury Minimal (clean air is the brand) and product-UI screenshots (they must stay crisp).
+- Budget: grain is the *only* always-on texture. Grain + vignettes + gradients + blobs = mud.
+
+---
+
+## 4. Sourcing ladder: where images come from
+
+In order of preference:
+
+1. **Real assets**: the client's work, product, people, places. Always first; treatment (§1) makes even average photography cohesive.
+2. **Struq's beeldbank**: real, graded, CC0 sector packs from struq.nl, one pack per site so the grade stays single, downloaded into the project and credited. The first stop when the client has no photos, or not enough. How to pick, fetch and credit: [struq-imagery.md](struq-imagery.md).
+3. **Generated on-brief**, with any capable image model (Flux/SDXL-class local checkpoints or a hosted generator). The standard when real assets don't exist and no beeldbank pack fits. Treat each prompt as an art-direction document, not a subject description, and generate the whole set in one session with the same model and settings so it reads as one shoot. Prompt for the *page's* grade, not per-image whims:
+   - State the grade in every prompt: light temperature ("warm late-afternoon window light" / "cool overcast studio light"), palette bias matching the preset's neutrals, film character ("35mm film grain, muted colors" vs "clean digital").
+   - Keep **one lighting world** across the set. Consistent light does more for coherence than consistent subjects.
+   - Compose for the crop: prompt the ratio you'll place (§2), and leave dead space where type will sit if it's a lockup image ([composition.md](composition.md) §3).
+   - 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.
+
+**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
+
+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.
+
+- **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>
+  );
+}
+```
+
+---
+
+## 5. Accessibility & weight
+
+- **Content images:** real `alt` describing the subject. **Decorative/texture images** (ghost imagery, grain, backdrop media): `alt=""` or `aria-hidden`, so "image of background texture" never leaks to screen readers.
+- Ship AVIF/WebP with sensible `sizes`; a full-bleed hero stays at or under 250KB at 1920w and a content image at or under 150KB at 1440w, the budgets in [performance.md](performance.md) §1. Never 4MB.
+- Ambient/looping video obeys the motion doctrine: muted, `playsinline`, poster, paused under `prefers-reduced-motion`. It also counts as the page's one autonomous mover ([feel-layer.md](feel-layer.md) §5).
+
+---
+
+**Cheap tell:** mixed-grade stock + a tilted browser-chrome screenshot + a purple-glow 3D blob, all at random ratios, alt-less.
+**Instead:** One grade constant, one grain layer, 2 to 3 declared ratios, assets real or generated on-brief, treated identically. The imagery reads as *photographed for this site*.