/* ==========================================================================
   Team page — 2026 cinematic-dark rebuild.
   Matches /frontend/index.html .home-team / hero / positioning patterns.
   Tokens in /css/base/variables.css.
   ========================================================================== */

.team-page {
    background: var(--ink);
    color: var(--on-black);
    font-family: var(--font-body);
}

/* ==========================================================================
   .has-video shell — duplicated from home.css so team.html stays self-contained
   without pulling 3,700 lines of home page CSS.
   ========================================================================== */

.has-video {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.section-bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    pointer-events: none;
    background: var(--ink);
    filter: contrast(1.05) saturate(0.92);
}

.section-bg-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(
            to bottom,
            rgba(10, 10, 10, 0.55) 0%,
            rgba(10, 10, 10, 0.72) 50%,
            rgba(10, 10, 10, 0.88) 100%
        );
}

.has-video > *:not(.section-bg-video):not(.section-bg-overlay) {
    position: relative;
    z-index: 2;
}

@media (max-width: 768px) {
    .section-bg-video { display: none; }
    .section-bg-overlay { background: var(--ink); }
}

@media (prefers-reduced-data: reduce) {
    .section-bg-video { display: none; }
}

/* ==========================================================================
   HERO — atmospheric video, italic Fraunces statement
   ========================================================================== */

.team-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--ink);
    padding: 168px 0 144px;
    min-height: 88vh;
    display: flex;
    align-items: center;
}

/* Scoped overlay: chair sits on the LEFT of the frame, text goes on the RIGHT.
   Gradient is opaque on the right (text side), transparent on the left (chair
   side) so the chair reads cleanly while the lede stays legible. */
.team-hero .section-bg-overlay {
    background:
        linear-gradient(
            -108deg,
            rgba(10, 10, 10, 0.95) 0%,
            rgba(10, 10, 10, 0.85) 28%,
            rgba(10, 10, 10, 0.42) 55%,
            rgba(10, 10, 10, 0.14) 78%,
            transparent 94%
        ),
        linear-gradient(
            to bottom,
            rgba(10, 10, 10, 0.30) 0%,
            transparent 30%,
            transparent 70%,
            rgba(10, 10, 10, 0.55) 100%
        );
}

.team-hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px 112px;
    /* Bottom anchor (alignment direction set by modifier classes) */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    min-height: 88vh;
}

/* Right-anchored hero text panel so the chair shows on the left side
   of the video frame, unobscured (mirrors careers-hero__inner--right). */
.team-hero__inner--right {
    max-width: 680px;
    margin-left: auto;
    margin-right: 0;
    align-items: flex-start;
}

.team-hero__inner--right .team-hero__headline,
.team-hero__inner--right .team-hero__lede {
    max-width: 100%;
}

/* Anchor video so the chair (subject) sits in the left third of the frame */
.team-hero .section-bg-video {
    object-position: 30% center;
}

.team-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font: 500 11px/1 var(--font-mono);
    color: var(--red);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0 0 28px;
}

.team-hero__eyebrow .rule {
    display: inline-block;
    width: 32px;
    height: 1px;
    background: var(--red);
    opacity: 0.85;
}

.team-hero__headline {
    font: 400 clamp(3rem, 7vw, 6rem)/0.98 var(--font-display);
    letter-spacing: -0.025em;
    color: var(--on-black);
    margin: 0 0 32px;
    max-width: 22ch;
}

.team-hero__headline em {
    font-style: italic;
    font-weight: 400;
    color: color-mix(in oklab, var(--red) 78%, var(--on-black));
}

.team-hero__lede {
    font: 400 clamp(1rem, 1.2vw, 1.125rem)/1.65 var(--font-body);
    color: var(--on-black-mute);
    margin: 0;
    max-width: 60ch;
}

/* ==========================================================================
   ROSTER — grid of operator cards
   ========================================================================== */

.team-roster {
    background: var(--ink);
    padding: 144px 0 160px;
    color: var(--on-black);
    position: relative;
    overflow: hidden;
}

.team-roster::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(
            ellipse 50% 60% at 80% 30%,
            rgba(200, 16, 46, 0.06) 0%,
            transparent 65%
        );
}

.team-roster__inner {
    position: relative;
    z-index: 1;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
}

.team-roster__header {
    margin: 0 0 80px;
    max-width: 760px;
}

.team-roster__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font: 500 11px/1 var(--font-mono);
    color: var(--red);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin: 0 0 24px;
}

.team-roster__eyebrow .rule {
    display: inline-block;
    width: 32px;
    height: 1px;
    background: var(--red);
    opacity: 0.85;
}

.team-roster__headline {
    font: 400 clamp(1.75rem, 3vw, 2.5rem)/1.1 var(--font-display);
    letter-spacing: -0.02em;
    color: var(--on-black);
    margin: 0;
    max-width: 22ch;
}

.team-roster__headline em {
    font-style: italic;
    font-weight: 400;
    color: color-mix(in oklab, var(--red) 65%, var(--on-black));
}

/* ----- States ----- */

.team-roster__loading {
    margin: 0;
    font: 500 11px/1.5 var(--font-mono);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--on-black-mute);
    padding: 32px 0;
}

.team-roster__empty {
    margin: 0;
    padding: 48px 0;
    border-top: 1px solid rgba(245, 241, 232, 0.10);
}

.team-roster__empty p {
    margin: 0;
    font: 400 clamp(1.125rem, 1.6vw, 1.375rem)/1.55 var(--font-display);
    font-style: italic;
    color: var(--on-black);
    max-width: 56ch;
}

.team-roster__empty-link {
    display: inline-block;
    margin-top: 24px;
    font: 500 11px/1 var(--font-mono);
    font-style: normal;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--red);
    text-decoration: none;
    border-bottom: 1px solid rgba(200, 16, 46, 0.4);
    padding-bottom: 4px;
    transition: border-color 240ms ease-out, color 240ms ease-out;
}

.team-roster__empty-link:hover,
.team-roster__empty-link:focus-visible {
    border-bottom-color: var(--red);
    color: color-mix(in oklab, var(--red) 80%, var(--on-black));
    outline: none;
}

/* ----- Grid — editorial tile treatment ----- */

.team-roster__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1px;
    background: rgba(245, 241, 232, 0.08); /* grid lines as background */
    list-style: none;
    margin: 0;
    padding: 0;
    align-items: stretch;
}

/* ----- Card ----- */

.team-card {
    background: var(--ink);
    padding: 48px 36px 40px;
    position: relative;
    transition: background 500ms ease-out;
    overflow: hidden;
    /* Flex column so cards on the same row share equal heights and
       the meta block flows naturally beneath the portrait. */
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 0;
    margin: 0;
    gap: 0;
}

.team-card::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 36px;
    right: 36px;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent,
        rgba(200, 16, 46, 0),
        transparent
    );
    transition: background 500ms ease-out;
}

.team-card:hover {
    background: rgba(200, 16, 46, 0.03);
}

.team-card:hover::before {
    background: linear-gradient(
        to right,
        transparent,
        rgba(200, 16, 46, 0.55) 50%,
        transparent
    );
}

/* Uniform rectangular portraits — 4:5 frame on a flat slate background.
   Same dimensions, same grey, same grayscale treatment for every member
   so the roster reads as one set regardless of source photo quality.
   Photo fills the card width so the editorial tile reads as a single block. */
.team-card__photo {
    width: 100%;
    max-width: 100%;
    aspect-ratio: 4 / 5;
    height: auto;
    border-radius: 4px;
    overflow: hidden;
    margin: 0 0 24px;
    border: 1px solid rgba(245, 241, 232, 0.10);
    transition: border-color 500ms ease-out;
    position: static;
    background: #1a1a1a;
    box-shadow: none;
}

.team-card:hover .team-card__photo {
    border-color: rgba(200, 16, 46, 0.40);
}

.team-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    filter: grayscale(1) contrast(1.04) brightness(0.96);
    transition: filter 500ms ease-out;
    display: block;
}

.team-card:hover .team-card__photo img {
    filter: grayscale(0.55) contrast(1.06) brightness(1);
}

.team-card__photo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1a1a1a;
}

.team-card__photo-placeholder::after {
    content: "—";
    font-family: var(--font-display);
    font-style: italic;
    color: rgba(200, 16, 46, 0.5);
    font-size: 1.5rem;
}

.team-card__meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* fill remaining card height so equal-height cards align cleanly */
    flex: 1 1 auto;
    /* reset old padding-top / border-top from polish pass */
    padding-top: 0;
    border-top: 0;
    position: static;
}

