/* ============================================================
 * page-capriastro-home.css — the HOME page (CD 1a mobile · D1 desktop · T1 tablet, 23 Sep 2026).
 *
 * Enqueued by capriastro-engine.php's per-page convention (page URI "capriastro-home").
 * Markup: src/deploy/home.php — the hero row is the calculator shortcode (hero on) beside the
 * decorative wheel; then the horoscopes strip (src/home/02-horoscopes.html), the four
 * Capriastro_Home shortcodes (reading band · poster band · draws · Chronicles feature) and the
 * planets strip (src/home/06-planets.html). The calculator's own hero rules live in calculator.css.
 *
 * LITERAL-FREE: every colour, type size, spacing, radius and shadow is a var(--cap-*). The only bare
 * numbers are geometry with no token — grid tracks, the sheet stack's offsets, an aspect ratio, a
 * rotation. Every rule is scoped `.cap-shell …` (Elementor's kit styles bare `a`/`button` at 0,1,1).
 *
 * Widths: D1 at 1440 · T1 at 820 (page gutter 56 = --cap-page-x-mid) · 1a at 390 (gutter 26).
 * ============================================================ */

/* ─── section rhythm ──────────────────────────────────────── */
.cap-shell .cap-home > section { padding-bottom: var(--cap-space-xl); }
/* the section-heading row: on a rule, 32 above / 20 below (desktop); label role A left, the link right */
.cap-shell .cap-home__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--cap-space-md); border-top: var(--cap-border-hairline) solid var(--cap-color-line); padding-top: var(--cap-space-section-head-above); margin-bottom: var(--cap-space-section-head-below); }
.cap-shell .cap-home__more { flex: none; font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-type-eyebrow); letter-spacing: var(--cap-track-meta); text-transform: uppercase; color: var(--cap-color-primary); white-space: nowrap; }
@media (hover: hover) { .cap-shell .cap-home__more:hover { color: var(--cap-color-text); } }

/* ─── 01 · hero row (Elementor containers; see src/deploy/home.php) ─ */
.cap-home-herorow { align-items: center; flex-wrap: nowrap; gap: var(--cap-gutter); padding-top: 0; }
/* D1: the hero row is `1fr 500px` at gap 24, vertically CENTRED, 64 above and below; Elementor's per-element flex
   variables (0,3,0) set the two columns 50/50 and top-aligned, so the row's own variables are overridden here at
   (0,3,0)+ and the columns sized directly (measured 2026-09-23: the wheel sat 42 css px high and 45 left). */
.cap-shell .cap-home-herorow.e-con, .cap-home-herorow.e-con.e-flex { --align-items: center; align-items: center; }
/* the hero row HOLDS the page width: see "THE PAGE HOLDS ITS WIDTH" in components.css (one rule for every such block) */
.cap-shell .cap-home-herorow > .cap-home-herocol.e-con, .cap-home-herorow > .cap-home-herocol.e-con { --width: auto; width: auto; flex: 1 1 0; min-width: 0; }
/* the wheel column = D1's 500 at x 836–1336: the gap (24) and the page gutter (80) ride on the aside as padding, the row gap is 0 */
.cap-shell .cap-home-herorow.e-con, .cap-home-herorow.e-con.e-flex { --gap: 0; gap: 0; }
.cap-shell .cap-home-herorow > .cap-home-heroaside.e-con, .cap-home-herorow > .cap-home-heroaside.e-con { --width: calc(var(--cap-col-wheel) + var(--cap-gutter) + var(--cap-page-x)); width: calc(var(--cap-col-wheel) + var(--cap-gutter) + var(--cap-page-x)); flex: 0 0 calc(var(--cap-col-wheel) + var(--cap-gutter) + var(--cap-page-x)); --padding-left: var(--cap-gutter); --padding-right: var(--cap-page-x); padding-left: var(--cap-gutter); padding-right: var(--cap-page-x); box-sizing: border-box; }
.cap-shell .cap-home-hero__aside { display: flex; justify-content: center; padding: 0; }
.cap-shell .cap-home-hero__wheel { display: flex; justify-content: center; width: 100%; overflow: visible; }
.cap-shell .cap-home-hero__wheel img { display: block; width: var(--cap-hero-wheel); max-width: none; height: auto; flex: none; }
.cap-home-herocol { flex: 1 1 0; min-width: 0; }
.cap-home-heroaside { flex: 0 0 var(--cap-col-wheel); min-width: 0; }
.cap-home-herocol .cap-calc { padding-top: var(--cap-space-hero-open); padding-bottom: var(--cap-space-hero-open); }
/* D1 (27 Sep): the trust row → the next section 72, so the wheel, centred on the row, sits where the sheet puts it */
@media (min-width: 1280px) {
  .cap-home-herorow .cap-home-herocol .cap-calc { padding-bottom: calc(var(--cap-space-hero-open) + var(--cap-space-gap-4)); }   /* (0,3,0): calculator.css loads after this sheet */
}
.cap-home-herocol .cap-calc__panel-wrap { padding-left: var(--cap-page-x); }
.cap-home-heroaside .cap-inset { padding-left: 0; }

