/*
 * Team pages — index and guide profile.
 *
 * Same palette and rhythm as the redesigned About page (ab-*): almost
 * monochrome, orange reserved for the one thing you are meant to click.
 *   #FF6A00 orange · #111214 ink · #EDE3D5 milk
 *
 * Headlines are set in Jost — already a house font (public/fonts/oc, declared
 * for the rest of the site in oc.css, which this page does not load). One
 * weight, self-hosted, swap: the page never waits on it, and body copy stays
 * Roboto like everywhere else.
 */

@font-face {
    font-family: 'TeamDisplay';
    src: url('/fonts/oc/Jost-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --tm-orange: #FF6A00;
    /* Brand orange is 2.9:1 on milk. Small text and hairlines use this deeper
       tone (>= 4.5:1 on milk, paper and white); #FF6A00 stays for the button.
       Same split the About page makes. */
    --tm-orange-text: #AE4600;
    --tm-ink: #111214;
    --tm-milk: #EDE3D5;
    --tm-paper: #FAF7F2;
    --tm-body: #33353a;
    --tm-muted: #6a6a6a;
    --tm-line: rgba(17, 18, 20, .12);
    --tm-hair: rgba(17, 18, 20, .16);

    --tm-display: 'TeamDisplay', 'Jost-Bold', Roboto, Arial, sans-serif;

    /* One spacing scale for every band on both pages, so the page has a rhythm
       instead of thirteen hand-picked paddings. --tight is for two sections
       that belong to the same column of text (biography + what he leads). */
    --tm-gap-section: clamp(52px, 5.6vw, 80px);
    --tm-gap-tight: clamp(32px, 3.4vw, 48px);
}

/* Visually hidden, still read out and still crawled. */
.tm-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- shared -------------------------------------------------- */

.tm-eyebrow {
    display: block;
    margin: 0 0 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--tm-orange-text);
}

/* The micro-label used for anything that annotates a value: the rail's units,
   a reviewer's tour and year. One style, so the page reads as one system. */
.tm-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .13em;
    line-height: 1.45;
    text-transform: uppercase;
    color: var(--tm-muted);
}

.tm-section__title {
    margin: 0 0 14px;
    font-family: var(--tm-display);
    font-size: clamp(25px, 3.2vw, 40px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.01em;
    color: var(--tm-ink);
}

.tm-section__lede {
    margin: 0 0 34px;
    max-width: 62ch;
    font-size: 15px;
    line-height: 1.7;
    color: var(--tm-muted);
}

.tm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 14px 30px;
    border: 0;
    border-radius: 2px;
    background: var(--tm-orange);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}

.tm-btn:hover { background: #e65f00; color: #fff; text-decoration: none; }
.tm-btn:active { transform: translateY(1px); }

:is(.tm-btn, .tm-card__link, .tm-cats__row, .tm-map__country, .tm-back):focus-visible {
    outline: 2px solid var(--tm-orange);
    outline-offset: 3px;
}

/* ---------- index --------------------------------------------------- */

.tm-hero {
    padding: 118px 24px var(--tm-gap-tight);
    background: var(--tm-milk);
}

.tm-hero__inner { max-width: 1140px; margin: 0 auto; }

.tm-hero__title {
    margin: 0 0 16px;
    font-family: var(--tm-display);
    font-size: clamp(32px, 5vw, 58px);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: -.015em;
    text-transform: uppercase;
    color: var(--tm-ink);
}

.tm-hero__lede {
    margin: 0;
    max-width: 56ch;
    font-size: 17px;
    line-height: 1.65;
    color: var(--tm-muted);
}

.tm-grid-section { padding: var(--tm-gap-tight) 24px var(--tm-gap-section); }

.tm-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px 24px;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.tm-card { margin: 0; }

.tm-card__link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.tm-card__frame {
    position: relative;
    aspect-ratio: 3 / 4;
    margin-bottom: 18px;
    overflow: hidden;
    border-radius: 3px;
    background: #cfc7bc;
}

.tm-card__photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.tm-card__link:not(.tm-card__link--static):hover .tm-card__photo { transform: scale(1.04); }
.tm-card__link:not(.tm-card__link--static):hover .tm-card__name { color: var(--tm-orange); }

.tm-card__name {
    margin: 0 0 4px;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
    color: var(--tm-ink);
    transition: color .2s ease;
}

.tm-card__role {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tm-orange);
}

.tm-card__desc {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--tm-muted);
}

/* ---------- profile hero -------------------------------------------- */

