@charset "UTF-8";

/* ══════════════════════════════════════════════════════════════════════════
   Татьяна Шефер — страница биографии · дизайн-язык «ledger»
   Стили серии bio-v2. Построены на тех же дизайн-токенах, что лендинг v31
   (палитра «шампань», Raleway/Inter, острые углы, hairline, grain), но без
   лендинг-специфичных секций — со своими компонентами лонгрида биографии.
   Внешний вид правится ТОЛЬКО через дизайн-токены в :root (см. §1).
   История версий и обоснования — в ../../CHANGELOG-bio.md.

   ОГЛАВЛЕНИЕ
     1.  Дизайн-токены (:root)
     2.  Сброс и база
     3.  Фоновое зерно (grain)
     4.  Каркас страницы (.page / .frame)
     5.  Шапка (sticky, brand, nav, contacts, бургер)
     6.  Полноэкранное меню (mobile-menu)
     7.  Кнопки (.btn и варианты)
     8.  Метка фото + фото-заглушки
     9.  Hero биографии (.bio-hero)
     10. Раскладка лонгрида (.bio-layout, sticky-оглавление .toc)
     11. Главы (.chapter) — номер, заголовок, проза
     12. Врезки — цитата / факт / фото-цитата
     13. Карточки компетенций (.comp-cards)
     14. Финальный CTA (.bio-cta) + блок контактов (перенос с лендинга)
     15. Футер
     16. Адаптив (@media)
     17. Движение и prefers-reduced-motion
   ══════════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════════
   1. ДИЗАЙН-ТОКЕНЫ — единственное место, где правят внешний вид.
      Значения синхронизированы с лендингом v31 (единая дизайн-система).
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  /* ── Цвет ── палитра «шампань»: светлый текст на тёмно-зелёном + мягкое золото ── */
  --ink:#ede5d0;                        /* основной кремовый текст */
  --bg:#152120;                         /* серо-зелёный фон */
  --bg-alt:#192523;                     /* тонкий альт-тон чередующихся блоков (едва светлее --bg) */
  --gold:#c9b98a;                       /* мягкий «шампань»-акцент: цифры, кикеры, штрихи */
  --gold-btn:#d4c28a;                   /* ярче — заливка primary-кнопки */
  --on-gold:#0e1a19;                    /* тёмный текст на золотой кнопке */
  --gold-soft:rgba(201,185,138,.5);     /* приглушённое золото: черта карточек, подчёркивания */
  --deep:#101a18;                       /* самый глубокий зелёный: «фичевые» панели (CTA) */
  --surface:#1e2b29;                    /* приподнятый зелёный: hover-заливки, панели */
  --on-dark:#fff;                       /* текст на самой тёмной панели */
  --on-dark-faint:rgba(255,255,255,.62);/* приглушённый текст на тёмной панели */
  --hair-dark:rgba(255,255,255,.16);    /* линии-разделители на тёмной панели */
  --hair-dark-strong:rgba(255,255,255,.42);/* активный/hover бордер на тёмной панели */
  --chan-hover:rgba(255,255,255,.08);   /* фон чипа-канала на тёмной панели при hover */
  /* производные тинты — светлое-на-тёмном (rgba от --ink ≈ 237,229,208) */
  --muted:rgba(237,229,208,.66);
  --faint:rgba(237,229,208,.46);
  --hair:rgba(237,229,208,.13);         /* hairline: тонкие деления, 1px */
  --rule:rgba(237,229,208,.28);         /* «главный» разделитель: границы глав/карточек */
  --lede-bg:rgba(237,229,208,.08);      /* фон плашек-описаний/врезок */
  --chip-light:rgba(255,255,255,.16);   /* полупрозрачный квадрат-чип внутри primary-кнопки */
  --photo-1:#1c2e2b; --photo-2:#182724; --photo-3:#14201e;  /* фото-заглушки (градиент) */
  --photo-tag-bg:rgba(16,26,24,.62);    /* фон меток-плашек на фото */

  /* ── Типографика ── две гарнитуры: Raleway (дисплей) + Inter (тело) ── */
  --display:"Raleway", system-ui, sans-serif;             /* заголовки, имя, цифры, кнопки */
  --sans:"Inter", system-ui, -apple-system, sans-serif;   /* тело, метки, поля */
  /* Типо-шкала — единая 9-ступенчатая. bio-v9: десктопная база тела и проза глав
     опущены («как на мобилке» — были крупноваты); заголовки/--fs-md не тронуты.
     Новый размер — ТОЛЬКО отсюда. */
  --fs-2xs:12px;                 /* капс-метки/eyebrows (UPPERCASE .14em), подписи */
  --fs-xs:14px;                  /* вторичный текст: теги, нав, оглавление, подписи */
  --fs-s:14px;                   /* проза глав (чуть компактнее базы — длинный лонгрид) */
  --fs-base:15px;                /* база/тело: лиды, кнопки */
  --fs-md:22px;                  /* крупный текст: подзаголовки внутри глав */
  --fs-lg:26px;                  /* H3-подзаголовки, цитата */
  --fs-xl:34px;                  /* заголовки глав */
  --fs-2xl:42px;                 /* крупные цифры-факты */
  --fs-h2:clamp(30px,4vw,50px);  /* заголовок CTA */
  --fs-h1:clamp(38px,6vw,80px);  /* hero биографии */

  /* ── Сетка / раскладка ── шапка/футер full-bleed, контент — центр. колонка ── */
  --maxw:none;                          /* потолок ширины .frame — full-bleed (шапка/футер) */
  --maxw-content:1152px;                /* v3: ширина центральной колонки контента (как лендинг v33+) */
  --margin:clamp(20px,1.7vw,40px);      /* боковые поля (маленькие, почти не растут) */
  --gap:24px;                           /* базовый внутренний отступ */
  --col-gap:clamp(24px,3vw,72px);       /* жёлоб «оглавление | статья» */
  --header-h:76px;                      /* базовая высота шапки; в compact сжимается до 58px */
  --logo:42px;

  /* ── Ритм (база 8) ── */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px;

  /* ── Радиусы ── острые углы везде (скруглений нет) ── */
  --r-btn:0;

  /* ── Кнопки ── */
  --btn-h:54px;    --btn-h-sm:40px;
  --chip:34px;     --chip-sm:28px;      /* квадрат-чип у стрелки */
  --arw:16px;      --arw-sm:13px;       /* размер самой стрелки */
  --chip-inset:8px;--chip-inset-sm:6px; /* отступ чипа от края кнопки */
  --btn-pl:26px;   --btn-pl-sm:18px;    /* левый внутренний отступ */
  --btn-shift:22px;--btn-shift-sm:20px; /* сдвиг текста на hover (своп) */
  --btn-pr:calc(var(--chip-inset) + var(--chip) + var(--s1));          /* правый отступ = место под чип */
  --btn-pr-sm:calc(var(--chip-inset-sm) + var(--chip-sm) + var(--s1));

  /* ── Движение ── */
  --ease:cubic-bezier(.165,.84,.44,1);  /* easeOutExpo */
  --dur:.45s; --dur-fast:.35s;

  /* ── Зерно ── ч/б PNG-тайл, вынесен в токен (побайтно совпадает с v31) ── */
  --grain-size:90px; --grain-opacity:.025;
  --grain-img:url("data:image/png;base64,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");
}


