/* ============================================================
 * page-play.css — the Play hub /play/, `[capriastro_play_hub]` (Capriastro_Draws::render_play_hub).
 *
 * CD D16 (desktop, updated 2026-09-25; the owner's approved text verbatim): the hero · two large cards (Ask the
 * Tarot on the ink with the card back · Ask the Runes on white with a stone) · "All the draws" (four tiles, the two daily
 * ones with the visitor's own state) · "The libraries" (two deep-cream panels) · the dashed "Coming soon" box.
 *
 * THE HOVER (CD note 2026-09-25, amended by the owner the same day; ≥1024 with a fine pointer only): the box stays
 * still; only the object under the cursor reacts — the tarot card lifts 8 px and its violet halo brightens and grows
 * (200 ms ease-out, no tilt); the stone lifts 5, takes the violet ring + a lighter picked-stone glow. The glyph never
 * changes colour. Each button hovers only under the cursor. Reduced motion: no movement, the glow only, a 150 ms fade.
 * Touch: none.
 *
 * Measured against the sheet at 1440. Token-only; the page's own sizes as local custom properties.
 * ============================================================ */

.cap-shell .cap-play2 {
  --cap-play2-card-h: 300px;
  --cap-play2-card-top: 40px;
  --cap-play2-copy-w: 305px;
  --cap-play2-copy-w-rune: 340px;
  --cap-play2-art-w: 78px;
  --cap-play2-art-h: 134px;
  --cap-play2-stone-w: 120px;
  --cap-play2-stone-h: 150px;
  --cap-play2-stone-r: 56px / 70px;
  --cap-play2-icon-w: 29px;
  --cap-play2-icon-h: 45px;
  --cap-play2-tile-h: 191px;
  --cap-play2-lib-h: 145px;
  background: var(--cap-color-bg);
  color: var(--cap-color-text);
  padding-bottom: var(--cap-space-xl);
}

/* ─── hero ────────────────────────────────────────────────── */
.cap-shell .cap-play2__hero { padding-top: var(--cap-space-after-header); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--cap-space-md); }
.cap-shell .cap-play2__h1 { margin: var(--cap-space-gap-4) 0 0; }
.cap-shell .cap-play2__lede { margin: var(--cap-space-gap-4) 0 0; font-size: var(--cap-type-card-lede); font-weight: 400; line-height: var(--cap-leading-serif-title); }

/* ─── the two large cards ─────────────────────────────────── */
.cap-shell .cap-play2__hero-cards { margin-top: calc(var(--cap-space-panel-pad) + var(--cap-space-gap-8)); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cap-gutter); }
.cap-shell .cap-play2__big { position: relative; display: flex; justify-content: space-between; height: var(--cap-play2-card-h); box-sizing: border-box; padding: var(--cap-play2-card-top) var(--cap-space-panel-pad) var(--cap-space-panel-pad); text-decoration: none; color: inherit; }
.cap-shell .cap-play2__big--tarot { background: var(--cap-color-text); color: var(--cap-color-on-ink); }
/* the tile is a link: hold its text colour against the shell's own a:hover (0,2,1) */
@media (hover: hover) { .cap-shell :is(a, .cap-press).cap-play2__tile:hover, .cap-shell :is(a, .cap-press).cap-play2__lib:hover { color: var(--cap-color-text); } }   /* a box under the press rule since 0.51.593 */
.cap-shell .cap-play2__big--rune .cap-play2__big-copy { max-width: var(--cap-play2-copy-w-rune); }
.cap-shell .cap-play2__big--rune { background: var(--cap-color-surface); border: var(--cap-border-hairline) solid var(--cap-color-line); }
.cap-shell .cap-play2__big-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--cap-space-gap-8); max-width: var(--cap-play2-copy-w); }
.cap-shell .cap-play2__eyebrow { font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-type-small); letter-spacing: var(--cap-track-eyebrow); line-height: var(--cap-leading-tight); text-transform: uppercase; color: var(--cap-color-primary); }
.cap-shell .cap-play2__big--tarot .cap-play2__eyebrow { color: var(--cap-color-primary-soft); }
/* the eyebrow is the draw's name ("Ask the Tarot" / "Ask the Runes", owner 2026-10-07) — plain text; the whole card is the press card's link to the draw */
.cap-shell .cap-play2__big-title { font-family: var(--cap-font-display-sm); font-weight: 800; font-size: var(--cap-type-play-title); line-height: var(--cap-leading-ui); letter-spacing: var(--cap-track-tight); }
.cap-shell .cap-play2__big-foot { margin-top: auto; display: flex; align-items: center; gap: var(--cap-space-md); }
.cap-shell .cap-play2__big--tarot .cap-play2__btn { background: var(--cap-color-bg); color: var(--cap-color-text); border-color: var(--cap-color-bg); }
.cap-shell .cap-play2__big--rune .cap-play2__btn { background: var(--cap-color-text); color: var(--cap-color-bg); border-color: var(--cap-color-text); }
@media (hover: hover) { .cap-shell .cap-play2__big:hover .cap-play2__btn { background: var(--cap-color-primary); border-color: var(--cap-color-primary); color: var(--cap-color-surface); } }   /* CD: a card that holds a button — the button takes the card's hover */
@media (hover: hover) { .cap-shell .cap-play2__big:hover { box-shadow: var(--cap-shadow-halo); } }   /* round 23 ruling 4 (owner): the large Play cards take the card hover — the glow; the card art / stone still lift */
.cap-shell .cap-play2__meta { font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-type-meta); letter-spacing: var(--cap-track-eyebrow); text-transform: uppercase; color: var(--cap-color-caption); }
.cap-shell .cap-play2__big--tarot .cap-play2__meta { color: var(--cap-color-on-ink-muted); }

