/* ============================================================
   THE TAROK EXPLORATION BOOK :: web-blocks.css
   THE WEB BUNDLE. Split out of the old superset blocks.css on
   2026-07-24 at the assembler's direction: each consumer loads ONE
   stylesheet, nothing is concatenated, so the book bundle
   (blocks.css) carries only book CSS and this file carries only the
   web layer. Everything here is scoped under .eg-web and cannot
   reach the printed page (WeasyPrint renders inside .eg-book).
   Pairs with tokens.css, which holds the shared palette and the
   --eg-w-* web tokens.
   NOTE for the web session: delivery/web-library/blocks.css is your
   own older copy. Every .eg-web rule in it is identical to this file
   (checked rule by rule), but it ALSO carries a stale copy of book
   CSS (old card-fan values, no .eg-qz block). If the theme renders
   book blocks as well as web blocks it needs the current book
   bundle, not that stale book CSS. Reconciling it is your call.
   ============================================================ */

/* 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; }

/* ================================================================
   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) =================
   THE SCREEN PUZZLE IS NOT THE BOOK PUZZLE (Greg, 2026-07-25).
   The book pays by the page, so its puzzle (eg-qz) is deliberately cropped
   down to the cards that carry information and sends the solution to the back
   of the book. The site pays for none of that. The screen form therefore
   shows the WHOLE table, at a size worth looking at: the setup line, who is
   out there and how many cards they hold, the middle, and your hand or the
   pile you are counting, then the hint and the revealed answer. Never paste
   the print stub into .eg-web; compose the stage from the K1/K2/K4 atoms
   below, which is what the rest of the web layer already looks like. */
.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: 64rem; }
.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-setup { margin: 0 0 var(--eg-w-sp-4); font-family: var(--eg-serif); font-style: italic; font-size: var(--eg-w-fs-body); line-height: var(--eg-w-lh-body); color: var(--eg-ink-2); }
.eg-web .eg-wpuzzle-q { margin: 0 0 var(--eg-w-sp-5); font-family: var(--eg-display); font-weight: 700; font-size: var(--eg-w-fs-h3); line-height: 1.25; color: var(--eg-ink); }

/* ---- THE TABLETOP, REVIVED (Greg, 2026-07-25) ----
   The full-page tabletop puzzle (old PREVIEW keys P1a-P5b) was retired on
   2026-07-23 for ONE reason: it ate a whole A5 page each, and A5 pages cost
   money. That is a print-economics argument and it has no force on the site.
   Greg is right that the compact form is the weaker design when space is free,
   so the tabletop comes back HERE, in the web layer, rebuilt on web tokens at
   screen scale rather than pasted over from the book (house rule: print and web
   are different compositions).

   What the print version had that a stack of labelled rows does not: you are
   SEATED. Opponents sit around the middle, their backs and hand counts where
   the players would be, announcements attached to the seat that said them, the
   pad on the corner of the table, and your hand along the bottom edge facing
   you. That is what makes a puzzle read as a position instead of an inventory.

   Seating plan, 3x3 grid:
        .      north     .
        west   middle    east
        .      south (your hand)
   The pad rides the top-right corner as table furniture. Below 640px the plan
   collapses to a single column in table order (opponents, middle, hand), which
   keeps the reading order right without pretending a phone is a table. */
.eg-web .eg-wtable {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
  grid-template-areas: ". north pad" "west middle east" "south south south";
  align-items: start; justify-items: center;
  gap: var(--eg-w-sp-5) var(--eg-w-sp-4);
  position: relative;
  margin: 0 0 var(--eg-w-sp-5); padding: var(--eg-w-sp-6);
  background: var(--eg-paper-3); border: 1px solid var(--eg-ink-4);
  border-radius: var(--eg-w-radius-card);
}
.eg-web .eg-wtable .eg-wpad { grid-area: pad; }
.eg-web .eg-wtable-north  { grid-area: north; }
.eg-web .eg-wtable-west   { grid-area: west; justify-self: start; }
.eg-web .eg-wtable-east   { grid-area: east; justify-self: end; }
.eg-web .eg-wtable-middle { grid-area: middle; align-self: center; width: 100%; }
.eg-web .eg-wtable-south  { grid-area: south; width: 100%; }

/* a seat: chip, backs, count, and whatever that player said */
.eg-web .eg-wseat { display: flex; flex-direction: column; align-items: center; gap: var(--eg-w-sp-2); max-width: 100%; }
.eg-web .eg-wseat-chip {
  display: inline-flex; align-items: baseline; gap: var(--eg-w-sp-2);
  padding: 3px 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); background: var(--eg-card-white);
  border: 1px solid var(--eg-ink-3); border-radius: var(--eg-w-radius);
}
.eg-web .eg-wseat--you .eg-wseat-chip { color: var(--eg-paper); background: var(--eg-red); border-color: var(--eg-red); }
.eg-web .eg-wseat-role { font-weight: 400; letter-spacing: 0; text-transform: none; font-family: var(--eg-serif); font-style: italic; color: var(--eg-ink-3); }
.eg-web .eg-wseat--you .eg-wseat-role { color: var(--eg-paper); }
.eg-web .eg-wseat-count { font-family: var(--eg-sans); font-size: var(--eg-w-fs-tiny); letter-spacing: var(--eg-track-caps); text-transform: uppercase; color: var(--eg-ink-3); font-variant-numeric: tabular-nums; }
/* the backs: tight enough to read as one held hand, not a row of cards */
.eg-web .eg-wbacks { display: flex; }
.eg-web .eg-wbacks .eg-card { flex: 0 0 auto; width: 40px; margin-left: -31px; box-shadow: none; }
.eg-web .eg-wbacks .eg-card:first-child { margin-left: 0; }

/* what a player said, pinned under their seat */
.eg-web .eg-wsay {
  max-width: 22ch; margin: 0; padding: var(--eg-w-sp-2) var(--eg-w-sp-3);
  font-family: var(--eg-serif); font-style: italic; font-size: var(--eg-w-fs-small);
  line-height: 1.35; color: var(--eg-ink); text-align: center;
  background: var(--eg-card-white); border: 1px solid var(--eg-ink-4);
  border-radius: var(--eg-w-radius);
}
.eg-web .eg-wsay--pass { color: var(--eg-ink-3); font-style: normal; }

/* the middle: played cards with the seat that played them, winner marked */
.eg-web .eg-wmiddle { display: flex; justify-content: center; align-items: flex-end; gap: var(--eg-w-sp-4); flex-wrap: wrap; }
.eg-web .eg-wplay { display: flex; flex-direction: column; align-items: center; gap: var(--eg-w-sp-2); }
.eg-web .eg-wplay .eg-card { width: var(--eg-w-card); }
.eg-web .eg-wplay-seat { font-family: var(--eg-sans); font-size: var(--eg-w-fs-tiny); font-weight: 600; letter-spacing: var(--eg-track-caps); text-transform: uppercase; color: var(--eg-ink-3); }
.eg-web .eg-wplay--lead .eg-wplay-seat { color: var(--eg-ink); }
.eg-web .eg-wplay--winner .eg-card { outline: 2px solid var(--eg-red); outline-offset: 2px; }
.eg-web .eg-wplay--winner .eg-wplay-seat { color: var(--eg-red-deep); }

/* the pad: furniture on the corner of the table, not a panel in the flow */
.eg-web .eg-wtable .eg-wpad {
  position: absolute; top: var(--eg-w-sp-4); right: var(--eg-w-sp-4);
  min-width: 96px; padding: var(--eg-w-sp-2) var(--eg-w-sp-3);
  background: var(--eg-card-white); border: 1px solid var(--eg-ink-4); border-radius: var(--eg-w-radius);
}
.eg-web .eg-wpad-label { margin: 0 0 var(--eg-w-sp-1); font-family: var(--eg-sans); font-size: var(--eg-w-fs-tiny); font-weight: 600; letter-spacing: var(--eg-track-caps); text-transform: uppercase; color: var(--eg-ink-3); }
.eg-web .eg-wpad-list { list-style: none; margin: 0; padding: 0; }
.eg-web .eg-wpad-row { display: flex; justify-content: space-between; gap: var(--eg-w-sp-3); padding: 2px 0; border-bottom: 1px solid var(--eg-rule); font-family: var(--eg-sans); font-size: var(--eg-w-fs-small); font-variant-numeric: tabular-nums; }
.eg-web .eg-wpad-row:last-child { border-bottom: 0; }
.eg-web .eg-wpad-seat { color: var(--eg-ink-2); }
.eg-web .eg-wpad-score { font-weight: 700; color: var(--eg-ink); }

/* your hand: the bottom edge of the table, full size, spread across the row */
.eg-web .eg-wtable-south .eg-wzone-label { text-align: center; }
/* K3 FIX (Greg, 2026-08-05): a HELD HAND IS CENTRED. space-between spread a
   6-card hand edge to edge at 1280 and the gaps stopped reading as a hand; the
   intrinsic --eg-w-ov-hand overlap is the correct spacing, and centring lets a
   hand of any count look like a hand. This NARROWS the "card fans fill their
   row" rule to counting surfaces (piles, composition rows), where filling the
   row is the point; it does not reverse it. The wrapper was never the problem:
   .eg-wpuzzle is already capped at max-width 64rem. */
.eg-web .eg-whand { display: flex; justify-content: center; align-items: flex-start; max-width: 100%; }
.eg-web .eg-whand .eg-card { flex: 0 0 auto; width: var(--eg-w-card); margin-left: var(--eg-w-ov-hand); }
.eg-web .eg-whand .eg-card:first-child { margin-left: 0; }

/* a labelled region inside the table (the counting flavor: pile, pad) */
.eg-web .eg-wzone { display: flex; flex-direction: column; gap: var(--eg-w-sp-3); width: 100%; }
.eg-web .eg-wzone-label { margin: 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-3); }

@container eg-web (max-width: 639px) {
  .eg-web .eg-wtable {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "pad" "north" "west" "east" "middle" "south";
    justify-items: stretch; padding: var(--eg-w-sp-4);
  }
  /* A phone is not a table, so the pad stops being corner furniture and
     becomes an ordinary band at the top: absolute in a single column just
     lands it on top of the first seat. */
  .eg-web .eg-wtable .eg-wpad { position: static; width: 100%; }
  .eg-web .eg-wpad-list { display: flex; gap: var(--eg-w-sp-2); }
  .eg-web .eg-wpad-row { flex: 1 1 0; flex-direction: column; align-items: center; gap: 0; padding: 0; border-bottom: 0; border-right: 1px solid var(--eg-rule); }
  .eg-web .eg-wpad-row:last-child { border-right: 0; }
  .eg-web .eg-wtable-west, .eg-web .eg-wtable-east { justify-self: stretch; }
  .eg-web .eg-wseat { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; }
  .eg-web .eg-wsay { max-width: none; flex: 1 1 100%; text-align: left; }
  .eg-web .eg-wplay .eg-card { width: 68px; }
  /* centring a row that overflows clips BOTH ends, so the scroll strip starts at the left edge */
  .eg-web .eg-whand { justify-content: flex-start; overflow-x: auto; scrollbar-width: thin; padding-bottom: var(--eg-w-sp-2); }
  .eg-web .eg-whand::-webkit-scrollbar { height: 4px; }
  .eg-web .eg-whand::-webkit-scrollbar-thumb { background: var(--eg-red); }
}
.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); }
/* THE WRAPPER IS A CELL, NOT A CARD (2026-08-06). MAP has always declared
   .eg-pillar and this file defined only the grid and the three children, so the
   wrapper carried no padding, no border and no fill. It earns a rule, and the rule
   is deliberately NOT the UI-card treatment: three ink-bordered boxes would make
   the quietest section of the home page its loudest, and the big red numeral is
   already the ornament. It is the RULE-TOPPED CELL this library uses everywhere
   else (E1, F1, the prompt panel), which is also the one treatment that needs no
   reset when the row becomes a stack: a TOP rule is correct at 360 and at 1280,
   where a side rule needs a first-child exception and a direction flip. The three
   children keep their own margins; nothing else changes. */