/* ══════════════════════════════════════════════════════════════════════════
   2. СБРОС И БАЗА
   ══════════════════════════════════════════════════════════════════════════ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* якоря глав приземляются НИЖЕ липкой шапки (высота сжатой шапки + воздух) */
[id]{scroll-margin-top:calc(var(--header-h) + var(--s3))}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:var(--fs-base);line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-kerning:normal;font-feature-settings:"kern","liga","calt";
}
a{color:inherit;text-decoration:none}
svg{display:block}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
::selection{background:var(--ink);color:var(--bg)}
p,li,figcaption,blockquote{text-wrap:pretty}
a:focus-visible,button:focus-visible,summary:focus-visible,
input:focus-visible,textarea:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.bio-cta a:focus-visible,.bio-cta button:focus-visible{outline-color:var(--on-dark)}


/* ══════════════════════════════════════════════════════════════════════════
   3. ФОНОВОЕ ЗЕРНО (grain) — ч/б тайл, ~3%, движется по кадрам
   ══════════════════════════════════════════════════════════════════════════ */
.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  mix-blend-mode:screen;opacity:var(--grain-opacity);
  background-image:var(--grain-img);
  background-size:var(--grain-size) var(--grain-size);background-repeat:repeat;
  animation:grain .42s steps(1,end) infinite;
}
@keyframes grain{
  0%{background-position:0 0}
  20%{background-position:-37px 91px}
  40%{background-position:113px -53px}
  60%{background-position:-67px -119px}
  80%{background-position:71px 67px}
  100%{background-position:0 0}
}


