/* Commissioner (SIL OFL): FLAR 100, VOLM 0 и наклон 0 закреплены в файле, вес 400–500; латиница и кириллица */
@font-face{font-family:'Commissioner';src:url(fonts/commissioner.woff2) format('woff2');font-weight:400 500;font-style:normal;font-display:swap}
/* Layout: full-bleed homepage mock in the brand's own fixed palette (single look, same in both themes): dark nav + split hero (photo right, role caption on a plate at the bottom; other variants — hero-variants.src.html), light reading sections, dark formula and AI bands, light about/articles, dark CTA and footer.
   Photos are never faded into the background with a gradient (shadow falls on the face) — decisions.md, 10.10 and 11.10.2026. */
:root{
  --ink:#263B46; --ink-deep:#1E2F38; --espresso:#392A24; --espresso-soft:#6B5A50;
  --ivory:#E8DDC6; --paper:#F3EDE2; --oyster:#D9CFBB; --gold:#A18045; --gold-light:#C4A266; --gold-deep:#7E6230;
  --metal:linear-gradient(160deg,#EBD3A0 0%,#C9A563 35%,#9C7738 70%,#D2B277 100%);
  --text:'Commissioner',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ease:cubic-bezier(.22,1,.36,1);
  color-scheme:light;
}
*{box-sizing:border-box;font-variation-settings:'FLAR' 100,'VOLM' 0}
body{margin:0;background:var(--paper);color:var(--espresso);font-family:var(--text);font-size:18px;line-height:1.65}
h1,h2,h3,p,ul,ol{margin:0}
h1,h2,h3{font-weight:400;text-wrap:balance;letter-spacing:-.003em}
a{color:inherit}
.wrap{max-width:1200px;margin:0 auto;padding-inline:clamp(16px,4vw,48px)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:999px;font-size:16px;font-weight:500;text-decoration:none;white-space:nowrap;cursor:pointer;border:0;font-family:inherit;transition:filter .2s,transform .2s var(--ease)}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:scale(.97)}
.btn:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,button:focus-visible{outline:3px solid var(--gold-light);outline-offset:3px}
.btn.gold{background:var(--gold-light);color:var(--ink-deep)}
/* живая кнопка записи: мягкий золотой ореол раз в несколько секунд, отклик при наведении (как «Выпустить карту» на rumto.com) */
.btn.live{position:relative;isolation:isolate}
.btn.live::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:0 0 0 0 rgba(196,162,102,.55);pointer-events:none}
.motion .btn.live::after{animation:halo 5.5s var(--ease) 2.2s infinite}
@keyframes halo{0%,72%{box-shadow:0 0 0 0 rgba(196,162,102,.55)}100%{box-shadow:0 0 0 16px rgba(196,162,102,0)}}
@media (hover:hover){.motion .btn.live:hover{animation:moema .5s var(--ease)}}
@keyframes moema{0%{transform:scale(1)}35%{transform:scale(.95)}70%{transform:scale(1.04)}100%{transform:scale(1)}}
.btn.ghost{box-shadow:inset 0 0 0 1px var(--gold);color:var(--ivory)}
.btn.ink{background:var(--ink);color:var(--ivory)}
.eyebrow{font-size:13px;letter-spacing:.2em;text-transform:uppercase;font-weight:500}

/* logo: символы из brand/sprite.svg, шапка — вариант C */
.logo{display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--ivory)}
.logo svg{display:block;flex:none;overflow:visible}
.logo .mk{width:60px;height:60px;filter:drop-shadow(0 3px 6px rgba(10,18,24,.5))}
.logo .wm{width:146px;height:60px}
footer .logo .mk{width:46px;height:46px}
footer .logo .wm{width:112px;height:46px}
.cameo-mk{display:block;width:92px;height:92px;overflow:visible;filter:drop-shadow(0 3px 6px rgba(57,42,36,.22))}

/* nav: на узких экранах меню прячется под кнопку «Меню» */
/* шапка закреплена сверху: прячется, когда листают вниз, и появляется, когда листают вверх (как на rumto.com) */
/* шапка — плавающая плашка, как на rumto.com: отступ от краев окна, скругленная, поверх первого экрана;
   прячется, когда листают вниз, и появляется, когда листают вверх. --hdr — место под нее сверху каждого экрана */
.top{position:fixed;z-index:20;top:var(--top-gap);left:max(var(--side-gap),calc((100% - 1240px) / 2));right:max(var(--side-gap),calc((100% - 1240px) / 2));background:rgba(30,47,56,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--ivory);border-radius:22px;box-shadow:0 12px 34px rgba(10,18,24,.32),inset 0 0 0 1px rgba(196,162,102,.18);transition:transform .45s var(--ease),opacity .45s var(--ease)}
.top.hide{transform:translateY(calc(-100% - var(--top-gap) - 8px));opacity:0}
:root{--top-gap:14px;--side-gap:16px}
.top>.nav{max-width:none;padding:10px 14px 10px 18px}
.nav{display:flex;align-items:center;gap:16px 32px}
.top .logo .mk{width:52px;height:52px}
.top .logo .wm{width:127px;height:52px}
.nav ul{list-style:none;padding:0;display:flex;gap:6px 28px;font-size:15px;margin-left:auto}
.nav ul a{text-decoration:none;opacity:.88;padding-block:8px}
.nav ul a:hover{opacity:1}
.menu{display:none}
@media (max-width:1080px){
  .nav>ul,.nav>.btn{display:none}
  .menu{display:block;margin-left:auto}
  .menu summary{list-style:none;display:inline-flex;align-items:center;min-height:48px;padding:0 20px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--gold);font-size:16px;cursor:pointer}
  .menu summary::-webkit-details-marker{display:none}
  .menu[open] summary{background:var(--ivory);color:var(--ink-deep)}
  .menu .panel{position:absolute;left:0;right:0;top:calc(100% + 8px);background:var(--ink-deep);border-radius:22px;box-shadow:0 18px 40px rgba(10,18,24,.4);padding:8px 22px 22px;display:grid;gap:4px}
  .menu .panel ul{display:grid;gap:0;margin:0;font-size:18px}
  .menu .panel ul a{display:block;padding:12px 0;border-bottom:1px solid rgba(232,221,198,.12)}
  .menu .panel .btn{margin-top:16px}
}
@media (max-width:420px){.top .logo .mk{width:44px;height:44px}.top .logo .wm{width:108px;height:44px}}

/* hero — общее */
.hero{background:var(--ink);color:var(--ivory);position:relative;overflow:hidden}
.hero>.wrap{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);padding-inline:0;max-width:none}
.hero .copy{padding:calc(var(--hdr,96px) + 24px) clamp(16px,5vw,72px) clamp(40px,7vw,104px);display:grid;gap:26px;align-content:center;max-width:780px;justify-self:end;width:100%}
/* подпись роли — на фото (над головой или внизу), чтобы не повторять EXECUTIVE COACH из знака в шапке.
   Фон под ней темный (стена, жакет), поэтому подложки и градиента нет */
.hero .cap{position:absolute;left:0;right:0;z-index:3;margin:0;padding:0 24px;text-align:center;font-size:14px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;color:var(--gold-light);text-shadow:0 1px 10px rgba(10,18,24,.7);text-wrap:balance}
/* внизу под фото — светлый гольф, поэтому подпись на сплошной плашке (не градиент), с золотой линией сверху, как подпись под портретом */
[data-cap="bottom"] .hero .cap{bottom:0;padding:18px 24px 20px;background:rgba(30,47,56,.94);box-shadow:inset 0 1px 0 var(--gold);text-shadow:none}
/* на первом экране шапка видна всегда — заголовок ниже на одну свою строку, чтобы не прижимался к шапке (Валерия, 15.10.2026).
   На низких окнах — сколько позволяет высота: экран не должен вырасти выше окна, кнопки остаются на первом экране */
.hero h1{font-size:clamp(34px,4.2vw,56px);line-height:1.1;text-wrap:pretty;margin-top:clamp(0px,calc(100svh - 760px),1.1em)}
.hero h1 em{font-style:normal;color:var(--gold-light);display:block}
.hero .lead{font-size:clamp(21px,2.15vw,30px);line-height:1.45;max-width:34ch;opacity:.94}
.hero .lead .m{display:block;margin-top:18px;font-size:.8em;letter-spacing:.02em;color:var(--gold-light);opacity:1}
.hero .acts{display:flex;flex-wrap:wrap;gap:12px}
.hero figure{margin:0;position:relative}
.hero .ph{position:absolute;inset:0;overflow:hidden}
.hero .ph img{display:block;width:100%;height:100%;object-fit:cover}
.hero .seam{display:none}
.hero>canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero>.wrap{position:relative}
.hero figure{z-index:1}

