.team-page {
    --yellow: #ffc900;
    background: var(--paper)
}

.team-head {
    padding: 9.5rem 1.4rem 3rem;
    border-bottom: 1px solid
}

.team-head>.page-breadcrumbs {
    margin: 0 0 4.5rem
}

.team-head__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(18rem, .42fr);
    gap: clamp(4rem, 9vw, 10rem);
    align-items: end
}

.team-kicker {
    margin: 0 0 1.5rem;
    color: var(--orange);
    font: 500 .58rem var(--mono);
    text-transform: uppercase
}

.team-head h1 {
    max-width: 10ch;
    margin: 0;
    font-size: clamp(4.8rem, 8vw, 8.5rem);
    line-height: .89;
    letter-spacing: -.078em
}

.team-head__intro {
    padding-top: 1rem;
    border-top: 1px solid
}

.team-head__intro p {
    margin: 0;
    font: clamp(.8rem, 1.05vw, .95rem)/1.7 var(--mono)
}

.team-head__meta {
    margin-top: 4.5rem;
    padding-top: 1rem;
    display: flex;
    justify-content: space-between;
    border-top: 1px solid;
    font: .53rem var(--mono);
    text-transform: uppercase
}

.team-image {
    margin: 0;
    border-bottom: 1px solid;
    background: var(--cream)
}

.team-image img {
    width: 100%;
    height: min(62vh, 720px);
    object-fit: cover
}

.team-image figcaption {
    display: flex;
    justify-content: space-between;
    padding: .7rem 1.4rem;
    font: .5rem var(--mono);
    text-transform: uppercase
}

.join-team {
    padding: 3rem 1.4rem;
    display: grid;
    grid-template-columns: 1fr minmax(15rem, 28rem) auto;
    gap: clamp(2rem, 6vw, 7rem);
    align-items: end;
    background: var(--yellow);
    border-bottom: 1px solid
}

.join-team span {
    font: 500 .53rem var(--mono);
    text-transform: uppercase
}

.join-team h2 {
    margin: 1.2rem 0 0;
    font-size: clamp(2.8rem, 4.8vw, 5rem);
    line-height: .94;
    letter-spacing: -.065em
}

.join-team p {
    margin: 0;
    font: .66rem/1.65 var(--mono)
}

.team-button {
    min-width: 12rem;
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    padding: .9rem 1rem;
    color: var(--paper);
    background: var(--ink);
    border: 1px solid;
    font: 500 .57rem var(--mono);
    text-transform: uppercase;
    box-shadow: 4px 4px 0 var(--orange);
    transition: transform .2s, box-shadow .2s
}

.team-button:hover {
    transform: translate(4px, 4px);
    box-shadow: none
}

/* School ethos */
.team-ethos {
    position: relative;
    min-height: 72vh;
    padding: 2rem 1.4rem 3rem;
    display: grid;
    grid-template-columns: 22vw minmax(0, 1fr) minmax(18rem, 30vw);
    grid-template-rows: auto 1fr auto;
    gap: 3rem;
    overflow: hidden;
    color: var(--paper);
    background: var(--ink);
    border-bottom: 1px solid var(--ink)
}

.team-ethos__label {
    grid-column: 1/-1;
    display: flex;
    justify-content: space-between;
    font: .56rem var(--mono);
    text-transform: uppercase
}

.team-ethos__copy {
    grid-column: 1/3;
    grid-row: 2;
    align-self: center;
    position: relative;
    z-index: 2
}

.team-ethos__copy h2 {
    max-width: 11ch;
    margin: 0;
    font-size: clamp(4rem, 7.7vw, 8rem);
    line-height: .87;
    letter-spacing: -.078em
}

.team-ethos__copy h2 em {
    color: var(--yellow);
    font-style: normal
}

.team-ethos__copy p {
    max-width: 39rem;
    margin: 3rem 0 0 22vw;
    font: .78rem/1.7 var(--mono)
}

.team-orbit {
    grid-column: 3;
    grid-row: 2;
    align-self: center;
    justify-self: center;
    position: relative;
    width: min(25vw, 22rem);
    aspect-ratio: 1;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 50%;
    box-shadow: 0 0 0 4vw rgba(255, 255, 255, .035), 0 0 0 8vw rgba(255, 255, 255, .025)
}

.team-orbit::before,
.team-orbit::after {
    content: "";
    position: absolute;
    inset: 18%;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 50%
}

.team-orbit::after {
    inset: 36%
}

.team-orbit i {
    position: absolute;
    inset: 50% auto auto 50%;
    color: var(--yellow);
    font-size: 5rem;
    font-style: normal;
    line-height: 1;
    transform: translate(-50%, -50%);
    animation: spin 22s linear infinite
}