/* ─── 02 · monthly horoscopes (12 × 84 · T 6 × 84 · M 4-up) ── */
.cap-shell .cap-home-signs__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 84px)); gap: var(--cap-space-md); justify-content: center; justify-items: center; }   /* the columns give way below 1184 px (1024–1183 scrolled sideways) */
.cap-shell .cap-home-sign { display: flex; flex-direction: column; align-items: center; gap: var(--cap-space-gap-3); text-align: center; }
.cap-shell .cap-home-sign__glyph { display: block; width: 54px; height: 54px; transition: color var(--cap-ease); }
.cap-shell .cap-home-sign__glyph svg { display: block; width: 100%; height: 100%; fill: currentColor; }
@media (hover: hover) { .cap-shell .cap-home-sign:hover .cap-home-sign__glyph { color: var(--cap-color-text); } }   /* round 25 (owner): a tile's hover turns its glyph INK (mouse only) — replaces round 23's option (a), violet */
.cap-shell .cap-home-sign__name { font-family: var(--cap-font-ui); font-weight: 600; font-size: var(--cap-type-eyebrow-card); letter-spacing: var(--cap-track-meta); text-transform: uppercase; color: var(--cap-color-text); line-height: var(--cap-leading-ui); }
/* the twelve sign colours (the tokens exist since 0.51.116; the 9 Sep build drew ink) */
.cap-shell .cap-home-sign--aries .cap-home-sign__glyph { color: var(--cap-color-sign-aries); }
.cap-shell .cap-home-sign--taurus .cap-home-sign__glyph { color: var(--cap-color-sign-taurus); }
.cap-shell .cap-home-sign--gemini .cap-home-sign__glyph { color: var(--cap-color-sign-gemini); }
.cap-shell .cap-home-sign--cancer .cap-home-sign__glyph { color: var(--cap-color-sign-cancer); }
.cap-shell .cap-home-sign--leo .cap-home-sign__glyph { color: var(--cap-color-sign-leo); }
.cap-shell .cap-home-sign--virgo .cap-home-sign__glyph { color: var(--cap-color-sign-virgo); }
.cap-shell .cap-home-sign--libra .cap-home-sign__glyph { color: var(--cap-color-sign-libra); }
.cap-shell .cap-home-sign--scorpio .cap-home-sign__glyph { color: var(--cap-color-sign-scorpio); }
.cap-shell .cap-home-sign--sagittarius .cap-home-sign__glyph { color: var(--cap-color-sign-sagittarius); }
.cap-shell .cap-home-sign--capricorn .cap-home-sign__glyph { color: var(--cap-color-sign-capricorn); }
.cap-shell .cap-home-sign--aquarius .cap-home-sign__glyph { color: var(--cap-color-sign-aquarius); }
.cap-shell .cap-home-sign--pisces .cap-home-sign__glyph { color: var(--cap-color-sign-pisces); }

