/* Article pages. Hero: a feature opener, title and standfirst above a wide
   photograph. Authored moment: a hairline at the top of the window fills as
   you read. */

/* ---------- Reading progress ---------- */
.progress { display: none; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .progress {
      display: block; position: fixed; inset: 0 0 auto 0; z-index: var(--z-menu);
      height: var(--rule-heavy); background: var(--accent);
      transform-origin: 0 50%; transform: scaleX(0);
      animation: read linear both; animation-timeline: scroll(root);
    }
    @keyframes read { to { transform: scaleX(1); } }
  }
}

/* ---------- Hero ---------- */
.hero--article__grid { row-gap: var(--s-5); padding-block: var(--s-7) var(--s-8); }
.hero--article__meta, .hero--article__title, .hero--article__lead { grid-column: 1 / span 10; }
.hero--article__title {
  font: var(--wt-display) var(--fs-display-3) / var(--lh-h2) var(--font-display);
  font-stretch: var(--wd-display); letter-spacing: var(--tr-h2); text-wrap: balance;
}
.hero--article__lead { font-style: italic; color: var(--ink-2); }
/* The photograph runs across the whole window; the caption keeps the grid */
.hero--article__fig { max-width: none; padding: 0; margin: 0; }
.hero--article__fig .hero__media { aspect-ratio: 21 / 9; max-height: var(--hero-h); }
.hero--article__fig .cap { padding-inline: var(--gutter); max-width: var(--max); margin-inline: auto; }
@media (max-width: 63.99em) { .hero--article__meta, .hero--article__title, .hero--article__lead { grid-column: 1 / -1; } }
@media (max-width: 47.99em) {
  .hero--article__fig .hero__media { aspect-ratio: auto; height: var(--hero-media-phone); }
}

/* ---------- Body ---------- */
.article { padding-block: var(--band-tight) var(--band); row-gap: var(--s-7); }
.article-body { grid-column: 3 / span 8; font-size: var(--fs-reading); line-height: var(--lh-body); color: var(--ink-2); }
.article-body > * + * { margin-top: var(--s-5); }
.article-body > p:first-child, .article-body > .toc + p { font: var(--wt-medium) var(--fs-lead) / var(--lh-lead) var(--font-serif); color: var(--ink); }
.article-body h2 { margin-top: var(--s-7); font: var(--wt-h3) var(--fs-h3) / var(--lh-h3) var(--font-display); letter-spacing: var(--tr-h3); text-wrap: balance; }
.article-body ul, .article-body ol { padding-left: var(--s-5); }
/* Contents: the section headings, so a reader can see the argument and jump to a part */
.toc { padding-block: var(--s-4) var(--s-5); border-block: var(--hair) solid var(--rule); }
.article-body .toc + * { margin-top: var(--s-6); }
.toc .t-label { margin-bottom: var(--s-2); }
.article-body .toc__list { padding: 0; display: grid; }
.toc__list li { display: flex; align-items: center; min-height: var(--control-h-sm); }
.toc__list a {
  display: inline-flex; align-items: center; min-height: var(--control-h-sm);
  color: var(--ink); font: var(--wt-medium) var(--fs-small) / var(--lh-small) var(--font-sans);
  text-decoration: underline; text-decoration-thickness: var(--hair); text-underline-offset: 0.22em; text-decoration-color: var(--rule-strong);
  transition: color var(--t-quick) var(--ease-out), text-decoration-color var(--t-quick) var(--ease-out);
}
.toc__list a:hover, .toc__list a:focus-visible { color: var(--accent); text-decoration-color: currentColor; }
.article__back { grid-column: 3 / span 8; }
@media (max-width: 63.99em) { .article-body, .article__back { grid-column: 1 / -1; } }