*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

:root{
  /* Дизайн-токены (зафиксировано, июнь 2026 — менять только здесь):
     • отступ между модулями ......... 48px
     • заголовок→текст и между абзацами  8px
     • line-height: 16px → 24 (1.5) · 14px → 20 (1.43)
     • боковой паддинг «стакана» ...... 16px (моб и веб) · верх/низ → 80px
     • цвет тайтлов и выделений ....... чёрный 94% (--fg)
     • цвет обычного текста ........... чёрный 74% (--text)
     • подпись (дескриптор) от картинки 8px */
  --bg:#fcfcfc; --fg:rgba(0,0,0,.94); --text:rgba(0,0,0,.74); --muted:#8c8c8c; --faint:#ededed; --rule:#cfcfcf; --img-bg:#f4f4f3;
}
html{ background:var(--bg); }
body{ background:var(--bg); color:var(--fg);
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; font-size:16px; line-height:1.5;
  transition:background .25s ease,color .25s ease; }
a{ color:inherit; }
img{ display:block; max-width:100%; }

main{ min-height:100vh; display:flex; flex-direction:column; align-items:center; }
.col{ width:100%; flex:1; display:flex; flex-direction:column; }
.home .col{ max-width:640px; padding:80px 16px 120px; } /* +низ под фикс-бар «Связаться» (главная) */
.resume .col{ padding-bottom:0; } /* резюме: без фикс-бара — копирайт прижат к низу */
.case .col{ max-width:688px; padding:80px 16px 0; } /* низ 0 — копирайт прижат к низу */
@media(max-width:560px){ .home .col, .case .col{ padding-top:48px; } } /* моб: верх стакана 48 */

.ul{ text-decoration:underline; text-decoration-color:var(--rule); text-underline-offset:3px; text-decoration-thickness:1px; }
.ul:hover{ text-decoration-color:var(--fg); }

/* Important highlight */
.imp{ font-size:18px; font-weight:500; }
/* Inline highlight — medium weight, no size change */
.hl{ font-weight:500; color:var(--fg); }

/* ---------- Home ---------- */
.site-h1{ font-size:24px; font-weight:600; letter-spacing:-.02em; margin:0 0 4px; line-height:1.2; }
.tagline{ font-size:16px; line-height:1.5; color:var(--muted); margin:0; }
.home header{ margin-bottom:48px; }
/* ⚠️ РИТМ ГЛАВНОЙ — ЗАФИКСИРОВАНО, НЕ МЕНЯТЬ без явной причины:
   • между секциями ............ 48px  (.sec margin-bottom)
   • заголовок секции → контент .. 4px  (.sec h2 + .cs-head margin-bottom — ОБА должны быть 4px!)
   • строки внутри блока ......... 4px  (.stack / .linklist / .connect gap)
   Если правишь один из этих 4px — правь все, иначе «О себе» и «Кейсы» рассинхронятся (был такой баг). */
.sec{ margin-bottom:48px; }
.sec h2{ font-size:16px; font-weight:600; letter-spacing:-.01em; margin:0 0 4px; } /* отступ заголовок→контент = 4 */
.sec .stack{ display:flex; flex-direction:column; gap:4px; }
.sec p{ font-size:16px; line-height:1.5; color:var(--text); margin:0; text-wrap:pretty; }

/* .cs-head = заголовок секции с кнопкой-переключателем (Кейсы). margin-bottom ДОЛЖЕН совпадать с .sec h2 = 4px.
   gap:16px — это горизонтальный зазор между заголовком и кнопкой, к вертикальному ритму отношения не имеет. */
.cs-head{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:4px; }
.cs-head h2{ margin:0; }
.view-toggle{ display:inline-flex; align-items:center; gap:5px; background:none; border:none; padding:0;
  cursor:pointer; font-family:inherit; font-size:16px; font-weight:400; line-height:1; color:var(--text); }
.view-toggle svg{ position:relative; top:1.4px; } /* визуальный центр «Сетка» */
.view-toggle:hover{ color:var(--fg); }

.linklist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.linklist a{ font-size:16px; line-height:1.5; color:var(--text); }
.linklist a:hover{ color:var(--fg); }
.linklist .soon{ font-size:16px; line-height:1.5; color:var(--muted); }

.grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin-top:8px; } /* сетка: зазор тайтл→картинки 8 (схлопывается с cs-head), между работами 16 */
@media(max-width:560px){ .grid{ grid-template-columns:1fr; } }
.grid a{ text-decoration:none; color:var(--text); display:flex; flex-direction:column; }
.grid a:hover{ color:var(--fg); }
.grid .thumb{ background:var(--img-bg) center/cover no-repeat; border-radius:14px; aspect-ratio:4/3;
  display:flex; align-items:center; justify-content:center; overflow:hidden; }
.grid .thumb span{ font-family:ui-monospace,Menlo,monospace; font-size:11px; color:var(--muted); }
.grid .ttl{ font-size:16px; line-height:1.5; margin-top:8px; } /* название работы → её картинка = 8 */
.grid a.soon{ pointer-events:none; opacity:.5; }

.connect{ display:flex; flex-direction:column; gap:4px; }
.connect a{ font-size:16px; line-height:1.5; text-decoration:none; width:fit-content; color:var(--text); }
.connect a:hover{ color:var(--fg); }

/* Footer + theme toggle */
.foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.home .foot{ padding:48px 0 24px; }
.case .foot{ padding:148px 0 24px; } /* +100px сверху; копирайт у низа (24px), кнопка на уровне */
.foot .copy{ font-size:14px; line-height:1.43; color:var(--muted); }
@media(max-width:560px){ .foot{ flex-direction:column; align-items:flex-start; gap:4px; } }

.hidden{ display:none !important; }

/* «Связаться» — фикс-бар внизу. Градиент бел→прозрачный вверх, чтобы пункты читались над контентом.
   16 от тайтла до верха градиента · 4 тайтл→пункты · 24 снизу (моб 16). Пункты подчёркнуты как ссылки главной. */
.contact-bar{ position:fixed; left:0; right:0; bottom:0; z-index:55; pointer-events:none;
  /* solid до середины «Связаться» (~28px от верха), затем плавный фейд в прозрачность к верхнему краю */
  background:linear-gradient(to top, var(--bg) 0%, var(--bg) calc(100% - 28px), transparent 100%); }
.contact-bar .inner{ max-width:640px; margin:0 auto; padding:0 16px; pointer-events:auto; }
.contact-h{ font-size:16px; font-weight:600; letter-spacing:-.01em; line-height:1.5; color:var(--fg); margin:0; padding-top:16px; }
/* три равные колонки: Email слева, LinkedIn ровно по центру, Resume справа (space-between кривил центр) */
.contact-links{ display:grid; grid-template-columns:1fr 1fr 1fr; align-items:baseline; margin-top:4px; padding-bottom:24px; }
.contact-links a:nth-child(1){ justify-self:start; }
.contact-links a:nth-child(2){ justify-self:center; }
.contact-links a:nth-child(3){ justify-self:end; }
.contact-links a{ font-size:16px; line-height:1.5; color:var(--text); transition:color .15s ease;
  text-decoration:underline; text-decoration-color:var(--rule); text-underline-offset:3px; text-decoration-thickness:1px; }
.contact-links a:hover{ color:var(--fg); text-decoration-color:var(--fg); }
@media(max-width:560px){ .contact-links{ padding-bottom:16px; } }

/* ---------- Resume page ---------- */
.meta-row{ display:flex; flex-wrap:wrap; gap:8px 18px; color:var(--muted); font-size:14px; line-height:1.43; margin:0 0 28px; }
.resume-dl{ display:inline-flex; align-items:center; gap:9px; background:var(--fg); color:var(--bg);
  text-decoration:none; border-radius:999px; padding:11px 20px; font-size:16px; font-weight:600;
  width:fit-content; transition:opacity .2s ease; }
.resume-dl:hover{ opacity:.85; }
.resume-dl svg{ width:17px; height:17px; }

/* Кнопки скачивания CV — два «квадрата» как метрики геймификации (.metric-card),
   но не серая заливка, а бордер; иконка скачивания справа-сверху; ховер = серый фон --img-bg. */
.dl-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.dl-card{ position:relative; display:flex; flex-direction:column; text-decoration:none; color:var(--fg);
  background:transparent; border:1px solid var(--rule); border-radius:24px;
  padding:26px 26px 22px; min-height:150px; transition:background .18s ease, border-color .18s ease; }
