/* ============================================================
   BLOG ARTICLE
   ------------------------------------------------------------
   Long-form reading layout. Narrow measure, generous leading,
   display face for headings — same system as the rest of the site.
   ============================================================ */

.article-page {
  padding-bottom: var(--section-y);
}

/* ---- Head ---- */
.article-head {
  padding-block: clamp(9rem, 16vh, 12rem) clamp(2rem, 4vw, 3rem);
  padding-inline: var(--gutter);
  max-width: 52rem;
  margin-inline: auto;
}

.article-head h1 {
  font-family: var(--font-display);
  font-size: var(--step-4);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-6);
}

.article-lede {
  font-size: var(--step-2);
  font-weight: 300;
  line-height: 1.55;
  color: hsl(var(--muted-foreground));
  margin-bottom: var(--space-8);
}

.article-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding-top: var(--space-6);
  border-top: 1px solid hsl(var(--border));
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: hsl(var(--muted-foreground));
}

/* ---- Hero image ---- */
.article-figure {
  margin: 0 0 clamp(2.5rem, 5vw, 4rem);
  max-width: 68rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.article-figure img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

/* ---- Body ---- */
.article-body {
  max-width: 40rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.article-body h2 {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: var(--tracking-tight);
  color: hsl(var(--foreground));
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  margin-bottom: var(--space-4);
}

.article-body h2:first-child {
  margin-top: 0;
}

.article-body p {
  font-size: var(--step-0);
  line-height: 1.85;
  color: hsl(var(--muted-foreground));
  margin-bottom: var(--space-6);
}

.article-body strong {
  color: hsl(var(--foreground));
  font-weight: 500;
}

.article-body em {
  font-style: italic;
}

.article-body ul {
  list-style: none;
  margin: 0 0 var(--space-6);
  padding: 0;
}

.article-body ul li {
  position: relative;
  padding-left: 1.75rem;
  margin-bottom: var(--space-4);
  font-size: var(--step-0);
  line-height: 1.8;
  color: hsl(var(--muted-foreground));
}

/* Brass rule as the bullet — matches the eyebrow motif. */
.article-body ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.85em;
  width: 0.875rem;
  height: 1px;
  background: hsl(var(--accent));
}

/* ---- Pull-out note ---- */
.article-callout {
  margin: clamp(2rem, 4vw, 3rem) 0;
  padding: clamp(1.5rem, 3vw, 2rem);
  border-left: 2px solid hsl(var(--accent));
  background: hsl(var(--muted));
}

.article-callout p {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 400;
  line-height: 1.5;
  color: hsl(var(--foreground));
}

/* ---- Closing CTA ---- */
.article-cta {
  max-width: 40rem;
  margin: clamp(3.5rem, 7vw, 5rem) auto 0;
  padding: clamp(2rem, 4vw, 3rem);
  padding-inline: clamp(1.5rem, 4vw, 3rem);
  background: hsl(var(--deep));
  color: hsl(var(--deep-foreground));
}

.article-cta h2 {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
  color: hsl(var(--deep-foreground));
  margin-bottom: var(--space-4);
}

.article-cta p {
  color: hsl(var(--deep-muted));
  font-size: var(--step-0);
  line-height: 1.8;
  margin-bottom: var(--space-8);
}

.article-cta .eyebrow {
  color: hsl(var(--accent-soft));
}

.article-cta .eyebrow::before {
  background: hsl(var(--accent-soft));
}

.article-cta .btn-group {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.article-cta .btn-primary {
  background: hsl(var(--accent-soft));
  border-color: hsl(var(--accent-soft));
  color: hsl(var(--deep)) !important;
}

.article-cta .btn-primary::before {
  background: hsl(var(--deep-foreground));
}

.article-cta .btn-outline {
  color: hsl(var(--deep-foreground));
  border-color: hsl(var(--deep-foreground) / 0.35);
}

.article-cta .btn-outline::before {
  background: hsl(var(--deep-foreground));
}

.article-cta .btn-outline:hover {
  color: hsl(var(--deep));
  border-color: hsl(var(--deep-foreground));
}

@media (max-width: 768px) {
  .article-head {
    padding-block: 8rem 2rem;
  }

  .article-cta .btn-group {
    flex-direction: column;
    align-items: stretch;
  }
}