/* ============================================================
 * page-about.css — /about/ (D19, 26 Sep: the owner's copy).
 *
 * One 720 column, centred: the eyebrow + H1 centred → the main image (720 × 240) → the prose → "How we calculate"
 * between two hairlines → ✦ The author: the photo circle beside the name and its line → the author's own words →
 * the free-chart card on ink (the posts' band, components.css `.cap-post__chart`).
 *
 * The page is native Elementor widgets (src/deploy/utility-pages.php → ca_util_about); each carries the class this
 * sheet styles, so the owner can swap the images and edit the text in Elementor without touching the layout.
 * Token-only; scoped `.cap-shell …`. No phone sheet yet: the column simply narrows.
 * ============================================================ */

.cap-shell.cap-about { max-width: var(--cap-about-col); margin: 0 auto; padding: calc(var(--cap-space-after-header) + var(--cap-space-gap-1)) 0 var(--cap-space-page-end); box-sizing: content-box; }
.cap-shell.cap-about .elementor-widget-container { margin: 0; padding: 0; }

/* the head — the eyebrow and the H1, centred (the only H1: "Astrology, written like it matters") */
.cap-shell .cap-about__head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: calc(var(--cap-space-block-5) - var(--cap-border-hairline)); }
.cap-shell .cap-about__eyebrow { font-size: var(--cap-type-eyebrow); letter-spacing: var(--cap-track-eyebrow); color: var(--cap-color-primary); }   /* the standard purple eyebrow at every width (owner 2026-10-01; D19 / 2h drew it grey — the sheets catch up) */
.cap-shell .cap-about__h1 { margin: 0; }

/* the main image — the owner's picture, cropped to the sheet's 720 × 240 (square corners: an article image) */
.cap-shell .cap-about__hero { margin-top: calc(var(--cap-space-panel-pad) - var(--cap-space-gap-1)); }
.cap-shell .cap-about__hero img { display: block; width: 100%; height: var(--cap-about-hero-h); object-fit: cover; background: var(--cap-color-bg-deep); }

/* the prose and the author's own words: 18 / 31.5 serif, 24 between paragraphs */
.cap-shell .cap-about__prose { margin-top: var(--cap-space-panel-pad); }
.cap-shell .cap-about__prose p,
.cap-shell .cap-about__bio p { margin: 0 0 var(--cap-space-block-5); font-family: var(--cap-font-serif); font-size: var(--cap-type-read); line-height: var(--cap-leading-article); color: var(--cap-color-text-body); text-wrap: pretty; }   /* no one-word last line (the sheet's breaks) */
.cap-shell .cap-about__prose p:last-child,
.cap-shell .cap-about__bio p:last-child { margin-bottom: 0; }

/* How we calculate — between two hairlines; three ✦ lines in Barlow caps */
.cap-shell .cap-about__how { margin-top: var(--cap-space-band-close); padding: var(--cap-space-lg) 0 calc(var(--cap-space-band-close) + var(--cap-space-gap-1) * 2); border-top: var(--cap-border-hairline) solid var(--cap-color-line); border-bottom: var(--cap-border-hairline) solid var(--cap-color-line); }
.cap-shell .cap-about__how-h { margin: 0 0 var(--cap-space-faq-gap); font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-type-section); letter-spacing: var(--cap-track-label); text-transform: uppercase; line-height: var(--cap-leading-tight); color: var(--cap-color-text); }
.cap-shell .cap-about__how-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--cap-space-gap-6); }
.cap-shell .cap-about__how-list li { display: flex; align-items: baseline; gap: var(--cap-space-sm); font-family: var(--cap-font-ui); font-weight: 400; font-size: var(--cap-type-tile-label); letter-spacing: var(--cap-track-faq); text-transform: uppercase; line-height: var(--cap-leading-serif-title); color: var(--cap-color-text-body); }
.cap-shell .cap-about__how-list li::before { content: "✦"; flex: none; color: var(--cap-color-text); }

/* the author — the eyebrow (the byline's #author target), the photo circle beside the name and its line */
.cap-shell .cap-about__author-eyebrow-w { margin-top: var(--cap-space-card-pad); }
.cap-shell .cap-about__author-eyebrow { font-size: var(--cap-type-label); scroll-margin-top: var(--cap-space-xl); }
.cap-shell .cap-about__author { margin-top: calc(var(--cap-space-md) - var(--cap-space-gap-1)); display: flex; flex-direction: row; align-items: center; gap: var(--cap-space-block-5); }
.cap-shell .cap-about__photo { flex: none; width: var(--cap-about-photo); }
.cap-shell .cap-about__photo img { display: block; width: var(--cap-about-photo); height: var(--cap-about-photo); border-radius: var(--cap-radius-pill); object-fit: cover; background: var(--cap-color-photo-empty); }
.cap-shell .cap-about__who { display: flex; flex-direction: column; gap: var(--cap-space-sm); }
.cap-shell .cap-about__name { margin: 0; font-family: var(--cap-font-ui); font-weight: 500; font-size: var(--cap-type-lg); letter-spacing: var(--cap-track-feature); text-transform: uppercase; line-height: var(--cap-leading-tight); color: var(--cap-color-text); }
.cap-shell .cap-about__role { margin: 0; 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); }
.cap-shell .cap-about__bio { margin-top: var(--cap-space-section-head-below); }

