/* Article layout uses the public site's shared tokens, navigation and footer. */
.article-header { padding:var(--section-space) 0; background:var(--color-mist); border-bottom:1px solid var(--color-line); }
.article-hero { display:grid; align-items:center; gap:clamp(32px,5vw,72px); }
.article-hero:has(.hero-image:not([hidden])) { grid-template-columns:minmax(0,1.5fr) minmax(0,.85fr); }
.article-heading { min-width:0; text-align:left; }
.article-heading .eyebrow { margin:0 0 1.25rem; }
.article-heading .eyebrow a { color:inherit; text-decoration:none; }
.article-heading h1 { max-width:24ch; margin:0 0 1.5rem; color:var(--color-navy); font:500 clamp(2.2rem,3.8vw,3.5rem)/1.12 var(--font-serif); text-wrap:pretty; }
.article-byline { margin:0; color:var(--color-muted); font-size:.8rem; font-weight:500; }
.hero-image { margin:0; min-width:0; justify-self:end; width:100%; max-width:360px; }
.hero-image img { display:block; width:100%; height:auto; max-height:480px; object-fit:contain; border-radius:var(--radius-img); }
.article-reading { padding-block:var(--section-space); }
.article-reading > .article-body { max-width:var(--max-width-reading); }
.article-lead { max-width:var(--max-width-reading); margin:0 0 1.5rem; color:var(--color-navy); font:400 1.15rem/1.75 var(--font-sans); }
.article-footer { padding:var(--section-space) 0; background:var(--color-frost); text-align:left; }
.article-footer h2 { margin:.5rem 0 1.5rem; font-size:clamp(2rem,3vw,2.7rem); }
.article-not-found { padding-block:var(--section-space); min-height:50vh; }
.article-not-found h1 { margin:.75rem 0; }
.article-not-found .btn { margin-top:1.5rem; }
@media(max-width:760px) {
  .article-hero:has(.hero-image:not([hidden])) { grid-template-columns:1fr; }
  .hero-image { justify-self:start; max-width:360px; }
  .hero-image img { max-height:440px; }
  .article-heading h1 { max-width:none; }
}

.article-byline a { color:var(--color-blue-2); text-decoration:underline; text-underline-offset:.2em; }
.article-byline a:hover { color:var(--color-navy); }
.article-byline a:focus-visible { outline:2px solid var(--color-blue); outline-offset:4px; border-radius:2px; }