/* ekarpenko.com — прототип v2.1 по DESIGN-SYSTEM.md v1 (07.08.2026), редизайн после брака v2 */
*,*::before,*::after{box-sizing:border-box}
:root{
  --paper:#FFFCF7;--paper-tint:#F7F0E6;--paper-deep:#EFE5D6;--line:#E4D8C7;
  --ink:#241C1A;--ink-soft:#5A4E49;--ink-faint:#786A62;
  --clay:#B2472E;--clay-deep:#8F3722;--clay-tint:#F6E2DB;
  --sage:#4A6152;--sage-tint:#DFE7DE;--honey:#E8B04B;--focus:#1A6BB5;
  --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;
  --s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;--s-9:96px;
  --r-1:6px;--r-2:10px;--r-3:14px;--r-full:999px;
  --shadow-1:0 1px 2px rgb(36 28 26 / .06);
  --shadow-2:0 8px 24px -8px rgb(36 28 26 / .14);
  --ease-out:cubic-bezier(.23,1,.32,1);--dur:180ms;
  --serif:"Literata",Georgia,serif;--sans:"Golos Text",system-ui,sans-serif;
}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);
  font:400 18px/1.6 var(--sans);text-wrap:pretty}
h1,h2,h3{text-wrap:balance;margin:0}
h1{font:600 clamp(34px,4.5vw + 16px,48px)/1.15 var(--serif);letter-spacing:-.02em}
h2{font:600 26px/1.25 var(--serif);letter-spacing:-.015em}
h3{font:600 21px/1.3 var(--sans)}
@media (min-width:700px){h2{font-size:29px}h3{font-size:22px}}
@media (min-width:1024px){h2{font-size:32px}h3{font-size:24px}body{font-size:19px}}
p{margin:0 0 var(--s-4)}
a{color:var(--clay)}
a:hover{color:var(--clay-deep)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:var(--r-1)}
/* 🔴 height:auto обязателен: атрибуты width/height браузер применяет как CSS-размеры,
   и на узком экране картинка сжималась по ширине, сохраняя высоту (прецедент 27.08.2026,
   мобильная версия — приоритет). */
img{max-width:100%;height:auto;display:block}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
@media (min-width:700px){.wrap{padding:0 32px}}
@media (min-width:1024px){.wrap{padding:0 40px}}
.prose{max-width:calc(66ch + 40px);margin:0 auto;padding:0 20px}
.meta{font:500 15px/1.4 var(--sans);color:var(--ink-soft)}

/* Медовый подчёрк ключевых слов заголовка */
.hl{text-decoration:underline;text-decoration-color:var(--honey);
  text-decoration-thickness:.16em;text-underline-offset:.08em;text-decoration-skip-ink:none}

/* Бейдж раздела */
.badge{display:inline-block;font:600 12px/1 var(--sans);letter-spacing:.08em;
  text-transform:uppercase;color:var(--clay);border:1px solid var(--line);
  background:var(--paper);border-radius:var(--r-full);padding:8px 14px;margin-bottom:var(--s-4)}

/* Кнопки */
.btn{display:inline-flex;align-items:center;justify-content:center;height:48px;
  padding:0 var(--s-5);border-radius:var(--r-2);font:600 16px/1.25 var(--sans);
  text-decoration:none;border:1px solid transparent;
  transition:background var(--dur) var(--ease-out),transform var(--dur) var(--ease-out)}
.btn:active{transform:scale(.97)}
.btn-clay{background:var(--clay);color:#FFFCF7}
.btn-clay:hover{background:var(--clay-deep);color:#FFFCF7}
.btn-line{border-color:var(--line);color:var(--ink);background:transparent}
.btn-line:hover{border-color:var(--ink-faint);color:var(--ink)}
.btn-text{font:600 16px/1.25 var(--sans);color:var(--clay);text-decoration:none;
  display:inline-flex;align-items:center;height:48px;padding:0 var(--s-2)}
.btn-text:hover{color:var(--clay-deep);text-decoration:underline;text-underline-offset:4px}
.btn-row{display:flex;gap:var(--s-3);flex-wrap:wrap;align-items:center}

/* Шапка */
.site-header{position:sticky;top:0;z-index:20;height:56px;background:var(--paper);
  border-bottom:1px solid var(--line);
  transition:transform .22s var(--ease-out)}
.site-header.hidden{transform:translateY(-100%)}
.site-header .row{display:flex;align-items:center;justify-content:space-between;
  gap:var(--s-3);height:56px}
.brand{font:600 18px/1 var(--serif);color:var(--ink);text-decoration:none;letter-spacing:-.01em;white-space:nowrap;margin-right:28px}
.hdr-cta{height:40px;padding:0 10px;font-size:13px;white-space:nowrap}
@media (min-width:1024px){.hdr-cta{padding:0 var(--s-4);font-size:15px}}
.hdr-right{display:flex;align-items:center;gap:var(--s-2)}
.tg-link{display:inline-flex;align-items:center;height:40px;padding:0 10px;font:600 13px/1 var(--sans);color:var(--ink);text-decoration:none;border:1px solid var(--line);border-radius:var(--r-2);white-space:nowrap}
.tg-link:hover{border-color:var(--ink-faint);color:var(--ink)}
.burger{width:44px;height:44px;border:0;background:none;padding:11px 10px;cursor:pointer;display:grid;gap:5px;align-content:center;border-radius:var(--r-1)}
.burger span{display:block;height:2px;background:var(--ink);border-radius:1px}
.nav-desktop{display:none}
@media (min-width:1024px){
  .site-header{height:64px}.site-header .row{height:64px}
  .burger{display:none}
  .nav-desktop{display:flex;gap:var(--s-5)}
  .nav-desktop a{position:relative;font:500 16px/1 var(--sans);color:var(--ink);text-decoration:none;padding:6px 0;white-space:nowrap}
  .nav-desktop a::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
    background:var(--clay);transform:scaleX(0);transform-origin:left;
    transition:transform var(--dur) var(--ease-out)}
  .nav-desktop a:hover::after{transform:scaleX(1)}
  .tg-link{font-size:15px;padding:0 var(--s-4)}
}

/* Шторка меню */
dialog.sheet{border:0;padding:0;margin:auto auto 0;width:100%;max-width:640px;
  position:fixed;inset:auto 0 0 0;max-height:85dvh;background:var(--paper);
  border-radius:var(--r-3) var(--r-3) 0 0;box-shadow:var(--shadow-2);
  display:flex;flex-direction:column}
dialog.sheet:not([open]){display:none}
dialog.sheet::backdrop{background:rgb(36 28 26 / .4)}
dialog.sheet[open]{animation:sheet-up .18s var(--ease-out)}
@keyframes sheet-up{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.sheet-head{display:flex;justify-content:space-between;align-items:center;
  padding:var(--s-4) 20px var(--s-3);border-bottom:1px solid var(--line)}
.sheet-title{font:600 20px/1 var(--serif);color:var(--ink)}
.sheet-close{position:relative;border:1px solid var(--line);background:var(--paper-tint);
  border-radius:var(--r-full);width:44px;height:44px;cursor:pointer;flex:none}
.sheet-close::before,.sheet-close::after{content:"";position:absolute;left:50%;top:50%;
  width:16px;height:2px;background:var(--ink);border-radius:1px}
.sheet-close::before{transform:translate(-50%,-50%) rotate(45deg)}
.sheet-close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.sheet-close:hover{border-color:var(--ink-faint)}
.sheet nav{overflow-y:auto}
.sheet nav a{display:flex;align-items:center;justify-content:space-between;min-height:56px;
  padding:0 20px;font:500 19px/1.3 var(--serif);color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--paper-deep)}
.sheet nav a::after{content:"";flex:none;width:8px;height:8px;
  border-right:1.5px solid var(--ink-faint);border-top:1.5px solid var(--ink-faint);
  transform:rotate(45deg)}
.sheet nav a:hover{color:var(--clay);background:var(--paper-tint)}
.sheet-btns{display:grid;gap:var(--s-3);
  padding:var(--s-5) 20px calc(var(--s-5) + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);background:var(--paper-tint);margin-top:auto}

/* Секции и ритм */
.section{padding:var(--s-8) 0}
@media (min-width:1024px){.section{padding:var(--s-9) 0}}
.section-tint{background:var(--paper-tint)}
.section-deep{background:var(--paper-deep)}
.section-head{margin-bottom:var(--s-6)}

/* Герой */
.hero{background:var(--paper-tint);border-bottom:1px solid var(--line);
  padding:var(--s-7) 0}
.hero-grid{display:grid;gap:var(--s-6)}
@media (min-width:760px) and (max-width:1023px){
  .hero-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:var(--s-6)}
  .hero-photo{max-width:300px}}