.team-orbit span {
    position: absolute;
    width: .8rem;
    aspect-ratio: 1;
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 50%;
    box-shadow: 0 0 0 1px var(--paper)
}

.team-orbit span:nth-of-type(1) {
    left: 48%;
    top: -.4rem
}

.team-orbit span:nth-of-type(2) {
    right: 8%;
    top: 18%
}

.team-orbit span:nth-of-type(3) {
    right: -.3rem;
    top: 58%
}

.team-orbit span:nth-of-type(4) {
    right: 22%;
    bottom: 3%
}

.team-orbit span:nth-of-type(5) {
    left: 18%;
    bottom: 6%
}

.team-orbit span:nth-of-type(6) {
    left: -.35rem;
    top: 45%
}

.team-orbit span:nth-of-type(7) {
    left: 17%;
    top: 7%
}

.team-roles {
    grid-column: 1/-1;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-top: 1px solid rgba(255, 255, 255, .55);
    border-left: 1px solid rgba(255, 255, 255, .55)
}

.team-roles span {
    padding: .8rem .55rem;
    border-right: 1px solid rgba(255, 255, 255, .55);
    border-bottom: 1px solid rgba(255, 255, 255, .55);
    font: .5rem var(--mono);
    text-align: center;
    text-transform: uppercase
}

@media(max-width:1000px) {
    .join-team {
        grid-template-columns: 1fr auto
    }

    .join-team p {
        grid-column: 1
    }
}

@media(max-width:640px) {
    .team-head {
        padding: 7rem 1.2rem 2rem
    }

    .team-head>.page-breadcrumbs {
        margin-bottom: 3rem
    }

    .team-head__grid {
        grid-template-columns: 1fr;
        gap: 3rem
    }

    .team-head h1 {
        font-size: clamp(3.8rem, 15vw, 5.2rem)
    }

    .join-team {
        grid-template-columns: 1fr;
        padding: 3.5rem 1.2rem
    }

    .join-team p {
        grid-column: auto
    }

    .team-button {
        width: max-content
    }
}

@media(max-width:900px) {
    .team-ethos {
        grid-template-columns: 1fr minmax(15rem, 34vw)
    }

    .team-ethos__copy {
        grid-column: 1
    }

    .team-ethos__copy p {
        margin-left: 0
    }

    .team-orbit {
        grid-column: 2;
        width: min(30vw, 18rem)
    }

    .team-roles {
        grid-template-columns: repeat(4, 1fr)
    }
}

@media(max-width:640px) {
    .team-ethos {
        min-height: 42rem;
        padding: 1.5rem 1.2rem 2rem;
        display: flex;
        flex-direction: column;
        gap: 2rem
    }

    .team-ethos__label {
        order: 0
    }

    .team-ethos__copy {
        order: 1
    }

    .team-ethos__copy h2 {
        font-size: clamp(3.5rem, 15vw, 5rem)
    }

    .team-ethos__copy p {
        margin-top: 2rem
    }

    .team-orbit {
        order: 2;
        width: 10rem;
        margin: 1rem auto
    }

    .team-orbit i {
        font-size: 3rem
    }

    .team-roles {
        order: 3;
        grid-template-columns: repeat(2, 1fr)
    }
}

/* Compact team directory with supporting portraits. */
.team-section {
    padding: clamp(3rem, 5vw, 5rem) clamp(1.2rem, 4vw, 4rem);
    border-bottom: 1px solid #d5ccbd;
    scroll-margin-top: 6rem;
}

.team-section__head {
    max-width: 1180px;
    margin: 0 auto 2rem;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 3rem;
    align-items: end;
}

.team-section__label {
    display: block;
    margin-bottom: 1.2rem;
    font: 500 .65rem var(--mono);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.team-section__label::before {
    content: "";
    display: inline-block;
    width: .6rem;
    height: .6rem;
    margin-right: .65rem;
    background: var(--orange);
}

.team-section__head h2 {
    max-width: 16ch;
    margin: 0;
    font-size: clamp(2rem, 3.4vw, 3.3rem);
    line-height: 1;
    letter-spacing: -.065em;
}

.team-section__head h2 em {
    color: var(--orange);
    font-style: normal;
}

.team-section__head>p {
    max-width: 38rem;
    margin: 0;
    font: .8rem/1.8 var(--mono);
}

.team-grid {
    max-width: 1180px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
}

.team-page .person {
    min-width: 0;
    display: grid;
    grid-template-columns: 5rem minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 1.25rem;
    padding: 1.25rem;
    background: #fffdf7;
    border: 1px solid #d5ccbd;
}

.team-page .person:hover {
    background: #fffdf7;
}

.person__image {
    grid-column: 1;
    grid-row: 1 / 4;
    align-self: start;
    width: 5rem;
    margin: 0;
    overflow: hidden;
    background: var(--cream);
}

.person__image img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    object-position: center 25%;
}