/* «Разворот»: фото справа, по шву «две линии» — плотная у фото, тонкая со стороны текста; без градиента */
[data-hero="split"] .hero figure{min-height:560px}
[data-hero="split"] .hero .ph img{object-position:50% 30%;transition:translate .8s var(--ease)}
[data-hero="split"] .hero .seam{display:block;position:absolute;top:0;bottom:0;left:-18px;width:18px;z-index:2}
.seam i{position:absolute;top:0;bottom:0;background:var(--metal);transform-origin:50% 0}
.seam i:first-child{right:0;width:5px}
.seam i+i{right:12px;width:1.5px}
/* блик медленно бежит по шву сверху вниз */
.seam i{overflow:hidden}
.motion .seam i::after{content:"";position:absolute;left:0;right:0;top:-30%;height:30%;background:linear-gradient(180deg,rgba(255,244,214,0),rgba(255,244,214,.95),rgba(255,244,214,0));animation:glint 7s var(--ease) 1.6s infinite}
.motion .seam i+i::after{animation-delay:2.1s}
@keyframes glint{0%{top:-30%}45%,100%{top:110%}}

/* «Медальон»: фото в круге с кантом «две линии»; свечение — на фоне за кругом, не поверх фото */

@media (max-width:900px){
  .hero>.wrap{grid-template-columns:minmax(0,1fr)}
  [data-hero="split"] .hero figure{min-height:440px}
  [data-hero="split"] .hero .seam{top:-18px;bottom:auto;left:0;right:0;width:auto;height:18px}
  .seam i{top:auto;bottom:auto;left:0;right:0;transform-origin:0 50%}
  .seam i:first-child{bottom:0;width:auto;height:5px}
  .seam i+i{bottom:12px;width:auto;height:1.5px}
}

/* light sections */
.sec{padding-block:clamp(56px,8vw,112px)}
/* один экран — один блок: на компьютере шапка + первый экран занимают окно целиком, каждый следующий блок — не ниже окна,
   содержимое по центру по вертикали. Последний экран — призыв вместе с подвалом. На телефоне блоки и так высокие */
