/* ============================================================
   THE TAROK EXPLORATION BOOK :: blocks.css
   All block styles, scoped under .eg-book, classes prefixed
   eg-. Print first (WeasyPrint), basic screen layer at the
   end of the file. No grid, no flex, no filters, no fixed or
   sticky positioning, no viewport units, no layout transforms.
   ============================================================ */

/* ============ base ============ */

.eg-book {
  font-family: var(--eg-serif);
  font-size: var(--eg-fs-body);
  line-height: var(--eg-lh-body);
  color: var(--eg-ink);
  font-feature-settings: "liga", "kern", "onum";
}
.eg-book strong { font-weight: 600; }
.eg-book img { border: none; }

/* ============ placement + break utilities ============ */

.eg-book .eg-place-flow   { max-width: 100%; }
.eg-book .eg-place-full   { width: 100%; }
/* margin placement: a float pulled to the outer text edge */
.eg-book .eg-place-margin { float: right; width: 40mm; margin: 0 0 var(--eg-sp-4) var(--eg-sp-5); }
/* page-side constraints are assembler metadata; no visual effect */
.eg-book .eg-place-left   {}
.eg-book .eg-place-right  {}
.eg-book .eg-keep-together { break-inside: avoid; page-break-inside: avoid; }
.eg-book .eg-allow-break   {}

/* ============ shared atoms ============ */

/* Inter label: eyebrows, zone captions, table heads */
.eg-book .eg-label {
  font-family: var(--eg-sans);
  font-size: var(--eg-fs-caption);
  font-weight: 600;
  letter-spacing: var(--eg-track-caps);
  text-transform: uppercase;
  color: var(--eg-ink-3);
}

/* difficulty dots: units are <i class="eg-dot"> / <i class="eg-dot eg-dot--off"> */
.eg-book .eg-dot {
  display: inline-block;
  width: 4.5pt; height: 4.5pt;
  border-radius: 50%;
  background: var(--eg-red);
  margin-left: 2pt;
}
.eg-book .eg-dot--off { background: transparent; border: 0.6pt solid var(--eg-ink-4); }

/* id tab chip: puzzle codes */
.eg-book .eg-tab {
  display: inline-block;
  font-family: var(--eg-sans);
  font-size: var(--eg-fs-tiny);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--eg-red);
  color: var(--eg-paper);
  border-radius: var(--eg-radius-chip);
  padding: 1pt 4.5pt 1.5pt;
}

/* seat chip */
.eg-book .eg-seat {
  display: inline-block;
  font-family: var(--eg-sans);
  font-size: var(--eg-fs-tiny);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--eg-ink);
  border: 0.6pt solid var(--eg-ink);
  border-radius: var(--eg-radius-chip);
  padding: 0.5pt 3.5pt 1pt;
  background: var(--eg-card-white);
}
.eg-book .eg-seat--you {
  background: var(--eg-red);
  border-color: var(--eg-red);
  color: var(--eg-paper);
}

/* playing-card image */
.eg-book .eg-card {
  width: var(--eg-card-w);
  height: auto;
  display: inline-block;
  vertical-align: bottom;
  border-radius: var(--eg-radius-img);
  border: var(--eg-card-edge);
  background: var(--eg-card-white);
}

/* the focus / winner mark: rounded corners, house rule */
.eg-book .eg-focus > .eg-card,
.eg-book .eg-focus.eg-card {
  border: var(--eg-w-red) solid var(--eg-red);
  border-radius: var(--eg-radius-focus);
  padding: 1pt;
}

/* ============ F2 chapter opener ============ */
/* Hero locked 2026-07-19 (Hero Lab, C4): the ghost numeral. The chapter's
   Roman numeral sits huge and pale (paper-3 flat ink, print-safe) behind
   the title block; the HERO_IMG figure is retired. */

.eg-book .eg-chapter-opener {
  text-align: center;
  padding-top: var(--eg-sp-8);
  position: relative;
}
.eg-book .eg-chapter-ghost {
  position: absolute;
  top: calc(var(--eg-sp-8) - 14pt);
  left: 0; right: 0;
  margin: 0;
  text-align: center;
  font-family: var(--eg-display);
  font-weight: 800;
  font-size: var(--eg-ghost-size);
  line-height: 1;
  color: var(--eg-paper-3);
  z-index: 0;
}
.eg-book .eg-chapter-fore { position: relative; z-index: 1; }
.eg-book .eg-chapter-title {
  font-family: var(--eg-display);
  font-weight: 800;
  font-size: var(--eg-fs-chapter);
  line-height: var(--eg-lh-chapter);
  letter-spacing: -0.005em;
  margin: 0;
  padding-top: var(--eg-sp-5);
  border-top: var(--eg-w-ink) solid var(--eg-ink);
}
.eg-book .eg-chapter-native {
  font-family: var(--eg-serif);
  font-style: italic;
  font-size: var(--eg-fs-native);
  color: var(--eg-ink-2);
  letter-spacing: 0.04em;
  margin: var(--eg-sp-2) 0 0;
}
.eg-book .eg-chapter-meta {
  margin: var(--eg-sp-5) 0 0;
  font-family: var(--eg-sans);
  font-size: var(--eg-fs-caption);
  font-weight: 500;
  letter-spacing: var(--eg-track-caps);
  text-transform: uppercase;
  color: var(--eg-ink-3);
}
.eg-book .eg-chapter-players { margin-right: var(--eg-sp-5); }
/* the vignette: J, the pinned note (locked 2026-07-19). Flavour prose on a
   white card, held by a red suit pip at the top edge like a wax seal.
   Visibly not book text; fully print-safe (no tilt, no element rotation). */
.eg-book .eg-vign {
  position: relative;
  width: 82%;
  margin: var(--eg-sp-8) auto 0;
  text-align: left;
}
.eg-book .eg-vign-pip {
  position: absolute;
  top: -6pt;
  left: 50%;
  margin-left: -8.5pt;
  width: 11pt;
  height: auto;
  background: var(--eg-paper);
  padding: 0 3pt;
}
.eg-book .eg-vign-card {
  background: var(--eg-card-white);
  border: var(--eg-w-hair) solid var(--eg-rule);
  border-radius: var(--eg-radius-img);
  padding: var(--eg-sp-5) var(--eg-sp-5) var(--eg-sp-4);
}
.eg-book .eg-vign-body {
  font-style: italic;
  font-size: var(--eg-fs-lead);
  line-height: var(--eg-lh-lead);
  color: var(--eg-ink-2);
  margin: 0;
  text-wrap: pretty;
}
.eg-book .eg-vign-sign {
  font-style: italic;
  font-size: var(--eg-fs-small);
  color: var(--eg-ink-3);
  margin: var(--eg-sp-3) 0 0;
  text-align: right;
}

/* ============ F3 section head ============ */

.eg-book .eg-section-head {
  font-family: var(--eg-display);
  font-weight: 700;
  font-size: var(--eg-fs-section);
  line-height: var(--eg-lh-section);
  color: var(--eg-ink);
  margin: var(--eg-sp-7) 0 var(--eg-sp-3);
  break-after: avoid;
  page-break-after: avoid;
}

/* ============ F4 sub-head + run-in ============ */

.eg-book .eg-sub-head {
  font-family: var(--eg-serif);
  font-weight: 600;
  font-style: italic;
  font-size: var(--eg-fs-sub);
  line-height: var(--eg-lh-sub);
  margin: var(--eg-sp-6) 0 var(--eg-sp-2);
  break-after: avoid;
  page-break-after: avoid;
}
.eg-book .eg-runin-lead { font-weight: 600; font-style: normal; }

/* ============ T1 body, T2 lead ============ */

.eg-book .eg-body {
  margin: 0 0 var(--eg-sp-para);
  text-wrap: pretty;
}
.eg-book .eg-lead {
  font-size: var(--eg-fs-lead);
  line-height: var(--eg-lh-lead);
  margin: 0 0 var(--eg-sp-4);
  text-wrap: pretty;
}

/* ============ T3 aside ============ */

.eg-book .eg-aside {
  font-style: italic;
  font-size: var(--eg-fs-small);
  line-height: var(--eg-lh-small);
  color: var(--eg-ink-3);
  margin: var(--eg-sp-4) var(--eg-sp-6) var(--eg-sp-4);
}

/* ============ T4 lists ============ */

.eg-book .eg-list {
  margin: var(--eg-sp-3) 0 var(--eg-sp-4);
  padding: 0 0 0 var(--eg-sp-6);
  list-style: none;
}
.eg-book .eg-list > li { margin: 0 0 var(--eg-sp-2); text-wrap: pretty; }
.eg-book .eg-list--numbered { counter-reset: eg-li; }
.eg-book .eg-list--numbered > li { counter-increment: eg-li; position: relative; }
.eg-book .eg-list--numbered > li::before {
  content: counter(eg-li);
  position: absolute;
  left: -14pt;
  top: 0;
  font-family: var(--eg-display);
  font-weight: 700;
  font-size: var(--eg-fs-body);
  color: var(--eg-red);
}
.eg-book .eg-list--bulleted > li { position: relative; }
.eg-book .eg-list--bulleted > li::before {
  content: "\2666"; /* small suit diamond, pure ornament */
  position: absolute;
  left: -12pt;
  top: -0.5pt;
  font-size: 7pt;
  color: var(--eg-red);
}

/* ============ Stickies ============ */

/* Locked design (Sticky Lab, 2026-07-18): open paper, no fill; the B3 family.
   The animal lives in a reserved gutter LEFT of the colored rule, painting
   BELOW the rule; the sticky's margin reserves the gutter, so nothing
   collides with the text column (documented containment gesture). */
.eg-book .eg-sticky {
  position: relative;
  border-left: 2.5pt solid var(--eg-ink);
  padding: 2pt 4pt 2pt 13pt;
  margin: var(--eg-sp-5) 0 var(--eg-sp-5) var(--eg-sticky-gutter);
  min-height: var(--eg-motif-h);
}
.eg-book .eg-sticky-motif {
  position: absolute;
  height: var(--eg-motif-h);
  width: auto;
  left: calc(-1 * (var(--eg-motif-h) + var(--eg-gap-fox)));
  top: calc((100% - var(--eg-motif-h)) * var(--eg-motif-align));
}
.eg-book .eg-sticky--rule .eg-sticky-motif { left: calc(-1 * (var(--eg-motif-h) + var(--eg-gap-wolf))); }
.eg-book .eg-sticky--tip .eg-sticky-motif { left: calc(-1 * (var(--eg-motif-h) + var(--eg-gap-sparrow))); }
.eg-book .eg-sticky--signpost .eg-sticky-motif {
  height: var(--eg-motif-h-sp);
  left: calc(-1 * (var(--eg-motif-h-sp) + var(--eg-gap-hedgehog)));
  top: calc((100% - var(--eg-motif-h-sp)) * var(--eg-motif-align-sp));
}
/* the sticky content sits above the animal so the rule paints over it */
.eg-book .eg-sticky-label {
  position: relative;
  z-index: 1;
  font-family: var(--eg-display);
  font-style: italic;
  font-weight: 700;
  font-size: 12pt;
  line-height: 1.15;
  margin: 0 0 var(--eg-sp-1);
}
.eg-book .eg-sticky-body {
  position: relative;
  z-index: 1;
  font-size: var(--eg-fs-small);
  line-height: var(--eg-lh-small);
  margin: 0;
  text-wrap: pretty;
}
.eg-book .eg-sticky--rule     { border-left-color: var(--eg-red); }
.eg-book .eg-sticky--rule .eg-sticky-label { color: var(--eg-red); }
.eg-book .eg-sticky--info     { border-left-color: var(--eg-gold); }
.eg-book .eg-sticky--info .eg-sticky-label { color: var(--eg-gold); }
.eg-book .eg-sticky--tip      { border-left-color: var(--eg-pine); }
.eg-book .eg-sticky--tip .eg-sticky-label { color: var(--eg-pine); }
.eg-book .eg-sticky--signpost { border-left-color: var(--eg-ink); }
.eg-book .eg-sticky--signpost .eg-sticky-label { color: var(--eg-ink); }
.eg-book .eg-pageref {
  display: inline-block;
  font-family: var(--eg-sans);
  font-size: var(--eg-fs-tiny);
  font-weight: 600;
  background: var(--eg-red);
  color: var(--eg-paper);
  border-radius: var(--eg-radius-chip);
  padding: 0.5pt 4pt 1pt;
  margin-left: var(--eg-sp-2);
}

/* ============ B1 refresher box ============ */

.eg-book .eg-refresher {
  border: var(--eg-w-ink) solid var(--eg-ink);
  background: var(--eg-paper);
  padding: var(--eg-sp-5);
  margin: var(--eg-sp-5) 0 var(--eg-sp-6);
}
.eg-book .eg-refresher-title {
  font-family: var(--eg-sans);
  font-size: var(--eg-fs-caption);
  font-weight: 600;
  letter-spacing: var(--eg-track-caps);
  text-transform: uppercase;
  color: var(--eg-red);
  margin: 0 0 var(--eg-sp-3);
}
.eg-book .eg-refresher-list { margin: 0; padding: 0 0 0 var(--eg-sp-5); list-style: none; }
.eg-book .eg-refresher-list > li { position: relative; margin: 0 0 var(--eg-sp-2); font-size: var(--eg-fs-small); line-height: var(--eg-lh-small); }
.eg-book .eg-refresher-list > li::before {
  content: "\2666";
  position: absolute;
  left: -11pt;
  top: -0.5pt;
  font-size: 6.5pt;
  color: var(--eg-red);
}

/* ============ B2 decision box ============ */

.eg-book .eg-decision {
  border: var(--eg-w-ink) solid var(--eg-ink);
  background: var(--eg-paper-2);
  padding: var(--eg-sp-5);
  margin: var(--eg-sp-5) 0;
}
.eg-book .eg-decision-intro {
  font-style: italic;
  font-size: var(--eg-fs-body);
  margin: 0 0 var(--eg-sp-3);
}
.eg-book .eg-decision-profile {
  font-size: var(--eg-fs-small);
  line-height: var(--eg-lh-small);
  margin: 0 0 var(--eg-sp-2);
}
.eg-book .eg-decision-fineprint {
  font-size: var(--eg-fs-caption);
  font-family: var(--eg-sans);
  color: var(--eg-ink-3);
  margin: var(--eg-sp-3) 0 0;
  padding-top: var(--eg-sp-2);
  border-top: var(--eg-w-hair) solid var(--eg-rule);
}

/* ============ B3 highlight box ============ */

.eg-book .eg-highlight {
  margin: var(--eg-sp-6) 0;
  padding: var(--eg-sp-2) 0 var(--eg-sp-2) var(--eg-sp-5);
  border-left: 2.5pt solid var(--eg-red);
}
.eg-book .eg-highlight-body {
  font-family: var(--eg-display);
  font-style: italic;
  font-weight: 700;
  font-size: 12.5pt;
  line-height: 1.32;
  margin: 0;
  text-wrap: pretty;
}

/* ============ B4 fill-in strip ============ */