/* ══════════════════════════════════════════════════════════════════════════
   4. КАРКАС СТРАНИЦЫ
   ══════════════════════════════════════════════════════════════════════════ */
.page{position:relative;z-index:2;min-height:100vh;display:flex;flex-direction:column}
/* рамка-контейнер: full-bleed во весь viewport (--maxw:none), боковые поля --margin */
.frame{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--margin)}
/* v3: контент собран в центральную колонку 1152px (как лендинг v33+) — не «вытянут»
   по ширине. Шапка/футер остаются full-bleed; по бокам контента — фон страницы. */
.bio-hero,.bio-layout,.bio-cta{width:min(var(--maxw-content),100%);margin-inline:auto}


/* ══════════════════════════════════════════════════════════════════════════
   5. ШАПКА — липкая, сжимается при скролле (body.header-compact)
   ══════════════════════════════════════════════════════════════════════════ */
#top-sentinel{display:block;height:1px;width:100%}
.header{position:sticky;top:0;z-index:70;background:var(--bg);border-bottom:1px solid var(--hair);
  transition:background-color var(--dur-fast) var(--ease)}
.header .frame{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);
  transition:height var(--dur-fast) var(--ease)}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;cursor:pointer}
.brand-txt{display:flex;flex-direction:column;line-height:1.2}
.brand .nm{font-size:var(--fs-xs);font-weight:500;color:var(--ink);letter-spacing:.01em}
.brand .sub{font-size:var(--fs-2xs);color:var(--faint);letter-spacing:.02em;
  overflow:hidden;transition:max-height var(--dur-fast) var(--ease),opacity var(--dur-fast) var(--ease);
  max-height:1.4em;opacity:1}
body.header-compact{--header-h:58px;--logo:34px}
body.header-compact .brand .sub{max-height:0;opacity:0}
.logo{width:var(--logo);height:var(--logo);flex:none;overflow:hidden;
  transition:width var(--dur-fast) var(--ease),height var(--dur-fast) var(--ease);
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,var(--photo-1) 0%,var(--photo-3) 100%)}
.logo svg{width:60%;height:auto;color:var(--ink);opacity:.4}
.nav{display:flex;align-items:center;gap:var(--s4);flex:none}
.nav a{font-size:var(--fs-xs);color:var(--muted);transition:color .15s;white-space:nowrap}
.nav a:hover{color:var(--ink)}
.nav a.is-here{color:var(--ink)}                /* активный пункт («Биография») */
.header-actions{display:flex;align-items:center}
.header-contacts{display:flex;flex-direction:column;align-items:flex-end;
  line-height:1.25;margin-right:var(--s4);max-width:16em;overflow:hidden;
  transition:max-width var(--dur-fast) var(--ease),
             opacity  var(--dur-fast) var(--ease),
             margin   var(--dur-fast) var(--ease)}
.header-contacts a{font-size:var(--fs-2xs);color:var(--muted);white-space:nowrap;transition:color .15s}
.header-contacts a:hover{color:var(--ink)}
.header-contacts .hc-tel{color:var(--ink);font-weight:500}
body.header-compact .header-contacts{max-width:0;opacity:0;margin-right:0;pointer-events:none}

/* ── кнопка-бургер (видна на «узкой» зоне, см. §16) ── */
.burger{display:none;flex:none;width:44px;height:44px;padding:0;margin:0;
  border:0;background:none;cursor:pointer;align-items:center;justify-content:center;
  color:var(--ink);-webkit-tap-highlight-color:transparent}
.burger__box{display:flex;flex-direction:column;justify-content:center;gap:6px;width:24px;height:16px}
.burger__line{display:block;width:100%;height:1.5px;background:currentColor;
  transition:transform var(--dur-fast) var(--ease),opacity var(--dur-fast) var(--ease)}


/* ══════════════════════════════════════════════════════════════════════════
   6. ПОЛНОЭКРАННОЕ МЕНЮ — оверлей поверх шапки (z-index:90), содержимое по центру
   ══════════════════════════════════════════════════════════════════════════ */
