/* ===== Article / story page styles ===== */
.article-wrap{max-width:720px;margin:0 auto;padding:0 24px;}

/* Header is now unified (see the shared header rules above) — both
     the homepage and article pages use the same solid masthead, so no
     per-page override is needed here any more. */
.article-hero{padding:160px 0 0;}

.article-hero h1{font-family:var(--sans);font-weight:700;font-size:clamp(30px,4.6vw,52px);line-height:1.08;letter-spacing:-0.015em;color:var(--heading);margin-bottom:24px;max-width:16ch;}

.article-intro{font-family:var(--serif);font-size:19px;line-height:1.6;color:var(--body);max-width:60ch;margin-bottom:16px;}

.article-body{padding-bottom:96px;}

.article-body p{font-family:var(--serif);font-size:18px;line-height:1.8;color:var(--body);margin-bottom:26px;}

.article-body h2{font-family:var(--sans);font-weight:700;font-size:24px;color:var(--heading);margin:56px 0 22px;letter-spacing:-0.005em;}

.pull-quote{font-family:var(--serif);font-style:italic;font-weight:600;font-size:28px;line-height:1.4;color:var(--heading);border-left:2px solid var(--accent);padding:6px 0 6px 28px;margin:48px 0;max-width:56ch;}

@media (max-width:980px){
.article-hero{padding-top:120px;}
}

/* Article template styles — the story page layout (hero, body, pull quote...). Sits with
   templates/article.html. Moved verbatim from global.css. */

/* tags — plain text separated by a dot, not pill badges, matching
     the brand's "no generic pill buttons" rule */
.article-tags{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:48px;padding-top:32px;border-top:1px solid var(--border);}

.tags-label{font-family:var(--sans);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--nature);font-weight:600;margin-right:4px;}

.tag{font-family:var(--sans);font-size:13px;color:var(--body);transition:color .2s ease;}

.tag:hover{color:var(--accent);}

.tag-sep{color:var(--border);}

.article-hero-img{width:100%;aspect-ratio:16/9;overflow:hidden;margin-bottom:12px;background:var(--border);}

.article-hero-img img{width:100%;height:100%;object-fit:cover;}

.img-caption{font-size:13px;color:#8a8d93;font-style:italic;font-family:var(--serif);max-width:1400px;margin:0 auto 64px;padding:0 48px;}

/* Magazine-style drop cap on the opening paragraph of a dispatch.
     ::first-letter keeps this purely decorative — no markup needed
     around the actual letter, so copy-pasting the text elsewhere never
     drags a stray span with it. */
.drop::first-letter,
.single-story .article-body .article-wrap > p:first-of-type::first-letter{
    font-family:var(--sans);
    font-weight:700;
    font-size:5.5rem;
    line-height:.85;
    float:left;
    color:var(--accent);
    margin:6px 14px 0 0;
  }

/* The Story's opening paragraph gets the drop cap from CSS alone (first <p> of the
   article content), so nothing needs adding to the editor content. Scoped to
   single Story pages via the .single-story body class.
   Alignment: the float above is only a fallback — a floated ::first-letter sits
   wherever the font's ascent/line-height happen to put it. Where the browser
   supports initial-letter, the letter's cap-height is locked to the first line's
   cap-height and its baseline to the 3rd line (2nd on tablet/mobile), whatever
   fonts are loaded. */
@supports (initial-letter:3) or (-webkit-initial-letter:3){
.single-story .article-body .article-wrap > p:first-of-type::first-letter{
    -webkit-initial-letter:3;
    initial-letter:3;
    float:none;
    line-height:normal;
    margin:0 14px 0 0;
  }
}

.inline-img{max-width:1000px;margin:56px auto;padding:0 24px;}

.inline-img img{width:100%;aspect-ratio:3/2;object-fit:cover;}

.inline-img .img-caption{padding:0;margin:14px 0 0;max-width:none;}

.article-body .field-note{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:32px 0;margin:56px 0;}

.field-note-row{display:grid;grid-template-columns:repeat(2,1fr);gap:24px 32px;font-family:var(--sans);font-size:13px;color:var(--body);}

.field-note-row strong{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--nature);margin-bottom:6px;font-weight:600;}

@media (max-width:980px){
.drop::first-letter,
.single-story .article-body .article-wrap > p:first-of-type::first-letter{font-size:4.5rem;margin:5px 12px 0 0;}
}
@media (max-width:980px){
@supports (initial-letter:2) or (-webkit-initial-letter:2){
.single-story .article-body .article-wrap > p:first-of-type::first-letter{-webkit-initial-letter:2;initial-letter:2;margin:0 12px 0 0;}
}
}

@media (max-width:700px){
/* smaller drop cap so it doesn't dominate a narrow column */
.drop::first-letter,
.single-story .article-body .article-wrap > p:first-of-type::first-letter{font-size:3.5rem;margin:4px 9px 0 0;}
@supports (initial-letter:2) or (-webkit-initial-letter:2){
.single-story .article-body .article-wrap > p:first-of-type::first-letter{margin:0 9px 0 0;}
}
}