/* Tarot card page — CD D8 (1440) / 2d (390), built 2026-09-13 (engine 0.51.184).
 * Token-only (the guard bans literals). An INK-surface page: the module's <main>
 * paints the ink itself; type is the on-ink family. Enqueued by
 * Capriastro_Content_Library on is_singular('tarot_card'); ships with the module
 * (the lift rule). Component classes (.cap-*) are markup vocabulary shared with
 * the site; everything page-specific is .cap-tcard__* (the daily-draw page owns .cap-tarot).
 *
 * Sheet → token map (values, not eyeballing): ink #241f3d = --cap-color-text ·
 * on-ink #f4f2ec / #c9c3de / #9a94b2 = on-ink / on-ink-2 / on-ink-muted · body on
 * ink #b7b1cf → on-ink-3 (#b7afd4, the system's own on-ink body; logged) · violet
 * #a78bfa = primary-soft · #8b5cf6 = primary · #2e2750 = ink-raised · rules
 * rgba(255,255,255,.09/.14/.28) = line-on-ink / -2 / -3 · grid 1fr 420 gap 80 =
 * --cap-rail / --cap-gutter-rail · page-x 80/26 · hero grid 270 1fr gap 44 · h1
 * Barlow Condensed 500 60/34 .08em · lede serif italic 500 23/17 · heads display
 * 800 24/22 · body serif 18/16 (the `read` role; 2d says 15.5) · table caps 13/11.5 (sm) · values 18/14.
 */

.cap-shell .cap-tcard { --cap-tcard-poster-h: 240px; --cap-tcard-daily-h: 36px; --cap-tcard-tile-w: 52px; --cap-tcard-tile-h: 85px; --cap-tcard-h1: 56px; --cap-tcard-lede: 22px; --cap-tcard-lede-w: 280px; --cap-tcard-key: 14px; --cap-tcard-sub-k: 165px; --cap-tcard-stone-w: 58px; --cap-tcard-stone-h: 72px; --cap-tcard-deck-x: 45px; --cap-tcard-pair-name: 26px; --cap-tcard-foot: 14px; --cap-tcard-foot-pad: 96px; background: var(--cap-color-text); color: var(--cap-color-on-ink); }
.cap-shell .cap-tcard__inner { max-width: var(--cap-page-max); margin: 0 auto; padding: 0 var(--cap-page-x); }

/* Crumb row (the sheet's sub-header line) */
.cap-shell .cap-tcard__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-tcard__crumbs a { color: inherit; text-decoration: none; }
@media (hover: hover) { .cap-shell .cap-tcard__crumbs a:hover { color: var(--cap-color-on-ink); } }
.cap-shell .cap-tcard__crumbs [aria-current] { color: var(--cap-color-on-ink); }

/* Two columns: main + rail */
.cap-shell .cap-tcard__grid { display: grid; grid-template-columns: 1fr var(--cap-rail); gap: var(--cap-space-lg) var(--cap-gutter-rail); align-items: start; padding: calc(var(--cap-space-xl) - var(--cap-space-gap-2)) 0 0; }
.cap-shell .cap-tcard__deck { grid-column: 1 / -1; }
.cap-shell .cap-tcard__main { display: flex; flex-direction: column; gap: var(--cap-space-md); min-width: 0; }
.cap-shell .cap-tcard__rail { display: flex; flex-direction: column; gap: var(--cap-space-field-x); min-width: 0; align-self: start; }   /* owner 2026-09-25: the rail scrolls with the page (the 13 Sep sticky rail retired) */

/* Hero: art + title block */
.cap-shell .cap-tcard__hero { display: grid; grid-template-columns: var(--cap-card-art) 1fr; gap: var(--cap-card-hero-gap); align-items: center; }
.cap-shell .cap-tcard__art { width: var(--cap-card-art); height: var(--cap-card-art-h); border-radius: var(--cap-radius-card-art); overflow: hidden; box-shadow: var(--cap-shadow-card-art); }
.cap-shell .cap-tcard__art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cap-shell .cap-tcard__title { display: flex; flex-direction: column; gap: var(--cap-space-field-x); }
.cap-shell .cap-tcard__eyebrow { font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-type-small); letter-spacing: var(--cap-track-eyebrow); text-transform: uppercase; color: var(--cap-color-primary-soft); }
.cap-shell .cap-tcard__h1 { font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-tcard-h1); letter-spacing: var(--cap-track-card-title); text-transform: uppercase; line-height: var(--cap-leading-display); margin: 0; color: var(--cap-color-on-ink); }
.cap-shell .cap-tcard__lede { font-family: var(--cap-font-serif); font-style: italic; font-weight: 400; font-size: var(--cap-tcard-lede); line-height: var(--cap-leading-data); max-width: var(--cap-tcard-lede-w); color: var(--cap-color-on-ink-2); margin: 0; }
/* The keyword chips (0.51.240, D8): the on-ink chip component in a wrapping row under the lede; the chip
   text on-ink (D8 prints the chips in the page colour, not the muted tab colour); inert, not a control. */
.cap-shell .cap-tcard__chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--cap-space-sm); }
.cap-shell .cap-tcard__chip { color: var(--cap-color-on-ink); cursor: default; }
@media (hover: hover) { .cap-shell .cap-tcard__chip:hover { color: var(--cap-color-on-ink); border-color: var(--cap-color-line-on-ink-3); } }
.cap-shell .cap-tcard__meta { font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-type-sm); letter-spacing: var(--cap-track-meta); text-transform: uppercase; color: var(--cap-color-on-ink-muted); }

