@r1z4x/tezgah 1.9.2 → 1.11.0

package/skills/hallmark/references/themes/riso.md

@@ -0,0 +1,98 @@
+---
+name: Riso
+slug: riso
+genre: editorial
+paper: light 97 90
+display: grotesk-heavy Cabinet Grotesk
+accent: chromatic-pink 356
+posture: committed
+keywords: risograph, riso, print studio, print fair, zine, small press, poster, art book, spot colour, two colour, indie press, diy, handmade, prints, open studio
+material: bright uncoated stock and no black, a medium blue drum for every word, a fluorescent pink drum for the fills, purple where they cross, Cabinet Grotesk 800 over Literata, grain, one word a hair out of register
+photo: duotone ink paper-2 con=14
+pictured: Job Sheet, Stage hero
+---
+
+# Riso
+
+A small-press run from two drums and nothing else: bright uncoated stock, a medium blue drum that sets every word and a fluorescent pink drum for the fills, crossing in a purple nobody mixed. Cabinet Grotesk 800 heads over a Literata body, grain where the ink skips, one word a hair out of register. It reads handmade because the imperfection is in the ink, not in tape and scribbles. It is not clean vector flatness, not a neon zine, and never black.
+
+## Tokens
+
+```css
+:root {
+  --color-paper: oklch(97% 0.011 90); --color-paper-2: oklch(93.5% 0.034 356); --color-paper-3: oklch(84% 0.11 356);
+  --color-ink: oklch(40% 0.165 265); --color-ink-2: oklch(45% 0.15 265); --color-muted: oklch(50% 0.115 265);
+  --color-rule: oklch(85% 0.045 265);
+  --color-accent: oklch(68% 0.235 356); --color-accent-ink: oklch(27% 0.13 265); --color-focus: oklch(44% 0.2 265);
+  --font-display: "Cabinet Grotesk", ui-sans-serif, sans-serif; --font-body: "Literata", ui-serif, Georgia, serif;
+  --radius-card: 2px; --radius-pill: 2px; --rule-hair: 1px;
+  --shadow-card: none; --texture-opacity: 0.08;
+  --tracking-display: -0.025em; --display-weight: 800;
+}
+```
+
+## Type
+
+- **Display:** Cabinet Grotesk 800, `--tracking-display`, sentence case, in the blue; `h1` leads 0.92, `h2` 0.98. A head is one weight and one colour. Figures that are the offer set in it, tabular.
+- **The misregistered word** (stamp `waive 38iii`): one focal word in the hero head prints in both drums, a pink copy behind the blue nudged 2 to 3px down and right, so only its fringe shows (`texture.md` § 3). Once a page.
+- **Body and lede:** Literata 400, opsz following size, in the blue.
+- **Labels, captions, table heads, nav:** Literata 500 a step smaller, sentence case, `--color-muted` or the blue. No mono: figures take Literata's tabular numerals.
+
+## Surfaces
+
+- No black: every word, rule and icon prints in the blue drum, every fill in the pink; where pink overprints blue (`mix-blend-mode: multiply`) the purple shows, and nobody paints it.
+- Screens of the pink drum are the papers: `--color-paper-2` (a light screen) under any text, `--color-paper-3` (half strength) under display type only, the solid pink with `--color-accent-ink`. The blue drum may print solid, with type knocked out to the stock. Two bands a page.
+- Hairlines in `--color-rule`, 1.5px blue where a rule frames a figure, 2px radius, no shadow; depth is overprint.
+- Photographs: the work and the room in even light, cropped close, with real tonal range. Each prints in both drums, blue shadows into a light pink screen (the `photo:` duotone), 2px radius, grain over it, captions beneath in Literata.
+- Grain, declared: paper specks where the ink skips (`texture.md` § 1, light specks) on fills, bands and photographs at `--texture-opacity`, never under running text; grain and misregistration are one drum's family.
+
+## Range
+
+- **Figures** set as a two-ink overprint: the number in blue Cabinet 800 at display size, a solid pink shape multiplied across part of it, so the purple prints only where the drums cross. A price or a date carries a screen this way.
+- **Steps** as separations: the same artwork shown as the blue layer alone, the pink layer alone, then the sheet with both, three plates on the stock in hairline frames; the process is the picture.
+- **Rows and forms** on the light pink screen: a price list or an order as blue hairline rows in Literata tabular figures, a live total in the display face, the chosen row on the half screen.
+- **Bands** in one drum at full strength: the solid blue with a statement knocked out to the stock and the pink primary on it, or the solid pink with deep blue type; a statement at display size is the loudest thing this material makes.
+
+## Controls
+
+- The pair: a pink-filled rectangle with `--color-accent-ink` type beside one outlined 1.5px in the blue, both at 2px radius in Cabinet Grotesk 800 at 15px; pressed, a control drops 1px down and right, the way a sheet lands.
+- Links underline in pink, thicker on hover; inputs 48px tall at 2px radius with a 1.5px blue border on the stock, the value in Cabinet 800.
+- Pink sits on the primary, link underlines and one fill a screen; the focus ring is blue.
+
+## Motion
+
+One reveal: the pink drum settles into its offset once on load over `--dur-long` on `--ease-out`, and never loops. Controls change colour over `--dur-short`; nothing else moves.
+
+## Voice
+
+Specific and hand-set: name the ink, the sheet, the drum and the price; verbs over adjectives. Imperfect on purpose.
+
+## Do-nots
+
+- Never black ink or a grey; the only third colour is the purple the drums make.
+- Never a registered, ungrained flat gradient; that is vector, not riso.
+- Never pink as type on the stock; the pink drum fills, the blue one writes.
+- Never the misregistration on a second head; one word, then rest.
+- Never a page of duotone photographs back to back; the drums need a page of their own between pulls.
+
+## Build hint
+
+```html
+<link href="https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@800&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Literata:opsz,wght@7..72,400;7..72,500&display=swap" rel="stylesheet">
+```
+
+```css
+h1, h2, h3 { font-weight: var(--display-weight); } h1 { line-height: 0.92; } h2 { line-height: 0.98; }
+.misreg { position: relative; display: inline-block; isolation: isolate; }
+.misreg::after { content: attr(data-text); position: absolute; inset: 0; z-index: -1; white-space: nowrap; pointer-events: none; color: var(--color-accent); transform: translate(2px, 3px); }
+.overprint { background: var(--color-accent); mix-blend-mode: multiply; }
+a { text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; } a:hover { text-decoration-thickness: 4px; }
+.btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--space-lg); border: 1.5px solid transparent; border-radius: var(--radius-card); font: var(--display-weight) 0.9375rem/1 var(--font-display); transition: background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
+.btn:active { transform: translate(1px, 1px); }
+.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); }
+.btn--secondary { border-color: var(--color-ink); color: var(--color-ink); }
+.band--solid { background: var(--color-ink); color: var(--color-paper); }
+.grained { position: relative; isolation: isolate; }
+.grained::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: var(--texture-opacity); background-size: 200px 200px;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 9 -4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }
+```