.eg-web .eg-pillar { display: flex; flex-direction: column; padding-top: var(--eg-w-sp-3); border-top: 2px solid var(--eg-ink); }
.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); }

/* NATIVE NAMES ON EVERY TABLE (Greg ruling, 2026-08-30; same rule as the
   book layer): a contract or bonus name cell is two lines, English then
   native, marked <strong>Name</strong><em>native</em>. */
.eg-web table td strong + em {
  display: block;
  font-family: var(--eg-serif);
  font-style: italic;
  font-size: 0.88em;
  line-height: 1.3;
  color: var(--eg-ink-2);
}

/* ================= K  Card-table family (screen) ================= */
/* K1  Hand. 2026-08-30: CENTRED, closing the gap the K3 held-hand ruling
   (2026-08-05) left in K1: a held hand centres at intrinsic overlap at every
   count; only the sub-640 scroll strip stays left-aligned, because centring
   a row that overflows clips both ends. */
.eg-web .eg-hand { display: flex; flex-wrap: wrap; justify-content: center; 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; justify-content: flex-start; 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); }
/* The pile uses the WHOLE row (Greg, 2026-07-25). The negative margin is the
   TIGHTEST legible packing, not the intended spacing; space-between hands any
   leftover width back to the gaps so the pile reaches both edges of whatever
   column it lands in, and only a pile that genuinely overruns scrolls. */
.eg-web .eg-pile-cards { position: relative; display: flex; flex-wrap: nowrap; justify-content: space-between; overflow-x: auto; padding-bottom: var(--eg-w-sp-2); scrollbar-width: thin; }
.eg-web .eg-pile-cards .eg-card { flex: 0 0 auto; width: var(--eg-w-card-sm); margin: 0 0 0 -34px; }
.eg-web .eg-pile-cards .eg-card:first-child { margin-left: 0; }
.eg-web .eg-pile-cards::-webkit-scrollbar { height: 4px; }
.eg-web .eg-pile-cards::-webkit-scrollbar-thumb { background: var(--eg-red); }
/* Same containment as the pile below it: three 88px cards do not fit a 234px
   column at phone width, and without this the last one slid straight out of the
   tinted stage panel and got sliced by the frame with no affordance at all. */
.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); overflow-x: auto; scrollbar-width: thin; }
.eg-web .eg-pile-pulled .eg-card { flex: 0 0 auto; }
.eg-web .eg-pile-pulled::-webkit-scrollbar { height: 4px; }
.eg-web .eg-pile-pulled::-webkit-scrollbar-thumb { background: var(--eg-red); }
.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); }


/* ================================================================
   WEB LAYER, ROUND 2  (2026-08-05)
   G9-G17  structured post content (the AEO set)
   A1-A7   archives and indexes
   D1-D5   decks
   K5-K6   puzzle meta rail and answer states
   Same contract as round 1: scoped under .eg-web, mobile first, two
   container breakpoints (640 / 1024) restated because a query cannot
   read var(), no JavaScript, everything makes sense at rest.
   The G family shares the G5-callout language on purpose: paper-2
   fill, one hairline ink-4 frame, near-square corners, an Inter caps
   label in red-deep, Cormorant body. It should read as one family.
   ================================================================ */

/* ---- shared round-2 atoms ---- */
.eg-web .eg-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* badge: the small standing fact (K5 rail, A7 teaser foot). Chips (A3) are the
   removable cousin and live with the archive family below. */
.eg-web .eg-badge { display: inline-flex; align-items: center; gap: var(--eg-w-sp-2); min-height: 26px; padding: 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-2); background: var(--eg-paper-2); border: 1px solid var(--eg-ink-4); border-radius: 2px; }
.eg-web .eg-badge-label { font-weight: 500; color: var(--eg-ink-3); }
.eg-web .eg-badge--id { font-weight: 700; color: var(--eg-red-deep); background: transparent; border-color: var(--eg-red-deep); font-variant-numeric: tabular-nums; }
.eg-web .eg-badge .eg-dot { margin-left: 0; }
.eg-web .eg-badge .eg-dot + .eg-dot { margin-left: 3px; }

/* the scroll shell shared by G9 and G17. A wide table SCROLLS, it never breaks
   the page: the wrapper is the only thing that overflows, and it is focusable so
   a keyboard can reach the far columns. */
.eg-web .eg-cmp-scroll { overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; padding-bottom: var(--eg-w-sp-2); }
.eg-web .eg-cmp-scroll::-webkit-scrollbar { height: 4px; }
.eg-web .eg-cmp-scroll::-webkit-scrollbar-thumb { background: var(--eg-red); }
.eg-web .eg-cmptable-caption { caption-side: top; text-align: left; margin: 0 0 var(--eg-w-sp-3); font-family: var(--eg-sans); font-size: var(--eg-w-fs-label); font-weight: 700; letter-spacing: var(--eg-track-caps); text-transform: uppercase; color: var(--eg-red-deep); }

/* ================= G9  Comparison table ================= */
.eg-web .eg-cmp { margin: var(--eg-w-sp-6) 0; }
.eg-web .eg-cmptable { width: 100%; min-width: 30rem; border-collapse: collapse; font-family: var(--eg-sans); }
.eg-web .eg-cmptable th, .eg-web .eg-cmptable td { padding: var(--eg-w-sp-3) var(--eg-w-sp-4); text-align: center; vertical-align: top; border-bottom: 1px solid var(--eg-rule); }
.eg-web .eg-cmptable thead th { font-size: var(--eg-w-fs-label); font-weight: 700; letter-spacing: var(--eg-track-caps); text-transform: uppercase; color: var(--eg-ink); border-bottom: 2px solid var(--eg-red); }
.eg-web .eg-cmptable tbody th { font-size: var(--eg-w-fs-small); font-weight: 600; color: var(--eg-ink-2); }
.eg-web .eg-cmptable tbody td { font-size: var(--eg-w-fs-small); line-height: var(--eg-w-lh-small); color: var(--eg-ink); font-variant-numeric: tabular-nums; }
.eg-web .eg-cmptable tbody tr:last-child th, .eg-web .eg-cmptable tbody tr:last-child td { border-bottom: 0; }
/* the highlighted column is a tint, not a colour: red here would read as an alert
   (same reasoning as the contract table's all-pass band, 2026-07-26). */
.eg-web .eg-cmptable .eg-cmp-hi { background: var(--eg-paper-2); }
.eg-web .eg-cmptable thead th.eg-cmp-hi { color: var(--eg-red-deep); }

/* ================= G10  FAQ / Q&A ================= */
.eg-web .eg-faq { margin: var(--eg-w-sp-6) 0; border-top: 1px solid var(--eg-rule); }
.eg-web .eg-faq-item { border-bottom: 1px solid var(--eg-rule); }
.eg-web .eg-faq-q { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--eg-w-sp-4); padding: var(--eg-w-sp-4) 0; cursor: pointer; list-style: none; font-family: var(--eg-display); font-weight: 700; font-size: var(--eg-w-fs-h3); line-height: 1.3; color: var(--eg-ink); }
.eg-web .eg-faq-q::-webkit-details-marker { display: none; }
.eg-web .eg-faq-q::marker { content: ""; }
.eg-web .eg-faq-q:hover { color: var(--eg-red-deep); }
.eg-web .eg-faq-mark { flex: 0 0 auto; width: 9px; height: 9px; margin: 7px 3px 0 0; border-right: 2px solid var(--eg-red); border-bottom: 2px solid var(--eg-red); transform: rotate(45deg); transition: transform 120ms ease; }
.eg-web .eg-faq-item[open] .eg-faq-mark { transform: rotate(225deg); }
.eg-web .eg-faq-a { padding: 0 0 var(--eg-w-sp-5); max-width: 62ch; }
.eg-web .eg-faq-a > * { 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-faq-a > * + * { margin-top: var(--eg-w-sp-4); }

/* ================= G11  Key takeaways ================= */
.eg-web .eg-tldr { 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-top: 3px solid var(--eg-red); border-radius: 0 0 var(--eg-w-radius-card) var(--eg-w-radius-card); }
.eg-web .eg-tldr-title { margin: 0 0 var(--eg-w-sp-3); font-family: var(--eg-sans); font-size: var(--eg-w-fs-label); font-weight: 700; letter-spacing: var(--eg-track-caps); text-transform: uppercase; color: var(--eg-red-deep); }
.eg-web .eg-tldr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--eg-w-sp-3); }
.eg-web .eg-tldr-list li { position: relative; padding-left: 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); text-wrap: pretty; }
.eg-web .eg-tldr-list li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 7px; height: 7px; background: var(--eg-red); }

/* ================= G12  Numbered steps ================= */
.eg-web .eg-steps { list-style: none; margin: var(--eg-w-sp-6) 0; padding: 0; counter-reset: eg-step; display: flex; flex-direction: column; gap: var(--eg-w-sp-5); }
/* THE NUMERAL SITS ON THE TITLE'S BASELINE (Greg, 2026-08-06). Aligned to the box
   TOP, a 30px Playfair numeral against a 19px title put the figure visibly above
   the words it numbers, because the two boxes are different heights and neither
   glyph starts at its box top. Baseline alignment is also size-independent: change
   either type size and the numeral stays on the line it belongs to. */
.eg-web .eg-step { counter-increment: eg-step; display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: var(--eg-w-sp-4); align-items: baseline; }
.eg-web .eg-step::before { content: counter(eg-step); font-family: var(--eg-display); font-weight: 800; font-size: var(--eg-w-fs-h1); line-height: 0.95; color: var(--eg-red); text-align: right; font-variant-numeric: lining-nums tabular-nums; }
.eg-web .eg-step-title, .eg-web .eg-step-body { grid-column: 2; }
/* THE STEP TITLE CARRIES NO PROSE MARGIN (Greg, 2026-08-06: "the number is so far
   above the text"). G12 normally lives inside G2, and .eg-web .eg-prose h3 is one
   element selector heavier than .eg-web .eg-step-title, so the prose heading margin
   won and pushed the title 32px down its own grid row while the numeral stayed at
   the row top. The pair is written .eg-steps .eg-step-title / .eg-steps .eg-step-body
   so the block wins wherever it lands, in prose or on its own; the vertical rhythm
   inside a step belongs to the step. */
.eg-web .eg-steps .eg-step-title { margin: 0 0 var(--eg-w-sp-2); font-family: var(--eg-display); font-weight: 700; font-size: var(--eg-w-fs-h3); line-height: var(--eg-w-lh-h3); color: var(--eg-ink); }
.eg-web .eg-steps .eg-step-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); text-wrap: pretty; }