/* ─── 03 · the full reading (ink band: copy 56 | sheets 420) ── */
.cap-shell .cap-home-reading-wrap { padding-bottom: var(--cap-space-band-close); }
.cap-shell .cap-home-reading { display: grid; grid-template-columns: minmax(0, 1fr) var(--cap-band-pages); align-items: center; padding: 0; overflow: hidden; color: var(--cap-color-on-ink-heading); }
.cap-shell .cap-home-reading__copy { display: flex; flex-direction: column; gap: var(--cap-space-md); padding: var(--cap-space-band-close); }
.cap-shell .cap-home-reading__h { max-width: 21ch; color: var(--cap-color-on-ink-heading); }
.cap-shell .cap-home-reading__lede { max-width: 48ch; font-weight: 400; }
.cap-shell .cap-home-reading__cta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--cap-space-md); }
.cap-shell .cap-home-reading__caption { color: var(--cap-color-on-ink-muted); }
.cap-shell .cap-home-reading__poster { font-family: var(--cap-font-ui); font-weight: 600; font-size: var(--cap-type-btn-l); letter-spacing: var(--cap-track-eyebrow); text-transform: uppercase; color: var(--cap-color-on-ink-heading); }
@media (hover: hover) { .cap-shell .cap-home-reading__poster: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") */
.cap-shell .cap-home-reading__pages { position: relative; height: 380px; }
.cap-shell .cap-home-reading__sheet { position: absolute; width: 330px; height: 429px; background: var(--cap-color-bg); box-shadow: var(--cap-shadow-sheet); overflow: hidden; }
.cap-shell .cap-home-reading__sheet img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
.cap-shell .cap-home-reading__sheet--back { left: -1px; top: 18px; transform: rotate(-4deg); }
.cap-shell .cap-home-reading__sheet--front { left: 120px; top: 47px; transform: rotate(5deg); }

/* ─── 04 · poster band (image | copy 620) ─────────────────── */
.cap-shell .cap-home-poster__box { display: grid; grid-template-columns: minmax(0, 1fr) 620px; align-items: stretch; color: var(--cap-color-text); }
.cap-shell .cap-home-poster__media { display: block; min-height: 400px; }
.cap-shell .cap-home-poster__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cap-shell .cap-home-poster__copy { display: flex; flex-direction: column; gap: var(--cap-space-md); justify-content: center; padding: var(--cap-space-band-close); }
.cap-shell .cap-home-poster__lede { max-width: 52ch; font-weight: 400; line-height: var(--cap-leading-small); }
.cap-shell .cap-home-poster__facts { display: flex; align-items: center; gap: var(--cap-space-gap-7); margin-top: var(--cap-space-gap-3); }
.cap-shell .cap-home-poster__dots { display: flex; gap: var(--cap-space-gap-3); }
.cap-shell .cap-home-poster__dot { display: block; width: 22px; height: 22px; border-radius: var(--cap-radius-pill); }
.cap-shell .cap-home-poster__dot--white { background: var(--cap-color-frame-white); border: var(--cap-border-hairline) solid var(--cap-color-line-strong); }
.cap-shell .cap-home-poster__dot--black { background: var(--cap-color-frame-black); }
.cap-shell .cap-home-poster__dot--oak { background: var(--cap-color-frame-oak); }
.cap-shell .cap-home-poster__dot--walnut { background: var(--cap-color-frame-walnut); }
.cap-shell .cap-home-poster__fact { font-family: var(--cap-font-ui); font-weight: 600; font-size: var(--cap-type-label); letter-spacing: var(--cap-track-label); text-transform: uppercase; color: var(--cap-color-muted); white-space: nowrap; }
.cap-shell .cap-home-poster__div { width: 1px; height: var(--cap-space-md); background: var(--cap-color-line-strong); display: block; }
.cap-shell .cap-home-poster__cta { display: flex; align-items: center; gap: var(--cap-space-md); margin-top: var(--cap-space-gap-6); }
.cap-shell .cap-home-poster__caption { font-weight: 600; font-size: var(--cap-type-label); letter-spacing: var(--cap-track-label); white-space: nowrap; }
@media (hover: hover) { .cap-shell .cap-home-poster__box:hover .cap-home-poster__btn { background: var(--cap-color-primary); color: var(--cap-color-bg); } }

/* ─── 05 · draws + Chronicles feature (2.1fr | 1.6fr on desktop) ──
   The row's direction and page gutter are Elementor settings (src/deploy/home.php); the stylesheet
   only shares the width between the two columns and zeroes their own insets inside the row. */
.cap-home-dcrow { align-items: flex-start; gap: var(--cap-gutter); background: var(--cap-color-bg); }
.cap-home-dcrow > .elementor-element:first-child { flex: 2.1 1 0; min-width: 0; }
.cap-home-dcrow > .elementor-element:last-child { flex: 1.6 1 0; min-width: 0; }
.cap-home-dcrow .cap-inset { padding-left: 0; padding-right: 0; }
/* D1 (owner review 2026-09-23): ONE hairline runs across both columns — "Draws" and "From the Chronicles" sit on the same
   line 32 below it — and the feature card and the four draw tiles beside it end level (each stretches to the taller). The two columns are two
   Elementor widgets, so the rule is the draws head's own, carried 24 into the gap, and the stretch runs down the wrappers. */
@media (min-width: 1280px) {
  .cap-home-dcrow.e-con.e-flex { --align-items: stretch; align-items: stretch; }
  .cap-home-dcrow > .elementor-element:first-child .cap-home__head { margin-right: calc(var(--cap-gutter) * -1); padding-right: var(--cap-gutter); }
  .cap-home-dcrow > .elementor-element:last-child { display: flex; flex-direction: column; }   /* its 1.6 share stays */
  .cap-home-dcrow > .elementor-element:last-child .elementor-widget-container,
  .cap-home-dcrow > .elementor-element:last-child .elementor-shortcode,
  .cap-home-dcrow > .elementor-element:last-child .cap-shell,
  .cap-home-dcrow > .elementor-element:last-child .cap-page,
  .cap-home-dcrow > .elementor-element:last-child .cap-home-feature-wrap { display: flex; flex-direction: column; flex: 1 1 auto; }
  .cap-shell .cap-home-feature-wrap .cap-home-feature { flex: 1 1 auto; }
  /* and the other way (owner rule 2026-09-29): when the Chronicles card grows with its content, the Draws column stretches to
     it and the two rows of tiles share the height — the columns always end level. The card's own floor is the column
     (flex above), i.e. two tiles plus the gap between them. */
  .cap-home-dcrow > .elementor-element:first-child { display: flex; flex-direction: column; }
  .cap-home-dcrow > .elementor-element:first-child .elementor-widget-container,
  .cap-home-dcrow > .elementor-element:first-child .elementor-shortcode,
  .cap-home-dcrow > .elementor-element:first-child .cap-shell,
  .cap-home-dcrow > .elementor-element:first-child .cap-page,
  .cap-home-dcrow > .elementor-element:first-child .cap-home-draws { display: flex; flex-direction: column; flex: 1 1 auto; width: 100%; }   /* full width: a column-flex item would otherwise shrink to its tiles */
  .cap-home-dcrow .cap-shell .cap-home-draws__grid { flex: 1 1 auto; grid-auto-rows: 1fr; }
  .cap-home-dcrow .cap-shell .cap-home__more { line-height: var(--cap-leading-ui); }   /* the link's own line box made its head 3 px deeper than "Draws", so the card sat 4 px below the tiles */
}
/* the page ground under the two Elementor rows, so no strip of the kit's own background shows beside a shell */
.cap-home-herorow { background: var(--cap-color-bg); }
.cap-shell .cap-home-draws__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--cap-space-cell-x); }
.cap-shell .cap-home-draw { border-radius: 0; display: flex; align-items: center; gap: var(--cap-space-md); padding: var(--cap-space-cell-x); color: var(--cap-color-text); }
.cap-shell .cap-home-draw__icon { display: block; flex: none; color: var(--cap-color-primary); }
.cap-shell .cap-home-draw__icon svg { display: block; fill: currentColor; width: auto; height: calc(28px * 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-home-draw__text { display: flex; flex-direction: column; gap: var(--cap-space-gap-3); min-width: 0; }
.cap-shell .cap-home-draw__sub { color: var(--cap-color-muted); font-size: var(--cap-type-lede); }

.cap-shell .cap-home-feature { display: flex; color: var(--cap-color-text); }
.cap-shell .cap-home-feature__media { display: block; flex: none; width: 250px; min-height: 100%; }
.cap-shell .cap-home-feature__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cap-shell .cap-home-feature__body { display: flex; flex-direction: column; gap: var(--cap-space-chip-gap); justify-content: center; padding: var(--cap-gutter); }   /* D1: 24 */
.cap-shell .cap-home-feature__eyebrow { font-size: var(--cap-type-sm); letter-spacing: var(--cap-track-meta); }
.cap-shell .cap-home-feature__cat-m { display: none; }
.cap-shell .cap-home-feature__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-text); }
.cap-shell .cap-home-feature__meta-m { display: none; }
/* 1280–1359 (owner 2026-09-30): the Chronicles column is too narrow for image beside text (the title ran to six lines) —
   the image goes over the copy at the phone's 172, the desktop type unchanged; from 1360 the two sit side by side again */
