/* Tarot library HUB — CD D17 (1440), built 2026-09-13 (engine 0.51.186); the PHONE block at the foot is CD 2m
 * (27 Sep, engine 0.51.415). The 700–1023 step still follows reflow.md's hub rules (4-up) until the tablet pass.
 * Token-only (the guard bans literals). An INK-surface page like the card page: the module's
 * <main> paints the ink; type is the on-ink family. Enqueued by Capriastro_Content_Library on
 * is_post_type_archive('tarot_card'); ships with the module (the lift rule). Component classes
 * (.cap-h1 · .cap-chip · .cap-btn · .cap-eyebrow--*) are the site's vocabulary; everything
 * page-specific is .cap-thub__*.
 *
 * Sheet → token map: crumb row = border line-on-ink · crumb-y · eyebrow-size 12.5 (sheet 12) ·
 * hero pad-top xl 64 · gap md 16 · eyebrow 12.5/.2em primary-soft · h1 = .cap-h1 (xl 52 /
 * display leading 1.06; sheet 1.04) on-ink · lede 22 (lede) / 1.45 (leading-data) on-ink-2,
 * 46ch · tabs pad-top lg 40 · gap chip-gap 10 · chip = the site chip (11px .14em, pad 10/18;
 * sheet 11.5, 11/20 — the component's values) · tiles pad-top lg 40 · gap tile-gap-y 26 /
 * tile-gap-x 20 · 8 across, width (100% − 7·gap)/8 = 142.5 (the sheet's row B says 140 —
 * its own 2.5px inconsistency) · art 701/1200 · radius tile 8 · border line-halo · shadow
 * tile-ink · bg ink-raised · art→labels tile-text 10 · numeral hint 10 / track-btn .16em
 * on-ink-muted · name meta 11 / label .1em on-ink · band margin xl 64 / hub-foot 72 · bg
 * ink-raised · border line-halo-soft · pad band-y 32 / panel-pad 40 · eyebrow meta 11 /
 * .2em primary-soft · title display-sm 800 band-title 26 / tight 1.2 (sheet 1.15) / track
 * tight −.015em · button = .cap-btn--primary --l (pad 16/30, btn 12.5; sheet 11.5).
 */

.cap-shell .cap-thub { --cap-thub-icon-w: 26px; --cap-thub-icon-h: 40px; background: var(--cap-color-text); color: var(--cap-color-on-ink); }
.cap-shell .cap-thub__inner { max-width: var(--cap-page-max); margin: 0 auto; padding: 0 var(--cap-page-x) var(--cap-space-hub-foot); }   /* the foot is PADDING: a margin under the last block would collapse out of <main> and lose the ink */

/* Crumb row */
.cap-shell .cap-thub__crumbs { border-top: var(--cap-border-hairline) solid var(--cap-color-line-on-ink); padding: var(--cap-space-crumb-y) 0; font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-type-eyebrow); line-height: var(--cap-leading-tight); letter-spacing: var(--cap-track-meta); text-transform: uppercase; color: var(--cap-color-on-ink-muted); display: flex; flex-wrap: wrap; gap: var(--cap-space-sm); }
.cap-shell .cap-thub__crumbs a { color: inherit; text-decoration: none; }
@media (hover: hover) { .cap-shell .cap-thub__crumbs a:hover { color: var(--cap-color-on-ink); } }
.cap-shell .cap-thub__crumbs [aria-current] { color: var(--cap-color-on-ink); }

/* Hero: centred */
.cap-shell .cap-thub__hero { padding-top: calc(var(--cap-space-xl) + var(--cap-space-gap-1)); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--cap-space-md); }
.cap-shell .cap-thub__eyebrow { font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-type-eyebrow); line-height: var(--cap-leading-tight); letter-spacing: var(--cap-track-eyebrow); text-transform: uppercase; color: var(--cap-color-primary-soft); }
.cap-shell .cap-thub__eyebrow--sm { font-size: var(--cap-type-meta); }
.cap-shell .cap-thub__h1 { color: var(--cap-color-on-ink); margin: 0; }
.cap-shell .cap-thub__lede { font-family: var(--cap-font-serif); font-style: italic; font-weight: 400; font-size: var(--cap-type-lede); line-height: var(--cap-leading-data); color: var(--cap-color-on-ink-2); margin: 0; max-width: 46ch; }
/* D17: 22 regular on 1.45, 6 more under the heading — above the site's card-lede sweep */
:root body .cap-shell .cap-thub .cap-thub__lede { font-size: var(--cap-type-lede-hero); line-height: var(--cap-leading-data); margin-top: var(--cap-space-gap-3); }
/* "All yes/no meanings →" under the lede (owner 2026-09-30): the site's text link, on the ink */
.cap-shell .cap-thub__meanings { color: var(--cap-color-on-ink); }
@media (hover: hover) { .cap-shell .cap-thub__meanings:hover { color: var(--cap-color-primary-pale); } }   /* round 23: a link on ink turns the pale lilac (CD values: primary-pale = "link hover on ink") */