.dl-card .dl-role{ font-size:18px; font-weight:600; letter-spacing:-.015em; line-height:1.1; color:var(--fg); padding-right:34px; }
.dl-card .dl-sub{ font-size:15px; color:var(--muted); margin-top:auto; }
.dl-card .dl-ico{ position:absolute; top:24px; right:24px; width:20px; height:20px; color:var(--fg); transition:transform .18s ease; }
@media(hover:hover){
  .dl-card:hover{ background:var(--img-bg); }   /* серый фон, бордер остаётся */
  .dl-card:hover .dl-ico{ transform:translateY(2px); }
}
@media(max-width:520px){
  .dl-card{ min-height:128px; padding:20px 18px; }
  .dl-card .dl-role{ font-size:18px; }
  .dl-card .dl-sub{ font-size:14px; }
  .dl-card .dl-ico{ top:18px; right:18px; }
}
.rexp{ display:flex; flex-direction:column; }
.rexp .role{ font-size:16px; font-weight:600; margin-bottom:6px; }
.rexp .when{ font-size:14px; line-height:1.43; color:var(--muted); margin:2px 0 14px; }
.rexp ul{ font-size:16px; line-height:1.5; margin:0; padding-left:22px; display:flex; flex-direction:column; gap:10px; }
.skills{ display:flex; flex-wrap:wrap; gap:8px; }
.skills span{ font-size:14px; color:var(--fg); background:var(--img-bg); border-radius:999px; padding:7px 14px; }
/* Лёгкие записи опыта: одна строка-заметка под ролью + воздух между ролями */
.rexp + .rexp{ margin-top:20px; }
.rexp p{ font-size:16px; line-height:1.5; color:var(--text); margin:0; text-wrap:pretty; }
/* Education — компактный двухстрочный список */
.edu-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.edu-list li{ display:flex; flex-direction:column; }
.edu-list .d{ font-size:16px; line-height:1.4; color:var(--fg); }
.edu-list .s{ font-size:14px; line-height:1.43; color:var(--muted); margin-top:1px; }
/* Ссылки в мета-блоках (Contact) */
.case-meta a{ color:inherit; }
.case-meta a:hover{ color:var(--fg); }
/* Заголовок несворачиваемого модуля (Download CV) — как заголовки секций на главной (.sec h2): 16px */
.mod-h{ font-size:16px; font-weight:600; letter-spacing:-.01em; color:var(--fg); margin:0 0 8px; }
/* Резюме (body.home): общий модуль содержит About + Experience + Education — большой запас высоты в раскрытом виде */
.home .tldr.open .tldr-body{ max-height:4000px; }
/* Резюме: открывается один раз, без сворачивания — после раскрытия курсор не «кликабельный» */
.home .tldr.open{ cursor:default; }
/* Резюме: заголовок «About» (TL;DR) — 16px, как остальные заголовки (на кейсах остаётся 18px) */
.home .tldr-h{ font-size:16px; letter-spacing:-.01em; }
/* Подзаголовки внутри общего модуля (Experience / Education) — как заголовки секций на главной: 16px */
.tldr-sub{ font-size:16px; font-weight:600; letter-spacing:-.01em; color:var(--fg); margin:28px 0 8px; }

/* Навыки в три колонки (Strategy & Discovery / UI Design & Craft / Tools & Collaboration) */
.skill-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px 20px; }
.skill-col h3{ font-size:13px; text-transform:uppercase; letter-spacing:.06em; font-weight:600; color:var(--muted); margin:0 0 10px; }
.skill-col .skill-list{ display:flex; flex-direction:column; gap:7px; }
.skill-col .skill-list span{ font-size:15px; line-height:1.4; color:var(--text); }
@media(max-width:560px){ .skill-cols{ grid-template-columns:1fr; gap:20px; } }

/* ---------- Case page ---------- */
/* прогресс-бар: top:0 + своя композ. слой (translateZ) — иначе на скролле пропадает (web) и
   даёт зазор сверху (моб). Прижат к самому краю; viewport-fit=cover в <meta> убирает моб-зазор. */
.progress{ position:fixed; top:0; left:0; right:0; height:3px; background:var(--faint); z-index:100;
  transform:translateZ(0); will-change:width; }
.progress > i{ display:block; height:100%; background:var(--fg); width:0%; }

