/* ============================================================================
   YAZME · ПЕРСОНЫ · ПРОФИЛЬ «КАДР» · 11.09.2026
   Файл: persona/assets/profile.css      Подключается: persona/profile.php
   Идёт ПОСЛЕ tokens.css, ui.css, screens.css и card.css — то есть побеждает
   их при равной специфичности. Своих цветов не заводит: всё из токенов
   раздела (tokens.css), поэтому страница едет за темой сайта — «Янтарь»,
   «Cloud Dancer», «Полночь».

   ЧТО ЭТО ЗА РАСКЛАДКА. Раньше профиль открывался круглым аватаром 160 px по
   центру, под ним имя, теги и несколько карточек. Лицо — единственное, ради
   чего человек сюда пришёл, — занимало восьмую часть экрана, а первое
   действие («написать») лежало ниже сгиба.

   Стало: КАДР. Лицо во весь первый экран, поверх него имя, строка о себе и
   теги; поле ввода закреплено внизу и видно с первой секунды. Текст уезжает
   в шторку, которая наезжает на кадр закруглёнными углами.

   ИМЕНА КЛАССОВ НОВЫЕ (pfk-*) СПЕЦИАЛЬНО. Старые правила .pf-* остались в
   screens.css и теперь просто ни к чему не цепляются: так правка не может
   сломать остальные страницы раздела и её легко откатить — достаточно
   вернуть старый profile.php.

   ЧТО НЕ ДЕЛАЕМ. Голосового приветствия и строки «сейчас пишут N человек» на
   странице нет: голосов у персонажей пока не существует, а счётчик живого
   присутствия показывает правду не всегда. Места под них в раскладке
   оставлено ровно столько, чтобы вернуть их одной вставкой в .pfk-cap.
   ========================================================================= */

/* ---------- страница ----------
   Запас снизу — под закреплённый док. Высота дока: заготовки 44 + поле 52 +
   подпись 20 + отступы ≈ 150. */
.pfk-body{ padding-bottom:calc(168px + var(--sab)); }

/* На телефоне общая шапка раздела скрыта: кадр начинается от верхнего края
   экрана, а «назад», «поделиться» и «ещё» лежат кнопками поверх фотографии.
   В разметке шапка остаётся — робот и человек без css видят её всегда. */
@media (max-width: 899px){
  .pfk-body .pvh{ display:none; }
}

.pfk{ position:relative; }

/* ══════════════════════════ КАДР ══════════════════════════ */
.pfk-hero{
  position:relative; z-index:1;
  height:min(76svh, 660px); min-height:400px;
  overflow:hidden; background:var(--s1); isolation:isolate;
}
.pfk-art{ position:absolute; inset:-1px; will-change:transform; }
.pfk-art img{
  display:block; width:100%; height:100%;
  object-fit:cover; object-position:50% 18%;
  /* «Живые обои» бедного человека: кадр очень медленно наезжает. Настоящий
     видео-луп встанет сюда же <video> на то же место. */
  animation:pfk-breathe 16s ease-in-out infinite alternate;
}
@keyframes pfk-breathe{ from{ transform:scale(1.01); } to{ transform:scale(1.06); } }
/* Аватара нет — монограмма во весь кадр, а не пустой прямоугольник. */
.pfk-hero.nopic .pfk-art{ background:var(--hero-grad); }
.pfk-mono{
  position:absolute; inset:0; display:grid; place-items:center;
  font:600 34vh/1 var(--f-serif); color:color-mix(in srgb, var(--on-hero) 70%, transparent);
}
.pfk-scrim{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(10,9,8,.62) 0%, rgba(10,9,8,0) 22%, rgba(10,9,8,0) 40%,
    rgba(10,9,8,.72) 72%, rgba(10,9,8,.96) 100%);
  transition:opacity var(--d-sheet) var(--e-out);
}

/* ---------- плавающая полоса ----------
   На телефоне она закреплена у верхнего края и при прокрутке становится
   стеклянной: в этот момент в ней проявляется маленькое имя — чтобы, уйдя
   вниз по странице, человек не терял, у кого он в гостях. */