@media (min-width: 1280px) and (max-width: 1359px) {
  .cap-shell .cap-home-feature { flex-direction: column; }
  .cap-shell .cap-home-feature__media { width: 100%; height: auto; aspect-ratio: 2 / 1; min-height: 172px; min-width: 0; }   /* NO PICTURE WIDER THAN 2 : 1 (owner 2026-10-03): 2 : 1, never shorter than the sheet's height */
}

/* ─── 06 · learn the planets (10-up, disc 56) ─────────────── */
.cap-shell .cap-home-planets__row { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--cap-space-band-close); }
.cap-shell .cap-home-planet { display: flex; flex-direction: column; align-items: center; gap: var(--cap-space-chip-gap); flex: none; }
.cap-shell .cap-home-planet__disc { width: 56px; height: 56px; border-radius: var(--cap-radius-pill); background: var(--cap-color-text); color: var(--cap-color-bg); display: flex; align-items: center; justify-content: center; font-family: var(--cap-font-glyph); font-size: var(--cap-type-h1-product); line-height: 1; transition: background var(--cap-ease), box-shadow var(--cap-ease); }
@media (hover: hover) { .cap-shell .cap-home-planet:hover .cap-home-planet__disc { background: var(--cap-color-primary); } }   /* round 23 rule 8: the disc turns violet and nothing else (the halo and the name colour are gone) */
.cap-shell .cap-home-planet__name { font-family: var(--cap-font-ui); font-weight: 600; font-size: var(--cap-type-label); letter-spacing: var(--cap-track-label); text-transform: uppercase; color: var(--cap-color-text); }
@media (min-width: 700px) { .cap-shell .cap-home-planet__disc { font-size: var(--cap-type-glyph-disc); } }

/* ─── reflow · 700–1279 = the tablet sheet (T1 at 820; the 1280 rule) ────── */
@media (max-width: 1279px) {
  .cap-home-herorow, .cap-home-herorow.e-con.e-flex { --flex-direction: column; flex-direction: column; align-items: stretch; gap: 0; }   /* Elementor's own column switch is below 1025; the 1280 rule needs it up to 1279 */
  .cap-home-herorow.e-con > .elementor-element.e-con { --width: 100%; width: 100%; }   /* both halves the full row, as Elementor sets them below 1025 */
  .cap-home-herorow.e-con > .cap-home-heroaside.e-con { --display: none; display: none; }   /* the hero wheel is decoration: hidden below 1280 (owner 2026-09-30) */
  .cap-home-herocol .cap-calc { padding-top: var(--cap-space-band-close); padding-bottom: 0; }
  .cap-home-herocol .cap-calc__panel-wrap { padding-left: var(--cap-page-x-mid); }
  .cap-home-heroaside { flex-basis: auto; padding-top: var(--cap-space-section-head-above); padding-bottom: var(--cap-space-xl); }
  .cap-home-heroaside .cap-inset { padding-left: var(--cap-page-x-mid); }
  .cap-shell .cap-home-hero__wheel img { max-width: 400px; }
  .cap-shell .cap-home-signs__grid { grid-template-columns: repeat(6, 84px); gap: var(--cap-space-lg) var(--cap-space-xl); }
  .cap-shell .cap-home-reading { grid-template-columns: minmax(0, 1fr); }
  .cap-shell .cap-home-reading__copy { padding-bottom: 0; }
  .cap-shell .cap-home-reading__pages { height: 320px; margin-top: var(--cap-space-lg); }
  .cap-shell .cap-home-reading__sheet { width: 280px; height: 364px; }
  .cap-shell .cap-home-reading__sheet--back { left: 96px; top: 24px; }
  .cap-shell .cap-home-reading__sheet--front { left: 364px; top: 48px; }
  .cap-shell .cap-home-poster__box { grid-template-columns: minmax(0, 1fr); }
  .cap-shell .cap-home-poster__media { height: 440px; min-height: 0; }
  .cap-shell .cap-home-poster__copy { justify-content: flex-start; }
  .cap-home-dcrow.e-con, .cap-home-dcrow.e-con.e-flex { --flex-direction: column; flex-direction: column; }   /* Elementor stacks it only below its own 1025; the 1280 rule stacks it here (owner 2026-09-30) */
  .cap-home-dcrow > .elementor-element { flex: 0 0 auto; width: 100%; }
  /* T1 draws the ten discs on one row at 820; at gap 20 they measure 740 in a 708 column, so the gap steps down one ladder value (12) — noted in DESIGN.md */
  .cap-shell .cap-home-planets__row { gap: var(--cap-space-gap-6); }
}