.mobile-menu{position:fixed;inset:0;z-index:90;background:var(--bg);
  display:flex;flex-direction:column;align-items:center;justify-content:safe center;text-align:center;
  /* bio-v8: верхний резерв под шапку меню (.mobile-menu__head — position:absolute, места
     не занимает) — иначе при переполнении safe-center прижимает ссылки к верху и они
     заезжают под логотип «Татьяна Шефер». Низ — --s5 для воздуха при прокрутке. */
  padding:calc(var(--header-h) + var(--margin)) var(--margin) var(--s5);gap:var(--s5);
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);
  transition:opacity var(--dur-fast) var(--ease),
             transform var(--dur-fast) var(--ease),
             visibility 0s linear var(--dur-fast);
  overflow-y:auto;overscroll-behavior:contain}
body.menu-open .mobile-menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);
  transition:opacity var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),visibility 0s}
.mobile-menu__head{position:absolute;top:var(--margin);left:var(--margin);right:var(--margin);
  display:flex;align-items:center;justify-content:space-between;height:var(--header-h);margin:0}
.mobile-menu__brand{font-size:var(--fs-xs);font-weight:500;color:var(--ink);letter-spacing:.01em}
.mm-close{flex:none;width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  padding:0;border:0;background:none;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent}
.mm-close svg{width:24px;height:24px}
.mobile-menu__nav{display:flex;flex-direction:column;align-items:center;gap:var(--s3)}
.mobile-menu__nav a{font-family:var(--display);font-weight:300;font-size:var(--fs-lg);
  color:var(--ink);letter-spacing:.01em;padding:var(--s1) 0;transition:color .15s}
.mobile-menu__nav a:hover,.mobile-menu__nav a:focus-visible,.mobile-menu__nav a.is-here{color:var(--gold)}
.mobile-menu__foot{display:flex;flex-direction:column;align-items:center;gap:var(--s4)}
.mobile-menu__contacts{display:flex;flex-direction:column;align-items:center;gap:var(--s1);line-height:1.3}
.mobile-menu__contacts a{font-size:var(--fs-base);color:var(--muted);transition:color .15s}
.mobile-menu__contacts a:hover{color:var(--ink)}
.mobile-menu__contacts .hc-tel{color:var(--ink);font-weight:500}
.mobile-menu__cta{align-self:center}
body.menu-open{overflow:hidden}


/* ══════════════════════════════════════════════════════════════════════════
   7. КНОПКИ (единый компонент, как в v31)
   ══════════════════════════════════════════════════════════════════════════ */
.btn{
  position:relative;display:inline-flex;align-items:center;
  height:var(--btn-h);padding:0 var(--btn-pr) 0 var(--btn-pl);border-radius:var(--r-btn);
  border:1px solid var(--gold-btn);background:var(--gold-btn);color:var(--on-gold);
  font-family:var(--display);font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;overflow:hidden;
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease),border-color var(--dur) var(--ease);
}
.btn:hover{background:transparent;color:var(--gold-btn)}
.btn .lbl{display:inline-block;transition:transform var(--dur) var(--ease)}
.btn:hover .lbl{transform:translateX(var(--btn-shift))}
.btn .arw{position:absolute;top:50%;display:flex;align-items:center;justify-content:center;
  width:var(--chip);height:var(--chip);border-radius:var(--r-btn);border:1px solid transparent;
  transition:transform var(--dur) var(--ease),opacity var(--dur-fast) var(--ease),
             background-color var(--dur) var(--ease),border-color var(--dur) var(--ease)}