.eg-book .eg-fillin {
  border: var(--eg-w-ink) solid var(--eg-ink);
  background: var(--eg-paper);
  padding: var(--eg-sp-5);
  margin: var(--eg-sp-5) 0;
}
.eg-book .eg-fillin-list { margin: 0; padding: 0 0 0 var(--eg-sp-5); list-style: none; counter-reset: eg-fill; }
.eg-book .eg-fillin-list > li {
  counter-increment: eg-fill;
  position: relative;
  font-size: var(--eg-fs-small);
  line-height: 1.9;
  margin: 0 0 var(--eg-sp-1);
}
.eg-book .eg-fillin-list > li::before {
  content: counter(eg-fill);
  position: absolute;
  left: -13pt;
  top: 0;
  font-family: var(--eg-display);
  font-weight: 700;
  color: var(--eg-red);
}
.eg-book .eg-write {
  display: inline-block;
  min-width: 52pt;
  border-bottom: var(--eg-w-hair) solid var(--eg-ink);
  vertical-align: baseline;
}

/* ============ B5 notice line ============ */

.eg-book .eg-notice {
  font-size: var(--eg-fs-small);
  line-height: var(--eg-lh-small);
  color: var(--eg-ink-2);
  border-top: var(--eg-w-hair) solid var(--eg-rule);
  border-bottom: var(--eg-w-hair) solid var(--eg-rule);
  padding: var(--eg-sp-3) var(--eg-sp-2);
  margin: var(--eg-sp-5) 0;
}

/* ============ Tables (one shared treatment) ============ */

.eg-book .eg-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--eg-sp-5) 0;
}
.eg-book .eg-table caption {
  text-align: left;
  font-family: var(--eg-sans);
  font-size: var(--eg-fs-caption);
  font-weight: 600;
  letter-spacing: var(--eg-track-caps);
  text-transform: uppercase;
  color: var(--eg-ink-3);
  padding-bottom: var(--eg-sp-2);
}
.eg-book .eg-table th {
  font-family: var(--eg-sans);
  font-size: var(--eg-fs-caption);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--eg-ink);
  text-align: center;
  vertical-align: bottom;
  padding: var(--eg-sp-2) var(--eg-sp-3) var(--eg-sp-2);
  border-bottom: var(--eg-w-red) solid var(--eg-red);
}
.eg-book .eg-table td {
  font-size: var(--eg-fs-small);
  line-height: var(--eg-lh-small);
  text-align: center;
  vertical-align: middle;
  padding: var(--eg-sp-2) var(--eg-sp-3);
  border-bottom: var(--eg-w-hair) solid var(--eg-rule);
}
.eg-book .eg-table tr:last-child td { border-bottom: var(--eg-w-ink) solid var(--eg-ink); }
.eg-book .eg-table td strong { font-weight: 600; }
.eg-book .eg-table td em { color: var(--eg-ink-2); }

/* variants: hooks for width and density, treatment stays uniform */
.eg-book .eg-table--values,
.eg-book .eg-table--pairs { width: 78%; margin-left: auto; margin-right: auto; }
.eg-book .eg-table--grid td { font-family: var(--eg-sans); font-size: var(--eg-fs-caption); }
.eg-book .eg-table--grid { width: 78%; margin-left: auto; margin-right: auto; }
.eg-book .eg-table--wide th { font-size: var(--eg-fs-tiny); padding: var(--eg-sp-1) var(--eg-sp-2); }
.eg-book .eg-table--wide td { font-size: 8pt; padding: var(--eg-sp-1) var(--eg-sp-2); }
.eg-book .eg-table--matrix td { font-family: var(--eg-sans); font-size: var(--eg-fs-caption); }

/* ============ Puzzles: shared frame ============ */

.eg-book .eg-puzzle {
  border: var(--eg-w-hair) solid var(--eg-ink);
  background: var(--eg-paper);
  margin: var(--eg-sp-6) 0;
}
.eg-book .eg-puzzle-bar {
  padding: var(--eg-sp-3) var(--eg-sp-4);
  border-bottom: var(--eg-w-hair) solid var(--eg-rule);
}
.eg-book .eg-puzzle-bar .eg-puzzle-diff { float: right; padding-top: 1pt; }
.eg-book .eg-puzzle-setup {
  font-style: italic;
  font-size: var(--eg-fs-small);
  color: var(--eg-ink-2);
  margin: 0;
  padding: var(--eg-sp-3) var(--eg-sp-4) 0;
}
.eg-book .eg-scene {
  background: var(--eg-paper-3);
  margin: var(--eg-sp-3) var(--eg-sp-4);
  padding: var(--eg-sp-4) var(--eg-sp-4) var(--eg-sp-5);
  text-align: center;
}
.eg-book .eg-zone { margin-top: var(--eg-sp-4); }
.eg-book .eg-zone:first-child { margin-top: 0; }
.eg-book .eg-zone-label {
  font-family: var(--eg-sans);
  font-size: var(--eg-fs-tiny);
  font-weight: 600;
  letter-spacing: var(--eg-track-caps);
  text-transform: uppercase;
  color: var(--eg-stone-deep);
  margin: 0 0 var(--eg-sp-2);
}
.eg-book .eg-puzzle-question {
  font-family: var(--eg-display);
  font-weight: 700;
  font-size: var(--eg-fs-sub);
  line-height: var(--eg-lh-sub);
  margin: 0;
  padding: var(--eg-sp-2) var(--eg-sp-4) var(--eg-sp-4);
}
.eg-book .eg-puzzle-answer {
  border-top: var(--eg-w-hair) solid var(--eg-rule);
  padding: var(--eg-sp-3) var(--eg-sp-4);
}
/* answers are held back, one treatment for the whole book: a hairline,
   the small solution label, then small quiet type. No rotation: the
   pipeline cannot turn single elements (whole landscape pages only). */
.eg-book .eg-answer-label {
  font-family: var(--eg-sans);
  font-size: var(--eg-fs-tiny);
  font-weight: 600;
  letter-spacing: var(--eg-track-caps);
  text-transform: uppercase;
  color: var(--eg-ink-3);
  margin: 0 0 var(--eg-sp-1);
}
.eg-book .eg-puzzle-answer-body {
  font-size: var(--eg-fs-small);
  line-height: var(--eg-lh-small);
  color: var(--eg-ink-2);
  margin: 0;
}

/* ---------- scene atoms ---------- */

/* your hand: overlapped face-up cards */
.eg-book .eg-hand .eg-card { margin-left: var(--eg-ov-hand); }
.eg-book .eg-hand .eg-card:first-child { margin-left: 0; }

/* an opponent: seat chip + compacted back stack + count badge */
.eg-book .eg-opponent { display: inline-block; margin: 0 var(--eg-sp-3); vertical-align: top; }
.eg-book .eg-opponent .eg-seat { display: inline-block; margin-bottom: var(--eg-sp-2); }
.eg-book .eg-backs { display: block; }
.eg-book .eg-backs .eg-card { width: var(--eg-card-w-sm); margin-left: var(--eg-ov-backs); }
.eg-book .eg-backs .eg-card:first-child { margin-left: 0; }
.eg-book .eg-count {
  display: inline-block;
  font-family: var(--eg-sans);
  font-size: var(--eg-fs-tiny);
  font-weight: 600;
  background: var(--eg-ink);
  color: var(--eg-paper);
  border-radius: 50%;
  width: 11pt;
  line-height: 11pt;
  text-align: center;
  margin-left: 3pt;
  vertical-align: top;
}

/* the middle: played cards, each with a seat label beneath */
.eg-book .eg-played {
  display: inline-block;
  margin: 0 var(--eg-sp-3);
  vertical-align: bottom;
}
.eg-book .eg-played .eg-played-seat {
  display: block;
  margin-top: var(--eg-sp-2);
  font-family: var(--eg-sans);
  font-size: var(--eg-fs-tiny);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--eg-ink);
}

/* table cards: labeled sub-groups lying apart */
.eg-book .eg-table-group { display: inline-block; margin: 0 var(--eg-sp-4); vertical-align: top; }
.eg-book .eg-table-group .eg-group-label {
  display: block;
  font-family: var(--eg-sans);
  font-size: var(--eg-fs-tiny);
  font-weight: 600;
  letter-spacing: var(--eg-track-caps);
  text-transform: uppercase;
  color: var(--eg-stone-deep);
  margin-bottom: var(--eg-sp-2);
}
.eg-book .eg-table-group .eg-card { margin-left: var(--eg-ov-row); }
.eg-book .eg-table-group .eg-card:first-child { margin-left: 0; }

/* a pile: captured cards in tight overlap; some pulled forward */
.eg-book .eg-pile { display: block; padding-top: var(--eg-sp-3); }
.eg-book .eg-pile .eg-card { width: var(--eg-card-w-sm); margin-left: var(--eg-ov-pile); }
.eg-book .eg-pile .eg-card:first-child { margin-left: 0; }
.eg-book .eg-pile .eg-pulled {
  position: relative;
  top: -6pt;
  margin-left: -22pt;
  margin-right: 4pt;
}

/* pile highlights: the cards pulled forward for attention */
.eg-book .eg-pile-highlights { margin-top: var(--eg-sp-3); }
.eg-book .eg-pile-highlights .eg-card { margin-left: var(--eg-ov-row); }
.eg-book .eg-pile-highlights .eg-card:first-child { margin-left: 0; }

/* speech: a quoted line pinned to a seat */
.eg-book .eg-speech {
  display: inline-block;
  border: var(--eg-w-hair) solid var(--eg-ink-4);
  border-radius: 4pt;
  background: var(--eg-card-white);
  padding: 1.5pt 6pt 2pt;
  margin: 0 var(--eg-sp-2);
  font-size: var(--eg-fs-small);
  font-style: italic;
}
.eg-book .eg-speech .eg-seat { margin-right: 3pt; font-style: normal; }

/* the pad: a corner of the score pad */
.eg-book .eg-pad {
  display: inline-block;
  background: var(--eg-card-white);
  border: var(--eg-w-hair) solid var(--eg-ink-4);
  padding: var(--eg-sp-2) var(--eg-sp-4);
  font-style: italic;
  font-size: var(--eg-fs-small);
  text-align: left;
}
.eg-book .eg-pad-line { display: block; border-bottom: var(--eg-w-hair) solid var(--eg-rule); padding: 1pt 0; }
.eg-book .eg-pad-line:last-child { border-bottom: none; }

/* direction arrow note (P3 optional) */
.eg-book .eg-arrow-note {
  font-family: var(--eg-sans);
  font-size: var(--eg-fs-tiny);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--eg-stone-deep);
}

/* ============ C1 single card ============ */

.eg-book .eg-figure { margin: var(--eg-sp-5) 0; text-align: center; }
.eg-book .eg-figure .eg-card { width: var(--eg-card-w-lg); }
.eg-book .eg-figcaption {
  font-size: var(--eg-fs-small);
  line-height: var(--eg-lh-small);
  font-style: italic;
  color: var(--eg-ink-2);
  max-width: 88mm;
  margin: var(--eg-sp-3) auto 0;
  text-align: center;
  text-wrap: pretty;
}

/* ============ C2 card row ============ */

.eg-book .eg-card-row { margin: var(--eg-sp-5) 0; text-align: center; }
.eg-book .eg-card-row .eg-card { margin-left: var(--eg-ov-row); }
.eg-book .eg-card-row .eg-card:first-child { margin-left: 0; }

/* ============ C3 trick diagram ============ */

.eg-book .eg-trick { margin: var(--eg-sp-5) 0; text-align: center; }
.eg-book .eg-trick .eg-played .eg-card { width: var(--eg-card-w-lg); }
.eg-book .eg-trick-result {
  font-size: var(--eg-fs-small);
  font-style: italic;
  color: var(--eg-ink-2);
  margin: var(--eg-sp-3) 0 0;
  text-align: center;
}

/* ============ C4 seating diagram ============ */

.eg-book .eg-seating { margin: var(--eg-sp-5) auto; width: 88mm; }
.eg-book .eg-seating-grid { display: table; width: 100%; border-collapse: collapse; }
.eg-book .eg-seating-row { display: table-row; }
.eg-book .eg-seating-cell {
  display: table-cell;
  width: 33.33%;
  height: 44pt;
  text-align: center;
  vertical-align: middle;
  padding: var(--eg-sp-1);
}
.eg-book .eg-seat-tag {
  display: block;
  margin-top: 2pt;
  font-family: var(--eg-sans);
  font-size: 5.5pt;
  font-weight: 600;
  letter-spacing: var(--eg-track-caps);
  text-transform: uppercase;
  color: var(--eg-red);
}
.eg-book .eg-seating-table {
  border: var(--eg-w-ink) solid var(--eg-ink);
  border-radius: 50%;
  width: 82%;
  height: 40pt;
  margin: 0 auto;
  text-align: center;
}
.eg-book .eg-seating-table-label {
  font-family: var(--eg-serif);
  font-style: italic;
  font-size: var(--eg-fs-small);
  color: var(--eg-ink-3);
  display: block;
  padding-top: 8pt;
}
.eg-book .eg-seating-direction {
  display: block;
  text-align: center;
  margin-top: var(--eg-sp-2);
  font-family: var(--eg-sans);
  font-size: var(--eg-fs-tiny);
  font-weight: 600;
  letter-spacing: var(--eg-track-caps);
  text-transform: uppercase;
  color: var(--eg-stone-deep);
}

/* ============ C5 figure, C6 full page ============ */

.eg-book .eg-figure .eg-img { max-width: 100%; height: auto; border-radius: var(--eg-radius-img); }
.eg-book .eg-full-page { text-align: center; }
.eg-book .eg-full-page .eg-img {
  width: 148mm;
  height: 196mm;
  object-fit: cover;
  display: block;
}
.eg-book .eg-full-page .eg-figcaption {
  padding: var(--eg-sp-3) var(--eg-sp-5) 0;
}

/* ============ W1 + W2 web pointers (locked: the faux tarok card) ============
   The pointer is a card dealt onto the page: Arabic number top left (the
   CTA), Roman numeral top right, QR as the card's artwork, gotarok.com at
   the foot. W2 adds the chapter list (suit-pip bullets, one suit per
   chapter, rotating) and the spoken instruction line. W1 is the card alone
   with its what-you-get line, sized for the margin placement. */

