/* Команда — прототип design/site-2026-10/team.html. Подключается через pageCss: team.css. */
.tm-top{position:relative;padding:64px 0 20px;overflow:hidden}
.tm-top::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 36% 100% at 55% 0%,rgba(124,58,237,.26),transparent);pointer-events:none}
.tm-top .wrap{position:relative}
.tm-top .d1{margin-top:12px}
.tm-top p{margin:16px 0 0;max-width:560px;color:#A9A4BC;font-size:18px}

.tm-people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:40px}
.tm-person{display:grid;grid-template-columns:180px minmax(0,1fr);overflow:hidden;scroll-margin-top:90px}
.tm-person:target{box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px rgba(167,139,250,.55)}
.tm-ph{position:relative;min-height:240px}
.tm-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.9)}
.tm-ph::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 55%,var(--p1)),linear-gradient(0deg,rgba(124,58,237,.25),transparent 50%)}
/* порядок в разметке: имя → роль (как до миграции); на экране роль-метка над именем, как в прототипе */
.tm-tx{display:flex;flex-direction:column;align-items:flex-start;padding:28px;min-width:0}
.tm-role{order:-1}
.tm-tx h2{margin:10px 0 4px;font-size:24px;font-weight:700;letter-spacing:-.03em}
.tm-tx p{margin:14px 0 0;color:var(--ink2)}
.tm-links{display:flex;gap:8px;margin-top:18px}
.tm-ico{width:38px;padding:0}
.tm-ico svg{width:17px;height:17px}

.tm-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
.tm-fact{padding:22px;min-width:0}
.tm-fact b{display:block;font-size:32px;font-weight:700;letter-spacing:-.04em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}

.tm-reach{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.tm-reach a{padding:20px;min-width:0}
.tm-reach b{display:block;margin-top:4px;overflow-wrap:anywhere}

@media (max-width:960px){
 .tm-top::before{background:radial-gradient(ellipse 80% 100% at 50% 0%,rgba(124,58,237,.26),transparent)}
 .tm-top{padding-top:44px}
 .tm-top p{font-size:16px}
 .tm-people{grid-template-columns:minmax(0,1fr)}
 .tm-person{grid-template-columns:120px minmax(0,1fr)}
 .tm-ph{min-height:200px}
 .tm-tx{padding:20px}
 .tm-tx h2{font-size:21px}
 .tm-fact{padding:14px}
 .tm-fact b{font-size:22px}
 .tm-reach{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* телефон: фото — круглый аватар рядом с именем, биография на всю ширину (узкая полоса фото резала лицо) */
@media (max-width:560px){
 .tm-person{grid-template-columns:72px minmax(0,1fr);column-gap:14px;padding:20px 18px}
 .tm-ph{grid-column:1;grid-row:1/3;align-self:center;width:72px;height:72px;min-height:0;border-radius:50%;overflow:hidden;box-shadow:0 0 0 1px var(--line2)}
 .tm-ph::after{display:none}
 .tm-tx{display:contents}
 .tm-role{grid-column:2;grid-row:1;align-self:end;justify-self:start}
 .tm-tx h2{grid-column:2;grid-row:2;align-self:start;margin:8px 0 0;font-size:20px}
 .tm-tx p{grid-column:1/-1;grid-row:3;margin-top:16px;font-size:15px}
 .tm-links{grid-column:1/-1;grid-row:4;margin-top:16px}
 .tm-fact{padding:12px}
 .tm-fact b{font-size:19px}
 .tm-fact .mono{display:block;font-size:11px}
 .tm-reach{grid-template-columns:minmax(0,1fr);gap:8px}
 .tm-reach a{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px}
 .tm-reach b{margin-top:0;text-align:right}
}