/* Article pages in the selling-page look: research write-ups, research guides, /guides/ and /benefits/ articles, /qigong/ and every topic article.
   Loaded after reading-theme.css, home.css and topic-pitch.css. One centred reading column at every width: breadcrumbs,
   header, contents and body share the same measure. The contents list behaviour and the mobile table reflow stay as they are. */

.brand-article { --article-measure: 42rem; }
.brand-article .reading-page { padding-bottom: 6rem; }
.brand-article :is(.breadcrumbs, .article-header, .reading-layout) { width: min(100%, var(--article-measure)); margin-inline: auto; }
.brand-article .breadcrumbs { padding: 2.5rem 0 1.5rem; }
.brand-article .reading-layout { display: block; }
.brand-article .reading-body { max-width: none; }

/* Header: gold eyebrow, serif title broken by clause */
.brand-article .article-header { margin-block: 1rem 2.5rem; padding-left: 0; }
.brand-article .article-header .section-index { color: var(--hm-gold-ink); font-size: .875rem; font-weight: 700; letter-spacing: .12em; margin-bottom: .875rem; }
.brand-article .article-header h1 { max-width: 18em; font-size: clamp(1.875rem, 1.25rem + 1.9vw, 2.75rem); line-height: 1.28; }
.brand-article .article-lead { max-width: none; margin-top: 1.25rem; color: var(--hm-muted); font-size: 1.125rem; line-height: 1.8; }
.brand-article .article-topic-byline { gap: .25rem 1.5rem; margin-top: 1.25rem; color: var(--hm-muted); font-size: .8125rem; }
.brand-article .article-topic-byline time { font-variant-numeric: tabular-nums; }

