body:has(.article-page) .header {
  background: var(--c-brand);
}

.article-page {
  padding-block: var(--sp-7) var(--sp-8);
  background: var(--c-soft);
}

.article-page__inner {
  max-width: 760px;
}

.crumbs {
  margin-bottom: var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--c-muted);
}

.crumbs a {
  color: var(--c-brand);
  font-weight: 600;
  text-decoration: none;
}

.article-page__cover {
  width: 100%;
  aspect-ratio: 16 / 8;
  object-fit: cover;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.prose {
  padding: var(--sp-6) var(--sp-7) var(--sp-7);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: var(--c-surface);
}

.article-page__cta {
  display: grid;
  gap: var(--sp-4);
  justify-items: start;
  margin-top: var(--sp-5);
  padding: var(--sp-6);
  border-radius: var(--radius-lg);
  background: var(--c-brand);
  font: 800 var(--fs-lg) / 1.35 var(--font-head);
  color: var(--c-on-brand);
}

.article-page__more {
  margin-top: var(--sp-7);
}

.article-page__more h2 {
  margin-bottom: var(--sp-4);
  font-size: var(--fs-xl);
}

.article-page__more ul {
  display: grid;
  gap: var(--sp-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.article-page__more a {
  display: block;
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius-md);
  background: var(--c-surface);
  font-weight: 700;
  color: var(--c-ink);
  text-decoration: none;
}

.article-page__more a:hover {
  color: var(--c-brand);
}

@media (max-width: 560px) {
  .prose {
    padding: var(--sp-5);
  }

  .article-page__cta {
    padding: var(--sp-5);
  }
}