/* Сайт автора. Как сайт хорошего издательства: спокойная сетка, умеренная типографика, плотные разделы без пустот.
   Цвета: бумага и графит; акценты (a1 — глубокий, a2 — светлый) — только тонкие линии, подложки обложек, метки. Без градиентов */
:root{
  --paper:#f6f6f4; --paper-2:#ecece8; --ink:#141517; --ink-2:#5c6167; --ink-3:#979ca1; --line:rgba(20,21,23,.12);
  --a1:#8a9aa6; --a2:#d3dbe0;           /* акценты: меняются в админке → «Цвета» */
  --tint:color-mix(in srgb,var(--a2) 45%,var(--paper));
  --f-display:"Oranienbaum","Times New Roman",serif;
  --f-italic:"Cormorant","Georgia",serif;
  --f-body:"Golos Text",system-ui,-apple-system,"Segoe UI",sans-serif;
  --wrap:1180px;
  --gut:max(20px,env(safe-area-inset-left,0px));
  --gut-r:max(20px,env(safe-area-inset-right,0px));
  --head:68px;
  --sec:clamp(48px,6vw,84px);
  --mist-blend:multiply; --mist-o:1;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#111214; --paper-2:#1a1b1e; --ink:#eeeeec; --ink-2:#a3a7ac; --ink-3:#6e7277; --line:rgba(238,238,236,.13);
  --tint:color-mix(in srgb,var(--a1) 22%,var(--paper)); --mist-blend:normal; --mist-o:.75; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#111214; --paper-2:#1a1b1e; --ink:#eeeeec; --ink-2:#a3a7ac; --ink-3:#6e7277; --line:rgba(238,238,236,.13);
  --tint:color-mix(in srgb,var(--a1) 22%,var(--paper)); --mist-blend:normal; --mist-o:.75; color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.65 var(--f-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--a2);color:#141517}
a{color:inherit;text-decoration:none}
img{max-width:100%}
:focus-visible{outline:1.5px solid var(--ink);outline-offset:3px}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--gut);padding-right:var(--gut-r)}
section,.run{scroll-margin-top:var(--head)}
#top:empty{min-height:70vh}

/* типографика: одна шкала */
h1,h2,h3{font-family:var(--f-display);font-weight:400;text-transform:uppercase;letter-spacing:.02em;line-height:1.02;margin:0;text-wrap:balance}
.it,h1 .it,h2 .it,h3 .it{font-family:var(--f-italic);font-style:italic;font-weight:400;text-transform:none;letter-spacing:0}
.lbl{display:flex;align-items:center;gap:12px;font:500 11px/1.4 var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.lbl::before{content:"";width:22px;height:1px;background:currentColor;opacity:.6;flex:none}
.prose p{margin:0 0 1em;max-width:38em;color:var(--ink-2)}
.prose p:last-child{margin-bottom:0}

/* кнопки и ссылки */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 26px;font:500 11px/1 var(--f-body);letter-spacing:.18em;text-transform:uppercase;border:1px solid var(--ink);transition:background .25s,color .25s,border-color .25s;white-space:nowrap}
.btn-dark{background:var(--ink);color:var(--paper)}
.btn-dark:hover{background:transparent;color:var(--ink)}
.btn-line{height:40px;padding:0 16px;border-color:var(--line)}
.btn-line:hover{border-color:var(--ink)}
.btn-light{border-color:var(--paper);color:var(--paper)}
.btn-light:hover{background:var(--paper);color:var(--ink)}
.lnk{position:relative;display:inline-flex;gap:8px;align-items:center;font:500 11px/1 var(--f-body);letter-spacing:.18em;text-transform:uppercase;padding:6px 0}
.lnk::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform-origin:left;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.lnk:hover::after{transform:scaleX(.4)}
.arrow{font-family:var(--f-body);letter-spacing:0}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px}