/* ─── 700–1279 · THE TABLET SHEETS T1 (1024) / T1-820 (1 Oct 2026) ─────────────────────────────────────────────────────
   The reading band keeps its two columns — the copy and ONE straight report page (340 at 1024, 280 at 820; the back page is
   the desktop's); the headline 38 (30 at 820), the lede 19 (17); the button, the caption and the poster link wrap as one row.
   The poster card: the photo 440 over the copy (56 in), the lede 19 (17). Draws: 2 × 2 tiles at 20. The Chronicles card keeps
   its 250 photo beside the copy (24 in, the title 24). The ten planets spread across the column. */
@media (min-width: 700px) and (max-width: 1279px) {
  .cap-home-herorow .cap-home-herocol .cap-calc { padding-top: var(--cap-space-field-h); padding-bottom: var(--cap-space-hero-open); }   /* T1: 48 under the transit rule, 64 to the horoscopes rule */
  .cap-shell .cap-home-reading { grid-template-columns: minmax(0, 1fr) var(--cap-band-pages-mid); }
  .cap-shell .cap-home-reading__copy { padding: var(--cap-space-field-h); padding-bottom: var(--cap-space-field-h); gap: var(--cap-space-md); }
  .cap-shell .cap-home-reading__lede { font-size: var(--cap-type-lede-band); line-height: var(--cap-leading-lede); color: var(--cap-color-on-ink-2); }
  .cap-shell .cap-home-reading__cta { margin-top: var(--cap-space-sm); gap: var(--cap-space-gap-7) var(--cap-space-md); }
  .cap-shell .cap-home-reading__poster { font-size: var(--cap-type-btn-l); }
  .cap-shell .cap-home-reading__pages { height: var(--cap-band-page-well-mid); margin-top: 0; }
  .cap-shell .cap-home-reading__sheet--back { display: none; }
  .cap-shell .cap-home-reading__sheet--front { left: var(--cap-band-page-x-mid); top: var(--cap-band-page-y-mid); width: var(--cap-band-page-w-mid); height: var(--cap-band-page-h-mid); transform: none; }
  .cap-shell .cap-home-poster__media { height: var(--cap-home-poster-media-mid); min-height: 0; }
  .cap-shell .cap-home-poster__copy { padding: var(--cap-space-band-close); }
  .cap-shell .cap-home-poster__lede { font-size: var(--cap-type-lede-band); line-height: var(--cap-leading-small); max-width: none; }
  .cap-shell .cap-home-poster__facts { margin-top: var(--cap-space-gap-3); flex-wrap: wrap; }
  .cap-shell .cap-home-poster__cta { margin-top: var(--cap-space-gap-6); flex-wrap: wrap; }
  .cap-shell .cap-home-draws__grid { gap: var(--cap-space-cell-x); }
  .cap-shell .cap-home-feature__media { width: var(--cap-home-feature-media-mid); min-height: 0; }
  .cap-shell .cap-home-feature__body { padding: var(--cap-gutter); gap: var(--cap-space-chip-gap); }
  .cap-shell .cap-home-planets__row { justify-content: space-between; flex-wrap: nowrap; gap: 0; }

  .cap-shell .cap-home-planet { gap: var(--cap-space-chip-gap); }
  .cap-shell .cap-home-planet__name { line-height: normal; }
  /* signs: 6 × 84 at 24 × 40, the name 6 under its glyph on the face's own line; the section closes 80 */
  .cap-shell .cap-home > section.cap-home-signs { padding-bottom: var(--cap-space-page-end); }
  .cap-shell .cap-home-signs__grid { gap: var(--cap-gutter) var(--cap-space-panel-pad); }
  .cap-shell .cap-home-sign { gap: var(--cap-space-gap-3); }
  .cap-shell .cap-home-sign__name { font-size: var(--cap-type-sign-name-mid); line-height: normal; }
  /* the band's own colours (T1): the headline and the lede a shade softer, the button's words white */
  .cap-shell .cap-home-reading .cap-home-reading__h { color: var(--cap-color-on-ink-heading); }
  .cap-shell .cap-home-reading .cap-home-reading__lede { color: var(--cap-color-on-ink-3); }
  .cap-shell .cap-home-reading .cap-btn.cap-home-reading__btn { color: var(--cap-color-surface); }
  .cap-shell .cap-home-reading__caption, .cap-shell .cap-home-reading__poster { line-height: normal; }
  /* draws: the icons at the sheet's 26 / 30, the title and the line on their faces' own leading, 6 apart, the line in the caption grey */
  .cap-shell .cap-home-draw { gap: var(--cap-space-gap-8); }
  .cap-shell .cap-home-draw__icon svg { height: calc(var(--cap-home-draw-icon-mid) * 346.37 / 220.49); }
  .cap-shell .cap-home-draw__text { gap: var(--cap-space-gap-3); }
  .cap-shell .cap-home-draw__title, .cap-shell .cap-home-draw__sub { line-height: normal; }
  .cap-shell .cap-home-draw__sub { color: var(--cap-color-caption); }
  /* the Chronicles card: the category 13 · .14em */
  :root body .cap-shell .cap-home-feature .cap-home-feature__eyebrow.cap-home-feature__eyebrow { font-size: var(--cap-type-sm); letter-spacing: var(--cap-track-meta); }   /* T1 draws the card's category 13 (the 24 Sep "one eyebrow" rule is desktop's) */
  .cap-shell .cap-home > section.cap-home-reading-wrap { padding-bottom: var(--cap-space-band-close); }
  .cap-shell .cap-home__more { line-height: normal; }
  .cap-home-dcrow.e-con, .cap-home-dcrow.e-con.e-flex { --gap: 0; gap: 0; }   /* stacked, the draws and the Chronicles card keep their own 64 */
  .cap-shell .cap-home-poster__fact, .cap-shell .cap-home-poster__caption { line-height: normal; color: var(--cap-color-caption); }
}
/* round 22 (owner): below 760 the ten discs need more than the column (640 in 600 at 712) — two rows of five, inside it */
/* round 22 (owner): the six sign columns stay inside the content column — below 820 the sheet's gap would not fit (6 × 84 + 5
   gaps in 600 at 712), so it steps down to 16 */