/* The deck: 8 across, the remainder centred */
.cap-shell .cap-thub__tiles { list-style: none; margin: 0; padding: calc(var(--cap-space-lg) + var(--cap-space-md) + var(--cap-space-gap-5)) 0 0;   /* D17: 58 under the lede */ display: flex; flex-wrap: wrap; justify-content: center; gap: var(--cap-space-tile-gap-y) var(--cap-space-tile-gap-x); }
.cap-shell .cap-thub__tile { width: calc((100% - 7 * var(--cap-space-tile-gap-x)) / 8); }
.cap-shell .cap-thub__tile > :is(a, .cap-press) { display: flex; flex-direction: column; align-items: center; gap: var(--cap-space-tile-text); text-decoration: none; color: var(--cap-color-on-ink); transition: filter var(--cap-ease); }
@media (hover: hover) { .cap-shell .cap-thub__tile > :is(a, .cap-press):hover { filter: brightness(1.2); } }
.cap-shell .cap-thub__art { display: block; position: relative; width: 100%; aspect-ratio: 701 / 1200; border-radius: var(--cap-radius-tile); overflow: hidden; border: var(--cap-border-hairline) solid var(--cap-color-line-halo); box-shadow: var(--cap-shadow-tile-ink); background: var(--cap-color-ink-raised); }
.cap-shell .cap-thub__art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; }   /* round 32 (owner 2026-10-06): pinned to all four sides of the frame, so the picture fills it and sits centred in every browser — a "100 % of a height that comes from aspect-ratio" is not definite in every Safari, and the art then sat at the frame's top */
.cap-shell .cap-thub__art-n { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-type-h3-card); letter-spacing: var(--cap-track-label); color: var(--cap-color-on-ink-2); }
.cap-shell .cap-thub__num { font-family: var(--cap-font-ui); font-weight: 400; font-size: var(--cap-type-eyebrow); letter-spacing: var(--cap-track-eyebrow); text-transform: uppercase; color: var(--cap-color-on-ink-muted); line-height: var(--cap-leading-tight); }   /* D17: 16 regular */
.cap-shell .cap-thub__name { font-family: var(--cap-font-ui); font-weight: 600; font-size: var(--cap-type-sm); letter-spacing: var(--cap-track-label); text-transform: uppercase; text-align: center; line-height: var(--cap-leading-tight); }
.cap-shell .cap-thub__label { display: flex; flex-direction: column; align-items: center; gap: var(--cap-space-gap-2); }

/* Daily Tarot band */
.cap-shell .cap-thub__band { margin: var(--cap-space-xl) 0 0; background: var(--cap-color-ink-raised); border: var(--cap-border-hairline) solid var(--cap-color-line-halo-soft); padding: var(--cap-space-band-y) var(--cap-space-panel-pad); display: flex; align-items: center; justify-content: space-between; gap: var(--cap-space-card-pad); }
.cap-shell .cap-thub__band-copy { display: flex; flex-direction: column; gap: var(--cap-space-sm); }
.cap-shell .cap-thub__band-title { font-family: var(--cap-font-display-sm); font-weight: 800; font-size: var(--cap-type-band-title); line-height: var(--cap-leading-tight); letter-spacing: var(--cap-track-tight); color: var(--cap-color-on-ink); margin: 0; }
.cap-shell .cap-thub__band .cap-btn { flex: none; }
/* D17 (2026-09-25): the tarot icon before the title (icon-tarot.svg, lilac on the ink) and the buttons */
.cap-shell .cap-thub__band-title { display: flex; align-items: center; gap: var(--cap-space-md); }
.cap-shell .cap-thub__band-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: auto; height: var(--cap-thub-icon-h); color: var(--cap-color-primary-soft); }   /* the owner's tarot / rune icon (icon-*.svg, 2026-10-08): drawn in one shared frame at the box's height (the card fills it; the stone stands as tall as the owner drew it beside the card), lilac on the ink — was a lilac tile with a typed ✦ / ᛉ */
.cap-shell .cap-thub__band-icon svg { display: block; width: auto; height: calc(100% * 346.37 / 339.67); }
/* desktop (D17): 56 all round, the title 30, the eyebrow 13 with 16 under it */
@media (min-width: 700px) {
  .cap-shell .cap-thub__band { padding: var(--cap-space-band-close); margin-top: calc(var(--cap-space-xl) - var(--cap-space-gap-4)); flex-direction: column; align-items: flex-start; justify-content: flex-start; }   /* VERSION A from 700 up (owner ruling 2026-10-08): the headline on its own line, the three buttons in one row beneath it (two above and one below where three do not fit) */
  .cap-shell .cap-thub__band-copy { gap: var(--cap-space-md); }
  .cap-shell .cap-thub__band .cap-thub__eyebrow--sm { font-size: var(--cap-type-sm); }
  .cap-shell .cap-thub__band-title { font-size: var(--cap-type-band-title-lg); letter-spacing: var(--cap-track-display); }
  .cap-shell .cap-thub__band { align-items: center; text-align: center; }   /* CENTRED on the library page (owner 2026-10-08): the eyebrow with a star each side, the icon on its own line under it, the headline, the buttons centred beneath */
  .cap-shell .cap-thub__band-copy { align-items: center; gap: var(--cap-space-block-3); }   /* 16 from the eyebrow to the icon, as the phone (its band gap 8 + the title's 8) */
  .cap-shell .cap-thub__band-title { flex-direction: column; gap: var(--cap-space-block-3); }   /* the icon on its own line above the headline, 16 between, as the phone */
  .cap-shell .cap-thub__band .cap-thub__eyebrow--sm::after { content: "\00a0\00a0✦"; }
  .cap-shell .cap-thub__band-actions { justify-content: center; }
}
.cap-shell .cap-thub__band-actions { display: flex; flex-wrap: wrap; gap: var(--cap-space-gap-6); flex: none; }   /* the three draw buttons, wrapping as whole buttons (owner 2026-10-08) */