/* the objects */
.cap-shell .cap-play2__art { flex: none; align-self: center; display: flex; align-items: center; justify-content: center; }   /* owner 2026-09-25: both objects centred vertically in their tiles */
.cap-shell .cap-play2__big--tarot .cap-play2__art { padding-right: calc(var(--cap-space-panel-pad) + var(--cap-space-gap-6)); }
.cap-shell .cap-play2__card { display: block; width: var(--cap-play2-art-w); height: var(--cap-play2-art-h); border-radius: var(--cap-radius-sm); overflow: hidden; box-shadow: var(--cap-shadow-play-card-art); transition: transform var(--cap-ease-card-lift), box-shadow var(--cap-ease-card-lift); }
.cap-shell .cap-play2__card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cap-shell .cap-play2__stone { display: flex; align-items: center; justify-content: center; container-type: size; width: var(--cap-play2-stone-w); height: var(--cap-play2-stone-h); border-radius: var(--cap-play2-stone-r);
  background: radial-gradient(70% 62% at 46% 38%, var(--cap-color-stone-1) 0%, var(--cap-color-stone-2) 46%, var(--cap-color-stone-3) 82%, var(--cap-color-stone-4) 100%);
  box-shadow: var(--cap-shadow-play-stone); transition: transform var(--cap-ease-card-hover), box-shadow var(--cap-ease-card-hover); }
.cap-shell .cap-play2__glyph { font-family: var(--cap-font-rune); font-size: calc(100cqh * var(--cap-rune-glyph)); line-height: 1; color: var(--cap-color-primary-pale); }   /* the glyph never changes colour (owner 2026-09-25) */

@media (hover: hover) and (pointer: fine) and (min-width: 1024px) {
  .cap-shell .cap-play2__card:hover { transform: translateY(calc(-1 * var(--cap-lift-card-play))); box-shadow: var(--cap-shadow-play-card-art-hover); }   /* owner 2026-09-25: lift + halo, no tilt */
  .cap-shell .cap-play2__stone:hover { transform: translateY(calc(-1 * var(--cap-lift-stone-play))); box-shadow: var(--cap-shadow-play-stone-hover); }
}
@media (prefers-reduced-motion: reduce) {
  .cap-shell .cap-play2__card, .cap-shell .cap-play2__stone { transition: box-shadow var(--cap-ease-stone-quiet); }
  @media (hover: hover) { .cap-shell .cap-play2__card:hover, .cap-shell .cap-play2__stone:hover { transform: none; } }
}

