remarque-tokens 0.15.0 → 0.16.0

package/AGENT_RULES.md

@@ -142,6 +142,7 @@ project/
 ├── tokens-palette.css        # PALETTE tier: font slots, colors, accent, reading measure. Override freely, then run the audit
 ├── prose.css                 # .remarque-prose long-form styling (aggregated by tokens.css; own subpath for opt-out)
 ├── essay.css                 # Optional Essay module: sidenotes + sticky TOC rail (own subpath, NOT aggregated — import explicitly)
+├── broadsheet.css            # Optional Broadsheet pattern: masthead, lead, entry list, post kicker (own subpath, NOT aggregated — import explicitly)
 ├── print.css                 # Print stylesheet (own subpath, NOT aggregated — import explicitly)
 ├── theme.css                 # Tailwind v4 adapter (@theme inline) — import after tailwindcss + tokens
 ├── tailwind.config.js        # Tailwind v3 ONLY — v4 projects use theme.css instead
@@ -203,6 +204,7 @@ Before considering any implementation complete, verify:
 - [ ] Every image has a 1px border and mono caption
 - [ ] Every page maps to an archetype (Essay, Dossier, Notebook, Landing, Reference/Docs, Changelog, Gallery)
 - [ ] If the Essay uses sidenotes/a TOC rail (`remarque-tokens/essay`): `.remarque-sidenote-ref`/`.remarque-sidenote` alternate in strict DOM order, the rail never intrudes into `.remarque-prose`'s own measure, and the page renders correctly with `essay.css`'s `@media` block deleted (the narrow-viewport/no-JS fallback)
+- [ ] If a Landing/archive page uses the Broadsheet pattern (`remarque-tokens/broadsheet`): entry numerals are generated from `data-entry-number` via `attr()` (not `counter()`), the entry list stays a `<ul>` (not `<ol>` — the numeral is `aria-hidden` and decorative), and every kicker/dateline row uses `font-variant-caps: all-small-caps`, never `text-transform: uppercase`
 - [ ] Mobile version is roomy — not a compressed desktop layout
 - [ ] Mobile nav links have ≥44px touch targets
 - [ ] No pure white or pure black backgrounds

package/CHANGELOG.md

@@ -4,6 +4,65 @@ All notable changes to `remarque-tokens` are documented here. Token value
 changes always state the design rationale — downstream sites pin against
 these entries when syncing.
 