/* the closing card: the posts' free-chart band (components.css), with D19's own measures — the line on a 32 pitch, the
   link at 12, the icon 88 (the posts keep theirs) */
.cap-shell .cap-about__chart-w { margin-top: var(--cap-space-band-close); }
.cap-shell .cap-about__chart .cap-post__chart-lede { line-height: var(--cap-leading-data); }
.cap-shell .cap-about__chart .cap-post__chart-link { font-size: var(--cap-type-size-sub); }
.cap-shell .cap-post__chart.cap-about__chart { padding-bottom: calc(var(--cap-space-lg) - var(--cap-space-gap-3) / 2); }

/* round 22 (owner: at 712 the text touched the screen edge — the content-box column had no side margin at all): from 700 to
   1279 the column keeps the tablet inset each side; its own width cap still holds above that */
@media (min-width: 700px) and (max-width: 1279px) { .cap-shell.cap-about { box-sizing: border-box; max-width: calc(var(--cap-about-col) + 2 * var(--cap-page-x-mid)); padding-left: var(--cap-page-x-mid); padding-right: var(--cap-page-x-mid); } }   /* border-box: Elementor gives the column width 100%, so content-box padding made it 824 wide at 712; the cap grows by the two insets so the text keeps the desktop measure where it fits */
@media (max-width: 699px) {
  .cap-shell.cap-about { max-width: none; box-sizing: border-box; padding: var(--cap-space-lg) var(--cap-page-x) var(--cap-space-xl); }   /* border-box: the content-box desktop column was 388 + 52 = 440 wide on a phone */
  /* 2h, 28 Sep sheet (CD's markup at 388): the eyebrow 11 / .14em, 14 to the H1; the picture 20 under it, 200 tall;
     paragraphs 14 apart; "How we calculate" 24 under the prose, its three lines 11 / 500 / 1.45 six apart, the hairline
     24 under them; the author 24 under the hairline — the 62 photo BESIDE the name (22 / .08em) and its line, 16 apart */
  .cap-shell .cap-about__head { gap: var(--cap-space-gap-7); }
  .cap-shell .cap-about__eyebrow { line-height: normal; }
  .cap-shell .cap-about__hero { margin-top: var(--cap-space-panel-pad); }
  .cap-shell .cap-about__hero img { height: var(--cap-mp-about-hero-h); }
  .cap-shell .cap-about__prose p, .cap-shell .cap-about__bio p { margin-bottom: var(--cap-space-gap-7); }
  .cap-shell .cap-about__how { margin-top: 0; padding: var(--cap-space-lg) 0; border-top: 0; }
  .cap-shell .cap-about__how-h { margin-bottom: var(--cap-space-gap-6); line-height: normal; }
  .cap-shell .cap-about__how-list { gap: var(--cap-space-gap-3); }
  .cap-shell .cap-about__how-list li { gap: var(--cap-space-xs); font-weight: 500; font-size: var(--cap-type-eyebrow-card); letter-spacing: var(--cap-mp-track-about-how); line-height: var(--cap-mp-leading-about-how); color: var(--cap-color-text); }
  .cap-shell .cap-about__author-eyebrow-w { margin-top: var(--cap-space-lg); }
  .cap-shell .cap-about__author-eyebrow { display: block; font-size: var(--cap-type-eyebrow); line-height: normal; }
  .cap-shell .cap-about__author.e-con { flex-direction: row; align-items: flex-start; gap: var(--cap-space-md); margin-top: var(--cap-space-gap-7); }
  .cap-shell .cap-about__photo, .cap-shell .cap-about__photo img { width: var(--cap-mp-about-photo); height: var(--cap-mp-about-photo); }
  .cap-shell .cap-about__who { gap: var(--cap-space-gap-3); min-width: 0; }
  .cap-shell .cap-about__name { font-size: var(--cap-type-name); letter-spacing: var(--cap-track-name); line-height: var(--cap-leading-ui); }
  .cap-shell .cap-about__bio { margin-top: var(--cap-space-gap-7); }
  /* 2h, 29 Sep sheet (owner ruling 2026-09-29): the closing card is the articles' phone band — the lilac edge, 20 in, the 76
     icon beside the ✦ eyebrow, the 15 italic line and the link (the same rules as page-post.css 1k and page-learn.css 1i) */
  .cap-shell .cap-about__chart-w { margin-top: var(--cap-space-block-5); }   /* 24 under the last paragraph */
  .cap-shell .cap-post__chart.cap-about__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-about__chart .cap-post__chart-icon { width: var(--cap-mp-post-band-icon); }
  .cap-shell .cap-about__chart .cap-post__chart-copy { gap: var(--cap-space-gap-3); }
  .cap-shell .cap-about__chart .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-about__chart .cap-post__chart-h::before { content: "✦\00a0"; }
  .cap-shell .cap-about__chart .cap-post__chart-lede { font-size: var(--cap-mp-type-post-band-lede); line-height: var(--cap-mp-leading-sub); }
  .cap-shell .cap-about__chart .cap-post__chart-link { font-size: var(--cap-type-textlink); line-height: normal; }
}

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