/* people.css — REVISION-2 pass (Oct 2026): borderless claymorphism, no eyebrows, compact rhythm, light only (R7).
   Owner: People (DESIGN-SPEC §7; REVISION-2 R1–R4, R7, R9, R13, R14). Loaded after site.css + type.css + cards.css on every
   page; every rule is scoped under #people-root / #alumni-root (or the people/alumni page heroes), so it
   out-specifies site.css's glass passes (1,1,0 beats 0,1,0) and cards.css's shared families without leaning on
   load order.

   !important appears only where the DESIGN-SPEC §2.0 ledger allows it: `border` + `background` on .person-tile /
   .roster-card (rest + :hover + forced colors), because site.css 3056–3066 / 3126–3139 paint a gradient edge with
   !important.

   Markup (people.js / alumni.js):
     people — one section per role on its own line (R9). The director and the research assistant professor(s)
              are .person-tile--lead featured cards (R13: portrait | name + affiliation + facts + links | bio
              well, top-aligned — no papers list, R20). Every other member, external
              collaborators included, is the same .person-tile--tile in a .people-grid with fixed columns
              (6 ≥ 1700, 5 ≥ 1280, 4 ≥ 1024, 3 ≥ 768, 2 below) and one body height, so a tile is the same size
              in every section and a one-member section shows one tile, left-aligned.
     alumni — a clay segmented control, then .roster-card in a fixed 4 / 3 / 2 / 1-column grid: one card size
              on every tab (no spanning).
     Both roots span type.css --page-inset (R14), edge to edge with the hero slab and the footer.

   21st.dev patterns (ported to vanilla CSS, de-glassed):
     · 24338 Neomorphism Metric Card — dual outer shadow + inset wells (card surface, interests well, pressed tab)
     · 5717  Glassmorphism Profile Card (saved) — square portrait over name, row-action chips (member tiles)
     · 28619 Team Member Cards — avatar-left card, icon link row (alumni roster)
     · 3176  Animated 3D Card (saved) + 2318 Squishy card — hover lift, pressed chips
     · 12828 Perspective Highlight — ≤ 2° pointer tilt on the featured cards only (people.js sets --tilt-x/-y)
     · 29425 Tabs with Count Badge — segmented control with count badges (alumni)                                  */


/* ============================================================== 0. LOCAL TOKENS
   Aliases onto the REVISION-2 R3 clay tokens (type.css). The fallbacks are the same R3 values, so these pages
   render correctly even before type.css carries them; once it does, the system tokens win. */