@media (min-width:861px) and (min-height:620px){
  .hero{min-height:100svh}
  .hero>.wrap{min-height:inherit}
  .hero .copy{grid-template-rows:auto 1fr auto;align-content:stretch;padding-block:calc(var(--hdr,96px) + clamp(16px,4vh,48px)) clamp(40px,6vh,72px)}
  .hero .lead{align-self:center}
  /* «Решения»: заголовок и подзаголовок у верхнего края, крупнее; колонки — посередине оставшейся высоты, с большими промежутками */
  main section.sec.situations{justify-content:flex-start;padding-top:calc(var(--hdr,96px) + clamp(16px,4vh,48px));padding-bottom:clamp(32px,5vh,64px)}
  main section.sec.situations>.wrap{flex:1;display:flex;flex-direction:column}
  .situations .sec-head{max-width:none;gap:36px}
  .situations .sec-head h2{font-size:clamp(40px,4.2vw,60px);line-height:1.1}
  .situations .sec-head p{font-size:clamp(21px,1.75vw,25px);line-height:1.55}
  .situations .cases{margin-block:auto}
  .situations .case{row-gap:22px;padding-top:30px}
  .situations .case h3{font-size:clamp(24px,2.1vw,30px)}
  .situations .case .key{margin-top:24px;font-size:clamp(20px,1.6vw,23px)}
  .situations .case .rest{font-size:18px;margin-top:6px}
  /* «Формула»: пример заметно ниже формулы — формулу и текст видно по отдельности; вся группа — посередине окна под шапкой (Валерия, 14.10.2026) */
  main section.sec.formula{justify-content:center;padding-block:calc(var(--hdr,96px) + clamp(16px,3vh,40px)) clamp(16px,3vh,40px)}
  main section.sec.formula>.wrap{gap:0}
  main .formula .eq{margin-top:clamp(28px,7vh,72px)}
  main .formula .story{margin-top:clamp(48px,11vh,120px)}
  main .formula .steps{margin-top:clamp(20px,3vh,32px)}
  main section.sec.about{padding-bottom:clamp(32px,5vh,64px)}
  main .about figure img{aspect-ratio:auto;height:min(calc(100svh - var(--hdr,96px) - 290px),620px)}
  main section.sec.formats{display:block;min-height:0;height:300svh;padding:0}
  .formats .fm-stage{position:sticky;top:0;height:100svh;display:flex;align-items:center;padding:calc(var(--hdr,96px) + clamp(12px,3vh,32px)) 0 clamp(28px,5vh,56px)}
  .fm-stage>.wrap{width:100%}
  .formats .fm-snap{scroll-snap-align:start;scroll-snap-stop:always}
  main .sec:not(.cta){min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:calc(var(--hdr,96px) + clamp(16px,3vh,40px))}
  main .sec:not(.cta)>.wrap{width:100%}
  .cta{min-height:calc(100svh - var(--ftr,260px));display:flex;flex-direction:column;justify-content:center;padding-top:calc(var(--hdr,96px) + 16px)}
  .cta>.wrap{width:100%}
  /* доводка прокрутки: страница останавливается на начале блока (Валерия, 11.10.2026). Мягкая (proximity): подтягивает,
     только если страница и так остановилась у начала экрана — легкое движение пальцем не уводит на следующий экран, пока читаешь;
     scroll-snap-stop — на каждом, резкое движение не проскакивает экран (Валерия, 15.10.2026) */
  html{scroll-snap-type:y proximity}
  main section:not(.formats){scroll-snap-align:start;scroll-snap-stop:always}
}
.motion{scroll-behavior:smooth}
html{scroll-padding-top:0}
.sec-head{display:grid;gap:14px;max-width:760px;margin-bottom:clamp(32px,4vw,56px)}
.sec-head .eyebrow{color:var(--gold-deep)}
.sec-head h2{font-size:clamp(30px,3.4vw,44px);line-height:1.15}
.sec-head p{color:var(--espresso-soft);max-width:60ch}
.cases{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
@media (max-width:860px){.cases{grid-template-columns:minmax(0,1fr)}}
/* «Решения»: оживает при прокрутке, без наведения — ситуации поднимаются по очереди, над каждой прорисовывается
   золотая линия, затем подчеркивается главная фраза. Вариант «Фокус» — situations-variants.src.html */
.situations .sec-head{margin-inline:auto;text-align:center;justify-items:center;margin-bottom:clamp(28px,3.4vw,44px)}
.situations .sec-head p{max-width:none}
/* печатающаяся часть заголовка (как строка на первом экране rumto.com): темным золотом, один раз при появлении блока.
   Буквы стоят на своих местах с самого начала (невидимые), поэтому строка не прыгает */
.typed{color:var(--gold-deep)}
.typed .ch{opacity:0;position:relative}
.typed .ch.on{opacity:1}
/* курсор вложен в последнюю видимую букву и стоит абсолютно — не влияет на переносы строк */
.typed .caret{position:absolute;left:calc(100% + 2px);top:.12em;width:2px;height:.9em;opacity:1;background:var(--gold);animation:caret 1s steps(1) infinite;transition:opacity .6s}
.typed .caret.done{animation:none;opacity:0}
@keyframes caret{50%{opacity:0}}
@media (min-width:861px){.situations .sec-head .ln{white-space:nowrap}}
/* номер, заголовок, главная фраза и пояснение — четыре уровня, одинаковые во всех колонках, сколько бы строк ни занял
   каждый (subgrid); все по центру колонки */
.cases{grid-template-rows:auto auto auto auto}
.case{display:grid;grid-template-rows:subgrid;grid-row:span 4;row-gap:12px;padding-top:22px;border-top:1px solid var(--oyster);position:relative;align-content:start;text-align:center;justify-items:center}
@media (max-width:860px){.cases{grid-template-rows:none}.case{grid-template-rows:none;grid-row:auto}}
.case::before{content:"";position:absolute;top:-1px;left:0;right:0;height:2px;background:var(--metal);transform-origin:50% 50%;transition:transform 1.1s var(--ease)}
.case .n{font-size:15px;letter-spacing:.14em;font-weight:500;color:var(--gold-deep)}
.case h3{font-size:clamp(22px,2vw,26px);line-height:1.25}
/* главная фраза — отдельным уровнем, ниже заголовка, золотом (темное золото проходит по контрасту на светлом, 4,9:1) */
.case .key{margin-top:14px;font-size:20px;line-height:1.4;color:var(--gold-deep);max-width:24ch}
.case .rest{color:var(--espresso-soft);max-width:34ch}
.motion .case{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i) * 180ms)}
.motion .case::before{transform:scaleX(0)}
.motion .case .key{opacity:0;transform:translateY(8px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.motion .cases.in .case{opacity:1;transform:none}
.motion .cases.in .case::before{transform:none;transition-delay:calc(var(--i) * 260ms + 250ms)}
.motion .cases.in .case .key{opacity:1;transform:none;transition-delay:calc(var(--i) * 260ms + 900ms)}

.formula{background:var(--ink-deep);color:var(--ivory);text-align:center}
.formula .wrap{display:grid;gap:26px;justify-items:center}
.formula .eyebrow{color:var(--gold-light)}
/* формула в две строки: «Решение на миллион =» и под ней четыре множителя. Сама показывает, что будет, если один из них — ноль:
   слово плавно уходит вверх, на его место опускается золотой 0, «Решение на миллион» зачеркивается и гаснет.
   В конце множители возвращаются по одному, решение мягко загорается золотом и рассыпает искры. Все движения плавные, без рывков */
.formula .eq{font-size:clamp(32px,4.4vw,64px);line-height:1.2;margin:0;position:relative}
.formula .eq .l1,.formula .eq .l2{display:block}
@media (min-width:861px){.formula .eq .l2{white-space:nowrap}}
.formula .eq .x{color:var(--gold-light);margin-inline:.12em}
.formula .res{position:relative;display:inline-block;transition:color .8s var(--ease)}
.formula .res::after{content:"";position:absolute;left:-2%;right:-2%;top:54%;height:3px;border-radius:2px;background:var(--gold);transform:scaleX(0);transform-origin:0 50%;transition:transform .7s var(--ease) .25s}
.formula.zeroed .res{color:#5E6C73}
.formula.zeroed .res::after{transform:scaleX(1)}
/* множитель: слово и «0» в одной клетке, клетка шириной в слово — строка не прыгает */
.formula .f{display:inline-grid;vertical-align:bottom;position:relative}
.formula .f>span{grid-area:1/1;justify-self:center}
.formula .f .w{transition:opacity .6s var(--ease),transform .8s var(--ease),filter .6s var(--ease)}
.formula .f .z{color:var(--gold-light);opacity:0;transform:translateY(40%);position:relative;transition:opacity .7s var(--ease) .15s,transform .9s var(--ease) .15s}
.formula .f.off .w{opacity:0;transform:translateY(-40%);filter:blur(4px)}
.formula .f.off .z{opacity:1;transform:none}
.formula .f.off .z::after{content:"";position:absolute;left:50%;top:50%;width:1.6em;height:1.6em;margin:-.8em 0 0 -.8em;border-radius:50%;border:1px solid var(--gold-light);animation:ring 1.4s var(--ease) .35s forwards;opacity:0}
@keyframes ring{0%{opacity:.6;transform:scale(.6)}100%{opacity:0;transform:scale(1.6)}}
/* победа: множители по одному, решение вспыхивает и переливается */
.formula.win .f .w{animation:pop .9s var(--ease) both;animation-delay:calc(var(--j) * 160ms)}
@keyframes pop{0%{transform:translateY(25%);opacity:0;filter:blur(3px)}100%{transform:none;opacity:1;filter:none}}
.formula.win .res{color:transparent;background:linear-gradient(100deg,var(--gold-light) 35%,#FFF4D6 50%,var(--gold-light) 65%) 0 0/260% 100%;-webkit-background-clip:text;background-clip:text;animation:shine 2.2s var(--ease) .7s both}
@keyframes shine{0%{background-position:100% 0}100%{background-position:0 0}}
.formula.win .eq{animation:eq-pulse 2.4s ease-in-out 1s 1}
@keyframes eq-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
.formula .spark{position:absolute;width:6px;height:6px;margin:-3px;border-radius:50%;background:var(--gold-light);box-shadow:0 0 10px rgba(255,236,190,.9);pointer-events:none}
/* пример под формулой: крупнее, золотая строка отделена от текста; место под три строки текста — блок не прыгает */
.formula .story{font-size:clamp(21px,1.95vw,28px);min-height:calc(4.35em + 40px);max-width:46ch;display:grid;gap:18px;align-content:start;margin-top:16px}
.formula .story b{font-weight:500;font-size:16px;line-height:22px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-light)}
.formula .story span{line-height:1.45}
.formula .story.swap>*{animation:rise .7s var(--ease) both}
.formula .story.swap span{animation-delay:.12s}
@keyframes rise{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:none}}
.formula .steps{display:flex;gap:10px}
.formula .steps i{width:28px;height:2px;border-radius:1px;background:rgba(232,221,198,.22);transition:background .8s var(--ease)}
.formula .steps i.on{background:var(--gold-light)}
/* без анимации — все четыре примера списком */
.formula .static{display:none;list-style:none;padding:0;margin:0;max-width:52ch;text-align:left;gap:14px}
html:not(.motion) .formula .static{display:grid}
html:not(.motion) .formula .story,html:not(.motion) .formula .steps{display:none}
.formula .static b{color:var(--gold-light);font-weight:500}

.formats{background:var(--oyster);position:relative}
/* «Форматы» по образцу второго экрана rumto.com: экран закреплен, пока листают три шага. Слева заголовок, список форматов
   (активный — ярким, с номером) и кнопка записи; справа панель с описанием и живой схемой активного формата.
   Каждый формат — одна остановка доводки прокрутки. На телефоне — три карточки подряд */
.fm-stage{position:relative}
.fm-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(32px,5vw,80px);align-items:center}
.fm-head h2{font-size:clamp(36px,4.2vw,60px);line-height:1.08}
.fm-head h2 em{font-style:normal;color:var(--gold-deep);display:block}
.fm-lead{color:var(--espresso);font-size:clamp(18px,1.4vw,21px);max-width:36ch;margin-top:18px}
/* на компьютере колонка слева — по высоте панели: верх заглавной буквы заголовка — по верху панели, подпись «30 минут онлайн…» — по низу;
   текст и список форматов — посередине между ними; кнопка с подписью — по центру колонки, подпись по центру кнопки (Валерия, 13.10.2026) */
@media (min-width:861px) and (min-height:620px){
  .fm-side{align-self:stretch;display:grid;grid-template-rows:auto 1fr auto auto 1fr auto}
  .fm-head{grid-row:1}
  .fm-head h2{text-box:trim-start cap alphabetic}
  .fm-lead{grid-row:3;margin-top:0}
  .formats .fm-list{grid-row:4;margin-bottom:0}
  .fm-cta{grid-row:6;justify-self:center;flex-direction:column;align-items:center;gap:12px}
  .fm-cta small{text-box:trim-end cap alphabetic;text-align:center}
}
.fm-list{list-style:none;padding:0;margin:clamp(24px,4.5vh,48px) 0;display:grid;gap:8px}
.fm-list button{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:2.4em 1fr;align-items:baseline;gap:8px;min-height:44px;font-size:clamp(22px,2vw,30px);line-height:1.25;color:rgba(57,42,36,.36);transition:color .5s var(--ease)}
.fm-list .n{font-size:14px;letter-spacing:.14em;font-weight:500;color:rgba(126,98,48,.35);transition:color .5s var(--ease)}
.fm-list li.on button{color:var(--espresso)}
.fm-list li.on .n{color:var(--gold-deep)}
.fm-list button:focus-visible{outline:3px solid var(--gold-light);outline-offset:4px;border-radius:6px}
.fm-cta{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center}
.fm-cta small{font-size:15px;color:var(--espresso-soft);max-width:30ch}
.fm-panel{position:relative;min-height:min(640px,72vh)}
.fm-slide{position:absolute;inset:0;display:grid;grid-template-rows:auto auto auto 1fr auto auto;gap:14px;padding:clamp(28px,3vw,44px);background:var(--paper);border-radius:24px;box-shadow:0 30px 60px rgba(57,42,36,.14);opacity:0;transform:translateY(18px) scale(.985);transition:opacity .3s var(--ease),transform .5s var(--ease);pointer-events:none} /* уходящая панель гаснет быстро, новая появляется чуть позже — без наложения текстов */
.fm-slide.on{opacity:1;transform:none;pointer-events:auto;transition:opacity .6s var(--ease) .28s,transform .8s var(--ease) .28s}
.fm-slide.dark{background:var(--ink);color:var(--ivory);box-shadow:0 30px 60px rgba(30,47,56,.3)}
.fm-slide .eyebrow{color:var(--gold-deep);font-size:12px}
.fm-slide.dark .eyebrow{color:var(--gold-light)}
.fm-slide h3{font-size:clamp(26px,2.4vw,34px);line-height:1.15}
.fm-slide p{font-size:17px;line-height:1.55;color:var(--espresso-soft);max-width:46ch}
.fm-slide.dark p{color:rgba(232,221,198,.84)}
/* факты — три равные колонки под тонкой золотой линией, не плашки: ряд всегда ровный, длинный факт переносится в своей колонке (Валерия, 15.10.2026) */
.fm-slide .facts{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.fm-slide .facts li{font-size:15px;line-height:1.35;padding-top:12px;border-top:1px solid rgba(161,128,69,.55);color:var(--espresso)}
.fm-slide.dark .facts li{color:var(--ivory);border-top-color:rgba(196,162,102,.55)}
@media (max-width:520px){.fm-slide .facts{grid-template-columns:minmax(0,1fr);gap:0}.fm-slide .facts li{padding-block:10px}}
/* сопровождение: где проходит работа и возврат оплаты за первый месяц (Валерия, 13.10.2026; возврат — решение 07.10.2026) */
.fm-slide.main{grid-template-rows:auto auto auto 1fr auto auto auto}
.fm-slide .terms{list-style:none;padding:0;margin:0;display:grid;gap:6px;font-size:15px;line-height:1.45;max-width:52ch}
/* схема кругов сжимается по высоте, чтобы карточка с условиями помещалась в панель */
.fm-slide.main .viz{min-height:130px}
@media (min-width:861px) and (min-height:620px){.formats .fm-panel{min-height:min(720px,calc(100svh - var(--hdr,96px) - 8vh - 24px))}}
.fm-slide.main .rings{width:auto;height:min(100%,200px)}
.fm-slide .terms li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:start}
.fm-slide .terms svg{width:20px;height:20px;margin-top:1px;color:var(--gold-light)}
.fm-slide.dark .terms{color:rgba(232,221,198,.82)}
/* «Подробнее» — от левого края, как текст фактов над ним */
.fm-slide .more{justify-self:start;display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:16px;font-weight:500;color:var(--ink);text-decoration:none;border-bottom:1px solid currentColor}
.fm-slide.dark .more{color:var(--gold-light)}
.fm-slide .more::after{content:"→";transition:transform .3s var(--ease)}
@media (hover:hover){.fm-slide .more:hover::after{transform:translateX(4px)}}
/* живые схемы */
.viz{position:relative;display:grid;place-items:center;min-height:150px}
/* сопровождение: три круга — вы, ближний круг, среда */
.rings{position:relative;width:min(200px,60%);aspect-ratio:1}
.rings span{position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%) scale(.6);opacity:0;transition:opacity .8s var(--ease),transform 1s var(--ease)}
.rings span:nth-child(1){width:34%;height:34%;background:var(--gold-light);transition-delay:.15s}
.rings span:nth-child(2){width:66%;height:66%;box-shadow:inset 0 0 0 1.5px rgba(196,162,102,.8);transition-delay:.35s}
.rings span:nth-child(3){width:98%;height:98%;box-shadow:inset 0 0 0 1px rgba(196,162,102,.45);transition-delay:.55s}
.rings b{position:absolute;font-weight:500;font-size:12px;letter-spacing:.06em;white-space:nowrap;opacity:0;transition:opacity .8s var(--ease)}
.rings b:nth-of-type(1){left:50%;top:50%;transform:translate(-50%,-50%);color:var(--ink-deep);transition-delay:.5s}
.rings b:nth-of-type(2){left:50%;top:21%;transform:translateX(-50%);color:var(--gold-light);transition-delay:.7s}
.rings b:nth-of-type(3){left:50%;top:4.5%;transform:translateX(-50%);color:rgba(232,221,198,.75);transition-delay:.9s}
.fm-slide.on .rings span{opacity:1;transform:translate(-50%,-50%) scale(1)}
.fm-slide.on .rings b{opacity:1}
.motion .fm-slide.on .rings span:nth-child(1){animation:core 3.2s ease-in-out 1.4s infinite}
@keyframes core{0%,100%{box-shadow:0 0 0 0 rgba(196,162,102,.45)}50%{box-shadow:0 0 0 14px rgba(196,162,102,0)}}
/* Heuristos Sprint: один вопрос — короткий путь в 3–4 сессии (Валерия, 15.10.2026: Sprint — любой один вопрос, не путь по формуле).
   Вопрос — крупным текстом, без плашки — сменяется по кругу: решение → коррекция курса → взгляд со стороны; под каждый вопрос
   золотая линия проходит сессии 1–4 (четвертая — пунктиром: сессий 3 или 4), точки загораются по очереди. Цикл 12 с, по 4 с на вопрос */
.sprint{width:min(400px,92%);display:grid;justify-items:center;gap:30px}
.sp-q{display:grid;place-items:center;width:100%;height:40px;color:var(--ink);font-size:clamp(22px,1.9vw,26px);opacity:0;transform:translateY(10px);transition:opacity .6s var(--ease) .15s,transform .7s var(--ease) .15s}
.sp-q span{grid-area:1/1;white-space:nowrap}
.sp-q span+span{opacity:0}
.sp-track{position:relative;width:100%;height:18px}
.sp-track::before,.sp-track b{content:"";position:absolute;left:9px;right:9px;top:8px;height:2px;border-radius:1px}
.sp-track::before{background:var(--oyster)}
.sp-track b{background:var(--gold);transform-origin:0 50%}
.sp-track i{position:absolute;top:0;width:18px;height:18px;box-sizing:border-box;border-radius:50%;border:2px solid var(--gold);background:var(--gold)}
.sp-track i:nth-of-type(1){left:0}.sp-track i:nth-of-type(2){left:calc((100% - 18px) / 3)}.sp-track i:nth-of-type(3){left:calc((100% - 18px) * 2 / 3)}
.sp-track i:nth-of-type(4){left:calc(100% - 18px);border-style:dashed;background:var(--paper)}
.sp-n{display:flex;justify-content:space-between;width:100%;margin-top:-16px}
.sp-n small{width:18px;text-align:center;font-size:13px;color:var(--espresso-soft)}
.fm-slide.on .sp-q{opacity:1;transform:none}
.motion .sp-track b{transform:scaleX(0)}
.motion .sp-track i{background:var(--paper)}
.motion .fm-slide.on .sp-q span{animation:sp-q 12s var(--ease) .6s infinite both}
.motion .fm-slide.on .sp-q span:nth-child(2){animation-delay:4.6s}
.motion .fm-slide.on .sp-q span:nth-child(3){animation-delay:8.6s}
@keyframes sp-q{0%{opacity:0;transform:translateY(8px)}5%,30%{opacity:1;transform:none}33.3%,100%{opacity:0;transform:translateY(-8px)}}
.motion .fm-slide.on .sp-track b{animation:sp-line 4s linear .6s infinite both}
@keyframes sp-line{0%,12%{transform:scaleX(0);opacity:1}75%,88%{transform:scaleX(1);opacity:1}97%,100%{transform:scaleX(1);opacity:0}}
.motion .fm-slide.on .sp-track i{animation:sp-1 4s linear .6s infinite both}
.motion .fm-slide.on .sp-track i:nth-of-type(2){animation-name:sp-2}
.motion .fm-slide.on .sp-track i:nth-of-type(3){animation-name:sp-3}
.motion .fm-slide.on .sp-track i:nth-of-type(4){animation-name:sp-4}
@keyframes sp-1{0%,10%{background:var(--paper)}13%,88%{background:var(--gold)}97%,100%{background:var(--paper)}}
@keyframes sp-2{0%,32%{background:var(--paper)}35%,88%{background:var(--gold)}97%,100%{background:var(--paper)}}
@keyframes sp-3{0%,53%{background:var(--paper)}56%,88%{background:var(--gold)}97%,100%{background:var(--paper)}}
@keyframes sp-4{0%,73%{background:var(--paper);transform:none}76%{background:var(--gold);transform:scale(1.25)}82%,88%{background:var(--gold);transform:none}97%,100%{background:var(--paper)}}
/* выступления: темы — простым текстом, облаком; каждая медленно приближается (крупнее, ярче, золотом) и удаляется
   (мельче, бледнее, чуть размыта), у каждой свой темп и фаза — одни темы впереди, другие в глубине (Валерия, 15.10.2026).
   Движение — только transform/opacity/filter: раскладка облака не прыгает */
/* «Выступления» без подписи и текста под заголовком (Валерия, 15.10.2026): заголовок, облако тем на всю свободную высоту, факты, ссылка */
.fm-slide.talks{grid-template-rows:auto 1fr auto auto}
.cloud{display:flex;flex-wrap:wrap;justify-content:center;align-content:space-evenly;gap:18px 40px;width:100%;height:100%;min-height:200px;padding-block:6px}
.cloud span{font-size:clamp(17px,1.5vw,21px);line-height:1.3;text-align:center;color:var(--ivory);opacity:0;transition:opacity .9s var(--ease)}
.fm-slide.on .cloud span{opacity:.85}
.motion .fm-slide.on .cloud span{animation:drift var(--t,10s) ease-in-out var(--d,0s) infinite alternate both}
@keyframes drift{
  0%{transform:translate(var(--x,0),var(--y,0)) scale(.8);opacity:.32;filter:blur(1.4px);color:var(--ivory)}
  100%{transform:translate(calc(var(--x,0) * -1),calc(var(--y,0) * -1)) scale(1.1);opacity:1;filter:none;color:var(--gold-light)}
}
.fm-snap{position:absolute;left:0;width:1px;height:1px;pointer-events:none}
@media (max-width:860px),(max-height:619px){
  .fm-grid{grid-template-columns:minmax(0,1fr)}
  .fm-list{display:none}
  .fm-panel{min-height:0;display:grid;gap:16px}
  .fm-slide{position:relative;inset:auto;opacity:1;transform:none;pointer-events:auto}
  .fm-side{display:contents}
  .fm-lead{margin-top:calc(18px - clamp(32px,5vw,80px))}
  .fm-panel{order:2}
  .fm-cta{order:3}
}

/* AI: темная полоса; точки — заглушка, на сайте здесь видео-петля Gold and Blue Particles (Envato).
   Справа — вопросы посетителя, как сообщения в чате: по очереди «печатает…» и появляется фраза, в конце золотая линия и ответ (Валерия, 12.10.2026) */
.ai{background:var(--ink-deep);color:var(--ivory);position:relative;overflow:hidden}
.ai canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* фон на шейдере (библиотека Shaders, WebGPU) — проба вместо видео-петли; без WebGPU остаются точки */
.ai canvas.shd{opacity:0;transition:opacity 1.2s var(--ease)}
/* библиотека при запуске пишет размер холста в px в style — при смене размера окна фон «съезжал» (Валерия, 13.10.2026);
   !important держит холст на весь блок, а библиотека по ResizeObserver сама пересчитывает буфер */
.ai canvas.shd{width:100% !important;height:100% !important}
.ai[data-bg="shader"] canvas.shd{opacity:1}
.ai[data-bg="shader"] canvas:not(.shd){opacity:0}
.ai .wrap{position:relative;display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:48px clamp(40px,6vw,96px);align-items:center}
@media (max-width:860px){.ai .wrap{grid-template-columns:minmax(0,1fr)}}
.ai .eyebrow{color:var(--gold-light)}
.ai .lead{display:grid;gap:22px;justify-items:start}
.ai h2{font-size:clamp(32px,3.6vw,52px);line-height:1.12}
.ai .lead p{opacity:.88;max-width:46ch}
/* «Подробнее» — полупрозрачная подложка: огоньки под кнопкой видны, надпись не сливается с фоном (Валерия, 13.10.2026) */
.ai .btn.ghost{background:rgba(23,36,43,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.ai .btn.ghost:hover{background:rgba(23,36,43,.78)}
.ai .chat{list-style:none;padding:0;display:grid;gap:16px}
.ai .chat li{position:relative;max-width:min(88%,430px);justify-self:start}
.ai .chat li.r{justify-self:end}
.ai .chat .q,.ai .chat .dots{border-radius:20px 20px 20px 6px;background:rgba(232,221,198,.07);box-shadow:inset 0 0 0 1px rgba(196,162,102,.35)}
.ai .chat li.r .q,.ai .chat li.r .dots{border-radius:20px 20px 6px 20px}
.ai .chat .q{position:relative;display:block;padding:14px 20px;font-size:clamp(17px,1.35vw,20px);line-height:1.5;backdrop-filter:blur(2px)}
.ai .chat .dots{position:absolute;left:0;top:0;display:flex;gap:6px;padding:17px 18px;opacity:0;transition:opacity .4s var(--ease)}
.ai .chat li.r .dots{left:auto;right:0}
.ai .chat .dots i{width:6px;height:6px;border-radius:50%;background:var(--gold-light)}
.ai .verdict{margin-top:30px;display:grid;gap:18px}
.ai .verdict::before{content:"";height:1px;background:linear-gradient(90deg,var(--gold-light),rgba(196,162,102,0));transform-origin:left}
.ai .verdict p{font-size:clamp(26px,2.4vw,34px);line-height:1.2;color:var(--gold-light)}
.motion .ai .chat .q{opacity:0;transform:translateY(10px);transition:opacity .7s var(--ease),transform .8s var(--ease)}
.motion .ai .chat li.in .q{opacity:1;transform:none}
.motion .ai .chat li.typing .dots{opacity:1}
.motion .ai .chat .dots i{animation:dotfade 1.2s ease-in-out infinite}
.motion .ai .chat .dots i:nth-child(2){animation-delay:.2s}.motion .ai .chat .dots i:nth-child(3){animation-delay:.4s}
@keyframes dotfade{0%,100%{opacity:.25}50%{opacity:1}}
.motion .ai .verdict::before{transform:scaleX(0);transition:transform 1.2s var(--ease)}
.motion .ai .verdict p{opacity:0;transform:translateY(8px);transition:opacity .9s var(--ease) .5s,transform 1s var(--ease) .5s}
.motion .ai .verdict.in::before{transform:none}
.motion .ai .verdict.in p{opacity:1;transform:none}

/* «Обо мне»: фото открывается снизу вверх, знак DT поворачивается на место; путь — золотая линия прорисовывается, точки загораются по очереди
   (Валерия, 13.10.2026). Фото без градиента */
.about .wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4.5vh,48px) clamp(28px,5vw,80px);align-items:center}
@media (max-width:860px){.about .wrap{grid-template-columns:minmax(0,1fr)}}
.about figure{margin:0;position:relative}
.about figure img{position:relative;display:block;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 25%;border-radius:10px}
/* тень под фото — фото чуть приподнято над страницей (Валерия, 13.10.2026). Отдельный слой под фото: clip-path появления срезал бы тень у самой картинки */
.about figure::before{content:"";position:absolute;inset:0;border-radius:10px;box-shadow:0 2px 4px rgba(57,42,36,.08),0 14px 28px -10px rgba(57,42,36,.26),0 38px 70px -28px rgba(57,42,36,.38)}
.about figure .cameo-mk{position:absolute;right:-18px;bottom:-18px}
@media (max-width:860px){.about figure .cameo-mk{right:12px}}
.about .text{display:grid;gap:clamp(14px,2vh,22px);justify-items:start}
.about .text .eyebrow{color:var(--gold-deep)}
.about h2{font-size:clamp(34px,3.6vw,52px);line-height:1.1}
.about .lead{display:grid;gap:12px;max-width:56ch}
.about .role{margin-top:10px;font-size:clamp(19px,1.5vw,22px);line-height:1.35;color:var(--gold-deep)}
/* доверие: конфиденциальность и NDA по умолчанию (Валерия, 13.10.2026); замок закрывается при появлении */
.about .nda{display:flex;gap:14px;align-items:flex-start;max-width:56ch;padding:14px 18px;border-radius:12px;background:rgba(161,128,69,.08);box-shadow:inset 0 0 0 1px rgba(161,128,69,.35);font-size:16px;line-height:1.5}
.about .nda b{font-weight:500;color:var(--espresso)}
.about .nda svg{flex:none;width:26px;height:26px;margin-top:-1px;fill:none;stroke:var(--gold-deep);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;overflow:visible}
.motion .about .nda .shackle{transform:translateY(-3.5px);transition:transform .8s var(--ease) .9s}
.motion .about .nda.in .shackle{transform:none}
.tl{grid-column:1/-1;list-style:none;margin:0;padding:30px 0 0;width:100%;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));position:relative}
.tl::before{content:"";position:absolute;left:6px;right:0;top:6px;height:1px;background:linear-gradient(90deg,var(--gold-deep),var(--gold-light));transform-origin:left}
.tl li{position:relative;display:grid;align-content:start;gap:4px;padding-right:14px;font-size:14px;line-height:1.4;color:var(--espresso-soft)}
.tl li::before{content:"";position:absolute;left:0;top:-30px;width:13px;height:13px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px var(--paper)}
.tl b{font-weight:500;font-size:16px;color:var(--gold-deep);letter-spacing:.02em}
.tl li:last-child b{color:var(--espresso)}
@media (max-width:860px){
  .tl{grid-template-columns:minmax(0,1fr);gap:16px;padding:0 0 0 30px}
  .tl::before{left:6px;right:auto;top:8px;bottom:8px;width:1px;height:auto;transform-origin:top}
  .tl li::before{left:-30px;top:4px}
  .tl li:last-child::after{content:"";position:absolute;left:-30px;top:17px;bottom:-10px;width:13px;background:var(--paper)}
}
.motion .about figure img{clip-path:inset(100% 0 0 0 round 10px);transform:scale(1.06);transition:clip-path 1.3s cubic-bezier(.65,0,.25,1),transform 1.9s var(--ease)}
.motion .about figure.in img{clip-path:inset(0 0 0 0 round 10px);transform:none}
.motion .about figure::before{opacity:0;transition:opacity 1.2s var(--ease) .8s}
.motion .about figure.in::before{opacity:1}
.motion .about figure .cameo-mk{opacity:0;transform:rotate(-100deg) scale(.6);transition:opacity .6s var(--ease) 1s,transform 1.3s var(--ease) 1s}
.motion .about figure.in .cameo-mk{opacity:1;transform:none}
.motion .tl::before{transform:scaleX(0);transition:transform 3.6s cubic-bezier(.45,0,.25,1) .3s}
@media (max-width:860px){.motion .tl::before{transform:scaleY(0)}}
.motion .tl.in::before{transform:none}
.motion .tl li::before{opacity:0;transform:scale(.3);transition:opacity .5s var(--ease),transform .6s var(--ease);transition-delay:calc(.3s + var(--i) * .6s)}
.motion .tl li>*{opacity:0;transform:translateY(6px);transition:opacity .7s var(--ease),transform .8s var(--ease);transition-delay:calc(.45s + var(--i) * .6s)}
.motion .tl.in li::before,.motion .tl.in li>*{opacity:1;transform:none}