/* ================= G13  Two-column verdict ================= */
.eg-web .eg-verdict { margin: var(--eg-w-sp-6) 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--eg-w-sp-4); }
@container eg-web (min-width: 640px) { .eg-web .eg-verdict { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--eg-w-sp-5); } }
.eg-web .eg-verdict-col { padding: var(--eg-w-sp-5); background: var(--eg-paper-2); border: 1px solid var(--eg-ink-4); border-radius: 0 0 var(--eg-w-radius-card) var(--eg-w-radius-card); }
.eg-web .eg-verdict-col--a { border-top: 3px solid var(--eg-red); }
.eg-web .eg-verdict-col--b { border-top: 3px solid var(--eg-ink); }
.eg-web .eg-verdict-title { margin: 0 0 var(--eg-w-sp-3); font-family: var(--eg-sans); font-size: var(--eg-w-fs-label); font-weight: 700; letter-spacing: var(--eg-track-caps); text-transform: uppercase; color: var(--eg-ink); }
.eg-web .eg-verdict-col--a .eg-verdict-title { color: var(--eg-red-deep); }
.eg-web .eg-verdict-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--eg-w-sp-3); }
.eg-web .eg-verdict-list li { position: relative; padding-left: 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); text-wrap: pretty; }
.eg-web .eg-verdict-list li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 7px; height: 7px; background: var(--eg-ink-4); }
.eg-web .eg-verdict-col--a .eg-verdict-list li::before { background: var(--eg-red); }
.eg-web .eg-verdict-col--b .eg-verdict-list li::before { background: var(--eg-ink); }

/* ================= G14  Definition list ================= */
.eg-web .eg-deflist { margin: var(--eg-w-sp-6) 0; display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--eg-rule); }
.eg-web .eg-deflist dt { padding: var(--eg-w-sp-4) 0 var(--eg-w-sp-1); font-family: var(--eg-display); font-weight: 700; font-size: var(--eg-w-fs-h3); line-height: var(--eg-w-lh-h3); color: var(--eg-ink); }
.eg-web .eg-deflist dd { margin: 0; padding: 0 0 var(--eg-w-sp-4); border-bottom: 1px solid var(--eg-rule); font-family: var(--eg-serif); font-size: var(--eg-w-fs-body); line-height: var(--eg-w-lh-body); color: var(--eg-ink-2); text-wrap: pretty; }
@container eg-web (min-width: 640px) {
  .eg-web .eg-deflist { grid-template-columns: 13rem minmax(0, 1fr); }
  .eg-web .eg-deflist dt { padding: var(--eg-w-sp-4) var(--eg-w-sp-5) var(--eg-w-sp-4) 0; border-bottom: 1px solid var(--eg-rule); }
  .eg-web .eg-deflist dd { padding: var(--eg-w-sp-4) 0; }
}

/* ================= G15  Stat strip ================= */
.eg-web .eg-stats { margin: var(--eg-w-sp-6) 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: 1px; background: var(--eg-rule); border: 1px solid var(--eg-ink-4); border-radius: var(--eg-w-radius-card); overflow: hidden; }
.eg-web .eg-stat { padding: var(--eg-w-sp-5) var(--eg-w-sp-3); text-align: center; background: var(--eg-card-white); }
.eg-web .eg-stat-value { display: block; font-family: var(--eg-display); font-weight: 800; font-size: var(--eg-w-fs-h1); line-height: 1; color: var(--eg-red); font-variant-numeric: lining-nums tabular-nums; }
.eg-web .eg-stat-label { display: block; margin-top: 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-ink-3); }

/* ================= G16  Fact box ================= */
.eg-web .eg-factbox { 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-factbox-title { margin: 0 0 var(--eg-w-sp-3); font-family: var(--eg-sans); font-size: var(--eg-w-fs-label); font-weight: 700; letter-spacing: var(--eg-track-caps); text-transform: uppercase; color: var(--eg-red-deep); }
.eg-web .eg-factbox-list { margin: 0; }
.eg-web .eg-factbox-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--eg-w-sp-4); padding: var(--eg-w-sp-3) 0; border-bottom: 1px solid var(--eg-rule); }
.eg-web .eg-factbox-row:last-child { border-bottom: 0; padding-bottom: 0; }
.eg-web .eg-factbox-row dt { font-family: var(--eg-sans); font-size: var(--eg-w-fs-small); color: var(--eg-ink-3); }
.eg-web .eg-factbox-row dd { margin: 0; text-align: right; font-family: var(--eg-sans); font-size: var(--eg-w-fs-body); font-weight: 600; color: var(--eg-ink); font-variant-numeric: tabular-nums; }
.eg-web .eg-factbox-row dd .eg-dot { margin-left: 3px; }

/* ================= G17  By the numbers ================= */
.eg-web .eg-bynum { margin: var(--eg-w-sp-6) 0; }
/* THE COMPARISON FITS THE PHONE (Greg, 2026-08-06: an important comparison should
   not be cut off). The 26rem floor forced a scroll at 360 whatever the table held,
   so a two-subject comparison was hidden behind a swipe for no reason. The floor is
   DELETED, not lowered: the table shrinks to its content, the cells tighten below
   640 and the subject headings wrap, and a table that genuinely cannot fit (four or
   more subjects) still overflows into the G9 scroll shell, which stays as the
   safety net rather than the default. */
.eg-web .eg-bynumtable { width: 100%; border-collapse: collapse; }
.eg-web .eg-bynumtable th, .eg-web .eg-bynumtable td { padding: var(--eg-w-sp-3) var(--eg-w-sp-4); text-align: center; vertical-align: baseline; border-bottom: 1px solid var(--eg-rule); }
.eg-web .eg-bynumtable thead th { font-family: var(--eg-display); font-weight: 700; font-size: var(--eg-w-fs-h3); line-height: var(--eg-w-lh-h3); color: var(--eg-ink); border-bottom: 2px solid var(--eg-red); }
.eg-web .eg-bynumtable tbody th { 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-bynumtable tbody td { font-family: var(--eg-sans); font-size: var(--eg-w-fs-h3); font-weight: 700; color: var(--eg-ink); font-variant-numeric: lining-nums tabular-nums; }
.eg-web .eg-bynumtable tbody td .eg-bynum-unit { display: block; font-size: var(--eg-w-fs-label); font-weight: 500; letter-spacing: var(--eg-track-caps); text-transform: uppercase; color: var(--eg-ink-3); }
.eg-web .eg-bynumtable tbody tr:last-child th, .eg-web .eg-bynumtable tbody tr:last-child td { border-bottom: 0; }
/* the phone-fit rules sit AFTER the base rules on purpose: same specificity, so
   whichever is written last wins, and written first they did nothing. */
@container eg-web (max-width: 639px) {
  .eg-web .eg-bynumtable th, .eg-web .eg-bynumtable td { padding: var(--eg-w-sp-3) var(--eg-w-sp-2); }
  .eg-web .eg-bynumtable thead th { font-size: var(--eg-w-fs-small); line-height: var(--eg-w-lh-small); }
  .eg-web .eg-bynumtable tbody td { font-size: var(--eg-w-fs-body); }
}

/* ================================================================
   A  Archives and indexes
   ================================================================ */

/* ================= A1  Archive hero ================= */
.eg-web .eg-archhero { background: var(--eg-paper-2); border-bottom: 1px solid var(--eg-ink-4); }
.eg-web .eg-archhero-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-archhero-count { 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); font-variant-numeric: tabular-nums; }
.eg-web .eg-archhero-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); text-wrap: balance; }
.eg-web .eg-archhero-stand { margin: var(--eg-w-sp-3) 0 0; max-width: 54ch; font-family: var(--eg-serif); font-size: var(--eg-w-fs-lead); line-height: var(--eg-w-lh-lead); color: var(--eg-ink-2); text-wrap: pretty; }
.eg-web .eg-archhero-art { display: flex; flex: 0 0 auto; }
.eg-web .eg-archhero-art .eg-card { margin-left: var(--eg-w-ov-hand); }
.eg-web .eg-archhero-art .eg-card:first-child { margin-left: 0; }
@container eg-web (min-width: 640px) { .eg-web .eg-archhero-inner { padding: var(--eg-w-sp-8) var(--eg-w-sp-5); } .eg-web .eg-archhero-title { font-size: var(--eg-w-fs-h1-lg); } }
@container eg-web (min-width: 1024px) { .eg-web .eg-archhero-inner { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--eg-w-sp-7); } }

/* ================= A2  Filter / facet rail =================
   Plain links only: the archive filters with JavaScript off, which is the whole
   point of a landing surface the book points at. HOUSE MARK LAW applies to the
   active state, AS AMENDED 2026-08-19: a facet in use carries a BARE X (which is
   also its remove link), a facet with no results carries NO MARK AND NOTHING
   ELSE. The struck name is RETIRED; a dead facet is carried by its quiet ink and
   its dead pointer. Two marks, X or blank, no third, no tick boxes. */
.eg-web .eg-facets { padding: var(--eg-w-sp-5) var(--eg-w-sp-4); background: var(--eg-card-white); border: 1px solid var(--eg-ink-4); border-radius: var(--eg-w-radius-card); display: flex; flex-direction: column; gap: var(--eg-w-sp-6); }
.eg-web .eg-facets-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--eg-w-sp-4); }
.eg-web .eg-facets-title { margin: 0; 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-ink); }
.eg-web .eg-facets-clear { font-family: var(--eg-sans); font-size: var(--eg-w-fs-small); }
.eg-web .eg-facet-group { display: flex; flex-direction: column; gap: var(--eg-w-sp-3); }
.eg-web .eg-facet-label { margin: 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-3); }
.eg-web .eg-facet-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--eg-w-sp-2); }
.eg-web .eg-facet { display: inline-flex; align-items: center; gap: var(--eg-w-sp-2); min-height: 40px; padding: 0 var(--eg-w-sp-3); font-family: var(--eg-sans); font-size: var(--eg-w-fs-small); color: var(--eg-ink-2); text-decoration: none; background: transparent; border: 1px solid var(--eg-ink-4); border-radius: 2px; }
.eg-web .eg-facet:hover { color: var(--eg-red-deep); border-color: var(--eg-red); }
.eg-web .eg-facet-count { font-size: var(--eg-w-fs-label); color: var(--eg-ink-3); font-variant-numeric: tabular-nums; }
.eg-web .eg-facet-name { display: inline-flex; align-items: center; gap: var(--eg-w-sp-1); }
.eg-web .eg-facet-name .eg-dot { margin-left: 0; }
.eg-web .eg-facet-name .eg-dot + .eg-dot { margin-left: 3px; }
.eg-web .eg-facet--active { font-weight: 600; color: var(--eg-ink); background: var(--eg-paper-2); border-color: var(--eg-ink); }
.eg-web .eg-facet--active:hover { color: var(--eg-red-deep); border-color: var(--eg-red); }
.eg-web .eg-facet-x { flex: 0 0 auto; font-family: var(--eg-sans); font-size: var(--eg-w-fs-label); font-weight: 700; line-height: 1; color: var(--eg-red-deep); }
.eg-web .eg-facet--none { color: var(--eg-ink-4); border-color: var(--eg-rule); pointer-events: none; }
/* MARK LAW AMENDMENT 2026-08-19: no strike. A facet with no results is carried
   by its quiet ink and dead pointer, not by a line through its name. */
.eg-web .eg-facet--none .eg-facet-name { color: inherit; }

/* ================= A3  Active filter chips ================= */
.eg-web .eg-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--eg-w-sp-2); padding: var(--eg-w-sp-3) 0; }
.eg-web .eg-chip { display: inline-flex; align-items: center; gap: var(--eg-w-sp-1); min-height: 34px; padding: 0 var(--eg-w-sp-1) 0 var(--eg-w-sp-3); font-family: var(--eg-sans); font-size: var(--eg-w-fs-small); font-weight: 600; color: var(--eg-ink); background: var(--eg-paper-2); border: 1px solid var(--eg-ink); border-radius: 2px; }
.eg-web .eg-chip-label { white-space: nowrap; }
.eg-web .eg-chip-remove { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; font-family: var(--eg-sans); font-size: var(--eg-w-fs-label); font-weight: 700; line-height: 1; color: var(--eg-red-deep); text-decoration: none; border-radius: 2px; }
.eg-web .eg-chip-remove:hover { color: var(--eg-red-deep); background: var(--eg-red-wash); }
.eg-web .eg-chips-clear { margin-left: var(--eg-w-sp-2); font-family: var(--eg-sans); font-size: var(--eg-w-fs-small); }