.pfk-top{
  position:fixed; top:0; left:0; right:0; z-index:46;
  display:flex; align-items:center; gap:var(--sp2);
  padding:calc(var(--sat) + 10px) var(--sp3) 10px;
  border-bottom:1px solid transparent;
  transition:background var(--d-std) var(--e-out), border-color var(--d-std) var(--e-out);
}
.pfk-top.on{
  background:var(--glass); border-bottom-color:var(--hair);
  -webkit-backdrop-filter:blur(20px) saturate(160%); backdrop-filter:blur(20px) saturate(160%);
}
.pfk-gbtn{
  width:40px; height:40px; flex:none; display:grid; place-items:center;
  border-radius:var(--r-full); border:1px solid rgba(250,249,245,.16);
  background:rgba(10,9,8,.42); color:#faf9f5; cursor:pointer;
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  transition:background var(--d-std) var(--e-out), color var(--d-std) var(--e-out),
             border-color var(--d-std) var(--e-out), transform var(--d-micro) var(--e-spring-soft);
}
.pfk-gbtn:active{ transform:scale(.93); }
.pfk-top.on .pfk-gbtn{ background:transparent; border-color:transparent; color:var(--t1); }
.pfk-acts{ margin-left:auto; display:flex; gap:var(--sp2); }
.pfk-mini{
  display:flex; align-items:center; gap:8px; min-width:0;
  opacity:0; transform:translateY(6px); pointer-events:none;
  transition:opacity var(--d-std) var(--e-out), transform var(--d-std) var(--e-out);
}
.pfk-top.on .pfk-mini{ opacity:1; transform:none; }
.pfk-mini i{ width:30px; height:30px; flex:none; border-radius:var(--r-full);
  background-size:cover; background-position:50% 16%; }
