/* =========================================================================
   Диана Веренкова - личный сайт
   Живая типографика (Roboto Flex), модульная сетка, плоские цвета.

   Устройство файла:
     1. Токены      - все значения дизайна: цвет, шрифт, размеры, отступы, линии, движение
     2. База        - сброс, общие элементы
     3. Каркас      - сетка, шапка, меню, переходы, бегущие строки, подвал
     4. Экраны      - главная, кейсы, кейс, резюме, обо мне, рисую
     5. Движение    - сборка заголовков при прокрутке, меньше движения
     6. Печать      - резюме на трёх листах A4
   Контрольные точки: 1180 (шапка без номеров), 900 (меню вместо навигации),
   760 (телефон: сетка 4 колонки), 400 (узкий телефон).
   ========================================================================= */

/* Анимируемые оси шрифта (значения задают скрипты и :hover) */
@property --w    { syntax: '<number>'; inherits: true; initial-value: 700; }
@property --d    { syntax: '<number>'; inherits: true; initial-value: 100; }
@property --dcur { syntax: '<number>'; inherits: true; initial-value: 100; }
@property --cd   { syntax: '<number>'; inherits: true; initial-value: 80; }


/* =========================================================================
   1. ТОКЕНЫ
   ========================================================================= */

/* ---------- 1.1 Цвет: светлая тема ---------- */
:root {
  --paper:   #ffffff;               /* фон */
  --paper-2: #f1f0eb;               /* подложка картинок и кода */
  --ink:     #0b0b0b;               /* основной текст и линии */
  --ink-2:   #3a3a3a;               /* второстепенный текст */
  --ink-3:   #636363;               /* подписи */
  --hair:    rgba(11, 11, 11, .14); /* тонкие разделители */
  --guide:   rgba(11, 11, 11, .02); /* колонки сетки на фоне */
  --grad: 0;                        /* ось GRAD: в тёмной теме буквы чуть легче */

  /* акценты разделов: цвет / цвет мелкого текста / текст на заливке */
  --ultra:  #2b2bff; --ultra-ink:  #2b2bff; --on-ultra:  #ffffff;  /* главная, обо мне */
  --orange: #ff4f00; --orange-ink: #c23a00; --on-orange: #0b0b0b;  /* кейсы */
  --purple: #9b00ff; --purple-ink: #8a00e6; --on-purple: #ffffff;  /* резюме */

  --shadow-art: 0 18px 50px rgba(0, 0, 0, .18);
  --backdrop:   rgba(12, 12, 12, .88);

  color-scheme: light;
}

/* ---------- 1.2 Цвет: тёмная тема - не инверсия, а ночная вывеска ---------- */
:root[data-theme="dark"] {
  --paper:   #0c0c0c;
  --paper-2: #171717;
  --ink:     #efece4;
  --ink-2:   #c9c5bb;
  --ink-3:   #9c988f;
  --hair:    rgba(239, 236, 228, .15);
  --guide:   rgba(239, 236, 228, .025);
  --grad: -30;

  --ultra:  #3a86ff; --ultra-ink:  #6aa5ff; --on-ultra:  #0c0c0c;
  --orange: #ff6a1a; --orange-ink: #ff8240; --on-orange: #0c0c0c;
  --purple: #c46bff; --purple-ink: #d18cff; --on-purple: #0c0c0c;

  --shadow-art: 0 18px 60px rgba(0, 0, 0, .55);

  color-scheme: dark;
}

/* ---------- 1.3 Цвет раздела: --acc и производные ---------- */
[data-room="home"], [data-room="wish"] { --acc: var(--ultra);  --acc-ink: var(--ultra-ink);  --on-acc: var(--on-ultra);  --acc-big: var(--ultra); }
[data-room="blog"]                     { --acc: var(--orange); --acc-ink: var(--orange-ink); --on-acc: var(--on-orange); --acc-big: var(--orange); }
[data-room="cv"]                       { --acc: var(--purple); --acc-ink: var(--purple-ink); --on-acc: var(--on-purple); --acc-big: var(--purple); }

/* ---------- 1.4 Шрифт, сетка, линии, движение ---------- */
:root {
  --font: "Roboto Flex", "Arial Narrow", Arial, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, "Courier New", monospace;

  /* сетка: 12 колонок (на телефоне 4) */
  --bar: 58px;                         /* высота шапки */
  --pad: clamp(16px, 2.6vw, 44px);     /* поля страницы */
  --gut: clamp(12px, 1.6vw, 24px);     /* зазор между колонками */

  /* вертикальный ритм между блоками */
  --gap-section: clamp(80px, 11vw, 180px);   /* блоки главной */
  --gap-block:   clamp(72px, 9vw, 150px);    /* блоки резюме и «Обо мне» */
  --gap-footer:  clamp(64px, 10vw, 160px);   /* до строки «Дальше» */

  /* линии */
  --rule-hair:  1px;
  --rule-thin:  1.5px;
  --rule:       2px;
  --rule-bold:  3px;

  /* размеры мелкого текста */
  --fs-mono:  13px;
  --fs-note:  12px;
  --fs-body:  17px;
  --fs-small: 15px;
  --fs-ui:    16px;
  --fs-text:  18px;

  /* движение */
  --ease:    cubic-bezier(.2, .8, .2, 1);   /* основной выход */
  --ease-io: cubic-bezier(.7, 0, .3, 1);    /* шторка, маятники */
  --t-fast:  .2s;
  --t:       .3s;
  --t-mid:   .45s;
  --t-slow:  .6s;
  --t-slower:.7s;
}

/* ---------- 1.5 Типографика: крупные размеры по ролям ---------- */
:root {
  --fs-section:  clamp(52px, 9.4vw, 170px);  /* «КЕЙСЫ», «ОПЫТ»... */
  --fs-marquee:  clamp(34px, 5.2vw, 88px);   /* бегущая строка */
  --fs-next:     clamp(48px, 9vw, 160px);    /* «ДАЛЬШЕ →» */
  --fs-greet:    clamp(22px, 2.35vw, 40px);  /* приветствие на главной */
  --fs-contact:  clamp(30px, 6vw, 112px);    /* строки контактов */
  --fs-cv-name:  clamp(36px, 4.4vw, 76px);
  --fs-cv-six:   clamp(200px, 30vw, 520px);  /* «8 лет» */
  --fs-cv-year:  clamp(96px, 14vw, 250px);
  --fs-cv-place: clamp(26px, 2.6vw, 44px);
  --fs-cv-group: clamp(30px, 3.6vw, 60px);
  --fs-proj:     clamp(40px, 5vw, 92px);
  --fs-skill:    clamp(30px, 4.2vw, 72px);
  --fs-fact:     clamp(56px, 7.4vw, 136px);
  --fs-lede:     clamp(20px, 2vw, 32px);
  --fs-case-num: clamp(170px, 28vw, 500px);
  --fs-case-t:   clamp(34px, 4.6vw, 80px);
  --fs-stat:     clamp(88px, 11vw, 200px);
  --fs-counter:  clamp(120px, 15vw, 260px);
  --fs-about:    clamp(30px, 3.4vw, 60px);
  --fs-art-lead: clamp(40px, 5.6vw, 104px);
  --fs-art-h:    clamp(56px, 9vw, 170px);
}

/* ---------- 1.6 Типографика: начертания по ролям (оси Roboto Flex) ----------
   wght - насыщенность, wdth - ширина, opsz - оптический размер, GRAD - поправка темы.
   Начертания с живыми осями (--w, --d, --dcur, --cd, --hw) записаны прямо в правилах:
   переменная-токен вычисляется на :root, и живое значение туда бы не дошло. */
