@layer components {
  /* A fixed column count, so the blog's 12 per page and the homepage's 6 fill whole rows. */
  .post-list {
    display: grid;
    gap: var(--block-space);
    grid-template-columns: 1fr;
    margin-block: var(--block-space-double);
  }
  @media (min-width: 36rem) {
    .post-list { grid-template-columns: repeat(2, 1fr); }
  }
  @media (min-width: 48rem) {
    .post-list { grid-template-columns: repeat(3, 1fr); }
  }

  .post-list__item {
    display: flex;
    flex-direction: column;
    gap: var(--inline-space-half);
    padding: var(--block-space);
    background: var(--color-surface-raised);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-large);
    overflow: hidden; /* clip the full-bleed banner to the card's rounded corners */
    transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
  }
  .post-list__item:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow-large);
    transform: translateY(-2px);
  }

  /* Featured banner: break out of the card padding to sit flush at the top edge. */
  .post-list__media {
    display: block;
    margin: calc(-1 * var(--block-space)) calc(-1 * var(--block-space)) var(--inline-space-half);
  }
  .post-list__thumb {
    display: block;
    inline-size: 100%;
    aspect-ratio: var(--post-card-ratio, 3 / 2);
    object-fit: cover;
  }

  /* A portrait or square image shown whole, on a plain backing that fills the frame. */
  .post-list__media--whole { background: var(--color-surface); }
  .post-list__media--whole .post-list__thumb { object-fit: contain; }

  /* A titled run of post cards closed by a button — the homepage's latest, a post's related. */
  .posts-section { margin-block-start: var(--block-space-triple); text-align: center; }
  .posts-section > h2 { text-align: start; }
  .posts-section .post-list { margin-block: var(--block-space) var(--block-space-double); text-align: start; }

  .post-list__link {
    font-family: var(--font-display);
    font-size: var(--text-large);
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-text);
    text-wrap: pretty;
  }
  .post-list__link:hover { color: var(--color-brand-strong); text-decoration: none; }

  .post-list__excerpt {
    margin: 0;
    color: var(--color-subtle);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }

  .post-list__date {
    display: block;
    color: var(--color-muted);
    font-size: var(--text-small);
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
  }

  /* Phones: a row per post — a small square thumbnail beside the text — so a list stays short. */
  @media (width < 36rem) {
    .post-list__item {
      display: grid;
      grid-template-columns: 6rem 1fr;
      align-content: start;
      column-gap: var(--block-space);
    }
    .post-list__item > * { grid-column: -2; }
    .post-list__media { grid-column: 1; grid-row: 1 / span 3; margin: 0; }
    .post-list__thumb,
    .post-list__media--whole .post-list__thumb {
      aspect-ratio: 1;
      object-fit: cover;
      border-radius: var(--radius);
    }
    .post-list__link { font-size: var(--text-medium); }
    .post-list__excerpt { -webkit-line-clamp: 2; font-size: var(--text-small); }
  }

  .post__byline {
    display: flex;
    align-items: baseline;
    gap: var(--inline-space-half);
    color: var(--color-muted);
    font-size: var(--text-small);
    letter-spacing: 0.02em;
  }
  .post__author { font-weight: 600; color: var(--color-subtle); }
  .post__author-link { color: inherit; text-decoration-color: color-mix(in oklab, currentColor 40%, transparent); }
  .post__author-link:hover { text-decoration-color: currentColor; }
  .post__byline time { font-variant-numeric: tabular-nums; }
}