/* ================= A4  Result meta bar ================= */
.eg-web .eg-resultbar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--eg-w-sp-3); padding: var(--eg-w-sp-3) 0; border-top: 1px solid var(--eg-rule); border-bottom: 1px solid var(--eg-rule); }
.eg-web .eg-resultbar-count { margin: 0; font-family: var(--eg-sans); font-size: var(--eg-w-fs-small); color: var(--eg-ink-2); font-variant-numeric: tabular-nums; }
.eg-web .eg-resultbar-sort { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--eg-w-sp-3); }
.eg-web .eg-resultbar-sortlabel { 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-sortlink { font-family: var(--eg-sans); font-size: var(--eg-w-fs-small); }
.eg-web .eg-sortlink--active { font-weight: 600; color: var(--eg-ink); text-decoration: none; border-bottom: 2px solid var(--eg-red); }

/* ================= A5  Pagination ================= */
.eg-web .eg-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--eg-w-sp-2); padding: var(--eg-w-sp-6) var(--eg-w-sp-4); }
.eg-web .eg-pager-link, .eg-web .eg-pager-current, .eg-web .eg-pager-gap { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 var(--eg-w-sp-3); font-family: var(--eg-sans); font-size: var(--eg-w-fs-small); font-weight: 600; text-decoration: none; border-radius: 2px; font-variant-numeric: tabular-nums; }
.eg-web .eg-pager-link { color: var(--eg-ink-2); border: 1px solid var(--eg-ink-4); }
.eg-web .eg-pager-link:hover { color: var(--eg-red-deep); border-color: var(--eg-red); }
.eg-web .eg-pager-current { color: var(--eg-paper); background: var(--eg-ink); border: 1px solid var(--eg-ink); }
.eg-web .eg-pager-gap { color: var(--eg-ink-4); }
.eg-web .eg-pager-link--off { color: var(--eg-ink-4); border-color: var(--eg-rule); pointer-events: none; }

/* ================= A6  Empty state ================= */
.eg-web .eg-empty { margin: var(--eg-w-sp-6) auto; max-width: 34rem; padding: var(--eg-w-sp-7) var(--eg-w-sp-5); text-align: center; background: var(--eg-paper-2); border: 1px solid var(--eg-ink-4); border-radius: var(--eg-w-radius-card); }
.eg-web .eg-empty-msg { 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); text-wrap: pretty; }

/* ================= A7  Puzzle teaser card ================= */
.eg-web .eg-qcard { display: flex; flex-direction: column; gap: var(--eg-w-sp-3); height: 100%; padding: var(--eg-w-sp-4) var(--eg-w-sp-5) 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-qcard:hover { border-color: var(--eg-red); box-shadow: 0 12px 28px -18px rgba(20,17,15,0.4); }
.eg-web .eg-qcard:hover .eg-qcard-prompt { color: var(--eg-red-deep); }
.eg-web .eg-qcard-top { 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-label); letter-spacing: var(--eg-track-caps); text-transform: uppercase; }
.eg-web .eg-qcard-id { font-weight: 700; color: var(--eg-red-deep); font-variant-numeric: tabular-nums; }
.eg-web .eg-qcard-game { color: var(--eg-ink-3); }
/* a HINT of the table, not a stage: the top strip of a short fan, cropped the way
   the book crops its puzzle hands, so the card faces read but cost no height. */
/* THE STRIP IS A CROP, NOT A SQUASH (Greg, 2026-08-06: never stretch the cards).
   The flex default stretched every card to the 34px band, printing a 0.64 card at
   1.65 and distorting the artwork by two and a half times. align-items: flex-start
   lets each card keep its own height and the band CLIPS it, which is what a crop
   is and what the caption always claimed it was. */
.eg-web .eg-qcard-strip { display: flex; align-items: flex-start; height: 34px; overflow: hidden; border-radius: 2px; }
.eg-web .eg-qcard-strip .eg-card { flex: 0 0 auto; width: var(--eg-w-card-sm); height: auto; margin-left: -24px; box-shadow: none; }
.eg-web .eg-qcard-strip .eg-card:first-child { margin-left: 0; }
.eg-web .eg-qcard-prompt { margin: 0; font-family: var(--eg-display); font-weight: 700; font-size: var(--eg-w-fs-h3); line-height: 1.3; color: var(--eg-ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.eg-web .eg-qcard-foot { margin-top: auto; padding-top: var(--eg-w-sp-3); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--eg-w-sp-2); border-top: 1px solid var(--eg-rule); }

/* ================================================================
   D  Decks
   ================================================================ */

/* ================= D1  Deck card ================= */
.eg-web .eg-dcard { display: flex; flex-direction: column; height: 100%; 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-dcard:hover { border-color: var(--eg-red); box-shadow: 0 12px 28px -18px rgba(20,17,15,0.4); }
.eg-web .eg-dcard:hover .eg-dcard-name { color: var(--eg-red-deep); }
.eg-web .eg-dcard-media { display: flex; align-items: flex-end; justify-content: center; padding: var(--eg-w-sp-5) var(--eg-w-sp-4) 0; background: var(--eg-paper-2); border-bottom: 1px solid var(--eg-rule); }
.eg-web .eg-dcard-media .eg-card { margin-left: -28px; }
.eg-web .eg-dcard-media .eg-card:first-child { margin-left: 0; }
.eg-web .eg-dcard-body { display: flex; flex-direction: column; gap: var(--eg-w-sp-3); padding: var(--eg-w-sp-4) var(--eg-w-sp-5) var(--eg-w-sp-5); }
.eg-web .eg-dcard-name { 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-dcard-meta { display: flex; flex-wrap: wrap; gap: var(--eg-w-sp-4); }

/* ================= D2  Deck spec table ================= */
.eg-web .eg-spectable { width: 100%; margin: var(--eg-w-sp-6) 0; border-collapse: collapse; }
.eg-web .eg-spectable th, .eg-web .eg-spectable td { padding: var(--eg-w-sp-3) var(--eg-w-sp-4); text-align: center; vertical-align: baseline; border-bottom: 1px solid var(--eg-rule); font-family: var(--eg-sans); }
.eg-web .eg-spectable th { width: 45%; font-size: var(--eg-w-fs-small); font-weight: 600; color: var(--eg-ink-3); }
.eg-web .eg-spectable td { font-size: var(--eg-w-fs-body); font-weight: 600; color: var(--eg-ink); font-variant-numeric: tabular-nums; }
.eg-web .eg-spectable tbody tr:last-child th, .eg-web .eg-spectable tbody tr:last-child td { border-bottom: 0; }

/* ================= D3  Deck composition grid ================= */
.eg-web .eg-dcomp { margin: var(--eg-w-sp-6) 0; display: flex; flex-direction: column; gap: var(--eg-w-sp-5); }
.eg-web .eg-dcomp-label { margin: 0 0 var(--eg-w-sp-3); display: flex; align-items: center; gap: 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-ink-3); }
.eg-web .eg-dcomp-count { color: var(--eg-ink-4); font-variant-numeric: tabular-nums; }
/* THE RUN IS TIGHT AND LEFT-ALIGNED (Greg, 2026-08-06). space-between spread eight
   hearts to a 107px pitch in an 805px row: cards whose intrinsic pitch is 34px
   printing with 51px of bare paper between them, and a group that far apart stops
   reading as a group. This NARROWS the fill-the-row law exactly the way the held
   hand narrowed it on 2026-08-05: on a composition row the negative margin IS the
   intended spacing, and the row still reaches both edges in the one case where
   reaching them means anything, a run too long for its column, which scrolls.
   LEFT, not centred: the rows are read against each other, and their common left
   edge is what makes eight hearts against twenty-two trumps a comparison you can
   see without counting. */
.eg-web .eg-dcomp-row { display: flex; flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding-bottom: var(--eg-w-sp-2); scrollbar-width: thin; }
.eg-web .eg-dcomp-row .eg-card { flex: 0 0 auto; width: var(--eg-w-card-sm); margin-left: -22px; }
.eg-web .eg-dcomp-row .eg-card:first-child { margin-left: 0; }
.eg-web .eg-dcomp-row::-webkit-scrollbar { height: 4px; }
.eg-web .eg-dcomp-row::-webkit-scrollbar-thumb { background: var(--eg-red); }

/* ================= D4  Games played with this deck ================= */
.eg-web .eg-dgames { list-style: none; margin: var(--eg-w-sp-6) 0; padding: 0; border-top: 1px solid var(--eg-rule); }
.eg-web .eg-dgame { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--eg-w-sp-3); padding: var(--eg-w-sp-4) 0; border-bottom: 1px solid var(--eg-rule); }
.eg-web .eg-dgame-name { font-family: var(--eg-display); font-weight: 700; font-size: var(--eg-w-fs-h3); line-height: var(--eg-w-lh-h3); }
.eg-web .eg-dgame-players { flex: 0 0 auto; 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); font-variant-numeric: tabular-nums; }

/* ================= D5  Where to get the deck ================= */
.eg-web .eg-dsource { 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); display: flex; flex-direction: column; gap: var(--eg-w-sp-4); }
.eg-web .eg-dsource-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-dsource-line { 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-dsource-actions { display: flex; flex-wrap: wrap; gap: var(--eg-w-sp-3); }
@container eg-web (min-width: 640px) { .eg-web .eg-dsource { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--eg-w-sp-5); } .eg-web .eg-dsource-actions { flex: 0 0 auto; } }

/* ================================================================
   K5 / K6  Puzzle meta rail and answer states  (2026-08-05)
   ================================================================ */
.eg-web .eg-qmeta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--eg-w-sp-2); padding: var(--eg-w-sp-4) 0 0; }

/* K6: three designed states on one shell.
   veiled  the panel is present and visibly holds something, so a reader can see
           there IS an answer and how long it runs; the text itself is not in the
           markup until the theme swaps it in, so it cannot be read from source.
   plain   revealed, no verdict.
   ok/no   judged, and the verdict is carried by a RULE down the left edge as well
           as by colour, so it survives without colour vision. */
.eg-web .eg-wpuzzle-answer--veiled { border-style: solid; }
.eg-web .eg-wpuzzle-answer--veiled .eg-wpuzzle-answer-label { color: var(--eg-ink-3); }
.eg-web .eg-wpuzzle-veil { display: flex; flex-direction: column; gap: var(--eg-w-sp-2); }
.eg-web .eg-wpuzzle-veil span { display: block; height: 10px; border-radius: 2px; background: var(--eg-ink-4); }
.eg-web .eg-wpuzzle-veil span:nth-child(1) { width: 94%; }
.eg-web .eg-wpuzzle-veil span:nth-child(2) { width: 81%; }
.eg-web .eg-wpuzzle-veil span:nth-child(3) { width: 47%; }
.eg-web .eg-wpuzzle-answer--ok { border-left: 3px solid var(--eg-status-ok); border-radius: 0 var(--eg-w-radius) var(--eg-w-radius) 0; }
.eg-web .eg-wpuzzle-answer--no { border-left: 3px solid var(--eg-status-error); border-radius: 0 var(--eg-w-radius) var(--eg-w-radius) 0; }
.eg-web .eg-wpuzzle-answer--no .eg-wpuzzle-answer-label { color: var(--eg-status-error); }