/* ─── All the draws · The libraries ───────────────────────── */
.cap-shell .cap-play2__section { margin-top: calc(var(--cap-space-block-5) + var(--cap-space-lg)); }
.cap-shell .cap-play2__h { margin: 0 0 var(--cap-space-block-5); font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-type-section); letter-spacing: var(--cap-track-label); line-height: var(--cap-leading-tight); text-transform: uppercase; color: var(--cap-color-text); }
.cap-shell .cap-play2__tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--cap-space-field-x); }
.cap-shell .cap-play2__tile { display: flex; flex-direction: column; align-items: flex-start; gap: var(--cap-space-gap-6); min-height: var(--cap-play2-tile-h); box-sizing: border-box; padding: var(--cap-space-block-5) var(--cap-space-card-pad) var(--cap-space-card-pad); background: var(--cap-color-surface); border: var(--cap-border-hairline) solid var(--cap-color-line); text-decoration: none; color: var(--cap-color-text); transition: border-color var(--cap-ease), box-shadow var(--cap-ease); }
@media (hover: hover) { .cap-shell .cap-play2__tile:hover { box-shadow: var(--cap-shadow-halo); } }
.cap-shell .cap-play2__icon { display: inline-flex; align-items: center; justify-content: center; width: var(--cap-play2-icon-w); height: var(--cap-play2-icon-h); background: var(--cap-color-primary); color: var(--cap-color-surface); font-family: var(--cap-font-ui); font-size: var(--cap-type-sm); line-height: 1; }
.cap-shell .cap-play2__icon--tarot { border-radius: var(--cap-radius-sm); }
.cap-shell .cap-play2__ticon { display: none; }   /* the phone's drawn icon (2a) */
.cap-shell .cap-play2__icon--rune { width: calc(var(--cap-play2-icon-w) + var(--cap-space-gap-3)); border-radius: var(--cap-radius-pill); font-family: var(--cap-font-rune); font-size: var(--cap-type-section); }
.cap-shell .cap-play2__tile-title { font-family: var(--cap-font-ui); font-weight: 600; font-size: var(--cap-type-hook); letter-spacing: var(--cap-track-label); line-height: var(--cap-leading-tight); text-transform: uppercase; }
.cap-shell .cap-play2__tile-sub { margin-top: calc(-1 * var(--cap-space-gap-3)); font-family: var(--cap-font-serif); font-style: italic; font-size: var(--cap-type-faq); line-height: var(--cap-leading-data); color: var(--cap-color-muted); }

.cap-shell .cap-play2__section--libraries { margin-top: calc(var(--cap-space-block-5) + var(--cap-space-lg)); padding-top: var(--cap-space-lg); border-top: var(--cap-border-hairline) solid var(--cap-color-line); }
/* desktop (owner 2026-10-09): the libraries' divider is exactly as wide as the cards — the section's page inset is its MARGIN, not
   padding (a padded section drew its top border across the inset too, 80 px past the cards each side) */
@media (min-width: 1280px) { .cap-shell .cap-play2__section--libraries.cap-inset { margin-left: var(--cap-page-x); margin-right: var(--cap-page-x); padding-left: 0; padding-right: 0; } }
.cap-shell .cap-play2__libs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cap-gutter); }
.cap-shell .cap-play2__lib { display: flex; align-items: center; justify-content: space-between; gap: var(--cap-gutter); min-height: var(--cap-play2-lib-h); box-sizing: border-box; padding: var(--cap-space-lg); background: var(--cap-color-bg-deep); text-decoration: none; color: var(--cap-color-text); }
.cap-shell .cap-play2__section--libraries .cap-play2__h { margin-bottom: var(--cap-space-field-x); }
.cap-shell .cap-play2__lib-copy { display: flex; flex-direction: column; gap: var(--cap-space-gap-3); }
.cap-shell .cap-play2__lib-title { font-family: var(--cap-font-ui); font-weight: 600; font-size: var(--cap-type-section); letter-spacing: var(--cap-track-label); line-height: var(--cap-leading-tight); text-transform: uppercase; }
.cap-shell .cap-play2__lib-sub { font-family: var(--cap-font-serif); font-style: italic; font-size: var(--cap-type-read); line-height: var(--cap-leading-lede); color: var(--cap-color-text-secondary); }
.cap-shell .cap-play2__pill { flex: none; background: var(--cap-color-text); color: var(--cap-color-bg); border-color: var(--cap-color-text); }
@media (hover: hover) { .cap-shell .cap-play2__lib:hover .cap-play2__pill { background: var(--cap-color-primary); border-color: var(--cap-color-primary); color: var(--cap-color-surface); } }