.btn .arw svg{width:var(--arw);height:var(--arw)}
.btn .arw-r{right:var(--chip-inset);transform:translateY(-50%) scale(1);opacity:1}
.btn .arw-l{left:var(--chip-inset);transform:translateY(-50%) scale(0);opacity:0}
.btn:hover .arw-r{transform:translateY(-50%) scale(0);opacity:0}
.btn:hover .arw-l{transform:translateY(-50%) scale(1);opacity:1}
.btn .arw-r{background:var(--chip-light)}
.btn .arw-l{background:transparent;border-color:currentColor}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:transparent;color:var(--ink)}
.btn--ghost .arw-r{background:transparent;border-color:currentColor}
.btn--ghost .arw-l{background:transparent;border-color:currentColor}
.btn--sm{height:var(--btn-h-sm);padding:0 var(--btn-pr-sm) 0 var(--btn-pl-sm);font-size:var(--fs-xs)}
.btn--sm .arw{width:var(--chip-sm);height:var(--chip-sm)}
.btn--sm .arw svg{width:var(--arw-sm);height:var(--arw-sm)}
.btn--sm .arw-r{right:var(--chip-inset-sm)}
.btn--sm .arw-l{left:var(--chip-inset-sm)}
.btn--sm:hover .lbl{transform:translateX(var(--btn-shift-sm))}


/* ══════════════════════════════════════════════════════════════════════════
   8. МЕТКА ФОТО + ФОТО-ЗАГЛУШКИ
   ══════════════════════════════════════════════════════════════════════════ */
/* фото-заглушка 16:9 (заменить на <img … object-fit:cover>) — метка-плашка в углу */
.bio-photo{position:relative;aspect-ratio:16/9;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--hair);
  background:linear-gradient(160deg,var(--photo-1) 0%,var(--photo-2) 60%,var(--photo-3) 100%)}
.bio-photo svg{width:16%;max-width:64px;height:auto;color:var(--ink);opacity:.22}
.bio-photo .ptag{position:absolute;top:16px;left:16px;
  font-size:var(--fs-2xs);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
  background:var(--photo-tag-bg);border:1px solid var(--hair-dark);
  padding:5px 10px;border-radius:var(--r-btn);backdrop-filter:blur(3px)}


/* ══════════════════════════════════════════════════════════════════════════
   9. HERO БИОГРАФИИ
   ══════════════════════════════════════════════════════════════════════════ */
.bio-hero{border-bottom:1px solid var(--hair)}
/* контент hero выключен по центру; ограниченные по ширине блоки центрируются margin:auto */
.bio-hero .frame{padding-block:var(--s6);text-align:center}
.bio-hero .kicker{font-size:var(--fs-2xs);font-weight:300;letter-spacing:.26em;
  text-transform:uppercase;color:var(--muted);margin-bottom:var(--s3)}
.bio-hero h1{font-family:var(--display);font-weight:200;font-size:var(--fs-h1);line-height:1.05;
  letter-spacing:.01em;color:var(--ink);margin-bottom:var(--s4);text-wrap:balance;max-width:20em;margin-inline:auto}
.bio-hero h1 .accent{color:var(--gold)}
.bio-hero .bio-lede{font-size:var(--fs-md);line-height:1.6;color:var(--muted);max-width:44em;margin-inline:auto}
.bio-hero .bio-lede strong{color:var(--ink);font-weight:500}
/* v5: чип-подсказка превращён в кликабельную кнопку-якорь — скроллит к оглавлению (#toc).
   Плавный скролл обеспечивает html{scroll-behavior:smooth} + [id]{scroll-margin-top}. */