/* ================================================================
   WEB LAYER, ADDENDUM B  (2026-08-05)
   E1-E3  downloads / printables
   E4     IS G5-CALLOUT. Asked and answered: a one-line printing tip is
          exactly an in-post aside, and a fourth callout shell would be
          a fourth thing to maintain. Emit web/callout.html with
          LABEL "Printing"; MAP-WEB registers E4 against that file.
   F1-F2  game landing action row and meta strip
   The digital scorekeeper is NOT designed here, at Greg's instruction: the
   interaction model comes first. The one note worth leaving in the CSS
   is that when they do land they belong on THESE atoms (eg-btn at
   control height, tabular numerals, the score-sheet's own channel
   labels), because the player is copying from the sheet to the screen
   and back.
   ================================================================ */

/* ================= E1  Download card =================
   REVISED R4c (2026-08-22), then AMENDED the same day by Greg's ruling.

   THE PLATE CARRIES ONE GENERIC SHEET GLYPH, not a per-sheet miniature: the
   sheets are not all finished, so per-sheet captures would churn with every
   revision and gate this unit on content that is not ready. Every available
   sheet gets its card again; "no miniature, no card" is withdrawn with the
   miniatures that motivated it.

   NOT ONE LINE OF CSS IS SPECIFIC TO EITHER CHOICE, and that is deliberate. The
   plate is a full-width <img class="eg-dl-thumbimg"> at aspect-ratio 267/180,
   the printable area of a landscape A4 or Letter page, object-fit CONTAIN. The
   glyph is an SVG on that exact viewBox, so when every sheet locks a real
   capture replaces it by changing the src alone: no CSS, no slot change, no unit
   change. Capture-compatible by construction, which is what Greg asked us to
   keep.

   THE PLATE IS STILL THE CARD'S LARGEST ELEMENT, and the geometry fix of the
   first R4c pass stands: the old thumb was 84px at 148/210, an A5 PORTRAIT frame
   with object-fit COVER, while every sheet has been LANDSCAPE since 2026-08-06,
   so the card was showing a vertical slice of the middle of the page. CONTAIN,
   at the sheet's own ratio, never crops and never squashes.

   THE CARD IS STACKED AT EVERY WIDTH and the 640-and-up side-by-side row stays
   deleted (ruled 2026-08-22): a landscape plate wants the card's full width.

   THE TWO KINDS ARE A VARIANT, NOT A LABEL, and with one shared glyph the
   variant now carries the WHOLE distinction rather than reinforcing a difference
   the artefacts made for us. A form is a SHEET OF PAPER, square under a
   hairline, flat on the card. A reference is an OBJECT YOU KEEP, at the house
   card radius with the card shadow, lifted off a paper-2 well. The 3px top rule
   and the eyebrow say it in ink and in words, so it survives greyscale and a
   screen reader.

   THE PENDING PAPER PLATE STAYS RETIRED. It named the paper because there was
   nothing to show; there is a glyph to show now, and naming the paper twice
   (plate and chooser) was always a redundancy. */
.eg-web .eg-dl { display: flex; flex-direction: column; gap: var(--eg-w-sp-4); height: 100%; padding: 0 0 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-dl--form { border-top: 3px solid var(--eg-ink); border-radius: 0 0 var(--eg-w-radius-card) var(--eg-w-radius-card); }
.eg-web .eg-dl--ref { border-top: 3px solid var(--eg-red); border-radius: 0 0 var(--eg-w-radius-card) var(--eg-w-radius-card); }
.eg-web .eg-dl-kind { margin: 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-3); }
.eg-web .eg-dl--ref .eg-dl-kind { color: var(--eg-red-deep); }
.eg-web .eg-dl-thumb { flex: 0 0 auto; }
.eg-web .eg-dl-thumbimg { display: block; width: 100%; aspect-ratio: 267 / 180; object-fit: contain; object-position: center; background: var(--eg-card-white); }
/* A FORM IS A SHEET OF PAPER: flat on the card, square under a hairline. */
.eg-web .eg-dl--form .eg-dl-thumb { padding: var(--eg-w-sp-4) var(--eg-w-sp-4) 0; }
.eg-web .eg-dl--form .eg-dl-thumbimg { border: 1px solid var(--eg-rule); }
/* A REFERENCE IS AN OBJECT YOU KEEP BESIDE YOU: the house card radius and the
   card shadow, lifted off a paper-2 well. The shadow token is the one the system
   reserves for a card or a page lifted off the paper, which is exactly this. */
.eg-web .eg-dl--ref .eg-dl-thumb { padding: var(--eg-w-sp-4); background: var(--eg-paper-2); border-bottom: 1px solid var(--eg-rule); }
.eg-web .eg-dl--ref .eg-dl-thumbimg { border: 1px solid var(--eg-ink-4); border-radius: var(--eg-w-radius-card); 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-dl-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--eg-w-sp-2); min-width: 0; padding: 0 var(--eg-w-sp-5); }
.eg-web .eg-dl-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-dl-desc { margin: 0 0 var(--eg-w-sp-2); font-family: var(--eg-serif); font-size: var(--eg-w-fs-body); line-height: var(--eg-w-lh-body); color: var(--eg-ink-2); text-wrap: pretty; }
.eg-web .eg-dl .eg-formats { margin-top: auto; }

/* ================= E2  Downloads grid =================
   REVISED R4c: THE COLUMN IS CAPPED AND THE ROW IS CENTRED, so the grid is
   graceful at two cards and at three (not every game has a cheat sheet yet, so a
   varying count is the normal case). Uncapped, two cards each took half a 1280
   row and printed two enormous plates; capped at 23rem they are the same size at
   two as at three and the row centres the short set. Same reasoning as the F3
   branch cap of 2026-08-06: a set with fewer members must not print members
   several times the size of a full set's. */
/* THE CAP IS MEASURED, not chosen: at --eg-w-page-max the content box is 1132px
   (1180 less 2x24 of padding) and the gap is 20px, so three tracks must fit
   3n + 40 <= 1132, giving n <= 364px. 23rem (368px) missed it by 12px and auto-fit
   silently dropped to TWO tracks, wrapping the third card to its own row and
   re-creating the exact hole this block was built to avoid. 22rem (352px) fits
   with room to spare: 3x352 + 40 = 1096. */
.eg-web .eg-dlgrid { 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: repeat(auto-fit, minmax(19rem, 22rem)); justify-content: center; gap: var(--eg-w-gap-grid); }
@container eg-web (max-width: 639px) { .eg-web .eg-dlgrid { grid-template-columns: minmax(0, 1fr); } }
@container eg-web (min-width: 640px) { .eg-web .eg-dlgrid { padding: 0 var(--eg-w-sp-5) var(--eg-w-sp-8); } }

/* ================= E3  Format chooser ================= */
.eg-web .eg-formats { display: flex; flex-direction: column; gap: var(--eg-w-sp-3); }
.eg-web .eg-formats-label { margin: 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-3); }
/* TWO PAPERS, A4 AND LETTER (Greg, 2026-08-06), so the list is two cells at every
   width and the four-column rule at 1024 is deleted rather than left inert: with two
   options it would have squeezed both tiles into half the row and left two empty
   columns beside them. This follows the print side, where the portrait tier was
   deleted on 2026-08-06 and every sheet is landscape A4 or Letter. */
.eg-web .eg-formats-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--eg-w-sp-2); }
/* EQUAL TILES (Greg, 2026-08-06). The <li> stretches to the grid row, the <a>
   inside it did not, so a tile whose hint wrapped printed 83px against its
   neighbour's 69px. Two peer papers must be one size: sized to their real paper
   proportions instead, the bigger tile would read as the better choice, and the
   choice is about the reader's printer, not about the sheet. */
.eg-web .eg-format { height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 52px; padding: var(--eg-w-sp-2) var(--eg-w-sp-3); text-decoration: none; color: var(--eg-ink); background: var(--eg-paper-2); border: 1px solid var(--eg-ink-4); border-radius: 2px; }
.eg-web .eg-format:hover { color: var(--eg-red-deep); border-color: var(--eg-red); }
.eg-web .eg-format-label { font-family: var(--eg-sans); font-size: var(--eg-w-fs-small); font-weight: 700; letter-spacing: var(--eg-track-caps); text-transform: uppercase; }
/* NO nowrap here. "Half-letter" needs ~126px at this size and the tile gives 75px
   in a 2-up E2 card, so nowrap does not shorten the word, it just spills it out of
   the card frame. It wraps on its own hyphen instead; the tile has room, and the
   other three labels are single-line anyway. Re-measure inside a 21rem E2 card,
   never in the standalone E3 specimen, which is always wide enough to look fine. */
.eg-web .eg-format-hint { font-family: var(--eg-sans); font-size: var(--eg-w-fs-tiny); color: var(--eg-ink-3); }
.eg-web .eg-format-size { font-family: var(--eg-sans); font-size: var(--eg-w-fs-tiny); color: var(--eg-ink-4); font-variant-numeric: tabular-nums; }

/* ================= F1  Game landing action row ================= */
.eg-web .eg-actions { display: flex; flex-direction: column; gap: var(--eg-w-sp-4); padding: var(--eg-w-sp-5) 0; }
.eg-web .eg-actions-primary { align-self: stretch; min-height: 56px; font-size: var(--eg-w-fs-small); }
/* ALL FOUR TILES ARE ONE SIZE (Greg, 2026-08-06). The labels are one and two
   lines, so without a declared row the 2x2 printed two different box heights and
   the four subordinate acts stopped reading as one set. grid-auto-rows: 1fr makes
   every row the tallest tile's height at every width. */
