@layer components {
  .moment {
    max-inline-size: var(--measure);
    margin-inline: auto;
    padding-block-start: var(--space-7);
    padding-inline: var(--gutter-fluid);
  }

  .moment__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-block-end: var(--space-5);
  }

  .moment__title {
    font: var(--type-title-2);
    letter-spacing: var(--tracking-display);
    color: var(--color-ink-display);
  }

  .moment__lead {
    font: var(--type-body-sm);
    color: var(--color-ink-muted);
    text-wrap: pretty;
  }

  .moment__steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-7);
  }

  .moment__step {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    scroll-margin-block-start: var(--space-11);
  }

  .moment__step-title {
    font: var(--type-heading);
    color: var(--color-ink);
  }
}