:is(#people-root, #alumni-root) {
  --pp-clay:         var(--clay, #F3F6FA);
  --pp-sunk:         var(--bg, #E8EDF5);
  --pp-radius:       var(--clay-radius, 1.5rem);
  --pp-shadow:       var(--clay-shadow,
                       14px 14px 30px -6px rgb(23 42 82 / .17), -10px -10px 24px -6px rgb(255 255 255 / .95),
                       inset 3px 3px 7px rgb(255 255 255 / .9), inset -5px -5px 12px rgb(23 42 82 / .07));
  --pp-shadow-hover: var(--clay-shadow-hover,
                       22px 22px 44px -8px rgb(23 42 82 / .23), -12px -12px 28px -6px rgb(255 255 255 / 1),
                       inset 3px 3px 7px rgb(255 255 255 / .95), inset -6px -6px 14px rgb(23 42 82 / .09));
  --pp-pressed:      var(--clay-pressed,
                       inset 6px 6px 12px rgb(23 42 82 / .14), inset -6px -6px 12px rgb(255 255 255 / .9));
  --pp-media:        var(--clay-media-shadow,
                       inset 0 0 0 1px rgb(255 255 255 / .35), 0 8px 18px -10px rgb(23 42 82 / .35));
  /* small clay pieces: chips, link buttons, the tab track (R3 pill recipe) */
  --pp-chip:         3px 3px 6px rgb(23 42 82 / .12), -3px -3px 6px rgb(255 255 255 / .9);
  --pp-chip-hover:   5px 5px 10px rgb(23 42 82 / .16), -4px -4px 9px rgb(255 255 255 / 1);
  --pp-chip-pressed: inset 2px 2px 5px rgb(23 42 82 / .16), inset -2px -2px 5px rgb(255 255 255 / .9);
  --pp-well:         inset 5px 5px 12px rgb(23 42 82 / .12), inset -5px -5px 12px rgb(255 255 255 / .55);
  --pp-track:        6px 6px 14px -4px rgb(23 42 82 / .16), -6px -6px 14px -4px rgb(255 255 255 / .95),
                     inset 1px 1px 2px rgb(255 255 255 / .8);
  --pp-ink-strong:   var(--ink-strong, #0C2340);
  --pp-accent-ink:   var(--accent-ink, #1D428A);
  --pp-ease:         var(--ease-out, cubic-bezier(.2, .8, .2, 1));
  --pp-gap:          1rem;
}
@media (min-width: 48em) { :is(#people-root, #alumni-root) { --pp-gap: 1.25rem; } }


/* ============================================================== 1. KILL LIST
   The glass sheen (::before) and specular rim (::after) site.css paints on these surfaces. (Alumni initials use
   .roster-card__initial, so site.css's navy .roster-card__fallback disc never applies.) Plain list, no !important
   (§2.0 rule 4); the only generated content re-added below is the link hit-area ::after, on a different element. */
#people-root .person-tile::before, #people-root .person-tile::after,
#alumni-root .roster-card::before, #alumni-root .roster-card::after { content: none; }


/* ============================================================== 2. PAGE RHYTHM (R4, R9, R14)
   The hero slab sits directly above; sections follow at a compact ≈ 2rem step, tile-section headings carry a
   count chip on one line (the featured Lab Director / Research Assistant Professor headings have none, R17).
   R14 one page width: the root takes type.css --page-inset (--container-wide centred, never closer to
   the edge than --gutter) as its margin and drops .container-wide's inner padding, so the card edges sit exactly on the hero slab's and the footer's edges at every width. The
   fallback is the same formula, for a type.css that predates the token. */
:is(#people-root, #alumni-root) {
  max-width: none;
  margin-inline: var(--page-inset, max(var(--gutter, 1rem), (100% - var(--container-wide, 2240px)) / 2));
  padding-inline: 0;
  padding-block: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem) var(--section-py, 3.5rem);
}
#people-root .people-section + .people-section { margin-top: clamp(1.75rem, 1.4rem + 1vw, 2.25rem); }

/* nowrap: on a phone a long role title wraps inside its own box and the count chip stays beside it */
#people-root .people-head {
  display: flex; flex-wrap: nowrap; align-items: center; gap: .75rem;
  margin: 0 0 1rem;
}
#people-root .people-head .people-count { flex: none; }
#people-root .people-head .section-header__title {
  margin: 0;
  font: 650 clamp(1.3125rem, 1.1rem + .8vw, 1.875rem)/1.15 var(--font-display);
  letter-spacing: -0.02em; color: var(--pp-ink-strong); text-wrap: balance;
}
/* count chip — a clay mini-surface, navy figures (29425 count badge, R3 pill recipe) */
#people-root .people-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2rem; height: 1.875rem; padding: 0 .7rem;
  border: 0; border-radius: 999px;
  font: 650 .875rem/1 var(--font-sans); font-variant-numeric: tabular-nums;
  color: var(--pp-accent-ink); background: var(--pp-clay); box-shadow: var(--pp-chip);
}

#people-root .people-empty {
  max-width: 36rem; margin-inline: auto; padding: 2.5rem 2rem; text-align: center;
  border-radius: var(--pp-radius); background: var(--pp-clay); box-shadow: var(--pp-shadow);
}
#people-root .people-empty__title { margin: 0; font: 650 1.5rem/1.2 var(--font-display); color: var(--pp-ink-strong); }
#people-root .people-empty__text { margin: .5rem 0 0; font: 400 .9375rem/1.55 var(--font-sans); color: var(--ink-2); }


/* ============================================================== 3. CLAY SURFACE (R3)
   One recipe for every people / alumni card: lighter-than-ground surface, no border, layered outer + inner
   shadows. The :hover rule pins the REST look so site.css's glass hovers cannot leak in; the lift + deeper
   shadow live in §10 behind prefers-reduced-motion. */
#people-root .person-tile,
#alumni-root .roster-card {
  position: relative; min-width: 0;
  background: var(--pp-clay) !important;          /* ledger: site.css 3056 gradient-edge background */
  border: 0 !important;                            /* ledger: site.css 3056 1.5px transparent edge */
  border-radius: var(--pp-radius);
  box-shadow: var(--pp-shadow);
  color: var(--ink);
  isolation: auto; backdrop-filter: none; -webkit-backdrop-filter: none;
  transform: none;
  transition: transform 320ms var(--pp-ease), box-shadow 320ms var(--pp-ease);
}
#people-root .person-tile:hover,
#alumni-root .roster-card:hover {
  background: var(--pp-clay) !important;
  border: 0 !important;
  box-shadow: var(--pp-shadow);
  transform: none;
}


