/* Capriastro SINGLE POST (D6, updated 25 Sep · 1k on phones).
   Desktop: one 1172 width — the share rail 200 · 56 · the article 660 · 56 · a matching empty 200 — and the hero on
   that width at 2:1 (never the page's). Mobile: one column at the 26px inset. The article's roles: headings in
   Bricolage, a heading directly under a heading is its Barlow kicker, the serif body, Barlow lists with ink bullets.
   Then the free-chart band, Keep reading (the Key dates block was removed, owner 2026-09-28).

   Literal-free for colour / type / spacing / radius / shadow — every one of those is a var(--cap-*). The only raw
   values are GEOMETRY the token set has no name for (share-ring diameter, bullet, card image heights), marked
   `geometry` below. */

/* ─── head (centred on desktop, left on mobile) ───────────────────────── */
.cap-shell .cap-post { --cap-post-wide: calc(2 * var(--cap-col-share) + 2 * var(--cap-gutter-rail-blog) + var(--cap-measure)); }   /* D6: 200 · 56 · 660 · 56 · 200 = 1172 — the hero, the rail and the article on one width */
.cap-shell .cap-post__head { padding-top: var(--cap-space-post-head-top); text-align: center; }   /* D6: the kicker 61 below the header */
.cap-shell .cap-post__kicker { display: inline-flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: var(--cap-space-sm); }   /* "Chronicles | Transits" (D6) */
.cap-shell .cap-post__title { max-width: 26ch; margin: var(--cap-space-md) auto var(--cap-space-post-title-after); }
.cap-shell .cap-post__lede { max-width: var(--cap-measure); margin: 0 auto; font-size: var(--cap-type-post-lede); line-height: var(--cap-leading-data); }   /* D6: 22 on a 32 line, the article's 660 (1k: 17) */
.cap-shell .cap-post__byline { display: flex; align-items: center; justify-content: center; gap: var(--cap-space-md); margin-top: var(--cap-space-card-pad); }
.cap-shell .cap-post__by { font-family: var(--cap-font-serif); font-style: italic; font-size: var(--cap-type-byline); color: var(--cap-color-text); text-decoration: none; }   /* D6: 16 */
.cap-shell .cap-post__when { font-size: var(--cap-type-textlink); }   /* D6: the date line at 12.5 */
.cap-shell .cap-post__bysep { color: var(--cap-color-muted); }
/* "Astrology" above an Astrology-hub article's headline is a LINK to the hub (owner 2026-10-20): it wears the category word's
   colour exactly (inherited here; violet on a phone by the < 700 rule below), and turns ink under a mouse */
.cap-shell a.cap-post__hub { color: inherit; }
@media (hover: hover) { .cap-shell a.cap-post__hub:hover { color: var(--cap-color-text); } }

/* ─── hero: bleeds to the shell edge, never to the viewport ───────────── */
.cap-shell .cap-post__hero-wrap { display: flex; justify-content: center; }
.cap-shell .cap-post__hero { width: var(--cap-post-wide); max-width: 100%; aspect-ratio: 2 / 1; margin-top: var(--cap-space-post-hero-top); background: var(--cap-color-bg-deep); overflow: hidden; }   /* D6: 1172 × 586, the content's width — never the page's */
.cap-shell .cap-post__hero img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }

