/* Article pages share the site's typefaces, theme, and outer container. */
.article-page { color: var(--text-primary); font-family: var(--font-primary); }
.article-header { padding-block: clamp(124px, 10vw, 176px) clamp(44px, 5vw, 72px); }
.article-breadcrumb { display: inline-flex; margin-bottom: 28px; color: var(--text-secondary); font-size: 12.6px; line-height: 1.5; text-decoration: none; }
.article-breadcrumb:hover { color: var(--text-primary); text-decoration: underline; text-underline-offset: 5px; }
.article-page h1 { max-width: 23ch; margin: 0; font-size: clamp(36px, 4.7vw, 72px); font-weight: 500; line-height: 1.09; letter-spacing: -.045em; overflow-wrap: break-word; }
.article-standfirst { max-width: 65ch; margin: 28px 0 0; color: var(--text-secondary); font-size: clamp(17.1px, 1.48vw, 22.5px); line-height: 1.55; }
.article-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 24px; margin-top: 28px; color: var(--text-secondary); font-size: 12.6px; line-height: 1.5; }
.article-meta .article-author { color: var(--text-primary); font-weight: 500; }
.article-cover { width: 100%; aspect-ratio: 16 / 9; max-height: 620px; margin: 0; overflow: hidden; border-radius: 10px; background: var(--surface-raised); }
.article-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.article-reading-layout { display: grid; grid-template-columns: minmax(140px, .55fr) minmax(0, 1.45fr); align-items: start; gap: clamp(40px, 6vw, 104px); padding-block: clamp(56px, 6vw, 96px); }
.article-toc { position: sticky; top: 102px; max-width: 250px; }
.article-toc p { margin: 0 0 18px; color: var(--text-primary); font-size: 12.6px; font-weight: 500; }
.article-toc ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.article-toc a { display: inline-block; color: var(--text-secondary); font-size: 12.6px; line-height: 1.5; text-decoration: none; }
.article-toc a:hover { color: var(--text-primary); text-decoration: underline; text-underline-offset: 5px; }
.article-prose { max-width: 72ch; min-width: 0; color: var(--text-secondary); font-size: clamp(15.3px, 1.17vw, 18px); line-height: 1.8; }
.article-prose p { margin: 0; }
.article-prose p + p { margin-top: 22px; }
.article-prose .article-opening { color: var(--text-primary); font-size: clamp(18.9px, 1.57vw, 23.4px); line-height: 1.55; letter-spacing: -.015em; }
.article-prose section { margin-top: 44px; scroll-margin-top: 100px; }
.article-prose h2 { margin: 0 0 20px; color: var(--text-primary); font-family: var(--font-primary); font-size: clamp(22.5px, 1.98vw, 28.8px); font-weight: 500; line-height: 1.25; letter-spacing: -.025em; }
.article-prose blockquote { margin: 40px 0 0; padding: 8px 0 8px 26px; border-left: 2px solid var(--border-strong); color: var(--text-primary); font-size: clamp(19.8px, 1.8vw, 26.1px); font-weight: 400; line-height: 1.5; letter-spacing: -.02em; }
.article-prose ul { padding-left: 22px; margin: 24px 0 0; }
.article-prose li { padding-left: 4px; }
.article-prose li + li { margin-top: 12px; }
.article-signoff { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--border-default); color: var(--text-secondary); font-size: 12.6px; line-height: 1.5; }
.article-signoff strong { color: var(--text-primary); font-weight: 500; }
.article-signoff a { display: inline-flex; min-height: 36px; align-items: center; color: var(--text-primary); text-decoration: underline; text-underline-offset: 5px; }
.article-related { padding-bottom: clamp(64px, 6vw, 96px); }
.article-related-header { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 18px 32px; padding-top: 40px; margin-bottom: 28px; border-top: 1px solid var(--border-default); }
.article-related-header h2 { margin: 0; font-size: clamp(25.2px, 2.43vw, 36px); font-weight: 400; line-height: 1.2; letter-spacing: -.035em; }
.article-related-header > a { display: inline-flex; align-items: center; min-height: 36px; color: var(--text-secondary); font-size: 12.6px; text-decoration: underline; text-underline-offset: 5px; }
.article-related-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.article-related-grid > .article-related-card:nth-child(n + 3) { display: none; }
@media (min-width: 1400px) { .article-related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .article-related-grid > .article-related-card:nth-child(3) { display: block; } }
.article-related-card { min-width: 0; color: var(--text-primary); text-decoration: none; }
.article-related-image { aspect-ratio: 1; overflow: hidden; border-radius: 8px; background: var(--surface-raised); }
.article-related-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.article-related-card time { display: block; margin-top: 18px; color: var(--text-secondary); font-size: 11.7px; line-height: 1.5; }
.article-related-card h3 { max-width: 32ch; margin: 10px 0 0; font-size: clamp(18px, 1.53vw, 23.4px); font-weight: 500; line-height: 1.35; letter-spacing: -.02em; }
.article-related-card:hover h3 { text-decoration: underline; text-underline-offset: 5px; }
@media (max-width: 1023px) {
  .article-reading-layout { grid-template-columns: minmax(0, 1fr); }
  .article-toc { display: none; }
  /* width: 100% keeps the centred column inside its grid track (wide tables stretched it). */
  .article-prose { width: 100%; max-width: 72ch; margin-inline: auto; }
}
@media (max-width: 767px) {
  .article-header { padding-block: 108px 36px; }
  .article-breadcrumb { margin-bottom: 22px; font-size: 11.7px; }
  .article-page h1 { font-size: clamp(34px, 8.5vw, 54px); }
  .article-standfirst { margin-top: 22px; font-size: 17.1px; }
  .article-meta { margin-top: 24px; gap: 8px 18px; font-size: 11.7px; }
  .article-cover { aspect-ratio: 4 / 3; }
  .article-reading-layout { padding-block: 40px 56px; }
  .article-prose { font-size: 15.3px; line-height: 1.8; }
  .article-prose .article-opening { font-size: 18.9px; }
  .article-prose section { margin-top: 36px; }
  .article-prose h2 { font-size: 23.4px; }
  .article-prose blockquote { margin-top: 32px; padding-left: 20px; font-size: 20.7px; }
  .article-related { padding-bottom: 56px; }
  .article-related-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .article-related-header { padding-top: 32px; }
  .article-related-card h3 { font-size: 19.8px; }
}