.hero-copy{max-width:56ch}
.hero-copy .sub{font-size:19px;line-height:1.55;color:var(--ink-soft);
  max-width:44ch;margin:var(--s-4) 0 var(--s-6)}
.hero-photo{position:relative;justify-self:center;width:100%;max-width:400px}
.hero-photo img{border-radius:var(--r-3);width:100%;height:auto;
  border:1px solid var(--line)}
.hero-photo figcaption{font:500 15px/1.4 var(--sans);color:var(--ink-soft);
  margin-top:var(--s-3)}
@media (min-width:1024px){
  .hero{padding:var(--s-8) 0}
  .hero-grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);
    align-items:center;gap:var(--s-8)}
  .hero-photo{max-width:440px;justify-self:end}
  .hero-copy .sub{font-size:21px}
}

/* Лид «Коротко» */
.korotko{background:var(--paper-tint);border-left:3px solid var(--clay);
  border-radius:var(--r-3);padding:var(--s-5);margin:var(--s-5) 0}
.kicker{font:600 12px/1 var(--sans);letter-spacing:.08em;color:var(--clay);
  text-transform:uppercase;margin:0 0 var(--s-2);display:block}
.korotko p{font-size:20px;line-height:1.5;margin:0}
@media (min-width:1024px){.korotko p{font-size:22px}}

/* Врезка «Что делать сегодня» */
.today{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--honey);
  border-radius:var(--r-3);padding:var(--s-5);margin:var(--s-6) 0}
.today h3{margin-bottom:var(--s-3)}
.today ol{margin:0;padding-left:22px}
.today li{margin-bottom:var(--s-2)}
.today li::marker{color:var(--clay);font-weight:600}

/* Нумерованные H2 статьи */
.num-h2{display:flex;gap:var(--s-3);align-items:baseline;margin:var(--s-7) 0 var(--s-4)}
.num-h2 .n{font:600 26px/1 var(--serif);color:var(--clay)}
@media (min-width:1024px){.num-h2 .n{font-size:32px}}

/* Инлайн-CTA клуба */
.club-inline{background:var(--clay-tint);border-radius:var(--r-3);padding:var(--s-5);margin:var(--s-7) 0}
.club-inline p{margin:0 0 var(--s-4)}
.club-inline .btn-row{margin:0 0 var(--s-3)}
.club-inline .meta{margin:0}

/* Строка «напишите сейчас» на первом экране острых статей. Та же глиняная семья,
   что и у врезки клуба, только компактнее: она стоит сразу под подписью автора
   и не должна отодвигать текст. Отдельной рамки нет — рамка с левой полосой
   занята кризисным блоком, два похожих компонента рядом читаются как шум. */
.club-now{background:var(--clay-tint);border-radius:var(--r-3);
  padding:var(--s-4) var(--s-5);margin:var(--s-5) 0}
.club-now p{margin:0 0 var(--s-3)}
.club-now .btn-row{margin:0}
.club-now .meta{margin:var(--s-3) 0 0}

/* FAQ */
.faq{margin:var(--s-6) 0}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-of-type{border-top:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);
  min-height:56px;padding:var(--s-3) 0;cursor:pointer;list-style:none;
  font:600 18px/1.35 var(--sans);color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:10px;height:10px;
  border-right:2px solid var(--ink-soft);border-bottom:2px solid var(--ink-soft);
  transform:rotate(45deg);transition:transform var(--dur) var(--ease-out)}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .a{padding:0 0 var(--s-4);color:var(--ink);max-width:66ch}

/* Блок Кати */
.katya-block{background:var(--paper-deep);border-radius:var(--r-3);padding:var(--s-5);
  display:grid;gap:var(--s-5);margin:var(--s-7) 0}
.katya-block img{border-radius:var(--r-3);width:100%;height:auto}
.katya-block .name{font:600 24px/1.2 var(--serif)}
.katya-block .facts{color:var(--ink-soft);font-size:15px}
@media (min-width:760px){.katya-block{grid-template-columns:minmax(0,2fr) minmax(0,3fr);align-items:center;padding:var(--s-6);gap:var(--s-6)}}
@media (min-width:1024px){.katya-block{gap:var(--s-7)}}

/* Автор-строка статьи */
.byline{display:flex;align-items:center;gap:var(--s-3);margin:var(--s-4) 0 0}
.byline img{width:32px;height:32px;border-radius:var(--r-full)}
.byline a{color:var(--ink);text-decoration:none}
.byline a:hover{color:var(--clay)}

/* Карточки статей: лента на мобильном, сетка на десктопе */
.art-list{list-style:none;margin:0;padding:0}
.art-list li{border-bottom:1px solid var(--line)}
.art-card{display:block;padding:var(--s-4) 0;text-decoration:none;position:relative}
.art-card .kicker{font:500 12px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-soft);display:block;margin-bottom:var(--s-2)}
.art-card .t{font:600 18px/1.35 var(--sans);color:var(--ink);display:block;margin-bottom:var(--s-2)}
.art-card:hover .t{color:var(--clay)}
.art-card .meta{display:block}
@media (min-width:700px){
  .art-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:var(--s-4)}
  .art-list li{border-bottom:0}
  .art-card{border:1px solid var(--line);border-radius:var(--r-3);
    padding:var(--s-5);height:100%;
    transition:border-color var(--dur) var(--ease-out)}
  .art-card:hover{border-color:var(--ink-faint)}
}
/* Скроллспай оглавления */
.toc a.now{color:var(--clay);font-weight:600}

/* Раздатчик «С чем вы пришли» */
.entry-list{list-style:none;margin:0;padding:0}
.entry-list a{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  min-height:56px;padding:var(--s-3) 0;font:500 18px/1.4 var(--sans);color:var(--ink);
  text-decoration:none;border-bottom:1px solid var(--line)}
.entry-list li:first-child a{border-top:1px solid var(--line)}
.entry-list a::after{content:"";flex:none;width:9px;height:9px;
  border-right:2px solid var(--clay);border-top:2px solid var(--clay);transform:rotate(45deg)}
.entry-list a:hover{color:var(--clay)}
@media (min-width:1024px){
  .entry-list{columns:2;column-gap:var(--s-8)}
  .entry-list li{break-inside:avoid}
  .entry-list li:nth-child(2) a{border-top:1px solid var(--line)}
  .entry-list a{font-size:19px}
}

/* Список «что внутри» с цифрами */
.num-list{list-style:none;margin:0;padding:0;counter-reset:n}
.num-list li{counter-increment:n;display:flex;gap:var(--s-4);padding:var(--s-4) 0;
  border-bottom:1px solid var(--line);align-items:baseline}
.num-list li::before{content:counter(n);font:600 28px/1 var(--serif);color:var(--clay);flex:none;min-width:32px}

/* Карточки тарифов */
.plans{display:grid;gap:var(--s-4)}
.plan{border:1px solid var(--line);border-radius:var(--r-3);padding:var(--s-5);
  background:var(--paper);display:flex;flex-direction:column;gap:var(--s-2)}
