gp-dimm-city 1.0.0

package/styles/components/specialty-identity.css

@@ -0,0 +1,315 @@
+@layer dc.components {
+
+/* ═══ SPECIALTY PARENT-CONTAINER VARIANTS ═══
+   Each .dc-specialty.<name> parent defines the FULL SHAPE FAMILY for that specialty
+   as CSS custom properties. All shape variables cascade to descendant components.
+   Component sub-blocks set only color/accent tokens.
+
+   Shape variable inventory (defined at parent, consumed by components):
+     --dc-skill-tab-shape            → .dc-card-tab clip-path
+     --dc-skill-body-shape           → .dc-card-body clip-path
+     --dc-path-title-shape           → .dc-path-shell h2.dc-spray clip-path
+     --dc-path-shell-clip            → .dc-path-shell clip-path
+     --dc-specialty-card-shell-shape → .dc-specialty-card clip-path
+     --dc-specialty-intro-title-shape → .dc-specialty-intro > h2 clip-path
+     --dc-specialty-intro-clip       → .dc-specialty-intro clip-path
+
+   Title-covered corners (dc#28): the path-shell and specialty-intro ink
+   outlines are the panel polygon on a 2px-larger box, and the titles are
+   in-flow children with a clip of their own and no outline. A title cut
+   shallower than its panel's would reach past the outline un-inked, so the
+   panel cut EQUALS the title cut wherever the title covers the corner:
+     --dc-path-shell-clip      == --dc-path-title-shape at top-left (the title
+       spans the shell minus its 12px padding-right, so it never reaches the
+       top-right corner, and a centre notch sits 6px left of the shell's);
+     --dc-specialty-intro-clip == --dc-specialty-intro-title-shape at both
+       top corners (the title spans the whole panel). */
+
+/* ── Augmerc — cyber-augmentation, brand magenta + cyan accent, hex cuts ── */
+/* ── Specialty identity + shape shared wiring (dc#38) ─────────────────────
+   Every .dc-specialty.<name> block below declares only its own identity
+   (--spec-accent/-mid/-dark, aliasing that specialty's own --<name>-accent/
+   -mid/-dark tokens) and its shape polygons. The four ONE-TIME wiring rules
+   here read --spec-* and apply it to every specialty's skill-card, path-
+   shell, specialty-intro and specialty-card — this is the pattern every
+   specialty followed identically (verified against all 10 blocks before
+   collapsing); a specialty needs its own extra override below ONLY where
+   its rendered value genuinely differs from this pattern (see the deltas
+   after augmerc/cybersurgeon/proxy/wirephreak/streetwarden/gutterdruid/
+   etherlock/generalist's blocks — technosorcerer and dualist need none).
+   Adding a new specialty: declare shape + --spec-accent/-mid/-dark in its
+   own .dc-specialty.<name> block; it gets correct skill-card/path-shell/
+   specialty-intro/specialty-card theming for free from these four rules. */
+.dc-specialty .dc-skill-card {
+  --dc-card-accent: var(--spec-accent);
+  --dc-card-tab-bg: var(--spec-mid);
+  --dc-card-tab-title-color: var(--paper-cream);
+}
+
+.dc-specialty .dc-path-shell {
+  --dc-path-title-bg: var(--spec-dark);
+  --dc-path-accent: var(--spec-accent);
+}
+
+.dc-specialty .dc-specialty-intro {
+  --dc-specialty-intro-title-bg: var(--spec-dark);
+  --dc-specialty-intro-title-color: var(--paper-cream);
+  --dc-specialty-intro-bg: var(--paper-light);
+}
+
+.dc-specialty .dc-specialty-card {
+  --dc-specialty-card-bg: var(--paper-cream);
+  --dc-specialty-card-fg: var(--ink);
+  --dc-specialty-card-accent: var(--spec-mid);
+  --dc-specialty-card-border: var(--spec-mid);
+  --dc-specialty-card-title-color: var(--spec-dark);
+}
+
+/* ── Augmerc — cyber-augmentation, brand magenta + cyan accent, hex cuts ── */
+.dc-specialty.augmerc {
+  --spec-accent: var(--augmerc-accent);
+  --spec-mid: var(--augmerc-mid);
+  --spec-dark: var(--augmerc-dark);
+  --dc-skill-tab-shape: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%, 0 14px);
+  --dc-skill-body-shape: polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px));
+  /* Path title + shell clip-paths must AGREE at the top-right corner.
+     User feedback: "There's also a weird clipping issue in the top right
+     corner of biting distance similar to the OGMERK specialty intro."
+     Title is cut at 24px-from-right with 18px slope down. Shell is now
+     cut at the SAME 24px point so the title's TR cut sits flush against
+     the shell's TR cut instead of being exposed against a flat corner. */
+  --dc-path-title-shape: polygon(14px 0, calc(100% - 24px) 0, 100% 18px, 100% 100%, 0 100%, 0 14px);
+  --dc-path-shell-clip: polygon(14px 0, calc(100% - 24px) 0, 100% 18px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px), 0 14px);
+  --dc-specialty-card-shell-shape: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
+  /* Same fix on specialty-intro: intro-title is cut at 20px-from-right
+     with 16px slope. intro-clip now matches so the title's TR cut sits
+     flush against the container instead of being exposed against a
+     flat TR corner. */
+  --dc-specialty-intro-title-shape: polygon(14px 0, calc(100% - 20px) 0, 100% 16px, 100% 100%, 0 100%, 0 14px);
+  --dc-specialty-intro-clip: polygon(14px 0, calc(100% - 20px) 0, 100% 16px, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 14px);
+}
+
+/* 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 {
+  --spec-accent: var(--cybersurgeon-accent);
+  --spec-mid: var(--cybersurgeon-mid);
+  --spec-dark: var(--cybersurgeon-dark);
+  /* Tab diagonal capped at 18px — the 30px original exceeded the ~27px tab height,
+     making the polygon degenerate (right edge nearly invisible). */
+  --dc-skill-tab-shape: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
+  --dc-skill-body-shape: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
+  --dc-path-title-shape: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
+  --dc-path-shell-clip: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
+  --dc-specialty-card-shell-shape: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%);
+  --dc-specialty-intro-title-shape: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
+  --dc-specialty-intro-clip: polygon(0 0, calc(100% - 28px) 0, 100% 28px, 100% 100%, 0 100%);
+}
+
+/* Cybersurgeon — accent/border key on the shared HUD-blue chrome token,
+   not the specialty's own --spec-mid (a genuine delta; see augmerc above). */
+.dc-specialty.cybersurgeon .dc-specialty-card {
+  --dc-specialty-card-accent: var(--hud-blue-dark);
+  --dc-specialty-card-border: var(--hud-blue-dark);
+  --dc-specialty-card-shadow: inset 0 0 0 1.5pt var(--hud-blue-dark);
+}
+
+/* ── Proxy — covert, orange, top-left step + diagonal bottom ────────────── */
+.dc-specialty.proxy {
+  --spec-accent: var(--proxy-accent);
+  --spec-mid: var(--proxy-mid);
+  --spec-dark: var(--proxy-dark);
+  --dc-skill-tab-shape: polygon(0 18px, 18px 0, 100% 0, 100% 100%, 0 100%);
+  --dc-skill-body-shape: polygon(0 0, 100% 0, 100% calc(100% - 36px), calc(100% - 52px) 100%, 0 100%);
+  --dc-path-title-shape: polygon(0 18px, 18px 0, 100% 0, 100% 100%, 0 100%);
+  --dc-path-shell-clip: polygon(0 18px, 18px 0, 100% 0, 100% calc(100% - 34px), calc(100% - 56px) 100%, 0 100%);
+  --dc-specialty-card-shell-shape: polygon(0 16px, 16px 0, 100% 0, 100% calc(100% - 24px), calc(100% - 36px) 100%, 0 100%);
+  --dc-specialty-intro-title-shape: polygon(0 18px, 18px 0, 100% 0, 100% 100%, 0 100%);
+  --dc-specialty-intro-clip: polygon(0 18px, 18px 0, 100% 0, 100% calc(100% - 36px), calc(100% - 56px) 100%, 0 100%);
+}
+
+.dc-specialty.proxy .dc-specialty-card {
+  --dc-specialty-card-bg: var(--paper-aged);
+}
+
+/* ── Wirephreak — hacker, magenta, asymmetric cross-cuts ───────────────── */
+.dc-specialty.wirephreak {
+  --spec-accent: var(--wirephreak-accent);
+  --spec-mid: var(--wirephreak-mid);
+  --spec-dark: var(--wirephreak-dark);
+  --dc-skill-tab-shape: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 10px));
+  --dc-skill-body-shape: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 22px 100%, 0 calc(100% - 14px));
+  --dc-path-title-shape: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
+  --dc-path-shell-clip: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% calc(100% - 10px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px));
+  --dc-specialty-card-shell-shape: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 12px));
+  --dc-specialty-intro-title-shape: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%);
+  --dc-specialty-intro-clip: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% calc(100% - 12px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 18px));
+}
+
+.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);
+  --spec-mid: var(--streetwarden-mid);
+  --spec-dark: var(--streetwarden-dark);
+  --dc-skill-tab-shape: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
+  --dc-skill-body-shape: polygon(0 0, 100% 0, 100% calc(100% - 18px), calc(100% - 22px) 100%, 22px 100%, 0 calc(100% - 18px));
+  --dc-path-title-shape: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
+  --dc-path-shell-clip: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px), calc(100% - 28px) 100%, 28px 100%, 0 calc(100% - 20px));
+  --dc-specialty-card-shell-shape: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% calc(100% - 16px), calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 16px));
+  --dc-specialty-intro-title-shape: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 0 100%);
+  --dc-specialty-intro-clip: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px), calc(100% - 28px) 100%, 28px 100%, 0 calc(100% - 20px));
+}
+
+.dc-specialty.streetwarden .dc-specialty-card {
+  --dc-specialty-card-bg: var(--paper-light);
+}
+
+/* ── Technosorcerer — arcane + tech, indigo, top-center gate notch ──────── */
+.dc-specialty.technosorcerer {
+  --spec-accent: var(--technosorcerer-accent);
+  --spec-mid: var(--technosorcerer-mid);
+  --spec-dark: var(--technosorcerer-dark);
+  --dc-skill-tab-shape: polygon(0 0, calc(50% - 20px) 0, 50% 12px, calc(50% + 20px) 0, 100% 0, 100% 100%, 0 100%);
+  --dc-skill-body-shape: polygon(0 0, calc(50% - 18px) 0, 50% 10px, calc(50% + 18px) 0, 100% 0, 100% calc(100% - 20px), calc(100% - 24px) 100%, 24px 100%, 0 calc(100% - 20px));
+  --dc-path-title-shape: polygon(0 0, calc(50% - 22px) 0, 50% 12px, calc(50% + 22px) 0, 100% 0, 100% 100%, 0 100%);
+  /* The title's notch is centred 6px left of the shell's (see the header
+     note), so the visible gate is the shell's LEFT notch edge meeting the
+     title's RIGHT notch edge at (50% - 4.46px, 11.16px): the union the
+     drop-shadow used to outline. The shell traces that union so its outline
+     inks both edges of the gate. */
+  --dc-path-shell-clip: polygon(0 0, calc(50% - 22px) 0, calc(50% - 4.46px) 11.16px, calc(50% + 16px) 0, 100% 0, 100% calc(100% - 22px), calc(100% - 26px) 100%, 26px 100%, 0 calc(100% - 22px));
+  /* Specialty-card shell: rectangular top (tech-cluster register at grid
+     scale) with hex-cut bottom corners preserving the ritual-tech crossover
+     feel. The centre-notch lives on path-shell / specialty-intro only —
+     where it has the space to read as the runic-gate signature. At grid
+     density it collapsed into the magic cluster; rectangular top reads
+     tech immediately. */
+  --dc-specialty-card-shell-shape: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 22px) 100%, 22px 100%, 0 calc(100% - 16px));
+  --dc-specialty-intro-title-shape: polygon(0 0, calc(50% - 24px) 0, 50% 14px, calc(50% + 24px) 0, 100% 0, 100% 100%, 0 100%);
+  --dc-specialty-intro-clip: polygon(0 0, calc(50% - 24px) 0, 50% 14px, calc(50% + 24px) 0, 100% 0, 100% calc(100% - 32px), calc(100% - 56px) 100%, 0 100%);
+}
+
+/* TECHNOSORCERER title fix — "TECHNOSORCERER" is 14 chars and wraps mid-word
+   at card-grid scale ("TECHNOSORCERE / R" orphan). Tightened letter-spacing
+   keeps it on one line at the lixdu display size used in the card title.
+   (No specialty-card token delta: technosorcerer takes every default from
+   the shared wiring block above unchanged.) */
+.dc-specialty.technosorcerer .dc-specialty-card h3 {
+  letter-spacing: -0.04em;
+  font-size: 1.05em;
+}
+
+/* ── Gutterdruid — street nature, amber-brown, center bottom pinch ──────── */
+.dc-specialty.gutterdruid {
+  --spec-accent: var(--gutterdruid-accent);
+  --spec-mid: var(--gutterdruid-mid);
+  --spec-dark: var(--gutterdruid-dark);
+  --dc-skill-tab-shape: polygon(0 0, calc(50% - 20px) 0, 50% 12px, calc(50% + 20px) 0, 100% 0, 100% 100%, 0 100%);
+  --dc-skill-body-shape: polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 24px));
+  --dc-path-title-shape: polygon(0 0, calc(50% - 22px) 0, 50% 12px, calc(50% + 22px) 0, 100% 0, 100% 100%, 0 100%);
+  --dc-path-shell-clip: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 28px));
+  --dc-specialty-card-shell-shape: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 18px) 100%, 18px 100%, 0 calc(100% - 20px));
+  --dc-specialty-intro-title-shape: polygon(0 0, calc(50% - 22px) 0, 50% 12px, calc(50% + 22px) 0, 100% 0, 100% 100%, 0 100%);
+  --dc-specialty-intro-clip: polygon(0 0, 100% 0, 100% calc(100% - 28px), calc(100% - 20px) 100%, 20px 100%, 0 calc(100% - 28px));
+}
+
+.dc-specialty.gutterdruid .dc-specialty-card {
+  --dc-specialty-card-bg: var(--paper-aged);
+}
+
+/* ── Etherlock — ethereal, gold, parallelogram cross-cuts ──────────────── */
+.dc-specialty.etherlock {
+  --spec-accent: var(--etherlock-accent);
+  --spec-mid: var(--etherlock-mid);
+  --spec-dark: var(--etherlock-dark);
+  --dc-skill-tab-shape: polygon(0 10px, 10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
+  --dc-skill-body-shape: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 18px 100%, 0 calc(100% - 20px));
+  --dc-path-title-shape: polygon(0 12px, 12px 0, 100% 0, 100% 100%, 0 100%);
+  --dc-path-shell-clip: polygon(0 12px, 12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 18px 100%, 0 calc(100% - 22px));
+  --dc-specialty-card-shell-shape: polygon(0 12px, 12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 16px 100%, 0 calc(100% - 18px));
+  --dc-specialty-intro-title-shape: polygon(0 14px, 14px 0, 100% 0, 100% 100%, 0 100%);
+  --dc-specialty-intro-clip: polygon(0 14px, 14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 18px) 100%, 20px 100%, 0 calc(100% - 24px));
+}
+
+.dc-specialty.etherlock .dc-specialty-card {
+  --dc-specialty-card-bg: var(--paper-aged);
+}
+
+/* ── Dualist — dual-class specialist, symmetric "two-sided" octagon shapes ─ */
+.dc-specialty.dualist {
+  --spec-accent: var(--dualist-accent);
+  --spec-mid: var(--dualist-mid);
+  --spec-dark: var(--dualist-dark);
+  --dc-skill-tab-shape: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%, 0 10px);
+  --dc-skill-body-shape: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% calc(100% - 12px), calc(100% - 12px) 100%, 12px 100%, 0 calc(100% - 12px), 0 12px);
+  --dc-path-title-shape: polygon(12px 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%, 0 12px);
+  --dc-path-shell-clip: polygon(12px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 12px);
+  /* Dualist card shape: flat top + symmetric bottom point — crystal-facet
+     hint preserved on the bottom edge (the "refractive" bottom-pointed
+     drop), but a flat top so the colored header band renders as a clean
+     rectangle. Previous full-lozenge clipped the header band into a
+     triangle. */
+  --dc-specialty-card-shell-shape: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 20px) 100%, 50% calc(100% - 4px), 20px 100%, 0 calc(100% - 22px));
+  --dc-specialty-intro-title-shape: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%, 0 14px);
+  --dc-specialty-intro-clip: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 16px), calc(100% - 16px) 100%, 16px 100%, 0 calc(100% - 16px), 0 14px);
+}
+/* (No specialty-card token delta: dualist takes every default from the
+   shared wiring block above unchanged.) */
+
+/* ── Generalist — jack-of-all-trades, soft chamfered rectangle (neutral) ─── */
+.dc-specialty.generalist {
+  --spec-accent: var(--generalist-accent);
+  --spec-mid: var(--generalist-mid);
+  --spec-dark: var(--generalist-dark);
+  --dc-skill-tab-shape: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 0 100%, 0 4px);
+  --dc-skill-body-shape: polygon(4px 0, calc(100% - 4px) 0, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) 100%, 4px 100%, 0 calc(100% - 4px), 0 4px);
+  --dc-path-title-shape: polygon(5px 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 0 100%, 0 5px);
+  --dc-path-shell-clip: polygon(5px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 5px);
+  --dc-specialty-card-shell-shape: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 6px), calc(100% - 6px) 100%, 6px 100%, 0 calc(100% - 6px), 0 6px);
+  --dc-specialty-intro-title-shape: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%, 0 6px);
+  --dc-specialty-intro-clip: polygon(6px 0, calc(100% - 6px) 0, 100% 6px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 6px);
+}
+
+.dc-specialty.generalist .dc-specialty-card {
+  --dc-specialty-card-bg: var(--paper-light);
+}
+
+/* ───────── AP TAGS ───────── */
+
+/* Standard action point — explicit class for documentation clarity */
+.dc-ap.standard {
+  --dc-ap-bg: var(--hud-blue-dark);
+}
+
+/* Reduced-cost action */
+.dc-ap.reduced {
+  --dc-ap-bg: var(--hud-blue-dim);
+  --dc-ap-fg: var(--ink);
+}
+
+/* Increased-cost action */
+.dc-ap.increased {
+  --dc-ap-bg: var(--blood);
+}
+
+/* Special action — amber */
+.dc-ap.special {
+  --dc-ap-bg: var(--amber);
+  --dc-ap-fg: var(--ink);
+}
+
+}

