@struq/skill 0.3.0 → 0.4.0

package/skills/struq/cinematic/examples/code/nextjs/app/components/LenisRoot.tsx

@@ -21,7 +21,7 @@ export function LenisRoot({ children }: LenisRootProps): JSX.Element {
   useEffect(() => {
     // Registered unconditionally; the instance is resolved through the ref on
     // every frame. Never capture it once and early-return: that is the
-    // dead-scroll race (references/setup.md §2).
+    // dead-scroll race.
     const update = (time: number) => {
       lenisRef.current?.lenis?.raf(time * 1000);
     };

package/skills/struq/cinematic/examples/code/shared/styles.css

@@ -55,7 +55,7 @@ a {
 }
 
 /* Demo values. In a Struq build the h1 takes `font-display text-display` and the
-   pairing's tracking from typography.md §3.1; the clamp keeps a rem term for zoom. */
+   pairing's tracking; the clamp keeps a rem term for zoom. */
 .experience-copy h1 {
   margin: 0;
   font-size: clamp(2.875rem, 1.2rem + 6.86vw, 8rem);

package/skills/struq/cinematic/examples/code/vite/src/LenisRoot.tsx

@@ -16,7 +16,7 @@ export function LenisRoot({ children }: LenisRootProps): JSX.Element {
   useLenis(() => ScrollTrigger.update());
 
   useEffect(() => {
-    // Registered unconditionally, instance resolved per frame (references/setup.md §2).
+    // Registered unconditionally, instance resolved per frame.
     const update = (time: number) => {
       lenisRef.current?.lenis?.raf(time * 1000);
     };

package/skills/struq/cinematic/references/01-core-mental-model.md

@@ -118,7 +118,7 @@ These transitions should have explicit entry, active, and exit states.
 
 ## One clock, several signals
 
-There is exactly one frame clock. Lenis is advanced from `gsap.ticker`, ScrollTrigger reads from Lenis, and the R3F canvas is advanced from the same ticker (see [`../../references/setup.md`](../../references/setup.md) and [`../../references/webgl-r3f.md`](../../references/webgl-r3f.md)). Nothing in the experience runs its own `requestAnimationFrame` loop. Scroll progress and elapsed time are different signals read on that one clock, not different clocks.
+There is exactly one frame clock. Lenis is advanced from `gsap.ticker`, ScrollTrigger reads from Lenis, and the R3F canvas is advanced from the same ticker (the kit's `SmoothScroll` and [`../examples/code/shared/GsapFrameLoop.tsx`](../examples/code/shared/GsapFrameLoop.tsx)). Nothing in the experience runs its own `requestAnimationFrame` loop. Scroll progress and elapsed time are different signals read on that one clock, not different clocks.
 
 At minimum, distinguish:
 

package/skills/struq/cinematic/references/02-vocabulary.md

@@ -138,7 +138,7 @@ Offsetting related elements. A stagger should communicate reading order, directi
 Mapping scroll progress to a timeline playhead.
 
 ### Smoothing
-Reducing abrupt changes in a signal. Lenis smoothing, ScrollTrigger scrub smoothing, and manual damping should be assigned intentionally rather than stacked without control. Pair them the way the main skill does in [`../../references/feel-layer.md`](../../references/feel-layer.md): lower the Lenis lerp, lower the scrub number, and use `scrub: true` for attached layers and a small number for floating ones.
+Reducing abrupt changes in a signal. Lenis smoothing, ScrollTrigger scrub smoothing, and manual damping should be assigned intentionally rather than stacked without control. Pair them: lower the Lenis lerp, lower the scrub number, and use `scrub: true` for attached layers and a small number for floating ones.
 
 ### Easing
 The mathematical shape of a known transition between values.

package/skills/struq/cinematic/references/07-stack-integration.md

@@ -73,7 +73,7 @@ Key integration responsibilities:
 - Lenis is stopped during states that require scroll lock.
 - native nested scrolling is handled deliberately.
 
-Lenis must be created with `autoRaf: false`. If it keeps its own animation loop it becomes a second clock next to `gsap.ticker`, and scroll, ScrollTrigger and the canvas drift apart by a frame. The canonical setup lives in [`../../references/setup.md`](../../references/setup.md); this is the conceptual shape.
+Lenis must be created with `autoRaf: false`. If it keeps its own animation loop it becomes a second clock next to `gsap.ticker`, and scroll, ScrollTrigger and the canvas drift apart by a frame. The canonical setup is the kit's `SmoothScroll` (`blocks/kit/SmoothScroll.tsx`); this is the conceptual shape.
 
 Conceptual setup:
 
@@ -102,7 +102,7 @@ Do not add CSS `scroll-behavior: smooth` on top of Lenis.
 
 ## R3F frame-loop options
 
-The single-clock rule applies: the canvas is rendered from `gsap.ticker`, the same callback chain that advances Lenis. The exact bridge is documented in [`../../references/webgl-r3f.md`](../../references/webgl-r3f.md) and shown in [`../examples/code/shared/GsapFrameLoop.tsx`](../examples/code/shared/GsapFrameLoop.tsx).
+The single-clock rule applies: the canvas is rendered from `gsap.ticker`, the same callback chain that advances Lenis. The exact bridge is shown in [`../examples/code/shared/GsapFrameLoop.tsx`](../examples/code/shared/GsapFrameLoop.tsx).
 
 ### Ticker-driven loop (default)
 

package/skills/struq/recipes/app/fonts.ts

@@ -1,22 +1,12 @@
-// app/fonts.ts (Struq recipe)
-// Exactly two faces: a display face and a text face. Swap these two imports for the pairing you
-// picked in SKILL.md ("Pick the two faces"); keep the variable names --face-display and --face-body,
-// globals.css maps them to font-display and font-body.
-// Default: S2, Fraunces (soft serif display) over Urbanist (round geometric text).
-import { Fraunces, Urbanist } from "next/font/google";
-
-export const display = Fraunces({
-  subsets: ["latin"],
-  axes: ["SOFT", "opsz"],
-  variable: "--face-display",
-  display: "swap",
-});
-
-export const body = Urbanist({
-  subsets: ["latin"],
-  variable: "--face-body",
-  display: "swap",
-});
-
-/** Every face's CSS variable, for the <html> className in app/layout.tsx. */
-export const fontVariables = [display, body].map((f) => f.variable).join(" ");
+// app/fonts.ts (Struq recipe). canon.mjs type <pairing> rewrites this file; the default is serif-editorial.
+// Each Google face is asked for its real weight range, then as the bare family as a fallback, because Google refuses a
+// request for a weight the family lacks. The layout puts one <link> per URL in <head>; the token block in globals.css
+// names the faces (--face-display, --face-body, --face-accent), so the blocks measure with the real face.
+export const fontHrefs: string[] = [
+  "https://fonts.googleapis.com/css2?family=Fraunces:wght@100..900&display=swap",
+  "https://fonts.googleapis.com/css2?family=Fraunces&display=swap",
+  "https://fonts.googleapis.com/css2?family=Urbanist:wght@100..900&display=swap",
+  "https://fonts.googleapis.com/css2?family=Urbanist&display=swap",
+  "https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@1,100..900&display=swap",
+  "https://fonts.googleapis.com/css2?family=Fraunces:ital@1&display=swap",
+];

package/skills/struq/recipes/app/globals.css

@@ -1,185 +1,42 @@
 @import "tailwindcss";
+/* The block kit: type roles, the motion gate (.sq-js with its 3 s fallback), the contrast scenes and every block's
+   own CSS, all scoped to [data-blocks] (on <body>). */
+@import "../components/struq/kit/blocks.css";
 
-/* ==========================================================================
-   STRUQ TOKENS. Set the values from the palette you chose in SKILL.md.
-   Keep the names: every recipe and the hero canvas read them.
-   ========================================================================== */
-:root {
-  --surface-0: #f5efe6; /* the page */
-  --surface-1: #ede4d6; /* one step: panels, the showpiece ground */
-  --surface-2: #e1d4bf; /* two steps: image wells, hover grounds */
-  --surface-3: #cdbb9f; /* three steps: hairline accents, never text */
-  --ink: #1e1a15; /* headlines and body */
-  --ink-muted: #5d5446; /* secondary text, at least 4.5:1 on surface-0 */
-  --accent: #8a3b22; /* the one accent: the key CTA, one highlight per screen */
-  --accent-ink: #fbf6ee; /* text on the accent */
-  --line: rgb(30 26 21 / 0.12); /* hairlines: the ink at low alpha, never a grey hex */
-  --on-photo: #f7f3ec; /* type set over a photo or the ripple hero, on light and dark presets alike */
-  --inverse: #1e1a15; /* the contrast scene's ground: the palette's inverse role, else the ink */
-  --on-inverse: #f5efe6; /* type on it: else the page ground */
-  --field: #8a3b22; /* a full-strength colour field: the palette's field role, else the accent */
-  --on-field: #fbf6ee; /* type on it */
-  --display-weight: 300; /* light display: 300, or 400 for a face without a 300 */
-}
-
+/* The theme names the blocks use that the kit leaves to the site. */
 @theme inline {
-  --color-surface-0: var(--surface-0);
-  --color-surface-1: var(--surface-1);
-  --color-surface-2: var(--surface-2);
-  --color-surface-3: var(--surface-3);
-  --color-ink: var(--ink);
-  --color-ink-muted: var(--ink-muted);
   --color-accent: var(--accent);
-  --color-accent-ink: var(--accent-ink);
-  --color-line: var(--line);
-  --color-on-photo: var(--on-photo);
-  --color-inverse: var(--inverse);
-  --color-on-inverse: var(--on-inverse);
-  --color-field: var(--field);
-  --color-on-field: var(--on-field);
+  --color-accent-2: var(--accent-2);
+  --color-photo-ground: var(--photo-ground);
   --font-display: var(--face-display), ui-serif, Georgia, serif;
-  --font-body: var(--face-body), ui-sans-serif, system-ui, sans-serif;
-  --font-accent: var(--face-accent, var(--face-display)), ui-serif, Georgia, serif;
-  --font-sans: var(--face-body), ui-sans-serif, system-ui, sans-serif;
-}
-
-@theme {
-  /* Type roles: write text-display, text-h2, text-h3, text-lead, text-body, text-small. Never text-xl or text-5xl. */
-  --text-display: clamp(2.875rem, 1.2rem + 6.86vw, 8rem);
-  --text-display--line-height: 0.95;
-  --text-display--letter-spacing: -0.025em;
-  --text-h2: clamp(2.25rem, 1.3rem + 3.4vw, 4.75rem);
-  --text-h2--line-height: 1.04;
-  --text-h2--letter-spacing: -0.015em;
-  --text-h3: clamp(1.375rem, 1.15rem + 0.8vw, 1.875rem);
-  --text-h3--line-height: 1.2;
-  --text-lead: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
-  --text-lead--line-height: 1.5;
-  --text-body: 1.0625rem;
-  --text-body--line-height: 1.65;
-  --text-small: 0.875rem;
-  --text-small--line-height: 1.5;
-  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
-  --ease-in-out-quint: cubic-bezier(0.83, 0, 0.17, 1);
-}
-
-/* ==========================================================================
-   THE CONTRAST SCENE. Every site has one, at most two: wrap a section in scene-inverse (the
-   palette's dark ground with light type) or scene-field (a full-strength colour field). The tokens
-   are remapped inside, so every recipe in it turns with it.
-   ========================================================================== */
-.scene-inverse {
-  --surface-0: var(--inverse);
-  --surface-1: color-mix(in oklch, var(--inverse), var(--on-inverse) 6%);
-  --surface-2: color-mix(in oklch, var(--inverse), var(--on-inverse) 12%);
-  --surface-3: color-mix(in oklch, var(--inverse), var(--on-inverse) 22%);
-  --ink: var(--on-inverse);
-  --ink-muted: color-mix(in oklch, var(--on-inverse) 72%, var(--inverse));
-  --line: color-mix(in oklch, var(--on-inverse) 18%, transparent);
-  background-color: var(--surface-0);
-  color: var(--ink);
-}
-.scene-field {
-  --surface-0: var(--field);
-  --surface-1: color-mix(in oklch, var(--field), var(--on-field) 8%);
-  --surface-2: color-mix(in oklch, var(--field), var(--on-field) 14%);
-  --surface-3: color-mix(in oklch, var(--field), var(--on-field) 24%);
-  --ink: var(--on-field);
-  --ink-muted: color-mix(in oklch, var(--on-field) 78%, var(--field));
-  --line: color-mix(in oklch, var(--on-field) 22%, transparent);
-  --accent: var(--on-field);
-  --accent-ink: var(--field);
-  background-color: var(--surface-0);
-  color: var(--ink);
-}
-
-@layer base {
-  /* The hero opener's handover: the section after it slides up over the pinned opener. */
-  [data-showpiece="hero-opener"] + *,
-  .pin-spacer:has(> [data-showpiece="hero-opener"]) + * {
-    position: relative;
-    z-index: 2;
-    background-color: var(--surface-0);
-  }
-  /* The one scaling knob: 16px at 390, about 17.6px at 1440, 18px from about 1640. */
-  html {
-    font-size: clamp(1rem, 0.92rem + 0.2vw, 1.125rem);
-    background: var(--surface-0);
-    color: var(--ink);
-  }
-  body {
-    font-family: var(--font-body);
-    font-size: var(--text-body);
-    line-height: 1.65;
-    -webkit-font-smoothing: antialiased;
-    text-rendering: optimizeLegibility;
-  }
-  h1, h2, h3, .font-display {
-    font-family: var(--font-display);
-    font-weight: var(--display-weight);
-    text-wrap: balance;
-  }
-  p {
-    text-wrap: pretty;
-  }
-  ::selection {
-    background: var(--accent);
-    color: var(--accent-ink);
-  }
-  :focus-visible {
-    outline: 2px solid var(--accent);
-    outline-offset: 3px;
-  }
-}
-
-/* ==========================================================================
-   STRUQ MOTION GATE. Do not edit.
-   With JavaScript on (the `js` class the layout sets before paint) the animated elements start
-   hidden, so nothing flashes before its entrance. Each recipe marks itself data-ready the moment
-   it has set its own start state. If the scripts never run, the failsafe shows everything after
-   3s, so no region can stay empty.
-   ========================================================================== */
-.js [data-split]:not([data-ready]) {
-  visibility: hidden;
-  animation: struq-show 0s 3s forwards;
-}
-.js [data-reveal]:not([data-ready]) > * {
-  opacity: 0;
-  animation: struq-fade 0s 3s forwards;
-}
-@media (prefers-reduced-motion: no-preference) {
-  .js [data-frame="mask"]:not([data-ready]) {
-    clip-path: inset(100% 0 0 0);
-    animation: struq-open 0s 3s forwards;
-  }
-  .js [data-zoom-frame] {
-    clip-path: inset(22% 30% 22% 30%);
-  }
-}
-/* The cinematic showpieces start in their first key frame, so nothing flashes before it. */
-@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
-  .js [data-showpiece="image-to-fullbleed"] [data-frame] {
-    clip-path: inset(31% 40% 31% 40%);
-  }
-  .js [data-showpiece="pixel-resolve"] canvas {
-    opacity: 1;
-    background: var(--surface-2);
-    animation: struq-unveil 0s 4s forwards;
-  }
-}
-@keyframes struq-unveil { to { opacity: 0; visibility: hidden; } }
-@keyframes struq-show { to { visibility: visible; } }
-@keyframes struq-fade { to { opacity: 1; } }
-@keyframes struq-open { to { clip-path: inset(0 0 0 0); } }
-
-/* SplitText masks: room for descenders (g, j, p, y) inside each line's clip. */
-.struq-line-mask {
-  padding-block: 0.06em 0.16em;
-  margin-block: -0.06em -0.16em;
 }
 
-/* The custom cursor hides the native one only while it is active. */
-html.has-cursor,
-html.has-cursor * {
-  cursor: none;
+/* One fluid root-rem knob: author in rem, breakpoints change layout, never size. */
+html {
+  font-size: clamp(1rem, 0.92rem + 0.2vw, 1.125rem);
+}
+
+/* STRUQ TOKENS: palette graphite-ivory, type serif-editorial. Written by canon.mjs, the block Struq's lab and struq_richting give. */
+[data-blocks] {
+  --surface-0: #F3F0E8;
+  --surface-1: #E8E1D5;
+  --surface-2: oklch(0.8674 0.0168 81.33);
+  --surface-3: oklch(0.8101 0.0154 81.33);
+  --ink: #272826;
+  --ink-muted: color-mix(in oklab, var(--ink) 66%, var(--surface-0));
+  --accent: #995029;
+  --accent-ink: #F3F0E8;
+  --accent-2: #2B4A56;
+  --line: color-mix(in oklab, var(--ink) 13%, transparent);
+  --on-photo: #F3F0E8;
+  --photo-ground: #272826;
+  --inverse: #272826;
+  --on-inverse: #F3F0E8;
+  --field: #995029;
+  --on-field: #F3F0E8;
+  color-scheme: light;
+  --display-weight: 300;
+  --face-display: "Fraunces";
+  --face-body: "Urbanist";
+  --face-accent: "Fraunces";
 }

package/skills/struq/recipes/app/layout.tsx

@@ -1,11 +1,10 @@
-// app/layout.tsx (Struq recipe)
-// Replace SITE_TITLE and SITE_DESCRIPTION, and set lang to the site's language.
-// The inline script adds the `js` class before first paint: the motion gate in globals.css keys
-// off it, so animated elements never flash before their entrance and stay visible without JS.
+// app/layout.tsx (Struq recipe). Set the title, the description and lang.
+// The inline script puts `sq-js` on <html> before first paint: the kit's motion gate keys off it, so an animated
+// element never flashes before its entrance, shows anyway after 3 s, and a visitor without JavaScript sees the page.
+// data-blocks on <body> is the scope every block and the STRUQ TOKENS block read.
 import type { Metadata } from "next";
-import { Cursor } from "@/components/struq/Cursor";
-import { SmoothScroll } from "@/components/struq/SmoothScroll";
-import { fontVariables } from "./fonts";
+import { SmoothScroll } from "../components/struq/kit/SmoothScroll";
+import { fontHrefs } from "./fonts";
 import "./globals.css";
 
 export const metadata: Metadata = {
@@ -15,13 +14,16 @@ export const metadata: Metadata = {
 
 export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
   return (
-    <html lang="nl" className={fontVariables} suppressHydrationWarning>
+    <html lang="nl" suppressHydrationWarning>
       <head>
-        <script dangerouslySetInnerHTML={{ __html: "document.documentElement.classList.add('js')" }} />
+        <script dangerouslySetInnerHTML={{ __html: "document.documentElement.classList.add('sq-js')" }} />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="" />
+        {fontHrefs.map((href) => (
+          <link key={href} rel="stylesheet" href={href} />
+        ))}
       </head>
-      <body>
+      <body data-blocks="">
         <SmoothScroll>{children}</SmoothScroll>
-        <Cursor />
       </body>
     </html>
   );

package/skills/struq/references/craft.md

@@ -0,0 +1,77 @@
+# Craft: what makes the blocks feel high end
+
+The blocks already do all of this. Read it when you write the glue between blocks, adapt one, or build a section the
+catalogue does not have: your code has to hold the same bar or it shows as the seam.
+
+## Motion
+
+- **One clock.** Lenis runs on `gsap.ticker` (`kit/SmoothScroll.tsx`, mounted once in the layout); ScrollTrigger reads
+  it. No second `requestAnimationFrame` loop, no `anticipatePin` with smooth scroll. A menu or overlay calls
+  `getLenis()?.stop()` and `start()`.
+- **Clip from numbers.** A reveal is a clip on a layer already at its full size, never a scale of the box. Tween plain
+  numbers (top, right, bottom, left, radius) and write `clip-path: inset(...)` from them in `onUpdate`; never tween
+  one clip-path string into another, which GSAP interpolates through broken intermediate values.
+- **Whole pixels.** Round every computed translate, clip edge and fitted size to whole pixels (`Math.round`, or
+  `gsap.utils.snap(1)`), so type and hairlines never sit on half pixels and shimmer while they move.
+- **Decode before show.** `await img.decode()` (with a catch) before a photo is revealed, cut to or swapped in; a
+  sequence of photos starts only when all are decoded. A reveal over an undecoded image shows a blank frame.
+- **Scroll-tied and reversing.** A scroll effect scrubs (`scrub: true` or a short number) and runs backwards when the
+  visitor scrolls back: scrolling up re-sets the large wordmark, closes the print, lowers the line. A one-way
+  entrance on scroll reads as a template. Entrances on load play once.
+- **Hold on the key frames.** A pinned stretch spends part of its length still on each composed frame. One idea per
+  screen, long eases (`expo.out` in, `power4.inOut` for curtains), nothing bounces.
+- **Every entrance moves and fades,** never opacity alone. Lines rise through masks (`SplitText` with `mask: "lines"`,
+  the `.struq-line-mask` padding keeps descenders).
+- **One handover signal.** Preloaders and page transitions close a cover (`data-curtain="closed"` on `<html>`) and fire
+  `curtain:lift` when it opens; a hero runs its entrance through `whenUncovered` from
+  `preloaders/preloader-slices-uncovered.ts`, so the same entrance serves the first load and every navigation.
+
+## The gate
+
+- `<html class="sq-js">` is set by an inline script before first paint (the layout recipe). The kit's CSS hides only
+  under `.sq-js`: `[data-split]`, `[data-reveal]` children and `[data-frame="mask"]` wait for `data-ready`, and a CSS
+  animation shows them anyway after 3 s. A visitor without JavaScript, or a script that throws, still gets the page.
+- Never hide content with an inline `opacity: 0` or a class your script removes. Use the gate attributes, or your own
+  rule under `.sq-js` with the same 3 s fallback.
+- Under `prefers-reduced-motion` every block lands on a composed still: the final frame, no pin, no scrub. Phones get
+  the same still where a pin would fight the thumb.
+
+## Photos and type on photos
+
+- **The calm side is measured.** `kit/photo-read.ts` reads the photo's luminance under the type's box; the heroes put
+  the headline on the side that needs the weaker veil. The beeldbank's `negativeSpace` sets the first paint and
+  breaks a tie; pass `side` only when you know better.
+- **A light veil.** Type over a photo gets the weakest flat veil that gives the headline 3:1 and a running line 4.5:1,
+  measured from that photo, capped at about a quarter. Never a gradient scrim, never a dark band by habit.
+  `--photo-ground` is the palette's own dark ground for a bar or band laid over a photo.
+- **Never an empty frame.** Every image slot holds a real photo from `lib/struq-images.ts` or the client. A photo shows
+  the world around the client, never their own room, team or product unless it is theirs; captions come from the alt.
+
+## Type
+
+- **Light display weights.** The display face runs at the pairing's weight (`--display-weight`, 300 for most, 400 where
+  the face starts at 400, 700 or 800 only for the poster pairings). Never `font-bold` on a heading; hierarchy comes
+  from scale: `text-display`, `text-h2`, `text-h3`, `text-lead`, `text-body`, `text-small`.
+- **Real faces, measured.** A line fitted to the width (a wordmark, a poster line) is measured after
+  `document.fonts.ready` with the loaded face, and refitted on `loadingdone`. Never fit with the fallback face, and
+  never ask Google for a weight the family does not ship: `canon.mjs type` requests each face's real range.
+- **Word spacing at poster size:** 0.06 to 0.1em on display lines, so tight tracking never runs two words into one.
+- One italic accent face at most, on one word of the page.
+- One fluid root-rem knob (`html { font-size: clamp(...) }` in globals.css): author in rem; breakpoints change the
+  layout, never the size.
+
+## Colour and surface
+
+- Tokens only: `--surface-0` to `--surface-3`, `--ink`, `--ink-muted`, `--accent`, `--accent-ink`, `--line`,
+  `--on-photo`, `--photo-ground`, `--inverse`, `--on-inverse`, `--field`, `--on-field`. The surface steps hold the
+  ground's hue; mixes are `in oklab`, never `in oklch` (an oklch mix walks round the hue wheel and turns cream lilac).
+- **One contrast scene,** at most two: wrap a section in `scene-inverse` (the palette's dark ground, light type) or
+  `scene-field` (the accent at full strength); every block inside follows the turned tokens.
+- Elevation is a surface step plus a hairline, never a shadow. Radius 0 to 4px. Flat fills, no gradients, no glass.
+
+## Composition
+
+- The display type is the composition, not a heading above it: 12 to 20vw on the poster lines, small body beside it.
+- Vary the sections: after a split comes a full-bleed band or hairline rows, never three equal cards. Section padding
+  varies by role; one section should feel too empty by template standards.
+- Never two pinned pieces back to back: a plain section breathes between them.