gp-dimm-city 1.7.4 → 1.8.0-alpha.2

package/CHANGELOG.md

@@ -7,6 +7,75 @@ cut a version that has no `## [X.Y.Z]` heading below.
 
 ## [Unreleased]
 
+## [1.8.0] - 2026-10-15
+
+### Changed
+
+- **Depth, recess and light, now that translucency prints.** Components get
+  a soft, translucent lift off the wall (`--shadow-lift`) under their hard
+  contact shadow: section panels (`--dc-section-lift`), path banners, skill
+  cards and specialty cards. The section's hard shadow and the skill-card and
+  `##` slip tape are translucent, so the brick reads through them. Recessed
+  things sink: the fiction excerpt's cavity and the `lore`/`dm`/`choose`
+  panels and title bars take a soft inset (`--shadow-press`). Title bands and
+  skill-card tabs carry a top gloss (`--light-gloss`). All of it is `box-shadow` and
+  gradients; a PDF/X build needs `pdfx.transparency: preserve-text`. A new
+  convention test allows `filter` only on a `::before`/`::after` layer:
+  Chromium prints the text of a filtered element as a picture.
+- **A specialty card looks like its specialty's skill cards.** The card is
+  now that specialty's path banner as a sheet: the name on the specialty's
+  band colour, cut in the banner's title shape with its gloss and rule, and
+  a paper sheet with an ink outline in the banner's silhouette. The thick
+  top and left borders, the per-specialty card cut and the Augmerc override
+  are gone. Removed tokens: `--dc-specialty-card-border`,
+  `--dc-specialty-card-band-height`, `--dc-specialty-card-shadow`. New:
+  `--dc-specialty-card-band-bg`, `--dc-specialty-card-band-fg`,
+  `--dc-specialty-card-band-shape`, `--dc-specialty-card-pad-x`. A card's
+  portrait floats on its frame (the image wrapper) rather than on the image.
+- **The specialty catalog spread closes each page with a full-width card.**
+  On `@page specialty-catalog`, Dualist spans both columns as the last row of
+  the left page and Generalist as the last row of the right page, whatever
+  order the book lists them in; the right page's other four cards are taller
+  with taller portraits. New tokens: `--dc-card-grid-item-span`,
+  `--dc-card-grid-item-order`, `--dc-card-grid-item-break`,
+  `--dc-card-grid-row-tall`, `--dc-card-grid-media-tall`,
+  `--dc-card-grid-media-wide`.
+
+- **Needs Gutterpress 0.11.20-alpha.3 or later**, the first with PDF/X
+  `preserve-text`, which the translucent styles below print with. The
+  requirement is in `package.json`'s `engines.gutterpress`: a Gutterpress
+  that checks it (gutterpress#402) refuses to load this package and names the
+  version to update to. Older Gutterpress versions ignore the field.
+- **Shadows and tints are translucent again, for books that opt in to
+  Gutterpress's `pdfx.transparency: preserve-text`** (Gutterpress #385). The
+  poster shadow (`--shadow-ink`, so the skill-card body shadow and the section
+  drop), the sticker and path-chip shadows, the rule divider, the spray smudge,
+  the pull-quote accent, and the AP-chip and outcome-key bevels are
+  `color-mix(…, transparent)` again instead of being pre-mixed onto one
+  surface, so a shadow on the brick wall darkens the brick instead of painting
+  a flat tone. The AP chip's soft `3px 3px 6px` shadow is back. Text colours
+  stay opaque: a translucent glyph prints fully opaque on a split page. The
+  wall tile stays opaque. `--wall-tone` is removed (nothing uses it). The
+  convention test *paint nothing transparent* becomes *keep text opaque*, and
+  its repeating-gradient check is kept as its own test.
+  - A book that keeps Gutterpress's default (`flatten-page`) and builds
+    PDF/X-1a gets more pages flattened to an image than with 1.7.2: set
+    `pdfx.transparency: preserve-text` in the book's manifest. Requires the
+    Gutterpress release that ships that option.
+- **Lixdu is never faked bold.** Lixdu has one face, regular, but chapter
+  chips, folio chips, outcome rolls, block and card titles and headings asked
+  for a bold weight, so Chromium synthesized one, which prints as a Type 3
+  font that Gutterpress's PDF/X `preserve-text` split cannot keep. Every rule
+  that sets `--font-display` now sets `font-weight: 400` (a convention test
+  enforces it), and headings set `font-synthesis-weight: none` so `**bold**`
+  inside a heading prints in Lixdu's own stroke. That text is slightly thinner
+  than the synthetic bold.
+- **A continuation card's tab draws its "continued" triangle** as a small
+  inline SVG in the title's colour, instead of a `▸` character. No Dimm City
+  font has that glyph, so Chromium borrowed one from a system font and printed
+  it as a Type 3 font; on the Field Guide that was the last one, and it made
+  its page fall back to whole-page flattening under `preserve-text`.
+
 ## [1.7.4] - 2026-10-15
 
 ### Changed

package/components.yaml

@@ -423,7 +423,6 @@ components:
       - --dc-skill-body-shape
       - --dc-path-title-shape
       - --dc-path-shell-clip
-      - --dc-specialty-card-shell-shape
       - --dc-specialty-intro-title-shape
       - --dc-specialty-intro-clip
     breaks: "none on the wrapper; children carry their own"
@@ -465,14 +464,16 @@ components:
       - styles/page-templates.css
     tokens:
       - --dc-specialty-card-bg
-      - --dc-specialty-card-border
       - --dc-specialty-card-accent
       - --dc-specialty-card-fg
       - --dc-specialty-card-media-height
       - --dc-specialty-card-media-width
       - --dc-specialty-card-title-align
-      - --dc-specialty-card-band-height
-      - --dc-specialty-card-shadow
+      - --dc-specialty-card-band-bg
+      - --dc-specialty-card-band-fg
+      - --dc-specialty-card-band-shape
+      - --dc-specialty-card-shell-shape
+      - --dc-specialty-card-pad-x
       - --dc-specialty-card-title-color
       - --dc-specialty-card-display
       - --dc-specialty-card-media-order
@@ -648,8 +649,14 @@ components:
       - --dc-card-grid-item-display
       - --dc-card-grid-row
       - --dc-card-grid-gap
-    breaks: "break-before: left (the spread opens on a left page, so its two pages face each other); the left page holds the title, the lede and four cards and the right page the other six (the row height, --dc-card-grid-row, sets the split)"
-    notes: "The specialty catalog as a designed two-page spread: title and lede and the first four cards on the left, six cards on the right, in aligned rows of equal height (wrapped flex rows, not columns), each card a tall poster with its portrait on top. A location: it only sets tokens (the grid's flex layout, and the card's portrait, order, name size and index chip) and the page breaks. Whatever follows the grid starts on the next page: write a plain @page after @end-card-grid. The Variant Gallery's @card-grid, which sits on no such page, keeps the dense floated-thumbnail cards."
+      - --dc-card-grid-item-span
+      - --dc-card-grid-item-order
+      - --dc-card-grid-item-break
+      - --dc-card-grid-row-tall
+      - --dc-card-grid-media-tall
+      - --dc-card-grid-media-wide
+    breaks: "break-before: left (the spread opens on a left page, so its two pages face each other); the fifth card other than Dualist and Generalist opens the right page (--dc-card-grid-item-break: page)"
+    notes: "The specialty catalog as a designed two-page spread: title and lede and four cards on the left, four taller cards on the right, in aligned rows of equal height (wrapped flex rows, not columns), each card a poster with its portrait on top. Dualist and Generalist span both columns as the last row of the left and right page, as dense cards, whatever order the book lists them in. A location: it only sets tokens (the grid's flex layout, and the card's portrait, order, name size and index chip) and the page breaks. Whatever follows the grid starts on the next page: write a plain @page after @end-card-grid. The Variant Gallery's @card-grid, which sits on no such page, keeps the dense floated-thumbnail cards."
 
   - name: fiction-excerpt
     status: live

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gp-dimm-city",
-  "version": "1.7.4",
+  "version": "1.8.0-alpha.2",
   "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",
@@ -73,6 +73,9 @@
     "gutterpress": "0.11.20-alpha.3",
     "markdown-it": "^14.1.0"
   },
+  "engines": {
+    "gutterpress": ">=0.11.20-alpha.3"
+  },
   "peerDependencies": {
     "markdown-it": ">=14"
   },

package/plugin.js