.bio-hero .bio-note{margin-top:var(--s4);display:inline-flex;align-items:center;gap:var(--s2);
  background:var(--lede-bg);border:1px solid var(--hair);padding:var(--s2) var(--s3);
  font-size:var(--fs-xs);color:var(--muted);text-decoration:none;cursor:pointer;
  transition:border-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.bio-hero .bio-note:hover{border-color:var(--gold);color:var(--ink)}
.bio-hero .bio-note:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.bio-hero .bio-note b{color:var(--gold);font-family:var(--display);font-weight:400;
  font-variant-numeric:lining-nums tabular-nums}


/* ══════════════════════════════════════════════════════════════════════════
   10. РАСКЛАДКА ЛОНГРИДА — оглавление (sticky) | статья
   ══════════════════════════════════════════════════════════════════════════ */
.bio-layout .frame{padding-block:var(--s6);
  display:grid;grid-template-columns:minmax(200px,3fr) minmax(0,9fr);
  column-gap:var(--col-gap);align-items:start}

/* sticky-оглавление */
.toc{position:sticky;top:calc(var(--header-h) + var(--s3))}
.toc__title{font-size:var(--fs-2xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin-bottom:var(--s3)}
.toc__list{list-style:none;counter-reset:toc;display:flex;flex-direction:column;gap:2px}
.toc__list a{counter-increment:toc;display:flex;gap:var(--s2);align-items:baseline;
  padding:var(--s1) 0;font-size:var(--fs-xs);color:var(--muted);line-height:1.35;
  border-left:2px solid transparent;padding-left:var(--s2);margin-left:-2px;
  transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease)}
.toc__list a::before{content:counter(toc,decimal-leading-zero);flex:none;
  font-family:var(--display);font-weight:400;font-size:var(--fs-2xs);color:var(--gold);
  font-variant-numeric:lining-nums tabular-nums;min-width:1.8em}
.toc__list a:hover{color:var(--ink)}
.toc__list a.is-active{color:var(--ink);border-left-color:var(--gold)}
.toc__list a.is-active::before{color:var(--gold)}
.toc__cta{display:inline-flex;align-items:center;gap:var(--s1);margin-top:var(--s4);
  padding-top:var(--s3);border-top:1px solid var(--hair);
  font-size:var(--fs-xs);color:var(--faint);transition:color .15s}
.toc__cta:hover{color:var(--gold)}

/* колонка статьи; counter-reset:chap — сквозная нумерация глав через ::before у h2 */
.bio-article{display:flex;flex-direction:column;gap:var(--s6);min-width:0;counter-reset:chap}


/* ══════════════════════════════════════════════════════════════════════════
   11. ГЛАВЫ — номер (счётчик перед заголовком), заголовок, подзаголовок, проза
   ══════════════════════════════════════════════════════════════════════════ */
.chapter{min-width:0;counter-increment:chap}
/* заголовок ограничен шириной текстовой колонки (как .chapter-body: 64ch) */
.chapter-head{margin-bottom:var(--s4);max-width:64ch}
.chapter h2{font-family:var(--display);font-weight:300;font-size:var(--fs-xl);line-height:1.1;
  letter-spacing:.01em;color:var(--ink);text-wrap:balance}
/* номер главы «приклеен» к заголовку золотым префиксом NN. (01…09) */
.chapter-head h2::before{content:counter(chap,decimal-leading-zero)". ";
  color:var(--gold);font-weight:400;
  font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum","tnum"}
/* курсив-подзаголовок из wireframe → золотой кикер-строка (без наклона) */
.chapter .chapter-kicker{margin-top:var(--s2);font-size:var(--fs-xs);letter-spacing:.02em;
  color:var(--gold);text-transform:none}
/* внутренний H3-подзаголовок главы */
.chapter h3{font-family:var(--display);font-weight:400;font-size:var(--fs-lg);line-height:1.15;
  color:var(--ink);margin:var(--s4) 0 var(--s1)}
/* проза — единый читаемый столбец ~64ch; вертикальный ритм «совиным» отступом,
   чтобы врезки/фото/карточки делили один ритм с абзацами */
.chapter-body{max-width:64ch}
.chapter-body>*+*{margin-top:var(--s3)}
.chapter-body>h3{margin-top:var(--s4)}
.chapter-body p{font-size:var(--fs-s);line-height:1.7;color:var(--muted)}
.chapter-body strong{color:var(--ink);font-weight:600}


/* ══════════════════════════════════════════════════════════════════════════
   12. ВРЕЗКИ — цитата (border-left) / факт с цифрой / фото-цитата
   ══════════════════════════════════════════════════════════════════════════ */
/* цитата-врезка: золотая черта слева, лёгкая подложка */
.bio-quote{border-left:2px solid var(--gold);background:var(--lede-bg);
  padding:var(--s3) var(--s4);max-width:64ch}
.bio-quote p{font-size:var(--fs-base);line-height:1.6;color:var(--ink)}
.bio-quote p+p{margin-top:var(--s2)}
.bio-quote .q-lead{font-weight:600;color:var(--ink);margin-bottom:var(--s1)}
.bio-quote--muted p{color:var(--muted);font-style:italic}
.bio-quote cite{display:block;margin-top:var(--s2);font-style:normal;
  font-size:var(--fs-xs);color:var(--faint)}

/* факт-врезка с крупной цифрой */
.bio-fact{display:flex;gap:var(--s4);align-items:baseline;
  border:1px solid var(--rule);padding:var(--s4);max-width:64ch}
.bio-fact .fact-n{font-family:var(--display);font-weight:300;font-size:var(--fs-2xl);line-height:1;
  color:var(--gold);flex:none;letter-spacing:0;
  font-variant-numeric:lining-nums tabular-nums;font-feature-settings:"lnum","tnum"}
.bio-fact .fact-t{font-size:var(--fs-xs);line-height:1.55;color:var(--muted)}
.bio-fact .fact-t strong{color:var(--ink);font-weight:600}
/* «Награда» / метка сверху врезки */
.bio-fact .fact-k{display:block;font-size:var(--fs-2xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);margin-bottom:var(--s1)}

/* фото-цитата: подпись «ФОТО» + текст, тонкая черта слева */
.bio-photo-quote{border-left:2px solid var(--rule);padding:var(--s2) var(--s4);
  max-width:64ch}
.bio-photo-quote .pq-k{font-size:var(--fs-2xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);margin-bottom:var(--s2)}
.bio-photo-quote p{font-size:var(--fs-xs);line-height:1.65;color:var(--muted);font-style:italic}


/* ══════════════════════════════════════════════════════════════════════════
   13. КАРТОЧКИ КОМПЕТЕНЦИЙ (глава «Академия») — 4 части + вложенные этапы
   ══════════════════════════════════════════════════════════════════════════ */
.comp-cards{display:flex;flex-direction:column;gap:var(--s2);max-width:64ch}
.comp-card{border:1px solid var(--rule);padding:var(--s4);background:var(--bg-alt)}
.comp-card .cc-k{font-size:var(--fs-2xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);margin-bottom:var(--s1)}
.comp-card h3{font-family:var(--display);font-weight:500;font-size:var(--fs-md);line-height:1.2;
  color:var(--ink);margin:0 0 var(--s2)}
.comp-card p{font-size:var(--fs-xs);line-height:1.6;color:var(--muted)}
/* вложенные подкарточки (Этап I / Этап II) */
.comp-sub{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s3)}
.comp-sub .comp-subcard{border:1px solid var(--hair);background:var(--surface);padding:var(--s3)}
.comp-sub .cs-t{font-size:var(--fs-xs);font-weight:600;color:var(--ink);margin-bottom:var(--s1)}
.comp-sub p{font-size:var(--fs-xs);line-height:1.6;color:var(--muted)}


/* ══════════════════════════════════════════════════════════════════════════
   14. ФИНАЛЬНЫЙ CTA + КОНТАКТЫ — глубокая тёмная панель (--deep)
       Блок контактов продублирован с лендинга (#contacts), палитра совпадает.
   ══════════════════════════════════════════════════════════════════════════ */
.bio-cta{background:var(--deep);color:var(--on-dark)}
.bio-cta .frame{padding-block:var(--s6)}
.bio-cta__inner{text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:var(--s3);max-width:44em;margin-inline:auto}
.bio-cta h2{font-family:var(--display);font-weight:300;font-size:var(--fs-h2);line-height:1.05;
  letter-spacing:.02em;color:var(--on-dark)}
.bio-cta p{font-size:var(--fs-base);line-height:1.6;color:var(--on-dark-faint);max-width:36em}
/* v5: строка-футер формы — submit слева, «На главную» справа (по аннотации) */
.c-form__actions{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s3);margin-top:var(--s2);flex-wrap:wrap}

