/* ══════════════════════════════════════════════════════════
   About You UZ — tokens.css · ЕДИНСТВЕННЫЙ источник значений
   Цвет: вкусовая рамка 24.08 (красный H 0±4 · S ≥ 95 · L 38–46).
   Типоритм: 112 / 64 / 48 / 32 / 22–18 / 15–13 / 11.5 (канвас 28.08).
   Никаких новых hex и размеров в секционных css — только var().
   ══════════════════════════════════════════════════════════ */
:root{
  /* ── цвет ── */
  --signal:#E10600;          /* сигнальный красный, акценты и CTA */
  --signal-lift:#FF1A0D;     /* мелкий красный текст на графите */
  --bordeaux:#6E0000;        /* глубина; только в градиентах/плашках */
  --bordeaux-deep:#520000;
  --ember:#F04818;           /* только внутри градиентов */
  --graphite:#141312;        /* фон тёмных актов */
  --graphite-2:#1C1A19;
  --graphite-25:#221F1D;     /* середина градиента «Заявки» (175deg, 55%) */
  --graphite-3:#26221F;      /* тёплый конец тёмных градиентов */
  --bone:#EDEAE3;
  --paper:#F2EFE9;
  --paper-2:#EAE6DE;         /* второй тон бумаги: акт «Как работаем», чтобы длинная бумага не была одним листом (решение 07.09) */
  --white:#FFFFFF;           /* узлы схем, карточки на бумаге */
  --ink:#141312;             /* чернила на бумаге. Тот же hex, что --graphite, —
                                нарочно: два имени по роли (фон / текст), одно
                                значение по бренду. Разводить их нельзя: половина
                                секций красит тёмное --graphite, половина --ink,
                                и любая разница стала бы двумя чёрными на одной
                                странице (аудит 07.09) */

  /* ── прозрачности ── */
  --dim:rgba(237,234,227,.58);       /* основной тихий текст на графите */
  --dim-strong:rgba(237,234,227,.8); /* второй по громкости на графите */
  --faint:rgba(237,234,227,.14);     /* единственная волосяная линия на графите */
  --faint-16:rgba(237,234,227,.16);  /* только обводка рамочной кнопки на графите */
  /* тихий текст на бумаге — ровно три роли (аудит 07.09, п. 7):
     --ink-dim  .6  основной тихий: описания, лид, невыбранная вкладка
     --ink-mid  .45 вторичный: техподписи, счётчики, теги, метки «Фильтр:»
     --ink-soft .3  третьестепенный: вторичные техподписи, подчёркивание
                    тега, обводка рамочной кнопки под курсором */
  --ink-dim:rgba(20,19,18,.6);
  --ink-mid:rgba(20,19,18,.45);
  --ink-soft:rgba(20,19,18,.3);
  /* линии на бумаге — одна волосяная (--ink-hair) и одна сетка-подложка.
     --ink-faint — обводка рамочной кнопки и вкладки на бумаге (пара к
     --faint-16 на графите); для линий-разделителей не использовать */
  --ink-faint:rgba(20,19,18,.2);
  --ink-hair:rgba(20,19,18,.12);
  --ink-grid:rgba(20,19,18,.06);
  --dim-half:rgba(237,234,227,.5);   /* инициалы в кружках команды */
  --faint-30:rgba(237,234,227,.3);   /* пунктирная обводка кружка «+» */

  /* ── кружки команды (акт «О нас», AboutManifesto 1440) ── */
  --avatar-a:#332D29;        /* верх градиента нечётных кружков */
  --avatar-b:#2C2724;        /* верх градиента чётных кружков */

  /* ── шрифт ── */
  --disp:"Unbounded","Golos Text",system-ui,sans-serif;
  --body:"Golos Text",system-ui,sans-serif;

  /* ── типоритм (desktop → clamp) ──
     Иерархия заголовков (решение Никиты 07.09) — три ступени, на 1440:
       hero  --fs-hero-photo  76  самый громкий, один на страницу
       ряды  --fs-row         60  имена направлений: кегль здесь — содержание
       акты  --fs-act         48  h2 всех остальных актов, приглушены
     Ритм у всех трёх один: Unbounded 900, letter-spacing −.015em, line-height 1
     (у hero −.03em / .96 — своя посадка на фото, v3-hero.css). Правило для h2
     актов на v3 — .page-v3 h2:not(.row__name) в v3.css. */
  --fs-hero:clamp(56px,7.8vw,112px);      /* hero-фраза v1 (index.html, main.css .hero__h — не использует, оставлен как верх шкалы) */
  --fs-row:clamp(28px,4.6vw,60px);        /* имена направлений (.row__name) */
  --fs-act:clamp(25px,3.4vw,48px);        /* h2 актов: кейсы, «Что можно поручить», масштаб, команда, заявка */
  --fs-sub:clamp(28px,3.4vw,48px);        /* цифры схем, инициалы основателя; по значению почти --fs-act — кандидат на слияние */
  --fs-manifest:clamp(22px,2.3vw,33px);   /* манифест */
  --fs-stamp:32px;
  --fs-h3:clamp(18px,1.6vw,22px);         /* заголовки строк */
  --fs-card:17px;                          /* заголовки карточек каталога */
  --fs-node:16px;                          /* узлы схем */
  --fs-body:15px;
  --fs-small:13px;
  --fs-caption:12px;
  --fs-kicker:11.5px;
  --fs-tech:10px;                          /* техподписи схем */

  /* ── сетка ── */
  --pad:clamp(20px,4.5vw,64px);
  --content-max:1440px;

  /* ── движение ── */
  --ease:cubic-bezier(.16,1,.3,1);         /* выход, основной */
  --ease-io:cubic-bezier(.65,0,.35,1);     /* смены состояний */
  --dur-s:.3s;
  --dur-m:.6s;
  --dur-l:1s;
  --reveal-shift:24px;                     /* подъём при появлении */
  /* тень заливной кнопки под курсором — графит, не чёрный: единственный
     rgba(0,0,0) на странице снят (аудит 07.09, п. 1.1) */
  --shadow-cta:14px 14px 0 color-mix(in srgb,var(--graphite) 22%,transparent);
  --marquee-speed:36s;                     /* полный цикл ленты */
}