.plan .btn{align-self:flex-start;margin-top:auto}
.plan p{margin-bottom:var(--s-4)}
@media (min-width:700px){.plans{grid-template-columns:1fr 1fr;gap:var(--s-4);max-width:880px}}
@media (min-width:1024px){.plans{gap:var(--s-5)}
  .plan{padding:var(--s-6)}}

/* Сетка секции: заголовок слева, контент справа (десктоп) */
.split{display:grid;gap:var(--s-5)}
@media (min-width:1024px){
  .split{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:var(--s-8);align-items:start}
  .split .section-head{position:sticky;top:96px;margin-bottom:0}
  /* хвост секции (теги) — во вторую колонку только на десктопе:
     inline grid-column:2 расщеплял блок на две колонки на мобиле и планшете */
  .split-tail{grid-column:2}
}

/* Sticky CTA */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:15;background:var(--paper);
  box-shadow:var(--shadow-2);padding:var(--s-2) 20px calc(var(--s-2) + env(safe-area-inset-bottom));
  transform:translateY(110%);transition:transform .2s var(--ease-out)}
.sticky-cta.show{transform:none}
/* 🔴 27.08 (Джон): в липкой панели теперь ДВА канала — человеку нужен выбор,
   раньше был только Max, а Telegram лежал в самом низу футера. Ставим их в ряд,
   иначе на телефоне две кнопки во всю ширину съедают пол-экрана. */
.sticky-cta{display:flex;gap:var(--s-2);justify-content:center}
.sticky-cta .btn{flex:1 1 0;max-width:320px;margin:0;display:flex;justify-content:center;
  white-space:nowrap;padding-left:12px;padding-right:12px}

/* Футер */
footer{background:var(--paper-deep);color:var(--ink-soft);
  border-top:1px solid var(--line);padding:var(--s-8) 0 var(--s-7);margin-top:var(--s-8)}
footer .fgrid{display:grid;gap:var(--s-6)}
footer .fname{font:600 22px/1.2 var(--serif);color:var(--ink)}
footer nav{display:grid;gap:6px;align-content:start}
footer nav a{color:var(--ink-soft);text-decoration:none;font-size:15px;padding:2px 0}
footer nav a:hover{color:var(--clay)}
footer .fbtns{display:flex;gap:var(--s-3);flex-wrap:wrap;margin-top:var(--s-4)}
footer .small{font-size:15px;color:var(--ink-faint)}
footer .fhead{font:600 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-faint);margin:0 0 var(--s-2)}
@media (min-width:700px){footer .fgrid{grid-template-columns:minmax(0,5fr) minmax(0,3fr) minmax(0,3fr);gap:var(--s-6)}}
@media (min-width:1024px){footer .fgrid{gap:var(--s-8)}}

/* Цитаты-отзывы */
blockquote{margin:0 0 var(--s-5);padding:0 0 0 var(--s-5);border-left:3px solid var(--honey)}
blockquote p{font:400 italic 20px/1.5 var(--serif);margin-bottom:var(--s-2)}
blockquote cite{font:500 15px/1.4 var(--sans);color:var(--ink-soft);font-style:normal}

/* Хлебные крошки */
.crumbs{font:500 15px/1.4 var(--sans);color:var(--ink-soft);margin-bottom:var(--s-4)}
.crumbs a{color:var(--ink-soft);text-decoration:none}
.crumbs a:hover{color:var(--clay)}

/* Теги */
.tags{display:flex;flex-wrap:wrap;gap:var(--s-2);margin:var(--s-5) 0}
.tags a{border:1px solid var(--line);border-radius:var(--r-full);padding:8px 16px;
  font:500 15px/1 var(--sans);color:var(--ink);text-decoration:none}
.tags a:hover{border-color:var(--ink-faint)}

/* Меню-ядро: аккордеон в шторке */
.sheet nav details{border-bottom:1px solid var(--paper-deep)}
.sheet nav summary{display:flex;align-items:center;justify-content:space-between;min-height:56px;
  padding:0 20px;font:500 19px/1.3 var(--serif);color:var(--ink);cursor:pointer;list-style:none}
.sheet nav summary::-webkit-details-marker{display:none}
.sheet nav summary::after{content:"";flex:none;width:8px;height:8px;
  border-right:1.5px solid var(--ink-faint);border-bottom:1.5px solid var(--ink-faint);
  transform:rotate(45deg);transition:transform var(--dur) var(--ease-out)}
.sheet nav details[open] summary::after{transform:rotate(-135deg)}
.sheet nav details[open] summary{color:var(--clay)}
.sheet nav .sub{padding:0 0 var(--s-3);background:var(--paper-tint)}
.sheet nav .sub a{display:block;min-height:44px;padding:10px 20px 10px 32px;
  font:400 17px/1.4 var(--sans);color:var(--ink);text-decoration:none;border-bottom:0}
.sheet nav .sub a::after{content:none}
.sheet nav .sub a:hover{color:var(--clay)}
.sheet nav .sub .subhead{font:600 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-faint);padding:var(--s-4) 20px var(--s-2) 32px}
.sheet nav > a{border-bottom:1px solid var(--paper-deep)}

/* Меню-ядро: дропдауны на десктопе */
@media (min-width:1024px){
  .nav-item{position:relative}
  .nav-item > a{display:inline-flex;align-items:center;gap:6px}
  .nav-item > a::before{content:"";width:7px;height:7px;order:2;margin-top:-3px;
    border-right:1.5px solid var(--ink-faint);border-bottom:1.5px solid var(--ink-faint);
    transform:rotate(45deg)}
  .drop{position:absolute;left:-16px;top:100%;padding-top:10px;min-width:280px;
    opacity:0;visibility:hidden;transform:translateY(4px);
    transition:opacity var(--dur) var(--ease-out),transform var(--dur) var(--ease-out),visibility 0s linear var(--dur)}
  .nav-item:hover .drop,.nav-item:focus-within .drop{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  .drop-panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-3);
    box-shadow:var(--shadow-2);padding:var(--s-3) 0}
  .drop-panel a{display:block;padding:10px 20px;font:400 16px/1.35 var(--sans);
    color:var(--ink);text-decoration:none;white-space:nowrap}
  .drop-panel a:hover{background:var(--paper-tint);color:var(--clay)}
  .drop-panel a::after{content:none}
  .drop-panel .subhead{font:600 11px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;
    color:var(--ink-faint);padding:var(--s-4) 20px var(--s-1)}
}

/* v2.3 — профуровень */
/* 🔴 27.08: минимум был 38px — на 375px заголовок вставал в ЧЕТЫРЕ строки и съедал
   первый экран. Опускаем нижнюю границу до 31px; на десктопе всё как было.
   Тело текста НЕ трогаем: 19px — осознанно, аудитория 35–54 читает с телефона
   (канон: тело никогда не мельче 17px). */
h1{font-size:clamp(31px,4.2vw + 18px,60px);line-height:1.1;letter-spacing:-.025em}
.hero{border-bottom:0;position:relative;overflow:hidden}
.hero .sub{font-size:20px}
.hero-photo{position:relative}
.hero-photo img{border:0;border-radius:200px 200px var(--r-3) var(--r-3);
  aspect-ratio:4/5;object-fit:cover;object-position:top}
.hero-photo::before{content:"";position:absolute;inset:24px -24px -24px 24px;
  background:var(--paper-deep);border-radius:200px 200px var(--r-3) var(--r-3);z-index:-1}
/* 🔴 16.09.2026 [ИЗМЕРЕНО, CDP 390×844]: фото Кати начиналось на 671-м пикселе —
   первый экран телефона был без лица, а сайт держится на личном доверии.
   На узких экранах поднимаем портрет над заголовком и режем до 190px: заголовок,
   фраза, фото и кнопка «написать Кате» умещаются в один экран без прокрутки. */
