/* ============================================================
   article.css — handguide9.store
   Blog article page styles. Independent from style-layout.css
   (which is homepage-only dark single-page styling).
   Colors via var(--clr-*) from style-color.css.
   ============================================================ */

.article-page {
  background: var(--clr-bg);
  padding: var(--space-10) 0 var(--space-16);
}

.article-header {
  max-width: var(--container-narrow);
  margin: 0 auto var(--space-8);
  padding: 0 var(--space-5);
}

.article-hero-img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: var(--radius-lg);
  margin: var(--space-6) 0 var(--space-8);
  box-shadow: var(--clr-shadow-md);
}

.article-h1 {
  font-family: var(--font-heading);
  font-size: clamp(26px, 4.5vw, 40px);
  font-weight: 900;
  color: var(--clr-text);
  margin: var(--space-4) 0;
  line-height: 1.2;
}

.article-lead {
  font-size: 17px;
  color: var(--clr-text-muted);
  line-height: 1.7;
  margin-bottom: var(--space-6);
}

.article-page .article-body {
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0 var(--space-5);
}

.article-page .author-bio-card,
.article-page .faq-section {
  max-width: var(--container-narrow);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-5);
  padding-right: var(--space-5);
}

.article-page .breadcrumb {
  max-width: var(--container-narrow);
  margin: 0 auto var(--space-5);
  padding: 0 var(--space-5);
}