gp-dimm-city 1.0.0

package/styles/dc-native.css

@@ -0,0 +1,330 @@
+/* =============================================================================
+   DC-NATIVE.CSS — engine-specific page chrome
+   =============================================================================
+   The LAST entry in package.json `gutterpress.styles`, and deliberately
+   unlayered, so it beats every layered sheet in this package and in the
+   book. A book's own unlayered sheet listed after the extension still wins
+   over it — that is the one hook a book has above this file.
+
+   Mechanics, each measured against Chromium 151 (gutterpress ENGINE.md §5/§8):
+   - ONE `@page { background }` rule paints the brick wall across the whole
+     sheet: the content box, and every margin box that carries no content of
+     its own shows it through. The old two-layer paint (`html { background }`
+     for the content area + 14 hand-fed margin boxes + 6 refills in §4) is
+     gone — one origin for the wall instead of twenty-one.
+   - Margin boxes support background/border/counter()/fit-content; they do
+     NOT support transform: rotate() or box-shadow — the sticker chrome is
+     square and unshadowed.
+   - Any box past the page content box (or the sheet, on reduced-margin
+     pages) triggers whole-document print shrink-to-fit. Nothing in this
+     file may protrude; the frontmatter template zeroes only the SIDE
+     margins so the vertical arithmetic of the margined design is untouched.
+
+   The chip CONTENT (folio / chapter strings) comes from page-rules.css's
+   @page :left/:right rules — standard CSS, engine-agnostic. This file adds
+   visual chrome only.
+   ─────────────────────────────────────────────────────────────────────────── */
+
+/* ── 1. THE BRICK WALL — one rule, whole sheet ──────────────────────────────
+   A margin box with no content of its own shows the page background through,
+   so this single rule paints the content box AND the margin band. It replaces
+   the old `html { background }` content-area layer, the 14 hand-fed empty
+   margin boxes, and §4's six refills — 21 tiling origins became one, so the
+   wall is seamless: no phase break at a box edge, and no flat --bg patch in
+   the bottom band beside the chips. */
+@page {
+  background: var(--bg) url("../images/brick-bg-01.png") repeat;
+  background-size: 1.5in auto;
+  background-blend-mode: multiply;
+}
+
+/* ── 3. FOLIO + CHAPTER STICKERS ────────────────────────────────────────────
+   Chrome for the chip content page-rules.css declares on @bottom-left /
+   @bottom-right. Sticker identity swaps by spread side in page-rules.css's
+   content rules (folio outside, chapter tag inside); the chrome swaps the
+   same way.
+
+   BOTH axes must be fit-content. A margin box defaults to the size of its
+   SLOT, and the slot is big: per marginBoxRectPt (gutterpress
+   engine/shared/margin-box-support.ts) `@bottom-left` is a third of the
+   content width by the whole bottom margin — 174 x 54pt on this book's page.
+   `width: fit-content` alone tightened only the inline axis, so the stickers
+   printed as FULL-HEIGHT RECTANGLES filling the margin band rather than as
+   pills.
+
+   MEASURED, field-guide p10/p11 rasterised at 150dpi and profiled through
+   each chip's interior:
+
+     folio (paper-cream + ink border)   52.3pt tall -> 14.9pt
+     chapter (paper-aged + dashed rule) 53.3pt tall -> 14.4pt
+
+   against a 53.8pt band. Both chips' widths and column spans are unchanged
+   (folio 71-77px, chapter 78px at 150dpi; folio left / chapter right on the
+   verso, mirrored on the recto), so this is a block-axis change only and the
+   recto/verso mirroring is untouched. NOTE for the design pass: a shrunk
+   margin box stays anchored at its slot's START edge, so the chips now sit
+   at the TOP of the bottom-margin band, tucked under the text block, rather
+   than centred in it.
+
+   Shrinking the box no longer punches a hole in the margin band: §1's
+   `@page` background paints underneath, so the wall shows through the rest
+   of the slot on its own. */
+@page :left {
+  @bottom-left {
+    /* folio sticker — civic register */
+    width: fit-content;
+    height: fit-content;
+    font-family: var(--font-mono);
+    font-size: 9pt;
+    font-weight: 700;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    padding: 3px 9px;
+    color: var(--ink-dark);
+    background: var(--paper-cream);
+    border: 1px solid var(--ink-dark);
+  }
+  @bottom-right {
+    /* chapter sticker — stamped coupon */
+    width: fit-content;
+    height: fit-content;
+    font-family: var(--font-display);
+    font-size: 9pt;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    padding: 2.5px 8px;
+    color: var(--blood);
+    background: var(--paper-aged);
+    border: 1.5px dashed var(--hud-magenta);
+  }
+}
+
+@page :right {
+  @bottom-left {
+    /* chapter sticker — stamped coupon */
+    width: fit-content;
+    height: fit-content;
+    font-family: var(--font-display);
+    font-size: 9pt;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    padding: 2.5px 8px;
+    color: var(--blood);
+    background: var(--paper-aged);
+    border: 1.5px dashed var(--hud-magenta);
+  }
+  @bottom-right {
+    /* folio sticker — civic register */
+    width: fit-content;
+    height: fit-content;
+    font-family: var(--font-mono);
+    font-size: 9pt;
+    font-weight: 700;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    padding: 3px 9px;
+    color: var(--ink-dark);
+    background: var(--paper-cream);
+    border: 1px solid var(--ink-dark);
+  }
+}
+
+/* ── 4. STICKER SUPPRESSION on chrome-free named pages ──────────────────────
+   §1's `@page` background paints through a box that generates nothing, so
+   suppression is just clearing the chip's content — no brick refill needed,
+   which makes page-rules.css's own `@page chapter-start` / `@page clean`
+   `content: none` blocks sufficient on their own; only `:blank` has no
+   counterpart there, so only `:blank` is restated here. */
+@page :blank {
+  @bottom-left  { content: none; }
+  @bottom-right { content: none; }
+}
+
+/* ── 5. FRONTMATTER (TOC + Credits): full-bleed composite under native ──────
+   Target: masthead band edge-to-edge including its own rows, wall behind,
+   plate at the sheet bottom of the credits. Native print clips painting at
+   the content box and punishes any box past it with whole-document
+   shrink-to-fit, so the page SHAPE changes instead of the paint overflowing:
+
+   - side margins 0 and bottom margin 0 on the front-matter template — the
+     content box spans the full sheet width and reaches the sheet bottom,
+     so the h1's side pulls and the plate's bottom seat are VISIBLE paint
+     inside the content box, never overflow (verified clean with
+     no-founders in the side-0 variant; the bottom-0 extends the same
+     principle);
+   - the top margin (0.5in) stays, painted ink-dark by the top margin
+     boxes, so the band runs from the sheet top edge through the h1's own
+     rows;
+   - text re-insets itself via page padding. */
+@page front-matter {
+  margin: 0.5in 0 0 0;
+  @top-left-corner  { content: ""; background: var(--ink-dark); }
+  @top-left         { content: ""; background: var(--ink-dark); }
+  @top-center       { content: ""; background: var(--ink-dark); }
+  @top-right        { content: ""; background: var(--ink-dark); }
+  @top-right-corner { content: ""; background: var(--ink-dark); }
+}
+@page front-matter:left  { margin: 0.5in 0 0 0; }
+@page front-matter:right { margin: 0.5in 0 0 0; }
+.page.page-toc,
+.page.page-credits {
+  box-sizing: border-box;
+  padding: 0 0.625in;
+  margin-top: 0;
+}
+.page.page-toc {
+  /* breathing room between the TOC card and the sheet bottom */
+  padding-bottom: 0.75in;
+}
+/* Credits page as a full-height flex column so a pinned founders plate
+   (`.gp-pin .gp-bottom .gp-full`) seats on the sheet edge. Exact `height`
+   rather than core's `min-height` cushion so the pin's containing block ends
+   exactly on the sheet edge. Carried from the field guide's native sheet in
+   1.0.0: every Dimm City book writes this page. */
+.page.page-credits {
+  display: flex;
+  flex-direction: column;
+  height: var(--gp-content-h);
+  padding-bottom: 0;
+}
+.page.page-credits .section.credits-colophon {
+  flex: 1 1 auto;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 0;
+}
+/* The masthead escapes the padding back to the sheet edges — visible paint
+   inside the full-width content box. `margin-top: 0` is deliberate: a
+   negative top pull here drags a band fragment onto the previous page
+   (measured). The dark strip above is margin-box paint. */
+.page.page-toc h1.dc-chevron,
+.page.page-credits h1.dc-chevron {
+  margin-top: 0;
+  margin-left: -0.625in;
+  margin-right: -0.625in;
+  width: calc(100% + 1.25in);
+  box-sizing: border-box;
+}
+
+/* In-flow art must never be sliced across a page boundary. */
+p.dc-img-wrapper,
+figure {
+  break-inside: avoid;
+}
+/* Full-bleed plates fill their margin-0 page exactly; sub-pixel rounding
+   was slicing the last rows of the image onto the next page. */
+.dc-full-page {
+  overflow: clip;
+}
+
+/* ── 10. MULTI-COLUMN SECTIONS must fragment naturally ──────────────────────
+   `.section` carries `break-inside: avoid` from THIS BOOK's own
+   components/*.css (core no longer ships that default, but the book still
+   sets it). Measured DOM shape: `.gp-columns-2` is a WRAPPER div (the multicol
+   container, columns:2) and the `.section` blocks sit INSIDE it. A section
+   taller than one column can then never split, so Chromium drops it whole
+   into one column fragment and the facing column dies — the dead-column
+   collapse. Removing this override cost 3 pages of pagination churn when
+   measured (302pp vs 299pp), so it is load-bearing, not legacy.
+
+   Keys on the COUNT class, not `.dc-column-panel`: this is about multicol
+   fragmentation, and the wrapper shape is often a `@block` or `@page` that
+   never carries the panel chrome at all. */
+.gp-columns-2 .section,
+.gp-columns-3 .section {
+  break-inside: auto;
+}
+
+/* ── 10b. COLUMN-FILL is a per-shape decision, and it lives HERE ────────────
+   (10b, not 11: a §11 was deleted from this file before this block existed,
+   and §13 below still cross-references that old §11. Taking the number would
+   silently redirect a live reference at the wrong rules.)
+   Core deliberately ships no `column-fill` on `.gp-columns-*` (the right
+   value depends on whether the run fragments, and only the author knows).
+   page-templates.css used to answer `balance` for the whole book; under
+   native print the wrapper fragments across pages, and Chromium's
+   balance-in-fragmentation leaves every non-final fragment with a dead right
+   column (measured: proof17 p12/p13). Sequential fill packs both columns per
+   page — the behavior the engine's multicol fixture verified. */
+.gp-columns-2,
+.gp-columns-3 {
+  column-fill: auto;
+}
+/* Per the measured rule (docs/native-engine-styling-guide.md §5): balance is
+   correct for single-page multicol, auto only for FRAGMENTING multicol.
+   The general `.gp-columns-2`/`.gp-columns-3` rule above stays `auto` — it is
+   load-bearing for the WRAPPER shape (a plain div around several `.section`
+   children, e.g. p12/p13's "THE PACK SHOULD BE WEIRD" walkthrough, and
+   p243's CORE ELEMENTS section, where the dc-alert callout is itself taller
+   than a column and MUST be allowed to fragment; see §13 below). A
+   `.section` that is ITSELF the multicol container is NOT reliably short —
+   CORE ELEMENTS is that same DOM shape (`.section.gp-columns-2`) and needs
+   `auto`, so shape alone can't tell "fits on one page" from "runs long".
+
+   Two exceptions, both scoped so they cannot catch the fragmenting case:
+
+   (a) p7's "Image Is Everything" aside — a short paragraph + a short callout,
+   nothing left to balance — scoped to its own authored classes rather than
+   promoted to a general `.section.gp-columns-2` rule that would also catch,
+   and break, CORE ELEMENTS. If a future page reuses
+   `.dc-citizen-walkthrough.gp-columns-2` with long enough content to actually
+   fragment, the compiler's own multicol-fragmentation check flags it and
+   tells the author to add column-fill: auto locally — not a silent trap.
+
+   (b) a PAGE that is itself the multicol container. A `.page` is one sheet by
+   construction, so its run does not fragment and balance is the correct
+   value. This carries forward the `.page.two-column { column-fill: balance }`
+   that page-templates.css used to win with on specificity alone (0-2-0 over
+   this file's 0-1-0); stating it here puts it next to the reasoning and the
+   measurements instead of leaving it to load order. Live user:
+   `@page .dc-citizen-file-page .gp-columns-2` in the design guide. */
+.dc-citizen-walkthrough.gp-columns-2,
+.page.gp-columns-2 {
+  column-fill: balance;
+}
+
+/* ── 12. WALL ART placement is the markdown's, via core's gp-* classes ──────
+   Do not add a position/float/margin declaration to a `.fg-art-*` class that
+   the markdown also pins. A `.fg-art-*` class beats `.gp-pin` at equal
+   specificity — the book's sheets load after GUTTERPRESS_CSS — so such a rule
+   silently DE-PINS whatever the author asked for. Measured on blue-bot
+   (chapter-01 "At a Glance"), which the markdown authors
+   `.gp-pin .gp-bottom .gp-left`. */
+
+/* ── 13. NO EMPTY FIRST FRAGMENTS on boxed callouts ─────────────────────────
+   §11's break-after: avoid keeps a heading with the box that follows, but
+   the box itself can still emit a contentless first fragment (top border +
+   padding only) at a page bottom — measured: CORE ELEMENTS, p244. Gluing
+   the box's first child to the box start moves the whole start (and, via
+   §11, the heading) to the next page. break-inside: avoid is NOT usable
+   here: these callouts routinely run taller than a page. */
+.dc-dm-note > :first-child,
+.dc-callout > :first-child {
+  break-before: avoid;
+}
+
+/* Measured (p243, DOM-inspected): the CORE ELEMENTS heading is a full-width
+   spanner inside a .gp-columns-2 section, followed by a dc-alert callout
+   whose break-inside: avoid is UNENFORCEABLE (the card is taller than a
+   column). Chromium then emits an empty card fragment under the spanner —
+   header stranded, content headerless on the next page. A card that may
+   fragment starts filling right under its header instead. Scoped to
+   multicol sections only; standalone cards keep their avoid. */
+.gp-columns-2 .dc-alert,
+.gp-columns-3 .dc-alert {
+  break-inside: auto;
+}
+
+/* Skill-card tabs (MNEMONIC PLAGUE, p114): the .dc-card-tab chip is a
+   separate block from its .dc-card-body, so a page break can land between
+   them, stranding the tab alone at a page bottom. Glue tab to body, and the
+   body's first child to the body start. */
+.dc-card-tab {
+  break-after: avoid;
+}
+.dc-card-body > :first-child {
+  break-before: avoid;
+}

