/* Long-form article pages (/he/articles/). Builds on public-site.css and open-layout.css. */
.article { max-width: 760px; }
.article h1 { font-size: clamp(2rem, 4.2vw, 3rem); line-height: 1.15; text-wrap: balance; margin: 0 0 12px; }
.article-meta { color: #6b6578; font-size: .92rem; margin: 0 0 18px; font-variant-numeric: tabular-nums; }
.article .intro { max-width: none; font-size: 1.15rem; }
.article-body { margin-top: 34px; line-height: 1.85; font-size: 1.06rem; }
.article-body h2 { font-size: clamp(1.3rem, 2.4vw, 1.6rem); margin: 38px 0 12px; text-wrap: balance; }
.article-body p { margin: 0 0 16px; }
.article-body ul, .article-body ol { margin: 0 0 18px; padding-inline-start: 24px; display: grid; gap: 8px; }
.article-note { border-inline-start: 4px solid #7542a3; background: #f5f0fa; padding: 14px 18px; border-radius: 10px; color: #3f3a4b; font-size: .98rem; }
.article-sources { color: #6b6578; font-size: .92rem; }
.article-cta { margin-top: 40px; background: #263c2b; color: #f4f8f1; border-radius: 22px; padding: 28px; display: grid; gap: 12px; }
.article-cta h2 { margin: 0; font-size: 1.35rem; color: #c8ff3d; }
.article-cta p { margin: 0; max-width: 60ch; }
.article-cta .actions { margin: 6px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.article-cta .actions > .button, .article-cta .actions > .button:first-child { background: #c8ff3d; color: #10180a; border: 0; }
.article-cta .actions > .button.secondary { background: transparent; color: #f4f8f1; border: 1px solid #f4f8f180; }
.article-cta .play-badge { margin: 0; }
.article-list { display: grid; gap: 0; }
.article-list .article-card h2 a { text-decoration: none; }
.article-list .article-card h2 a:hover, .article-list .article-card h2 a:focus-visible { text-decoration: underline; }
.article-more { font-weight: 700; }
@media (max-width: 700px) {
  .article-cta { padding: 22px; }
  .article-body { font-size: 1.02rem; }
}