/* Карточка человека (hero и колода воронки). Общий файл page.html и card.html.
   Токены --serif / --sans задаёт страница. Размеры задаёт контейнер:
   hero — 272×380, радиус 16; колода (.pc-sm) — 184×248, радиус 14 */
/* ---- карточка человека: тот же формат, что аватар в калькуляторе (фото, флаг, имя, номер,
   роль, навыки, базовые поля). Используется в hero и в колоде воронки ---- */
.pc { overflow: hidden; background: #2b2826; color: #fff; isolation: isolate;
  -webkit-user-select: none; user-select: none; }
.pc-photo { position: absolute; inset: 0; background: var(--img) center 18% / cover no-repeat; }
.pc-photo.raised { background-position: center 6%; }
.pc-scan { position: absolute; inset: 0; pointer-events: none; opacity: .16; z-index: 1;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 1px, transparent 1px 3px); }
.pc-top { position: absolute; left: 0; right: 0; top: 0; z-index: 2; padding: 16px 18px;
  display: flex; align-items: baseline; gap: 8px;
  background: linear-gradient(rgba(20,18,17,.6), rgba(20,18,17,0)); }
.pc-top b { font: 500 19px/1 var(--serif); letter-spacing: -0.3px; }
.pc-top b img { width: 20px; height: 20px; vertical-align: -3px; margin-right: 7px; }
.pc-top > span { font: 400 12px/1 var(--sans); color: rgba(255,255,255,.7); }
.pc-bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 56px 18px 16px;
  background: linear-gradient(rgba(20,18,17,0), rgba(20,18,17,.86) 36%, rgba(20,18,17,.95)); }
.pc-role { font: 350 20px/1.15 var(--serif); letter-spacing: -0.4px; margin-bottom: 14px; }
/* подпись → значение 6px, значение → следующая подпись 14px (Олег, 05.09.2026) */
.pc-rows { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; margin-bottom: 14px; align-items: start; }
.pc-row > span { display: block; font: 400 10px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255,255,255,.55); margin-bottom: 6px; }
.pc-row b { font: 400 12.5px/1.3 var(--sans); white-space: nowrap; }
.pc-cta { display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid rgba(255,255,255,.18); padding-top: 10px; font: 500 13px/1 var(--sans); }
.pc-cta span::after { content: " ↗"; }
/* компактный размер для колоды воронки */
.pc-sm .pc-top { padding: 12px 13px; gap: 6px; }
.pc-sm .pc-top b { font-size: 15px; }
.pc-sm .pc-top b img { width: 16px; height: 16px; margin-right: 5px; vertical-align: -2px; }
.pc-sm .pc-top > span { font-size: 10.5px; }
.pc-sm .pc-bottom { padding: 40px 13px 12px; }
.pc-sm .pc-role { font-size: 15px; margin-bottom: 10px; }
.pc-sm .pc-rows { gap: 10px 10px; margin-bottom: 10px; }
.pc-sm .pc-row > span { font-size: 9px; margin-bottom: 5px; }
.pc-sm .pc-row b { font-size: 11px; }
.pc-sm .pc-cta { padding-top: 7px; font-size: 11px; }