/* Rune library hub — CD D18 (1440), built 2026-09-14 (engine 0.51.206). The `rune_stone`
 * archive at /runes/stones/: crumbs → centred hero → the three aetts, eight stones a row (120 × 150, face 56),
 * solid rules between (owner 27 Sep; were dashed) → the blank in its own group → the draw band (icon · three buttons).
 * Re-measured against the replaced D18 sheet 2026-09-25 (its text copied verbatim). Token-only; enqueued by
 * Capriastro_Content_Library on the archive; ships with the module (the lift rule).
 * PHONE: CD 2n (27 Sep, engine 0.51.417) — the block at the foot. 700–1023 stays 4-up (reflow.md) until the tablet pass.
 * The stone rules mirror page-rune-stone.css (each view enqueues only its own sheet).
 */

.cap-shell .cap-rhub {
  --cap-rpage-stone-w: 120px;
  --cap-rpage-stone-h: 150px;
  --cap-rpage-stone-r: 56px / 70px;
  --cap-rhub-gap-y: 32px;
  --cap-rhub-col: 137px;
  --cap-rhub-icon-h: 40px;
  background: var(--cap-color-bg); color: var(--cap-color-text);
}
.cap-shell .cap-rhub__inner { max-width: var(--cap-page-max); margin: 0 auto; padding: 0 var(--cap-page-x) var(--cap-space-hub-foot); }

.cap-shell .cap-rstone { display: flex; align-items: center; justify-content: center; flex: none; container-type: size; border-radius: var(--cap-rpage-stone-r); width: var(--cap-rpage-stone-w); height: var(--cap-rpage-stone-h);
  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-dark), var(--cap-shadow-stone); transition: transform var(--cap-ease), box-shadow var(--cap-ease); }
.cap-shell .cap-rstone__face { font-family: var(--cap-font-rune); font-size: calc(100cqh * var(--cap-rune-glyph)); line-height: 1; color: var(--cap-color-primary-pale); }

.cap-shell .cap-rhub__crumbs { border-top: var(--cap-border-hairline) solid var(--cap-color-line); 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-muted); display: flex; flex-wrap: wrap; gap: var(--cap-space-sm); }
.cap-shell .cap-rhub__crumbs a { color: inherit; text-decoration: none; }
 .cap-shell .cap-rhub__crumbs [aria-current] { color: var(--cap-color-text); }
@media (hover: hover) { .cap-shell .cap-rhub__crumbs a:hover { color: var(--cap-color-text); } }

.cap-shell .cap-rhub__hero { padding-top: calc(var(--cap-space-xl) - var(--cap-space-gap-3)); display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--cap-space-md); }
.cap-shell .cap-rhub__eyebrow { font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-type-eyebrow); letter-spacing: var(--cap-track-eyebrow); text-transform: uppercase; color: var(--cap-color-primary); }
.cap-shell .cap-rhub__h1 { margin: 0; }
.cap-shell .cap-rhub__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-text-secondary); margin: var(--cap-space-gap-5) 0 0; max-width: 46ch; }
/* D18: 24 regular — above the site's card-lede sweep (components.css, (0,3,1)) */
:root body .cap-shell .cap-rhub .cap-rhub__lede { font-size: var(--cap-type-lg); line-height: var(--cap-leading-serif-title); }

/* THE GROUPS (D18): an aett heading, its eight stones edge to edge across the column (137-wide items,
   space-between), a solid rule, the next; the blank stone alone and centred in the last group */
.cap-shell .cap-rhub__groups { margin-top: var(--cap-space-rhub-top); }
.cap-shell .cap-rhub__group { padding: var(--cap-space-rhub-sep) 0; }
.cap-shell .cap-rhub__group:first-child { padding-top: 0; }
.cap-shell .cap-rhub__group + .cap-rhub__group { border-top: var(--cap-border-hairline) solid var(--cap-color-divider-rune); }   /* owner ruling 27 Sep, all widths (was dashed) */
.cap-shell .cap-rhub__group:last-child { padding-bottom: 0; }
.cap-shell .cap-rhub__aett { margin: 0; font-family: var(--cap-font-ui); font-weight: 400; font-size: var(--cap-type-section); letter-spacing: var(--cap-track-label); line-height: var(--cap-leading-one); text-transform: uppercase; color: var(--cap-color-text); }
.cap-shell .cap-rhub__stones { list-style: none; margin: calc(var(--cap-space-section-head-below) + var(--cap-space-gap-3)) 0 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, var(--cap-rhub-col))); justify-content: space-between; gap: var(--cap-rhub-gap-y) 0; }
.cap-shell .cap-rhub__group--blank .cap-rhub__stones { grid-template-columns: var(--cap-rhub-col); justify-content: center; }
.cap-shell .cap-rhub__item { display: flex; flex-direction: column; align-items: center; gap: var(--cap-space-md); text-decoration: none; color: var(--cap-color-text); }
.cap-shell .cap-rhub__item > :is(a, .cap-press) { display: flex; flex-direction: column; align-items: center; gap: var(--cap-space-gap-7); text-decoration: none; color: inherit; }
@media (hover: hover) { .cap-shell .cap-rhub__item > :is(a, .cap-press):hover .cap-rstone, .cap-shell .cap-rhub__item:is(a, .cap-press):hover .cap-rstone { transform: translateY(var(--cap-lift-stone)); box-shadow: var(--cap-shadow-dark), var(--cap-shadow-stone-hover); } }
.cap-shell .cap-rhub__name { font-family: var(--cap-font-ui); font-weight: 600; font-size: var(--cap-type-label); letter-spacing: var(--cap-track-label); line-height: var(--cap-leading-tight); text-transform: uppercase; text-align: center; }

