/* YAZME 2026 | Стили витрин персонажей (/persona/c/*, /persona/f/*, /analog/*)
   Файл: persona/assets/hub.css

   Отдельный маленький файл, а не общий ui.css раздела: эти страницы — вход с
   поиска, и они обязаны открываться мгновенно на слабом телефоне. Общий стек
   раздела тянет tokens.css + ui.css + club.css (около 90 КБ) ради компонентов,
   которых здесь нет. Здесь ~4 КБ и ни одного скрипта.

   Палитра повторяет посадочную (persona/inc/landing.php) — те же переменные,
   те же значения, чтобы переход между страницами не мигал другим фоном. */

*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#141311; --bg2:#1b1917; --card:#221f1c; --line:#2e2a26;
  --tx:#f2eee8; --tx2:#a8a096; --tx3:#6f675c;
  --acc:#d97757; --acc2:#e89070;
}
html[data-yz-theme="cloud"]{
  --bg:#f4f2ec; --bg2:#ebe8e0; --card:#fff; --line:rgba(35,32,25,.12);
  --tx:#232019; --tx2:#6e695d; --tx3:#9a9384;
  --acc:#c96543; --acc2:#b3552e;
}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--tx);line-height:1.5;-webkit-font-smoothing:antialiased;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
a{color:inherit;text-decoration:none}
.wrap{max-width:1120px;margin:0 auto;padding:0 18px}

