/* ==========================================================================
   blog/*.html — article-only additions on top of subpage.css: the hero cover
   image and in-body figures (image diagrams and the one live widget per
   article). Motion rule: only transform / opacity animate.
   ========================================================================== */

.page-hero-cover {
  border-radius: var(--radius-xl);
  border: 1px solid var(--line-2);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: var(--surface-1);
}

.page-hero-cover img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 675;
  object-fit: cover;
}

.article-figure {
  margin: 32px 0;
}

.article-figure .live-widget { margin: 0; }

.article-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line-1);
}

.article-figure figcaption {
  margin-top: 10px;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--text-4);
}

/* Single column (≤1100px): the title and lead come first, the cover follows */