/* Milk, like every other hero on the site. The top padding clears the pinned
   header, which is fixed and therefore out of flow. */
.tm-profile-hero {
    padding: 124px 24px var(--tm-gap-tight);
    background: var(--tm-milk);
    color: var(--tm-ink);
}

.tm-profile-hero__inner { max-width: 1140px; margin: 0 auto; }

.tm-profile-hero__eyebrow { margin: 18px 0 22px; }

.tm-profile-hero__main {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 52px;
    /* Both columns sit on the rail: whichever is taller sets the height, the
       other is pushed down to share the same baseline. */
    align-items: end;
    padding-bottom: 42px;
}

.tm-profile-hero__main--nophoto { grid-template-columns: 1fr; }

/* The portrait as a mounted print: a white mount on the milk field. The mount
   is what makes a 256px file look deliberate instead of undersized, and it
   holds a constant square whatever shape the member's photo happens to be. */
.tm-plate {
    margin: 0;
    padding: 10px;
    border: 1px solid var(--tm-line);
    background: #fff;
}

.tm-plate__photo {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    /* Faces sit above centre in almost every one of these shots. */
    object-position: 50% 22%;
}

.tm-profile-hero__name {
    margin: 0 0 20px;
    font-family: var(--tm-display);
    font-size: clamp(40px, 7.2vw, 86px);
    font-weight: 700;
    line-height: .94;
    letter-spacing: -.015em;
    text-transform: uppercase;
    color: var(--tm-milk);
}

.tm-profile-hero__lede {
    margin: 0 0 24px;
    max-width: 46ch;
    font-size: clamp(17px, 1.5vw, 20px);
    line-height: 1.55;
    color: var(--tm-body);
}

.tm-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px 28px;
}

/* Specializations read as one line of running text rather than a row of pills:
   quieter, and it keeps the hero's only enclosed shape the portrait. */
.tm-tags {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    line-height: 1.5;
    color: var(--tm-muted);
}

.tm-tag + .tm-tag::before {
    content: '·';
    margin: 0 9px;
    color: rgba(17, 18, 20, .28);
}

.tm-langs { margin: 0; font-size: 14px; line-height: 1.5; }

.tm-langs__label {
    margin-right: 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--tm-muted);
}

.tm-langs__list { color: var(--tm-ink); }

.tm-back {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    color: var(--tm-muted);
    text-decoration: none;
    transition: color .2s ease;
}

.tm-back:hover { color: var(--tm-orange-text); text-decoration: none; }

/* ---------- the experience rail -------------------------------------- */

/* The five numbers as one instrument strip along the bottom edge of the hero,
   hairline-divided, the portrait plate resting on its top rule. This is the
   whole of what the old full-width "in Zahlen" band used to say. */
.tm-rail {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    margin: 0;
    border-top: 1px solid var(--tm-hair);
}

.tm-rail__cell {
    padding: 22px 22px 0;
    border-left: 1px solid var(--tm-hair);
}

.tm-rail__cell:first-child { padding-left: 0; border-left: 0; }

.tm-rail__value {
    margin: 0 0 10px;
    font-family: var(--tm-display);
    /* Tabular figures so the row of numbers reads as one instrument. */
    font-variant-numeric: tabular-nums;
    font-size: clamp(26px, 3.1vw, 42px);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
    color: var(--tm-ink);
}

.tm-rail__label { margin: 0; }

/* One page-load beat, staggered by --d. Everything else on the page stays
   still; the hero is the only place worth animating. */
@keyframes tm-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

.tm-profile-hero [data-rise] {
    animation: tm-rise .6s cubic-bezier(.22, .61, .36, 1) both;
    animation-delay: calc(var(--d, 0) * 70ms);
}

/* ---------- bio ------------------------------------------------------ */

.tm-bio { padding: var(--tm-gap-section) 24px var(--tm-gap-tight); }
.tm-bio__inner { max-width: 760px; margin: 0 auto; }

.tm-bio__body {
    font-size: 17px;
    line-height: 1.75;
    color: #2c2e33;
}

.tm-bio__body p { margin: 0 0 1.2em; }
.tm-bio__body p:last-child { margin-bottom: 0; }

/* A lead-in: the opening paragraph of a biography is the one that decides
   whether the rest gets read. */
.tm-bio__body > p:first-child {
    font-size: 20px;
    line-height: 1.62;
    color: #1b1d21;
}

/* ---------- categories ----------------------------------------------- */