/* шапка */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:21;background:var(--paper)}
.head-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:var(--head)}
.nav{display:flex;gap:28px}
.nav a,.mnav a:not(.btn){position:relative;font:500 11px/1 var(--f-body);letter-spacing:.18em;text-transform:uppercase;padding:6px 0}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .35s}
.nav a:hover::after{transform:scaleX(1)}
.tg-ico{display:inline-flex;align-items:center;gap:10px}
.nav .tg-ico{padding:4px 0}
.nav .tg-ico::after{display:none}
.tg-ico svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round;transition:transform .3s}
.tg-ico:hover svg{transform:translate(2px,-2px)}
.mnav .tg-ico svg{width:22px;height:22px}
.logo{display:inline-flex;align-items:center;font:400 22px/1 var(--f-display);letter-spacing:.26em;text-transform:uppercase;white-space:nowrap}
.top-r{justify-self:end;display:flex;align-items:center;gap:18px}
.menu-btn{display:none;align-items:center;background:none;border:0;padding:8px 0;color:var(--ink);cursor:pointer;font:500 11px/1 var(--f-body);letter-spacing:.18em;text-transform:uppercase}
.menu-btn span{grid-column:1;justify-self:end;display:block;width:20px;height:1px;background:currentColor;transition:transform .3s,width .3s}
.menu-btn span+span{width:13px}
.menu-btn em{grid-column:2;grid-row:1/3;font-style:normal}
.menu-btn[aria-expanded="true"] span:first-child{transform:translateY(3px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span+span{width:20px;transform:translateY(-3px) rotate(-45deg)}
.mnav{border-top:1px solid var(--line);background:var(--paper)}
.mnav .wrap{display:grid;gap:2px;padding-block:16px 24px}
.mnav a:not(.btn){font:400 26px/1.2 var(--f-display);letter-spacing:.04em;padding:6px 0}
.mnav .btn{justify-self:start;margin-top:12px}

/* обложки: настоящие или строгие типографские */
.cover{position:relative;aspect-ratio:2/3;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-between;text-align:center;padding:12% 10% 10%;overflow:hidden;
  background:#1a1b1e;color:#f1f1ef;box-shadow:0 1px 2px rgba(0,0,0,.1),0 14px 28px -14px rgba(20,21,23,.45)}
.cover::before{content:"";position:absolute;inset:4.5%;border:1px solid currentColor;opacity:.25;pointer-events:none}
.cover::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.25) 0,rgba(255,255,255,.08) 1.4%,transparent 5%)}
.cover .cv-a{font:500 8px/1.3 var(--f-body);letter-spacing:.3em;text-transform:uppercase;opacity:.85}
.cover .cv-t{font:400 clamp(18px,1.9vw,26px)/.98 var(--f-display);text-transform:uppercase;letter-spacing:.03em;display:grid;gap:.15em;justify-items:center}
.cover .cv-t i{font:italic 400 .85em/1.05 var(--f-italic);text-transform:none;letter-spacing:0}
.cover .cv-s{font:italic 400 12px/1 var(--f-italic);opacity:.7}
.cover.c2{background:#e6e6e2;color:#1a1b1e}
.cover.c3{background:#3a3d42;color:#f1f1ef}
.cover.c4{background:#25272b;color:#f1f1ef}
.cover-img{padding:0;background:var(--paper-2)}
.cover-img::before{display:none}
.cover-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* первый экран: слева заголовок и кнопка; справа медведь из тумана — картинка растворяется в фоне страницы, без краёв */
.hero{position:relative;overflow:hidden}
.hero-in{position:relative;display:grid;  /* без z-index: иначе картинка не смешивается с фоном (белый прямоугольник) */
  padding-block:clamp(56px,7vw,112px)}
.hero.has-art .hero-in{padding-block:clamp(16px,2vw,32px)}
.hero+.sec{border-top:0;padding-top:clamp(16px,2vw,32px)}
.hero-txt{display:grid;gap:22px;justify-items:start;max-width:560px}
.hero h1{font-size:clamp(34px,4.2vw,58px)}
.hero h1 .ln{display:block}
.hero h1 .it{white-space:nowrap}
.lead{margin:0;max-width:30em;font-size:17px;line-height:1.6;color:var(--ink-2)}
.hero.has-art .hero-in{grid-template-columns:minmax(0,540px) minmax(0,500px);justify-content:center;align-items:center;column-gap:0}
.hero.has-art .hero-mist{margin-left:-48px}
.hero.has-art .hero-txt{margin-left:clamp(0px,3vw,48px)}  /* у медведя справа туман — сдвиг текста уравновешивает композицию по центру */  /* левый край картинки — туман: медведь чуть заходит под текст, без провала между ними */
.hero-mist{position:relative;width:100%;aspect-ratio:1/1;margin:0;pointer-events:none;mix-blend-mode:var(--mist-blend);opacity:var(--mist-o)}
.hero-mist img{width:100%;height:100%;object-fit:cover;object-position:80% 42%;display:block}
.hero-mist img.sm{display:none}

/* бегущая строка */
.run{border-block:1px solid var(--line);overflow:hidden;white-space:nowrap;padding-block:14px}
.run-in{display:inline-flex;align-items:center;animation:run 60s linear infinite}
.run span{font:400 16px/1 var(--f-display);letter-spacing:.2em;text-transform:uppercase;padding:0 24px}
.run span.it{font-size:19px;letter-spacing:0;text-transform:none}
.run b{font-weight:400;font-size:9px;color:var(--ink-3)}
@keyframes run{to{transform:translateX(-50%)}}

/* разделы */
.sec{padding-block:var(--sec);border-top:1px solid var(--line)}
.sec-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px 24px;flex-wrap:wrap;margin-bottom:clamp(24px,3vw,40px)}
.sec-h h2,.series-h h2,.about h2,.text-b h2{font-size:clamp(28px,2.8vw,40px)}
.sec-h .it{font-size:20px;color:var(--ink-2)}

/* книга крупно */
.feat{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.feat-cover{display:block;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.feat-cover:hover{transform:translateY(-6px)}
.feat-txt{display:grid;gap:18px;justify-items:start}
.feat-t{font-size:clamp(30px,3.2vw,46px)}
.ann{margin:0;max-width:34em;font:italic 400 clamp(19px,1.7vw,23px)/1.4 var(--f-italic)}
.meta-line{display:flex;flex-wrap:wrap;gap:4px 10px;font:500 11px/1.4 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.meta-line i{font-style:normal;color:var(--ink-3)}
.bar{display:block;height:2px;background:var(--line)}
.bar i{display:block;height:100%;background:var(--ink)}

/* цикл и подборки */
.series-h{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.8fr);gap:16px clamp(24px,5vw,72px);align-items:end;margin-bottom:clamp(24px,3vw,40px)}
.series-h>div{display:grid;gap:14px;justify-items:start}
.series-h p{margin:0;color:var(--ink-2);max-width:30em}
.num{display:flex;align-items:baseline;gap:10px;font:500 10px/1 var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.num b{font:400 22px/.8 var(--f-display);letter-spacing:0;color:var(--ink)}
.start{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.6vw,36px)}
.start.n3{grid-template-columns:repeat(3,minmax(0,1fr))}
.start.n2{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px}
.start.n1{grid-template-columns:minmax(0,360px)}
.card{display:grid;gap:14px;align-content:start}
.plinth{background:var(--tint);padding:12% 18% 14%;transition:background .4s}
.plinth .cover{transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.card:hover .plinth .cover{transform:translateY(-6px)}
.card-txt{display:grid;gap:6px;justify-items:start}
.mood{font:italic 400 18px/1.2 var(--f-italic);color:var(--ink-2)}
.card h3{font-size:21px;line-height:1.08}
.card p{margin:0;color:var(--ink-2);font-size:14px;line-height:1.55}
.card .lnk{margin-top:4px}
.grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:32px clamp(14px,2vw,28px)}
.card.sm{gap:10px}
.card.sm .plinth{padding:10% 14% 12%}
.card.sm h3{font-size:17px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:-8px 0 28px}
.chip{border:1px solid var(--line);background:transparent;color:var(--ink-2);padding:8px 14px;font:500 11px/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:all .2s}
.chip:hover{color:var(--ink);border-color:var(--ink-2)}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.card[hidden]{display:none}

/* цитата */
.quote{border-top:1px solid var(--line)}
.q-in{display:grid;justify-items:center;text-align:center;padding-block:var(--sec);gap:6px}
.q-mark{display:block;font:400 72px/1 var(--f-display);color:var(--a1);margin-bottom:-.35em}
.quote blockquote{margin:0;max-width:26em;font:italic 400 clamp(22px,2.4vw,32px)/1.3 var(--f-italic);text-wrap:balance}
.q-foot{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 20px;margin-top:18px}
.q-foot cite{font:500 11px/1.4 var(--f-body);letter-spacing:.18em;text-transform:uppercase;font-style:normal;color:var(--ink-2)}

/* об авторе: небольшое круглое фото рядом с текстом */
.about{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:start;max-width:960px}
.ava{width:clamp(120px,14vw,168px);aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--tint);display:grid;place-items:center}
.ava img{width:100%;height:100%;object-fit:cover;display:block}
.ava span{font:italic 400 44px/1 var(--f-italic);color:var(--ink-2)}
.about-txt{display:grid;gap:16px;justify-items:start}
.facts{display:flex;flex-wrap:wrap;gap:16px 40px;padding-top:16px;border-top:1px solid var(--line);width:100%}
.facts div{display:grid;gap:4px}
.facts b{font:400 32px/.9 var(--f-display);font-variant-numeric:tabular-nums}
.facts span{font:500 10px/1.3 var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}

/* текстовый блок */
.text-b .wrap{display:grid;gap:16px;justify-items:start}

/* подписка */
.tg{background:var(--ink);color:var(--paper)}
.tg-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:end;padding-block:clamp(44px,5vw,72px)}
.tg-in>div{display:grid;gap:14px;justify-items:start}
.tg h2{font-size:clamp(28px,3vw,42px)}
.tg h2 .it{color:var(--a2)}
.tg .lbl{color:color-mix(in srgb,var(--paper) 62%,transparent)}
.tg p{margin:0;max-width:34em;color:color-mix(in srgb,var(--paper) 70%,transparent)}

/* подписка с подарком — внизу каждой страницы */
.sub{border-top:1px solid var(--line);background:var(--tint)}
.sub-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px clamp(32px,5vw,80px);align-items:center;padding-block:clamp(44px,5vw,72px)}
.sub-txt{display:grid;gap:14px;justify-items:start}
.sub-txt h2{font-size:clamp(26px,2.6vw,36px)}
.sub-txt p{margin:0;color:var(--ink-2);max-width:32em}
.sub-f{display:grid;gap:12px}
.sub-row{display:flex;gap:10px}
.sub-row input{flex:1;min-width:0;height:48px;border:1px solid var(--line);background:var(--paper);color:var(--ink);padding:0 16px;font:400 16px var(--f-body);border-radius:0}
.sub-row input:focus{outline:none;border-color:var(--ink)}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:13px;line-height:1.45;color:var(--ink-2)}
.consent input{margin:2px 0 0;width:16px;height:16px;accent-color:var(--ink);flex:none}
.consent a{text-decoration:underline;text-underline-offset:2px}
.sub-msg{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:14px;font-size:15px}
.sub-msg.bad{color:#a2333b}
.sub-row[hidden],.consent[hidden]{display:none}

/* подвал — одна строка */
.foot{border-top:1px solid var(--line)}
.foot-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 28px;padding-block:24px;font-size:13px;color:var(--ink-2)}
.foot-row nav{display:flex;flex-wrap:wrap;gap:6px 22px}
.foot-row nav a:hover{color:var(--ink)}
.foot-row .lnk{color:var(--ink)}