:root {
  --v-body:        "GRAD" var(--grad);
  --v-btn:         "wght" 650, "wdth" 100, "GRAD" var(--grad);
  --v-nav:         "wght" 600, "wdth" 100, "GRAD" var(--grad);
  --v-nav-hover:   "wght" 800, "wdth" 112, "GRAD" var(--grad);
  --v-logo:        "wght" 900, "wdth" 60, "opsz" 36;
  --v-logo-hover:  "wght" 400, "wdth" 140, "opsz" 36;
  --v-menu:        "wght" 850, "wdth" 70, "opsz" 144;
  --v-wipe:        "wght" 900, "wdth" 55, "opsz" 144;
  --v-marquee:     "wght" 760, "wdth" 110, "opsz" 144;
  --v-marquee-thin:"wght" 320, "wdth" 140, "opsz" 144;
  --v-next:        "wght" 900, "wdth" 62, "opsz" 144;
  --v-section:     "wght" 880, "wdth" 78, "opsz" 144, "GRAD" var(--grad);
  --v-greet:       "wght" 520, "wdth" 92, "opsz" 40, "GRAD" var(--grad);
  --v-now:         "wght" 560, "wdth" 96, "GRAD" var(--grad);
  --v-caption:     "wght" 520, "wdth" 96, "GRAD" var(--grad);
  --v-cv-name:     "wght" 820, "wdth" 86, "opsz" 72, "GRAD" var(--grad);
  --v-cv-role:     "wght" 450, "wdth" 100, "GRAD" var(--grad);
  --v-cv-six:      "wght" 1000, "wdth" 25, "opsz" 144;
  --v-cv-six-t:    "wght" 480, "wdth" 90, "opsz" 40, "GRAD" var(--grad);
  --v-cv-six-b:    "wght" 850, "wdth" 90, "opsz" 40, "GRAD" var(--grad);
  --v-cv-year:     "wght" 900, "wdth" 50, "opsz" 144;
  --v-cv-place:    "wght" 800, "wdth" 88, "opsz" 48, "GRAD" var(--grad);
  --v-cv-item:     "wght" 480, "wdth" 100, "GRAD" var(--grad);
  --v-cv-group:    "wght" 860, "wdth" 80, "opsz" 72, "GRAD" var(--grad);
  --v-proj:        "wght" 880, "wdth" 72, "opsz" 144, "GRAD" var(--grad);
  --v-proj-hover:  "wght" 300, "wdth" 130, "opsz" 144, "GRAD" var(--grad);
  --v-habit:       "wght" 640, "wdth" 80, "opsz" 144, "GRAD" var(--grad);
  --v-skill:       "wght" 760, "wdth" 84, "opsz" 72, "GRAD" var(--grad);
  --v-skill-sep:   "wght" 200, "wdth" 100, "opsz" 72;
  --v-fact:        "wght" 880, "wdth" 56, "opsz" 144;
  --v-cta:         "wght" 560, "wdth" 94, "GRAD" var(--grad);
  --v-lede:        "wght" 500, "wdth" 92, "opsz" 36, "GRAD" var(--grad);
  --v-list-n:      "wght" 300, "wdth" 70, "opsz" 36;
  --v-list-n-hover:"wght" 900, "wdth" 40, "opsz" 36;
  --v-list-t:      "wght" 760, "wdth" 86, "opsz" 72, "GRAD" var(--grad);
  --v-chip:        "wght" 850, "wdth" 70;
  --v-case-num:    "wght" 950, "wdth" 25, "opsz" 144;
  --v-case-t:      "wght" 780, "wdth" 88, "opsz" 72, "GRAD" var(--grad);
  --v-toc:         "wght" 500, "wdth" 96, "GRAD" var(--grad);
  --v-toc-current: "wght" 750, "wdth" 96, "GRAD" var(--grad);
  --v-read:        "wght" 400, "wdth" 100, "opsz" 20, "GRAD" var(--grad);
  --v-read-lead:   "wght" 500, "wdth" 96, "opsz" 32, "GRAD" var(--grad);
  --v-read-h:      "wght" 800, "wdth" 92, "opsz" 36, "GRAD" var(--grad);
  --v-quote:       "wght" 680, "wdth" 88, "opsz" 40, "GRAD" var(--grad);
  --v-case-next:   "wght" 820, "wdth" 84, "opsz" 72;
  --v-stat:        "wght" 950, "wdth" 40, "opsz" 144;
  --v-stat-t:      "wght" 500, "wdth" 96, "GRAD" var(--grad);
  --v-about:       "wght" 420, "wdth" 100, "GRAD" var(--grad);
  --v-about-lede:  "wght" 780, "wdth" 86, "opsz" 72, "GRAD" var(--grad);
  --v-counter:     "wght" 950, "wdth" 40, "opsz" 144;
  --v-hint:        "wght" 520, "wdth" 92, "GRAD" var(--grad);
  --v-dot-label:   "wght" 450, "wdth" 100;
  --v-art-lead:    "wght" 760, "wdth" 82, "opsz" 144, "GRAD" var(--grad);
  --v-art-p:       "wght" 440, "wdth" 100, "GRAD" var(--grad);
  --v-art-end:     "wght" 600, "wdth" 92, "GRAD" var(--grad);
  --v-art-h:       "wght" 880, "wdth" 70, "opsz" 144, "GRAD" var(--grad);
  --v-door-year:   "wght" 900, "wdth" 30, "opsz" 144;
  --v-door-now:    "wght" 850, "wdth" 60, "opsz" 144;
}


/* =========================================================================
   2. БАЗА
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--paper); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--bar); }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.45;
  font-variation-settings: var(--v-body);
  font-optical-sizing: auto;
  overflow-x: clip;
  transition: background-color .35s ease, color .35s ease;
}
img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
::selection { background: var(--acc, var(--ultra)); color: var(--on-acc, #fff); }

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 7px var(--acc, var(--ultra));
}

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: fixed; left: 12px; top: -80px; z-index: 200;
  background: var(--ink); color: var(--paper); padding: 12px 16px; text-decoration: none;
  font-weight: 600;
}
.skip:focus { top: 12px; }

.i { width: 1em; height: 1em; flex: none; display: inline-block; vertical-align: -.12em; }

/* Моноширинная подпись капсом - общий стиль меток */
.mono {
  font-family: var(--mono);
  font-size: var(--fs-mono);
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-variation-settings: normal;
}

/* Первый кадр без переходов: цвета комнаты ставятся сразу, а не перетекают из «дома» */
html.is-loading *, html.is-loading *::before, html.is-loading *::after { transition: none !important; }

/* Служебный режим снимков (?y=): прокручивается body */
html.yshot { overflow: hidden; height: 100%; }
html.yshot body { height: 100%; overflow-y: auto; overflow-x: hidden; }
html.yshot .screen.is-entering .fit-line .ch { animation: none !important; }
html.yshot .menu-list a { animation: none !important; opacity: 1; transform: none; }


/* =========================================================================
   3. КАРКАС
   ========================================================================= */

/* ---------- Сетка ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gut);
  padding-inline: var(--pad);
}
.guides {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gut); padding-inline: var(--pad);
  transition: opacity .4s ease;
}
.guides i { background: var(--guide); }
body[data-screen="case"] .guides { opacity: 0; }

main { position: relative; z-index: 1; }
.screen { position: relative; }

/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 48px; padding: 0 20px;
  font-family: var(--font); font-size: var(--fs-ui); line-height: 1;
  font-variation-settings: var(--v-btn);
  border: var(--rule) solid var(--ink); border-radius: 0;
  background: transparent; color: var(--ink); text-decoration: none;
  transition: background-color var(--t-fast) ease, color var(--t-fast) ease, border-color var(--t-fast) ease, transform .15s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn .i { width: 18px; height: 18px; transition: transform var(--t) var(--ease); }
.btn:hover { background: var(--ink); color: var(--paper); }
.btn:hover .i { transform: translateX(3px); }
.btn:active { transform: translateY(2px); }
.btn-fill { background: var(--acc); border-color: var(--acc); color: var(--on-acc); }
.btn-fill:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ---------- Шапка ---------- */
.bar {
  position: sticky; top: 0; z-index: 60;
  height: var(--bar);
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--gut);
  padding-inline: var(--pad);
  background: var(--paper);
  border-bottom: var(--rule-hair) solid var(--ink);
  transition: background-color .35s ease, border-color .35s ease;
}
.bar::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px;
  background: var(--acc); transform-origin: left;
  transition: background-color .5s ease;
}
.bar-nav { display: flex; justify-content: flex-start; gap: 2px; margin-left: -12px; }   /* текст первой вкладки - по краю сетки */
.bar-nav a {
  position: relative;
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 9px 12px 8px; min-height: 40px;
  text-decoration: none; color: var(--ink);
  font-size: var(--fs-small); line-height: 1.2;
  font-variation-settings: var(--v-nav);
  transition: color var(--t-fast) ease, font-variation-settings .35s var(--ease);
}
.bar-nav a i { font-style: normal; font-family: var(--mono); font-size: var(--fs-note); color: var(--ink-3); transition: color var(--t-fast); }
.bar-nav a::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--acc); transform: scaleY(0); transform-origin: bottom;
  transition: transform .35s var(--ease);
}
.bar-nav a:hover { font-variation-settings: var(--v-nav-hover); }
.bar-nav a:hover::after { transform: scaleY(.12); }
.bar-nav a[aria-current="page"] { color: var(--on-acc); }
.bar-nav a[aria-current="page"] i { color: var(--on-acc); }
.bar-nav a[aria-current="page"]::after { transform: scaleY(1); }

