@palate/cli 0.0.0-stage → 0.0.2

package/kb/sections/editorial-columns-hero.md

@@ -0,0 +1,107 @@
+---
+id: editorial-columns-hero
+name: Editorial opening in asymmetric columns
+kind: hero
+shape: editorial-columns
+layout: "a magazine opening: a top rule with a folio line; headline spanning cols 1–7 at 64–96px; a narrow standfirst column (cols 9–12) of short facts set like a byline; one image or product object offset in cols 5–12 below, overlapping the headline's baseline"
+fits: [editorial, publishing, media, crafted, cultural, heritage, education, portfolio, agency, calm, artsy, premium]
+avoid: [data-dense-tool, kids, playful-kids, gaming, low-bandwidth]
+needs: ["a headline and a 2–3 sentence standfirst with real substance", "3–4 short true facts (who it is for, when, where, how much)", "one strong image or product object with a caption"]
+imagery: any
+density: balanced
+effort: m
+moves: [editorial-grid-pull-quotes, editorial-drop-cap, duotone-photography, colophon]
+---
+
+## When it's right
+
+The brand earns trust through writing and judgement: a publication, a course, a studio, a research product, a crafted tool for readers and writers. The page should open like a well-made magazine spread: a rule and folio at the top, a headline that owns the left, a narrow column of plain facts set like a byline, and one image placed off the grid's centre so the composition has tension. Asymmetry and rules do the work that cards and gradients do on a template.
+
+Not for products that need the UI shown big and first (use `object-first-hero`) or brands whose voice is loud and playful. If there is no image or object worth placing, use `typographic-statement-hero`.
+
+## Structure
+
+```
+1440 ─ container 1240, 12 cols, gutter 24
+┌──────────────────────────────────────────────────────────────────────────────────────────┐
+│ nav ──────────────────────────────────────────────────────────────────── [Pri]          │
+│ ════════════════════════════════════════════════════════════════════════════════════════ │  ← 1px rule, full container
+│ Issue 04 · Autumn 2026                                         For people who write docs │  ← folio line, 13px, ink-3
+│                                                                                          │
+│ ┌ cols 1–7 ─────────────────────────────────┐        ┌ cols 9–12 ───────────────────┐   │
+│ │ H1 64–96px                                 │        │ standfirst 18–20px, 3–4 lines│   │
+│ │ three lines,                               │        │ ──────────────────────────── │   │  ← hairline between facts
+│ │ left, tight                                │        │ For      Technical writers   │   │
+│ │                                            │        │ Format   Six weekly letters  │   │
+│ └────────────────────────────────────────────┘        │ Price    Free                │   │
+│                                                        │ [Primary action]             │   │
+│              ┌ cols 5–12: image or object, 3:2 ──────────────────────────────────────┐ │
+│              │ starts 48px above the H1's last baseline (overlaps the column gap,     │ │
+│              │ never the type)                                                        │ │
+│              │                                                                        │ │
+│              └────────────────────────────────────────────────────────────────────────┘ │
+│              caption 13px, ink-3: what it shows, credit                                 │
+└──────────────────────────────────────────────────────────────────────────────────────────┘
+  hero height 900–1080; image top within 760px of the page top
+```
+
+```
+390 ─ one column, side padding 16
+┌──────────────────────────────┐
+│ nav            [Pri]  ☰      │
+│ ════════════════════════════ │
+│ Issue 04 · Autumn 2026       │
+│ H1 40–44px, 3–4 lines        │
+│ standfirst 17px              │
+│ For      Technical writers   │  ← facts as label/value rows with hairlines
+│ Format   Six weekly letters  │
+│ [Primary action, full width] │
+│ image, 4:5 crop, full bleed  │
+│ caption                      │
+└──────────────────────────────┘
+```
+
+At 390 the order is folio, headline, standfirst, facts, action, image. The image becomes full-bleed (edge to edge, no gutter) at 4:5 so it keeps weight; its caption returns to the gutter. The facts stay as two-column label/value rows; nothing scrolls sideways.
+
+## Finish
+
+- Rules: one 1px rule in `--hairline-strong` across the full container at the top (the only top edge; no card edges anywhere), folio line `--s-3` under it in `--t-caption`, `--ink-3`, the left and right items on the container edges. Facts separated by `--hairline`.
+- H1: display face, `--t-display` (64–96px), tracking −0.03em, leading 0.98, `text-wrap: balance`, cols 1–7. If the face is a serif, use its display optical size.
+- Standfirst: `--t-lead` (18–20px), leading 1.45, `--ink`, `text-wrap: pretty`, cols 9–12, top-aligned to the H1's cap height. Col 8 stays empty: the gutter of air is part of the composition.
+- Facts: label in `--t-small`, `--ink-3`, value in `--t-small`, `--ink`; rows 36–40px with hairlines; tabular figures for prices and dates (`_finish.md` numbers).
+- Image: cols 5–12, aspect 3:2, radius 0 or `--r-sm` (editorial images are rarely rounded; pick one rule for the page), one treatment (`_finish.md`), caption `--s-3` below in `--t-caption`. Its top sits 48px above the H1's last baseline, so it slides under the column gap. If it's a product object, use the product frame from `_finish.md` instead.
+- Ground: `--paper`, optionally with paper fibre (`_finish.md`) at its faintest. The page's primary action (`.btn-primary`) inside the facts column, full column width only at 390 if it is a boxed button.
+
+## Content
+
+- Folio: a real, useful line (issue, edition, date, audience). Not a fake "Vol. 1" if there is no series.
+- H1: a headline with a subject and a verb; editorial does not mean vague.
+- Standfirst: two or three sentences that tell the reader exactly what they get.
+- Facts: three or four plain label/value pairs that answer the questions a reader asks first. All true, from the project.
+- Image: made by the project, licensed, or public domain; captioned with what it shows and a credit.
+
+## States and motion
+
+- Static. The page's motion budget goes elsewhere.
+- Optional: the top rule draws from left to right over 600ms on load (transform: scaleX, origin left); content is visible regardless. Off under reduced motion.
+- Links in the standfirst underline with `text-underline-offset: .2em`; focus rings on every link and the button.
+- Long translated headlines push the image down, never under the type.
+
+## Pitfalls
+
+- Turning it into a symmetric two-column split: the tension comes from the 7 / gap / 4 asymmetry and the offset image.
+- Image overlapping the headline text itself instead of the column gap.
+- Uppercase tracked kicker plus mono numbers for "editorial feel" (M16, M18): one folio line is enough.
+- Rounded cards for the facts (M23): they are rows with hairlines.
+- A stock image chosen for mood (M47).
+- Two rules stacked against a band change (M28).
+
+## Floor checks
+
+- Is the headline in a wide left column with a clearly narrower column of standfirst and facts beside it (not two equal halves)?
+- Is there a full-width rule with a folio line above the headline?
+- Is the image or object placed off-centre, offset from the headline column, and large (at least half the container width)?
+- Do the facts read as label and value rows separated by thin rules rather than cards?
+- Does the image have a caption or credit?
+- Is there one primary action, near the facts?
+- At 390, does the content read in the order headline, standfirst, facts, button, image, with no sideways scroll?