.cap-shell .cap-rhub__band { margin-top: var(--cap-space-xl); background: var(--cap-color-text); color: var(--cap-color-on-ink); padding: var(--cap-space-band-y) var(--cap-space-panel-pad); display: flex; align-items: center; justify-content: space-between; gap: var(--cap-space-md); }
.cap-shell .cap-rhub__band-copy { display: flex; flex-direction: column; gap: var(--cap-space-sm); }
.cap-shell .cap-rpage__eyebrow--on-ink { 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-primary-soft); }
.cap-shell .cap-rhub__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; display: flex; align-items: center; gap: var(--cap-space-md); }
/* D18: the rune icon before the title (icon-rune.svg, lilac on the ink) and the buttons */
.cap-shell .cap-rhub__band-icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: auto; height: var(--cap-rhub-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-rhub__band-icon svg { display: block; width: auto; height: calc(100% * 346.37 / 339.67); }
.cap-shell .cap-rhub__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) */
/* D18 desktop: 56 all round, 60 above it, the eyebrow 13 with 24 under it, the title 30, the icon a rounded 29 × 40 tile */
@media (min-width: 700px) {
  .cap-shell .cap-rhub__band { padding: var(--cap-space-band-close); margin-top: calc(var(--cap-space-xl) - var(--cap-space-gap-2)); 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-rhub__band-copy { gap: var(--cap-space-rhub-band-gap); }
  .cap-shell .cap-rhub__band .cap-rpage__eyebrow--on-ink { font-size: var(--cap-type-sm); line-height: var(--cap-leading-tight); }
  .cap-shell .cap-rhub__band-title { font-size: var(--cap-type-band-title-lg); letter-spacing: var(--cap-track-display); gap: var(--cap-space-md); }
  .cap-shell .cap-rhub__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-rhub__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-rhub__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-rhub__band .cap-rpage__eyebrow--on-ink::after { content: "\00a0\00a0✦"; }
  .cap-shell .cap-rhub__band-actions { justify-content: center; }
}

@media (max-width: 699px) {
  .cap-shell .cap-rhub__stones { grid-template-columns: repeat(4, 1fr); justify-content: stretch; }
}
/* 700–1279 · T18 (1024) and T18-820: no breadcrumb (owner 2026-10-01, hubs take nothing); the headline on the 660 measure;
   the eight stones of each aett across the column at 92 × 115 (72 × 90 at 820), the blank the same size; 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-rhub { --cap-rpage-stone-w: 92px; --cap-rpage-stone-h: 115px; --cap-rpage-stone-r: 42.9px / 53.7px; --cap-rhub-col: 92px; }   /* geometry: T18's stone */
  .cap-shell .cap-rhub__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-rhub__crumbs { display: none; }   /* nav.: over the shared trail's flex (components.css, (0,2,1)) */
  .cap-shell .cap-rhub__hero { padding-top: calc(var(--cap-space-xl) + var(--cap-space-gap-1)); }   /* the headline where the sheet has it, now no crumb row stands above */
  :root body .cap-shell .cap-rhub .cap-rhub__lede { max-width: 58ch; font-size: var(--cap-type-lede-hero); line-height: var(--cap-leading-data); font-weight: 500; }   /* T18: 500 (owner 2026-10-01) */   /* T17 / T18: 22 on a 625 measure */
  .cap-shell .cap-rhub__h1 { max-width: var(--cap-measure); text-wrap: balance; }
  .cap-shell .cap-rhub__stones { grid-template-columns: repeat(8, var(--cap-rhub-col)); justify-content: space-between; }
  .cap-shell .cap-rhub__band { padding: var(--cap-space-panel-pad); }
  .cap-shell .cap-rhub__band-title { font-size: var(--cap-type-lg); letter-spacing: var(--cap-track-tight); }
}
@media (min-width: 700px) and (max-width: 1023px) {
  .cap-shell .cap-rhub { --cap-rpage-stone-w: 72px; --cap-rpage-stone-h: 90px; --cap-rpage-stone-r: 33.6px / 42px; --cap-rhub-col: 72px; }   /* geometry: T18-820's stone */
  /* round 22 C7 (owner): eight across, never closer than 16 — below ~776 the 72 stone cannot keep 16 apart in the 56-inset
     column (712: 3 px), so the column shrinks the stone (72 at most, its own 4 : 5 shape) instead of the gap */
  .cap-shell .cap-rhub__stones { grid-template-columns: repeat(8, minmax(0, var(--cap-rhub-col))); column-gap: var(--cap-space-gap-8); }
  .cap-shell .cap-rhub__group--blank .cap-rhub__stones { grid-template-columns: min(var(--cap-rhub-col), calc((100% - 7 * var(--cap-space-gap-8)) / 8)); }   /* round 25 (owner, 760): the blank takes the eight-across column's width, so Wyrd shrinks with the others */
  .cap-shell .cap-rhub__item > :is(a, .cap-press) { width: 100%; }
  .cap-shell .cap-rhub .cap-rstone { width: 100%; max-width: var(--cap-rpage-stone-w); height: auto; aspect-ratio: 72 / 90; }
}
/* PHONE (390) — CD 2n, measured 27 Sep 2026 against mobile-key-screens.dc.html (23 Sep markup) and the 27 Sep PNG
 * (the PNG wins where they differ: solid #e7e3d8 rules between the groups — owner ruling 27 Sep, all widths; the band's
 * two buttons stacked, 13px on the small-button padding). Provisional tokens: design-system.json → mobile_pass. */