.pfk-mini b{ min-width:0; font:600 16px/1.1 var(--f-serif); color:var(--t1);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---------- подпись на кадре ----------
   Цвета здесь НЕ из токенов темы: текст лежит на фотографии, и в светлой
   теме он обязан остаться светлым. */
.pfk-cap{
  position:absolute; z-index:3; left:var(--sp5); right:var(--sp5); bottom:var(--sp6);
  color:#faf9f5; transition:opacity var(--d-sheet) var(--e-out);
}
.pfk-name{
  margin:0; color:#faf9f5;
  font:600 clamp(44px, 16vw, 84px)/.9 var(--f-serif);
  letter-spacing:-.035em; text-wrap:balance;
}
.pfk-cap .pf-h1sub{
  /* с 15.09.2026 это <p> после <h1>, а не span внутри: нижний отступ абзаца
     по умолчанию обнуляем, чтобы вид не поменялся */
  display:block; margin:10px 0 0;
  font:500 12px/1.35 var(--f-ui); letter-spacing:0;
  color:rgba(250,249,245,.72);
}
.pfk-cap .pf-name-en{ margin:6px 0 0; font:600 var(--fs-small)/1.2 var(--f-ui); color:rgba(250,249,245,.6); }
.pfk-tagline{ margin:10px 0 0; max-width:32ch; font:400 16px/1.42 var(--f-ui); color:rgba(250,249,245,.9); text-wrap:pretty; }
.pfk-tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.pfk-tags .pv-tag{
  background:rgba(250,249,245,.14); border-color:rgba(250,249,245,.22); color:#faf9f5;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.pfk-tags a.pv-tag{ text-decoration:none; }
@media (hover:hover){ .pfk-tags a.pv-tag:hover{ background:rgba(250,249,245,.24); } }

/* ---------- «только кадр» ----------
   Кнопка с глазом убирает всё, кроме лица. Возврат — нажатием по кадру. */
.pfk-clean .pfk-cap,
.pfk-clean .pfk-dock,
.pfk-clean .pfk-acts{ opacity:0; pointer-events:none; }
.pfk-clean .pfk-scrim{ opacity:.22; }

/* ══════════════════════════ ШТОРКА ══════════════════════════ */
.pfk-sheet{
  position:relative; z-index:4; margin-top:-26px;
  border-radius:var(--r-lg) var(--r-lg) 0 0; background:var(--s0);
}
.pfk-grip{ width:38px; height:4px; margin:10px auto 0; border-radius:2px; background:var(--hair2); }
.pfk-inner{ max-width:var(--col); margin:0 auto; padding:2px var(--sp4) var(--sp7); }

.pfk-inner .pf-crumbs{ padding-top:10px; }
.pfk-meta{
  display:flex; align-items:center; gap:var(--sp3);
  margin:var(--sp3) 0 0; font-size:var(--fs-small); color:var(--t3);
}
.pfk-by{ min-width:0; }
.pfk-heart{
  margin-left:auto; flex:none; display:inline-flex; align-items:center; gap:7px;
  height:36px; padding:0 14px; border:0; border-radius:var(--r-full);
  background:var(--s2); color:var(--t2); font:600 13px/1 var(--f-ui); cursor:pointer;
  transition:background var(--d-std) var(--e-out), color var(--d-std) var(--e-out), transform var(--d-micro) var(--e-spring-soft);
}
.pfk-heart:active{ transform:scale(.96); }
.pfk-heart[data-on="1"]{ background:var(--hero-lo); color:var(--hero); }
.pfk-heart[data-on="1"] .pv-ic{ fill:currentColor; }

.pfk-block{ margin-top:var(--sp6); }
.pfk-sec{
  margin:0 0 var(--sp3);
  font:600 12.5px/1 var(--f-display); letter-spacing:.02em; color:var(--t1);
}
/* Заголовки блоков — одной высоты во всей шторке. Старые .pv-title и h2 в
   FAQ приходят из screens.css крупными: рядом с «Кто это» это читалось как
   два разных уровня заголовка на одной странице. */
.pfk-inner .pv-title,
.pfk-inner .pf-faq h2,
.pfk-inner .pf-lore h2{
  margin:0 0 var(--sp3);
  font:600 12.5px/1 var(--f-display); letter-spacing:.02em; color:var(--t1);
}

.pfk-bio{ margin:0; color:var(--t2); max-width:64ch; text-wrap:pretty; }
.pfk-bio.cut{ display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; }
.pfk-bio-t:checked ~ .pfk-bio.cut{ display:block; overflow:visible; -webkit-line-clamp:unset; }
.pfk-more{ display:inline-block; margin-top:9px; color:var(--hero); font:600 14px/1 var(--f-ui); cursor:pointer; }
.pfk-more[hidden]{ display:none; }
.pfk-more .b{ display:none; }
.pfk-bio-t:checked ~ .pfk-more .a{ display:none; }
.pfk-bio-t:checked ~ .pfk-more .b{ display:inline; }
.pfk-bio-t:focus-visible ~ .pfk-more{ outline:var(--focus-w) solid var(--focus); outline-offset:var(--focus-off); border-radius:var(--r-xs); }

.pfk-mem{
  display:flex; align-items:center; gap:10px;
  padding:var(--sp4); border-radius:var(--r-md); background:var(--s2);
}
.pfk-memn{ font:600 var(--fs-title)/1 var(--f-num); color:var(--t1); }
.pfk-memw{ color:var(--t3); font-size:var(--fs-small); }
.pfk-mem .pv-btn{ margin-left:auto; }

/* Похожие: лица портретом, как на карточках каталога, а не квадратом. */
.pfk .pf-same{ margin-top:var(--sp6); }
.pfk .pf-same-grid{ grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); }
.pfk .pf-same-grid img{ aspect-ratio:3/4; border-radius:16px; }
.pfk .pf-faq{ margin-top:var(--sp7); }

/* ══════════════════════════ ДОК ══════════════════════════
   Главное действие страницы. Закреплён внизу и виден с первой секунды —
   ровно за этим сюда приходят с рекламы и из поиска.
   --pfk-navh: высоту нижнего меню сайта (оно есть только у вошедшего)
   меряет скрипт страницы; у гостя переменная остаётся нулём. */
.pfk-dock{
  position:fixed; left:0; right:0; bottom:var(--pfk-navh, 0px); z-index:44;
  padding:10px var(--sp3) calc(12px + var(--sab));
  border-top:1px solid var(--hair); border-radius:22px 22px 0 0;
  background:var(--glass);
  -webkit-backdrop-filter:blur(22px) saturate(150%); backdrop-filter:blur(22px) saturate(150%);
  transition:opacity var(--d-sheet) var(--e-out), bottom var(--d-std) var(--e-out);
}
.pfk-qa{ display:flex; gap:7px; padding:0 2px 9px; overflow-x:auto; scrollbar-width:none; }
.pfk-qa::-webkit-scrollbar{ display:none; }
.pfk-qa[hidden]{ display:none; }
.pfk-dock .pf-q{
  flex:none; height:34px; padding:0 14px; border-radius:var(--r-full); white-space:nowrap; cursor:pointer;
  border:1px dashed var(--hero-line); background:transparent; color:var(--t1);
  font:500 13px/1 var(--f-ui);
  transition:background var(--d-std) var(--e-out), border-color var(--d-std) var(--e-out);
}
.pfk-dock .pf-q.on{ border-style:solid; background:var(--hero-lo); }
@media (hover:hover){ .pfk-dock .pf-q:hover{ border-style:solid; background:var(--hero-lo); } }
.pfk-in{
  display:flex; align-items:center; gap:8px; height:52px; padding:0 6px 0 16px;
  border-radius:26px; background:var(--s2); box-shadow:inset 0 0 0 1px var(--hair2);
  transition:box-shadow var(--d-std) var(--e-out);
}
.pfk-in:focus-within{ box-shadow:inset 0 0 0 1px var(--hero); }
.pfk-dock.wink .pfk-in{ box-shadow:inset 0 0 0 1px var(--hero); }
.pfk-in input{
  flex:1; min-width:0; border:0; background:none; outline:none;
  color:var(--t1); font:400 15px/1 var(--f-ui);
}
.pfk-in input::placeholder{ color:var(--t3); }
.pfk-send{
  width:40px; height:40px; flex:none; display:grid; place-items:center;
  border:0; border-radius:var(--r-full); background:var(--hero-grad); color:var(--on-hero); cursor:pointer;
  transition:transform var(--d-micro) var(--e-spring-soft);
}
.pfk-send:active{ transform:scale(.92); }
.pfk-note{ margin:8px 0 0; text-align:center; font-size:11.5px; color:var(--t3); }

/* ══════════════════════════ БОЛЬШОЙ ЭКРАН ══════════════════════════
   Десктоп — не растянутый телефон: кадр становится липкой карточкой слева,
   текст и док живут в правой колонке. Общая шапка раздела остаётся на месте. */
@media (min-width: 900px){
  .pfk-body{ padding-bottom:var(--sp7); }
  .pfk{
    max-width:var(--wide); margin:0 auto;
    padding:var(--sp5) var(--sp5) var(--sp8);
    display:grid; grid-template-columns:minmax(0, 440px) minmax(0, 1fr);
    gap:var(--sp7); align-items:start;
  }
  .pfk-hero{
    position:sticky; top:calc(var(--sat) + 88px);
    height:auto; aspect-ratio:3/4; border-radius:var(--r-lg);
  }
  .pfk-top, .pfk-top.on{
    position:absolute; padding:var(--sp3);
    background:none; border-bottom-color:transparent;
    -webkit-backdrop-filter:none; backdrop-filter:none;
  }
  .pfk-top .pfk-mini{ display:none; }
  .pfk-top.on .pfk-gbtn{ background:rgba(10,9,8,.42); border-color:rgba(250,249,245,.16); color:#faf9f5; }
  .pfk-name{ font-size:clamp(40px, 4vw, 60px); }
  .pfk-cap{ left:var(--sp5); right:var(--sp5); bottom:var(--sp5); }
  .pfk-sheet{ margin-top:0; border-radius:0; background:transparent; }
  .pfk-grip{ display:none; }
  .pfk-inner{ max-width:none; padding:0 0 150px; }   /* запас под липкий док */
  /* Док перестаёт быть приклеенным к низу окна и становится липким внутри
     правой колонки: на большом экране полоса во всю ширину выглядит
     баннером, а не полем ввода. */
  .pfk-dock{
    position:sticky; bottom:var(--sp4); left:auto; right:auto;
    margin-top:var(--sp6); padding:10px 12px 12px;
    border:1px solid var(--hair); border-radius:var(--r-md); box-shadow:var(--sh-md);
  }
}

@media (prefers-reduced-motion: reduce){
  .pfk-art img{ animation:none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   «О ЧЁМ ПОГОВОРИТЬ», «ЧИТАТЬ ЕЩЁ», «ОБНОВЛЕНО»           yzseo 20.09.2026
   ───────────────────────────────────────────────────────────────────────────
   Реплики в теле страницы — те же пилюли, что заготовки дока (.pf-q), но в
   строку с переносом, а не в горизонтальную ленту: блок читается, а не
   листается. «Читать ещё» наследует .pf-updown из screens.css — здесь только
   подпись перед ссылками. Дата обновления — в цвет мета-строки.
   ═══════════════════════════════════════════════════════════════════════════ */
.pf-talk-list{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.pf-talk-q{
  display:inline-flex; align-items:center; min-height:34px; padding:6px 14px;
  border:1px dashed var(--hero-line); border-radius:var(--r-full);
  background:transparent; color:var(--t1); text-decoration:none;
  font:500 13px/1.3 var(--f-ui); text-wrap:pretty;
  transition:background var(--d-std) var(--e-out), border-color var(--d-std) var(--e-out);
}
.pf-talk-q.on{ border-style:solid; background:var(--hero-lo); }
@media (hover:hover){ .pf-talk-q:hover{ border-style:solid; background:var(--hero-lo); } }
.pf-readmore{ align-items:center; }
.pf-readmore-t{ color:var(--t3); font-size:13.5px; }
.pfk-upd{ white-space:nowrap; }