/* «Статьи» (Валерия, 13.10.2026): шесть карточек на экран — картинка по теме статьи (не фото Валерии, у всех один формат 16:9),
   тема и время чтения, заголовок, начало текста; карточки ведут в блог. В макете — превью Envato Elements с водяным знаком, для примера. Движение: карточки поднимаются по очереди, обложка открывается снизу вверх и чуть отъезжает;
   при наведении обложка приближается, под заголовком прорисовывается золотая линия. На телефоне — лента, листается вбок */
/* свой тон фона — граница с «Обо мне» (тот же светлый фон) видна сразу (Валерия, 15.10.2026) */
.articles{background:var(--ivory)}
.articles .ar-in{max-width:1104px;margin-inline:auto}
.ar-head{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:12px 32px;margin-bottom:clamp(24px,3.4vh,40px)}
.ar-head h2{font-size:clamp(30px,3.4vw,44px);line-height:1.15}
.ar-all{display:inline-flex;align-items:center;gap:10px;min-height:48px;font-size:16px;font-weight:500;color:var(--gold-deep);text-decoration:none}
.ar-all i{font-style:normal;transition:transform .35s var(--ease)}
.ar-all:hover i{transform:translateX(5px)}
.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(22px,3.2vh,32px) clamp(20px,2.4vw,32px)}
/* карточка — четыре уровня общей сетки ряда (subgrid): картинка, тема, заголовок, текст; текст во всех карточках ряда начинается
   на одной высоте, сколько бы строк ни занял заголовок (Валерия, 13.10.2026) */
