/* ==============================================================
   R3 - Advertising CTA band

   Same brand orange as the newsletter band, inked black instead of
   white. That inversion is deliberate: black clears 5.81:1 here, so
   this band can carry body copy at 16px, which the white-inked
   newsletter band cannot.
   ============================================================== */

.adcta {
  background: var(--color-adcta-surface);
  color: var(--color-adcta-ink);
  padding-block: var(--adcta-pad-block);
  padding-inline: var(--container-pad);

  /* Required, not cosmetic. The default focus ring scores 1.50:1 on
     this orange and would be invisible, and the band holds two
     focusable elements. Black reaches 5.81 - the newsletter had to
     use white at 3.41 because its ink is white. */
  --color-focus: var(--color-ink);
}

.adcta__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  text-align: center;
}

.adcta__heading {
  margin: 0 auto var(--space-8);
  font-size: var(--text-section-heading);
  line-height: var(--leading-display);
  text-wrap: balance;
}

.adcta__body {
  max-width: var(--adcta-measure);
  margin: 0 auto var(--space-7);
  font-size: var(--text-lg);
  line-height: var(--leading-body);
  text-wrap: balance;
}


/* --- Footnote marker -------------------------------------------------
   Sized in em so it tracks the body copy it belongs to. The browser's
   default `sup` vertical-align is kept - it is the whole affordance.
   --------------------------------------------------------------------- */

.adcta__footnote {
  font-size: var(--text-adcta-footnote);
  font-weight: var(--weight-bold);
}

.adcta__footnote-link {
  color: inherit;
  text-decoration: none;
}

/* Undecorated at rest to match the reference, but a link the pointer
   or keyboard has reached must say so. */
.adcta__footnote-link:hover,
.adcta__footnote-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 2px;
}


/* ==============================================================
   R4 - Responsive
   Heading size and band padding are already fluid via clamp; the
   84ch body measure is in ch, so it scales with the type and the
   container simply governs once it is narrower. Only the vertical
   rhythm needs adjusting.
   ============================================================== */

@media (max-width: 639px) {

  .adcta__heading { margin-bottom: var(--space-6); }

  .adcta__body { margin-bottom: var(--space-6); }
}