.eg-web .eg-actions-secondary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: var(--eg-w-sp-3); }
@container eg-web (min-width: 640px) {
  .eg-web .eg-actions { flex-direction: row; align-items: stretch; gap: var(--eg-w-sp-5); }
  /* the primary matches the height of the tile block beside it (Greg, 2026-08-06):
     centred, it sat short of them and read as a different kind of object. */
  .eg-web .eg-actions-primary { align-self: stretch; flex: 0 0 auto; }
  .eg-web .eg-actions-secondary { flex: 1 1 auto; grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.eg-web .eg-action { display: flex; flex-direction: column; gap: var(--eg-w-sp-1); min-height: 56px; padding: var(--eg-w-sp-3); text-decoration: none; color: var(--eg-ink); background: transparent; border: 1px solid var(--eg-ink-4); border-top-width: 2px; border-radius: 0 0 2px 2px; }
.eg-web .eg-action:hover { color: var(--eg-red-deep); background: var(--eg-paper-2); }
.eg-web .eg-action-kind { font-family: var(--eg-sans); font-size: var(--eg-w-fs-tiny); font-weight: 600; letter-spacing: var(--eg-track-caps); text-transform: uppercase; color: var(--eg-ink-3); }
.eg-web .eg-action-label { font-family: var(--eg-sans); font-size: var(--eg-w-fs-small); font-weight: 600; line-height: 1.25; }
/* the kind is the colour of the top rule; no icons, the house has none */
.eg-web .eg-action--tool { border-top-color: var(--eg-red); }
.eg-web .eg-action--printable { border-top-color: var(--eg-ink); }
.eg-web .eg-action--practice { border-top-color: var(--eg-stone); }
.eg-web .eg-action--reference { border-top-color: var(--eg-rule); }

/* ================= F2  Game meta strip ================= */
.eg-web .eg-gmeta { margin: 0; padding: var(--eg-w-sp-4) 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: var(--eg-w-sp-4); border-top: 1px solid var(--eg-rule); border-bottom: 1px solid var(--eg-rule); }
.eg-web .eg-gmeta-item { padding-left: var(--eg-w-sp-4); border-left: 1px solid var(--eg-rule); }
.eg-web .eg-gmeta-item:first-child { padding-left: 0; border-left: 0; }
.eg-web .eg-gmeta-item dt { 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-gmeta-item dd { margin: var(--eg-w-sp-1) 0 0; font-family: var(--eg-sans); font-size: var(--eg-w-fs-h3); font-weight: 700; color: var(--eg-ink); font-variant-numeric: tabular-nums; }
.eg-web .eg-gmeta-item dd .eg-dot { margin-left: 0; }
.eg-web .eg-gmeta-item dd .eg-dot + .eg-dot { margin-left: 3px; }

/* F2 grid fix (Greg, 2026-08-19): below 640 the strip is a fixed two-up and
   only even cells carry the divider, so every wrapped row starts bare,
   uniformly. THE SAME MORNING'S VOICE SUBORDINATION IS RETIRED, ruled later
   the same day: with the T2 fluid scale in force the title cannot be
   out-shouted, and Greg ruled red FREE in the strip, size uncapped. Values
   keep the library voice (h3 size, 700); the linking value is a red link. */
.eg-web .eg-gmeta { grid-template-columns: repeat(2, 1fr); }
.eg-web .eg-gmeta-item { border-left: 0; padding-left: 0; }
.eg-web .eg-gmeta-item:nth-child(even) { border-left: 1px solid var(--eg-rule); padding-left: var(--eg-w-sp-4); }
@container eg-web (min-width: 640px) {
  .eg-web .eg-gmeta { grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); }
  .eg-web .eg-gmeta-item { border-left: 1px solid var(--eg-rule); padding-left: var(--eg-w-sp-4); }
  .eg-web .eg-gmeta-item:first-child { border-left: 0; padding-left: 0; }
}
.eg-web .eg-gmeta-item dd a { color: var(--eg-red); text-decoration: underline; text-decoration-color: var(--eg-red-wash); text-underline-offset: var(--eg-link-offset); }
.eg-web .eg-gmeta-item dd a:hover { color: var(--eg-red-deep); text-decoration-color: currentColor; }

/* ================= N6  Page head (T1a, RULED 2026-08-19) ================= */
/* The ONE page top for every template, the archive band grown universal.
   The paper-2 band paints FULL BLEED across .eg-web; the text keeps the
   grid's left edge. Archives put the count in the eyebrow, singles the
   section (GAME, DECK, RULES). Native name on its own line (2026-08-06 law).
   Supersedes A1's band as the page top. */
.eg-web .eg-pagehead { background: var(--eg-paper-2); border-bottom: 1px solid var(--eg-ink-4); }
.eg-web .eg-pagehead-inner { max-width: var(--eg-w-page-max); margin: 0 auto; padding: var(--eg-w-sp-6) var(--eg-w-sp-4) var(--eg-w-sp-5); }
.eg-web .eg-pagehead-eyebrow { margin: 0 0 var(--eg-w-sp-2); font-family: var(--eg-sans); font-size: var(--eg-w-fs-label); font-weight: 600; line-height: var(--eg-w-lh-label); letter-spacing: var(--eg-track-caps); text-transform: uppercase; color: var(--eg-red-deep); }
.eg-web .eg-pagehead-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); text-wrap: balance; }
.eg-web .eg-pagehead-native { margin: var(--eg-w-sp-2) 0 0; font-family: var(--eg-serif); font-style: italic; font-size: var(--eg-w-fs-h3); line-height: var(--eg-w-lh-h3); color: var(--eg-ink-2); letter-spacing: 0.04em; }
.eg-web .eg-pagehead-stand { margin: var(--eg-w-sp-3) 0 0; max-width: 54ch; font-family: var(--eg-serif); font-size: var(--eg-w-fs-lead); line-height: var(--eg-w-lh-lead); color: var(--eg-ink-2); text-wrap: pretty; }
.eg-web .eg-pagehead-facts { margin-top: var(--eg-w-sp-5); }
.eg-web .eg-pagehead-facts .eg-gmeta { border-bottom: 0; padding-bottom: 0; }
@container eg-web (min-width: 640px) { .eg-web .eg-pagehead-inner { padding: var(--eg-w-sp-7) var(--eg-w-sp-5) var(--eg-w-sp-6); } }


/* ================================================================
   WEB LAYER, ADDENDUM C  (2026-08-05)
   P1-P4  the newsletter prompt, the one surface that interrupts.
   G8-email-cta is unchanged and stays the INLINE ask; this is the
   overlay, and the two never appear on one screen at once.
   ONE SHELL, THREE COPY SETS. That is the brief's own preference and
   it is the right one: if the three A/B/C versions also looked
   different, the result could not tell us whether the winner won on
   message or on design. Three treatments would make it a design test.
   MOBILE IS THE PRIMARY CASE, so the bottom sheet is the BASE
   composition and the centred dialog is the override at 640, not the
   other way round.
   THE DECLINE IS THE SAME OBJECT AS THE ACCEPT: same row, same cell,
   same height. There is no tiny grey x anywhere in this block, and
   there is no shaming decline line.
   ================================================================ */

/* P4 lives here, and it is two rules on the document element, the only
   selectors in this bundle outside .eg-web. They are deliberate: a page cannot
   stop its own scrollbar from vanishing from inside a descendant. The gutter is
   reserved ALWAYS, so locking the page when the prompt opens moves nothing, and
   unlocking it on decline moves nothing back. Nothing else is left behind: the
   prompt is position: fixed, so it never occupied flow, and it leaves no
   residual bar, chip or placeholder. Declining is remembered by the theme, not
   by a mark on the page. */
html { scrollbar-gutter: stable; }
html.eg-prompt-open { overflow: hidden; }

/* ================= P2  Prompt shell, mobile (the base) ================= */
.eg-web .eg-prompt { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; justify-content: flex-end; }
.eg-web .eg-prompt[hidden] { display: none; }
/* flat wash, never a blur: the house has no frosted glass */
.eg-web .eg-prompt-scrim { position: absolute; inset: 0; background: rgba(20,17,15,0.55); }
.eg-web .eg-prompt-panel {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: var(--eg-w-sp-4);
  width: 100%; max-height: 88%; overflow-y: auto;
  padding: var(--eg-w-sp-3) var(--eg-w-sp-5) var(--eg-w-sp-6);
  background: var(--eg-paper);
  border-top: 3px solid var(--eg-red);
  box-shadow: 0 -24px 60px -28px rgba(20,17,15,0.5);
}
/* the panel takes focus on open; the ring belongs on the controls, not on a
   surface the width of the screen */
.eg-web .eg-prompt-panel:focus { outline: none; }
/* the swipe affordance, and an affordance only: the decline button is the
   guaranteed way out and the only one a keyboard needs */
.eg-web .eg-prompt-grip { align-self: center; width: 44px; height: 4px; border-radius: 2px; background: var(--eg-ink-4); }
.eg-web .eg-prompt-head { 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); text-wrap: pretty; }
.eg-web .eg-prompt-body { 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); text-wrap: pretty; }
.eg-web .eg-prompt-form { display: flex; flex-direction: column; gap: var(--eg-w-sp-4); margin: 0; }
.eg-web .eg-prompt-field { display: flex; flex-direction: column; gap: var(--eg-w-sp-2); }
.eg-web .eg-prompt-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-3); }
/* EQUAL WEIGHT, EQUAL TARGET: two cells of one grid, both 52px, so the decline
   cannot be the harder of the two to hit. Colour carries which is which, and
   nothing else does. */
.eg-web .eg-prompt-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--eg-w-sp-3); }
.eg-web .eg-prompt-actions .eg-btn { width: 100%; min-height: 52px; padding: 0 var(--eg-w-sp-3); font-size: var(--eg-w-fs-small); }
/* P3 has one act left, so it takes the whole row rather than half of it */
.eg-web .eg-prompt-actions--one { grid-template-columns: minmax(0, 1fr); }
.eg-web .eg-prompt-confirm { margin: 0; }
.eg-web .eg-prompt-fine { margin: 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-prompt-fine a { color: var(--eg-ink-3); }

/* ================= P1  Prompt shell, desktop (the override) ================= */
/* A RESTING SIZE THAT DOES NOT DOMINATE 1280: the panel is capped at 30rem and
   never grows with the viewport, so it reads as a card laid on the page rather
   than as a second page. Square top under the 3px red rule, the same way every
   other rule-topped block in this library is built. */
@container eg-web (min-width: 640px) {
  .eg-web .eg-prompt { align-items: center; justify-content: center; padding: var(--eg-w-sp-6); }
  .eg-web .eg-prompt-panel {
    max-width: 30rem; max-height: 100%;
    padding: var(--eg-w-sp-6);
    border: 1px solid var(--eg-ink-4); border-top: 3px solid var(--eg-red);
    border-radius: 0 0 var(--eg-w-radius-card) var(--eg-w-radius-card);
    box-shadow: 0 24px 60px -28px rgba(20,17,15,0.5);
  }
  .eg-web .eg-prompt-grip { display: none; }
}


/* ================================================================
   WEB LAYER, ADDENDUM D  (2026-08-06)
   F3  the family tree. /family-tree/ was the last book destination
   with no block to render it.
   IT IS A GENEALOGICAL TABLE, NOT AN ORG CHART. A centre-out chart
   with connectors drawn between branches is what reads as software
   rather than as this book, and it is also the thing that cannot
   survive 360: seven nodes and four branch labels do not sit side by
   side on a phone at any type size this house prints. So THE REGION
   LABEL IS THE CONNECTOR between branches, and a drawn connector is
   spent on one relation only, the one a label cannot carry: a game
   descended from another game. Nothing has to be redrawn at 360,
   because nothing was drawn across a branch in the first place.
   THE BRANCH READS FIRST, by type size and by rule weight: the region
   is Playfair at h1 over a 2px ink rule, a game name is h3 on a quiet
   paper-2 plate. Four bands, then seven names.
   DEPTH IS NOT BAKED IN. Breadth is the grid, depth is the nesting,
   and the two never fight because a child list lives INSIDE its
   parent's grid cell and is always vertical.
   ================================================================ */

.eg-web .eg-ftree {
  /* THE TICK AND THE SPINE ARE ONE SETTING, and each names the other: the tick is
     where the elbow turns into the child plate, and the last child stops its spine
     at exactly that height. Move one without the other and the elbow either floats
     off the spine or the spine overshoots the last child. */
  --eg-ftree-tick: 36px;     /* sp-3 above the child plate + 24px, the centre of its first line */
  --eg-ftree-indent: 30px;   /* spine at 12px, elbow 18px wide, child plate at 30px */
  max-width: var(--eg-w-page-max); margin: 0 auto;
  padding: var(--eg-w-sp-6) var(--eg-w-sp-4) var(--eg-w-sp-8);
  display: flex; flex-direction: column; gap: var(--eg-w-sp-6);
}
.eg-web .eg-ftree-branch { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--eg-w-sp-4); padding-top: var(--eg-w-sp-3); border-top: 2px solid var(--eg-ink); }
.eg-web .eg-ftree-region { margin: 0; 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); text-wrap: pretty; }
.eg-web .eg-ftree-count { display: block; margin-top: 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-ink-3); }
.eg-web .eg-ftree-nodes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--eg-w-sp-3); align-content: start; }

/* the node. Modelled on the E3 format tile, not on a UI card: a plate you press,
   quiet fill, hairline border, red on hover. card-white is reserved for card faces
   and write-in pads and is not available here. */