.eg-book .eg-pointer-panel {
  display: table;
  width: 100%;
  margin: var(--eg-sp-6) 0;
}
.eg-book .eg-pointer-cell { display: table-cell; width: var(--eg-ptr-card-w); vertical-align: middle; }
.eg-book .eg-pointer-side { display: table-cell; vertical-align: middle; padding-left: var(--eg-sp-6); }
.eg-book .eg-pointer-card {
  position: relative;
  display: table;
  width: var(--eg-ptr-card-w);
  height: calc(var(--eg-ptr-card-w) / 0.64);
  margin: 0;
  background: var(--eg-card-white);
  border: var(--eg-card-edge);
  border-radius: var(--eg-ptr-radius);
}
.eg-book .eg-pointer-mid {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  padding: calc(var(--eg-ptr-num-big) * 1.15) var(--eg-sp-3);
}
.eg-book .eg-pointer-qr { width: calc(var(--eg-ptr-card-w) * 0.71); height: auto; display: inline-block; }
.eg-book .eg-pointer-num {
  position: absolute;
  top: calc(var(--eg-ptr-corner-top) + var(--eg-ptr-num-up));
  left: var(--eg-ptr-corner-side);
  margin: 0;
  font-family: var(--eg-display);
  font-weight: 800;
  font-size: var(--eg-ptr-num-big);
  line-height: 1;
  color: var(--eg-red);
}
.eg-book .eg-pointer-roman {
  position: absolute;
  top: var(--eg-ptr-corner-top);
  right: var(--eg-ptr-corner-side);
  margin: 0;
  font-family: var(--eg-display);
  font-weight: 800;
  font-size: var(--eg-ptr-num);
  line-height: 1;
  color: var(--eg-red);
}
.eg-book .eg-pointer-site {
  position: absolute;
  bottom: var(--eg-sp-3);
  left: 0; right: 0;
  margin: 0;
  text-align: center;
  font-family: var(--eg-sans);
  font-size: var(--eg-ptr-site);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--eg-ink-3);
}
.eg-book .eg-pointer-what {
  margin: var(--eg-sp-3) 0 0;
  font-style: italic;
  font-size: var(--eg-ptr-what);
  line-height: 1.3;
  color: var(--eg-ink-2);
}
.eg-book .eg-pointer-title {
  margin: 0 0 var(--eg-sp-3);
  font-family: var(--eg-display);
  font-style: italic;
  font-weight: 700;
  font-size: 12pt;
}
.eg-book .eg-pointer-list { list-style: none; margin: 0; padding: 0; }
.eg-book .eg-pointer-list > li {
  position: relative;
  padding-left: calc(var(--eg-li-pip) + 3pt);
  margin: 0 0 var(--eg-sp-2);
  font-size: var(--eg-fs-body);
  line-height: var(--eg-lh-body);
  text-wrap: pretty;
}
.eg-book .eg-li-pip { position: absolute; left: 0; top: 1pt; width: var(--eg-li-pip); height: auto; }
.eg-book .eg-li-pip--heart { top: var(--eg-pip-y-heart); }
.eg-book .eg-li-pip--diamond { top: var(--eg-pip-y-diamond); }
.eg-book .eg-li-pip--spade { top: var(--eg-pip-y-spade); }
.eg-book .eg-li-pip--club { top: var(--eg-pip-y-club); }
.eg-book .eg-pointer-instr {
  margin: var(--eg-sp-3) 0 0;
  padding-top: var(--eg-sp-3);
  border-top: var(--eg-w-hair) solid var(--eg-rule);
  font-size: var(--eg-fs-body);
}
.eg-book .eg-pointer-instr strong { font-weight: 600; }
.eg-book .eg-pointer-instr-num {
  font-family: var(--eg-display);
  font-weight: 800;
  font-size: 13.5pt;
  color: var(--eg-red);
}
/* W1: the card alone; overrides the margin float's default width */
.eg-book .eg-pointer-card--solo { margin: var(--eg-sp-2) 0 var(--eg-sp-4); }
.eg-book .eg-pointer-card--solo.eg-place-margin { width: var(--eg-ptr-card-w); float: right; margin: var(--eg-sp-2) 0 var(--eg-sp-4) var(--eg-sp-5); }

/* ============ M0 title page ============ */

.eg-book .eg-title-page { text-align: center; padding-top: 34mm; }
.eg-book .eg-title-page-title {
  font-family: var(--eg-display);
  font-weight: 800;
  font-size: var(--eg-fs-display);
  line-height: var(--eg-lh-display);
  margin: 0 0 var(--eg-sp-4);
}
.eg-book .eg-title-page-subtitle {
  font-family: var(--eg-serif);
  font-style: italic;
  font-size: var(--eg-fs-native);
  color: var(--eg-ink-2);
  margin: 0 0 var(--eg-sp-7);
}
.eg-book .eg-title-page-author {
  font-family: var(--eg-sans);
  font-size: var(--eg-fs-caption);
  font-weight: 600;
  letter-spacing: var(--eg-track-wide);
  text-transform: uppercase;
  color: var(--eg-ink);
  margin: 0 0 42mm;
}
.eg-book .eg-title-page-mark { width: 34pt; height: auto; }

/* ============ M1 table of contents ============ */

.eg-book .eg-toc { margin: var(--eg-sp-6) 0; }
.eg-book .eg-toc-list { display: table; width: 100%; border-collapse: collapse; margin: 0; padding: 0; }
.eg-book .eg-toc-entry { display: table-row; }
.eg-book .eg-toc-label { display: table-cell; padding: var(--eg-sp-2) 0; border-bottom: var(--eg-w-hair) solid var(--eg-rule); }
.eg-book .eg-toc-page {
  display: table-cell;
  width: 24pt;
  text-align: right;
  vertical-align: bottom;
  padding: var(--eg-sp-2) 0;
  border-bottom: var(--eg-w-hair) solid var(--eg-rule);
  font-family: var(--eg-sans);
  font-size: var(--eg-fs-caption);
  color: var(--eg-ink-3);
}
.eg-book .eg-toc-entry--1 .eg-toc-label {
  font-family: var(--eg-display);
  font-weight: 700;
  font-size: var(--eg-fs-sub);
  padding-top: var(--eg-sp-4);
}
.eg-book .eg-toc-entry--2 .eg-toc-label {
  font-size: var(--eg-fs-small);
  padding-left: var(--eg-sp-6);
}

/* ============ M2 glossary ============ */

.eg-book .eg-glossary { margin: var(--eg-sp-5) 0; }
.eg-book .eg-gloss-entry { margin: 0 0 var(--eg-sp-3); font-size: var(--eg-fs-small); line-height: var(--eg-lh-small); }
.eg-book .eg-gloss-term { font-weight: 600; font-size: var(--eg-fs-body); }
.eg-book .eg-gloss-tag {
  display: inline-block;
  font-family: var(--eg-sans);
  font-size: 5.5pt;
  font-weight: 600;
  letter-spacing: var(--eg-track-caps);
  text-transform: uppercase;
  color: var(--eg-stone-deep);
  background: var(--eg-paper-3);
  border-radius: var(--eg-radius-chip);
  padding: 0.5pt 3.5pt 1pt;
  margin: 0 2pt;
  vertical-align: 1pt;
}

/* ============ M3 concordance ============ */

.eg-book .eg-concordance th { font-size: var(--eg-fs-tiny); padding: var(--eg-sp-1) var(--eg-sp-2); }
.eg-book .eg-concordance td { font-size: 8pt; padding: var(--eg-sp-1) var(--eg-sp-2); }

/* ============ M4 cheat sheet (locked from the Cheat Sheet Lab, 2026-07-19) ============
   Landscape page, the picked layout: one wide row per contract with the
   rule switches folded in (the brief's separate matrix zone is merged, see
   CHEAT-SHEET-BLOCKS-NOTES.md); bonuses left, extras + scoring + pointer
   right. A real sheet and a blank template ship per game. */

.eg-book .eg-cs-head {
  border-top: var(--eg-w-ink) solid var(--eg-ink);
  border-bottom: var(--eg-w-hair) solid var(--eg-rule);
  padding: 5pt 0 4pt;
  margin: 0 0 var(--eg-sp-3);
}
.eg-book .eg-cs-title { font-family: var(--eg-display); font-weight: 700; font-size: 13pt; margin: 0; display: inline; }
.eg-book .eg-cs-native { font-style: italic; font-size: 8.5pt; color: var(--eg-ink-2); display: inline; margin: 0 0 0 5pt; }
.eg-book .eg-cs-nums {
  float: right; margin: 0; padding-top: 2pt;
  font-family: var(--eg-sans); font-size: var(--eg-fs-tiny); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--eg-ink);
}
.eg-book .eg-cs-cap {
  margin: 0 0 2pt;
  font-family: var(--eg-sans); font-size: var(--eg-fs-tiny); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--eg-red);
}
.eg-book .eg-cs-legend { margin: 0 0 3pt; font-size: 7pt; font-style: italic; color: var(--eg-ink-3); }
.eg-book .eg-cs-table { width: 100%; border-collapse: collapse; }
.eg-book .eg-cs-table td, .eg-book .eg-cs-table th {
  font-size: var(--eg-fs-small); text-align: center; vertical-align: middle;
  padding: 2.5pt 3pt; border-bottom: var(--eg-w-hair) solid var(--eg-rule);
}
.eg-book .eg-cs-table th {
  font-family: var(--eg-sans); font-size: 5.5pt; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  border-bottom: var(--eg-w-red) solid var(--eg-red);
}
.eg-book .eg-cs-table td.eg-cs-name { font-weight: 600; }
.eg-book .eg-cs-table td.eg-cs-fam { font-style: italic; font-size: 7.5pt; color: var(--eg-ink-2); }
.eg-book .eg-cs-table td.eg-cs-vp { font-weight: 600; white-space: nowrap; }
.eg-book .eg-cs-table td.eg-cs-short { font-size: 7.5pt; line-height: 1.25; }
.eg-book .eg-cs-table td.eg-cs-special { font-size: 7.5pt; line-height: 1.25; }
.eg-book .eg-cs-table td.eg-cs-open { font-style: italic; color: var(--eg-ink-4); font-size: 7pt; }
/* the switches: x = on, o = off (the lab's locked check-and-cross pick;
   plain Inter letters, no dingbats, 1-bit photocopy safe). Hollow gray
   square = write-in cell (blank template, unconfirmed values). */
.eg-book .eg-sw--on, .eg-book .eg-sw--off {
  display: inline-block;
  font-family: var(--eg-sans);
  font-weight: 600;
  font-size: calc(var(--eg-cs-switch) + 1.5pt);
  line-height: 1;
  vertical-align: middle;
}
.eg-book .eg-sw--on::before { content: "x"; color: var(--eg-ink); }
.eg-book .eg-sw--off::before { content: "o"; color: var(--eg-ink-4); }
.eg-book .eg-sw--open {
  display: inline-block; width: var(--eg-cs-switch); height: var(--eg-cs-switch);
  border: 0.75pt solid var(--eg-ink-4); border-radius: 0.75pt; vertical-align: middle;
  background: var(--eg-card-white);
}
.eg-book .eg-cs-split { display: table; width: 100%; margin-top: var(--eg-sp-3); }
.eg-book .eg-cs-left { display: table-cell; width: 50%; vertical-align: top; padding-right: var(--eg-sp-4); }
.eg-book .eg-cs-right { display: table-cell; width: 50%; vertical-align: top; padding-left: var(--eg-sp-4); }
.eg-book .eg-cs-moon {
  margin: var(--eg-sp-3) 0 0; padding: 3pt 6pt;
  border: var(--eg-w-hair) solid var(--eg-ink);
  font-size: 7.5pt; font-style: italic;
}
.eg-book .eg-cs-scoring { margin-top: var(--eg-sp-4); }
.eg-book .eg-cs-steps { margin: 0; font-size: var(--eg-fs-small); line-height: 1.5; }
.eg-book .eg-cs-reminders { margin: var(--eg-sp-2) 0 0; font-size: 7.5pt; line-height: 1.4; color: var(--eg-ink-2); }
.eg-book .eg-cs-pointer {
  margin-top: var(--eg-sp-3); padding-top: var(--eg-sp-2);
  border-top: var(--eg-w-hair) solid var(--eg-rule);
}
.eg-book .eg-cs-qr { float: left; width: 40pt; height: 40pt; border: var(--eg-w-hair) solid var(--eg-ink-4); background: var(--eg-card-white); margin-right: var(--eg-sp-3); }
.eg-book .eg-cs-ptr-text { margin: 0; font-style: italic; font-size: var(--eg-fs-small); line-height: 1.35; color: var(--eg-ink-2); }
.eg-book .eg-cs-pointer::after { content: ""; display: block; clear: both; }
/* blank-template write lines */
.eg-book .eg-cs-writeline { display: inline-block; width: 100%; border-bottom: var(--eg-w-hair) solid var(--eg-ink); height: 10pt; }

/* ============ M5 imprint ============ */

.eg-book .eg-imprint {
  font-size: var(--eg-fs-caption);
  font-family: var(--eg-sans);
  color: var(--eg-ink-2);
  line-height: 1.7;
  padding-top: 120mm;
}
.eg-book .eg-imprint-line { display: block; }

/* ============ M7 about the author ============ */

.eg-book .eg-author { text-align: center; padding-top: var(--eg-sp-8); }
.eg-book .eg-author-portrait {
  width: 76pt;
  height: auto;
  border-radius: var(--eg-radius-img);
  border: var(--eg-w-hair) solid var(--eg-rule);
  margin-bottom: var(--eg-sp-5);
}
.eg-book .eg-author-body {
  text-align: left;
  font-size: var(--eg-fs-small);
  line-height: var(--eg-lh-small);
  max-width: 92mm;
  margin: 0 auto var(--eg-sp-4);
}
.eg-book .eg-author-signoff {
  font-family: var(--eg-serif);
  font-style: italic;
  font-size: var(--eg-fs-sub);
  color: var(--eg-ink-2);
  margin: 0;
}

/* ============ M6 cover + back cover ============ */

.eg-book .eg-cover { text-align: center; }
.eg-book .eg-cover-art {
  display: block;
  width: 148mm;
  height: 138mm;
  object-fit: cover;
}
.eg-book .eg-cover-band { padding: 11mm 12mm 0; border-top: 2.5pt solid var(--eg-red); }
.eg-book .eg-cover-title {
  font-family: var(--eg-display);
  font-weight: 800;
  font-size: var(--eg-fs-display);
  line-height: var(--eg-lh-display);
  margin: 0 0 var(--eg-sp-3);
}
.eg-book .eg-cover-subtitle {
  font-family: var(--eg-serif);
  font-style: italic;
  font-size: var(--eg-fs-native);
  color: var(--eg-ink-2);
  margin: 0 0 var(--eg-sp-5);
}
.eg-book .eg-cover-author {
  font-family: var(--eg-sans);
  font-size: var(--eg-fs-caption);
  font-weight: 600;
  letter-spacing: var(--eg-track-wide);
  text-transform: uppercase;
  margin: 0;
}
.eg-book .eg-back-cover { padding: 24mm 18mm 14mm; text-align: center; }
.eg-book .eg-back-blurb {
  font-size: var(--eg-fs-sub);
  line-height: 1.5;
  max-width: 100mm;
  margin: 0 auto var(--eg-sp-8);
  text-align: center;
  text-wrap: pretty;
}
.eg-book .eg-back-mark { display: block; width: 30pt; height: auto; margin: 0 auto var(--eg-sp-6); }
.eg-book .eg-back-isbn { width: 82pt; height: auto; display: block; margin: 0 auto; }

/* ============ M8 score sheets ============ */

.eg-book .eg-sheet { padding-top: var(--eg-sp-4); }
.eg-book .eg-sheet-head { border-top: var(--eg-w-ink) solid var(--eg-ink); padding-top: var(--eg-sp-3); margin-bottom: var(--eg-sp-4); }
.eg-book .eg-sheet-title {
  font-family: var(--eg-display);
  font-weight: 700;
  font-size: var(--eg-fs-section);
  margin: 0;
  display: inline;
}
.eg-book .eg-sheet-target {
  float: right;
  font-family: var(--eg-sans);
  font-size: var(--eg-fs-caption);
  font-weight: 600;
  letter-spacing: var(--eg-track-caps);
  text-transform: uppercase;
  color: var(--eg-red);
  padding-top: 3pt;
}
.eg-book .eg-sheet-table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.eg-book .eg-sheet-table th {
  font-family: var(--eg-sans);
  font-size: var(--eg-fs-caption);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  padding: var(--eg-sp-2);
  border-bottom: var(--eg-w-red) solid var(--eg-red);
}
.eg-book .eg-sheet-table td {
  border: var(--eg-w-hair) solid var(--eg-ink-4);
  height: 16pt;
  text-align: center;
  vertical-align: middle;
  font-size: var(--eg-fs-small);
}
.eg-book .eg-sheet-hand {
  width: 16pt;
  font-family: var(--eg-sans);
  font-size: var(--eg-fs-tiny);
  color: var(--eg-ink-3);
  background: var(--eg-paper-2);
}
/* the two write-in channels: contract | bonus, never merged; with fixed
   table layout each player pair splits evenly, the tint marks the bonus */
