/* ENGAGE: PEOPLE ON THE WORK GALLERY (render/people.ts; lane ER, 2026-11-01). Only what a person adds to WR's shared card
   and drawer (work-gallery.css): a square face well, the initials plate for someone who hasn't agreed to a photo, the
   profile diptych, the drawer's project list and links, and Talent/Classroom's compact switch. Site tokens only. */

/* a face: square, cropped from the top third so a portrait keeps its eyes */
.ppl-face .wg-stills { aspect-ratio: 1 / 1; }
.ppl-face .wg-stills img { object-position: 50% 25%; }
/* people cards sit a little wider than Work cards, so a face reads at portrait scale */
.ppl-gal { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 18rem)); }

/* the initials plate (no photo consent), and the word plate (a way to help, a Classroom row): type, not a picture */
.ppl-plate { display: grid; place-items: center; width: 100%; height: 100%; background: var(--paper-3);
  font: 800 clamp(3rem, 9vw, 6rem)/1 var(--display); letter-spacing: -.04em; color: var(--ink); }
.wg-stills.ppl-plate { aspect-ratio: 16 / 9; }
.ppl-face .wg-stills.ppl-plate { aspect-ratio: 1 / 1; }
.ppl-plate--word { font-size: clamp(1.75rem, 4vw, 2.5rem); letter-spacing: -.03em; }

/* the profile diptych: the person, the seam, their first project */
.ppl-dip .wg-stills { aspect-ratio: auto; height: clamp(9rem, 28vw, 14rem); grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.ppl-dip .wg-stills[style*="--n:1"] { grid-template-columns: minmax(0, 1fr); }
.ppl-dip .wg-stills img:first-child { object-position: 50% 25%; }
.ppl-dip .ppl-plate { font-size: clamp(2.5rem, 7vw, 4.5rem); }
.ppl-headline { margin: 0 0 var(--s3); font: 700 var(--t-lg)/1.2 var(--display); letter-spacing: -.02em; color: var(--ink); max-width: 36rem; }

/* projects inside a drawer: screenshot over name over one line */
.ppl-work { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s5) var(--s4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); }
.ppl-work img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: 0 0; border-radius: var(--r-soft); outline: 1px solid var(--rule); outline-offset: -1px; }
.ppl-work__n { margin: var(--s2) 0 0; font: 600 var(--t-sm)/1.35 var(--ui); color: var(--ink); }
.ppl-work__s { font: 400 var(--t-xs)/1.3 var(--mono); color: var(--ink-3); }
.ppl-work__l { margin: var(--s1) 0 0; font: var(--t-sm)/1.45 var(--ui); color: var(--ink-2); }
.ia .ppl-work a, .ia .ppl-links a { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; }
.ppl-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); font: var(--t-sm)/1.6 var(--ui); }
.ppl-note { margin: 0; }

/* a compact switch: Talent's role filter, Classroom's preview role */
.ppl-filter { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s5); }
.ppl-filter[hidden] { display: none; }
.ppl-filter__b { min-height: 2.75rem; padding: 0 var(--s4); font: 500 var(--t-sm)/1 var(--ui); color: var(--ink-2); background: none;
  border: 1px solid var(--rule-firm); border-radius: var(--r-soft); cursor: pointer; }
.ppl-filter__b[aria-pressed="true"] { color: var(--ink); border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.ppl-filter__b:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.ppl-preview { margin: calc(-1 * var(--s4)) 0 var(--s6); font: var(--t-sm)/1.5 var(--mono); color: var(--ink-3); }

/* Community */
.ctb-more { margin-left: auto; font: 500 var(--t-sm)/1 var(--ui); color: var(--ink-2); }
.ctb-anchor { display: block; height: 0; }
.ctb-context { margin: 0; font: var(--t-sm)/1.5 var(--ui); color: var(--ink-3); }
.ctb-acts { gap: var(--s2) var(--s4); }
.ia .ctb-acts a { display: inline-flex; align-items: center; min-height: 2.75rem; font: 600 var(--t-sm)/1.2 var(--ui); color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }
.ia .ctb-acts a:first-child { padding: 0 var(--s4); color: var(--paper); background: var(--brand); border-radius: var(--r-soft); text-decoration: none; }
.ia .ctb-acts a:first-child:hover { background: var(--brand-lift); }

.ppl-empty { margin-top: var(--s4); }
.cmy-pic { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; margin: 0 0 var(--s5); border-radius: var(--r-soft); outline: 1px solid var(--rule); outline-offset: -1px; }


/* ---- v2 (founder, 2026-11-01): four purposes, one card system ---- */
/* Community: Organisations and Events side by side on a wide screen (two rows' worth of cards in one band), stacked when narrow */
.cmy-band { display: grid; gap: 0 var(--s7); grid-template-columns: repeat(auto-fit, minmax(min(100%, 26rem), 1fr)); }
.cmy-band .wg-gal { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); }
/* what has no data yet: one line each, with its action; never a table */
.cmy-lines { list-style: none; margin: 0 0 var(--s6); padding: 0; display: flex; flex-wrap: wrap; gap: var(--s2) var(--s7); font: var(--t-sm)/1.6 var(--ui); color: var(--ink-2); }
.cmy-lines b { color: var(--ink); font-weight: 600; margin-right: var(--s1); }
.ia .cmy-lines a { color: var(--ink); text-decoration: underline; text-underline-offset: .2em; }

/* Contributors: what they gave leads, up to four pictures in a 2 x 2, joined by the seam */
.ppl-gave .wg-stills { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; }
.ppl-gave[data-n="1"] .wg-stills, .wg-dlg .ppl-gave .wg-stills:has(img:only-child) { grid-template-columns: minmax(0, 1fr); }
.ppl-gave[data-n="3"] .wg-stills img:first-child { grid-row: span 2; }

/* Talent: the portfolio leads; a small headshot sits on its corner */
.ppl-gal--hire { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }
.ppl-hire { position: relative; }
.ppl-head { position: absolute; left: var(--s3); bottom: var(--s3); width: 3.25rem; height: 3.25rem; border-radius: 50%; object-fit: cover; object-position: 50% 25%;
  outline: 2px solid var(--paper); background: var(--paper-3); }
.ppl-head--i { display: grid; place-items: center; font: 800 var(--t-sm)/1 var(--display); color: var(--ink); }
.ppl-skills { margin: var(--s1) 0 0; font: var(--t-xs)/1.5 var(--mono); color: var(--ink-3); }
.ppl-list { margin: 0; padding-left: 1.1em; font: var(--t-base)/var(--lh-body) var(--ui); color: var(--ink-2); }

/* Talent's compact filters: one labelled select per facet with data behind it */
.ppl-selects { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); margin: 0 0 var(--s5); }
.ppl-selects[hidden] { display: none; }
.ppl-sel { display: inline-flex; align-items: center; gap: var(--s2); font: var(--t-xs)/1 var(--mono); color: var(--ink-3); }
.ppl-sel select { min-height: 2.75rem; padding: 0 var(--s3); font: 500 var(--t-sm)/1 var(--ui); color: var(--ink); background: var(--paper); border: 1px solid var(--rule-firm); border-radius: var(--r-soft); }
.ppl-sel select:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }