@phuc1403/musketeer 0.8.0 → 0.10.0

package/template/.claude/skills/hallmark/references/motion.md

@@ -1,109 +1,109 @@
-# Motion
-
-Most AI-generated motion is scattered — hover lifts on every card, fade-in on every scroll, bouncing icons. Quiet it. One orchestrated moment beats ten small ones.
-
-> For per-interaction recipes (button press, focus, modal, toast, optimistic update, command palette, drag handle, etc.), see [`microinteractions.md`](microinteractions.md). This file is the *language* of motion; that file is the *vocabulary*.
-
-## Principles
-
-- **Animate only `transform` and `opacity`.** These are GPU-composited; they don't trigger layout. Anything else is a performance bug waiting.
-- **Duration is three buckets.** Micro (100–150ms), minor (200–300ms), major (300–500ms). Exits are ~75% of the enter.
-- **Easing is exponential ease-out.** Elements coming in slow down into place. Elements leaving accelerate away.
-- **Motion serves perception.** If you can't explain what a transition communicates, cut it.
-- **Reduced motion is non-optional.** `@media (prefers-reduced-motion: reduce)` collapses all spatial motion to opacity crossfade.
-
-## Easings
-
-Use these three. Name them as tokens.
-
-```css
-:root {
-  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);        /* elements entering */
-  --ease-in:  cubic-bezier(0.7,  0, 0.84, 0);       /* elements leaving  */
-  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);    /* state toggles     */
-}
-```
-
-`ease`, `ease-in-out` (default), `cubic-bezier(0.25, 0.1, 0.25, 1)` — these are the browser defaults and they read as uncrafted.
-
-## Durations
-
-```css
-:root {
-  --dur-micro: 120ms;   /* button press, toggle tick, color shift  */
-  --dur-short: 220ms;   /* hover lift, tooltip, menu open          */
-  --dur-long:  420ms;   /* modal, drawer, accordion, page reveal   */
-}
-```
-
-Exits use roughly 75% of the enter:
-
-```css
-.menu.is-open  { transition: transform var(--dur-short) var(--ease-out); }
-.menu.is-close { transition: transform calc(var(--dur-short) * 0.75) var(--ease-in); }
-```
-
-## Page-load orchestration
-
-One sequence on page load. Stagger by DOM index using a CSS custom property, not by JS.
-
-```html
-<section style="--i: 0">…</section>
-<section style="--i: 1">…</section>
-<section style="--i: 2">…</section>
-```
-
-```css
-.reveal {
-  opacity: 0;
-  transform: translateY(8px);
-  animation: reveal var(--dur-long) var(--ease-out) forwards;
-  animation-delay: calc(var(--i, 0) * 60ms);
-}
-@keyframes reveal {
-  to { opacity: 1; transform: none; }
-}
-```
-
-Cap total stagger at ~500ms. Beyond that the page feels slow to settle.
-
-## Scroll-linked motion
-
-- Use IntersectionObserver, **never** `scroll` event listeners.
-- Use it only for *reveal once* effects. No parallax. No scroll-scrubbed animations unless there is a specific reason.
-- Every scroll-triggered motion must have a reduced-motion fallback.
-
-## State transitions
-
-- Button hover / active: micro duration, `--ease-out`, `transform: translateY(-1px)` on hover, `translateY(0)` on active. Never a `box-shadow` transition on hover on a dark background (glow effect).
-- Menu / tooltip / dropdown: short duration, `--ease-out` on open, `--ease-in` on close. Use the popover API or `inert` to manage focus.
-- Modal: long duration, scale-in (0.96 → 1) + opacity crossfade. Backdrop fades in at the same duration.
-- Accordion: animate `grid-template-rows: 0fr` → `grid-template-rows: 1fr` (not `height`). With `--ease-in-out`.
-
-## Reduced motion
-
-```css
-@media (prefers-reduced-motion: reduce) {
-  *, *::before, *::after {
-    animation-duration: 150ms !important;
-    animation-iteration-count: 1 !important;
-    transition-duration: 150ms !important;
-  }
-  .reveal { animation: reveal-reduced 150ms linear forwards; }
-  @keyframes reveal-reduced { to { opacity: 1; transform: none; } }
-}
-```
-
-Functional motion (progress bars, loading spinners, skeletons) still runs — just slower.
-
-## Bans
-
-- `ease` (browser default, mediocre).
-- `linear` on anything except progress bars and ticking loaders.
-- Bounce / elastic / overshoot on UI elements. Dated; signals "template".
-- Animating `width`, `height`, `top`, `left`, `margin`, `padding`.
-- `will-change` set preemptively across a whole class. Only on the element, only while it's animating.
-- Parallax.
-- Custom cursors.
-- Scroll-driven animations without a reduced-motion fallback.
-- Infinite loops (other than functional loaders) — they pull the eye and never let go.
+# Motion
+
+Most AI-generated motion is scattered — hover lifts on every card, fade-in on every scroll, bouncing icons. Quiet it. One orchestrated moment beats ten small ones.
+
+> For per-interaction recipes (button press, focus, modal, toast, optimistic update, command palette, drag handle, etc.), see [`microinteractions.md`](microinteractions.md). This file is the *language* of motion; that file is the *vocabulary*.
+
+## Principles
+
+- **Animate only `transform` and `opacity`.** These are GPU-composited; they don't trigger layout. Anything else is a performance bug waiting.
+- **Duration is three buckets.** Micro (100–150ms), minor (200–300ms), major (300–500ms). Exits are ~75% of the enter.
+- **Easing is exponential ease-out.** Elements coming in slow down into place. Elements leaving accelerate away.
+- **Motion serves perception.** If you can't explain what a transition communicates, cut it.
+- **Reduced motion is non-optional.** `@media (prefers-reduced-motion: reduce)` collapses all spatial motion to opacity crossfade.
+
+## Easings
+
+Use these three. Name them as tokens.
+
+```css
+:root {
+  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);        /* elements entering */
+  --ease-in:  cubic-bezier(0.7,  0, 0.84, 0);       /* elements leaving  */
+  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);    /* state toggles     */
+}
+```
+
+`ease`, `ease-in-out` (default), `cubic-bezier(0.25, 0.1, 0.25, 1)` — these are the browser defaults and they read as uncrafted.
+
+## Durations
+
+```css
+:root {
+  --dur-micro: 120ms;   /* button press, toggle tick, color shift  */
+  --dur-short: 220ms;   /* hover lift, tooltip, menu open          */
+  --dur-long:  420ms;   /* modal, drawer, accordion, page reveal   */
+}
+```
+
+Exits use roughly 75% of the enter:
+
+```css
+.menu.is-open  { transition: transform var(--dur-short) var(--ease-out); }
+.menu.is-close { transition: transform calc(var(--dur-short) * 0.75) var(--ease-in); }
+```
+
+## Page-load orchestration
+
+One sequence on page load. Stagger by DOM index using a CSS custom property, not by JS.
+
+```html
+<section style="--i: 0">…</section>
+<section style="--i: 1">…</section>
+<section style="--i: 2">…</section>
+```
+
+```css
+.reveal {
+  opacity: 0;
+  transform: translateY(8px);
+  animation: reveal var(--dur-long) var(--ease-out) forwards;
+  animation-delay: calc(var(--i, 0) * 60ms);
+}
+@keyframes reveal {
+  to { opacity: 1; transform: none; }
+}
+```
+
+Cap total stagger at ~500ms. Beyond that the page feels slow to settle.
+
+## Scroll-linked motion
+
+- Use IntersectionObserver, **never** `scroll` event listeners.
+- Use it only for *reveal once* effects. No parallax. No scroll-scrubbed animations unless there is a specific reason.
+- Every scroll-triggered motion must have a reduced-motion fallback.
+
+## State transitions
+
+- Button hover / active: micro duration, `--ease-out`, `transform: translateY(-1px)` on hover, `translateY(0)` on active. Never a `box-shadow` transition on hover on a dark background (glow effect).
+- Menu / tooltip / dropdown: short duration, `--ease-out` on open, `--ease-in` on close. Use the popover API or `inert` to manage focus.
+- Modal: long duration, scale-in (0.96 → 1) + opacity crossfade. Backdrop fades in at the same duration.
+- Accordion: animate `grid-template-rows: 0fr` → `grid-template-rows: 1fr` (not `height`). With `--ease-in-out`.
+
+## Reduced motion
+
+```css
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 150ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 150ms !important;
+  }
+  .reveal { animation: reveal-reduced 150ms linear forwards; }
+  @keyframes reveal-reduced { to { opacity: 1; transform: none; } }
+}
+```
+
+Functional motion (progress bars, loading spinners, skeletons) still runs — just slower.
+
+## Bans
+
+- `ease` (browser default, mediocre).
+- `linear` on anything except progress bars and ticking loaders.
+- Bounce / elastic / overshoot on UI elements. Dated; signals "template".
+- Animating `width`, `height`, `top`, `left`, `margin`, `padding`.
+- `will-change` set preemptively across a whole class. Only on the element, only while it's animating.
+- Parallax.
+- Custom cursors.
+- Scroll-driven animations without a reduced-motion fallback.
+- Infinite loops (other than functional loaders) — they pull the eye and never let go.