/* ── контакты (перенос из лендинга §18): инфо + форма ── */
.contacts{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--col-gap);
  margin-top:var(--s5);align-items:start}
.c-info,.c-form{min-width:0}
.ci{margin-bottom:var(--s4)}
.ci-k{font-size:var(--fs-2xs);letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-faint);margin-bottom:var(--s1)}
.ci-v{font-size:var(--fs-lg);font-weight:500;color:var(--on-dark)}
/* подчёркивание проявляется цветом на hover */
a.ci-v{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;
  text-decoration-color:transparent;
  transition:text-decoration-color var(--dur-fast) var(--ease),opacity .15s}
a.ci-v:hover{text-decoration-color:var(--gold);opacity:1}
.chans{margin-top:var(--s5)}
.chan-row{display:flex;flex-wrap:wrap;gap:var(--s1);margin-top:var(--s2);align-items:flex-start}
/* Telegram-чип = столбик «чип + подпись под ним»; align-items:flex-start → чип MAX по верху */
.chan-item{display:inline-flex;flex-direction:column;gap:6px}
.chan-lbl{font-size:var(--fs-2xs);color:var(--on-dark-faint);letter-spacing:.04em;padding-left:2px}
.chan{display:inline-flex;align-items:center;gap:var(--s1);border:1px solid var(--hair-dark);padding:8px 16px;font-size:var(--fs-xs);color:var(--on-dark);transition:background .15s,border-color .15s}
.chan:hover{background:var(--chan-hover);border-color:var(--hair-dark-strong)}
.chan-ico{width:16px;height:16px;flex:none;fill:currentColor}
.form-t{font-size:var(--fs-2xs);letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-faint);margin-bottom:var(--s3)}
.field{display:block;width:100%;background:transparent;border:1px solid var(--hair-dark);color:var(--on-dark);
  font:inherit;font-size:var(--fs-xs);padding:12px 14px;margin-bottom:var(--s2)}
