/* Section: team profile. */

.team-profile {
    /* One Figma pixel of the 1352 content box, shrinking with the viewport so
       the offsets that stack the artwork and strips keep their proportions. */
    --u: min(1px, (100vw - 2 * var(--container-pad)) / 1352);

    --eyes-x: 0.426;
    --heading-top: 188;
    --heading-gap: 0;
    --bio-gap: 1rem;
    --name-color: var(--color-accent-02);
    --role-bg: var(--color-accent-02);
    --role-color: var(--color-dark);
    --strip-bg: var(--color-accent-01);
    --sig-w: 262;
    --sig-color: var(--color-white);

    position: relative;
    overflow: clip;
    isolation: isolate;
    background: var(--color-primary);
    color: var(--color-white);
}

.team-profile--light {
    --eyes-x: 0.4238;
    --heading-top: 184;
    --heading-gap: 4;
    --bio-gap: 1.5rem;
    --name-color: var(--color-primary);
    --role-bg: var(--color-primary);
    --role-color: var(--color-white);
    --strip-bg: var(--color-accent-03);
    --sig-w: 163;
    --sig-color: #131635;

    background: var(--color-light);
    color: var(--color-dark);
}

.team-profile__pattern {
    position: absolute;
    top: -270px;
    left: -98px;
    z-index: 0;
    display: block;
    width: 522px;
    height: auto;
    aspect-ratio: 1;
    opacity: 0.65;
    pointer-events: none;
}

.team-profile__grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-rows: auto 1fr;
}

.team-profile--story-left .team-profile__grid {
    grid-template-columns: minmax(0, 361fr) minmax(0, 98fr) minmax(0, 495.5fr) minmax(0, 12fr) minmax(0, 385.5fr);
}

.team-profile--story-centre .team-profile__grid {
    grid-template-columns: minmax(0, 507fr) minmax(0, 66fr) minmax(0, 336fr) minmax(0, 99fr) minmax(0, 344fr);
}

/* Heading */

.team-profile__heading {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: calc(var(--heading-gap) * var(--u));
    margin: calc(var(--heading-top) * var(--u)) 0 0;
    color: inherit;
    font-family: var(--font-display);
    font-weight: var(--fw-bold);
}

.team-profile__lead {
    font-size: calc(56 * var(--u));
    line-height: 1.1429;
}

.team-profile__name {
    color: var(--name-color);
    font-size: calc(80 * var(--u));
    font-style: italic;
    line-height: 1.1;
    white-space: nowrap;
}

/* Eyes photo and role tag, hung from the top edge */

.team-profile__eyes {
    position: absolute;
    top: 0;
    left: calc(var(--gutter) + (100% - 2 * var(--gutter)) * var(--eyes-x));
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(320 * var(--u));
    margin: 0;
}

.team-profile__eyes-frame {
    position: relative;
    display: block;
    overflow: hidden;
    width: 100%;
    aspect-ratio: 2 / 1;
    border-radius: 4px;
}

.team-profile__eyes-img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.35s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.team-profile__eyes-img--hover {
    opacity: 0;
    transform: scale(1.04);
}

.team-profile__eyes.has-hover:hover .team-profile__eyes-img--hover {
    opacity: 1;
    transform: none;
}

.team-profile__role {
    position: relative;
    z-index: 1;
    margin-top: calc(-16 * var(--u));
    padding: calc(12 * var(--u)) calc(10 * var(--u)) calc(4 * var(--u));
    border-radius: 4px;
    background: var(--role-bg);
    color: var(--role-color);
    font-family: "La Belle Aurore", "Segoe Script", cursive;
    font-size: calc(44 * var(--u));
    line-height: calc(40 * var(--u));
    letter-spacing: -0.75px;
    white-space: nowrap;
}

/* Bio */

.team-profile__story {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: var(--bio-gap);
    margin-top: calc(41 * var(--u));
}

.team-profile__bio {
    font-size: max(1rem, calc(18 * var(--u)));
    line-height: var(--lh-copy);
}

.team-profile__bio p {
    margin: 0;
}

.team-profile__bio > * + * {
    margin-top: var(--bio-gap);
}

/* The bold runs set on a taller line, as they do in the frame. */
.team-profile__bio :is(strong, b) {
    font-weight: var(--fw-bold);
    line-height: 1.667;
    letter-spacing: -0.25px;
}

/* The shorter phone bio, when one is set, stands in for the full one. */
.team-profile__bio--mobile {
    display: none;
}

/* Artwork */

.team-profile__art {
    grid-column: 3;
    grid-row: 1 / span 2;
    align-self: end;
    margin-top: calc(360 * var(--u));
}

.team-profile__art img {
    display: block;
    width: 100%;
    height: auto;
}

/* Quote strips, photo and signature */

.team-profile__side {
    grid-column: 5;
    grid-row: 1 / span 2;
    align-self: start;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(56 * var(--u));
    margin-top: calc(356 * var(--u));
}

.team-profile__quote {
    position: relative;
    z-index: 2;
    margin: 0;
}

.team-profile__quote p {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(6 * var(--u));
    margin: 0;
}

.team-profile__strip {
    display: block;
    padding: calc(10 * var(--u));
    background: var(--strip-bg);
    color: var(--color-dark);
    font-family: var(--font-body);
    font-size: calc(24 * var(--u));
    font-weight: var(--fw-bold);
    line-height: calc(32 * var(--u));
    letter-spacing: -0.75px;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}

