@layer components {
  /* What a family is really asking, one question to a line, each coming into full ink as it
     passes the middle of the screen; then the answer. */
  .site-questions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-8);
    padding: var(--space-13) var(--gutter-fluid);
    text-align: center;
  }

  .site-questions__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    list-style: none;
  }

  .site-questions__question {
    font: var(--type-site-question);
    letter-spacing: var(--tracking-display);
    color: var(--color-ink-display);
    text-wrap: balance;
  }

  .site-questions__answer {
    max-inline-size: var(--measure-site);
    margin-block-start: var(--space-11);
    font: var(--type-site-headline);
    letter-spacing: var(--tracking-display);
    color: var(--color-ink-display);
    text-wrap: balance;
  }

  .site-questions__lead {
    max-inline-size: var(--measure-site-lead);
    font: var(--type-site-lead);
    color: var(--color-ink-muted);
    text-wrap: pretty;
  }

  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .site-questions__question {
        animation: site-question linear both;
        animation-timeline: view();
        animation-range: cover 15% cover 85%;
      }
    }
  }

  @keyframes site-question {
    0%, 100% {
      opacity: var(--site-question-rest);
    }

    40%, 60% {
      opacity: var(--opacity-full);
    }
  }

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

    .site-questions__list {
      gap: var(--space-6);
    }

    .site-questions__question {
      font: var(--type-site-question-lg);
    }

    .site-questions__answer {
      margin-block-start: var(--space-13);
      font: var(--type-site-headline-lg);
    }

    .site-questions__lead {
      font: var(--type-site-lead-lg);
    }
  }
}