/* ============================================================== 4. MEMBER TILE (R9: one size, one anatomy)
   Inset square photo (R3: 10px from the card edge, radius 1rem, media shadow), Bricolage name, ink identity
   lines, and a foot row of link chips. No join year (R13). Every tile body takes one height (see below), so
   tiles with one identity line and tiles with three come out the same size across sections. */
#people-root .person-tile {
  display: flex; flex-direction: column; height: 100%; overflow: visible;
}
#people-root .person-tile__photo {
  position: relative; z-index: 1; overflow: hidden; flex: none;
  margin: .625rem .625rem 0; aspect-ratio: 1 / 1;
  border: 0; border-radius: 1rem;
  background: var(--pp-sunk);
  box-shadow: var(--pp-media);
}
#people-root .person-tile__photo img {
  display: block; width: 100%; height: 100%; object-fit: cover;     /* object-position stays inline (focal_x/y) */
  border-radius: inherit;
  transition: transform 600ms var(--pp-ease);
}
/* Initial-letter fallback (no photo and no gendered default): a role-tinted clay well (24338 inset icon well)
   with a navy initial — soft, so a row of photo-less members doesn't read as a wall of navy blocks. */
#people-root .person-tile__fallback,
#alumni-root .roster-card__initial {
  position: absolute; inset: 0; display: grid; place-items: center;
  font: 650 clamp(2.25rem, 1.6rem + 2vw, 3.25rem)/1 var(--font-display); letter-spacing: -0.02em;
  color: var(--pp-accent-ink);
  background: linear-gradient(145deg,
    color-mix(in oklab, var(--role, var(--brand-blue)) 12%, var(--pp-clay)),
    color-mix(in oklab, var(--role, var(--brand-blue)) 26%, var(--pp-sunk)));
  box-shadow: var(--pp-well);
}
#alumni-root .roster-card__initial { font-size: 1.625rem; }

#people-root .person-tile__body {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: .3rem;
  padding: .875rem 1rem 1rem;
}
/* people.js (equalizeToTallest) writes the tallest natural body height as --tile-body-h; the rem values are the
   no-JS fallback. .is-measuring releases the stretch for one synchronous read. */
#people-root .person-tile--tile .person-tile__body { min-height: var(--tile-body-h, 7.75rem); }
#people-root.is-measuring .person-tile--tile .person-tile__body { flex: none; min-height: 0; }
#people-root .person-tile__name {
  margin: 0;
  font: 600 1.0625rem/1.25 var(--font-display); letter-spacing: -0.012em;
  color: var(--pp-ink-strong); text-wrap: balance;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
#people-root .person-tile__identity {
  display: flex; flex-direction: column; gap: .1rem;
  margin: 0; padding: 0; border: 0;
}
#people-root .person-tile__role {
  font: 500 .8125rem/1.4 var(--font-sans); color: var(--ink);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
#people-root .person-tile__at { font-weight: 400; color: var(--ink-2); }
#people-root .person-tile__dept,
#people-root .person-tile__org {
  font: 400 .8125rem/1.4 var(--font-sans); color: var(--ink-2);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
#people-root .person-tile__foot {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin-top: auto; padding-top: .75rem;
}
@media (max-width: 47.99em) {                       /* two tiles per row on phones: tighter body */
  #people-root .person-tile--tile .person-tile__photo { margin: .5rem .5rem 0; border-radius: .875rem; }
  #people-root .person-tile--tile .person-tile__body { padding: .75rem .75rem .875rem; min-height: var(--tile-body-h, 9.5rem); }
  #people-root .person-tile--tile .person-tile__name { font-size: 1rem; }
}