package/template/.claude/skills/hallmark/references/preview-examples.md

@@ -1,49 +1,49 @@
-# Preview-block worked examples
-
-Four sample Step 5 preview blocks for the model to imitate, varied across macrostructure types. Load this file only when picking an unusual macrostructure or custom theme and the bullet-list spec in `SKILL.md § 5. Preview` doesn't give enough scaffolding on its own. Most builds don't need to read this file.
-
----
-
-*Long Document (editorial, motion-cut):*
-> **Hallmark · v1.0.0**
->
-> - **Macrostructure** · Long Document
-> - **Theme** · Linen (cool slate paper · steel-blue accent · geometric sans)
-> - **Enrichment** · Tier-B hand-built SVG (a 60-line coffee bean with `@property --rise` 6 s breathing-loop)
-> - **Sections** · Masthead · Letter · Three Notes · Visit · Colophon
-> - **Motion** · breathing-loop on bean only (respects `prefers-reduced-motion`)
-> - **Slop test** · 69 / 69 ✓
-> - **Diversification** · first run for this project
-
-*Bento Grid (SaaS, motion-on):*
-> **Hallmark · v1.0.0**
->
-> - **Macrostructure** · Bento Grid
-> - **Theme** · Linen (cool slate paper · steel-blue accent · geometric sans)
-> - **Enrichment** · E1 Clipped-Edge Demo Video, Tier-A CSS-art trace waterfall
-> - **Sections** · Hero · 6-tile Bento (stat · sparkline · quote · code · integrations · spotlight) · Index Footer
-> - **Motion** · counter · pricing-lift · CSS marquee on integrations strip
-> - **Slop test** · 69 / 69 ✓
-> - **Diversification** · differs from Plain on paper hue (light-cool vs pure-white) + accent (indigo vs ink-blue)
-
-*Manifesto (declarative, no enrichment):*
-> **Hallmark · v1.0.0**
->
-> - **Macrostructure** · Manifesto
-> - **Theme** · Manifesto (dark · Inter Tight 900 · single red bleed)
-> - **Enrichment** · none (typography only — voice carries the brand)
-> - **Sections** · Masthead · Title · Five Declarations · Bleed Band · What We Refuse · Working Rules · Practice · Reading · Colophon
-> - **Motion** · none — typography only
-> - **Slop test** · 69 / 69 ✓
-> - **Diversification** · differs from Linen on paper band (dark vs light) + display style (display-heavy vs geometric-sans)
-
-*Custom (Coffeebox archival café):*
-> **Hallmark · v1.0.0**
->
-> - **Macrostructure** · Long Document
-> - **Theme** · custom (vibe: "archival warmth, hand-set, no varnish" · paper oklch(94% 0.020 65) · accent oklch(58% 0.16 35) terracotta · Fraunces italic display + Source Serif 4 body)
-> - **Enrichment** · Tier-A pure-CSS coffee bean (60-line SVG, breathing-loop optional)
-> - **Sections** · Masthead · Letter · Three Notes · Visit · Colophon
-> - **Motion** · breathing-loop on bean (with reduced-motion fallback)
-> - **Slop test** · 69 / 69 ✓
-> - **Diversification** · custom axes: light / italic-serif / chromatic-terracotta — differs from previous catalog Linen on accent hue + display style
+# Preview-block worked examples
+
+Four sample Step 5 preview blocks for the model to imitate, varied across macrostructure types. Load this file only when picking an unusual macrostructure or custom theme and the bullet-list spec in `SKILL.md § 5. Preview` doesn't give enough scaffolding on its own. Most builds don't need to read this file.
+
+---
+
+*Long Document (editorial, motion-cut):*
+> **Hallmark · v1.0.0**
+>
+> - **Macrostructure** · Long Document
+> - **Theme** · Linen (cool slate paper · steel-blue accent · geometric sans)
+> - **Enrichment** · Tier-B hand-built SVG (a 60-line coffee bean with `@property --rise` 6 s breathing-loop)
+> - **Sections** · Masthead · Letter · Three Notes · Visit · Colophon
+> - **Motion** · breathing-loop on bean only (respects `prefers-reduced-motion`)
+> - **Slop test** · 69 / 69 ✓
+> - **Diversification** · first run for this project
+
+*Bento Grid (SaaS, motion-on):*
+> **Hallmark · v1.0.0**
+>
+> - **Macrostructure** · Bento Grid
+> - **Theme** · Linen (cool slate paper · steel-blue accent · geometric sans)
+> - **Enrichment** · E1 Clipped-Edge Demo Video, Tier-A CSS-art trace waterfall
+> - **Sections** · Hero · 6-tile Bento (stat · sparkline · quote · code · integrations · spotlight) · Index Footer
+> - **Motion** · counter · pricing-lift · CSS marquee on integrations strip
+> - **Slop test** · 69 / 69 ✓
+> - **Diversification** · differs from Plain on paper hue (light-cool vs pure-white) + accent (indigo vs ink-blue)
+
+*Manifesto (declarative, no enrichment):*
+> **Hallmark · v1.0.0**
+>
+> - **Macrostructure** · Manifesto
+> - **Theme** · Manifesto (dark · Inter Tight 900 · single red bleed)
+> - **Enrichment** · none (typography only — voice carries the brand)
+> - **Sections** · Masthead · Title · Five Declarations · Bleed Band · What We Refuse · Working Rules · Practice · Reading · Colophon
+> - **Motion** · none — typography only
+> - **Slop test** · 69 / 69 ✓
+> - **Diversification** · differs from Linen on paper band (dark vs light) + display style (display-heavy vs geometric-sans)
+
+*Custom (Coffeebox archival café):*
+> **Hallmark · v1.0.0**
+>
+> - **Macrostructure** · Long Document
+> - **Theme** · custom (vibe: "archival warmth, hand-set, no varnish" · paper oklch(94% 0.020 65) · accent oklch(58% 0.16 35) terracotta · Fraunces italic display + Source Serif 4 body)
+> - **Enrichment** · Tier-A pure-CSS coffee bean (60-line SVG, breathing-loop optional)
+> - **Sections** · Masthead · Letter · Three Notes · Visit · Colophon
+> - **Motion** · breathing-loop on bean (with reduced-motion fallback)
+> - **Slop test** · 69 / 69 ✓
+> - **Diversification** · custom axes: light / italic-serif / chromatic-terracotta — differs from previous catalog Linen on accent hue + display style