package/kb/sections/editorial-essay-pull-quote.md

@@ -0,0 +1,112 @@
+---
+id: editorial-essay-pull-quote
+name: Editorial essay block with a pull quote
+kind: story
+shape: editorial-columns
+layout: "a short essay (250–500 words) in one 62ch reading column set off-centre (cols 4–9), a pull quote breaking out into the margin at display size (cols 1–4 or 8–12), a margin column of notes or one small figure; rule on top, byline line"
+fits: [editorial, crafted, publishing, heritage, cultural, honest, calm, quiet, premium, nonprofit, education, sustainability, agency, media, serious]
+avoid: [playful-kids, gaming, data-dense-tool, low-bandwidth, launch, waitlist]
+needs: ["250–500 words of real, specific writing from the founder or team (why it exists, how it is made, what it refuses to do)", "a byline: who wrote it", "one sentence in it strong enough to be the pull quote"]
+imagery: type
+density: airy
+effort: s
+moves: [editorial-grid-pull-quotes, editorial-drop-cap, story-led-long-scroll, colophon]
+---
+
+## When it's right
+
+The product has a point of view that a feature list can't carry: why it was made, the craft behind it, the trade-off it chose on purpose. A short essay, signed, set like a magazine page, makes the page feel authored instead of generated, and it is the single best antidote to template rhythm: no cards, no icons, just good type doing work.
+
+Use it once, in the middle or late part of the page, after the product has been shown (people read the why once they have seen the what). Not for products with nothing to say beyond features, not when the words would be marketing copy pretending to be an essay, and not as the first section after the hero.
+
+## Structure
+
+```
+1440 ─ container 1240, 12 cols; reading column cols 4–9 (≈ 62ch at 18px)
+┌──────────────────────────────────────────────────────────────────────────────────────────┐
+│ ─────────────────────────────────────────────────────────────────────────────────────── │ ← 1px rule, full container width
+│ cols 1–3                     cols 4–9                                    cols 10–12      │
+│ "Why we built it"            H2, 2 lines, h2 size, balance               margin notes:  │
+│ small, ink-2                                                             small, ink-2,   │
+│                              Byline · Role · Date (small, ink-2)         aligned to the  │
+│                                                                          paragraph they  │
+│                              ▉rop cap paragraph, 18px/1.6, 62ch          annotate        │
+│                              paragraph …                                 ¹ a fact, link  │
+│                              paragraph …                                                 │
+│ ┌ pull quote, cols 1–4 ──────┐                                                           │
+│ │ “A sentence from the       │ paragraph continues beside it …                           │
+│ │  essay, display 36–48px,   │ (the quote breaks into the left margin and the text       │
+│ │  hung punctuation.”        │  column narrows to cols 6–9 only for those lines)         │
+│ └────────────────────────────┘                                                           │
+│                              paragraph …                             ┌ figure ────┐     │
+│                              paragraph …                             │ small fig, │     │
+│                              — signature line                        │ caption    │     │
+│                                                                      └────────────┘     │
+└──────────────────────────────────────────────────────────────────────────────────────────┘
+```
+
+```
+390 ─ one column, 20 side padding
+┌──────────────────────────────┐
+│ ──────────────────────────── │
+│ Why we built it (small)      │
+│ H2, 3 lines                  │
+│ Byline · Role · Date         │
+│ ▉rop cap paragraph 17px/1.6  │
+│ paragraph                    │
+│ “Pull quote, 28–32px,        │
+│  full width, hung quote.”    │
+│ paragraph                    │
+│ ¹ note (inline after its     │
+│   paragraph, small, ink-2)   │
+│ — signature                  │
+└──────────────────────────────┘
+```
+
+At 390 it is one reading column. Margin notes move inline directly after the paragraph they annotate (small, `--ink-2`, with their superscript). The pull quote goes full width between paragraphs at 28–32px. The essay should be no more than about 3 phone screens; if it is longer, cut it.
+
+## Finish
+
+- The top rule: 1px `--hairline-strong` across the full container, the section starts `--s-6` below it. The rule is the section's only ornament. No card, no background panel.
+- Kicker in the left margin (cols 1–3) in `--t-small`, `--ink-2`, sentence case, body face, top-aligned with the H2's cap height. Use it only if no other section on the page has a kicker (M16).
+- H2: `--t-h2`, display face, tracking −0.015em, `text-wrap: balance`, max 2 lines at 1440. Byline under it in `--t-small`, `--ink-2`, `--s-4` gap, then `--s-6` to the first paragraph.
+- Body: 18px (or 17) / 1.6, `max-width: 62ch`, `text-wrap: pretty`, oldstyle figures (`font-variant-numeric: oldstyle-nums proportional-nums`) if the text face has them; paragraph spacing 0.9em (or first-line indents of 1.5em with no spacing, the bookish choice: pick one).
+- Drop cap (move `editorial-drop-cap`): `initial-letter: 3` where supported, with a float fallback 3 lines tall in the display face; only on the first paragraph.
+- Pull quote: display face, 36–48px (`--t-h2` to just above it), leading 1.1, tracking −0.02em, `--ink`. Opening quote hangs outside the text edge (`hanging-punctuation`, `.hang` fallback in `_finish.md`). It breaks into the margin: `float: left; width: calc(4 * col + 3 * gutter); margin-left: calc(-3 * (col + gutter)); shape-outside: margin-box; margin-block: var(--s-6);` or a grid row where the quote spans cols 1–4 and the text spans 6–9. The quote must repeat a sentence that is in the essay (that is what a pull quote is).
+- Margin notes: `--t-small`/1.45, `--ink-2`, max 26ch, aligned to the top of the paragraph they belong to (grid rows per paragraph, or `position: absolute` within the paragraph's row). Superscript markers in the text are links that jump to the note.
+- Figure (optional, one): a small photograph, drawing or product fragment in cols 10–12 with a caption in `--t-caption`. Treatment per `_finish.md`.
+- Ground: the essay reads best on the page ground or a `--paper-2` band, with paper texture allowed only in the margins (never under body text). Generous: `--section` above and below.
+
+## Content
+
+- Written by a person, signed by a person (name, role, date). 250–500 words. Specific: names, places, numbers, a decision and what it cost. One idea, argued.
+- The H2 states the essay's point, not "Our story".
+- The pull quote is the essay's sharpest sentence, repeated verbatim, under 25 words.
+- Margin notes carry facts and sources (a date, a link to the changelog, a measured figure), not jokes.
+- Never AI-written filler about "passion" and "innovation". If the project has no real essay, do not invent one: use `ruled-facts-table` or skip the section and say so in the brief.
+
+## States and motion
+
+- Static. Type is the whole show; no reveal animations on paragraphs.
+- Links in the essay: underlined (1px, `text-underline-offset: .2em`), colour shift on hover, visible focus ring.
+- Margin note markers: on hover or focus, the matching note gets `--ink` instead of `--ink-2` (a quiet link between them).
+- Long translations: the reading column holds its width; the essay simply gets longer. The pull quote may wrap to 5 lines; above that, step it down one size.
+
+## Pitfalls
+
+- An essay that is really a sales pitch in long form. If it reads like an ad, it does more harm than a feature list.
+- Body text centred, or wider than 75 characters (P17, M06).
+- A pull quote that is not in the text, or one with a decorative giant quotation mark graphic instead of hung punctuation.
+- Putting it in a card with a shadow: an essay is not a widget.
+- Kickers and drop caps everywhere on the page; this section can have them because the others don't.
+- Margin notes floating at random heights, not aligned to their paragraphs.
+
+## Floor checks
+
+- Is the body text set in a single reading column of comfortable width (roughly 55–75 characters per line), left-aligned?
+- Is there a pull quote set noticeably larger than the body that breaks out of the reading column?
+- Is the essay attributed to a named person with a role or date?
+- Does the writing read as specific (names, numbers, a real decision) rather than generic marketing prose?
+- Is the section free of cards, icon chips and shadows, with type and at most one rule carrying the design?
+- Are margin notes or the figure aligned to the paragraph they belong to rather than floating loose?
+- At 390, is the essay a single readable column with the pull quote full width and no sideways scroll?

package/kb/sections/events-calendar-list.md

@@ -0,0 +1,107 @@
+---
+id: events-calendar-list
+name: What's on, as a ruled list of dates
+kind: features
+shape: list-ruled
+layout: "upcoming events as a ruled list grouped under month headings: a date set in type on the left (day and weekday), then title, place and time, then price or free and how to come (book, or just turn up); an add-to-calendar link per row"
+fits: [events, community, nonprofit, education, local, cultural, friendly]
+avoid: [saas, developer, b2b, luxury]
+needs: ["3–12 upcoming dated events with times and places", "for each: price or free, and whether to book or just turn up", "places left only where the number is real and kept up to date"]
+imagery: none
+density: balanced
+effort: s
+---
+
+## When it's right
+
+The place has things you can come to: a monthly Fix-It Saturday repair café, Mend Night with tea and biscuits, a Saturday bookbinding class with 2 seats left, an end-of-term showcase where families vote for Best Game, an open studio on the first Friday. Visitors want the next date, the time, the place and whether they need to book. A ruled list under month headings, like a parish notice or a venue's printed programme, answers that in a glance and scales from three events to twelve.
+
+Not for a single flagship event (put it in the hero or a `full-bleed-image-band`), not for a festival with a programme grid of stages (use a timetable), and not when the dates aren't fixed yet (say “dates for spring are announced in January” and offer a mailing list).
+
+## Structure
+
+```
+1440 ─ container 1240; date col 2, details cols 3–9, price/how cols 10–12
+┌──────────────────────────────────────────────────────────────────────────────────────────┐
+│ H2 "What's on"                                         All events by email →            │
+│                                                                                          │
+│ NOVEMBER                                                                                 │
+│ ──────────────────────────────────────────────────────────────────────────────────────── │
+│  7     Fix-It Saturday                                       Free                       │
+│  Sat   Repair café: bring a broken lamp, toaster or bike.    Just turn up               │
+│        Open Shelf, 2810 E Lake St · 10 am–1 pm               Add to calendar            │
+│ ──────────────────────────────────────────────────────────────────────────────────────── │
+│ 14     Intro to Coptic Binding                               £95, all materials         │
+│  Sat   Bind your own book from scratch. Max 6 people.        2 places left · Book →     │
+│        Bramble Bindery, Bristol · 10 am–4 pm                                             │
+│ ──────────────────────────────────────────────────────────────────────────────────────── │
+│ DECEMBER                                                                                 │
+│ ──────────────────────────────────────────────────────────────────────────────────────── │
+│  5     Fix-It Saturday …                                                                │
+└──────────────────────────────────────────────────────────────────────────────────────────┘
+  rows 88–112px; month heads --s-7 above; the date's numeral --t-h2, weekday --t-small
+```
+
+```
+390 ─ date stays at the left, details beside it
+┌──────────────────────────────┐
+│ H2 "What's on"               │
+│ NOVEMBER                     │
+│ ──────────────────────────── │
+│  7   Fix-It Saturday         │
+│ Sat  10 am–1 pm · Lake St    │
+│      Free · just turn up     │
+│      Add to calendar         │
+│ ──────────────────────────── │
+│ 14   Coptic Binding          │
+│ Sat  £95 · 2 places left     │
+│      Book →                  │
+│ ──────────────────────────── │
+│ All events by email →        │
+└──────────────────────────────┘
+```
+
+At 390 the date column stays (48px wide) and everything else stacks beside it: title, time and place on one line, price and how to come on the next, links last. Show the next 4–6 events, then a link to the full list.
+
+## Finish
+
+- Date: the day numeral in the display face at `--t-h2`, `tabular-nums`, weight to suit the face; the weekday under it in `--t-small` caps, +0.06em, `--ink-2`. No calendar-page icon with a coloured header bar.
+- Title `--t-body` weight 600 (or `--t-lead` if the list is short); one-line description `--t-body` `--ink-2`; place and time `--t-small` `--ink-2`, separated by a middle dot.
+- Right column: price or “Free” in `--t-body` weight 600; how to come in `--t-small` (“Just turn up”, “Book →”); “Add to calendar” as a text link (an .ics download), in `--t-small`.
+- Month headings: `--t-small` caps, +0.08em, weight 600, with a `--hairline-strong` rule under; rows separated by `--hairline` (`_finish.md`).
+- Places left in words in the right column, `--ink`, only when real; no red badge.
+- Each row is not a card: no surface, no shadow, no radius. Hover at 1440: the title underlines if the row links to a detail page.
+
+## Content
+
+- Real dates, times and places; past events removed automatically (filter by date at build or request time).
+- How to come, always: book, buy, sign up, or just turn up. Price or free, always.
+- Accessibility facts where they matter (step-free, quiet session, bring your own laptop).
+- Recurring events listed by their next dates, with the pattern said once (“first Saturday of every month”).
+- One action at the top or bottom for following along: “All events by email” or the full calendar page.
+
+## States and motion
+
+- Static. No entrance animation.
+- No upcoming events: one sentence and a way to hear about the next ones (“Nothing booked for December yet. Get the next dates by email.”), never an empty band (P38).
+- Sold out: “Full · join the waiting list →” in words, the row kept.
+- Add-to-calendar works without JS (a static .ics link per event).
+
+## Pitfalls
+
+- A month-grid calendar widget with dots on days: hard to read, useless on phone.
+- Event cards with coloured category pills (“Workshop”, “Free”, “Family”) and stock images.
+- Fake urgency: “Only 2 left!” when the number isn't live.
+- Past events still listed at the top.
+- Missing price, time or how to come.
+- A date that's an icon instead of type.
+
+## Floor checks
+
+- Is every event a row in one ruled list, grouped under month headings, rather than a grid of cards or a month calendar?
+- Does each event show its date in type, title, time, place and price or “free”?
+- Does each event say how to come (book, or just turn up)?
+- Is the section free of coloured category pills, badges and calendar-page icons?
+- Are only upcoming events shown, in date order?
+- Is there a way to add an event to a calendar or follow future dates?
+- At 390, does the date stay beside each event with the details readable and nothing scrolling sideways?

package/kb/sections/explorable-control-demo.md

@@ -0,0 +1,102 @@
+---
+id: explorable-control-demo
+name: One control, the product's real response
+kind: demo
+shape: split
+layout: "left 5/12: a sentence with one live control inside or under it and the result restated in words; right 7/12: the product's real output recomputing as the control moves, in a product frame"
+fits: [developer, technical, scientific, data-rich, education, finance, ai, honest, saas, productivity]
+avoid: [luxury, fashion, minimal, crisis, kids, food, portfolio]
+needs: ["one input that changes the product's output visibly (size, setting, mode, amount)", "the real function from input to output, or a defensible model of it", "a default value that tells the story"]
+imagery: product-ui
+density: balanced
+effort: m
+moves: [explorable-control, before-after-slider, inline-sparklines-in-copy, code-drawn-diagram]
+---
+
+## When it's right
+
+The product's value is a relationship: more of X, less of Y; turn this on, that disappears; change the setting, the output reshapes. Rather than describe it, hand the visitor the one control and let them watch the product respond beside it. The visitor discovers the claim, which makes it believable (move `explorable-control`).
+
+Pick this when the page needs a demo but a scripted run would be too long or too vague, and the product's behaviour can be computed in the browser (a layout engine, a formatter, a pricing model, a compression setting, a model's confidence threshold). It sits well after `split-hero-live-object` only if the hero's object is a different screen; after `object-first-hero` or `typographic-statement-hero` it is an easy fit.
+
+Not for brands sold on mood, outputs that barely change across the range, or numbers you cannot defend.
+
+## Structure
+
+```
+1440 ─ container 1240, 12 cols; words cols 1–5, output cols 6–12
+┌──────────────────────────────────────────────────────────────────────────────────────┐
+│                                                                                      │
+│ H2 h2, 2 lines max                   ┌ product frame: the real output ─────────────┐ │
+│ "See what a stricter threshold       │                                              │ │
+│  does to your inbox"                 │  rows recomputed for the current value:      │ │
+│                                      │  ██████████  kept                            │ │
+│ With a threshold of [ 0.72 ⟷ ]       │  ██████      kept                            │ │
+│ ───────────●──────────── range       │  ░░░░░░░░    filtered (fades, collapses)     │ │
+│ 0.50                   0.95          │  ██████████  kept                            │ │
+│                                      │                                              │ │
+│ 31 of 120 messages filtered.         │  a big result number in the frame's footer:  │ │
+│ That's about 25 minutes a day.       │  31 filtered · 89 kept                       │ │
+│ (aria-live sentence, lead size)      └──────────────────────────────────────────────┘ │
+│                                                                                      │
+│ assumption footnote, caption size: "Based on a sample of 120 real messages; …"       │
+└──────────────────────────────────────────────────────────────────────────────────────┘
+```
+
+```
+390 ─ one column, side padding 16
+┌──────────────────────────────┐
+│ H2                           │
+│ With a threshold of 0.72     │
+│ ─────●────────── range 44px  │  ← control first, full width, thumb 28px
+│ ┌ output frame, 4:5 ───────┐ │  ← output right under the control so both
+│ │ rows recomputed          │ │    stay on screen while dragging
+│ └──────────────────────────┘ │
+│ result sentence              │
+│ footnote                     │
+└──────────────────────────────┘
+```
+
+At 390 the control sits directly above the output so the thumb and the response are on screen together (the combined height of control + output ≤ 600px); the result sentence moves under the output. Nothing scrolls sideways; the frame crops to the part that changes.
+
+## Finish
+
+- Control: a native `<input type="range">` (or a select / switch when the variable is discrete), restyled: track 4px, `--hairline-strong`, filled part `--ink`; thumb 20px circle on `--surface` with `--shadow-1` and a 1px ring; focus ring per `_finish.md`. The value printed beside it in tabular figures, body face, `--t-lead`, with its unit. An inline draggable number in the sentence is allowed if it is still a real input underneath.
+- Sentence: `--t-lead`, `--ink`, the result clause in weight 600. It updates on `change` in an `aria-live="polite"` region; the visible text can update on `input`.
+- Output: the product frame from `_finish.md` (`--r-lg`, `--shadow-2`). The product's own UI, recomputed from the value. Rows that leave collapse (height and opacity, 180ms ease-out); bars rescale on `transform`; numbers update instantly (no tweening on drag).
+- One big number in the frame's footer row or above it: `--t-h2`, tabular, with its unit in `--t-small`, `--ink-2`.
+- Words column top-aligned with the frame; `--s-5` between H2 and sentence, `--s-4` between sentence and control. Footnote `--t-caption`, `--ink-3`, `--s-6` under everything, spanning both columns.
+- Ground: `--paper`; the frame is the only raised surface.
+
+## Content
+
+- The sentence: "As ___ goes up, ___ goes down" written for this product, with the control in the first blank and the output in the second.
+- Bounds and default: the default tells the story (not the extreme); both ends labelled with their values. The range never produces NaN, negatives, empty states that look broken, or overflow.
+- The output is the product's real behaviour on a believable sample from the project; the model behind it is written in a code comment and summarised in the footnote with its source.
+- Result sentence restates the outcome in human units ("about 25 minutes a day").
+
+## States and motion
+
+- Server and no-JS: the default value's output, number and sentence rendered; the control disabled or hidden. The section still makes its point.
+- Reduced motion: values and rows snap; no transitions.
+- Keyboard: arrows step the value; Page Up/Down jump by 10%; the live sentence is announced on release.
+- Extremes: minimum and maximum both render cleanly (check with `palate states`); an empty output shows an honest line ("Nothing filtered at 0.50: everything stays").
+
+## Pitfalls
+
+- Several sliders: it turns into a calculator nobody plays with. One control, two at most.
+- An output that barely moves across the range: it proves the opposite of the claim.
+- Fake maths: a slider over invented numbers is worse than no slider (M10 spirit). Show the assumption.
+- Counters tweened on every input event, lagging behind the thumb.
+- Control and output far apart at 390, so dragging hides the response.
+- A styled `<div>` slider with no keyboard support.
+
+## Floor checks
+
+- Is there exactly one visible control (two at most) with its current value printed next to it?
+- Does the product's output sit right beside (desktop) or right under (phone) the control, large enough to read?
+- Is the result also stated in a sentence in words, not only shown in the drawing?
+- Is there a visible footnote stating the assumption or data behind the output?
+- Does the default screenshot show a meaningful result rather than an empty or extreme state?
+- Is the output shown as real product UI in a frame without fake browser chrome?
+- At 390, are the control and the output both visible in one screen?