.eg-web .eg-ftree-plate { display: flex; flex-direction: column; gap: var(--eg-w-sp-2); min-height: 44px; padding: var(--eg-w-sp-3) var(--eg-w-sp-4); text-decoration: none; color: var(--eg-ink); background: var(--eg-paper-2); border: 1px solid var(--eg-ink-4); border-radius: 2px; }
.eg-web .eg-ftree-plate:hover { color: var(--eg-red-deep); border-color: var(--eg-red); }
.eg-web .eg-ftree-name { font-family: var(--eg-display); font-weight: 700; font-size: var(--eg-w-fs-h3); line-height: var(--eg-w-lh-h3); text-wrap: pretty; }
/* a native name is a gloss on a heading, never a heading. Same voice as
   eg-toc-native and eg-cs-native in the book, and it stays quiet on hover.
   IT SITS ON ITS OWN LINE, ALWAYS (Greg, 2026-08-06). Inline, it followed the
   English name on line one for a short name and wrapped to line two for a long
   one, so seven nodes in one list were set three different ways by accident. A
   gloss on its own line is the same shape at every name length. */
.eg-web .eg-ftree-native { display: block; font-family: var(--eg-serif); font-style: italic; font-weight: 400; font-size: var(--eg-w-fs-small); line-height: var(--eg-w-lh-small); color: var(--eg-ink-2); }
.eg-web .eg-ftree-facts { 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-label); color: var(--eg-ink-3); font-variant-numeric: tabular-nums; }
.eg-web .eg-ftree-diff { display: inline-flex; align-items: center; }
.eg-web .eg-ftree-diff .eg-dot { margin-left: 0; }
.eg-web .eg-ftree-diff .eg-dot + .eg-dot { margin-left: 3px; }

/* THE ONE DRAWN RELATION: a game descended from another game.
   The spine is a background gradient on the CHILD, not a border on the list, so
   the last child stops it at the tick with one declaration and no :has(). Row gap
   is zero here and the vertical space lives in the child's padding-top, which is
   what keeps the spine continuous from the parent plate down through every child:
   a second child needs no second rule. */
.eg-web .eg-ftree-sub { list-style: none; margin: 0; padding: 0; display: block; }
.eg-web .eg-ftree-sub > .eg-ftree-node {
  position: relative;
  padding: var(--eg-w-sp-3) 0 0 var(--eg-ftree-indent);
  background: linear-gradient(var(--eg-ink-4), var(--eg-ink-4)) 12px 0 / 1px 100% no-repeat;
}
.eg-web .eg-ftree-sub > .eg-ftree-node:last-child { background-size: 1px var(--eg-ftree-tick); }
.eg-web .eg-ftree-sub > .eg-ftree-node::before { content: ""; position: absolute; left: 12px; top: var(--eg-ftree-tick); width: 18px; border-top: 1px solid var(--eg-ink-4); }

@container eg-web (min-width: 640px) {   /* mirrors --eg-bp-sm */
  .eg-web .eg-ftree { padding: var(--eg-w-sp-7) var(--eg-w-sp-5) var(--eg-w-sp-8); gap: var(--eg-w-sp-7); }
  /* BREADTH IS THE GRID, and the cells are CAPPED. A node plate is an object of a
     size, so a branch holding one game must not print a plate four times the width
     of a branch holding three; auto-fill plus a 17rem maximum keeps every game the
     same object across all four branches. THE 17rem IS MEASURED, NOT PICKED: at
     1280 the label column takes 15rem and the row left over holds 868px, which is
     three 17rem cells and their two gaps (848px) but only two cells at 20rem, and a
     branch of three games belongs on ONE row. */
  .eg-web .eg-ftree-branch > .eg-ftree-nodes { grid-template-columns: repeat(auto-fill, minmax(15rem, 17rem)); gap: var(--eg-w-sp-4); }
}
@container eg-web (min-width: 1024px) {   /* mirrors --eg-bp-lg */
  /* the four branches become four labelled rows of one table, which is the reading
     the page exists for: region first, names second. */
  .eg-web .eg-ftree-branch { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--eg-w-sp-5); }
}


/* ============================================================
   THE FIGURE LAW ON THE WEB (round 6, P6, 2026-08-06)
   ============================================================
   Both serif faces default to OLD-STYLE figures, so a card count, a puzzle id
   and a score have been setting at three different heights inside one number,
   on the site as well as in the book. The ruling is the deck's: THE PRINTED
   CARD INDICES ARE LINING FIGURES, so the whole house is lining figures.
   Same two rules as the book bundle, scoped to .eg-web. Tabular on tables only:
   a value column that does not align is the same complaint one row down, and
   tabular figures inside a sentence set word spacing badly. */
.eg-web {
  font-variant-numeric: lining-nums;
  font-feature-settings: "lnum" 1;
}
.eg-web table,
.eg-web .eg-tabular {
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
}


/* ============================================================
   C1-C3  THE CONTRACT FAMILY (brief R4b, 2026-08-22)
   ============================================================
   Greg's finding, from the site walk-through: "the details of your contracts
   are probably right but they are not helpful, you cannot scan all of them by
   looking once", and "mixing the expansion in is really bad."

   Two complaints, and the second is the harder one. A filter that only HIDES
   rows still lets a reader with two scopes on read one interleaved ladder, so
   SCOPE IS THE TABLE'S STRUCTURE, NOT A COLUMN: one table, one tbody per
   scope, each tbody introduced by a labelled band row. Rows run by VP
   ascending INSIDE a band; the bands run beginner, advanced, expansion.
   Turning a scope on appends its band and can never interleave it. That is the
   print table's own all-pass sub-table idea (2026-07-26) with the columns kept
   in ONE grid, so all three bands scan against one set of widths, which three
   stacked tables could never do.

   NO COLOUR CODES THE BANDS. A band's identity is the WORD plus a 2px ink
   rule. Red on a band reads as an alert, which this house has now ruled twice
   (the all-pass band 2026-07-26, the G9 highlight column), and three tinted
   bands would put three background colours in one table against a house
   maximum of two.

   VOCABULARY: the brief says KITTY and MULTIPLIER. The house word is TALON,
   locked in the print contract table and the glossary, and tarok contracts
   carry no multiplier at all: the doubling lives in the ANNOUNCEMENTS, so that
   is what the optional fifth column states. A block that renames the house's
   own nouns makes the site and the book two vocabularies.
   ============================================================ */

/* ================= C1  Contract table ================= */
.eg-web .eg-ctw { margin: var(--eg-w-sp-6) 0; }
.eg-web .eg-ctwtable { width: 100%; border-collapse: collapse; font-family: var(--eg-sans); }
.eg-web .eg-ctw-caption { caption-side: top; text-align: left; margin: 0 0 var(--eg-w-sp-3); font-family: var(--eg-sans); font-size: var(--eg-w-fs-label); font-weight: 700; letter-spacing: var(--eg-track-caps); text-transform: uppercase; color: var(--eg-ink-3); }
.eg-web .eg-ctwtable th, .eg-web .eg-ctwtable td { padding: var(--eg-w-sp-3) var(--eg-w-sp-4); text-align: center; vertical-align: top; border-bottom: 1px solid var(--eg-rule); }
.eg-web .eg-ctwtable thead th { font-size: var(--eg-w-fs-label); font-weight: 700; letter-spacing: var(--eg-track-caps); text-transform: uppercase; color: var(--eg-ink); border-bottom: 2px solid var(--eg-red); white-space: nowrap; }
.eg-web .eg-ctwtable tbody th { font-size: var(--eg-w-fs-small); font-weight: 600; color: var(--eg-ink); }
.eg-web .eg-ctwtable tbody td { font-size: var(--eg-w-fs-small); line-height: var(--eg-w-lh-small); color: var(--eg-ink-2); }

/* THE BAND ROW is a heading that spans the table, not a cell of data, so it is
   the one LEFT-ALIGNED row in a house table. Its 2px ink rule is what makes
   "one look" survive two scopes being on at once. */
.eg-web .eg-ctw-bandrow th { text-align: left; padding-top: var(--eg-w-sp-5); background: var(--eg-paper-2); border-top: 2px solid var(--eg-ink); border-bottom: 1px solid var(--eg-rule); font-size: var(--eg-w-fs-label); font-weight: 700; letter-spacing: var(--eg-track-caps); text-transform: uppercase; color: var(--eg-ink); }
.eg-web .eg-ctw-band:first-of-type .eg-ctw-bandrow th { border-top: 0; padding-top: var(--eg-w-sp-4); }
.eg-web .eg-ctw-bandnote { display: block; margin-top: var(--eg-w-sp-1); font-family: var(--eg-serif); font-size: var(--eg-w-fs-small); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--eg-ink-3); }

/* the contract name is the row's label and the link into its C3 detail. Display
   serif, because a name is the one thing in this table that is read rather than
   compared. */
.eg-web .eg-ctwtable tbody th.eg-ctw-name { font-family: var(--eg-display); font-weight: 700; font-size: var(--eg-w-fs-body); line-height: 1.3; color: var(--eg-ink); }
.eg-web .eg-ctw-name a { color: var(--eg-ink); text-decoration: none; border-bottom: 1px solid var(--eg-rule); }
.eg-web .eg-ctw-name a:hover { color: var(--eg-red-deep); border-bottom-color: var(--eg-red); }
.eg-web .eg-ctw-note { display: block; margin-top: var(--eg-w-sp-1); font-family: var(--eg-serif); font-size: var(--eg-w-fs-label); font-weight: 400; line-height: var(--eg-w-lh-small); color: var(--eg-ink-3); }
.eg-web .eg-ctwtable td.eg-ctw-vp { font-weight: 700; color: var(--eg-ink); font-variant-numeric: lining-nums tabular-nums; }
.eg-web .eg-ctwtable td.eg-ctw-quiet { color: var(--eg-ink-3); }
.eg-web .eg-ctw-band:last-of-type tr:last-child th, .eg-web .eg-ctw-band:last-of-type tr:last-child td { border-bottom: 0; }
.eg-web .eg-ctw-legend { margin: var(--eg-w-sp-3) 0 0; font-family: var(--eg-sans); font-size: var(--eg-w-fs-label); line-height: var(--eg-w-lh-small); color: var(--eg-ink-3); }

/* ================= C2  Scope filter ================= */
/* the chips themselves ARE the A2 facet, reused on purpose: same control, same
   mark law, same words, and this block adds only the row it sits in. */
.eg-web .eg-scopes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--eg-w-sp-2) var(--eg-w-sp-3); padding: var(--eg-w-sp-3) 0; border-top: 1px solid var(--eg-rule); border-bottom: 1px solid var(--eg-rule); }
.eg-web .eg-scopes-label { flex: 0 0 auto; 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-scopes-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--eg-w-sp-2); }
.eg-web .eg-scopes-note { flex: 1 0 100%; 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-3); text-wrap: pretty; }
.eg-web .eg-scopes + .eg-ctw { margin-top: var(--eg-w-sp-5); }

/* ================= C3  Contract detail disclosure ================= */
.eg-web .eg-cdetails { margin: var(--eg-w-sp-6) 0; border-top: 1px solid var(--eg-rule); }
.eg-web .eg-cdetail { border-bottom: 1px solid var(--eg-rule); scroll-margin-top: var(--eg-w-sp-6); }
.eg-web .eg-cdetail-sum { display: flex; align-items: flex-start; gap: var(--eg-w-sp-4); padding: var(--eg-w-sp-4) 0; cursor: pointer; list-style: none; }
.eg-web .eg-cdetail-sum::-webkit-details-marker { display: none; }
.eg-web .eg-cdetail-sum::marker { content: ""; }
.eg-web .eg-cdetail-text { flex: 1 1 auto; min-width: 0; }
.eg-web .eg-cdetail-name { display: block; font-family: var(--eg-display); font-weight: 700; font-size: var(--eg-w-fs-h3); line-height: var(--eg-w-lh-h3); color: var(--eg-ink); }
.eg-web .eg-cdetail-sum:hover .eg-cdetail-name { color: var(--eg-red-deep); }
.eg-web .eg-cdetail-scope { 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); }
/* the GIST is what keeps a closed item readable and indexable, so it is never
   the thing that gets hidden. */
