/* ==========================================================================
   CVR — president.css
   "Message from the President". Loads after base.css, which carries the tokens,
   the shared chrome and the page banner. Only the article body is here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Article

   Eight of the twelve columns, centred — columns 3 to 10 in the mockup. The
   ground is a shade below --color-ink with a wide, soft lift behind the copy.
   -------------------------------------------------------------------------- */

.article {
  background-color: var(--color-ink-deep);
  background-image: radial-gradient(
    120% 62% at 50% 40%,
    rgba(1, 43, 38, 0.9) 0%,
    rgba(1, 43, 38, 0.28) 46%,
    rgba(1, 43, 38, 0) 76%
  );
  padding-block: var(--space-11);
}

.article__body {
  grid-column: 1 / -1;
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--size-body-01);
  line-height: var(--leading-body);
  text-wrap: pretty;
}

/* base.css sets 16px between paragraphs; the mockup runs a full blank line.
   Direct children only, so the two signature lines keep their own tight pair. */
.article__body > p + p {
  margin-top: var(--space-7);
}

.signature {
  margin-top: var(--space-10);
  line-height: var(--leading-heading);
}

.signature__name {
  color: var(--color-lime);
}

.signature__role {
  color: var(--color-white);
  margin-top: 0; /* base.css puts 16px between any two <p> */
}

@media (min-width: 768px) {
  .article {
    padding-block: var(--space-13);
  }
}

@media (min-width: 1024px) {
  .article {
    /* 200px — the mockup's article sits in a noticeably taller well than the
       120px section rhythm the homepage uses */
    padding-block: calc(var(--space-12) * 2);
  }
  .article__body {
    grid-column: 3 / 11;
    /* The mockup sets long-form copy a step above body-01 — 24px at 1920, a
       size the base scale doesn't carry. Kept local until a second page wants
       it. --leading-tight lands the line box on the mockup's 32px rhythm. */
    font-size: 24px;
    line-height: var(--leading-tight);
  }
}