package/skills/hallmark/references/themes/solstice.md

@@ -0,0 +1,104 @@
+---
+name: Solstice
+slug: solstice
+genre: editorial
+paper: light 94 80
+display: high-contrast-serif Yeseva One
+accent: warm 24
+posture: restrained
+keywords: farm, orchard, cider, perry, winery, harvest, seasonal, food, almanac, produce, vineyard, calendar, market, craft drink, label, bottle, rural, slow, sun, midsummer
+material: cream paper, warm brown ink, Yeseva One over Archivo and Archivo Narrow, gold hairlines and hard paper shadows, photographs in low warm light, one vermilion signal
+photo: warm high=-12
+pictured: Midsummer, Stage hero
+---
+
+# Solstice
+
+An almanac's warmth: cream paper, warm brown ink, Yeseva One heads, Archivo for the reading and Archivo Narrow for the small print, gold hairlines doing the ruling, square surfaces on hard paper shadows, photographs taken in low late light, and one vermilion signal. It reads as seasonal and rural through the ink, the gold, a fat serif and the light in its pictures, never through drawings of produce. It is not a farmhouse script page and not a terracotta-on-cream template.
+
+## Tokens
+
+```css
+:root {
+  --color-paper: oklch(94% 0.03 80); --color-paper-2: oklch(97% 0.02 85); --color-paper-3: oklch(89% 0.05 80);
+  --color-ink: oklch(27% 0.05 50); --color-ink-2: oklch(36% 0.05 50); --color-muted: oklch(48% 0.06 55);
+  --color-rule: oklch(84% 0.06 78);
+  --color-accent: oklch(54% 0.20 24); --color-accent-ink: oklch(97% 0.02 85); --color-focus: oklch(54% 0.20 24);
+  --color-gold: oklch(74% 0.14 75); --color-gold-2: oklch(84% 0.11 80); --color-slot: var(--color-gold);
+  --font-display: "Yeseva One", ui-serif, Georgia, serif; --font-body: "Archivo", ui-sans-serif, sans-serif;
+  --font-outlier: "Archivo Narrow", ui-sans-serif, sans-serif;
+  --radius-card: 0; --radius-pill: 999px; --rule-hair: 1px; --rule-bar: 2px;
+  --shadow-card: 10px 10px 0 var(--color-paper-3);
+  --tracking-display: -0.005em; --display-weight: 400;
+}
+```
+
+The signal is vermilion at hue 24, a red with warmth in it that sits with the gold and the brown, never clay; the gold rules and never fills. Three lights, stated in the stamp (`solstice: long-light`).
+
+| Light | Paper and ink | Signal and gold |
+| --- | --- | --- |
+| `long-light` (default) | cream `oklch(94% 0.03 80)` under brown `oklch(27% 0.05 50)` | vermilion `oklch(54% 0.20 24)`, gold `oklch(74% 0.14 75)` |
+| `dusk` | plum brown `oklch(27% 0.05 40)` under cream ink; raised wells stay cream | vermilion keeps `oklch(54% 0.20 24)` with cream text, gold `oklch(78% 0.14 80)` |
+| `midwinter` | frost `oklch(95% 0.012 230)` under cold brown `oklch(28% 0.03 260)` | vermilion keeps its hue, gold goes pale `oklch(80% 0.06 230)` |
+
+## Type
+
+- **Display:** Yeseva One 400, roman, line-height 1.0, `--tracking-display`, one colour per head; big figures take it too.
+- **Body:** Archivo 400 and 500, 16 to 17px, line-height 1.55, in `--color-ink-2`.
+- **Small print:** Archivo Narrow 600 at 12.5 to 13.5px, sentence case, untracked, the outlier, for dates, months, captions under a photograph and axis labels. Meta and table heads: Archivo 500 a step smaller, sentence case. No mono.
+
+## Surfaces
+
+- Rules: `--rule-bar` ink across the top of a section, `--rule-hair` in `--color-rule` between rows, a gold hairline under a head inside a well.
+- Square everywhere but the control pair: no radius on a well, a photograph or an input; the buttons and the stepper take `--radius-pill`.
+- Depth: a raised well takes a `--rule-bar` ink border, a 1px gold rule inset 6px and the hard `--shadow-card`, an offset in paper-3 with no blur; never a soft shadow.
+- Bands: a `--color-paper-2` band, or one warm brown ink band with cream text; two a page at most, never a vermilion field.
+- Photographs: the season in low, late light: fruit on the branch, long grass, a glass or a bottle on a table outside, the orchard at evening; warm, a little hazy, shadows long. Square, a 1px ink hairline at 10%, no shadow. A caption sits under the frame in the small print, one fact (the place, the month, the bottle); type on a photograph sits on its shaded side over a brown scrim at 40 to 60%.
+- No texture: the cream stays clean.
+
+## Range
+
+- **The product built, standing in the light:** the bottle cut out at full height with its label set in live type (the name in Yeseva, the kind in vermilion small print, a gold hairline, the run), on a sky that grades from the cream down through dusk into a dark field, a low warm glow behind it.
+- **The label as a ruled list:** a paper-2 well inset with a gold hairline, its facts as rows (style, bottle, run, price, release), small-print labels left and Yeseva values right, dotted gold rules between them.
+- **The year on one line:** the seasons from blossom to bottle as stops on a hairline across the brown band, the months in gold small print, the stages in cream Yeseva, the present one marked in the sun's colour.
+- **An order that counts:** a pill stepper beside the one vermilion button whose label carries the running total, under a statement head at display size on a cream to dusk ground.
+
+## Controls
+
+- The pair: a vermilion-filled pill in Archivo Narrow 600 with `--color-accent-ink` text, beside a plain one in ink over a 2px ink underline, no box.
+- Links underline in ink and turn vermilion on hover; inputs square on `--color-paper-2` with a 1px ink border.
+- Restrained: vermilion sits on the primary, the focus ring and one figure, under 5% of a screen; gold never colours text.
+
+## Motion
+
+Quiet: a tab swaps its panel and a row lights on hover, over `--dur-short` on `--ease-out`. No reveal, no counter, no loop.
+
+## Voice
+
+The almanac: the hour of light, the pressing day, the orchard by name. Never a toast to the good life.
+
+## Do-nots
+
+- Never a second warm colour; a second orange makes a fruit stand.
+- Never a neutral ink; a grey-black kills the cream.
+- Never a rounded card or a soft shadow; a raised well is square, ruled and hard-shadowed.
+- Never a cold or flat-lit photograph: a blue noon sky or a flash turns the cream sickly.
+- Never clay or terracotta in place of vermilion; past hue 28 the theme becomes the cream, serif and clay page every generator makes.
+
+## Build hint
+
+```html
+<link href="https://fonts.googleapis.com/css2?family=Yeseva+One&family=Archivo:wght@400;500&family=Archivo+Narrow:wght@600&display=swap" rel="stylesheet">
+```
+
+```css
+h1, h2, h3 { font-weight: 400; line-height: 1; }
+.small, figcaption { font: 600 12.5px var(--font-outlier); color: var(--color-muted); }
+.btn { display: inline-flex; padding: var(--space-md) var(--space-xl); border: 0; font: 600 var(--text-sm)/1 var(--font-outlier); background: var(--color-accent); color: var(--color-accent-ink); }
+.btn--secondary { background: none; color: var(--color-ink); padding: var(--space-lg) 0 var(--space-xs); border-bottom: var(--rule-bar) solid var(--color-ink); }
+.well { background: var(--color-paper-2); border: var(--rule-bar) solid var(--color-ink); outline: var(--rule-hair) solid var(--color-gold); outline-offset: -7px; box-shadow: var(--shadow-card); }
+.band--ink { background: var(--color-ink); color: var(--color-paper); }
+.photo img { outline: var(--rule-hair) solid color-mix(in oklab, var(--color-ink) 10%, transparent); outline-offset: -1px; }
+a:hover { text-decoration-color: var(--color-accent); }
+::selection { background: color-mix(in oklab, var(--color-gold) 40%, transparent); }
+```

