/* Шрифты на своём сервере: ни третьей стороны, ни блокирующего запроса к чужому домену.
   Onest — variable (один файл на все веса 400–700), Plex Mono — статические 400/500/600.
   Подмножества latin/cyrillic: браузер берёт только нужные тексту на экране. */
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-400-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-500-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-500-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-600-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-600-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/ibm-plex-mono-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/onest-400-700-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/onest-400-700-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/onest-400-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(fonts/onest-400-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  color-scheme:light;

  /* цвет: «индиго и латунь». Глубокий синий — структура, латунь — единственный акцент.
     ВНИМАНИЕ: имена --violet и --chart остались от прежней палитры (фиолетовый + шартрез),
     цвета под ними теперь индиго и латунные. Имена не переименованы намеренно:
     они встречаются в сотнях мест по всем страницам, а визуально это ничего не меняет.
     --violet = индиго (структура), --chart = латунь (акцент). */
  --ground:#FFFFFF; --sunk:#F4F5F9;
  --ink:#12131F; --soft:#454857; --mute:#65687B;
  --rule:#E2E3EC;
  --violet:#2E3192; --violet-soft:#E7E8F6; --violet-mid:#9FA2E0;
  --deep:#14163F; --deep-2:#22254F;
  --on-deep:#FFFFFF; --on-deep-soft:#C3C6EE; --on-deep-mute:#8E92C4;
  --chart:#E3B23C; --chart-text:#3D2A00;

  /* шрифт и движение */
  --f-ui:"Onest",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);

  /* ручки страницы: страница переопределяет в своём :root */
  --h1-size:clamp(2.5rem,1.4rem + 4vw,4.8rem); --h1-lh:1; --h1-ls:-.035em; --h1-max:16ch;
  --h2-size:clamp(1.8rem,1.1rem + 2.4vw,3rem); --h2-lh:1.06; --h2-ls:-.03em; --h2-max:20ch;
  --lede-size:clamp(1.1rem,1rem + .5vw,1.3rem); --lede-lh:1.5; --lede-max:48ch;
  --sec-pad:5rem; --sec-pad-sm:3.2rem;
  --hero-pad:4.6rem 0 3rem;
}

*{box-sizing:border-box;margin:0;padding:0}
img{max-width:100%}
[hidden]{display:none!important}
body{background:var(--ground);color:var(--ink);font-family:var(--f-ui);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--violet);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
a:focus-visible,button:focus-visible{outline:2px solid var(--violet);outline-offset:3px}
.wrap{max-width:74rem;margin:0 auto;padding:0 2rem}
@media(max-width:640px){.wrap{padding:0 1.2rem}}

/* Язык: !important обязателен, иначе любое правило вида «.block span{display:block}»
   перебивает скрытие по специфичности и показывает обе версии разом. */
[data-lang]{display:none!important}
html:not([lang="ru"]) [data-lang="en"],html[lang="ru"] [data-lang="ru"]{display:revert!important}