@@ -113,6 +113,13 @@
  * (@end-learning-path, a new @learning-path, @end-specialty, @page, EOF).
  */
 
+// The "continued" mark on a continuation card's tab: a drawn triangle, not a
+// ▸ character. No Dimm City font has that glyph, so Chromium borrowed one
+// from a system font and printed it as a Type 3 font, which Gutterpress's
+// PDF/X preserve-text split cannot keep. It takes the tab title's colour.
+const CONTINUED_MARK =
+  '<svg class="dc-tab-cont-mark" viewBox="0 0 6 8" aria-hidden="true"><path d="M0 0 6 4 0 8z" fill="currentColor"/></svg>';
+
 function esc(s) {
   return s.replace(/&/g, '&amp;').replace(/</g, '&lt;')
           .replace(/>/g, '&gt;').replace(/"/g, '&quot;');
@@ -952,7 +959,7 @@ function dcSkillCards(state) {
         emit(
           cardOpen(true) +
           '  <div class="dc-card-tab dc-card-tab-cont">\n' +
-          '    <span class="dc-tab-title">' + esc(title.name) + ' ▸</span>\n' +
+          '    <span class="dc-tab-title">' + esc(title.name) + ' ' + CONTINUED_MARK + '</span>\n' +
           (title.tier ? '    <span class="dc-tab-tier">' + esc(title.tier) + '</span>\n' : '') +
           '  </div>\n' +
           '  <div class="dc-card-body">\n' +

package/styles/components/cards.css

@@ -72,7 +72,7 @@
   /* 18px right and 16px left clear the deepest tab cut (a specialty's
      --dc-skill-tab-shape, at most 15px) by more than 2pt. */
   padding: 3px 18px 3px 16px;
-  background: var(--dc-card-tab-bg);
+  background: var(--light-gloss), var(--dc-card-tab-bg);
   border: 2px solid var(--dc-card-accent);
   border-bottom: 0;
   margin-left: 10px;
@@ -158,6 +158,14 @@
   text-wrap: wrap;
 }
 
+/* The continuation tab's mark (plugin.js CONTINUED_MARK), sized to the
+   title's cap height. */
+.dc-tab-cont-mark {
+  width: 0.45em;
+  height: 0.6em;
+  vertical-align: baseline;
+}
+
 /* The tier pill (AUG1.3) is the specialty's own: a chip of its bright signal
    colour (cream with a dark edge where the signal fails 4.5:1 for the type),
    set by the --dc-tier-* tokens the specialty wiring fills (specialty-identity.css).
@@ -209,6 +217,7 @@
   background: transparent;
   clip-path: none;
   padding: 0;
+  box-shadow: var(--shadow-lift);
 }
 
 .dc-skill-card > .dc-card-body > .dc-card-inner {
@@ -351,11 +360,10 @@
   right: 18px;
   width: 34px;
   height: 11px;
-  /* A strip of masking tape holding the card to the wall: an opaque flat tint
-     of the card's mark colour on paper-aged, with a hard edge line, slightly
-     rotated. It was a 2px hairline at 15% mark colour, which read as a stray
-     scratch rather than as a deliberate cue. */
-  background: color-mix(in srgb, var(--dc-card-body-mark) 14%, var(--paper-aged));
+  /* A strip of masking tape holding the card to the wall: a translucent tint
+     of the card's mark colour on paper-aged, so the card edge and the wall
+     read through it, with a hard edge line, slightly rotated. */
+  background: color-mix(in srgb, color-mix(in srgb, var(--dc-card-body-mark) 14%, var(--paper-aged)) 78%, transparent);
   box-shadow: inset 0 -1px 0 var(--ink-dust);
   transform: rotate(3deg);
   z-index: 2;
@@ -456,8 +464,9 @@
   /* Layered shadow: an inset highlight plus a hard offset, so the chip reads
      as lifted off the card. */
   box-shadow:
-    inset 0 1px 0 color-mix(in srgb, var(--paper-cream) 15%, var(--dc-ap-bg)),
-    2px 2px 0 color-mix(in srgb, var(--ink) 10%, var(--dc-card-surface));
+    inset 0 1px 0 color-mix(in srgb, var(--paper-cream) 15%, transparent),
+    2px 2px 0 color-mix(in srgb, var(--ink) 10%, transparent),
+    3px 3px 6px color-mix(in srgb, var(--ink) 8%, transparent);
   text-shadow: 0 1px 0 color-mix(in srgb, var(--ink) 20%, var(--dc-ap-bg));
   letter-spacing: 0.06em;
   flex-shrink: 0;

package/styles/components/chrome.css

@@ -38,6 +38,7 @@
    warning). */
 .dc-chevron {
   font-family: var(--font-display);
+  font-weight: 400;
   font-size: var(--dc-chevron-font-size);
   letter-spacing: 0.06em;
   color: var(--dc-chevron-color);
@@ -92,6 +93,7 @@ h1.dc-chevron {
    standalone-tag cue.) */
 .dc-spray {
   font-family: var(--font-display);
+  font-weight: 400;
   font-size: 22px;
   color: var(--dc-spray-color);
   text-transform: uppercase;
@@ -139,7 +141,7 @@ h1.dc-chevron {
   left: 8%;
   width: 45%;
   height: 5px;
-  background: color-mix(in srgb, var(--dc-spray-bg) 8%, var(--wall-tone));
+  background: color-mix(in srgb, var(--dc-spray-bg) 8%, transparent);
 }
 
 
@@ -170,7 +172,7 @@ h1.dc-chevron {
   transform: rotate(-0.5deg);
   text-transform: uppercase;
   letter-spacing: 0.03em;
-  box-shadow: 2px 2px 0 color-mix(in srgb, var(--ink) 35%, var(--paper-cream));
+  box-shadow: 2px 2px 0 color-mix(in srgb, var(--ink) 35%, transparent);
 }
 
 .dc-sticker:nth-child(4n+3) {
@@ -209,7 +211,7 @@ h1.dc-chevron {
   vertical-align: middle;
   position: relative;
   top: -1px;
-  box-shadow: 1px 2px 0 color-mix(in srgb, var(--ink) 30%, var(--dc-path-title-bg));
+  box-shadow: 1px 2px 0 color-mix(in srgb, var(--ink) 30%, transparent);
 }
 
 /* The gap between the sticker and the banner title. It is a real space
@@ -335,7 +337,7 @@ h1.dc-chevron {
 /* ── Rule divider (hr) ─────────────────────────────────────────── */
 hr {
   border: none;
-  border-top: 1.5px solid color-mix(in srgb, var(--hud-magenta) 50%, var(--paper-cream));
+  border-top: 1.5px solid color-mix(in srgb, var(--hud-magenta) 50%, transparent);
   margin: var(--space-lg) 0;
 }
 

package/styles/components/data.css

@@ -38,8 +38,10 @@
   padding-right: 0;
   position: relative;
   /* Both pseudos sit at negative z-index; this is the stacking context that
-     keeps them behind THIS shell's content instead of behind the page. */
+     keeps them behind THIS shell's content instead of behind the page. It
+     paints its own soft lift first, under both. */
   isolation: isolate;
+  box-shadow: var(--shadow-lift);
 }
 
 /* Background + clip-path on ::before — the element itself stays unclipped so
@@ -109,7 +111,7 @@
    redrawn here. */
 .dc-path-shell>h3.dc-spray:first-child {
   color: var(--dc-path-title-color);
-  background: var(--dc-path-title-bg);
+  background: var(--light-gloss), var(--dc-path-title-bg);
   clip-path: var(--dc-path-title-shape);
   /* the slanted rule (::after) overhangs the band by --dc-band-rule-bleed; the
      clip-path trims it on paper, this keeps it out of the page's scroll width
@@ -385,8 +387,8 @@
       var(--row-color, var(--ink)) 50%,
       color-mix(in srgb, var(--row-color, var(--ink)) 96%, var(--ink) 4%) 100%); /* PDF/X-1a: pre-composite to ~96% row colour + 4% ink; on the default --ink (#1e1d1c) */
   box-shadow:
-    inset 0 1px 0 color-mix(in srgb, var(--paper-cream) 12%, var(--row-color, var(--ink))),
-    inset 0 -1px 0 color-mix(in srgb, var(--ink) 18%, var(--row-color, var(--ink)));
+    inset 0 1px 0 color-mix(in srgb, var(--paper-cream) 12%, transparent),
+    inset 0 -1px 0 color-mix(in srgb, var(--ink) 18%, transparent);
   /* Use the token so .dc-outcome-row.hit (which sets --dc-outcome-key-color
      to --ink because the fungi-glow fill is too light for cream text: 1.24:1)
      propagates to the chip element itself, not just to its children. Default
@@ -419,7 +421,7 @@
 .dc-outcome-key .dc-outcome-roll {
   font-family: var(--font-display);
   font-size: 16px;
-  font-weight: 700;
+  font-weight: 400;
   letter-spacing: 0.03em;
   color: var(--dc-outcome-key-color);
   display: block;
@@ -529,6 +531,7 @@
 
 .dc-roll-table-name {
   font-family: var(--font-display);
+  font-weight: 400;
   font-size: var(--fs-h5);
   letter-spacing: var(--ls-heading);
   text-transform: uppercase;
@@ -586,6 +589,7 @@
   top: -6px;
   left: 10px;
   font-family: var(--font-display);
+  font-weight: 400;
   font-size: 48px;
   color: color-mix(in srgb, var(--hud-magenta) 55%, var(--dc-pullquote-bg));
   line-height: 1;
@@ -724,6 +728,7 @@
    heading and a divider. A bold lead (`**Term** — gloss`) needs nothing. */
 .dc-definition-block > h4 {
   font-family: var(--font-display);
+  font-weight: 400;
   font-size: var(--fs-h5);
   font-style: normal;
   letter-spacing: var(--ls-heading);
@@ -825,6 +830,7 @@
 
 .dc-stat-cell-val {
   font-family: var(--font-display);
+  font-weight: 400;
   font-size: 26px;
   letter-spacing: 0.04em;
   color: var(--orange);
@@ -1053,6 +1059,7 @@ p.dc-img-wrapper {
   margin: 0;
   padding: 0 8px;
   font-family: var(--font-display);
+  font-weight: 400;
   font-size: 24px;
   letter-spacing: 0.04em;
   line-height: 1.1;

package/styles/components/section.css

@@ -119,6 +119,11 @@ div[class="section"] {
 .dc-section-panel {
   background: transparent;
   --dc-section-edge: var(--dc-section-pad-bottom);
+  /* The soft lift under the hung sheet (--shadow-lift, sized to include the
+     hanging edge). A host that is a stacking context paints it first, under
+     the surface and hard-shadow layers. Recessed kinds set its colour to
+     transparent: they are sunk into the wall, not hung on it. */
+  box-shadow: 3pt calc(7pt + var(--dc-section-edge)) 12pt -5pt var(--dc-section-lift);
 }
 
 /* Keep a section whole, or let it split: the token is the one setting.
@@ -220,8 +225,8 @@ div[class="section"] {
   left: 3px;
   right: -3px;
   bottom: 0;
-  background: var(--ink-dark);
-  box-shadow: 0 calc(3px + var(--dc-section-edge)) 0 0 var(--ink-dark);
+  background: var(--dc-section-hard-shadow);
+  box-shadow: 0 calc(3px + var(--dc-section-edge)) 0 0 var(--dc-section-hard-shadow);
   clip-path: polygon(
     var(--dc-section-cut-tl) 0,
     calc(100% - var(--dc-section-clip)) 0,
@@ -431,17 +436,23 @@ h3 + .dc-section-panel {
 :is(.dc-section-lore, .dc-section-dm) {
   --dc-section-recess:
     inset 0 var(--dc-section-recess-depth) 0 0 var(--dc-section-recess-shade),
+    inset 0 calc(var(--dc-section-recess-depth) + 6pt) 9pt -6pt var(--shadow-press),
     inset -2px 0 0 0 var(--dc-section-recess-lip);
   --dc-section-recess-foot: 2px;
   --dc-section-shadow: none;
+  --dc-section-lift: transparent;
 }
 .dc-section-choose {
   --dc-section-recess:
     inset 0 var(--dc-section-recess-depth) 0 0 var(--dc-section-recess-shade),
+    inset 0 calc(var(--dc-section-recess-depth) + 6pt) 9pt -6pt var(--shadow-press),
     inset -2px -2px 0 0 var(--dc-section-recess-lip);
+  --dc-section-lift: transparent;
 }
 :is(.dc-section-lore, .dc-section-dm) > :is(h2, h3):first-child {
-  box-shadow: inset 0 var(--dc-section-recess-depth) 0 0 var(--dc-section-recess-shade);
+  box-shadow:
+    inset 0 var(--dc-section-recess-depth) 0 0 var(--dc-section-recess-shade),
+    inset 0 calc(var(--dc-section-recess-depth) + 6pt) 9pt -6pt var(--shadow-press);
 }
 
 /* ── lore — the world ─────────────────────────────────────────────────────────
@@ -722,7 +733,7 @@ h3 + .dc-section-panel {
 .dc-block-title {
   font-family: var(--font-display);
   font-size: var(--fs-h4);
-  font-weight: var(--fw-bold);
+  font-weight: 400;
   letter-spacing: var(--ls-heading);
   text-transform: uppercase;
   line-height: 1.3;
@@ -871,7 +882,7 @@ h3 + .dc-section-panel {
 .dc-card-heading {
   font-family: var(--font-display);
   font-size: var(--fs-h4);
-  font-weight: var(--fw-bold);
+  font-weight: 400;
   text-transform: uppercase;
   letter-spacing: var(--ls-heading);
   margin-bottom: var(--space-xs);
@@ -932,7 +943,7 @@ h3 + .dc-section-panel {
   margin-top: 0;
   font-family: var(--font-display);
   font-size: var(--fs-h4);
-  font-weight: var(--fw-bold);
+  font-weight: 400;
   text-transform: uppercase;
   letter-spacing: var(--ls-heading);
   margin-bottom: var(--space-xs);
@@ -1467,12 +1478,13 @@ h3 + .dc-section-panel {
   --dc-specialty-card-media-width: 0.38in;
   --dc-specialty-card-name-size: 0.95em;
   /* Padding clears the deepest cut (14px) by 2pt: no glyph meets a corner. */
-  padding: 0.1in 0.14in 0.22in;
+  --dc-specialty-card-pad-x: 0.14in;
+  padding-bottom: 0.22in;
   margin: 0;
 }
 .dc-card-grid .dc-specialty-card img { margin-bottom: 0; }
 .dc-card-grid .dc-specialty-card p { line-height: 1.25; font-size: var(--fs-floor); }
-.dc-card-grid .dc-specialty-card h3 { padding-top: 0; line-height: 1.3; }
+.dc-card-grid .dc-specialty-card h3 { line-height: 1.3; }
 .dc-card-grid .dc-specialty-card blockquote { font-size: var(--fs-floor); margin: 0; line-height: 1.3; }
 
 
@@ -1526,7 +1538,8 @@ h3 + .dc-section-panel {
   border-block: var(--dc-fiction-rule) solid var(--ink-dark);
   box-shadow:
     var(--dc-fiction-shadow),
-    inset var(--dc-fiction-depth) var(--dc-fiction-depth) 0 0 var(--dc-fiction-depth-bg);
+    inset var(--dc-fiction-depth) var(--dc-fiction-depth) 0 0 var(--dc-fiction-depth-bg),
+    inset calc(var(--dc-fiction-depth) + 5pt) calc(var(--dc-fiction-depth) + 5pt) 11pt -6pt var(--shadow-press);
   clip-path: var(--dc-fiction-shape);
   z-index: -1;
 }

package/styles/components/specialty-identity.css

@@ -9,9 +9,9 @@
      set per specialty   --spec-edge-top, --spec-edge-rest (and --spec-edge-title
                          where the band's foot is torn): the shell/intro/band
                          silhouette; --dc-skill-tab-shape (.dc-card-tab),
-                         --dc-skill-body-shape (.dc-card-body),
-                         --dc-specialty-card-shell-shape (.dc-specialty-card)
-     derived (wiring)    --dc-path-shell-clip, --dc-path-title-shape,
+                         --dc-skill-body-shape (.dc-card-body)
+     derived (wiring)    --dc-path-shell-clip, --dc-path-title-shape (and the
+                         specialty card's sheet and band, which are these two),
                          --dc-specialty-intro-clip, --dc-specialty-intro-title-shape
 
    SHAPE LANGUAGE (silhouette = register): tech = crisp stair-steps and square
@@ -107,12 +107,17 @@
   --dc-specialty-intro-bg: var(--paper-light);
 }
 
+/* The card is the path banner's family: the banner's silhouette for the
+   sheet, its colour and cut for the name band. */
 .dc-specialty .dc-specialty-card {
   --dc-accent-ink: var(--spec-ink);
   --dc-specialty-card-bg: var(--paper-cream);
   --dc-specialty-card-fg: var(--ink);
   --dc-specialty-card-accent: var(--spec-band);
-  --dc-specialty-card-border: var(--spec-mid);
+  --dc-specialty-card-band-bg: var(--spec-band);
+  --dc-specialty-card-band-fg: var(--spec-on-band);
+  --dc-specialty-card-shell-shape: var(--dc-path-shell-clip);
+  --dc-specialty-card-band-shape: var(--dc-path-title-shape);
   --dc-specialty-card-title-color: var(--spec-dark);
 }
 
@@ -155,20 +160,9 @@
   --spec-edge-rest: 100% calc(100% - 12px), calc(100% - 8px) calc(100% - 12px), calc(100% - 8px) calc(100% - 8px), calc(100% - 16px) calc(100% - 8px), calc(100% - 16px) calc(100% - 4px), calc(100% - 24px) calc(100% - 4px), calc(100% - 24px) 100%, 10px 100%, 0 calc(100% - 10px);
   --dc-skill-tab-shape: polygon(0 8px, 8px 0, calc(100% - 15px) 0, calc(100% - 15px) 5px, calc(100% - 10px) 5px, calc(100% - 10px) 10px, calc(100% - 5px) 10px, calc(100% - 5px) 15px, 100% 15px, 100% 100%, 0 100%);
   --dc-skill-body-shape: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 8px) calc(100% - 12px), calc(100% - 8px) calc(100% - 8px), calc(100% - 16px) calc(100% - 8px), calc(100% - 16px) calc(100% - 4px), calc(100% - 24px) calc(100% - 4px), calc(100% - 24px) 100%, 12px 100%, 0 calc(100% - 12px));
-  --dc-specialty-card-shell-shape: polygon(0 12px, 12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 6px) calc(100% - 12px), calc(100% - 6px) calc(100% - 8px), calc(100% - 12px) calc(100% - 8px), calc(100% - 12px) calc(100% - 4px), calc(100% - 18px) calc(100% - 4px), calc(100% - 18px) 100%, 0 100%);
   --spec-media-shape: polygon(0 10px, 10px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 6px) calc(100% - 12px), calc(100% - 6px) calc(100% - 8px), calc(100% - 12px) calc(100% - 8px), calc(100% - 12px) calc(100% - 4px), calc(100% - 18px) calc(100% - 4px), calc(100% - 18px) 100%, 0 100%);
 }
 
-/* Augmerc — paper poster with magenta ink. The specialty signature color
-   lives in the border + title, not the substrate — accent/border key on
-   the specialty's ACCENT token, not the shared --spec-mid pattern (a
-   genuine per-specialty delta, along with cybersurgeon below). Keeps the
-   card readable as a flyer pasted on the brick wall, not a painted plaque. */
-.dc-specialty.augmerc .dc-specialty-card {
-  --dc-specialty-card-accent: var(--brand-magenta);
-  --dc-specialty-card-border: var(--brand-magenta);
-  --dc-specialty-card-shadow: inset 0 0 0 1.5pt var(--brand-magenta);
-}
 
 /* ── Cybersurgeon — precision surgical, silver, top-right diagonal ──────── */
 .dc-specialty.cybersurgeon {
@@ -196,16 +190,9 @@
   --spec-edge-rest: 100% 100%, 20px 100%, 20px calc(100% - 9px), 0 calc(100% - 9px);
   --dc-skill-tab-shape: polygon(0 0, calc(100% - 18px) 0, calc(100% - 18px) 9px, 100% 9px, 100% 100%, 0 100%);
   --dc-skill-body-shape: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 26px) calc(100% - 9px), calc(100% - 26px) 100%, 0 100%);
-  --dc-specialty-card-shell-shape: polygon(0 0, calc(100% - 24px) 0, calc(100% - 24px) 9px, 100% 9px, 100% 100%, 16px 100%, 16px calc(100% - 9px), 0 calc(100% - 9px));
   --spec-media-shape: polygon(0 0, calc(100% - 22px) 0, calc(100% - 22px) 9px, 100% 9px, 100% calc(100% - 9px), calc(100% - 22px) calc(100% - 9px), calc(100% - 22px) 100%, 0 100%);
 }
 
-/* Cybersurgeon — the chrome band and steel frame come from the shared wiring;
-   only the clinical inset frame is its own. */
-.dc-specialty.cybersurgeon .dc-specialty-card {
-  --dc-specialty-card-shadow: inset 0 0 0 1.5pt var(--cybersurgeon-mid);
-}
-
 /* ── Technosorcerer — ritual on scrap, scorch orange, a burnt corner ──── */
 .dc-specialty.technosorcerer {
   --spec-accent: var(--technosorcerer-accent);
@@ -228,7 +215,6 @@
   --spec-edge-rest: 100% calc(100% - 22px), calc(100% - 4px) calc(100% - 17px), calc(100% - 2px) calc(100% - 11px), calc(100% - 13px) calc(100% - 9px), calc(100% - 17px) calc(100% - 3px), 100% 100%, calc(100% - 48px) 100%, 82% calc(100% - 6px), 69% calc(100% - 1px), 55% calc(100% - 7px), 41% calc(100% - 2px), 27% calc(100% - 7px), 14% calc(100% - 1px), 7% calc(100% - 4px), 0 100%, 0 calc(100% - 9px), 3px calc(100% - 14px);
   --dc-skill-tab-shape: polygon(0 14px, 14px 0, 38% 2px, 44% 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
   --dc-skill-body-shape: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 5px) calc(100% - 15px), calc(100% - 4px) calc(100% - 9px), calc(100% - 17px) calc(100% - 8px), calc(100% - 24px) calc(100% - 2px), 100% 100%, calc(100% - 38px) 100%, 78% calc(100% - 5px), 62% calc(100% - 1px), 47% calc(100% - 6px), 31% calc(100% - 2px), 17% calc(100% - 6px), 8% calc(100% - 1px), 4px calc(100% - 3px), 0 100%, 0 calc(100% - 7px));
-  --dc-specialty-card-shell-shape: polygon(0 14px, 14px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 4px) calc(100% - 14px), calc(100% - 15px) calc(100% - 10px), calc(100% - 20px) calc(100% - 3px), 100% 100%, calc(100% - 34px) 100%, 70% calc(100% - 4px), 52% calc(100% - 1px), 33% calc(100% - 5px), 15% calc(100% - 1px), 6% calc(100% - 3px), 0 100%);
   --spec-edge-title: 100% calc(100% - 2px), 96% 100%, 91% calc(100% - 4px), 85% calc(100% - 1px), 79% calc(100% - 4px), 72% 100%, 65% calc(100% - 5px), 58% calc(100% - 1px), 50% calc(100% - 4px), 42% 100%, 35% calc(100% - 3px), 27% calc(100% - 1px), 20% calc(100% - 4px), 12% 100%, 6% calc(100% - 3px), 0 calc(100% - 1px);
   --spec-media-shape: polygon(0 14px, 14px 0, 100% 0, calc(100% - 2px) 40%, 100% 70%, 100% 100%, calc(100% - 20px) calc(100% - 3px), 86% calc(100% - 7px), 72% calc(100% - 2px), 58% calc(100% - 8px), 43% calc(100% - 3px), 29% calc(100% - 8px), 15% calc(100% - 2px), 6% calc(100% - 6px), 0 100%);
 }