/* Reflow (reflow.md: hub grids drop columns as the width drops; no mobile sheet for D17) */
@media (max-width: 699px) {
  .cap-shell .cap-thub__tile { width: calc((100% - 3 * var(--cap-space-tile-gap-x)) / 4); }
}
/* 700–1279 · T17 (1024) and T17-820: no breadcrumb (owner 2026-10-01, hubs take nothing); the headline on the 660 measure;
   six cards a row (five at 820), 24 apart, the remainder centred; the band stacked — eyebrow, the icon + headline (24),
   the buttons under it, 40 padding */
@media (min-width: 700px) and (max-width: 1279px) {
  .cap-shell .cap-thub__inner { padding-left: var(--cap-page-x-mid); padding-right: var(--cap-page-x-mid); }   /* the tablet column: 912 at 1024, 708 at 820 */
  .cap-shell nav.cap-thub__crumbs { display: none; }   /* nav.: over the shared trail's flex (components.css, (0,2,1)) */
  .cap-shell .cap-thub__hero { padding-top: calc(var(--cap-space-xl) + var(--cap-space-gap-4)); }   /* the headline where the sheet has it, now no crumb row stands above */
  :root body .cap-shell .cap-thub .cap-thub__lede { max-width: 58ch; font-size: var(--cap-type-lede-hero); line-height: var(--cap-leading-data); font-weight: 500; }   /* T17: 500 (owner 2026-10-01) */   /* T17 / T18: 22 on a 625 measure */
  .cap-shell .cap-thub__h1 { max-width: var(--cap-measure); text-wrap: balance; }
  .cap-shell .cap-thub__tiles { column-gap: var(--cap-gutter); }
  .cap-shell .cap-thub__tile { width: calc((100% - 5 * var(--cap-gutter)) / 6); }
  .cap-shell .cap-thub__band { padding: var(--cap-space-panel-pad); }
  .cap-shell .cap-thub__band-title { font-size: var(--cap-type-lg); letter-spacing: var(--cap-track-tight); }
  .cap-shell .cap-thub__num { font-size: var(--cap-type-tile-label); font-weight: 500; letter-spacing: var(--cap-track-meta); }   /* T17 / T17-820: 18 · 500 · .14em (owner 2026-10-01) */
}
@media (min-width: 700px) and (max-width: 1023px) {
  .cap-shell .cap-thub__tiles { column-gap: var(--cap-space-tile-gap-x); }
  .cap-shell .cap-thub__tile { width: calc((100% - 4 * var(--cap-space-tile-gap-x)) / 5); }   /* T17-820: 124-wide cards */
}
/* PHONE (390) — CD 2m, measured 27 Sep 2026 against mobile-key-screens.dc.html (23 Sep markup) and the 27 Sep PNG
 * (the PNG wins where they differ: a 15px numeral, the band's two buttons stacked). Every value from the sheet;
 * the three it has no name for are in design-system.json → mobile_pass (provisional). Desktop + tablet untouched. */