.eg-book .eg-sheet-table .eg-ss-extra {
  border-left: none;
  background: var(--eg-red-wash);
  font-size: var(--eg-fs-caption);
}
.eg-book .eg-sheet-table .eg-ss-main { border-right: var(--eg-w-hair) solid var(--eg-ink-4); }
.eg-book .eg-sheet-table .eg-ss-name { border-bottom: var(--eg-w-red) solid var(--eg-red); }
.eg-book .eg-sheet-table td.eg-sheet-sub {
  font-family: var(--eg-sans);
  font-size: 5.5pt;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--eg-ink-3);
  background: var(--eg-paper-2);
  height: 10pt;
}
/* channel key line (sheets whose columns are too narrow for full labels) */
.eg-book .eg-sheet-key {
  font-family: var(--eg-sans);
  font-size: var(--eg-fs-tiny);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--eg-ink-3);
  margin: 0 0 var(--eg-sp-2);
}
/* every fifth hand: a heavier rule to keep the ledger countable */
.eg-book .eg-sheet-table tr.eg-sheet-rule5 td { border-bottom: var(--eg-w-ink) solid var(--eg-ink); }
/* the circles row (Slovenian: radelci) */
.eg-book .eg-circle {
  display: inline-block;
  width: 7pt; height: 7pt;
  border-radius: 50%;
  border: 0.8pt solid var(--eg-ink);
  margin: 0 1.5pt;
  vertical-align: middle;
}
.eg-book .eg-sheet-circles td { height: 12pt; background: var(--eg-paper); }
/* running-total band */
.eg-book .eg-sheet-total td {
  background: var(--eg-paper-3);
  height: 13pt;
  font-family: var(--eg-sans);
  font-size: var(--eg-fs-tiny);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--eg-ink-2);
}
/* margin crib */
.eg-book .eg-sheet-crib {
  margin-top: var(--eg-sp-4);
  border: var(--eg-w-hair) solid var(--eg-ink);
  background: var(--eg-paper);
  padding: var(--eg-sp-3) var(--eg-sp-4);
  font-size: var(--eg-fs-caption);
}
.eg-book .eg-sheet-crib-title {
  font-family: var(--eg-sans);
  font-size: var(--eg-fs-tiny);
  font-weight: 600;
  letter-spacing: var(--eg-track-caps);
  text-transform: uppercase;
  color: var(--eg-red);
  margin: 0 0 var(--eg-sp-2);
}
/* handwriting entries in filled previews */
.eg-book .eg-hand-entry { font-style: italic; color: var(--eg-stone-deep); }
/* generous rows (Strawman: hands are long) */
.eg-book .eg-sheet--tall td { height: 24pt; }
/* deal counter column (Hungarian: rounds of four deals) */
.eg-book .eg-sheet-deal {
  width: 12pt;
  font-family: var(--eg-sans);
  font-size: var(--eg-fs-tiny);
  color: var(--eg-ink-3);
  background: var(--eg-paper-2);
}

/* ============ basic screen layer ============ */

@media screen {
  .eg-book .eg-vign-card { box-shadow: 0 12px 28px -16px rgba(20,17,15,0.35), 0 2px 6px -2px rgba(20,17,15,0.10); }
  .eg-book .eg-pointer-card { box-shadow: 0 12px 28px -16px rgba(20,17,15,0.35), 0 2px 6px -2px rgba(20,17,15,0.10); }
  /* the web theme wraps the content column in .eg-web; it is the query
     container for the mobile variants below */
  .eg-web { container-type: inline-size; container-name: eg-web; }
  .eg-book {
    background: var(--eg-paper);
    max-width: 130mm;
    margin: 0 auto;
    padding: var(--eg-sp-7) var(--eg-sp-6);
  }
  .eg-book .eg-full-page .eg-img { width: 100%; height: auto; }
  .eg-book .eg-cover-art { width: 100%; height: auto; }
}


/* ============ Fan spread (2026-07-19): use ALL the width ============
   Fanned zones carry eg-fan-N (N = card count, set at assembly). The
   overlap is precomputed from the painted card width so the fan fills
   the standard text column WITHOUT wrapping; below 7 cards they sit
   fully visible with a small gap. Without the class the conservative
   default applies. The mobile scroll strips (later in this file) win
   below 480px. */
.eg-book .eg-fan-2 .eg-card { margin-left: 4pt; }
.eg-book .eg-fan-3 .eg-card { margin-left: 4pt; }
.eg-book .eg-fan-4 .eg-card { margin-left: 4pt; }
.eg-book .eg-fan-5 .eg-card { margin-left: 4pt; }
.eg-book .eg-fan-6 .eg-card { margin-left: 4pt; }
.eg-book .eg-fan-7 .eg-card { margin-left: -2.8pt; }
.eg-book .eg-fan-8 .eg-card { margin-left: -8.9pt; }
.eg-book .eg-fan-9 .eg-card { margin-left: -13.5pt; }
.eg-book .eg-fan-10 .eg-card { margin-left: -17pt; }
.eg-book .eg-fan-11 .eg-card { margin-left: -19.9pt; }
.eg-book .eg-fan-12 .eg-card { margin-left: -22.2pt; }
.eg-book .eg-fan-13 .eg-card { margin-left: -24.2pt; }
.eg-book .eg-fan-14 .eg-card { margin-left: -25.8pt; }
.eg-book .eg-fan-15 .eg-card { margin-left: -27.2pt; }
.eg-book .eg-hand .eg-card:first-child, .eg-book .eg-card-row-cards .eg-card:first-child { margin-left: 0; }
.eg-book .eg-pile.eg-fan-6 .eg-card { margin-left: 3pt; }
.eg-book .eg-pile.eg-fan-7 .eg-card { margin-left: 3pt; }
.eg-book .eg-pile.eg-fan-8 .eg-card { margin-left: 2.5pt; }
.eg-book .eg-pile.eg-fan-9 .eg-card { margin-left: -2.2pt; }
.eg-book .eg-pile.eg-fan-10 .eg-card { margin-left: -5.9pt; }
.eg-book .eg-pile.eg-fan-11 .eg-card { margin-left: -8.9pt; }
.eg-book .eg-pile.eg-fan-12 .eg-card { margin-left: -11.3pt; }
.eg-book .eg-pile.eg-fan-13 .eg-card { margin-left: -13.3pt; }
.eg-book .eg-pile.eg-fan-14 .eg-card { margin-left: -15pt; }
.eg-book .eg-pile.eg-fan-15 .eg-card { margin-left: -16.5pt; }
.eg-book .eg-pile.eg-fan-16 .eg-card { margin-left: -17.8pt; }
.eg-book .eg-pile.eg-fan-17 .eg-card { margin-left: -18.9pt; }
.eg-book .eg-pile.eg-fan-18 .eg-card { margin-left: -19.9pt; }
.eg-book .eg-pile.eg-fan-19 .eg-card { margin-left: -20.7pt; }
.eg-book .eg-pile.eg-fan-20 .eg-card { margin-left: -21.5pt; }
.eg-book .eg-pile.eg-fan-21 .eg-card { margin-left: -22.2pt; }
.eg-book .eg-pile.eg-fan-22 .eg-card { margin-left: -22.9pt; }
.eg-book .eg-pile.eg-fan-23 .eg-card { margin-left: -23.4pt; }
.eg-book .eg-pile.eg-fan-24 .eg-card { margin-left: -24pt; }
.eg-book .eg-pile.eg-fan-25 .eg-card { margin-left: -24.4pt; }
.eg-book .eg-pile.eg-fan-26 .eg-card { margin-left: -24.9pt; }
.eg-book .eg-pile.eg-fan-27 .eg-card { margin-left: -25.3pt; }
.eg-book .eg-pile .eg-card:first-child { margin-left: 0; }
.eg-book .eg-hand, .eg-book .eg-pile, .eg-book .eg-card-row-cards { white-space: nowrap; }

/* ============ mobile variants ============
   Web layer only: applies inside an .eg-web container narrower than 480px.
   Print renderers ignore @container entirely. No JavaScript: strips use
   native touch scrolling; the affordance is a thin red scrollbar plus the
   partially peeking item. */

@container eg-web (max-width: 480px) {
  /* margin content joins the text flow: one rule, not a redesign */
  .eg-book .eg-place-margin { float: none; width: auto; margin: var(--eg-sp-4) 0; }

  /* shared scroll-strip treatment */
  .eg-book .eg-hand, .eg-book .eg-pile, .eg-book .eg-card-row-cards, .eg-book .eg-zone-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    text-align: left;
    scrollbar-width: thin;
    scrollbar-color: var(--eg-red) transparent;
    padding-bottom: var(--eg-sp-2);
  }
  .eg-book .eg-hand::-webkit-scrollbar, .eg-book .eg-pile::-webkit-scrollbar,
  .eg-book .eg-card-row-cards::-webkit-scrollbar, .eg-book .eg-zone-table::-webkit-scrollbar { height: var(--eg-m-scrollbar); }
  .eg-book .eg-hand::-webkit-scrollbar-thumb, .eg-book .eg-pile::-webkit-scrollbar-thumb,
  .eg-book .eg-card-row-cards::-webkit-scrollbar-thumb, .eg-book .eg-zone-table::-webkit-scrollbar-thumb { background: var(--eg-red); }

  /* the puzzle stage, mobile: bigger swipeable hand, compact backs */
  .eg-book .eg-scene { padding: var(--eg-sp-3) var(--eg-sp-3) var(--eg-sp-4); }
  .eg-book .eg-hand .eg-card { width: var(--eg-m-card-w); margin-left: var(--eg-m-ov-hand); }
  .eg-book .eg-hand .eg-card:first-child { margin-left: 0; }
  .eg-book .eg-played .eg-card { width: var(--eg-m-card-w); }
  .eg-book .eg-backs .eg-card { width: var(--eg-m-card-w-sm); margin-left: var(--eg-m-ov-backs); }
  .eg-book .eg-backs .eg-card:first-child { margin-left: 0; }
  .eg-book .eg-pile .eg-card, .eg-book .eg-pile[class*="eg-fan-"] .eg-card { width: var(--eg-m-card-w-sm); margin-left: var(--eg-m-ov-pile); }
  .eg-book .eg-pile .eg-card:first-child { margin-left: 0; }
  .eg-book .eg-pile-highlights .eg-card { width: var(--eg-m-card-w-md); }
  .eg-book .eg-table-group .eg-card { width: var(--eg-m-card-w-md); }
  .eg-book .eg-opponent { margin: 0 var(--eg-sp-2) var(--eg-sp-2); }

  /* C2 card row: swipeable strip, deep overlap, every corner index visible */
  .eg-book .eg-card-row-cards .eg-card { width: var(--eg-m-card-w); margin-left: var(--eg-m-ov-row); }
  .eg-book .eg-card-row-cards .eg-card:first-child { margin-left: 0; }

  /* C3 trick diagram: four cards must fit 360px */
  .eg-book .eg-trick .eg-played { margin: 0 var(--eg-sp-2); }
  .eg-book .eg-trick .eg-played .eg-card { width: var(--eg-m-card-w-md); }

  /* C4 seating diagram: full available width */
  .eg-book .eg-seating { width: 100%; }

  /* TB1, TB5, M3: stacked one-entry-per-card; cells carry data-eg-label */
  .eg-book .eg-table--main, .eg-book .eg-table--wide, .eg-book .eg-concordance,
  .eg-book .eg-table--main tbody, .eg-book .eg-table--wide tbody, .eg-book .eg-concordance tbody { display: block; width: 100%; }
  .eg-book .eg-table--main thead, .eg-book .eg-table--wide thead, .eg-book .eg-concordance thead { display: none; }
  .eg-book .eg-table--main tr, .eg-book .eg-table--wide tr, .eg-book .eg-concordance tr {
    display: block;
    background: var(--eg-paper-2);
    border: var(--eg-w-hair) solid var(--eg-ink-4);
    margin: 0 0 var(--eg-sp-3);
  }
  .eg-book .eg-table--main td, .eg-book .eg-table--wide td, .eg-book .eg-concordance td {
    display: block;
    text-align: left;
    border-bottom: none;
    padding: 1pt var(--eg-sp-4);
    font-size: var(--eg-fs-small);
    line-height: var(--eg-lh-small);
  }
  .eg-book .eg-table--main tr:last-child td, .eg-book .eg-table--wide tr:last-child td, .eg-book .eg-concordance tr:last-child td { border-bottom: none; }
  .eg-book .eg-table--main td::before, .eg-book .eg-table--wide td::before, .eg-book .eg-concordance td::before {
    content: attr(data-eg-label);
    display: inline-block;
    min-width: 34%;
    padding-right: var(--eg-sp-3);
    font-family: var(--eg-sans);
    font-size: var(--eg-fs-tiny);
    font-weight: 600;
    letter-spacing: var(--eg-track-caps);
    text-transform: uppercase;
    color: var(--eg-ink-3);
  }
  .eg-book .eg-table--main td:first-child, .eg-book .eg-table--wide td:first-child, .eg-book .eg-concordance td:first-child {
    font-size: var(--eg-fs-body);
    padding-top: var(--eg-sp-3);
    padding-bottom: var(--eg-sp-2);
    margin-bottom: var(--eg-sp-1);
    border-bottom: var(--eg-w-hair) solid var(--eg-rule);
  }
  .eg-book .eg-table--main td:first-child::before, .eg-book .eg-table--wide td:first-child::before, .eg-book .eg-concordance td:first-child::before { display: none; }
  .eg-book .eg-table--main td:last-child, .eg-book .eg-table--wide td:last-child, .eg-book .eg-concordance td:last-child { padding-bottom: var(--eg-sp-3); }
}

@container eg-web (max-width: 480px) {
  .eg-book .eg-pointer-panel, .eg-book .eg-pointer-cell, .eg-book .eg-pointer-side { display: block; width: auto; }
  .eg-book .eg-pointer-card { margin: 0 auto var(--eg-sp-4); }
  .eg-book .eg-pointer-side { padding-left: 0; }
}

/* ============ Score-sheet brief blocks (2026-07-19): cp block + VP sheets ============ */