@@ -261,14 +247,9 @@
   --spec-edge-rest: 100% calc(100% - 10px), calc(100% - 10px) 100%, 22px 100%, 22px calc(100% - 6px), 11px calc(100% - 6px), 11px calc(100% - 12px), 0 calc(100% - 12px);
   --dc-skill-tab-shape: polygon(0 0, calc(100% - 22px) 0, calc(100% - 22px) 10px, calc(100% - 11px) 10px, calc(100% - 11px) 20px, 100% 20px, 100% 100%, 0 100%);
   --dc-skill-body-shape: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 22px 100%, 22px calc(100% - 6px), 11px calc(100% - 6px), 11px calc(100% - 12px), 0 calc(100% - 12px));
-  --dc-specialty-card-shell-shape: polygon(0 0, calc(100% - 18px) 0, calc(100% - 18px) 6px, calc(100% - 9px) 6px, calc(100% - 9px) 12px, 100% 12px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 18px 100%, 18px calc(100% - 6px), 9px calc(100% - 6px), 9px calc(100% - 12px), 0 calc(100% - 12px));
   --spec-media-shape: polygon(0 0, calc(100% - 18px) 0, calc(100% - 18px) 6px, calc(100% - 9px) 6px, calc(100% - 9px) 12px, 100% 12px, 100% 100%, 18px 100%, 18px calc(100% - 6px), 9px calc(100% - 6px), 9px calc(100% - 12px), 0 calc(100% - 12px));
 }
 