.eg-web .eg-cdetail-gist { display: block; margin-top: var(--eg-w-sp-1); font-family: var(--eg-serif); font-size: var(--eg-w-fs-body); line-height: var(--eg-w-lh-body); color: var(--eg-ink-2); text-wrap: pretty; }
.eg-web .eg-cdetail-vp { flex: 0 0 auto; padding-top: 5px; 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-ink-3); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.eg-web .eg-cdetail-mark { flex: 0 0 auto; width: 9px; height: 9px; margin: 10px 3px 0 0; border-right: 2px solid var(--eg-red); border-bottom: 2px solid var(--eg-red); transform: rotate(45deg); transition: transform 0.18s ease; }
.eg-web .eg-cdetail[open] .eg-cdetail-mark { transform: rotate(225deg); }
.eg-web .eg-cdetail-body { padding: 0 0 var(--eg-w-sp-5); max-width: 62ch; }
.eg-web .eg-cdetail-body > * { margin: 0; font-family: var(--eg-serif); font-size: var(--eg-w-fs-body); line-height: var(--eg-w-lh-body); color: var(--eg-ink-2); }
.eg-web .eg-cdetail-body > * + * { margin-top: var(--eg-w-sp-4); }

/* C1 BELOW 640: THE ROWS STACK. Written after the base rules on purpose, same
   specificity, so the later declaration wins (the G17 note of 2026-08-06).
   Each contract becomes a card with its name as the heading and one labelled
   line per column; the labels come from data-label because the column set
   varies per game, so there is no fixed head for a stacked view to read. */
@container eg-web (max-width: 639px) {
  .eg-web .eg-ctwtable, .eg-web .eg-ctwtable tbody, .eg-web .eg-ctwtable tr { display: block; }
  .eg-web .eg-ctw-caption { display: block; }
  .eg-web .eg-ctwtable thead { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .eg-web .eg-ctwtable th, .eg-web .eg-ctwtable td { display: flex; align-items: baseline; justify-content: space-between; gap: var(--eg-w-sp-4); padding: var(--eg-w-sp-2) 0; text-align: right; }
  .eg-web .eg-ctwtable td::before { content: attr(data-label); flex: 0 0 auto; font-family: var(--eg-sans); font-size: var(--eg-w-fs-label); font-weight: 600; letter-spacing: var(--eg-track-caps); text-transform: uppercase; color: var(--eg-ink-3); text-align: left; }
  .eg-web .eg-ctw-row { margin-bottom: var(--eg-w-sp-3); padding: 0 var(--eg-w-sp-4) var(--eg-w-sp-3); background: var(--eg-card-white); border: 1px solid var(--eg-ink-4); border-radius: var(--eg-w-radius-card); }
  .eg-web .eg-ctwtable tbody th.eg-ctw-name { display: block; padding: var(--eg-w-sp-3) 0 var(--eg-w-sp-2); text-align: left; border-bottom: 1px solid var(--eg-ink-4); font-size: var(--eg-w-fs-h3); line-height: var(--eg-w-lh-h3); }
  .eg-web .eg-ctw-row td:last-child { border-bottom: 0; }
  .eg-web .eg-ctw-bandrow th { display: block; margin-bottom: var(--eg-w-sp-3); padding: var(--eg-w-sp-3); text-align: left; }
  .eg-web .eg-ctw-band:first-of-type .eg-ctw-bandrow th { padding-top: var(--eg-w-sp-3); }
  /* nothing to scroll once the rows have stacked */
  .eg-web .eg-ctw .eg-cmp-scroll { overflow-x: visible; padding-bottom: 0; }
}


/* ================================================================
   A8 / A9  Puzzle category bands  (2026-08-22, brief R4d)

   Greg on the archive: "super chaotic. I like the filter, but this should not
   lead to single puzzles but categories of puzzles, and every category gets its
   own block or area." So the archive is FIVE BANDS, one per type, and a band is
   an AREA: a 2px ink rule, the type's name, one sentence, and a row of A7 cards
   that runs off the edge of the column.

   THE RULE IS THE BAND'S IDENTITY, exactly as it is in the C1 contract table
   (2026-08-22): named tiers a reader must not confuse are carried by a label and
   a 2px ink rule, never by a tint and never by a colour code. Five tinted slabs
   would also break the house two-background maximum, and a colour per type would
   invent five meanings the words already carry.

   NO FADE OVER THE CARDS, and this is a departure from the interim. A gradient
   wash on the trailing edge lands on a LIVE LINK: a puzzle card whose prompt
   fades out reads as disabled, and the house already spends exactly that signal
   on the opposite meaning (eg-facet--none: quiet ink, dead pointer, mark law
   2026-08-19). The cue is instead three things that cost the content nothing:
   the card SLICED by the column edge (which is what --eg-w-qcard is measured to
   guarantee at all three widths), the house scroll strip's thin red thumb (D3,
   K1, G9 already), and the tail plate that names where the rest of the category
   lives. The row's end is a DESTINATION, not a fade.
   ================================================================ */

/* ================= A9  Category intro ================= */
.eg-web .eg-qintro { display: flex; flex-direction: column; gap: var(--eg-w-sp-3); padding: var(--eg-w-sp-6) var(--eg-w-sp-4) var(--eg-w-sp-4); }
.eg-web .eg-qintro-count { margin: 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-3); font-variant-numeric: tabular-nums; }
.eg-web .eg-qintro-title { margin: 0; font-family: var(--eg-display); font-weight: 800; font-size: var(--eg-w-fs-h2); line-height: var(--eg-w-lh-h2); color: var(--eg-ink); }
.eg-web .eg-qintro-line { margin: 0; max-width: 54ch; font-family: var(--eg-serif); font-size: var(--eg-w-fs-lead); line-height: var(--eg-w-lh-lead); color: var(--eg-ink-2); text-wrap: pretty; }
.eg-web .eg-qintro-all { align-self: flex-start; font-family: var(--eg-sans); font-size: var(--eg-w-fs-small); font-weight: 600; }
/* the destination sits on the title's baseline once there is room for it, so the
   sentence keeps its own measure and the link is not something the eye has to
   come back down for. */
@container eg-web (min-width: 640px) {
  .eg-web .eg-qintro {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "count count" "title all" "line line";
    column-gap: var(--eg-w-sp-5); padding: var(--eg-w-sp-7) var(--eg-w-sp-5) var(--eg-w-sp-4);
  }
  .eg-web .eg-qintro-count { grid-area: count; }
  .eg-web .eg-qintro-title { grid-area: title; }
  .eg-web .eg-qintro-line  { grid-area: line; }
  .eg-web .eg-qintro-all   { grid-area: all; align-self: baseline; justify-self: end; }
}

/* ================= A8  Category band ================= */
.eg-web .eg-qband { max-width: var(--eg-w-page-max); margin: 0 auto; border-top: 2px solid var(--eg-ink); scroll-margin-top: var(--eg-w-sp-6); }
.eg-web .eg-qband-scroll { overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scroll-padding-inline-start: var(--eg-w-sp-4); padding: 0 var(--eg-w-sp-4) var(--eg-w-sp-6); }
.eg-web .eg-qband-scroll::-webkit-scrollbar { height: 4px; }
.eg-web .eg-qband-scroll::-webkit-scrollbar-thumb { background: var(--eg-red); }
.eg-web .eg-qband-row { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; gap: var(--eg-w-gap-grid); }
/* the card width is a TOKEN, and the min() is what makes one declaration serve
   all three widths: at 640 and up 84cqw is never the smaller value, so the row
   is always the measured 336px; at 360 the card gives way to the viewport
   instead of overhanging the page padding. */
.eg-web .eg-qband-item { flex: 0 0 min(var(--eg-w-qcard), 84cqw); display: flex; scroll-snap-align: start; }
.eg-web .eg-qband-item > * { width: 100%; }
@container eg-web (min-width: 640px) {
  .eg-web .eg-qband-scroll { padding: 0 var(--eg-w-sp-5) var(--eg-w-sp-7); scroll-padding-inline-start: var(--eg-w-sp-5); }
}

/* the tail plate: the row's end is a destination. Half a card wide so it cannot
   be mistaken for a puzzle, paper-2 so it reads as the shelf rather than the
   stock, and it carries the same href as the intro's link for the reader who
   answered the row by scrolling it. */
.eg-web .eg-qband-item--all { flex: 0 0 min(12rem, 48cqw); }
.eg-web .eg-qmore { display: flex; flex-direction: column; justify-content: center; gap: var(--eg-w-sp-2); width: 100%; padding: var(--eg-w-sp-5) var(--eg-w-sp-4); text-align: center; text-decoration: none; color: inherit; background: var(--eg-paper-2); border: 1px solid var(--eg-ink-4); border-radius: var(--eg-w-radius-card); }
.eg-web .eg-qmore:hover { border-color: var(--eg-red); }
.eg-web .eg-qmore:hover .eg-qmore-label { color: var(--eg-red-deep); }
.eg-web .eg-qmore-count { font-family: var(--eg-display); font-weight: 700; font-size: var(--eg-w-fs-h1); line-height: 1; color: var(--eg-ink); font-variant-numeric: tabular-nums; }
.eg-web .eg-qmore-label { font-family: var(--eg-sans); font-size: var(--eg-w-fs-small); font-weight: 600; line-height: 1.35; color: var(--eg-ink-2); }


/* ---- THE BINDING UNDERLINE ON THE SITE (R7 item 7, 2026-08-30) ----
   The one R7 item that crosses the layer boundary, and it crosses because it
   is not a composition: it is an inline type treatment for a word, so the
   print/web law (never paste a print BLOCK into .eg-web) does not reach it.
   The site carries the same rules prose, so it carries the same two marks:
   bold for specific words, the underline for the word that binds.
   Screen values, not the print ones. The rule is drawn with
   text-decoration here, which the browser supports properly and which
   survives selection and reflow; a border-bottom on an inline that wraps
   mid-phrase would draw a rule under the whole first line. The print side
   uses the border because WeasyPrint has no offset or thickness property,
   and the underlined string there is always one word.
   BOLD, NEVER UNDERLINE (Greg, 2026-09-12), so all of the above is now the
   record of how this mark used to be drawn. The binding word is BOLD on this
   layer too: a house type law is one law on both layers, whatever the
   compositions do differently, or a reader who follows a QR from the page to
   the site meets two vocabularies for one idea.
   NEVER RED still holds. And the old "never on a link" clause now reads the
   other way round: a binding word inside link text takes bold, and the LINK
   keeps its underline, which is the one underline left in the house.
   THE WEB LINK KEEPS ITS UNDERLINE: RULED 2026-09-12, Greg, "yes weblinks are
   ok." So the house type law has exactly one exception, and it is a layer
   exception rather than a case-by-case one: ON SCREEN A LINK NEEDS AN
   AFFORDANCE THAT IS NOT COLOUR ALONE, and print and web are different
   compositions by standing rule. The print address gave its line up for bold
   because it has three other tells (one Playfair string, the form
   gotarok.com/NN, the registry number as the only red in the line) and no
   hover; a web link has hover and nothing else.
   THE EXCEPTION IS THE LINK, NOT THE LAYER: everything else on this layer obeys
   bold-never-underline, the binding word included, so a reader who follows a QR
   from the page to the site meets one vocabulary for rules and the only line
   they see is one they can click. */
.eg-web .eg-must { font-weight: 600; }
.eg-web a .eg-must { text-decoration: none; }