/* шапка */
.top{position:sticky;top:0;z-index:60;background:rgba(20,19,17,.92);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
html[data-yz-theme="cloud"] .top{background:rgba(244,242,236,.92)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;height:54px}
.logo{font-weight:800;letter-spacing:.14em;font-size:14px}
.logo b{color:var(--acc)}
.tl{display:flex;gap:18px;font-size:14px;color:var(--tx2)}
.tl a:hover{color:var(--tx)}
@media(max-width:520px){.tl a:last-child{display:none}}

/* хлебные крошки — они же то, что Google показывает вместо URL */
.yz-crumbs{padding:14px 0 0;font-size:13px;color:var(--tx3)}
.yz-crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.yz-crumbs li+li:before{content:"›";margin-right:6px;color:var(--tx3)}
.yz-crumbs a{color:var(--tx2)}
.yz-crumbs a:hover{color:var(--acc)}

/* первый экран */
.hero{padding:18px 0 6px}
h1{font-size:clamp(24px,4.2vw,38px);line-height:1.12;letter-spacing:-.025em;font-weight:800}
.lead{color:var(--tx2);font-size:clamp(14px,1.8vw,17px);margin-top:10px;max-width:640px}
.facts{display:flex;gap:7px;flex-wrap:wrap;margin-top:14px}
.fact{font-size:12.5px;color:var(--tx2);background:var(--bg2);
  border:1px solid var(--line);border-radius:999px;padding:5px 12px}
.fact b{color:var(--acc);font-weight:650}

/* сетка карточек */
.grid{list-style:none;display:grid;gap:12px;margin:22px 0 8px;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
@media(max-width:520px){.grid{gap:10px;grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}}
.pc a{display:block;background:var(--card);border:1px solid var(--line);border-radius:16px;
  overflow:hidden;height:100%;transition:border-color .15s,transform .15s}
.pc a:hover{border-color:var(--acc);transform:translateY(-2px)}
/* width/height у картинки заданы в разметке — место под лицо занимается до
   загрузки, страница не прыгает (CLS). aspect-ratio держит квадрат при любой
   ширине колонки. */
.pc img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;background:var(--bg2)}
.pc .mono{display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;
  background:var(--bg2);font-size:38px;font-weight:800;color:var(--tx3)}
.pc .pn{display:block;padding:10px 12px 0;font-weight:650;font-size:14.5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc .pt{display:block;padding:3px 12px 12px;font-size:12.5px;color:var(--tx2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.empty{padding:40px 0;color:var(--tx2)}
.empty a{color:var(--acc)}

/* пагинация */
.pager{display:flex;align-items:center;justify-content:center;gap:18px;
  padding:22px 0;font-size:14px;color:var(--tx2);flex-wrap:wrap}
.pager a{background:var(--bg2);border:1px solid var(--line);border-radius:10px;
  padding:9px 16px;font-weight:600}
.pager a:hover{border-color:var(--acc);color:var(--tx)}

/* текстовые блоки */
.about,.yz-faq,.also{padding:26px 0;border-top:1px solid var(--line);margin-top:22px}
h2{font-size:clamp(19px,2.6vw,24px);letter-spacing:-.02em;font-weight:750;margin-bottom:12px}
.about p{color:var(--tx2);max-width:760px;margin-bottom:10px;font-size:15px}

.yz-faq details{border:1px solid var(--line);border-radius:12px;background:var(--bg2);
  padding:12px 15px;margin-bottom:9px}
.yz-faq summary{cursor:pointer;list-style:none;font-weight:650;font-size:15px}
.yz-faq summary::-webkit-details-marker{display:none}
.yz-faq summary h3{display:inline;font-size:inherit;font-weight:inherit}
.yz-faq summary:after{content:"+";float:right;color:var(--acc);font-weight:700}
.yz-faq details[open] summary:after{content:"−"}
.yz-faq p{color:var(--tx2);font-size:14.5px;padding-top:9px}

.also ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.also a{display:inline-block;background:var(--bg2);border:1px solid var(--line);
  border-radius:999px;padding:7px 14px;font-size:13.5px;color:var(--tx2)}
.also a:hover{border-color:var(--acc);color:var(--tx)}

/* сравнительная таблица (страницы /analog/*) */
.cmp{width:100%;border-collapse:collapse;margin:14px 0 4px;font-size:14px}
.cmp th,.cmp td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.cmp th{background:var(--bg2);font-weight:700;font-size:13px;color:var(--tx2)}
.cmp td:first-child{color:var(--tx2);width:34%}
.cmp .yes{color:var(--acc);font-weight:650}
@media(max-width:600px){.cmp{font-size:13px}.cmp th,.cmp td{padding:8px 9px}}

.cta{display:inline-block;background:var(--acc);color:#1b1310;font-weight:700;
  padding:13px 26px;border-radius:12px;font-size:15.5px;margin-top:16px}
.cta:hover{background:var(--acc2)}

/* подвал со ссылками — он же ссылочная развязка для робота */
.yz-seo-footer{border-top:1px solid var(--line);margin-top:34px;padding:24px 18px 40px;
  max-width:1120px;margin-left:auto;margin-right:auto}
.yz-seo-footer ul{list-style:none;display:flex;flex-wrap:wrap;gap:7px 16px}
.yz-seo-footer a{font-size:13.5px;color:var(--tx2)}
.yz-seo-footer a:hover{color:var(--acc)}
.yz-seo-footer span{font-size:13.5px;color:var(--tx3)}
.yz-seo-footer-note{margin-top:14px;font-size:12.5px;color:var(--tx3);max-width:620px}
/* ═══════════════════════════════════════════════════════════════════════════
   РЯД ПОЛОК ПОД ШАПКОЙ (yzseo:shelfnav) · 2026-08-21
   ───────────────────────────────────────────────────────────────────────────
   Прокручиваемый горизонтально: на телефоне восемь полок в столбик заняли бы
   весь первый экран, а это страница-вход — на первом экране должны быть лица.
   Липнет под шапкой, чтобы уйти на соседнюю полку можно было с любой высоты
   прокрутки, а не только домотав до низа.
   ═══════════════════════════════════════════════════════════════════════════ */
.shelfnav{position:sticky;top:54px;z-index:55;background:var(--bg);
  border-bottom:1px solid var(--line)}
.shelfnav .wrap{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;
  padding-top:10px;padding-bottom:10px}
.shelfnav .wrap::-webkit-scrollbar{display:none}
.shelfnav a,.shelfnav span{flex:none;white-space:nowrap;font-size:13.5px;
  padding:6px 13px;border-radius:999px;border:1px solid var(--line);
  color:var(--tx2);background:var(--bg2)}
.shelfnav a:hover{color:var(--tx);border-color:var(--tx3)}
.shelfnav span.on{background:var(--acc);border-color:var(--acc);color:#160f0b;font-weight:600}
.shelfnav i{font-style:normal;opacity:.6;font-size:11.5px}

/* Док сайта перекрывает низ страницы у вошедшего — освобождаем место.
   У гостя дока нет, но лишние 90 px внизу ему не мешают. */
body{padding-bottom:96px}

@media(max-width:520px){
  .shelfnav{top:54px}
  .shelfnav .wrap{padding-left:14px;padding-right:14px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   ВИТРИНА ВСЕЛЕННОЙ · 2026                                        yzfan
   ───────────────────────────────────────────────────────────────────────────
   Всё ниже включается классом .fan на <body> и действует ТОЛЬКО на витринах
   вселенных. Категории и темы рисуются прежними правилами выше — они
   работают, и переделывать их заодно значило бы удвоить площадь поломки.

   Цвета --fan и --fan-hi приходят переменными прямо на <body> из таблицы
   fandoms. Они красят обложку, метки фракций и свечение при наведении, но НЕ
   трогают кнопки и ссылки: атмосфера принадлежит вселенной, действие — бренду.
   ═══════════════════════════════════════════════════════════════════════════ */
.fan{ --fan:#3A3531; --fan-hi:#C9A227; }

/* ── зерно ──────────────────────────────────────────────────────────────
   Плоский тёмный фон читается как «тема по умолчанию». Пять процентов
   плёночного шума превращают его в материал. Выше — уже грязь.
   fixed, а не absolute: зерно не должно ездить вместе с контентом, иначе
   это текстура на объекте, а не плёнка поверх кадра. */
.fan::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9;
  opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html[data-yz-theme="cloud"] .fan::after{ opacity:.035; mix-blend-mode:multiply; }

/* ── обложка ─────────────────────────────────────────────────────────── */
.fan .cover{ position:relative; overflow:hidden; padding:0 0 30px;
  min-height:min(520px, 52svh); display:flex; align-items:flex-end; }
.fan .cover-bg{
  position:absolute; inset:-10% -6%; background-size:cover; background-position:50% 20%;
  filter:blur(30px) saturate(1.05) brightness(.78); transform:scale(1.12);
}
.fan .cover-tint{
  position:absolute; inset:0;
  background:
    radial-gradient(78% 96% at 22% 14%, color-mix(in srgb, var(--fan) 78%, transparent) 0%, transparent 66%),
    radial-gradient(52% 60% at 88% 6%, color-mix(in srgb, var(--fan-hi) 24%, transparent) 0%, transparent 70%);
}
/* Скрим в четыре остановки: линейный выглядит как серая плёнка поверх кадра. */
.fan .cover-scrim{
  position:absolute; inset:0;
  background:linear-gradient(to top,
    var(--bg) 0%, color-mix(in srgb, var(--bg) 92%, transparent) 22%,
    color-mix(in srgb, var(--bg) 55%, transparent) 52%,
    color-mix(in srgb, var(--bg) 18%, transparent) 78%, transparent 100%);
}
.fan .cover .wrap{ position:relative; z-index:2; width:100%; }
.fan .cover h1{
  font-size:clamp(34px, 7vw, 76px); line-height:.96; letter-spacing:-.028em;
  font-weight:800; margin:0; text-wrap:balance;
}
/* Приписка внутри h1 (yzseo:fanh1). Мелко, рядом с названием, в цвете
   вселенной — заголовок читается как одна фраза, а слово «персонажи» стоит
   там, где его ищет поисковик. Кегль в долях em: он должен уменьшаться вместе
   с названием, а не жить своей жизнью на узком экране. */
.fan .cover h1 b{
  font-size:.30em; font-weight:600; letter-spacing:.01em;
  color:var(--fan-hi); margin-left:.42em; white-space:nowrap;
}
@media(max-width:520px){ .fan .cover h1 b{ display:block; margin:.5em 0 0; font-size:.42em; } }
.fan .fan-over{
  font:600 10px/1 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing:.19em; text-transform:uppercase; color:var(--fan-hi); margin:18px 0 12px;
}
.fan .fan-alias{
  margin:13px 0 0; font:500 12px/1.65 ui-monospace, "SF Mono", Menlo, monospace;
  color:var(--tx3); max-width:44rem;
}
.fan .fan-alias b{ color:var(--tx2); font-weight:600; }
.fan .fan-hook{
  margin:16px 0 0; max-width:34rem; text-wrap:pretty;
  font-size:clamp(15px, 2vw, 20px); line-height:1.42; color:var(--tx);
}
.fan .fan-facts{
  display:flex; gap:26px; flex-wrap:wrap; margin-top:24px;
  padding-top:19px; border-top:1px solid rgba(255,255,255,.14);
}
html[data-yz-theme="cloud"] .fan .fan-facts{ border-top-color:rgba(35,32,25,.16); }
.fan .fan-facts b{ display:block; font-size:20px; font-weight:700; letter-spacing:-.01em;
  font-variant-numeric:tabular-nums; }
.fan .fan-facts i{ display:block; margin-top:5px; font-style:normal;
  font:600 9.5px/1 ui-monospace, Menlo, monospace; letter-spacing:.15em;
  text-transform:uppercase; color:var(--tx3); }
.fan .cover .yz-crumbs{ padding-top:16px; }

/* ── заголовки разделов ── */
.fan .fan-h2{
  font-size:clamp(20px, 2.6vw, 28px); font-weight:750; letter-spacing:-.02em;
  margin:44px 0 20px; display:flex; align-items:baseline; gap:14px;
}
.fan .fan-h2 span{
  margin-left:auto; font:600 10px/1 ui-monospace, Menlo, monospace;
  letter-spacing:.15em; color:var(--tx3);
}
.fan .fan-sec{ padding-top:6px; }

/* ── состав ──────────────────────────────────────────────────────────────
   Сетка и карточка переехали в assets/card.css: они теперь одни и те же на
   всём сайте, и держать их копию здесь значило бы гарантировать расхождение.
   Здесь остаётся только то, что относится к витрине, а не к карточке. */
.fan .fan-h2 + .cast { margin-top: 0; }
.fan .cast { margin: 0 0 8px; }

/* ── бенто «мир вкратце» ── */
.fan .bento{ display:grid; grid-template-columns:repeat(auto-fit, minmax(210px,1fr)); gap:12px; }
.fan .bt{
  position:relative; overflow:hidden; border-radius:18px; padding:17px 19px 19px;
  background:var(--card); outline:1px solid var(--line); outline-offset:-1px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.fan .bt.wide{ grid-column:span 2; }
@media(max-width:640px){ .fan .bt.wide{ grid-column:span 1; } }
.fan .bt::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(90% 70% at 8% 0%, color-mix(in srgb, var(--fan) 30%, transparent), transparent 62%);
}
.fan .bt b{ position:relative; display:block; margin-bottom:9px;
  font:600 10px/1 ui-monospace, Menlo, monospace; letter-spacing:.15em;
  text-transform:uppercase; color:var(--fan-hi); }
.fan .bt p{ position:relative; margin:0; font-size:14.5px; line-height:1.5; color:var(--tx2); }

/* ── описание вселенной ── */
.fan .fan-lore{ display:grid; gap:24px; }
@media(min-width:900px){ .fan .fan-lore{ grid-template-columns:minmax(0,1fr) 220px; gap:44px;
  align-items:start; } .fan .fan-lore .fan-h2{ grid-column:1 / -1; margin-bottom:4px; } }
.fan .fan-lore p{ margin:0 0 12px; font-size:15.5px; line-height:1.62; color:var(--tx2);
  max-width:62ch; text-wrap:pretty; }
.fan .fan-lore p.lede{ font-size:clamp(16px,1.9vw,19px); line-height:1.5; color:var(--tx); }
.fan .fan-lore aside{ font:500 12px/1.7 ui-monospace, Menlo, monospace; color:var(--tx3); }
.fan .fan-lore aside div{ padding:9px 0; border-bottom:1px solid var(--line); }
.fan .fan-lore aside div:last-child{ border-bottom:0; }
.fan .fan-lore aside b{ display:block; color:var(--tx2); font-weight:600; }

/* ── появление при прокрутке, нативное, без библиотек ── */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    /* Появление вешаем на ЯЧЕЙКУ, а не на карточку. Анимация с fill:both после
       прохода диапазона удерживает своё последнее значение transform, а значит
       навсегда перебивает transform из :hover — подъём карточки при наведении
       просто переставал работать, и в Chrome это было видно на всех витринах.
       На ячейке анимация никому не мешает: у неё своего transform нет. */
    .fan .cast > li, .fan .bt{
      animation:fanRise linear both; animation-timeline:view();
      animation-range:entry 4% cover 26%;
    }
    @keyframes fanRise{ from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none} }
  }
}