-.dc-specialty.wirephreak .dc-specialty-card {
-  --dc-specialty-card-shadow: inset 0 0 0 1.5pt var(--wirephreak-mid);
-}
-
 /* ── Streetwarden — community defender, green, soft diamond cuts ──────── */
 .dc-specialty.streetwarden {
   --spec-accent: var(--streetwarden-accent);
@@ -293,7 +274,6 @@
   --spec-edge-rest: 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px);
   --dc-skill-tab-shape: polygon(0 8px, 8px 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
   --dc-skill-body-shape: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px));
-  --dc-specialty-card-shell-shape: polygon(0 14px, 14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px));
   --spec-media-shape: polygon(0 14px, 14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px));
 }
 
@@ -324,7 +304,6 @@
   --spec-edge-rest: 100% calc(100% - 12px), calc(100% - 10px) calc(100% - 12px), calc(100% - 10px) calc(100% - 6px), calc(100% - 20px) calc(100% - 6px), calc(100% - 20px) 100%, 12px 100%, 0 calc(100% - 12px);
   --dc-skill-tab-shape: polygon(0 8px, 8px 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
   --dc-skill-body-shape: polygon(0 0, calc(50% - 18px) 0, 50% 6px, calc(50% + 18px) 0, 100% 0, 100% calc(100% - 12px), calc(100% - 10px) calc(100% - 12px), calc(100% - 10px) calc(100% - 6px), calc(100% - 20px) calc(100% - 6px), calc(100% - 20px) 100%, 12px 100%, 0 calc(100% - 12px));
-  --dc-specialty-card-shell-shape: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px));
   --spec-media-shape: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 16px 100%, 16px calc(100% - 5px), 8px calc(100% - 5px), 8px calc(100% - 10px), 0 calc(100% - 10px));
 }
 