package/styles/components/specialty.css

@@ -0,0 +1,273 @@
+@layer dc.components {
+
+/* ═══ LEARNING PATH + SPECIALTY INTRO + SPECIALTY CARD ═══ */
+
+/* Token contract for .dc-specialty-intro:
+     --dc-specialty-intro-title-bg     → title-tab background (default --hud-magenta)
+     --dc-specialty-intro-title-color  → title-tab text color (default --bg)
+     --dc-specialty-intro-bg           → body panel surface (default --paper-cream)
+     --dc-specialty-intro-title-shape  → title-tab clip-path polygon
+     --dc-specialty-intro-clip         → body shell clip-path polygon
+   Specialty themes override via .dc-specialty.<name> .dc-specialty-intro { }. */
+
+/* ── Specialty intro shell + element overrides ────────────────────────── */
+/* Token defaults for .dc-specialty-intro are declared in :root in dc-component-defaults.css.
+   Specialty contexts override via .dc-specialty.<name> .dc-specialty-intro { } above. */
+.dc-specialty-intro {
+  /* NO clip-path here — surface + clip are on ::before, the ink outline on
+     ::after; an element with clip-path would clip both (dc#28). */
+  background: transparent;
+  padding: 1rem 1.25rem 0.75rem;
+  margin: 0;
+  /* The ink outline (::after) is a positioned box 2px past this panel on
+     every side, and a box past the page content box makes Chromium print
+     shrink-to-fit scale the whole book (the engine's width guard refuses
+     it). Clipping this panel's own horizontal overflow contains it — the
+     guard and Chromium both treat clipped overflow as contained — and it
+     changes nothing visible: the panel spans the page content box, so the
+     page already clipped the filter's rim at exactly these two edges. */
+  overflow-x: clip;
+  position: relative;
+  z-index: 1;
+  break-inside: avoid;
+  box-sizing: border-box;
+  border: none;
+}
+
+/* Substrate behind the content, not under a lift — same reasoning as
+   `.section::before`; see the containing-block note there. The host is
+   already a stacking context (`position: relative; z-index: 1`), so -1
+   stays inside this component. */
+.dc-specialty-intro::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: var(--dc-specialty-intro-bg);
+  clip-path: var(--dc-specialty-intro-clip);
+  z-index: -1;
+}
+
+/* 2px ink outline: the shell shape on a box 2px larger on every side, filled
+   with ink, behind the surface. Replaces the 4-way drop-shadow(±2px) filter,
+   which rasterized the panel and its prose (dc#28). The title (h2) is an
+   in-flow child with its own clip and no outline of its own, so every intro
+   clip equals its title shape at both top corners (specialty-identity.css,
+   "Title-covered corners").
+   The box starts AT the panel's top and is translated up 2px, rather than
+   starting 2px above it: every field-guide intro opens its chapter at the
+   top of a page, and Chromium pushes a positioned box that would start
+   before the page's content area down to it — the whole outline landed 2px
+   low (measured in the PDF's clip polygons), thinning the top-corner rims
+   to half and hiding the technosorcerer gate's rim under the title. A
+   transform is applied at paint and does not take part in fragmentation. */
+.dc-specialty-intro::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  right: -2px;
+  bottom: -4px;
+  left: -2px;
+  transform: translateY(-2px);
+  background: var(--ink);
+  clip-path: var(--dc-specialty-intro-clip);
+  z-index: -2;
+}
+
+.dc-specialty-intro>h2:first-child {
+  font-size: 1.6rem;
+  color: var(--dc-specialty-intro-title-color);
+  letter-spacing: 0.04em;
+  line-height: 1;
+  background: var(--dc-specialty-intro-title-bg);
+  display: block;
+  padding: 0.6rem 1.25rem;
+  margin: -1rem -1.25rem 0.6rem -1.25rem;
+  clip-path: var(--dc-specialty-intro-title-shape);
+  border: none;
+  break-after: avoid;
+}
+
+.dc-specialty-intro>h3 {
+  /* --crimson on paper-cream = 4.03 (fails AA). --blood = 7.73:1.
+     The band is design: it reads as a hard-edged "wall object" and keeps
+     the h3 legible independent of the ::before pseudo-panel behind it. */
+  color: var(--blood);
+  background: var(--paper-cream);
+  letter-spacing: 0.05em;
+  font-size: 1rem;
+  margin-top: 0.6rem;
+  margin-bottom: 0.2rem;
+  padding: 0.15rem 0.4rem 0.25rem;
+  border-bottom: 2px solid var(--blood);
+}
+
+.dc-specialty-intro>p {
+  margin-block: 0.3rem;
+  font-size: 9.5pt;
+  line-height: 1.5;
+}
+
+.dc-specialty-intro>h2:first-child+p {
+  margin-top: 0.2rem;
+}
+
+.dc-specialty-intro>ul,
+.dc-specialty-intro>ol {
+  margin-block: 0.45rem;
+  padding-left: 1.2rem;
+}
+
+.dc-specialty-intro> :last-child {
+  margin-bottom: 0;
+}
+
+/* ── Specialty section content (blockquote, h3 — component rules win for h2) ─── */
+/* LIVE inside plugin-emitted specialty sections. */
+.dc-specialty blockquote {
+  margin: 0.12in 0;
+  padding: 0.08in 0.12in;
+}
+
+/* LIVE inside plugin-emitted specialty sections. */
+.dc-specialty h3 {
+  margin-top: 0.18in;
+  padding-top: 0.08in;
+  border-top: var(--bw-thin) solid var(--orange);
+}
+
+/* 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-fg            → body text color (default --ink)
+     --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 { }. */
+
+/* ── 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. */
+.dc-specialty-card {
+  /* Stack the optional per-specialty shadow on top of the universal
+     poster-wall shadow. The poster shadow pins the card to the brick
+     wall as a physical object (hard offset, no blur — "stuck on" not
+     "floating"). Specialty themes can add LED-rim insets via the
+     shadow token without losing the wall-pin. */
+  box-shadow: var(--dc-specialty-card-shadow), var(--shadow-poster);
+  /* 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);
+  color: var(--dc-specialty-card-fg);
+  display: flow-root;
+  overflow: hidden;
+  line-height: var(--lh-tight);
+  /* --dc-card-gap is the VISIBLE gap; +4px clears this card's box-shadow
+     bleed (--shadow-poster paints below the border-box) plus the next
+     card's. Note .dc-card-grid below 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;
+  position: relative;
+  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);
+  /* Top band gets a small chip cut at the upper-right to break the flat
+     rectangle reading. Per user feedback: "a little more clip path
+     treatments on the top border of the specialty cards." Per-specialty
+     overrides via --dc-specialty-card-shell-shape still take precedence;
+     the new default has a 12px chamfer at the top-right corner. */
+  clip-path: var(--dc-specialty-card-shell-shape);
+}
+
+/* Portrait image floated in specialty card. */
+.dc-specialty-card img {
+  width: var(--dc-specialty-card-media-width);
+  height: var(--dc-specialty-card-media-height);
+  object-fit: cover;
+  border: none;
+  padding: 0;
+  box-sizing: border-box;
+  float: left;
+  margin: 0 0.14in 0.08in 0;
+  border-radius: 2px;
+}
+
+/* Specialty name heading — colored in the specialty's accent (the "ink"
+   on the paper-poster substrate). Each specialty's identity color shows
+   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. */
+.dc-specialty-card h3 {
+  margin: 0;
+  font-size: 1.15em;
+  color: var(--dc-specialty-card-title-color);
+  text-align: var(--dc-specialty-card-title-align);
+  white-space: normal;
+  overflow-wrap: anywhere;
+  text-wrap: balance;
+}
+
+/* Subtitle tagline — the specialty's "archetype label" (e.g.,
+   "Cybernetic Commando", "Wold Witch"). This is the card's INTERIOR
+   visual beat per contest judge R9 ("each specialty card needs one
+   nail hole — a single strong visual beat inside the card body").
+   Mono-caps + tracked + accent-colored + bottom-rule gives the card
+   a typographic anchor below the title, lifting the interior from
+   "uniform cream surface" to a structured stat-block-like reading. */
+.dc-specialty-card blockquote {
+  background: none;
+  border: none;
+  border-bottom: 0.75pt solid var(--dc-specialty-card-accent);
+  padding: 0 0.06in 0.03in;
+  margin: 0.02in 0 0.06in;
+  font-family: var(--font-mono);
+  font-size: 0.72em;
+  font-style: normal;
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  /* Use the dark variant for text (WCAG safe on cream); border stays
+     bright (graphic separation, not body-text rule). Falls back to the
+     accent for any specialty that hasn't defined its dark variant. */
+  color: var(--dc-specialty-card-title-color);
+  opacity: 1;
+  text-align: var(--dc-specialty-card-title-align);
+  white-space: normal;
+  overflow-wrap: anywhere;
+}
+
+/* Card body paragraph spacing. */
+.dc-specialty-card p {
+  margin-top: 0.02in;
+  margin-bottom: 0;
+  line-height: 1.35;
+  color: var(--dc-specialty-card-fg);
+  overflow-wrap: anywhere;
+}
+
+/* Even cards flip the border accent to the right. data-position is emitted by
+   the plugin (specialtyCardCount resets per-specialty), which counts within a
+   specialty — :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.5px 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 {
+  float: right;
+  margin: 0 0 0.08in 0.14in;
+}
+
+}