@media (max-width:759px){
  .hero{padding:var(--s-5) 0 var(--s-6)}
  .hero-grid{gap:var(--s-5)}
  .hero-photo{order:-1;max-width:190px;margin:0 auto}
  .hero-photo::before{inset:14px -14px -14px 14px}
  .hero-copy .sub{margin:var(--s-3) 0 var(--s-5)}
}
@media (min-width:1024px){
  .hero-grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
  .hero-photo{max-width:460px;margin-right:24px}
}
.kicker{display:flex;align-items:center;gap:10px}
.kicker::before{content:"";width:24px;height:2px;background:var(--clay)}
.badge{border:0;background:var(--clay-tint);color:var(--clay-deep)}

/* Ситуации карточками */
.entry-grid{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-3)}
.entry-grid a{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
  min-height:56px;padding:var(--s-3) var(--s-4);font:500 17px/1.35 var(--sans);color:var(--ink);
  text-decoration:none;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-2);
  transition:border-color var(--dur) var(--ease-out),transform var(--dur) var(--ease-out)}
.entry-grid a::after{content:"";flex:none;width:9px;height:9px;
  border-right:2px solid var(--clay);border-top:2px solid var(--clay);transform:rotate(45deg);
  transition:transform var(--dur) var(--ease-out)}
.entry-grid a:hover::after{transform:rotate(45deg) translate(2px,-2px)}
.entry-grid a:hover{border-color:var(--clay);transform:translateY(-1px)}
@media (min-width:700px){.entry-grid{grid-template-columns:1fr 1fr;gap:var(--s-3)}}
@media (min-width:1024px){.entry-grid{gap:var(--s-4)}.entry-grid a{font-size:18px}}

/* Шаги */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-5);counter-reset:st}
.steps li{counter-increment:st;position:relative;padding-left:56px}
.steps li::before{content:counter(st);position:absolute;left:0;top:-4px;width:40px;height:40px;
  display:grid;place-items:center;font:600 20px/1 var(--serif);color:var(--clay);
  background:var(--clay-tint);border-radius:var(--r-full)}
.steps h3{margin-bottom:var(--s-1)}
.steps p{margin:0;color:var(--ink-soft)}
@media (min-width:700px){.steps{grid-template-columns:repeat(3,1fr);gap:var(--s-4)}
  .steps li{padding-left:52px}}
@media (min-width:1024px){.steps{gap:var(--s-6)}}

/* Карточки статей: serif-заголовки */
.art-card .t{font:600 20px/1.3 var(--serif);letter-spacing:-.01em}

/* Цитата в секции клуба */
.quote-card{background:var(--paper);border-radius:var(--r-3);padding:var(--s-5);
  border:1px solid var(--line);margin-top:var(--s-5)}
.quote-card p{font:400 18px/1.55 var(--serif);font-style:italic;margin-bottom:var(--s-2);max-width:62ch}
.quote-card cite{font:500 14px/1.4 var(--sans);color:var(--ink-soft);font-style:normal}


/* v3.1 — продуманность */
::selection{background:var(--honey);color:var(--ink)}
body[data-page="roditelyam"] .nav-desktop a[href="roditelyam.html"],
body[data-page="podrostok"] .nav-desktop a[href="podrostok-rastet.html"],
body[data-page="sostoyaniya"] .nav-desktop a[href="sostoyaniya.html"],
body[data-page="products"] .nav-desktop a[href="club.html"],
body[data-page="katya"] .nav-desktop a[href="katya.html"],
body[data-page="blog"] .nav-desktop a[href="blog.html"]{color:var(--clay)}
body[data-page="roditelyam"] .nav-desktop a[href="roditelyam.html"]::after,
body[data-page="podrostok"] .nav-desktop a[href="podrostok-rastet.html"]::after,
body[data-page="sostoyaniya"] .nav-desktop a[href="sostoyaniya.html"]::after,
body[data-page="katya"] .nav-desktop a[href="katya.html"]::after,
body[data-page="blog"] .nav-desktop a[href="blog.html"]::after{transform:scaleX(1)}
[id]{scroll-margin-top:80px}
.toc{background:var(--paper-tint);border-radius:var(--r-3);padding:var(--s-4) var(--s-5);margin:var(--s-5) 0}
.toc p{font:600 13px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 var(--s-3)}
.toc ol{margin:0;padding-left:20px;columns:1}
.toc li{margin-bottom:6px}
.toc a{color:var(--ink);text-decoration:none}
.toc a:hover{color:var(--clay)}
@media (min-width:700px){.toc ol{columns:2;column-gap:var(--s-5)}}
@media (min-width:1024px){.toc ol{column-gap:var(--s-6)}}

.hdr-cta .cta-full{display:none}
.hdr-cta .cta-short{display:inline}
@media (min-width:820px){.hdr-cta .cta-full{display:inline}.hdr-cta .cta-short{display:none}}

/* TG-ссылка всегда коротким текстом: пара полных подписей + меню не влезала
   в контейнер 1120px и давала горизонтальный скролл на десктопе */
.tg-link .cta-full{display:none}
.tg-link .cta-short{display:inline}


/* v29 — дизайн-скачок (emil-design: один авторский моушен + микродетали) */
html{caret-color:var(--clay)}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:var(--paper-tint)}
::-webkit-scrollbar-thumb{background:var(--paper-deep);border-radius:5px;border:2px solid var(--paper-tint)}
::-webkit-scrollbar-thumb:hover{background:var(--ink-faint)}

/* Вход героя: каскад из трёх шагов, только при загрузке, ease-out */
@media (prefers-reduced-motion:no-preference){
  .hero-copy h1,.hero-copy .sub,.hero-copy .btn-row,.hero-copy .btn-text{
    opacity:0;transform:translateY(14px);
    animation:rise .6s var(--ease-out) forwards}
  .hero-copy .sub{animation-delay:.08s}
  .hero-copy .btn-row{animation-delay:.16s}
  .hero-copy .btn-text{animation-delay:.22s}
  .hero-photo{opacity:0;transform:scale(.975);animation:rise-photo .7s var(--ease-out) .1s forwards}
  .hero .hl{background:linear-gradient(var(--honey),var(--honey)) left bottom / 0% .16em no-repeat;
    text-decoration:none;animation:draw .5s var(--ease-out) .55s forwards}
  @keyframes rise{to{opacity:1;transform:none}}
  @keyframes rise-photo{to{opacity:1;transform:none}}
  @keyframes draw{to{background-size:100% .16em}}
}

/* Кнопки: подъём на ховере */
.btn{will-change:transform}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:scale(.97)}
.btn-clay{box-shadow:0 1px 2px rgb(143 55 34 / .25)}
.btn-clay:hover{box-shadow:0 4px 12px -2px rgb(143 55 34 / .35)}

/* Карточки: живой ховер */
@media (min-width:1024px){
  .art-card{transition:border-color var(--dur) var(--ease-out),transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out)}
  .art-card:hover{border-color:var(--clay);transform:translateY(-2px);box-shadow:var(--shadow-2)}
}
.art-card .kicker{color:var(--clay)}
.entry-grid a{transition:border-color var(--dur) var(--ease-out),transform var(--dur) var(--ease-out),background var(--dur) var(--ease-out)}
.entry-grid a:hover{background:var(--paper-tint)}

/* Типографика: крупнее H2 на десктопе, единый ритм */
@media (min-width:1024px){h2{font-size:36px;letter-spacing:-.02em}}

/* Шторка: плавнее и глубже */
dialog.sheet[open]{animation:sheet-up .26s var(--ease-out)}
dialog.sheet::backdrop{background:rgb(36 28 26 / .45)}

/* Ссылки текста: фирменное подчёркивание */
.prose p a{text-underline-offset:3px;text-decoration-thickness:1.5px;text-decoration-color:var(--clay);transition:color var(--dur) var(--ease-out)}