.toc{ position:fixed; left:40px; top:50%; transform:translateY(-50%); z-index:40;
  display:flex; flex-direction:column; gap:8px; }
.toc a{ cursor:pointer; text-decoration:none; font-size:14px; letter-spacing:.01em; line-height:1.2;
  color:var(--muted); font-weight:500; transition:color .2s ease; }
.toc a:hover{ color:rgba(0,0,0,.95); }
.toc a.active{ color:var(--fg); font-weight:600; }
@media(max-width:900px){ .toc{ display:none; } }

.case-head{ margin-bottom:48px; }
.case-head h1{ font-size:24px; font-weight:600; letter-spacing:-.025em; margin:0; line-height:1.15; }
.case-head .sub{ font-size:16px; color:var(--muted); margin:0; }
.back{ font-size:15px; color:var(--muted); text-decoration:none; margin-bottom:32px; width:fit-content; }
.back:hover{ color:var(--fg); }

.cs{ margin-bottom:48px; }
.cs h2{ font-size:18px; font-weight:600; letter-spacing:-.015em; color:var(--fg); margin:0 0 8px; } /* заголовок→текст = 8 */
.cs .stack{ display:flex; flex-direction:column; gap:8px; } /* между абзацами = 8 */
.cs p{ font-size:16px; line-height:1.5; color:var(--text); margin:0; text-wrap:pretty; }
.cs ul{ font-size:16px; line-height:1.5; color:var(--text); margin:0; padding-left:22px; display:flex; flex-direction:column; gap:8px; }
.cs strong{ font-weight:600; color:var(--fg); }

.chain{ counter-reset:c; list-style:none; padding:0; margin:0; display:flex; flex-direction:column; }
.chain li{ counter-increment:c; position:relative; padding:14px 0 14px 44px; border-top:1px solid var(--faint);
  font-size:16px; line-height:1.55; }
.chain li:before{ content:counter(c); position:absolute; left:0; top:13px; width:28px; height:28px; border-radius:50%;
  background:var(--fg); color:var(--bg); font-size:13px; font-weight:600; display:flex; align-items:center; justify-content:center; }

figure{ margin:0 0 48px; container-type:inline-size; }   /* контейнер для cqw: радиусы «стаканов» масштабируются по ширине, форма не меняется при ресайзе */
.cs .stack + figure{ margin-top:48px; }   /* текст-блок → картинка: тот же ритм 48 (flex не схлопывает) */
.cs figure:last-child{ margin-bottom:0; } /* картинка в конце секции: не дублировать отступ — ритм 48 даёт сама секция */
figure img{ width:100%; border-radius:3.05cqw; background:var(--img-bg); }
figcaption{ font-size:14px; line-height:1.43; color:var(--muted); text-align:center; margin-top:8px; }

.metrics{ display:flex; gap:48px; flex-wrap:wrap; padding:36px 0; border-top:1px solid var(--faint); border-bottom:1px solid var(--faint); margin-bottom:48px; }
.metric .n{ font-size:20px; font-weight:600; letter-spacing:-.03em; line-height:1; }
.metric .l{ font-size:15px; color:var(--muted); margin-top:8px; max-width:180px; }

.quote-wrap{ margin-bottom:48px; }
blockquote{ margin:0 0 16px; padding:0; }
blockquote p{ font-size:18px; line-height:1.5; letter-spacing:-.01em; margin:0; text-wrap:pretty; }
.quote-by{ font-size:15px; color:var(--muted); }

/* NDA — trigger in caption + fullscreen modal */
.locked{ position:relative; }
.locked .badge{ position:absolute; top:14px; left:14px; background:rgba(0,0,0,.7); color:#fff;
  font-size:11px; font-weight:600; letter-spacing:.02em; padding:5px 11px; border-radius:999px; }
