/* ============================================================================
   jeanwwd — набор элементов на tokens.css. Здесь только то, что одинаково во
   всех вариантах вёрстки: навигация, кнопки, таблетки, точки, подписи обложек,
   линейки, теги, подвал, меню, части страницы работы, состояния, появление.
   Раскладка блоков (где стоит сетка, сколько колонок у варианта) — в самих
   страницах. Размеры и цвета — только через переменные tokens.css.
   ========================================================================== */

/* --- Контейнер и поля -------------------------------------------------------- */
.wrap{width:min(var(--container), calc(100% - 2 * var(--m-page)));margin-left:auto;margin-right:auto}
.bleed{padding-left:var(--m-page);padding-right:var(--m-page)}

/* --- Типографика: классы = роли из шкалы --------------------------------------- */
.t-display{font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:var(--ls-display);font-weight:var(--fw-display)}
h1,.t-h1{font-size:var(--fs-h1);line-height:var(--lh-h1);letter-spacing:var(--ls-h1);font-weight:var(--fw-heading);text-wrap:balance;hyphens:manual}
h2,.t-h2{font-size:var(--fs-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-h2);font-weight:var(--fw-heading);text-wrap:balance;hyphens:manual}
h3,.t-h3{font-size:var(--fs-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-h3);font-weight:var(--fw-heading);text-wrap:balance}
.t-lead-xl{font-size:var(--fs-lead-xl);line-height:var(--lh-lead-xl);letter-spacing:var(--ls-lead-xl);font-weight:400;text-wrap:pretty}
.t-lead{font-size:var(--fs-lead);line-height:var(--lh-lead);letter-spacing:var(--ls-lead);font-weight:400;text-wrap:pretty}
.t-body{font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:0}
.t-caption{font-size:var(--fs-caption);line-height:var(--lh-caption)}
.t-ui{font-size:var(--fs-ui);line-height:1}
.t-small,.label{font-size:var(--fs-small);line-height:var(--lh-small)}
.label{color:var(--ink-2)}
.mute{color:var(--ink-2)}
.measure{max-width:var(--measure)}
.measure-h1{max-width:var(--measure-h1)}
.measure-lead{max-width:var(--measure-lead)}
.t-body p+p{margin-top:1em}
.t-display sup{font-size:var(--sup-display);letter-spacing:0;line-height:1;position:relative;top:calc(-.35 * var(--sup-display));margin-left:.06em;vertical-align:top;font-weight:400}
h1 sup,h2 sup,h3 sup,.t-h1 sup,.t-h2 sup,.t-h3 sup{font-size:.45em;letter-spacing:0;line-height:0;position:relative;top:-.9em;margin-left:.15em;vertical-align:baseline;font-weight:400}
.pill sup,.btn sup,.t-ui sup,.t-caption sup,.count{font-size:.75em;line-height:0;position:relative;top:-.35em;margin-left:.3em;vertical-align:baseline;font-weight:400}
.dot sup{font-size:.6em;line-height:0;position:relative;top:-.9em;margin-left:.3em;vertical-align:baseline;font-weight:400}

/* --- Иконки: стрелки штрихом 1,5 в квадрате 16u --------------------------------- */
.ico{width:var(--icon);height:var(--icon);flex:0 0 auto;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ico--lg{width:calc(var(--icon) * 1.5);height:calc(var(--icon) * 1.5)}
.ico-sprite{position:absolute;width:0;height:0;overflow:hidden}

/* --- Линейки ------------------------------------------------------------------- */
.rule{border:0;border-top:var(--rule-w) solid var(--rule)}
.rule--full{margin-left:calc(-1 * var(--m-page));margin-right:calc(-1 * var(--m-page))}

/* --- Навигация: имя 16u/500 слева, ссылки 16u, справа белая кнопка с аватаром
   и круглая кнопка «••» (Unseen). Высота 96u. ---------------------------------- */
.nav{height:var(--nav-h);display:flex;align-items:center;gap:var(--s-4);padding:0 var(--m-page);font-size:var(--fs-ui);line-height:1}
.nav__name{font-weight:500;letter-spacing:0}
.nav__links{display:flex;align-items:center;gap:max(16px, calc(32 * var(--u)))}
.nav__links a{position:relative;padding:.35em 0}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform var(--t-fast) var(--ease-out)}
.nav__links a:hover::after,.nav__links a[aria-current]::after{transform:scaleX(1)}
.nav__right{margin-left:auto;display:flex;align-items:center;gap:var(--s-2)}
.nav--overlay{position:absolute;top:0;left:0;right:0;z-index:5}
.nav--inset{padding:0}