.team-card__name {
    font: 400 clamp(1.25rem, 1.8vw, 1.5rem)/1.15 var(--font-display);
    font-style: italic;
    letter-spacing: -0.015em;
    color: var(--on-black);
    margin: 0 0 10px;
}

.team-card__role {
    font: 500 var(--text-xs)/1 var(--font-mono);
    letter-spacing: 0.18em;
    color: var(--red);
    margin: 0 0 8px;
    text-transform: uppercase;
}

.team-card__tenure {
    font: 400 var(--text-xs)/1 var(--font-mono);
    letter-spacing: 0.14em;
    color: var(--on-black-mute);
    text-transform: uppercase;
    margin: 0;
}

/* Empty state */
.team-roster__empty {
    text-align: center;
    padding: 80px 32px;
    font: 400 var(--text-lg)/1.6 var(--font-display);
    font-style: italic;
    color: var(--on-black-mute);
}

.team-roster__empty-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
    font: 500 var(--text-xs)/1 var(--font-mono);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--red);
    text-decoration: none;
    transition: gap 300ms ease;
}

.team-roster__empty-link:hover { gap: 14px; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1024px) {
    .team-hero { padding: 128px 0 112px; min-height: 70vh; }
    .team-roster { padding: 112px 0 128px; }
    .team-roster__header { margin-bottom: 64px; }
    .team-roster__grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    }
}

@media (max-width: 768px) {
    /* Video hidden on mobile — drop the right-anchor so text reads full width */
    .team-hero__inner--right {
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

@media (max-width: 640px) {
    .team-hero { padding: 96px 0 80px; min-height: 60vh; }
    .team-hero__inner { padding: 0 20px 64px; }

    .team-roster { padding: 88px 0 104px; }
    .team-roster__inner { padding: 0 20px; }
    .team-roster__header { margin-bottom: 48px; }
    .team-roster__grid {
        grid-template-columns: 1fr;
    }
    .team-card {
        padding: 36px 24px 32px;
    }
    .team-card::before {
        left: 24px;
        right: 24px;
    }
}

/* ==========================================================================
   POLISH PASS — editorial grid card refinements
   - background wash on hover (red tint)
   - bottom border glow line animates on hover
   - photo border pulses red
   - role letter-spacing settles on hover
   ========================================================================== */

.team-card {
    cursor: default;
}

/* role letter-spacing settle */
.team-card__role {
    transition: letter-spacing 500ms ease;
}

.team-card:hover .team-card__role,
.team-card:focus-within .team-card__role {
    letter-spacing: 0.22em;
}

@media (prefers-reduced-motion: reduce) {
    .team-card,
    .team-card::before,
    .team-card__photo,
    .team-card__photo img,
    .team-card__role {
        transition: none;
    }
}

/* ==========================================================================
   Static roster additions — bio text, email link, founder card
   ========================================================================== */

.team-card__bio {
    font-family: var(--font-body);
    font-size: 0.875rem;
    line-height: 1.65;
    color: var(--on-black-mute, rgba(245,241,232,0.62));
    margin: 10px 0 0;
    max-width: 42ch;
}

.team-card__email,
.team-card__site {
    display: inline-block;
    margin-top: 14px;
    margin-right: 16px;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 400ms ease, border-color 400ms ease;
    word-break: break-word;
}

.team-card__email {
    color: var(--red, #c8102e);
}

.team-card__email:hover,
.team-card__email:focus-visible {
    border-bottom-color: var(--red, #c8102e);
}

.team-card__site {
    color: rgba(245, 241, 232, 0.45);
}

.team-card__site:hover,
.team-card__site:focus-visible {
    color: var(--on-black, #f5f1e8);
    border-bottom-color: rgba(245, 241, 232, 0.35);
}

/* ----- Founder card — full-width row with 2-column desktop layout.
   Photo capped on the left; meta column on the right reads as a real bio. */
.team-card--founder {
    grid-column: 1 / -1;
}

@media (min-width: 768px) {
    .team-card--founder {
        display: grid;
        grid-template-columns: minmax(240px, 280px) 1fr;
        gap: 48px;
        align-items: start;
        padding: 56px 48px 48px;
    }

    .team-card--founder .team-card__photo {
        width: 100%;
        max-width: 280px;
        height: auto;
        aspect-ratio: 4 / 5;
        margin: 0;
    }

    .team-card--founder .team-card__meta {
        padding-top: 4px;
    }

    .team-card--founder .team-card__bio {
        max-width: 60ch;
    }
}