/* ============================================================== 5. CHIPS + PROFILE LINKS (R3 pill recipe)
   Clay mini-surfaces, no border. The alumni "Class of" chip wraps inside its card rather than overflow it. Link chips: quiet ink icon
   at rest, the network hue arrives on hover; :active presses in (2318). Each link's ::after widens its hit area
   to 44 × 44 without changing the 32px visual (neighbours overlap by 4px at the .5rem gap; the later link wins). */
#alumni-root .roster-card__grad {
  display: inline-flex; align-items: center; gap: .4rem;
  max-width: 100%; min-height: 1.75rem; padding: .3rem .7rem;
  border: 0; border-radius: 999px;
  font: 500 .75rem/1.2 var(--font-sans); letter-spacing: .005em; font-variant-numeric: tabular-nums;
  color: var(--ink-2); white-space: normal;
  background: var(--pp-clay); box-shadow: var(--pp-chip);
}

:is(#people-root, #alumni-root) .roster-card__links {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  margin: 0; padding: 0;
}
:is(#people-root, #alumni-root) .roster-card__link {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem; flex: none;
  width: 2rem; height: 2rem; padding: 0;
  border: 0; border-radius: 999px;
  color: var(--ink-2); background: var(--pp-clay); box-shadow: var(--pp-chip);
  font: 500 .8125rem/1 var(--font-sans); text-decoration: none;
  transform: none;
  transition: color 180ms var(--pp-ease), box-shadow 220ms var(--pp-ease), transform 220ms var(--pp-ease);
}
:is(#people-root, #alumni-root) .roster-card__link::after { content: ""; position: absolute; inset: -6px; }
:is(#people-root, #alumni-root) .roster-card__link svg { width: .9375rem; height: .9375rem; flex: none; }
#people-root .roster-card__link--labelled { width: auto; padding: 0 .85rem 0 .75rem; color: var(--ink); }
#people-root .roster-card__link--labelled::after { inset: -6px -3px; }
:is(#people-root, #alumni-root) .roster-card__link:is(:hover, :focus-visible) {
  color: var(--pp-ink-strong); transform: none;      /* site.css 1918 lifts unguarded; the lift is in §10 */
}
:is(#people-root, #alumni-root) .roster-card__link:is(:hover, :focus-visible) svg { color: var(--net, var(--pp-accent-ink)); }
:is(#people-root, #alumni-root) .roster-card__link:active { box-shadow: var(--pp-chip-pressed); }
:is(#people-root, #alumni-root) .roster-card__link:focus-visible {
  outline: var(--focus-ring, 2px solid #1D428A); outline-offset: 3px;
}


/* ============================================================== 6. PEOPLE — LAYOUTS
   6a. Member grid: fixed columns at every breakpoint (R9), rows stretch so card feet align. */
#people-root .people-grid {
  display: grid; gap: var(--pp-gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0; padding: 0; list-style: none;
}
#people-root .people-grid > li { display: flex; min-width: 0; }
#people-root .people-grid > li > .person-tile { flex: 1; }
@media (min-width: 48em) { #people-root .people-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64em) { #people-root .people-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 80em) { #people-root .people-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
/* R14: a wider container gets one more column, not wider tiles (≈ 260–360px tiles from 1700 up to 2560) */
@media (min-width: 106.25em) { #people-root .people-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

/* 6b. Featured cards (R9 director + R13 research professors): portrait | name + affiliation + facts + links |
   bio well. Each card sits in a .people-lead__cell size container, so the layout follows the card's own width —
   a lone card spanning the row and two or three research professors side by side get the right anatomy:
     < 40rem   portrait (6rem) beside name + affiliation; facts, links and the bio full width below.
     ≥ 40rem   portrait | name … links, the bio well full width beneath both, so no
               empty column runs down under the portrait.
     ≥ 68rem   portrait | name … links | bio well — three columns that fill the row, all three ending on
               one line: the content sets the row height, portrait and bio well stretch to it (R14).
     ≥ 100rem  the same, with a smaller portrait and the bio in two text columns (1920 / 2560 screens). */
#people-root .people-lead { display: grid; gap: var(--pp-gap); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 64em) {
  #people-root .people-lead { grid-template-columns: repeat(var(--per-line, 1), minmax(0, 1fr)); }
}
#people-root .people-lead__cell { display: flex; min-width: 0; container-type: inline-size; }
#people-root .people-lead__cell > .person-tile { flex: 1; }

#people-root .person-tile--lead {
  display: grid; align-items: start; column-gap: 1rem; row-gap: .5rem;
  grid-template-columns: 6rem minmax(0, 1fr);
  grid-template-areas: "photo name" "photo id" "facts facts" "foot foot" "bio bio";
  grid-template-rows: auto 1fr auto auto auto;
  padding: 1rem;
}
#people-root .person-tile--lead .person-tile__photo {
  grid-area: photo; margin: 0; width: 100%; aspect-ratio: 4 / 5; border-radius: 1.125rem;
}
/* phones: the body dissolves into the card grid so only the name + affiliation sit beside the portrait */
#people-root .person-tile--lead .person-tile__body { display: contents; }
#people-root .person-tile--lead .person-tile__name { grid-area: name; }
#people-root .person-tile--lead .person-tile__identity { grid-area: id; }
#people-root .person-tile--lead .person-tile__facts { grid-area: facts; }
#people-root .person-tile--lead .person-tile__foot { grid-area: foot; }
#people-root .person-tile--lead .person-tile__name {
  font: 700 clamp(1.375rem, 1.1rem + 1.1vw, 2.125rem)/1.1 var(--font-display); letter-spacing: -0.025em;
  -webkit-line-clamp: 3; line-clamp: 3;
}
#people-root .person-tile--lead .person-tile__identity { margin-top: .2rem; }
#people-root .person-tile--lead .person-tile__role { font-size: 1rem; line-height: 1.45; -webkit-line-clamp: 3; line-clamp: 3; }
#people-root .person-tile--lead .person-tile__dept { font-size: .9375rem; }
#people-root .person-tile--lead .person-tile__foot { padding-top: .375rem; }

/* R13 facts: data-derived clay link chips ("105 publications with the lab", "mCARE project"). 32px visual, the
   ::after widens the hit area to 44px. */
#people-root .person-tile__facts { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .375rem; }
#people-root .person-fact {
  position: relative;
  display: inline-block;                              /* not flex: a wrapped label flows as one run of text */
  max-width: 100%; min-height: 2rem; padding: .4rem .8rem;
  border: 0; border-radius: 999px;
  font: 500 .8125rem/1.2 var(--font-sans); font-variant-numeric: tabular-nums;
  color: var(--pp-accent-ink); text-decoration: none;
  background: var(--pp-clay); box-shadow: var(--pp-chip);
  transition: color 180ms var(--pp-ease), box-shadow 220ms var(--pp-ease), transform 220ms var(--pp-ease);
}
#people-root .person-fact::after { content: ""; position: absolute; inset: -6px -3px; }
#people-root .person-fact strong { font-weight: 700; color: var(--pp-ink-strong); }
#people-root .person-fact--project::before {
  content: ""; display: inline-block; vertical-align: .08em; margin-right: .4rem;
  width: .45rem; height: .45rem; border-radius: 50%; background: var(--brand-gold, #FFCC00);
  box-shadow: inset 0 0 0 1px rgb(138 100 0 / .35);
}
#people-root .person-fact:is(:hover, :focus-visible) { color: var(--pp-ink-strong); }
#people-root .person-fact:active { box-shadow: var(--pp-chip-pressed); }
#people-root .person-fact:focus-visible { outline: var(--focus-ring, 2px solid #1D428A); outline-offset: 3px; }

#people-root .person-tile__bio { grid-area: bio; min-width: 0; }
#people-root .person-tile__interests {
  margin: 0;
  font: 400 .9375rem/1.65 var(--font-sans); color: var(--ink);
  text-wrap: pretty;
}
#people-root .person-tile__interests strong { font-weight: 650; color: var(--pp-ink-strong); }

@container (min-width: 40rem) {
  #people-root .person-tile--lead {
    grid-template-columns: clamp(8.5rem, 17cqi, 11rem) minmax(0, 1fr);
    grid-template-areas: "photo body" "bio bio";
    grid-template-rows: auto auto;
    column-gap: 1.5rem; row-gap: 1.125rem; padding: 1.25rem;
  }
  #people-root .person-tile--lead .person-tile__body {
    grid-area: body; display: flex; flex-direction: column; gap: .4rem; padding: .25rem 0 0;
  }
  #people-root .person-tile--lead .person-tile__foot { padding-top: .875rem; }
  /* user: justified featured bios (card ≥ 640px; phones stay ragged so word gaps never open wide).
     No hyphenation, so "Dr." and grant numbers are never split. */
  #people-root .person-tile__interests { text-align: justify; text-justify: inter-word; hyphens: manual; }
  /* the bio sits in a pressed clay well (24338 inset well), so it reads as its own panel */
  #people-root .person-tile__bio {
    align-self: start;
    padding: 1rem 1.25rem;
    border-radius: 1.125rem;
    background: var(--pp-sunk);
    box-shadow: var(--pp-well);
  }
}
@container (min-width: 68rem) {
  #people-root .person-tile--lead {
    /* the name column (≥ 19rem) is wide enough for the name, affiliation and facts chips without deep
       wrapping, and narrow enough that the bio column runs about as tall as it (R14: no hollow column) */
    --lead-photo-w: clamp(12rem, 17cqi, 15rem);
    --lead-body-w: minmax(19rem, .75fr);
    grid-template-columns: var(--lead-photo-w) var(--lead-body-w) minmax(0, 1.4fr);
    grid-template-areas: "photo body bio";
    grid-template-rows: auto;
    align-items: stretch;
  }
  /* R14 no hollow panels: the CONTENT (name column or bio) sets the row height, not a fixed portrait.
     The portrait fills the row at its column width (never shorter than square) and its image is taken
     out of flow, so a tall source image cannot push the row down; the bio well fills the same row.
     Portrait, name column and bio well therefore end on one line, with no bare clay under any of them.
     Natural layout only: no height balancing between cards (R20). */
  #people-root .person-tile--lead .person-tile__photo {
    align-self: stretch; aspect-ratio: auto; min-height: var(--lead-photo-w);
  }
  #people-root .person-tile--lead .person-tile__photo img { position: absolute; inset: 0; }
  #people-root .person-tile--lead .person-tile__body { align-self: stretch; padding-block: .375rem; }
  /* the bio text stays TOP-aligned inside the well: no vertical centring, no min-height */
  #people-root .person-tile__bio { align-self: stretch; padding: 1.125rem 1.5rem 1.25rem; }
  #people-root .person-tile__interests { font-size: 1rem; line-height: 1.65; }
}
/* R14 wide screens (a featured card ≥ 1600px: the 1920 / 2560 screens). One bio column would run to
   ≈ 130 characters a line, so the bio flows in two columns (≈ 50–75 characters each) at a slightly larger
   reading size. A smaller portrait brings the row down to the height of that text. */