/* Reading: Upright / Reversed + the three sub-blocks */
.cap-shell .cap-tcard__h2 { font-family: var(--cap-font-display-sm); font-weight: 800; font-size: var(--cap-type-card-h2); line-height: var(--cap-leading-tight); letter-spacing: var(--cap-track-tight); color: var(--cap-color-on-ink); margin: var(--cap-space-card-pad) 0 var(--cap-space-block-5); }
.cap-shell .cap-tcard__body { font-family: var(--cap-font-serif); font-size: var(--cap-type-read); line-height: var(--cap-leading-article); color: var(--cap-color-on-ink-3); margin: 0; }
.cap-shell .cap-tcard__body p { margin: 0 0 var(--cap-space-block-5); }
.cap-shell .cap-tcard__body p:last-child { margin-bottom: 0; }
.cap-shell .cap-tcard__subs { display: grid; grid-template-columns: 1fr; border: var(--cap-border-hairline) solid var(--cap-color-line-on-ink-2); background: var(--cap-color-fill-on-ink); margin-top: var(--cap-space-lg); }
.cap-shell .cap-tcard__sub { display: grid; grid-template-columns: var(--cap-tcard-sub-k) 1fr; gap: var(--cap-space-md); padding: calc(var(--cap-space-cell-y) + var(--cap-space-gap-2)) calc(var(--cap-space-cell-x) + var(--cap-space-gap-4)) calc(var(--cap-space-cell-y) + var(--cap-space-gap-2)) var(--cap-space-cell-x);   /* D8b/D9b: the value text stops 28 short of the edge */ border-top: var(--cap-border-hairline) solid var(--cap-color-line-on-ink); align-items: baseline; }
.cap-shell .cap-tcard__sub:first-child { border-top: 0; }
.cap-shell .cap-tcard__sub-k { font-family: var(--cap-font-ui); font-weight: 600; font-size: var(--cap-tcard-key); letter-spacing: var(--cap-track-label); text-transform: uppercase; color: var(--cap-color-on-ink); }
.cap-shell .cap-tcard__sub-v { font-family: var(--cap-font-serif); font-size: var(--cap-type-faq-answer); line-height: var(--cap-leading-body); color: var(--cap-color-on-ink-3); margin: 0; }
/* A blank-line break in an essence or a sub-row renders as a second <p>; it keeps the body's paragraph pitch
   (the hero's ledes sit in a flex column whose gap already does this). */
.cap-shell .cap-tcard__sub-v p { margin: 0; }
.cap-shell .cap-tcard__sub-v p + p { margin-top: var(--cap-space-md); }

/* Correspondences table */
.cap-shell .cap-tcard__table { border: var(--cap-border-hairline) solid var(--cap-color-line-on-ink-2); background: var(--cap-color-fill-on-ink); }
.cap-shell .cap-tcard__thead, .cap-shell .cap-tcard__row { display: grid; grid-template-columns: 1fr 1fr; align-items: baseline; }
.cap-shell .cap-tcard__thead { background: var(--cap-color-ink-raised); font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-type-sm); line-height: normal; letter-spacing: var(--cap-track-meta); text-transform: uppercase; color: var(--cap-color-on-ink); }   /* D8b 1 Oct 2026: the head row at the face's own leading, its words light */
.cap-shell .cap-tcard__thead > span { padding: var(--cap-space-gap-7) var(--cap-space-cell-x); }
.cap-shell .cap-tcard__row { border-top: var(--cap-border-hairline) solid var(--cap-color-line-on-ink); }
.cap-shell .cap-tcard__k { padding: var(--cap-space-cell-y) var(--cap-space-cell-x); font-family: var(--cap-font-ui); font-weight: 600; font-size: var(--cap-tcard-key); letter-spacing: var(--cap-track-label); text-transform: uppercase; color: var(--cap-color-on-ink); }
.cap-shell .cap-tcard__v { padding: var(--cap-space-cell-y) var(--cap-space-cell-x); font-family: var(--cap-font-ui); font-weight: 400; font-size: var(--cap-type-card-value); letter-spacing: var(--cap-track-data); line-height: var(--cap-leading-data); color: var(--cap-color-on-ink-3); }
.cap-shell .cap-tcard__v a { color: var(--cap-color-on-ink); text-decoration: none; border-bottom: var(--cap-border-selected) solid var(--cap-color-primary); }
@media (hover: hover) { .cap-shell .cap-tcard__v a:hover { color: var(--cap-color-primary-pale); } }   /* round 23 rule 3 on ink: the card facts' links had no hover; on ink the hover is the pale lilac (CD) */
.cap-shell .cap-tcard__v .cap-tcard__v-sep { color: var(--cap-color-on-ink-muted); }

/* Also in the Runes (conditional) — CD D18: a CREAM card on the ink page. Stone (the runic letter on an
   ink-violet oval) left · eyebrow · name · the rune's essence (italic) · the pairing reason · hairline · footnote. */