+## 0.16.0 — 2026-07-23
+
+Broadsheet pattern — masthead, lead article, numbered entry list, post-header kicker, graduated from the flagship (closes #36).
+
+### Added
+- **`broadsheet.css`** (new subpath: `remarque-tokens/broadsheet`, `remarque-tokens/broadsheet.css`) —
+  optional editorial Landing/archive pattern, not aggregated into `tokens.css` or `prose.css`.
+  Validated downstream on williamzujkowski.github.io (landing PR #213, archive/tag/post-header
+  PR #214) before upstreaming. Adds four primitives:
+  - `.remarque-masthead` — centered nameplate: mono small-caps kicker, oversized mixed
+    roman + italic `--font-display` title, mono dateline with hairline-rule separators.
+    **Fluid-type decision:** the flagship's `clamp(3.5rem, 9vw, 7.5rem)` title exceeds
+    `--text-display` (tokens-core.css's largest rung, `clamp(2.75rem, 5.5vw, 5rem)`) — no
+    existing token reaches it, so `.remarque-masthead` declares a file-scoped
+    `--remarque-masthead-size` whose min/max bounds are arithmetic on existing core spacing
+    tokens (`--space-7 + --space-2` = 3.5rem, `--space-10 - --space-2` = 7.5rem) rather than
+    new literals or a new core token — both resolve to the exact flagship values already
+    validated (contrast/gamut/font-floor audits + axe).
+  - `.remarque-lead` — mono kicker, large `--font-display` title (reuses `--text-display`
+    as-is — its range covers the flagship's closely enough that no exception was needed
+    here), underline-grow hover (`--motion-normal`/`--motion-easing`, reduced-motion-safe
+    for free via tokens-core.css's existing zeroing), italic lede with an italic drop cap
+    (same 3.5em/`initial-letter` mechanics as `.remarque-prose--dropcap` — one drop-cap
+    voice, not a second bespoke number).
+  - `.remarque-entry-list` / `.remarque-entry` — numbered entries via `data-entry-number`
+    + `attr()`, NOT `counter()` (counter-generated content doesn't reliably receive the
+    OpenType oldstyle-figure treatment across Newsreader's weights — a graduation finding
+    worth keeping). Numeral column sized in `ch` units (intrinsic to the glyphs) rather
+    than an asserted rem literal. `<ul>`, not `<ol>` — the numeral is `aria-hidden` and
+    decorative, an `<ol>` would double-announce the position. Collapses to one column via
+    a container query at `40rem` (exactly `--space-10` x 5, matching the flagship's `640px`
+    — container-query conditions can't reference custom properties/`calc()`, so this is
+    the literal the multiple resolves to).
+  - `.remarque-post-kicker` — the same mono kicker voice, scaled to sit above an
+    individual post's own title.
+  - `font-variant-caps: all-small-caps` on every kicker/dateline row, not
+    `text-transform: uppercase` — the flagship predates the Small Caps rule and used
+    uppercase throughout this pattern; corrected on the way upstream, same as the Essay
+    Module's TOC summary.
+- **`print.css`** — caps the masthead/lead title point sizes for print (28pt/18pt, matching
+  this file's existing `body { font-size: 11pt; }` convention) instead of printing the
+  on-screen fluid nameplate size; adds `.remarque-masthead`/`.remarque-lead`/
+  `.remarque-entry-list` to the existing full-width-on-print selector list.
+- **REMARQUE.md "Patterns"** — new top-level section (Broadsheet is its first entry),
+  markup contract, the fluid-type decision writeup, and when-to-use guidance. Landing
+  archetype's "Optionally includes" list now references it.
+- **AGENT_RULES.md** — File Structure Convention lists `broadsheet.css`; Quality Checklist
+  gains a Broadsheet-pattern line (`attr()` not `counter()`, `<ul>` not `<ol>`, small caps
+  not uppercase).
+- **Demo site (`site/`)** — `site/src/components/BroadsheetEntry.astro` (reference
+  lead/entry component); `writing/index` restyled as a broadsheet archive (masthead + lead
+  + entry list); `writing/against-decoration` gains the post-header kicker. New VR baseline:
+  `broadsheet-{light,dark}-{desktop,mobile}.png` (4 files, `writing` path added to `PAGES`).
+
+### Documentation
+- **README.md "Graduation"** — adds this release to the "Historical examples" list; the
+  "optional module" destination list now names the Broadsheet pattern alongside sidenotes/
+  TOC rail/palette deck.
+
 ## 0.15.0 — 2026-07-23
 
 Essay module — sidenotes + sticky TOC rail, graduated from the flagship (closes #52).

package/README.md

@@ -133,9 +133,10 @@ margin and should stay there. A local invention is upstreamable when **all four*
    spec amendment arguing the change.
 
 **Three destinations.** Core spec (rare — core is identity, the bar is a fork-level
-argument); optional module (sidenotes, TOC rail, palette deck); or *documented site-local
-pattern* — explicitly not shared. The zine layer that inspired this checklist is the
-exemplar of the third: sanctioned personality that would be diluted by generalizing it.
+argument); optional module (sidenotes, TOC rail, palette deck, the Broadsheet pattern); or
+*documented site-local pattern* — explicitly not shared. The zine layer that inspired this
+checklist is the exemplar of the third: sanctioned personality that would be diluted by
+generalizing it.
 
 **Process (single-maintainer scale, no ceremony):** open an issue with before/after
 screenshots and the token-purity check; record the decision in the changelog. Historical
@@ -143,7 +144,10 @@ examples: measure compensation and the Gallery archetype graduated; the essay
 sidenotes/sticky-TOC-rail pair graduated as an optional module
 ([#52](https://github.com/williamzujkowski/remarque/issues/52)); the theme deck was
 re-scoped on the way up ([#56](https://github.com/williamzujkowski/remarque/issues/56));
-the zine layer deliberately stayed local.
+the Broadsheet editorial pattern (masthead, lead article, numbered entry list, post-header
+kicker) graduated as an optional pattern module
+([#36](https://github.com/williamzujkowski/remarque/issues/36)); the zine layer
+deliberately stayed local.
 
 **Standing rulings** (ratified 3-0, 2026-07-23) on patterns the reviews kept re-flagging:
 

package/REMARQUE.md

@@ -556,6 +556,7 @@ The homepage or entry point. Sets the tone.
 - Recent entries or updates (3–5 max)
 - A brief "about" line
 - **CLI-tool landing only:** a single mono install command block (styled as prose `<pre>`, copy button allowed) — the one sanctioned interactive element on an otherwise CTA-free page — and an optional `--help`-output figure (follows the Plate convention, see Image Treatment)
+- **Editorial/archive landing:** the Broadsheet pattern's masthead + lead article + numbered entry list (own module, `remarque-tokens/broadsheet`) — see "Patterns" below
 
 **Never includes:**
 - Hero images or banners
@@ -774,6 +775,170 @@ applied so the next consumer doesn't rediscover it.
 
 ---
 
+## Patterns
+
+Optional, opt-in composition patterns for specific contexts — unlike the
+Essay Module above (one archetype, two related features), a "pattern" in
+this section is a small family of primitives meant to be composed
+together, shipped as its own subpath rather than aggregated.
+
+### Broadsheet
+
+The editorial Landing/archive pattern: a newspaper-broadsheet voice for
+the typography-maximalist end of the system. Own subpath,
+`remarque-tokens/broadsheet` (`broadsheet.css`) — not aggregated into
+`tokens.css` or `prose.css`.
+
+**Provenance.** Graduated from williamzujkowski.github.io's landing
+masthead and archive/tag/post-header implementation, validated in
+[PR #213](https://github.com/williamzujkowski/williamzujkowski.github.io/pull/213)
+(landing) and [PR #214](https://github.com/williamzujkowski/williamzujkowski.github.io/pull/214)
+(archive/tag/post-header) — all Remarque tokens, all audits + axe passing
+downstream before upstreaming — ratified in
+[issue #36](https://github.com/williamzujkowski/remarque/issues/36) per
+the "Graduation" checklist in the package README. No site-specific
+literal was copied; every dimension is re-derived from tokens this
+package already ships (see `broadsheet.css`'s header comment for the
+value-by-value mapping and the fluid-type decision below).
+
+Four primitives, composed independently — a page can use any subset:
+
+1. **Masthead** (`.remarque-masthead`) — centered nameplate: mono
+   small-caps kicker, an oversized mixed roman + italic `--font-display`
+   title, mono dateline with hairline-rule separators.
+2. **Lead article** (`.remarque-lead`) — a featured story: mono kicker
+   (`Section · N min read · Date`), a large `--font-display` title with
+   underline-grow hover, an italic lede paragraph with an italic drop cap.
+3. **Numbered entry list** (`.remarque-entry-list` / `.remarque-entry`) —
+   italic oldstyle-figure numerals in the outer margin (via
+   `data-entry-number`), a two-column grid (numeral / kicker+title+excerpt),
+   a hairline between entries, collapsing to one column in a narrow
+   container.
+4. **Post-header kicker** (`.remarque-post-kicker`) — the same mono
+   `Section · Reading time · Date` line, scaled down to sit above an
+   individual post's own title.
+
+### Markup contract
+
+```html
+<header class="remarque-masthead">
+  <p class="remarque-masthead-kicker"><span>Field Notes</span></p>
+  <h1 class="remarque-masthead-title">Quiet <em>Signals</em></h1>
+  <p class="remarque-masthead-dateline">
+    <span class="remarque-rule" aria-hidden="true"></span>
+    <span>July 23, 2026</span>
+    <span class="remarque-rule" aria-hidden="true"></span>
+  </p>
+</header>
+
+<article class="remarque-lead">
+  <p class="remarque-lead-kicker">
+    <span class="remarque-lead-section">Essay</span>
+    <span class="remarque-dot" aria-hidden="true">&middot;</span>
+    <span>8 min read</span>
+    <span class="remarque-dot" aria-hidden="true">&middot;</span>
+    <time datetime="2026-04-08">Apr 8, 2026</time>
+  </p>
+  <h2 class="remarque-lead-title"><a href="/writing/x">Title</a></h2>
+  <p class="remarque-lead-lede">Lede paragraph…</p>
+</article>
+
+<ul class="remarque-entry-list">
+  <li class="remarque-entry">
+    <span class="remarque-entry-numeral" data-entry-number="2" aria-hidden="true"></span>
+    <div class="remarque-entry-body">
+      <p class="remarque-entry-kicker">
+        <span class="remarque-entry-section">Essay</span>
+        <span class="remarque-dot" aria-hidden="true">&middot;</span>
+        <span>6 min read</span>
+        <span class="remarque-dot" aria-hidden="true">&middot;</span>
+        <time datetime="2026-03-29">Mar 29, 2026</time>
+      </p>
+      <h3 class="remarque-entry-title"><a href="/writing/y">Title</a></h3>
+      <p class="remarque-entry-excerpt">Excerpt…</p>
+    </div>
+  </li>
+</ul>
+
+<header class="remarque-post-header">
+  <p class="remarque-post-kicker">
+    <span class="remarque-post-kicker-section">Essay</span>
+    <span class="remarque-dot" aria-hidden="true">&middot;</span>
+    <span>8 min read</span>
+    <span class="remarque-dot" aria-hidden="true">&middot;</span>
+    <time datetime="2026-04-08">Apr 8, 2026</time>
+  </p>
+  <h1 class="text-display font-display">Post Title</h1>
+</header>
+```
+
+Requirements the CSS depends on:
+
+- `.remarque-entry-list` uses `<ul>`, not `<ol>` — the visual numeral is
+  decorative (`aria-hidden`) and generated from `data-entry-number`; an
+  `<ol>` would have a screen reader announce "1 of 2" alongside it, a
+  second voice for the same information.
+- Entry numerals are generated via `content: attr(data-entry-number)` on
+  `.remarque-entry-numeral::before`, NOT CSS `counter()`. `attr()` reads
+  the attribute of the element the pseudo-content is generated on, so
+  `data-entry-number` goes on `.remarque-entry-numeral` itself, not the
+  parent `<li>`.
+- Every kicker/dateline row (`.remarque-masthead-kicker`,
+  `.remarque-masthead-dateline`, `.remarque-lead-kicker`,
+  `.remarque-entry-kicker`, `.remarque-post-kicker`) uses
+  `font-variant-caps: all-small-caps` — never `text-transform: uppercase`
+  (the flagship predates the Small Caps rule and used uppercase
+  throughout this pattern; corrected on the way upstream, same as the
+  Essay Module's TOC summary).
+
+### Fluid-type decision: the masthead title
+
+The flagship's masthead title is `clamp(3.5rem, 9vw, 7.5rem)` — bigger
+than `--text-display` (tokens-core.css's largest type-scale rung,
+`clamp(2.75rem, 5.5vw, 5rem)`) ever reaches. Per issue #36's required
+call: express via an existing type token if the scale reaches that size,
+else a documented fluid exception using core tokens as bounds — never a
+new core token.
+
+The scale does not reach it, so `.remarque-masthead` declares a
+file-scoped custom property whose min/max bounds are arithmetic on
+tokens already in `tokens-core.css`, not new literals:
+
+```css
+--remarque-masthead-size: clamp(
+  calc(var(--space-7) + var(--space-2)),   /* 3rem + 0.5rem = 3.5rem */
+  9vw,
+  calc(var(--space-10) - var(--space-2))   /* 8rem - 0.5rem = 7.5rem */
+);
+```
+
+Both bounds resolve to the exact flagship values already validated
+downstream (contrast/gamut/font-floor audits + axe). The `9vw` rate is
+unchanged from the flagship — it continues the same escalating per-tier
+vw progression `tokens-core.css`'s own scale already uses (2.25vw
+section → 3.5vw title → 5.5vw display), one step further for a register
+one step past display. This property is declared inside `broadsheet.css`
+only, never added to `tokens-core.css` — it is local arithmetic on
+existing core tokens, not a new one.
+
+Everywhere else in the pattern, an existing token already covers the
+register: `.remarque-lead-title` uses `--text-display` as-is (its
+2.75–5rem range covers the flagship's 2.25–3.75rem closely enough that
+no exception is warranted), and `.remarque-entry-title` uses
+`--text-section` as-is (1.375–2rem vs. the flagship's 1.5–1.875rem).
+
+### When to use
+
+Landing/archive contexts only — a Landing page's masthead, or an
+archive/tag-listing page's lead-plus-entry-list. Typography-maximalist:
+this is the one pattern in Remarque where a title is allowed to outgrow
+`--text-display`, and it is deliberately reserved for exactly one
+register, not a general-purpose "big heading" utility. The post-header
+kicker is the one primitive meant for individual post pages rather than
+the archive itself.
+
+---
+
 ## Signature Moves
 
 These are the repeatable visual tells that make a Remarque site recognizable:

package/broadsheet.css

@@ -0,0 +1,441 @@
+/*
+ * Remarque — Broadsheet Pattern (masthead, lead, entry list, post kicker)
+ * ────────────────────────────────────────────────────────────────────
+ * Four editorial-layout primitives for Landing/archive contexts — the
+ * typography-maximalist end of the system. Newspaper-broadsheet voice:
+ * a nameplate, a featured lead story, a numbered contents list, and a
+ * post-header kicker line, built entirely from tokens already shipped
+ * in tokens-core.css / tokens-palette.css.
+ *
+ * PROVENANCE — graduated, not invented here. Validated downstream on
+ * williamzujkowski.github.io (landing PR #213, archive/tag/post-header
+ * PR #214), ratified for upstreaming in issue #36. Source: `astro-site/
+ * src/components/BroadsheetEntry.astro` + `global.css`'s "Broadsheet
+ * layout" block. As with the essay module (#52), no site-specific
+ * literal was copied — every dimension below is re-derived from this
+ * package's own tokens; see the inline comments for the value-by-value
+ * mapping and the few places the re-expression corrects the source
+ * (`text-transform: uppercase` -> `font-variant-caps: all-small-caps`,
+ * per REMARQUE.md "Small Caps", predates that rule same as essay.css's
+ * TOC summary did) or simplifies it (font-weight 300 has no Remarque
+ * core token; the italic/lede treatments below lean on color + style
+ * alone rather than introduce an un-tokenized weight).
+ *
+ * Own subpath (remarque-tokens/broadsheet, remarque-tokens/broadsheet.css)
+ * — NOT included by the tokens.css aggregator: the Landing/archive
+ * pattern is opt-in, most Remarque pages want none of it. Import
+ * explicitly, after prose.css if both are in use:
+ *   @import 'remarque-tokens/broadsheet.css';
+ * (string form — see AGENT_RULES.md Pitfall #6.)
+ *
+ * ─── MARKUP CONTRACT (summary — full version in REMARQUE.md) ──────────
+ *
+ *   <header class="remarque-masthead">
+ *     <p class="remarque-masthead-kicker"><span>Field Notes</span></p>
+ *     <h1 class="remarque-masthead-title">Quiet <em>Signals</em></h1>
+ *     <p class="remarque-masthead-dateline">
+ *       <span class="remarque-rule" aria-hidden="true"></span>
+ *       <span>July 23, 2026</span>
+ *       <span class="remarque-rule" aria-hidden="true"></span>
+ *     </p>
+ *   </header>
+ *
+ *   <article class="remarque-lead">
+ *     <p class="remarque-lead-kicker">
+ *       <span class="remarque-lead-section">Essay</span>
+ *       <span class="remarque-dot" aria-hidden="true">&middot;</span>
+ *       <span>8 min read</span>
+ *       <span class="remarque-dot" aria-hidden="true">&middot;</span>
+ *       <time datetime="2026-04-08">Apr 8, 2026</time>
+ *     </p>
+ *     <h2 class="remarque-lead-title"><a href="/writing/x">Title</a></h2>
+ *     <p class="remarque-lead-lede">Lede paragraph...</p>
+ *   </article>
+ *
+ *   <ul class="remarque-entry-list">
+ *     <li class="remarque-entry">
+ *       <span class="remarque-entry-numeral" data-entry-number="2"
+ *         aria-hidden="true"></span>
+ *       <div class="remarque-entry-body">
+ *         <p class="remarque-entry-kicker">...</p>
+ *         <h3 class="remarque-entry-title"><a href="/writing/y">Title</a></h3>
+ *         <p class="remarque-entry-excerpt">Excerpt...</p>
+ *       </div>
+ *     </li>
+ *   </ul>
+ *
+ *   <header class="remarque-post-header">
+ *     <p class="remarque-post-kicker">
+ *       <span class="remarque-post-kicker-section">Essay</span>
+ *       <span class="remarque-dot" aria-hidden="true">&middot;</span>
+ *       <span>8 min read</span>
+ *       <span class="remarque-dot" aria-hidden="true">&middot;</span>
+ *       <time datetime="2026-04-08">Apr 8, 2026</time>
+ *     </p>
+ *     <h1 class="text-display font-display">Post Title</h1>
+ *   </header>
+ *
+ * `<ul>` (not `<ol>`), deliberately, for the entry list: the visual
+ * numeral is decorative (`aria-hidden`, generated from `data-entry-
+ * number` via `attr()` — see below), and an `<ol>` would have screen
+ * readers announce "1 of 2" alongside it, doubling up on the same
+ * information in two voices. Matches the flagship's own choice.
+ */
+
+/* ─── Shared meta-voice bits ─────────────────────────────────────────
+ * Every kicker/dateline row below repeats these declarations rather
+ * than depending on `.text-label` as a mixin (tokens-core.css) — same
+ * non-mixin precedent as essay.css's TOC summary. All-small-caps, not
+ * `text-transform: uppercase` (REMARQUE.md "Small Caps": faux uppercase
+ * renders at cap-height with no optical correction; the flagship
+ * predates that rule and used `text-transform: uppercase` throughout
+ * this pattern). `--text-meta` (14px), not `--text-micro` (13px) — the
+ * words in a kicker ("Essay", "Field Notes") are read as content, not
+ * bare timestamps/fine print, the same distinction essay.css's sidenote
+ * marker already draws against the 13px floor. Tabular lining figures
+ * on every numeral here (dates, counts) per REMARQUE.md's Numerals
+ * rule — never mixed with the oldstyle register `.remarque-entry-
+ * numeral` uses below for the same reason `.text-meta` carries it.
+ */
+.remarque-masthead-kicker,
+.remarque-masthead-dateline,
+.remarque-lead-kicker,
+.remarque-entry-kicker,
+.remarque-post-kicker {
+  font-family: var(--font-mono);
+  font-size: var(--text-meta);
+  line-height: var(--leading-meta);
+  font-variant-caps: all-small-caps;
+  font-variant-numeric: tabular-nums lining-nums;
+  letter-spacing: var(--tracking-caps);
+  color: var(--color-muted);
+  margin: 0;
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5em;
+}
+
+.remarque-dot {
+  color: var(--color-border-bold);
+}
+
+.remarque-lead-section,
+.remarque-entry-section,
+.remarque-post-kicker-section {
+  color: var(--color-accent);
+  font-weight: var(--weight-medium);
+}
+
+/* Hairline flanking the masthead dateline — decorative only, so a
+   1px border-color rule (not -bold) is the right register; nothing
+   depends on it as a boundary. */
+.remarque-rule {
+  display: inline-block;
+  width: var(--space-6);
+  height: var(--border-width);
+  background: var(--color-border-bold);
+}
+
+/* Hairline divider between broadsheet sections (masthead/lead/entry-list) */
+.remarque-broadsheet-rule {
+  max-width: var(--content-reading);
+  margin: var(--space-6) auto;
+  border: 0;
+  border-top: var(--border-width) var(--border-style) var(--color-border);
+}
+
+/* ─── 1. Masthead ─────────────────────────────────────────────────────
+ * The nameplate. Centered, oversized, the one place in Remarque a
+ * title outgrows `--text-display` (tokens-core.css's largest type-
+ * scale rung, clamp(2.75rem, 5.5vw, 5rem)) — a Landing masthead is a
+ * register above even a Landing page's own `<h1>`.
+ *
+ * FLUID-TYPE DECISION (issue #36's required call): the existing scale
+ * does not reach the flagship's validated clamp(3.5rem, 9vw, 7.5rem).
+ * Rather than assert those as bare literals (or add a new core
+ * `--text-masthead` token, which the issue explicitly rules out), this
+ * is a documented, file-scoped fluid exception whose min/max BOUNDS are
+ * arithmetic on core spacing tokens already in tokens-core.css — not
+ * new constants:
+ *   min = --space-7 (3rem) + --space-2 (0.5rem)  = 3.5rem
+ *   max = --space-10 (8rem) - --space-2 (0.5rem) = 7.5rem
+ * both resolve to the exact flagship values that were already
+ * validated (contrast/gamut/font-floor audits + axe) downstream. The
+ * 9vw fluid rate is kept as-is: it continues the same escalating-per-
+ * tier vw progression tokens-core.css's own scale already uses
+ * (2.25vw section -> 3.5vw title -> 5.5vw display), one step further
+ * for a register one step past display. This custom property lives
+ * here, not in tokens-core.css — it is NOT a new core token, it is
+ * local arithmetic on existing ones, scoped to this opt-in pattern.
+ */
+.remarque-masthead {
+  --remarque-masthead-size: clamp(
+    calc(var(--space-7) + var(--space-2)),
+    9vw,
+    calc(var(--space-10) - var(--space-2))
+  );
+  max-width: var(--content-reading);
+  margin: var(--space-8) auto var(--space-6);
+  text-align: center;
+}
+
+.remarque-masthead-title {
+  font-family: var(--font-display);
+  font-size: var(--remarque-masthead-size);
+  /* Reuses --leading-display/--tracking-display rather than the
+     flagship's bespoke 0.92/-0.035em — a fully tokenized simplification
+     at a scale where the difference is not perceptible at normal
+     reading distance. */
+  line-height: var(--leading-display);
+  letter-spacing: var(--tracking-display);
+  /* Same --weight-display escape hatch .text-display/.text-title use
+     (tokens-core.css) — a palette can compensate thin serif hairlines
+     in dark mode (tokens-palette.css already does, 400 light / 500
+     dark) and the masthead picks that up for free. */
+  font-weight: var(--weight-display, var(--weight-regular));
+  color: var(--color-fg);
+  margin: 0;
+  font-feature-settings: "liga" 1, "kern" 1;
+  font-optical-sizing: auto;
+  font-synthesis: none;
+  text-wrap: balance;
+}
+
+.remarque-masthead-title em {
+  font-style: italic;
+  color: var(--color-fg-muted);
+}
+
+.remarque-masthead-dateline {
+  margin-block-start: var(--space-4);
+  justify-content: center;
+}
+
+/* ─── 2. Lead Article ─────────────────────────────────────────────────
+ * The featured story below the masthead (or standing alone atop an
+ * archive). Title register: --text-display reaches close enough to
+ * the flagship's clamp(2.25rem, 4.5vw, 3.75rem) (2.75-5rem vs.
+ * 2.25-3.75rem) that no exception is needed here — "express via
+ * existing type tokens" (issue #36), the masthead above is the one
+ * register that genuinely doesn't fit.
+ */
+.remarque-lead {
+  max-width: var(--content-reading);
+  margin: var(--space-7) auto var(--space-6);
+}
+
+.remarque-lead-kicker {
+  margin-block-end: var(--space-3);
+}
+
+.remarque-lead-title {
+  font-family: var(--font-display);
+  font-size: var(--text-display);
+  line-height: var(--leading-display);
+  letter-spacing: var(--tracking-display);
+  font-weight: var(--weight-display, var(--weight-regular));
+  margin: 0 0 var(--space-4);
+  text-wrap: balance;
+  font-optical-sizing: auto;
+  font-synthesis: none;
+}
+
+.remarque-lead-title a,
+.remarque-entry-title a {
+  color: var(--color-fg);
+  text-decoration: none;
+  /* Underline-grow hover (issue #36 "Findings"): AA-compliant, and
+     reduced-motion-safe for free — tokens-core.css zeroes
+     --motion-normal under prefers-reduced-motion, so this needs no
+     separate @media guard the way an opacity/transform animation
+     would. --motion-easing/--motion-normal replace the flagship's
+     hardcoded `220ms ease`. */
+  background-image: linear-gradient(var(--color-fg), var(--color-fg));
+  background-size: 0 1px;
+  background-repeat: no-repeat;
+  background-position: 0 95%;
+  transition: background-size var(--motion-normal) var(--motion-easing);
+}
+
+.remarque-lead-title a:hover,
+.remarque-lead-title a:focus-visible,
+.remarque-entry-title a:hover,
+.remarque-entry-title a:focus-visible {
+  background-size: 100% 1px;
+}
+
+.remarque-lead-lede {
+  font-family: var(--font-display);
+  font-size: var(--text-body-lg);
+  line-height: var(--leading-body);
+  font-style: italic;
+  font-weight: var(--weight-regular);
+  color: var(--color-fg-muted);
+  margin: 0;
+  text-wrap: pretty;
+  hanging-punctuation: first last;
+}
+
+/* Drop cap on italic text needs an explicit ::first-letter override
+   (issue #36 "Findings") — it cannot just inherit italic from the
+   parent's font-style the way a roman-text drop cap can, since this
+   pseudo-element re-asserts every typographic property of its own.
+   Same mechanics/sizing as prose.css's `.remarque-prose--dropcap`
+   (3.5em / 0.85 line-height / initial-letter progressive enhancement)
+   for one consistent drop-cap voice across the system, rather than a
+   second bespoke number. */
+.remarque-lead-lede::first-letter {
+  font-family: var(--font-display);
+  font-style: italic;
+  font-weight: var(--weight-display, var(--weight-regular));
+  font-size: 3.5em;
+  line-height: 0.85;
+  float: left;
+  padding: 0.08em 0.12em 0 0;
+  color: var(--color-fg);
+}
+
+@supports (initial-letter: 4) or (-webkit-initial-letter: 4) {
+  .remarque-lead-lede::first-letter {
+    initial-letter: 3.5;
+    -webkit-initial-letter: 3.5;
+    float: none;
+    padding: 0 0.08em 0 0;
+  }
+}
+
+/* ─── 3. Numbered Entry List ──────────────────────────────────────────
+ * `container-type: inline-size` — the 2-column/1-column collapse below
+ * responds to how much room the list itself has, not the viewport (a
+ * clean fit for a container query, matching the flagship's choice; it
+ * degrades correctly if this list is ever embedded in a narrower
+ * column than the page itself).
+ */
+.remarque-entry-list {
+  container-type: inline-size;
+  max-width: var(--content-reading);
+  margin: 0 auto;
+  padding: 0;
+  list-style: none;
+}
+
+.remarque-entry {
+  display: grid;
+  /* Numeral column sized in `ch` (intrinsic to the numeral glyphs
+     themselves), not an asserted rem literal — the flagship's
+     `minmax(3.5rem, 5rem)` re-expressed as "just wide enough for the
+     content," the more typographically disciplined choice per
+     REMARQUE.md's Decision Protocol when a core token doesn't already
+     cover a dimension. */
+  grid-template-columns: minmax(2.5ch, 4ch) 1fr;
+  gap: var(--space-4);
+  padding: var(--space-5) 0;
+  border-bottom: var(--border-width) var(--border-style) var(--color-border);
+  align-items: start;
+}
+
+.remarque-entry:last-child {
+  border-bottom: 0;
+}
+
+/* Oldstyle italic numerals in the outer margin, generated from
+   `data-entry-number` via `attr()` — NOT CSS `counter()` (issue #36
+   "Findings": counter-generated content does not receive the OpenType
+   oldstyle-figure treatment reliably across Newsreader's weights, only
+   real text/attr() content does). `attr()` reads from the element the
+   pseudo-content is generated on, so `data-entry-number` lives on
+   `.remarque-entry-numeral` itself, not the parent `<li>`. Both
+   `font-variant-numeric: oldstyle-nums proportional-nums` AND
+   `font-feature-settings: "onum" 1, "pnum" 1` are required together
+   for reliable rendering across weights — either alone is
+   inconsistent (issue #36 "Findings"). */
+.remarque-entry-numeral {
+  display: block;
+}
+
+.remarque-entry-numeral::before {
+  content: attr(data-entry-number);
+  font-family: var(--font-display);
+  font-style: italic;
+  font-size: var(--text-title);
+  line-height: 0.95;
+  color: var(--color-border-bold);
+  font-variant-numeric: oldstyle-nums proportional-nums;
+  font-feature-settings: "onum" 1, "pnum" 1;
+  text-align: right;
+  display: block;
+  padding-block-start: 0.1em;
+  user-select: none;
+  transition: color var(--motion-normal) var(--motion-easing);
+}
+
+.remarque-entry:hover .remarque-entry-numeral::before,
+.remarque-entry:focus-within .remarque-entry-numeral::before {
+  color: var(--color-accent);
+}
+
+.remarque-entry-body {
+  min-width: 0; /* allow the grid child to shrink below its content's intrinsic width */
+}
+
+.remarque-entry-kicker {
+  margin-block-end: var(--space-2);
+}
+
+.remarque-entry-title {
+  font-family: var(--font-display);
+  font-size: var(--text-section);
+  line-height: var(--leading-section);
+  letter-spacing: var(--tracking-title);
+  font-weight: var(--weight-medium);
+  margin: 0 0 var(--space-2);
+  text-wrap: balance;
+  font-optical-sizing: auto;
+  font-synthesis: none;
+}
+
+.remarque-entry-excerpt {
+  font-family: var(--font-body);
+  font-size: var(--text-body);
+  line-height: var(--leading-body);
+  color: var(--color-fg-muted);
+  margin: 0;
+  text-wrap: pretty;
+}
+
+/* Collapse to one column on a narrow container — `40rem`, exactly
+   `--space-10` (8rem) x 5. Container-query conditions can't reference
+   custom properties or `calc()` (unlike a plain declaration value, the
+   condition itself is parsed before the cascade resolves custom
+   properties, and Lightning CSS's minifier rejects a `calc()` there
+   outright) so this is spelled as the literal it resolves to, with the
+   token-multiple noted here rather than in the syntax — matches the
+   flagship's own `640px` breakpoint exactly. */
+@container (max-width: 40rem) {
+  .remarque-entry {
+    grid-template-columns: 1fr;
+    gap: var(--space-2);
+  }
+
+  .remarque-entry-numeral::before {
+    text-align: left;
+    font-size: var(--text-section);
+    padding-block-start: 0;
+  }
+}
+
+/* ─── 4. Post-Header Kicker ───────────────────────────────────────────
+ * The mono "Section · Reading time · Date" line above an individual
+ * post's title — the same kicker voice as the lead/entry rows above,
+ * scaled down to a single-line header. Pair with any Remarque heading
+ * class (`.text-display`, `.text-title`); this rule only styles the
+ * kicker line itself, not the title beneath it.
+ */
+.remarque-post-header {
+  margin-block-end: var(--space-7);
+}
+
+.remarque-post-kicker {
+  margin-block-end: var(--space-3);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remarque-tokens",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "engines": {
     "node": ">=18"
   },
@@ -70,6 +70,8 @@
     "./print.css": "./print.css",
     "./essay": "./essay.css",
     "./essay.css": "./essay.css",
+    "./broadsheet": "./broadsheet.css",
+    "./broadsheet.css": "./broadsheet.css",
     "./agent-rules": "./AGENT_RULES.md",
     "./spec": "./REMARQUE.md",
     "./package.json": "./package.json"
@@ -95,6 +97,7 @@
     "prose.css",
     "print.css",
     "essay.css",
+    "broadsheet.css",
     "scripts/lib/css-tokens.mjs"
   ]
 }

package/print.css

@@ -23,6 +23,13 @@
  * promise above — the essay module's own default (non-`@media`) CSS
  * already IS the narrow-viewport inline mode, so this rule only needs to
  * cancel the `>= 80rem` float, not author a print-specific layout.
+ *
+ * Broadsheet pattern (remarque-tokens/broadsheet.css, issue #36): the
+ * masthead/lead/entry-list nameplate register is tuned for a screen
+ * nameplate, not a printed page — a `--remarque-masthead-size` up to
+ * 7.5rem would burn most of a sheet on one word. Capped in point sizes
+ * here, matching this file's existing `body { font-size: 11pt; }`
+ * convention, rather than left to inherit the fluid clamp on paper.
  */
 
 @page {
@@ -113,6 +120,9 @@
   .content-standard,
   .content-wide,
   .remarque-essay,
+  .remarque-masthead,
+  .remarque-lead,
+  .remarque-entry-list,
   main {
     max-width: 100% !important;
     margin-inline: 0 !important;
@@ -122,6 +132,26 @@
     display: block !important;
   }
 
+  /* ─── Broadsheet: collapse the nameplate register ──────────────
+   * The fluid masthead/lead titles are a screen-only nameplate voice
+   * (issue #36) — cap them in points like the rest of this file's
+   * print type scale instead of printing at their full on-screen size. */
+  .remarque-masthead-title {
+    font-size: 28pt !important;
+    line-height: 1.15 !important;
+  }
+
+  .remarque-lead-title {
+    font-size: 18pt !important;
+  }
+
+  /* Entry numerals stay legible but no longer decorative-hover-scaled;
+     the hover-only accent color never applies in print anyway (no
+     pointer), this just guards the static color explicitly. */
+  .remarque-entry-numeral::before {
+    color: oklch(0.4 0 0) !important;
+  }
+
   body {
     font-size: 11pt;
     line-height: 1.5;

package/tokens.d.ts

@@ -1,6 +1,6 @@
 /*
  * Remarque design tokens — GENERATED from tokens.json by
- * scripts/tokens-json.mjs (v0.15.0). Do not edit — the CSS
+ * scripts/tokens-json.mjs (v0.16.0). Do not edit — the CSS
  * (tokens-core.css + tokens-palette.css) is the source of truth;
  * tokens.json is the intermediate machine-readable form this file is
  * generated from. Regenerate with: node scripts/tokens-json.mjs

package/tokens.json

@@ -2,7 +2,7 @@
   "$description": "Remarque design tokens — GENERATED from tokens-core.css + tokens-palette.css by scripts/tokens-json.mjs. Do not edit; the CSS is the source of truth.",
   "$extensions": {
     "remarque": {
-      "version": "0.15.0",
+      "version": "0.16.0",
       "tiers": {
         "core": "immutable identity — overriding forks the system",
         "palette": "sanctioned personalization surface — override freely, then run remarque-audit"