/* Card Points block: group-counting figure, tally strip, calculator QR */
.eg-book .eg-cp {
  border: var(--eg-w-ink) solid var(--eg-ink);
  background: var(--eg-paper);
  padding: var(--eg-sp-5);
  margin: var(--eg-sp-5) 0;
}
.eg-book .eg-cp-title {
  margin: 0 0 var(--eg-sp-3);
  font-family: var(--eg-sans);
  font-size: var(--eg-fs-caption);
  font-weight: 600;
  letter-spacing: var(--eg-track-caps);
  text-transform: uppercase;
  color: var(--eg-red);
}
.eg-book .eg-cp-cols { display: table; width: 100%; }
.eg-book .eg-cp-main { display: table-cell; vertical-align: top; }
.eg-book .eg-cp-aside { display: table-cell; width: 80pt; vertical-align: top; padding-left: var(--eg-sp-5); text-align: center; }
.eg-book .eg-cp-group { margin: 0 0 var(--eg-sp-3); }
.eg-book .eg-cp-group .eg-card { width: 34pt; margin-left: -22pt; }
.eg-book .eg-cp-group .eg-card:first-child { margin-left: 0; }
.eg-book .eg-cp-tally { width: 100%; border-collapse: collapse; }
.eg-book .eg-cp-tally td {
  border-bottom: var(--eg-w-hair) solid var(--eg-rule);
  font-size: var(--eg-fs-small);
  line-height: var(--eg-lh-small);
  padding: 2pt 4pt;
  text-align: left;
}
.eg-book .eg-cp-tally .eg-cp-x { width: 44pt; text-align: center; font-family: var(--eg-sans); font-size: var(--eg-fs-caption); color: var(--eg-ink-3); }
.eg-book .eg-cp-tally .eg-cp-val { width: 44pt; text-align: center; }
.eg-book .eg-cp-tally .eg-cp-sum td { border-top: var(--eg-w-ink) solid var(--eg-ink); border-bottom: none; font-weight: 600; padding-top: 3pt; }
.eg-book .eg-cp-qr { width: 57pt; height: 57pt; border: var(--eg-w-hair) solid var(--eg-ink-4); background: var(--eg-card-white); }
.eg-book .eg-cp-qr-label {
  margin: var(--eg-sp-2) 0 0;
  font-family: var(--eg-sans);
  font-size: var(--eg-fs-tiny);
  font-weight: 600;
  letter-spacing: var(--eg-track-caps);
  text-transform: uppercase;
  color: var(--eg-ink-3);
}
.eg-book .eg-cp-foot { margin: var(--eg-sp-3) 0 0; font-size: var(--eg-fs-caption); font-family: var(--eg-sans); color: var(--eg-ink-3); }

/* VP sheets, shared additions */
.eg-book .eg-vp-date {
  float: right;
  font-family: var(--eg-sans);
  font-size: var(--eg-fs-caption);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--eg-ink-3);
  padding-top: 3pt;
}
.eg-book .eg-vp-date .eg-write { min-width: 54pt; }
.eg-book .eg-sheet-foot { margin: var(--eg-sp-3) 0 0; font-size: var(--eg-fs-caption); font-family: var(--eg-sans); color: var(--eg-ink-3); }
/* pro pair: round VP | running total (total tinted sand; red wash stays the bonus channel) */
.eg-book .eg-sheet-table .eg-ss-total { border-left: none; background: var(--eg-paper-2); }
.eg-book .eg-dapper {
  width: 14pt;
  font-family: var(--eg-sans);
  font-size: var(--eg-fs-tiny);
  color: var(--eg-ink-3);
  background: var(--eg-paper-2);
}

/* Beginner VP sheet: declaration row + labeled result rows per round */
.eg-book .eg-sheet-table td.eg-beg-lbl {
  width: 66pt;
  text-align: left;
  padding-left: 4pt;
  font-family: var(--eg-sans);
  font-size: var(--eg-fs-tiny);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--eg-ink-3);
  background: var(--eg-paper-2);
}
.eg-book .eg-beg-declrow td {
  text-align: left;
  background: var(--eg-paper);
  border-top: var(--eg-w-ink) solid var(--eg-ink);
  padding: 3pt 4pt;
  font-size: var(--eg-fs-small);
  height: auto;
  white-space: nowrap;
  overflow: hidden;
}
/* the blanks take every point of free width: sheets are for writing */
.eg-book .eg-beg-declrow .eg-write { width: 9%; min-width: 0; }
.eg-book .eg-beg-declrow .eg-write--wide { width: 13.5%; min-width: 0; }
.eg-book .eg-beg-declrow .eg-write--tiny { width: 4%; min-width: 0; }
.eg-book .eg-sheet-table td.eg-beg-rnum {
  text-align: center;
  vertical-align: middle;
  background: var(--eg-paper-2);
  border-top: var(--eg-w-ink) solid var(--eg-ink);
  font-family: var(--eg-display);
  font-weight: 700;
  font-size: 11pt;
  color: var(--eg-red);
}
.eg-book .eg-sheet-table td.eg-beg-declcell {
  text-align: left;
  background: var(--eg-paper);
  border-top: var(--eg-w-ink) solid var(--eg-ink);
  padding: 4pt 6pt;
  font-size: var(--eg-fs-small);
  line-height: 1.9;
  height: auto;
}
.eg-book .eg-write--decl { min-width: 54pt; }
.eg-book .eg-write--declwide { min-width: 96pt; }
.eg-book .eg-write--wide { min-width: 78pt; }
.eg-book .eg-write--tiny { min-width: 20pt; }
/* the running total is the number that matters: shaded and bold */
.eg-book .eg-beg-run td { background: var(--eg-paper-3); font-weight: 600; height: 18pt; }
.eg-book .eg-beg-run .eg-beg-lbl { background: var(--eg-paper-3); color: var(--eg-ink); font-weight: 600; }

/* every VP sheet carries the two pointer sentences (numbers are slots) */
.eg-book .eg-sheet-links {
  margin: var(--eg-sp-3) 0 0;
  font-size: var(--eg-fs-small);
  font-style: italic;
  color: var(--eg-ink-2);
}
.eg-book .eg-sheet-links strong { font-weight: 600; font-style: normal; }

/* ============ Counting guides (locked from the Score Sheet Lab, 2026-07-19) ============ */

.eg-book .eg-guide {
  border: var(--eg-w-ink) solid var(--eg-ink);
  background: var(--eg-paper);
  padding: var(--eg-sp-5);
  margin: var(--eg-sp-5) 0;
}
.eg-book .eg-guide-cols { display: table; width: 100%; }
.eg-book .eg-guide-main { display: table-cell; vertical-align: top; }
.eg-book .eg-guide-aside { display: table-cell; width: 96pt; vertical-align: middle; text-align: center; padding-left: var(--eg-sp-5); }
.eg-book .eg-guide-step { margin: var(--eg-sp-3) 0 var(--eg-sp-1); font-size: var(--eg-fs-body); }
.eg-book .eg-guide-stepnum { font-family: var(--eg-display); font-weight: 700; font-size: 12pt; color: var(--eg-red); margin-right: 4pt; }
.eg-book .eg-guide-arrow { color: var(--eg-ink-4); margin: 0 2pt; }
.eg-book .eg-guide-op { font-family: var(--eg-sans); font-size: var(--eg-fs-tiny); letter-spacing: 0.04em; text-transform: uppercase; color: var(--eg-ink-3); }
.eg-book .eg-guide-nowrap { white-space: nowrap; }
.eg-book .eg-guide-eg { margin: 1pt 0 0 15pt; font-style: italic; color: var(--eg-ink-2); font-size: var(--eg-fs-caption); }
.eg-book .eg-guide-cp { font-family: var(--eg-sans); font-weight: 600; font-size: var(--eg-fs-caption); letter-spacing: 0.08em; text-transform: uppercase; color: var(--eg-red); }
.eg-book .eg-guide-tally { width: 92%; margin: 0 auto; border-collapse: collapse; }
.eg-book .eg-guide-tally td { border: none; padding: 4pt 3pt; font-size: var(--eg-fs-small); vertical-align: baseline; text-align: left; white-space: nowrap; }
.eg-book .eg-guide-tally .eg-guide-x { width: 54pt; text-align: center; font-family: var(--eg-sans); font-size: var(--eg-fs-tiny); color: var(--eg-ink-3); }
.eg-book .eg-guide-tally .eg-guide-val { width: 38pt; text-align: center; }
.eg-book .eg-guide-tally .eg-guide-egc { width: 72pt; font-style: italic; color: var(--eg-ink-2); font-size: var(--eg-fs-caption); }
/* the calculator rides its own mini pointer card */
.eg-book .eg-guide-card {
  position: relative;
  width: 82pt;
  height: 128pt;
  box-sizing: border-box;
  margin: var(--eg-sp-2) auto 0;
  background: var(--eg-card-white);
  border: var(--eg-card-edge);
  border-radius: 7pt;
  padding: 22pt 5pt 14pt;
  text-align: center;
}
.eg-book .eg-guide-card .eg-pointer-num { font-size: 14pt; top: 3pt; left: 6pt; }
.eg-book .eg-guide-card .eg-pointer-roman { font-size: 9pt; top: 6pt; right: 6pt; }
.eg-book .eg-guide-card .eg-pointer-qr { width: 52pt; height: auto; display: inline-block; }
.eg-book .eg-guide-card-sell { margin: 5pt 1pt 0; font-style: italic; font-size: 6.5pt; line-height: 1.3; color: var(--eg-ink-2); }
.eg-book .eg-guide-card-site {
  position: absolute; bottom: 5pt; left: 0; width: 100%; margin: 0; text-align: center;
  font-family: var(--eg-sans); font-size: 5.5pt; font-weight: 600;
  letter-spacing: 0.1em; text-indent: 0.1em; text-transform: uppercase; color: var(--eg-ink-3);
}


/* ============ Strawman split page (restored 2026-07-19 from lab screenshots) ============
   One A5 page: slim VP grid left, the vertical tally count + calculator card right. */
.eg-book .eg-ssp { display: table; width: 100%; }
.eg-book .eg-ssp-grid { display: table-cell; width: 54%; vertical-align: top; padding-right: var(--eg-sp-5); }
.eg-book .eg-ssp-side { display: table-cell; vertical-align: top; padding-left: var(--eg-sp-3); }
.eg-book .eg-ssp-cap {
  margin: 0 0 var(--eg-sp-3);
  font-family: var(--eg-sans);
  font-size: var(--eg-fs-tiny);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--eg-red);
}
.eg-book .eg-ssp-line {
  margin: 0 0 var(--eg-sp-3);
  font-size: var(--eg-fs-small);
  line-height: 1.6;
}
.eg-book .eg-ssp-line .eg-ssp-write { float: right; min-width: 38pt; }
.eg-book .eg-ssp-line--sum { font-weight: 600; }
.eg-book .eg-ssp-card { margin: var(--eg-sp-5) auto 0; }


/* ================================================================
   WEB LAYER  (website session v1, 2026-07-19)
   Scoped under .eg-web, screen-only by construction: WeasyPrint
   renders the book inside .eg-book, which never carries .eg-web, so
   nothing here can reach the printed page. Mobile-first. Two
   container breakpoints, restated from tokens.css because a query
   cannot read var():
       640px  == --eg-bp-sm       1024px == --eg-bp-lg
   .eg-web is already the query container (container-type declared in
   the screen layer above). Reuses the shared palette, families, dots
   and card units. No JavaScript this round: interactive STATE is the
   theme's job; blocks ship the resting look plus one hover + focus.
   ================================================================ */

/* ---------- shared web primitives ---------- */
.eg-web, .eg-web *, .eg-web *::before, .eg-web *::after { box-sizing: border-box; }
.eg-web { color: var(--eg-ink); font-family: var(--eg-serif); }
.eg-web a { color: var(--eg-link); text-decoration: underline; text-decoration-color: var(--eg-link-underline); text-underline-offset: var(--eg-link-offset); }
.eg-web a:hover { color: var(--eg-link-hover); text-decoration-color: currentColor; }
.eg-web :focus-visible { outline: var(--eg-focus-w) solid var(--eg-focus-ring); outline-offset: var(--eg-focus-offset); }
.eg-web img { max-width: 100%; }

.eg-web .eg-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--eg-control-h); padding: 0 var(--eg-w-sp-5);
  font-family: var(--eg-sans); font-size: var(--eg-w-fs-label); font-weight: 600;
  letter-spacing: var(--eg-track-caps); text-transform: uppercase; text-decoration: none;
  color: var(--eg-btn-fg); background: var(--eg-btn-bg);
  border: 1.5px solid transparent; border-radius: var(--eg-btn-radius); cursor: pointer;
}
.eg-web .eg-btn:hover { background: var(--eg-btn-bg-hover); color: var(--eg-btn-fg); }
.eg-web .eg-btn--ghost { color: var(--eg-btn2-fg); background: var(--eg-btn2-bg); border-color: var(--eg-btn2-border); }
.eg-web .eg-btn--ghost:hover { color: var(--eg-btn2-fg); background: var(--eg-paper-2); }

.eg-web .eg-input {
  width: 100%; min-height: var(--eg-control-h); padding: 0 var(--eg-input-px);
  font-family: var(--eg-sans); font-size: var(--eg-w-fs-body);
  color: var(--eg-input-fg); background: var(--eg-input-bg);
  border: 1.5px solid var(--eg-input-border); border-radius: var(--eg-input-radius);
}
.eg-web .eg-input::placeholder { color: var(--eg-ink-3); }
.eg-web .eg-input:focus-visible { border-color: var(--eg-input-border-focus); outline-offset: 0; }

.eg-web .eg-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--eg-red); margin-left: 3px; vertical-align: baseline; }
.eg-web .eg-dot--off { background: transparent; box-shadow: inset 0 0 0 1.2px var(--eg-ink-4); }

.eg-web .eg-card {
  display: inline-block; width: var(--eg-w-card); height: auto; vertical-align: top;
  background: var(--eg-card-white); border: var(--eg-card-edge); border-radius: var(--eg-w-radius);
  box-shadow: 0 12px 28px -16px rgba(20,17,15,0.35), 0 2px 6px -2px rgba(20,17,15,0.10);
}
.eg-web .eg-card--sm { width: var(--eg-w-card-sm); }

.eg-web .eg-eyebrow { 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-red-deep); }

/* ================= N1  Header / primary navigation ================= */
.eg-web .eg-header { background: var(--eg-paper); border-bottom: 1px solid var(--eg-ink-4); }
.eg-web .eg-header-inner {
  max-width: var(--eg-w-page-max); margin: 0 auto;
  min-height: var(--eg-w-header-h); padding: 0 var(--eg-w-sp-4);
  display: flex; align-items: center; justify-content: space-between; gap: var(--eg-w-sp-4);
}
.eg-web .eg-logo { display: inline-flex; align-items: center; gap: var(--eg-w-sp-2); text-decoration: none; }
.eg-web .eg-logo:hover { text-decoration: none; }
.eg-web .eg-logo-pip { width: 18px; height: 18px; }
.eg-web .eg-logo-text { font-family: var(--eg-display); font-weight: 700; font-size: var(--eg-w-fs-h3); color: var(--eg-ink); letter-spacing: 0.01em; }
.eg-web .eg-nav { display: none; }
.eg-web .eg-nav-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: var(--eg-w-sp-5); }
.eg-web .eg-nav-item a {
  display: inline-block; padding: var(--eg-w-sp-2) 0;
  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-2);
  text-decoration: none; border-bottom: 2px solid transparent;
}
.eg-web .eg-nav-item a:hover { color: var(--eg-red-deep); }
.eg-web .eg-nav-item--active a { color: var(--eg-red-deep); border-bottom-color: var(--eg-red); }
.eg-web .eg-menu-btn {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
  width: var(--eg-control-h); height: var(--eg-control-h); padding: 12px;
  background: transparent; border: 1px solid var(--eg-ink-4); border-radius: var(--eg-w-radius); cursor: pointer;
}
.eg-web .eg-menu-btn span { display: block; height: 2px; background: var(--eg-ink); border-radius: 1px; }