.cap-shell .cap-tcard__runes { background: var(--cap-color-bg); color: var(--cap-color-text); margin-top: var(--cap-space-md); }
.cap-shell .cap-tcard__runes-body { display: grid; grid-template-columns: var(--cap-tcard-stone-w) 1fr; column-gap: var(--cap-space-block-5); align-items: start; padding: var(--cap-space-card-pad) var(--cap-space-card-pad) var(--cap-space-card-pad) var(--cap-space-block-5); }
.cap-shell .cap-tcard__stone { width: var(--cap-tcard-stone-w); height: var(--cap-tcard-stone-h); border-radius: 50%; 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-stone); color: var(--cap-color-primary-pale); font-family: var(--cap-font-rune), var(--cap-font-ui); font-size: calc(var(--cap-tcard-stone-h) * var(--cap-rune-glyph)); display: flex; align-items: center; justify-content: center; margin-top: var(--cap-space-field-x); }   /* the rune glyph rule: 30 % of the stone */   /* D8b: the oval rune stone, not a disc */
.cap-shell .cap-tcard__runes-text { display: flex; flex-direction: column; gap: var(--cap-space-xs); min-width: 0; }
.cap-shell .cap-tcard__runes-eyebrow { font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-type-sm); letter-spacing: var(--cap-track-meta); text-transform: uppercase; color: var(--cap-color-muted); margin: 0; }
.cap-shell .cap-tcard__runes-name { font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-type-h3-card); letter-spacing: var(--cap-track-label); text-transform: uppercase; color: var(--cap-color-text); }
.cap-shell .cap-tcard__runes-essence { font-family: var(--cap-font-serif); font-style: italic; font-size: var(--cap-type-lede); line-height: var(--cap-leading-lede); color: var(--cap-color-text-secondary); margin: 0; }
a.cap-tcard__runes-name { text-decoration: none; }
@media (hover: hover) { a.cap-tcard__runes-name:hover { color: var(--cap-color-primary); } }
.cap-shell .cap-tcard__footnote { font-family: var(--cap-font-serif); font-style: italic; font-size: var(--cap-type-small); line-height: var(--cap-leading-small); color: var(--cap-color-muted); margin: var(--cap-space-sm) 0 0; border-top: var(--cap-border-hairline) solid var(--cap-color-line); padding-top: var(--cap-space-md); }

/* Rail: prev/next · on-this-page · cards */
.cap-shell .cap-tcard__pn { display: flex; justify-content: space-between; gap: var(--cap-space-md); 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); }
.cap-shell .cap-tcard__pn a { color: inherit; text-decoration: none; }
@media (hover: hover) { .cap-shell .cap-tcard__pn a:hover { color: var(--cap-color-on-ink); } }
/* D8b (2026-09-25): every rail card on the raised ink, 24 in, 20 between parts; the eyebrow first, the title
   Bricolage 24, a full-width pill. The poster card's photo runs edge to edge above its words. */
.cap-shell .cap-tcard__card { border: var(--cap-border-hairline) solid var(--cap-color-line-on-ink-2); padding: var(--cap-space-block-5); display: flex; flex-direction: column; align-items: flex-start; gap: var(--cap-space-field-x); }
.cap-shell .cap-tcard__card--raised { background: var(--cap-color-ink-raised); }
.cap-shell .cap-tcard__card .cap-tcard__eyebrow { font-size: var(--cap-type-sm); letter-spacing: var(--cap-track-eyebrow); line-height: var(--cap-leading-tight); }
.cap-shell .cap-tcard__card-title { font-family: var(--cap-font-display-sm); font-weight: 800; font-size: var(--cap-type-h3-card); line-height: var(--cap-leading-tight); letter-spacing: var(--cap-track-tight); color: var(--cap-color-on-ink); margin: 0; }
.cap-shell .cap-tcard__card-btn { align-self: stretch; justify-content: center; text-align: center; }
.cap-shell .cap-tcard__card-icon { display: block; width: var(--cap-card-icon); height: var(--cap-card-icon); color: var(--cap-color-primary-pale); }
.cap-shell .cap-tcard__card-icon svg { width: 100%; height: 100%; display: block; }
.cap-shell .cap-tcard__card--poster { padding: 0; gap: 0; border: 0; }   /* a full-bleed photo never carries a stroke (owner 2026-09-25) */
.cap-shell .cap-tcard__card-img { width: 100%; height: var(--cap-tcard-poster-h); object-fit: cover; display: block; }
.cap-shell .cap-tcard__card-in { align-self: stretch; display: flex; flex-direction: column; align-items: flex-start; gap: var(--cap-space-field-x); padding: var(--cap-space-block-5); }
.cap-shell .cap-tcard__daily-icon { display: inline-flex; align-items: center; justify-content: center; width: auto; height: var(--cap-tcard-daily-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-tcard__daily-icon svg { display: block; width: auto; height: calc(100% * 346.37 / 339.67); }
.cap-shell .cap-tcard__card-actions { display: flex; flex-wrap: wrap; gap: var(--cap-space-gap-5); }
.cap-shell .cap-tcard__nav-card { padding: var(--cap-space-block-5); gap: var(--cap-space-field-x); background: var(--cap-color-fill-on-ink); }
.cap-shell .cap-tcard__nav-card > .cap-tcard__eyebrow { color: var(--cap-color-on-ink); font-size: var(--cap-type-label); letter-spacing: var(--cap-track-label); }
.cap-shell .cap-tcard__nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border-left: var(--cap-border-emphasis) solid var(--cap-color-line-on-ink-2); }
.cap-shell .cap-tcard__nav a { display: block; margin-left: calc(-1 * var(--cap-border-emphasis)); padding: var(--cap-space-gap-3) 0 var(--cap-space-gap-3) var(--cap-space-md); 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-label); text-transform: uppercase; color: var(--cap-color-on-ink-muted); text-decoration: none; border-left: var(--cap-border-emphasis) solid transparent; }
.cap-shell .cap-tcard__nav li:first-child a { color: var(--cap-color-on-ink); border-left-color: var(--cap-color-primary); }
@media (hover: hover) { .cap-shell .cap-tcard__nav a:hover { color: var(--cap-color-on-ink); } }   /* the violet bar marks the SELECTED entry only; hover lifts the text (owner 2026-09-29) */