.post{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:6px;align-content:start;text-decoration:none;min-width:0}
.post .cv{display:block;aspect-ratio:16/9;margin-bottom:8px;border-radius:10px;overflow:hidden;background:var(--oyster);box-shadow:0 12px 26px -16px rgba(57,42,36,.45)}
.post .cv img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.82) sepia(.08);transition:transform .9s var(--ease)}
.post .meta{font-size:13px;letter-spacing:.04em;color:var(--gold-deep)}
.post h3{font-size:clamp(19px,1.55vw,22px);line-height:1.3;transition:color .25s;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.post h3 span{background:linear-gradient(var(--gold),var(--gold)) 0 100%/0 1px no-repeat;transition:background-size .5s var(--ease)}
.post p{font-size:15px;line-height:1.5;color:var(--espresso-soft);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media (hover:hover){
  .post:hover .cv img{transform:scale(1.04)}
  .post:hover h3{color:var(--gold-deep)}
  .post:hover h3 span{background-size:100% 1px}
}
/* на компьютере шесть карточек помещаются в один экран: ширина сетки — от высоты окна, с запасом на заголовок в две строки и текст в три.
   Заголовок может занять и три строки (Валерия, 13.10.2026) — тогда ширину по факту подбирает fitArticles() в скрипте; эта формула — без JS
   (картинка 16:9: ширина сетки = 2,67 × (высота окна − шапка − отступы − заголовок блока − тексты карточек) + промежутки) */
@media (min-width:861px) and (min-height:620px){
  main section.sec.articles{padding-bottom:clamp(28px,4vh,48px)}
  .articles .ar-in{max-width:min(1104px,calc(230svh - var(--hdr,96px) * 2.67 - 961px))}
}
/* невысокий экран ноутбука: текст карточки в одну строку, иначе карточки слишком мелкие */
@media (min-width:861px) and (min-height:620px) and (max-height:820px){
  .ar-head h2{font-size:36px}
  .post p{-webkit-line-clamp:1}
  .articles .ar-in{max-width:min(1104px,calc(230svh - var(--hdr,96px) * 2.67 - 707px))}
}
@media (max-width:860px){
  .posts{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;
    margin-inline:calc(-1 * clamp(16px,4vw,48px));padding:0 clamp(16px,4vw,48px) 6px;scroll-padding-inline:clamp(16px,4vw,48px)}
  .posts::-webkit-scrollbar{display:none}
  .post{display:flex;flex-direction:column;flex:0 0 min(84%,400px);scroll-snap-align:start}
}
.motion .posts .post{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--i) * 90ms + 150ms)}
.motion .posts .cv{clip-path:inset(100% 0 0 0 round 10px);transition:clip-path 1.1s var(--ease);transition-delay:calc(var(--i) * 90ms + 250ms)}
.motion .posts .cv img{scale:1.08;transition:scale 1.6s var(--ease) calc(var(--i) * 90ms + 250ms),transform .9s var(--ease)}
.motion .posts.in .post{opacity:1;transform:none}
.motion .posts.in .cv{clip-path:inset(0 0 0 0 round 10px)}
.motion .posts.in .cv img{scale:1}