@media (max-width:479px){.tg-link{display:none}}

/* FAQ: плавное раскрытие ответа */
@media (prefers-reduced-motion:no-preference){
  .faq details[open] .a{animation:faq-in .28s var(--ease-out)}
  @keyframes faq-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
  .sheet nav details[open] .sub{animation:faq-in .22s var(--ease-out)}
}
/* Цитаты клуба на средней ширине — сетка 3 в ряд с 700px */
@media (min-width:700px) and (max-width:1023px){
  .art-list:has(.quote-card){display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s-3)}
  .art-list:has(.quote-card) li{border-bottom:0}
}


/* v34 — межстраничные переходы и последняя полировка */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:no-preference){
  ::view-transition-old(root){animation:vt-out .18s var(--ease-out) both}
  ::view-transition-new(root){animation:vt-in .24s var(--ease-out) both}
  @keyframes vt-out{to{opacity:0}}
  @keyframes vt-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  /* шапка не мигает между страницами */
  .site-header{view-transition-name:site-header}
}

/* Лид «Коротко» — акцентная гарнитура */
.korotko p:not(.kicker){font-family:var(--serif);font-size:19px;line-height:1.55}
@media (min-width:1024px){.korotko p:not(.kicker){font-size:21px}}

/* Шеврон пункта меню поворачивается при раскрытии */
@media (min-width:1024px){
  .nav-item > a::before{transition:transform var(--dur) var(--ease-out)}
  .nav-item:hover > a::before{transform:rotate(225deg);margin-top:2px}
}

/* Числа — табличные в метаданных */
.meta,.crumbs{font-variant-numeric:tabular-nums}

/* Фото в блоке Кати — стабильная рамка */
.katya-block img{aspect-ratio:4/5;object-fit:cover;object-position:top}

/* Плавный переход цвета ссылок футера */
footer nav a{transition:color var(--dur) var(--ease-out)}

/* Кризисный блок на YMYL-страницах: телефон доверия и дисклеймер */
.crisis{border:1px solid var(--clay);border-left-width:4px;border-radius:var(--r-2);
  background:var(--clay-tint);padding:var(--s-5);margin:var(--s-6) 0}
.crisis .kicker{color:var(--clay-deep);margin-bottom:var(--s-2)}
.crisis p{margin-bottom:var(--s-2)}
.crisis p:last-child{margin-bottom:0}

/* ── Поиск по сайту ─────────────────────────────────────────── */
.site-search-wrap{position:relative;margin-left:auto;margin-right:var(--s-3);
  flex:0 0 240px;min-width:200px}
#site-search{width:100%;padding:9px 14px;border:1px solid var(--line,#e4ddd2);border-radius:999px;
  background:var(--paper,#fffcf7);font:400 15px/1.2 var(--sans,inherit);color:var(--ink,#221c17);
  transition:border-color .15s,box-shadow .15s}
#site-search::placeholder{color:var(--ink-soft,#7d7369)}
#site-search:focus{outline:none;border-color:var(--clay,#b2472e);box-shadow:0 0 0 3px rgba(178,71,46,.12)}
#site-search-results{position:absolute;top:calc(100% + 8px);right:0;width:min(420px,86vw);z-index:60;
  background:var(--paper,#fffcf7);border:1px solid var(--line,#e4ddd2);border-radius:14px;
  box-shadow:0 18px 40px rgba(34,28,23,.14);overflow:hidden;max-height:70vh;overflow-y:auto}