@container (min-width: 100rem) {
  #people-root .person-tile--lead {
    --lead-photo-w: clamp(11rem, 11cqi, 13rem);
    --lead-body-w: minmax(19rem, .6fr);
    column-gap: 1.75rem;
  }
  /* user: a vertical separator between the two bio columns — a soft navy hairline in a widened gutter */
  #people-root .person-tile__interests {
    columns: 2; column-gap: 3rem; column-rule: 1px solid rgb(23 42 82 / .16);
    font-size: 1.0625rem; line-height: 1.7;
  }
}
/* ≥ 2080px card (2560 screens): the name column takes more of the extra width, so each bio column stays
   near 60 characters instead of stretching to 75+ */
@container (min-width: 130rem) {
  #people-root .person-tile--lead { --lead-body-w: minmax(19rem, .85fr); }
}


/* ============================================================== 7. ALUMNI — SEGMENTED CONTROL (29425)
   A raised clay track; the current tab is pressed into it (R5). Tabs stay plain links (?type=…) with
   aria-current, each at least 44px tall. The active class span sits on the same line, so the bar fills the width. */
#alumni-root .alumni-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .875rem 1.5rem; margin: 0 0 1.25rem;
}
#alumni-root .alumni-tabs {
  display: inline-flex; align-items: center; gap: .25rem; max-width: 100%;
  padding: .3125rem;
  border: 0; border-radius: 999px;
  background: var(--pp-clay); box-shadow: var(--pp-track);
}
#alumni-root .alumni-tab {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  height: auto; min-height: 2.75rem; padding: 0 1rem; margin: 0;
  border: 0; border-radius: 999px;
  font: 500 .9375rem/1 var(--font-sans); letter-spacing: 0; white-space: nowrap; text-decoration: none;
  color: var(--ink-2); background: transparent; box-shadow: none;
  transition: color 180ms var(--pp-ease), background-color 220ms var(--pp-ease), box-shadow 220ms var(--pp-ease);
}
#alumni-root .alumni-tab:hover { color: var(--pp-ink-strong); }
#alumni-root .alumni-tab[aria-current="page"] {
  color: var(--pp-ink-strong); font-weight: 600;
  background: var(--pp-sunk); box-shadow: var(--pp-pressed);
}
#alumni-root .alumni-tab:focus-visible { outline: var(--focus-ring, 2px solid #1D428A); outline-offset: 2px; }
#alumni-root .alumni-tab .count {
  display: inline-grid; place-items: center;
  min-width: 1.5rem; height: 1.375rem; padding: 0 .45rem;
  border: 0; border-radius: 999px;
  font: 600 .75rem/1 var(--font-sans); font-variant-numeric: tabular-nums;
  color: var(--ink-2); background: color-mix(in oklab, var(--ink) 8%, transparent);
}
#alumni-root .alumni-tab[aria-current="page"] .count { color: #fff; background: var(--brand-blue, #1D428A); }
#alumni-root .alumni-bar__meta {
  margin: 0; font: 500 .9375rem/1.4 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--ink-2);
}
#alumni-root .alumni-bar__meta strong { font-weight: 650; color: var(--pp-ink-strong); }
/* Four labelled tabs need ~600px; below 640px the control becomes a 2 × 2 grid instead of overflowing. */
@media (max-width: 39.99em) {
  #alumni-root .alumni-tabs {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; border-radius: 1.5rem;
  }
  #alumni-root .alumni-tab { padding: 0 .5rem; font-size: .875rem; }
}