@media (min-width: 700px) and (max-width: 819px) { .cap-shell .cap-home-signs__grid { column-gap: var(--cap-space-gap-8); } }
@media (min-width: 700px) and (max-width: 759px) {
  .cap-shell .cap-home-planets__row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); justify-items: center; row-gap: var(--cap-gutter); }
}
@media (min-width: 700px) and (max-width: 1023px) {
  .cap-shell .cap-home-reading { grid-template-columns: minmax(0, 1fr) var(--cap-band-pages-820); }
  .cap-shell .cap-home-reading__copy { padding: var(--cap-space-panel-pad); }
  .cap-shell .cap-home-reading__h { font-size: var(--cap-type-form-head); line-height: var(--cap-leading-form-head); letter-spacing: var(--cap-track-form-head); text-wrap: balance; }
  .cap-shell .cap-home-reading__lede, .cap-shell .cap-home-poster__lede { font-size: var(--cap-type-lede); }
  .cap-shell .cap-home-poster__lede { max-width: 52ch; }
  .cap-shell .cap-home-draw__sub { font-size: var(--cap-type-lede); }
  .cap-shell .cap-home-reading__sheet--front { left: var(--cap-band-page-x-820); width: var(--cap-band-page-w-820); height: var(--cap-band-page-h-820); }
  .cap-shell .cap-home-reading__pages { height: var(--cap-band-page-well-820); }
  .cap-shell .cap-home-planet { width: var(--cap-home-planet-w-820); }
  .cap-shell .cap-home > section.cap-home-signs { padding-bottom: var(--cap-space-hero-open); }   /* T1-820: 64 (1024: 80) */
}