/* Full padding by default — a member with no biography must not have this
   section land straight under the hero. When the biography is there the two
   share one column of text, so the gap between them closes to --tight. */
.tm-cats { padding: var(--tm-gap-section) 24px var(--tm-gap-section); }
.tm-bio + .tm-cats { padding-top: 0; }
.tm-cats__inner { max-width: 760px; margin: 0 auto; }

.tm-cats__list { border-top: 1px solid var(--tm-line); }

.tm-cats__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0;
    border-bottom: 1px solid var(--tm-line);
    color: var(--tm-ink);
    text-decoration: none;
    transition: padding-left .18s ease;
}

.tm-cats__row:hover { padding-left: 8px; text-decoration: none; }
.tm-cats__row:hover .tm-cats__name { color: var(--tm-orange); }

.tm-cats__name {
    font-size: 17px;
    font-weight: 600;
    transition: color .18s ease;
}

.tm-cats__arrow { color: var(--tm-orange); flex-shrink: 0; }

/* ---------- map ------------------------------------------------------ */

.tm-map { padding: var(--tm-gap-section) 24px; background: var(--tm-milk); }
.tm-map__inner { max-width: 1140px; margin: 0 auto; }
.tm-map__head { max-width: 640px; }

.tm-map__layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 28px;
    align-items: start;
}

.tm-map__canvas-wrap {
    border-radius: 3px;
    overflow: hidden;
    background: #e4dbcd;
}

.tm-map__canvas { width: 100%; height: 520px; }

/* Leaflet paints its own background; keep it in the page palette. */
.tm-map__canvas .leaflet-container { background: #e4dbcd; }

.leaflet-tooltip.tm-map__tip {
    padding: 4px 9px;
    border: 0;
    border-radius: 2px;
    background: var(--tm-ink);
    box-shadow: none;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}

.leaflet-tooltip.tm-map__tip::before { border-top-color: var(--tm-ink); }

.tm-map__list {
    max-height: 520px;
    overflow-y: auto;
    padding-right: 6px;
}

.tm-map__list-title {
    margin: 0 0 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tm-muted);
}

.tm-map__list-title span { color: rgba(17, 18, 20, .38); }

.tm-map__countries { margin: 0; padding: 0; list-style: none; }

.tm-map__country {
    display: block;
    padding: 9px 10px;
    border-radius: 2px;
    color: var(--tm-ink);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

a.tm-map__country:hover,
.tm-map__country.is-active {
    background: rgba(255, 106, 0, .12);
    color: var(--tm-orange);
    text-decoration: none;
}

.tm-map__country--plain { color: var(--tm-muted); cursor: default; }

/* ---------- gallery --------------------------------------------------- */

.tm-gallery { padding: var(--tm-gap-section) 24px; }
.tm-gallery__inner { max-width: 1140px; margin: 0 auto; }

.tm-gallery__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tm-gallery__item { margin: 0; }

.tm-gallery__link {
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 2px;
    background: #cfc7bc;
}

.tm-gallery__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
}

.tm-gallery__link:hover .tm-gallery__img { transform: scale(1.05); }

/* ---------- reviews --------------------------------------------------- */

.tm-reviews { padding: var(--tm-gap-section) 24px; background: var(--tm-paper); }
.tm-reviews__inner { max-width: 1140px; margin: 0 auto; }

/* auto-fit, not a fixed three: most guides have two quotes, and two thirds of a
   row with a hole on the right looked like something failed to load. */
.tm-reviews__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    margin: var(--tm-gap-tight) 0 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--tm-line);
}

/* Column flex with a growing quote, so the attributions line up along the
   bottom however unequal the quotes are. */
.tm-review {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 30px 34px 4px;
    border-left: 1px solid var(--tm-line);
}

.tm-review:first-child { padding-left: 0; border-left: 0; }

.tm-review__rating { display: flex; gap: 3px; color: rgba(17, 18, 20, .16); }
.tm-review__star.is-on { color: var(--tm-orange); }

.tm-review__title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--tm-ink);
}

/* The quote is the whole of the block now that the box is gone, so it gets the
   size the box used to take up. */
.tm-review__quote {
    margin: 0;
    flex: 1;
    font-size: 17px;
    line-height: 1.62;
    color: #2c2e33;
}

.tm-review__quote p { margin: 0; }

.tm-review__by {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

.tm-review__avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    filter: grayscale(1);
}

.tm-review__who { display: block; }
.tm-review__author { display: block; font-size: 14px; font-weight: 700; color: var(--tm-ink); }
.tm-review__place { display: block; margin-top: 3px; }