.cap-shell .cap-play2__soon { margin-top: var(--cap-gutter); padding: var(--cap-space-lg); border: var(--cap-border-hairline) dashed var(--cap-color-line); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--cap-space-gap-4); }
.cap-shell .cap-play2__soon-eyebrow { font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-type-sm); letter-spacing: var(--cap-track-eyebrow); line-height: var(--cap-leading-tight); text-transform: uppercase; color: var(--cap-color-primary); }
.cap-shell .cap-play2__soon-title { font-family: var(--cap-font-display-sm); font-weight: 800; font-size: var(--cap-type-lg); line-height: var(--cap-leading-tight); letter-spacing: var(--cap-track-tight); }
.cap-shell .cap-play2__soon-sub { font-family: var(--cap-font-serif); font-style: italic; font-size: var(--cap-type-faq); color: var(--cap-color-muted); }

/* ─── reflow (no sheet below desktop: the cards stack, the tiles 2-up, the libraries stack) ─── */
@media (max-width: 1023px) {
  .cap-shell .cap-play2__hero-cards, .cap-shell .cap-play2__libs { grid-template-columns: minmax(0, 1fr); }
  .cap-shell .cap-play2__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ─── 700–1279 · T14 (1024) and T14-820: the big cards side by side with the object on top (card back 64 × 110, stone
   88 × 110), 32 padding; each section opens on a hairline with its heading 32 below it, 56 between sections; tiles with
   20 padding; at 1024 the library cards stack their button under the text, at 820 they run one per row ─────────── */
@media (min-width: 700px) and (max-width: 1279px) {
  .cap-shell .cap-play2__lede { max-width: 26ch; text-wrap: balance; }   /* T14: "Two decks, no accounts, / no streaks to protect." */
  .cap-shell .cap-play2__hero-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: var(--cap-space-band-close); }
  .cap-shell .cap-play2__big { flex-direction: column; justify-content: flex-start; height: auto; padding: var(--cap-space-lg); gap: var(--cap-space-gap-8); }
  .cap-shell .cap-play2__big .cap-play2__art { order: -1; align-self: flex-start; padding-right: 0; margin-bottom: var(--cap-space-sm); }
  .cap-shell .cap-play2__big .cap-play2__card { width: 64px; height: 110px; }   /* geometry: T14's card back */
  .cap-shell .cap-play2__big { --cap-play2-stone-h: 110px; }   /* geometry: T14's stone height; the glyph is a share of it */
  .cap-shell .cap-play2__big .cap-play2__stone { width: 88px; height: var(--cap-play2-stone-h); border-radius: 44px / 55px; }   /* geometry: T14's stone */
  .cap-shell .cap-play2__big-copy, .cap-shell .cap-play2__big--rune .cap-play2__big-copy { max-width: none; flex: 1 1 auto; }
  /* round 29 (owner): the two buttons on ONE line at the cards' foot (the rune title runs a line longer), at least the old 20 under
     the title. Round 30 (owner 2026-10-05): no "Ask any time" on the two cards from 700 to 1279 */
  .cap-shell .cap-play2__big-foot { margin-top: auto; padding-top: var(--cap-space-gap-5); }
  .cap-shell .cap-play2__big .cap-play2__meta { display: none; }
  .cap-shell .cap-play2__big--tarot { border: var(--cap-border-hairline) solid transparent; }   /* the rune card's hairline, unseen: both cards' insides start on the same line */
  .cap-shell .cap-play2__section, .cap-shell .cap-play2__section--libraries { margin: var(--cap-space-band-close) var(--cap-page-x-mid) 0; padding: var(--cap-space-lg) 0 0; border-top: var(--cap-border-hairline) solid var(--cap-color-line); }   /* the hairline inside the column (T14): the inset becomes a margin */
  .cap-shell .cap-play2__tiles { gap: var(--cap-space-md); }
  .cap-shell .cap-play2__tile { min-height: 0; padding: var(--cap-space-section-head-below); gap: var(--cap-space-sm); }
  .cap-shell .cap-play2__lib { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--cap-space-md); min-height: 0; }
  .cap-shell .cap-play2__lede { font-size: var(--cap-type-lede-hero); }
  .cap-shell .cap-play2__tile-sub { font-size: var(--cap-type-tile-sub); line-height: var(--cap-leading-co-cast); color: var(--cap-color-caption); }
  .cap-shell .cap-play2__soon-eyebrow { font-size: var(--cap-type-eyebrow); }
  .cap-shell .cap-play2__lib-title { letter-spacing: var(--cap-track-feature); }
  .cap-shell .cap-play2__lib-sub { font-size: var(--cap-type-faq); line-height: var(--cap-leading-lede-hero); }
  /* measured against T14 / T14-820 (owner 2026-10-01): the hero lede 500 · 1.45; the cards' eyebrow at the eyebrow size (16);
     the headline −.018em at 1024 (820 below keeps −.015em); "Ask any time" 13 · .14em; "Coming soon"'s line in the caption grey, 1.5 */
  .cap-shell .cap-play2__lede { font-weight: 500; line-height: var(--cap-leading-lede-hero); }
  .cap-shell .cap-play2__eyebrow { font-size: var(--cap-type-eyebrow); }
  .cap-shell .cap-play2__big-title { letter-spacing: var(--cap-track-form-head); }
  .cap-shell .cap-play2__meta { font-size: var(--cap-type-sm); letter-spacing: var(--cap-track-meta); line-height: normal; }
  .cap-shell .cap-play2__soon-sub { line-height: var(--cap-leading-lede); color: var(--cap-color-caption); }
}
@media (min-width: 700px) and (max-width: 1023px) {
  .cap-shell .cap-play2__big-title { font-size: var(--cap-type-lg); letter-spacing: var(--cap-track-tight); }   /* T14-820: 24 · −.015em */
  .cap-shell .cap-play2__tiles { gap: var(--cap-space-section-head-below); }
  .cap-shell .cap-play2__lib { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--cap-gutter); }
}
/* ─── THE PHONE (2a, CD 27 Sep, measured on the markup at 388) ────────────────────────────────────────────────────────
   The same markup re-ordered: the page is a 2-column grid (12 between), the card/section wrappers step aside
   (display: contents) and each large card is followed by its own two tiles — Ask the Tarot · Daily Tarot | Yes / No ·
   Ask the Runes · Rune of the Day | Yes / No — then the libraries (not on the sheet; kept) and "Coming soon". The large
   cards are white with the object left: the eyebrow reads as the card's title, the line under it in italic, the button
   gives way to the "Ask any time" outline badge. The tiles carry CD's drawn tarot card / rune. */
