/* Team page.
   The first version was two flat cards in a bordered stack: a title, a bio, an
   email. It read like a directory, and a directory tells a visitor nothing they
   could not get from LinkedIn.

   This version is built around the one thing that is actually interesting, the
   founder's own statement of how he thinks. The layout is a typographic identity
   RAIL on the left (role, affiliation, how to reach them) against a wide reading
   column on the right where the quote leads and the prose follows. One component
   used twice: the founder's block carries an accent wash and a rule, the
   advisor's is the same thing quiet. */

.team-page {
    position: relative;
    padding: 9rem var(--gutter) 6rem;
    background: var(--bg-primary);
    min-height: 80vh;
    overflow: hidden;
}

/* The rotating wallpaper the rest of the site uses, at ambient strength, so this
   page belongs to the same site rather than looking like a bolted-on legal page. */
.team-page > .team-container { position: relative; z-index: 2; }

.team-container { max-width: 1000px; margin: 0 auto; }

/* ── masthead ───────────────────────────────────────────────────────────── */
.team-masthead {
    max-width: 640px;
    margin-bottom: clamp(2.4rem, 5vw, 3.4rem);
    padding-bottom: 1.6rem;
    border-bottom: 1px solid var(--border-subtle);
}

.team-label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--accent-cyan);
    margin: 0 0 14px;
}

.team-masthead h1 {
    font-family: var(--font-display);
    font-size: clamp(2.3rem, 5.5vw, 3.4rem);
    line-height: 1.03;
    letter-spacing: -0.025em;
    color: var(--text-primary);
    margin: 0;
}

/* ── a person ───────────────────────────────────────────────────────────── */
.tm {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: clamp(1.5rem, 4vw, 3rem);
    padding: clamp(1.8rem, 4vw, 2.8rem);
    margin-bottom: 1.1rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-lg);
    background: var(--bg-card);
    transition: border-color 0.3s ease, transform 0.3s var(--spring);
}

.tm:hover { border-color: var(--glass-border); transform: translateY(-2px); }

/* The founder's block leads, so it gets the accent wash and a heavier border.
   Same component, more weight, rather than a second bespoke layout to maintain. */
.tm--lead {
    border-color: rgba(124, 92, 255, 0.28);
    background:
        radial-gradient(90% 140% at 0% 0%, rgba(124, 92, 255, 0.13), transparent 58%),
        radial-gradient(70% 120% at 100% 100%, rgba(45, 226, 198, 0.08), transparent 60%),
        var(--bg-card);
}

/* ── left rail: who, and how to reach them ──────────────────────────────── */
.tm-rail {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    align-items: flex-start;
    padding-top: 0.35rem;
}

/* A thin accent rule replaces the tile as the thing that marks the lead card,
   so the two blocks still read in a hierarchy without a fake avatar. */
.tm--lead .tm-rail {
    border-left: 2px solid var(--accent-violet);
    padding-left: 1rem;
}

/* No initials tile. Two coloured squares reading "TP" and "UT" are a stand-in
   for photographs that do not exist, and a stand-in for a photograph looks less
   professional than simply not having one. The rail is typographic instead, and
   the lead card keeps its hierarchy through the accent wash and border alone. */

.tm-id { display: flex; flex-direction: column; gap: 0.35rem; }

.tm-role {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.17em;
    line-height: 1.6;
    text-transform: uppercase;
    color: var(--accent-cyan);
    text-wrap: balance;
}

.tm-detail {
    color: var(--text-secondary);
    font-size: 0.88rem;
    line-height: 1.45;
}

.tm-contact {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin-top: 0.2rem;
}

/* Pills rather than underlined links: an email address is an action here, not a
   citation, and the mono face keeps a long address from wrapping mid-word. */
.tm-contact a {
    font-family: var(--font-mono);
    font-size: 0.78rem;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, 0.02);
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    word-break: break-all;
}

.tm-contact a:hover {
    color: var(--accent-cyan);
    border-color: rgba(45, 226, 198, 0.45);
    background: rgba(45, 226, 198, 0.06);
}

/* ── right column: the reading ──────────────────────────────────────────── */
.tm-body h2 {
    font-family: var(--font-display);
    font-size: clamp(1.4rem, 2.6vw, 1.85rem);
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--text-primary);
    margin: 0 0 1.2rem;
    text-wrap: balance;
}

/* The quote is the hook, so it is set at display size and given a rule instead
   of quotation marks, which read as decoration at this weight. */
.tm-quote {
    font-family: var(--font-display);
    font-size: clamp(1.15rem, 2.3vw, 1.5rem);
    line-height: 1.36;
    letter-spacing: -0.012em;
    color: var(--text-primary);
    margin: 0 0 1.4rem;
    padding-left: 1.1rem;
    border-left: 2px solid var(--accent-violet);
    text-wrap: balance;
}

.tm:not(.tm--lead) .tm-quote {
    font-size: clamp(1.02rem, 1.8vw, 1.18rem);
    border-left-color: var(--accent-cyan);
}

.tm-body p {
    color: var(--text-secondary);
    font-size: 0.98rem;
    line-height: 1.72;
    margin: 0 0 0.95rem;
    max-width: 62ch;
}

.tm-body p:last-child { margin-bottom: 0; }

/* The human note. Set apart because it is a different register from the rest of
   the page, and losing that distinction would make it read as a product claim. */
.tm-aside {
    margin-top: 1.4rem !important;
    padding-top: 1.2rem;
    border-top: 1px dashed var(--border-subtle);
    color: var(--text-muted) !important;
    font-size: 0.92rem !important;
}

/* ── footer ─────────────────────────────────────────────────────────────── */
.team-footer {
    margin-top: 2.6rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--border-subtle);
}

.team-footer p { color: var(--text-muted); font-size: 0.92rem; margin: 0; }

.team-footer a {
    color: var(--text-secondary);
    text-decoration: none;
    border-bottom: 1px solid var(--border-subtle);
}

.team-footer a:hover { color: var(--accent-cyan); border-bottom-color: var(--accent-cyan); }

/* ── narrow ─────────────────────────────────────────────────────────────── */
@media (max-width: 780px) {
    .team-page { padding: 7rem var(--gutter) 4rem; }

    /* The rail stacks above the reading column rather than sitting beside it,
       so a phone does not get a 220px column of whitespace. */
    .tm { grid-template-columns: 1fr; gap: 1.2rem; }
    .tm-rail { gap: 0.9rem; padding-top: 0; }
    .tm--lead .tm-rail { border-left: 0; padding-left: 0; margin-left: 0; }
    .tm-contact { flex-direction: row; flex-wrap: wrap; margin-top: 0; }
}