/* Deck strip */
.cap-shell .cap-tcard__deck { border-top: var(--cap-border-hairline) solid var(--cap-color-line-on-ink); padding: var(--cap-space-lg) 0 var(--cap-space-xl); }
.cap-shell .cap-tcard__deck-h { font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-type-section); letter-spacing: var(--cap-track-label); text-transform: uppercase; color: var(--cap-color-on-ink); margin: 0 0 var(--cap-space-lg); }
.cap-shell .cap-tcard__tiles { list-style: none; margin: 0; padding: 0 var(--cap-tcard-deck-x); display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: calc(var(--cap-space-md) + var(--cap-space-gap-1)) 0; }   /* D8b: 11 equal columns over 1190, centred */
.cap-shell .cap-tcard__tile > :is(a, .cap-press) { display: flex; flex-direction: column; align-items: center; gap: var(--cap-space-sm); text-decoration: none; color: var(--cap-color-on-ink-muted); }
.cap-shell .cap-tcard__tile-n { width: var(--cap-tcard-tile-w); height: var(--cap-tcard-tile-h); border: var(--cap-border-hairline) solid var(--cap-color-line-on-ink-2); border-radius: var(--cap-radius-card-face-xs); background: var(--cap-color-ink-raised); display: flex; align-items: center; justify-content: center; font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-type-sm); letter-spacing: var(--cap-track-label); color: var(--cap-color-on-ink-2); }
.cap-shell .cap-tcard__tile-name { font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-type-meta); letter-spacing: var(--cap-track-meta); text-transform: uppercase; text-align: center; }
.cap-shell .cap-tcard__tile[aria-current] .cap-tcard__tile-n { background: var(--cap-color-primary); border-color: var(--cap-color-primary); color: var(--cap-color-surface); }
.cap-shell .cap-tcard__tile[aria-current] .cap-tcard__tile-name { color: var(--cap-color-on-ink); border-bottom: var(--cap-border-selected) solid var(--cap-color-primary); }
@media (hover: hover) { .cap-shell .cap-tcard__tile > :is(a, .cap-press):hover .cap-tcard__tile-n { border-color: var(--cap-color-line-on-ink-hover); } }

/* Mobile (2k): ONE flow. The article and the rail dissolve (display: contents) so every block is a
   direct flex item of the grid and takes the sheet's order: prev/next → hero → Upright → Reversed →
   correspondences → Runes card → free-birth-chart card → poster card → daily card → deck strip, last (the desktop
   order, owner round 22 — it replaced 2k's chart · strip · Runes; chart before poster before daily stands). The rail is not sticky here. */
@media (max-width: 699px) {
  .cap-shell .cap-tcard { --cap-tcard-h1: var(--cap-type-card-h1); --cap-tcard-lede: var(--cap-type-card-lede); --cap-tcard-lede-w: none; --cap-tcard-key: var(--cap-type-sm); }   /* 2d's mobile sizes (the D8b desktop values are page-local) */
  .cap-shell .cap-tcard__grid { display: flex; flex-direction: column; align-items: stretch; gap: var(--cap-space-lg); padding: 0 0 var(--cap-space-lg); }   /* stretch (0.51.207): the desktop grid's `align-items: start` shrink-wrapped the prev/next row + its hairline to half the width */
  .cap-shell .cap-tcard__main, .cap-shell .cap-tcard__rail { display: contents; }
  .cap-shell .cap-tcard__pn--top { display: flex; order: 0; border-top: var(--cap-border-hairline) solid var(--cap-color-line-on-ink); padding-top: var(--cap-space-crumb-y); }
  .cap-shell .cap-tcard__hero { order: 1; grid-template-columns: 1fr; gap: var(--cap-space-md); text-align: center; margin-top: calc(var(--cap-space-crumb-y) - var(--cap-space-lg)); }
  .cap-shell .cap-tcard__art { margin: 0 auto; }
  .cap-shell .cap-tcard__title { align-items: center; gap: var(--cap-space-sm); }
  .cap-shell .cap-tcard__chips { justify-content: center; }
  .cap-shell #upright { order: 2; } .cap-shell #reversed { order: 3; } .cap-shell #correspondences { order: 4; }
  .cap-shell #runes { order: 5; }   /* round 22 C10 (owner): below 1024 the desktop order — the cross-reference, then the rail's cards, the strip last */
  .cap-shell .cap-tcard__card--chart { order: 6; }
  .cap-shell .cap-tcard__card--poster { order: 7; }
  .cap-shell .cap-tcard__card--daily { order: 8; }
  .cap-shell .cap-tcard__deck { order: 9; }
  .cap-shell .cap-tcard__rail .cap-tcard__pn, .cap-shell .cap-tcard__nav-card { display: none; }
  .cap-shell .cap-tcard__sub { grid-template-columns: 1fr; gap: var(--cap-space-xs); }
  .cap-shell .cap-tcard__thead, .cap-shell .cap-tcard__row { grid-template-columns: 1fr auto; }
  .cap-shell .cap-tcard__v { text-align: right; }
  .cap-shell .cap-tcard__runes-body { grid-template-columns: auto 1fr; gap: var(--cap-space-md); padding: var(--cap-space-card-pad); }
  .cap-shell .cap-tcard__stone { margin-top: 0; }
  .cap-shell .cap-tcard__deck { border-top: 0; padding: 0; }
  .cap-shell .cap-tcard__deck { min-width: 0; }
  .cap-shell .cap-tcard__tiles { display: flex; overflow-x: auto; gap: var(--cap-space-md); padding: 0 0 var(--cap-space-sm); }
  .cap-shell .cap-tcard__tile-n { width: var(--cap-deck-tile); height: auto; aspect-ratio: 53 / 111; }   /* 2k's slim tiles on the phone (D8b's square boxes are desktop) */
  .cap-shell .cap-tcard__tile { flex: 0 0 auto; width: var(--cap-deck-tile); }
  .cap-shell .cap-tcard__tile-name { white-space: normal; }
}
@media (min-width: 700px) {
  .cap-shell .cap-tcard__pn--top { display: none; }
}
/* 700–1279 (owner 2026-09-30): the 440 rail beside the article left the article 40 px wide at 820 and 244 at 1024 —
   every value in the correspondences table wrapped ("The / World"). The rail drops under the article, as on the
   horoscope sign pages; prev/next moves to the top, the "On this page" card goes (it jumps to what is right above). */