.field::placeholder{color:var(--on-dark-faint)}
textarea.field{min-height:96px;resize:vertical}
.field:focus{outline:none;border-color:var(--hair-dark-strong)}
/* v5: submit теперь внутри .c-form__actions — отступ несёт сам ряд, у кнопки сброшен */
.c-form__actions .btn[type="submit"]{margin-top:0}


/* ══════════════════════════════════════════════════════════════════════════
   15. ФУТЕР
   ══════════════════════════════════════════════════════════════════════════ */
.site-footer{border-top:1px solid var(--hair)}
.site-footer .frame{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap;padding-block:var(--s4)}
.ft-l{display:flex;align-items:center;gap:12px;font-size:var(--fs-xs);color:var(--muted)}
.ft-logo{width:28px;height:28px;flex:none;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,var(--photo-1),var(--photo-3))}
.ft-logo svg{width:60%;height:auto;color:var(--ink);opacity:.4}
.ft-r{display:flex;gap:var(--s4);font-size:var(--fs-xs);flex-wrap:wrap}
.ft-r a{color:var(--faint);transition:color .15s}
.ft-r a:hover{color:var(--ink)}


/* ══════════════════════════════════════════════════════════════════════════
   16. АДАПТИВ — по убыванию брейкпоинта
   ══════════════════════════════════════════════════════════════════════════ */
/* контакты в шапке помещаются без тесноты только на широком экране */
@media(max-width:1360px){
  .header-contacts{display:none}
}
/* «узкая» зона: шапка = лого/имя + бургер; nav и header-actions уходят в оверлей */
@media(max-width:1140px){
  .nav{display:none}
  .header-actions{display:none}
  .burger{display:flex}
}
/* планшет: оглавление сворачивается наверх, статья — одной колонкой */
@media(max-width:900px){
  .bio-layout .frame{grid-template-columns:1fr;row-gap:var(--s5)}
  .toc{position:static;top:auto;
    border:1px solid var(--rule);padding:var(--s4)}
  .toc__list{gap:var(--s1)}
  .bio-article{gap:var(--s5)}
  /* контакты в CTA — одной колонкой (инфо над формой) */
  .contacts{grid-template-columns:1fr;row-gap:var(--s5)}
}
/* телефон: ужатый воздух, факт-врезка в столбик */
@media(max-width:600px){
  /* bio-v9: телефонный override размеров тела удалён — теперь база :root уже
     15px / проза 14px (см. §1), десктоп = мобилка, дублировать не нужно. */
  .bio-hero .frame,.bio-layout .frame{padding-block:var(--s5)}
  .bio-fact{flex-direction:column;gap:var(--s2)}
  /* v5: футер формы — стек на телефоне, обе кнопки во всю ширину */
  .c-form__actions{flex-direction:column;align-items:stretch;width:100%}
  .c-form__actions .btn{width:100%;justify-content:center}
}
/* очень узкие экраны: подзаголовок brand скрыт, пункты меню мельче */
@media(max-width:420px){
  .brand .sub{display:none}
  .mobile-menu__nav a{font-size:var(--fs-md)}
}


/* ══════════════════════════════════════════════════════════════════════════
   17. ДВИЖЕНИЕ — prefers-reduced-motion выключает анимации/переходы
   ══════════════════════════════════════════════════════════════════════════ */
@media(prefers-reduced-motion:reduce){
  .grain{animation:none}
  .mobile-menu,.burger__line{transition:none}
}