.team-profile__photo {
    position: relative;
    align-self: flex-end;
    width: calc(311 * var(--u));
    margin: calc(-18 * var(--u)) 0 0;
}

.team-profile__photo-img {
    display: block;
    width: 100%;
    height: auto;
}

/* Tucked over the photo's lower left corner, sized and placed in shares of
   the photo so it tracks it at every width. */
.team-profile__stamp {
    position: absolute;
    top: 81.8%;
    left: -10.6%;
    display: block;
    width: 34.7%;
    height: auto;
}

.team-profile__signature {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(7 * var(--u));
}

.team-profile__signature-img {
    display: block;
    width: calc(var(--sig-w) * var(--u));
    height: auto;
}

.team-profile__signature-name {
    margin: 0;
    color: var(--sig-color);
    font-family: "Freehand", "Segoe Script", cursive;
    font-size: max(1rem, calc(24 * var(--u)));
    line-height: 1.333;
    letter-spacing: -0.75px;
}

/* Story centre: artwork bottom left, bio in the middle, photo on the right */

.team-profile--story-centre .team-profile__story {
    grid-column: 3;
    grid-row: 1 / span 2;
    margin-top: calc(271 * var(--u));
}

.team-profile--story-centre .team-profile__art {
    grid-column: 1;
    grid-row: 2;
    width: 118.9%;
    margin: calc(83 * var(--u)) 0 calc(-22 * var(--u)) -20.5%;
}

.team-profile--story-centre .team-profile__side {
    gap: 0;
    margin-top: calc(147 * var(--u));
}

.team-profile--story-centre .team-profile__signature {
    align-self: flex-end;
    gap: calc(8 * var(--u));
    width: calc(185 * var(--u));
    margin-top: calc(-25 * var(--u));
}

/* Screen by screen: where assets/js/screen-scroll.js steps the page, the
   section opens as a full screen. The grid stretches with it and the extra
   height lands in its 1fr row, so the heading, bio and strips stay hung from
   the top edge and the artwork stays stood on the bottom one. The grid is a
   .container, whose auto margins stop a flex item stretching across, hence
   the width. A floor, not a lock: a short screen gets the section's own
   height and the stepping walks the overrun. */
.has-screen-scroll .team-profile {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100svh;
}

.has-screen-scroll .team-profile__grid {
    flex-grow: 1;
    width: 100%;
}

/* Tablet and phone: one column. The story and side wrappers step aside so
   the artwork or photo can sit between the two halves of the bio. */
@media (max-width: 1024px) {
    .team-profile {
        padding-block: 5rem;
    }

    /* Stepped, every screen lands flush with the section's top edge, which
       the floating header sits over, so the heading starts clear of it. */
    .has-screen-scroll .team-profile {
        padding-top: 7.5rem;
    }

    .team-profile__grid {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        max-width: calc(42rem + 2 * var(--gutter));
    }

    .team-profile__story,
    .team-profile__side {
        display: contents;
    }

    .team-profile__heading,
    .team-profile--story-centre .team-profile__heading {
        order: 1;
        gap: 0;
        margin: 0;
    }

    .team-profile__bio--intro {
        order: 2;
    }

    .team-profile__art,
    .team-profile__photo {
        order: 3;
    }

    .team-profile__bio--more {
        order: 4;
    }

    .team-profile__quote {
        order: 5;
    }

    .team-profile__signature {
        order: 6;
    }

    .team-profile__pattern,
    .team-profile__eyes,
    .team-profile.has-photo .team-profile__art {
        display: none;
    }

    .team-profile__lead {
        font-size: 1.5rem;
        line-height: 1.333;
        letter-spacing: -0.5px;
    }

    .team-profile__name {
        font-size: 2.5rem;
        line-height: 1.2;
        letter-spacing: -0.5px;
        white-space: normal;
    }

    .team-profile__bio {
        font-size: 1rem;
        line-height: 1.5;
    }

    .team-profile__bio :is(strong, b) {
        line-height: inherit;
    }

    .team-profile__art,
    .team-profile--story-centre .team-profile__art {
        align-self: center;
        width: min(100%, 26rem);
        margin: 0;
    }

    /* Nudged right by half the stamp's overhang so photo and stamp centre as
       one. The bottom margin clears the stamp's drop below the photo (42 of
       294 in the frame), so the next block keeps its full gap. */
    .team-profile__photo {
        --photo-w: min(86%, 20rem);

        align-self: center;
        width: var(--photo-w);
        margin: 0 0 calc(var(--photo-w) * 0.143);
        translate: 5.3% 0;
    }

    .team-profile__quote p {
        gap: 4px;
    }

    .team-profile__strip {
        max-width: 100%;
        padding: 10px;
        font-size: 1.125rem;
        line-height: 1.875rem;
        letter-spacing: -0.25px;
        white-space: normal;
    }

    .team-profile__signature,
    .team-profile--story-centre .team-profile__signature {
        align-self: center;
        gap: 0.5rem;
        width: auto;
        margin: 0;
    }

    /* Full size: the phone frames keep the desktop signature. */
    .team-profile__signature-img {
        width: calc(var(--sig-w) * 1px);
        max-width: 100%;
    }

    .team-profile__signature-name {
        font-size: 1.5rem;
    }
}

@media (max-width: 768px) {
    .team-profile__bio--desktop {
        display: none;
    }

    .team-profile__bio--mobile {
        display: block;
    }

    .team-profile__art,
    .team-profile--story-centre .team-profile__art {
        width: min(100%, 20.5rem);
    }

    .team-profile__photo {
        --photo-w: min(86%, 18.375rem);
    }
}