/* ---------- people's cards: one look on /faculty and on The Clearing's archive ----------
   Drawn by roster.js from people.js. /faculty shows the Faculty, two up on a wide
   screen; the archive shows the Visiting Faculty, one column. The cards follow the
   Project's rules (/project.css): a hairline between two people and never around
   them, the name as an item title, small print in --soft, italic gray for the
   words that name what follows. Each value reads /project.css's token where the
   page loads it (/faculty) and falls back to the same number where it doesn't
   (the archive), so the two pages can't drift apart. No card is clickable, so
   none looks it: no shadow, no hover (Sha, Sept 29, 2026). Only its links respond. */

.roster{
  --r-item:var(--s-item,clamp(2.2rem,5.5vw,2.6rem));
  --r-head:var(--s-head,1rem);
  --r-title:var(--s-title,.55rem);
  --r-field:var(--s-field,.4rem);
  --r-name:var(--type-item,clamp(1.25rem,3.4vw,1.45rem));
  --r-body:var(--type-body,1rem);
  --r-small:var(--type-small,.875rem);
  --r-label:var(--type-label,.72rem);
  --r-gutter:clamp(1.4rem,3.5vw,1.9rem);
  list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr;
  font-size:var(--r-body); line-height:1.62;}
.person{display:flex; flex-direction:column; padding:calc(var(--r-item) / 2) 0;}
.person:first-child{padding-top:0;}
.person:last-child{padding-bottom:0;}
.person + .person{border-top:1px solid var(--line);}
/* two up on a wide screen (/faculty only), not three: the bios are the real ones
   (Sha keeps a single bio everywhere, so there is no short version to cut to), and a
   half column gives a four-paragraph bio a comfortable measure. The gutter is the
   cards' own padding. */
@media (min-width:52rem){
  .roster.two-up{grid-template-columns:1fr 1fr;}
  .two-up > .person:nth-child(odd){padding-right:var(--r-gutter);}
  .two-up > .person:nth-child(even){padding-left:var(--r-gutter); border-left:1px solid var(--line);}
  .two-up > .person + .person{border-top:0;}
  .two-up > .person:nth-child(n+3){border-top:1px solid var(--line);}
  .two-up > .person:nth-child(2){padding-top:0;}
  .two-up > .person:nth-last-child(2):nth-child(odd){padding-bottom:0;}
}

/* inside a card: the name is an item title; the rest steps down from it */
.person > *{margin:0;}
.person > * + *{margin-top:var(--r-title);}
/* a Faculty photo is a mounted print (Sha's pick, Oct 7, 2026): full frame and unfiltered (no crop,
   no tone change; Sha edits the photos himself so they match), on a mat a shade lighter than the
   paper, with a hairline ring and a soft shadow so it rests on the page like an object. Only when
   there is one: an empty mat reads as broken */
.p-photo{width:100%; height:auto; display:block; margin-bottom:1.1rem; padding:12px; background:var(--card);
  box-shadow:0 0 0 1px rgba(0,0,0,.07), 0 1px 2px -1px rgba(0,0,0,.06), 0 8px 20px -10px rgba(0,0,0,.14);}
.p-name{font-family:var(--serif); font-weight:var(--w-head); font-size:var(--r-name); line-height:1.15;
  letter-spacing:-.01em; color:var(--ink);}
.p-title{color:var(--ink-2);}
.p-leads{font-size:var(--r-small); line-height:1.55; color:var(--soft);}
.p-leads b{font-weight:calc(var(--w-read) + 100); color:var(--ink-2);}
/* a person's Departments, labeled like "leads" above it: the label soft, the names ink */
.p-areas{font-size:var(--r-small); line-height:1.55; color:var(--soft);}
.p-areas b{font-weight:calc(var(--w-read) + 100); color:var(--ink-2);}
/* the label of a labeled line ("leads", "departments"): italic gray names what follows */
.p-k{font-style:italic; font-feature-settings:var(--serif-alts-italic); margin-right:.2em;}
.p-role{font-size:var(--r-small); line-height:1.55; color:var(--soft);}
/* a credit: the role a shade heavier and darker than the sessions after it */
.p-role b{font-weight:calc(var(--w-read) + 200); color:var(--ink);}
/* a past session links to its page (.p-sess); it answers like every link, links.css */
/* "at The Clearing", "elsewhere": italic gray, naming what follows */
.p-else-k{font-family:var(--serif); font-style:italic; font-feature-settings:var(--serif-alts-italic); font-size:var(--r-body); color:var(--soft);}
.person > .p-bio,.person > .p-else-k,.person > .p-clearing{margin-top:var(--r-head);}
.person > .p-else-k + *{margin-top:var(--r-field);}
/* a Faculty member's sessions at The Clearing: a lightly shaded box inside the card, set
   apart from their roles in the Project. A shade, not a line, so it stays inside the
   LINES rule (lines divide a section's largest parts; this is part of one card). */
.p-clearing{background:rgba(26,22,16,.045); border-radius:3px; padding:.8rem 1rem .85rem;}
.p-clearing > *{margin:0;}
.p-clearing .p-role{margin-top:var(--r-field); color:var(--ink-2);}   /* ink on the shade: soft fell under 4.5:1 */
.p-bio{color:var(--ink-2);}
.p-else{list-style:none; padding:0; font-size:var(--r-small); line-height:1.55; color:var(--soft);}
.p-else li{padding-left:.85rem; text-indent:-.85rem;}
.p-else li::before{content:"·"; color:var(--faint); padding-right:.45rem;}
/* the links follow the card's own text; pinned to the foot of a tall row they drifted
   closer to the next person than to their own */
.person > .p-links{margin-top:var(--r-head); display:flex; flex-wrap:wrap; gap:.45rem .6rem; align-items:baseline;
  font-family:var(--serif); font-size:var(--r-small); line-height:1.55; color:var(--soft);}
.p-dot{color:var(--faint);}