@media (max-width: 699px) {
  .cap-shell .cap-rhub__inner { padding-bottom: var(--cap-space-block-6); }
  .cap-shell .cap-rhub__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;
    color: var(--cap-color-caption); gap: calc(var(--cap-space-gap-4) - var(--cap-border-hairline)); border-top: 0; }   /* one rule: the header's own */
  .cap-shell .cap-rhub__hero { padding-top: var(--cap-space-block-5); gap: var(--cap-space-gap-7); }
  .cap-shell .cap-rhub__eyebrow { line-height: normal; }
  :root body .cap-shell .cap-rhub .cap-rhub__lede { font-size: var(--cap-type-lede); line-height: var(--cap-leading-lede); margin-top: 0; max-width: none; }
  /* the groups: 24 under the lede and 24 apart; each after the first opens on a 1px solid rule with 24 under it */
  .cap-shell .cap-rhub__groups { margin-top: var(--cap-space-block-6); }   /* round 32 (owner 2026-10-06): one ladder step more (24 → 30) under "All yes/no meanings" */
  .cap-shell .cap-rhub__group { padding: 0; display: flex; flex-direction: column; gap: var(--cap-space-gap-6); }
  .cap-shell .cap-rhub__group + .cap-rhub__group { margin-top: var(--cap-space-block-5); padding-top: var(--cap-space-block-5); }
  .cap-shell .cap-rhub__aett { font-size: var(--cap-type-section-light); line-height: normal; }
  .cap-shell .cap-rhub__stones { margin: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--cap-space-gap-8);   /* round 22: at least 16 between stones, both ways (owner) */ }
  .cap-shell .cap-rhub__group--blank .cap-rhub__stones { grid-template-columns: calc((100% - 3 * var(--cap-space-gap-8)) / 4); justify-content: center; }
  .cap-shell .cap-rhub__group--blank .cap-rhub__item { grid-column: auto; }
  .cap-shell .cap-rhub__item > :is(a, .cap-press) { gap: var(--cap-space-block-1); width: 100%; }
  .cap-shell .cap-rhub .cap-rstone { width: 100%; height: auto; aspect-ratio: 46 / 57.5; border-radius: 46.6% / 46.6%; }   /* the stone's own shape (a per-component calc, not a token) */
  .cap-shell .cap-rhub .cap-rstone { box-shadow: var(--cap-mp-shadow-stone-hub); }
  .cap-shell .cap-rhub .cap-rstone__face { font-size: calc(100cqh * var(--cap-rune-glyph)); text-shadow: 0 0 var(--cap-space-md) var(--cap-color-halo); }
  .cap-shell .cap-rhub__name { font-size: var(--cap-mp-type-tile-name); line-height: var(--cap-mp-leading-tile-name); }
  /* the Rune of the Day band: ink, no border — one centred column: eyebrow (a star each side) · rune icon · title · the buttons, two to a row, centred (owner 2026-10-08) */
  .cap-shell .cap-rhub__band { margin-top: var(--cap-space-block-6); padding: var(--cap-space-panel-pad); flex-direction: column; align-items: center; text-align: center; gap: var(--cap-space-block-1); }
  .cap-shell .cap-rhub__band-copy { display: contents; }
  .cap-shell .cap-rhub__band .cap-rpage__eyebrow--on-ink { font-size: var(--cap-type-eyebrow); line-height: normal; }
  .cap-shell .cap-rhub__band .cap-rpage__eyebrow--on-ink::after { content: "\00a0\00a0✦"; }
  .cap-shell .cap-rhub__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-rhub__band-icon { height: var(--cap-mp-icon-band-tarot-h); }
  .cap-shell .cap-rhub__band-actions { justify-content: center; gap: var(--cap-space-gap-5); margin: var(--cap-space-block-3) 0 var(--cap-space-gap-2); }
  .cap-shell .cap-rhub__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-rhub__band .cap-btn--primary { color: var(--cap-color-surface); }
  .cap-shell .cap-rhub__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-rhub__inner { padding-bottom: var(--cap-space-footer-gap); }