package/skills/hallmark/references/themes/specimen.md

@@ -0,0 +1,100 @@
+---
+name: Specimen
+slug: specimen
+genre: editorial
+paper: light 96.5 82
+display: high-contrast-serif Bodoni Moda
+accent: cool 262
+posture: restrained
+keywords: typography, type specimen, foundry, letterform, portfolio, editorial, magazine, essay, type studio, agency, brand story, print, publication, craft, considered, literary
+material: warm oat paper, warm near-black ink, razor-hairline Bodoni Moda over Geist, square 1px rules, one ink-blue signal that also draws the metric guides
+photo: duotone ink paper con=8
+pictured: Specimen Book, Poster hero
+---
+
+# Specimen
+
+A foundry's material: warm oat paper, warm near-black ink, Bodoni Moda 400 pinned at its highest optical size so the hairlines thin to a razor against the stems, a Geist body beneath it, square 1px rules and one ink-blue signal. It reads as hand-set and exact because all the contrast lives inside the letters, none in colour or depth. It is not a cream luxury page with a terracotta accent, and not a fashion masthead in bold Didone.
+
+## Tokens
+
+```css
+:root {
+  --color-paper: oklch(96.5% 0.016 82); --color-paper-2: oklch(93.5% 0.02 80); --color-paper-3: oklch(89% 0.024 78);
+  --color-ink: oklch(17% 0.012 60); --color-ink-2: oklch(28% 0.014 60); --color-muted: oklch(49% 0.014 65);
+  --color-rule: oklch(80% 0.018 75); --color-rule-2: oklch(66% 0.02 72);
+  --color-accent: oklch(45% 0.18 262); --color-accent-ink: oklch(97% 0.012 82); --color-focus: oklch(50% 0.18 262);
+  --color-guide: oklch(55% 0.16 262 / 0.5);
+  --font-display: "Bodoni Moda", ui-serif, Georgia, serif; --font-body: "Geist", ui-sans-serif, system-ui, sans-serif;
+  --font-outlier: "Geist Mono", ui-monospace, monospace;
+  --radius-card: 0; --radius-pill: 0; --rule-hair: 1px;
+  --shadow-card: none;
+  --tracking-display: -0.02em; --display-weight: 400; --display-optical: 96;
+}
+```
+
+`--color-guide` is the blue's second strength: a translucent hairline for a metric guide (cap height, x-height, baseline) drawn under a word, never a fill. `--color-rule-2` is the darker hairline for a control's track or a table's head.
+
+## Type
+
+- **Display:** Bodoni Moda 400, `--tracking-display`, line-height 1.02, sentence case, roman. `h1` and `h2` take `"opsz" 96`, where the hairline nearly vanishes against the stem and that contrast is the graphic; an `h3` lets the axis follow its size, since a razor hairline breaks at 25px. A word set as a poster may run to 20vw.
+- **Body:** Geist 400 at 17px, line-height 1.55; the plain sans under the Didone is the tension. Bodoni Moda italic stays inside running text or a sample, never a head.
+- **Labels, captions, table heads:** Geist 500 a step smaller, sentence case, `--color-muted`. Geist Mono only on figures that compare (a size, a weight, a code point), tabular.
+
+## Surfaces
+
+- 1px `--color-rule` hairlines on divisions, table rows and between cells; a 3px `double` rule heads the one table that matters, once a page.
+- No depth: nothing lifts, nothing casts a shadow, nothing is rounded. A well is a paper step (`--color-paper-2`) inside a hairline.
+- Bands: a `--color-paper-2` band, or one `--color-ink` band with oat type, where the Didone reads sharpest; two a page at most, never a blue one.
+- Photographs: one at most, the face's world: a reading room, a book open on a desk, metal sorts in a case; it prints in ink on oat (the duotone) as a plate, square, inside a hairline, eight columns or the full container. Its caption names the setting beneath it; type never sits on it.
+- No texture, no mesh, no gradient behind type: the oat is a colour, not a paper scan.
+
+## Range
+
+- **Statement with guides:** one word or line at poster size with `--color-guide` hairlines at its real cap height, x-height and baseline, each named in the label style.
+- **Rows as a waterfall:** one line falling through sizes, each row its size in Geist Mono at left, hairlines between, every line cut to fit its row.
+- **Grid as a character set:** hairline cells across twelve columns, one lead cell four wide holding a glyph at display size; the current cell fills ink.
+- **Comparison and price list:** roman beside italic on the ink band, one passage each at reading size; the licence as a ruled table under the double rule, the price in Didone at `--text-display-s`.
+
+## Controls
+
+- The pair: an ink-filled rectangle with oat text beside a 1px ink-outlined one, both square, Geist 500, 48px tall.
+- A range is a 1px `--color-rule-2` track with a square ink thumb; a toggle is two square cells inside one ink hairline, the pressed one paper with a 2px ink rule beneath, so the ink fill stays the primary's. Inputs are square with the `--color-focus` ring.
+- Links carry a 1px ink-blue underline at 0.18em that thickens on hover. The blue stays under 5% of a screen: a link, the focus ring, the guides, one figure.
+
+## Motion
+
+Nothing moves except state: an underline thickens, a cell fills, a sample takes the size and weight it was given. No reveal, no loop, nothing on arrival.
+
+## Voice
+
+Editorial, hand-set, lightly literary. Verbs over adjectives; name the face, the size, the number.
+
+## Do-nots
+
+- Never a heavy display head; bold turns the Didone into a fashion masthead. Heavier weights appear only as samples of a family.
+- Never an optical size under 72 on an `h1` or `h2`; fat hairlines are this theme's most common failure.
+- Never a warm accent, never cool paper: the signal is ink blue, the warmth comes from the oat.
+- Never a drawn book, page or device to show text; set the text itself at its size.
+
+## Build hint
+
+```html
+<link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400&family=Geist:wght@400;500&family=Geist+Mono:wght@400&display=swap" rel="stylesheet">
+```
+
+```css
+h1, h2, h3 { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--tracking-display); line-height: 1.02; }
+h1, h2 { font-variation-settings: "opsz" var(--display-optical); }
+h3 { font-optical-sizing: auto; line-height: 1.15; }
+.btn { min-height: 48px; border: var(--rule-hair) solid var(--color-ink); border-radius: var(--radius-card); padding: 0 var(--space-lg); font-weight: 500; }
+.btn--primary { background: var(--color-ink); color: var(--color-paper); }
+.btn--secondary { background: transparent; color: var(--color-ink); }
+.guide { border-top: var(--rule-hair) solid var(--color-guide); }
+.rule--double { border: 0; border-top: 3px double var(--color-rule-2); }
+input[type="range"] { appearance: none; height: 1px; background: var(--color-rule-2); }
+input[type="range"]::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; background: var(--color-ink); border-radius: 0; }
+.photo > img { outline: var(--rule-hair) solid var(--color-rule); outline-offset: -1px; }
+a { text-decoration-color: var(--color-accent); text-underline-offset: 0.18em; }
+a:hover { text-decoration-thickness: 2px; }
+```