@media (max-width: 699px) {
  .cap-shell .cap-thub__inner { padding-bottom: var(--cap-space-block-6); }
  /* crumb row: a full-width hairline, 12 / gutter, 10px caption type */
  .cap-shell .cap-thub__crumbs { margin: 0 calc(-1 * var(--cap-page-x)); padding: var(--cap-space-gap-6) var(--cap-page-x); font-size: var(--cap-type-caption); line-height: normal;
    gap: calc(var(--cap-space-gap-4) - var(--cap-border-hairline)); border-top: 0; }   /* the sheet's " / " spacing; its one rule is the header's own (two touching made a 2px line) */
  /* hero: 24 under the crumb row, 14 between; the page eyebrow is violet on the ink ground (sheet + PNG) */
  .cap-shell .cap-thub__hero { padding-top: var(--cap-space-block-5); gap: var(--cap-space-gap-7); }
  .cap-shell .cap-thub__hero .cap-thub__eyebrow { color: var(--cap-color-primary); line-height: normal; }
  :root body .cap-shell .cap-thub .cap-thub__lede { font-size: var(--cap-type-lede); line-height: var(--cap-leading-lede); margin-top: 0; max-width: none; }
  /* the deck: 3 across, 20 / 14, 24 under the lede; the World alone on the last row, centred */
  .cap-shell .cap-thub__tiles { padding-top: var(--cap-space-block-6); gap: var(--cap-space-block-4) var(--cap-space-gap-7); }   /* round 32 (owner 2026-10-06): one ladder step more (24 → 30) under "All yes/no meanings" */
  .cap-shell .cap-thub__tile { width: calc((100% - 2 * var(--cap-space-gap-7)) / 3); }
  .cap-shell .cap-thub__tile > :is(a, .cap-press) { gap: var(--cap-space-block-1); }
  .cap-shell .cap-thub__art { border-radius: var(--cap-radius-card-face-m); box-shadow: var(--cap-shadow-card-on-ink); }   /* the sheet draws 8 at 103 wide (the width ladder would say 6); its tile shadow */
  .cap-shell .cap-thub__label { gap: var(--cap-space-gap-1); }
  .cap-shell .cap-thub__num { font-size: var(--cap-mp-type-tile-num); font-weight: 500; letter-spacing: var(--cap-track-meta); line-height: var(--cap-leading-tight); }   /* 27 Sep markup: 500 · .14em · 1.2 */
  .cap-shell .cap-thub__name { font-size: var(--cap-mp-type-tile-name); line-height: var(--cap-mp-leading-tile-name); }
  /* the Daily Tarot band: one centred column — eyebrow · card icon · title · the buttons, two to a row, centred (owner 2026-10-08) */
  .cap-shell .cap-thub__band { margin-top: var(--cap-space-block-6); border-color: var(--cap-color-line-halo); padding: var(--cap-space-panel-pad);
    flex-direction: column; align-items: center; text-align: center; gap: var(--cap-space-block-1); }
  .cap-shell .cap-thub__band-copy { display: contents; }
  .cap-shell .cap-thub__band .cap-thub__eyebrow--sm { font-size: var(--cap-type-eyebrow); letter-spacing: var(--cap-track-eyebrow); line-height: normal; }
  .cap-shell .cap-thub__band .cap-thub__eyebrow--sm::after { content: "\00a0\00a0✦"; }   /* a star each side on the phone sheet */
  .cap-shell .cap-thub__band-title { flex-direction: column; gap: var(--cap-space-block-3); margin-top: var(--cap-space-block-1);
    font-size: var(--cap-type-card-headline); line-height: var(--cap-leading-serif-title); letter-spacing: normal; }
  .cap-shell .cap-thub__band-actions { justify-content: center; gap: var(--cap-space-gap-5); margin: var(--cap-space-block-1) 0 var(--cap-space-gap-2); }   /* 16 under the headline with the band's 8 gap, as 2k (28 Sep sheet) */
  /* the 27 Sep PNG: 13px buttons on the small-button padding (13/18 filled, 12/17 outlined) and its 14 line — 40 tall */
  .cap-shell .cap-thub__band .cap-btn { font-size: var(--cap-mp-type-btn-band); letter-spacing: var(--cap-track-btn); line-height: var(--cap-leading-btn-small); padding: var(--cap-btn-pad-small); }
  .cap-shell .cap-thub__band .cap-btn--primary { color: var(--cap-color-surface); }
  .cap-shell .cap-thub__band .cap-btn--secondary { padding: var(--cap-btn-pad-small-outlined); }
}

/* 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. */
.cap-shell .cap-thub__inner { padding-bottom: var(--cap-space-footer-gap); }