/* PORTED from amin_apac_html/css/people-portraits.css by scripts/sync-people-engine.mjs.
   Do not edit here: the adaptations are the "PORT:" patches in that script. */
/* AMIN APAC - people-portraits.css
   The people page's portrait tiles (js/people-looks.js) for pages OTHER than
   people.html: the member pages' People cards (2026-11-09, "the images in this
   member section should match what style and what we have in people page").
   A copy of the portrait rules in css/people.css ("portrait styles" and
   "Portrait" blocks, and the no-photo monogram) - keep the two in step.
   The look (Binary / Cartoon / Pixel) follows the homepage hero style exactly as
   on people.html; js/people-looks.js sets html[data-pp-look]. */
[data-av]{position:relative}
.pp-av{position:absolute;inset:0;width:100%;height:100%;display:block;border-radius:inherit;pointer-events:none}
[data-pp-look="photo"] .pp-av{display:none}
html:not([data-pp-look="photo"]) [data-av] > img{display:none}
html:not([data-pp-look="photo"]) [data-av] > .p5-mono{display:none}
.pp-avfig{position:absolute;inset:0;transform-origin:50% 100%}
.pp-avfig img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 24%}
.pp-sp{position:absolute;display:block;background-repeat:no-repeat}
.pp-lid{position:absolute;border-radius:50%;transform:scaleY(0);transform-origin:50% 0}
/* the agency's colour behind the figure, light behind the head, as on people.html */
.pp-avpt{
  overflow:hidden;isolation:isolate;
  background:radial-gradient(70% 55% at 50% 36%,color-mix(in srgb,var(--pp-ag) 45%,#fff),var(--pp-ag) 72%);
}
.pp-avpt:is([data-pt="portrait"],[data-pt="cartoon"],[data-pt="pixel"]) .pp-avfig img{transform:translateY(8%)}
.pp-avini{position:absolute;inset:0;display:grid;place-items:center;font-weight:500;letter-spacing:.02em;
  color:color-mix(in srgb,var(--pp-ag) 30%,var(--pp-ink, #1B1530))}
/* no portrait yet: the look's monogram on the agency colour */
.pp-avpt.is-mono{background:var(--pp-ag)}
.pp-avmono{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.pp-avpt.is-mono .pp-avini{place-items:center;padding-top:0;font-weight:700;letter-spacing:.04em;
  color:color-mix(in srgb,var(--pp-ag) 25%,var(--pp-ink, #1B1530))}
/* hover grows the figure from its base, as the people page's cards do */
@media (prefers-reduced-motion:no-preference){
  .pp-avfig{transition:transform .4s cubic-bezier(.34,1.45,.5,1)}
  .p5-person:hover .pp-avfig{transform:scale(1.05)}
}
/* profile-v5.css gives every span in a person card margin-top:2px (meant for the
   role line); the portrait's own spans must not take it, or the figure drops 4px */
.p5-face .pp-av,.p5-face .pp-av span{margin:0}

/* Member cards (2026-11-09): the face box is shorter than the portraits' 4:5
   (96x104 on most cards), and the 8% drop above showed a strip of the backdrop
   over the head, read as a border. 76 of 177 drawn portraits have the hair cut
   flat at the file's top edge, so any gap there is a hard line. Anchor to the
   top with no drop: cut heads run off the edge like a cropped photo, and
   portraits with headroom keep their own small gap. */
.p5-face .pp-avfig img,
.p5-face .pp-avpt:is([data-pt="portrait"],[data-pt="cartoon"],[data-pt="pixel"]) .pp-avfig img{object-position:50% 0;transform:none}

/* No-photo tile on member cards (2026-11-09): profile-v5.css's
   `.p5-person span{display:block}` outranked .pp-avini's grid, so the initials
   sat in the top-left corner. Centred again, set like Apple's Contacts monogram:
   one size up, semibold, a soft light falling on the agency colour so the tile
   reads as a surface, not a flat swatch. */
.p5-face .pp-avini{display:grid;place-items:center;margin:0}
.p5-face .pp-avpt.is-mono{background:linear-gradient(160deg,color-mix(in srgb,var(--pp-ag) 55%,#fff),var(--pp-ag) 70%)}
.p5-face .pp-avpt.is-mono .pp-avini{font-size:26px !important;font-weight:600;letter-spacing:.03em;line-height:1}