/* =========================================================
   PAGE — Article (Koto-style long-form reading layout)
   Title hero, full-bleed cover, narrow reading column with
   real typographic rhythm, pull quote, and a back link.
   Scoped under .article-body.
   ========================================================= */

.article-body .pr-section {
  padding: var(--space-section-y-tight) 0;
}

.article-read {
  width: min(100% - 48px, 760px);
  margin-inline: auto;
}

.article-wide {
  width: min(100% - 48px, 1200px);
  margin-inline: auto;
}

/* ---- Hero ---- */
.article-hero {
  padding: var(--space-section-y-loose) 0 var(--space-stack-xl);
}

.article-hero .article-read {
  display: flex;
  flex-direction: column;
  gap: var(--space-stack-lg);
}

.article-eyebrow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-row-xs) var(--space-row-md);
  margin: 0;
  font-size: var(--type-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
}

.article-eyebrow .article-cat {
  color: var(--pr-rocket);
}

.article-eyebrow .article-date {
  opacity: 0.5;
}

.article-hero h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--type-section);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-heading);
  text-wrap: balance;
}

.article-lead {
  margin: 0;
  font-size: var(--type-lede);
  line-height: var(--leading-body-tight);
  opacity: 0.8;
}

.article-cover {
  margin: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-media);
  background: var(--pr-graphite);
}

.article-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- Body ---- */
.article-prose {
  display: flex;
  flex-direction: column;
  gap: var(--space-row-lg);
  font-size: var(--type-body-lg);
  line-height: var(--leading-body);
}

.article-prose h2 {
  margin: 0.6em 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-heading-sm);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading-soft);
}

.article-prose p {
  margin: 0;
  opacity: 0.86;
}

.article-prose blockquote {
  margin: 0.4em 0;
  padding-left: 22px;
  border-left: 3px solid var(--pr-rocket);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--type-heading-sm);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading-soft);
}

.article-prose a {
  color: var(--pr-rocket);
  border-bottom: 1px solid currentColor;
}

.article-prose ul {
  margin: 0;
  padding-left: 1.1em;
  display: flex;
  flex-direction: column;
  gap: var(--space-row-xs);
  opacity: 0.86;
}

/* ---- Foot ---- */
.article-foot {
  border-top: 1.5px solid color-mix(in srgb, var(--page-fg), transparent 78%);
  padding-top: 28px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-form-pad);
}