package/template/.claude/skills/hallmark/references/responsive.md

@@ -1,138 +1,138 @@
-# Responsive
-
-Mobile-first. Content-driven breakpoints. No desktop-only interactions.
-
-## Mobile — non-negotiable
-
-Every Hallmark output must render flawlessly at **320 px, 375 px, 414 px, and 768 px** CSS-pixel widths. Eyeball each viewport before marking the output complete:
-
-- No horizontal scroll (slop-test gate 36)
-- No clickable text wrapping to two lines (gate 59)
-- No image-bearing grid pushing the layout past viewport — use `minmax(0, 1fr)`, never bare `1fr`, on tracks containing images (gate 61)
-- Root carries `overflow-x: clip` on both `html` and `body` — never `hidden` (gate 62)
-- Display headers wrap inside long words via `overflow-wrap: anywhere; min-width: 0` (gate 63)
-- Section heads collapse to one column on mobile across every theme variant — per-theme overrides need a matching mobile rule (gate 64)
-- No scroll-jump on radio-tab clicks — radios in normal flow OR JS guard with `focus({ preventScroll: true })` (gate 65)
-
-This is a hard floor, not a wish list. A page that fails any of these on any of those four widths is not done. The slop-test gates listed run automatically — keep this checklist near the screen while building.
-
-## Principles
-
-- Base styles are for the smallest viewport. `min-width` media queries add as you go up. Never `max-width` as the primary direction.
-- Breakpoints are where the *content* breaks, not where a device sits. If the headline reflows awkwardly at 720px, that's a breakpoint — regardless of what the Tailwind defaults say.
-- Use `pointer` and `hover` media queries instead of width to detect *interaction capability*.
-
-## Breakpoints
-
-Three or four, content-driven. As a default:
-
-```css
-@media (min-width: 40rem) { /* ~640px — tablet, small laptop */ }
-@media (min-width: 60rem) { /* ~960px — desktop baseline */ }
-@media (min-width: 90rem) { /* ~1440px — wide */ }
-```
-
-Use `rem` so the breakpoints respect the user's font size.
-
-## Fluid scaling
-
-Prefer `clamp()` for sizes that change continuously; use media queries for layouts that change discretely.
-
-```css
-h1 { font-size: clamp(2.5rem, 4vw + 1rem, 6rem); }
-.container { padding-inline: clamp(1rem, 4vw, 4rem); }
-```
-
-## Pointer and hover queries
-
-```css
-@media (hover: hover) and (pointer: fine) {
-  .card:hover { transform: translateY(-2px); }
-}
-@media (pointer: coarse) {
-  .btn { min-height: 48px; }
-}
-```
-
-Never build a mouse-hover interaction that has no touch equivalent.
-
-## Clickable text — never wraps
-
-Buttons, primary nav links, footer links, tab labels, breadcrumbs, and CTAs must read as **single-line affordances at every viewport between 320 px and 1920 px**. A button or nav link wrapping to two lines looks broken — visitors read it as a styling error, not as intentional. The shortest fix is almost always to shorten the label.
-
-```css
-/* Affordances are single-line — let the parent reflow, not the label. */
-.btn,
-.nav__link,
-.foot__link,
-.cta {
-  white-space: nowrap;
-}
-```
-
-```css
-/* When the row can't fit, collapse the row, not the labels. */
-@media (max-width: 40rem) {
-  .nav__rail { display: none; }      /* desktop nav hides */
-  .nav__sheet-toggle { display: grid; } /* mobile menu shows */
-}
-```
-
-**Order of fixes**, when something does wrap:
-
-1. **Shorten the label.** *"Get started free"* → *"Start free"*. *"Read the documentation"* → *"Read docs"*. *"Schedule a demo"* → *"Book demo"*. Most CTA labels are 30–40 % longer than they need to be.
-2. **`white-space: nowrap`** on the affordance, let the parent flex/grid reflow.
-3. **`hidden=until-found`** the lowest-priority nav item at narrow widths (it remains in DOM for find-in-page and SEO).
-4. **Collapse the nav** into a sheet / off-canvas / disclosure menu below a content-driven breakpoint.
-
-**Never:** let a primary CTA or top-level nav link wrap. Long footer-link labels can wrap *only* in a footer column where wrapping is part of the column's rhythm — not in the inline footer link strip (Ft2).
-
-This is gate **59** in [`slop-test.md`](slop-test.md). Audit any output that ships interactive affordances and confirm none wrap at the breakpoints listed above.
-
-## Viewport units
-
-- Use `dvh` / `svh` / `lvh` instead of `vh` for heights that interact with mobile chrome.
-- Never `width: 100vw`. Use `width: 100%` with padding; `100vw` includes the scrollbar on desktop and causes overflow.
-
-## Safe areas
-
-For iOS notch / Android navigation bars:
-
-```html
-<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
-```
-
-```css
-body {
-  padding-inline: max(1rem, env(safe-area-inset-left));
-  padding-bottom: max(1rem, env(safe-area-inset-bottom));
-}
-```
-
-## Tables on small screens
-
-Tables of data that won't fit: collapse to cards. Use `display: block` on `<tr>` and `data-label` attributes keyed from `<th>`, rendered via `::before`. Or, the better option: redesign the data for small screens — tables are rarely the right mobile representation.
-
-## Images
-
-- `srcset` with width descriptors for responsive sizing.
-- `<picture>` for art direction (different crop at different widths).
-- `loading="lazy"` on anything below the fold.
-- `width` and `height` attributes on every image, always, to avoid CLS.
-
-## Internationalisation
-
-- Reserve 30–40% extra horizontal space for German, Russian, and Finnish translations.
-- Use logical properties: `margin-inline-start`, `padding-block`, `border-inline-end`. Not `margin-left` etc. RTL comes for free.
-- Don't hard-code language-specific punctuation or date formats.
-
-## Bans
-
-- Desktop-first media queries (`max-width: 768px` as the primary direction).
-- `vh` on full-height layouts (use `dvh`).
-- `100vw` widths.
-- Device-sniffing UA strings instead of feature queries.
-- Hover-only interactions.
-- Ignoring `prefers-color-scheme` when the app claims to support dark mode.
-- Fixed pixel breakpoints that don't respect `rem`.
-- Tables of 10+ columns on mobile without a redesign.
+# Responsive
+
+Mobile-first. Content-driven breakpoints. No desktop-only interactions.
+
+## Mobile — non-negotiable
+
+Every Hallmark output must render flawlessly at **320 px, 375 px, 414 px, and 768 px** CSS-pixel widths. Eyeball each viewport before marking the output complete:
+
+- No horizontal scroll (slop-test gate 36)
+- No clickable text wrapping to two lines (gate 59)
+- No image-bearing grid pushing the layout past viewport — use `minmax(0, 1fr)`, never bare `1fr`, on tracks containing images (gate 61)
+- Root carries `overflow-x: clip` on both `html` and `body` — never `hidden` (gate 62)
+- Display headers wrap inside long words via `overflow-wrap: anywhere; min-width: 0` (gate 63)
+- Section heads collapse to one column on mobile across every theme variant — per-theme overrides need a matching mobile rule (gate 64)
+- No scroll-jump on radio-tab clicks — radios in normal flow OR JS guard with `focus({ preventScroll: true })` (gate 65)
+
+This is a hard floor, not a wish list. A page that fails any of these on any of those four widths is not done. The slop-test gates listed run automatically — keep this checklist near the screen while building.
+
+## Principles
+
+- Base styles are for the smallest viewport. `min-width` media queries add as you go up. Never `max-width` as the primary direction.
+- Breakpoints are where the *content* breaks, not where a device sits. If the headline reflows awkwardly at 720px, that's a breakpoint — regardless of what the Tailwind defaults say.
+- Use `pointer` and `hover` media queries instead of width to detect *interaction capability*.
+
+## Breakpoints
+
+Three or four, content-driven. As a default:
+
+```css
+@media (min-width: 40rem) { /* ~640px — tablet, small laptop */ }
+@media (min-width: 60rem) { /* ~960px — desktop baseline */ }
+@media (min-width: 90rem) { /* ~1440px — wide */ }
+```
+
+Use `rem` so the breakpoints respect the user's font size.
+
+## Fluid scaling
+
+Prefer `clamp()` for sizes that change continuously; use media queries for layouts that change discretely.
+
+```css
+h1 { font-size: clamp(2.5rem, 4vw + 1rem, 6rem); }
+.container { padding-inline: clamp(1rem, 4vw, 4rem); }
+```
+
+## Pointer and hover queries
+
+```css
+@media (hover: hover) and (pointer: fine) {
+  .card:hover { transform: translateY(-2px); }
+}
+@media (pointer: coarse) {
+  .btn { min-height: 48px; }
+}
+```
+
+Never build a mouse-hover interaction that has no touch equivalent.
+
+## Clickable text — never wraps
+
+Buttons, primary nav links, footer links, tab labels, breadcrumbs, and CTAs must read as **single-line affordances at every viewport between 320 px and 1920 px**. A button or nav link wrapping to two lines looks broken — visitors read it as a styling error, not as intentional. The shortest fix is almost always to shorten the label.
+
+```css
+/* Affordances are single-line — let the parent reflow, not the label. */
+.btn,
+.nav__link,
+.foot__link,
+.cta {
+  white-space: nowrap;
+}
+```
+
+```css
+/* When the row can't fit, collapse the row, not the labels. */
+@media (max-width: 40rem) {
+  .nav__rail { display: none; }      /* desktop nav hides */
+  .nav__sheet-toggle { display: grid; } /* mobile menu shows */
+}
+```
+
+**Order of fixes**, when something does wrap:
+
+1. **Shorten the label.** *"Get started free"* → *"Start free"*. *"Read the documentation"* → *"Read docs"*. *"Schedule a demo"* → *"Book demo"*. Most CTA labels are 30–40 % longer than they need to be.
+2. **`white-space: nowrap`** on the affordance, let the parent flex/grid reflow.
+3. **`hidden=until-found`** the lowest-priority nav item at narrow widths (it remains in DOM for find-in-page and SEO).
+4. **Collapse the nav** into a sheet / off-canvas / disclosure menu below a content-driven breakpoint.
+
+**Never:** let a primary CTA or top-level nav link wrap. Long footer-link labels can wrap *only* in a footer column where wrapping is part of the column's rhythm — not in the inline footer link strip (Ft2).
+
+This is gate **59** in [`slop-test.md`](slop-test.md). Audit any output that ships interactive affordances and confirm none wrap at the breakpoints listed above.
+
+## Viewport units
+
+- Use `dvh` / `svh` / `lvh` instead of `vh` for heights that interact with mobile chrome.
+- Never `width: 100vw`. Use `width: 100%` with padding; `100vw` includes the scrollbar on desktop and causes overflow.
+
+## Safe areas
+
+For iOS notch / Android navigation bars:
+
+```html
+<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+```
+
+```css
+body {
+  padding-inline: max(1rem, env(safe-area-inset-left));
+  padding-bottom: max(1rem, env(safe-area-inset-bottom));
+}
+```
+
+## Tables on small screens
+
+Tables of data that won't fit: collapse to cards. Use `display: block` on `<tr>` and `data-label` attributes keyed from `<th>`, rendered via `::before`. Or, the better option: redesign the data for small screens — tables are rarely the right mobile representation.
+
+## Images
+
+- `srcset` with width descriptors for responsive sizing.
+- `<picture>` for art direction (different crop at different widths).
+- `loading="lazy"` on anything below the fold.
+- `width` and `height` attributes on every image, always, to avoid CLS.
+
+## Internationalisation
+
+- Reserve 30–40% extra horizontal space for German, Russian, and Finnish translations.
+- Use logical properties: `margin-inline-start`, `padding-block`, `border-inline-end`. Not `margin-left` etc. RTL comes for free.
+- Don't hard-code language-specific punctuation or date formats.
+
+## Bans
+
+- Desktop-first media queries (`max-width: 768px` as the primary direction).
+- `vh` on full-height layouts (use `dvh`).
+- `100vw` widths.
+- Device-sniffing UA strings instead of feature queries.
+- Hover-only interactions.
+- Ignoring `prefers-color-scheme` when the app claims to support dark mode.
+- Fixed pixel breakpoints that don't respect `rem`.
+- Tables of 10+ columns on mobile without a redesign.