/* ─── reflow · < 700 = the mobile sheet (1a) ──────────────── */
@media (max-width: 699px) {
  .cap-shell .cap-home > section { padding-bottom: 0; }
  .cap-shell .cap-home__head { border-top: 0; padding-top: 0; margin-bottom: var(--cap-space-gap-6); }
  .cap-shell .cap-home__more { display: none; }   /* 1a: the section label stands alone; the links are desktop / tablet */
  .cap-home-herorow { gap: 0; }
  .cap-home-herocol .cap-calc { padding-top: var(--cap-space-block-4); padding-bottom: var(--cap-space-block-4); }   /* 1a (28 Sep): 20 from the transit rule to the icon */
  .cap-home-herocol .cap-calc__panel-wrap { padding-left: var(--cap-page-x); }
  /* the wheel container is hidden on mobile through Elementor's own visibility setting (home.php) */

  /* horoscopes: on a rule, 4-up, gap 20 × 8, glyph 52 */
  .cap-shell .cap-home-signs { border-top: var(--cap-border-hairline) solid var(--cap-color-line); padding-top: var(--cap-space-block-5); padding-bottom: var(--cap-space-block-1); }
  .cap-shell .cap-home-signs__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--cap-space-cell-x) var(--cap-space-sm); justify-content: stretch; }
  .cap-shell .cap-home-sign__glyph { width: 52px; height: 52px; }
  .cap-shell .cap-home-sign__name { font-size: var(--cap-type-caption); }

  /* the reading card: image band 172 on the deep ink, two sheets 144 × 187, copy 20 */
  .cap-shell .cap-home-reading-wrap { padding-top: var(--cap-space-block-5); padding-bottom: 0; }
  .cap-shell .cap-home-reading { display: flex; flex-direction: column; align-items: stretch; }   /* stretch: the desktop grid's `center` would collapse the sheet stack to zero width */
  .cap-shell .cap-home-reading__pages { order: -1; height: 172px; background: var(--cap-color-ink-deep); }
  .cap-shell .cap-home-reading__sheet { width: 144px; height: 187px; box-shadow: var(--cap-shadow-card-on-ink); }
  /* the pair is CENTRED AS A GROUP in its box (round 31, owner 2026-10-05), placed from the box's centre: the sheet's 59 / 147 from
     the left sat the pair 7 right of centre at 388 and 29 at 320, where the cover was cut by the box's edge. Measured with the tilt,
     the pair now has equal room each side at every phone width. */
  .cap-shell .cap-home-reading__sheet--back { left: calc(50% - 117px); top: 20px; }
  .cap-shell .cap-home-reading__sheet--front { left: calc(50% - 29px); top: 32px; }
  .cap-shell .cap-home-reading__copy { padding: var(--cap-space-cell-x); gap: var(--cap-space-chip-gap); }
  .cap-shell .cap-home-reading__h { font-size: var(--cap-type-card-headline); line-height: var(--cap-leading-tight); letter-spacing: var(--cap-track-tight); max-width: none; }
  .cap-shell .cap-home-reading__lede { font-size: var(--cap-type-lede); line-height: var(--cap-leading-small); }
  .cap-shell .cap-home-reading__cta { flex-direction: column-reverse; align-items: stretch; gap: var(--cap-space-chip-gap); }
  .cap-shell .cap-home-reading__caption { text-align: center; margin-top: var(--cap-space-xs); }
  .cap-shell .cap-home-reading__btn { width: 100%; }
  .cap-shell .cap-home-reading__poster { display: none; }

  /* the poster card: image 200, copy 16 20 20 */
  .cap-shell .cap-home-poster { padding-top: var(--cap-space-block-5); }   /* the reading band → the poster card 24 (owner 28 Sep, from 16) */
  .cap-shell .cap-home-poster .cap-home__head { display: none; }
  .cap-shell .cap-home-poster__box { display: flex; flex-direction: column; }
  .cap-shell .cap-home-poster__media { height: auto; aspect-ratio: 2 / 1; min-height: 200px; min-width: 0; }   /* NO PICTURE WIDER THAN 2 : 1 (owner 2026-10-03): 2 : 1, never shorter than the sheet's height */
  .cap-shell .cap-home-poster__copy { padding: var(--cap-space-md) var(--cap-space-cell-x) var(--cap-space-cell-x); gap: var(--cap-space-chip-gap); }
  .cap-shell .cap-home-poster__h { font-size: var(--cap-type-card-headline); line-height: var(--cap-leading-tight); letter-spacing: var(--cap-track-tight); }
  .cap-shell .cap-home-poster__lede { font-size: var(--cap-type-lede); }
  .cap-shell .cap-home-poster__facts { display: none; }
  .cap-shell .cap-home-poster__cta { flex-direction: column; align-items: stretch; margin-top: var(--cap-space-xs); }
  .cap-shell .cap-home-poster__btn { width: 100%; }
  .cap-shell .cap-home-poster__caption { text-align: center; font-weight: 500; font-size: var(--cap-type-caption); letter-spacing: var(--cap-track-feature); white-space: normal; }

  /* draws: 2 × 2, stacked cards; the row is plain here, so the sections keep their own inset */
  .cap-home-dcrow > .elementor-element { flex: 0 0 auto; width: 100%; }
  .cap-home-dcrow .cap-inset { padding-left: var(--cap-page-x); padding-right: var(--cap-page-x); }
  .cap-shell .cap-home-draws { padding-top: var(--cap-space-block-4); }
  .cap-shell .cap-home-draws__grid { gap: var(--cap-space-chip-gap); }
  .cap-shell .cap-home-draw { flex-direction: column; align-items: flex-start; gap: var(--cap-space-gap-3); padding: var(--cap-space-card-pad); }
  .cap-shell .cap-home-draw__icon svg { height: calc(20px * 346.37 / 220.49); }
  .cap-shell .cap-home-draw__title { font-size: var(--cap-type-spec-stacked); }
  .cap-shell .cap-home-draw__sub { font-size: var(--cap-type-spec-stacked); }

  /* the feature: image 172 over the copy; the mobile eyebrow carries the day, the meta the read time */
  .cap-shell .cap-home-feature-wrap { padding-top: var(--cap-space-block-5); }
  .cap-shell .cap-home-feature { flex-direction: column; }
  .cap-shell .cap-home-feature__media { width: 100%; height: auto; aspect-ratio: 2 / 1; min-height: 172px; min-width: 0; }   /* NO PICTURE WIDER THAN 2 : 1 (owner 2026-10-03): 2 : 1, never shorter than the sheet's height */
  .cap-shell .cap-home-feature__body { padding: var(--cap-space-md) var(--cap-space-row-pad); gap: var(--cap-space-sm); }
  .cap-shell .cap-home-feature__eyebrow { font-size: var(--cap-type-eyebrow); letter-spacing: var(--cap-track-eyebrow); }
  .cap-shell .cap-home-feature__cat { display: none; }
  .cap-shell .cap-home-feature__cat-m { display: inline; }
  .cap-shell .cap-home-feature__title { font-family: var(--cap-font-serif); font-weight: 400; font-size: var(--cap-type-faq); line-height: var(--cap-leading-serif-title); letter-spacing: 0; }
  .cap-shell .cap-home-feature__meta-d { display: none; }
  .cap-shell .cap-home-feature__meta-m { display: inline; }

  /* planets: 5-up, disc 38, name 9 */
  .cap-shell .cap-home-planets { padding-top: var(--cap-space-block-5); padding-bottom: 0; }
  .cap-shell .cap-home-planets .cap-home__head { margin-bottom: var(--cap-space-gap-7); }
  .cap-shell .cap-home-planets__row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--cap-space-gap-7) var(--cap-space-gap-3); }
  .cap-shell .cap-home-planet { gap: var(--cap-space-gap-3); }
  .cap-shell .cap-home-planet__disc { width: 38px; height: 38px; font-size: var(--cap-type-section); }
  .cap-shell .cap-home-planet__name { font-size: var(--cap-type-badge); letter-spacing: var(--cap-track-feature); color: var(--cap-color-muted); }
}

/* the Chronicles card's hover is the shadow ONLY (D1: `box-shadow: 0 14px 30px rgba(36,31,61,.14)`, owner review 2026-09-24) —
   no title colour, no border change */

/* D1, re-measured against the updated sheet (2026-09-24; desktop 1280+ only):
   · the section closes the markup gives — signs 80, the reading band 56 (the shared `> section` 64 was winning over both)
   · the poster card's photo FILLS its half (absolute) instead of setting the card's height from its own proportions
     (the card was 543 tall; the sheet's is the copy column's 456, with the photo's min-height 400)
   · the draw tiles' title on the tight line-height (the tiles were 107; the sheet's 97) */
