/* ============================================================================
   site/team.css — страница «Команда»: имена, лица в клетках, принципы.

   Лица — тот же приём, что «Основатели» в приложении: мозаика ступеней света,
   фотографий на странице нет. Здесь она нарисована canvas-ом (team.js), цвет
   клеток — из палитры сайта (см. site/palette.css), а не зашит здесь.
   ========================================================================== */

/* ── ритм карточки ──
   Раньше здесь стоял один общий gap, и три промежутка подряд выходили почти
   одинаковыми (43 / 30 / 30 px): страница читалась как список из трёх равных
   вещей, а не как «вот они, вот снимок, вот подсказка». Развели: имена стоят
   ВПЛОТНУЮ к снимку, потому что они его подпись, а подсказка отодвинута —
   она про действие, а не про людей. */
.team-card{ display:grid; gap:0 }
.team-names{ margin-bottom:clamp(14px,1.4vw,20px) }
.team-hint{ margin-top:clamp(18px,2vw,28px) }

/* ── имена: дисплейной гарнитурой, как в приложении ──
   Сетка в две колонки, а не space-between: имя обязано стоять НАД своим лицом.
   При разгоне по внешним краям правое имя уезжало примерно на сотню пикселей
   правее своей головы, и подпись переставала быть подписью. */
.team-names{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px;
  align-items:start }
.team-name{ display:grid; gap:2px; justify-items:center; text-align:center }
.team-name b{ font-family:var(--disp); font-weight:700; letter-spacing:0;
  font-size:clamp(15px,2vw,27px); line-height:1.18 }
.team-role{ margin-top:10px; font-size:11.5px; font-weight:700; letter-spacing:.17em;
  text-transform:uppercase; color:var(--muted) }

/* Кто сейчас в кадре. На широком экране в кадре все трое — подсветка не
   срабатывает и имена горят ровно; на узком кадр показывает одного, и тогда
   его имя выделяется, а остальные приглушены. */
.team-name{ transition:opacity .4s var(--e-reveal) }
.team-names:has(.is-on) .team-name{ opacity:.38 }
.team-names .team-name.is-on{ opacity:1 }

/* ── сцена с мозаикой ──
   aspect-ratio держит место до запуска скрипта: страница не прыгает, а без
   JS здесь остаётся тихая рамка, а не дыра со сломанной вёрсткой. Дальше
   пропорции задаёт сам кадр — их ставит team.js, потому что на узком экране
   кадр вертикальный (одно лицо), а на широком горизонтальный (двое).

   --mos-lo / --mos-hi — концы шкалы света, из них team.js строит все шестнадцать
   ступеней. Обе переменные ЗАДАЁТ ПАЛИТРА (site/palette.css): здесь их держать
   нельзя — этот файл грузится после палитры, селектор тот же, и зашитый цвет
   просто перебивал бы её. Мозаика оставалась прежней при любой смене темы. */
.team-shot{ appearance:none; border:0; padding:0; margin:0; display:block;
  width:100%; aspect-ratio:232/96; cursor:pointer; background:none;
  border-radius:18px; position:relative; overflow:hidden;
  transition:transform .3s var(--e-micro), filter .3s var(--e-micro) }
.team-shot:focus-visible{ outline:2px solid var(--gold); outline-offset:6px }
.team-shot canvas{ position:absolute; inset:0; width:100%; height:100% }
/* Снимок — кнопка, и вести себя должен как кнопка: единственным намёком на
   интерактив была подпись 13 px под ним. */
.team-shot:hover{ filter:brightness(1.08) }
.team-shot:active{ transform:scale(.995) }

.team-hint{ text-align:center; color:var(--dim); font-size:13px }
.team-shot:hover + .team-hint{ color:var(--muted) }

/* ── номер принципа ──
   Контурная дисплейная цифра, как анкеры модулей. Контур был нарисован
   rgba(13,26,21,.30) по белой карточке — это ≈2,2:1, и самый крупный элемент
   карточки оказывался самым нечитаемым. Обводим акцентом: он и темнее, и
   привязывает номер к остальной странице. */
.team-n{ display:block; font-size:clamp(30px,2.8vw,44px); line-height:.9;
  margin-bottom:14px; color:var(--acc-d) }
@supports (-webkit-text-stroke:1px red){
  .paper .team-n{ color:transparent; -webkit-text-stroke:1.6px var(--acc-d) }
}

@media (max-width:719px){
  /* Одно лицо на кадр — одна колонка имён. Запасная пропорция рамки тоже
     вертикальная: иначе до первого кадра скрипта место держится широкое и
     страница прыгает. */
  .team-names{ grid-template-columns:1fr; gap:10px }
  .team-name{ justify-items:start; text-align:left }
  .team-shot{ aspect-ratio:72/96 }
  .team-role{ letter-spacing:.09em; font-size:10px }
}

@media (prefers-reduced-motion: reduce){
  .team-name,.team-shot{ transition:none }
}