@agentic-design-kits/swiss-minimal 2026.1113.1 → 2026.1114.0

package/COMPONENTS.md

@@ -289,6 +289,7 @@ A row of outlined buttons that narrows a list to one category. One choice at a t
 - Announce the result in a polite live region outside the accordion: `<p class="sr-only" aria-live="polite">Showing 5 Writing items</p>`.
 - With `FavoriteStar`, add a **Favorites** chip after All, its count in `<span class="chip-count" data-favorites-count>0</span>`. It filters like a category, using the starred ids. When it shows nothing, say how to add some in a `muted` line under the accordion.
 - Listen for `filter:reset` and go back to All (`JumpToCurrent` sends it when the current item is filtered out).
+- A chip that can't be chosen right now takes `disabled`: it fades to 60% and doesn't fill on hover. Say why near the row.
 
 ## FavoriteStar
 
@@ -833,7 +834,7 @@ In Astro, `<PostList posts={posts} />`, each a `Post` (`title`, `href`, `date`,
 
 ## PostFeature
 
-One post at the top of a blog's index, set like a split `Hero`: the text and a square image 50/50 from 768px, text first on phones. The `PostList` of the other posts follows it.
+One post at the top of a blog's index, in one of two layouts. **Split**, like a split `Hero`: the text and a square image 50/50 from 768px, text first on phones. **Wide**: the text across the full width, then the image under it at 16:9. The `PostList` of the other posts follows it.
 
 **Markup.**
 
@@ -850,15 +851,15 @@ One post at the top of a blog's index, set like a split `Hero`: the text and a s
 </article>
 ```
 
-In Astro, `<PostFeature post={post} image={art} alt="What it shows" />`, with the same `Post` as `PostList` and an imported image. `label` (default "Featured") and `action` (default "Read post") change the two short labels; `level="h1"` when nothing else on the page is the `h1`.
+In Astro, `<PostFeature post={post} image={art} alt="What it shows" />`, with the same `Post` as `PostList` and an imported image. The image's shape picks the layout: wide for a landscape image, split for a square or portrait one. `layout="wide"` or `layout="split"` overrides it. `label` (default "Featured") and `action` (default "Read post") change the two short labels; `level="h1"` when nothing else on the page is the `h1`.
 
 - It takes a hero's place and space: `space-12` above, more from 768px. A page with a `PostFeature` has no `Hero` or `PageTitle`; give it an `h1` (visually hidden is fine) naming the page.
 - The label is small, bold and `accent-text`; the title is bold and tight at `clamp(2.5rem, 5.5vw, 5rem)`, and underlines (3px) on hover.
 - The primary button is the page's one main action. Its name adds the post's title, so it says where it goes.
-- The image is cropped square (`.media--1x1`) and loads eagerly, like a hero's. A square or portrait original crops best.
+- Split crops the image square (`.media--1x1`); wide crops it 16:9 (`.media--16x9`) and adds `post-feature--wide` to the article, which also gives the summary a longer measure. Either way it loads eagerly, like a hero's. Give wide a landscape original and split a square or portrait one, so the crop takes little.
 - Only one per page. Don't repeat the featured post in the list below it.
 
-**Other media.** `image` and `alt` are optional. To show something other than a raster image, such as an SVG that follows the theme, leave them out and fill the `media` slot: `<PostFeature post={post}><svg slot="media" …></svg></PostFeature>`. Keep it square, and give it its own text alternative if it says anything.
+**Other media.** `image` and `alt` are optional. To show something other than a raster image, such as an SVG that follows the theme, leave them out and fill the `media` slot: `<PostFeature post={post}><svg slot="media" …></svg></PostFeature>`. Keep it square, or 16:9 with `layout="wide"`, and give it its own text alternative if it says anything.
 
 ## Pager
 

package/DESIGN.md

@@ -74,6 +74,43 @@ One family, `--font-sans` (Overused Grotesk, falling back to Helvetica Neue, Hel
 - Long labels that would otherwise be caps take `.prose-sentence`.
 - Code is plain HTML, no class: inline `<code>` sits in the line with no tint behind it; a `<pre>` block is square with a 1px `rule` border and `space-4` padding, and scrolls sideways rather than wrapping (give a long one `tabindex="0"` so the keyboard can scroll it); `<kbd>` is outlined in `currentColor`, like the top-bar buttons. Terminal output and logs go on a dark block (`.pre--bar`), with commands in bold and errors in the accent; see CodeBlock in `COMPONENTS.md`. Monospace never goes beyond code: not for labels, numbers or headings.
 
+### OpenType features
+
+Overused Grotesk has alternate letters, boxed and circled figures and a few numeric features. The kit sets only tabular figures, in `.num`; everything else is off. The demo's Type and color page shows each one off and on.
+
+| Feature | What it changes | Use |
+| --- | --- | --- |
+| `ss01` | Single-storey a | Site-wide, if the site wants a friendlier a |
+| `ss02` | Bottom-curled l | Where l, I and 1 must be told apart: codes, names, tables |
+| `ss03` | Round dots on i, j, umlauts and punctuation | Site-wide, if chosen |
+| `ss04` | Spurless G | Site-wide, if chosen |
+| `ss05` | Straight-legged R | Site-wide, if chosen |
+| `ss06` | Alternative J | Site-wide, if chosen |
+| `ss07` | Alternative y | Site-wide, if chosen |
+| `ss08` | Arcless t | Site-wide, if chosen |
+| `ss09` | Alternative asterisk | Site-wide, if chosen |
+| `ss10` | u with no stem | Site-wide, if chosen |
+| `ss11` | Serif I | With `ss02`, where I and l must be told apart |
+| `cv01`, `cv02` | Figures in solid or outlined squares | Keys and step numbers only, never running text |
+| `cv03`, `cv04` | Figures in solid or outlined circles | Keys and step numbers only, never running text |
+| `cv05` | a with a spur | Site-wide, if chosen; works with `ss01` |
+| `tnum` | Tabular figures | Through `.num`, on numbers that line up in a column |
+| `zero` | Slashed zero | Where 0 and O could be confused: codes, IDs |
+| `frac` | Fractions | On the fraction only |
+| `sups`, `subs` | Superscript, subscript figures | On the figures only |
+
+- **Choose alternates once.** Set a site's alternate letters on `body`, so a letter has one shape everywhere. Don't switch them word by word.
+- **Prefer `font-variant-*`** where it exists: `font-variant-numeric: tabular-nums`, `slashed-zero` or `diagonal-fractions`, and `font-variant-position: super` or `sub`. These combine on their own. Stylistic sets and character variants have no such property, so they need `font-feature-settings`.
+- **`font-feature-settings` replaces, it doesn't add.** Setting it on an element drops every feature it inherited. To let features stack, give each its own custom property and list them all in one rule:
+
+  ```css
+  body { font-feature-settings: var(--ff-ss01, "ss01" 0), var(--ff-ss02, "ss02" 0), var(--ff-zero, "zero" 0); }
+  .codes { --ff-ss02: "ss02" 1; --ff-zero: "zero" 1; }
+  ```
+
+- **Features change looks, not text.** A screen reader reads, and copy and paste gives, the characters typed: a boxed 3 is still "3". Never let a box or circle carry meaning on its own.
+- **Not available:** ligatures, case-sensitive forms, old-style figures and small caps; the font has none. `ss12` changes Bulgarian Cyrillic only. Don't use the slant axis (`slnt`): in this version of the font only some letters slant.
+
 ## Layout
 
 - Content width `page-max` (88rem), centered in `.page`, with `gutter` side padding (1rem, 2rem from 640px).
@@ -89,7 +126,7 @@ One family, `--font-sans` (Overused Grotesk, falling back to Helvetica Neue, Hel
 
 ## Iconography
 
-- **Type and CSS come first.** Draw UI chrome in CSS: the plus/minus is two bars (`.acc-icon`), the menu button is three bars (`.burger`). Use the font's own glyphs where they exist: "Site ↗" (the arrow at 1.3em of the label size), the ▲ / ▼ of a jump button.
+- **Type and CSS come first.** Draw UI chrome in CSS: the plus/minus is two bars (`.acc-icon`), the menu button is three bars (`.burger`). Use the font's own glyphs where they exist: "Site ↗" (the arrow at 1.3em of the label size), the ▲ / ▼ of a jump button. Overused Grotesk has 22 arrows (← ↑ → ↓ ↔ ↕ ↖ ↗ ↘ ↙ ↺ ↻ ⇄ ⇆ ⇋ ⇌ ⇐ ⇑ ⇒ ⇓ ⇔ ⇕) and 23 shapes (▲ △ ▶ ▷ ▼ ▽ ◀ ◁ ■ □ ◆ ◇ ◊ ● ○ ◐ ◑ ◒ ◓ ◢ ◣ ◤ ◥), plus fractions, math signs, currency and typographic marks; the demo's Type and color page shows them all. Use one of these before reaching for an icon set, and give a glyph that acts as a control an `aria-label`, as screen readers read glyphs by their Unicode names.
 - **An icon set is allowed for two things only:**
   1. Third-party brand marks (YouTube, Spotify, Apple Music) where the mark is the clearest label. Use Simple Icons.
   2. A few action icons with no good glyph, such as copy and remove. Use Material Symbols, outline style.

package/README.md

@@ -1,67 +1,16 @@
-# Agentic Design Kits
+![The demo's home page in dark mode: "Swiss Minimal" in large bold type beside an abstract composition of black, grey and red shapes](https://raw.githubusercontent.com/danny-englander/agentic-design-kits/main/docs/home-dark.webp)
 
-[![CI](https://github.com/danny-englander/agentic-design-kits/actions/workflows/ci.yml/badge.svg)](https://github.com/danny-englander/agentic-design-kits/actions/workflows/ci.yml)
-[![Node 24+](https://img.shields.io/badge/node-24%2B-blue)](https://nodejs.org/)
-[![Astro 7](https://img.shields.io/badge/astro-7-blue)](https://astro.build/)
-[![Tailwind v4](https://img.shields.io/badge/tailwind-v4-blue)](https://tailwindcss.com/)
-[![License: MIT](https://img.shields.io/github/license/danny-englander/agentic-design-kits)](LICENSE)
-[![Last commit](https://img.shields.io/github/last-commit/danny-englander/agentic-design-kits)](https://github.com/danny-englander/agentic-design-kits/commits/main)
+[swissminimal.ch](https://www.swissminimal.ch)
 
-Design kits your AI agent can implement, for Astro and Tailwind v4.
+# Swiss Minimal Design Kit
 
-A kit here is not a library of components to copy and paste. It is a set of rules, and an agent that follows them: what each color is for, which weights to use, where a rule goes, and when not to add anything at all. Say what the site should do, and a coding agent picks the components, writes the code and checks it against the rules.
+A design kit your AI agent can implement, for Astro and Tailwind v4. Swiss / Bauhaus: type-led, flat color, thick rules, one typeface.
 
-## The kits
+It is not a library of components to copy and paste. It is a set of rules, and an agent that follows them: what each color is for, which weights to use, where a rule goes, and when not to add anything at all. Say what the site should do, and a coding agent picks the components, writes the code and checks it against the rules. See [Agents](https://www.swissminimal.ch/agents/) on the demo site.
 
-| Kit | Demo | The look | Source |
-| --- | --- | --- | --- |
-| **Swiss Minimal** | [swissminimal.ch](https://www.swissminimal.ch) | Swiss / Bauhaus: type-led, flat color, thick rules, one typeface (Overused Grotesk). One accent for each site, vermilion or verdigris. | the repository's root |
-| **Verdigris** | [verdigris.ch](https://verdigris.ch) | Swiss Minimal's strict grid, set in Cormorant, in copper green and copper, with engraved line work. No capitals anywhere. | [`verdigris/`](verdigris) |
+Swiss Minimal is one of the [Agentic Design Kits](https://github.com/danny-englander/agentic-design-kits). [Verdigris](https://www.npmjs.com/package/@agentic-design-kits/verdigris) is built on it.
 
-Swiss Minimal is the base. Verdigris is built on it: it uses Swiss Minimal's stylesheet, scripts and components as they are, and adds its own tokens, typeface and ornament on top. A fix to a shared component is made once, in Swiss Minimal, and both kits have it.
-
-Each demo site has an Agents page with prompts to start from: [swissminimal.ch/agents](https://www.swissminimal.ch/agents/) and [verdigris.ch/agents](https://verdigris.ch/agents/).
-
-## What a kit is made of
-
-Each kit has the same parts, written so that an agent can read them and a person can check the result.
-
-- **`DESIGN.md`:** the rules (color, type, layout, images, motion, accessibility, the Tailwind setup) and a "Do not" list.
-- **`COMPONENTS.md`:** the markup, behavior and do's and don'ts for each component.
-- **`AGENTS.md`** (also `CLAUDE.md`): notes for AI agents on three tasks: working on the kit, starting a new site with it, and restyling an existing one.
-- **`tokens.json`:** every token value, light and dark, with a note on what each is for.
-- **`kit/`:** the CSS (plain, with a Tailwind v4 entry point), a few small plain scripts and the Astro components.
-- **`fonts/`:** the kit's typeface.
-- **`demo/`:** a small Astro site that uses every component, and the tests that scan it.
-
-## In this repository
-
-The repository is one npm workspace. Each demo installs its kit as a package through that workspace, so it always runs the files in `kit/` and `fonts/` beside it.
-
-**Swiss Minimal**, at the root:
-
-- [`DESIGN.md`](DESIGN.md), [`COMPONENTS.md`](COMPONENTS.md), [`AGENTS.md`](AGENTS.md) and [`tokens.json`](tokens.json).
-- [`kit/`](kit): `tailwind.css`, `theme.css`, the scripts (`panel.js`, `new-dot.js`, `drawer.js`, `jump.js`, `marquee.js`, `file-pick.js`, `output.js`, `dialog.js`, `favorites.js`, `icon-controls.js`) and the Astro components.
-- [`fonts/`](fonts): Overused Grotesk, and Source Code Pro for code (both SIL OFL 1.1).
-- [`demo/`](demo): the site at swissminimal.ch.
-
-**Verdigris**, in [`verdigris/`](verdigris), with its own [`README`](verdigris/README.md):
-
-- [`DESIGN.md`](verdigris/DESIGN.md), [`COMPONENTS.md`](verdigris/COMPONENTS.md), [`AGENTS.md`](verdigris/AGENTS.md) and [`tokens.json`](verdigris/tokens.json).
-- [`verdigris/kit/`](verdigris/kit): only what makes it Verdigris: `tailwind.css`, `verdigris.css`, `fonts.css` and the components written there (`BaseLayout`, `Mark`, `Rosette`). `kit/shared/` passes on Swiss Minimal's components and scripts, so a site imports all of them from `@agentic-design-kits/verdigris`.
-- [`verdigris/fonts/`](verdigris/fonts): Cormorant (SIL OFL 1.1).
-- [`verdigris/demo/`](verdigris/demo): the site at verdigris.ch.
-
-**For both kits:**
-
-- [`TOOLING.md`](TOOLING.md): recipes for accessibility tests (Playwright and axe) and date-tagged releases, and a manual checklist.
-- [`scripts/`](scripts): the release and packing scripts.
-
-## Install a kit
-
-Both kits are on npm, under the `@agentic-design-kits` scope.
-
-Swiss Minimal:
+## Install
 
 ```bash
 npm install @agentic-design-kits/swiss-minimal
@@ -71,61 +20,33 @@ npm install @agentic-design-kits/swiss-minimal
 @import "@agentic-design-kits/swiss-minimal/tailwind.css";
 ```
 
-Verdigris, which brings Swiss Minimal with it:
-
-```bash
-npm install @agentic-design-kits/verdigris
-```
-
-```css
-@import "@agentic-design-kits/verdigris/tailwind.css";
-```
-
-To update, run `npm update`, or the same command again. Versions follow the release date: `2026.1113.0` is the first release on 13 November 2026, and `2026.1113.1` a second that day. The steps after that (the layout, the menu, a blog, code in Markdown) are under "Starting a new site with the kit" in each kit's `AGENTS.md`.
-
-## Run a demo
-
-Needs Node 24 or later (each demo's `.nvmrc` pins 24). Swiss Minimal:
+That one import, at the top of the site's global stylesheet, loads Tailwind and the kit. Components, types and scripts are imported by name:
 
-```bash
-cd demo
-nvm use
-npm install
-npm run dev
+```astro
+---
+import BaseLayout from '@agentic-design-kits/swiss-minimal/astro/BaseLayout.astro';
+import Hero from '@agentic-design-kits/swiss-minimal/astro/Hero.astro';
+import type { MenuItem } from '@agentic-design-kits/swiss-minimal/types';
+---
 ```
 
-For Verdigris, the same in `verdigris/demo`. The two can run side by side; each dev server takes the next free port.
+To update, run `npm update`. Versions follow the release date: `2026.1113.0` is the first release on 13 November 2026, and `2026.1113.1` a second that day.
 
-## Test a demo
+Each site picks one accent: vermilion (the default, a red leaning toward orange) or verdigris (the blue-green of copper patina), with `<BaseLayout accent="verdigris">` or `<html data-accent="verdigris">`.
 
-Builds the demo and scans every page, the menu tabs and the drawer for WCAG 2.1 AA problems in light and dark, plus behavior tests. See [`TOOLING.md`](TOOLING.md).
+## In the package
 
-```bash
-cd demo
-npx playwright install chromium
-npm test
-```
+- `DESIGN.md`: the rules (color, type, layout, images, motion, accessibility, the Tailwind setup) and a "Do not" list. Read it first.
+- `COMPONENTS.md`: the markup, behavior and do's and don'ts for each component.
+- `TOOLING.md`: recipes for accessibility tests (Playwright and axe), and a manual checklist.
+- `tokens.json`: every token value, light and dark, for both accents.
+- `kit/`: `tailwind.css`, `theme.css`, a few small plain scripts and the Astro components.
+- `fonts/`: Overused Grotesk, and Source Code Pro for code.
 
-For Verdigris, the same in `verdigris/demo`. A change to Swiss Minimal's `kit/` or `fonts/` changes Verdigris too, so run both. When Swiss Minimal adds, removes or renames a component or script, run this at the repository's root, so Verdigris passes it on:
-
-```bash
-npm run shared
-```
-
-## Releases
-
-Each release is a date tag on main (`v2026.10.19`, or `v2026.10.19.2` for a second that day) with a GitHub Release. One release covers both kits: its notes come from each demo's Features list (`demo/src/data/features.ts` and `verdigris/demo/src/data/features.ts`), and both kits are published to npm (`@agentic-design-kits/swiss-minimal`, `@agentic-design-kits/verdigris`) with the date as their version. At the repository's root:
-
-```bash
-npm run release -- --dry-run
-```
-
-```bash
-npm run release
-```
+## For AI agents
 
-The dry run shows the tag and notes and changes nothing. The real run asks first, then runs both demos' tests, pushes main, pushes the tag and publishes the GitHub Release. The push to main deploys both sites, and the pushed tag starts the Publish workflow ([`.github/workflows/publish.yml`](.github/workflows/publish.yml)), which puts both kits on npm. It only runs on a clean, up-to-date main, and stops if a new feature isn't dated today. Before releasing something a visitor would notice, add it at the top of that kit's `features.ts`. `npm run pack -- --tag v2026.11.10` writes the two package files to `packed/` without releasing, to look at what npm would get. The script is Dial Hopping's, adapted; see "Releases" in [`TOOLING.md`](TOOLING.md).
+The notes for agents are in the repository: [AGENTS.md](https://github.com/danny-englander/agentic-design-kits/blob/main/AGENTS.md) covers starting a new site with the kit and restyling an existing one. The demo site's [Agents](https://www.swissminimal.ch/agents/) page has prompts to start from.
 
 ## License
 
-MIT: see [`LICENSE`](LICENSE). The fonts in [`fonts/`](fonts) and [`verdigris/fonts/`](verdigris/fonts) keep their own license, SIL OFL 1.1.
+MIT. The fonts keep their own license, SIL OFL 1.1; each license file is beside its font in `fonts/`.

package/kit/astro/PostFeature.astro

@@ -1,9 +1,10 @@
 ---
-// One post at the top of a blog's index (PostFeature in COMPONENTS.md): text and a square image
-// 50/50 from 768px, stacked text first on phones. Put it where a Hero would go, before the
-// PostList of the other posts. Import the image so Astro knows its size; it is cropped square.
-// For something other than a raster image, such as an SVG that follows the theme, leave out
-// image and alt and fill the media slot instead.
+// One post at the top of a blog's index (PostFeature in COMPONENTS.md), where a Hero would go,
+// before the PostList of the other posts. Two layouts, picked by the image's shape unless
+// `layout` says otherwise: a square or portrait image sits beside the text, 50/50 from 768px and
+// cropped square; a landscape image goes under text that runs the full width, cropped 16:9.
+// Import the image so Astro knows its size. For something other than a raster image, such as an
+// SVG that follows the theme, leave out image and alt and fill the media slot instead.
 import { Image } from 'astro:assets';
 import type { ImageMetadata } from 'astro';
 import type { Post } from './types';
@@ -18,8 +19,12 @@ interface Props {
   /** The button's text. One or two words. */
   action?: string;
   level?: 'h1' | 'h2';
+  /** 'split': text beside a square image. 'wide': full-width text over a 16:9 image. By default,
+   * wide for a landscape image and split for any other. */
+  layout?: 'split' | 'wide';
 }
 const { post, image, alt, label = 'Featured', action = 'Read post', level: Title = 'h2' } = Astro.props;
+const wide = (Astro.props.layout ?? (image && image.width > image.height ? 'wide' : 'split')) === 'wide';
 
 // Dates are plain days, so format them in UTC or they can slip back a day.
 const date = new Date(post.date).toLocaleDateString('en-US', {
@@ -30,7 +35,7 @@ const date = new Date(post.date).toLocaleDateString('en-US', {
 });
 ---
 
-<article class="post-feature">
+<article class:list={['post-feature', { 'post-feature--wide': wide }]}>
   <div>
     <p class="post-feature-label">{label}</p>
     <Title class="post-feature-title">
@@ -46,11 +51,11 @@ const date = new Date(post.date).toLocaleDateString('en-US', {
     {
       image && (
         <Image
-          class="media media--1x1"
+          class:list={['media', wide ? 'media--16x9' : 'media--1x1']}
           src={image}
           alt={alt ?? ''}
-          widths={[480, 800, 1200, 1600].filter((w) => w <= image.width)}
-          sizes="(min-width: 768px) 50vw, 100vw"
+          widths={[480, 800, 1200, 1600, 2000].filter((w) => w <= image.width)}
+          sizes={wide ? '(min-width: 88rem) 88rem, 100vw' : '(min-width: 768px) 50vw, 100vw'}
           loading="eager"
           fetchpriority="high"
         />

package/kit/theme.css

@@ -420,6 +420,8 @@ html[data-drawer-open] .topbar { --tb-bg: var(--bar); --tb-fg: var(--bar-ink); }
   transition: background-color 150ms, color 150ms;
 }
 .chip:hover, .chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
+.chip:disabled { opacity: 0.6; }                                   /* faded like a disabled .choice */
+.chip:disabled:hover { background: transparent; color: var(--ink); }  /* and it doesn't fill */
 .chip-count { font-size: var(--size-100); font-variant-numeric: tabular-nums; opacity: 0.75; }  /* how many items it shows */
 .chip-group { display: flex; flex-wrap: wrap; gap: 0.5rem; }
 
@@ -729,7 +731,7 @@ html[data-drawer-open] { overflow: hidden; }  /* stop the page scrolling behind
 .post-list > li:last-child { border-bottom: 0; }
 @media (min-width: 640px) { .post-list > li { grid-template-columns: 10rem minmax(0, 1fr); } }
 .post-list time {
-  font-size: var(--size-100); font-weight: var(--weight-medium); line-height: 1.375;
+  font-size: var(--size-200); font-weight: var(--weight-medium); line-height: 1.375;
   font-variant-numeric: tabular-nums; color: var(--muted);
 }
 @media (min-width: 640px) { .post-list time { padding-top: 0.5rem; } }
@@ -770,7 +772,7 @@ html[data-drawer-open] { overflow: hidden; }  /* stop the page scrolling behind
 
 /* ---------- Post feature: one post at the top of a blog's index ---------- */
 /* Built like .hero--split: text and a square image 50/50 from 768px, stacked text first on
-   phones, with a hero's space around it. A small accent-text label, the title as a link, the
+   phones, with a hero's space around it (.post-feature--wide, below, stacks it at every width). A small accent-text label, the title as a link, the
    summary in lead size, a meta line and the primary button. The image is cropped square. */
 .post-feature { display: grid; gap: 2.5rem; padding: 3rem 0 4rem 0; }
 @media (min-width: 768px) {
@@ -778,7 +780,7 @@ html[data-drawer-open] { overflow: hidden; }  /* stop the page scrolling behind
 }
 .post-feature-label {
   margin: 0;
-  font-size: var(--size-100); font-weight: var(--weight-strong); letter-spacing: var(--label-tracking); text-transform: var(--label-case);
+  font-size: var(--size-200); font-weight: var(--weight-strong); letter-spacing: var(--label-tracking); text-transform: var(--label-case);
   color: var(--accent-text);
 }
 .post-feature-title {
@@ -789,8 +791,12 @@ html[data-drawer-open] { overflow: hidden; }  /* stop the page scrolling behind
 .post-feature-title a { color: inherit; text-decoration: none; }
 .post-feature-title a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 0.12em; }
 .post-feature-summary { margin: 1.5rem 0 0 0; max-width: 32rem; }
-.post-feature-meta { margin: 1rem 0 0 0; font-size: var(--size-100); line-height: 1.375; color: var(--muted); }
+.post-feature-meta { margin: 1rem 0 0 0; font-size: var(--size-200); line-height: 1.375; color: var(--muted); }
 .post-feature .btn { margin-top: 2rem; text-decoration: none; }
+/* Wide: the text runs the full width, the summary at a longer measure, and the image goes under
+   it cropped 16:9. For a landscape image. */
+@media (min-width: 768px) { .post-feature--wide { grid-template-columns: minmax(0, 1fr); gap: 3.5rem; } }
+.post-feature--wide .post-feature-summary { max-width: 48rem; }
 
 /* ---------- Post header: the top of an article ---------- */
 /* A small label back to the index, the title (between page-title and h2 in size, since titles

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agentic-design-kits/swiss-minimal",
-  "version": "2026.1113.1",
+  "version": "2026.1114.0",
   "description": "A type-led design kit: plain CSS, a few small scripts and Astro components, for Tailwind v4 sites.",
   "license": "MIT",
   "author": "Danny Englander",