/* ---------- trust ----------------------------------------------------- */

.tm-trust { padding: var(--tm-gap-section) 24px; background: var(--tm-milk); }
.tm-trust__inner { max-width: 760px; margin: 0 auto; }

.tm-trust__title {
    margin: 0 0 22px;
    font-family: var(--tm-display);
    font-size: clamp(25px, 3.2vw, 40px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.01em;
    color: var(--tm-ink);
}

.tm-trust__body { font-size: 17px; line-height: 1.75; color: #2c2e33; }
.tm-trust__body p { margin: 0 0 1.2em; }
.tm-trust__body p:last-child { margin-bottom: 0; }

/* ---------- cta ------------------------------------------------------- */

.tm-cta { padding: var(--tm-gap-section) 24px; background: var(--tm-ink); text-align: center; }
.tm-cta__inner { max-width: 620px; margin: 0 auto; }

.tm-cta__title {
    margin: 0 0 14px;
    font-family: var(--tm-display);
    font-size: clamp(25px, 3.4vw, 40px);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -.01em;
    color: var(--tm-milk);
}

.tm-cta__text {
    margin: 0 0 30px;
    font-size: 16px;
    line-height: 1.65;
    color: rgba(237, 227, 213, .68);
}

/* ---------- responsive ------------------------------------------------ */

@media (max-width: 1024px) {
    .tm-grid { grid-template-columns: repeat(3, 1fr); }
    .tm-profile-hero__main { grid-template-columns: 220px 1fr; gap: 36px; }
    .tm-rail__cell { padding: 20px 14px 0; }
    .tm-review { padding: 26px 24px 4px; }
    .tm-map__layout { grid-template-columns: 1fr 260px; }
}

@media (max-width: 820px) {
    .tm-profile-hero__main { grid-template-columns: 1fr; gap: 30px; padding-bottom: 34px; }
    .tm-plate { max-width: 220px; }

    /* Same reason as the rail: once the columns stack, a rule to the left of a
       quote points at nothing. Each quote keeps a rule above it instead. */
    .tm-reviews__grid { grid-template-columns: 1fr; border-top: 0; }
    .tm-review,
    .tm-review:first-child {
        padding: 26px 0 0;
        border-left: 0;
        border-top: 1px solid var(--tm-line);
    }

    /* Vertical rules stop working once the row wraps, so the rail becomes a
       stacked spec sheet: every field keeps its own rule above it. */
    .tm-rail { grid-template-columns: repeat(2, 1fr); column-gap: 28px; border-top: 0; }
    .tm-rail__cell,
    .tm-rail__cell:first-child {
        padding: 16px 0 18px;
        border-left: 0;
        border-top: 1px solid var(--tm-hair);
    }
    .tm-rail__value { margin-bottom: 7px; }

    .tm-map__layout { grid-template-columns: 1fr; }
    .tm-map__canvas { height: 56vw; min-height: 260px; max-height: 400px; }
    .tm-map__list { max-height: none; }
    .tm-map__countries {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 2px 12px;
    }
}

@media (max-width: 640px) {
    /* Only the side gutter changes here — the vertical rhythm is the clamp()
       scale in :root and already tightens on its own. */
    .tm-grid-section,
    .tm-bio,
    .tm-cats,
    .tm-map,
    .tm-gallery,
    .tm-reviews,
    .tm-trust,
    .tm-cta { padding-left: 20px; padding-right: 20px; }
    .tm-hero { padding: 132px 20px var(--tm-gap-tight); }
    .tm-grid { grid-template-columns: repeat(2, 1fr); gap: 26px 16px; }
    .tm-gallery__grid { grid-template-columns: repeat(2, 1fr); }
    /* The pinned header stacks into a ~108px column below 768px and is fixed,
       so the hero has to clear more here, not less — the old 48px tucked the
       back link and the top of the portrait underneath it. */
    .tm-profile-hero { padding: 132px 20px var(--tm-gap-tight); }
    .tm-plate { max-width: 180px; }
    .tm-meta { gap: 10px 18px; }
    .tm-bio__body > p:first-child { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
    .tm-card__photo,
    .tm-gallery__img,
    .tm-cats__row,
    .tm-btn { transition: none; }
    .tm-card__link:hover .tm-card__photo,
    .tm-gallery__link:hover .tm-gallery__img { transform: none; }
    .tm-profile-hero [data-rise] { animation: none; }
}