/* N1 mobile panel (opened-menu variant, its own template) */
.eg-web .eg-navpanel { background: var(--eg-paper); border-bottom: 1px solid var(--eg-ink-4); }
.eg-web .eg-navpanel-list { list-style: none; margin: 0 auto; padding: var(--eg-w-sp-2) 0; max-width: var(--eg-w-page-max); }
.eg-web .eg-navpanel-item a {
  display: block; padding: var(--eg-w-sp-3) var(--eg-w-sp-4);
  font-family: var(--eg-sans); font-size: var(--eg-w-fs-body); font-weight: 600;
  color: var(--eg-ink); text-decoration: none; border-left: 3px solid transparent;
}
.eg-web .eg-navpanel-item a:hover { background: var(--eg-paper-2); }
.eg-web .eg-navpanel-item--active a { color: var(--eg-red-deep); border-left-color: var(--eg-red); background: var(--eg-red-wash); }

@container eg-web (min-width: 640px) {   /* mirrors --eg-bp-sm */
  .eg-web .eg-header-inner { padding: 0 var(--eg-w-sp-5); }
  .eg-web .eg-nav { display: block; }
  .eg-web .eg-menu-btn { display: none; }
}

/* ================= H1  Hero (front page) ================= */
.eg-web .eg-hero { background: var(--eg-paper); }
.eg-web .eg-hero-inner {
  max-width: var(--eg-w-page-max); margin: 0 auto;
  padding: var(--eg-w-sp-7) var(--eg-w-sp-4);
  display: flex; flex-direction: column; gap: var(--eg-w-sp-6);
}
.eg-web .eg-hero-title { margin: 0 0 var(--eg-w-sp-4); font-family: var(--eg-display); font-weight: 800; font-size: var(--eg-w-fs-display); line-height: var(--eg-w-lh-display); color: var(--eg-ink); text-wrap: balance; }
.eg-web .eg-hero-sub { margin: 0; font-family: var(--eg-serif); font-size: var(--eg-w-fs-lead); line-height: var(--eg-w-lh-lead); color: var(--eg-ink-2); max-width: 46ch; text-wrap: pretty; }
.eg-web .eg-hero-ctas { display: flex; flex-direction: column; align-items: stretch; gap: var(--eg-w-sp-3); margin-top: var(--eg-w-sp-5); }
.eg-web .eg-hero-ctas .eg-btn { width: 100%; min-width: 13rem; }
.eg-web .eg-hero-art { align-self: center; }
.eg-web .eg-hero-fan { display: flex; justify-content: center; padding-top: var(--eg-w-sp-2); }
.eg-web .eg-hero-fan .eg-card { margin-left: var(--eg-w-ov-hand); transform: rotate(0deg); }
.eg-web .eg-hero-fan .eg-card:first-child { margin-left: 0; }

@container eg-web (min-width: 640px) {   /* mirrors --eg-bp-sm */
  .eg-web .eg-hero-inner { padding: var(--eg-w-sp-8) var(--eg-w-sp-5); }
  .eg-web .eg-hero-ctas { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .eg-web .eg-hero-ctas .eg-btn { width: auto; }
}
@container eg-web (min-width: 1024px) {  /* mirrors --eg-bp-lg */
  .eg-web .eg-hero-inner { flex-direction: row; align-items: center; gap: var(--eg-w-sp-8); }
  .eg-web .eg-hero-text { flex: 1 1 auto; }
  .eg-web .eg-hero-art { flex: 0 0 auto; }
  .eg-web .eg-hero-title { font-size: var(--eg-w-fs-display-lg); }
}

/* ================= G8  Email-capture CTA ================= */
.eg-web .eg-ecta { background: var(--eg-paper-2); border: 1px solid var(--eg-ink-4); border-radius: var(--eg-w-radius-card); padding: var(--eg-w-sp-6) var(--eg-w-sp-5); }
.eg-web .eg-ecta-inner { max-width: 34rem; margin: 0 auto; text-align: center; }
.eg-web .eg-ecta-catch { margin: 0 0 var(--eg-w-sp-2); font-family: var(--eg-display); font-weight: 700; font-size: var(--eg-w-fs-h2); line-height: var(--eg-w-lh-h2); color: var(--eg-ink); }
.eg-web .eg-ecta-sub { margin: 0 0 var(--eg-w-sp-5); 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-ecta-form { display: flex; flex-direction: column; gap: var(--eg-w-sp-3); text-align: left; }
.eg-web .eg-ecta-field { display: flex; flex-direction: column; gap: var(--eg-w-sp-2); }
.eg-web .eg-ecta-label { 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-2); }
.eg-web .eg-ecta-privacy { margin: var(--eg-w-sp-3) 0 0; font-family: var(--eg-sans); font-size: var(--eg-w-fs-tiny); line-height: 1.45; color: var(--eg-ink-3); }
.eg-web .eg-ecta-privacy a { color: var(--eg-ink-3); }
.eg-web .eg-status { margin: var(--eg-w-sp-3) 0 0; font-family: var(--eg-sans); font-size: var(--eg-w-fs-small); font-weight: 600; }
.eg-web .eg-status--ok { color: var(--eg-status-ok); }
.eg-web .eg-status--error { color: var(--eg-status-error); }

@container eg-web (min-width: 640px) {   /* mirrors --eg-bp-sm */
  .eg-web .eg-ecta { padding: var(--eg-w-sp-8) var(--eg-w-sp-6); }
  .eg-web .eg-ecta-form { flex-direction: row; align-items: flex-end; }
  .eg-web .eg-ecta-field { flex: 1 1 auto; }
  .eg-web .eg-ecta-form .eg-btn { flex: 0 0 auto; }
  .eg-web .eg-ecta-privacy { text-align: center; }
}

/* ================= K3  Puzzle frame (screen) ================= */
.eg-web .eg-wpuzzle { background: var(--eg-card-white); border: 1px solid var(--eg-ink-4); border-radius: var(--eg-w-radius-card); overflow: hidden; max-width: 40rem; }
.eg-web .eg-wpuzzle-bar { display: flex; align-items: center; gap: var(--eg-w-sp-3); padding: var(--eg-w-sp-3) var(--eg-w-sp-5); background: var(--eg-red-deep); color: #fff; }
.eg-web .eg-wpuzzle-id { font-family: var(--eg-sans); font-size: var(--eg-w-fs-label); font-weight: 700; letter-spacing: var(--eg-track-caps); text-transform: uppercase; }
.eg-web .eg-wpuzzle-diff { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; }
.eg-web .eg-wpuzzle-diff .eg-dot { background: #fff; margin-left: 2px; }
.eg-web .eg-wpuzzle-diff .eg-dot--off { background: transparent; box-shadow: inset 0 0 0 1.2px rgba(255,255,255,0.55); }
.eg-web .eg-wpuzzle-body { padding: var(--eg-w-sp-5); }
.eg-web .eg-wpuzzle-q { margin: 0 0 var(--eg-w-sp-4); font-family: var(--eg-serif); font-size: var(--eg-w-fs-lead); line-height: var(--eg-w-lh-lead); color: var(--eg-ink); }
.eg-web .eg-wpuzzle-hint { display: flex; gap: var(--eg-w-sp-2); align-items: baseline; margin: 0 0 var(--eg-w-sp-5); padding: var(--eg-w-sp-3) var(--eg-w-sp-4); background: var(--eg-red-wash); border-left: 3px solid var(--eg-red); border-radius: 0 var(--eg-w-radius) var(--eg-w-radius) 0; }
.eg-web .eg-wpuzzle-hint-label { 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); flex: 0 0 auto; }
.eg-web .eg-wpuzzle-hint-text { font-family: var(--eg-serif); font-size: var(--eg-w-fs-small); line-height: var(--eg-w-lh-small); color: var(--eg-ink-2); }
.eg-web .eg-wpuzzle-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--eg-w-sp-3); }
/* answer: resting state hidden; theme toggles [hidden]. Preview shows revealed. */
.eg-web .eg-wpuzzle-answer { margin: var(--eg-w-sp-2) 0 0; padding: var(--eg-w-sp-4) var(--eg-w-sp-5); background: var(--eg-paper-2); border: 1px solid var(--eg-ink-4); border-radius: var(--eg-w-radius); }
.eg-web .eg-wpuzzle-answer[hidden] { display: none; }
.eg-web .eg-wpuzzle-answer-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-status-ok); }
.eg-web .eg-wpuzzle-answer-text { 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); }
.eg-web .eg-wpuzzle-fb { margin: var(--eg-w-sp-3) 0 0; font-family: var(--eg-sans); font-size: var(--eg-w-fs-small); font-weight: 600; }
.eg-web .eg-wpuzzle-fb--ok { color: var(--eg-status-ok); }
.eg-web .eg-wpuzzle-fb--no { color: var(--eg-status-error); }

.eg-web .eg-wpuzzle-fb--ok { color: var(--eg-status-ok); }

/* ================= N2  Footer ================= */
.eg-web .eg-footer { background: var(--eg-ink); color: var(--eg-paper); }
.eg-web .eg-footer a { color: var(--eg-paper); text-decoration-color: rgba(251,247,241,0.4); }
.eg-web .eg-footer a:hover { color: #fff; text-decoration-color: currentColor; }
.eg-web .eg-footer-inner { max-width: var(--eg-w-page-max); margin: 0 auto; padding: var(--eg-w-sp-8) var(--eg-w-sp-4) var(--eg-w-sp-6); display: flex; flex-direction: column; gap: var(--eg-w-sp-7); }
.eg-web .eg-footer-tagline { margin: 0; font-family: var(--eg-display); font-weight: 700; font-size: var(--eg-w-fs-h3); line-height: 1.3; color: var(--eg-paper); max-width: 26ch; }
.eg-web .eg-footer-groups { display: grid; grid-template-columns: 1fr; gap: var(--eg-w-sp-6); }
.eg-web .eg-footer-group h3 { margin: 0 0 var(--eg-w-sp-3); 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-stone); }
.eg-web .eg-footer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--eg-w-sp-2); }
.eg-web .eg-footer-list a { font-family: var(--eg-serif); font-size: var(--eg-w-fs-body); }
.eg-web .eg-footer-legal { margin: 0; padding-top: var(--eg-w-sp-5); border-top: 1px solid rgba(251,247,241,0.15); font-family: var(--eg-sans); font-size: var(--eg-w-fs-small); color: var(--eg-stone); }
@container eg-web (min-width: 640px) {
  .eg-web .eg-footer-inner { padding: var(--eg-w-sp-8) var(--eg-w-sp-5) var(--eg-w-sp-6); flex-direction: row; flex-wrap: wrap; justify-content: space-between; }
  .eg-web .eg-footer-tagline { flex: 1 1 16rem; }
  .eg-web .eg-footer-groups { grid-template-columns: repeat(2, minmax(8rem, auto)); gap: var(--eg-w-sp-8); flex: 0 0 auto; }
  .eg-web .eg-footer-legal { flex: 1 1 100%; }
}

/* ================= N3  Breadcrumb ================= */
.eg-web .eg-crumb { max-width: var(--eg-w-page-max); margin: 0 auto; padding: var(--eg-w-sp-4); }
.eg-web .eg-crumb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--eg-w-sp-2); font-family: var(--eg-sans); font-size: var(--eg-w-fs-small); }
.eg-web .eg-crumb-list li { display: inline-flex; align-items: center; gap: var(--eg-w-sp-2); }
.eg-web .eg-crumb-list li + li::before { content: "\2192"; color: var(--eg-ink-3); }
.eg-web .eg-crumb-list a { color: var(--eg-ink-2); text-decoration: none; }
.eg-web .eg-crumb-list a:hover { color: var(--eg-red-deep); text-decoration: underline; }
.eg-web .eg-crumb-list [aria-current="page"] { color: var(--eg-ink); font-weight: 600; }

/* ================= N4  Skip link ================= */
.eg-web .eg-skip { position: absolute; left: var(--eg-w-sp-3); top: -100px; z-index: 100; padding: var(--eg-w-sp-3) var(--eg-w-sp-5); background: var(--eg-ink); color: var(--eg-paper); font-family: var(--eg-sans); font-size: var(--eg-w-fs-body); font-weight: 600; text-decoration: none; border-radius: var(--eg-w-radius); }
.eg-web .eg-skip:focus { top: var(--eg-w-sp-3); color: var(--eg-paper); }

