/* Article detail typography + embedded media/chart layout. */
.article-container { max-width: 820px; margin: auto; }
.article-header { margin-bottom: 1.5rem; }
.article-header .badge { margin-right: .25rem; }

.article-hero { margin: 0 0 2rem; }
.article-hero img { width: 100%; height: auto; border-radius: .75rem; }

.article-body { font-size: 1.08rem; line-height: 1.75; color: #1f2937; }
.article-body h2 { margin-top: 2rem; margin-bottom: .75rem; font-weight: 700; font-size: 1.6rem; }
.article-body h3 { margin-top: 1.5rem; margin-bottom: .5rem; font-weight: 700; font-size: 1.3rem; }
.article-body h4 { margin-top: 1.25rem; margin-bottom: .5rem; font-weight: 700; font-size: 1.1rem; }
.article-body p { margin-bottom: 1.1rem; }
.article-body a { color: #0d6efd; }
.article-body ul, .article-body ol { margin-bottom: 1.1rem; padding-left: 1.4rem; }
.article-body li { margin-bottom: .35rem; }
.article-body blockquote {
  border-left: 4px solid #d0d7e2;
  padding: .25rem 0 .25rem 1rem;
  color: #55606e; font-style: italic; margin: 1.5rem 0;
}
.article-body blockquote cite { display: block; font-style: normal; font-size: .9rem; color: #8b95a3; margin-top: .35rem; }

.article-body figure { margin: 1.75rem 0; }
.article-body figure.article-figure img { width: 100%; height: auto; border-radius: .6rem; }
.article-body figcaption { font-size: .9rem; color: #6b7280; margin-top: .4rem; text-align: center; }

.article-embed__frame {
  position: relative; padding-top: 56.25%;   /* 16:9 */
  border-radius: .6rem; overflow: hidden; background: #f1f3f7;
}
.article-embed__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.samfony-embed-chart { margin: 1.75rem 0; }
.samfony-embed-chart__frame { position: relative; height: 340px; }
.samfony-embed-chart--missing { padding: 1rem; border: 1px dashed #d0d7e2; border-radius: .6rem; }

.article-body table { width: 100%; margin-bottom: 1.25rem; }