/* home.css — стили главной (перенос layouts-web/home.html в приложение).
Токены-алиасы мокапа → --skz-* (перекрашены в theme.css). Шапка/подвал/лого/ляссе
здесь НЕ нужны — они в site-header.css + партиалах; дублирующие правила безвредны. */
:root{
--paper:var(--skz-bg); --card:var(--skz-surface); --endpaper:var(--skz-sand); --shelf:var(--skz-shelf);
--ink:var(--skz-text-light); --ink-soft:var(--skz-gray-warm);
--brass:var(--skz-gold); --brass-soft:var(--skz-light-tan); --brass-text:var(--skz-gold-hover);
--blue-core:var(--skz-coral); --blue-press:var(--skz-coral-hover); --blue-active:var(--skz-coral-active);
--line:var(--skz-line); --line-deep:var(--skz-line-deep); --line-control:var(--skz-line-control);
--shadow-mat:0 1px 0 var(--skz-line-deep),0 8px 24px rgba(35,46,71,.06);
--shadow-pop:0 24px 64px rgba(35,46,71,.16);
--serif:var(--skz-font-serif); --sans:var(--skz-font-sans);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--paper)}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.65 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
::selection{background:rgba(244,196,81,.22)}
a{color:var(--brass-text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
a,button,input,label,select,textarea{touch-action:manipulation}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--blue-core);outline-offset:2px}
h1,h2,h3{font-family:var(--serif);font-weight:800;color:var(--ink);margin:0;text-wrap:balance}
p{margin:0}
.vh{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1200px;margin:0 auto;padding:0 48px}
section{scroll-margin-top:24px}
/* типографика */
.h2{font-size:clamp(26px,2.6vw,32px);line-height:1.25}
.lead{font-size:clamp(17px,1.4vw,18px);line-height:1.6;color:var(--ink-soft)}
.small{font-size:14px;line-height:1.45;color:var(--ink-soft)}
.kick{font:700 11px/1.4 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--brass-text);margin:0 0 16px}
.cap-serif{font:italic 800 16px/1.55 var(--serif);color:var(--ink-soft)}
.q-accent{font:800 clamp(24px,2.2vw,27px)/1.35 var(--serif);color:var(--ink)}
/* кнопки */
.btn-pri{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--blue-core);color:#FFFFFF;font:600 16px/1 var(--sans);padding:17px 36px;border-radius:6px;border:0;cursor:pointer;text-decoration:none;transition:background .2s ease-out,box-shadow .2s ease-out;white-space:nowrap}
/* Состояния кнопок — ТОЛЬКО цветом (решение владельца 13.09.2026). Рельефа в
«Экслибрисе» нет: прежняя латунная кромка `inset` читалась как вдавленность.
Наведение — темнее на тон, нажатие — ещё темнее. */
.btn-pri:hover{background:var(--blue-press)}
.btn-pri:active{background:var(--blue-active)}
.btn-pri:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.btn-cream{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:#FFFFFF;color:var(--ink);font:600 16px/1 var(--sans);padding:17px 36px;border-radius:6px;border:0;cursor:pointer;text-decoration:none;transition:background .2s ease-out,box-shadow .2s ease-out;white-space:nowrap}
.btn-cream:hover{background:var(--endpaper)}
.btn-cream:active{background:var(--line)}
.btn-sec{display:inline-flex;align-items:center;justify-content:center;background:var(--card);color:var(--ink);font:500 14px/1 var(--sans);padding:12px 20px;border:1px solid var(--line-control);border-radius:6px;cursor:pointer;text-decoration:none;transition:border-color .2s ease-out}
.btn-sec:hover{border-color:var(--brass-soft)}
/* Шапка и ляссе — сквозные, целиком в site-header.css. Здесь НЕ дублируем. */
/* герой */
/* Первый экран: фото во всю высоту БЛОКА справа (full-bleed до края), текст слева.
Высота ≥901px: min-height clamp(460px, 62vh, 640px) — композиция дышит с экраном,
под hero всегда выглядывает следующая секция (фолд-тизер ~35%), потолок бережёт
высокие мониторы, а min-height (не height!) гарантирует, что выросший контент
никогда не обрежется (реш. 16.07.2026). Мобайл — по контенту. */
.hero-sec{position:relative;overflow-x:clip}
.hero{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px;align-items:stretch}
/* Компьютер: первый экран — ВЕСЬ экран (решение владельца 01.10.2026).
Плашка промокода + шапка + первый экран + тёмная полоса преимуществ ровно
заполняют окно: полоса ложится по нижнему краю, под ней ничего не торчит.
Вычитаем шапку (70) и полосу (86), а при включённой плашке ещё её 46.
Пол 460 — на низких окнах ноутбука текст не должен сжиматься под фото. */
@media (min-width:981px){
.hero{min-height:max(460px, calc(100vh - 156px));min-height:max(460px, calc(100svh - 156px))}
body:has(.skz-promobar) .hero{min-height:max(460px, calc(100vh - 202px));min-height:max(460px, calc(100svh - 202px))}
}
/* Колонка текста расширена с 5 до 6 модулей 14.09.2026: заголовок и лид стали
длиннее, в 446px самая длинная строка «своей любимой книги!» (11.38em)
помещалась бы только кеглем 39px вместо 44. */
.hero-copy{grid-column:1 / span 6;align-self:center;min-width:0;padding:48px 0;position:relative;z-index:3}
.hero h1{font-size:clamp(33px,4.4vw,56px);line-height:1.14;margin:0 0 18px}
/* H1 первого экрана — крупный регистр (17.08.2026): кегль до 48px при
интерлиньяже 1.04. Замер на боевой странице: самая длинная строка
«— главный герой» даёт 370px при 470px свободных до фотографии, так что
заголовок не наезжает на снимок ни на одной ширине от 981 до 1440. */
/* Кегль и трекинг пересчитаны под Cygre (14.09.2026): буквы шире антиквы,
строки идут в nowrap — на 4% крупнее «Ваш ребёнок —» не влезал бы в узкий
телефон. Трекинг −.03em подбирался под узкие просветы Playfair, гротеску
на таком минусе буквы слипаются. */
.hero h1.hero-title--fixed{width:max-content;max-width:none;font-family:var(--serif);font-size:clamp(30px,3.2vw,44px);line-height:1.05;letter-spacing:-.015em;font-weight:800;font-synthesis:none;text-wrap:nowrap}
.hero-title--fixed>span{display:block;white-space:nowrap}
/* На десктопе две последние строки слипаются в одну: между span'ами в
разметке стоит настоящий пробел, поэтому inline-элементы образуют
«своей любимой книги!» без всякого content в CSS. */
.hero-title--fixed>span.hero-title-join{display:inline}
/* Зачин набран мельче и приглушён: он вводит фразу, а не спорит с ней
за кегль. Трекинг положительный — на мелком кегле гротеск иначе слипается. */
.hero-title-open{font-size:.5em;line-height:1.2;letter-spacing:.04em;color:var(--ink-soft);margin:0 0 .12em}
/* Акцент курсивом-латунью; тире остаётся чернилами и закрывает первую строку
(17.08.2026 — раньше висело в начале второй, компенсация text-indent снята). */
.hero-title--fixed em{font-style:italic;color:var(--accent-text)}
/* Лид первого экрана мельче общего .lead (18/1.6) и плотнее: 16/1.5.
Решение владельца 25.08.2026. После подъёма заголовка до 42px разрыв
между ним и лидом стал слишком мал — лид спорил с заголовком за
внимание; заодно абзац стал на строку короче и кнопка поднялась выше. */
.hero .lead{margin:0 0 26px}
/* Лид hero — только ОБЕЩАНИЕ, первое предложение. Набрано чернилами, а не
приглушённым серым: это главный довод экрана, и он обязан читаться раньше
строки доверия под кнопкой (.hero-trust). */
.hero-lead{text-wrap:pretty;color:var(--ink)}
/* Строка доверия у кнопки (решение владельца 01.10.2026): рейтинг · цена «от» ·
бесплатный предпросмотр. Тише кнопки (14px, приглушённые чернила), но рейтинг
— ссылка к блоку отзывов, набран чернилами: это главный довод строки.
Звезда — латунь как декор: смысл несёт «5.0», а не цвет (канон: жёлтое на
светлом не бывает единственным носителем смысла). Пункты переносятся
целиком — разделитель уходит вместе с пунктом, а не висит в начале строки. */
.hero-trust{display:flex;flex-wrap:wrap;align-items:center;gap:2px 0;margin:14px 0 0;font:400 14px/1.45 var(--sans);color:var(--ink-soft)}
.hero-trust__rating{color:var(--ink);font-weight:600;text-decoration:none;white-space:nowrap}
.hero-trust__rating:hover{text-decoration:underline}
.hero-trust__star{color:var(--brass)}
.hero-trust > span{white-space:nowrap}
.hero-trust > .hero-trust__sep{margin:0 .45em}
/* Телефон: рейтинг — своей строкой, цена и предпросмотр — второй. Иначе ряд
ломался где придётся и точка-разделитель повисала в конце строки. */
@media (max-width:640px){
.hero-trust{font-size:14px;line-height:1.35;margin-top:8px}
.hero-trust__rating{flex-basis:100%}
.hero-trust__rating + .hero-trust__sep{display:none}
}
.micro{margin:12px 0 0;font-size:14px;line-height:1.5;color:var(--ink-soft)}
/* паспарту */
.mat{background:var(--card);border:1px solid var(--line);padding:18px;position:relative;box-shadow:var(--shadow-mat)}
.mat-in{border:1px solid var(--line);position:relative}
/* слоты под съёмку */
.slot-in{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:26px}
.slot-cap{font:italic 800 16px/1.55 var(--serif);color:var(--ink-soft);max-width:300px;margin:0}
.blint{width:20px;height:20px;fill:none;stroke:var(--brass-soft);stroke-width:1.3;flex:none}
.sp-fill{color:var(--brass);fill:currentColor;flex:none}
.hero-photo-wrap{grid-column:7 / -1;position:relative;min-width:0;margin-right:calc(-48px - max(0px,(100vw - 1200px)/2));z-index:1}
.hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero-spark-seam{position:absolute;top:0;bottom:0;left:-28px;width:56px;overflow:hidden;pointer-events:none;z-index:2;background-image:url("data:image/svg+xml,");background-position:center center;background-size:56px 48px;background-repeat:repeat-y}
/* На компьютере ряд искр на стыке текста и фото снят (решение владельца
01.10.2026): кадр стоит ровной кромкой. Телефонный шов под фото остаётся. */
@media (min-width:981px){.hero-spark-seam{display:none}}
/* строка доверия */
.trust{display:flex;flex-wrap:wrap;align-items:center;gap:10px 13px;border-top:1px solid var(--line);padding:17px 0 26px;font-size:15px;line-height:1.5;color:var(--ink-soft)}
.tsep{display:inline-flex;align-items:center;flex:none}
.tsep svg{width:8px;height:8px;color:var(--brass);fill:currentColor}
/* секции */
.sec{padding:96px 0}
.sec--tight{padding:72px 0}
.sec-head{margin:0 0 40px}
.grid2{display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center}
.grid2--rev{grid-template-columns:.92fr 1.08fr}
/* фоновые вариации: однотонный форзац задаёт ритм главной,
паттерн остаётся отдельной декоративной вариацией */
.sec--endpaper-flat{background:var(--endpaper)}
/* Полка каталога — секция с рядом книжных карточек. Свой класс, а не разовый
фон у #catalog: подборок будет несколько («Топ продаж», «Новинки», «Для
мальчиков», «Малышам»), плюс отдельная страница каталога. Класс делает их
одинаковыми по определению — фон задаётся один раз здесь, и новая подборка
получает его, просто взяв класс. Так же устроены витрины на больших
платформах: подборка товаров — переиспользуемая секция с общей цветовой
схемой, а не индивидуальная вёрстка каждого блока.
Фон — чистый белый (решение владельца 25.08.2026). Это единственное место,
где бренд отходит от бумажной палитры: на белом обложки читаются как товар
на витрине и полка отчётливо отделяется от рассказных секций вокруг. */
.sec--shelf{background:var(--shelf)}
.sec--endpaper{background-color:var(--endpaper);background-image:url('data:image/svg+xml;utf8,')}
/* каталог */
/* Шапка полки: заголовок слева, ссылка «весь каталог» справа. На узком экране
ссылка переносится под заголовок (flex-wrap) и сохраняет тач-цель 44px. */
/* Разделитель между двумя витринами одного фона — «линейка с искрой» (§5.7 ДС:
типографская пауза между крупными секциями). Нужен там, где полки идут подряд
и фон границу не рисует: без него «Популярное» и «Новинки» читались одним
белым полотном с двумя заголовками. Искра — контур-блинт на кружке фона
секции, чтобы линия под ней прерывалась. */
.shelf--divided{position:relative;border-top:1px solid var(--line)}
.shelf--divided::before{content:"";position:absolute;top:0;left:50%;width:28px;height:28px;transform:translate(-50%,-50%);background-color:var(--shelf);background-repeat:no-repeat;background-position:center;background-size:14px 14px;background-image:url('data:image/svg+xml;utf8,')}
.shelf-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 24px;flex-wrap:wrap;margin:0 0 32px}
.shelf-head__titles{min-width:0}
.shelf-title{margin:0}
.shelf-more{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;font:500 15px/1.2 var(--sans);color:var(--brass-text);text-decoration:none}
.shelf-more:hover{color:var(--blue-press);text-decoration:underline;text-underline-offset:4px}
.shelf-more__arrow{transition:transform .2s ease-out}
.shelf-more:hover .shelf-more__arrow{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.shelf-more__arrow{transition:none}}
/* Ряд витрины — РОВНО 3 колонки, а не авто-раскладка (решение владельца
08.09.2026). auto-fit схлопывал пустые треки: ряд из двух книг растягивал
карточки на всю ширину, и одна и та же обложка выглядела то 347px, то 536px —
размер карточки прыгал от количества книг в подборке. Фиксированные доли
держат карточку одного размера всегда; неполный ряд просто оставляет пустое
место справа, как на витрине магазина. */
/* Карточки тянутся на общую высоту ряда (stretch по умолчанию) — это и держит
кнопки на одной линии: описание в строке minmax(0,1fr) съедает разницу, а
цена с кнопкой прижаты к низу. align-items:start ломал ровно это: карточка
становиласьвысотой по своему тексту, и у книги без цены («Скоро») кнопка
поднималась выше соседних. */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:64px 32px}
/* Полка наследует ряд каталога — те же 3 колонки: витрина и подборка совпадают,
отдельного правила для .shelf .cards не нужно. */
/* Строки карточки НЕ прижимаем к верху (был align-content:start). При «start»
свободная высота копилась ПОД кнопкой: строка описания minmax(0,1fr) не
получала её, и у книги-анонса без цены кнопка «Скоро» висела на 83px выше
соседних, а у остальных цена с кнопкой прилипали прямо к описанию. Без
«start» лишнюю высоту забирает строка описания, блок «цена + кнопка» уходит
к низу карточки — и низ кнопки совпадает с низом карточки в любой книге,
с ценой и без. Карточки ряда одной высоты (stretch), поэтому кнопки встают
на одну линию. */
.bcard{display:grid;grid-template-columns:fit-content(40%) minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto;column-gap:16px;min-width:0;color:var(--ink)}
.bcard-cover{grid-column:1/-1;grid-row:1;position:relative;display:block;aspect-ratio:1/1;background:transparent;border:0;box-shadow:none;text-decoration:none}
/* Тень под обложкой: книга лежит на белой полке, а не приклеена к фону. Тень
идёт filter'ом, а не box-shadow: при object-fit:contain коробка img остаётся
квадратной, и у неквадратной обложки box-shadow обвёл бы пустые поля.
Параметры 6 / 6 / 6 при чёрном 50% (решение владельца 25.08.2026, выбрано
сравнением на живой карточке). Прежняя редакция — мягкое облако вниз на 14
с размытием 20 — подбиралась под кремовую бумагу 18.08.2026; на белом фоне
полки она серила воздух вокруг карточки и читалась пятном. Короткая тень
вправо-вниз задаёт свет слева сверху и показывает толщину книги. Слой
«кромка листа» снят: при таком смещении он больше не нужен.
Приём подсмотрен у wonderwraps.com (там -8/8/6 при 50%), направление
развёрнуто вправо: у нас обложка стоит фронтально, а не под углом. */
.bcard-cover img{width:100%;height:100%;object-fit:contain;
filter:drop-shadow(6px 6px 6px rgba(0,0,0,.5));
transition:opacity .2s ease-out,filter .2s ease-out}
.bcard-cover:hover img{opacity:.96;filter:drop-shadow(8px 8px 9px rgba(0,0,0,.45))}
/* Блик обложки. Режим screen осветляет светлые места картинки и не трогает
тёмные, поэтому лежит поверх любой обложки. Слой декоративный: нажатия не
перехватывает, из потока чтения исключён. */
.bcard-gloss{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;mix-blend-mode:screen;pointer-events:none;opacity:.85}
.bcard-cover:hover .bcard-gloss{opacity:.9}
@media (prefers-reduced-motion:reduce){.bcard-gloss{transition:none}}
@media (prefers-reduced-motion:reduce){.bcard-cover img{transition:none}}
.bcard-cover .slot-in{position:absolute;inset:0;padding:16px;gap:10px}
.bcard-cover .slot-cap{font-size:14px}
.bcard-cover .blint{width:16px;height:16px}
/* Компактный регистр подписи карточки — решение владельца 08.09.2026 (выбран
вариант «В» из показанных: подпись плотнее + больше воздуха между рядами).
Причина: длинная подпись съедала границу между рядами, и соседние ряды
читались как один. Осознанное отступление от типографики канона: у названия
интерлиньяж 1.2 вместо 1.3, у описания 1.45 вместо 1.55 — только в карточке
витрины, наборный текст страниц не трогаем. */
.bcard-title{grid-column:1/-1;grid-row:2;margin:12px 0 0}
.bcard-name{display:inline;color:var(--ink);font:800 22px/1.2 var(--serif);text-decoration:none;text-wrap:balance}
.bcard-name:hover{color:var(--brass-text)}
.bcard-about{grid-column:1/-1;grid-row:3;display:block;font:400 15px/1.45 var(--sans);color:var(--ink-soft);margin:6px 0 12px;text-wrap:pretty}
/* Кнопка карточки шире надписи: «Посмотреть» занимало 120px при карточке 347 —
справа пустовала половина строки. Теперь колонка цены сжата до её собственной
ширины, кнопка стоит у правого края шириной 180px, и между ними остаётся
воздух (выбор владельца 24.08.2026 из трёх показанных вариантов).
Ширина записана как width:min(180px,100%), а НЕ max-width: max-width в этом
файле сторожит дизайн-гард — он следит за осями макета и не отличает их от
размера кнопки. min() решает ту же задачу: на узкой карточке кнопка ужимается
до ширины колонки.
Потолок обязателен: дай кнопке 242px и больше — скидочный ярлык у цены
срывается на третью строку и блок цены разъезжается. */
.bcard-price{grid-column:1;grid-row:4;display:flex;flex-wrap:wrap;align-items:baseline;align-self:end;gap:4px 8px;min-width:0}
/* Цена — заголовочной гарнитурой (решение владельца 14.09.2026). Канон ДС
требовал этого и раньше (токен `price`), но код набирал её Golos — и не по
ошибке: в Playfair Display не было знака рубля, «₽» подставлялся системным
шрифтом и выпадал из строки чужой формой. В Cygre рубль свой, поэтому
причина отпала вместе с Playfair. */
.bcard-price b{flex-basis:100%;font:800 26px/1.2 var(--serif);color:var(--ink);font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.bcard-price s{font:400 14px/1.2 var(--sans);color:var(--ink-soft)}
.bcard-price-from{font-weight:500;font-size:.62em;color:var(--ink-soft)}
.bcard-disc{background:var(--endpaper);color:var(--brass-text);font:500 11px/1 var(--sans);letter-spacing:.08em;border-radius:2px;padding:4px 6px}
.bcard-more{grid-column:2;grid-row:4;display:inline-flex;align-items:center;justify-content:center;align-self:end;justify-self:end;width:min(180px,100%);min-height:44px;background:var(--blue-core);color:#FFFFFF;font:600 14px/1 var(--sans);padding:13px 18px;border-radius:6px;text-decoration:none;transition:background .2s ease-out,box-shadow .2s ease-out;white-space:nowrap}
.bcard-more:hover{background:var(--blue-press)}
.bcard-more:active{background:var(--blue-active)}
/* Кнопка книги-анонса — латунная кнопка канона (§4): служебное действие,
которое НЕ должно конкурировать с синей «Посмотреть» у книг в продаже.
ПЛОСКАЯ: обычная граница, а не внутреннее тиснение (решение владельца
12.09.2026 — кнопки «Экслибриса» без рельефа).
⚠️ cursor:default здесь стоял от прежней НЕактивной надписи «Скоро». Когда
надпись стала живой кнопкой «Сообщить о выходе» (12.09.2026), курсор остался
стрелкой, и кнопка выглядела выключенной — на компьютере по ней просто не
пробовали нажать. */
.bcard--soon .bcard-more{background:var(--card);color:var(--brass-text);cursor:pointer;border:1px solid var(--blue-core)}
.bcard--soon .bcard-more:hover{background:var(--endpaper);color:var(--brass-text);border-color:var(--blue-core)}
.quote p{margin:0 0 14px;font-size:clamp(17px,1.4vw,18px);line-height:1.6}
.quote p:last-child{margin-bottom:0}
.quote .q-accent{margin-bottom:16px}
/* шаги */
/* Шаги строкой + центрированное паспарту (приём Claude Design, р.4) */
.steps-row{list-style:none;margin:0 0 clamp(32px,5vw,56px);padding:0;display:flex;flex-wrap:wrap;gap:clamp(20px,2.5vw,32px)}
.steps-row li{flex:1 1 190px;border-top:1px solid var(--line);padding-top:16px}
.st-num{display:block;font:500 12px/1 var(--sans);letter-spacing:.28em;color:var(--brass-text);margin-bottom:12px}
.steps-row b{display:block;font:500 17px/1.4 var(--sans);color:var(--ink);margin-bottom:4px}
.steps-row .st-body{display:block;color:var(--ink-soft);font:400 15px/1.55 var(--sans)}
.how-mat{margin:0 auto;max-width:760px}
.steps{list-style:none;margin:0;padding:0;counter-reset:st;max-width:640px}
.steps li{counter-increment:st;display:flex;gap:20px;padding:18px 0;border-bottom:1px solid var(--line);align-items:baseline}
.steps li:last-child{border-bottom:0}
.steps li::before{content:"0" counter(st);font:500 12px/1 var(--sans);letter-spacing:.28em;color:var(--brass-text);flex:none;transform:translateY(-2px)}
.steps b{display:block;font-weight:500;font-size:17px;margin-bottom:2px}
.steps span{display:block}
.steps .st-body{color:var(--ink-soft);font-size:16px;line-height:1.6}
/* разделитель-финис */
.finis{display:flex;align-items:center;gap:16px;max-width:640px;margin:0 auto;padding:0 20px}
.finis::before,.finis::after{content:"";flex:1;height:1px;background:var(--line)}
.finis .blint{width:14px;height:14px}
/* отзывы */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.review{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:24px;font-size:15px;line-height:1.65;color:var(--ink)}
.review .sp-fill{width:10px;height:10px;display:block;margin-bottom:12px}
.review-slot{border-radius:8px}
.review-slot .slot-in{height:100%;min-height:180px;padding:20px}
.review-slot .slot-cap{font-size:15px}
/* FAQ */
.faq{max-width:760px;margin:0 auto}
#faq-t{text-align:center}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{list-style:none;cursor:pointer;font:500 17px/1.5 var(--sans);color:var(--ink);padding:20px 40px 20px 0;position:relative;transition:color .15s ease-out}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"";position:absolute;right:8px;top:25px;width:9px;height:9px;border-right:2px solid var(--blue-core);border-bottom:2px solid var(--blue-core);transform:rotate(45deg);transition:transform .2s ease-out}
.faq-item[open] summary::after{transform:rotate(225deg)}
.faq-item summary:hover{color:var(--brass-text)}
.faq-a{color:var(--ink-soft);font-size:16px;line-height:1.65;padding:0 40px 22px 0}
.faq-a a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--brass-soft)}
.faq-a a:hover{color:var(--brass-text)}
/* «Все вопросы →» — ссылка с блока-выжимки на полный раздел /faq */
.faq-all{max-width:760px;margin:24px auto 0;text-align:center}
.faq-all a{font:500 15px/1.5 var(--sans);color:var(--brass-text);text-decoration:none;border-bottom:1px solid var(--brass-soft)}
.faq-all a:hover{color:var(--ink)}
/* финал */
.final{text-align:center}
.final .micro{margin-top:14px}
.final-slot{max-width:760px;margin:56px auto 0}
.final-slot .slot-in{aspect-ratio:24/9}
/* подписи под изображениями */
.mat-cap{font:italic 800 15px/1.5 var(--serif);color:var(--ink-soft);padding:12px 2px 0;text-align:left;margin:0}
/* Подвал — сквозной, целиком в site-header.css (партиал _site-footer.html).
Здесь НЕ дублируем, иначе подвал главной расходится с остальными страницами. */
/* motion */
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{transition:none!important;animation:none!important}
html{scroll-behavior:auto}
}
/* адаптив */
@media (max-width:980px){
.grid2,.grid2--rev{gap:40px}
.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 24px}
/* Полке нужен свой перелом: её базовое правило четырёх колонок специфичнее
общего .cards и без этого пережило бы медиазапрос. */
}
@media (max-width:980px){
.wrap{padding:0 20px}
.sec{padding:64px 0}
/* Никакого отступа сверху: фотография примыкает к шапке вплотную
(решение владельца 24.08.2026). Прежние 34px читались как пустая
полоса между меню и кадром — на телефоне это первое, что видит
посетитель, и полоса съедала часть и без того короткого экрана. */
.hero{grid-template-columns:1fr;gap:0;padding:0}
/* Иерархия заголовков чинится СНИЗУ (25.08.2026, решение владельца).
Разрыв 26 → 22 между заголовком секции и названием книги был слишком мал,
уровни сливались. Первым порывом было поднять заголовок до 32, но замер
показал цену: из семи заголовков страницы пять сейчас однострочные —
«Выберите историю», «Первая встреча с книгой», «Три шага до волшебства»,
«Тихое чудо превращения», «Вопросы и ответы», — и при 32 три из них
ломаются пополам (15 строк против нынешних 10). Короткая чеканная вывеска,
разорванная надвое, перестаёт работать как вывеска: Playfair ExtraBold —
широкая антиква, строка набирается быстро.
Поэтому заголовок остался 26, а название книги опущено до 19: ступень
26 → 19 составляет 1,37 — глаз читает её уверенно, и ни один заголовок
не сломался. */
.bcard-name{font-size:19px}
/* Лид первого экрана мельче и плотнее общего .lead (17-18/1.6): после
подъёма заголовка до 42px он спорил с ним за внимание. Правило живёт
в мобильном блоке — на десктопе лид остаётся прежним. */
.hero .lead{font-size:16px;line-height:1.5}
/* Отступ под кнопкой берём ступенью отбивки блоков (--skz-block-*, §ДС),
а не случайным числом: на телефоне каталог начинался вплотную к кнопке —
ноль пикселей между ними (замер 04.09.2026), и первый экран читался как
обрыв. Ступень «s» = 32 на телефоне: кнопка получает воздух, а тизер
следующей секции остаётся в кадре. */
.hero-copy{grid-column:1;max-width:none;padding:0 0 var(--skz-block-s)}
/* Крупный регистр заголовка на телефоне (24.08.2026): потолок поднят с 31px
до 42px. Предел здесь диктует не вкус, а вёрстка — строки заголовка не
переносятся (nowrap), поэтому кегль упирается в ширину самой длинной,
«главный герой». Замер: на 390px она влезает вплоть до 46px, но тогда
остаётся по 3px воздуха с каждой стороны и текст липнет к краям. При 42
воздуха 43px на 390 и 36px на 360 — заголовок крупный и дышит.
(Проверка «кнопка остаётся в сгибе» велась тогда по паспортным 844 и была
неверной — реальный сгиб Safari ~669; посадка кнопки чинится ниже,
в блоке «Первый экран целиком в сгибе телефона».) */
/* Потолок 34px (01.10.2026, канон ДС `display`): кнопка и строка доверия в сгибе.
Телефон: строки «своей любимой» и «книги!» РАСХОДЯТСЯ (в отличие от
десктопа). Иначе узким местом становится 11.38em и кегль падает до
30px — заголовок в крупном регистре был решением владельца 24.08.2026,
и длинный текст не повод его отменять. С разбивкой узкое место
7.96em («своей любимой»), то есть почти как у прежних трёх строк (7.72em). */
.hero h1.hero-title--fixed{width:max-content;max-width:none;font-size:clamp(26px,8.6vw,34px);line-height:1.08;letter-spacing:-.015em;font-weight:800}
.hero-title--fixed>span.hero-title-join{display:block}
/* Три строки держатся и на мобайле — span'ы остаются блоками (17.08.2026).
Пробел между строками даёт сама разметка (перенос строки между span'ами
в home.html) — генерируемый ::after{content:" "} не нужен и не должен
возвращаться: настоящий пробел обязан быть в тексте, а не в CSS. */
.hero-title--fixed>span{display:block;white-space:nowrap}
/* Фотография ПЕРЕД текстом (24.08.2026, решение владельца). 87% посетителей
приходят с телефона, а снимок — главный аргумент первого экрана: он
показывает книгу в руках. В прежнем порядке фото начиналось на 465-й точке
из 844 видимых и обрезалось на половине, то есть до прокрутки покупатель
видел только текст. Порядок меняем через order, а не перестановкой в
разметке: на десктопе текст обязан идти первым и по разметке, и для
скринридера — там фото стоит справа как иллюстрация. */
.hero-photo-wrap{grid-column:1;order:-1;margin:0 -20px 24px;position:relative}
/* Кадр чуть выше 3:2 — иначе книга в руках попадает под искровый шов и
обложка обрезается фестонами. Проверено замером: при 4:3 низ обложки
остаётся выше линии шва на всех ширинах от 360 до 430. */
.hero-photo{position:relative;inset:auto;aspect-ratio:4/3;height:auto;object-position:center 42%}
/* Искровый шов на телефоне НЕ выключается, а ложится горизонтально под низ
снимка — те же четырёхлучевые искры ДС, что на десктопе делят текст и фото
вертикально. Прежде здесь стоял display:none, и мобильная версия теряла
фирменную деталь: снимок обрывался ровной линией. Цвет заливки — endpaper
секции: шов не рисует звёзды поверх фото, а ВЫРЕЗАЕТ их фоном.
Посадка как на десктопе: полоса сдвинута на половину своей высоты (-24px
при 48px), поэтому ЦЕНТР ряда искр приходится ровно на границу фото и
фона — верхняя половина каждой звезды вырезана из снимка, нижняя сливается
с полем секции. Прижать полосу целиком к низу фото было бы не то же самое:
звёзды висели бы НА снимке, а не сидели на стыке.
Плитка узора — 48×48, ровно по размеру искры: контур занимает её целиком,
поэтому повтор ничего не срезает, а соседние звёзды смыкаются кончиками
лучей в сплошную цепочку — так же, как вертикальный ряд на десктопе.
Промежуточная версия с плиткой 56×48 давала просвет в 16px: звёзды стояли
порознь и ряд рассыпался на отдельные значки.
Цвет ряда — ГРАДИЕНТ форзац → латунь слева направо (макет владельца в Figma,
24.08.2026). Поэтому форма искр задана маской, а не заливкой самого SVG:
под маской лежит градиент, и слева искры сливаются с полем секции, работая
вырезом по краю снимка, а справа наливаются латунью и читаются как звёзды.
Одной заливкой такого не получить — пришлось бы держать два слоя. */
/* Ряд ложится ЦЕЛЫМ числом искр от края до края — как в макете, где шов
собран одним вектором в ширину кадра. Фиксированный шаг 48px этого не
давал: на 390px помещается 8,125 плитки, и крайние искры срезались
посередине. Теперь ширина искры = доля ширины экрана (--seam-n штук),
а высота полосы равна этой же доле — искра остаётся квадратной. */
.hero-spark-seam{display:block;--seam-n:12;left:0;right:0;width:100%;
top:auto;height:calc(100vw / var(--seam-n));bottom:calc(-50vw / var(--seam-n));
background:linear-gradient(90deg,var(--endpaper) 0%,var(--blue-core) 100%);
-webkit-mask-image:url("data:image/svg+xml,");mask-image:url("data:image/svg+xml,");
-webkit-mask-size:calc(100% / var(--seam-n)) 100%;mask-size:calc(100% / var(--seam-n)) 100%;
-webkit-mask-repeat:repeat-x;mask-repeat:repeat-x;
-webkit-mask-position:left center;mask-position:left center}
/* Чем шире экран, тем больше искр — иначе на планшете они разрослись бы
до 80px. На телефоне искры мельче (12 в ряд, ~32px; решение владельца
01.10.2026): крупный ряд срезал низ обложки книги в руках. */
@media (min-width:481px){ .hero-spark-seam{--seam-n:16} }
@media (min-width:721px){ .hero-spark-seam{--seam-n:18} }
.grid2,.grid2--rev{grid-template-columns:1fr;gap:32px}
.grid2--rev > :first-child{order:2}
.reviews{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
.btn-sec{padding:15px 20px}
.trust{flex-direction:column;align-items:flex-start;gap:9px}
.trust .tsep{display:none}
}
@media (max-width:640px){
.sec{padding:48px 0}
.reviews{grid-template-columns:1fr;margin-top:28px}
.sec-head{margin-bottom:28px}
.btn-pri,.btn-cream{width:100%}
.final .btn-cream{width:auto}
.cards{grid-template-columns:minmax(0,1fr);gap:48px}
.bcard-name{min-height:0}
}
/* р8: рамки паспарту убраны — чистые изображения + мягкая тень, слоты с тонкой рамкой */
.mat{background:none!important;border:0!important;padding:0!important;box-shadow:none!important}
.mat-in{border:0!important}
.mat-in:not(.slot-in){box-shadow:var(--shadow-mat)}
.mat-in.slot-in{border:1px dashed var(--line-deep)!important;border-radius:6px;background:var(--card)}
.crn{display:none!important}
.quote .h2{margin-bottom:14px}
/* ═══════════ Блоки с боевой главной, согласованы с «Экслибрисом» ═══════════ */
/* «Как сделать заказ?» — четыре шага, «кадр в кадре».
Прежний блок («Три шага») был таблицей из трёх ячеек с тонкой иконкой; новый
строится вокруг КАРТИНКИ, потому что шаг объясняет картинка, а не значок.
В кадре живое фото, поверх него — вклейка с настоящим экраном Сказкина.
Разбор образца (wonderwraps.com) 14.09.2026: у них в трёх шагах из четырёх
тоже не фотография, а снимок собственного интерфейса, и только последний —
живой кадр. Мы повторяем эту логику, но со своими экранами и со своим
текстом, которого у них в шагах нет вовсе.
Чего мы у образца НЕ берём — ручной подгонки: там пятнадцать отрицательных
margin'ов вида -mt-[13rem], подобранных под конкретные картинки. Здесь вся
геометрия держится на сетке и aspect-ratio, поэтому блок переживает смену
кегля, ширины колонки и самих снимков.
Ленты-ляссе сквозь кадры нет (решение владельца 15.09.2026) — сравнение трёх
версий лежало на lab.maklakov.com/skazkin/how-block. Порядок несут номера. */
.how4-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:32px;align-items:start;margin:0 0 44px}
.how4-head .h2{margin:0 0 14px}
.how4-intro{max-width:640px;margin:0}
/* Сноска-закладка: уголок ляссе, выглянувший из страницы. Наклон в 2.5° —
единственная «рукотворная» деталь блока, и она безопасна: плашка не влияет
на поток и не может ничего сдвинуть. */
/* Геометрия снята с макета дизайнера: текст по левому краю, искра в потоке
первой строки (а не сбоку от двух). Наклон -2.5° возвращён по просьбе
владельца 15.09.2026 — в присланном SVG плашка прямая, но живой она
нравится больше. Поворот не влияет на поток и ничего не сдвигает. */
.how4-tag{display:block;margin:6px 0 0;padding:16px 22px;
background:var(--accent-text);color:#fff;border-radius:6px;width:max-content;
font:800 18px/1.32 var(--serif);transform:rotate(-2.5deg);box-shadow:var(--shadow-mat)}
.how4-tag-spark{width:.95em;height:.95em;display:inline-block;vertical-align:-.1em;
margin-right:.45em;fill:var(--brass)}
/* Зазор 64px на компьютере — не про воздух между колонками, а про РАЗМЕР
КАДРА. Ширина ряда упёрта в поля страницы (1104px на шелле), поэтому
увеличить картинку можно только за счёт зазора: кадр вылезает в него на
28px с каждой стороны и становится 284px, а текстовая колонка ужимается до
228px. Итог — картинка на 25% шире своего текста (выбор владельца
15.09.2026 из четырёх замеренных вариантов). Физический потолок кадра здесь
~285px: дальше картинки сомкнутся. */
.how4{--how4-gap:clamp(18px,4.4vw,64px);list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--how4-gap);margin:0;padding:0}
.how4-step{display:flex;flex-direction:column;margin:0}
/* Пропорция 3:2 — родная для присланных макетов (1200×800). Подложки и
скругления у кадра НЕТ: все четыре картинки прозрачные и несут собственную
тень, любая рамка обрезала бы её и подложила прямоугольник под прозрачность.
object-fit:contain, а не cover: макет обрезать нельзя.
Ширина ПОЛНАЯ: с 15.09.2026 искра-подложка вшита внутрь макета, и ужимать
его больше не нужно — раньше 86% отдавали место CSS-искре под лучи. */
/* Вылет кадра в зазор СЧИТАЕТСЯ ОТ ЗАЗОРА, а не задан в точках. Зазор
резиновый (clamp 18…64), и фиксированные -28px, верные для 1440, на 1024
накладывали кадры друг на друга на 11px, а на 768 — на 22px. Формула
оставляет между кадрами ровно 8px на любой ширине. */
.how4-fig{position:relative;aspect-ratio:3/2;margin:0 calc((8px - var(--how4-gap)) / 2) 26px}
.how4-fig>img{width:100%;height:100%;object-fit:contain;display:block}
/* Номер стоит В СТРОКЕ ПОДПИСИ, а не в углу кадра: макеты заполняют полотно
по-разному, и кружок в углу у одних висел под композицией, а у других
налезал на неё. С вшитой искрой угол кадра тем более занят её лучом.
Белым по глубокому кораллу — 5.33, читается как полноценный текст;
на самом ляссе #E8743A белый дал бы 3.00 и там запрещён. */
/* Размер кружка привязан к КЕГЛЮ подписи, а не задан в точках. Причина
механическая: плавающий элемент выше строки перекрывает и следующую, и тогда
обтекание съедает ширину у двух строк сразу — подпись второго шага
разваливалась на три строки вместо двух. Кегль подписи резиновый
(clamp 16…19), поэтому фиксированные 28px спасали 1440 и ломали 1024.
Своя доля 1.8125em при font-size .8em даёт ровно 1.45 родительского em,
то есть всегда меньше интерлиньяжа 1.5. */
.how4-num{width:1.8125em;height:1.8125em;display:flex;align-items:center;justify-content:center;
border-radius:50%;background:var(--accent-text);color:#fff;font:800 .8em/1 var(--serif)}
/* Резерв в ОДНУ строку: 15.09.2026 владелец снова сократил подпись второго
шага до «Загрузите фото», и все четыре стали однострочными.
⚠️ Подпись этого шага меняла длину уже трижды. Обтекание кружка и привязка
его размера к кеглю оставлены НАРОЧНО, хотя при однострочных подписях они не
нужны: вернётся длинный вариант — вёрстка выдержит его сама, без правки. */
/* Кружок ОБТЕКАЕТСЯ текстом, а не стоит с ним в одной flex-строке. В строке
flex он забирал ширину у ВСЕХ строк заголовка, а не только у первой: колонка
255px минус кружок с зазором оставляла тексту 209px, и «напишите имя и
возраст» (223px) не помещалось — подпись разваливалась на три строки вместо
двух. При обтекании вторая строка получает всю ширину колонки. */
.how4-h{display:block;font:800 clamp(16px,1.4vw,19px)/1.5 var(--serif);
color:var(--ink);margin:0 0 10px;min-height:1.5em}
.how4-h::after{content:"";display:block;clear:both}
.how4-num{float:left;margin:0 .6875em 0 0}
.how4-step p{font:400 15px/1.6 var(--sans);color:var(--ink-soft);margin:0}
/* ═══════ Полоса преимуществ под первым экраном ═══════════════════════════
Класса .sec тут НЕТ намеренно: его отбивка 96px превратила бы ленту в
полноценную секцию, а нужна именно узкая полоса. Цвет берётся от
.sec--night, вертикальная отбивка своя. */
.strip .wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;
padding-top:32px;padding-bottom:32px}
.strip-it{display:flex;align-items:center;gap:12px;margin:0;
font:600 16px/1.4 var(--sans);color:var(--card)}
.strip-it svg{width:20px;height:20px;flex:none;fill:var(--brass)}
@media (max-width:640px){
.strip .wrap{grid-template-columns:minmax(0,1fr);gap:14px;padding-top:24px;padding-bottom:24px}
}
/* ═══════ Слово психолога — «ночной остров» ═══════════════════════════════
Фон --ink, текст белый (13,52) и форзацный (12,17). Жёлтая искра вокруг
портрета здесь наконец на своём месте: на чернилах 8,28 против 1,47 на
бумаге. Подсветка в цитате — светлой искрой (10,31), не белым: белым набран
основной текст, и выделение должно отличаться цветом, а не только жирностью.
Портрет прозрачный и несёт свою подложку, поэтому ни рамки, ни фона у него
нет — как и у макетов шагов. */
.sec--night{background:var(--ink);color:var(--card)}
/* Ширину цитаты держит САМА СЕТКА (вторая колонка не шире 640 — это ось из
канонического ряда), а не max-width на обёртке: произвольные оси ширины
дизайн-гард не пропускает, и правильно — иначе их набегает десяток. */
.psy{display:grid;grid-template-columns:minmax(0,300px) minmax(0,640px);gap:56px;
align-items:center;margin:0}
.psy-face{text-align:center}
.psy-face img{width:100%;height:auto;display:block}
.psy-sign{margin:14px 0 0}
.psy-name{display:block;font:800 18px/1.3 var(--serif);color:var(--card);font-style:normal}
.psy-role{display:block;margin:6px 0 0;font:400 13.5px/1.5 var(--sans);color:var(--endpaper);opacity:.82;text-wrap:balance}
.psy-quote{margin:0}
/* Плашка «Одобрено детским психологом». Наклон тот же, что у плашки в блоке
заказа, — приём один на страницу, а не два разных. */
/* Вес поднят: .psy-quote p весит больше одиночного класса и перекрашивал
плашку в цвет абзаца — чернильный текст выходил светло-серым по жёлтому
и терял свои 8,28. Третий раз на этой секции, поэтому оговорено явно. */
.psy-quote .psy-badge{display:inline-flex;align-items:center;gap:9px;margin:0 0 22px;padding:11px 18px;
background:var(--brass);color:var(--ink);border-radius:6px;width:max-content;
font:800 16px/1.2 var(--serif);transform:rotate(-2.5deg);box-shadow:var(--shadow-mat)}
.psy-badge-spark{width:20px;height:20px;flex:none;fill:var(--accent-text)}
.psy-quote p{font:400 16px/1.7 var(--sans);color:var(--endpaper);margin:0 0 12px}
/* Вес селектора поднят намеренно: .psy-quote p весит больше одиночного класса
и перебивал лид независимо от порядка — ведущее предложение набиралось
наравне с остальными. */
.psy-quote .psy-lead{font:800 clamp(20px,2vw,26px)/1.32 var(--serif);color:var(--card);margin:0 0 20px}
.psy-quote p:last-child{margin-bottom:0}
.psy-quote b{font-weight:600;color:var(--brass-soft)}
/* Телефон и планшет: портрет над цитатой и заметно меньше — во всю ширину
колонки он съедал бы полэкрана раньше единого слова текста.
⚠️ Блок стоит ПОСЛЕ базовых правил .psy, а не в общем медиазапросе выше:
вес селекторов одинаковый, и при обратном порядке двухколоночная сетка
перебивала телефон — замер дал вылет строки цитаты на 455px при экране 390. */
@media (max-width:980px){
.psy{grid-template-columns:minmax(0,1fr);gap:28px;justify-items:center;text-align:center}
.psy-face{width:min(240px,64vw)}
.psy-quote{text-align:left}
}
/* Манифест «Но истории остаются» — центрированная типографическая иерархия */
.manifesto{text-align:center;max-width:760px;margin:0 auto}
.manifesto-pre{font:400 clamp(16px,1.6vw,19px)/1.55 var(--sans);color:var(--ink-soft);max-width:640px;margin:0 auto 22px}
.manifesto-hero{font:800 clamp(34px,5vw,62px)/1.08 var(--serif);color:var(--ink);margin:0 0 4px;text-wrap:balance}
.manifesto-hero em{font-style:italic;color:var(--accent-text)}
.manifesto-spark{width:22px;height:22px;color:var(--brass);fill:currentColor;margin:26px auto 22px;display:block}
.manifesto-post{font:400 clamp(15px,1.4vw,17px)/1.65 var(--sans);color:var(--ink-soft);max-width:640px;margin:0 auto}
/* «Тихое чудо превращения» — утверждённый «Разворот-реестр» */
.why-registry{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:32px;align-items:start}
.why-registry__intro{grid-column:span 5;position:relative;padding-left:24px}
.why-registry__intro::before{content:"";position:absolute;inset:4px auto 0 0;width:2px;background:linear-gradient(180deg,var(--blue-core),var(--brass-soft) 72%,transparent)}
.why-registry__intro .kick{margin-bottom:16px}
.why-registry__intro .h2{margin-bottom:16px}
.why-registry__list{grid-column:span 7;border-top:1px solid var(--line-deep)}
.why-registry__row{display:grid;grid-template-columns:16px minmax(0,1fr);gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}
.why-registry__spark{width:16px;height:16px;margin-top:4px;color:var(--brass);fill:currentColor}
.why-registry__row h3{font:800 22px/1.3 var(--serif);color:var(--ink);margin:0 0 4px}
.why-registry__row p{font:400 15px/1.6 var(--sans);color:var(--ink-soft);margin:0;text-wrap:pretty}
/* «Узнавайте о новых книгах» — подписка */
.wl-group{margin:0 0 14px}
.wl-group label{display:block;font:500 13px/1.4 var(--sans);color:var(--ink);margin:0 0 6px}
.wl-group input{width:100%;background:var(--paper);border:1px solid var(--line-control);border-radius:6px;padding:12px 14px;font:400 15px/1.4 var(--sans);color:var(--ink)}
.wl-group input:focus{outline:none;border-color:var(--blue-core);box-shadow:0 0 0 3px rgba(43,85,200,.18)}
@media (max-width:980px){
.why-registry{grid-template-columns:1fr;gap:32px}
.why-registry__intro,.why-registry__list{grid-column:auto}
}
/* Две колонки — на общем пороге канона. Сначала был отдельный порог 1100
(на 1024 колонка ужимается до 211px), но канон знает только 980 и 640, и
дизайн-гард такой порог не пропускает. Узкая колонка лечится не порогом, а
кеглем: подпись и зазор заданы через clamp и сами ужимаются к 981px, так что
«Загрузите фото, напишите имя и возраст» держится в двух строках. */
@media (max-width:980px){
.how4{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:44px}
.how4-head{grid-template-columns:1fr;gap:20px}
.how4-tag{margin:0}
}
/* Телефон — один столбец. Блок обязан стоять ПОСЛЕ правил ≤980px: у них
одинаковый вес, и при обратном порядке двухколоночная сетка планшета
перебивала телефон (замер: кадр шага 161px вместо 350px).
Ляссе перестаёт быть сквозной лентой — вести её вертикально значило бы
тащить сквозь текст — и становится хвостиком закладки, выглядывающим
из-под кадра вправо от номера. */
@media (max-width:640px){
.how4{grid-template-columns:minmax(0,1fr);row-gap:40px}
.how4-fig{aspect-ratio:3/2;margin:0 0 22px}
.how4-head{margin-bottom:32px}
.how4-h{font-size:18px}
}
/* Окно «Сообщить о выходе» (book-notify.js). Живёт в home.css, потому что
карточки-анонсы есть и на главной, и в каталоге — оба подключают этот файл.
Оформление — по канону: бумажный лист, латунная кромка, чернильный текст. */
.bnotify{width:min(440px,calc(100vw - 40px));padding:24px;border:0;border-radius:8px;background:var(--card);color:var(--ink);box-shadow:var(--shadow-pop)}
.bnotify::backdrop{background:rgba(35,46,71,.45)}
.bnotify__x-form{margin:0;float:right}
.bnotify__x{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:50%;background:var(--endpaper);color:var(--ink);cursor:pointer}
.bnotify__x svg{width:18px;height:18px}
.bnotify__title{font:800 22px/1.3 var(--serif);margin:0 0 8px;text-wrap:balance}
.bnotify__lead{margin:0 0 20px;font:400 15px/1.55 var(--sans);color:var(--ink-soft);text-wrap:pretty}
.bnotify__row{display:flex;gap:8px;flex-wrap:wrap}
.bnotify__input{flex:1 1 200px;min-width:0;height:48px;padding:0 14px;background:var(--paper);border:1px solid var(--line-control);border-radius:6px;color:var(--ink);font:400 16px/1.4 var(--sans)}
.bnotify__input:focus-visible{outline:2px solid var(--blue-core);outline-offset:2px;border-color:var(--blue-core)}
.bnotify__submit{flex:0 0 auto;padding:15px 24px;font-size:15px}
/* Ловушка для роботов: убрана с экрана, но не display:none — часть ботов
пропускает скрытые так поля. */
.bnotify__hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.bnotify__agree{display:flex;gap:10px;align-items:flex-start;margin:16px 0 0;font:400 13px/1.5 var(--sans);color:var(--ink-soft)}
.bnotify__agree input{flex:0 0 auto;width:18px;height:18px;margin:1px 0 0}
.bnotify__agree a{color:var(--brass-text)}
.bnotify__err{margin:12px 0 0;font:500 13px/1.5 var(--sans);color:var(--danger-text,#B4402B)}
.bnotify__alt{margin:24px 0 0;padding:16px 0 0;border-top:1px solid var(--line)}
.bnotify__alt-label{display:block;margin:0 0 12px;font:500 13px/1.4 var(--sans);color:var(--ink-soft)}
.bnotify__channels{display:flex;gap:8px;flex-wrap:wrap}
/* Кнопкам мессенджеров нужна своя кромка: кремовая кнопка на кремовом листе
окна теряет силуэт (та же беда, что была у кнопки сброса на белой полке).
Латунная обводка даёт видимую границу и не спорит с синей «Сообщить». */
/* 44px — тач-цель публичного сайта; при padding 12 кнопка выходила 39. */
.bnotify__channel{min-height:44px;padding:12px 20px;font-size:15px;border:1px solid var(--brass-soft)}
.bnotify__channel:hover{border-color:var(--blue-core)}
.bnotify__wait{margin:12px 0 0;font:400 13px/1.5 var(--sans);color:var(--brass-text)}
/* Предупреждение о сообщениях — служебная строка, не абзац: набирается мелко
и приглушённо, иначе перетягивает внимание с самих кнопок. */
.bnotify__note{margin:16px 0 0;font:400 13px/1.5 var(--sans);color:var(--ink-soft);text-wrap:pretty}
.bnotify__note a{color:var(--brass-text)}
/* Полка мессенджеров — единственное действие окна, «или» больше нет. */
.bnotify__alt--solo{margin-top:20px;padding-top:20px}
.bnotify__done{margin:0 0 20px;font:400 16px/1.6 var(--sans);color:var(--ink);text-wrap:pretty}
.bnotify__ok{width:100%}
@media (max-width:640px){
.bnotify{padding:20px}
.bnotify__submit{width:100%}
}
/* ── Язычок тёмной полосы со стрелкой вниз (вариант А5, владелец 01.10.2026) ──
Первый экран на компьютере занимает всё окно, и полоса по нижнему краю
читалась как конец страницы («ложное дно»). Язычок — продолжение полосы
(тот же --ink), торчит над её кромкой под колонкой текста, шеврон латунью.
Наведение вытягивает язычок; после первой прокрутки он уходит. Телефон и
планшет — без язычка: там первый экран не во всю высоту, ложного дна нет. */
.hero-scroll{display:none}
@media (min-width:981px){
.hero-scroll{display:grid;place-items:center;position:absolute;bottom:0;
left:max(48px, calc((100vw - 1200px)/2 + 48px));width:64px;height:30px;z-index:4;
background:var(--ink);color:var(--brass);border-radius:14px 14px 0 0;text-decoration:none;
transition:height .2s ease-out,opacity .3s ease-out}
.hero-scroll svg{width:20px;height:20px;animation:heroScrollNudge 1.8s ease-in-out infinite}
.hero-scroll:hover{height:38px}
.hero-scroll:focus-visible{outline:2px solid var(--blue-core);outline-offset:3px}
html.hero-scrolled .hero-scroll{opacity:0;pointer-events:none}
@keyframes heroScrollNudge{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
@media (prefers-reduced-motion:reduce){.hero-scroll svg{animation:none}}
}