.blog-article {
  max-width: var(--site-measure-reading);
  margin-inline: auto;
  font-size: 1.025rem;
  line-height: 1.75;
}

body.layout-wide .blog-article { max-width: none; }

.blog-article > :first-child { margin-top: 0; }

.blog-article hr {
  margin: 3rem 0;
  border: 0;
  border-top: 1px solid var(--site-color-border);
}

.blog-article :is(a, button, input, summary):focus-visible {
  outline: 3px solid var(--site-color-focus);
  outline-offset: 3px;
}

.blog-article :is(img, iframe, video, audio, .plotly-graph-div) { max-width: 100%; }

.blog-article > :is(h1, h2, h3) {
  text-wrap: balance;
}

.blog-article > :is(p, ul, ol, blockquote) {
  max-width: var(--site-measure-reading);
}

.blog-article img,
.blog-post-image {
  border-radius: var(--radius-md);
}

.blog-article blockquote {
  border-left-color: var(--primary-color);
  background: color-mix(in srgb, var(--card-bg) 82%, transparent);
}

.blog-article :not(pre) > code {
  overflow-wrap: anywhere;
  white-space: normal;
}

.blog-article a { overflow-wrap: anywhere; }

.motion-reduced-only {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .motion-allowed {
    display: none;
  }

  .motion-reduced-only {
    display: block;
  }
}

.post-date {
  color: var(--text-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.025em;
}