remarque-tokens 0.14.0 → 0.16.0

package/AGENT_RULES.md

@@ -141,6 +141,9 @@ project/
 ├── tokens-core.css           # CORE tier: type scale, spacing, widths, radius, motion, prose machinery. NEVER override
 ├── 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
 ├── public/
@@ -200,6 +203,8 @@ Before considering any implementation complete, verify:
 - [ ] No scroll-triggered or entrance animations exist
 - [ ] 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,7 +4,117 @@ 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.14.0 — 2026-07-23
+## 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).
+
+### Added
+- **`essay.css`** (new subpath: `remarque-tokens/essay`, `remarque-tokens/essay.css`) —
+  optional Essay-archetype module, not aggregated into `tokens.css` or `prose.css`. Adds:
+  - `.remarque-sidenote-ref` / `.remarque-sidenote` — footnotes as in-flow margin notes.
+    Small-print inline block below `80rem` (`--color-border-bold`, the note's only visual
+    separator at that width); floats into the left gutter above it via a Tufte-style
+    negative-margin technique (`clear: left` stacks consecutive notes, no JS). Numbered
+    with CSS counters (`counter-reset` on `.remarque-prose`) rather than an authored number
+    — this package ships no build step, unlike the flagship's rehype transform. A repeat
+    citation of an already-noted footnote uses `.remarque-sidenote-ref--repeat` (styled
+    identically, doesn't advance the shared counter).
+  - `.remarque-footnotes` — a same-voice fallback for consumers without a DOM-reordering
+    build step: styles GFM's default end-of-document footnotes section instead of relocating
+    notes inline.
+  - `.remarque-toc-rail` — `position: sticky` right rail at `>= 80rem`, plain inline
+    collapsible `<details>` below it, same markup at every width (mono meta voice, small
+    caps rather than `text-transform: uppercase` — the flagship predates that rule).
+  - `.remarque-essay` — the opt-in 3-column grid shell (gutter / reading column / TOC
+    rail) that places the above two. Center track is `minmax(0, var(--content-reading))`,
+    identical to plain `.content-reading` centering; the grid never sets `max-width` or
+    `margin-inline` on its children, so the reading-column measure is unaffected with or
+    without this module.
+  - Single breakpoint, `>= 80rem` (1280px) — re-derived from `--content-standard` /
+    `--content-reading` / the core spacing scale rather than asserting the flagship's
+    literal rem measurements. Deleting the `@media` block leaves the correct
+    narrow-viewport/no-JS presentation, not a degraded one.
+  - `grid-row: 1 / span 999` on the rail, not `1 / -1` — ships with the flagship's
+    same-day grid-inflation fix already applied (`-1` resolves to row 1 with no explicit
+    `grid-template-rows`, inflating it to the rail's own height).
+- **`print.css`** — forces `.remarque-sidenote` back to inline mode and `.remarque-essay`
+  back to block flow under `@media print`, making good on this file's existing "when a
+  sidenotes module lands" comment. (`.remarque-toc-rail` was already caught by the
+  existing `nav` / `[class*="toc-"]` print-hiding rules — no change needed there.)
+- **REMARQUE.md "Essay Module"** — markup contract, when-to-use guidance, the
+  breakpoint-behavior table, and the grid-inflation provenance note.
+- **AGENT_RULES.md** — File Structure Convention lists `essay.css` (and, newly, `print.css`,
+  which the convention had never mentioned); Quality Checklist gains an Essay-module line.
+- **Demo site (`site/`)** — `writing/typography-as-interface` (the Essay archetype's VR
+  reference page) now exercises both sidenotes and the TOC rail. VR baselines updated:
+  `essay-{light,dark}-{desktop,mobile}.png` (4 files). New computed-style assertion:
+  the TOC rail's bounding box never overlaps `.remarque-prose`'s reading column at the
+  `1280px` desktop viewport.
+
+### Documentation
+- **README.md "Graduation"** — adds this release to the "Historical examples" list as
+  the worked example of the "optional module" destination.
+
+
 
 Triage bundle — prose/`.content-reading` pairing documented, `--motion-easing` bridged into the Tailwind v4 utility layer, USWDS/WCAG source citations added to the accessibility section (closes #23, closes #31, closes #32).
 

package/README.md

@@ -133,15 +133,21 @@ 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
-examples: measure compensation and the Gallery archetype graduated; the theme deck was
+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

@@ -496,7 +496,8 @@ Long-form writing. The core content type.
 - Low-noise footer navigation (previous/next)
 
 **Optionally includes:**
-- Side table of contents on desktop (outside reading column)
+- Side table of contents on desktop (outside reading column) — see "Essay Module" below for the sanctioned sticky-rail implementation
+- Sidenotes/footnotes as in-flow margin notes — same module, same rail-vs-gutter layout
 
 **Never includes:**
 - Sidebar content within the reading column
@@ -555,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
@@ -626,6 +628,317 @@ Cover-grid and catalog pages — a page whose primary content unit is a grid of
 
 ---
 
+## Essay Module
+
+An optional pair of Essay-archetype features — margin notes and a sticky
+table of contents — shipped as their own subpath, `remarque-tokens/essay`
+(`essay.css`), rather than aggregated into `tokens.css` or `prose.css`.
+Not every Essay wants either; both are opt-in.
+
+**Provenance.** Graduated from williamzujkowski.github.io's
+`rehype-sidenotes.mjs` + `global.css` sidenote/sticky-TOC implementation,
+ratified for upstreaming in [issue #52](https://github.com/williamzujkowski/remarque/issues/52)
+per the "Graduation" checklist in the package README — a footnote
+vocabulary Remarque otherwise entirely lacked (this spec, until now,
+permitted a side TOC at line ~499 without specifying anything about it).
+No site-specific value was copied; every dimension below is re-derived
+from tokens this package already ships (see `essay.css`'s header comment
+for the value-by-value mapping).
+
+### Markup contract
+
+```html
+<article class="remarque-essay">
+  <header class="content-reading">
+    <h1 class="text-display font-display">Essay Title</h1>
+  </header>
+
+  <nav class="remarque-toc-rail" aria-label="Table of contents">
+    <details open>
+      <summary>On this page</summary>
+      <ul>
+        <li><a href="#section-one">Section One</a></li>
+        <li><a href="#section-two">Section Two</a></li>
+      </ul>
+    </details>
+  </nav>
+
+  <div class="remarque-prose content-reading">
+    <h2 id="section-one">Section One</h2>
+    <p>
+      A claim worth a citation<a href="#note-1" id="note-1-ref"
+        class="remarque-sidenote-ref" aria-describedby="note-1"></a>.
+    </p>
+    <aside class="remarque-sidenote" id="note-1" role="note">
+      The note text, in real DOM order right after the paragraph that
+      cites it — not collected into an end-of-document section.
+    </aside>
+  </div>
+
+  <footer class="content-reading">...</footer>
+</article>
+```
+
+Requirements the CSS depends on:
+
+- `.remarque-sidenote-ref` and its matching `.remarque-sidenote` MUST
+  alternate in strict DOM order (ref, then note, then the next ref, then
+  its note...) — the module numbers them with CSS counters
+  (`counter-reset` on `.remarque-prose`), not an authored number, so an
+  out-of-order pair mislabels every note after it.
+- A footnote cited more than once: only the FIRST reference gets a
+  `.remarque-sidenote` after it; later citations of the same note use
+  `.remarque-sidenote-ref--repeat` (styled identically, does not advance
+  the counter) so the shared numbering doesn't skip.
+- `role="note"` on every `.remarque-sidenote` — `<aside>`'s implicit role
+  is `complementary`, a landmark; an essay with several notes would
+  otherwise scatter that many unlabeled landmark regions through the
+  page. `aria-describedby` on the reference (pointing at the note's `id`)
+  is optional but recommended.
+- `.remarque-toc-rail` wraps a plain `<details open>` — the SAME markup
+  at every viewport width, no JS breakpoint listener. `open` by default
+  is deliberate (see "Breakpoint behavior" below).
+
+**No build step required, and none shipped.** This module doesn't ship or
+depend on a rehype/remark transform — the contract above is satisfied by
+hand-authored HTML exactly as well as by a build-time relocation step. If
+your pipeline doesn't relocate GFM footnote definitions into DOM order
+(most don't, out of the box), style the default end-of-document
+`<section data-footnotes>` output with `.remarque-footnotes` instead —
+same mono/meta voice, without the DOM-reordering accessibility upgrade:
+
+```html
+<section class="remarque-footnotes">
+  <h2>Notes</h2>
+  <ol>
+    <li id="note-1">The note text. <a href="#note-1-ref">&#8617;</a></li>
+  </ol>
+</section>
+```
+
+Use `.remarque-sidenote` whenever you can relocate notes into reading
+order — that relocation is the actual accessibility win this module
+exists for. `.remarque-footnotes` is a same-voice fallback, not a lesser
+tier of support, for the common case where you can't (yet).
+
+### When to use
+
+Essay archetype only (sidenotes/a TOC rail are meaningless outside
+long-form prose). Reach for sidenotes on essays with real citations,
+asides, or sourcing that would otherwise interrupt the sentence; reach
+for the TOC rail on any essay long enough that "where am I" becomes a
+real question — roughly the same length threshold Reference/Docs pages
+already assume. Both are independent opt-ins: an essay can use one, the
+other, both, or neither without violating the archetype.
+
+### Breakpoint behavior
+
+Gated on a single `>= 80rem` (1280px) `@media` query — no other
+breakpoint, no JS:
+
+| Viewport | Sidenotes | TOC |
+|---|---|---|
+| `< 80rem` (narrow) | Small-print block, in-flow, right after the citing paragraph — bordered with `--color-border-bold` (a 3:1 functional border, since it's the note's only visual separator at this width) | Inline collapsible `<details>` in the reading column, native disclosure triangle |
+| `>= 80rem` (wide) | Floats into the LEFT margin gutter via a Tufte-style negative-margin technique, `clear: left` stacks consecutive notes, border relaxes to decorative `--color-border` (whitespace is now the real separator) | `position: sticky` in the RIGHT rail, `.remarque-essay` becomes a 3-column grid (gutter / reading column / rail) |
+
+The rail and margin notes always live OUTSIDE `--content-reading` — that
+is the entire point of the module. The center grid track is
+`minmax(0, var(--content-reading))`, identical to the plain
+`max-width: content-reading; margin-inline: auto` centering used
+everywhere else in Remarque; a TOC rail or a floated sidenote can widen
+the page shell, never the reading column itself. `.remarque-essay`'s grid
+placement rule only ever sets `grid-column` on its children — it never
+touches `max-width`/`margin-inline`, so the reading-column assertion
+this spec's Enforcement Checklist already covers holds unmodified with
+or without this module.
+
+Delete `essay.css`'s single `@media (min-width: 80rem)` block and the
+page still renders correctly — that IS the narrow-viewport presentation,
+not a degraded one. No JavaScript is required at either width. (The
+flagship implementation runs a small script to force `<details>` open on
+every breakpoint crossing; this module holds to "no JS required" and
+instead specifies `open` by default in the markup — a reader who
+manually collapses the TOC below the breakpoint and then widens their
+window keeps it collapsed until clicked again, a fully static cost this
+module accepts in exchange for not requiring a script tag.)
+
+### Provenance note: the grid-inflation lesson
+
+`.remarque-essay`'s TOC rail spans `grid-row: 1 / span 999`, not
+`1 / -1`. With no explicit `grid-template-rows` (as here), `-1` resolves
+to "the last explicit row line" — which, with zero explicit rows, is
+row 1. The flagship implementation shipped exactly that bug: the rail's
+own height inflated row 1, pushing the whole essay down and leaving a
+visible gap between the header and the first paragraph on wide
+viewports, fixed same-day. This module ships with the fix already
+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: