/*
 * A page of reading set on the ground: the company articles, the wiki, the
 * weekly market summary and the static pages. A card at a reading width,
 * with its text as `.prose` inside.
 *
 *   .page-card--wide   the affiliates hub, which carries logo grids
 *   .page-meta         a quiet line above or below the text: "Covering …",
 *                      when summaries are written
 */
@layer components {
  .page-card {
    max-inline-size: 52rem;
    margin-inline: auto;
    padding: var(--space-xl) var(--space-lg);
    border: var(--rule-width) solid var(--color-rule);
    border-radius: var(--radius-xl);
    background-color: var(--color-surface);

    @media (width >= 768px) {
      padding: var(--space-3xl);
    }
  }

  .page-card--wide {
    max-inline-size: 60rem;
  }

  .page-meta {
    margin-block: var(--space-2xs) var(--space-lg);
    color: var(--color-ink-subtle);
    font-size: var(--text-meta);
    line-height: var(--leading-meta);
  }

  /* A section after the main text, over a rule: the summary archive. */
  .page-section {
    margin-block-start: var(--space-2xl);
    padding-block-start: var(--space-lg);
    border-block-start: var(--rule-width) solid var(--color-rule);
  }
}