/* Body text */
.brand-article .reading-body { color: var(--hm-text); font-size: 1.0625rem; line-height: 1.9; }
.brand-article .reading-body > section { margin-top: 4rem; }
.brand-article .reading-body h2 { font-size: clamp(1.375rem, 1.1rem + .7vw, 1.75rem); line-height: 1.4; margin-bottom: 1.25rem; }
.brand-article .reading-body h3 { font-size: 1.25rem; line-height: 1.45; margin-block: 2rem .75rem; }
/* Balanced wrapping splits Chinese words mid-way in body headings; fill the line instead */
.brand-article .reading-body :is(h2, h3) { text-wrap: pretty; }
.brand-article .reading-body strong { font-weight: 700; }
.brand-article .reading-body a:not(.button) { color: var(--hm-jade-ink); text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.brand-article .reading-body a:not(.button):hover { text-decoration-color: currentColor; }
.brand-article .reading-body li::marker { color: var(--hm-gold-ink); }

/* The short answer: the one sentence a reader should leave with */
.brand-article .reading-body .quick-answer { padding: 1.75rem 2rem; border: .0625rem solid color-mix(in srgb, var(--hm-jade) 28%, transparent); border-radius: var(--hm-radius-card); background: var(--hm-jade-tint); }
.brand-article .quick-answer > strong { display: block; color: var(--hm-jade-ink); font-family: inherit; font-size: .875rem; font-weight: 700; letter-spacing: .08em; }
.brand-article .quick-answer > p { margin-top: .625rem; font-family: var(--hm-serif); font-weight: 600; font-size: 1.25rem; line-height: 1.7; color: var(--hm-text); }

/* Contents: a numbered card above the text, open on wide screens and folded on phones (app.js) */
.brand-article .article-toc { position: static; margin-bottom: 3rem; padding: 0 1.75rem; border: .0625rem solid var(--hm-line); border-radius: var(--hm-radius-sm); background: var(--hm-surface); }
.brand-article .reading-contents { border-bottom: 0; }
.brand-article .reading-contents > summary { min-height: 3.5rem; margin: 0; padding-block: 1rem; color: var(--hm-gold-ink); font-size: .875rem; font-weight: 700; letter-spacing: .12em; }
.brand-article .reading-contents .toc-links { max-height: none; overflow: visible; margin-bottom: 1.25rem; padding-top: .5rem; border-top: .0625rem solid var(--hm-line); counter-reset: toc; }
.brand-article .article-toc .toc-links a { display: grid; grid-template-columns: 2rem minmax(0, 1fr); min-height: 0; margin: 0; padding: .5rem 0; border-radius: 0; background: none; color: var(--hm-text); font-size: .9375rem; line-height: 1.6; counter-increment: toc; }
.brand-article .article-toc .toc-links a::before { content: counter(toc, decimal-leading-zero); color: var(--hm-gold-ink); font-size: .8125rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.85; }
.brand-article .article-toc .toc-links a:hover { color: var(--hm-jade-ink); text-decoration: none; }
.brand-article .article-toc .toc-links a[aria-current] { background: none; color: var(--hm-text); font-weight: 400; }

/* Study facts as one card */
.brand-article .research-facts { margin-top: 1.5rem; padding: .25rem 1.75rem; border: .0625rem solid var(--hm-line); border-radius: var(--hm-radius-card); background: var(--hm-surface); }
.brand-article .research-facts > div { border-bottom-color: var(--hm-line); }
.brand-article .research-facts > div:last-child { border-bottom: 0; }
.brand-article .research-facts dt { color: var(--hm-gold-ink); font-size: .875rem; font-weight: 700; }

/* Tables sit in a card; the phone layout keeps its stacked rows */
.brand-article .reading-body .table-scroll { margin-block: 2rem; border: .0625rem solid var(--hm-line); border-radius: var(--hm-radius-sm); background: var(--hm-surface); }
.brand-article .reading-body .table-scroll .article-table { margin: 0; }
.brand-article .article-table thead { background: var(--hm-bg-raised); }
.brand-article .article-table th { color: var(--hm-text); font-weight: 700; }
.brand-article .article-table td { color: var(--hm-muted); }
.brand-article .article-table :is(th, td) { border-bottom-color: var(--hm-line); }
.brand-article .article-table tbody tr:last-child :is(th, td) { border-bottom: 0; }

/* Course figures in the topic articles: same rounded corners as the cards */
.brand-article .reading-body .source-figure img { border-radius: var(--hm-radius-sm); }

/* Photos: a lead figure between the header and the contents (one image, or two side by side),
   and a row of numbered moments under a section heading */
.brand-article .article-lead-figure { width: min(100%, var(--article-measure)); margin: 0 auto 3rem; }
.brand-article .article-figure-media { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .75rem; margin: 0; padding: 0; list-style: none; }
.brand-article .reading-body .article-figure-media > li { margin: 0; padding: 0; }
.brand-article .article-figure-media img { display: block; width: 100%; height: auto; border-radius: var(--hm-radius-sm); background: var(--hm-bg-raised); }
.brand-article .article-figure-label { display: block; margin-top: .625rem; color: var(--hm-text); font-size: .875rem; font-weight: 700; line-height: 1.5; }
.brand-article .article-figure figcaption { margin-top: .875rem; color: var(--hm-muted); font-size: .8125rem; line-height: 1.7; }
.brand-article .article-figure figcaption a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); }
.brand-article .reading-body .article-moments { margin: 0 0 2rem; }
.brand-article .article-moments .article-figure-media { counter-reset: moment; }
.brand-article .article-moments li { counter-increment: moment; }
.brand-article .article-moments .article-figure-label::before { content: counter(moment) "  "; color: var(--hm-gold-ink); font-variant-numeric: tabular-nums; }

/* Sources */
.brand-article .reading-body > .article-sources { margin-top: 5rem; padding-top: 2.5rem; border-top: .0625rem solid var(--hm-line-strong); color: var(--hm-muted); font-size: .9375rem; line-height: 1.8; }
.brand-article .article-sources h2 { font-size: 1.375rem; color: var(--hm-text); }
.brand-article .article-sources strong { color: var(--hm-text); }
.brand-article .article-sources ol { padding-left: 1.25rem; }