package/styles/dc-palette.css

@@ -0,0 +1,198 @@
+@layer dc.tokens {
+
+/* ── DESIGN TOKENS ────────────────────────────────────────────────────────── */
+:root {
+
+  /* ── Page & Paper ─────────────────────────────────────────────────────── */
+  /* Paper substrate shifted from warm cream/manila to neutral-cool light
+     greys (2026-05-24). The previous warm-cream register read vintage /
+     fantasy-coded against the urban-concrete brick-wall background and
+     made the book feel less Dimm-City than it should. Greys read as
+     "industrial flyer paper / printer stock" — closer to the actual
+     real-world surface posters get pasted on in a creaturepunk city. */
+  --bg:           #c8c5bf;  /* ash-concrete — the brick wall (page background, L*~70) */
+  --concrete-pale: #dcdad5; /* pale concrete swatch — light cool grey lifted from the wall; substrate for lede/intro panels that should read cold-grey, not paper-cream */
+  --paper-cream:  #f0eee9;  /* light industrial flyer-stock — brighter than wall, more poster-vs-wall delta (L*~93) */
+  --paper-light:  #e2ded7;  /* slightly darker grey alternate surface — for layered paper / secondary panels */
+  --paper-aged:   #c8c2b8;  /* weathered grey — decay register, dust + age */
+  --paper-stain:  #b0a89c;  /* deep stain — dark inset wells, smoke-grey */
+  /* Poster-wall shadow — hard offset, no blur. Pins paper-register
+     components to the wall as physical objects. Applied to specialty
+     cards, skill cards, sections, paper-variant callouts, NPC stat
+     blocks, citizen file — anything that should read as "stuck on
+     the wall" rather than "embedded in the page." */
+  --shadow-poster: 2pt 3pt 0 rgba(0, 0, 0, 0.28);
+
+  /* ── Ink & Text — warm sepia drift, not neutral gray ─────────────────── */
+  --ink:        #1a1512;  /* near-black with red bias — riso warm black */
+  --ink-dark:   #2b231d;  /* warmer secondary heading weight */
+  --ink-smoke:  #4d4339;  /* sepia mid-tone — body emphasis */
+  --ink-mid:    #594f43;  /* between smoke and dust — secondary card text */
+  --ink-dust:   #665b4e;  /* darkened (was #756a5c) — 4.58:1 on new lighter paper-cream #f0eee9 */
+
+  /* ── Accents — creaturepunk fire + blood ─────────────────────────────── */
+  --crimson:    #e1261c;  /* PMS Red 032 — CMYK 0 95 90 0; survives POD */
+  --blood:      #901a12;  /* oxidised arterial — 5.2:1 on paper-cream */
+  --orange:     #d4500a;  /* burnt circuit-board — heat-damaged, not friendly cone */
+  --orange-deep: #a03808; /* burnt fire-deep — paper-cream 5.25:1 (deeper variant for small-text-on-fill contexts) */
+  --rust:       #b23a12;  /* burnt rebar edge */
+  --amber:      #7a5a20;  /* sulfur-scorched brass — contaminated, not generic earth */
+  --deep-rust:  #6a1a08;  /* shadow rust — deepest warm dark */
+  --amber-dark: #5c3c10;  /* charred amber — follows amber down */
+
+  /* ── Brand Signature Layer — print-safe analogs of dimm.city web palette
+     These three are the source of truth for "the dimm.city signature in print."
+     Values are SWOP/substrate-corrected from the website's pure-RGB tokens
+     (#d946ef / #00ffff / #ffd700) so they survive POD press without muddying.
+     HUD + signal tokens below alias these — touch the brand layer first. */
+  --brand-magenta: #c026d3;  /* dimm.city cyber-magenta, SWOP-corrected from web #d946ef */
+  --brand-magenta-deep: #8a0a9a;  /* jewel-deep cyber-magenta — paper-cream 6.21:1 (small-text-on-fill safe) */
+  --brand-cyan:    #00bcd4;  /* dimm.city neon-cyan, paper-contrast-tuned from web #00ffff */
+  --brand-yellow:  #ffd700;  /* dimm.city brand-yellow — survives press unchanged */
+  --brand-violet:  #7030b8;  /* dimm.city cyber-violet, SWOP-corrected from web #a020f0 */
+
+  /* ── HUD Colors — digital neon chrome ────────────────────────────────── */
+  --hud-blue:        #1f6f94;  /* teal-cyan mid HUD — CMYK 85 45 25 10 */
+  --hud-blue-dark:   #14516e;  /* deep teal for borders/rules/H2 text */
+  --hud-blue-bright: var(--brand-cyan);     /* alias — substrate-safe neon-cyan accent; 5 consumers — see audit 2026-05-27 */
+  --hud-blue-dim:    #7ab8d0;  /* visible-on-cream panel tint (was #b8d8e8 — invisible at L*84) */
+  --hud-magenta:     var(--brand-magenta);  /* alias — brand-signature cyber-magenta; 29 consumers — see audit 2026-05-27 */
+  --hud-panel:       #eeece8;  /* neutral light cream — callouts, note bars */
+
+  /* ── Surface Tints ────────────────────────────────────────────────────── */
+  --surface-tint-3:      #f2f0ec;  /* public token: consumed by the Dimm City design guide's own sheet (palette swatches), not by this package */
+  --surface-orange-tint: #d8cfb4;  /* warmer gold tint on aged paper */
+
+  /* ── Borders ──────────────────────────────────────────────────────────── */
+  --border-hairline: #c8b898;  /* warmer/darker hairline on aged paper */
+  --bw-thin:         1px;
+  --callout-border-width-small: 2px;
+
+  /* ── Shadow color tint ────────────────────────────────────────────────── */
+  --shadow-tint: #b0a898;  /* hex color used as shadow tint — this is a color, not a shadow shorthand */
+
+  /* ── Type Families ────────────────────────────────────────────────────── */
+  --font-display: 'lixdu', 'Tomorrow', sans-serif;
+  --font-tab:     'Tomorrow', 'lixdu', sans-serif;
+  --font-body:    'Titillium Web', Georgia, sans-serif;
+  --font-sans:    'Titillium Web', 'Inter', system-ui, sans-serif;
+  --font-mono:    'Tomorrow', 'Titillium Web', ui-monospace, monospace;
+  --font-quote:   'Titillium Web', 'Tomorrow', serif;
+
+  /* ── Type Scale — modular ~1.23× ratio, 12pt body anchor ──────────────
+     h1/h2: 1.30×  h2/h3: 1.25×  h3/h4: 1.23×  h4/h5: 1.18×  h5/h6: 1.22×
+     H5 == body-sm: display font + caps + tracking provide differentiation.
+     H6 below body: metadata-only; display font keeps it legible.
+     ────────────────────────────────────────────────────────────────────── */
+  --fs-body:    12pt;
+  --fs-body-sm: 11pt;    /* design floor — never below this for prose */
+  --fs-body-xs: 11.5pt;  /* between sm and body */
+  --fs-sm:      11pt;    /* small body — aligns to --fs-body-sm */
+  --fs-h1:      26pt;    /* anchor — chapter/page-level titles */
+  --fs-h2:      20pt;    /* section headers; 1.30× below h1 */
+  --fs-h3:      16pt;    /* sub-section, gear card titles; 1.25× below h2 */
+  --fs-h4:      13pt;    /* skill card names, stat block NPC names; 1.23× below h3 */
+  --fs-h5:      11pt;    /* field labels, stat-block sublabels; 1.18× below h4 */
+  --fs-h6:      9pt;     /* metadata only; 1.22× below h5 */
+  --fs-chapter: 26pt;    /* chapter openers — matches h1 */
+
+  --fw-bold:     700;
+
+  --lh-tight:  1.35;
+  --lh-normal: 1.5;
+
+  --ls-display: 0.1em;
+  --ls-heading: 0.08em;
+  --ls-cap-sm:  3px;  /* mono micro-caps */
+
+  /* ── Spacing — print units ────────────────────────────────────────────── */
+  --space-xs:  0.05in;  /* ~3.6pt — tighter than --space-sm */
+  --space-sm:  0.08in;  /* ~6pt */
+  --space-md:  0.12in;  /* ~9pt */
+  --space-lg:  0.15in;  /* ~11pt */
+  --space-xl:  0.20in;  /* ~14pt */
+
+  /* Vertical breathing room between stacked card components (skill cards,
+     learning-path shells, specialty cards). This is the
+     VISIBLE gap the reader sees. Components whose chrome paints OUTSIDE
+     their border-box (filter: drop-shadow / box-shadow) add their own bleed
+     compensation on top of this value — margin is layout space, but a shadow
+     paints past the box without affecting layout, so a margin sized only for
+     the box model gets visually eaten. See .dc-skill-card in components.
+     Retune card spacing across the whole book by changing THIS ONE value. */
+  --dc-card-gap:   0.15in;  /* ~11pt */
+
+  --gutter:        0.15in;  /* two-column structural gutter */
+  --page-margin:   0.5in;
+  --outer-margin:  0.625in; /* outer (non-binding) page margin */
+  --sidebar-width: 3.05in;
+
+  /* Inset-sidebar right column. `.dc-sidebar.inset` is a full-height rail
+     pinned to the page's right edge, so the page must RESERVE this column or
+     the rail paints on top of the body text (it did, until 2026-08-22).
+     --dc-sidebar-inset-column is the rail's OUTER width (it is border-box);
+     the gutter is the gap between body text and the rail. page-templates.css
+     turns the pair into the hosting page's padding-right. */
+  --dc-sidebar-inset-column: 3.4in;
+  --dc-sidebar-inset-gutter: 0.2in;
+
+  /* ── Page Geometry ────────────────────────────────────────────────────── */
+  --page-width:     8.625in;
+  --page-height:    11.25in;
+  --binding-margin: 0.75in;
+
+  /* ── Shapes ───────────────────────────────────────────────────────────── */
+  /* Chevron banner / section right-edge inset. Used by --clip-banner, by
+     the chapter-opener intro section's clip-path + padding-right, and by
+     the chapter-opener h1's negative margin-right. */
+  --clip-tail: 22px;
+  --clip-banner: polygon(0 0, 100% 0, calc(100% - var(--clip-tail)) 100%, 0 100%);
+
+  /* ── Chapter-opener composite (components/*.css consumes these) ──────
+     Token contract — override at the chapter id scope to customise a
+     specific chapter's opener without affecting any other chapter:
+       #ch-chapter-2 .chapter {
+         --dc-chapter-opener-accent: var(--augmerc-deep);
+         --dc-chapter-opener-clip-tail: 32px;
+       } */
+  --dc-chapter-opener-accent:    var(--brand-magenta-deep);
+  --dc-chapter-opener-clip-tail: 22px;
+  --dc-chapter-opener-bg:        var(--paper-cream);
+  --dc-chapter-opener-pad-top:   var(--space-md);
+  --dc-chapter-opener-pad-side:  var(--space-lg);
+  /* Right-side padding is independent from --clip-tail. The clip-tail is
+     the *visual* right inset (where the chevron's tail and the section
+     substrate end). The pad-right is the *content* right inset (where
+     body text ends). Pad-right > clip-tail gives body text breathing
+     room inside the visible substrate instead of running flush to the
+     clipped edge. */
+  --dc-chapter-opener-pad-right: calc(var(--dc-chapter-opener-clip-tail) + var(--space-md));
+  /* Cohesive drop shadow for the chapter-opener composite. Hard offset
+     (no blur) matches the "poster pinned to a wall" aesthetic used by
+     the existing --shadow-poster token. Applied via filter:drop-shadow
+     on the chapter-opener page so it follows the union silhouette
+     (badge + tapered chevron + section substrate) as a single shape. */
+  --dc-chapter-opener-shadow: 3px 4px 0 rgba(0, 0, 0, 0.28);
+
+  /* ── Fluorescent Fungi Pillar (creaturepunk: bioluminescent organic) ─────
+     The 4th creaturepunk register: spore-light, lichen-glow, UV-reactive
+     bio-organic green family. Distinct from the gutter pillar (rust/blood)
+     and the neon pillar (brand-magenta/cyan/yellow) — this is "alive and
+     glowing" rather than "signal" or "decay". CMYK-safe:
+       fungi-glow  ≈ C30/M0/Y90/K0  = 120%
+       fungi-rot   ≈ C50/M30/Y100/K60 = 240% (large fills only) */
+  --fungi-glow:  #c8e040;  /* bioluminescent yellow-green — UV spore-light (consumed: .dc-outcome-row.hit, --gutterdruid-accent) */
+  --fungi-rot:   #2a4015;  /* deep moldering green — rot in dark places (consumed: .dc-outcome-row.fail; large-fill only — TAC 176%) */
+
+  /* ── Ancient Crystal Pillar (creaturepunk: faceted mineral refraction) ───
+     The mineral-magic register: amethyst and aquamarine — geometric and
+     refractive. Distinct from brand-violet (signal-saturated) and the warm
+     gold of brand-yellow (electric). CMYK-safe:
+       crystal-amethyst ≈ C50/M65/Y0/K35 = 150%
+       crystal-aqua     ≈ C70/M28/Y28/K20 = 146% */
+  --crystal-amethyst: #6a3a8a;  /* deep mineral violet — refractive arcane (consumed: --generalist-accent) */
+  --crystal-aqua:     #4a98a8;  /* pale crystalline aquamarine (consumed: --dualist-accent) */
+
+}
+
+}