.bar-tools { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.theme-btn, .menu-btn, .lang-btn {
  display: inline-flex; align-items: center;
  min-height: 40px;
  border: var(--rule-thin) solid var(--ink); color: var(--ink);
  font-family: var(--mono); font-size: var(--fs-mono); font-weight: 500; letter-spacing: .02em;
  transition: background-color var(--t-fast), color var(--t-fast);
}
.theme-btn, .menu-btn { gap: 8px; padding: 0 12px; background: transparent; text-transform: uppercase; }
.theme-btn .i { width: 16px; height: 16px; transition: transform .5s var(--ease); }
.theme-btn:hover, .menu-btn:hover { background: var(--ink); color: var(--paper); }
.theme-btn:hover .i { transform: rotate(180deg); }
.menu-btn { display: none; justify-self: start; }   /* на узком экране - слева, вместо вкладок */
/* Переключатель языка RU / EN */
.lang-btn { justify-content: center; min-width: 44px; padding: 0 10px; text-decoration: none; }
.lang-btn:hover { background: var(--acc); border-color: var(--acc); color: var(--on-acc); }

@media (max-width: 1180px) {
  .bar-nav a i { display: none; }
  .bar-nav a { padding-inline: 10px; }
  .bar-nav { margin-left: -10px; }
}
@media screen and (max-width: 900px) {
  .bar-nav { display: none; }
  .menu-btn { display: inline-flex; min-height: 44px; }
  .theme-label { display: none; }
  .theme-btn { width: 44px; height: 44px; padding: 0; justify-content: center; }
  .theme-btn .i { width: 18px; height: 18px; }
  .lang-btn { min-height: 44px; }
}

/* ---------- Мобильное меню ---------- */
.menu {
  position: fixed; inset: 0; z-index: 80;
  background: var(--paper); color: var(--ink);
  display: flex; flex-direction: column;
  padding: 0 var(--pad) max(20px, env(safe-area-inset-bottom));
  overflow-y: auto;
}
.menu-top { display: flex; align-items: center; justify-content: space-between; height: var(--bar); border-bottom: var(--rule-hair) solid var(--ink); }
.menu-close { width: 48px; height: 48px; display: grid; place-items: center; background: transparent; border: var(--rule-thin) solid var(--ink); }
.menu-close .i { width: 22px; height: 22px; }
.menu-list { display: flex; flex-direction: column; margin-top: 8px; }
.menu-list a {
  display: flex; align-items: baseline; gap: 14px;
  padding: 6px 0 2px; border-bottom: var(--rule-hair) solid var(--hair);
  text-decoration: none; color: var(--ink);
  font-size: clamp(52px, 17vw, 96px); line-height: .9; text-transform: uppercase;
  font-variation-settings: var(--v-menu);
  opacity: 0; transform: translateY(24px);
  animation: menuIn var(--t-slow) var(--ease) forwards;
  animation-delay: calc(var(--mi, 0) * 60ms + 60ms);
}
.menu-list a:nth-child(1) { --mi: 0; } .menu-list a:nth-child(2) { --mi: 1; }
.menu-list a:nth-child(3) { --mi: 2; } .menu-list a:nth-child(4) { --mi: 3; }
.menu-list a i { font-style: normal; font-family: var(--mono); font-size: var(--fs-mono); color: var(--ink-3); transform: translateY(-1.6em); }
.menu-list a[aria-current="page"] span { color: var(--acc-big); }
.menu-list a[aria-current="page"] { box-shadow: inset 8px 0 0 var(--acc); padding-left: 18px; }
.menu-foot { margin-top: auto; padding-top: 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
@keyframes menuIn { to { opacity: 1; transform: none; } }

/* ---------- Переход между разделами: цветная шторка ---------- */
.wipe {
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  background: var(--acc); color: var(--on-acc);
  display: flex; align-items: flex-end; padding: var(--pad);
  transform: translateY(100%); visibility: hidden;
}
.wipe-word {
  font-size: clamp(64px, 17vw, 300px); line-height: .8; text-transform: uppercase; white-space: nowrap;
  font-variation-settings: var(--v-wipe);
}

/* ---------- Бегущие строки ---------- */
.marquee {
  position: relative; overflow: hidden; white-space: nowrap;
  background: var(--acc); color: var(--on-acc);
  border-block: var(--rule-hair) solid var(--ink);
  user-select: none;
}
.mq-track { display: inline-flex; will-change: transform; animation: mq var(--mq-dur, 40s) linear infinite; }
.mq-group { display: inline-flex; flex: none; }
.mq-item {
  display: inline-flex; align-items: center; gap: .32em; padding: .06em .45em .02em;
  font-size: var(--fs-marquee); line-height: 1.08; text-transform: uppercase;
  font-variation-settings: var(--v-marquee);
}
.mq-item.thin { font-variation-settings: var(--v-marquee-thin); }
.mq-sq { display: inline-block; width: .42em; height: .42em; border-radius: 50%; background: var(--acc); flex: none; transform: translateY(-.04em); box-shadow: 0 0 0 2px currentColor; }
.marquee .mq-item[data-room] { color: inherit; }
@keyframes mq { to { transform: translateX(-50%); } }
/* Тёмная тема: строка светится цветом по чёрному, а не заливкой */
:root[data-theme="dark"] .marquee { background: var(--paper); color: var(--acc); border-color: var(--acc); }
:root[data-theme="dark"] .marquee .mq-item[data-room] { color: var(--acc); }
:root[data-theme="dark"] .mq-sq { box-shadow: none; }

/* ---------- Подвал раздела: дверь в следующий ---------- */
.next-room { display: block; text-decoration: none; color: inherit; margin-top: var(--gap-footer); }
.next-room .marquee { transition: background-color var(--t) ease, color var(--t) ease; }
.next-room-label {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 10px var(--pad); border-top: var(--rule-hair) solid var(--ink);
}
.next-room .mq-item { font-size: var(--fs-next); line-height: 1; font-variation-settings: var(--v-next); }
.next-room .mq-item .i { width: .7em; height: .7em; }
.next-room:hover .marquee { background: var(--ink); color: var(--paper); }
:root[data-theme="dark"] .next-room:hover .marquee { background: var(--acc); color: var(--on-acc); }

.foot {
  align-items: center; padding-block: 18px 22px; row-gap: 10px;
  border-top: var(--rule-hair) solid var(--ink);
}
.foot > :nth-child(1) { grid-column: 1 / span 4; }
.foot > :nth-child(2) { grid-column: 5 / span 4; text-align: center; }
.foot > :nth-child(3) { grid-column: 9 / -1; justify-self: end; }
.foot a, .foot button {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  background: none; border: 0; padding: 0; text-decoration: none; color: var(--ink);
  text-transform: inherit; letter-spacing: inherit;
}
.foot a:hover, .foot button:hover { color: var(--acc-ink); }
.foot .i { width: 16px; height: 16px; }

/* ---------- Заголовки разделов ---------- */
.sec-head, .sec-row { align-items: end; row-gap: 8px; }
.sec-row { padding-bottom: 14px; }
.sec-head { padding-bottom: clamp(14px, 2vw, 26px); }
.sec-label { grid-column: 1 / span 6; color: var(--ink); }
.sec-title {
  grid-column: 1 / span 9;
  font-size: var(--fs-section); line-height: .84; letter-spacing: -.01em;
  text-transform: uppercase; font-weight: normal;
  font-variation-settings: var(--v-section);
}
.sec-note { grid-column: 10 / -1; justify-self: end; text-align: right; }
.sec-row .sec-note { grid-column: 7 / -1; }

/* ---------- Дышащие буквы: имя и названия разделов ---------- */
.fit-line {
  display: block; white-space: nowrap;
  font-size: var(--fs, 120px);
  line-height: .84;
  text-transform: uppercase;
}
.fit-in { display: inline-block; }
.fit-in .ch + .ch { margin-left: var(--ls, 0px); }
.ch {
  display: inline-block;
  font-variation-settings: "wght" var(--w), "wdth" var(--d), "opsz" 144, "GRAD" var(--grad);
  transition: color .25s ease;
}
.ch.hot { color: var(--acc); }
/* Вход в экран: буквы поднимаются снизу */
.screen.is-entering .fit-line .ch { animation: chIn .85s var(--ease) both; animation-delay: calc(var(--i, 0) * 38ms); }
@keyframes chIn { from { transform: translateY(.42em) scaleY(1.25); opacity: 0; } }

/* ---------- Шапка раздела (кейсы, резюме, обо мне, рисую) ---------- */
.room-head { padding-top: 14px; }
.room-meta { align-items: center; row-gap: 6px; }
.room-meta .back { grid-column: 1 / span 2; }
.rm-room { grid-column: 3 / span 6; display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.rm-date { grid-column: 9 / -1; justify-self: end; text-align: right; }
.room-sq { width: 14px; height: 14px; border-radius: 50%; background: var(--acc); display: inline-block; flex: none; }
.back {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; justify-self: start;
  text-decoration: none; color: var(--ink);
}
.back .i { width: 16px; height: 16px; transition: transform .35s var(--ease); }
.back:hover { color: var(--acc-ink); }
.back:hover .i { transform: translateX(-4px); }

.room-title {
  padding-inline: var(--pad);
  margin-top: clamp(6px, 1.5vw, 22px);
  font-weight: normal; color: var(--acc-big);
  contain: layout style;
}
.room-title:focus { outline: none; }
.room-title .fit-line { line-height: .8; padding-bottom: .02em; }
/* Дужка над «Й» в «Кейсах» выходит выше строки - даём ей место */
.room-blog .room-title { margin-top: clamp(26px, 3.6vw, 60px); }

@media screen and (max-width: 760px) {
  :root { --bar: 56px; }
  .grid, .guides { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .guides i:nth-child(n+5) { display: none; }
  body { font-size: var(--fs-ui); }

  .sec-label { grid-column: 1 / -1; }
  .sec-row .sec-note, .sec-note { grid-column: 1 / -1; justify-self: start; text-align: left; }
  .sec-title { grid-column: 1 / -1; font-size: clamp(48px, 15vw, 80px); }

  .foot > :nth-child(1) { grid-column: 1 / span 2; }
  .foot > :nth-child(2) { grid-column: 1 / -1; grid-row: 2; text-align: left; }
  .foot > :nth-child(3) { grid-column: 3 / span 2; }
  .next-room .mq-item { font-size: 64px; }

  .room-meta .back { grid-column: 1 / span 1; }
  .rm-room { grid-column: 2 / -1; justify-self: end; font-size: var(--fs-note); white-space: nowrap; }
  .rm-date { grid-column: 1 / -1; justify-self: start; text-align: left; }
  .room-title { margin-top: 10px; }
}


/* =========================================================================
   4. ЭКРАНЫ
   ========================================================================= */

/* ---------- 4.1 Главная: первый экран ---------- */
.hero {
  position: relative;
  display: flex; flex-direction: column;
  height: calc(100svh - var(--bar));
  min-height: 600px; max-height: 1100px;
  padding-block: 14px clamp(20px, 3vw, 36px);
}
.hero-top { align-items: start; row-gap: 4px; }
.ht-a { grid-column: 1 / span 3; }
.ht-b { grid-column: 4 / span 6; }

.name {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding-inline: var(--pad);
  margin: 0; font-weight: normal; color: var(--ink);
  overflow: visible;
  contain: layout style;
}
.name .fit-line { line-height: .8; }
.name .fit-line + .fit-line { margin-top: .1em; }
.name:focus { outline: none; }

.hero-foot { align-items: end; row-gap: 24px; }
.hero-cue { display: none; }
.greet {
  grid-column: 1 / span 6;
  font-size: var(--fs-greet); line-height: 1.12; letter-spacing: -.005em;
  font-variation-settings: var(--v-greet);
  text-wrap: balance;
}
/* Блок «Сейчас»: на уровне первой строки имени (верх задаёт app.js) */
.now { grid-column: 8 / -1; }
.now-h { display: flex; align-items: center; gap: 10px; color: var(--ink); padding-bottom: 6px; border-bottom: var(--rule) solid var(--ink); }
.now-date { margin-left: auto; color: var(--ink-3); }
.live { width: 9px; height: 9px; border-radius: 50%; background: var(--acc); display: inline-block; animation: live 1.2s steps(2, jump-none) infinite; }
@keyframes live { 50% { opacity: .15; } }
.now-list > div { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 5px 0 4px; border-bottom: var(--rule-hair) solid var(--hair); }
.now-list dt { font-family: var(--mono); font-size: var(--fs-mono); text-transform: uppercase; color: var(--ink-3); letter-spacing: .02em; }
.now-list dd { font-size: 15.5px; line-height: 1.3; font-variation-settings: var(--v-now); text-wrap: pretty; }

@media (min-width: 761px) {
  .now {
    position: absolute; right: var(--pad); top: var(--now-top, 20%);
    width: max(300px, calc((100% - 2 * var(--pad) - 11 * var(--gut)) / 12 * 4 + 3 * var(--gut)));
  }
}
@media (min-width: 1100px) {
  .hero-cue {
    grid-column: 10 / -1; justify-self: end; display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 0; background: none; border: 0; color: var(--ink);
  }
  .hero-cue .i { width: 16px; height: 16px; animation: cue 1.4s var(--ease-io) infinite alternate; }
}
@keyframes cue { to { transform: translateY(5px); } }
.screen[data-screen="home"] > .marquee { margin-top: 0; }

@media screen and (max-width: 760px) {
  .hero { height: auto; min-height: calc(100svh - var(--bar)); max-height: none; padding-bottom: 28px; }
  .ht-a, .ht-b { grid-column: 1 / -1; }
  .name { flex: 0 0 auto; padding-block: 18px 22px; }
  .greet { grid-column: 1 / -1; font-size: 25px; }
  .now { grid-column: 1 / -1; }
  .now-list > div { grid-template-columns: 104px 1fr; padding: 7px 0; }
  .now-list dd { white-space: normal; }
}

/* ---------- 4.2 Главная: двери в разделы ---------- */
.doors { padding-top: clamp(56px, 8vw, 128px); }
.door-list { border-bottom: var(--rule-hair) solid var(--ink); }
.door {
  position: relative; display: block;
  padding: 12px var(--pad) clamp(10px, 1.2vw, 18px);
  border-top: var(--rule-hair) solid var(--ink);
  color: var(--ink); text-decoration: none;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
.door-meta { display: flex; align-items: baseline; gap: var(--gut); margin-bottom: 4px; }
.door-i { color: var(--ink); min-width: 3ch; }
.door-cap { font-size: var(--fs-ui); font-variation-settings: var(--v-caption); color: var(--ink-2); }
.door-arr { margin-left: auto; width: 26px; height: 26px; align-self: center; transition: transform var(--t-mid) var(--ease); }
.door-word {
  display: flex; align-items: center; white-space: nowrap;
  font-size: var(--door-fs, 150px); line-height: .8;
  text-transform: uppercase;
  --dcur: var(--dw, 100);
  font-variation-settings: "wght" 860, "wdth" var(--dcur), "opsz" 144, "GRAD" var(--grad);
  transition: --dcur var(--t-slower) var(--ease), color var(--t) ease;
  padding-block: .02em .04em;
}
.door[data-room="blog"] .door-word { padding-top: .14em; }
.door-a, .door-b { display: inline-block; }
.door-pv {
  position: relative; display: inline-block; flex: none;
  width: 0; height: .7em; margin-inline: 0;
  overflow: hidden; background: var(--acc);
  transition: width var(--t-slower) var(--ease), margin var(--t-slower) var(--ease);
}
.door-pv-in { position: absolute; left: 0; top: 0; bottom: 0; width: var(--pvw, 300px); overflow: hidden; }

@media (hover: hover) and (min-width: 761px) {
  .door.is-open .door-word, .door:hover .door-word, .door:focus-visible .door-word { --dcur: var(--dwh, 60); color: var(--acc-big); }
  .door.is-open .door-pv, .door:hover .door-pv, .door:focus-visible .door-pv { width: var(--pvw, 300px); margin-inline: .08em; }
  .door:hover .door-arr { transform: translateX(8px); }
  .door:hover .door-cap { color: var(--ink); }
}
.door:focus-visible { outline-offset: -6px; box-shadow: none; }
.doors.is-measuring .door-word, .doors.is-measuring .door-pv { transition: none !important; }

/* Живые превью внутри дверей: цифры, годы, фото */
.door-pv-in * { animation-play-state: paused; }
.door:hover .door-pv-in *, .door:focus-visible .door-pv-in *, .door.is-open .door-pv-in * { animation-play-state: running; }
.pv-years { color: var(--on-acc); }
.pv-years-track { display: flex; flex-direction: column; animation: pvYears 4.8s var(--ease-io) infinite; }
.pv-years-track span {
  height: calc(.7em / .56); display: flex; align-items: center; justify-content: center;
  font-size: .56em; line-height: 1;
  font-variation-settings: var(--v-door-year);
  font-variant-numeric: tabular-nums;
}
.pv-years-track span:nth-child(4) { font-size: .34em; height: calc(.7em / .34); font-variation-settings: var(--v-door-now); }
@keyframes pvYears {
  0%, 18% { transform: translateY(0); }
  25%, 43% { transform: translateY(-.7em); }
  50%, 68% { transform: translateY(-1.4em); }
  75%, 93% { transform: translateY(-2.1em); }
  100% { transform: translateY(-2.8em); }
}
.pv-prices { color: var(--on-acc); display: flex; align-items: center; }
.pv-prices-track { display: inline-flex; animation: pvPrices 6s linear infinite; }
.pv-prices-track span {
  font-size: .42em; line-height: 1; padding-inline: .3em; white-space: nowrap;
  font-variation-settings: var(--v-door-now); font-variant-numeric: tabular-nums;
}
@keyframes pvPrices { to { transform: translateX(-50%); } }
.pv-photo { background: var(--acc); }
.pv-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%;
  filter: grayscale(1) contrast(1.12); mix-blend-mode: multiply;
}

@media screen and (max-width: 760px) {
  .door { padding-top: 10px; padding-bottom: 14px; }
  .door-meta { flex-wrap: nowrap; gap: 10px; }
  .door-cap { font-size: var(--fs-small); line-height: 1.3; }
  .door-arr { width: 22px; height: 22px; }
  .door-word { flex-wrap: wrap; }
  .door-pv { order: 3; flex: 0 0 100%; width: 100%; height: 46px; margin: 10px 0 0; }
  .door-pv-in { width: 100%; }
  .pv-years-track { animation-name: pvYearsM; }
  .pv-years-track span { height: 46px; font-size: 38px; justify-content: flex-start; padding-inline: 10px; }
  .pv-years-track span:nth-child(4) { height: 46px; font-size: 30px; }
  @keyframes pvYearsM {
    0%, 18% { transform: translateY(0); } 25%, 43% { transform: translateY(-46px); }
    50%, 68% { transform: translateY(-92px); } 75%, 93% { transform: translateY(-138px); } 100% { transform: translateY(-184px); }
  }
  .pv-prices-track span { font-size: 34px; line-height: 46px; }
  .pv-photo img { object-position: 50% 37%; }   /* в узкой полоске видны глаза, а не брови */
}

/* ---------- 4.3 Главная: «Соедините точки» ---------- */
.hare-game { padding-top: var(--gap-section); }
.hg { padding-top: clamp(28px, 3.4vw, 56px); row-gap: 28px; align-items: start; }
.hg-side { grid-column: 1 / span 4; position: sticky; top: calc(var(--bar) + 24px); display: flex; flex-direction: column; gap: 20px; }
.hg-count { display: flex; align-items: flex-end; gap: 12px; line-height: .78; }
.hg-count b {
  font-weight: normal; font-size: var(--fs-counter); color: var(--acc);
  font-variation-settings: var(--v-counter); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.hg-count .mono { padding-bottom: .5em; color: var(--ink); }
.hg-who { color: var(--ink-3); min-height: 1.2em; }
.hg-hint { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.3; max-width: 26ch; font-variation-settings: var(--v-hint); }
.hg-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hg-actions [hidden] { display: none; }

/* поле: на колонку уже и не выше окна - целиком помещается на экране */
.hg-stage {
  grid-column: 6 / -1; position: relative; overflow: hidden; aspect-ratio: 1 / 1;
  border: var(--rule) solid var(--ink); background: var(--paper);
}
@media screen and (min-width: 761px) {
  .hg-stage { grid-column: 7 / -1; justify-self: end; width: min(100%, calc(100svh - var(--bar) - 48px)); }
}
.hare-svg { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: manipulation; user-select: none; -webkit-user-select: none; cursor: crosshair; }
.hare-svg .lbl { fill: var(--ink-3); transition: fill var(--t); }
.hare-svg .lbl-t { font-family: var(--font); font-size: var(--fs-body); font-variation-settings: var(--v-dot-label); }
.hare-svg .pt { fill: var(--hair); stroke: var(--ink-3); stroke-width: 1.5; transition: fill .25s, stroke .25s; }
.hare-svg .hit { fill: transparent; cursor: pointer; }
.hare-svg .dot.is-done .pt { fill: var(--ink); stroke: var(--ink); }
.hare-svg .dot.is-done .lbl { fill: var(--ink-3); opacity: .6; }
.hare-svg .dot.is-next .pt { fill: var(--acc); stroke: var(--acc); }
.hare-svg .dot.is-next .lbl { fill: var(--acc-ink); }
.hare-svg .ring { fill: none; stroke: var(--acc); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.hare-svg .dot.is-next .ring { animation: hgRing 1.4s var(--ease) infinite; }
@keyframes hgRing { 0% { opacity: .8; transform: scale(1); } 100% { opacity: 0; transform: scale(3.4); } }
.hare-svg .dot.is-miss { animation: hgMiss .35s linear; }
@keyframes hgMiss { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.hare-svg .seg { stroke: var(--ink); stroke-width: 3.5; stroke-linecap: round; }
.hare-svg .band { stroke: var(--acc); stroke-width: 2; stroke-dasharray: 1 8; stroke-linecap: round; pointer-events: none; }
/* контур: у зайца - кусочки, у остальных - картинка-маска кисти, потом всё в цвет раздела */
.hare-svg .contour path, .hare-svg .contour-img rect { fill: var(--ink); }
.hare-svg .contour.is-merged path, .hare-svg .contour-img.is-merged rect { fill: var(--acc); transition: fill .9s ease; }
.hare-svg .sil { fill: var(--acc); }

@media screen and (max-width: 760px) {
  .hg-side { grid-column: 1 / -1; position: static; }
  .hg-count b { font-size: 120px; }
  .hg-stage { grid-column: 1 / -1; }
}

/* ---------- 4.4 Главная: контакты ---------- */
.contacts { padding-top: var(--gap-section); }
.hare-game + .contacts { padding-top: clamp(64px, 8vw, 120px); }
#contacts-h { grid-column: 1 / -1; line-height: .96; }   /* дужке «Й» при переносе нужен запас */
.c-list { border-bottom: var(--rule-hair) solid var(--ink); }
.c-row {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gut); align-items: center;
  padding: 10px var(--pad) 12px; border-top: var(--rule-hair) solid var(--ink);
}
.c-label { grid-column: 1 / span 2; color: var(--ink-3); }
.c-link {
  grid-column: 3 / span 9; justify-self: start;
  font-size: var(--fs-contact); line-height: 1; letter-spacing: -.01em;
  text-decoration: none; color: var(--ink);
  font-variation-settings: "wght" 560, "wdth" var(--cd), "opsz" 144, "GRAD" var(--grad);   /* правка Дианы: тоньше (было 800) */
  --cd: 72;
  transition: --cd var(--t-slow) var(--ease), color .25s ease;
  overflow-wrap: anywhere;
}
.c-link:hover, .c-link:focus-visible { --cd: 112; color: var(--acc-big); }
/* почта той же высоты, что остальные строки: длинный адрес влезает за счёт более узкого начертания */
.c-link-mail { overflow-wrap: normal; white-space: nowrap; --cd: 46; }
.c-link-mail:hover, .c-link-mail:focus-visible { --cd: 52; }
.c-arr { width: 34px; height: 34px; }
.c-row > .copy-btn, .c-row > .c-arr { grid-column: 12; justify-self: end; }
.copy-btn {
  min-height: 44px; padding: 0 14px; background: transparent; border: var(--rule-thin) solid var(--ink); color: var(--ink);
  transition: background-color var(--t-fast), color var(--t-fast);
}
.copy-btn:hover { background: var(--ink); color: var(--paper); }
.copy-btn.is-done { background: var(--acc); border-color: var(--acc); color: var(--on-acc); }

@media (max-width: 1100px) {
  .c-link-mail { --cd: 30; }
  .c-link-mail:hover, .c-link-mail:focus-visible { --cd: 34; }
}
@media screen and (max-width: 760px) {
  .c-row { grid-template-columns: 1fr auto; row-gap: 4px; padding-block: 12px 14px; }
  .c-row > .c-label { grid-column: 1 / -1; }
  .c-row > .c-link { grid-column: 1; }
  .c-row > .c-arr { grid-column: 2; }
  .c-row > .copy-btn { grid-column: 1 / -1; justify-self: end; }
  .c-link { font-size: clamp(26px, 8.4vw, 44px); --cd: 80; }
  .c-link-mail { font-size: clamp(18px, 6vw, 30px); white-space: normal; overflow-wrap: anywhere; --cd: 72; }
  .c-arr { width: 26px; height: 26px; }
}

/* ---------- 4.5 Кейсы: список ---------- */
.blog-intro { padding-block: clamp(28px, 4vw, 56px) clamp(24px, 3vw, 40px); align-items: end; row-gap: 20px; }
.blog-lede {
  grid-column: 1 / span 5;
  font-size: var(--fs-lede); line-height: 1.18;
  font-variation-settings: var(--v-lede);
  text-wrap: balance;
}
.cases-note { grid-column: 8 / -1; justify-self: end; text-align: right; color: var(--ink-3); }

.posts { border-bottom: var(--rule-hair) solid var(--ink); }
.post-row { position: relative; }
.post-link {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); row-gap: 8px;
  align-items: baseline;
  padding: clamp(14px, 1.6vw, 24px) var(--pad);
  border-top: var(--rule-hair) solid var(--ink);
  color: var(--ink); text-decoration: none;
  transition: color .25s ease;
}
.post-link::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--acc); transform: scaleX(0); transform-origin: left;
  transition: transform .5s var(--ease);
}
.post-n {
  grid-column: 1 / span 1;
  font-size: var(--fs-lede); line-height: 1;
  font-variation-settings: var(--v-list-n); font-variant-numeric: tabular-nums;
  transition: font-variation-settings var(--t-mid) var(--ease);
}
.post-t {
  grid-column: 2 / span 8;
  font-size: clamp(28px, 4.1vw, 72px); line-height: .98; letter-spacing: -.01em;
  font-variation-settings: var(--v-list-t);
  transition: transform .5s var(--ease);
  text-wrap: balance;
}
.post-meta-row { grid-column: 10 / -1; display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: flex-end; text-align: right; }
.post-meta-row .mono { color: inherit; }
.post-meta-row .pm-tags { color: var(--acc-ink); }
@media (hover: hover) {
  .post-link:hover { color: var(--on-acc); }
  .post-link:hover::before { transform: scaleX(1); }
  .post-link:hover .post-t { transform: translateX(clamp(8px, 1.4vw, 24px)); }
  .post-link:hover .post-n { font-variation-settings: var(--v-list-n-hover); }
  .post-link:hover .pm-tags { color: inherit; }
}
.post-link:focus-visible { outline-offset: -4px; box-shadow: none; }

/* метка «Читать · 6 мин» у курсора */
.read-chip {
  position: fixed; left: 0; top: 0; z-index: 70; pointer-events: none;
  width: 104px; height: 104px; margin: -52px 0 0 -52px; border-radius: 50%;
  background: var(--ink); color: var(--paper);
  display: grid; place-content: center; text-align: center; gap: 2px;
  font-family: var(--mono); font-size: var(--fs-note); text-transform: uppercase; letter-spacing: .02em;
  transform: translate3d(var(--rx, -200px), var(--ry, -200px), 0) scale(var(--rs, 0));
  transition: scale var(--t) var(--ease);
  will-change: transform;
}
.read-chip b { font-family: var(--font); font-size: 22px; line-height: 1; font-variation-settings: var(--v-chip); text-transform: none; }

@media screen and (max-width: 760px) {
  .blog-lede { grid-column: 1 / -1; justify-content: flex-start; }
  .cases-note { grid-column: 1 / -1; justify-self: start; text-align: left; }
  .post-link { grid-template-columns: auto 1fr; row-gap: 6px; }
  .post-n { grid-column: 1; font-size: 22px; }
  .post-meta-row { grid-column: 2; justify-content: flex-end; }
  .post-t { grid-column: 1 / -1; font-size: 30px; }
  .read-chip { display: none; }
}

/* ---------- 4.6 Кейс: страница-статья ---------- */
.read-progress { position: sticky; top: var(--bar); z-index: 55; height: 6px; background: transparent; }
.read-progress i { display: block; height: 100%; background: var(--acc); transform-origin: left; transform: scaleX(var(--rp, 0)); }
@supports (animation-timeline: scroll()) {
  .read-progress i { animation: readp linear both; animation-timeline: scroll(nearest); }
  @keyframes readp { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

.post-head { padding-top: 8px; align-items: end; row-gap: 12px; }
.post-back { grid-column: 1 / -1; }
.post-num {
  grid-column: 1 / span 5;
  font-size: var(--fs-case-num); line-height: .72; margin-left: -.02em;
  color: var(--acc);
  font-variation-settings: var(--v-case-num);
  font-variant-numeric: tabular-nums; letter-spacing: -.03em;
}
.post-titles { grid-column: 6 / -1; padding-bottom: .4em; }
.post-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--ink); }
.post-meta .post-tag { color: var(--acc-ink); }
.post-title {
  margin-top: 16px;
  font-size: var(--fs-case-t); line-height: .98; letter-spacing: -.01em; font-weight: normal;
  font-variation-settings: var(--v-case-t);
  text-wrap: balance;
}
.post-title:focus { outline: none; }

/* цифры кейса */
.case-stats { margin-top: clamp(40px, 5vw, 80px); border-top: var(--rule-bold) solid var(--ink); padding-top: 18px; row-gap: 24px; align-items: end; }
.cs-item { grid-column: span 4; display: flex; flex-direction: column; gap: 10px; }
.cs-num {
  font-size: var(--fs-stat); line-height: .78; color: var(--acc);
  font-variation-settings: var(--v-stat);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.cs-t { font-size: var(--fs-text); line-height: 1.35; color: var(--ink-2); max-width: 26ch; font-variation-settings: var(--v-stat-t); }
.cs-note { grid-column: 9 / -1; justify-self: end; text-align: right; color: var(--ink-3); padding-bottom: 6px; }

.post-layout { margin-top: clamp(40px, 6vw, 96px); border-top: var(--rule-bold) solid var(--ink); padding-top: clamp(28px, 4vw, 56px); align-items: start; }
.case-stats + .post-layout { margin-top: clamp(28px, 4vw, 56px); }
.post-rail { grid-column: 1 / span 3; position: sticky; top: calc(var(--bar) + 28px); }
.toc { list-style: none; padding: 0; margin-top: 10px; border-top: var(--rule-hair) solid var(--ink); }
.toc a {
  display: grid; grid-template-columns: 28px 1fr; gap: 6px; align-items: baseline; padding: 10px 0; min-height: 44px;
  border-bottom: var(--rule-hair) solid var(--hair);
  text-decoration: none; color: var(--ink-2); font-size: var(--fs-small); line-height: 1.3;
  font-variation-settings: var(--v-toc);
  transition: color var(--t-fast);
}
.toc a i { font-style: normal; font-family: var(--mono); font-size: var(--fs-mono); color: var(--ink-3); }
.toc a:hover { color: var(--ink); }
.toc a.is-current { color: var(--ink); font-variation-settings: var(--v-toc-current); box-shadow: inset 4px 0 0 var(--acc); padding-left: 10px; }

.post-body {
  grid-column: 4 / span 6;
  max-width: 68ch;
  font-size: clamp(18px, 1.3vw, 20px); line-height: 1.62;
  font-variation-settings: var(--v-read);
  color: var(--ink);
  hanging-punctuation: first;
}
.post-body > * + * { margin-top: 1.05em; }
.post-body .lead {
  font-size: clamp(22px, 1.8vw, 27px); line-height: 1.4;
  font-variation-settings: var(--v-read-lead);
}
.post-body h2 {
  margin-top: 2.2em; font-weight: normal;
  font-size: clamp(26px, 2.2vw, 34px); line-height: 1.1;
  font-variation-settings: var(--v-read-h);
  scroll-margin-top: calc(var(--bar) + 30px);
}
.post-body h2 + p { margin-top: .6em; }

/* иллюстрации, схемы «было → стало», цитаты, примечания */
.fig { margin: 2.2em 0; }
.fig-shot { margin: 2em 0; }
.fig-shot img { display: block; width: 100%; height: auto; border: var(--rule-hair) solid var(--hair); background: var(--paper-2); }
@media (min-width: 1181px) {
  .post-body .fig-shot { width: 150%; max-width: none; }
}
.fig figcaption { margin-top: 12px; font-size: var(--fs-small); line-height: 1.45; color: var(--ink-2); display: flex; gap: 12px; align-items: baseline; }
.fig figcaption .mono { color: var(--ink); flex: none; }

.flow { margin: 1.6em 0; display: grid; gap: 10px; }
.flow-l { color: var(--ink-3); }
.flow-row { list-style: none; padding: 0; display: flex; flex-wrap: wrap; row-gap: 8px; }
.flow-row li {
  position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px;
  border: var(--rule-thin) solid var(--ink); font-family: var(--mono); font-size: var(--fs-mono); font-weight: 500; line-height: 1.2;
}
.flow-row li + li { margin-left: 30px; }
.flow-row li + li::before { content: "→"; position: absolute; left: -23px; color: var(--ink-3); }
.flow-now li { background: var(--acc); border-color: var(--acc); color: var(--on-acc); }
.post-body .flow + *, .post-body * + .flow { margin-top: 1.4em; }

.quote {
  margin: 1.8em 0; padding: 4px 0 4px clamp(18px, 2vw, 28px);
  border-left: 8px solid var(--acc);
}
.quote p {
  font-size: clamp(24px, 2.3vw, 36px); line-height: 1.16; letter-spacing: -.005em;
  font-variation-settings: var(--v-quote);
  text-wrap: balance;
}
.notes { margin-top: 3em !important; padding-top: 14px; border-top: var(--rule-hair) solid var(--ink); font-size: var(--fs-small); line-height: 1.5; color: var(--ink-2); }

/* следующий кейс */
.post-next { margin-top: clamp(64px, 9vw, 140px); }
.post-next a {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-items: end;
  padding: clamp(20px, 3vw, 44px) var(--pad);
  background: var(--acc); color: var(--on-acc); text-decoration: none;
  border-block: var(--rule-hair) solid var(--ink);
}
.post-next .mono { grid-column: 1 / span 3; color: inherit; align-self: start; }
.post-next .pn-title {
  grid-column: 4 / span 8;
  font-size: clamp(30px, 4.6vw, 84px); line-height: .96;
  font-variation-settings: var(--v-case-next);
  text-wrap: balance;
}
.post-next .i { grid-column: 12; justify-self: end; width: clamp(32px, 4vw, 64px); height: clamp(32px, 4vw, 64px); transition: transform .5s var(--ease); }
.post-next a:hover .i { transform: translateX(10px); }
.post-next a::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); transform: scaleY(0); transform-origin: bottom; transition: transform .5s var(--ease); }
.post-next a:hover { color: var(--paper); }
.post-next a:hover::before { transform: scaleY(1); }

@media screen and (max-width: 760px) {
  .post-num { grid-column: 1 / -1; font-size: 190px; }
  .post-titles { grid-column: 1 / -1; }
  .post-title { font-size: 36px; }
  .cs-item { grid-column: 1 / -1; }
  .cs-note { grid-column: 1 / -1; justify-self: start; text-align: left; }
  .post-rail { display: none; }
  .post-body { grid-column: 1 / -1; font-size: var(--fs-text); }
  .post-body .lead { font-size: 20px; line-height: 1.42; }
  .fig figcaption { flex-direction: column; gap: 4px; }
  .flow-row li + li { margin-left: 26px; }
  .post-next a { grid-template-columns: 1fr auto; row-gap: 10px; }
  .post-next .mono { grid-column: 1 / -1; }
  .post-next .pn-title { grid-column: 1; font-size: 30px; }
  .post-next .i { grid-column: 2; align-self: end; }
}

/* ---------- 4.7 Резюме ---------- */
.print-head { display: none; }
.cv-intro { padding-block: clamp(36px, 5vw, 80px); border-bottom: var(--rule-bold) solid var(--ink); align-items: end; row-gap: 40px; }
.cv-who { grid-column: 1 / span 5; }
.cv-name {
  font-size: var(--fs-cv-name); line-height: .95;
  font-variation-settings: var(--v-cv-name);
}
.cv-role { margin-top: 12px; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.35; color: var(--ink-2); max-width: 30ch; font-variation-settings: var(--v-cv-role); }
.cv-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.cv-six { grid-column: 7 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: var(--gut); }
.six-num {
  font-size: var(--fs-cv-six); line-height: .72; margin-bottom: -.03em;
  color: var(--acc);
  font-variation-settings: var(--v-cv-six);
  font-variant-numeric: tabular-nums;
}
.six-text {
  font-size: clamp(22px, 2.4vw, 40px); line-height: 1.1; padding-bottom: .2em; padding-left: .35em;
  font-variation-settings: var(--v-cv-six-t);
  text-wrap: balance;
}
.six-text b { display: block; font-weight: normal; font-variation-settings: var(--v-cv-six-b); }

.cv-block { padding-top: var(--gap-block); }
.cv-block-head { align-items: end; padding-bottom: clamp(14px, 2vw, 24px); }

/* опыт: два блока - продуктовый и графический дизайн */
.cv-group { align-items: end; row-gap: 8px; padding-block: clamp(28px, 3vw, 48px) clamp(12px, 1.4vw, 20px); }
.cv-table + .cv-group { padding-top: clamp(56px, 6vw, 96px); }
.cv-group-t {
  grid-column: 1 / span 8; font-weight: normal; text-transform: uppercase;
  font-size: var(--fs-cv-group); line-height: .9; color: var(--acc);
  font-variation-settings: var(--v-cv-group);
}
.cv-table { border-bottom: var(--rule-bold) solid var(--ink); }
.cv-row {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); row-gap: 16px;
  padding: clamp(18px, 2vw, 28px) var(--pad) clamp(24px, 2.6vw, 36px);
  border-top: var(--rule-bold) solid var(--ink);
  align-items: start;
}
.cv-years { grid-column: 1 / span 5; display: flex; flex-direction: column; }
.y1 {
  display: block; font-size: var(--fs-cv-year); line-height: .76;
  font-variation-settings: var(--v-cv-year);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
  transition: color var(--t) ease;
}
.cv-row:hover .y1 { color: var(--acc); }
.y2 { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--ink); }
.y2 .i { width: 16px; height: 16px; }
.cv-place { grid-column: 6 / span 3; }
.cv-place h3 {
  font-size: var(--fs-cv-place); line-height: 1.02; font-weight: normal;
  font-variation-settings: var(--v-cv-place);
}
.cv-place .mono { margin-top: 10px; }
/* пункты: номер стоит по базовой линии первой строки */
.cv-did { grid-column: 9 / -1; list-style: none; padding: 0; counter-reset: did; }
.cv-did li {
  display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: baseline;
  padding: 10px 0; border-top: var(--rule-hair) solid var(--hair);
  font-size: var(--fs-body); line-height: 1.35; font-variation-settings: var(--v-cv-item);
}
.cv-did li:first-child { border-top: 0; padding-top: 0; }
.cv-did li::before {
  counter-increment: did; content: counter(did, decimal-leading-zero);
  font-family: var(--mono); font-size: var(--fs-note); color: var(--acc-ink);
}

