/* News article (/single-post/<slug>): full-width hero, dated eyebrow, single H1, 680 px body measure. */

/* Hero photograph: full bleed under the transparent header */
.article-hero-image{margin:0;position:relative;height:clamp(420px,58vh,760px);background:var(--navy);overflow:hidden}
.article-hero-image img{width:100%;height:100%;object-fit:cover;object-position:center}
.article-hero-copy{padding-block:56px 8px}
.article-hero:not([data-has-image]) .article-hero-copy{padding-top:calc(var(--header-h) + 72px)}
.article-hero .eyebrow{color:var(--muted);text-transform:uppercase;margin-bottom:22px}
.article-source{color:var(--original-navy,#073453);font-weight:500}
.article-hero h1{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:clamp(2.25rem,4vw,3.75rem);line-height:1.04;margin:0;max-width:24ch}

/* Body at a readable measure */
.article-layout{padding-block:40px 24px}
.article-body{max-width:680px}
.article-body>p,.article-body>ul,.article-body>ol,.article-body>blockquote{margin:0 0 1.35em;line-height:1.75;font-size:var(--text-base)}
.article-body>h2,.article-body>h3,.article-body>h4{margin:2.2em 0 .8em;line-height:1.2}
.article-body>h2{font-family:var(--font-display);font-size:clamp(1.5rem,2.2vw,2rem);letter-spacing:.02em}
.article-body>h3{font-size:var(--text-lg);font-weight:700;text-transform:none;letter-spacing:0}
.article-body>h4{font-size:var(--text-base);font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.article-body a{color:var(--original-navy,#073453);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;overflow-wrap:anywhere}
.article-body a:hover{color:var(--accent)}
.article-body blockquote{border-left:2px solid var(--original-navy,#073453);padding-left:24px;font-family:var(--font-display);font-size:var(--text-lg);color:var(--ink)}
.article-body ul,.article-body ol{padding-left:1.3em}
.article-body li{margin-bottom:.5em}
.article-body code{font-size:.92em;background:var(--surface);padding:.1em .35em}
.article-figure,.article-video{margin:40px 0}
.article-figure img{width:100%;height:auto;background:var(--surface)}
.article-figure figcaption,.article-video figcaption{margin-top:12px;font-size:var(--text-sm);color:var(--muted);line-height:1.5}
.article-video-frame{position:relative;aspect-ratio:16/9;background:var(--navy)}
.article-video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.article-original{margin-top:40px}
.article-original .text-link{max-width:100%}

/* Related model card */
.article-related{padding-block:24px 8px}
.article-model-card{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,3vw,48px);align-items:stretch;max-width:960px;border:1px solid var(--border);background:var(--surface);color:inherit;text-decoration:none;transition:border-color .2s}
.article-model-card:hover{border-color:var(--original-navy,#073453)}
.article-model-image{display:block;overflow:hidden;background:var(--navy);aspect-ratio:3/2;min-height:100%}
.article-model-image img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.article-model-card:hover .article-model-image img{transform:scale(1.03)}
.article-model-copy{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:12px;padding:32px 32px 32px 0}
.article-model-copy .eyebrow{color:var(--muted)}
.article-model-title{font-family:var(--font-display);font-weight:700;text-transform:uppercase;letter-spacing:.03em;font-size:clamp(1.5rem,2.4vw,2.25rem);line-height:1.1}
.article-model-summary{line-height:1.6;max-width:44ch;color:var(--ink)}
.article-model-copy .text-link{margin-top:8px}

/* Back link */
.article-back{padding-block:40px 72px}

@media (max-width: 900px){
  .article-hero-image{height:clamp(320px,48vh,560px)}
  .article-hero-copy{padding-top:44px}
  .article-model-card{grid-template-columns:1fr}
  .article-model-copy{padding:8px 28px 28px}
}
@media (max-width: 600px){
  .article-hero-image{height:min(84vw,480px);min-height:280px}
  .article-hero-copy{padding-top:36px}
  .article-hero .eyebrow{margin-bottom:16px}
  .article-hero h1{margin-bottom:20px}
  .article-layout{padding-top:28px}
  .article-figure,.article-video{margin:32px 0}
  .article-model-copy{padding:4px 20px 24px}
  .article-back{padding-block:28px 56px}
}