/* ARTICLE — layout only; components live in components.css */

.article-head { margin-bottom: var(--sp-6); }
.article-head .section-tag { display: inline-block; margin-bottom: var(--sp-3); }
.article-h1 { margin-bottom: var(--sp-3); }
.standfirst {
  font-family: var(--font-serif); font-size: var(--text-xl); font-style: italic;
  color: var(--text-secondary); line-height: var(--leading-snug);
  max-width: 60ch; margin-bottom: var(--sp-5);
}
.byline-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-6); flex-wrap: wrap;
}
.byline-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.byline-text { font-size: var(--text-sm); }
.byline-meta { color: var(--text-tertiary); font-size: var(--text-xs); margin-top: 2px; }

.article-body { min-width: 0; }
.article-body > h2 {
  font-size: var(--text-3xl); margin: var(--sp-10) 0 var(--sp-4);
  padding-top: var(--sp-2);
}
.article-body > p {
  font-size: var(--text-lg); line-height: var(--leading-body); color: var(--text-primary);
  margin-bottom: var(--sp-4); max-width: 68ch;
}
.article-body > p:first-of-type::first-letter {
  font-family: var(--font-serif); font-size: 3.2em; float: left;
  line-height: 0.9; padding-right: var(--sp-2); color: var(--gold); font-weight: 600;
}

/* Opinion treatment: distinct accent underline, visible label */
.article-opinion .article-h1 { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 8px; text-decoration-thickness: 3px; }
.opinion-standfirst { border-left: 3px solid var(--gold); padding-left: var(--sp-4); }

/* Lens compare toggle */
.lens-compare-toggle { margin-top: var(--sp-6); }
.lens-compare-toggle summary { list-style: none; }
.lens-compare-toggle summary::-webkit-details-marker { display: none; }
.lens-compare { margin-top: var(--sp-4); }
.lens-compare .claim { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-body); margin-top: var(--sp-2); }

/* Section spacing inside article */
.article-body > section { margin-bottom: var(--sp-4); }
#faqHead, #sourcesHead, #relatedHead, #lensHead, #consensusHead { font-size: var(--text-3xl); }
.section-head { margin-bottom: var(--sp-4); }