.locked.unlocked .badge{ background:rgba(31,122,77,.92); }
.nda-trigger{ color:var(--muted); text-decoration:underline; text-underline-offset:3px; cursor:pointer; white-space:nowrap; }
.nda-trigger:hover{ color:var(--fg); }
.nda-pin{ position:absolute; bottom:12px; right:12px; z-index:2; width:32px; height:32px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center; cursor:default;
  background:linear-gradient(135deg,rgba(255,255,255,.5),rgba(255,255,255,.2));
  backdrop-filter:blur(1.9px) saturate(180%); -webkit-backdrop-filter:blur(1.9px) saturate(180%);
  border:1px solid rgba(255,255,255,.6); box-shadow:0 6px 18px rgba(0,0,0,.16), inset 0 1px 1px rgba(255,255,255,.7);
  color:#1a1a1a; }
.nda-pin svg{ width:15px; height:15px; }
figcaption .dl{ color:var(--fg); font-weight:600; text-decoration:underline; text-underline-offset:3px; white-space:nowrap; }

.nda-overlay{ position:fixed; inset:0; z-index:200; display:none; align-items:center; justify-content:center;
  background:rgba(0,0,0,.24); padding:24px; }
.nda-overlay.open{ display:flex; }
/* Стеклянный попап — как шторка (frosted glass) */
.nda-modal{ position:relative; width:100%; max-width:380px; box-sizing:border-box; text-align:center;
  background:linear-gradient(135deg,rgba(255,255,255,.62),rgba(255,255,255,.34));
  backdrop-filter:blur(22px) saturate(180%); -webkit-backdrop-filter:blur(22px) saturate(180%);
  border:1px solid rgba(255,255,255,.6); border-radius:20px;
  box-shadow:0 16px 40px rgba(0,0,0,.18), inset 0 1px 1px rgba(255,255,255,.7); padding:16px 28px 28px; }
/* Крестик — голая иконка как стрелка в шторке; ховер = серый кружок (только на hover-устройствах) */
.nda-x{ position:absolute; top:14px; right:14px; width:34px; height:34px; display:inline-flex; align-items:center;
  justify-content:center; background:none; border:0; padding:0; cursor:pointer; color:#1a1a1a; }
.nda-x::before{ content:""; position:absolute; inset:0; border-radius:50%; background:var(--img-bg); opacity:0; transition:opacity .15s ease; }
.nda-x svg{ position:relative; z-index:1; }
@media(hover:hover){ .nda-x:hover::before{ opacity:1; } }
.nda-modal h3{ font-size:18px; font-weight:600; color:var(--fg); text-align:left; margin:0 40px 0 0; min-height:34px; display:flex; align-items:center; }
.nda-modal p{ font-size:14px; color:var(--muted); line-height:1.43; margin:0 auto 22px; max-width:300px; }
/* 4 ячейки кода */
.nda-code{ display:flex; gap:12px; justify-content:center; }
.nda-code.hidden{ display:none; }
.nda-cell{ width:54px; height:62px; text-align:center; font:600 26px inherit; color:var(--fg); box-sizing:border-box;
  background:rgba(255,255,255,.55); border:1px solid var(--rule); border-radius:14px; -webkit-appearance:none; appearance:none; }
.nda-cell:focus{ outline:none; border-color:var(--fg); }
/* Лоадер — круг размером с ячейку, по центру */
.nda-loader{ width:56px; height:56px; margin:3px auto; border-radius:50%;
  border:3px solid rgba(0,0,0,.12); border-top-color:var(--fg); animation:nda-spin .8s linear infinite; }
.nda-loader.hidden{ display:none; }
@keyframes nda-spin{ to{ transform:rotate(360deg); } }

/* Dock — toggle-кнопка-уголок (◢) + навигационный модуль.
   Короб dock = стакан: max-width 688 (резюме 640), центр; кнопка и правый-нижний угол
   модуля совпадают (бок 16, низ 24). Закрыто — виден треугольник-уголок; открыто —
   кнопка-уголок сохраняет форму и стекло, становясь частью угла формы.
   И веб, и моб: модуль на ширину стакана (отступы 16/24), растёт от кнопки. */
.dock{ position:fixed; left:0; right:0; bottom:0; z-index:60;
  max-width:688px; margin:0 auto; height:0; pointer-events:none; }
.home .dock{ max-width:640px; }   /* стакан резюме (.home .col) уже — 640 */

/* Кнопка — квадрат, скругление 16, стиль bubble (стекло): полупрозрачная заливка + бордер +
   тень + тёмная иконка. Справа-снизу. Закрыто — 4 точки; открыто — стрелка вниз.
   При наведении за иконкой серый кружок (как insert, --img-bg). Без clip-path/filter (чёрный баг). */
.dock-btn{ pointer-events:auto; position:absolute; right:16px; bottom:24px; z-index:2;
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; padding:0; border:1px solid rgba(255,255,255,.6); border-radius:16px;
  background:linear-gradient(135deg,rgba(255,255,255,.6),rgba(255,255,255,.3));
  backdrop-filter:blur(1.9px) saturate(180%); -webkit-backdrop-filter:blur(1.9px) saturate(180%);
  box-shadow:0 8px 24px rgba(0,0,0,.12), inset 0 1px 1px rgba(255,255,255,.7);
  cursor:pointer; color:#1a1a1a; transition:transform .15s ease, bottom .18s ease, right .18s ease; }
/* открыто: формы нет — только стрелка вниз на уровне пунктов; right:19 даёт ей тот же
   отступ от края, что у «Главная» слева (16 паддинг + 1 бордер). */
.dock.open .dock-btn{ bottom:36px; right:19px; background:none; border-color:transparent; box-shadow:none;
  backdrop-filter:none; -webkit-backdrop-filter:none; touch-action:none; }  /* свайп по стрелке тянет шторку, не скроллит */
.dock-btn::before{ content:""; position:absolute; width:34px; height:34px; border-radius:50%;
  background:var(--img-bg); opacity:0; transition:opacity .15s ease; }
/* Ховер-эффекты только на устройствах с реальным наведением (на тач не залипают):
   закрыто — лёгкий подъём (как старая bubble); открыто — серый кружок вокруг стрелки. */
@media(hover:hover){
  .dock:not(.open) .dock-btn:hover{ transform:translateY(-1px); }
  .dock.open .dock-btn:hover::before{ opacity:1; }
}
.dock-ico{ position:relative; z-index:1; transition:transform .2s ease; }
.dock-ico.spin{ animation:works-spin 1.1s linear infinite; transform-origin:50% 50%; }
@keyframes works-spin{ to{ transform:rotate(360deg); } }

/* Модуль — на ширину стакана; правый-нижний угол в той же точке, что и кнопка */
.dock-panel{ pointer-events:auto; position:absolute; right:16px; bottom:24px; z-index:1;
  width:calc(100% - 32px); box-sizing:border-box;
  background:linear-gradient(135deg,rgba(255,255,255,.62),rgba(255,255,255,.34));
  backdrop-filter:blur(22px) saturate(180%); -webkit-backdrop-filter:blur(22px) saturate(180%);
  border:1px solid rgba(255,255,255,.6); border-radius:20px;
  box-shadow:0 16px 40px rgba(0,0,0,.16), inset 0 1px 1px rgba(255,255,255,.7);
  padding:16px 16px 18px; display:flex; flex-direction:column; gap:16px;
  transform-origin:bottom right; animation:dock-pop .2s ease;
  touch-action:none; }  /* свайп по шторке тянет её (закрытие), а не скроллит страницу */
.dock-panel.hidden{ display:none; }
@keyframes dock-pop{ from{ opacity:0; transform:translateY(8px) scale(.98); } to{ opacity:1; transform:none; } }
@keyframes dock-up{ from{ transform:translateY(100%); } to{ transform:translateY(0); } }
.dock-head{ display:flex; align-items:center; }
.dock-head .ttl{ font-size:15px; font-weight:600; color:var(--fg); }
/* Скролл работ во всю ширину шторки: margin -16 по бокам отменяет паддинг модуля,
   padding 16 держит первую/последнюю карточку на 16 от края. Граница скролла = граница шторки.
   По вертикали 6/-6 — место рамке выбранного кейса. */
.dock-thumbs{ display:flex; gap:16px; overflow-x:auto; padding:6px 16px; margin:-6px -16px; touch-action:pan-x;
  scrollbar-width:none; -ms-overflow-style:none; }   /* без индикатора скролла */
.dock-thumbs::-webkit-scrollbar{ width:0; height:0; display:none; }
.dock-thumbs a{ flex:none; width:200px; text-decoration:none; color:var(--fg); }
.dock-thumbs .t{ background:var(--img-bg) center/cover no-repeat; border-radius:12px; aspect-ratio:16/10;
  display:flex; align-items:center; justify-content:center; }
.dock-thumbs .t.cur{ box-shadow:0 0 0 2px rgba(255,255,255,.85), 0 0 0 4px var(--fg); }
.dock-thumbs .t span{ font-family:ui-monospace,Menlo,monospace; font-size:10px; color:var(--muted); }
.dock-thumbs .cap{ font-size:13.5px; margin-top:9px; line-height:1.3; color:var(--muted); transition:color .15s ease; }
.dock-thumbs a:hover .cap{ color:var(--fg); }
.dock-thumbs a:has(.t.cur) .cap{ color:var(--fg); }
/* «Главная» начинается ровно на линии работ (16 от края, как первая карточка).
   Кнопка справа абсолютная — пункты слева под неё не попадают. */
.dock-nav{ display:flex; align-items:center; justify-content:flex-start; gap:24px; border-top:1px solid rgba(0,0,0,.08); padding-top:14px; }
.dock-nav a{ font-size:15px; font-weight:500; text-decoration:none; padding:6px 0; color:var(--muted); transition:color .15s ease; }
.dock-nav a:hover{ color:var(--fg); }

/* gray placeholder (no real image yet) */
.ph{ position:relative; aspect-ratio:16/10; width:100%; border-radius:20px; background:var(--img-bg);
  display:flex; align-items:center; justify-content:center; padding:40px; }
.ph span{ font-family:ui-monospace,Menlo,monospace; font-size:12px; color:var(--muted); text-align:center; }

/* TL;DR — складной скан-блок вверху кейса (категория → значение).
   Свёрнут по умолчанию (~100px, приглушён); при наведении становится чётким; клик в любом месте — развернуть/свернуть. */
.tldr{ margin:0 0 48px; cursor:pointer; outline:none; -webkit-tap-highlight-color:transparent; }
.tldr-h{ font-size:18px; font-weight:600; color:var(--text); opacity:.45; margin:0 0 8px; transition:opacity .2s ease; }
.tldr-body{ position:relative; max-height:100px; overflow:hidden; opacity:.45; transition:opacity .2s ease, max-height .4s ease; }
.tldr:focus-visible .tldr-body,
.tldr:focus-visible .tldr-h{ opacity:1; }
@media(hover:hover){
  .tldr:hover .tldr-body,
  .tldr:hover .tldr-h{ opacity:1; }
}
.tldr.open .tldr-body{ max-height:1600px; opacity:1; }
.tldr.open .tldr-h{ opacity:1; }
.tldr-body::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:46px;
  background:linear-gradient(to bottom, rgba(252,252,252,0), var(--bg)); pointer-events:none; transition:opacity .2s ease; }
.tldr.open .tldr-body::after{ opacity:0; }
/* выжимка — проза, разбита на абзацы по темам; между абзацами отступ 8; без заголовков-лейблов */
.tldr-body p{ font-size:16px; line-height:1.5; color:var(--text); margin:0; }
.tldr-body p + p{ margin-top:8px; }

/* Мета кейса (Роль/Команда/Платформа/Срок) — ОТДЕЛЬНЫЙ, всегда видимый блок под героем (не прячется) */
.case-meta{ margin:0 0 48px; }
.case-meta p{ font-size:16px; line-height:1.5; color:var(--text); margin:0; }
.case-meta p + p{ margin-top:4px; }
.case-meta b{ color:var(--fg); font-weight:600; }

/* Ключевой инсайт — выделенный продуктовый бит после «Контекста» */
.insight{ margin:28px 0 0; padding:18px 22px; border-left:3px solid var(--fg); background:var(--img-bg); border-radius:0 14px 14px 0; }
.insight .k{ display:block; font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:8px; }
.insight p{ margin:0; font-size:16px; line-height:1.5; }

/* CTA в конце кейса */
.case-cta{ display:flex; flex-wrap:wrap; gap:10px 20px; align-items:center; padding-top:28px; border-top:1px solid var(--faint); margin-top:24px; }

/* «ДОБАВИТЬ» — видимый структурный маркер пустого, но важного модуля (для автора) */
.todo{ display:block; margin:12px 0; padding:10px 14px; border:1px dashed #c9a227; border-radius:10px;
  background:rgba(201,162,39,.10); color:#8a6d00; font-size:13px; line-height:1.45; font-family:ui-monospace,Menlo,monospace; }
.todo b{ font-weight:700; letter-spacing:.02em; }

/* ===== Кейс 1 — инсерты, видео-мокапы, метрики-шейпы (июнь 2026) ===== */

/* Инсерт: прозрачный PNG/WebP на сером контейнере. Фон даёт контейнер,
   картинка ложится 1:1 (её прозрачные поля = серые отступы внутри контейнера). */
.ins{ width:100%; height:auto; display:block; background:var(--img-bg); border-radius:3.66cqw; }

/* Видео-контейнер — тот же серый «стакан» инсерта; внутри мокапы на отступах (по схемам). */
.vstage{ display:flex; align-items:center; justify-content:center; width:100%;
  background:var(--img-bg); border-radius:3.66cqw; container-type:inline-size; }
.vstage--duo{ gap:2.8%; padding:6.5% 2.9%; }     /* контейнер 6: телефон (Video 1) + веб (Video 2) */
.vstage--trio{ gap:3.5%; padding:5.5% 8.7%; }    /* контейнер 7: три телефона (Video 3·4·5) */

/* Фрагмент-мокап: скругление 24 + тень + бордер из артборда 1600×1000 — масштабируются
   пропорционально ширине контейнера (cqw), чтобы скругление и бордер не «овалили» при ресайзе.
   24/1600 = 1.5cqw · бордер 2/1600 = .125cqw · тень Y-6/blur47/spread-2 → .375/2.94/.125cqw. */
.vframe{ border-radius:1.5cqw; overflow:hidden; line-height:0; background:#fff;
  border:max(.5px,.125cqw) solid rgba(240,240,240,.54);
  box-shadow:0 -.375cqw 2.94cqw -.125cqw rgba(0,0,0,.12); }
.vframe video{ display:block; width:100%; height:auto; }
.vstage--duo .vframe--phone{ flex:0 1 25.9%; }
.vstage--duo .vframe--web{ flex:0 1 71.3%; }
.vstage--trio .vframe{ flex:0 1 31%; }

/* Эффект — метрики карточками-шейпами, ресайзятся под ширину «стакана». */
.metrics-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:36px 0 8px; }
.metric-card{ background:var(--img-bg); border-radius:24px; padding:26px 26px 22px;
  min-height:150px; display:flex; flex-direction:column; }
.metric-card .n{ font-size:28px; font-weight:700; letter-spacing:-.03em; line-height:1; color:var(--fg); }
.metric-card .l{ font-size:15px; color:var(--muted); margin-top:auto; max-width:200px; }
.metrics-src{ text-align:center; font-size:14px; line-height:1.43; color:var(--muted); margin:0; }
.cs p.metrics-src{ font-size:14px; line-height:1.43; color:var(--muted); }   /* перебить .cs p (16px/--text): дескриптор как под инсертами (14/1.43/--muted) */
.metrics-src a{ color:var(--muted); text-decoration:underline; text-underline-offset:3px; }
.metrics-src a:hover{ color:var(--fg); }
@media(max-width:520px){
  .metric-card{ min-height:128px; padding:20px 18px; }
  .metric-card .n{ font-size:24px; }
  .metric-card .l{ font-size:14px; }
}

/* Кейс 2 — одиночное видео-вставка (запись канваса/диаграммы): видео заполняет «стакан» инсерта. */
.vins{ width:100%; background:var(--img-bg); border-radius:3.66cqw; overflow:hidden; line-height:0; }
.vins video{ display:block; width:100%; height:auto; }

/* Кейс 2 — двойной инсерт: два отдельных «стакана» рядом (отступ 16), слева видео, справа картинка.
   Одна группа на ширину модуля; ресайзится как обычный инсерт. flex-grow задаём пропорционально
   соотношению сторон каждого «стакана» (правый = пропорция картинки 15 = 1.1421) → высоты «стаканов»
   всегда равны при любом ресайзе. */
.duo{ display:flex; align-items:flex-start; gap:16px; width:100%; }
.duo-v, .duo-i{ background:var(--img-bg); display:flex; align-items:center; justify-content:center; min-width:0; }
.duo-v{ flex:0.622 1 0; aspect-ratio:0.622; border-radius:1.26cqw; }   /* cqw от figure × доля ширины бокса → радиус ∝ ширине «стакана», как у полноширинных инсертов */
.duo-i{ flex:1.1421 1 0; border-radius:2.31cqw; }
.duo-v video{ display:block; width:66%; height:auto; border-radius:1.68cqw; box-shadow:0 6px 24px -8px rgba(0,0,0,.18); }
.duo-i img{ display:block; width:100%; height:auto; }