/* ── добавлено секциями ── */
:root{
  /* v2 hero: капс-подписи над YOU — тише текста, но громче --ink-dim
     (артборд HeroVicoPaper: rgba(20,19,18,.75)) */
  --ink-quiet:rgba(20,19,18,.75);

  /* Кегль тихого UI: фильтр каталога, рамочные и призрачные кнопки.
     Долг был помечен прямо в cases.css («вынести в --fs-ui») — вынесен
     здесь; сама cases.css продолжает жить на своей локальной копии,
     чтобы index.html и v2.html не сдвинулись ни на пиксель. */
  --fs-ui:12.5px;

  /* v3 hero: затемнение поверх фотографии. Ступени одного графита
     rgba(20,19,18) — цвет тот же, что --graphite, меняется только альфа;
     --veil-none нужен явным нулём, чтобы градиент не уходил в чёрный
     через прозрачный (transparent = rgba(0,0,0,0)). */
  --veil-hard:rgba(20,19,18,.92);
  --veil-deep:rgba(20,19,18,.86);
  --veil-mid:rgba(20,19,18,.72);
  --veil-soft:rgba(20,19,18,.18);
  --veil-none:rgba(20,19,18,0);

  /* v3 hero: фраза набрана словами, а не вордмарком, — своя вилка.
     Верхняя граница 76px посчитана по факту: Unbounded 900 в капсе идёт
     ~0.87em на знак, и на 1440 самая длинная строка макета (19 знаков)
     ложится в 1213px при колонке 1312. Выше — переносится по слогам.
     Низ 30px (07.09): на 390 hero обязан оставаться громче рядов (--fs-row
     28) и h2 актов (--fs-act 25) — три ступени держатся и на телефоне. */
  --fs-hero-photo:clamp(30px,5.1vw,76px);

  /* Команда v2 (07.09): карточки людей стали компактными — круглый портрет
     вместо прямоугольного 3/4. Размер один на весь блок, у основателя —
     на ступень крупнее. Верх вилки 104/128 посчитан по сетке: пять колонок
     на 1440 при --pad 64 дают колонку 246px, портрет занимает ~42 %. */
  --portrait:clamp(72px,7vw,104px);
  --portrait-lead:clamp(96px,8.6vw,128px);
}