/* ─── body: share rail · measure · spacer ─────────────────────────────── */
.cap-shell .cap-post__body { padding-top: var(--cap-space-post-body-top); display: grid; grid-template-columns: var(--cap-col-share) minmax(0, var(--cap-measure)) var(--cap-col-share); justify-content: center; gap: var(--cap-gutter-rail-blog); align-items: start; }
.cap-shell .cap-post__rail { display: flex; flex-direction: column; gap: var(--cap-space-md); position: sticky; top: var(--cap-space-card-pad); }
.cap-shell .cap-post__rail-label { font-size: var(--cap-type-textlink); letter-spacing: var(--cap-track-eyebrow); }   /* D6: 12.5 */
.cap-shell .cap-post__rail-label--filed { margin-top: var(--cap-space-sm); }
.cap-shell .cap-post__share { display: flex; flex-wrap: nowrap; gap: var(--cap-space-sm); }   /* four, one row (D6) */
.cap-shell .cap-post__share-btn { width: 38px; height: 38px; flex: none; padding: 0; border-radius: var(--cap-radius-pill); border: var(--cap-border-hairline) solid var(--cap-color-line-strong); background: transparent; color: var(--cap-color-text-tertiary); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color var(--cap-ease), color var(--cap-ease); } /* geometry: 38px ring */

.cap-shell .cap-post__share-btn.is-done { border-color: var(--cap-color-text); color: var(--cap-color-text); }
@media (hover: hover) { .cap-shell .cap-post__share-btn:hover { border-color: var(--cap-color-text); color: var(--cap-color-text); } }
.cap-shell .cap-post__share-btn svg { display: block; }
.cap-shell .cap-post__share-btn[hidden] { display: none; }   /* "Share" stays hidden until the script finds a share menu (the ring's display would beat [hidden]) */
@media (min-width: 1280px) { .cap-shell .cap-post__share { display: grid; grid-template-columns: repeat(3, var(--cap-space-social-ring)); } }   /* five or six in the 200 rail: rows of three (owner 2026-10-05) */
.cap-shell .cap-post__tags { display: flex; flex-wrap: wrap; gap: var(--cap-space-xs); }
.cap-shell .cap-post__tag { padding: var(--cap-btn-pad-xs); font-size: var(--cap-type-badge); }
.cap-shell .cap-post__measure { min-width: 0; }
/* a post with no related cards still keeps its air above the footer */
.cap-shell .cap-post__body:last-child { padding-bottom: var(--cap-space-xl); }

/* ─── the post's own prose, styled by role ────────────────────────────── */
.cap-shell .cap-prose > * { margin: 0 0 var(--cap-space-md); }
.cap-shell .cap-prose > p { margin-bottom: var(--cap-space-block-5); }   /* D6: 24 between paragraphs */
.cap-shell .cap-prose > *:last-child { margin-bottom: 0; }
.cap-shell .cap-prose p { font-family: var(--cap-font-serif); font-size: var(--cap-type-read); line-height: var(--cap-leading-article); color: var(--cap-color-text-body); }
.cap-shell .cap-prose a:not(.cap-link) { color: var(--cap-color-primary); border-bottom: var(--cap-border-hairline) solid var(--cap-color-primary); }   /* a .cap-link (the planet articles' closing guide link, owner 2026-10-20) keeps the site's text-link look */
@media (hover: hover) { .cap-shell .cap-prose a:not(.cap-link):hover { color: var(--cap-color-text); border-bottom-color: var(--cap-color-text); } }
.cap-shell .cap-prose strong { font-weight: 600; color: var(--cap-color-text); }
/* An article's FAQ (owner 2026-09-29): a paragraph given the "FAQ question" style in the editor (is-style-faq-question) reads
   as the site's FAQ question — role C, Barlow Condensed — always open, its answer the ordinary paragraphs under it, a hairline
   above each question as the FAQ rows have. Capriastro_Faq_Schema builds the page's FAQPage from exactly these. A question is
   also marked AUTOMATICALLY (Capriastro_Editorial::auto_faq): a one-line paragraph ending in "?" under a heading that says
   "FAQ" or "Questions". A question pasted in bold keeps the question's weight, not the article's 600. One step bigger than
   the FAQ pages' question (faq-article 21 / 19 vs faq 19 / 16.5, owner 2026-09-29), because the answer here is article body text. */