@media (max-width: 699px) {
  .cap-shell .cap-play2 { --cap-play2-card-h: 0px; --cap-play2-tile-h: 0px; --cap-play2-lib-h: 0px; padding-bottom: 0; }
  .cap-shell .cap-play2 > .cap-page { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--cap-space-gap-6); row-gap: var(--cap-space-gap-6); align-items: start; padding: 0 var(--cap-page-x); box-sizing: border-box; }
  .cap-shell .cap-play2__hero-cards, .cap-shell .cap-play2__section, .cap-shell .cap-play2__tiles, .cap-shell .cap-play2__libs { display: contents; }
  .cap-shell .cap-play2__hero, .cap-shell .cap-play2__big, .cap-shell .cap-play2__h, .cap-shell .cap-play2__lib, .cap-shell .cap-play2__soon { grid-column: 1 / -1; }
  .cap-shell .cap-play2__section:not(.cap-play2__section--libraries) > .cap-play2__h { display: none; }   /* 2a has no "All the draws" heading: the tiles sit under their card */
  /* the reading order */
  .cap-shell .cap-play2__hero { order: 0; }
  .cap-shell .cap-play2__big--tarot { order: 1; }
  .cap-shell .cap-play2__tile--tarot { order: 2; }
  .cap-shell .cap-play2__big--rune { order: 3; margin-top: var(--cap-space-gap-6); }
  .cap-shell .cap-play2__tile--rune { order: 4; }
  .cap-shell .cap-play2__section--libraries .cap-play2__h { order: 5; }
  .cap-shell .cap-play2__lib { order: 6; }
  .cap-shell .cap-play2__soon { order: 7; margin: var(--cap-space-gap-6) 0 var(--cap-gutter); }
  /* the hero: eyebrow · 14 · h1 · 14 · the lede (16, ink, one line box); the first card 24 under it */
  .cap-shell .cap-play2__hero { padding: var(--cap-gutter) 0 var(--cap-space-gap-6); gap: var(--cap-space-gap-7); }
  .cap-shell .cap-play2__h1 { margin: 0; text-wrap: balance; }
  .cap-shell .cap-play2__lede { margin: 0; font-size: var(--cap-mp-type-play-lede); line-height: normal; color: var(--cap-color-text); }
  /* the large cards: white, the object left, 20 in, 16 to the copy */
  .cap-shell .cap-play2__big, .cap-shell .cap-play2__big--tarot, .cap-shell .cap-play2__big--rune { height: auto; flex-direction: row-reverse; justify-content: flex-end; align-items: center; gap: var(--cap-space-md); padding: var(--cap-space-panel-pad); background: var(--cap-color-surface); color: var(--cap-color-text); border: var(--cap-border-hairline) solid var(--cap-color-line-strong); }
  .cap-shell .cap-play2__big-copy, .cap-shell .cap-play2__big--rune .cap-play2__big-copy { flex: 1; min-width: 0; max-width: none; gap: var(--cap-space-gap-3); }
  .cap-shell .cap-play2__big--tarot .cap-play2__art { padding-right: 0; }
  .cap-shell .cap-play2__card { width: var(--cap-mp-play-art-w); height: var(--cap-mp-play-art-h); border-radius: var(--cap-radius-tile); box-shadow: var(--cap-shadow-lift); }
  .cap-shell .cap-play2__stone { width: var(--cap-mp-play-stone-w); height: var(--cap-mp-play-stone-h); border-radius: var(--cap-mp-play-stone-r); box-shadow: var(--cap-mp-shadow-play-stone); }
  .cap-shell .cap-play2__eyebrow, .cap-shell .cap-play2__big--tarot .cap-play2__eyebrow { font-weight: 600; font-size: var(--cap-mp-type-play-title); letter-spacing: var(--cap-mp-track-play-title); line-height: normal; color: var(--cap-color-text); }
  .cap-shell .cap-play2__eyebrow.cap-eyebrow--star::before { content: none; }   /* no ✦ before "Tarot" / "Runes" on the phone (owner 2026-10-07; reverses 30 Sep); tablet + desktop keep it */
  .cap-shell .cap-play2__big-title { font-family: var(--cap-font-serif); font-style: italic; font-weight: 400; font-size: var(--cap-mp-type-play-sub); line-height: var(--cap-leading-data); letter-spacing: normal; color: var(--cap-color-text-secondary); }
  .cap-shell .cap-play2__big-foot { margin-top: var(--cap-space-gap-1); }
  .cap-shell .cap-play2__big .cap-play2__btn { display: none; }
  .cap-shell .cap-play2__meta, .cap-shell .cap-play2__big--tarot .cap-play2__meta { display: inline-flex; align-items: center; justify-content: center; padding: var(--cap-mp-play-badge-y) var(--cap-mp-play-badge-x); border: var(--cap-border-hairline) solid var(--cap-color-primary); border-radius: var(--cap-radius-pill); font-weight: 600; font-size: var(--cap-mp-type-play-badge); line-height: var(--cap-mp-leading-play-badge); letter-spacing: var(--cap-track-meta); color: var(--cap-color-primary); }
  /* the tiles: 16 in, 6 between, the drawn icon, the title 14 caps, the line 13 italic (the day's state after a "·") */
  .cap-shell .cap-play2__tile { min-height: 0; height: 100%; padding: var(--cap-space-md); gap: var(--cap-space-gap-3); border-color: var(--cap-color-line-strong); }
  .cap-shell .cap-play2__icon { display: none; }
  .cap-shell .cap-play2__ticon { display: block; color: var(--cap-color-primary); }
  .cap-shell .cap-play2__ticon { width: max-content; }
  .cap-shell .cap-play2__ticon svg { display: block; width: auto; height: calc(var(--cap-mp-play-icon-tarot-w) * 346.37 / 220.49); }   /* the owner's pair in one frame (icon-*.svg, 2026-10-08): sized by height, the card as before, the stone as drawn beside it */
  .cap-shell .cap-play2__tile-title { margin-top: var(--cap-space-gap-1); font-size: var(--cap-mp-type-play-tile-title); letter-spacing: var(--cap-track-label); line-height: normal; }
  .cap-shell .cap-play2__tile-sub { margin-top: 0; font-size: var(--cap-mp-type-play-tile-sub); line-height: var(--cap-leading-data); color: var(--cap-color-text-secondary); }
  .cap-shell .cap-play2__tile-sub br { display: none; }
  .cap-shell .cap-play2__state::before { content: "\00a0· "; }   /* the "·" stays with the line before; the break falls after it (2a) */
  /* the libraries (2a, redrawn 27 Sep): the heading 30 under the tiles, then two ink tiles side by side — the drawn icon,
     the title, the site's italic line (not on 2a — kept, owner 2026-09-28), the count as an underlined link */
  .cap-shell .cap-play2__section--libraries .cap-play2__h { margin: calc(var(--cap-space-block-6) - var(--cap-space-gap-6)) 0 0; line-height: normal; }
  .cap-shell .cap-play2__lib { grid-column: auto; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--cap-space-gap-3); padding: var(--cap-space-block-3); background: var(--cap-color-text); border: var(--cap-border-hairline) solid var(--cap-color-line-halo); color: var(--cap-color-on-ink); }
  @media (hover: hover) { .cap-shell :is(a, .cap-press).cap-play2__lib:hover { color: var(--cap-color-on-ink); } }
  .cap-shell .cap-play2__lib { align-self: stretch; }   /* the two tiles end level whatever their lines run to (owner 2026-09-28) */
  .cap-shell .cap-play2__lib .cap-play2__pill { margin-top: auto; }   /* the link on the tile's foot */
  .cap-shell .cap-play2__lib .cap-play2__ticon { color: var(--cap-color-primary-soft); }
  .cap-shell .cap-play2__lib-copy { margin-top: var(--cap-space-gap-1); gap: var(--cap-space-gap-3); }
  .cap-shell .cap-play2__lib-title { font-size: var(--cap-mp-type-play-tile-title); line-height: normal; color: var(--cap-color-on-ink); }
  .cap-shell .cap-play2__lib-sub { font-size: var(--cap-mp-type-play-tile-sub); line-height: var(--cap-leading-data); color: var(--cap-color-on-ink-2); }   /* the 28 Sep 2a sheet's colour; the line itself: not on 2a — kept (owner 2026-09-28: site wins) */
  .cap-shell .cap-play2__lib .cap-play2__pill { min-height: 0; padding: 0 0 var(--cap-border-hairline) 0; border: 0; border-bottom: var(--cap-border-hairline) solid var(--cap-color-primary-soft); border-radius: 0; background: none; box-shadow: none; font-size: var(--cap-type-textlink); letter-spacing: var(--cap-track-textlink); line-height: normal; color: var(--cap-color-on-ink); white-space: nowrap; }