/* ARTCASES TOKENS — generated by export-site.cjs */
:root{
--ac-paper:var(--paper);--ac-ink:var(--ink);--ac-muted:var(--ink-dim);--ac-line:var(--ink-hair);--ac-signal:var(--red);--ac-display:var(--disp);
  --ac-background-001: rgb(226, 222, 215);
  --ac-transition-002: transform 0.6s;
  --ac-font-size-003: 12px;
  --ac-font-size-004: 23px;
  --ac-font-size-005: 15px;
  --ac-background-006: rgb(36, 76, 202);
  --ac-background-007: linear-gradient(transparent 55%, rgba(0, 0, 0, 0.467));
  --ac-background-008: rgb(19, 40, 32);
  --ac-color-009: rgb(255, 255, 255);
  --ac-font-010: 700 24px/1.13 var(--ac-display);
  --ac-font-011: 500 clamp(32px,4.4vw,67px)/1 var(--ac-display);
  --ac-color-012: rgb(20, 19, 18);
  --ac-background-013: rgb(242, 239, 233);
  --ac-font-014: 700 15px/1.2 var(--ac-display);
  --ac-font-size-015: clamp(24px, 3.3vw, 47px);
  --ac-font-016: 500 19px/1.3 var(--ac-display);
  --ac-background-017: linear-gradient(rgba(8, 45, 23, 0.2), transparent 20%, transparent 57%, rgba(8, 45, 23, 0.91));
  --ac-background-018: linear-gradient(rgba(4, 18, 35, 0.533), transparent 35%, transparent 55%, rgba(4, 18, 35, 0.91));
  --ac-background-019: linear-gradient(transparent 60%, rgba(103, 25, 7, 0.79));
  --ac-font-size-020: 20px;
  --ac-font-size-021: 13px;
  --ac-font-size-022: 25px;
  --ac-font-size-023: 16px;
  --ac-font-size-024: 26px;
  --ac-font-size-025: 59px;
  --ac-font-size-026: 39px;
  --ac-background-027: rgb(124, 48, 41);
  --ac-background-028: linear-gradient(90deg, rgb(124, 48, 41) 0%, rgba(124, 48, 41, 0) 45%), linear-gradient(transparent 58%, rgba(52, 16, 14, 0.8));
  --ac-background-029: linear-gradient(rgba(0, 0, 0, 0.2), transparent 35%, transparent 45%, rgba(17, 17, 17, 0.733));
  --ac-font-size-030: 19px;
  --ac-font-size-031: 49px;
  --ac-font-size-032: 11px;
  --ac-font-size-033: 21px;
  --ac-font-size-034: clamp(38px, 4.4vw, 65px);
  --ac-font-size-035: 38px;
  --ac-font-size-036: 56px;
  --ac-font-size-037: clamp(44px, 4.4vw, 65px);
  --ac-font-size-038: clamp(18px, 1.5vw, 23px);
  --ac-background-039: linear-gradient(rgba(50, 9, 9, 0.333), transparent 30%, transparent 60%, rgba(41, 7, 6, 0.7));
  --ac-background-040: linear-gradient(rgba(23, 29, 13, 0.42), transparent 40%, transparent 50%, rgba(17, 17, 17, 0.667));
  --ac-background-041: linear-gradient(rgba(0, 19, 50, 0.533), transparent 35%, transparent 65%, rgba(0, 19, 50, 0.7));
  --ac-background-042: linear-gradient(rgba(3, 35, 40, 0.5), transparent 35%, transparent 62%, rgba(3, 35, 40, 0.73));
  --ac-background-043: linear-gradient(rgba(92, 8, 8, 0.267), transparent 35%, transparent 57%, rgba(92, 8, 8, 0.7));
  --ac-background-044: linear-gradient(rgba(6, 43, 44, 0.533), transparent 35%, transparent 60%, rgba(6, 43, 44, 0.8));
  --ac-background-045: linear-gradient(rgba(24, 22, 18, 0.467), transparent 40%, transparent 52%, rgba(24, 22, 18, 0.85));
  --ac-background-046: rgb(234, 223, 211);
  --ac-filter-047: grayscale(1);
  --ac-color-048: rgb(27, 24, 21);
  --ac-background-049: linear-gradient(transparent 50%, rgba(27, 24, 21, 0.83));
  --ac-background-050: rgb(20, 19, 18);
  --ac-background-051: linear-gradient(transparent 65%, rgb(20, 19, 18));
  --ac-background-052: linear-gradient(rgba(0, 43, 51, 0.333), transparent 40%, transparent 65%, rgba(0, 34, 43, 0.8));
  --ac-font-size-053: 17px;
  --ac-font-size-054: 40px;
  --ac-font-size-055: 14px;
  --ac-font-size-056: 65px;
  --ac-background-057: rgb(146, 198, 252);
  --ac-background-058: linear-gradient(90deg, rgb(146, 198, 252) 0%, rgba(146, 198, 252, 0.667) 20%, transparent 48%);
  --ac-color-059: rgb(21, 48, 83);
  --ac-background-060: rgb(38, 89, 220);
  --ac-border-061: 5px solid rgb(156, 190, 255);
  --ac-border-radius-062: 13px;
  --ac-box-shadow-063: rgba(8, 32, 101, 0.333) -20px 20px 40px;
  --ac-background-064: linear-gradient(90deg, rgb(38, 89, 220) 0%, rgba(38, 89, 220, 0.7) 18%, transparent 56%), linear-gradient(transparent 65%, rgba(25, 59, 169, 0.79));
  --ac-background-065: linear-gradient(rgba(108, 163, 237, 0.063) 1px, transparent 1px) 0% 0% / 28px 28px, linear-gradient(90deg, rgba(108, 163, 237, 0.063) 1px, transparent 1px) rgb(7, 32, 67);
  --ac-filter-066: drop-shadow(rgba(129, 189, 255, 0.267) 0px 0px 28px);
  --ac-box-shadow-067: rgba(0, 0, 0, 0.467) 0px 12px 28px;
  --ac-border-068: 1px solid rgb(100, 148, 225);
  --ac-border-radius-069: 9px;
  --ac-background-070: linear-gradient(transparent 60%, rgba(6, 30, 67, 0.4));
  --ac-background-071: rgb(159, 204, 255);
  --ac-border-radius-072: 3px;
  --ac-background-073: rgb(17, 18, 24);
  --ac-background-074: linear-gradient(rgba(16, 17, 22, 0.533), transparent 35%, transparent 70%, rgba(16, 17, 22, 0.333));
  --ac-color-075: rgb(227, 237, 157);
  --ac-background-076: rgb(173, 41, 46);
  --ac-background-077: rgb(237, 233, 223);
  --ac-box-shadow-078: rgba(75, 7, 30, 0.4) 0px 20px 35px;
  --ac-background-079: rgb(243, 238, 226);
  --ac-box-shadow-080: rgba(64, 7, 25, 0.333) 0px 10px 24px;
  --ac-color-081: rgb(255, 230, 217);
  --ac-background-082: linear-gradient(transparent 50%, rgba(139, 29, 38, 0.66));
  --ac-background-083: rgb(232, 238, 164);
  --ac-border-084: 1px solid rgba(52, 67, 36, 0.267);
  --ac-border-radius-085: 50%;
  --ac-box-shadow-086: rgb(232, 238, 164) 0px 0px 0px 35px, rgba(52, 67, 36, 0.133) 0px 0px 0px 36px, rgb(232, 238, 164) 0px 0px 0px 72px, rgba(52, 67, 36, 0.133) 0px 0px 0px 73px;
  --ac-font-087: 17px / 1.7 monospace;
  --ac-color-088: rgb(38, 53, 37);
  --ac-background-089: rgb(38, 53, 37);
  --ac-color-090: rgb(232, 238, 164);
  --ac-color-091: rgb(36, 50, 37);
  --ac-background-092: linear-gradient(90deg, rgb(232, 238, 164) 0%, transparent 45%);
  --ac-background-093: rgb(118, 84, 219);
  --ac-border-094: 5px solid rgb(194, 174, 250);
  --ac-background-095: rgb(243, 244, 246);
  --ac-box-shadow-096: rgba(36, 27, 105, 0.333) 0px 20px 35px;
  --ac-border-097: 28px solid rgba(190, 164, 253, 0.333);
  --ac-background-098: linear-gradient(90deg, rgb(118, 84, 219), transparent 70%), linear-gradient(transparent 40%, rgba(88, 53, 190, 0.8));
  --ac-background-099: rgb(240, 196, 172);
  --ac-color-100: rgb(71, 42, 35);
  --ac-background-101: linear-gradient(transparent 45%, rgba(59, 33, 26, 0.6));
  --ac-background-102: linear-gradient(rgb(146, 198, 252) 0%, transparent 40%, rgba(146, 198, 252, 0.4) 70%, rgb(146, 198, 252) 97%);
  --ac-font-size-103: 9px;
  --ac-background-104: linear-gradient(transparent 55%, rgb(139, 29, 38) 93%);
  --ac-background-105: rgb(205, 232, 132);
  --ac-color-106: rgb(18, 25, 28);
  --ac-box-shadow-107: rgba(35, 57, 22, 0.267) 0px 20px 40px;
  --ac-border-108: 1px solid rgb(51, 57, 61);
  --ac-background-109: rgb(10, 14, 18);
  --ac-border-110: 0px;
  --ac-background-111: linear-gradient(rgba(18, 42, 63, 0.267), transparent 45%);
  --ac-background-112: linear-gradient(rgba(31, 16, 8, 0.5), transparent 45%);
  --ac-background-113: linear-gradient(rgba(40, 6, 17, 0.533), transparent 45%);
  --ac-background-114: linear-gradient(rgba(33, 6, 36, 0.533), transparent 45%);
}

/* v3 refinement · shared large-screen frame, calm diagram and photo placeholders. */
.page-v3{
  --v3-content-max:1920px;
  --v3-inset:max(var(--pad),calc((100vw - var(--v3-content-max))/2));
  --v3-fs-hero-sub-mobile:17px;
  --v3-fs-opening:clamp(32px,3.5vw,68px);
  --v3-fs-story:clamp(19px,1.65vw,28px);
  --v3-photo:48px;
  --v3-photo-lead:88px;
  --v3-photo-fill:color-mix(in srgb,var(--bone) 5%,var(--graphite));
  --v3-logo-height:34px;
  --v3-logo-tall:46px;
  --v3-node-radius:6px;
  --v3-node-shadow:0 2px 6px color-mix(in srgb,var(--ink) 3%,transparent);
  --v3-case-large:clamp(480px,28vw,580px);
  --v3-case-small:clamp(350px,21vw,430px);
  --v3-motion-quick:220ms;
}