/* ============================================================
   PCG — founder portraits (over.html)

   Two real photographs on a site that had none. For a two-person firm
   selling "you speak to the people who build it", a face is not
   decoration: it is the claim being evidenced.

   THE CIRCLE IS DOING WORK, not following a convention. The two source
   photos have very different backgrounds — a flat grey wall and a bright
   outdoor bokeh — so as rectangles they would read as two unrelated images
   rather than a pair. A circle keeps far less background, which is most of
   what made them look mismatched.

   The ring is var(--rule), so it is whatever the skin says it is: this
   section renders on skin-creme, where --rule is a warm brown hairline, but
   the same rule holds if the section is ever moved onto onyx. Do not
   hard-code a colour here — that is the whole reason it survives a skin
   change.

   The photos were also cropped to put both heads at the same scale before
   they got here; see scratchpad/portraits.mjs. Framing is a design
   decision that belongs in the asset, not in object-position.
   ============================================================ */

.team-portrait{
  display:block;
  width:clamp(84px,9vw,112px);
  aspect-ratio:1;
  border-radius:50%;
  object-fit:cover;
  /* Both faces sit slightly above centre in their crop. */
  object-position:50% 42%;
  margin-bottom:var(--sp-3);
  /* The ring is --rule, the same hairline every other edge on the site is
     cut from, so the portrait belongs to the same object family as the
     card it sits in. The inner shadow lifts it off the card face. */
  border:1px solid var(--rule);
  box-shadow:0 10px 30px -14px rgba(0,0,0,.7);
  background:var(--surface);
}

/* The home page shows the pair together, centred, under a heading that names
   both of them. No overlap: two people who share the work equally should not
   be stacked so that one sits in front of the other. */
.team-pair{
  display:flex;
  justify-content:center;
  gap:clamp(14px,2vw,26px);
  margin-bottom:var(--sp-4);
}
.team-pair .team-portrait{margin-bottom:0}

/* The card already carries a hover state; the portrait should move with it
   rather than sit still while the surface under it lifts. */
.card:hover .team-portrait{border-color:var(--gold-text)}
.team-portrait{transition:border-color .4s var(--ease)}

@media (prefers-reduced-motion:reduce){
  .team-portrait{transition:none}
}

/* Forced colours drops --rule and the shadow, which would leave the
   portrait edgeless against the system background. */
@media (forced-colors:active){
  .team-portrait{border:1px solid CanvasText;box-shadow:none}
}