package/skills/hallmark/references/themes/spore.md

@@ -0,0 +1,104 @@
+---
+name: Spore
+slug: spore
+genre: atmospheric
+paper: dark 15 60
+display: roman-serif Young Serif
+accent: warm 30
+posture: committed
+keywords: grower, mushroom, fungi, farm, food, producer, fermentation, wine, natural wine, wine bar, bottle shop, cellar, preserves, dark, culture, night market, harvest, subscription, small batch
+material: coffee-ground black with a warm grain, parchment ink, Young Serif over Instrument Sans, soft pills and grained wells, photographs lit by lamps and candles, one oyster pink
+photo: warm con=6 exp=-4
+pictured: Photographic, Stage hero
+---
+
+# Spore
+
+A cellar at night: coffee-ground black warmed toward brown, a warm grain on its wells, parchment Young Serif over Instrument Sans, soft pills, photographs lit only by lamps and candles, and one oyster-mushroom pink. It feels close and handmade because the warmth sits in the ground, the grain, the figures and one soft colour, never in drawn light. It is not a dark-mode template with a glow, nor a wellness label.
+
+## Tokens
+
+```css
+:root {
+  --color-paper: oklch(15% 0.012 60); --color-paper-2: oklch(19% 0.014 58); --color-paper-3: oklch(24% 0.02 50);
+  --color-ink: oklch(93% 0.022 85); --color-ink-2: oklch(84% 0.022 78); --color-muted: oklch(67% 0.02 70);
+  --color-rule: oklch(31% 0.016 60);
+  --color-accent: oklch(77% 0.09 30); --color-accent-2: oklch(86% 0.06 30); --color-accent-ink: oklch(15% 0.012 60); --color-focus: oklch(86% 0.06 30);
+  --font-display: "Young Serif", Georgia, serif; --font-body: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
+  --font-outlier: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
+  --radius-card: 14px; --radius-pill: 999px; --rule-hair: 1px;
+  --shadow-card: 0 16px 40px oklch(8% 0.01 60 / 0.4);
+  --tracking-display: -0.012em;
+  --grain: 0.15; --display-weight: 400;
+}
+```
+
+One dial, the colourway, stated in the stamp (`spore: cellar`).
+
+| Colourway | Ground | Ink | Accent |
+| --- | --- | --- | --- |
+| `cellar` (default) | `oklch(15% 0.012 60)`, grain screened at 15% | parchment `oklch(93% 0.022 85)` | pink `oklch(77% 0.09 30)` |
+| `lab` | cream `oklch(94% 0.02 85)`, grain multiplied at 6% | `oklch(17% 0.015 60)` | pink `oklch(62% 0.13 30)` |
+| `head-torch` | `oklch(12% 0.008 60)`, grain at 15% | `oklch(93% 0.03 85)` | ochre `oklch(74% 0.13 80)` |
+
+## Type
+
+- **Display:** Young Serif 400, `--tracking-display`, line-height 1.02, sentence case, roman, one colour per head. Its one weight is the voice: hierarchy comes from size, never from bolding.
+- **Figures:** prices, days, hours and counts are Young Serif, lining, and may run past `--text-display` when one number is the section's reason; a price is the one figure that takes pink.
+- **Body:** Instrument Sans 400 and 500, line-height 1.55, in `--color-ink-2`. A second name after a product's (a grape, a vintage, a Latin name) is Instrument Sans italic, the outlier and the only italic.
+- **Labels, captions, table heads:** Instrument Sans 500 a step smaller, sentence case, `--color-muted`.
+
+## Surfaces
+
+- 1px `--color-rule` between rows; a 1.5px `--color-ink-2` edge on fields. Nothing else has a border.
+- Radii: pills on controls and chips, `--radius-card` on wells and photographs; inputs square.
+- Depth is the ground's three steps: paper, a grained `--color-paper-2` well, a `--color-paper-3` band. A state that is live now (tonight, the chosen row) lifts one step and takes a pink chip. `--shadow-card` only under a well that overlaps a photograph.
+- Photographs: the place after dark, close: racks, a pour, a candlelit counter, a glass; low warm light into shadow, never flash or daylight. `--radius-card` with a 1px ink ring at 8%; type on one sits on its dark side over a paper scrim at 45 to 65%.
+- Grain: the speck grain of `texture.md` § 1, screened at `--grain`, on wells and bands only; never under running text in a column or over a photograph.
+
+## Range
+
+- **One figure as the section:** a count or a price in Young Serif at two to four times `--text-display` on a grained well, its plain label beneath, beside two or three hairline rows that say what the number means.
+- **The week as a timetable:** Rows of day names in Young Serif at `--text-title`, the hours beside them, closed days dropped to muted, tonight's row lifted to paper-3 with its pink chip; a head block on columns 1 to 4 beside them.
+- **A list or price list:** ruled rows with the name in Young Serif, the second name in italic, the price flush right in pink; set three or five columns deep and it reads as the shelf.
+- **A grained band that holds a form:** paper-3 with the speck grain, the price large in pink beside square fields and the pink pill; or a statement in Young Serif at `--text-display` across ten columns.
+
+## Controls
+
+- The pair: a pink-filled pill with `--color-accent-ink` text, lightening to `--color-accent-2` on hover, beside a pill outlined in 1.5px `--color-ink-2`. Chips are pills; the chosen one fills pink.
+- Links are parchment with an underline that turns pink on hover; inputs are square with the 1.5px edge and the `--color-focus` ring.
+
+## Motion
+
+State only, in one frame: a chip selects, a row lifts, a pill lightens. Nothing reveals, nothing grows, nothing loops.
+
+## Voice
+
+A maker's log: the name, the day, the hour, the vintage, the price. No wellness, no mystique, no "curated".
+
+## Do-nots
+
+- Never a second hue; a green for "in stock" makes a garden centre.
+- Never drawn light as the mood (a beam, a pool, a glow behind a head); the light lives in the photographs.
+- Never a neutral or blue-black ground; every dark step tints toward hue 60.
+- Never pink running text or a pink outline; pink is a fill, a price or the focus.
+- Never photograph after photograph; between two pictures a figure, a timetable or a list in Young Serif.
+
+## Build hint
+
+```html
+<link href="https://fonts.googleapis.com/css2?family=Young+Serif&family=Instrument+Sans:ital,wght@0,400;0,500;0,600;1,400&display=swap" rel="stylesheet">
+```
+
+```css
+h1, h2, h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: var(--tracking-display); line-height: 1.02; }
+.btn { border-radius: var(--radius-pill); padding: var(--space-sm) var(--space-lg); font-weight: 600; transition: background-color var(--dur-micro) var(--ease-out); }
+.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); }
+.btn--primary:hover { background: var(--color-accent-2); }
+.btn--secondary { background: transparent; color: var(--color-ink); box-shadow: inset 0 0 0 1.5px var(--color-ink-2); }
+.well { background: var(--color-paper-2); border-radius: var(--radius-card); }
+.figure { font-family: var(--font-display); font-variant-numeric: lining-nums; line-height: 0.86; }
+.grained { position: relative; isolation: isolate; }
+.grained::after { content: ""; position: absolute; inset: 0; z-index: var(--z-base); border-radius: inherit; pointer-events: none; opacity: var(--grain); mix-blend-mode: screen;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.6 0 0 0 0 0.55 0 0 0 0 0.45 0 0 0 0.35 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"); }
+```