@@ -350,7 +329,6 @@
   --spec-edge-rest: calc(100% - 3px) 63%, calc(100% - 2px) 73%, calc(100% - 4px) 83%, 100% calc(100% - 10px), calc(100% - 10px) 100%, 85% calc(100% - 6px), 71% calc(100% - 6px), 57% calc(100% - 5px), 43% calc(100% - 5px), 29% calc(100% - 2px), 15% calc(100% - 2px), 12px 100%, 0 calc(100% - 12px), 4px 83%, 4px 73%, 0 63%;
   --dc-skill-tab-shape: polygon(0 7px, 7px 0, 40% 2px, 60% 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
   --dc-skill-body-shape: polygon(0 5px, 5px 0, 38% 0, 53% 1px, 69% 2px, 84% 1px, calc(100% - 6px) 0, 100% 6px, calc(100% - 1px) 22%, calc(100% - 1px) 50%, 100% 78%, 100% calc(100% - 10px), calc(100% - 10px) 100%, 85% calc(100% - 4px), 71% 100%, 57% 100%, 43% calc(100% - 6px), 29% calc(100% - 2px), 15% calc(100% - 6px), 12px 100%, 0 calc(100% - 12px), 1px 78%, 4px 50%, 3px 22%);
-  --dc-specialty-card-shell-shape: polygon(0 7px, 7px 0, 18% 0, 40% 3px, 60% 0, 82% 3px, calc(100% - 7px) 0, 100% 7px, 100% 53%, calc(100% - 1px) 68%, calc(100% - 1px) 84%, 100% calc(100% - 10px), calc(100% - 10px) 100%, 84% calc(100% - 2px), 67% calc(100% - 1px), 50% calc(100% - 5px), 33% calc(100% - 1px), 16% calc(100% - 4px), 10px 100%, 0 calc(100% - 10px), 1px 84%, 0 68%, 2px 53%);
   --spec-edge-title: 100% calc(100% - 2px), 96% 100%, 91% calc(100% - 4px), 85% calc(100% - 1px), 79% calc(100% - 4px), 72% 100%, 65% calc(100% - 5px), 58% calc(100% - 1px), 50% calc(100% - 4px), 42% 100%, 35% calc(100% - 3px), 27% calc(100% - 1px), 20% calc(100% - 4px), 12% 100%, 6% calc(100% - 3px), 0 calc(100% - 1px);
   --spec-media-shape: polygon(0 8px, 8px 0, 16% 3px, 33% 2px, 50% 1px, 67% 1px, 84% 3px, calc(100% - 10px) 0, 100% 10px, 100% 18%, 100% 40%, calc(100% - 2px) 60%, calc(100% - 1px) 82%, 100% calc(100% - 12px), calc(100% - 12px) 100%, 85% calc(100% - 2px), 71% calc(100% - 3px), 57% calc(100% - 1px), 43% calc(100% - 5px), 29% calc(100% - 2px), 15% 100%, 9px 100%, 0 calc(100% - 9px), 0 82%, 4px 60%, 4px 40%, 3px 18%);
 }
@@ -381,7 +359,6 @@
   --spec-edge-rest: 100% calc(100% - 16px), calc(100% - 16px) 100%, 6px 100%, 0 calc(100% - 6px);
   --dc-skill-tab-shape: polygon(0 10px, 10px 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
   --dc-skill-body-shape: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 8px 100%, 0 calc(100% - 8px));
-  --dc-specialty-card-shell-shape: polygon(0 14px, 14px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 6px 100%, 0 calc(100% - 6px));
   --spec-media-shape: polygon(0 14px, 14px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 6px 100%, 0 calc(100% - 6px));
 }
 
@@ -411,7 +388,6 @@
   --spec-edge-rest: 100% calc(100% - 14px), calc(100% - 14px) 100%, calc(50% + 26px) 100%, 50% calc(100% - 7px), calc(50% - 26px) 100%, 14px 100%, 0 calc(100% - 14px);
   --dc-skill-tab-shape: polygon(0 10px, 10px 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
   --dc-skill-body-shape: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, calc(50% + 24px) 100%, 50% calc(100% - 7px), calc(50% - 24px) 100%, 14px 100%, 0 calc(100% - 14px));
-  --dc-specialty-card-shell-shape: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, calc(50% + 22px) 100%, 50% calc(100% - 5px), calc(50% - 22px) 100%, 14px 100%, 0 calc(100% - 14px));
   --spec-media-shape: polygon(0 12px, 12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px));
 }
 
@@ -437,7 +413,6 @@
   --spec-edge-rest: 100% calc(100% - 6px), calc(100% - 6px) 100%, 22px 100%, 0 calc(100% - 22px);
   --dc-skill-tab-shape: polygon(0 4px, 4px 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
   --dc-skill-body-shape: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 18px 100%, 0 calc(100% - 18px));
-  --dc-specialty-card-shell-shape: polygon(0 6px, 6px 0, calc(100% - 16px) 0, 100% 16px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 16px 100%, 0 calc(100% - 16px));
   --spec-media-shape: polygon(0 5px, 5px 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 5px), calc(100% - 5px) 100%, 18px 100%, 0 calc(100% - 18px));
 }
 

package/styles/components/specialty.css