@media (min-width: 700px) and (max-width: 1279px) {
  .cap-shell .cap-tcard__grid { grid-template-columns: 1fr; column-gap: var(--cap-space-xl); }
  .cap-shell .cap-tcard__rail .cap-tcard__pn, .cap-shell .cap-tcard__nav-card { display: none; }
  .cap-shell .cap-tcard__pn--top { display: flex; }   /* the T12 row's look: the block below (with the strip) */
}

/* D8b/D9b pairing module type (2026-09-25): name 26, essence 17 on 27 (above the components' card-lede sweep), footnote 14
   held 96 off the right edge so it breaks where the sheet does */
:root body .cap-shell .cap-tcard .cap-tcard__runes-essence { font-size: var(--cap-type-lede); line-height: var(--cap-leading-small); }
.cap-shell .cap-tcard__runes-name { font-size: var(--cap-tcard-pair-name); line-height: var(--cap-leading-tight); }
.cap-shell .cap-tcard__footnote { font-size: var(--cap-tcard-foot); padding-right: var(--cap-tcard-foot-pad); }   /* the rule runs full width; the words break where the sheet's do */
@media (max-width: 699px) { .cap-shell .cap-tcard { --cap-tcard-foot-pad: 0px; } }
a.cap-tcard__stone { text-decoration: none; transition: box-shadow var(--cap-ease); }
/* the glyph keeps its accent on hover — the shell's own a:hover would turn it ink on the ink stone (owner 2026-09-25) */
@media (hover: hover) { .cap-shell a.cap-tcard__stone:hover { color: var(--cap-color-primary-pale); } }
@media (hover: hover) { a.cap-tcard__stone:hover { box-shadow: var(--cap-shadow-stone-hover); } }

/* The phone-only "All 22 →" beside the deck strip (owner 27 Sep: the one mobile string variant). */
.cap-shell .cap-tcard__pn-all { display: none; }   /* the tablet top row's "← All …" (owner 2026-10-01) */
.cap-shell .cap-tcard__pn-pair { display: contents; }
.cap-shell .cap-tcard__deck-all { display: none; }

/* 700–1279 · T12 / T13 (1024; 820 follows them): the tablet column (912 / 708); no breadcrumb — the top row 20 under the
   header line: "← All 22 cards" / "← All 25 runes" left, the previous · next names right (owner 2026-10-01); 56 between the
   blocks under the article; the free-chart and poster cards side by side, the draw band across; the deck one scrolling row
   with "All 22 →" / "All 25 →" beside its heading (the phone's strip at the tablet's sizes) */
/* THE DRAW BOX, desktop rail — VERSION A (owner ruling 2026-10-08): the icon + headline on one row, eyebrow above, the three buttons
   beneath (two above and one below where three do not fit) — the tablet arrangement, in the rail's width */
@media (min-width: 1280px) {
  .cap-shell .cap-tcard__card--daily { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--cap-space-md); }
  .cap-shell .cap-tcard__card--daily > :not(.cap-tcard__daily-icon):not(.cap-tcard__card-title) { grid-column: 1 / -1; }
  .cap-shell .cap-tcard__card--daily .cap-tcard__daily-icon { margin: 0; }
}
@media (min-width: 700px) and (max-width: 1279px) {
  .cap-shell .cap-tcard__inner { padding-left: var(--cap-page-x-mid); padding-right: var(--cap-page-x-mid); }
  .cap-shell nav.cap-tcard__crumbs { display: none; }
  .cap-shell .cap-tcard__grid { padding-top: 0; row-gap: var(--cap-space-band-close); }
  .cap-shell .cap-tcard__pn--top { border-top: 0; padding-top: var(--cap-space-section-head-below); color: var(--cap-color-on-ink-muted); }
  .cap-shell .cap-tcard__pn-all { display: inline; color: inherit; text-decoration: none; }
  .cap-shell .cap-tcard__pn-pair { display: flex; gap: var(--cap-space-lg); }
  .cap-shell .cap-tcard__hero { margin-top: calc(var(--cap-space-xl) + var(--cap-space-gap-4)); }   /* the sheet's distance from the top row to the hero */
  .cap-shell .cap-tcard__rail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cap-space-band-close) var(--cap-gutter); max-width: none; align-self: stretch; }
  .cap-shell .cap-tcard__card--daily { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--cap-space-md); }   /* T12 / T13: eyebrow · icon + headline · the buttons */
  .cap-shell .cap-tcard__card--daily > :not(.cap-tcard__daily-icon):not(.cap-tcard__card-title) { grid-column: 1 / -1; }
  .cap-shell .cap-tcard__card--daily .cap-tcard__daily-icon { margin: 0; }
  .cap-shell .cap-tcard__card--chart > :last-child { margin-top: auto; }   /* the button at the card's foot, level with the poster card's */
  .cap-shell .cap-tcard__tile-name { font-size: var(--cap-type-spec-stacked); font-weight: 600; letter-spacing: var(--cap-track-label); }   /* T12 / T13: 12 · 600 · .1em */
  .cap-shell .cap-tcard__card--daily .cap-tcard__d { display: none; }   /* the tablet sheets use the site's phone headline */
  .cap-shell .cap-tcard__card--daily .cap-tcard__m { display: inline; }
  .cap-shell .cap-tcard__deck { min-width: 0; padding-bottom: var(--cap-space-xl); }
  .cap-shell .cap-tcard__deck-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--cap-space-md); margin: 0; }
  .cap-shell .cap-tcard__deck-h { margin: 0; }
  .cap-shell .cap-tcard__deck-all { display: inline; flex: none; font-family: var(--cap-font-ui); font-weight: 600; font-size: var(--cap-type-caption); letter-spacing: var(--cap-track-meta); line-height: normal; text-transform: uppercase;
    color: var(--cap-color-on-ink); text-decoration: none; border-bottom: var(--cap-border-hairline) solid var(--cap-color-primary); padding-bottom: var(--cap-space-gap-1); }
  .cap-shell .cap-tcard__tiles { display: flex; align-items: flex-start; gap: var(--cap-space-gap-7); overflow-x: auto; margin: 0 calc(-1 * var(--cap-page-x-mid)); padding: var(--cap-gutter) var(--cap-page-x-mid) var(--cap-space-block-5); }   /* round 32 (owner 2026-10-06): one step more between the names and the scroll bar, so a two-line name never touches it (20 → 24) */
  .cap-shell .cap-tcard__tile { flex: none; width: 64px; position: relative; }   /* geometry: T12's 64 × 106 card; position holds the press-link in the scroller */
  .cap-shell .cap-tcard { --cap-tcard-tile-w: 64px; --cap-tcard-tile-h: 106px; }
  .cap-shell .cap-tcard__lede { max-width: none; }   /* T12 (owner 2026-10-01): the lede runs to the column's right edge — The Lovers in two lines */
  .cap-shell .cap-tcard { --cap-tcard-foot-pad: 0px; }   /* the note across the box, never a word alone on its last line */
  .cap-shell .cap-tcard__footnote { text-wrap: pretty; }
}

