gp-dimm-city 1.2.0 → 1.3.0

package/CHANGELOG.md

@@ -7,6 +7,71 @@ cut a version that has no `## [X.Y.Z]` heading below.
 
 ## [Unreleased]
 
+## [1.3.0] - 2026-10-11
+
+### Changed
+
+- **The die chip now covers every wording of the instruction and no longer
+  disturbs the line it sits in.** Besides `ROLL THE DIE!`, the chip wraps
+  `ROLL A DIE!`, `ROLLS A DIE!` and `ROLLING THE DIE!` (uppercase, as written;
+  the text is never altered). It is redrawn as a stamped label (cream fill,
+  blood-red lettering, magenta rule and offset shadow) set as a plain inline
+  box, so a line holding a chip keeps the line height of the lines around it
+  and a chip never splits across two lines. Headings are left as plain heading
+  text. `--dc-roll-the-die-color` and `--dc-roll-the-die-border` work as before. (#18)
+- **A run of cards or gear entries can pack two-up** (#15). Core's `.gp-grid-2` and
+  `.gp-grid-3` did nothing on a `@section` or `@column-panel`: the plugin's
+  float-containment default (`display: flow-root`) sat in a later cascade layer
+  and beat core's `display: grid` at any specificity, so every card took a full
+  row. The default now steps aside for the two grid classes, and the header bar
+  and preamble paragraph of a grid panel span the first row.
+  `@column-panel .gp-grid-2 .dc-allow-split` is the gear and item layout; the
+  design guide's Gear section shows it.
+
+### Fixed
+
+- A heading word wider than its box now breaks instead of running under the
+  next column or being clipped at the edge. This applies to `h1`-`h6` and the
+  `.dc-h3`-`.dc-h6` looks in every context (a two-column run is about 3.4in
+  per column), not only inside cards. Headings whose words fit are unchanged,
+  and an author's soft hyphen (`­`) still picks the break. (#13)
+- In a loose bulleted list (blank lines between items) the `»` bullet no longer
+  prints alone on a line above the item's text. A loose item's text is wrapped
+  in a paragraph, so the bullet is now drawn on that first paragraph and sits
+  inline with the first line, in alerts and callouts too. Tight lists and
+  every other list render exactly as before. (#17)
+- **`@npc-stat` blocks with `####` entries no longer split a creature across
+  pages or columns** (#16). The block may now break between entries (so
+  `@npc-stat .gp-columns-2` no longer jumps whole to the next page and leaves
+  a large empty area), the title bar stays with the first entry, and each
+  entry's name, stat lines and traits are kept together. Add `.dc-allow-split`
+  for an unusually long entry. A block with no `####` is unchanged.
+- The chapter opener's `# Title` is never split across two sheets: it keeps
+  together and stays with the block after it, so a long opener moves the
+  whole title to the next page instead of leaving one line of it at the
+  foot of the page before. (#12)
+- A callout label (`@callout gear label="SPECS"`, `[!NOTE]`, any variant) no
+  longer sits alone at the foot of a column or page with its body in the next
+  one: `.dc-alert-label` now carries `break-after: avoid`, which matters in the
+  multicol runs where a callout is allowed to split. A `@column-panel` header
+  bar can still be left at a page foot when its first block is not a
+  paragraph; that is a Chromium limit (it ignores `break-after: avoid` on a
+  `column-span: all` box), documented in `section.css`. (#14)
+- **A split column panel that ends in an `@card` or `@outcome` shrinks to its
+  content** (#15). Both drew a decoration with an absolutely positioned box,
+  which stopped Chromium balancing the panel's last fragment: it ran the full
+  page height, so the next panel could not start beneath it. The `@card` body's
+  decorative tick is now the skill card's alone (it was never part of the
+  `@card` primitive's tokens), and the outcome ladder's inner hairline is an
+  inset shadow.
+- **A column panel that ends flush with the page foot no longer spills its
+  bottom edge onto an extra page** (#15). The panel's bottom padding and rule
+  are painted as shadows below a box that ends with its content, so there is
+  no trailing box edge to push to the next sheet. Same picture, same spacing;
+  a neighbour with a larger top margin than the panel's bottom margin can now
+  sit up to 10px closer, because the padding that used to sit inside the panel
+  no longer adds to that gap.
+
 ## [1.2.0] - 2026-10-10
 
 Requires Gutterpress 0.11.16 or newer (the desktop app or CLI): older

package/components.yaml

@@ -202,7 +202,7 @@ components:
     css: styles/components/section.css
     unstyled: [dc-gear]
     breaks: "break-inside: avoid (via .dc-card)"
-    notes: "Renders as a plain .dc-card: nothing has ever styled .dc-gear (the only rules are inside the GEAR ENTRY tombstone comment in data.css). Reviving the treatment is a design decision — see that comment. Design guide only."
+    notes: "Renders as a plain .dc-card: nothing has ever styled .dc-gear (the only rules are inside the GEAR ENTRY tombstone comment in data.css). Reviving the treatment is a design decision — see that comment. Design guide only. A long run packs two-up in a core grid: `@column-panel .gp-grid-2 .dc-allow-split`."
 
   - name: lede
     status: live
@@ -403,12 +403,13 @@ components:
   - name: roll-the-die
     status: live
     origin: plugin
-    recipe: "ROLL THE DIE!  (automatic on the canonical text in markdown prose; code spans and raw HTML are left alone)"
+    recipe: "ROLL THE DIE!  (automatic in markdown prose, uppercase only: ROLL|ROLLS|ROLLING + A|THE + DIE! — e.g. ROLL A DIE!, ROLLS A DIE!, ROLLING THE DIE!; code spans, raw HTML and headings are left alone)"
     emits: span.dc-roll-the-die
     css: styles/components/cards.css
     tokens: [--dc-roll-the-die-color, --dc-roll-the-die-border]
-    usage: ["ROLL THE DIE!"]
+    usage: ["ROLL THE DIE!", "ROLL A DIE!", "ROLLS A DIE!", "ROLLING THE DIE!"]
     breaks: none
+    notes: "A plain inline box (stamped label look): its padding and border paint around the text without making the line taller, so a line with a chip is the same height as one without. It never wraps: a chip that would straddle a line end moves to the next line whole."
 
   - name: img-wrapper
     status: live
@@ -496,6 +497,7 @@ components:
       - --dc-npc-stat-label-color
       - --dc-npc-stat-rule
       - --dc-npc-stat-rule-width
+    breaks: "a block with #### entries breaks between entries, never inside one (keep-with-next chain; .dc-allow-split lets a long entry split); a block with no #### stays whole"
 
   - name: chapter-start
     status: live

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gp-dimm-city",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Dimm City design system for Gutterpress: the markdown-it macros (@skill, @specialty, @learning-path, @callout, …), print stylesheets, design tokens, fonts and page templates the Dimm City TTRPG books are set in.",
   "type": "module",
   "main": "plugin.js",

package/plugin.js

@@ -58,7 +58,8 @@
  *                          before core's layout transform; anywhere else it is
  *                          core's section continuation)
  *   (chapter-opener composite is now markup-driven — see CSS notes below)
- *   `ROLL THE DIE!`      → span.dc-roll-the-die
+ *   `ROLL THE DIE!` (also ROLL A DIE!, ROLLS A DIE!, ROLLING THE DIE!)
+ *                        → span.dc-roll-the-die
  *   an image-only paragraph gets p.dc-img-wrapper
  *
  * GFM ALERT SYNTAX:
@@ -214,7 +215,8 @@ function buildStickerChain(items) {
   return html;
 }
 
-const ROLL_THE_DIE_TEXT = 'ROLL THE DIE!';
+// ROLL THE DIE! / ROLL A DIE! / ROLLS A DIE! / ROLLING THE DIE! — uppercase only.
+const ROLL_THE_DIE_PATTERN = /ROLL(?:S|ING)? (?:A|THE) DIE!/g;
 
 function isWordChar(char) {
   return char !== '' && /[A-Za-z0-9_]/.test(char);
@@ -231,17 +233,16 @@ function splitRollDieText(token, state) {
   const content = token.content || '';
   const replacement = [];
   let cursor = 0;
-  let searchFrom = 0;
-
-  while (searchFrom < content.length) {
-    const index = content.indexOf(ROLL_THE_DIE_TEXT, searchFrom);
-    if (index === -1) break;
+  const pattern = new RegExp(ROLL_THE_DIE_PATTERN.source, 'g');
+  let match;
 
+  while ((match = pattern.exec(content)) !== null) {
+    const index = match.index;
     const before = index > 0 ? content[index - 1] : '';
-    const end = index + ROLL_THE_DIE_TEXT.length;
+    const end = index + match[0].length;
     const after = end < content.length ? content[end] : '';
     if (isWordChar(before) || isWordChar(after)) {
-      searchFrom = index + 1;
+      pattern.lastIndex = index + 1;
       continue;
     }
 
@@ -249,14 +250,13 @@ function splitRollDieText(token, state) {
       replacement.push(copyTextToken(token, content.slice(cursor, index), state));
     }
 
-    const rollToken = copyTextToken(token, ROLL_THE_DIE_TEXT, state);
+    const rollToken = copyTextToken(token, match[0], state);
     rollToken.type = 'dc_roll_the_die';
     rollToken.tag = 'span';
     rollToken.nesting = 0;
     replacement.push(rollToken);
 
     cursor = end;
-    searchFrom = end;
   }
 
   if (replacement.length === 0) return null;
@@ -288,8 +288,10 @@ function updateRawHtmlStack(html, stack) {
 }
 
 function dcRollDieTransform(state) {
-  state.tokens.forEach(token => {
+  state.tokens.forEach((token, i) => {
     if (token.type !== 'inline' || !Array.isArray(token.children)) return;
+    // A heading is already display type: its wording stays plain heading text.
+    if (i > 0 && state.tokens[i - 1].type === 'heading_open') return;
 
     const children = [];
     const rawHtmlStack = [];

package/styles/components/callouts.css

@@ -141,7 +141,8 @@
   margin-bottom: 0.04in;
 }
 
-.dc-alert li::before {
+.dc-alert li::before,
+.dc-alert li > p:first-child::before {
   color: var(--dc-alert-border);
 }
 
@@ -156,6 +157,11 @@
   letter-spacing: var(--dc-alert-label-spacing);
   margin-bottom: var(--dc-alert-label-margin);
   color: var(--dc-alert-label-color);
+  /* The label is a `span` (display: block), so core's heading rule does not
+     reach it. A callout may fragment in a multicol run (dc-native.css §8), and
+     without this the label can sit alone at a column or page foot with its
+     body in the next one. */
+  break-after: avoid;
 }
 
 /* ── Variant: Note (player-facing, default) ─────────────────────────────── */

package/styles/components/cards.css

@@ -387,7 +387,14 @@
    variant (above), which shrinks each card vertically so 2 fit per page, or
    cutting skill body text length at the markdown level. */
 
-.dc-card-body::before {
+/* Scoped to the skill card on purpose. This mark is an absolutely positioned
+   box, and an absolutely positioned box inside a multicol run stops Chromium
+   balancing the run's last fragment: it stretches to the full page height
+   instead of shrinking to its content, so a `@column-panel .gp-columns-2`
+   that ends in a `@card` took a page of its own and spilled its bottom edge
+   onto one more. The `@card` primitive shares the `.dc-card-body` class and
+   never meant to carry this tick (its tokens are the skill card's). */
+.dc-skill-card > .dc-card-body::before {
   content: '';
   position: absolute;
   top: 10px;
@@ -475,21 +482,35 @@
   font-weight: 600;
 }
 
-/* ROLL THE DIE! emphasis span — token: --dc-roll-the-die-color (default --blood)
-   --crimson default failed at 2.64:1 on the skill-card paper-aged substrate;
-   --blood is 5.07:1 there. Per-component overrides via the token are unchanged. */
+/* ROLL THE DIE! emphasis chip — tokens: --dc-roll-the-die-color (text, default
+   --blood), --dc-roll-the-die-border (default --hud-magenta).
+   A stamped label for an instruction to act. It is a plain non-replaced
+   `display: inline` box on purpose: an inline box's vertical padding, border
+   and shadow paint around its text without adding to the line box, so a line
+   holding a chip is exactly as tall as one without, and nothing around it
+   moves. `line-height: 0` keeps the chip's own font from growing the line,
+   the font is smaller than the body, and `white-space: nowrap` moves a chip that
+   would straddle a line end to the next line whole (it still adds no height).
+   `box-decoration-break: clone` keeps both edges if one ever does fragment.
+   The fill is opaque paper, so contrast is fixed whatever it sits on: --blood on --paper-cream is 7.7:1
+   (it failed at 2.64:1 on skill-card paper-aged as --crimson text). */
 .dc-roll-the-die {
-    font-family: var(--font-display);
-    font-size: 8pt;
-    font-weight: 700;
-    color: var(--dc-roll-the-die-color);
-    letter-spacing: 0.05em;
-    text-transform: uppercase;
-    display: inline-block;
-    vertical-align: middle;
-    background-color: var(--paper-aged);
-    padding: 0.5em;
-    border: 2px dashed var(--dc-roll-the-die-border);
+  display: inline;
+  font-family: var(--font-display);
+  font-size: 0.8em;
+  font-weight: 700;
+  line-height: 0;
+  white-space: nowrap;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--dc-roll-the-die-color);
+  background-color: var(--paper-cream);
+  padding: 0.14em 0.35em;
+  margin-inline: 0.05em;
+  border: 1.5pt solid var(--dc-roll-the-die-border);
+  border-bottom-width: 3pt;
+  box-shadow: 1pt 1pt 0 var(--dc-roll-the-die-border);
+  box-decoration-break: clone;
 }
 
 /* ── AP base + author-facing variants ─────────────────────────────────── */

package/styles/components/data.css

@@ -215,14 +215,15 @@
   background: var(--dc-outcomes-surface);
   position: relative;
   break-inside: avoid;
-}
-
-.dc-outcomes::after {
-  content: '';
-  position: absolute;
-  inset: 4px;
-  border: 1px solid var(--dc-outcomes-inner-border);
-  pointer-events: none;
+  /* Inset hairline, 4px in from the frame: a 4px ring of the surface over a
+     5px ring of the hairline colour leaves a 1px line between them. It is a
+     shadow, not an absolutely positioned `::after` box: an absolutely
+     positioned box inside a multicol run stops Chromium balancing the run's
+     last fragment (it stretches to the full page height), which a
+     `@column-panel .gp-columns-2` ending in an `@outcome` showed. */
+  box-shadow:
+    inset 0 0 0 4px var(--dc-outcomes-surface),
+    inset 0 0 0 5px var(--dc-outcomes-inner-border);
 }
 
 .dc-outcomes-label {

package/styles/components/images.css

@@ -170,7 +170,7 @@
      --dc-section-bg      → panel background surface
      --dc-section-accent  → left strip / top border accent color        */
 
-/* Float-containment DEFAULT — display at ZERO specificity on purpose.
+/* Float-containment DEFAULT.
    flow-root makes the card a block formatting context so it CONTAINS floated
    children (.dc-sidebar, a book's floated art, fiction-excerpt art — all
    float:right). Without it a section whose trailing content is a float
@@ -182,14 +182,16 @@
    Safe w.r.t. margin collapsing: .section's non-zero vertical padding
    already blocks parent/child margin collapse, so flow-root changes no
    spacing for any variant that keeps that padding.
-   `:where()` keeps this a default, not a mandate: theme CSS loads after
-   core at equal specificity, so a class-strength `.section { display }`
-   silently beat core's layout vocabulary — measured: `.gp-grid-2` on a
-   `@section` computed flow-root (silent no-op) while the same class on a
-   `@page` worked. Zero specificity lets .gp-grid-* / .gp-columns-* own
-   `display`, exactly as core declares its own page-root display
-   (markers.js: `:where(.page, .spread) { display: flow-root }`). */
-:where(.section) {
+   It is a default, not a mandate, and `:where()` alone does not make it one:
+   core's `.gp-grid-*` lives in the earlier `gp.vocab` layer, and a rule in
+   any later layer beats it at ANY specificity, zero included. Measured:
+   `:where(.section) { display: flow-root }` still computed flow-root on
+   `@section .gp-grid-2` (a silent no-op, one card per row) while the same
+   class on a `@page` laid out as a grid. So the default steps aside for the
+   one core class that owns `display` (`.gp-columns-*` set `columns`, not
+   `display`, and coexist with flow-root). `:where()` keeps the specificity
+   at zero for the rest. */
+:where(.section:not(.gp-grid-2, .gp-grid-3)) {
   display: flow-root;
 }
 

package/styles/components/section.css

@@ -142,7 +142,17 @@
    point of splitting them.
 
    Top/bottom borders only: the base `.section` card's clip-path corner
-   breaks multicol, so this variant trades it for flat rules. */
+   breaks multicol, so this variant trades it for flat rules.
+
+   The bottom edge (padding, then the 2px rule) is painted as two shadows
+   below a box that ends where its content ends, not laid out as padding and
+   border. A fragmented box that ends flush with the page foot has nowhere to
+   put trailing padding or border, and Chromium sends them to an extra page:
+   a panel whose last fragment filled the page spilled a 10px strip of its
+   bottom edge onto the next sheet. Shadows take no layout space, so there is
+   nothing to push. The picture is unchanged: the cream continues
+   --dc-section-pad-bottom below the content, then the rule, and the margin
+   below the panel grows by the same amount so nothing after it moves. */
 .section.dc-column-panel {
   --dc-section-surface: none;
   --dc-section-shadow:  none;
@@ -151,8 +161,11 @@
   --dc-section-pad-bottom: var(--space-sm);
   --dc-section-pad-left:   var(--space-md);
   background: var(--dc-section-bg);
-  border-bottom: 2px solid var(--border-hairline);
-  margin: 12pt 0;
+  padding-bottom: 0;
+  box-shadow:
+    0 var(--dc-section-pad-bottom) 0 0 var(--dc-section-bg),
+    0 calc(var(--dc-section-pad-bottom) + 2px) 0 0 var(--border-hairline);
+  margin: 12pt 0 calc(12pt + var(--dc-section-pad-bottom) + 2px);
 }
 
 /* ── Tabbed variant — first-child heading sits ABOVE the section ─────────
@@ -311,8 +324,15 @@
 }
 
 /* Column-break orphan protection: keep first paragraph with the spanning bar.
-   `break-after: avoid` on the bar guards page breaks; these guards also cover
-   column-break orphaning that can strand a bar above an empty column. */
+   MEASURED LIMIT (Chromium, no plugin CSS needed to show it): `break-after:
+   avoid` on a `column-span: all` box is honoured when the next box is also a
+   spanner (the intro paragraph below), but NOT between the spanner and the
+   column row after it. When the first block of that row does not fit, the
+   row moves to the next page and the bar stays behind. `break-before:
+   avoid` on the first block, `avoid-page` and `break-inside: avoid` do not
+   change it (the last one leaves the bar stranded more often). So the guards
+   here only help the spanning-paragraph case; they are kept because they cost
+   nothing and take effect when Chromium honours the avoid. */
 .section.dc-column-panel > h2:first-child + *,
 .section.dc-column-panel > h3:first-child + * {
   break-before: avoid;
@@ -326,6 +346,15 @@
   break-inside: avoid;
 }
 
+/* In a core GRID run (`@section .gp-grid-2`, `@column-panel .gp-grid-2`) the
+   header bar and a panel's preamble paragraph are grid items like any other
+   child, so each would take a cell. `grid-column: 1 / -1` gives them the whole
+   first row, as `column-span: all` does in a column run. */
+.section:is(.gp-grid-2, .gp-grid-3) > :is(h2, h3):first-child,
+.section.dc-column-panel:is(.gp-grid-2, .gp-grid-3) > :is(h2, h3):first-child + p {
+  grid-column: 1 / -1;
+}
+
 /* Multi-column body copy: kill rivers from narrow-column justification. */
 .section.dc-column-panel p {
   text-align: left;
@@ -674,6 +703,36 @@ h3 + .section {
      --dc-npc-stat-primary      → primary stat-line color, e.g. "2 HP — 1 Damage" (default --hud-blue)
      --dc-npc-stat-secondary    → secondary stat-line color (default --ink-smoke)
    Override per chapter / per faction in the book's own sheet selector chains. */
+/* Page breaks. A block with `####` entries is a RUN of creatures: it may break
+   between entries (token `auto`; this also stops `.gp-columns-2` on the section
+   from jumping the whole block to the next page) and never inside one. An entry
+   has no wrapper — it is an `h4` and the siblings that follow it up to the next
+   `h4` — so "never inside" is a keep-with-next chain: every child but the last
+   of its entry takes `break-after: avoid`, and each block of an entry is itself
+   unbreakable so a paragraph cannot split between columns. Chromium keeps a
+   chain together when it fits a page and lets it break only when it cannot. The
+   title bar (h3) and its intro chain on to the first entry, so the bar is never
+   alone at a page foot. A block with no `h4` is ONE creature (the bar names it)
+   and stays whole like any section. `.dc-allow-split` is the opt-in for an
+   unusually long entry: it keeps only each entry's name with its first two
+   blocks (the stat lines) and headings with what follows, and lets the rest
+   break (blocks too). */
+.section.dc-npc-stat:has(> h4) {
+  --dc-section-break-inside: auto;
+}
+.section.dc-npc-stat:has(> h4) > :not(:last-child, :has(+ h4:not(:first-of-type))) {
+  break-after: avoid;
+}
+.section.dc-npc-stat:has(> h4) > :is(h4 ~ p, h4 ~ blockquote) {
+  break-inside: avoid;
+}
+.section.dc-npc-stat.dc-allow-split:has(> h4) > :is(h4 ~ p, h4 ~ blockquote) {
+  break-inside: auto;
+}
+.section.dc-npc-stat.dc-allow-split:has(> h4) > :not(:last-child, h1, h2, h3, h4, h5, h6, h4 + *, h4 + * + *, blockquote + p) {
+  break-after: auto;
+}
+
 .dc-npc-stat h4 {
   border-top: var(--dc-npc-stat-rule-width) solid var(--dc-npc-stat-rule);
   padding-top: 0.05in;

package/styles/dc-core.css

@@ -65,7 +65,17 @@ body {
    sub-section label where the outline needs a section:
      ## Useful Items {.dc-h3}
    Each look rule below sets every property any level's rule sets, so the
-   class fully replaces the tag's own look (a class outranks an element). */
+   class fully replaces the tag's own look (a class outranks an element).
+   overflow-wrap: the display face is wide and set in caps, so one long word
+   (INTERDIMENSIONALISM at 16pt in a ~3.4in column) outruns its box: it ran
+   under the next column or was clipped at the edge, losing letters in print.
+   A word that cannot fit now breaks as a last resort, at every level, in every
+   context; words that fit are untouched. `break-word` (not `anywhere`) keeps
+   min-content widths intact for shrink-to-fit headings such as banners and
+   tabs. A soft hyphen (­) in the source still picks a better break.
+   `hyphens: auto` (inherited from body) hyphenates where the engine has a
+   dictionary, but uppercase display words are not reliably hyphenated, so
+   the guaranteed break does not depend on it. */
 h1, h2, h3, h4, h5, h6,
 .dc-h3, .dc-h4, .dc-h5, .dc-h6 {
   font-family: var(--font-display);
@@ -76,12 +86,10 @@ h1, h2, h3, h4, h5, h6,
   margin-top: 0;
   margin-bottom: 0.5em;
   color: var(--ink-dark);
+  overflow-wrap: break-word;
 }
 
-/* H1 — magenta neon authority: chapter openers, page-level titles.
-   overflow-wrap: the lixdu display face at 26pt overflows a narrow column
-   on one-word caps titles (CREATUREPUNK) and on long unbreakable strings
-   such as URLs or class names. */
+/* H1 — magenta neon authority: chapter openers, page-level titles. */
 h1 {
   font-size: var(--fs-h1);
   font-weight: var(--fw-bold);
@@ -90,7 +98,6 @@ h1 {
   color: var(--hud-magenta);
   border-bottom: 2px solid var(--hud-magenta);
   padding-bottom: 0.15em;
-  overflow-wrap: break-word;
 }
 
 /* H2 — cold teal: major section breaks */
@@ -174,7 +181,12 @@ blockquote {
 /* ── GLOBAL LIST STYLES (kept as-is per plan) ─────────────────────────────── */
 ul { padding-left: 0.25in; }
 ul li { list-style: none; margin-bottom: 0.06in; }
-ul li::before {
+/* markdown-it wraps a loose item's text in <p>, and an inline ::before on the
+   <li> would sit alone on its own line above that block. A loose item draws
+   the bullet on its first paragraph instead, so it stays on the first line. */
+ul li:has(> p:first-child)::before { content: none; }
+ul li::before,
+ul li > p:first-child::before {
   content: "» ";
   /* --orange (#d4500a) on wall = 2.46:1 (fail). --rust (#b23a12) = 3.48:1
      (measured — also fail). --blood (#901a12) = 5.21:1 on wall, passes

package/styles/page-rules.css

@@ -114,6 +114,15 @@
    Chapter start — footers suppressed; the chevron banner IS the visual
    identity. dc-native.css refills the two bottom boxes with the brick
    band so the margin band stays continuous.
+
+   The name applies to EVERY page `.dc-chapter-start` spans, so an opener that
+   runs past its first page prints its continuation pages without folios too;
+   end the opener with `@page` to get them back. MEASURED in Chromium's own
+   print (printToPDF) why this cannot be narrowed to the first page:
+     - `@page chapter-start:first` matches only the document's first page,
+       not the first page of a page group;
+     - naming just the `h1`, or a zero-height first child, forces a page
+       break at the name change (a title alone on a page, or a blank page).
    --------------------------------------------------------------------------- */
 
 @page chapter-start {

package/styles/page-templates.css

@@ -503,10 +503,15 @@
 }
 
 /* Chapter-start page: the h1 drops core's rule and gets headroom below the
-   page top. */
+   page top. The title is never fragmented across sheets and stays with the
+   first block after it (a title wraps to several lines in the display face,
+   so an opener that runs past its first page used to leave one line of it
+   at the foot of a sheet and the rest on the next). */
 .page.page-chapter-start.dc-chapter-start > h1 {
   border: 0;
   margin-top: 24pt;
+  break-inside: avoid;
+  break-after: avoid;
 }
 
 .page.page-chapter-start.dc-chapter-start p {