@agentic-design-kits/verdigris 2026.1113.0 → 2026.1113.2

package/COMPONENTS.md

@@ -909,10 +909,12 @@ The top of a blog post, in place of a `Hero` or `PageTitle`: a small label back
 
 In Astro, `<PostHeader title="…" lead="…" back={{ label: 'Blog', href: '/blog/' }} date="2026-10-20" author="…" minutes={4} tags={['Type']} />`. It writes Published, By, Reading and Topics, leaving out any you don't pass.
 
-- The label is the `label` style in `ink`, `accent-text` and underlined on hover. One or two words.
-- The title is bold and tight at `clamp(2.5rem, 6vw, 5rem)`, between `page-title` and `h2`, since post titles run longer. It stops at 18em wide, so a long title breaks into lines of a few words, and it wraps a long word.
-- The byline is a row of small `muted` labels over their values, under a scotch rule; it wraps on phones.
-- A cover image, if any, goes after the header: full width, 16:9 (`.media .media--16x9`), never behind the title.
+- Everything is centered, like a title page.
+- The label is 22px (`--size-300`) in `copper-text`, between two asterisms (⁂, hidden from screen readers), and turns `accent-text` and underlined on hover. One or two words.
+- The title is light at `--size-post-title` (`clamp(3.5rem, 7.4vw, 5.75rem)`), between `page-title` and `h2`, since post titles run longer. It stops at 18em wide, so a long title breaks into lines of a few words, and it wraps a long word.
+- The lead is italic at `clamp(1.625rem, 2.6vw, 2rem)`, at most 28em wide.
+- The byline is one 22px (`--size-300`) `muted` line of values with a copper lozenge (◆) between them, and no rule. Its labels (Published, By…) are hidden but stay in the markup for screen readers.
+- A cover image, if any, goes after the header: full width at 16:9 (`.media .media--16x9`) when it is landscape, centered at its own shape when it is not, never behind the title. A post with no picture takes a `.rule-fleuron` there instead, at the text's width.
 
 ## PostBody
 
@@ -920,13 +922,15 @@ Long-form text from Markdown: `.post-body` styles the plain elements inside it,
 
 **Markup.** `<div class="post-body"><Content /></div>`, after the `PostHeader`.
 
-- A 42rem measure by default (`max-w-*` on the same element changes it). Paragraphs and blocks are 1.25rem apart.
+- A 45rem measure (`max-w-*` on the same element changes it); center it under the header with `mx-auto`. Paragraphs are `clamp(1.375rem, 2vw, 1.625rem)` on 1.52 leading, a step up from the page's text, and blocks are 1.25rem apart.
 - `h2` is bold at 1.75rem, 2.25rem from 768px, with `space-12` above it and no rule: inside one article, space and size mark a new part, and the 2px rule is kept for the page's own sections; `h3` is the `title` size. Don't skip from the post's `h1` to an `h3`.
 - Links underline and turn `accent-text` on hover, like `.link`.
 - Lists have square markers (`ul`) or tabular numbers (`ol`), in `muted`.
-- A quote is large and bold beside a 6px `accent` edge, the same edge as the active row. Keep quotes short; one or two per post.
-- `hr` is a scotch rule. Images fill the measure, square, on `rule` until they load. A table has small headings over a 2px rule and 1px rules between rows.
+- A quote is large, light and italic in `accent-text`, centered between two 1px `rule` lines. Keep quotes short; one or two per post.
+- `hr` is an asterism (⁂) in `copper-text`. Images fill the measure, square, on `rule` until they load. A table has small headings over a 2px rule and 1px rules between rows.
 - Code uses the kit's own `pre` and `code` styles.
+- Markdown footnotes (`[^1]`) are numbered in `accent-text`; the notes sit at the end in 20px `muted` text under a 1px `ink` rule, numbered in `copper-text`.
+- `.post-body--end` ends the piece with an asterism, above the notes when there are any.
 
 **Don't.** Set a whole paragraph in a quote to make it stand out, or add colored callout boxes.
 
@@ -945,7 +949,7 @@ The previous and next posts, at the end of a post.
 
 In Astro, `<PostNav prev={{ title, href }} next={{ title, href }} />` (`PostLink` in `kit/astro/types.ts`). Previous is the older post, Next the newer one; leave either off at the ends, and it draws nothing when both are off.
 
-- A scotch rule, then a small `muted` label over each post's title, which underlines on hover.
+- A scotch rule, then a 20px `copper-text` label over each post's title, set at 1.75rem in the reading weight, which underlines on hover.
 - Stacked on phones with a 1px `rule` between; two columns from 640px, Next always on the right.
 - The arrows are the font's own glyphs, hidden from screen readers.
 

package/DESIGN.md

@@ -89,7 +89,7 @@ One family, `--font-sans` (Cormorant, falling back to Garamond, Iowan Old Style,
 - Pages end with a `Footer`: the scotch rule, the site name and its links.
 - A fixed bottom bar (`BottomBar`) is optional, and goes only on pages where something stays current while the page scrolls. On those pages, set `bar-h` to its height and reserve that space at the bottom of the page (`BaseLayout`'s `barHeight` prop does both). Without one, `--bar-h` is `0rem`.
 - A page that needs a name but no hero opens with a `PageTitle`: one big `h1` across the width of `.page`, on the paper or on a `bar` block.
-- A blog's index may open with a `PostFeature` (one post beside a square image) in place of a hero, kept at the top of every page when a `Pager` splits the list. A blog post opens with a `PostHeader`, its text in a `.post-body` at a 42rem measure, and ends with a `PostNav`.
+- A blog's index may open with a `PostFeature` (one post beside a square image) in place of a hero, kept at the top of every page when a `Pager` splits the list. A blog post opens with a `PostHeader`, centered, its text in a `.post-body` at a 45rem measure under it, and ends with a `PostNav`.
 - Everything is square: `radius-none`. `radius-round` is for six marks only: the spinner, the "new" dot (`.new-dot`), the drawer's "more below" arrow (`.drawer-more`), the radio button (`.radio`), the oval badge (`.ellipse`, at 50%) and the number circle (`.num-circle`, at 50%). The switch stays square.
 
 ## Iconography
@@ -108,7 +108,7 @@ One family, `--font-sans` (Cormorant, falling back to Garamond, Iowan Old Style,
 Ornament is what separates this kit from Swiss Minimal, so it has its own limits.
 
 - **Fleuron rule** (`.rule-fleuron`): a pause between parts of a page. Once a page at most.
-- **Asterism** (⁂): the end of a piece, or a Markdown `---` in a post.
+- **Asterism** (⁂): the end of a piece (`.post-body--end`), or a Markdown `---` in a post.
 - **Dagger** (†): a footnote mark.
 - **Manicule** (☞): a `.notice`, for one note a reader must not miss.
 - **Lozenge** (◆): separates metadata.
@@ -155,7 +155,7 @@ Photos, artwork, screenshots and product shots are welcome. The test is whether
 
 ## Components
 
-Every component is a plain CSS class in `kit/theme.css` (loaded through `kit/tailwind.css`); there is no JavaScript bundle, only a few small plain scripts for the pieces that need behavior. In short: **Skip link** (`.skip-link`), **Top bar** (`.topbar`), **Outlined button** (`.topbar-btn`, `.burger`), **Hover label** (`data-tip`), **Primary button** (`.btn`), **Secondary button** (`.btn-outline`, `.btn-group`), **Tertiary button** (`.btn-outline--tertiary`), **Slide-down panel** (`.panel`, with `kit/panel.js`), **Menu** (`.menu-list`, `.acc`, `.submenu`), **Panel tabs** (`.panel-tabs`, `.panel-tab`), **"New" dot** (`.new-dot`, with `kit/new-dot.js`), **Field** (`.field`), **Select** (`.select-wrap`, `.select`), **Date and time** (`.field` on `type="date"`, `time`…), **File picker** (`.file-pick`, with `kit/file-pick.js`), **Switch** (`.choice`, `.switch`), **Radio** (`.choice-group`, `.radio`), **Filter buttons** (`.chip`), **Favorite star** (`.fav-btn`, with `kit/favorites.js`), **Page accordion** (`.page-acc`), **List row** (`.row`), **Bottom bar** (`.bottom-bar`, optional), **Jump to current** (`.jump-btn`, with `kit/jump.js`), **Scrolling title** (`.marquee`, with `kit/marquee.js`), **Dialog** (`.dialog` on `<dialog>`, with `kit/dialog.js`), **Toast** (`.toast`), **Drawer** (`.drawer`, with `kit/drawer.js`), **Scotch rule** (`.rule-scotch`, `.rule-thick`), **Fleuron rule** (`.rule-fleuron`), **Plate** (`.plate`), **Notice** (`.notice`), **Rosette** (`.rosette`), **Mark** (`.mark`), **Drop cap** (`.post-body--cap`), **Icon actions** (`.icon-row`, `.icon-btn`, with `kit/icon-controls.js`), **Closing note** (`.closing-note`), **Dated list** (`.dated-list`), **Summary list** (`.summary-list`), **Output panel** (`.output`, with `kit/output.js`), **Code block** (`pre`, `.pre--bar`, `.pre-cmd`, `.pre-err`, `.tok-*`), **Ellipse** (`.ellipse`, `.ellipse--solid`), **Number circle** (`.num-circle`, `.num-circle--solid`, `.num-circle--accent`), **Activity indicators** (`.eq`, `.spinner`), **Image** (`.media`, `.figure`), **Hero** (`.hero`, `.hero--split`, `.hero--wide`), **Page title** (`.page-title`, `.page-title--bar`), **CTA** (`.cta`), **Card grid** (`.card-grid`, `.card`), **Post list** (`.post-list`), **Post feature** (`.post-feature`), **Pager** (`.pager`), **Post header** (`.post-header`, `.post-meta`), **Post body** (`.post-body`), **Post nav** (`.post-nav`), **Footer** (`.site-footer`, `.site-footer--bar`).
+Every component is a plain CSS class in `kit/theme.css` (loaded through `kit/tailwind.css`); there is no JavaScript bundle, only a few small plain scripts for the pieces that need behavior. In short: **Skip link** (`.skip-link`), **Top bar** (`.topbar`), **Outlined button** (`.topbar-btn`, `.burger`), **Hover label** (`data-tip`), **Primary button** (`.btn`), **Secondary button** (`.btn-outline`, `.btn-group`), **Tertiary button** (`.btn-outline--tertiary`), **Slide-down panel** (`.panel`, with `kit/panel.js`), **Menu** (`.menu-list`, `.acc`, `.submenu`), **Panel tabs** (`.panel-tabs`, `.panel-tab`), **"New" dot** (`.new-dot`, with `kit/new-dot.js`), **Field** (`.field`), **Select** (`.select-wrap`, `.select`), **Date and time** (`.field` on `type="date"`, `time`…), **File picker** (`.file-pick`, with `kit/file-pick.js`), **Switch** (`.choice`, `.switch`), **Radio** (`.choice-group`, `.radio`), **Filter buttons** (`.chip`), **Favorite star** (`.fav-btn`, with `kit/favorites.js`), **Page accordion** (`.page-acc`), **List row** (`.row`), **Bottom bar** (`.bottom-bar`, optional), **Jump to current** (`.jump-btn`, with `kit/jump.js`), **Scrolling title** (`.marquee`, with `kit/marquee.js`), **Dialog** (`.dialog` on `<dialog>`, with `kit/dialog.js`), **Toast** (`.toast`), **Drawer** (`.drawer`, with `kit/drawer.js`), **Scotch rule** (`.rule-scotch`, `.rule-thick`), **Fleuron rule** (`.rule-fleuron`), **Plate** (`.plate`), **Notice** (`.notice`), **Rosette** (`.rosette`), **Mark** (`.mark`), **Drop cap** (`.post-body--cap`), **Ending** (`.post-body--end`), **Icon actions** (`.icon-row`, `.icon-btn`, with `kit/icon-controls.js`), **Closing note** (`.closing-note`), **Dated list** (`.dated-list`), **Summary list** (`.summary-list`), **Output panel** (`.output`, with `kit/output.js`), **Code block** (`pre`, `.pre--bar`, `.pre-cmd`, `.pre-err`, `.tok-*`), **Ellipse** (`.ellipse`, `.ellipse--solid`), **Number circle** (`.num-circle`, `.num-circle--solid`, `.num-circle--accent`), **Activity indicators** (`.eq`, `.spinner`), **Image** (`.media`, `.figure`), **Hero** (`.hero`, `.hero--split`, `.hero--wide`), **Page title** (`.page-title`, `.page-title--bar`), **CTA** (`.cta`), **Card grid** (`.card-grid`, `.card`), **Post list** (`.post-list`), **Post feature** (`.post-feature`), **Pager** (`.pager`), **Post header** (`.post-header`, `.post-meta`), **Post body** (`.post-body`), **Post nav** (`.post-nav`), **Footer** (`.site-footer`, `.site-footer--bar`).
 
 ## With Tailwind v4
 

package/kit/verdigris.css

@@ -40,7 +40,7 @@
   --size-display-split: clamp(4rem, 9.5vw, 9.5rem);
   --size-page-title: clamp(3.5rem, 9vw, 8rem);
   --size-post-feature: clamp(2.75rem, 5.5vw, 5.25rem);
-  --size-post-title: clamp(3rem, 6vw, 5.5rem);
+  --size-post-title: clamp(3.5rem, 7.4vw, 5.75rem);
   --code-sample-size: var(--size-200); /* code on the Beautiful Code page: 20px, as --size-300 runs large here */
   --weight-body: 500;
   --weight-medium: 600;
@@ -105,6 +105,10 @@ body {
 .figure > figcaption, .post-body figcaption { font-style: italic; }
 /* Source Code Pro is far larger on its body than Cormorant, so code steps down to match. */
 code, kbd, samp { font-size: max(0.875rem, 0.8em); }
+/* A code block steps down further than theme.css's 0.9375em, or it reads nearly as large as
+   the text around it: about 20px beside 26px text, as on the Beautiful Code page, never under
+   the 18px floor. */
+pre { font-size: max(var(--size-100), 0.77em); }
 /* Numbers that line up need lining figures; old-style would wander. */
 .num, .chip-count, .panel-tab-num, .num-circle, .post-body ol { font-variant-numeric: lining-nums tabular-nums; }
 
@@ -161,6 +165,12 @@ code, kbd, samp { font-size: max(0.875rem, 0.8em); }
 .mark { flex: none; width: 1.625rem; height: 1.625rem; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
 
 /* ---------- Reading ---------- */
+/* The site name in the top bar: the shared layout sets it at 16px, under this kit's 18px floor
+   for Cormorant. It takes the floor on phones, where it shares the row with three buttons, and
+   the bar's own 20px from 640px. */
+.topbar-home { font-size: var(--size-100); }
+@media (min-width: 640px) { .topbar-home { font-size: var(--size-200); } }
+
 /* The drop cap is ::first-letter, so the word stays whole for screen readers. */
 .post-body--cap > p:first-of-type::first-letter {
   float: left; padding: 0.5rem 0.75rem 0 0;
@@ -175,3 +185,55 @@ code, kbd, samp { font-size: max(0.875rem, 0.8em); }
 }
 .post-body hr { border-top: 0; height: auto; overflow: visible; text-align: center; }
 .post-body hr::before { content: "\2042"; color: var(--copper-text); font-size: 2.125rem; line-height: 1; }
+
+/* A post is set on a centered axis, like a title page: the label in copper over the title,
+   the lead in italic, and the byline as one quiet line of values parted by lozenges. Its
+   labels (Published, By…) stay in the markup for screen readers. */
+.post-header { display: flex; flex-direction: column; align-items: center; text-align: center; }
+.post-header-label { margin-bottom: 1.25rem; font-size: var(--size-300); color: var(--copper-text); }
+a.post-header-label:hover { color: var(--accent-text); }
+/* An asterism each side of the label. Inline blocks, so the hover underline leaves them out. */
+.post-header-label::before, .post-header-label::after {
+  content: "\2042" / ""; display: inline-block; color: var(--copper-text); text-decoration: none;
+}
+.post-header-label::before { margin-right: 0.5em; }
+.post-header-label::after { margin-left: 0.5em; }
+.post-header-title { line-height: 0.98; letter-spacing: -0.015em; }
+.post-header-lead { max-width: 28em; margin-top: 1.25rem; font-size: clamp(1.625rem, 2.6vw, 2rem); line-height: 1.25; }
+.post-meta {
+  justify-content: center; gap: 0.25rem 1rem;
+  margin-top: 1.25rem; padding-top: 0; border-top: 0; background-image: none;
+  font-size: var(--size-300); color: var(--muted);
+}
+.post-meta > div { display: flex; gap: 1rem; align-items: baseline; }
+.post-meta > div + div::before { content: "\25C6" / ""; color: var(--copper-text); }
+.post-meta dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
+.post-meta dd { margin: 0; }
+
+/* Body text a step up from the page's, at a 45rem measure. */
+.post-body { max-width: 45rem; }
+.post-body p { font-size: clamp(1.375rem, 2vw, 1.625rem); line-height: 1.52; }
+.post-body blockquote p { font-size: inherit; line-height: inherit; }
+
+/* The end of a piece (.post-body--end): an asterism, then the notes, if any, under a rule. */
+.post-body--end::after, .post-body--end .footnotes::before {
+  content: "\2042" / ""; display: block; margin-top: 2.5rem; text-align: center;
+  color: var(--copper-text); font-size: 2.125rem; line-height: 1;
+}
+.post-body--end:has(.footnotes)::after { content: none; }
+.post-body .footnotes { margin: 0; font-size: var(--size-200); line-height: 1.4; color: var(--muted); }
+.post-body .footnotes::before { margin-bottom: 2rem; }
+.post-body .footnotes ol { margin: 0; padding: 0.75rem 0 0 0; border-top: 1px solid var(--ink); list-style: decimal inside; }
+.post-body .footnotes li::marker { color: var(--copper-text); }
+.post-body .footnotes p { display: inline; font-size: inherit; line-height: inherit; }
+/* The number in the text is a superscript, so it can drop the underline; the way back sits in
+   the note's own text, so it keeps one. */
+.post-body :is([data-footnote-ref], [data-footnote-backref]) { margin-left: 0.125rem; color: var(--accent-text); }
+.post-body [data-footnote-ref] { text-decoration: none; }
+.post-body :is([data-footnote-ref], [data-footnote-backref]):hover { color: var(--copper-text); }
+
+/* The previous and next posts: copper labels over the titles, set in the reading weight. */
+.post-nav { margin-top: 4.5rem; }
+.post-nav a { padding-top: 1.25rem; }
+.post-nav-label { font-size: var(--size-200); color: var(--copper-text); }
+.post-nav-title { font-size: var(--size-500); font-weight: var(--weight-body); letter-spacing: 0; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agentic-design-kits/verdigris",
-  "version": "2026.1113.0",
+  "version": "2026.1113.2",
   "description": "A design kit in Cormorant, copper green and engraved line work, for Astro and Tailwind v4 sites. Built on Swiss Minimal.",
   "license": "MIT",
   "author": "Danny Englander",
@@ -43,7 +43,7 @@
     "./*.js": "./kit/shared/*.ts"
   },
   "dependencies": {
-    "@agentic-design-kits/swiss-minimal": "2026.1113.0"
+    "@agentic-design-kits/swiss-minimal": "2026.1113.2"
   },
   "peerDependencies": {
     "astro": ">=7.0.0",

package/tokens.json

@@ -337,7 +337,7 @@
    },
    {
     "name": "size-post-title",
-    "value": "clamp(3rem, 6vw, 5.5rem)",
+    "value": "clamp(3.5rem, 7.4vw, 5.75rem)",
     "usage": "Post header title, fluid."
    },
    {