/* --- Кнопки: таблетка 50u, подпись 16u/500. Первичная чёрная, вторичная белая,
   призрачная с линейкой 1px. В инверсии первичная белая (Fabbiani). ---------- */
.btn{display:inline-flex;align-items:center;gap:var(--btn-gap);height:var(--btn-h);padding:0 var(--btn-px);border-radius:var(--r-pill);font-size:var(--fs-ui);font-weight:var(--fw-ui);line-height:1;white-space:nowrap;background:var(--surface);color:var(--on-surface);transition:background var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out)}
.btn:hover{background:color-mix(in srgb, var(--surface) 55%, var(--ground))}
.btn--primary{background:var(--ink);color:var(--ground)}
.btn--primary:hover{background:color-mix(in srgb, var(--ink) 84%, var(--ground))}
.btn--ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 var(--rule-w) color-mix(in srgb, var(--ink) 35%, transparent)}
.btn--ghost:hover{background:color-mix(in srgb, var(--ink) 8%, transparent)}
.btn--lg{height:var(--btn-h-lg);padding:0 calc(var(--btn-px) * 1.5);font-size:var(--fs-lead);gap:calc(var(--btn-gap) * 1.4)}
.btn__avatar{width:var(--avatar);height:var(--avatar);border-radius:50%;background:var(--cover);flex:0 0 auto;margin-right:calc(var(--btn-px) * -1 + (var(--btn-h) - var(--avatar)) / 2)}
.btn--lg .btn__avatar{width:var(--avatar-lg);height:var(--avatar-lg);margin-right:calc(var(--btn-px) * -1.5 + (var(--btn-h-lg) - var(--avatar-lg)) / 2)}
.btn--primary .btn__avatar{background:color-mix(in srgb, var(--ground) 75%, var(--ink))}
.btn .ico{margin-right:calc(var(--btn-gap) * -.3)}

/* --- Круглая кнопка 50u: белая с двумя точками (меню Unseen); чёрная —
   закрыть и «AI» внизу слева. --------------------------------------------- */
.round{width:var(--round);height:var(--round);border-radius:50%;background:var(--surface);color:var(--on-surface);display:inline-flex;align-items:center;justify-content:center;gap:calc(var(--round-dot) * .8);flex:0 0 auto;font-size:var(--fs-small);font-weight:500;transition:background var(--t-fast) var(--ease-out),transform var(--t-fast) var(--ease-out)}
.round:hover{background:color-mix(in srgb, var(--surface) 55%, var(--ground))}
.round i{width:var(--round-dot);height:var(--round-dot);border-radius:50%;background:currentColor;display:block}
.round--ink{background:var(--ink);color:var(--ground)}
.round--ink:hover{background:color-mix(in srgb, var(--ink) 84%, var(--ground))}
.aibtn{position:fixed;left:var(--m-page);bottom:max(16px, calc(30 * var(--u)));z-index:6}

/* --- Таблетки фильтров (Unseen): обойма 72 % белого с полем 5u, таблетка 30u,
   кегль 13u/500, число 0,75em, активная чёрная. В инверсии таблетка тёмно-
   серая, активная белая. Ноль работ — 35 % и не нажимается. ------------------ */