/* Skip-link: виден только с клавиатуры, по фокусу всплывает над шапкой. */
.skip{position:absolute;left:-999px;top:.6rem;z-index:30;background:var(--chart);color:var(--chart-text);padding:.55rem .9rem;font-weight:600;text-decoration:none;border-radius:2px}
.skip:focus{left:1rem}
/* шапка */
header.top{border-bottom:1px solid var(--rule);position:sticky;top:0;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);z-index:20}
header.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:3.4rem}
.brand{font-weight:600;font-size:.95rem;color:var(--ink);text-decoration:none}
nav.main{display:flex;gap:1.4rem;align-items:center;margin-left:auto}
nav.main a{color:var(--soft);text-decoration:none;font-size:.9rem;white-space:nowrap;display:inline-block;padding:.55rem .15rem;line-height:1.2}
nav.main a:hover{color:var(--violet)}
nav.main a.on{color:var(--ink);text-decoration:underline;text-decoration-color:var(--chart);text-decoration-thickness:2px;text-underline-offset:5px}
nav.main a.on:hover{color:var(--violet)}
.lang{display:flex;border:1px solid var(--rule);border-radius:2px;overflow:hidden;margin-left:.4rem}
.lang button{font:inherit;font-family:var(--f-mono);font-size:.7rem;font-weight:600;letter-spacing:.06em;padding:.5rem .7rem;border:0;background:#fff;color:var(--mute);cursor:pointer;transition:background .2s var(--ease),color .2s var(--ease)}
.lang button[aria-pressed="true"]{background:var(--chart);color:var(--chart-text)}
@media(max-width:640px){nav.main{gap:.8rem} nav.main a{font-size:.8rem} .brand{font-size:.86rem}}
/* На узком экране шапка встаёт в две строки: русские пункты меню в одну не помещаются. */
@media(max-width:560px){
  header.top .wrap{height:auto;flex-wrap:wrap;padding-top:.5rem;padding-bottom:.5rem;row-gap:.45rem;column-gap:.6rem}
  .brand{white-space:nowrap}
  /* Переключатель языка уходит в первую строку к имени, а пункты меню — во вторую:
     иначе на узком экране русское меню выдавливает кнопку RU за край. */
  nav.main{order:3;width:100%;gap:.9rem;flex-wrap:wrap;margin-left:0}
  /* Тач-таргеты не мельче 24px (WCAG 2.2 AA, Target Size Minimum). */
  nav.main a{padding:.5rem .15rem;min-height:24px;display:inline-flex;align-items:center}
  .lang button{padding:.45rem .6rem;min-height:24px}
  .lang{order:2;margin-left:auto}
  header.top .wrap>.lang,header.top nav.main>.lang{margin-left:auto}
}

/* типографика */
.eyebrow{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.eyebrow b{color:var(--violet);font-weight:600}
h1{font-weight:700;font-size:var(--h1-size);line-height:var(--h1-lh);letter-spacing:var(--h1-ls);text-wrap:balance;max-width:var(--h1-max)}
h2{font-weight:700;font-size:var(--h2-size);line-height:var(--h2-lh);letter-spacing:var(--h2-ls);text-wrap:balance;max-width:var(--h2-max)}
h1 em,h2 em{font-style:normal;color:var(--violet)}
.lede{font-size:var(--lede-size);line-height:var(--lede-lh);max-width:var(--lede-max);color:var(--soft);text-wrap:pretty}
.note{color:var(--soft);max-width:56ch;text-wrap:pretty}
.note b{color:var(--ink);font-weight:600}
.num{font-family:var(--f-mono);font-weight:600;letter-spacing:-.045em;line-height:.88;font-variant-numeric:tabular-nums}
mark{background:var(--chart);color:var(--ink);padding:0 .18em;box-decoration-break:clone;-webkit-box-decoration-break:clone}

/* ФЛОМАСТЕР. Правило: зелёный — цифры, фиолетовый — мысли. 2–4 пометки на страницу, не больше.
   Кольцо (.circled) и заливка (mark) — для цифр; подчёркивание (.ul) — для мыслей. */
.circled{position:relative;display:inline-block;--px:.34em;--py:.30em}
.circled.wide{--px:.75em;--py:.42em}                       /* одиночная цифра: кольцо шире глифа */
.circled .ring{position:absolute;left:calc(-1*var(--px));top:calc(-1*var(--py));width:calc(100% + 2*var(--px));height:calc(100% + 2*var(--py));overflow:visible;pointer-events:none}
.circled .ring path{fill:none;stroke:var(--chart);stroke-width:2.5;stroke-linecap:round;vector-effect:non-scaling-stroke}
.circled.lt{--px:.42em;--py:.20em}                        /* в заголовке: шире по горизонтали, но низкое — иначе наедет на соседнюю строку */
.circled.lt.wide{--px:.75em;--py:.42em}                   /* одиночная цифра на светлом: побеждают широкие отступы wide */
.circled.lt .ring path{stroke-width:3.6}                  /* на светлом фоне штрих толще, как хайлайтер */
/* Кольцо проявляется слева направо при появлении блока. Не пунктиром: у non-scaling-stroke длина
   пунктира считается в экранных пикселях, и большие кольца рисовались не до конца. */
.rise .circled .ring{clip-path:inset(-25% 100% -25% -25%);transition:clip-path 1.1s var(--ease) .45s}
.rise.in .circled .ring{clip-path:inset(-25% -25% -25% -25%)}
.ul{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6 C18 3 30 8 48 5 S80 3 96 6 S112 8 118 4' fill='none' stroke='%232E3192' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:repeat-x;background-position:0 100%;background-size:6em .5em;padding-bottom:.14em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.deep .ul,.fact .ul{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M2 6 C18 3 30 8 48 5 S80 3 96 6 S112 8 118 4' fill='none' stroke='%239FA2E0' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E")}

/* полосы */
section{padding:var(--sec-pad) 0}
/* Две тёмные полосы подряд («Вне работы» и контакты) читались бы как провал:
   между ними набегало 10rem пустоты. Схлопываем стык и делим тонкой линией —
   финал страницы остаётся одним тёмным блоком с внятной границей. */
.deep + .deep{padding-top:var(--sec-pad);border-top:1px solid rgba(255,255,255,.14)}
.deep:has(+ .deep){padding-bottom:0}
@media(max-width:640px){.deep + .deep{padding-top:var(--sec-pad-sm)}}
@media(max-width:640px){section{padding:var(--sec-pad-sm) 0}}
.sunk{background:var(--sunk)}
.deep{background:var(--deep);color:var(--on-deep)}
.deep .eyebrow{color:var(--on-deep-mute)} .deep .eyebrow b{color:var(--violet-mid)}
.deep h2 em{color:var(--violet-mid)}
.deep .note{color:var(--on-deep-soft)} .deep .note b{color:#fff}
.deep a{color:#fff}
.head{display:flex;flex-direction:column;gap:1rem;margin-bottom:2.6rem}
@media(max-width:640px){.head{margin-bottom:1.8rem}}

/* герой */
.hero{padding:var(--hero-pad)}
.hero .wrap{display:flex;flex-direction:column;gap:1.2rem}
.crumb{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.crumb a{color:var(--violet);text-decoration:underline;text-decoration-color:var(--violet-mid);text-decoration-thickness:1px;text-underline-offset:3px} .crumb a:hover{text-decoration-color:var(--violet)}
.crumb b{color:var(--violet);font-weight:600}
.meta{display:flex;flex-wrap:wrap;gap:.4rem 1.8rem;font-family:var(--f-mono);font-size:.72rem;color:var(--mute)}
.meta b{color:var(--ink);font-weight:500}

/* появление: блок виден всегда, движется только смещение */
/* Блок не просто выезжает, а проявляется: движение читается как воздух.
   Прозрачность включается ТОЛЬКО когда скрипт поставил .rv на <html>:
   без JS страница осталась бы пустой, а так блоки просто сдвинуты. */
.rise{transform:translateY(14px);transition:transform .7s var(--ease)}
.rise.in{transform:none}
.rv .rise{opacity:0;transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv .rise.in{opacity:1}
.rise.d1{transition-delay:.06s}.rise.d2{transition-delay:.12s}.rise.d3{transition-delay:.18s}

/* подвал */
footer{padding:1.8rem 0 3rem;border-top:1px solid var(--rule)}
footer .wrap{display:flex;flex-wrap:wrap;gap:.6rem 2rem;align-items:baseline;font-size:.92rem;color:var(--soft);overflow-wrap:anywhere}
/* Тач-таргеты футера и брендовой ссылки — не мельче 24px (WCAG 2.2 AA). */
footer .wrap a{min-height:24px;display:inline-flex;align-items:center}
.brand{min-height:24px;display:inline-flex;align-items:center}
/* На узких экранах подпись справа перестаёт прижиматься и встаёт в свою строку. */
@media(max-width:420px){footer .c{margin-left:0;width:100%}}
footer .c{margin-left:auto;font-family:var(--f-mono);font-size:.7rem;color:var(--mute)}

@media (prefers-reduced-motion:reduce){*{transition:none!important} .rise{transform:none} .circled .ring{clip-path:none!important}}


/* ─── Печать ────────────────────────────────────────────────
   Рекрутеры печатают страницу в PDF. Убираем липкую шапку и тёмные
   заливки (съедают тонер), раскрываем оба языка нельзя — печатаем
   тот, что выбран. У ссылок дописываем адрес: на бумаге он не кликается. */
@media print{
  :root{--ground:#fff;--sunk:#fff}
  header.top{position:static;border-bottom:1px solid #ccc}
  .lang,.skip,.swipe,.gantt-point{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .deep,.fact,section.deep{background:#fff!important;color:#000!important}
  .deep *,.fact *{color:#000!important;border-color:#bbb!important}
  .dst{background:#f2f2f2!important;color:#000!important}
  a{color:#000;text-decoration:underline}
  /* Внешние ссылки — с адресом; внутренние якоря и mailto оставляем как есть. */
  main a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#444;word-break:break-all}
  footer a[href^="http"]::after{content:""}
  img,picture,figure,.gantt,table{break-inside:avoid;page-break-inside:avoid}
  h1,h2,h3{break-after:avoid;page-break-after:avoid}
  .case,section{break-inside:auto}
  /* Двухколоночный герой в печати наезжал фото на текст: один столбец,
     фото в потоке, без поворота и тени (на бумаге они только мешают). */
  .hero .wrap{display:block!important}
  .hero-visual{display:block!important;width:auto!important;margin:5mm 0!important;
               grid-column:auto!important;grid-row:auto!important;justify-self:auto!important;
               position:static!important;float:none!important}
  .bw-stack{position:static!important;width:48mm!important;margin:0!important}
  .bw-stack img{position:static!important;transform:none!important;box-shadow:none!important;
                width:100%!important;height:auto!important}
  /* Декоративная графика (росчерки, «глаз») в печати отвязывается от блока
     и ложится поверх текста. Смысла не несёт — скрываем. Схемы и кольца остаются. */
  .bw-ink,.scribble{display:none!important}
  /* Гант шире печатной полосы (9 колонок): ужимаем под ширину страницы,
     иначе правые недели обрежутся. */
  .gantt{overflow:visible!important;border:1px solid #bbb!important;background:#fff!important}
  .gantt table{min-width:0!important;width:100%!important;font-size:6.5pt!important;table-layout:fixed}
  .gantt td,.gantt th{padding:.15rem .2rem!important;word-break:break-word;overflow-wrap:anywhere}
  .gantt td.n{width:22%!important;white-space:normal!important}
  .gantt td.n small{font-size:5.5pt!important}
  footer{border-top:1px solid #ccc;margin-top:1.5rem}
  @page{margin:14mm}
}