@layer components {
  /* A long read: one comfortable column, a serif opening line, then plain paragraphs. A figure
     inside it stands centered with its caption. */
  .site-read {
    display: flex;
    flex-direction: column;
    gap: var(--space-7);
    max-inline-size: calc(var(--measure-read) + 2 * var(--gutter-fluid));
    margin-inline: auto;
    padding: var(--space-12) var(--gutter-fluid);
  }

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

  .site-read__lede {
    font: var(--type-site-read-lede);
    letter-spacing: var(--tracking-display);
    color: var(--color-ink-display);
    text-wrap: pretty;
  }

  .site-read > p:not([class]) {
    font: var(--type-site-read);
    color: var(--color-ink);
    text-wrap: pretty;
  }

  .site-read__source {
    font: var(--type-caption);
    color: var(--color-ink-faint);
  }

  .site-read__figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
    margin-block: var(--space-9);
  }

  .site-read__object {
    inline-size: min(var(--size-fill), var(--site-read-figure-inline-size));
    filter: var(--elev-drop);
  }

  .site-read__caption {
    font: var(--type-label);
    color: var(--color-ink-faint);
    text-align: center;
  }

  .site-read .button {
    align-self: start;
    margin-block-start: var(--space-4);
  }

  @media (width >= 900px) {
    .site-read {
      gap: var(--space-8);
      padding-block: var(--space-13);
    }

    .site-read__title {
      font: var(--type-site-headline-lg);
    }

    .site-read__lede {
      font: var(--type-site-read-lede-lg);
    }

    .site-read > p:not([class]) {
      font: var(--type-site-read-lg);
    }
  }
}