@layer components {
  /* The call again, alone, before the footer: the mark breathing out, one line, the way in. */
  .site-call {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-9);
    padding: var(--space-13) var(--gutter-fluid);
    text-align: center;
  }

  .site-call__mark {
    inline-size: var(--site-call-mark-size);
    block-size: var(--site-call-mark-size);
    color: var(--color-ink-display);
  }

  .site-call__title {
    display: flex;
    flex-direction: column;
    font: var(--type-site-hero);
    letter-spacing: var(--tracking-display);
    color: var(--color-ink-display);
    text-wrap: balance;
  }

  .site-call__line--beat {
    color: var(--color-ink-faint);
  }

  @media (prefers-reduced-motion: no-preference) {
    .site-call__mark {
      animation: site-call-breath var(--dur-breath) var(--ease-breath) infinite;
    }
  }

  /* In for two fifths of the breath, out for three. */
  @keyframes site-call-breath {
    0%, 100% {
      scale: none;
      rotate: none;
    }

    40% {
      scale: var(--site-breath-scale);
      rotate: var(--site-breath-turn);
    }
  }

  @media (width >= 900px) {
    .site-call {
      padding-block: calc(2 * var(--space-13));
    }

    .site-call__title {
      font: var(--type-site-hero-lg);
    }
  }
}