/*
 * The article template is cut from a real article, and the CMS dresses what it
 * writes in that article's own classes. This covers the shapes that article did
 * not happen to use, in the same tokens the design is built from.
 */
#article-body h3,
#article-body h4 {
  margin: 2.25rem 0 0.75rem;
  scroll-margin-top: 7rem;
  font-size: var(--text-headline-sm);
  line-height: var(--text-headline-sm--line-height);
  font-weight: var(--text-headline-sm--font-weight);
  color: var(--on-surface);
}

#article-body ol {
  margin: 1.5rem 0;
  padding-inline-start: 1.5rem;
  list-style: decimal;
}

#article-body ol > li {
  display: list-item;
  margin-block: 0.75rem;
  padding-inline-start: 0.35rem;
  font-size: var(--text-body-lg);
  line-height: var(--text-body-lg--line-height);
  color: var(--on-surface-variant);
}

#article-body ol > li::marker {
  color: var(--primary);
  font-weight: 600;
}

#article-body a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

#article-body a:hover {
  color: var(--primary-strong);
}

#article-body strong,
#article-body b {
  font-weight: 600;
  color: var(--on-surface);
}

#article-body code {
  padding: 0.15em 0.4em;
  border-radius: 0.25rem;
  background: var(--surface-container);
  font-size: 0.9em;
}

#article-body figure {
  margin: 2rem 0;
}

#article-body figure img {
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
}

#article-body figcaption {
  margin-top: 0.6rem;
  font-size: var(--text-body-md);
  color: var(--on-surface-variant);
}