.article {
  max-width: var(--width-prose);
  margin: 0 auto;
}

.article__title {
  margin: 0 0 var(--space-3);
  font: var(--type-heading);
  color: var(--color-text-on-bg);
}

.article__title:empty {
  display: none;
}

.article__body {
  color: var(--color-text-on-bg-muted);
  font: var(--type-prose);
}

.article__paragraph {
  margin: 0 0 var(--space-4);
}

.article__paragraph:last-child {
  margin-bottom: 0;
}

.article__paragraph[data-variant="lead"] {
  font: var(--type-prose-lead);
  color: var(--color-text-on-bg);
}

.article__paragraph[data-variant="emphasis"] {
  font: var(--type-prose-emphasis);
  color: var(--color-text-on-bg);
}

.article__paragraph[data-variant="contrast"] {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-2-5);
  padding-inline-start: var(--space-4);
}

.article__paragraph[data-variant="contrast"]::before {
  content: "-";
  flex-shrink: 0;
}

.article__paragraph[data-variant="contrast"]
  + .article__paragraph:not([data-variant="contrast"]) {
  margin-top: var(--space-4);
}