@@ -174,67 +174,81 @@
 }
 
 /* Token contract for .dc-specialty-card:
-     --dc-specialty-card-bg            → card body background (default --paper-cream)
-     --dc-specialty-card-border        → outer card border color (default --hud-blue)
-     --dc-specialty-card-accent        → inner accent rule color (default --crimson)
+     --dc-specialty-card-bg            → the sheet's paper (default --paper-cream)
+     --dc-specialty-card-accent        → the tagline's rule (default --crimson)
      --dc-specialty-card-fg            → body text color (default --ink)
+     --dc-specialty-card-band-bg / -fg → the name band and the type on it
      --dc-specialty-card-media-width   → portrait image width (default 0.75in)
      --dc-specialty-card-media-height  → portrait image height (default 0.85in)
-     --dc-specialty-card-title-align   → title text-align (default right)
-     --dc-specialty-card-shell-shape   → outer clip-path polygon
-     --dc-specialty-card-shadow        → box-shadow (default none) — future-tech-high
-                                          specialties opt into LED-rim inset highlight here
-   Specialty themes override via .dc-specialty.<name> .dc-specialty-card { }. */
+     --dc-specialty-card-title-align   → tagline text-align (default right)
+     --dc-specialty-card-shell-shape   → the sheet's silhouette (clip-path)
+     --dc-specialty-card-band-shape    → the band's silhouette (clip-path)
+   Inside a .dc-specialty the wiring (specialty-identity.css) sets them from
+   the specialty: the sheet is cut like its path banner, and the band is the
+   banner's own colour and cut, so a card reads as the same family as that
+   specialty's skill cards. */
 
 /* ── Specialty card (.dc-specialty-card + descendants + nth-of-type(even)) */
 /* Token defaults for .dc-specialty-card are declared in :root in dc-component-defaults.css.
    Specialty contexts override via .dc-specialty.<name> .dc-specialty-card { } above. */
+/* The path banner's construction (data.css .dc-path-shell): the element is
+   unclipped, the paper is ::before cut to the silhouette, a 2px ink outline is
+   ::after (the silhouette on a box 2px larger), and the name is a band clipped
+   to the banner's own cut. Its soft lift is this element's box-shadow, which
+   paints first in its own stacking context, under both layers; it is pulled in
+   (negative spread) so it never shows past a cut corner. */
 .dc-specialty-card {
-  /* Only the optional per-specialty inset shadow (LED rim) is declared:
-     clip-path below clips this element's own outer box-shadow, so a
-     --shadow-poster layer here would never paint. */
-  box-shadow: var(--dc-specialty-card-shadow);
-  /* Poster-header pattern: thick colored TOP border = the specialty's
-     header ribbon. paper-cream body below = the printed flyer substrate.
-     Title h3 + body content sit inside the padding box, naturally below
-     the border (which is part of the box model, not content area).
-     This puts the specialty signature in the band + title color + side
-     border — NOT in the card body. Reads as a printed poster pasted on
-     the brick wall, not a painted plaque. */
-  background: var(--dc-specialty-card-bg);
+  box-shadow: var(--shadow-lift);
   color: var(--dc-specialty-card-fg);
   /* flow-root for the dense card; flex (a column) for the poster card of the
-     specialty-catalog page, where the portrait is ordered above the name. */
+     specialty-catalog page, where the portrait sits under the band. */
   display: var(--dc-specialty-card-display);
   flex-direction: column;
-  overflow: hidden;
   line-height: var(--lh-tight);
   /* Card spacing: --dc-card-gap plus 4px (layout, not shadow clearance).
      .dc-card-grid resets this to 0 — the grid packs cards deliberately tight
      and owns its own spacing. */
   margin: 0 0 calc(var(--dc-card-gap) + 4px) 0;
-  padding: 0.14in 0.18in 0.18in 0.18in;
+  /* Top: the outline's 2px rim; the band starts under it and reaches out
+     through the side padding to the sheet's edges. */
+  padding: 2px var(--dc-specialty-card-pad-x) 0.18in;
   position: relative;
+  isolation: isolate;
   break-inside: avoid;
-  border: 1.5pt solid var(--dc-specialty-card-border);
-  border-top: var(--dc-specialty-card-band-height) solid var(--dc-specialty-card-accent);
-  border-left: 3pt solid var(--dc-specialty-card-accent);
-  /* The top band gets a small chip cut at the upper-right to break the flat
-     rectangle reading. Per-specialty --dc-specialty-card-shell-shape takes
-     precedence over the default 12px chamfer at the top-right corner. */
+}
+
+.dc-specialty-card::before {
+  content: '';
+  position: absolute;
+  inset: 2px 0 0;
+  background: var(--dc-specialty-card-bg);
   clip-path: var(--dc-specialty-card-shell-shape);
+  z-index: -1;
+}
+
+.dc-specialty-card::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: -2px;
+  bottom: -2px;
+  left: -2px;
+  background: var(--ink);
+  clip-path: var(--dc-specialty-card-shell-shape);
+  z-index: -2;
 }
 
 /* Portrait. By default a small image floated beside the text (the dense
    card); the specialty-catalog page sets the tokens for a full-width frame
-   above the name. The wrapper (the paragraph the image sits in) is the frame:
+   above the name. The wrapper (the paragraph the image sits in) is the frame, and it is what floats:
    an ink mat (--dc-specialty-card-media-mat, 0 by default) clipped to the
    specialty's own cut (--dc-specialty-card-media-shape), over a paper-aged
    field, so it reads whether the picture loads or the field is empty. */
 .dc-specialty-card .dc-img-wrapper {
   order: var(--dc-specialty-card-media-order);
   position: relative;
-  margin: 0;
+  float: var(--dc-specialty-card-media-float);
+  margin: var(--dc-specialty-card-media-margin);
   padding: var(--dc-specialty-card-media-mat);
   background: var(--ink);
   clip-path: var(--dc-specialty-card-media-shape);
@@ -248,8 +262,7 @@
   border: none;
   padding: 0;
   box-sizing: border-box;
-  float: var(--dc-specialty-card-media-float);
-  margin: var(--dc-specialty-card-media-margin);
+  margin: 0;
   border-radius: 2px;
   background: var(--paper-aged);
   color: var(--ink);
@@ -280,18 +293,23 @@
    here, in the border, and in the body-accent rule — NOT in the card
    background. The card itself stays paper-cream so the colored elements
    read as ink on paper, not as a painted card. */
+/* The name is the specialty's band, as on its path banner: the banner's fill,
+   type colour and cut, spanning the sheet edge to edge, its padding the
+   deepest cut plus 2pt (data.css, the path banner). First in the poster card
+   too: the portrait sits under it. */
 .dc-specialty-card h3 {
-  margin: 0;
-  /* In the poster card (a flex column) the slack of a row's shorter card goes
-     above the name, between the portrait and the text, so the type block sits
-     at the foot with no dead cream under the pitch; in the dense card an auto
-     top margin is 0. */
-  margin-top: auto;
-  padding-top: 0;
+  order: -2;
+  position: relative;
+  margin: 0 calc(-1 * var(--dc-specialty-card-pad-x)) 0.1in;
+  padding: 12px 28px 7px 20px;
   border-top: 0;
+  background: var(--light-gloss), var(--dc-specialty-card-band-bg);
+  box-shadow: var(--dc-band-rim);
+  clip-path: var(--dc-specialty-card-band-shape);
+  overflow: clip;
   font-size: var(--dc-specialty-card-name-size);
-  color: var(--dc-specialty-card-title-color);
-  text-align: var(--dc-specialty-card-title-align);
+  color: var(--dc-specialty-card-band-fg);
+  text-align: left;
   /* A specialty's name is one word and sets on one line: a long one
      ("TECHNOSORCERER") broke mid-word and orphaned its last letter. The
      display face is tracked tighter instead (technosorcerer, the longest,
@@ -301,6 +319,22 @@
   overflow-wrap: normal;
 }
 
+/* The band's rule, as under the path banner: the register (LED dots, hazard
+   tape, a solid bar) from the --dc-band-* tokens the specialty sets. */
+.dc-specialty-card h3::after {
+  content: '';
+  position: absolute;
+  left: calc(-1 * var(--dc-band-rule-bleed));
+  right: calc(-1 * var(--dc-band-rule-bleed));
+  bottom: 0;
+  height: var(--dc-band-rule-h);
+  box-sizing: border-box;
+  background: var(--dc-band-rule);
+  border-top: var(--dc-band-tick-w) var(--dc-band-tick-style) var(--dc-band-tick);
+  box-shadow: var(--dc-band-reg);
+  transform: skewX(var(--dc-band-rule-skew));
+}
+
 /* Subtitle tagline — the specialty's "archetype label" (e.g.,
    "Cybernetic Commando", "Wold Witch"). It is the card's one interior visual
    beat: mono-caps + tracked + accent-colored + bottom-rule gives the card a
@@ -311,7 +345,11 @@
   border: none;
   border-bottom: 0.75pt solid var(--dc-specialty-card-accent);
   padding: 0 0.06in 0.03in;
-  margin: 0.02in 0 0.06in;
+  /* In the poster card (a flex column) the slack of a row's shorter card goes
+     above the tagline, between the portrait and the text, so the type block
+     sits at the foot with no dead paper under the pitch; in the dense card an
+     auto top margin is 0. */
+  margin: auto 0 0.06in;
   font-family: var(--font-mono);
   font-size: var(--fs-floor);
   font-style: normal;
@@ -336,17 +374,14 @@
   overflow-wrap: anywhere;
 }
 
-/* Even cards flip the border accent to the right. data-position is emitted by
-   the plugin (dcSpecialtyCardPositions), which counts every specialty card
-   in the document — :nth-of-type() would count within the DOM parent instead. */
+/* Even cards float the portrait right. data-position is emitted by the plugin
+   (dcSpecialtyCardPositions), which counts every specialty card in the
+   document — :nth-of-type() would count within the DOM parent instead. */
 .dc-specialty-card[data-position="even"] {
   --dc-specialty-card-title-align: left;
-
-  border-left: 1.5pt solid var(--dc-specialty-card-border);
-  border-right: var(--callout-border-width-small) solid var(--dc-specialty-card-accent);
 }
 
-.dc-specialty-card[data-position="even"] img {
+.dc-specialty-card[data-position="even"] .dc-img-wrapper {
   float: var(--dc-specialty-card-media-float-even);
   margin: var(--dc-specialty-card-media-margin-even);
 }
@@ -367,11 +402,16 @@
   counter-reset: dc-specialty;
 }
 
+/* A card spans one column or both (--dc-card-grid-item-span, 1 or 2); a page
+   may reorder the cards (--dc-card-grid-item-order) and break before one
+   (--dc-card-grid-item-break). */
 .dc-card-grid .dc-specialty {
   display: var(--dc-card-grid-item-display);
   flex-direction: column;
-  flex: 0 0 calc(50% - var(--gp-column-gap) / 2);
+  flex: 0 0 calc(50% * var(--dc-card-grid-item-span) + (var(--dc-card-grid-item-span) - 2) * var(--gp-column-gap) / 2);
   min-height: var(--dc-card-grid-row);
+  order: var(--dc-card-grid-item-order);
+  break-before: var(--dc-card-grid-item-break);
 }
 
 .dc-card-grid .dc-specialty-card {

package/styles/dc-component-defaults.css

@@ -47,6 +47,8 @@
   --dc-section-recess-shade: var(--ink-dark);
   --dc-section-recess-lip:   var(--paper-cream);
   --dc-section-recess-foot:  0px;                 /* how far the sheet's hanging edge stops short of the lip */
+  --dc-section-lift:         var(--shadow-soft);  /* the soft lift's colour; transparent on a recessed kind */
+  --dc-section-hard-shadow:  color-mix(in srgb, var(--ink-dark) 82%, transparent);  /* the hard offset copy; translucent, so the brick reads through */
   --dc-section-top:          0px;                 /* extra padding on top inside the box: a kind that draws a tab (dm) reserves its height here */
   --dc-section-shadow-y:     0px;                 /* the shadow layer's extra offset: a kind with its own polygon adds it to both layers' foot */
   --dc-section-ink-mix:      72%;                 /* --dc-accent-ink of a panel: the accent mixed this far with --dc-section-ink-tone */
@@ -186,13 +188,14 @@
 
   /* .dc-specialty-card public API */
   --dc-specialty-card-bg:          var(--paper-cream);
-  --dc-specialty-card-border:      var(--hud-blue);
   --dc-specialty-card-accent:      var(--crimson);
   --dc-specialty-card-fg:          var(--ink);
   --dc-specialty-card-media-height: 0.85in;
   --dc-specialty-card-media-width:  0.75in;
   --dc-specialty-card-title-align: right;
-  --dc-specialty-card-band-height: 16pt;
+  --dc-specialty-card-band-bg:     var(--dc-specialty-card-accent);
+  --dc-specialty-card-band-fg:     var(--paper-cream);
+  --dc-specialty-card-pad-x:       0.18in;      /* side padding; the name band reaches out through it */
   /* The card's layout. Defaults are the dense catalog card (a small portrait
      floated beside the text, the grid in columns); the specialty-catalog page
      sets them for the tall poster card in a grid of equal rows. */
@@ -209,6 +212,12 @@
   --dc-card-grid-display:           block;       /* flex: aligned rows, two cards across */
   --dc-card-grid-item-display:      block;       /* flex (a column): the card fills its row */
   --dc-card-grid-row:               0;           /* the least height of a row */
+  --dc-card-grid-item-span:         1;           /* 2: the card spans both columns */
+  --dc-card-grid-item-order:        0;           /* flex order: a page may reorder the cards */
+  --dc-card-grid-item-break:        auto;        /* page: the card opens a page */
+  --dc-card-grid-row-tall:          0;           /* a page's taller rows (the catalog's right page) */
+  --dc-card-grid-media-tall:        1in;         /* their portraits */
+  --dc-card-grid-media-wide:        1in;         /* the portrait of a card spanning both columns */
   --dc-card-grid-gap:               0.16in;
 
   /* .dc-block public API */
@@ -414,7 +423,7 @@
 
   /* .dc-pullquote public API */
   --dc-pullquote-accent:      var(--hud-magenta);
-  --dc-pullquote-accent-soft: color-mix(in srgb, var(--tint-magenta-rose) 15%, var(--dc-pullquote-bg));
+  --dc-pullquote-accent-soft: color-mix(in srgb, var(--tint-magenta-rose) 15%, transparent);
   --dc-pullquote-bg:          var(--concrete-pale);
 
   /* The text-safe ink of whatever component the prose sits in: ROLL THE DIE!
@@ -427,8 +436,9 @@
   --dc-skill-body-shape:     polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 44px) 100%, 0 100%);
   --dc-skill-tab-shape:      polygon(0 0, calc(100% - 18px) 0, 100% 100%, 0 100%);
 
-  /* .dc-specialty-card extra public API (shadow + shape + title) */
-  --dc-specialty-card-shadow:      none;
+  /* .dc-specialty-card extra public API (shapes + title). Inside a
+     .dc-specialty both shapes are the specialty's path-banner cuts. */
+  --dc-specialty-card-band-shape:  none;
   --dc-specialty-card-shell-shape: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 18px), calc(100% - 24px) 100%, 0 100%);
   --dc-specialty-card-title-color: var(--dc-specialty-card-accent);
 