/* PHONE (390) — CD 2k, measured 27 Sep 2026 against mobile-key-screens.dc.html (27 Sep markup), every value from the
 * sheet; the ones it has no name for are in design-system.json → mobile_pass (provisional). The flow above keeps its
 * order; the grid gap goes to 0 and each block carries the sheet's own distance above it. Desktop + tablet untouched. */
@media (max-width: 699px) {
  .cap-shell .cap-tcard__grid { gap: 0; padding-bottom: var(--cap-space-block-5); }
  /* crumb row: 12 / gutter, 10px caption type; its one rule is the header's own (two touching made a 2px line) */
  .cap-shell .cap-tcard__crumbs { padding: var(--cap-space-gap-6) 0; font-size: var(--cap-type-caption); line-height: normal; border-top: 0;
    gap: calc(var(--cap-space-gap-4) - var(--cap-border-hairline)); }
  /* prev / next: a full-width hairline, 20 above the 11px row */
  .cap-shell .cap-tcard__pn--top { margin: 0 calc(-1 * var(--cap-page-x)); padding: var(--cap-space-block-4) var(--cap-page-x) 0; font-size: var(--cap-type-eyebrow-card); line-height: normal; }
  /* hero: art 20 under prev/next, 20 to the eyebrow, then 14 between each line; meta +10, chips +8 */
  .cap-shell .cap-tcard__hero { margin-top: var(--cap-space-block-4); gap: var(--cap-space-block-4); }
  .cap-shell .cap-tcard__title { gap: var(--cap-space-gap-7); }
  .cap-shell .cap-tcard__title .cap-tcard__eyebrow { font-size: var(--cap-type-eyebrow-card); letter-spacing: var(--cap-track-wide); line-height: normal; color: var(--cap-color-primary); }
  .cap-shell .cap-tcard__h1 { line-height: normal; }
  .cap-shell .cap-tcard__lede { font-weight: 500; line-height: var(--cap-leading-lede); }
  .cap-shell .cap-tcard__meta { font-size: var(--cap-type-eyebrow-card); line-height: normal; margin-top: var(--cap-space-gap-5); }
  .cap-shell .cap-tcard__chips { gap: var(--cap-space-gap-3); margin-top: var(--cap-space-gap-4); }
  .cap-shell .cap-tcard__chip { font-size: var(--cap-type-caption); padding: var(--cap-space-gap-3) var(--cap-space-gap-6); }
  /* the reading: 24 above each section, 14 under the head and between paragraphs; the rows box 18 under the text */
  .cap-shell #upright, .cap-shell #reversed, .cap-shell #correspondences { margin-top: var(--cap-space-block-5); }
  .cap-shell .cap-tcard__h2 { font-size: var(--cap-mp-type-card-h2); letter-spacing: var(--cap-mp-track-card-h2); margin: 0 0 var(--cap-space-gap-7); }
  .cap-shell .cap-tcard__body p { margin-bottom: var(--cap-space-gap-7); }
  .cap-shell .cap-tcard__subs { margin-top: calc(var(--cap-space-gap-7) + var(--cap-space-gap-2)); }
  .cap-shell .cap-tcard__sub { gap: var(--cap-space-gap-3); padding: var(--cap-space-co-field-row) var(--cap-space-field-cell-x); }
  .cap-shell .cap-tcard__sub-k { font-size: var(--cap-type-spec-label); line-height: normal; }
  .cap-shell .cap-tcard__sub-v { font-size: var(--cap-type-lede); line-height: var(--cap-mp-leading-sub); }
  /* correspondences: a 104 key column, left-set values, lilac underlined links */
  .cap-shell .cap-tcard__thead, .cap-shell .cap-tcard__row { grid-template-columns: var(--cap-mp-corr-key-w) 1fr; }
  .cap-shell .cap-tcard__thead { font-size: var(--cap-type-caption); letter-spacing: var(--cap-track-feature); line-height: normal; color: var(--cap-color-on-ink); }
  .cap-shell .cap-tcard__thead > span, .cap-shell .cap-tcard__k { padding: var(--cap-space-gap-6) var(--cap-space-gap-7) var(--cap-space-gap-6) var(--cap-space-gap-8); }
  .cap-shell .cap-tcard__thead > span + span, .cap-shell .cap-tcard__v { padding: var(--cap-space-gap-6) var(--cap-space-gap-8) var(--cap-space-gap-6) 0; }
  .cap-shell .cap-tcard__k { font-size: var(--cap-type-spec-label); line-height: normal; }
  .cap-shell .cap-tcard__v { text-align: left; }
  .cap-shell .cap-tcard__v a { color: var(--cap-color-primary-pale); border-bottom: 0; text-decoration: underline; text-underline-offset: calc(var(--cap-space-gap-1) + var(--cap-border-hairline)); }
  .cap-shell .cap-tcard__v .cap-tcard__v-sep { color: inherit; }
  /* the three promo cards: 24 above, 20 in, 10 between; the eyebrow 13 with its star one space off; 19 titles; 13px pills */
  .cap-shell .cap-tcard__card { margin-top: var(--cap-space-block-5); padding: var(--cap-space-block-4); gap: var(--cap-space-gap-5); }
  .cap-shell .cap-tcard__card--chart, .cap-shell .cap-tcard__card--daily { border-color: var(--cap-color-line-halo); }
  .cap-shell .cap-tcard__card .cap-tcard__eyebrow { font-size: var(--cap-type-eyebrow); line-height: normal; }
  .cap-shell .cap-tcard__card--chart .cap-eyebrow--star::before, .cap-shell .cap-tcard__card--poster .cap-eyebrow--star::before { content: "✦\00a0"; }
  .cap-shell .cap-tcard__card-icon { margin: var(--cap-space-gap-1) 0; }
  .cap-shell .cap-tcard__card-title { line-height: var(--cap-leading-serif-title); letter-spacing: normal; }
  .cap-shell .cap-tcard__card .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); color: var(--cap-color-surface); }
  .cap-shell .cap-tcard__card .cap-tcard__card-btn { margin-top: var(--cap-space-gap-2); }
  .cap-shell .cap-tcard__card--poster { padding: 0; gap: 0; background: var(--cap-color-fill-on-ink); }
  .cap-shell .cap-tcard__card-img { height: var(--cap-mp-poster-img-h); object-position: 50% 42%; }
  .cap-shell .cap-tcard__card-in { padding: var(--cap-space-block-3) var(--cap-space-block-4) var(--cap-space-block-4); gap: var(--cap-space-gap-5); }
  .cap-shell .cap-tcard__card--poster .cap-tcard__card-btn { margin-top: var(--cap-space-gap-1); }
  .cap-shell .cap-tcard__card--daily { align-items: center; text-align: center; gap: var(--cap-space-gap-4); }
  .cap-shell .cap-tcard__card--daily .cap-eyebrow--star::after { content: "\00a0\00a0✦"; }   /* a star each side on the phone sheet */
  .cap-shell .cap-tcard__daily-icon { height: var(--cap-mp-icon-band-tarot-h); margin: var(--cap-space-gap-4) 0; }
  .cap-shell .cap-tcard__card-actions { justify-content: center; gap: var(--cap-space-gap-5); margin-top: var(--cap-space-gap-4); }
  .cap-shell .cap-tcard__card-actions .cap-btn--secondary { padding: var(--cap-btn-pad-small-outlined); }   /* its colours: components .cap-btn--secondary.cap-btn--on-ink (round 23) */
  /* the deck strip: 24 above; "Major Arcana" + "All 22 →" on one line, the tiles 18 under it, scrolling edge to edge */
  .cap-shell .cap-tcard__deck { margin-top: var(--cap-space-block-5); }
  .cap-shell .cap-tcard__deck-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--cap-space-gap-6); }
  .cap-shell .cap-tcard__deck-h { margin: 0; font-size: var(--cap-type-eyebrow-card); letter-spacing: var(--cap-track-meta); line-height: normal; color: var(--cap-color-on-ink-muted); }
  .cap-shell .cap-tcard__deck-all { display: inline; flex: none; font-family: var(--cap-font-ui); font-weight: 600; font-size: var(--cap-type-eyebrow-card); letter-spacing: var(--cap-track-meta); line-height: normal; text-transform: uppercase;
    color: var(--cap-color-on-ink); text-decoration: none; border-bottom: var(--cap-border-hairline) solid var(--cap-color-primary); padding-bottom: var(--cap-space-gap-1); }
  @media (hover: hover) { .cap-shell .cap-tcard__deck-all:hover { color: var(--cap-color-primary-pale); } }
  .cap-shell .cap-tcard__tiles { gap: var(--cap-space-gap-5); margin: calc(var(--cap-space-gap-6) + var(--cap-space-gap-3)) calc(-1 * var(--cap-page-x)) 0; padding: 0 var(--cap-page-x) var(--cap-space-gap-8); }   /* round 32 (owner 2026-10-06): 16 between the names and the scroll bar, so a two-line name never touches it (was 6) */
  .cap-shell .cap-tcard__tile { width: var(--cap-mp-tile-w); position: relative; }   /* holds the press-link inside the scroller (it spilled the page to 1352 wide) */
  .cap-shell .cap-tcard__tile > :is(a, .cap-press) { gap: var(--cap-space-gap-4); }
  .cap-shell .cap-tcard__tile-n { width: var(--cap-mp-tile-w); height: var(--cap-mp-tile-h); aspect-ratio: auto; border-radius: var(--cap-radius-card-face-s); background: var(--cap-mp-color-tile-fill); border-color: var(--cap-color-line-halo);
    font-size: var(--cap-type-label); font-weight: 600; letter-spacing: var(--cap-track-ui); line-height: normal; }
  .cap-shell .cap-tcard__tile-name { font-size: var(--cap-type-caption); font-weight: 600; letter-spacing: var(--cap-track-label); line-height: var(--cap-leading-serif-title); }
  .cap-shell .cap-tcard__tile[aria-current] .cap-tcard__tile-name { padding-bottom: calc(var(--cap-space-gap-1) + var(--cap-border-hairline)); border-bottom-width: var(--cap-border-hairline); }
  /* Also in the runes: a cream box — the eyebrow on top, the stone beside the name + essence, the footnote under a hairline */
  .cap-shell #runes { margin-top: var(--cap-space-block-5); border: var(--cap-border-hairline) solid var(--cap-color-line-strong); }
  .cap-shell .cap-tcard__runes-body { grid-template-columns: var(--cap-mp-stone-xref-w) 1fr; column-gap: var(--cap-space-block-3); row-gap: 0; align-items: center; padding: var(--cap-space-block-3) var(--cap-space-field-cell-x); }
  .cap-shell .cap-tcard__runes-text { display: contents; }
  .cap-shell .cap-tcard__runes-eyebrow { grid-column: 1 / -1; grid-row: 1; margin-bottom: var(--cap-space-gap-7); font-size: var(--cap-type-eyebrow-card); letter-spacing: var(--cap-track-meta); line-height: normal; white-space: nowrap; color: var(--cap-color-caption); }
  .cap-shell .cap-tcard__stone { grid-column: 1; grid-row: 2 / span 2; width: var(--cap-mp-stone-xref-w); height: var(--cap-mp-stone-xref-h); font-size: calc(var(--cap-mp-stone-xref-h) * var(--cap-rune-glyph)); border-radius: var(--cap-mp-radius-stone-xref); box-shadow: var(--cap-shadow-card-on-ink);
    line-height: 1; }
  .cap-shell .cap-tcard__runes-name { grid-column: 2; grid-row: 2; align-self: end; font-size: var(--cap-type-name); letter-spacing: var(--cap-track-card-title); line-height: var(--cap-leading-ui); }
  :root body .cap-shell .cap-tcard .cap-tcard__runes-essence { grid-column: 2; grid-row: 3; align-self: start; margin-top: var(--cap-space-gap-2); font-size: var(--cap-mp-type-card-lede-sm); line-height: var(--cap-leading-data); color: var(--cap-color-muted); }
  .cap-shell .cap-tcard__footnote { grid-column: 1 / -1; grid-row: 4; margin-top: var(--cap-space-gap-7); padding-top: var(--cap-space-gap-6); font-size: var(--cap-mp-type-footnote); line-height: var(--cap-leading-lede); color: var(--cap-color-caption); border-top-color: var(--cap-color-divider-rune); }
}