@media (min-width: 1280px) {
  .cap-shell .cap-home > section.cap-home-signs { padding-bottom: calc(var(--cap-space-xl) + var(--cap-space-md)); }
  .cap-shell .cap-home > section.cap-home-reading-wrap { padding-bottom: var(--cap-space-band-close); }
  .cap-shell .cap-home-poster__media { position: relative; }
  .cap-shell .cap-home-poster__media img { position: absolute; inset: 0; }
  .cap-shell .cap-home-draw__title { line-height: var(--cap-leading-tight); }
  .cap-shell .cap-home__more,
  .cap-shell .cap-home-planet__name { line-height: var(--cap-leading-tight); }
  .cap-shell .cap-home-reading__cta { margin-top: var(--cap-space-sm); }   /* the lede → button 24 (the sheet's; was 16) */
  .cap-shell .cap-home-poster__facts { line-height: var(--cap-leading-ui); }   /* the row is its 22 dots tall (was 26) */
}

/* ─── 1a, the 28 Sep sheet (phone only; D1 / T1 unchanged) ─────────────────────────────────────────────
   Signs: 16 under the label, rows 20 apart, the name 4 under its glyph on a 1.2 line. The reading band: the image band
   clips its two sheets; the headline 23 · 1.2 · −.006em (1j's featured-card token), the ledes 1.65. The poster card: the
   same headline. Draws: the 34 icon row, the sub in the caption grey. The
   Chronicles card: the title in the featured-card display (from Source Serif). Planets: glyph 20, names caption grey. */
@media (max-width: 699px) {
  .cap-shell .cap-home__head .cap-section { line-height: var(--cap-mp-leading-home-head); }   /* the section labels on the sheet's 23 line */
  .cap-shell .cap-home-signs .cap-home__head { margin-bottom: var(--cap-space-md); }
  .cap-shell .cap-home > section.cap-home-signs { padding-bottom: var(--cap-space-block-1); }   /* the grid → the reading card 8 + 24 (the shared `> section` 0 was winning) */
  .cap-shell .cap-home-signs__grid { row-gap: var(--cap-space-block-4); }
  .cap-shell .cap-home-sign { gap: var(--cap-space-xs); }
  .cap-shell .cap-home-sign__name { line-height: var(--cap-leading-tight); }

  .cap-shell .cap-home-reading__pages { overflow: hidden; margin-top: 0; }   /* the band opens the card (the tablet rule's 24 above it stays on the tablet) */
  .cap-shell .cap-home-reading__h,
  .cap-shell .cap-home-poster__h { font-family: var(--cap-font-display-sm); font-size: var(--cap-mp-type-card-h2); line-height: var(--cap-leading-tight); letter-spacing: var(--cap-mp-track-card-h2); }
  .cap-shell .cap-home-reading .cap-home-reading__h { color: var(--cap-color-on-ink-heading); }
  .cap-shell .cap-home-reading__copy { padding: var(--cap-space-block-4); }
  .cap-shell .cap-home-reading__caption { letter-spacing: var(--cap-track-feature); line-height: var(--cap-leading-tight); }
  .cap-shell .cap-home-poster__copy { padding: var(--cap-space-md) var(--cap-space-block-4) var(--cap-space-block-4); }
  .cap-shell .cap-home-poster__caption { line-height: var(--cap-leading-tight); }
  .cap-shell .cap-home-poster__cta { gap: var(--cap-space-chip-gap); }
  .cap-shell .cap-home-draw__title { line-height: var(--cap-leading-tight); }
  .cap-shell .cap-home-draw__sub { line-height: normal; }
  .cap-shell .cap-home-planet__name { line-height: var(--cap-leading-tight); }
  .cap-shell .cap-home-planet__disc { color: var(--cap-color-surface); }
  .cap-shell .cap-home-reading__lede,
  .cap-shell .cap-home-poster__lede { line-height: var(--cap-mp-leading-sub); }
  .cap-shell .cap-home-poster__caption { color: var(--cap-color-caption); }

  .cap-shell .cap-home-draw__icon { display: flex; align-items: flex-end; height: 34px; }
  .cap-shell .cap-home-draw__sub { color: var(--cap-color-caption); }

  .cap-shell .cap-home-feature__title { font-family: var(--cap-font-display-sm); font-weight: 800; font-size: var(--cap-mp-type-card-h2); line-height: var(--cap-leading-tight); letter-spacing: var(--cap-mp-track-card-h2); }
  .cap-shell .cap-home-feature__body { padding: var(--cap-space-md) var(--cap-mp-chron-feature-x); }   /* 16 · 18 (1j's featured card) */
  .cap-shell .cap-home-feature__meta { line-height: var(--cap-leading-tight); }

  .cap-shell .cap-home-planet__disc { font-size: var(--cap-mp-type-planet-disc); }
  .cap-shell .cap-home-planet__name { color: var(--cap-color-caption); }
  .cap-shell .cap-home > section.cap-home-planets { padding-bottom: var(--cap-space-block-6); }   /* the planets → the footer 30 */
  .cap-home-dcrow.e-con, .cap-home-dcrow.e-con.e-flex { --gap: 0; gap: 0; }   /* the draws and the Chronicles card stack with their own 24 (the row's column gap is desktop's) */
}

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