/* ================= N5  Companion bar ================= */
.eg-web .eg-companion { background: var(--eg-red-deep); color: #fff; }
.eg-web .eg-companion-inner { max-width: var(--eg-w-page-max); margin: 0 auto; padding: var(--eg-w-sp-3) var(--eg-w-sp-4); display: flex; align-items: center; flex-wrap: wrap; gap: var(--eg-w-sp-3); }
.eg-web .eg-companion-text { flex: 1 1 12rem; margin: 0; font-family: var(--eg-serif); font-size: var(--eg-w-fs-small); line-height: 1.35; }
.eg-web .eg-companion-nav { display: inline-flex; align-items: center; gap: var(--eg-w-sp-2); flex: 0 0 auto; }
.eg-web .eg-companion-link { display: inline-flex; align-items: center; gap: var(--eg-w-sp-1); padding: var(--eg-w-sp-1) var(--eg-w-sp-3); 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: #fff; text-decoration: none; border: 1px solid rgba(255,255,255,0.4); border-radius: var(--eg-w-radius); }
.eg-web .eg-companion-link:hover { color: var(--eg-red-deep); background: #fff; }
.eg-web .eg-companion-close { flex: 0 0 auto; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; color: #fff; font-size: 20px; line-height: 1; cursor: pointer; border-radius: var(--eg-w-radius); }
.eg-web .eg-companion-close:hover { background: rgba(255,255,255,0.18); }

/* ================= H2  Pillar row ================= */
.eg-web .eg-pillars { max-width: var(--eg-w-page-max); margin: 0 auto; padding: var(--eg-w-sp-7) var(--eg-w-sp-4); display: grid; grid-template-columns: 1fr; gap: var(--eg-w-sp-6); }
.eg-web .eg-pillar-num { display: block; margin: 0 0 var(--eg-w-sp-2); font-family: var(--eg-display); font-weight: 700; font-size: var(--eg-w-fs-h1); color: var(--eg-red); line-height: 1; }
.eg-web .eg-pillar-title { margin: 0 0 var(--eg-w-sp-2); font-family: var(--eg-display); font-weight: 700; font-size: var(--eg-w-fs-h3); color: var(--eg-ink); }
.eg-web .eg-pillar-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); }
@container eg-web (min-width: 640px) { .eg-web .eg-pillars { grid-template-columns: repeat(3, 1fr); gap: var(--eg-w-sp-7); padding: var(--eg-w-sp-8) var(--eg-w-sp-5); } }

/* ================= H3  Feature panel ================= */
.eg-web .eg-feature { background: var(--eg-paper-2); border-top: 3px solid var(--eg-red); }
.eg-web .eg-feature-inner { max-width: var(--eg-w-page-max); margin: 0 auto; padding: var(--eg-w-sp-7) var(--eg-w-sp-4); display: flex; flex-direction: column; gap: var(--eg-w-sp-5); }
.eg-web .eg-feature-art { align-self: flex-start; }
.eg-web .eg-feature-title { margin: 0 0 var(--eg-w-sp-3); font-family: var(--eg-display); font-weight: 800; font-size: var(--eg-w-fs-h1); line-height: var(--eg-w-lh-h1); color: var(--eg-ink); }
.eg-web .eg-feature-body { margin: 0 0 var(--eg-w-sp-5); font-family: var(--eg-serif); font-size: var(--eg-w-fs-lead); line-height: var(--eg-w-lh-lead); color: var(--eg-ink-2); max-width: 52ch; }
.eg-web .eg-feature-ctas { display: flex; flex-wrap: wrap; gap: var(--eg-w-sp-3); }
@container eg-web (min-width: 640px) { .eg-web .eg-feature-inner { padding: var(--eg-w-sp-8) var(--eg-w-sp-5); } }
@container eg-web (min-width: 1024px) {
  .eg-web .eg-feature-inner { flex-direction: row-reverse; align-items: center; gap: var(--eg-w-sp-8); }
  .eg-web .eg-feature-art { flex: 0 0 auto; align-self: center; }
  .eg-web .eg-feature-text { flex: 1 1 auto; }
}

/* ================= H4  Card (game / puzzle) + H5 list header + grid ================= */
.eg-web .eg-listhdr { max-width: var(--eg-w-page-max); margin: 0 auto; padding: var(--eg-w-sp-7) var(--eg-w-sp-4) var(--eg-w-sp-5); }
.eg-web .eg-listhdr-title { margin: 0 0 var(--eg-w-sp-3); font-family: var(--eg-display); font-weight: 800; font-size: var(--eg-w-fs-h1); line-height: var(--eg-w-lh-h1); color: var(--eg-ink); }
.eg-web .eg-listhdr-intro { margin: 0; font-family: var(--eg-serif); font-size: var(--eg-w-fs-lead); line-height: var(--eg-w-lh-lead); color: var(--eg-ink-2); max-width: 60ch; }
@container eg-web (min-width: 640px) { .eg-web .eg-listhdr { padding: var(--eg-w-sp-8) var(--eg-w-sp-5) var(--eg-w-sp-5); } }

.eg-web .eg-grid { max-width: var(--eg-w-page-max); margin: 0 auto; padding: 0 var(--eg-w-sp-4) var(--eg-w-sp-8); display: grid; grid-template-columns: 1fr; gap: var(--eg-w-gap-grid); }
@container eg-web (min-width: 640px) { .eg-web .eg-grid { grid-template-columns: repeat(2, 1fr); padding: 0 var(--eg-w-sp-5) var(--eg-w-sp-8); } }
@container eg-web (min-width: 1024px) { .eg-web .eg-grid { grid-template-columns: repeat(3, 1fr); } }

.eg-web .eg-gcard { display: flex; flex-direction: column; background: var(--eg-card-white); border: 1px solid var(--eg-ink-4); border-radius: var(--eg-w-radius-card); overflow: hidden; text-decoration: none; color: inherit; }
.eg-web .eg-gcard:hover { border-color: var(--eg-red); box-shadow: 0 12px 28px -18px rgba(20,17,15,0.4); }
.eg-web .eg-gcard:hover .eg-gcard-title { color: var(--eg-red-deep); }
.eg-web .eg-gcard-media { display: flex; align-items: center; justify-content: center; gap: var(--eg-w-ov-hand); padding: var(--eg-w-sp-5); background: var(--eg-paper-2); border-bottom: 1px solid var(--eg-ink-4); min-height: 132px; }
.eg-web .eg-gcard-media .eg-card { margin: 0; }
.eg-web .eg-gcard-media .eg-card + .eg-card { margin-left: var(--eg-w-ov-hand); }
.eg-web .eg-gcard-body { display: flex; flex-direction: column; gap: var(--eg-w-sp-2); padding: var(--eg-w-sp-5); flex: 1 1 auto; }
.eg-web .eg-gcard-tag { 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-stone); }
.eg-web .eg-gcard-title { margin: 0; font-family: var(--eg-display); font-weight: 700; font-size: var(--eg-w-fs-h2); line-height: var(--eg-w-lh-h2); color: var(--eg-ink); }
.eg-web .eg-gcard-desc { 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 .eg-gcard-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--eg-w-sp-4); margin-top: auto; padding-top: var(--eg-w-sp-3); border-top: 1px solid var(--eg-ink-5, var(--eg-ink-4)); }
.eg-web .eg-meta-item { display: inline-flex; align-items: center; gap: var(--eg-w-sp-2); font-family: var(--eg-sans); font-size: var(--eg-w-fs-small); color: var(--eg-ink-2); }
.eg-web .eg-meta-label { font-size: var(--eg-w-fs-label); font-weight: 600; letter-spacing: var(--eg-track-caps); text-transform: uppercase; color: var(--eg-ink-3); }
.eg-web .eg-meta-diff { display: inline-flex; align-items: center; }

/* ================= H6  Rules contract section ================= */
.eg-web .eg-rules { max-width: var(--eg-w-read-max); margin: 0 auto; padding: var(--eg-w-sp-6) var(--eg-w-sp-4); scroll-margin-top: var(--eg-w-sp-6); }
.eg-web .eg-rules-heading { margin: 0 0 var(--eg-w-sp-4); font-family: var(--eg-display); font-weight: 700; font-size: var(--eg-w-fs-h1); line-height: var(--eg-w-lh-h1); color: var(--eg-ink); }
.eg-web .eg-rules-heading .eg-rules-anchor { margin-left: var(--eg-w-sp-2); font-family: var(--eg-sans); font-size: var(--eg-w-fs-body); font-weight: 400; color: var(--eg-ink-4); text-decoration: none; opacity: 0; }
.eg-web .eg-rules-heading:hover .eg-rules-anchor { opacity: 1; color: var(--eg-red); }
.eg-web .eg-rules-body { margin: 0 0 var(--eg-w-sp-5); font-family: var(--eg-serif); font-size: var(--eg-w-fs-body); line-height: var(--eg-w-lh-body); color: var(--eg-ink); }
.eg-web .eg-valuerow { display: flex; align-items: baseline; gap: var(--eg-w-sp-4); padding: var(--eg-w-sp-3) var(--eg-w-sp-4); background: var(--eg-paper-2); border-left: 3px solid var(--eg-gold); border-radius: 0 var(--eg-w-radius) var(--eg-w-radius) 0; }
.eg-web .eg-valuerow-label { flex: 1 1 auto; font-family: var(--eg-serif); font-size: var(--eg-w-fs-body); color: var(--eg-ink); }
.eg-web .eg-valuerow-value { flex: 0 0 auto; font-family: var(--eg-sans); font-size: var(--eg-w-fs-h3); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--eg-red-deep); }

/* ================= H7  Search ================= */
.eg-web .eg-search { max-width: var(--eg-w-read-max); margin: 0 auto; padding: var(--eg-w-sp-6) var(--eg-w-sp-4); }
.eg-web .eg-search-form { display: flex; gap: var(--eg-w-sp-2); margin: 0 0 var(--eg-w-sp-5); }
.eg-web .eg-search-form .eg-input { flex: 1 1 auto; }
.eg-web .eg-search-form .eg-btn { flex: 0 0 auto; }
.eg-web .eg-search-count { margin: 0 0 var(--eg-w-sp-4); font-family: var(--eg-sans); font-size: var(--eg-w-fs-small); color: var(--eg-ink-3); }
.eg-web .eg-search-results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.eg-web .eg-result { padding: var(--eg-w-sp-4) 0; border-top: 1px solid var(--eg-ink-4); }
.eg-web .eg-result:last-child { border-bottom: 1px solid var(--eg-ink-4); }
.eg-web .eg-result-kind { display: inline-block; margin: 0 0 var(--eg-w-sp-1); 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-stone); }
.eg-web .eg-result-title { margin: 0 0 var(--eg-w-sp-1); font-family: var(--eg-display); font-weight: 700; font-size: var(--eg-w-fs-h3); }
.eg-web .eg-result-title a { color: var(--eg-ink); text-decoration: none; }
.eg-web .eg-result-title a:hover { color: var(--eg-red-deep); text-decoration: underline; }
.eg-web .eg-result-snippet { margin: 0; font-family: var(--eg-serif); font-size: var(--eg-w-fs-small); line-height: var(--eg-w-lh-small); color: var(--eg-ink-2); }
.eg-web .eg-result mark { background: var(--eg-red-wash); color: inherit; padding: 0 2px; border-radius: 2px; }

/* ================= H8  Number-entry form ================= */
.eg-web .eg-numform { max-width: 26rem; margin: 0 auto; padding: var(--eg-w-sp-7) var(--eg-w-sp-4); text-align: center; }
.eg-web .eg-numform-label { display: block; margin: 0 0 var(--eg-w-sp-4); font-family: var(--eg-serif); font-size: var(--eg-w-fs-lead); line-height: var(--eg-w-lh-lead); color: var(--eg-ink); }
.eg-web .eg-numform-row { display: flex; gap: var(--eg-w-sp-2); justify-content: center; }
.eg-web .eg-numform-row .eg-input { flex: 1 1 auto; text-align: center; font-variant-numeric: tabular-nums; font-size: var(--eg-w-fs-h2); }
.eg-web .eg-numform-row .eg-btn { flex: 0 0 auto; }
.eg-web .eg-numform-miss { margin: var(--eg-w-sp-4) 0 0; font-family: var(--eg-sans); font-size: var(--eg-w-fs-small); font-weight: 600; color: var(--eg-status-error); }

/* ================= H9  Section heading (generic band divider) ================= */
.eg-web .eg-sectionhead { max-width: var(--eg-w-page-max); margin: 0 auto; padding: var(--eg-w-sp-7) var(--eg-w-sp-4) var(--eg-w-sp-4); }
.eg-web .eg-sectionhead-eyebrow { display: block; margin: 0 0 var(--eg-w-sp-2); 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-red-deep); }
.eg-web .eg-sectionhead-title { margin: 0; font-family: var(--eg-display); font-weight: 800; font-size: var(--eg-w-fs-h1); line-height: var(--eg-w-lh-h1); color: var(--eg-ink); }

/* ================= G  Blog family ================= */
/* G1  Post header */
.eg-web .eg-post { max-width: var(--eg-w-read-max); margin: 0 auto; padding: 0 var(--eg-w-sp-4); }
.eg-web .eg-post-header { padding: var(--eg-w-sp-7) 0 var(--eg-w-sp-5); }
.eg-web .eg-post-kicker { display: block; margin: 0 0 var(--eg-w-sp-3); 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-red-deep); }
.eg-web .eg-post-title { margin: 0 0 var(--eg-w-sp-4); font-family: var(--eg-display); font-weight: 800; font-size: var(--eg-w-fs-h1); line-height: var(--eg-w-lh-h1); color: var(--eg-ink); text-wrap: balance; }
.eg-web .eg-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--eg-w-sp-3); font-family: var(--eg-sans); font-size: var(--eg-w-fs-small); color: var(--eg-ink-3); }
.eg-web .eg-post-meta .eg-post-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--eg-ink-4); }
@container eg-web (min-width: 640px) { .eg-web .eg-post-title { font-size: var(--eg-w-fs-h1-lg); } }

/* G2  Prose body */
.eg-web .eg-prose { font-family: var(--eg-serif); font-size: var(--eg-w-fs-body); line-height: var(--eg-w-lh-body); color: var(--eg-ink); }
.eg-web .eg-prose > * + * { margin-top: var(--eg-w-sp-5); }
.eg-web .eg-prose p { margin: 0; }
.eg-web .eg-prose h2 { margin: var(--eg-w-sp-7) 0 0; font-family: var(--eg-display); font-weight: 700; font-size: var(--eg-w-fs-h2); line-height: var(--eg-w-lh-h2); color: var(--eg-ink); }
.eg-web .eg-prose h3 { margin: var(--eg-w-sp-6) 0 0; font-family: var(--eg-display); font-weight: 700; font-size: var(--eg-w-fs-h3); color: var(--eg-ink); }
.eg-web .eg-prose ul, .eg-web .eg-prose ol { margin: 0; padding-left: 1.4em; }
.eg-web .eg-prose li + li { margin-top: var(--eg-w-sp-2); }
.eg-web .eg-prose strong { font-weight: 700; }

/* G3  Pull quote */
.eg-web .eg-pullquote { margin: var(--eg-w-sp-6) 0; padding: 0 0 0 var(--eg-w-sp-5); border-left: 3px solid var(--eg-red); }
.eg-web .eg-pullquote p { margin: 0; font-family: var(--eg-display); font-style: italic; font-weight: 500; font-size: var(--eg-w-fs-h2); line-height: 1.3; color: var(--eg-ink); }
.eg-web .eg-pullquote cite { display: block; margin-top: var(--eg-w-sp-3); font-family: var(--eg-sans); font-style: normal; font-size: var(--eg-w-fs-small); color: var(--eg-ink-3); }

/* G4  Figure */
.eg-web .eg-webfigure { margin: var(--eg-w-sp-6) 0; }
.eg-web .eg-webfigure img { display: block; width: 100%; border-radius: var(--eg-w-radius-card); border: 1px solid var(--eg-ink-4); }
.eg-web .eg-webfigure figcaption { margin-top: var(--eg-w-sp-3); font-family: var(--eg-sans); font-size: var(--eg-w-fs-small); color: var(--eg-ink-3); text-align: center; }

/* G5  Callout */
.eg-web .eg-callout { margin: var(--eg-w-sp-6) 0; padding: var(--eg-w-sp-5); background: var(--eg-paper-2); border: 1px solid var(--eg-ink-4); border-radius: var(--eg-w-radius-card); }
.eg-web .eg-callout-label { display: block; 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); }
.eg-web .eg-callout p { 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); }

/* G6  Post card (blog hub) + G7 hub grid */
.eg-web .eg-postgrid { max-width: var(--eg-w-page-max); margin: 0 auto; padding: var(--eg-w-sp-5) var(--eg-w-sp-4) var(--eg-w-sp-8); display: grid; grid-template-columns: 1fr; gap: var(--eg-w-gap-grid); }
@container eg-web (min-width: 640px) { .eg-web .eg-postgrid { grid-template-columns: repeat(2, 1fr); padding: var(--eg-w-sp-5) var(--eg-w-sp-5) var(--eg-w-sp-8); } }
@container eg-web (min-width: 1024px) { .eg-web .eg-postgrid { grid-template-columns: repeat(3, 1fr); } }
.eg-web .eg-postcard { display: flex; flex-direction: column; gap: var(--eg-w-sp-2); padding: var(--eg-w-sp-5); background: var(--eg-card-white); border: 1px solid var(--eg-ink-4); border-radius: var(--eg-w-radius-card); text-decoration: none; color: inherit; }
.eg-web .eg-postcard:hover { border-color: var(--eg-red); box-shadow: 0 12px 28px -18px rgba(20,17,15,0.4); }
.eg-web .eg-postcard:hover .eg-postcard-title { color: var(--eg-red-deep); }
.eg-web .eg-postcard-kicker { 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-stone); }
.eg-web .eg-postcard-title { margin: 0; font-family: var(--eg-display); font-weight: 700; font-size: var(--eg-w-fs-h2); line-height: var(--eg-w-lh-h2); color: var(--eg-ink); }
.eg-web .eg-postcard-excerpt { 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 .eg-postcard-meta { margin-top: auto; padding-top: var(--eg-w-sp-3); font-family: var(--eg-sans); font-size: var(--eg-w-fs-small); color: var(--eg-ink-3); }

/* ================= K  Card-table family (screen) ================= */
/* K1  Hand */
.eg-web .eg-hand { display: flex; flex-wrap: wrap; align-items: flex-end; padding: var(--eg-w-sp-4) 0; }
.eg-web .eg-hand .eg-card { flex: 0 0 auto; margin-left: var(--eg-w-ov-hand); transition: transform 0.12s ease; }
.eg-web .eg-hand .eg-card:first-child { margin-left: 0; }
.eg-web .eg-hand .eg-card:hover { transform: translateY(-10px); position: relative; z-index: 2; }
/* below the small breakpoint a long hand becomes a native-scroll strip */
.eg-web .eg-hand--strip { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; padding-bottom: var(--eg-w-sp-3); }
.eg-web .eg-hand--strip .eg-card { scroll-snap-align: start; }
@container eg-web (min-width: 640px) { .eg-web .eg-hand--strip { flex-wrap: wrap; overflow: visible; } }

/* K2  Trick middle */
.eg-web .eg-trick { display: flex; flex-direction: column; align-items: center; gap: var(--eg-w-sp-4); padding: var(--eg-w-sp-5) 0; }
.eg-web .eg-trick-cards { display: grid; grid-template-columns: repeat(2, auto); gap: var(--eg-w-sp-4) var(--eg-w-sp-5); justify-content: center; align-items: start; }
@container eg-web (min-width: 640px) { .eg-web .eg-trick-cards { grid-template-columns: repeat(4, auto); } }
.eg-web .eg-play { display: flex; flex-direction: column; align-items: center; gap: var(--eg-w-sp-2); }
.eg-web .eg-play .eg-card { margin: 0; }
.eg-web .eg-play--winner .eg-card { outline: 3px solid var(--eg-gold); outline-offset: 2px; border-radius: var(--eg-w-radius); }
.eg-web .eg-play-seat { font-family: var(--eg-sans); font-size: var(--eg-w-fs-small); color: var(--eg-ink-2); }
.eg-web .eg-play-seat--lead { font-weight: 700; color: var(--eg-ink); }
.eg-web .eg-play-win { display: inline-flex; align-items: center; gap: var(--eg-w-sp-1); 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); }