@media (hover: hover) { .cap-shell .cap-play2__lib:hover .cap-play2__pill { min-height: 0; padding: 0 0 var(--cap-border-hairline) 0; border: 0; border-bottom: var(--cap-border-hairline) solid var(--cap-color-primary-soft); border-radius: 0; background: none; box-shadow: none; font-size: var(--cap-type-textlink); letter-spacing: var(--cap-track-textlink); line-height: normal; color: var(--cap-color-on-ink); white-space: nowrap; } }
  /* "Coming soon": 20 in, 8 between, the title 19 / 1.25, the line 14 / 1.5 in the caption grey */
  .cap-shell .cap-play2__soon { padding: var(--cap-space-panel-pad); gap: var(--cap-space-gap-4); border-color: var(--cap-color-line-strong); }
  .cap-shell .cap-play2__soon-eyebrow { font-size: var(--cap-mp-type-play-soon-eyebrow); line-height: normal; }
  .cap-shell .cap-play2__soon-title { font-size: var(--cap-mp-type-play-soon-title); line-height: var(--cap-mp-leading-play-soon-title); letter-spacing: normal; }
  .cap-shell .cap-play2__soon-sub { font-size: var(--cap-mp-type-play-soon-sub); line-height: var(--cap-leading-lede); color: var(--cap-color-caption); }
}

/* THE FOOTER GAP (owner 2026-10-02): from the last thing on the page to the footer, 64 from 700 up and 40 on a phone — the
   token's pair (--cap-space-footer-gap). Appended last so it wins over the page's earlier end spacing. */
@media (max-width: 699px) {
  .cap-shell .cap-play2__soon { margin-bottom: var(--cap-space-footer-gap); }
}