/* карточки: «Как я работаю» в «Обо мне» */
.cv-projects { row-gap: 32px; }
.proj { grid-column: span 4; border-top: var(--rule-bold) solid var(--ink); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.proj-n { color: var(--acc-ink); }
.proj-name {
  font-size: var(--fs-proj); line-height: .9; font-weight: normal;
  font-variation-settings: var(--v-proj);
  transition: font-variation-settings var(--t-slow) var(--ease), color var(--t);
}
.proj:hover .proj-name { font-variation-settings: var(--v-proj-hover); color: var(--acc); }
.proj p { font-size: var(--fs-text); color: var(--ink-2); max-width: 26ch; }

/* навыки и хобби: слова через косую черту */
ul.skills {
  display: flex; flex-wrap: wrap; padding: 0 var(--pad);
  border-top: var(--rule-bold) solid var(--ink);
}
.skills li {
  position: relative;
  font-size: var(--fs-skill); line-height: 1.05; padding: .12em .32em .1em 0;
  font-variation-settings: var(--v-skill);
  transition: color var(--t-fast) ease;
}
.skills li::after { content: "/"; margin-left: .32em; color: var(--acc); font-variation-settings: var(--v-skill-sep); }
.skills li:last-child::after { content: none; }
.skills li:hover { color: var(--acc); }

/* «Работала с»: логотипы одним цветом с текстом */
.logos {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: var(--rule-bold) solid var(--ink); margin: 0 var(--pad);
}
.logo-cell {
  display: flex; align-items: center; justify-content: center; min-height: clamp(110px, 11vw, 170px);
  padding: 20px clamp(14px, 2vw, 32px); border-bottom: var(--rule-hair) solid var(--hair); border-right: var(--rule-hair) solid var(--hair);
}
.logo-cell:nth-child(5n) { border-right: 0; }
.logo-cell img {
  max-width: 100%; max-height: clamp(30px, 3.2vw, 52px); width: auto; height: auto; object-fit: contain;
  filter: brightness(0); opacity: .88; transition: opacity .25s ease;
}
:root[data-theme="dark"] .logo-cell img { filter: brightness(0) invert(.93); }
.logo-cell:hover img { opacity: 1; }
/* многострочные логотипы при общей высоте выходят мелкими - им больше места */
.logo-cell img[src$="parks-kazan.svg"] { max-height: clamp(52px, 6vw, 96px); }
.logo-cell img[src$="mann-filter.svg"] { max-height: clamp(38px, 4.2vw, 66px); }
/* размер логотипа выбирается в CMS: мельче / обычный / крупнее / ещё крупнее.
   Широкие логотипы упираются в ширину клетки - им помогает только «мельче». */
.logo-cell img[data-size="s"] { max-height: clamp(22px, 2.4vw, 38px); }
.logo-cell img[data-size="l"] { max-height: clamp(44px, 4.8vw, 78px); }
.logo-cell img[data-size="xl"] { max-height: clamp(60px, 6.6vw, 110px); }

/* образование и языки */
.facts { border-top: var(--rule-bold) solid var(--ink); row-gap: 28px; }
.fact { grid-column: span 6; padding-top: 14px; }
.fact:first-child { grid-column: 1 / span 8; }
.fact + .fact { grid-column: 9 / -1; }
.fact-big {
  margin-top: 6px;
  font-size: var(--fs-fact); line-height: .88; white-space: nowrap;
  font-variation-settings: var(--v-fact);
  font-variant-numeric: tabular-nums;
}
.fact-t { margin-top: 12px; font-size: var(--fs-text); color: var(--ink-2); }
/* «Образование»: обе специальности одной группой под «КНИТУ · 2020» */
.fact-caps { display: flex; flex-wrap: wrap; column-gap: clamp(20px, 2.4vw, 40px); row-gap: 4px; margin-top: 12px; }
.fact-caps .fact-t { margin-top: 0; }
/* «Языки»: подпись под каждой частью крупного текста */
.fact-pair { display: flex; align-items: flex-start; flex-wrap: wrap; column-gap: .22em; row-gap: .12em;   /* языков бывает больше двух - переносим, а не прячем за край */ font-size: var(--fs-fact); }
.fact-pair > div { display: flex; flex-direction: column; }
.fact-pair .fact-big { font-size: 1em; }
.fact-pair .fact-t { font-size: clamp(12px, .19em, 18px); white-space: nowrap; }   /* подпись шире языка - язык занимает ее ширину, подписи не налезают */
.fact-sep { margin: 0; }   /* запятая - внутри предыдущего языка: строка с нее не начнется */
.fact-print { display: none; }

/* контакты внизу резюме и «Обо мне» */
.cv-cta { margin-top: clamp(56px, 7vw, 110px); padding-top: 18px; border-top: var(--rule-hair) solid var(--ink); align-items: start; row-gap: 20px; }
.cv-cta-t { grid-column: 1 / span 6; font-size: clamp(20px, 1.8vw, 28px); line-height: 1.3; font-variation-settings: var(--v-cta); }
.cv-cta-t .mono { display: block; margin-bottom: 8px; }
.cv-cta .cv-actions { grid-column: 7 / -1; justify-content: flex-end; margin-top: 0; }

@media screen and (max-width: 760px) {
  .cv-who, .cv-six { grid-column: 1 / -1; }
  .cv-six { grid-template-columns: auto 1fr; }
  .six-num { font-size: 200px; }
  .six-text { font-size: 22px; }
  .cv-group-t { grid-column: 1 / -1; }
  .cv-row { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-inline: var(--pad); }
  .cv-years { grid-column: 1 / -1; flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .y1 { font-size: 116px; }
  .cv-place { grid-column: 1 / -1; }
  .cv-did { grid-column: 1 / -1; }
  .proj { grid-column: 1 / -1; }
  .skills li { font-size: 30px; }
  .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logo-cell:nth-child(5n) { border-right: var(--rule-hair) solid var(--hair); }
  .logo-cell:nth-child(2n) { border-right: 0; }
  .logo-cell { min-height: 96px; }
  .fact, .fact:first-child, .fact + .fact { grid-column: 1 / -1; }
  .fact + .fact { border-top: var(--rule-hair) solid var(--ink); }
  .fact-big { font-size: 64px; }
  .fact-pair { font-size: 64px; }
  .fact-pair .fact-t { font-size: var(--fs-mono); }
  .cv-cta-t, .cv-cta .cv-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ---------- 4.8 Обо мне ---------- */
.about-intro { padding-block: clamp(36px, 5vw, 80px); border-bottom: var(--rule-bold) solid var(--ink); align-items: start; row-gap: 32px; }
.about-photo { grid-column: 1 / span 4; margin: 0; background: var(--acc); overflow: hidden; }
.about-photo img {
  display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover;
  filter: grayscale(1) contrast(1.1); mix-blend-mode: multiply;
  transition: filter var(--t-slow) var(--ease), transform .8s var(--ease);
}
.about-photo:hover img { filter: grayscale(0) contrast(1); mix-blend-mode: normal; transform: scale(1.03); }
/* Светлая тема: цвет раздела темный, в умножении фото тонет - подложка светлее */
[data-theme="light"] .about-photo, [data-theme="light"] .pv-photo { background: color-mix(in srgb, var(--acc) 45%, #8ec5ff); }
.about-text {
  grid-column: 6 / -1; display: flex; flex-direction: column; gap: 18px; max-width: 62ch;
  font-size: clamp(18px, 1.4vw, 21px); line-height: 1.5; color: var(--ink-2);
  font-variation-settings: var(--v-about);
}
.about-lede {
  font-size: var(--fs-about); line-height: 1.02; color: var(--ink); letter-spacing: -.01em;
  font-variation-settings: var(--v-about-lede);
  text-wrap: balance;
}
/* заголовок по верху фото, абзацы прижаты к низу фото */
@media (min-width: 761px) {
  .about-text { align-self: stretch; }
  .about-lede + p { margin-top: auto; }
}

/* «Как я работаю»: четыре привычки по две в строке.
   Ширину при наведении (--hw) подбирает app.js, чтобы заголовок не перескочил на лишнюю строку */
.room-about .proj-name { font-size: clamp(36px, 4vw, 72px); }
.how-grid .proj { grid-column: span 6; }
.how-grid .proj p { max-width: 44ch; }
.how-grid .proj-name { font-variation-settings: var(--v-habit); }
.how-grid .proj:hover .proj-name { font-variation-settings: "wght" 300, "wdth" var(--hw, 80), "opsz" 144, "GRAD" var(--grad); color: var(--acc); }

/* ссылка «Рисую» в хобби */
.skill-link { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: .15em; }
.skill-link .i { width: .55em; height: .55em; color: var(--acc); transition: transform var(--t) var(--ease); }
.skill-link:hover { color: var(--acc); }
.skill-link:hover .i { transform: translate(3px, -3px); }

@media screen and (max-width: 760px) {
  .about-photo, .about-text { grid-column: 1 / -1; }
  .how-grid .proj { grid-column: 1 / -1; }
}

/* ---------- 4.9 Рисую: абзацы и рисунки вперемешку ----------
   Каждый элемент ставит себя сам: --c колонки, --mt сдвиг вниз (шаги сетки),
   --rot наклон, --sp скорость дрейфа при прокрутке */
.art { padding-top: clamp(40px, 6vw, 110px); }
.art-row { align-items: start; row-gap: 32px; margin-bottom: clamp(48px, 6vw, 120px); }
.art-row > * { grid-column: var(--c); margin-top: calc(var(--mt, 0) * clamp(6px, .9vw, 16px)); }
.art-row > .post-body { grid-column: 4 / span 6; margin-top: 0; }   /* блоки кейса на странице - колонкой, как в кейсе */
.art-it { margin: 0; transform: rotate(var(--rot, 0deg)); transition: transform var(--t-slow) var(--ease); }
.art-it:hover { transform: rotate(0deg) scale(1.03); z-index: 2; }
.art-open { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.art-open img { display: block; width: 100%; height: auto; box-shadow: var(--shadow-art); }
.art-lead {
  font-size: var(--fs-art-lead); line-height: .95; letter-spacing: -.015em; text-wrap: balance;
  font-variation-settings: var(--v-art-lead);
}
.art-p {
  font-size: clamp(18px, 1.5vw, 23px); line-height: 1.5; color: var(--ink-2); text-wrap: pretty;
  font-variation-settings: var(--v-art-p);
}
.art-p::first-line { color: var(--ink); }
.art-end { font-size: clamp(22px, 2vw, 32px); line-height: 1.3; color: var(--ink); font-variation-settings: var(--v-art-end); }
.art-sub { display: flex; flex-direction: column; gap: 10px; border-top: var(--rule-bold) solid var(--ink); padding-top: 14px; }
.art-sub .mono { color: var(--acc-ink); }
.art-h {
  font-weight: normal; text-transform: uppercase; color: var(--acc);
  font-size: var(--fs-art-h); line-height: .84; letter-spacing: -.01em;
  font-variation-settings: var(--v-art-h);
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .art-it { animation: artDrift linear both; animation-timeline: view(); }
    @keyframes artDrift { from { translate: 0 calc(var(--sp, 0) * 6px); } to { translate: 0 calc(var(--sp, 0) * -6px); } }
  }
}
/* рисунок на весь экран */
.art-box { border: 0; padding: 0; background: transparent; max-width: 94vw; max-height: 92vh; overflow: visible; }
.art-box::backdrop { background: var(--backdrop); }
.art-box img { display: block; max-width: 94vw; max-height: 92vh; width: auto; height: auto; cursor: zoom-out; }
.art-box-close {
  position: fixed; top: 16px; right: 16px; width: 48px; height: 48px; display: grid; place-items: center;
  background: var(--paper); color: var(--ink); border: var(--rule-thin) solid var(--ink); cursor: pointer;
}
.art-box-close .i { width: 20px; height: 20px; }

@media screen and (max-width: 760px) {
  .art-row { row-gap: 28px; margin-bottom: 28px; }
  .art-row > * { grid-column: 1 / -1; margin-top: 0; }
  .art-row > .post-body { grid-column: 1 / -1; }
  .art-row > .art-it { width: 78%; }
  .art-row > .art-it:nth-child(even) { justify-self: end; }
  .art-row > .art-it:only-child, .art-row > .art-it[style*="span 6"] { width: 100%; }
}


/* =========================================================================
   5. ДВИЖЕНИЕ
   ========================================================================= */

/* Заголовки собираются из разлетевшихся букв при прокрутке */
.kin .w { display: inline-block; white-space: nowrap; }
.kin .kc { display: inline-block; will-change: transform; transform: translate(var(--kx), var(--ky)) rotate(var(--kr)); opacity: .12; }
.kin.is-in .kc { transform: none; opacity: 1; transition: transform .9s var(--ease), opacity var(--t-slow) ease; transition-delay: calc(var(--i, 0) * 28ms); }
.kin.is-static .kc { transform: none; opacity: 1; }

@supports (animation-timeline: view()) {
  .kin { view-timeline-name: --kin; view-timeline-axis: block; }
  .kin .kc, .kin.is-in .kc {
    transform: none; opacity: 1; transition: none;
    animation: kinIn linear both;
    animation-timeline: --kin;
    animation-range: entry 0% cover 26%;
  }
  @keyframes kinIn {
    from { transform: translate(var(--kx), var(--ky)) rotate(var(--kr)); opacity: .12; }
    to   { transform: none; opacity: 1; }
  }
  /* «8» в резюме сжимается и разжимается по ходу прокрутки */
  .six-num { view-timeline-name: --six; animation: sixBreath linear both; animation-timeline: --six; animation-range: cover 0% cover 100%; transform-origin: left bottom; }
  @keyframes sixBreath { 0% { transform: scaleX(.55); } 45%, 60% { transform: scaleX(1); } 100% { transform: scaleX(1.25); } }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .mq-track, .pv-years-track, .pv-prices-track, .live, .hero-cue .i { animation: none !important; }
  .kin .kc { transform: none !important; opacity: 1 !important; animation: none !important; }
  .six-num { animation: none !important; transform: none !important; }
  .screen.is-entering .fit-line .ch, .menu-list a { animation: none !important; opacity: 1 !important; transform: none; }
}


/* =========================================================================
   6. ПЕЧАТЬ РЕЗЮМЕ: три листа A4
   1 - шапка и продуктовый дизайн, 2 - графический дизайн, 3 - «Работала с», навыки, образование
   ========================================================================= */
@media print {
  @page { size: A4; margin: 14mm 14mm 14mm; }
  :root, :root[data-theme="dark"] {
    --paper: #fff; --paper-2: #fff; --ink: #000; --ink-2: #222; --ink-3: #555; --hair: #bbb; --grad: 0;
    --ultra: #000; --ultra-ink: #000; --on-ultra: #fff;
    color-scheme: light;
  }
  :root { --pad: 0px; --gut: 12px; }
  [data-room] { --acc: #000; --acc-ink: #000; --acc-big: #000; --on-acc: #fff; }
  html, body { background: #fff !important; color: #000 !important; }
  body { font-size: 10.5pt; }
  a { text-decoration: none; }
  .mono { font-size: 8pt; color: #333; }

  .bar, .guides, .skip, .menu, .wipe, .marquee, [data-footer], .read-chip,
  .room-meta, .cv-actions, .cv-cta, .read-progress,
  .room-about, .room-post, [data-screen="cases"] { display: none !important; }
  .grid, .cv-row, .skills, .room-title { padding-inline: 0 !important; }
  .room-title { margin-top: 0; }
  .room-title .fit-line { font-size: 42pt !important; }
  .room-title .ch { font-variation-settings: "wght" 900, "wdth" 60, "opsz" 144 !important; color: #000 !important; transform: none !important; animation: none !important; }
  .kin .kc { transform: none !important; opacity: 1 !important; animation: none !important; }
  .print-head { display: block; margin: 6pt 0 0; padding: 6pt 0; border-block: 1pt solid #000; font-family: var(--mono); font-size: 9pt; line-height: 1.5; text-transform: uppercase; }

  .cv-intro { padding-block: 8pt; border-bottom-width: 2pt; row-gap: 8pt; }
  .cv-name { font-size: 22pt; }
  .cv-role { font-size: 11pt; }
  .six-num { font-size: 72pt; animation: none !important; transform: none !important; color: #000; }
  .six-text { font-size: 12pt; }
  .cv-block { padding-top: 16pt; }
  .cv-block-head { padding-bottom: 6pt; break-after: avoid; }
  .sec-title { font-size: 22pt; }
  .sec-note { font-size: 8pt; }

  .cv-group { break-after: avoid; page-break-after: avoid; padding-block: 10pt 6pt !important; }
  .cv-group-t { font-size: 16pt; color: #000; }
  .cv-table + .cv-group { break-before: page; page-break-before: always; }
  .cv-row { padding-block: 5pt 6pt; border-top-width: 2pt; break-inside: avoid; row-gap: 4pt; }
  .y1 { font-size: 36pt; color: #000 !important; }
  .cv-place h3 { font-size: 15pt; }
  .cv-did li { font-size: 9.5pt; padding-block: 2pt; }

  .cv-block[aria-labelledby="cv-clients"] { break-before: page; page-break-before: always; padding-top: 0; }
  .logos, .skills, .facts { break-inside: avoid; }
  .logos { margin: 0; border-top-width: 2pt; }
  .logo-cell { min-height: 58pt; padding: 8pt; border-color: #ccc; }
  :root .logo-cell img, :root[data-theme="dark"] .logo-cell img { max-height: 26pt; filter: brightness(0) !important; opacity: 1 !important; }
  :root .logo-cell img[src$="parks-kazan.svg"] { max-height: 40pt; }
  :root .logo-cell img[data-size="s"] { max-height: 18pt; }
  :root .logo-cell img[data-size="l"] { max-height: 33pt; }
  :root .logo-cell img[data-size="xl"] { max-height: 42pt; }
  .skills { border-width: 2pt; }
  .skills li { font-size: 12pt; }
  .skills li::after { color: #000; }

  .facts { row-gap: 0; }
  .fact { padding-top: 6pt; }
  .fact-big { font-size: 20pt; }
  .fact-t { font-size: 9.5pt; margin-top: 4pt; }
  .fact-pair { display: block; font-size: 20pt; }
  .fact-pair > div, .fact-pair .fact-big, .fact-sep { display: inline; margin: 0; }
  .fact-pair .fact-t { display: none; }
  .fact-print { display: block; }
}