.cta{background:var(--ink);color:var(--ivory)}
/* призыв: слева текст и кнопка записи, справа «Календарь» — курсор сам выбирает день и время (Валерия, 13.10.2026).
   Календарь в макете — картинка того, как проходит запись; на сайте кнопка открывает страницу записи Google Календаря */
.cta .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,500px);gap:36px clamp(32px,5vw,80px);align-items:center}
@media (max-width:900px){.cta .wrap{grid-template-columns:minmax(0,1fr)}}
.cta-copy{display:grid;gap:20px;justify-items:start}
/* на компьютере текст по высоте календаря: верх заглавной буквы — по верху календаря, низ кнопки — по низу, текст посередине между ними (Валерия, 13.10.2026) */
@media (min-width:901px){
  .cta .wrap{align-items:stretch}
  .cta-copy{grid-template-rows:auto 1fr auto;align-content:stretch}
  .cta-copy p{align-self:center}
  .cta h2{text-box:trim-start cap alphabetic}
}
.cta h2{font-size:clamp(32px,3.4vw,48px);line-height:1.15}
.cta p{opacity:.85;max-width:42ch}
html:not(.js) .cal{display:none}
.cal{position:relative;justify-self:center;width:100%;max-width:500px}
.cal-card{background:var(--paper);color:var(--espresso);border-radius:16px;padding:18px 22px;display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px 26px;
  box-shadow:0 26px 60px -22px rgba(5,10,14,.7),0 0 0 1px rgba(196,162,102,.28)}
