/* site.css — общий каркас всех страниц цикла (токены + шапка + футер + #swap).
   Единый источник правды: шапка/футер пиксель-идентичны везде → при бесшовной подмене
   контента (#swap) каркас не дёргается. Контентные стили — инлайн в каждой странице. */
:root{
  --bg-page:#F4EEE2;--bg-surface:#FFFCF6;--bg-subtle:#EFE8DA;--bg-sunken:#EAE1D1;
  --text-strong:#211C16;--text-body:#4A443B;--text-muted:#685F52;
  --brand:#534AB7;--brand-deep:#3A337F;--brand-bright:#6E63E8;--brand-tint:#ECEAFB;--brand-tint-2:#DEDAF6;--pink:#BE185D;
  --dark:#211C2E;--success:#1B7A53;--success-bg:#E6F2EA;--warn:#8A5509;--warn-bg:#FBF1DD;--danger:#B23A2B;--danger-bg:#F8EBE9;
  --border-hair:rgba(33,28,22,.09);--border-soft:rgba(33,28,22,.16);--border-brand:rgba(83,74,183,.22);
  --r-sm:10px;--r-md:14px;--r-lg:20px;--r-xl:28px;--r-pill:999px;
  --shadow-sm:0 1px 2px rgba(33,28,22,.04),0 6px 18px rgba(33,28,22,.05);
  --shadow-md:0 4px 10px rgba(33,28,22,.05),0 16px 36px rgba(33,28,22,.08);
  --shadow-lg:0 10px 24px rgba(33,28,22,.07),0 30px 64px rgba(33,28,22,.13);
  --shadow-brand:0 10px 26px rgba(83,74,183,.26);--shadow-brand-h:0 16px 36px rgba(83,74,183,.36);--shadow-dark:0 16px 40px -12px rgba(0,0,0,.5);
  --grad-btn:linear-gradient(180deg,#6157C9,#534AB7 55%,#4A41A8);
  --grad-hero:radial-gradient(120% 130% at 12% 0%,#6E63E8 0%,#534AB7 45%,#352E78 100%);
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Manrope',-apple-system,Segoe UI,sans-serif;
  --body-f:'Inter',-apple-system,Segoe UI,sans-serif;
  --mono:ui-monospace,'JetBrains Mono',Consolas,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
/* overflow-x:clip (не hidden!) — hidden делает body скролл-контейнером и ломает position:sticky
   (шапка + фильтр статей не липли по всему сайту). clip обрезает так же, но sticky работает. */
html{scroll-behavior:smooth;overflow-x:clip}
body{margin:0;overflow-x:clip;background:var(--bg-page);color:var(--text-body);font-family:var(--body-f);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:var(--brand-deep);text-decoration:none}
button{font-family:inherit;cursor:pointer}
.ti{font-style:normal;line-height:1;vertical-align:-.1em;display:inline-block;width:1em;height:1em;text-align:center;flex:none}
:focus-visible{outline:2.5px solid var(--brand);outline-offset:3px;border-radius:5px}
.container{width:100%;max-width:1140px;margin:0 auto;padding:0 26px}
.skip{position:absolute;left:0;top:-50px;background:var(--brand);color:#fff;padding:10px 18px;border-radius:0 0 12px 0;z-index:200;transition:top .15s}
.skip:focus{top:0}

/* шапка */
.hdr{position:sticky;top:0;z-index:50;border-bottom:1px solid transparent;transition:background .3s,border-color .3s,box-shadow .3s}
.hdr.scrolled{background:color-mix(in srgb,var(--bg-page) 86%,transparent);backdrop-filter:blur(12px);border-color:var(--border-hair);box-shadow:var(--shadow-sm)}
.hdr-in{position:relative;display:flex;align-items:center;justify-content:space-between;height:68px;gap:16px}
.navtog{display:none;align-items:center;justify-content:center;width:44px;height:44px;flex:none;background:var(--bg-surface);border:1px solid var(--border-soft);border-radius:var(--r-md);color:var(--text-strong);font-size:21px;box-shadow:var(--shadow-sm)}
.logo{font-family:var(--sans);font-weight:800;font-size:21px;letter-spacing:-.01em;color:var(--text-strong);flex:none;display:inline-flex;align-items:center;gap:.4em}
.logo:hover{text-decoration:none}
.logo i,.logo .lb{font-style:italic;color:var(--brand)}
.logo::before{content:"";width:1.16em;height:1.16em;flex:none;background:url("/logo-mark.svg") center/contain no-repeat}
.topnav{display:inline-flex;gap:3px;background:var(--bg-surface);border:1px solid var(--border-soft);border-radius:var(--r-pill);padding:4px;box-shadow:var(--shadow-sm)}
.topnav__i{font-family:var(--sans);font-weight:600;font-size:14px;color:var(--text-muted);padding:8px 17px;border-radius:var(--r-pill);transition:background .25s var(--ease),color .25s;display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.topnav__i:hover{color:var(--text-strong);text-decoration:none}
.topnav__i.active{background:var(--brand);color:#fff;box-shadow:0 4px 12px rgba(83,74,183,.32)}
.topnav__i.active:hover{color:#fff}
.topnav__i--soon i{font-style:normal;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;background:var(--bg-sunken);color:var(--text-muted);padding:2px 7px;border-radius:var(--r-pill)}
.topnav__i--soon.active i{background:rgba(255,255,255,.22);color:#fff}
.btn-cta{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-weight:700;font-size:14px;color:#fff;border:none;padding:11px 20px;border-radius:var(--r-md);background:var(--grad-btn);box-shadow:var(--shadow-brand);transition:transform .25s var(--ease),box-shadow .25s;white-space:nowrap;flex:none}
.btn-cta:hover{transform:translateY(-2px);box-shadow:var(--shadow-brand-h);text-decoration:none}
@media(max-width:880px){
  .navtog{display:inline-flex}
  .btn-cta{display:none}
  .topnav{display:none;position:absolute;top:calc(100% + 8px);right:0;left:0;flex-direction:column;gap:5px;padding:10px;border-radius:var(--r-lg);box-shadow:var(--shadow-lg);background:var(--bg-surface)}
  .hdr.nav-open .topnav{display:flex;animation:navdrop .2s var(--ease)}
  .topnav__i{justify-content:flex-start;font-size:15px;padding:12px 16px}
  .topnav__i--soon{justify-content:space-between}
}
@keyframes navdrop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* область бесшовной подмены — заметный плавный кросс-фейд со сдвигом */
#swap{transition:opacity .26s var(--ease),transform .26s var(--ease);will-change:opacity,transform}
#swap.is-leaving{opacity:0;transform:translateY(14px)}
@media(prefers-reduced-motion:reduce){.phero-blob{animation:none!important}#swap,#swap.is-leaving{transition:none;transform:none}html{scroll-behavior:auto}}

/* мобильная фикс-CTA (persistent, вне #swap → стили обязательно в site.css) */
.mcta{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 16px;background:color-mix(in srgb,var(--bg-page) 92%,transparent);backdrop-filter:blur(12px);border-top:1px solid var(--border-hair);box-shadow:0 -4px 20px rgba(33,28,22,.08)}
.mcta .btn-cta{display:inline-flex;width:100%;justify-content:center;font-size:15px;padding:14px}
@media(max-width:640px){.mcta{display:block}body{padding-bottom:74px}body.cookie-open .mcta{display:none}}
/* пока открыт fixed cookie-баннер — резервируем под него место, иначе футер недосягаем */
body.cookie-open{padding-bottom:200px}

/* футер */
footer{border-top:1px solid var(--border-hair)}
.foot{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;padding:30px 26px;max-width:1140px;margin:0 auto}
.foot .logo{font-size:17px}
.foot .links{display:flex;flex-wrap:wrap;gap:4px 15px} /* без flex ссылки слитно и строка неразрывна — футер клипуется на ≤345px */
.foot .links a{font-size:12px;color:var(--text-muted)}
.foot .links a:hover{color:var(--brand)}
.foot .mut{font-size:12px;color:var(--text-muted)}

/* появление блоков (reveal) — единообразно на всех страницах */
[data-reveal]{transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js-reveal [data-reveal]{opacity:0;transform:translateY(28px)}
[data-reveal].in{opacity:1!important;transform:none!important}
@media(prefers-reduced-motion:reduce){.js-reveal [data-reveal]{opacity:1;transform:none}}

/* баннер согласия на cookie (статические страницы) */
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:80;padding:14px 16px;background:var(--bg-surface);border-top:1px solid var(--border-hair);box-shadow:0 -8px 30px rgba(33,28,22,.10)}
.cookie-banner__in{max-width:1140px;margin:0 auto;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.cookie-banner__txt{margin:0;flex:1;min-width:240px;font-family:var(--sans);font-size:13.5px;line-height:1.5;color:var(--text-body)}
.cookie-banner__txt a{color:var(--brand-deep);text-decoration:underline}
.cookie-banner__btns{display:flex;gap:10px;flex:none}
.cookie-banner__b{font-family:var(--sans);font-weight:700;font-size:13px;padding:10px 18px;border-radius:12px;cursor:pointer;border:1px solid transparent;transition:transform .15s}
.cookie-banner__b--ghost{background:var(--bg-surface);border-color:var(--border-soft);color:var(--text-strong)}
.cookie-banner__b--accent{background:var(--grad-btn);color:#fff;box-shadow:var(--shadow-brand)}
.cookie-banner__b--accent:hover{transform:translateY(-1px)}
@media(max-width:640px){.cookie-banner__btns{width:100%}.cookie-banner__b{flex:1}}


/* Бар «С возвращением» для купивших (вставляет site.js initWelcome) */
.wb{background:linear-gradient(90deg,var(--brand-tint),var(--brand-tint-2));border-bottom:1px solid var(--border-brand)}
.wb__in{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;padding-top:12px;padding-bottom:12px;font-size:14px;color:var(--text-strong)}
.wb__btn{flex:none;display:inline-flex;align-items:center;gap:6px;background:var(--grad-btn);color:#fff;border-radius:999px;padding:8px 18px;font-weight:700;font-size:13.5px;text-decoration:none;box-shadow:var(--shadow-brand)}
.wb__btn:hover{transform:translateY(-1px)}
.wb__link{color:var(--brand);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.wb__link:hover{opacity:.82}