/* ============================================================== 8. ALUMNI — ROSTER (28619 anatomy)
   One card size on every tab (R9): fixed 4 columns ≥ 1700 (R14), 3 ≥ 1024, 2 ≥ 640, 1 below, never spanning, so a short last row
   (or a one-person tab) keeps normal-size cards, left-aligned. Every line is clamped (name 2, "role at org" 2 — 3
   on phones, where the line is shorter — department / organization 1; alumni.js puts the full text in a title),
   so the tallest possible card is known, and --pp-roster-h is that clamped maximum with one foot row: one
   constant per breakpoint, identical on every tab, no JS measuring. The foot flows directly under the identity
   lines (no pinned footer, no empty band mid-card, R4), and the avatar + text group is centred in the card, so a
   sparse card (name + class only, most masters alumni) shares its spare room above and below instead of trailing
   an empty band. min-height, not height: a card that ever needs a second foot row (three profile links on a
   narrow card) grows instead of clipping.
     ≥ 640: padding 2 × .875 + name 2 × 1.328 + identity (.1 + 2 × 1.1375 + .1 + 1.1375) + gaps 2 × .2
            + foot .3 + 1.75  ≈ 10.47rem → 10.5rem
     < 640: one more role line (+ 1.1375rem) → 11.625rem                                                         */