package/kb/sections/faq-open-answers-editorial.md

@@ -0,0 +1,85 @@
+---
+id: faq-open-answers-editorial
+name: The real worries, answered in the open
+kind: faq
+shape: editorial-columns
+layout: "three to six questions set as short editorial entries in two columns, every answer visible, each backed by a piece of evidence (a link, a crop, a number)"
+fits: [crafted, editorial, honest, trustworthy, calm, premium, saas, health, finance, nonprofit, sustainability, publishing, quiet]
+avoid: [data-dense-tool, playful-kids, gaming]
+needs: ["3–6 real objections that stop people from buying or signing up", "an answer of 40–90 words for each", "one piece of evidence per answer where possible"]
+imagery: none
+density: balanced
+moves: [screenshot-detail-crops]
+effort: s
+---
+
+## When it's right
+
+A few serious worries decide the sale (where is my data, can I leave, what happens if you shut down, is this safe for my child). Hiding them behind accordions makes them look small and makes the visitor click to be reassured. Setting them in the open, like a short editorial piece, says "we've thought about this". Each answer carries evidence (a link to the policy, a crop of the export screen, a real number). Not for long lists of small questions (use `faq-ruled-accordion-aside`).
+
+## Structure
+
+```
+1440 ─ container 1200, two text columns of 5 cols each, gutter col between
+┌──────────────────────────────────────────────────────────────────────────┐
+│ H2 "Before you decide"                                                   │
+│ ─────────────────────────────────────────────────────────────────────── │
+│ Can I take my work with me?          │ What if you shut down?            │
+│ Yes, any time. Every project exports │ Your files are plain Markdown on  │
+│ to plain files in one click; no      │ your own disk; the app reads them │
+│ account needed to open them.         │ but never owns them. We've also   │
+│ [ crop of the export menu ]          │ committed to a 12-month notice.   │
+│ How export works →                   │ Our continuity pledge →           │
+│ ─────────────────────────────────────┼────────────────────────────────── │
+│ Who can see my notes?                │ Is there a free trial?            │
+│ Only you, unless you share a link…   │ …                                 │
+│ Security overview →                  │                                   │
+└──────────────────────────────────────────────────────────────────────────┘
+```
+
+```
+390 ─ one column
+H2
+entry, entry, entry … separated by hairlines
+evidence crops full width
+```
+
+At 390, one column in the same order (most important worry first). Evidence crops go full content width.
+
+## Finish
+
+- Two columns at 1440 with a vertical hairline between them (`_finish.md` hairlines) and horizontal hairlines between rows of entries; entries in a row share their top line (P04).
+- Question: h3 size, weight 600, `text-wrap: balance`. Answer: body size, primary colour, max 60ch, 12px under the question, `text-wrap: pretty`.
+- The answer's first words are the answer ("Yes, any time.") set in weight 600, the rest regular: a reader skimming gets the answer from the bold lead alone.
+- Evidence: either a product crop built in HTML (`--r-sm`, hairline outline, max 200px tall; see `screenshot-detail-crops`), a number with its source in small secondary type, or a link with an arrow. Links styled as links (underline offset 3px), not buttons.
+- Entry padding 32px top and bottom at 1440; 24 at 390.
+- No icons beside questions. No accordion chrome.
+
+## Content
+
+- Pick the worries from real lost deals, support tickets, reviews and search queries; name them the way customers do.
+- Answer directly, then the reason, then the evidence. Avoid "we take X very seriously".
+- Evidence must exist: the policy page, the export feature, the number. If it doesn't exist, the honest answer says so ("Not yet; it's planned for spring").
+- 3–6 entries. More than that, use the accordion.
+
+## States and motion
+
+- Static. No reveal animation; these must be readable at once.
+- Links have hover and focus states; product crops are `aria-hidden` if the answer already says what they show, otherwise they have alt text.
+- Anchors on each entry so sales can link straight to "What if you shut down?".
+
+## Pitfalls
+
+- Long answers that turn into essays: 90 words is the ceiling.
+- Marketing questions dressed as worries.
+- Evidence links that go to the homepage.
+- Centred text in two columns.
+
+## Floor checks
+
+- Is every answer visible without clicking?
+- Does each answer begin with a direct answer that stands out (e.g. bold lead words)?
+- Do most answers carry a concrete piece of evidence (a link, a product crop or a sourced number)?
+- Are entries in the same row aligned at the top, with hairlines dividing rows?
+- Are there six questions or fewer, each about a real worry rather than a sales point?
+- Is body text left-aligned with readable line lengths?