/* Further reading as rows, like the list pages */
.brand-article .reading-body > .reading-related { margin-top: 4rem; padding-top: 0; border-top: 0; }
.brand-article .reading-related h2 { font-size: 1.375rem; margin-bottom: 1rem; }
.brand-article .reading-related-list { border-top: .0625rem solid var(--hm-line-strong); }
.brand-article .reading-body .reading-related-list a { display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem; min-height: 0; padding: 1.125rem 0; border-bottom: .0625rem solid var(--hm-line); color: var(--hm-text); font-family: var(--hm-serif); font-weight: 600; font-size: 1.125rem; line-height: 1.5; text-decoration: none; }
.brand-article .reading-related-list a::after { content: "→"; flex: none; color: var(--hm-jade-ink); font-family: var(--sans); font-weight: 400; transition: transform .2s; }
.brand-article .reading-body .reading-related-list a:hover { color: var(--hm-jade-ink); }
.brand-article .reading-related-list a:hover::after { transform: translateX(.25rem); }
.brand-article .reading-body .reading-footer a { margin-top: .5rem; color: var(--hm-jade-ink); font-size: .9375rem; font-weight: 700; text-decoration: none; }
.brand-article .reading-body .reading-footer a:hover { text-decoration: underline; text-underline-offset: .1875rem; }

@media (max-width: 47.5em) {
  .brand-article .breadcrumbs { padding: 1.5rem 0 1rem; }
  .brand-article .article-header { margin-block: .5rem 2rem; }
  .brand-article .reading-page { padding-bottom: 4rem; }
  .brand-article .article-header .section-index { font-size: .8125rem; }
  .brand-article .article-header h1 { font-size: 1.75rem; }
  .brand-article .article-lead { font-size: 1rem; }
  .brand-article .reading-body { font-size: 1rem; line-height: 1.85; }
  .brand-article .reading-body > section { margin-top: 3rem; }
  .brand-article .reading-body h2 { font-size: 1.375rem; }
  .brand-article .reading-body h3 { font-size: 1.125rem; }
  .brand-article .reading-body .quick-answer { padding: 1.25rem 1.375rem; border-radius: var(--hm-radius-sm); }
  .brand-article .quick-answer > p { font-size: 1.125rem; }
  .brand-article .article-toc { margin-bottom: 2rem; padding: 0 1.125rem; }
  .brand-article .reading-contents > summary { min-height: 3.25rem; padding-block: .75rem; }
  .brand-article .reading-contents .toc-links { margin-bottom: 1rem; }
  .brand-article .article-toc .toc-links a { padding-block: .625rem; min-height: 2.75rem; }
  .brand-article .research-facts { padding: .25rem 1.25rem; border-radius: var(--hm-radius-sm); }
  /* Stacked table rows: the card pads them */
  .brand-article .reading-body .table-scroll { padding: 0 1.125rem; }
  .brand-article .reading-body .article-table tbody tr { border-block: 0; }
  .brand-article .reading-body .article-table tbody tr + tr { border-top: .0625rem solid var(--hm-line); }
  /* The page-number table keeps its columns: less card padding, a wider first column, smaller figures */
  .brand-article .reading-body .table-scroll:has(.reference-table) { padding: 0; }
  .brand-article .reading-body .reference-table { font-size: .875rem; line-height: 1.6; }
  .brand-article .reading-body .reference-table :is(th, td):first-child { padding-left: .875rem; }
  .brand-article .reading-body .reference-table :is(th, td):last-child { padding-right: .875rem; }
  .brand-article .reading-body .reference-table thead th:first-child { width: 34%; }
  .brand-article .reading-body > .article-sources { margin-top: 3.5rem; padding-top: 2rem; font-size: .875rem; }
  .brand-article .reading-body > .reading-related { margin-top: 3rem; }
  .brand-article .article-lead-figure { margin-bottom: 2rem; }
  .brand-article .article-figure-pair .article-figure-media { gap: .5rem; }
  /* Three moments are too small side by side on a phone: a swipeable row that shows the next one peeking in */
  .brand-article .article-moments .article-figure-media { grid-auto-columns: 62%; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
  .brand-article .article-moments .article-figure-media::-webkit-scrollbar { display: none; }
  .brand-article .article-moments li { scroll-snap-align: start; }
  .brand-article .reading-body .reading-related-list a { font-size: 1.0625rem; padding-block: 1rem; }
}