/* ============================================================
   Michy — article

   One document, one layout. Type sizes and the gutter interpolate
   with clamp() between the 375 and 1440 Figma frames; the vertical
   rhythm is held in named custom properties and re-declared once,
   at 1024, where the page changes shape (the lead image starts to
   overlap the gradient, and the sign-up splits into two columns).

   Nothing on this page is positioned.
   ============================================================ */

:root {
  /* hero */
  --hero-pad-t:    40px;   --hero-pad-b:     44px;
  --hero-title-gap: 14px;  --hero-stand-gap: 18px;  --hero-meta-gap: 22px;

  /* How far the lead image sits over the gradient, and how far below the
     hero it starts. Below 1024 the gradient runs to the image's midline,
     so the overlap is the gap above it plus half its height — and because
     the image is sized by ratio, that half has to be computed rather than
     pinned: (column width) x (ratio) / 2, with the column being the
     viewport less both gutters at these widths. */
  --lede-gap:       24px;
  --lede-half:      calc((100vw - var(--gutter) * 2) * 104 / 343);
  --lede-overlap:   calc(var(--lede-gap) + var(--lede-half));

  /* body */
  --prose-pad-t:   34px;   --prose-pad-b:    44px;
  --prose-h2-gap:  14px;   --prose-p-gap:    16px;  --prose-sec-gap: 34px;
}

/* from 700 the figure takes the wider 1216 / 612 ratio */
@media (min-width: 700px) {
  :root { --lede-half: calc((100vw - var(--gutter) * 2) * 306 / 1216); }
}

@media (min-width: 1024px) {
  :root {
    --hero-pad-t:    91px;   --hero-pad-b:     58px;
    --hero-title-gap: 10px;  --hero-stand-gap: 30px;  --hero-meta-gap: 29px;

    --lede-overlap:  230px;  --lede-gap:        0px;

    --prose-pad-t:   62px;   --prose-pad-b:   101px;
    --prose-h2-gap:  16px;   --prose-p-gap:    24px;  --prose-sec-gap: 52px;
  }
}

/* --- masthead ---------------------------------------------------------
   base.css draws the gradient band; the article adds the run-on below the
   hero that the lead image sits over. */
.masthead { padding-bottom: calc(var(--hero-pad-b) + var(--lede-overlap)); }

/* --- hero -------------------------------------------------------------- */
.hero { padding-top: var(--hero-pad-t); text-align: center; }

.hero__title {
  margin: var(--hero-title-gap) auto 0; max-width: 890px;
  font: 500 var(--fs-title)/1.3 var(--font-display); letter-spacing: -.03em;
}
.hero__stand {
  margin: var(--hero-stand-gap) auto 0; max-width: 788px; opacity: .75;
  font: 400 var(--fs-body)/1.5 var(--font-sans); letter-spacing: -.005em;
}
.hero__meta {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: center; gap: 8px;
  margin-top: var(--hero-meta-gap);
  font: 400 var(--fs-micro)/1.5 var(--font-sans); letter-spacing: -.005em;
}
.hero__topic { font-weight: 500; font-size: var(--fs-body); }
.hero__sep { opacity: .6; }

/* --- lead image -------------------------------------------------------- */
.lede { margin-top: calc(var(--lede-gap) - var(--lede-overlap)); }
.lede img {
  width: 100%; height: auto; aspect-ratio: 343 / 208;
  object-fit: cover; border-radius: 20px;
}
@media (min-width: 700px) {
  .lede img { aspect-ratio: 1216 / 612; }
}

/* --- body -------------------------------------------------------------- */
.prose { padding-block: var(--prose-pad-t) var(--prose-pad-b); }
.prose h2 {
  font: 500 var(--fs-h2)/1.3 var(--font-display); letter-spacing: -.03em;
  color: var(--text-primary);
}
.prose p {
  margin-top: var(--prose-p-gap);
  font: 400 var(--fs-body)/1.5 var(--font-sans); letter-spacing: -.005em;
  color: var(--text-secondary);
}
.prose h2 + p { margin-top: var(--prose-h2-gap); }
.prose p + h2 { margin-top: var(--prose-sec-gap); }