/* "Correspondences" is a section label like "More spreads", at every width (D8b / D9b 1 Oct 2026, 2k / 2e 28 Sep):
   Barlow Condensed 500 · .1em · uppercase at the section step (20 desktop and tablet, 17 phone); desktop 32 under the reading
   and 24 to the table, the phone 30 and 12 (the column heads stay "Correspondence · Value"). */
.cap-shell #correspondences .cap-tcard__h2 { font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-type-section); line-height: var(--cap-leading-tight); letter-spacing: var(--cap-track-label); text-transform: uppercase; margin: var(--cap-space-section-head-above) 0 var(--cap-space-block-5); }
@media (max-width: 699px) {
  .cap-shell #correspondences { margin-top: var(--cap-space-block-6); }
  .cap-shell #correspondences .cap-tcard__h2 { line-height: normal; margin: 0 0 var(--cap-space-gap-6); }
}
/* 2k, phone: the sheet's words for the deck strip's label and the Daily Tarot band's headline (the desktop keeps its own) */
.cap-shell .cap-tcard__m { display: none; }
@media (max-width: 699px) {
  .cap-shell .cap-tcard__d { display: none; }
  .cap-shell .cap-tcard__m { display: inline; }
  .cap-shell .cap-tcard__v-sep::before, .cap-shell .cap-tcard__v-sep::after { content: "\00a0"; }   /* "See also": the sheet's " &nbsp;·&nbsp; " */
}
/* C3 (owner 2026-10-01): the free-chart card's italic line, back at 700–1279 as T12 draws it (19 italic on 1.5, the on-ink
   secondary); desktop and phone keep D8b / 2k's card without it */
.cap-shell .cap-tcard__card-line { display: none; }
@media (min-width: 700px) and (max-width: 1279px) {
  .cap-shell .cap-tcard__card-line { display: block; font-family: var(--cap-font-serif); font-style: italic; font-weight: 400; font-size: var(--cap-type-lede-band); line-height: var(--cap-leading-lede); color: var(--cap-color-on-ink-3); margin: 0; text-wrap: pretty; }
}

/* 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-tcard__grid { padding-bottom: var(--cap-space-footer-gap); }
}
@media (min-width: 700px) and (max-width: 1279px) {
  .cap-shell .cap-tcard__deck { padding-bottom: calc(var(--cap-space-footer-gap) - var(--cap-space-section-head-below)); }   /* the card strip's own foot */
}

/* round 29 (owner 2026-10-05): the name on T12 / T13 sets its lines 1.0 apart (56 on 1) — it was 1.06 */
@media (min-width: 700px) and (max-width: 1279px) {
  .cap-shell .cap-tcard__h1 { line-height: var(--cap-leading-one); }
}