package/kb/sections/faq-ruled-accordion-aside.md

@@ -0,0 +1,87 @@
+---
+id: faq-ruled-accordion-aside
+name: Ruled accordion with a human aside
+kind: faq
+shape: list-ruled
+layout: "heading and a way to reach a real person in a sticky left column; the questions as a ruled accordion on the right, grouped when there are more than eight"
+fits: [saas, b2b, developer, consumer, trustworthy, honest, calm, friendly, education, health, finance, ecommerce]
+avoid: [cinematic, experimental]
+needs: ["6–14 real questions buyers ask (from sales, support, search)", "short, direct answers", "a real way to ask more (email, chat, call) with who answers"]
+imagery: none
+density: balanced
+effort: s
+---
+
+## When it's right
+
+The default FAQ for most products: many questions, short answers, people scan for theirs. The accordion keeps the list scannable; the left column makes sure an unanswered visitor has a person to ask, not a dead end. Use it when answers are short and independent. Not when there are only three or four big worries that deserve full answers in view (use `faq-open-answers-editorial`).
+
+## Structure
+
+```
+1440 ─ container 1200
+┌──────────────────────────────────────────────────────────────────────────┐
+│ ┌ cols 1–4 (sticky) ─────┐  ┌ cols 6–12 ──────────────────────────────┐ │
+│ │ H2 "Questions"         │  │ Billing                                 │ │  ← group label, only if >8 Qs
+│ │                        │  │ ─────────────────────────────────────── │ │
+│ │ Didn't find yours?     │  │ Can I change plans later?            +  │ │
+│ │ ┌──┐ Priya answers     │  │ ─────────────────────────────────────── │ │
+│ │ └──┘ within a day      │  │ Do you charge for inactive seats?    −  │ │
+│ │ priya@acme.com         │  │   No. A seat is billed only in months   │ │  ← open answer, body, 65ch
+│ │                        │  │   it signs in. See billing docs →       │ │
+│ │                        │  │ ─────────────────────────────────────── │ │
+│ │                        │  │ Data                                    │ │
+│ │                        │  │ Where is my data stored?             +  │ │
+│ └────────────────────────┘  └─────────────────────────────────────────┘ │
+└──────────────────────────────────────────────────────────────────────────┘
+```
+
+```
+390 ─ one column
+H2
+accordion (full width)
+"Didn't find yours?" block with person and contact, after the list
+```
+
+At 390 the aside moves below the list (the visitor reaches it after scanning). Rows stay 56px minimum for touch.
+
+## Finish
+
+- Left column `position: sticky; top: 96px` at 1440 so the contact stays in view while the list scrolls; column 5 is the gutter.
+- Rows: question in lead size (`--t-lead`) (18px) weight 500, row height ≥ 56px, full-row button (`<button aria-expanded>` inside an `<h3>`, or `<details>/<summary>`). Hairlines between rows in `--hairline` (`_finish.md` hairlines), one above the first row.
+- Indicator: a plus that rotates 45° to an ×, or a chevron rotating 180°; 16px, secondary colour, right-aligned on the question's first line (optical alignment, P05).
+- Answer: body size, secondary-to-primary colour (primary if answers are long), max 65ch, 8px under the question, 24px bottom padding. Links inside answers are styled links.
+- Group labels: small size, 600, secondary, 48px above, 12px below; sentence case, not tracked caps on every group (M16).
+- Aside: a real person's photo 40px (D32), their name and when they answer, and a link (mailto, chat, booking). No button-heavy "Contact sales" block.
+
+## Content
+
+- Questions in the visitor's words, as they ask them, collected from support and sales. No softball questions written to sell ("Why is Acme the best?").
+- Answers start with the answer ("No.", "Yes, from day one.") then one or two sentences, then an optional link.
+- The person in the aside is real and actually answers; if no one does, give the real channel and its response time.
+- 6–14 questions. Over 14: group, and link to a full help page.
+
+## States and motion
+
+- Open/close: height via `grid-template-rows: 0fr → 1fr` (200ms, ease-out), opacity on the answer; indicator rotates in step. Reduced motion: instant.
+- Several can be open at once (don't auto-close others).
+- Deep links: each question has an id; opening via `#hash` expands and scrolls to it.
+- Focus ring on the whole row. Works with no JS via `<details>`.
+- Search engines: FAQPage structured data only if the questions are genuinely FAQs.
+
+## Pitfalls
+
+- Questions nobody asks, answering marketing points.
+- Answers hidden in an accordion when there are only three questions.
+- Tiny plus icons as the only hit target.
+- Group labels in mono caps with numbers, every one of them.
+- "Contact us" with no person, no time and no channel.
+
+## Floor checks
+
+- Is each question on its own row with a clear open/close indicator?
+- Are the rows divided by consistent hairlines with comfortable height?
+- Does an open answer start with a direct answer and stay within a readable line length?
+- Is there a visible way to reach a real person for questions not listed?
+- Does the left column hold the heading and contact rather than sitting empty?
+- At 390, are the rows full width with large tap areas?