:root{--pill-bg:var(--surface);--pill-ink:var(--on-surface);--panel-row-y:max(20px, calc(48 * var(--u)))}
.inv{--pill-bg:var(--surface-2);--pill-ink:var(--ink)}
.pills{display:inline-flex;flex-wrap:wrap;gap:var(--pill-gap);padding:var(--pill-inset);border-radius:var(--r-pill);background:color-mix(in srgb, var(--surface) 72%, transparent);max-width:100%}
.inv .pills{background:color-mix(in srgb, var(--ink) 10%, transparent)}
.pill{display:inline-flex;align-items:center;height:var(--pill-h);padding:0 var(--pill-px);border-radius:var(--r-pill);background:var(--pill-bg);color:var(--pill-ink);font-size:var(--fs-small);font-weight:var(--fw-ui);line-height:1;white-space:nowrap;transition:background var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out),opacity var(--t-fast)}
.pill:hover{background:color-mix(in srgb, var(--pill-bg) 60%, var(--ground))}
.pill.is-active,.pill.is-active:hover{background:var(--ink);color:var(--ground)}
.pill:disabled,.pill.is-empty{opacity:.35;pointer-events:none}
.pillrows{display:flex;flex-direction:column;gap:var(--s-1)}
.pillrows--center{align-items:center}
.pillrows--left{align-items:flex-start}

/* --- Точки-маркеры (Akaru): точка 10u, подпись 18u, число 0,6em высоко.
   Неактивная — серая точка и серый текст, активная — чёрные. ---------------- */
.dots{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--gutter)}
.dots--spread{justify-content:space-between}
.dotrows{display:flex;flex-direction:column;gap:var(--s-3)}
.dot{display:inline-flex;align-items:baseline;gap:var(--dot-gap);font-size:var(--fs-caption);line-height:1.2;color:var(--ink-2);white-space:nowrap;transition:color var(--t-fast) var(--ease-out)}
.dot i{width:var(--dot);height:var(--dot);border-radius:50%;background:color-mix(in srgb, var(--ink) 25%, var(--ground));flex:0 0 auto;transform:translateY(-.05em);transition:background var(--t-fast) var(--ease-out)}
.dot:hover{color:var(--ink)}
.dot.is-active{color:var(--ink)}
.dot.is-active i{background:var(--ink)}
.dot:disabled,.dot.is-empty{opacity:.35;pointer-events:none}

/* --- Обложка и подпись. Обложка 3:2 без скругления. Подпись 18u: клиент 500,
   вид работы серым, стрелка ↘ справа внизу (Unseen), линейка 1px под подписью. */
.cover{display:block;width:100%;aspect-ratio:var(--ratio-cover);background:var(--cover);border-radius:var(--r-cover);overflow:hidden}
.cover--tile{aspect-ratio:var(--ratio-tile)}
.cover--spread{aspect-ratio:var(--ratio-spread)}
.item{display:block;min-width:0;color:inherit}
.cap{display:grid;grid-template-columns:1fr auto;align-items:end;column-gap:var(--s-2);padding:var(--s-2) 0 var(--s-1);border-bottom:var(--rule-w) solid var(--rule);font-size:var(--fs-caption);line-height:var(--lh-caption)}
.cap__client{display:block;font-weight:var(--fw-ui)}
.cap__kind{display:block;color:var(--ink-2)}
.cap__arrow{grid-column:2;grid-row:1;align-self:end;transition:transform var(--t-fast) var(--ease-out);margin-bottom:.25em}
.item:hover .cap__arrow{transform:translate(15%,15%)}
.cap--norule{border-bottom:0}
.cap--inline .cap__client,.cap--inline .cap__kind{display:inline}
.tag{display:inline-flex;align-items:center;height:var(--tag-h);padding:0 max(8px, calc(10 * var(--u)));border-radius:var(--r-pill);box-shadow:inset 0 0 0 var(--rule-w) color-mix(in srgb, var(--ink) 35%, transparent);font-size:var(--fs-small);line-height:1;color:var(--ink-2);white-space:nowrap;font-style:normal}
.cap .tag{grid-column:1;margin-top:var(--s-2);justify-self:start}