.cal-h{grid-column:1/-1;display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--oyster)}
.cal-h b{font-weight:500;font-size:16px}
.cal-h span{font-size:14px;color:var(--espresso-soft)}
.cal-grid{display:grid;grid-template-columns:repeat(7,34px);gap:2px;font-size:14px;line-height:1;text-align:center}
.cal-grid i{font-style:normal;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--espresso-soft);padding:2px 0 6px}
.cal-grid span{position:relative;display:grid;place-items:center;height:32px;border-radius:50%;color:rgba(57,42,36,.32);transition:background-color .45s var(--ease),color .45s var(--ease)}
.cal-grid span.av{color:var(--espresso);font-weight:500}
.cal-grid span.av::after{content:"";position:absolute;bottom:4px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--gold)}
.cal-grid span.sel{background:var(--ink);color:var(--ivory)}
.cal-grid span.sel::after{background:var(--gold-light)}
.cal-side{display:grid;align-content:start;gap:10px;min-width:0}
.cal-side .lbl{font-size:14px;color:var(--espresso-soft);min-height:20px;line-height:1.4}
.cal-slots{display:grid;gap:8px}
.cal-slots span{display:flex;align-items:center;justify-content:center;height:38px;border-radius:10px;box-shadow:inset 0 0 0 1px var(--oyster);font-size:15px;transition:background-color .45s var(--ease),color .45s var(--ease),box-shadow .45s var(--ease)}
.cal-slots span.sel{background:var(--ink);color:var(--ivory);box-shadow:inset 0 0 0 1px var(--ink)}
.cal-ok{grid-column:1/-1;display:flex;align-items:center;gap:10px;font-size:15px;padding-top:12px;border-top:1px solid var(--oyster)}
.cal-ok svg{width:22px;height:22px;flex:none;color:var(--gold-deep)}
.cal-cur{position:absolute;left:0;top:0;width:24px;height:24px;pointer-events:none;opacity:0;transition:transform 1.05s cubic-bezier(.45,0,.2,1),opacity .4s var(--ease)}
.cal-cur svg{display:block;width:100%;height:100%;filter:drop-shadow(0 2px 3px rgba(10,18,24,.45));transform-origin:20% 15%;transition:transform .16s var(--ease)}
.cal-cur.press svg{transform:scale(.82)}
.motion .cal .cal-slots span{opacity:0;transform:translateY(6px);transition:opacity .5s var(--ease),transform .6s var(--ease),background-color .45s var(--ease),color .45s var(--ease),box-shadow .45s var(--ease);transition-delay:calc(var(--i) * 70ms)}
.motion .cal.d .cal-slots span{opacity:1;transform:none}
.motion .cal .cal-ok{opacity:0;transform:translateY(6px);transition:opacity .6s var(--ease),transform .7s var(--ease)}
.motion .cal.ok .cal-ok{opacity:1;transform:none}
.motion .cal .cal-ok path{stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .7s var(--ease) .25s}
.motion .cal.ok .cal-ok path{stroke-dashoffset:0}
@media (max-width:420px){.cal-card{grid-template-columns:minmax(0,1fr)}.cal-grid{grid-template-columns:repeat(7,minmax(0,1fr))}.cal-slots{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* «Занавес» (Валерия, 13.10.2026): после «Статей» экран статей расходится шторками влево и вправо, за ним открывается призыв.
   Зона высотой в два экрана, сцена закреплена, остановки доводки — начало зоны и ее конец (.cu-end); --p (0…1) — насколько открыт занавес. Правая шторка — копия блока статей (aria-hidden, inert),
   видна только пока занавес открывается. Только на компьютере и при «движение можно»; иначе блоки идут обычным порядком */
.cu-clone{display:none}
.cu .curtain{height:200svh;scroll-snap-align:start;scroll-snap-stop:always}
.cu .cu-stage{position:sticky;top:0;height:100svh;overflow:hidden;overflow:clip}
.cu .cu-stage>section{position:absolute;top:0;left:0;width:100%;scroll-snap-align:none}
.cu .cu-stage>.articles{z-index:2;background:var(--ivory)}
.cu .cu-stage>.cu-clone{display:flex;visibility:hidden}
.cu .cu-stage.split>.articles{clip-path:inset(0 50% 0 0);transform:translateX(calc(var(--p,0) * -51%))}
.cu .cu-stage.split>.cu-clone{visibility:visible;clip-path:inset(0 0 0 50%);transform:translateX(calc(var(--p,0) * 51%))}
.cu .cu-stage.split>.articles::after{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 2px);width:2px;background:var(--metal)}
.cu .cu-stage.split>.cu-clone::after{left:50%}
.cu .cu-stage{background:var(--ink)}
/* за шторками — весь последний экран: призыв и подвал (подвал на время занавеса переносится в сцену скриптом) */
.cu .cu-stage>.cta{z-index:1;height:calc(100svh - var(--ftr,260px));min-height:0;padding:calc(var(--hdr,96px) + 16px) 0 16px}
.cu .cu-stage>footer{position:absolute;left:0;right:0;bottom:0;z-index:1}
.cu .cu-stage>.cta>.wrap{opacity:calc(.25 + var(--p,0) * .75);transform:scale(calc(.94 + var(--p,0) * .06))}
.cu-end{display:none}
.cu .curtain{position:relative}
.cu .cu-end{display:block;position:absolute;left:0;bottom:0;width:1px;height:100svh;scroll-snap-align:start;scroll-snap-stop:always}
/* невысокий экран ноутбука: призыв с календарем и подвал помещаются в один экран */
@media (min-width:861px) and (max-height:820px){
  body>footer{padding-block:28px}
  body>footer .legal{margin-top:20px;padding-top:14px}
  body>footer .brand{gap:14px}
  .cal-card{padding:12px 18px;gap:8px 22px}
  .cal-h{padding-bottom:8px}
  .cal-grid span{height:26px}
  .cal-grid i{padding-bottom:3px}
  .cal-slots{gap:6px}
  .cal-slots span{height:32px}
  .cal-ok{padding-top:8px}
  .cta-copy{gap:16px}
}

/* footer: знак, подписка, ссылки */
footer{background:var(--ink-deep);color:var(--ivory);padding-block:48px;font-size:15px}
footer .grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:32px 64px;align-items:start}
@media (max-width:860px){footer .grid{grid-template-columns:minmax(0,1fr)}}
footer .brand{display:grid;gap:20px;justify-items:start}
footer .links{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:4px 24px}
footer .links a{text-decoration:none;opacity:.8;display:inline-block;padding-block:8px}
footer .links a:hover{opacity:1}
footer .links.nav-f{font-size:16px}
footer .links.soc{margin-top:-12px}
/* значки площадок (Валерия, 13.10.2026): Telegram и YouTube; VK и vc.ru — когда появятся */
footer .links.soc a{display:inline-flex;align-items:center;gap:9px}
footer .links.soc svg{width:22px;height:22px;flex:none;color:var(--gold-light)}
/* подписка: выбор, как часто присылать (Валерия, 13.10.2026: «раз в месяц — лучший текст месяца» или «каждая новая статья» — как и где предлагать, еще думаем) */
.freq{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.freq legend{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.freq label{position:relative;display:inline-flex}
.freq input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.freq span{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(232,221,198,.3);font-size:14px;transition:background-color .25s,color .25s,box-shadow .25s}
.freq input:checked+span{background:var(--ivory);color:var(--ink-deep);box-shadow:none}
.freq input:focus-visible+span{outline:3px solid var(--gold-light);outline-offset:2px}
.sub{display:grid;gap:12px}
.sub>label{font-size:13px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--gold-light)}
.sub p{opacity:.8}
.sub .row{display:flex;gap:8px;flex-wrap:wrap}
.sub input{flex:1 1 220px;min-height:48px;border-radius:999px;border:1px solid rgba(232,221,198,.35);background:transparent;color:var(--ivory);padding:0 20px;font:inherit;font-size:16px}
.sub input::placeholder{color:rgba(232,221,198,.6)}
.sub small{font-size:13px;opacity:.7}
footer .legal{margin-top:36px;padding-top:20px;border-top:1px solid rgba(232,221,198,.12);display:flex;flex-wrap:wrap;gap:8px 24px;font-size:13px;opacity:.7}

/* движение: только при prefers-reduced-motion: no-preference и с JS; без них все видно сразу */
.motion .rv{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0ms)}
.motion .rv.in{opacity:1;transform:none}
.motion .hero .ph{clip-path:inset(0 100% 0 0);transition:clip-path 1.2s var(--ease) .25s}
.motion .hero.in .ph{clip-path:inset(0 0 0 0)}
.motion .seam i{transform:scaleY(0);transition:transform 1s var(--ease)}
.motion .seam i+i{transition-delay:.15s}
.motion .hero.in .seam i{transform:none}
@media (max-width:900px){.motion .seam i{transform:scaleX(0)}.motion .seam i::after{top:0;bottom:0;height:auto;left:-30%;width:30%;right:auto;background:linear-gradient(90deg,rgba(255,244,214,0),rgba(255,244,214,.95),rgba(255,244,214,0));animation-name:glint-x}@keyframes glint-x{0%{left:-30%}45%,100%{left:110%}}}

