/* ═══════════════════════════════════════════════════
   SECTION: article — a single post

   Only the frame lives here. The body of the post is dressed by prose.css,
   which already handles headings, lists, quotes and everything else the editor
   emits; duplicating that here would guarantee the two drift.

   The header sits in the same 72ch measure as the text rather than running the
   full container. A headline that spans further than the paragraphs beneath it
   reads as a banner sitting on an article, not as the article's own title.
═══════════════════════════════════════════════════ */

#article {
  padding: var(--sp-10) 0 var(--sp-section);
}

.article-inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--container-pad);
}

/* ── Header ── */
.article-hdr { max-width: 72ch; margin-bottom: var(--sp-10) }

.article-h1 {
  font-family: var(--f-display);
  font-size: var(--fs-700);
  font-weight: var(--fw-black);
  letter-spacing: -.045em;
  line-height: 1.05;
  color: var(--c-text-1);
  text-wrap: balance;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-5);
  font-size: var(--fs-200);
  color: var(--c-text-4);
}
.article-meta-sep { opacity: .5 }

/* ── Featured image.
   16:9 and cropped, so a portrait upload cannot push the article off the
   screen before a word of it has been read. ── */
.article-figure {
  max-width: 72ch;
  margin: 0 0 var(--sp-12);
}
.article-img {
  display: block;
  width: 100%;
  /* WordPress prints width and height attributes on the image. They act as
     low-specificity CSS, and a resolved height makes the browser ignore
     aspect-ratio entirely — the box came out portrait and cropped the picture
     sideways. Releasing the height is what lets the ratio apply. */
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--r-lg);
  border: 1px solid var(--c-border);
}
.article-figcaption {
  margin-top: var(--sp-3);
  font-size: var(--fs-200);
  color: var(--c-text-4);
  line-height: 1.6;
}

/* ── Foot ── */
.article-foot {
  max-width: 72ch;
  margin-top: var(--sp-16);
  padding-top: var(--sp-8);
  border-top: 1px solid var(--c-border);
}
.article-back {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-300);
  font-weight: var(--fw-medium);
  color: var(--c-text-3);
  text-decoration: none;
  transition: color var(--dur-base);
}
.article-back:hover { color: var(--c-accent) }

/* ── Responsive ── */
@media (max-width: 640px) {
  .article-inner { padding: 0 var(--sp-6) }
  .article-hdr { margin-bottom: var(--sp-8) }
  .article-figure { margin-bottom: var(--sp-10) }
  .article-foot { margin-top: var(--sp-12) }
}