/* K4  Pile + score pad */
.eg-web .eg-table2 { display: flex; flex-direction: column; gap: var(--eg-w-sp-5); }
@container eg-web (min-width: 640px) { .eg-web .eg-table2 { flex-direction: row; align-items: flex-start; gap: var(--eg-w-sp-7); } }
.eg-web .eg-pile { flex: 1 1 auto; }
.eg-web .eg-pile-label { margin: 0 0 var(--eg-w-sp-3); 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); }
.eg-web .eg-pile-cards { position: relative; display: flex; flex-wrap: wrap; }
.eg-web .eg-pile-cards .eg-card { margin: 0 -46px -8px 0; }
.eg-web .eg-pile-pulled { display: flex; gap: var(--eg-w-sp-2); margin: 0 0 var(--eg-w-sp-4); padding: var(--eg-w-sp-3); background: var(--eg-paper-2); border: 1px solid var(--eg-ink-4); border-radius: var(--eg-w-radius-card); }
.eg-web .eg-pile-pulled .eg-card { margin: 0; }
.eg-web .eg-pad { flex: 0 0 auto; min-width: 12rem; padding: var(--eg-w-sp-4) var(--eg-w-sp-5); background: var(--eg-card-white); border: 1px solid var(--eg-ink-4); border-radius: var(--eg-w-radius-card); }
.eg-web .eg-pad-label { margin: 0 0 var(--eg-w-sp-3); 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); }
.eg-web .eg-pad-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--eg-w-sp-2); }
.eg-web .eg-pad-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--eg-w-sp-4); font-family: var(--eg-sans); font-variant-numeric: tabular-nums; }
.eg-web .eg-pad-seat { font-size: var(--eg-w-fs-body); color: var(--eg-ink-2); }
.eg-web .eg-pad-score { font-size: var(--eg-w-fs-h3); font-weight: 700; color: var(--eg-ink); }
.eg-web .eg-pad-score--plus { color: var(--eg-status-ok); }
.eg-web .eg-pad-score--none { color: var(--eg-ink-4); }


/* ============ Strawman split — stacked VP grid + CPd rail (STRAW-A, locked 2026-07-20) ============
   Stacked channel: con over bon (half-height each), VP full-height beside. The pro grid uses the
   suit-red VP treatment (ss3--stacked); Strawman adds ss3--noaccent to swap red for a neutral,
   taller VP number with a bold ink box around each player unit (con/bon + VP). */
.eg-book .ss3--stacked td.eg-ss-chan { padding: 0; background: var(--eg-card-white); border-right: none; }
.eg-book .ss3--stacked .eg-chan { display: flex; flex-direction: column; height: 100%; min-height: 32pt; }
.eg-book .ss3--stacked .eg-chan > div { flex: 1; }
.eg-book .ss3--stacked .eg-chan-c { border-bottom: var(--eg-w-hair) solid var(--eg-rule); }
.eg-book .ss3--stacked td.eg-ss-run { background: var(--eg-red-wash); border-left: var(--eg-w-red) solid var(--eg-red); vertical-align: middle; text-align: center; }
.eg-book .ss3--stacked th.eg-ss-name { border-left: var(--eg-w-red) solid var(--eg-red); }
.eg-book .ss3--stacked td.eg-ss-runlbl { font-weight: 700; color: var(--eg-red); border-left: var(--eg-w-red) solid var(--eg-red); }
.eg-book .ss3--stacked td.eg-ss-substack { line-height: 1.15; border-right: none; }
.eg-book .ss3--stacked td.eg-ss-substack span { display: block; }
/* neutral VP total (no red), taller display number */
.eg-book .ss3--noaccent td.eg-ss-run { background: var(--eg-card-white); border-left: var(--eg-w-hair) solid var(--eg-ink-3); border-right: var(--eg-w-ink) solid var(--eg-ink); font-family: var(--eg-display); font-weight: 700; font-size: 15pt; color: var(--eg-ink); }
.eg-book .ss3--noaccent td.eg-ss-runlbl { color: var(--eg-ink); border-left: var(--eg-w-hair) solid var(--eg-ink-3); border-right: var(--eg-w-ink) solid var(--eg-ink); font-size: var(--eg-fs-small); letter-spacing: 0.1em; }
.eg-book .ss3--noaccent td.eg-ss-chan { background: var(--eg-paper-2); border-left: var(--eg-w-ink) solid var(--eg-ink); border-right: none; }
.eg-book .ss3--noaccent td.eg-ss-substack { border-left: var(--eg-w-ink) solid var(--eg-ink); border-right: none; }
/* player-name header field + bold box, table closed at top */
.eg-book .ss3--noaccent th.eg-ss-name { border-top: var(--eg-w-ink) solid var(--eg-ink); border-left: var(--eg-w-ink) solid var(--eg-ink); border-right: var(--eg-w-ink) solid var(--eg-ink); text-align: left; padding: 5pt 6pt 18pt; vertical-align: top; }
.eg-book .ss3--noaccent .eg-ss-player { display: block; font-family: var(--eg-sans); font-size: var(--eg-fs-tiny); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--eg-stone); }
/* clearer con | bon divider */
.eg-book .ss3--noaccent .eg-chan-c { border-bottom: var(--eg-w-hair) solid var(--eg-ink-3); }
.eg-book .ss3--noaccent .eg-ss-substack span:first-child { border-bottom: var(--eg-w-hair) solid var(--eg-ink-3); padding-bottom: 1pt; margin-bottom: 1pt; }
.eg-book .ss3--noaccent thead .eg-sheet-hand { border-bottom: none; background: transparent; }
.eg-book .ss3--noaccent tbody tr:first-child .eg-sheet-hand { background: transparent; border-left-color: transparent; border-top-color: transparent; }
/* CPd-grade guide fitted into the split rail */
.eg-book .eg-ssp--guide .eg-ssp-grid { width: 44%; }
.eg-book .eg-ssp-side .eg-cp-title { margin: 0 0 var(--eg-sp-3); border-bottom: var(--eg-w-red) solid var(--eg-red); padding-bottom: var(--eg-sp-2); }
.eg-book .eg-ssp-side .eg-guide-step { margin: var(--eg-sp-3) 0 var(--eg-sp-1); }
.eg-book .eg-ssp-side .eg-guide-tally { width: 100%; }
.eg-book .eg-ssp-side .eg-guide-tally td { white-space: normal; }
.eg-book .eg-ssp-side .eg-guide-tally .eg-guide-x { width: 44pt; }
.eg-book .eg-ssp-side .eg-guide-tally .eg-guide-val { width: 30pt; }
.eg-book .eg-ssp-side .eg-guide-tally .eg-guide-egc { width: auto; }
/* the two pointer cards (this sheet + calculator) */
.eg-book .eg-ssp-cards { display: flex; flex-wrap: wrap; gap: var(--eg-sp-5); justify-content: center; margin-top: var(--eg-sp-4); }
.eg-book .eg-ssp-cardcell { text-align: center; }
.eg-book .eg-ssp-cardcell .eg-guide-card { margin: var(--eg-sp-2) auto 0; }
.eg-book .eg-ssp-cardcell .eg-cp-qr-label { margin: 0; }
.eg-book .eg-sheet-legend { display: flex; margin: var(--eg-sp-2) 0 0; border-top: var(--eg-w-ink) solid var(--eg-ink); padding-top: var(--eg-sp-1); }
.eg-book .eg-sheet-legend > div { flex: 1; padding: 0 var(--eg-sp-3); border-left: var(--eg-w-hair) solid var(--eg-rule); }
.eg-book .eg-sheet-legend > div:first-child { border-left: none; padding-left: 0; }
.eg-book .eg-legend-key { display: block; font-family: var(--eg-sans); font-weight: 700; font-size: var(--eg-fs-tiny); letter-spacing: 0.14em; color: var(--eg-ink); }
.eg-book .eg-legend-def { display: block; font-size: var(--eg-fs-tiny); line-height: 1.2; color: var(--eg-ink-2); margin-top: 1pt; }
/* photocopy hardening + hierarchy (2026-07-20) */
.eg-book .ss3--noaccent tbody tr:first-child td.eg-ss-substack,
.eg-book .ss3--noaccent tbody tr:first-child td.eg-ss-runlbl { border-bottom: var(--eg-w-ink) solid var(--eg-ink); }
.eg-book .eg-ssp--guide .eg-ssp-side { vertical-align: top; }
/* VP is the hero column; the round number is incidental (2026-07-20) */
.eg-book .ss3--noaccent td.eg-sheet-hand { color: var(--eg-ink-3); font-weight: 400; font-size: var(--eg-fs-tiny); }
.eg-book .ss3--noaccent td.eg-ss-runlbl { font-family: var(--eg-display); font-size: 13pt; font-weight: 800; letter-spacing: 0; color: var(--eg-ink); }
.eg-book .eg-vp-pro--split .eg-sheet-foot { text-align: left; margin: var(--eg-sp-2) 0 var(--eg-sp-1); }
.eg-book .eg-vp-pro--split .eg-ssp-cards { margin-top: 50px; }
/* KR / pro VP sheet — real cells, A5 (con row + bon row per round, VP rowspans both). Locked 2026-07-21 */
.eg-book .eg-kc { width: 148mm; height: 210mm; box-sizing: border-box; margin: 0 auto; padding: 9mm 10mm; display: flex; flex-direction: column; --kc-clbl-fs: 7pt; }
.eg-book .eg-kc .eg-sheet-head { margin-bottom: 6pt; }
.eg-book .eg-kc-table { width: 100%; border-collapse: collapse; table-layout: fixed; flex: 1; font-size: 8.5pt; }
.eg-book .eg-kc-table td, .eg-book .eg-kc-table th { border: var(--eg-w-hair) solid var(--eg-ink-4); padding: 0; vertical-align: middle; text-align: center; }
.eg-book .eg-kc-table td.eg-kc-corner { border: none; }
.eg-book .eg-kc-table th.eg-kc-name { border: var(--eg-w-ink) solid var(--eg-ink); border-bottom: none; text-align: left; vertical-align: top; padding: 5pt 6pt 16pt; }
.eg-book .eg-kc-name span { font-family: var(--eg-sans); font-size: var(--eg-fs-tiny); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--eg-stone); }
.eg-book .eg-kc-table td.eg-kc-clbl { background: var(--eg-paper-2); font-family: var(--eg-sans); font-weight: 700; font-size: var(--kc-clbl-fs); letter-spacing: 0.08em; line-height: 1.3; color: var(--eg-ink); border-left: var(--eg-w-ink) solid var(--eg-ink); }
.eg-book .eg-kc-clbl span { display: block; }
.eg-book .eg-kc-clbl span:first-child { border-bottom: var(--eg-w-hair) solid var(--eg-ink-3); padding-bottom: 2pt; margin-bottom: 2pt; }
.eg-book .eg-kc-table td.eg-kc-vplbl { font-family: var(--eg-display); font-weight: 800; font-size: 13pt; color: var(--eg-ink); border-left: var(--eg-w-hair) solid var(--eg-ink-3); border-right: var(--eg-w-ink) solid var(--eg-ink); }
.eg-book .eg-kc-table td.eg-kc-hand { color: var(--eg-ink-3); font-size: calc(var(--eg-fs-small) + 2pt); }
.eg-book .eg-kc-table td.eg-kc-con { background: var(--eg-paper-2); border-left: var(--eg-w-ink) solid var(--eg-ink); border-right: var(--eg-w-hair) solid var(--eg-ink-3); border-bottom: var(--eg-w-hair) solid var(--eg-ink-3); }
.eg-book .eg-kc-table td.eg-kc-bon { background: var(--eg-paper-2); border-left: var(--eg-w-ink) solid var(--eg-ink); border-right: var(--eg-w-hair) solid var(--eg-ink-3); }
.eg-book .eg-kc-table td.eg-kc-vp { background: var(--eg-card-white); border-left: var(--eg-w-hair) solid var(--eg-ink-3); border-right: var(--eg-w-ink) solid var(--eg-ink); }
.eg-book .eg-kc-bonrow.eg-kc-rule5 td { border-bottom: var(--eg-w-hair) solid var(--eg-ink-3); }
.eg-book .eg-kc--landscape { width: 210mm; height: 148mm; }
.eg-book .eg-kc-table td.eg-kc-dapper, .eg-book .eg-kc-table th.eg-kc-dapper { font-family: var(--eg-sans); font-weight: 700; font-size: var(--eg-fs-tiny); letter-spacing: 0.1em; color: var(--eg-ink-3); border-right: var(--eg-w-ink) solid var(--eg-ink); }


.eg-book .eg-kc-radlrow td { border-bottom: var(--eg-w-hair) solid var(--eg-ink-4); }
.eg-book .eg-kc-table td.eg-kc-radllbl { font-family: var(--eg-sans); font-weight: 600; font-size: var(--eg-fs-tiny); letter-spacing: 0.1em; text-transform: uppercase; color: var(--eg-stone); }
.eg-book .eg-kc-table td.eg-kc-radl { background: var(--eg-paper); border-left: var(--eg-w-ink) solid var(--eg-ink); border-right: var(--eg-w-ink) solid var(--eg-ink); padding: 3pt 0; }
.eg-book .eg-kc-radlcirc { display: inline-block; width: 7pt; height: 7pt; border: var(--eg-w-hair) solid var(--eg-ink-3); border-radius: 50%; margin: 0 1.5pt; vertical-align: middle; }
.eg-book .eg-kc-signmark { font-size: 0.62em; vertical-align: 0.28em; margin-right: 0.5pt; color: var(--eg-ink-3); }