/* =================================================================== TEAM section css =================================================================== */
.team {
    /* .band-stair pulls the section up 120px so its ink corners climb into
       the different band above; the top padding buys that 120px back. */
    padding-block: calc(var(--sectionGap) + var(--stair2)) var(--sectionGap);
    background: var(--ink);

    /* the supporting copy moved out from under the h2 and up beside it,
       starting at x970 in the 100->1820 measure */
    & .team__head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--g100);
        margin-bottom: var(--sp100);
        & .section-title-wrap{
            margin-bottom: 0;
        }
    }

    & .team__intro {
        color: var(--muted-invert);
    }

    /* Website.pdf turns the stacked rows into three cards.
       Measured, 100->1820 measure: 512px columns on 70px gutters, so the row
       runs 100->1776 and stops 44px short of the measure. */
    & .team__grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--sp70);
        max-width: 97.4%;
        margin-top: var(--sp25);
    }

    /* measured 512 x 521 with a two-step 35px notch on three corners */
    & .team__media {
        --notch: var(--notch-md);
        display: block;
        aspect-ratio: 512 / 521;
        margin-bottom: var(--sp50);
        background: var(--surface-raised);    
        
        @media (max-width: 991.98px) {
           max-width: 400px;           
        }
    }

    & .team__portrait {
        width: 100%;
        height: 100%;
        object-fit: cover;       
    }
    & .team__portrait-avtar {
        width: 100%;
        height: 100%;
        object-fit: cover;       
    }

    & .team__name {
        margin-bottom: var(--sp10);
        font-size: var(--f40);
        color: var(--text-invert);
    }

    & .team__role {
        display: block;
        margin-bottom: var(--sp20);
        font-size: var(--f20);
        font-weight: var(--fw-display);
        color: var(--text-invert);
    }

    & .team__member p { color: var(--muted-invert); }
}

/* =================================================================== responsive =================================================================== */
@media (max-width: 991.98px) {
    .team {
        & .team__head { grid-template-columns: 1fr; }
        

        & .team__grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            max-width: 100%;
        }
    }
}

@media (max-width: 575.98px) {
    .team {
        & .team__grid { grid-template-columns: 1fr; }

        /* the artboard's break strands the second sentence's opening words */
        & .team__intro br { display: none; }
    }
}