/* ============================================================================
   jeanwwd — фирменный стиль сайта. Переменные.
   Единица --u = 1/1920 ширины экрана (как в скелетах v1..v4): 1u = 1 px на
   1920, 0,75 px на 1440. На телефоне --u = 1/640. Мелкие кегли и кликабельные
   размеры имеют пол в px через max(), иначе на 1440 служебный текст 13u = 9,75 px.
   Обоснование каждой группы: какой кадр из refs/, какой скелет. Полный разбор:
   STYLE.md. Шрифты: только Geist 300/400/500, latin + cyrillic.
   ========================================================================== */

/* --- Шрифт: Geist, три начертания, латиница + кириллица (пути от этого файла) */
@font-face{font-family:'Geist';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/geist-300-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/geist-300-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Geist';font-style:normal;font-weight:300;font-display:swap;src:url('../fonts/geist-300-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Geist';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/geist-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+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/geist-400-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Geist';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/geist-400-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}
@font-face{font-family:'Geist';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/geist-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+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Geist';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/geist-500-cyrillic.woff2') format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Geist';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/geist-500-cyrillic-ext.woff2') format('woff2');unicode-range:U+0460-052F,U+1C80-1C88,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}

:root{
  /* --- Единица. Скелеты v1..v4 и заметки к ним сняты линейкой в 1/1920. ------ */
  --u: calc(100vw / 1920);

  /* --- Тон. Основной = светло-серая «бумага» Unseen (кадр unseen.png, фон
     страницы #e4e4e3, нейтрализован до #e6e6e4). Не белый, потому что элементы
     Unseen белые (таблетки, круглая кнопка «••», кнопка «Discuss a project»)
     и на белом фоне их не видно; Akaru тоже стоит на не-белой бумаге #f1efeb.
     Инверсный = чёрный #111 (карточка первого экрана v3, кадры sageeast /
     mateca / poch — три чёрных референса Жана) для одного экрана на страницу.
     Серый текст #646462 держит контраст 4,9:1 на основном фоне. ---------- */
  --ground: #e6e6e4;
  --ink: #141414;
  --ink-2: #646462;
  --surface: #ffffff;          /* таблетки, белые кнопки, карточки цифр (Collins) */
  --surface-2: #f4f4f2;        /* панель меню (Unseen: #f0edeb, нейтрализовано) */
  --cover: #c9c9c7;            /* серая заглушка обложки */
  --rule: #141414;             /* линейки 1 px, чёрные: Unseen под подписью, Akaru во всю ширину */
  --focus: #141414;
  --on-surface: #141414;       /* текст на белой поверхности (таблетка, белая кнопка, карточка) в обоих тонах */

  /* инверсные значения, включаются классом .inv на любом блоке */
  --ground-inv: #111111;
  --ink-inv: #f2f2f0;
  --ink-2-inv: #9a9a98;
  --surface-inv: #f2f2f0;      /* кнопка на чёрном становится белой (Fabbiani: белая «Book a Call» на тёмном) */
  --surface-2-inv: #1c1c1c;
  --cover-inv: #2c2c2c;
  --rule-inv: rgba(242,242,240,.32);

  /* --- Шкала кеглей. Заголовок 76u = Unseen «Selected Projects» (кап-высота
     55 px на кадре) и Embacy (76u, три строки на 1060u); гигант 222u = Akaru
     «Projects» (кап-высота 160 px); h2 56u = Fabbiani «How we work together»;
     h3 33u, основной 22u, подпись 18u, служебные 13u = одинаковы во всех четырёх
     скелетах. Пол в px: на 1440 множитель 0,75, на телефоне 0,6. ------------ */
  --fs-display: calc(222 * var(--u));                 /* v4: слово «Works 49»; только 1 раз на сайт */
  --fs-h1: max(40px, calc(76 * var(--u)));            /* заголовок первого экрана, «All works», имя работы, «Next work» */
  --fs-h2: max(30px, calc(56 * var(--u)));            /* заголовок раздела */
  --fs-h3: max(22px, calc(33 * var(--u)));            /* «In numbers», «Other works for Bestee» */
  --fs-lead-xl: max(30px, calc(62 * var(--u)));       /* вводный абзац под гигантом (Akaru, v4) */
  --fs-lead: max(20px, calc(30 * var(--u)));          /* утверждение: about, contact (v1 28u, v3 30u) */
  --fs-body: max(16px, calc(22 * var(--u)));          /* текст страницы работы */
  --fs-caption: max(14px, calc(18 * var(--u)));       /* подпись под обложкой, метаданные, точки Akaru */
  --fs-ui: max(14px, calc(16 * var(--u)));            /* навигация, кнопки (Akaru MENU 16u; Fabbiani 15u) */
  --fs-small: max(12px, calc(13 * var(--u)));         /* таблетки, теги, подвал, метки разделов */
  --fs-number: max(56px, calc(94 * var(--u)));        /* число в карточке Collins */
  --fs-menu: max(48px, calc(110 * var(--u)));         /* пункт меню Unseen */
  --fs-mark: max(72px, calc(150 * var(--u)));         /* заглушка знака клиента на первом экране работы, не типографика */
  --sup-display: max(20px, calc(42 * var(--u)));      /* надстрочное число у гиганта: Akaru «36» = 42u */

  --lh-display: .9;  --lh-h1: 1.06; --lh-h2: 1.1; --lh-h3: 1.2;
  --lh-lead-xl: 1.24; --lh-lead: 1.3; --lh-body: 1.45; --lh-caption: 1.33; --lh-small: 1.4;
  --ls-display: -.045em; --ls-h1: -.025em; --ls-h2: -.02em; --ls-h3: -.01em;
  --ls-lead-xl: -.025em; --ls-lead: -.01em; --ls-body: 0; --ls-ui: 0;

  --fw-display: 400;  /* заголовки только 400 (решение Жана); 300 — цифры ≥94u */
  --fw-heading: 400;
  --fw-ui: 500;       /* подписи кнопок, таблеток, клиент в подписи обложки: Unseen «All 20» — medium */
  --fw-number: 300;

  /* ширина колонки текста: 22u × ~34 em ≈ 68 знаков; заголовок ≤ 1200u (2 строки EN, ≤ 3 RU) */
  --measure: calc(760 * var(--u));
  --measure-h1: calc(1200 * var(--u));
  --measure-lead: calc(900 * var(--u));

  /* --- Сетка и ритм. Контейнер 1440u = Embacy (поля 240u) ≈ Unseen (1434u,
     74,7 %). Поле страницы 40u = Akaru (навигация, линейки во всю ширину,
     подвал). Межколонник 48u = Unseen (обложки x 240..940 и 985..1685).
     Отступ между блоками 160u — во всех четырёх скелетах. ------------------- */
  --container: calc(1440 * var(--u));
  --m-page: max(16px, calc(40 * var(--u)));
  --gutter: max(16px, calc(48 * var(--u)));
  --row-gap: max(32px, calc(64 * var(--u)));
  --cols-home: 2;      /* главная: две колонки, как Unseen */
  --cols-work: 3;      /* страница работ: три колонки, как Embacy (49 работ = 17 рядов вместо 25) */
  --s-1: max(4px, calc(8 * var(--u)));
  --s-2: max(8px, calc(16 * var(--u)));
  --s-3: max(12px, calc(24 * var(--u)));
  --s-4: max(20px, calc(40 * var(--u)));
  --s-5: max(32px, calc(64 * var(--u)));
  --s-6: max(48px, calc(96 * var(--u)));
  --s-7: max(80px, calc(160 * var(--u)));
  --ratio-cover: 3 / 2;    /* одна пропорция обложки на весь сайт (между 2:1 Unseen и 4:3 Akaru; вертикальные афиши и книги входят в кадр) */
  --ratio-tile: 1 / 1;     /* медиа-плитки страницы работы: квадраты по замечанию Жана к Embacy (6а) */
  --ratio-spread: 16 / 9;  /* вставка-«разворот» (Essen) */

  /* --- Элементы. Кнопка 50u = белая «Discuss a project» v1 и белый «Contact»
     Unseen; таблетка 30u (Unseen: активная «All 20» 29 px, обойма с полем 5u);
     круглая кнопка 50u (Unseen «••»: 50 px на кадре); точка Akaru 10u (11 px);
     аватар 34u в кнопке 50u (Fabbiani: квадрат 32u в кнопке 40u, здесь круг,
     потому что все кнопки — таблетки); большая кнопка 76u (v3 по Fabbiani). */
  --nav-h: max(64px, calc(96 * var(--u)));
  --btn-h: max(44px, calc(50 * var(--u)));
  --btn-h-lg: max(56px, calc(76 * var(--u)));
  --btn-px: max(18px, calc(24 * var(--u)));
  --btn-gap: max(10px, calc(14 * var(--u)));
  --round: max(44px, calc(50 * var(--u)));
  --round-dot: max(4px, calc(5 * var(--u)));
  --pill-h: max(30px, calc(30 * var(--u)));
  --pill-px: max(10px, calc(12 * var(--u)));
  --pill-gap: max(3px, calc(4 * var(--u)));
  --pill-inset: max(4px, calc(5 * var(--u)));
  --dot: max(8px, calc(10 * var(--u)));
  --dot-gap: max(10px, calc(16 * var(--u)));
  --avatar: max(30px, calc(34 * var(--u)));
  --avatar-lg: max(44px, calc(60 * var(--u)));
  --tag-h: max(22px, calc(26 * var(--u)));
  --icon: max(12px, calc(16 * var(--u)));
  --rule-w: 1px;
  --menu-w: calc(740 * var(--u));
  --card-w: calc(359 * var(--u));      /* карточка цифр Collins 359×490u, поле 30u */
  --card-h: calc(490 * var(--u));
  --card-p: max(20px, calc(30 * var(--u)));
  --card-offset: calc(457 * var(--u)); /* левый отступ ряда цифр Collins */

  /* --- Радиусы: кнопки и таблетки — 999 (Unseen, Akaru); обложки без
     скругления (Unseen, Embacy, Akaru — все острые); карточки цифр 12u
     (Collins); большая карточка-панель 24u (v3, Fabbiani первый экран). ----- */
  --r-pill: 999px;
  --r-cover: 0;
  --r-card: max(10px, calc(12 * var(--u)));
  --r-panel: max(16px, calc(24 * var(--u)));

  /* --- Движение: только появление блоков и перестановка фильтров. Кривая
     ease-out-cubic, чтобы движение начиналось быстро и не «плавало»; заворот
     листа и горизонтальная прокрутка — у другого воркера. ------------------- */
  --t-fast: 200ms;     /* наведение, подчёркивание, стрелка в подписи */
  --t-base: 400ms;     /* смена фильтра: скрытие/показ карточек */
  --t-slow: 700ms;     /* появление блока при входе в экран */
  --t-menu: 500ms;     /* панель меню Unseen */
  --ease-out: cubic-bezier(.22,.61,.36,1);
  --ease-inout: cubic-bezier(.65,0,.35,1);
  --stagger: 60ms;     /* шаг между карточками одного ряда */
  --reveal-y: max(12px, calc(24 * var(--u)));
}

/* телефон: единица 1/640, как в скелетах; сетки в одну колонку задаёт kit.css */
@media (max-width: 900px){
  :root{ --u: calc(100vw / 640); --cols-home: 1; --cols-work: 1; --fs-display: calc(160 * var(--u)); /* v4 на телефоне: 160u, слово «Works» входит в 640 */ }
}

/* инверсный тон блока: тот же набор имён, другие значения */
.inv{
  --ground: var(--ground-inv);
  --ink: var(--ink-inv);
  --ink-2: var(--ink-2-inv);
  --surface: var(--surface-inv);
  --surface-2: var(--surface-2-inv);
  --cover: var(--cover-inv);
  --rule: var(--rule-inv);
  --focus: var(--ink-inv);
  background: var(--ground); color: var(--ink);
}

/* --- База ------------------------------------------------------------------ */
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font-family:'Geist',system-ui,sans-serif;font-weight:400;font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;background:var(--ground);color:var(--ink);overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img,svg,video{max-width:100%;display:block}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (prefers-reduced-motion: reduce){
  :root{--t-fast:0ms;--t-base:0ms;--t-slow:0ms;--t-menu:0ms;--stagger:0ms;--reveal-y:0px}
}