.cap-shell .cap-prose p.is-style-faq-question { font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-type-faq-article); letter-spacing: var(--cap-track-faq); line-height: var(--cap-leading-tight); color: var(--cap-color-text); margin: var(--cap-space-block-5) 0 var(--cap-space-sm); padding-top: var(--cap-space-block-5); border-top: var(--cap-border-hairline) solid var(--cap-color-line); }
.cap-shell .cap-prose p.is-style-faq-question strong { font-weight: inherit; }
.cap-shell .cap-prose h2, .cap-shell .cap-prose h3, .cap-shell .cap-prose h4,
.cap-shell .cap-prose h5, .cap-shell .cap-prose h6 { font-family: var(--cap-font-display-sm); font-weight: 800; font-size: var(--cap-type-lg); line-height: var(--cap-leading-tight); letter-spacing: var(--cap-track-tight); text-transform: none; color: var(--cap-color-text); margin-top: var(--cap-space-panel-pad); }
/* D6: a heading directly under another heading is its KICKER — Barlow capitals ("The Planet of Deep Transformation") */
.cap-shell .cap-prose :is(h2, h3, h4, h5, h6) + :is(h3, h4, h5, h6) { font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-type-section); letter-spacing: var(--cap-track-feature); text-transform: uppercase; margin-top: var(--cap-space-block-5); margin-bottom: var(--cap-space-block-5); }   /* D6: 24 above and below the kicker (the margins collapse) */
.cap-shell .cap-prose > :first-child { margin-top: 0; }
.cap-shell .cap-prose ul,
.cap-shell .cap-prose ol { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--cap-space-sm); }
.cap-shell .cap-prose li { position: relative; padding-left: var(--cap-space-md); font-family: var(--cap-font-ui); font-weight: 400; font-size: var(--cap-type-feature); letter-spacing: var(--cap-track-data); line-height: var(--cap-leading-lede); color: var(--cap-color-text-body); text-transform: none; }
.cap-shell .cap-prose li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 7px; height: 7px; border-radius: var(--cap-radius-pill); background: var(--cap-color-text); display: block; } /* geometry: the 7px ink bullet (D6) */
/* THE NUMBERED LIST (owner 2026-10-08): an <ol> counts "1." "2." … in the bullet's own place and colour (ink here, violet on
   phones), in the list's face one weight up; the item text sits its own `list-number` in (22 · phone 16) so a number never touches the word */
.cap-shell .cap-prose ol { counter-reset: cap-ol; }
.cap-shell .cap-prose ol > li { counter-increment: cap-ol; padding-left: var(--cap-space-list-number); }
.cap-shell .cap-prose ol > li::before { content: counter(cap-ol) "."; top: 0; width: auto; height: auto; border-radius: 0; background: none; font-weight: 600; color: var(--cap-color-text); }
/* a paragraph that is only a bold line and leads into a list reads in the list's own face and size, one weight up (D6: "Here are some …:"; weight 600, owner 2026-09-29) */
.cap-shell .cap-prose p:has(> strong:only-child):has(+ :is(ul, ol)) { font-family: var(--cap-font-ui); font-size: var(--cap-type-feature); letter-spacing: var(--cap-track-data); line-height: var(--cap-leading-data); }
.cap-shell .cap-prose p:has(> strong:only-child):has(+ :is(ul, ol)) strong { font-weight: 600; }   /* the lead-in reads bolder than the list under it (owner 2026-09-29; was 400) */
.cap-shell .cap-prose li strong { font-weight: 600; }
.cap-shell .cap-prose blockquote { border-left: var(--cap-border-emphasis) solid var(--cap-color-primary); padding: var(--cap-space-xs) 0 var(--cap-space-xs) var(--cap-space-card-pad); }
.cap-shell .cap-prose blockquote p { font-family: var(--cap-font-serif); font-style: italic; font-weight: 500; font-size: var(--cap-type-lede); line-height: var(--cap-leading-lede); color: var(--cap-color-text); }
.cap-shell .cap-prose figure { display: flex; flex-direction: column; gap: var(--cap-space-sm); }
.cap-shell .cap-prose figure img,
.cap-shell .cap-prose > img { display: block; width: 100%; height: auto; border-radius: var(--cap-radius-card-face-xs); background: var(--cap-color-bg-deep); }
.cap-shell .cap-prose figure { margin: var(--cap-space-panel-pad) 0; }
.cap-shell .cap-prose figcaption { font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-type-meta); letter-spacing: var(--cap-track-feature); text-transform: uppercase; color: var(--cap-color-muted); font-style: normal; }   /* upright: the Hello theme's reset makes every figcaption italic, and Barlow has no italic face (owner 2026-10-08) */
.cap-shell .cap-prose hr { width: 100%; height: 0; border: 0; border-top: var(--cap-border-hairline) solid var(--cap-color-line); }
.cap-shell .cap-prose table { width: 100%; border-collapse: collapse; font-family: var(--cap-font-ui); font-size: var(--cap-type-data); letter-spacing: var(--cap-track-data); color: var(--cap-color-text-body); }
.cap-shell .cap-prose th,
.cap-shell .cap-prose td { text-align: left; padding: var(--cap-space-sm) var(--cap-space-md); border-bottom: var(--cap-border-hairline) solid var(--cap-color-line); }