/* ---------- сайт на WordPress + Elementor ---------- */
/* обертки Elementor вокруг блоков не участвуют в раскладке: экраны ведут себя как прямые дети <main>,
   поэтому «один экран — один блок», доводка прокрутки, закрепленные «Форматы» и «занавес» работают как в макете.
   В редакторе Elementor обертки остаются — иначе нельзя выделить блок */
body:not(.elementor-editor-active) main .elementor,
body:not(.elementor-editor-active) main .elementor-element,
body:not(.elementor-editor-active) main .e-con-inner,
body:not(.elementor-editor-active) main .elementor-widget-container{display:contents!important}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- только на сайте (wordpress/src/extra.css): анкета перед записью, ответы форм, баннер cookie ---------- */
.screen-reader-text:focus{position:fixed!important;z-index:100;left:16px;top:16px;width:auto;height:auto;clip-path:none;padding:12px 18px;border-radius:12px;background:var(--ivory);color:var(--ink-deep)}
/* атрибуты width/height у <img> — только для пропорции до загрузки; высоту задает CSS */
picture img{height:auto}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0}
.sub-msg{font-size:15px;color:var(--gold-light)}
.cta .cal{cursor:pointer}
html.dt-modal{overflow:hidden}

/* анкета: светлое окно поверх затемнения, на телефоне — во весь экран */
.meet{width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;border:0;border-radius:22px;background:var(--paper);color:var(--espresso);box-shadow:0 30px 80px rgba(10,18,24,.45);overflow:auto;overscroll-behavior:contain}
.meet::backdrop{background:rgba(20,31,38,.62);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.motion .meet[open]{animation:meet-in .45s var(--ease)}
.motion .meet[open]::backdrop{animation:meet-fade .45s var(--ease)}
@keyframes meet-in{0%{opacity:0;transform:translateY(14px) scale(.985)}100%{opacity:1;transform:none}}
@keyframes meet-fade{0%{opacity:0}100%{opacity:1}}
.meet-f,.meet-done{position:relative;display:grid;gap:16px;padding:clamp(24px,4vw,40px)}
/* hidden внутри окна сильнее display: иначе форма и «Спасибо» видны одновременно с самого открытия (найдено 15.10.2026) */
.meet [hidden]{display:none!important}
.meet h2{font-size:clamp(26px,3vw,34px);line-height:1.15;padding-right:40px}
.meet-lead{color:var(--espresso-soft);font-size:16px;line-height:1.55}
.meet-x{position:absolute;top:14px;right:14px;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--espresso);cursor:pointer}
.meet-x:hover{background:rgba(57,42,36,.07)}
.meet-x svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.fld{display:grid;gap:6px;font-size:15px;font-weight:500}
.fld input,.fld textarea{width:100%;min-height:48px;padding:12px 16px;border:1px solid rgba(57,42,36,.22);border-radius:14px;background:#FBF8F2;color:var(--espresso);font:inherit;font-size:16px;font-weight:400;line-height:1.45}
.fld textarea{resize:vertical;min-height:110px}
.fld input:focus-visible,.fld textarea:focus-visible{outline:3px solid var(--gold-light);outline-offset:1px;border-color:var(--gold)}
.meet-fmt{border:0;margin:0;padding:0;display:grid;gap:10px}
.meet-fmt legend{font-size:15px;font-weight:500;margin-bottom:6px;padding:0}
.meet-fmt label{position:relative;display:block;cursor:pointer}
.meet-fmt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.meet-fmt span{display:grid;gap:2px;padding:12px 16px;border-radius:14px;box-shadow:inset 0 0 0 1px rgba(57,42,36,.22);font-size:14px;color:var(--espresso-soft);transition:box-shadow .25s,background-color .25s}
.meet-fmt b{font-weight:500;font-size:17px;color:var(--espresso)}
.meet-fmt input:checked+span{background:rgba(161,128,69,.1);box-shadow:inset 0 0 0 2px var(--gold)}
.meet-fmt input:focus-visible+span{outline:3px solid var(--gold-light);outline-offset:2px}
.meet-ok{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45;color:var(--espresso-soft);cursor:pointer}
.meet-ok input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--ink)}
.meet-msg{font-size:15px;color:#9A3B2E}
.meet .btn{justify-self:start}
.meet-done{justify-items:start}
.meet-check{width:44px;height:44px;fill:none;stroke:var(--gold-deep);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.meet-done h2:focus{outline:none}
.meet-done p{color:var(--espresso-soft)}
@media (max-width:560px){.meet{width:100vw;max-width:none;max-height:100dvh;height:100dvh;border-radius:0;margin:0}.meet .btn{justify-self:stretch}}

/* баннер cookie: отказ так же заметен, как согласие */
.cookie{position:fixed;z-index:30;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));max-width:620px;margin-inline:auto;display:grid;gap:14px;padding:18px 20px;border-radius:18px;background:rgba(30,47,56,.97);color:var(--ivory);box-shadow:0 18px 40px rgba(10,18,24,.4),inset 0 0 0 1px rgba(196,162,102,.25);font-size:15px;line-height:1.5}
.cookie[hidden]{display:none}
.cookie a{color:var(--gold-light)}
.cookie-b{display:flex;flex-wrap:wrap;gap:10px}

/* внутренние страницы (body.dt-page): обычная прокрутка без доводки к экранам, блоки — по высоте содержимого.
   Свои стили страницы — assets/pages/<адрес>.css, собираются из wordpress/src/pages */
html:has(body.dt-page){scroll-snap-type:none}
.dt-page main .sec:not(.cta){min-height:0;display:block;padding-top:clamp(56px,8vw,112px)}
/* текущая страница в меню шапки и подвала */
.nav a[aria-current="page"],footer .links a[aria-current="page"]{opacity:1;color:var(--gold-light)}

/* у вошедшего в WordPress сверху черная админ-панель (32 px, на узких экранах 46 px) — плашка шапки опускается под нее; посетители панели не видят */
body.admin-bar .top{top:calc(var(--top-gap) + 32px)}
@media (max-width:782px){body.admin-bar .top{top:calc(var(--top-gap) + 46px)}}