/* ---------- страница книги: как карточка книги у издательства ---------- */
.bk-top .wrap{padding-block:20px var(--sec)}
.crumbs{display:flex;flex-wrap:wrap;gap:6px 10px;font-size:13px;color:var(--ink-3);margin-bottom:clamp(20px,3vw,36px)}
.crumbs a{color:var(--ink-2)}
.crumbs a:hover{color:var(--ink)}
.bk-in{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:start}
.bk-cover{position:sticky;top:calc(var(--head) + 24px)}
.bk-txt{display:grid;gap:18px;justify-items:start;padding-top:8px}
.bk-t{font-size:clamp(34px,3.6vw,52px)}
.bk-author{margin-top:-8px;display:flex;flex-wrap:wrap;gap:4px 10px;font:500 11px/1.4 var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.bk-author i{font-style:normal;color:var(--ink-3)}
.bk-hook{margin:0;max-width:28em;font:italic 400 clamp(20px,1.8vw,24px)/1.4 var(--f-italic)}
.buy{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:4px 0 0;padding:0}
.tags li{background:var(--tint);padding:6px 11px;font-size:12px;line-height:1.2;color:var(--ink-2)}
.bk-sec{border-top:1px solid var(--line);padding-block:var(--sec)}
.bk-two{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:16px clamp(24px,5vw,72px);align-items:start}
.bk-h{font-size:clamp(22px,2vw,28px)}
.bk-txt .bk-ann{display:grid;gap:12px;margin-top:14px;padding-top:22px;border-top:1px solid var(--line);width:100%}
.bk-ann p{margin:0;font-size:16px;line-height:1.7;max-width:40em}
.excerpt{position:relative;max-height:24em;overflow:hidden;margin-bottom:22px}
.excerpt::after{content:"";position:absolute;left:0;right:0;bottom:0;height:7em;background:linear-gradient(180deg,transparent,var(--paper))}
.excerpt p{margin:0 0 1em;font-size:17px;line-height:1.75;max-width:40em}
.qs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:14px}
.qc{margin:0;padding:clamp(20px,2.4vw,28px);background:var(--paper-2);display:grid;gap:14px;align-content:space-between}
.qc blockquote{margin:0;font:italic 400 21px/1.4 var(--f-italic)}
.qc figcaption{font:500 10px/1.4 var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.collage .col-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:clamp(48px,5vw,76px);grid-auto-flow:dense;gap:10px}
.collage figure{margin:0;overflow:hidden;background:var(--paper-2);grid-column:span 3;grid-row:span 3}
.collage img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.collage figure:hover img{transform:scale(1.04)}
.collage.n1 figure{grid-column:span 12;grid-row:span 6}
.collage.n2 figure{grid-column:span 6;grid-row:span 6}
.collage.n3 figure:nth-child(1){grid-column:span 8;grid-row:span 6}
.collage.n3 figure:nth-child(n+2){grid-column:span 4}
.collage.n4 figure:nth-child(1){grid-column:span 6;grid-row:span 6}
.collage.n4 figure:nth-child(2){grid-column:span 6}
.collage.n5 figure:nth-child(1),.collage.n6 figure:nth-child(1){grid-column:span 6;grid-row:span 6}
.collage.n6 figure:nth-child(6){grid-column:span 12;grid-row:span 4}
.mini{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,170px));gap:28px clamp(20px,3vw,40px)}
.mini-b{display:grid;gap:8px;align-content:start}
.mini-c{transition:transform .4s}
.mini-b:hover .mini-c{transform:translateY(-4px)}
.mini-b.here{pointer-events:none}
.mini-b.here{opacity:.5}
.mini-n{font:500 10px/1.3 var(--f-body);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.mini-t{font:400 16px/1.1 var(--f-display);text-transform:uppercase}
.mini-t .it{text-transform:none}
.bk-final{background:var(--ink);color:var(--paper)}
.bk-final-in{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:20px 32px;padding-block:clamp(32px,4vw,52px)}
.bk-final-in>div{display:grid;gap:10px}
.bk-final h2{font-size:clamp(24px,2.4vw,34px)}
.bk-final .lbl{color:color-mix(in srgb,var(--paper) 62%,transparent)}
.bk-final .btn-dark{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.bk-final .btn-dark:hover{background:transparent;color:var(--paper)}
.bk-final .btn-line{border-color:color-mix(in srgb,var(--paper) 30%,transparent);color:var(--paper)}
.bk-final .btn-line:hover{border-color:var(--paper)}
.bk-sticky{display:none}

/* планшет */
@media (max-width:980px){
  :root{--head:58px}
  .nav{display:none}
  .head-in{grid-template-columns:auto 1fr}
  .logo{font-size:19px;letter-spacing:.2em}
  .top-r .btn-line{display:none}
  .menu-btn{display:inline-grid;grid-template-columns:auto auto;align-items:center;column-gap:12px;row-gap:5px}
  .hero-in{grid-template-columns:minmax(0,1fr);gap:24px}
  .feat{grid-template-columns:minmax(0,200px) minmax(0,1fr)}
  .series-h{grid-template-columns:minmax(0,1fr)}
  .start{grid-template-columns:repeat(3,minmax(0,1fr))}
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bk-in{grid-template-columns:minmax(0,260px) minmax(0,1fr)}
  .bk-two{grid-template-columns:minmax(0,1fr)}
  .tg-in,.sub-in{grid-template-columns:minmax(0,1fr)}
}
/* телефон */
@media (max-width:640px){
  .hero h1{font-size:clamp(30px,9vw,40px)}
  .hero.has-art .hero-in{grid-template-columns:minmax(0,1fr);padding-top:20px;padding-bottom:28px}
  /* на телефоне — маленький дымчатый кружок с мордой медведя над заголовком */
  .hero.has-art .hero-mist,.hero.has-art .hero-txt{margin-left:0}  /* сдвиги для компьютера на телефоне не нужны — кружок строго по центру */
  .hero-mist{order:-1;justify-self:center;width:min(50vw,190px);aspect-ratio:1/1;margin:0 0 8px;border-radius:50%;
    -webkit-mask-image:radial-gradient(circle,#000 52%,rgba(0,0,0,.5) 63%,transparent 71%);mask-image:radial-gradient(circle,#000 52%,rgba(0,0,0,.5) 63%,transparent 71%)}
  .hero-mist img{display:none}
  .hero-mist img.sm{display:block;width:100%;height:100%;object-fit:cover}
  .lead{font-size:16px}
  .sub-row{flex-direction:column}
  .feat{grid-template-columns:minmax(0,1fr)}
  .feat-cover{max-width:220px}
  .start{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin-right:calc(-1 * var(--gut-r));padding-right:var(--gut-r);scrollbar-width:none}
  .start::-webkit-scrollbar{display:none}
  .start .card{flex:0 0 62%;scroll-snap-align:start}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 14px}
  .about{grid-template-columns:minmax(0,1fr)}
  .ava{width:112px}
  .bk-in{grid-template-columns:minmax(0,1fr)}
  .bk-cover{position:static;max-width:240px;justify-self:center;width:100%}
  .bk-txt{justify-items:stretch}
  .buy .btn-dark{flex:1 1 100%}
  .collage .col-in{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:40vw}
  .collage .col-in figure{grid-column:span 1!important;grid-row:span 1!important}
  .collage .col-in figure:first-child,.collage.n3 .col-in figure:last-child,.collage.n5 .col-in figure:last-child{grid-column:span 2!important}
  .btn{height:46px;padding:0 20px}
  .is-book.cta-off .bk-sticky{position:fixed;left:0;right:0;bottom:0;z-index:15;display:flex;align-items:center;justify-content:space-between;gap:12px;background:color-mix(in srgb,var(--paper) 94%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:10px var(--gut-r) calc(10px + env(safe-area-inset-bottom,0px)) var(--gut)}
  .bk-sticky span{font:400 16px/1.1 var(--f-display);text-transform:uppercase;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .bk-sticky .it{text-transform:none}
  .bk-sticky .btn{height:42px;padding:0 16px;flex:none}
  .is-book .foot{padding-bottom:64px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}