/* ─── the free-chart band (every post) — D6 ─── */
.cap-shell .cap-post__chart { margin-top: var(--cap-space-post-band-top); }   /* the free-chart band itself lives in components.css (shared with About, 26 Sep) */

/* ─── keep reading ────────────────────────────────────────────────────── */
.cap-shell .cap-post__more { padding-top: var(--cap-space-xl); padding-bottom: var(--cap-space-xl); }
.cap-shell .cap-post__more-head { padding-top: var(--cap-space-card-pad); margin-bottom: var(--cap-space-section-head-below); }
.cap-shell .cap-post__rel { display: flex; flex-direction: column; background: var(--cap-color-surface); border: var(--cap-border-hairline) solid var(--cap-color-line-strong); border-radius: var(--cap-radius-flat); overflow: hidden; color: inherit; transition: box-shadow var(--cap-ease), border-color var(--cap-ease); }
@media (hover: hover) { .cap-shell .cap-post__rel:hover { box-shadow: var(--cap-shadow-lift); color: inherit; } }
.cap-shell .cap-post__rel-img { display: block; height: auto; aspect-ratio: 2 / 1; min-height: 180px; min-width: 0; background: var(--cap-color-bg-deep); overflow: hidden; } /* geometry: 180px card image */
.cap-shell .cap-post__rel-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cap-shell .cap-post__rel-body { display: flex; flex-direction: column; gap: var(--cap-space-sm); padding: var(--cap-space-block-5) var(--cap-space-block-5) var(--cap-space-section-head-below); }   /* D6: 24 · 24 · 20 */
.cap-shell .cap-post__rel-body { flex: 1 1 auto; }
.cap-shell .cap-post__rel-cat { margin-bottom: var(--cap-space-sm); font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-type-textlink); letter-spacing: var(--cap-track-label); text-transform: uppercase; line-height: var(--cap-leading-tight); color: var(--cap-color-primary); }   /* D6: a small label, not a page eyebrow */
.cap-shell .cap-post__rel-title { font-family: var(--cap-font-display-sm); font-weight: 800; font-size: var(--cap-type-lg); line-height: var(--cap-leading-tight); letter-spacing: var(--cap-track-tight); color: var(--cap-color-text); }
.cap-shell .cap-post__rel-meta { margin-top: auto; padding-top: var(--cap-space-md); }   /* the foot sits at the card's bottom (D6) */

