/* ------------------------------------------------------------
   synappro design system — team
   Requires tokens.css, chrome.css, components.css.
   ------------------------------------------------------------ */

.team-section-label { margin-bottom: 20px; }

.person-cards { gap: 24px; margin-top: 8px; }

.person-card { padding: 32px; display: flex; flex-direction: column; }
/* Bleeds to the card's own top/left/right edges (negative margin equal to
   the card's own padding) instead of sitting inset like the text below it
   — makes the photo read as part of the card's shape, not a smaller
   thumbnail floating inside a padded frame. Bottom stays put since the
   name/bio still need normal padding under it. */
.person-photo {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    margin: -32px -32px 24px;
    border-radius: var(--r-card) var(--r-card) 0 0;
}
.person-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1039px) {
    /* .person-card's own unconditional padding (32px, above) has equal
       specificity to .card-paper's mobile shrink and comes later in the
       cascade, so it was silently winning at every width — the photo's
       negative margin never actually matched what was on screen. Both
       need to shrink together to the site's 28px mobile card padding. */
    .person-card { padding: 28px; }
    .person-photo { margin: -28px -28px 24px; }
}

.person-name { font-family: var(--font-heading); font-size: var(--fs-21); color: var(--ink-900); margin: 0 0 6px; }
.person-creds { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--ink-500); margin: 0 0 6px; }
.person-role { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--terracotta-500); margin: 0 0 16px; }
.person-bio { font-size: 16px; line-height: 1.6; color: var(--ink-700); margin: 0 0 24px; }

.person-links {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid var(--neutral-100);
    display: flex;
    gap: 16px;
    align-items: center;
}
.person-links a { line-height: 0; }
.person-links img { height: 20px; width: 20px; opacity: 0.6; }
.person-links .link-inline { font-size: 15px; line-height: normal; }