/* --- Сетка обложек: колонки по переменной, межколонник 48u, ряды через 64u --- */
.grid{display:grid;grid-template-columns:repeat(var(--cols, 2), minmax(0,1fr));column-gap:var(--gutter);row-gap:var(--row-gap)}
.grid--home{--cols:var(--cols-home)}
.grid--work{--cols:var(--cols-work)}
.empty{display:none;padding:var(--s-5) 0;font-size:var(--fs-caption);color:var(--ink-2)}
.empty a{color:var(--ink);text-decoration:underline;text-underline-offset:.2em}
.is-empty-grid + .empty,.empty.is-on{display:block}

/* --- Ссылки в тексте и подвал ------------------------------------------------ */
.link{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:color-mix(in srgb, currentColor 40%, transparent);transition:text-decoration-color var(--t-fast)}
.link:hover{text-decoration-color:currentColor}
.foot{border-top:var(--rule-w) solid var(--rule);padding:max(16px, calc(28 * var(--u))) 0;font-size:var(--fs-small);line-height:var(--lh-small);color:var(--ink-2);display:flex;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap}
.foot a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em;text-decoration-color:transparent;transition:color var(--t-fast),text-decoration-color var(--t-fast)}
.foot a:hover{color:var(--ink);text-decoration-color:currentColor}
.contacts{font-size:var(--fs-caption);line-height:1.45}
.contacts a{display:block}

/* --- Меню Unseen: панель 740u, пункты 110u с номерами, крест в чёрном круге --- */
.menu-layer{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:20}
.menu{position:absolute;top:0;right:0;bottom:0;width:var(--menu-w);max-width:100%;pointer-events:auto;background:var(--surface-2);color:var(--ink);transform:translateX(105%);transition:transform var(--t-menu) var(--ease-inout),visibility 0s linear var(--t-menu);padding:max(24px, calc(50 * var(--u))) max(24px, calc(150 * var(--u))) max(24px, calc(50 * var(--u))) max(24px, calc(135 * var(--u)));display:flex;flex-direction:column;justify-content:center;visibility:hidden}
.menu-open .menu{transform:none;visibility:visible;transition-delay:0s}
/* rows of a panel (menu items, rows of the request form) come in one after another once the panel is halfway in;
   on the way out they leave with the panel. One recipe for both panels: lead.css reuses .panel-row. */
.menu li,.panel-row{opacity:0;transform:translateY(var(--panel-row-y));transition:opacity var(--t-base) var(--ease-out),transform var(--t-base) var(--ease-out)}
.menu-open .menu li,.lead-open .panel-row{opacity:1;transform:none;transition-duration:var(--t-slow);transition-delay:calc(var(--t-menu) * .5 + var(--i, 0) * var(--stagger))}
.menu__close{position:absolute;top:var(--s-3);right:var(--s-3)}
.menu ol{list-style:none}
.menu li{display:flex;align-items:flex-start;gap:var(--s-2);font-size:var(--fs-menu);line-height:1.1;letter-spacing:-.035em;font-weight:400}
.menu li span{font-size:var(--fs-caption);color:var(--ink-2);padding-top:.3em;min-width:1.6em;letter-spacing:0}
.menu li a{border-bottom:2px solid transparent;transition:border-color var(--t-fast)}
.menu li a:hover{border-color:currentColor}
.menu li.dim a{color:var(--ink-2);border-color:var(--ink-2)}
.menu__foot{position:absolute;left:max(24px, calc(135 * var(--u)));right:max(24px, calc(150 * var(--u)));bottom:max(24px, calc(50 * var(--u)));display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s-3)}