#alumni-root { --pp-roster-h: 10.5rem; }
@media (max-width: 39.99em) { #alumni-root { --pp-roster-h: 11.625rem; } }

#alumni-root .alumni-grid {
  display: grid; gap: var(--pp-gap); grid-template-columns: minmax(0, 1fr);
  margin: 0; padding: 0; list-style: none;
}
#alumni-root .alumni-grid > li { display: flex; min-width: 0; }
#alumni-root .alumni-grid > li > .roster-card { flex: 1; }
@media (min-width: 40em) { #alumni-root .alumni-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { #alumni-root .alumni-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 106.25em) { #alumni-root .alumni-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }   /* R14 */

#alumni-root .roster-card {
  display: grid; grid-template-columns: 4rem minmax(0, 1fr); align-items: start; align-content: center; gap: 1rem;
  min-height: var(--pp-roster-h); padding: .875rem 1.125rem;
}
#alumni-root .roster-card__avatar {
  position: relative; z-index: 1; overflow: hidden;
  width: 4rem; height: 4rem;
  border: 0; border-radius: 1.125rem;
  background: var(--pp-sunk); box-shadow: var(--pp-media);
}
#alumni-root .roster-card__avatar img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
#alumni-root .roster-card__body {
  min-width: 0;
  display: flex; flex-direction: column; gap: .2rem;
}
#alumni-root .roster-card__name {
  margin: 0;
  font: 600 1.0625rem/1.25 var(--font-display); letter-spacing: -0.012em; color: var(--pp-ink-strong);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