.s-item{display:block;padding:12px 16px;border-bottom:1px solid var(--line,#efe8dd);text-decoration:none;color:inherit}
.s-item:last-child{border-bottom:none}
.s-item:hover,.s-item:focus{background:var(--tint,#f7f1e8)}
.s-sec{display:block;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--clay,#b2472e);margin-bottom:2px}
.s-t{display:block;font:600 16px/1.35 var(--serif,Georgia,serif);margin-bottom:3px}
.s-d{display:block;font-size:14px;line-height:1.45;color:var(--ink-soft,#7d7369)}
.s-item mark{background:rgba(178,71,46,.16);color:inherit;padding:0 1px;border-radius:3px}
.s-empty{margin:0;padding:16px;font-size:15px;color:var(--ink-soft,#7d7369)}
@media (max-width:1320px){.site-search-wrap{flex:0 0 190px;min-width:170px}}
@media (max-width:1120px){.site-search-wrap{display:none}}
/* 14.08: на мобиле обёртка схлопывалась в ширину 0 (замер: поле 30px, прижато к краю) —
   flex-basis не работал, потому что родитель на этой ширине уже не flex-контейнер.
   Ширину задаём явно, не полагаясь на flex. */
/* 🔴 27.08: у шапки height:56px жёсткой строкой. На телефоне поиск переносится во вторую
   строку, содержимое становится выше 56px и ВЫВАЛИВАЕТСЯ поверх заголовка статьи
   (замер: поле «Поиск» перекрывало h1). На этой ширине высоту отпускаем. */
@media (max-width:900px){
  .site-header{height:auto;min-height:56px}
  /* 🔴 шапка липкая: каждый лишний пиксель тут навсегда съедает экран телефона.
     Замер 27.08: со строкой поиска было 181px — 22% экрана. Ужимаем отступы и поле. */
  .site-header .row{height:auto;min-height:52px;padding-bottom:8px}
  .site-search-wrap{display:block;order:3;flex:1 1 100%;width:100%;min-width:0;margin-left:0;margin-right:0;margin-top:6px}
  #site-search{padding:7px 14px;font-size:15px}
  /* 🔴 27.08: логотип + «Спросить в Max» + бургер не влезали в 375px, и шапка
     разъезжалась на ТРИ строки. Ужимаем кнопку — строк становится две. */
  .site-header .brand{font-size:18px;letter-spacing:-.01em}
  .site-header .hdr-right .btn{height:38px;padding:0 10px;font-size:13px}
  .site-header .hdr-right{gap:4px}
  .site-header .row{gap:6px}
  /* 14.08: родитель шапки — flex с nowrap, поэтому строка поиска с basis 100%
     сжималась в 0 (замер: wrap 0px, поле 30px у правого края). Разрешаем перенос. */
  header .wrap.row{flex-wrap:wrap}
  #site-search-results{width:100%}}

/* --- главный продукт: группа «Точка опоры» (главная) --- */
.start-line{margin:var(--s-4) 0 0;font:500 15px/1.4 var(--sans);color:var(--clay);
  background:var(--clay-tint);border-radius:var(--r-full);padding:8px 16px;display:inline-block}

/* Первый экран /club/ отвечает родителю фактами, а не датой потока (11.09.2026).
   Строки, а не сетка карточек с иконками: карточки на первом экране растянули бы
   его за пределы телефона, а кнопка обязана быть видна без прокрутки. */
.hero-facts{margin:var(--s-5) 0 0;display:grid;grid-template-columns:auto 1fr;
  gap:var(--s-2) var(--s-4);align-items:baseline}
.hero-facts dt{font:600 13px/1.4 var(--sans);letter-spacing:.04em;color:var(--clay);
  white-space:nowrap}
.hero-facts dd{margin:0;font-size:16px;line-height:1.5;color:var(--ink-soft)}
@media (max-width:520px){
  .hero-facts{grid-template-columns:1fr;gap:var(--s-1)}
  .hero-facts dd{margin:0 0 var(--s-2)}
}
.sched{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-2)}
.sched li{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:baseline;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-2);padding:12px 16px}
.sched li b{font:600 17px/1.3 var(--serif);min-width:11ch}
.sched li span{color:var(--ink-soft);font-size:15px}
.price-grid{display:grid;gap:var(--s-4)}
.price-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-3);
  padding:var(--s-5);display:flex;flex-direction:column;gap:var(--s-3)}
.price-card--pick{border-color:var(--clay);box-shadow:var(--shadow-2)}
.price-card h4{margin:0;font:600 20px/1.25 var(--serif)}
.price-card p{margin:0}
.price-card .price{font:600 28px/1 var(--serif);letter-spacing:-.02em}
@media (min-width:760px){
  .price-grid{grid-template-columns:1fr 1fr;align-items:stretch}
  .sched{grid-template-columns:repeat(3,1fr)}
}

/* 14.08 — шапка вылезала за окно на десктопе [ИЗМЕРЕНО: контейнер 1120, содержимое 1420].
   Причина: поиск с min-width:200 не сжимался, плюс TG-кнопка дублировала оффер Max.
   Оффер всегда Max (канон), TG остаётся в подвале и в тексте страниц. */
@media (min-width:1024px){
  .site-header .nav-desktop,.site-header .brand,.site-header .hdr-right{min-width:0}
  /* 26.08: было flex 140/min 120 — placeholder «Поиск по сайту» не влезал и обрезался,
     поле выглядело сломанным. Пересчёт шапки на 1230: бренд 126 + меню 564 + поиск 200
     + кнопка Max 180 + зазоры 36 = 1106, место есть. */
  .site-header .site-search-wrap{flex:0 1 200px;min-width:180px}
  /* 🔴 27.08 (Джон): каналов теперь ТРИ — Telegram, Max, WhatsApp, и все видны везде.
     Прежнее правило прятало Telegram на десктопе («оффер всегда Max») — отменено.
     Чтобы всё влезло в строку, мессенджеры идут иконками, текст остаётся у Max. */
}

/* Финальный CTA статьи — ведёт в группу «Точка опоры» */
.club-final{margin:var(--s-7) 0 var(--s-5)}

/* Видео Кати: свой плеер, чужих логотипов и ухода на сторону нет (17.08.2026) */
.katya-video{margin:var(--s-6) 0}
.katya-video .video-bar{display:flex;align-items:center;gap:12px;margin-top:10px;flex-wrap:wrap}
.katya-video .video-bar button{border:1px solid var(--line);background:#fff;color:var(--ink);
  border-radius:999px;padding:8px 16px;font:inherit;font-size:15px;cursor:pointer}
.katya-video .video-bar button:hover{border-color:var(--accent);color:var(--accent)}
.katya-video .video-bar [data-role=time]{color:var(--muted);font-size:14px;font-variant-numeric:tabular-nums}

/* 26.08: .katya-block — сетка «фото слева, текст справа». На главной этот же класс
   применён к двум блокам БЕЗ фотографии, и текст всё равно ужимался в узкую колонку
   под портрет — 234px вместо 700. Нет картинки — колонка одна. */
.katya-block:not(:has(img)){grid-template-columns:1fr}

/* ===== 26.08: две поломки главной и шапки, пойманные Джоном на десктопе ===== */

/* 1. Герой на главной был ужат до 346px: .prose ограничивает контейнер 66 символами —
   это правильно для текста статьи, но не для героя. Выводим герой на всю ширину,
   внутренний .wrap сам вернёт 1120 и отцентрует. */
main.prose > .hero{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

/* 2. Шапка переполнялась: пункты «Клуб» и «Катя» выезжали за меню и уходили под поиск.
   Сжимаем шаг меню и поле поиска — сумма влезает в 1120. */
/* Шапка: логотип · меню · поиск · кнопка Max.
   26.08: пробовал сворачивать поиск в лупу с раскрытием — во флекс-шапке ячейка не
   расширяется ничем, включая инлайн-стиль, и раскрытие не заработало. Оставлено просто
   и надёжно: компактное поле с иконкой и коротким плейсхолдером, всё влезает без наложений.
   Считано на 1120: бренд 116 + отступ 30 + меню 555 + поиск 150 + кнопка 190 + зазоры 48. */
@media (min-width:1024px){
  .site-header .nav-desktop{gap:var(--s-4);flex:0 0 auto}
  .site-header .site-search-wrap{flex:0 1 150px;min-width:140px;position:relative}
  .site-header #site-search{
    width:100%;height:40px;padding:0 12px 0 36px;
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d7369' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:11px center;background-size:17px;
  }
}

/* ===== 26.08: аудит вёрстки по чеклисту polish, мобилка ==========================
   Замер на 390px: горизонтального скролла и наложений нет нигде, но 28 тач-целей
   на страницу были мельче 40px — теги 33px, ссылки подвала, логотип 18px, поиск 38px.
   Правило касания — минимум 44px, иначе на телефоне промахиваешься. */
@media (max-width:900px){
  .tags a{min-height:44px;display:inline-flex;align-items:center;padding:0 14px}
  footer nav a{min-height:44px;display:flex;align-items:center}
  .site-header .brand{min-height:44px;display:inline-flex;align-items:center}
  #site-search{min-height:44px}
  .sheet nav a,.sheet .sub a,.sheet summary{min-height:44px;display:flex;align-items:center}
  /* ссылки в списках внутри контента — «Читать по теме», хлебные крошки, перечни разделов */
  /* 🔴 27.08: правило про палец (44px) ломало карточки курсов и статей — они тоже
     «единственная ссылка в li», и от inline-flex метка, заголовок и подпись
     вставали в РЯД вместо столбика (замер на 380px: kicker x=40, title x=76,
     meta x=256). Карточки исключаем: у них своя раскладка. */
  main li > a:only-child:not(.art-card):not(.card){min-height:44px;display:inline-flex;align-items:center}
  main li > a.art-card{display:block;min-height:44px}
  /* Имя Кати в подписи — ссылка высотой 18px. Растягиваем зону касания вертикально
     отрицательным margin: палец попадает, а строка подписи не разъезжается. */
  .byline .meta a{padding:13px 0;margin:-13px 0;display:inline-block}
}

/* 🔴 27.08 (Джон): «Поделиться» вверху статьи. На телефоне открывает системное меню,
   статья уходит в мессенджер карточкой с обложкой; на десктопе копирует адрес. */
.share-btn{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;
  margin:0 0 var(--s-4);border:1px solid var(--line);border-radius:var(--r-full);
  background:var(--paper);color:var(--ink-soft);font:500 15px/1 var(--sans);cursor:pointer;
  transition:border-color var(--dur) var(--ease-out),color var(--dur) var(--ease-out)}
.share-btn:hover{border-color:var(--clay);color:var(--clay)}
.share-btn::before{content:"";width:16px;height:16px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 8a3 3 0 1 0-2.8-4H15L8.9 9.6a3 3 0 1 0 0 4.8L15 20h.2A3 3 0 1 0 18 16a3 3 0 0 0-2 .8L10.2 12 16 7.2A3 3 0 0 0 18 8Z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18 8a3 3 0 1 0-2.8-4H15L8.9 9.6a3 3 0 1 0 0 4.8L15 20h.2A3 3 0 1 0 18 16a3 3 0 0 0-2 .8L10.2 12 16 7.2A3 3 0 0 0 18 8Z'/%3E%3C/svg%3E") center/contain no-repeat}

/* 🔴 27.08: ссылки внутри текста (возрастные группы на странице клуба и т.п.) имели
   высоту 18–25px — пальцем попасть трудно. Высоту строки трогать нельзя, иначе
   разъедется абзац: расширяем ЗОНУ НАЖАТИЯ отрицательным отступом, текст остаётся
   на месте. Прецедент 27.08: прошлое правило про 44px «в лоб» сломало карточки курсов. */
@media (max-width:900px){
  .prose p a, .prose li a, .prose b a, p.meta a{
    padding:10px 2px; margin:-10px -2px; position:relative}
}

/* 🔴 27.08: кнопка покупки в начале страницы курса — форма оплаты была почти
   в самом низу, до неё доходили не все. */
.buy-line{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;
  margin:var(--s-5) 0}
.buy-line .btn{min-height:48px;padding:0 24px;font-size:17px}
.buy-note{color:var(--ink-soft);font:400 15px/1.4 var(--sans)}

/* 🔴 27.08 (Джон): «два варианта везде — Max и Telegram». В шапке телефона Telegram
   был скрыт ради места: логотип + кнопка + бургер и так не помещались. Решение —
   на узких экранах Telegram становится компактной иконкой, а у кнопки Max остаётся
   только слово «Спросить». Оба канала снова видны. */
@media (max-width:900px){
  .site-header .tg-link{display:inline-flex !important;width:38px;padding:0;
    justify-content:center;font-size:0}
  .site-header .tg-link::before{content:"";width:18px;height:18px;background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.9 4.3 18.7 19.4c-.2 1-.9 1.3-1.8.8l-4.9-3.6-2.4 2.3c-.3.3-.5.5-1 .5l.4-5 9.1-8.2c.4-.4-.1-.6-.6-.2L6.3 13.1 1.5 11.6c-1-.3-1-1 .2-1.5l19-7.3c.9-.3 1.6.2 1.2 1.5z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.9 4.3 18.7 19.4c-.2 1-.9 1.3-1.8.8l-4.9-3.6-2.4 2.3c-.3.3-.5.5-1 .5l.4-5 9.1-8.2c.4-.4-.1-.6-.6-.2L6.3 13.1 1.5 11.6c-1-.3-1-1 .2-1.5l19-7.3c.9-.3 1.6.2 1.2 1.5z'/%3E%3C/svg%3E") center/contain no-repeat}
  .site-header .hdr-cta .cta-short{font-size:0}
  .site-header .hdr-cta .cta-short::after{content:"Спросить";font-size:13px}
}
@media (max-width:479px){.site-header .tg-link{display:inline-flex !important}}

/* 🔴 27.08: якорь формы оплаты. Пустой div высотой 0 браузер прокруткой игнорирует,
   поэтому даём ему высоту и отступ сверху — иначе форма упирается в липкую шапку. */
#pay{display:block;height:1px;scroll-margin-top:120px}

/* 🔴 27.08 (Джон): три канала связи — Telegram, Max и WhatsApp. В шапке два
   мессенджера идут иконками, Max остаётся кнопкой: по замеру июля он даёт
   вчетверо больше подписок, поэтому у него приоритет в виде. */
.wa-link{display:inline-flex;align-items:center;height:40px;padding:0 10px;
  font:600 13px/1 var(--sans);color:var(--ink);text-decoration:none;
  border:1px solid var(--line);border-radius:var(--r-2);white-space:nowrap}
.wa-link:hover{border-color:var(--ink-faint)}
.wa-link .cta-full{display:none}
.wa-link .cta-short{display:inline}
@media (max-width:900px){
  .site-header .wa-link{width:38px;padding:0;justify-content:center;font-size:0}
  .site-header .wa-link::before{content:"";width:18px;height:18px;background:currentColor;
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15L2 22l5.1-1.3A10 10 0 1 0 12 2Zm5.6 14.2c-.2.6-1.2 1.2-1.7 1.2-.4 0-1 .1-3.2-.9-2.7-1.2-4.4-4-4.5-4.2-.1-.2-1-1.4-1-2.6s.6-1.8.9-2c.2-.3.5-.3.7-.3h.5c.2 0 .4 0 .6.5l.8 2c.1.2.1.4 0 .6l-.4.5c-.1.2-.3.3-.1.6.2.3.8 1.3 1.7 2.1 1.2 1 2.1 1.4 2.4 1.5.2.1.4.1.6-.1l.7-.9c.2-.2.4-.2.6-.1l2 1c.2.1.4.2.4.3.1.2.1.7-.1 1.3Z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15L2 22l5.1-1.3A10 10 0 1 0 12 2Zm5.6 14.2c-.2.6-1.2 1.2-1.7 1.2-.4 0-1 .1-3.2-.9-2.7-1.2-4.4-4-4.5-4.2-.1-.2-1-1.4-1-2.6s.6-1.8.9-2c.2-.3.5-.3.7-.3h.5c.2 0 .4 0 .6.5l.8 2c.1.2.1.4 0 .6l-.4.5c-.1.2-.3.3-.1.6.2.3.8 1.3 1.7 2.1 1.2 1 2.1 1.4 2.4 1.5.2.1.4.1.6-.1l.7-.9c.2-.2.4-.2.6-.1l2 1c.2.1.4.2.4.3.1.2.1.7-.1 1.3Z'/%3E%3C/svg%3E") center/contain no-repeat}
  .sticky-cta .btn{font-size:13px;padding:0 8px}
}

/* 🔴 27.08 (Джон: «расширяю, а он не расширяется до конца»). Объяснение и решение.
   Ширину ТЕКСТА расширять нельзя: сейчас 69 знаков в строке — это оптимум, при 150
   знаках глаз теряет строку на переносе. Но свободные 245px справа простаивали.
   Решение — оглавление вбок: ширина экрана работает, читаемость не страдает.
   Оглавление липкое, подсветка текущего раздела уже была в скрипте. */
@media (min-width:1200px){
  main.prose{position:relative}
  .toc{position:sticky;top:96px;float:right;width:250px;
    margin:0 -290px var(--s-5) var(--s-6);
    background:transparent;border:0;border-left:2px solid var(--line);
    border-radius:0;padding:2px 0 2px var(--s-4);font-size:15px}
  .toc .kicker{margin-bottom:var(--s-3)}
  .toc ol,.toc ul{margin:0;padding:0;list-style:none}
  .toc li{margin:0 0 10px}
  .toc a{color:var(--ink-soft);text-decoration:none;line-height:1.35;display:block}
  .toc a:hover,.toc a.now{color:var(--clay)}
  .toc a.now{font-weight:600}
}
/* на очень широких экранах места ещё больше — отодвигаем дальше и делаем крупнее */
@media (min-width:1500px){
  .toc{width:290px;margin-right:-330px;font-size:16px}
}

/* 🔴 27.08. Замер на 1600px: ряд шапки 1120px, а кнопки стояли на 1289 — ЗА краем,
   логотип при этом был сжат до 12px и налезал на меню. Причина: меню занимало 786px
   и выдавливало соседей, потому что никто не был защищён от сжатия.
   Логотип и кнопки не сжимаем никогда, меню отдаём остаток и разрешаем перенос. */
@media (min-width:1024px){
  .site-header .row{gap:var(--s-4);flex-wrap:nowrap}
  .site-header .brand{flex:0 0 auto;white-space:nowrap}
  .site-header .nav-desktop{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;
    align-items:center;gap:2px}
  .site-header .site-search-wrap{flex:0 1 180px;min-width:120px}
  .site-header .hdr-right{flex:0 0 auto;display:flex;align-items:center;gap:8px}
}
/* на средних десктопах меню не влезает целиком — прячем поиск, он есть в шторке */
@media (min-width:1024px) and (max-width:1279px){
  .site-header .site-search-wrap{display:none}
}

/* 🔴 27.08: три канала в шапке на десктопе. Telegram и WhatsApp — компактные иконки
   (38px каждая), Max — кнопка с текстом: по замеру июля он даёт вчетверо больше
   подписок, поэтому у него приоритет в виде. Так меню помещается в одну строку.
   мессенджеры идут иконками на десктопе */
@media (min-width:1024px){
  .site-header .tg-link,.site-header .wa-link{
    display:inline-flex;width:38px;padding:0;justify-content:center;font-size:0}
  .site-header .tg-link .cta-full,.site-header .tg-link .cta-short,
  .site-header .wa-link .cta-full,.site-header .wa-link .cta-short{display:none}
  .site-header .tg-link::before,.site-header .wa-link::before{
    content:"";width:18px;height:18px;background:currentColor;display:block}
  .site-header .tg-link::before{
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.9 4.3 18.7 19.4c-.2 1-.9 1.3-1.8.8l-4.9-3.6-2.4 2.3c-.3.3-.5.5-1 .5l.4-5 9.1-8.2c.4-.4-.1-.6-.6-.2L6.3 13.1 1.5 11.6c-1-.3-1-1 .2-1.5l19-7.3c.9-.3 1.6.2 1.2 1.5z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M21.9 4.3 18.7 19.4c-.2 1-.9 1.3-1.8.8l-4.9-3.6-2.4 2.3c-.3.3-.5.5-1 .5l.4-5 9.1-8.2c.4-.4-.1-.6-.6-.2L6.3 13.1 1.5 11.6c-1-.3-1-1 .2-1.5l19-7.3c.9-.3 1.6.2 1.2 1.5z'/%3E%3C/svg%3E") center/contain no-repeat}
  .site-header .wa-link::before{
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15L2 22l5.1-1.3A10 10 0 1 0 12 2Zm5.6 14.2c-.2.6-1.2 1.2-1.7 1.2-.4 0-1 .1-3.2-.9-2.7-1.2-4.4-4-4.5-4.2-.1-.2-1-1.4-1-2.6s.6-1.8.9-2c.2-.3.5-.3.7-.3h.5c.2 0 .4 0 .6.5l.8 2c.1.2.1.4 0 .6l-.4.5c-.1.2-.3.3-.1.6.2.3.8 1.3 1.7 2.1 1.2 1 2.1 1.4 2.4 1.5.2.1.4.1.6-.1l.7-.9c.2-.2.4-.2.6-.1l2 1c.2.1.4.2.4.3.1.2.1.7-.1 1.3Z'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15L2 22l5.1-1.3A10 10 0 1 0 12 2Zm5.6 14.2c-.2.6-1.2 1.2-1.7 1.2-.4 0-1 .1-3.2-.9-2.7-1.2-4.4-4-4.5-4.2-.1-.2-1-1.4-1-2.6s.6-1.8.9-2c.2-.3.5-.3.7-.3h.5c.2 0 .4 0 .6.5l.8 2c.1.2.1.4 0 .6l-.4.5c-.1.2-.3.3-.1.6.2.3.8 1.3 1.7 2.1 1.2 1 2.1 1.4 2.4 1.5.2.1.4.1.6-.1l.7-.9c.2-.2.4-.2.6-.1l2 1c.2.1.4.2.4.3.1.2.1.7-.1 1.3Z'/%3E%3C/svg%3E") center/contain no-repeat}
  .site-header .nav-desktop{flex-wrap:nowrap;overflow:hidden}
  .site-header .nav-desktop > *{white-space:nowrap}
}

/* 🔴 27.08, замер по трём ширинам. На телефоне выходило 30 знаков в строке — мало,
   глаз всё время скачет на новую строку. Комфортная плотность 40–45.
   Кегль опускаем до 17px (это НИЖНЯЯ граница канона — мельче нельзя, аудитория 35–54)
   и подрезаем боковые отступы: вместе дают ~39 знаков.
   знаков в строке на телефоне */
@media (max-width:479px){
  .prose p,.prose li{font-size:17px;line-height:1.62}
  .wrap{padding-left:16px;padding-right:16px}
  .korotko{font-size:17px}
}
/* на планшете заголовок в 50px съедал первый экран — соразмеряем с шириной */
@media (min-width:480px) and (max-width:1023px){
  h1{font-size:clamp(31px,3vw + 14px,42px)}
}

/* Катя в соцсетях (главная). Список строк, а не карточки: сетка одинаковых плиток
   с тенью и рамкой — P1-тэлл из DESIGN-SYSTEM §7. Тап-цель не ниже 56px. */
.social-list{list-style:none;margin:0;padding:0}
.social-list li{border-bottom:1px solid var(--line)}
.social-list a{display:block;padding:var(--s-4) 0;min-height:56px;color:var(--ink);text-decoration:none}
.social-list .t{display:block;font:600 19px/1.3 var(--serif)}
.social-list .meta{display:block;margin-top:2px;color:var(--ink-soft);font-size:15px;line-height:1.5}
.social-list a:hover .t{color:var(--clay)}
@media (min-width:760px){
  .social-list{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--s-6)}
  .social-list .meta{max-width:46ch}
}

/* ===== 15.09.2026 — UX-правки по замерам CDP 390×844 ============================ */

/* 1. Липкая шапка на телефоне была 159px — 19% экрана на КАЖДОЙ странице, потому что
   строка поиска переносилась во вторую строку. Поле переезжает в шторку меню
   (скрипт в chrome.ts), шапка возвращается к одной строке ~56px.
   Замер до: headerH 159, h1 главной на 239px. */
@media (max-width:900px){
  .site-header .site-search-wrap{display:none}
  .site-header .row{padding-bottom:0;min-height:56px}
  .site-header{min-height:56px}
}
@media (max-width:560px){
  /* Считано на 390px: контент 358 = бренд 130 + зазор 6 + правая группа 216
     (44 Telegram + 44 WhatsApp + 78 Max + 44 бургер + три зазора по 2).
     Без этого ряд не влезал и шапка снова разъезжалась на две строки (95px). */
  .site-header .brand{font-size:17px;margin-right:0}
  .site-header .hdr-right{gap:2px}
  .site-header .hdr-cta{padding:0 8px}
}

/* Поиск внутри шторки: полноценное поле над списком разделов */
.sheet .site-search-wrap{display:block;flex:none;width:auto;order:0;
  margin:0;padding:var(--s-3) 20px;background:var(--paper-tint);
  border-bottom:1px solid var(--line)}
.sheet #site-search{min-height:44px;font-size:16px}
.sheet #site-search-results{position:static;width:auto;border:0;border-radius:0;
  box-shadow:none;max-height:none;margin-top:var(--s-2);background:transparent}

/* 2. Тап-цели шапки были 38–40px при норме 44: это самый частый путь к Кате.
   Замер до: .hdr-cta 86×38, .tg-link 38×40, .wa-link 38×40. */
@media (max-width:900px){
  .site-header .hdr-right .btn{height:44px}
  .site-header .tg-link,.site-header .wa-link{width:44px;height:44px}
  .site-header .burger{width:44px;height:44px}
}

/* 3. /club/: карточка фактов (513px на телефоне) стояла ПЕРЕД кнопками, и «Написать
   Кате» уезжало на 1216px — полторы прокрутки. Порядок на телефоне: заголовок,
   объяснение, кнопка, подпись про Max, и только потом факты.
   Разметку не трогаем: на десктопе факты остаются на прежнем месте. */
@media (max-width:759px){
  .hero-copy:has(.hero-facts){display:flex;flex-direction:column}
  .hero-copy:has(.hero-facts) .btn-row{order:1;margin-top:var(--s-5)}
  .hero-copy:has(.hero-facts) > .meta{order:2}
  .hero-copy:has(.hero-facts) .hero-facts{order:3;margin-top:var(--s-6);
    padding-top:var(--s-5);border-top:1px solid var(--line)}
}

/* На 375px (iPhone SE/8) ряд всё ещё не влезал и шапка снова становилась 95px.
   Высоту касания 44 держим, ужимаем ШИРИНУ иконок и логотипа. */
@media (max-width:400px){
  .site-header .brand{font-size:16px}
  .site-header .tg-link,.site-header .wa-link,.site-header .burger{width:40px}
  .site-header .hdr-cta{padding:0 6px}
}
@media (max-width:370px){
  .site-header .brand{font-size:15px}
  .site-header .hdr-right{gap:0}
  .site-header .row{gap:4px}
}

/* Обложки хабов и страниц приходят без width/height, и браузеру нечего резервировать:
   [ИЗМЕРЕНО 15.09.2026, CDP 390×844] CLS 0.145 на /roditelyam/. Все файлы в
   /media/cover одного размера 800×476 — задаём это соотношение по умолчанию. */
img.cover:not([width]){aspect-ratio:800/476;object-fit:cover}