/* Inline explanatory images; loaded only by articles using this component. */
html body main.article figure.article-illustration {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 30px 0 36px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  scroll-margin-top: 128px;
}
html body main.article figure.article-illustration > a {
  display: block;
  border: 0;
  text-decoration: none;
  cursor: zoom-in;
}
html body main.article figure.article-illustration img {
  display: block;
  width: 100%;
  height: auto !important;
  max-height: none !important;
  aspect-ratio: auto var(--article-image-ratio, 16 / 9) !important;
  object-fit: contain !important;
  border-radius: 8px;
}
html body main.article figure.article-illustration figcaption {
  position: static;
  margin: 12px 0 0;
  padding: 0;
  background: none;
  color: var(--at-muted, #617080);
  font-size: .875rem;
  line-height: 1.85;
}
html body main.article figure.article-illustration > a:focus-visible {
  outline: 3px solid #6099d8;
  outline-offset: 5px;
  border-radius: 8px;
}
@media (max-width: 760px) {
  html body main.article figure.article-illustration { margin: 24px 0 30px; }
  html body main.article figure.article-illustration figcaption { color: var(--at-muted, #adbed1); }
}