package/skills/hallmark/references/themes/sport.md

@@ -0,0 +1,101 @@
+---
+name: Sport
+slug: sport
+genre: editorial
+paper: light 98 250
+display: display-condensed Saira Condensed
+accent: chromatic-volt 120
+posture: restrained
+keywords: running, marathon, race, training, fitness, gym, team, league, fixtures, standings, scoreboard, athletics, performance, splits, sportswear, club, match, tournament
+material: cool concrete paper, blue-black ink, uppercase Saira Condensed over Albert Sans, condensed figures and mono times, two-weight rules, one volt fill
+photo: duotone ink paper con=20
+pictured: Stat-Led, Poster hero
+---
+
+# Sport
+
+A results-sheet material: cool concrete paper, blue-black ink, Saira Condensed 800 in capitals over an Albert Sans body, big condensed figures and JetBrains Mono times, hairlines and one heavier bar rule, and volt as the only colour. Volt is a fill: ink sits on it, and it never sets a letter on paper. Photographs print in the ink, like a race programme. It reads fast because of the condensed caps, the numbers and the action, never a slant or a gradient; it is not a sportswear advert and not a neon gaming page.
+
+## Tokens
+
+```css
+:root {
+  --color-paper: oklch(98% 0.005 250); --color-paper-2: oklch(95% 0.006 250); --color-paper-3: oklch(91.5% 0.007 250);
+  --color-ink: oklch(16% 0.080 260); --color-ink-2: oklch(22% 0.060 258); --color-muted: oklch(50% 0.020 250);
+  --color-rule: oklch(78% 0.008 250); --color-rule-2: oklch(36% 0.060 255);
+  --color-accent: oklch(88% 0.200 120); --color-accent-ink: oklch(16% 0.080 260); --color-accent-deep: oklch(58% 0.145 125);
+  --color-focus: oklch(58% 0.145 125); --color-slot: oklch(76% 0.07 258);
+  --font-display: "Saira Condensed", sans-serif; --font-body: "Albert Sans", ui-sans-serif, sans-serif;
+  --font-outlier: "JetBrains Mono", ui-monospace, monospace;
+  --radius-card: 4px; --radius-pill: 4px; --rule-hair: 1px; --rule-bar: 2px;
+  --shadow-card: none;
+  --tracking-display: -0.015em; --display-weight: 800;
+}
+```
+
+## Type
+
+- **Display:** Saira Condensed 800, uppercase, `--tracking-display`, line-height 1.02, upright, roman. A true condensed design, so the caps stack without crowding, even at poster scale over a photograph; the speed is in the caps, never a slant.
+- **Body:** Albert Sans 400 and 500, sentence case.
+- **Figures:** at statement size (a distance, a field size, a price, a date) Saira Condensed 800 with `tabular-nums`, from `--text-display-s` up, the label in Albert Sans beneath. In columns and live data (times, splits, bibs) JetBrains Mono 500, a step or more larger than its label. Mono is a stopwatch, never a label or a head.
+- **Labels, captions, table heads, units:** Albert Sans 500 a step smaller, sentence case, untracked, `--color-muted`; on a volt fill every word is the ink.
+
+## Surfaces
+
+- Two rule weights, never boxed cards: `--rule-hair` in `--color-rule` rules rows and grids; the `--rule-bar` in `--color-rule-2` opens and closes a table and breaks a section.
+- Radius 4px on controls, inputs and photographs; no pills.
+- Depth from rules and paper steps, never shadows: a well is `--color-paper-2` under a bar rule.
+- Bands: a `--color-paper-2` band, or one `--color-ink` band with paper type; two a page at most, never a volt band.
+- Photographs: race photography at the runner's eye or lower: a pack mid-stride, legs and shoes on tarmac, a road climbing a valley side, a number being pinned on; hard daylight, the motion sharp, cropped tight, nobody posing. Printed in the ink on the paper (the `photo:` duotone), 4px radius, an inset ink hairline at 8%. Type on a photograph is paper over an ink scrim from its edge; a volt figure may hold a frame's corner with a fact (the mile, the time).
+- No texture, no gradient but a photograph's scrim, no hard-offset shadow.
+
+## Range
+
+- **The race in figures:** three or four of the prompt's numbers in condensed caps at display size under the bar rule, parted by hairlines, one at most sitting on a volt fill.
+- **A working control on the race's facts:** a pace or time planner on the ink band, the chosen time in mono at display size, every mile in a ruled grid that changes in place, the finish cell in volt.
+- **Results as a sheet:** the bar rule opening and closing a table of bibs and times in mono, the followed runner's row lifted a paper step and its latest split in volt.
+- **The course as stages:** start to finish as numbered stages on one bar rule, a condensed-cap title and one line each, the live stage on volt.
+
+## Controls
+
+- The control pair: a volt-filled block with ink text beside one bordered 2px in ink, both 4px, set in the display face's capitals with no added tracking; on a photograph the second takes paper.
+- Links grow a `--color-accent-deep` underline on hover (3:1 on paper); inputs are 4px with a 1px `--color-rule` border and the `--color-focus` ring.
+- The volt is always a fill under ink and under 5% of a screen: the primary control, an active row, one highlighted figure.
+
+## Motion
+
+Nothing moves except state and live data: a deep-volt underline grows under a link on hover, a row lifts one paper step, a live split changes in place, never counting up. No reveal, no parallax.
+
+## Voice
+
+Race-briefing plain: the distance, the time, the place, as a marshal calls them. Imperative heads in capitals, sentence case below, numerals over words, verbs over adjectives.
+
+## Do-nots
+
+- Never slant or italicise the display; the upright condensed cap is the speed.
+- Never loosen the display tracking past zero, or tighten it until two capitals touch.
+- Never warm paper; the ground is cool concrete, hue 250.
+- Never volt type, a volt hairline on paper or a second accent; photographs print in the ink, never in their own colour.
+- Never a medal, trophy, podium or jersey texture, drawn or photographed; the race is the road and the runners.
+
+## Build hint
+
+```html
+<link href="https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@800&family=Albert+Sans:wght@400;500&family=JetBrains+Mono:wght@500&display=swap" rel="stylesheet">
+```
+
+```css
+h1, h2, h3 { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--tracking-display); text-transform: uppercase; line-height: 1.02; }
+.figure { font: var(--display-weight) var(--text-display)/0.9 var(--font-display); font-variant-numeric: tabular-nums; }
+.time { font: 500 var(--text-2xl)/1 var(--font-outlier); font-variant-numeric: tabular-nums; }
+.btn { border: var(--rule-bar) solid transparent; border-radius: var(--radius-card); padding: var(--space-sm) var(--space-lg); font: var(--display-weight) var(--text-md)/1.25 var(--font-display); text-transform: uppercase; }
+.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); }
+.btn--secondary { border-color: var(--color-ink); color: var(--color-ink); }
+.well { background: var(--color-paper-2); border-top: var(--rule-bar) solid var(--color-rule-2); }
+.rule { border-top: var(--rule-bar) solid var(--color-rule-2); }
+th, td { border-top: var(--rule-hair) solid var(--color-rule); }
+.photo { border-radius: var(--radius-card); outline: 1px solid color-mix(in oklab, var(--color-ink) 8%, transparent); outline-offset: -1px; }
+.scrim { background: linear-gradient(to top, color-mix(in oklab, var(--color-ink) 70%, transparent), transparent 60%); color: var(--color-paper); }
+a:hover { text-decoration-color: var(--color-accent-deep); }
+::selection { background: var(--color-accent); color: var(--color-ink); }
+```