/* ─── < 1280: one column, the rail under the article (owner rule 2026-09-30: nothing keeps two columns below 1280) ─── */
@media (max-width: 1279px) {
  .cap-shell .cap-post__body { grid-template-columns: 1fr; gap: var(--cap-space-lg); }
  .cap-shell .cap-post__rail { position: static; order: 2; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .cap-shell .cap-post__measure { order: 1; }
  .cap-shell .cap-post__rail-label--filed { margin-top: 0; }
}

/* ─── 700–1279: T20 (1024) · T20-820 — the article on the 660 measure, centred; the share rail folds into a hairline row
   AFTER the body (Share | Filed under, side by side), then the free-chart band. The measure's wrapper steps aside
   (display: contents) so the prose, the rail and the band order as one column. ─────────────────────────────────────── */
@media (min-width: 700px) and (max-width: 1279px) {
  .cap-shell .cap-post__body { grid-template-columns: minmax(0, var(--cap-measure)); justify-content: center; gap: 0; }
  .cap-shell .cap-post__title { max-width: none; margin-top: var(--cap-space-block-6); line-height: var(--cap-leading-hero-mid); }   /* T20: 52 / 1.04, 36 under the kicker — on the full content width (912 at 1024; owner 2026-10-01: T20's 726 set long titles in four lines). 820 keeps its own 26ch below */
  .cap-shell .cap-post__lede { max-width: 44ch; }   /* T20 · T20-820: the lede on a 529 measure */
  .cap-shell .cap-post__measure { display: contents; }
  .cap-shell .cap-post__body .cap-prose { order: 1; }
  .cap-shell .cap-post__rail { order: 2; display: grid; grid-auto-flow: column; grid-template-rows: auto auto; justify-content: space-between; gap: var(--cap-space-gap-6) var(--cap-space-lg); margin-top: var(--cap-space-lg); padding-top: var(--cap-gutter); border-top: var(--cap-border-hairline) solid var(--cap-color-line-strong); }
  .cap-shell .cap-post__rail-label { font-size: var(--cap-type-caption); letter-spacing: var(--cap-track-meta); line-height: normal; color: var(--cap-color-caption); }
  .cap-shell .cap-post__rail-label--filed { margin-top: 0; }
  .cap-shell .cap-post__share { gap: var(--cap-space-sm); }
  .cap-shell .cap-post__tags { gap: var(--cap-space-gap-3); }
  .cap-shell .cap-post__body .cap-post__chart { order: 3; margin-top: var(--cap-space-band-close); }
  .cap-shell .cap-post__tag { font-size: var(--cap-type-textlink); font-weight: 600; letter-spacing: var(--cap-track-meta); line-height: var(--cap-leading-ui); }   /* T20: 12.5 · 600 · .14em chips */
  .cap-shell .cap-post__rel-img { height: auto; aspect-ratio: 16 / 9; min-height: 0; }   /* T20: the card image follows the card's width (158 on a 282 card) */
  .cap-shell .cap-post__more-grid { align-items: stretch; }   /* Keep reading (owner 2026-10-01): the three cards one height, the read time on the card's foot (.cap-post__rel-meta margin-top auto) — one line across the three */
  .cap-shell .cap-post__rel-img { flex: none; }   /* the picture never gives up height to a long title */
  .cap-shell .cap-post__rel-meta { font-size: var(--cap-type-caption); letter-spacing: var(--cap-track-meta); color: var(--cap-color-caption); }   /* T20: 13 · .14em caption grey */
}
/* 768–1023 (T20-820): Keep reading as list rows — three 220 cards would stack the titles five deep */
@media (min-width: 700px) and (max-width: 1023px) {
  .cap-shell .cap-post__title { max-width: 26ch; font-size: var(--cap-type-h1-product); line-height: var(--cap-mp-leading-post-h1-narrow); }   /* T20-820: 38 / 1.08 on a 640 measure */
  .cap-shell .cap-post__more-grid { display: flex; flex-direction: column; gap: 0; }
  .cap-shell .cap-post__rel { flex-direction: row; align-items: center; gap: var(--cap-gutter); padding: var(--cap-gutter) 0; background: transparent; border: 0; border-top: var(--cap-border-hairline) solid var(--cap-color-line-strong); border-radius: 0; overflow: visible; }
  @media (hover: hover) { .cap-shell .cap-post__rel:hover { box-shadow: none; background: var(--cap-color-surface); } }
  .cap-shell .cap-post__rel-img { width: 120px; height: 120px; min-height: 0; aspect-ratio: auto; flex: none; } /* geometry: 120px thumb (T20-820) */
  .cap-shell .cap-post__rel-body { gap: var(--cap-space-gap-5); padding: 0; }
  .cap-shell .cap-post__rel-cat { margin-bottom: 0; font-size: var(--cap-type-caption); letter-spacing: var(--cap-track-meta); line-height: normal; }
  .cap-shell .cap-post__rel-meta { margin-top: 0; padding-top: 0; line-height: normal; }
}

/* ─── < 700: the mobile sheet (1k) ────────────────────────────────────── */
@media (max-width: 699px) {
  .cap-shell .cap-post__head { padding-top: var(--cap-space-block-5); text-align: left; }
  .cap-shell .cap-post__kicker { display: flex; justify-content: flex-start; color: var(--cap-color-muted); gap: var(--cap-space-sm); }   /* a block row: no strut from the head's line box */
  .cap-shell .cap-post__kicker .cap-post__cat { color: var(--cap-color-primary); }
  .cap-shell .cap-post__title { max-width: none; margin-left: 0; margin-right: 0; }
  .cap-shell .cap-post__lede { max-width: none; margin-left: 0; margin-right: 0; }
  .cap-shell .cap-post__byline { justify-content: flex-start; gap: var(--cap-space-sm); margin-top: var(--cap-space-md); flex-wrap: wrap; }
  .cap-shell .cap-post__hero-wrap { padding-left: 0; padding-right: 0; }   /* 1k: the image runs edge to edge */
  .cap-shell .cap-post__hero { margin-top: var(--cap-space-faq-gap); }
  .cap-shell .cap-post__body { padding-top: var(--cap-space-card-pad); }
  /* the share row on phones (owner 2026-10-05; 1k drew none): after the prose, on a hairline, as the 700–1279 row — Share
     only, "Filed under" stays off a phone as 1k draws it; then the free-chart band */
  .cap-shell .cap-post__body { gap: 0; }
  .cap-shell .cap-post__measure { display: contents; }
  .cap-shell .cap-post__body .cap-prose { order: 1; }
  .cap-shell .cap-post__rail { order: 2; flex-direction: column; align-items: flex-start; gap: var(--cap-space-gap-6); margin-top: var(--cap-space-lg); padding-top: var(--cap-gutter); border-top: var(--cap-border-hairline) solid var(--cap-color-line-strong); }
  .cap-shell .cap-post__rail-label { font-size: var(--cap-type-caption); letter-spacing: var(--cap-track-meta); line-height: normal; color: var(--cap-color-caption); }
  .cap-shell :is(.cap-post__rail-label--filed, .cap-post__tags) { display: none; }
  .cap-shell .cap-post__body .cap-post__chart { order: 3; margin-top: var(--cap-space-band-close); }
  .cap-shell .cap-prose p { font-size: var(--cap-type-base); }
  .cap-shell .cap-prose h2 { margin-top: var(--cap-space-sm); }
  .cap-shell .cap-prose :is(h2, h3, h4, h5, h6) { margin-top: var(--cap-space-lg); }
  .cap-shell .cap-prose li { line-height: var(--cap-leading-data); }
  .cap-shell .cap-prose blockquote { padding-left: var(--cap-space-md); }
  .cap-shell .cap-post__chart { padding: var(--cap-space-block-5); gap: var(--cap-space-md); align-items: flex-start; }
  .cap-shell .cap-post__more { padding-top: var(--cap-space-card-pad); padding-bottom: var(--cap-space-card-pad); }
  .cap-shell .cap-post__more-head { border-top: 0; padding-top: 0; margin-bottom: var(--cap-space-sm); }
  .cap-shell .cap-post__more-grid { grid-template-columns: repeat(2, 1fr); gap: var(--cap-space-sm); }
  .cap-shell .cap-post__rel--third { display: none; }
  @media (hover: hover) { .cap-shell .cap-post__rel:hover { box-shadow: var(--cap-shadow-halo); } }   /* hover = the glow alone (owner 2026-09-29) */
  .cap-shell .cap-post__rel-img { display: none; }
  .cap-shell .cap-post__rel-body { gap: var(--cap-space-xs); padding: var(--cap-space-card-pad); }
  .cap-shell .cap-post__rel-title { font-size: var(--cap-type-small); }
  .cap-shell .cap-post__rel-meta { display: none; }
}

/* ─── < 700: 1k as redrawn 27 Sep (CD markup) — the head, the
   220 hero, the prose rhythm (16 between paragraphs, 22 above a heading), the free-chart band as the inline band
   (✦ eyebrow · 15 italic · the link beside a 76 icon) and Keep reading as full-bleed rows with thumbs ─────────── */
@media (max-width: 699px) {
  .cap-shell .cap-post__kicker { font-size: var(--cap-type-eyebrow-card); line-height: normal; letter-spacing: var(--cap-track-meta); color: var(--cap-color-caption); }
  .cap-shell .cap-post__title { margin-top: var(--cap-space-block-6); margin-bottom: var(--cap-space-gap-7); }
  .cap-shell .cap-post__lede { font-size: var(--cap-mp-type-post-lede); line-height: var(--cap-leading-lede); }
  .cap-shell .cap-post__byline { flex-direction: column; align-items: flex-start; gap: var(--cap-space-gap-1); margin-top: var(--cap-mp-post-meta-top); }
  .cap-shell .cap-post__bysep { display: none; }
  .cap-shell .cap-post__by { font-size: var(--cap-mp-type-card-lede-sm); }
  .cap-shell .cap-post__when { font-size: var(--cap-type-meta); line-height: normal; letter-spacing: var(--cap-mp-track-chron-meta); color: var(--cap-color-caption); }
  .cap-shell .cap-post__hero { aspect-ratio: 2 / 1; height: auto; min-height: var(--cap-mp-post-hero-h); min-width: 0; margin-top: var(--cap-space-lg); }   /* NO PICTURE WIDER THAN 2 : 1 (owner 2026-10-03): 2 : 1, never shorter than the sheet's height */
  .cap-shell .cap-post__body { padding-top: var(--cap-space-lg); }
  .cap-shell .cap-prose > p { margin-bottom: var(--cap-space-block-3); }
  .cap-shell .cap-prose > p.cap-gap-after { margin-bottom: var(--cap-space-lg); }   /* a paragraph whose link sits just above a list of links (the retrograde articles' Rising-sign line): the tablet's 24 below it, so the two links' tap areas never meet (owner 2026-10-07). The class is set on the paragraph in the editor: Advanced → Additional CSS class(es). */
  .cap-shell .cap-prose :is(h2, h3, h4, h5, h6) { margin-top: var(--cap-space-faq-gap); font-size: var(--cap-mp-type-card-h2); letter-spacing: var(--cap-mp-track-card-h2); }
  .cap-shell .cap-prose :is(h2, h3, h4, h5, h6) + :is(h3, h4, h5, h6) { margin-top: var(--cap-space-block-3); margin-bottom: var(--cap-space-block-3); font-size: var(--cap-mp-type-post-kicker); letter-spacing: var(--cap-mp-track-post-kicker); line-height: normal; color: var(--cap-color-text-secondary); }
  .cap-shell .cap-prose p:has(> strong:only-child):has(+ :is(ul, ol)) { margin-bottom: var(--cap-space-block-2); }   /* the list's own size and weight 600, as desktop (owner 2026-09-29; was a size smaller at 500) */
  .cap-shell .cap-prose li::before { width: 4px; height: 4px; top: 0.6em; background: var(--cap-color-primary); } /* geometry: the 4px violet bullet (1k) */
  .cap-shell .cap-prose ol > li::before { color: var(--cap-color-primary); }   /* the number in the phone bullet's violet */
  .cap-shell .cap-post .cap-post__chart { align-items: center; gap: var(--cap-space-gap-7); padding: var(--cap-space-block-4); border: var(--cap-border-hairline) solid var(--cap-color-line-halo); }
  .cap-shell .cap-post .cap-post__chart-icon { width: var(--cap-mp-post-band-icon); }
  .cap-shell .cap-post .cap-post__chart-copy { gap: var(--cap-space-gap-3); }
  .cap-shell .cap-post .cap-post__chart-h { font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-type-eyebrow); line-height: normal; letter-spacing: var(--cap-track-eyebrow); text-transform: uppercase; color: var(--cap-color-primary-soft); }
  .cap-shell .cap-post .cap-post__chart-h::before { content: "✦\00a0"; }
  .cap-shell .cap-post .cap-post__chart-lede { font-size: var(--cap-mp-type-post-band-lede); line-height: var(--cap-mp-leading-sub); }
  .cap-shell .cap-post .cap-post__chart-link { line-height: normal; }
  .cap-shell .cap-post__more { padding: var(--cap-space-lg) 0; }
  .cap-shell .cap-post__more-head { padding: 0 var(--cap-page-x); margin-bottom: var(--cap-space-block-2); display: flex; }   /* a flex row: the head is its label's own line box, no serif strut */
  .cap-shell .cap-post__more-head .cap-section { line-height: normal; }
  .cap-shell .cap-post__more-grid { display: flex; flex-direction: column; gap: 0; border-bottom: var(--cap-border-hairline) solid var(--cap-color-line-strong); }
  .cap-shell .cap-post__rel { flex-direction: row; gap: var(--cap-space-gap-7); padding: var(--cap-space-block-3) var(--cap-page-x); background: transparent; border: 0; border-top: var(--cap-border-hairline) solid var(--cap-color-line-strong); overflow: visible; }
  @media (hover: hover) { .cap-shell .cap-post__rel:hover { box-shadow: none; background: var(--cap-color-surface); } }
  .cap-shell .cap-post__rel-img { display: block; width: 84px; height: 84px; min-height: 0; aspect-ratio: auto; flex: none; } /* geometry: 84px thumb (1k, as the hub's rows) */
  .cap-shell .cap-post__rel-body { gap: var(--cap-space-gap-3); padding: 0; }
  .cap-shell .cap-post__rel-cat { margin-bottom: 0; font-size: var(--cap-type-eyebrow); letter-spacing: var(--cap-track-eyebrow); line-height: normal; }
  .cap-shell .cap-post__rel-title { font-size: var(--cap-mp-type-chron-row-title); line-height: var(--cap-mp-leading-chron-row-title); letter-spacing: var(--cap-mp-track-chron-row-title); }
  .cap-shell .cap-post__rel-meta { display: block; margin-top: 0; padding-top: 0; line-height: normal; letter-spacing: var(--cap-mp-track-chron-meta); color: var(--cap-color-caption); }
}

/* ─── ARTICLE PAGES (owner 2026-09-30; 2026-10-08): a page set like a post — the Learn guides (the Yes/No meanings pages take
   only the head). No byline; the featured image as the hero and the posts' share rail, the post's own grid (owner 2026-10-08). ─── */

/* 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-post--page .cap-post__body:last-child { padding-bottom: var(--cap-space-footer-gap); }   /* an article page ends on its body */
.cap-shell .cap-post__more { padding-bottom: var(--cap-space-footer-gap); }
@media (min-width: 700px) and (max-width: 1023px) {
  .cap-shell .cap-post__more { padding-bottom: calc(var(--cap-space-footer-gap) - var(--cap-gutter)); }   /* the last card's own 24 under its picture */
}