.person h3 {
    grid-column: 2;
    margin: 0 0 .4rem;
    font-size: clamp(1.35rem, 1.8vw, 1.7rem);
    line-height: 1.15;
    letter-spacing: -.04em;
}

.person__role {
    grid-column: 2;
    margin: 0;
    color: var(--orange);
    font: 500 .7rem/1.6 var(--mono);
}

.person__education {
    grid-column: 2;
    margin: .6rem 0 0;
    color: #625b50;
    font: .65rem/1.7 var(--mono);
}

.person details {
    grid-column: 1 / -1;
    margin-top: 1rem;
    border-top: 1px solid #ded6c9;
}

.person summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .7rem .25rem;
    cursor: pointer;
    list-style: none;
    font: 500 .68rem var(--mono);
}

.person summary::-webkit-details-marker {
    display: none;
}

.person summary span:last-child {
    position: relative;
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    font-size: 0;
    transition: transform .2s;
}

.person summary span:last-child::before,
.person summary span:last-child::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: currentColor;
    transform: translate(-50%, -50%);
}

.person summary span:last-child::before {
    width: .9rem;
    height: 1.5px;
}

.person summary span:last-child::after {
    width: 1.5px;
    height: .9rem;
}

.person details[open] summary span:last-child {
    transform: rotate(45deg);
}

.person__bio {
    padding: .75rem .25rem .25rem;
}

.person__bio p {
    margin: 0;
    font: .9rem/1.75 var(--sans);
}

.person__bio p+p {
    margin-top: .85rem;
}

.team-section--advisors {
    background: var(--cream);
}

@media (max-width: 900px) {
    .team-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .team-section__head {
        gap: 2rem;
    }
}

@media (max-width: 760px) {
    .team-section__head {
        grid-template-columns: 1fr;
        margin-bottom: 2rem;
        gap: 1.25rem;
    }

    .team-section__head h2 {
        font-size: clamp(2rem, 7vw, 2.7rem);
    }

    .team-grid {
        grid-template-columns: 1fr;
    }

    .team-page .person {
        grid-template-columns: 4rem minmax(0, 1fr);
        column-gap: 1rem;
        padding: 1rem;
    }

    .person__image {
        width: 4rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .person summary span:last-child {
        transition: none;
    }
}

/* School ethos */
.team-ethos {
    position: relative;
    min-height: 68vh;
    padding: clamp(5rem, 9vw, 9rem) clamp(1.4rem, 5vw, 5rem);
    display: flex;
    align-items: center;
    overflow: hidden;
    color: var(--paper);
    background: var(--ink);
    border-bottom: 1px solid var(--ink);
}

.team-ethos__copy {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(18rem, .75fr);
    gap: clamp(3rem, 9vw, 9rem);
    align-items: end;
}

.team-ethos__copy h2 {
    max-width: 9ch;
    margin: 0;
    font-size: clamp(4rem, 8vw, 8.5rem);
    line-height: .86;
    letter-spacing: -.078em;
}

.team-ethos__copy h2 em {
    color: var(--yellow);
    font-style: normal;
}

.team-ethos__copy p {
    max-width: 32rem;
    margin: 0 0 .5rem;
    font: clamp(.75rem, 1vw, .85rem)/1.8 var(--mono);
}


/* Tablet */
@media (max-width: 900px) {
    .team-ethos {
        min-height: auto;
        padding: 6rem 1.4rem;
    }

    .team-ethos__copy {
        grid-template-columns: minmax(0, 1fr) minmax(15rem, .65fr);
        gap: 3rem;
    }

    .team-ethos__copy h2 {
        font-size: clamp(3.8rem, 8vw, 6.5rem);
    }
}


/* Mobile */
@media (max-width: 640px) {
    .team-ethos {
        min-height: auto;
        padding: 5rem 1.2rem 5.5rem;
    }

    .team-ethos__copy {
        display: block;
    }

    .team-ethos__copy h2 {
        max-width: 8ch;
        font-size: clamp(3.5rem, 15vw, 5rem);
    }

    .team-ethos__copy p {
        max-width: 34rem;
        margin: 2.5rem 0 0;
        font-size: .72rem;
        line-height: 1.8;
    }
}