package/skills/hallmark/references/themes/squeeze.md

@@ -0,0 +1,99 @@
+---
+name: Squeeze
+slug: squeeze
+genre: playful
+paper: mid 41 154
+display: geometric-sans Gabarito
+accent: warm 56
+posture: drenched
+keywords: fruit, food box, grocer, market, delivery, weekly, seasonal, farm shop, subscription, produce, veg box, cheerful, family, treats, stall, orchard, local, fresh
+material: forest-green paper with real chroma, warm white ink, Gabarito 800 heads and figures over Manrope, soft rounded tiles a step lighter or deeper, fruit photographed bright and close, juicy peach controls
+photo: natural vib=12 con=4
+pictured: Bento Grid, Stage hero
+---
+
+# Squeeze
+
+A market stall in colour: a forest-green ground with real chroma, warm white ink, Gabarito's round, heavy heads and figures over a sturdy Manrope, soft tiles a step lighter or deeper, fruit photographed bright and close, juicy peach controls and one warm-white card. It is cheerful because the green is the whole surface and the fruit is the colour on it; a price or a day set huge in Gabarito is as much the material as a crate of fruit. It is not a neutral grocery template with a green button, and not an organic label in serif and kraft.
+
+## Tokens
+
+```css
+:root {
+  --color-paper: oklch(41% 0.100 154); --color-paper-2: oklch(47% 0.105 154); --color-paper-3: oklch(34% 0.090 156);
+  --color-ink: oklch(99% 0.005 90); --color-ink-2: oklch(94% 0.020 120); --color-muted: oklch(90% 0.030 150); --color-rule: oklch(55% 0.100 154);
+  --color-accent: oklch(83% 0.115 56); --color-accent-2: oklch(74% 0.150 46); --color-accent-ink: oklch(30% 0.070 40); --color-focus: oklch(88% 0.14 85);
+  --color-card: oklch(97% 0.012 85); --color-card-ink: oklch(24% 0.05 160);
+  --font-display: "Gabarito", ui-sans-serif, system-ui, sans-serif; --font-body: "Manrope", ui-sans-serif, system-ui, sans-serif;
+  --font-outlier: var(--font-display);
+  --radius-card: 24px; --radius-control: 16px; --radius-pill: 999px; --rule-hair: 1px; --rule-bar: 2px;
+  --shadow-card: 0 14px 32px -16px oklch(22% 0.05 160 / 0.5);
+  --tracking-display: -0.025em; --display-weight: 800;
+}
+```
+
+## Type
+
+- **Display:** Gabarito 800, `--tracking-display`, line-height 1.0, sentence case, one colour per head. Round, compact and heavy, so it takes the shared display scale without a cap; never under 700.
+- **Figures:** prices, dates and days in Gabarito 800 with tabular, lining numerals; a single figure may run three to four times the section head, tracked to -0.04em, with its unit at the same weight.
+- **Body:** Manrope 500, line-height 1.55, in `--color-muted`; links and row titles at 700. Three weights in all: 800, 700, 500.
+- **Labels, captions, table heads, meta:** Manrope 700 a step smaller, sentence case, untracked. Never mono, never uppercase.
+
+## Surfaces
+
+- Tiles, not cards: a tile is the ground one step lighter (`--color-paper-2`) at `--radius-card`, no border, no shadow; a sunk well takes `--color-paper-3`. A tile a visitor can choose sinks to `--color-paper-3` when chosen and takes a 3px `--color-accent` ring.
+- The one raised surface is the warm-white card (`--color-card`, `--color-card-ink` type, `--shadow-card`), once a page, for the thing a visitor pays for; inside it the focus ring takes `--color-card-ink`.
+- Rules at `--rule-bar` in `--color-rule`; only a rule between list rows is `--rule-hair`.
+- Bands: the page is green, so a band is the lighter or the deeper green (`--color-paper-2`, `--color-paper-3`); two a page at most, never a white, grey or peach band.
+- Photographs: fruit close in daylight, a crate from above, fruit held out, a heap on a stall; bright, the fruit filling the frame. `--radius-card`, no ring, no shadow; captions under in the label style; type on a photograph sits over a `--color-paper-3` scrim at 45 to 65%.
+- No texture: the green is a flat colour.
+
+## Range
+
+- A price, a size or a day set as one figure at statement size: Gabarito 800 in ink straight on the green, its unit at full weight, the head and one line beside it on the remaining columns. The green and the figure carry the screen alone.
+- A timetable of real dates as tiles or full-width rows: each date big in Gabarito, the weekday in the label style, the chosen one sunk to `--color-paper-3` and ringed in peach; a stall's chalkboard that works as a control.
+- A promise set as a statement on the deeper green band, Gabarito at display size across ten columns, one action under it.
+- Questions or plain terms as rows: Gabarito titles on the left, Manrope answers on the right, hair rules in `--color-rule` between.
+
+## Controls
+
+- The control pair: a peach-filled primary with `--color-accent-ink` text beside a 2px ink-outlined secondary, both at `--radius-control`, Manrope 700. Tags and chips are pills; nav links may be `--color-paper-2` pills.
+- Links are ink at 700, the underline turning peach on hover; inputs take a 2px `--color-rule` border at `--radius-control` and the `--color-focus` ring.
+- Peach stays on controls: the primary, a chosen chip or tile ring, a link's hover; `--color-accent-2` is the primary's pressed and hover step only. Never peach type and never a peach field.
+
+## Motion
+
+Cheerful and quick, state only: a control presses 1px down at `--dur-micro`, a chosen tile rings at `--dur-short` on `--ease-out`, a choosable tile steps a green lighter on hover. No reveal, no parallax, no loop; nothing that cannot be pressed reacts.
+
+## Voice
+
+The stall-holder's, out loud on a Thursday morning: the fruit, the day it comes, what ripe feels like in the hand. Short, warm sentences with the price said plainly; never gourmet, never a wellness pitch.
+
+## Do-nots
+
+- Never a neutral ground. White is for the one card; grey does not exist. The page is green.
+- Never a dull or greyed green; the ground keeps its chroma, or it turns to army surplus.
+- Never a weight under 500, a serif, or a mono figure: numbers are Gabarito.
+- Never a hairline border; a 1px rule lives only between list rows.
+- Never a dim photograph, and never one on every screen: the fruit is brightest when the green and the type get screens of their own.
+
+## Build hint
+
+```html
+<link href="https://fonts.googleapis.com/css2?family=Gabarito:wght@800&family=Manrope:wght@500;700&display=swap" rel="stylesheet">
+```
+
+```css
+h1, h2, h3 { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--tracking-display); }
+h1, h2 { line-height: 1; }
+.figure { font: var(--display-weight) clamp(7rem, 16vw, 15rem)/0.85 var(--font-display); letter-spacing: -0.04em; font-variant-numeric: lining-nums tabular-nums; }
+.tile { background: var(--color-paper-2); border-radius: var(--radius-card); }
+.tile:has(:checked) { background: var(--color-paper-3); box-shadow: inset 0 0 0 3px var(--color-accent); }
+.card { background: var(--color-card); color: var(--color-card-ink); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
+.btn { border: var(--rule-bar) solid var(--color-ink); border-radius: var(--radius-control); padding: var(--space-sm) var(--space-lg); font: 700 var(--text-md)/1.25 var(--font-body); color: var(--color-ink); transition: translate var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out); }
+.btn--primary { background: var(--color-accent); color: var(--color-accent-ink); border-color: var(--color-accent); }
+.btn--primary:hover { background: var(--color-accent-2); border-color: var(--color-accent-2); }
+.btn:active { translate: 0 1px; }
+.photo img { border-radius: var(--radius-card); }
+::selection { background: color-mix(in oklab, var(--color-accent) 45%, transparent); color: var(--color-card-ink); }
+```