/* Static news article pages (news/<slug>/ and news/<slug>/en/). Uses the tokens from /styles.css. */
body { background: var(--bg); color: var(--ink); padding: var(--space-6) var(--space-4); }
.article { max-width: 720px; margin: 0 auto; font-family: var(--f-body); font-size: 18px; line-height: 1.7; }
.article[lang="bn"] { font-family: var(--f-bn); font-size: 19px; }
.article nav.crumbs { font-size: 14px; color: var(--ink-2); margin-bottom: var(--space-4); }
.article nav.crumbs a { color: var(--primary); }
.article .lang-switch { float: right; font-weight: 600; color: var(--primary); }
.article h1 { font-family: var(--f-heading); font-size: clamp(28px, 5vw, 42px); line-height: 1.2; margin: 0 0 var(--space-3); }
.article[lang="bn"] h1, .article[lang="bn"] h2 { font-family: var(--f-bn); }
.article h2 { font-family: var(--f-heading); font-size: clamp(22px, 3.5vw, 28px); line-height: 1.3; margin: var(--space-6) 0 var(--space-3); }
.article h3 { font-size: 19px; margin: var(--space-4) 0 var(--space-2); }
.article .byline { color: var(--ink-2); font-size: 15px; margin-bottom: var(--space-5); }
.article figure { margin: 0 0 var(--space-5); }
.article figure img { width: 100%; height: auto; border-radius: var(--r); display: block; }
.article figcaption { font-size: 14px; color: var(--ink-2); margin-top: var(--space-2); }
.article .summary { background: var(--paper); border-left: 4px solid var(--terracotta); padding: var(--space-4); border-radius: var(--r-sm); }
.article .note { color: var(--ink-2); font-size: 16px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: var(--space-3) 0; }
.article ul, .article ol { padding-left: 22px; }
.article li { margin-bottom: var(--space-2); }
.article a { color: var(--primary); }
.article .reply { background: var(--primary-soft); padding: var(--space-4); border-radius: var(--r-sm); }
.article dl dt { font-weight: 700; margin-top: var(--space-4); }
.article dl dd { margin: var(--space-1) 0 0; color: var(--ink-2); }
.article .sources { font-size: 15px; color: var(--ink-2); }
.article footer { margin-top: var(--space-7); font-size: 14px; color: var(--ink-2); }
.article a { text-decoration: underline; text-underline-offset: 2px; }
/* styles.css keeps --primary dark green in dark mode, too dim on the dark background; use its dark-mode gold instead. */
@media (prefers-color-scheme: dark) {
  .article a, .article nav.crumbs a, .article .lang-switch { color: var(--gold-deep); }
}