/* Layout for the plain prose pages (about, team). Palette and chrome come
   from theme.css; this file is only the reading column and the card grid.

   Trap: .wrap is 1120px wide for the landing's constellation, which is far
   too wide to read at. Prose here sets its own measure in ch and does not
   inherit one. */

.page-head { padding: 44px 0 0; }
.page-head h1 { font-size: var(--fs-title); text-wrap: balance; }
.page-head .lede {
  max-width: 62ch;
  margin-top: 14px;
  font-size: var(--fs-lg);
  line-height: 1.65;
  color: var(--muted-foreground);
}

.prose { max-width: 66ch; padding: 34px 0 56px; }
.prose h2 { font-size: var(--fs-2xl); margin-top: 34px; }
.prose h2:first-child { margin-top: 0; }
.prose p { margin-top: 12px; line-height: 1.7; }
.prose ul { margin-top: 12px; padding-left: 20px; }
.prose li { margin-top: 8px; line-height: 1.65; }
.prose a { color: var(--brand-ink); text-underline-offset: 3px; }

/* Uniform hairline on all four sides; the accent lives in the text inside,
   never on one edge. */
.stub {
  margin-top: 20px;
  padding: 18px 20px;
  border: var(--hairline) solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
}
.stub h3 { font-size: var(--fs-md); color: var(--brand-ink); }
.stub p { margin-top: 8px; font-size: var(--fs-md); color: var(--muted-foreground); }

.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 30px;
  padding-top: 24px;
  border-top: var(--hairline) solid var(--border);
}
.facts dt {
  font-family: var(--label);
  font-size: var(--fs-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.facts dd { font-family: var(--display); font-size: var(--fs-2xl); font-weight: 500; margin-top: 4px; }
@media (min-width: 640px) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }


/* Team cards. Uniform hairline on all four sides; the portrait fills the
   card's width at the photo's own 2:3 and sits inside the card. */

/* Trap: the roster is a `ul` inside `.prose`, and `.prose ul` sets a
   padding-left for bullet lists at a higher specificity than a lone class.
   Without the `.prose` here the cards sit indented from every heading and
   paragraph on the page, which reads as a misalignment rather than a list. */
.prose .roster,
.team .roster {
  list-style: none;
  display: grid;
  gap: 16px;
  margin: 4px 0 0;
  padding: 0;
}

.person {
  display: grid;
  gap: 14px;
  align-content: start;
  padding: 20px;
  border: var(--hairline) solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
}

/* Side by side, the three rows — portrait, name, links — sit in tracks the
   roster owns, so a name that wraps to two lines lifts every card's name row
   instead of pushing its own link row out of step with its neighbours.
   Each card spans the three tracks and reads them back with `subgrid`.

   Trap: the row gap inside a card is now the roster's row-gap, because a
   subgrid takes its gutters from the parent. That is also the gap between
   two ROWS of cards, so the two cannot be set independently while this is
   on — which is fine at three people and would want revisiting past six. */
@media (min-width: 480px) {
  .prose .roster,
  .team .roster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
    row-gap: 14px;
    column-gap: 16px;
  }
  .person {
    grid-row: span 3;
    grid-template-rows: subgrid;
    gap: 0;
  }
}
@media (min-width: 700px) {
  .prose .roster,
  .team .roster {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.mug {
  display: block;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 2 / 3;
  border-radius: var(--radius-sm);
  background: var(--muted);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
}
.mug img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.person .nm { margin-top: 18px; font-family: var(--display); font-size: var(--fs-lg); font-weight: 500; }
.person .links {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  align-self: end;
}
.person .links a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: var(--hairline) solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--brand-ink);
}
.person .links a:hover,
.person .links a:focus-visible { background: var(--muted); }
.person .links svg { width: 18px; height: 18px; }

/* The roster on the About page sits below the prose column, at the full
   width of .wrap. */
.team { padding: 0 0 56px; }
.team h2 { font-size: var(--fs-2xl); margin-bottom: 18px; }
.prose + .team { padding-top: 0; }