package/styles/dc-core.css

@@ -77,6 +77,10 @@ body {
 h1, h2, h3, h4, h5, h6,
 .dc-h3, .dc-h4, .dc-h5, .dc-h6 {
   font-family: var(--font-display);
+  font-weight: 400;
+  /* `**bold**` in a heading asks for a bolder Lixdu, which has none: print it
+     in Lixdu's own stroke rather than a synthetic (Type 3) bold. */
+  font-synthesis-weight: none;
   letter-spacing: var(--ls-display);
   line-height: var(--lh-tight);
   text-transform: uppercase;
@@ -90,7 +94,6 @@ h1, h2, h3, h4, h5, h6,
 /* H1 — magenta neon authority: chapter openers, page-level titles. */
 h1 {
   font-size: var(--fs-h1);
-  font-weight: var(--fw-bold);
   letter-spacing: 0.2em;
   margin-bottom: 0.75em;
   color: var(--hud-magenta);
@@ -116,7 +119,6 @@ h6, .dc-h6 { font-size: var(--fs-h6); margin-top: 0; color: var(--ink-dust); let
 /* What h1/h2 add that no lower look has: clear it when a look class is on
    one of those tags. */
 .dc-h3, .dc-h4, .dc-h5, .dc-h6 {
-  font-weight: var(--fw-bold);
   margin-bottom: 0.5em;
   border-bottom: 0;
   padding-bottom: 0;

package/styles/dc-native.css

@@ -134,7 +134,7 @@
     line-height: 1;
     font-family: var(--font-display);
     font-size: var(--fs-floor);
-    font-weight: 700;
+    font-weight: 400;
     letter-spacing: 0.06em;
     text-transform: uppercase;
     padding: 2px calc(8px - 0.06em) 0 8px;
@@ -157,7 +157,7 @@
     line-height: 1;
     font-family: var(--font-display);
     font-size: var(--fs-floor);
-    font-weight: 700;
+    font-weight: 400;
     letter-spacing: 0.06em;
     text-transform: uppercase;
     padding: 2px calc(8px - 0.06em) 0 8px;
@@ -207,7 +207,7 @@
     line-height: 1;
     font-family: var(--font-display);
     font-size: var(--fs-floor);
-    font-weight: 700;
+    font-weight: 400;
     letter-spacing: 0.1em;
     text-transform: uppercase;
     padding: 2px calc(9px - 0.1em) 0 9px;
@@ -227,7 +227,7 @@
     line-height: 1;
     font-family: var(--font-display);
     font-size: var(--fs-floor);
-    font-weight: 700;
+    font-weight: 400;
     letter-spacing: 0.1em;
     text-transform: uppercase;
     padding: 2px calc(9px - 0.1em) 0 9px;

package/styles/dc-palette.css

@@ -12,15 +12,30 @@
   --paper-light:  #e2ded7;  /* slightly darker grey alternate surface — for layered paper / secondary panels · TAC 32% (C10 M9 Y13 K0) */
   --paper-aged:   #c8c2b8;  /* weathered grey — decay register, dust + age · TAC 66% (C21 M20 Y26 K0) */
   --paper-stain:  #b0a89c;  /* deep stain — dark inset wells, smoke-grey · TAC 99% (C32 M30 Y37 K0) */
-  /* Poster-wall shadow — hard offset, no blur. Pins paper-register
-     components to the wall as physical objects, "stuck on the wall"
-     rather than "embedded in the page." */
-  /* The wall's average colour (mean of images/brick-wall.png). Shadows and
-     tints that land on the wall pre-composite against it: PDF/X-1a carries
-     no transparency (see docs/print-transparency-inventory.md). */
-  --wall-tone: #c1beb8;  /* TAC 70% (C24 M21 Y25 K0) */
-  --shadow-ink: color-mix(in srgb, var(--ink) 28%, var(--wall-tone));  /* opaque ink-on-wall shadow colour */
-  --shadow-poster: 2pt 3pt 0 var(--shadow-ink);
+  /* Poster-wall shadow — a hard offset that pins paper-register components to
+     the wall as physical objects ("stuck on the wall", not "embedded in the
+     page"), over a soft lift (below).
+     Translucent, so the wall's texture darkens under it. A PDF/X build
+     flattens the pages that use transparency and keeps their text live
+     (Gutterpress #385; see docs/print-transparency-inventory.md). */
+  --shadow-ink: color-mix(in srgb, var(--ink) 28%, transparent);
+  /* Depth (PDF/X preserve-text keeps text live over soft effects; see
+     docs/constitution.md §II "Depth"). Anything hung on the wall casts two
+     shadows: the hard contact edge (--shadow-ink, offset, no blur) that pins it
+     like a poster, and a soft ambient lift under it. The lift is pulled in
+     (negative spread), so it never shows past a clipped corner and only its
+     falloff reaches the wall. Blur comes only from box-shadow or a blurred
+     empty layer, never from `filter` on anything that holds text: Chromium
+     prints a filtered subtree, text included, as a picture. */
+  --shadow-soft: color-mix(in srgb, var(--ink) 34%, transparent);
+  --shadow-lift: 3pt 7pt 12pt -5pt var(--shadow-soft);
+  --shadow-poster: 2pt 3pt 0 var(--shadow-ink), var(--shadow-lift);
+  /* Recess: the soft falloff under a hard cast-shadow band, for anything sunk
+     into the wall (the fiction cavity, the lore/dm/choose sheets). */
+  --shadow-press: color-mix(in srgb, var(--ink-dark) 42%, transparent);
+  /* Light: a soft highlight across the top of a digital-display fill (a band,
+     a tab, a chip): the LED panel's sheen, layered over its colour. */
+  --light-gloss: linear-gradient(to bottom, color-mix(in srgb, var(--paper-cream) 30%, transparent), transparent 62%);
 
   /* ── Ink & Text — warm sepia drift, not neutral gray ───────────────────
      TAC figures in this file are MEASURED, not estimated: a swatch PDF
@@ -82,6 +97,10 @@
   --tint-hud-teal:     #2a6a8a;/* TAC 175% (C85 M52 Y31 K8) */
 
   /* ── Type Families ────────────────────────────────────────────────────── */
+  /* Lixdu has one face, regular. Every rule that sets --font-display sets
+     font-weight: 400 (a test enforces it): a bold weight makes Chromium
+     synthesize a bold, which prints as a Type 3 font that Gutterpress's
+     PDF/X preserve-text split cannot keep (gutterpress#385). */
   --font-display: 'lixdu', 'Tomorrow', sans-serif;
   --font-tab:     'Tomorrow', 'lixdu', sans-serif;
   --font-body:    'Titillium Web', Georgia, sans-serif;

package/styles/page-templates.css

@@ -217,7 +217,7 @@
   border-bottom: 4px solid var(--frontmatter-accent);
   font-size: 26pt;
   letter-spacing: 0.32em;
-  font-weight: 700;
+  font-weight: 400;
 }
 
 /* Lede flush-attaches to the masthead and passes straight into the next
@@ -458,7 +458,7 @@
   right: 0.5in;
   width: 0.42in;
   height: 11px;
-  background: var(--dc-page-slip-tape);
+  background: color-mix(in srgb, var(--dc-page-slip-tape) 78%, transparent);
   border: 1px solid var(--dc-page-slip-edge);
   border-width: 1px 0;
   rotate: -2.5deg;
@@ -553,6 +553,9 @@
   --dc-card-grid-display: flex;
   --dc-card-grid-item-display: flex;
   --dc-card-grid-row: 3.05in;
+  --dc-card-grid-row-tall: 4.45in;     /* the right page's rows */
+  --dc-card-grid-media-tall: 2.35in;   /* their portraits */
+  --dc-card-grid-media-wide: 0.75in;   /* the portrait of a card that spans both columns */
   --dc-card-grid-gap: 0.12in;
   --dc-intro-size: var(--fs-body-sm);  /* the lede at body size, so the left page holds two rows of cards */
 }
@@ -573,6 +576,48 @@
   --dc-specialty-card-title-align: left;
 }
 
+/* Dualist and Generalist, the two specialties built from the others, close the
+   spread: each spans both columns as the last row, Dualist under the left
+   page's four cards and Generalist under the right page's, whatever order the
+   book lists them in. The fifth of the other cards opens the right page, and
+   that page's rows are taller (it has no title or lede above them), with
+   taller portraits, so Generalist closes the page at its foot. */
+.dc-page-specialty-catalog .dc-card-grid .dc-specialty:nth-child(-n + 4 of :not(.dualist, .generalist)) {
+  --dc-card-grid-item-order: 1;
+}
+.dc-page-specialty-catalog .dc-card-grid .dc-specialty:nth-child(n + 5 of :not(.dualist, .generalist)) {
+  --dc-card-grid-item-order: 3;
+  --dc-card-grid-row: var(--dc-card-grid-row-tall);
+}
+.dc-page-specialty-catalog .dc-card-grid .dc-specialty:nth-child(5 of :not(.dualist, .generalist)) {
+  --dc-card-grid-item-break: page;
+}
+.dc-page-specialty-catalog .dc-card-grid .dc-specialty:nth-child(n + 5 of :not(.dualist, .generalist)) > .dc-specialty-card {
+  --dc-specialty-card-media-height: var(--dc-card-grid-media-tall);
+}
+.dc-page-specialty-catalog .dc-card-grid .dc-specialty:is(.dualist, .generalist) {
+  --dc-card-grid-item-span: 2;
+  --dc-card-grid-row: 0;
+}
+.dc-page-specialty-catalog .dc-card-grid .dc-specialty.dualist {
+  --dc-card-grid-item-order: 2;
+}
+.dc-page-specialty-catalog .dc-card-grid .dc-specialty.generalist {
+  --dc-card-grid-item-order: 4;
+}
+/* A full-width card is the dense card again: the band on top, the portrait
+   floated left of the tagline and pitch. */
+.dc-page-specialty-catalog .dc-card-grid :is(.dualist, .generalist) > .dc-specialty-card {
+  --dc-specialty-card-display: flow-root;
+  --dc-specialty-card-media-order: 0;
+  --dc-specialty-card-media-float: left;
+  --dc-specialty-card-media-float-even: left;
+  --dc-specialty-card-media-margin: 0 0.18in 0.06in 0;
+  --dc-specialty-card-media-margin-even: 0 0.18in 0.06in 0;
+  --dc-specialty-card-media-width: 2.4in;
+  --dc-specialty-card-media-height: var(--dc-card-grid-media-wide);
+}
+
 /* A tape divider (`.dc-tape`: the MASTERS strip between creature blocks, a
    section break) never ends a page: it travels with what follows it. */
 .dc-tape {