@layer components {
  /* One person's public "about me" page (/a/:slug) */
  .member-page__header {
    margin-block-end: var(--block-space);
  }

  .member-page__title {
    font-family: var(--font-display);
    font-size: var(--text-x-large);
  }

  .member-page__portrait {
    margin-block: var(--block-space);
  }

  .member-page__portrait img {
    inline-size: 100%;
    height: auto;
    border-radius: var(--radius-large);
  }

  .member-page__caption {
    margin-block-start: var(--inline-space-half);
    color: var(--color-muted);
    font-size: var(--text-small);
  }

  /* The graduates directory (/a, or embedded in a body): region tags, then a titled group per region. */
  .graduates-directory__label { display: none; }
  .member-index__title {
    font-family: var(--font-display);
    font-size: var(--text-x-large);
  }

  .member-index__regions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--inline-space);
    margin-block: var(--block-space) var(--block-space-double);
  }

  .member-index__group + .member-index__group { margin-block-start: var(--block-space-double); }
  .member-index__region {
    display: flex;
    align-items: baseline;
    gap: var(--inline-space);
    margin-block-end: var(--block-space);
    font-size: var(--text-large);
  }
  .member-index__count { color: var(--color-muted); font-size: var(--text-small); font-variant-numeric: tabular-nums; }

  .member-index__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--inline-space);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  @media (min-width: 36rem) {
    .member-index__grid { grid-template-columns: repeat(2, 1fr); gap: var(--block-space); }
  }
  @media (min-width: 48rem) {
    .member-index__grid { grid-template-columns: repeat(3, 1fr); }
  }

  /* Avatar beside the name, the excerpt beneath both. */
  .member-card {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: var(--inline-space-half) var(--inline-space);
    block-size: 100%;
    align-content: start;
    padding: var(--block-space);
    border: var(--border);
    border-radius: var(--radius-large);
    background: var(--color-surface-raised);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--transition);
  }
  .member-card:not(:has(.member-card__avatar)) { grid-template-columns: 1fr; }
  .member-card:hover { border-color: var(--color-border-strong); text-decoration: none; }

  .member-card__avatar {
    inline-size: 2.75rem;
    aspect-ratio: 1;
    border-radius: 50%;
    object-fit: cover;
  }

  .member-card__name {
    grid-column: -2; /* beside the photo, or the whole row's start when there's none */
    font-family: var(--font-display);
    font-size: var(--text-medium);
    font-weight: 600;
  }
  .member-card:hover .member-card__name { color: var(--color-brand-strong); }

  .member-card__excerpt {
    grid-column: 1 / -1;
    margin: 0;
    color: var(--color-muted);
    font-size: var(--text-small);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
  @media (width < 36rem) {
    .member-card { padding: var(--block-space-half) var(--block-space); }
    .member-card__excerpt { -webkit-line-clamp: 2; }
  }

  .member-index__empty {
    color: var(--color-muted);
  }
}