/* Hallmark · macrostructure: Split Studio (system-managed by design.md; pages share it) · page: meet-our-staff · tone: grounded, direct, dignified · anchor hue: brick 29°
 * theme: studied-DNA "limestone and brick" (design.md) · tokens only (no raw colour or font values) · eyebrows: none · motion: none
 * sections: page head (team photo on the plate, 90% figure) · leadership · outpatient + IOP team · case management + peer support · call band (ink)
 * rhythm: leadership = two-up entries with large portraits; the care team = three-up compact entries. Never one uniform card grid.
 * portraits keep their real 2:3 ratio (341×512 / 480×720 sources) and float, so an opened bio wraps the photo then takes the full width
 * Hallmark · pre-emit critique: P5 H5 E4 S5 R4 V5
 * Shared-component candidates (kept here per the brief): .person (photo + name + credentials + role + <details> bio) · .staff-stat
 */

/* ── Head: a wider photo column for a wide group photo, and the 90% figure ── */
.staff-head .plate img { aspect-ratio: 3 / 2; object-position: 50% 40%; }
@media (min-width: 60rem) {
  .staff-head .page-head__grid--media { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
.staff-stat {
  display: flex; align-items: center; gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md); border: var(--rule-hair) solid var(--color-control); background: var(--color-paper-2);
}
.staff-stat__num {
  flex: none; font-family: var(--font-display); font-weight: var(--weight-display-heavy); font-size: var(--text-xl);
  line-height: 1; letter-spacing: var(--tracking-display); color: var(--color-accent); font-variant-numeric: tabular-nums;
}
.staff-stat__text { font-weight: var(--weight-strong); line-height: var(--leading-snug); }

/* ── People ── */
.staff-lead { padding-block: var(--space-3xl) var(--space-2xl); }
.staff-group__title { margin-bottom: var(--space-xl); }
.staff-case { padding-block: var(--space-2xl) var(--space-3xl); }

.people { list-style: none; margin: 0; padding: 0; display: grid; align-items: start; }
.person { display: flow-root; padding-block: var(--space-md) var(--space-lg); border-top: var(--rule-hair) solid var(--color-rule); }
.person__photo {
  float: left; width: 6rem; aspect-ratio: 2 / 3; object-fit: cover;
  margin: 0 var(--space-md) var(--space-xs) 0; background: var(--color-paper-3);
}
.person__name { font-size: var(--text-md); line-height: var(--leading-snug); }
.person__creds { margin-top: var(--space-3xs); font-size: var(--text-sm); font-weight: var(--weight-strong); color: var(--color-text-2); }
.person__role { margin-top: var(--space-3xs); font-size: var(--text-sm); color: var(--color-text-muted); }

/* Bio disclosure: a one-line affordance with the same +/− voice as the FAQ */
.person__bio { margin-top: var(--space-2xs); }
.person__bio summary {
  display: inline-flex; align-items: center; gap: var(--space-xs); min-height: var(--tap-min);
  list-style: none; cursor: pointer; white-space: nowrap;
  font-weight: var(--weight-strong); color: var(--color-accent);
}
.person__bio summary::-webkit-details-marker { display: none; }
.person__bio summary::after { content: "+"; font-size: var(--text-md); line-height: 1; }
.person__bio[open] summary::after { content: "\2212"; }
.person__bio summary:hover { text-decoration: underline 2px; text-underline-offset: 0.12em; }
.person__bio summary:active { color: var(--color-accent-deep); }
.bio { padding-top: var(--space-2xs); max-width: var(--measure); color: var(--color-text-2); }
.bio p + p { margin-top: var(--space-sm); }

/* Leadership: larger portraits, two-up on desktop */
.people--lead .person__photo { width: 7rem; }
.people--lead .person__name { font-size: var(--text-lg); }

@media (min-width: 40rem) {
  .people--lead .person__photo { width: 10rem; margin-right: var(--space-lg); }
  .people--crew { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-xl); }
  .people--crew .person__photo { width: 7rem; }
}
@media (min-width: 60rem) {
  .people--lead { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-2xl); }
  .people--lead .person__photo { width: 12rem; }
  .people--crew { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-lg); }
}

/* ── Closing call band ── */
/* The band sits directly on the ink footer, whose statement line repeats the number: a rule-ink hairline keeps them two things */