#alumni-root .roster-card__identity { display: flex; flex-direction: column; gap: .1rem; margin: .1rem 0 0; padding: 0; border: 0; }
#alumni-root .roster-card__role {
  font: 500 .8125rem/1.4 var(--font-sans); color: var(--ink);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
#alumni-root .roster-card__at { font-weight: 400; color: var(--ink-2); }
#alumni-root .roster-card__dept,
#alumni-root .roster-card__org {
  font: 400 .8125rem/1.4 var(--font-sans); color: var(--ink-2);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; line-clamp: 1; overflow: hidden;
}
@media (max-width: 39.99em) {
  #alumni-root .roster-card__role { -webkit-line-clamp: 3; line-clamp: 3; }
}
/* .3rem + the body's .2rem gap = .5rem under the last identity line. The chip and the link buttons share one
   28px row height; each link's ::after keeps the 44 × 44 hit area. */
#alumni-root .roster-card__foot {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: .5rem;
  margin-top: .3rem;
}
#alumni-root .roster-card__link { width: 1.75rem; height: 1.75rem; }
#alumni-root .roster-card__link::after { inset: -8px; }


/* ============================================================== 9. HERO PILL LINKS
   The "62 alumni →" / "← Current members" pills in the people + alumni page heroes keep their 26px clay look;
   an invisible ::after widens the hit area to 44px tall. */
:is(body[data-page="people"], body[data-page="alumni"]) .page-hero a.topic-pill { position: relative; }
:is(body[data-page="people"], body[data-page="alumni"]) .page-hero a.topic-pill::after {
  content: ""; position: absolute; inset: -9px -4px;
}


/* ============================================================== 10. MOTION (§2.0 rule 6; R3 behaviour)
   Rest is the static state. Hover: lift 4px + deeper clay shadow, 320ms. Featured cards add the 12828 tilt
   (people.js writes --tilt-x / --tilt-y on fine pointers only). Link chips lift 1px; :active presses (2318). */
@media (prefers-reduced-motion: no-preference) {
  #people-root .person-tile:hover,
  #alumni-root .roster-card:hover { transform: translateY(-4px); box-shadow: var(--pp-shadow-hover); }
  #people-root .person-tile:hover .person-tile__photo img { transform: scale(1.04); }
  :is(#people-root, #alumni-root) .roster-card__link:is(:hover, :focus-visible) {
    transform: translateY(-1px); box-shadow: var(--pp-chip-hover);
  }
  :is(#people-root, #alumni-root) .roster-card__link:active { transform: translateY(0) scale(.97); box-shadow: var(--pp-chip-pressed); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  #people-root .person-tile[data-tilt] {
    transform: perspective(1600px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--lift, 0px));
    transition: transform 200ms var(--pp-ease), box-shadow 320ms var(--pp-ease);
  }
  #people-root .person-tile[data-tilt]:hover { --lift: -4px; }
  /* 29471 grayscale → colour on the alumni avatars; focus inside the card reveals it too */
  #alumni-root .roster-card__avatar img { filter: grayscale(1) contrast(1.04); transition: filter 500ms var(--pp-ease); }
  #alumni-root .roster-card:is(:hover, :focus-within) .roster-card__avatar img { filter: none; }
}


/* ============================================================== 11. FORCED COLORS
   Shadows are dropped in forced-colors mode, so borderless clay would lose its edges and the pressed tab its
   state; give the system real edges (this file's id-scoped `border: 0 !important` otherwise beats cards.css's
   forced-colors border). */
@media (forced-colors: active) {
  #people-root .person-tile,
  #alumni-root .roster-card,
  #people-root .person-tile:hover,
  #alumni-root .roster-card:hover { border: 1px solid CanvasText !important; }
  #alumni-root .alumni-tab .count,
  #people-root .people-count,
  :is(#people-root, #alumni-root) :is(.person-fact, .roster-card__grad, .roster-card__link) { border: 1px solid CanvasText; }
  #people-root .person-tile__bio { outline: 1px solid CanvasText; }
  #alumni-root .alumni-tab[aria-current="page"] { outline: 2px solid Highlight; outline-offset: -2px; }
}