/* ============================================================================ LOCAL ADDITIONS to the designer's web-blocks.css ---------------------------------------------------------------------------- Everything here is OURS, not the designer's. It is kept in a separate file so a new drop can overwrite web-blocks.css wholesale without silently deleting it, which is exactly what would have happened on the 2026-08-05 (delivery 4) sync: the incoming bundle contains none of these selectors. Load order: tokens.css -> web-blocks.css (designer) -> this file. If the designer later ships an equivalent, delete the block here rather than letting the two fight. ============================================================================ */ /* ── Suit pips in running text (inc/pips.php) ───────────────────────────────── The designer's pip SVGs carry their own fills (heart/diamond red, club/spade black), so these only need sizing and alignment. Sized in em so a pip tracks whatever type it sits in, and nudged down slightly to sit on the baseline rather than ride high like the raw Unicode glyph does. */ .eg-web .eg-pip { display: inline-block; width: 0.85em; height: 0.85em; vertical-align: -0.08em; margin: 0 0.04em; } /* ── Rules stickies, the OLD core-group pattern only ───────────────────── Since 2026-10-18 the book's stickies are the el/sticky block, which carries its own CSS (blocks/sticky/style.css, the canon sticky colour tokens). The rules below are scoped to `.wp-block-group.eg-sticky`, the shape the old importer baked into pages not yet re-imported from the r175 bundle, so they no longer override the block. Delete them once every page has been re-imported. */ /* ── Rules stickies (animal callouts, ported from print blocks.css) ───────── The web bundle has never carried the sticky; only the print bundle does. The book's Rule / Tip / Good-to-know boxes carry the wolf, sparrow and fox, and the rules chapters are full of them, so they were ported across. */ .eg-web .wp-block-group.eg-sticky { display: flex; gap: var(--eg-w-sp-4); align-items: flex-start; margin: var(--eg-w-sp-6) 0; padding: var(--eg-w-sp-4) var(--eg-w-sp-5); background: var(--eg-paper-2); border-left: 3px solid var(--eg-ink); border-radius: 0 var(--eg-w-radius-card) var(--eg-w-radius-card) 0; } /* motif is a core/image block (figure > img), so reset the figure and size the img */ .eg-web .wp-block-group.eg-sticky-motif { flex: 0 0 auto; margin: 0; align-self: center; } .eg-web .wp-block-group.eg-sticky-motif img { display: block; width: 56px; height: auto; } .eg-web .wp-block-group.eg-sticky-text { flex: 1 1 auto; min-width: 0; } .eg-web .wp-block-group.eg-sticky-label { margin: 0 0 var(--eg-w-sp-1); font-family: var(--eg-display); font-style: italic; font-weight: 700; font-size: var(--eg-w-fs-h3); line-height: 1.15; } .eg-web .wp-block-group.eg-sticky-body { margin: 0; font-family: var(--eg-serif); font-size: var(--eg-w-fs-body); line-height: var(--eg-w-lh-body); color: var(--eg-ink-2); } .eg-web .wp-block-group.eg-sticky--rule { border-left-color: var(--eg-red); } .eg-web .wp-block-group.eg-sticky--rule .eg-sticky-label { color: var(--eg-red); } .eg-web .wp-block-group.eg-sticky--tip { border-left-color: var(--eg-pine); } .eg-web .wp-block-group.eg-sticky--tip .eg-sticky-label { color: var(--eg-pine); } .eg-web .wp-block-group.eg-sticky--info, .eg-web .wp-block-group.eg-sticky--note { border-left-color: var(--eg-gold); } /* The RULE (red) and TIP (pine) labels clear contrast on paper-2 at 4.97:1 and 8.25:1. Gold does not: --eg-gold on paper-2 measures 2.64:1, which fails even the 3:1 large-text floor, so the "Good to know" heading was the hardest thing on the page to read. Gold is fine in the book (ink on paper, different rules); it is not fine on screen. Rather than invent a colour, which is the designer's call, this darkens THEIR token: 65% gold against ink measures 4.95:1, clearing the 4.5 bar while still reading as the same gold. The rule (border) keeps the pure token, since a 3px rule carries no text. */ .eg-web .wp-block-group.eg-sticky--info .eg-sticky-label, .eg-web .wp-block-group.eg-sticky--note .eg-sticky-label { color: color-mix(in srgb, var(--eg-gold) 65%, var(--eg-ink)); } /* Older engines without color-mix keep a hand-computed equivalent of the same mix. */ @supports not (color: color-mix(in srgb, red, blue)) { .eg-web .wp-block-group.eg-sticky--info .eg-sticky-label, .eg-web .wp-block-group.eg-sticky--note .eg-sticky-label { color: #7D602B; } } @media (max-width: 640px) { .eg-web .wp-block-group.eg-sticky-motif img { width: 40px; } } /* ── Sticky + contract-card margins, once nested inside .eg-prose (batch 2) ── Both components' labels/bodies are plain

(sticky) or

/

(el/contract-cards) — the same tags G2's `.eg-web .eg-prose p/h3` rules reset for running prose. `.eg-web .eg-prose p` is TWO classes plus the tag (0,0,2,1); `.eg-sticky-label`/`.eg-sticky-body`/`.eg-rules-body` are each ONE class (0,0,1,0 in web-blocks.css / local), so the blanket prose rule wins and zeroes their intended margin. Chain onto `.eg-prose` (three classes) to win back the components' own spacing, same pattern as the E4 callout-label fix. `.eg-rules-heading`'s h1-scale base margin-top is already beaten by `.eg-rules--compact .eg-rules-heading` (three classes) for margin-bottom, but margin-top is a SEPARATE longhand nothing else in web-blocks-local.css sets, so `.eg-prose h3`'s `var(--eg-w-sp-6)` top margin lands on top of the section's own border-top padding and doubles the gap between cards; reset it to the base 0 explicitly. */ .eg-web .eg-prose .eg-sticky-label { margin: 0 0 var(--eg-w-sp-1); } .eg-web .eg-prose .eg-sticky-body { margin: 0; } .eg-web .eg-prose .eg-rules-heading { margin-top: 0; } .eg-web .eg-prose .eg-rules-body { margin: 0 0 var(--eg-w-sp-5); } /* ── Prose tables (contract / scoring tables inside .eg-prose) ─────────────── The rules chapters carry real markdown tables which arrive as core/table. The designer's bundle styles .eg-prose but not the core table inside it. width:auto (not 100%) + min-width is the same fix the G9/G17 comparison tables needed below (batch-1 lesson, re-hit by batch 2's rules chapters): width:100% pins the table to the column at any cost, so a wide contract table (5-6 columns) gets squeezed into 62ch instead of scrolling. auto lets it fill the column when the content fits and grow past it, inside the overflow-x:auto figure, when it does not. */ .eg-web .eg-prose .wp-block-table { margin: var(--eg-w-sp-6) 0; overflow-x: auto; } .eg-web .eg-prose .wp-block-table table { table-layout: auto; width: auto; min-width: max(100%, 30rem); border-collapse: collapse; font-family: var(--eg-serif); font-size: var(--eg-w-fs-body); line-height: var(--eg-w-lh-body); } .eg-web .eg-prose .wp-block-table th, .eg-web .eg-prose .wp-block-table td { padding: var(--eg-w-sp-3) var(--eg-w-sp-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--eg-ink-4); word-break: normal; overflow-wrap: normal; } .eg-web .eg-prose .wp-block-table thead th { font-family: var(--eg-sans); font-size: var(--eg-w-fs-label); font-weight: 700; letter-spacing: var(--eg-track-caps); text-transform: uppercase; color: var(--eg-red-deep); background: var(--eg-paper-2); border-bottom: 2px solid var(--eg-red); } .eg-web .eg-prose .wp-block-table tbody tr:last-child td { border-bottom: none; } /* ── Contract cards: designer rules-section (H6), compact for a long list ──── */ .eg-web .eg-rules--compact { max-width: none; padding: var(--eg-w-sp-5) 0; border-top: 1px solid var(--eg-ink-4); } .eg-web .eg-rules--compact .eg-rules-heading { font-size: var(--eg-w-fs-h3); margin-bottom: var(--eg-w-sp-3); } .eg-web .eg-rules--compact .eg-rules-body { margin-bottom: var(--eg-w-sp-4); } .eg-web .eg-rules-scope { font-family: var(--eg-sans); font-size: var(--eg-w-fs-label); font-weight: 700; letter-spacing: var(--eg-track-caps); text-transform: uppercase; color: var(--eg-gold); vertical-align: middle; } /* Supporting points inside a pillar — no slot in the H2 specimen, so styled to sit under .eg-pillar-body in the same voice. */ .eg-web .eg-pillar-points { margin: var(--eg-w-sp-3) 0 0; padding-left: 1.1em; font-family: var(--eg-serif); font-size: var(--eg-w-fs-body); line-height: var(--eg-w-lh-body); color: var(--eg-ink-2); } .eg-web .eg-pillar-points li + li { margin-top: var(--eg-w-sp-2); } /* ── Book-scaffold placeholders (inc/book-scaffold.php) ─────────────────────── "Content coming" notices: the dashed stub box for book-referenced pages not yet authored (a reader can land here straight from a printed QR code), and the one-line note on a game's downloads page while its cheat sheet is still gated on the book locking its numbers. el-, not eg- — neither is a designer component, both used to wear an invented eg- prefix that styled nothing (flagged by e2e/audit-design-provenance.mjs). The stub's border/padding come from Gutenberg block settings already inline on the markup; this only ties the border colour and label ink to the design system's own tokens instead of the inline style's default currentColor / body ink. */ .eg-web .el-stub { border-color: var(--eg-ink-4); } .eg-web .el-stub__label { color: var(--eg-ink-3); } .eg-web .el-sheet-pending { margin-top: var(--eg-w-sp-5); font-family: var(--eg-serif); font-style: italic; font-size: var(--eg-w-fs-small); color: var(--eg-ink-3); } /* ============================================================================ BLOG POST SHAPES — core Gutenberg blocks wearing the designer's classes ---------------------------------------------------------------------------- The 26 blog posts carry G10 (FAQ), G13 (verdict) and G9 / G17 (tables) as core blocks with the designer's class names attached, written by scripts/blog_structure.py. Core blocks were chosen over custom ones so Greg keeps the normal Gutenberg editing experience. The cost of that choice is here: core owns some of the inner markup, so where the designer styles an element we cannot emit, the same declarations are re-pointed at the element core does emit. Only those bridges live below. Everything else still comes from the designer's own rules, which match on the class names already. ============================================================================ */ /* ── G10 FAQ: core/details ──────────────────────────────────────────────────── Designer:

+ chevron +
around the answer. Core owns the summary's inner HTML (a decorative span there would be stripped on re-save) and wraps the answer in nothing at all, so: style the bare summary, draw the chevron with ::after, and address the answer as "the children that are not the summary". */ .eg-web .eg-faq-item > summary { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--eg-w-sp-4); padding: var(--eg-w-sp-4) 0; cursor: pointer; list-style: none; font-family: var(--eg-display); font-weight: 700; font-size: var(--eg-w-fs-h3); line-height: 1.3; color: var(--eg-ink); } .eg-web .eg-faq-item > summary::-webkit-details-marker { display: none; } .eg-web .eg-faq-item > summary::marker { content: ""; } .eg-web .eg-faq-item > summary:hover { color: var(--eg-red-deep); } .eg-web .eg-faq-item > summary::after { content: ""; flex: 0 0 auto; width: 9px; height: 9px; margin: 7px 3px 0 0; border-right: 2px solid var(--eg-red); border-bottom: 2px solid var(--eg-red); transform: rotate(45deg); transition: transform 120ms ease; } .eg-web .eg-faq-item[open] > summary::after { transform: rotate(225deg); } .eg-web .eg-faq-item > *:not(summary) { margin: 0 0 var(--eg-w-sp-5); max-width: 62ch; font-family: var(--eg-serif); font-size: var(--eg-w-fs-body); line-height: var(--eg-w-lh-body); color: var(--eg-ink-2); } .eg-web .eg-faq-item > summary + * { margin-top: 0; } /* ── G13 verdict: core/columns ──────────────────────────────────────────────── The designer's .eg-verdict is a grid and outranks .wp-block-columns on specificity already; these two lines only stop core's flex sizing (including its !important mobile stacking rule) from leaving stray tracks in the grid. */ .eg-web .eg-verdict.wp-block-columns { display: grid; } .eg-web .eg-verdict > .wp-block-column { flex-basis: auto !important; } /* ── G9 / G17 tables: core/table ────────────────────────────────────────────── Designer: figure.eg-cmp > div.eg-cmp-scroll > table.eg-cmptable. Core emits figure.wp-block-table > table.has-fixed-layout and regenerates that table class on save, so the figure becomes the scroll region and the table styles are re-pointed. has-fixed-layout is also undone: fixed layout splits a 7-column table into equal slivers, while the whole point of a scroll strip is that columns take the width their content needs. */ .eg-web .wp-block-table.eg-cmp, .eg-web .wp-block-table.eg-bynum { margin: var(--eg-w-sp-6) 0; overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; padding-bottom: var(--eg-w-sp-2); } .eg-web .wp-block-table.eg-cmp::-webkit-scrollbar, .eg-web .wp-block-table.eg-bynum::-webkit-scrollbar { height: 4px; } .eg-web .wp-block-table.eg-cmp::-webkit-scrollbar-thumb, .eg-web .wp-block-table.eg-bynum::-webkit-scrollbar-thumb { background: var(--eg-red); } /* width:auto (not 100%) is what lets the scroll strip earn its keep: the table fills the column when the content fits and grows past it when it does not, instead of being squeezed into the container at any cost. min-width keeps the designer's floor while still filling a wider column. */ .eg-web .wp-block-table.eg-cmp table, .eg-web .wp-block-table.eg-bynum table { table-layout: auto; width: auto; border-collapse: collapse; } .eg-web .wp-block-table.eg-cmp table { min-width: max(100%, 30rem); font-family: var(--eg-sans); } .eg-web .wp-block-table.eg-bynum table { min-width: max(100%, 26rem); } /* The theme sets word-break:break-word for long prose. In a 7-column table it shatters headings into "Playe rs" and "Contrac ts", so cells opt out: a comparison table wraps between words or it scrolls, it never hyphenates. */ .eg-web .wp-block-table.eg-cmp th, .eg-web .wp-block-table.eg-cmp td, .eg-web .wp-block-table.eg-bynum th, .eg-web .wp-block-table.eg-bynum td { word-break: normal; overflow-wrap: normal; } .eg-web .wp-block-table.eg-cmp th, .eg-web .wp-block-table.eg-cmp td, .eg-web .wp-block-table.eg-bynum th, .eg-web .wp-block-table.eg-bynum td { padding: var(--eg-w-sp-3) var(--eg-w-sp-4); text-align: center; border: 0; border-bottom: 1px solid var(--eg-rule); } .eg-web .wp-block-table.eg-cmp th, .eg-web .wp-block-table.eg-cmp td { vertical-align: top; } .eg-web .wp-block-table.eg-bynum th, .eg-web .wp-block-table.eg-bynum td { vertical-align: baseline; } /* The row-label column: the designer marks it , core keeps it a , so the first cell of every body row is addressed by position. */ .eg-web .wp-block-table.eg-cmp tbody td:first-child { font-size: var(--eg-w-fs-small); font-weight: 600; color: var(--eg-ink-2); text-align: left; } .eg-web .wp-block-table.eg-cmp thead th { font-size: var(--eg-w-fs-label); font-weight: 700; letter-spacing: var(--eg-track-caps); text-transform: uppercase; color: var(--eg-ink); border-bottom: 2px solid var(--eg-red); } .eg-web .wp-block-table.eg-cmp thead th:first-child { text-align: left; } .eg-web .wp-block-table.eg-cmp tbody td { font-size: var(--eg-w-fs-small); line-height: var(--eg-w-lh-small); color: var(--eg-ink); font-variant-numeric: tabular-nums; } .eg-web .wp-block-table.eg-bynum thead th { font-family: var(--eg-display); font-weight: 700; font-size: var(--eg-w-fs-h3); line-height: var(--eg-w-lh-h3); color: var(--eg-ink); border-bottom: 2px solid var(--eg-red); } .eg-web .wp-block-table.eg-bynum tbody td { font-family: var(--eg-sans); font-size: var(--eg-w-fs-h3); font-weight: 700; color: var(--eg-ink); font-variant-numeric: lining-nums tabular-nums; } .eg-web .wp-block-table.eg-bynum tbody td:first-child { font-family: var(--eg-sans); font-size: var(--eg-w-fs-label); font-weight: 600; letter-spacing: var(--eg-track-caps); text-transform: uppercase; color: var(--eg-ink-3); text-align: left; } .eg-web .wp-block-table.eg-cmp tbody tr:last-child td, .eg-web .wp-block-table.eg-bynum tbody tr:last-child td { border-bottom: 0; } .eg-web .wp-block-table.eg-cmp figcaption, .eg-web .wp-block-table.eg-bynum figcaption { caption-side: top; text-align: left; margin: 0 0 var(--eg-w-sp-3); font-family: var(--eg-sans); font-size: var(--eg-w-fs-label); font-weight: 700; letter-spacing: var(--eg-track-caps); text-transform: uppercase; color: var(--eg-red-deep); } /* Focus ring for the keyboard-reachable scroll region (see eg-web.js). */ .eg-web .wp-block-table[tabindex]:focus-visible { outline: 2px solid var(--eg-red); outline-offset: 2px; } /* ── E4 print-tip: core/group(aside) + core/paragraph ───────────────────────── E4 IS G5-CALLOUT (MAP-WEB.json), reused rather than a new shell. The designer's LABEL is a ; core's closest native block for text is a

. web-blocks.css's `.eg-callout p` rule (specificity 0,1,1) beats `.eg-callout-label` alone (0,1,0) once the label is also a

, silently reverting it to the body callout's serif/ink-2 treatment instead of the eyebrow. Chain onto the label's own class, one selector step more specific than the body rule, rather than re-adding a raw that the block editor would strip on the next save. */ .eg-web .eg-callout > .eg-callout-label { margin: 0 0 var(--eg-w-sp-2); font-family: var(--eg-sans); font-size: var(--eg-w-fs-label); font-weight: 700; letter-spacing: var(--eg-track-caps); text-transform: uppercase; color: var(--eg-red-deep); } /* ── E1/E2/E3 downloads, D1-D5 decks: no bridge needed ──────────────────────── E1/E2/E3 nest a real