/* hub/article · a Longevity Hub guide or article drawn from XOmics
   (src/site/hubTemplate.js). The page is the gut guide's (kit/rf.css,
   hub/gut-guide/gg.css); this adds only what a page can have that the gut
   guide's own file did not: a head with no photograph beside it, an opening
   of several paragraphs, smaller headings inside a section, pointers to other
   pages, numbered sources and the marks that refer to them. */

.rf .ha-hero { padding-bottom: clamp(40px, 4.4vw, 72px); }
.rf .ha-head { max-width: 920px; }
.rf .ha-head .rf-lede { max-width: 68ch; }
.rf .gg-hero .rf-lede + .rf-lede { margin-top: 14px; }

.rf .ha-h3 { margin: 40px 0 0; font-size: clamp(22px, 1.9vw, 27px); line-height: 1.2; font-weight: 600; letter-spacing: -0.012em; color: var(--rf-ink); }
.rf .ha-h3 + .gg-p { margin-top: 14px; }
.rf .gg-art .gg-p a, .rf .acc-body a, .rf .ha-sources a { color: var(--rf-navy); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.rf .gg-art .gg-p a:hover, .rf .acc-body a:hover, .rf .ha-sources a:hover { text-decoration-thickness: 2px; }

/* "→ Explore the ..." lines: one pointer a line, the arrow the page's accent. */
.rf .ha-more { margin: 26px 0 0; font-size: 19px; line-height: 1.9; font-weight: 600; color: var(--rf-accent); }
.rf .gg-art .ha-more a { color: var(--rf-navy); text-decoration: none; }
.rf .gg-art .ha-more a:hover { text-decoration: underline; text-underline-offset: 3px; }

.rf .acc-body ul { margin: 12px 0 0; padding-left: 20px; }
.rf .acc-body p + p { margin-top: 12px; }

.rf .ha-cite { font-size: .68em; line-height: 0; }
.rf .ha-cite a { padding: 0 1px; color: var(--rf-accent); font-weight: 600; text-decoration: none; }
.rf .ha-cite a:hover { text-decoration: underline; }

.rf .ha-sources-sec { padding-block: clamp(48px, 5vw, 80px); }
.rf .ha-sources { margin: 24px 0 0; padding-left: 26px; display: grid; gap: 12px; font-size: 16px; line-height: 1.55; color: var(--rf-ink-2); }
.rf .ha-sources li { scroll-margin-top: calc(var(--ph-nav-h, 44px) + 24px); overflow-wrap: anywhere; }
.rf .ha-sources li:target { color: var(--rf-ink); }

.rf .ha-unread { padding: clamp(40px, 6vw, 96px) 0; }
.rf .ha-unread .gg-p a { color: var(--rf-navy); }

@media (max-width: 560px) {
  .rf .ha-more { font-size: 17px; }
}