/* --- Страница работы: первый экран, метаданные, разворот, цифры, текст ------- */
.case-hero{height:100vh;min-height:calc(600 * var(--u));background:color-mix(in srgb, var(--ink) 26%, var(--ground));display:flex;align-items:center;justify-content:center;gap:max(12px, calc(30 * var(--u)));color:var(--surface)}
.case-hero i{width:calc(120 * var(--u));height:calc(120 * var(--u));background:var(--surface);border-radius:var(--r-card);display:block;opacity:.9}
.case-hero b{font-size:var(--fs-mark);font-weight:400;letter-spacing:-.03em;line-height:1}
.meta{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gutter);padding-top:var(--s-3);border-top:var(--rule-w) solid var(--rule);font-size:var(--fs-caption);line-height:var(--lh-caption)}
.meta span{display:block;color:var(--ink-2)}
.meta .mute{color:var(--ink-2)}
.case-spread{background:color-mix(in srgb, var(--ink) 32%, var(--ground));height:140vh;padding:max(24px, calc(60 * var(--u))) 0}
.case-spread .inset{width:72vw;height:100%;margin:0 auto;background:var(--ground);display:grid;grid-template-columns:1fr 1fr;gap:2px;overflow:hidden}
.case-spread .inset div{background:var(--surface-2)}
.numbers .row{display:flex;gap:max(12px, calc(22 * var(--u)));overflow-x:auto;padding:0 var(--m-page) var(--s-3) var(--card-offset);scrollbar-width:none}
.numbers .row::-webkit-scrollbar{display:none}
.numbers h3{padding-left:var(--card-offset);margin-bottom:var(--s-4)}
.card{flex:0 0 var(--card-w);min-width:220px;height:var(--card-h);min-height:300px;background:var(--surface);color:var(--on-surface);border-radius:var(--r-card);padding:var(--card-p);display:flex;flex-direction:column;justify-content:space-between}
.card .n{font-size:var(--fs-number);font-weight:var(--fw-number);line-height:1;letter-spacing:-.03em}
.card b{display:block;font-size:var(--fs-ui);font-weight:500;line-height:1.3;margin-bottom:var(--s-1)}
.card p{font-size:var(--fs-ui);line-height:1.4;color:#646462}
.case-text{max-width:var(--measure)}
.next{display:block;padding:var(--s-7) 0}
.next__label{display:block;font-size:var(--fs-caption);letter-spacing:0;color:var(--ink-2);margin-bottom:var(--s-3);line-height:var(--lh-caption)}
.next .t-h1{display:block}
.next:hover .t-h1{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.08em}

/* --- Появление: блок поднимается на 24u и проявляется за 700ms; карточки одного
   ряда — с шагом 60ms. Класс .is-in ставит kit.js по IntersectionObserver. ----- */
.reveal{opacity:0;transform:translateY(var(--reveal-y));transition:opacity var(--t-slow) var(--ease-out),transform var(--t-slow) var(--ease-out);transition-delay:calc(var(--i, 0) * var(--stagger))}
.reveal.is-in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}

/* --- Телефон ------------------------------------------------------------------ */
@media (max-width:900px){
  .nav__links{display:none}
  .meta{grid-template-columns:1fr 1fr;gap:var(--s-3)}
  .numbers h3,.numbers .row{padding-left:var(--m-page)}
  .case-spread .inset{width:calc(100% - 2 * var(--m-page))}
  .menu{padding-left:var(--m-page);padding-right:var(--m-page)}
  .menu__foot{left:var(--m-page);right:var(--m-page);flex-direction:column;align-items:flex-start}
  .dots--spread{justify-content:flex-start}
}

/* --- добавки: стрелка в строке текста, стрелка-число в карточке ------------------ */
.ico--inline{display:inline-block;vertical-align:-.08em;width:.8em;height:.8em}
.card .n-ico{width:.7em;height:.7em;stroke-width:1}