/* Скрижаль · Указатель — светлый сайт.
   Один кегль (Geist 15), Times New Roman — названия книг и большие тексты (в корзине — только Geist).
   ПРАВИЛО САЙТА: все движения очень плавные. Мягкое замедление (--soft), долгие длительности,
   без пружин и перелётов. Два приёма на весь сайт:
   · «метка» — при наведении перед словом проявляется точка (круг из знака), слово отступает;
   · «проявка» — появление из мягкого размытия и серого в резкий чёрный. */

:root {
  --rule: #e4e4e4;
  --green: #25ac46;
  --err: #c8372d;
  --soft: cubic-bezier(0.22, 1, 0.36, 1);
  --glide: cubic-bezier(0.65, 0, 0.35, 1);
  --c: 0;            /* 0…1 — насколько свернулась шапка (JS, сглажено) */
  --p: 0;            /* 0…1 — прочитано страницы */
  --hdh: 104px;      /* высота развёрнутой шапки (JS) */
}
.n, .price, .count, .tnum { font-variant-numeric: tabular-nums; }
button { font: inherit; color: inherit; }

/* =================================================================
   МЕТКА — одна анимация наведения на весь сайт
   ================================================================= */
.ln { text-decoration: none !important; cursor: pointer; }
.ln, .mark { position: relative; display: inline-block; padding-left: 0; transition: padding-left 0.9s var(--soft); }
.ln::before, .mark::before {
  content: ""; position: absolute; left: 0; top: var(--dy, 0.6em);
  width: var(--dot, 0.34em); height: var(--dot, 0.34em); margin-top: calc(var(--dot, 0.34em) / -2);
  border-radius: 50%; background: currentColor; opacity: 0; transform: scale(0.2);
  transition: opacity 0.7s var(--soft), transform 0.9s var(--soft);
}
.ln:hover, .ln:focus-visible, .ln.on,
.dock:hover .mark, .dock:focus-visible .mark, .btn:hover .mark,
.line:hover .mark, .line.hov .mark, .row.open .mark, .m-item.hov .mark,
.opt:hover .mark, .opt:has(input:checked) .mark, .sg-o.on .mark { padding-left: var(--gap, 0.85em); }
.ln:hover::before, .ln:focus-visible::before, .ln.on::before,
.dock:hover .mark::before, .dock:focus-visible .mark::before, .btn:hover .mark::before,
.line:hover .mark::before, .line.hov .mark::before, .row.open .mark::before, .m-item.hov .mark::before,
.opt:has(input:checked) .mark::before, .sg-o.on .mark::before { opacity: 1; transform: none; }
.opt:hover:not(:has(input:checked)) .mark::before { opacity: 0.3; transform: scale(0.8); }

/* =================================================================
   ЗНАК И ШАПКА
   ================================================================= */
/* знак: при открытии большой (180 px), при прокрутке сворачивается до 18 px вместе с шапкой */
.brand-logo { --big: 96px; --lk: clamp(0, var(--c) / 0.75, 1); position: fixed; left: var(--m); top: var(--m); z-index: 92;
  width: calc(18px + (var(--big) - 18px) * (1 - var(--lk))); height: auto; }
.brand-logo img { display: block; width: 100%; height: auto; }
html.menu-on .brand-logo, html.co-on .brand-logo { --lk: 1; }
.wl { transform-box: fill-box; }

.hd { position: fixed; left: 0; right: 0; top: 0; z-index: 50; padding-top: var(--m); padding-bottom: var(--m); align-items: start; pointer-events: none; }
.hd > * { pointer-events: auto; }
html.folded .hd > * { pointer-events: none; }
/* строки шапки сворачиваются вверх: у каждой своя задержка --o, прогресс --c — прокрутка (сглаженная) */
.fold { overflow: hidden; }
.fold > span { display: block; --k: clamp(0, (var(--c) - var(--o, 0)) / 0.45, 1); transform: translateY(calc(var(--k) * -108%)); opacity: calc(1 - var(--k) * 0.6); }
body.is-ready .fold > span { animation: hd-in 1.4s var(--soft) backwards; animation-delay: calc(0.1s + var(--o, 0) * 1.2s); }
@keyframes hd-in { from { opacity: 0; filter: blur(6px); transform: translateY(40%); } }

/* две кнопки: проявляются справа, когда строки шапки ушли */
.dock-row { position: fixed; left: 0; right: 0; top: 8px; z-index: 90; pointer-events: none; }
.dock {
  --d: max(clamp(0, (var(--c) - var(--do, 0.5)) / 0.42, 1), var(--force, 0));
  position: relative; height: 34px; padding: 0 8px; border: 0; border-radius: 0;
  display: flex; align-items: center; justify-content: center; background: var(--ink); color: #fff; cursor: pointer;
  pointer-events: auto; text-decoration: none !important; white-space: nowrap;
  clip-path: inset(0 0 0 calc((1 - var(--d)) * 100%));
}
.dock-menu { grid-column: 11; --do: 0.56; }
.dock-cart { grid-column: 12; --do: 0.5; }
html.menu-on .dock, html.co-on .dock { --force: 1; }
.dock > .mark { opacity: calc((var(--d) - 0.5) * 2); }
.dm { display: inline-grid; }
.dm > span { grid-area: 1 / 1; transition: opacity 0.7s var(--soft), filter 0.7s var(--soft); }
.dm-b { opacity: 0; filter: blur(4px); }
html.menu-on .dm-a { opacity: 0; filter: blur(4px); }
html.menu-on .dm-b { opacity: 1; filter: none; }
.cnt { display: inline-block; min-width: 0.6em; }

/* =================================================================
   МЕНЮ — чёрный лист раскрывается из кнопки «Меню»
   ================================================================= */
.menu {
  position: fixed; inset: 0; z-index: 85; background: var(--ink); color: #fff; visibility: hidden;
  display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden;
  clip-path: inset(var(--mt, 8px) var(--mr, 16px) var(--mb, 95%) var(--ml, 85%));
  transition: clip-path 0.9s var(--soft), visibility 0s linear 0.9s;
}
html.menu-on .menu { visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path 1.1s var(--soft), visibility 0s; }
.m-nav { margin-top: max(76px, 11vh); }
.m-item { grid-column: 1 / span 9; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); column-gap: var(--m); align-items: baseline; color: #fff; text-decoration: none !important; transition: opacity 0.8s var(--soft); }
.m-item .n { grid-column: 1; color: #5a5a5a; }
.m-t { grid-column: 2 / span 8; font-size: clamp(32px, min(6.4vw, 9.6vh), 104px); line-height: 1; letter-spacing: -0.03em; white-space: nowrap; }
.m-t .mark { --dot: 0.12em; --gap: 0.36em; --dy: 0.58em; }
/* появление пунктов — проявка, лесенкой */
.m-item > * { opacity: 0; filter: blur(10px); transform: translateY(12px); transition: opacity 0.45s var(--soft), filter 0.45s var(--soft), transform 0.6s var(--soft), color 0.8s var(--soft); }
html.menu-on .m-item > * {
  opacity: 1; filter: blur(0); transform: none;
  transition: opacity 1.2s var(--soft) var(--dl), filter 1.2s var(--soft) var(--dl), transform 1.4s var(--soft) var(--dl), color 0.8s var(--soft) 0s;
}
/* наведение: остальные пункты уходят в тень, номер подсвечивается */
.m-nav.hovering .m-item { opacity: 0.3; }
.m-nav .m-item.hov { opacity: 1; }
.m-item.hov .n { color: #fff; }

.m-img { position: absolute; right: var(--m); top: max(88px, 12vh); width: calc((100vw - 2 * var(--m) - 11 * var(--m)) / 12 * 3 + 2 * var(--m)); aspect-ratio: 2000 / 1450; pointer-events: none; }
.m-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; filter: blur(8px); transform: scale(1.03); transition: opacity 0.9s var(--soft), filter 0.9s var(--soft), transform 1.4s var(--soft); }
.m-img img.cur { opacity: 1; filter: none; transform: none; }

.m-contact { margin-top: auto; padding-top: 3vh; padding-bottom: 18px; align-items: baseline; }
.m-h { color: #5a5a5a; }
.m-contact, .m-word { opacity: 0; filter: blur(10px); transition: opacity 0.45s var(--soft), filter 0.45s var(--soft); }
html.menu-on .m-contact { opacity: 1; filter: none; transition: opacity 1.2s var(--soft) 0.6s, filter 1.2s var(--soft) 0.6s; }
html.menu-on .m-word { opacity: 1; filter: none; transition: opacity 1.6s var(--soft) 0.45s, filter 1.6s var(--soft) 0.45s; }
.m-word { padding: 0 var(--m) var(--m); flex: none; }
.m-word svg { display: block; width: 100%; height: auto; }
html.menu-on, html.co-on { overflow: hidden; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
[data-lenis-prevent] { overscroll-behavior: contain; }

/* =================================================================
   ПЕРВЫЙ ЭКРАН — указатель
   ================================================================= */
main { padding-top: var(--hdh); }
.screen { min-height: calc(100vh - var(--hdh)); min-height: calc(100svh - var(--hdh)); display: grid; grid-template-rows: 1fr auto; }
.idx { align-self: center; align-content: center; }

.row { grid-column: 1 / -1; position: relative; }
.row::before, .idx > .row:last-child::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--rule);
  transform-origin: left; transition: transform 1.4s var(--soft);
}
.row::before { top: 0; }
.idx > .row:last-child::after { bottom: 0; }
.line {
  all: unset; box-sizing: border-box; width: 100%;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--m);
  padding: 7px 0 8px; align-items: baseline; cursor: pointer;
  transition: color 0.8s var(--soft);
}
.line.static { cursor: default; }
.line:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
.line > * { transition: transform 1s var(--soft), opacity 1s var(--soft), filter 1s var(--soft); }
.name { font-size: 22px; line-height: 1; letter-spacing: -0.015em; }
.name .mark { --dot: 0.24em; --gap: 0.62em; }

/* фокус: остальные строки уходят в тень */
.idx.focus .row:not(.hot) .line { color: #c8c8c8; }

/* цена ↔ «В корзину +»: перетекают одна в другую */
.swap { display: inline-grid; justify-items: end; }
.swap > span { grid-area: 1 / 1; transition: opacity 0.8s var(--soft), filter 0.8s var(--soft), transform 1s var(--soft); }
.swap .sw-b { opacity: 0; filter: blur(4px); transform: translateY(35%); }
.line:hover .swap .sw-a, .line.hov .swap .sw-a { opacity: 0; filter: blur(4px); transform: translateY(-35%); }
.line:hover .swap .sw-b, .line.hov .swap .sw-b { opacity: 1; filter: none; transform: none; }

/* статус: точка; «в продаже» тихо дышит */
.status { white-space: nowrap; }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 8px; vertical-align: 1px; background: #c9c9c9; }
.dot.on { background: var(--green); animation: breathe 3.2s ease-in-out infinite; }
.dot.dev { background: none; box-shadow: inset 0 0 0 1px #b8b8b8; }
@keyframes breathe {
  0% { box-shadow: 0 0 0 0 rgba(37, 172, 70, 0.4); }
  70% { box-shadow: 0 0 0 7px rgba(37, 172, 70, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 172, 70, 0); }
}

/* карточка книги раскрывается прямо в указателе */
.more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.9s var(--soft); }
.row.open .more { grid-template-rows: 1fr; }
.more .inner {
  min-height: 0; overflow: hidden;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--m); align-items: start;
}
.more .inner > * { opacity: 0; filter: blur(6px); transition: opacity 0.7s var(--soft), filter 0.7s var(--soft); }
.row.open .more .inner > * { opacity: 1; filter: none; transition-duration: 1.1s; }
.row.open .more .inner > :nth-child(2) { transition-delay: 0.1s; }
.row.open .more .inner > :nth-child(3) { transition-delay: 0.2s; }
.more .facts { padding: 14px 0 28px; }
.more .thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--m); padding: 14px 0 28px; }
.more .thumbs figcaption { margin-top: 6px; }
.more .buy { padding: 14px 0 28px; text-align: right; }
.more .buy p + p { margin-top: 2px; }
.more .buy .add-btn { margin-top: 0; }
.thumbs .dev img { width: 46%; }

/* ---------- лента ---------- */
.strip { padding-top: 40px; padding-bottom: var(--m); align-items: end; }
/* лента по сетке 12: Бытие — обложка и два разворота, Притчи — обложка и корешок */
.strip figure { grid-column: span 2; cursor: pointer; }
/* корешок уже обложки — уменьшаем, чтобы по высоте он совпал с обложками (1637/1200 против 1600/866) */
.strip .tall img { width: 73.8%; }
.strip .cover-p img { width: 98%; }
.strip img { opacity: 0; filter: blur(12px); transition: opacity 1.4s var(--soft), filter 1.4s var(--soft); transition-delay: calc(0.45s + var(--i, 0) * 0.09s); }
.strip figcaption { margin-top: 6px; opacity: 0; transition: opacity 1s var(--soft); transition-delay: calc(0.9s + var(--i, 0) * 0.09s); }

/* =================================================================
   РАЗДЕЛЫ
   ================================================================= */
.sec { margin-top: 26vh; }
.sec-head { position: relative; align-items: baseline; padding-top: 7px; padding-bottom: 8px; }
.sec-head::before {
  content: ""; position: absolute; left: var(--m); right: var(--m); top: 0; height: 1px; background: var(--ink);
  transform: scaleX(0); transform-origin: left; transition: transform 1.6s var(--soft);
}
.sec-head.seen::before { transform: scaleX(1); }
.sec-head .name { margin: 0; }

/* проявка при прокрутке */
.reveal { opacity: 0; filter: blur(8px); transform: translateY(10px); transition: opacity 1.2s var(--soft), filter 1.2s var(--soft), transform 1.4s var(--soft); }
.reveal.seen { opacity: 1; filter: none; transform: none; }

/* ---------- О проекте: текст проявляется по мере чтения (JS ставит цвет и размытие каждому слову) ---------- */
.chap { margin-top: 16vh; align-items: start; }
.chap + .chap { margin-top: 13vh; }
.ink { font-size: clamp(30px, 3.3vw, 52px); line-height: 1.03; letter-spacing: -0.022em; text-wrap: pretty; }
.ink .w { display: inline-block; color: #dcdcdc; filter: blur(3px); }
.ref { margin-top: 18px; }
/* слова-ссылки: в покое — тонкая серая линия; при наведении слева направо прорисовывается зелёная */
@property --kl { syntax: "<percentage>"; inherits: true; initial-value: 0%; }
.kw { --t: 0; text-decoration: none !important; cursor: default; padding-bottom: 0.08em; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background-image:
    linear-gradient(var(--green), var(--green)),
    linear-gradient(rgba(190, 190, 190, var(--t)), rgba(190, 190, 190, var(--t)));
  background-size: var(--kl) 1.5px, 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 calc(100% - 1px), 0 calc(100% - 1px);
  transition: --kl 1.2s var(--soft); }
.kw:hover { --kl: 100%; }
.portrait img { aspect-ratio: 3 / 4; width: 100%; object-fit: cover; }
.portrait figcaption { margin-top: 6px; }
.sign { margin-top: 26px; }

/* ---------- доставка: путь заказа ---------- */
.path { list-style: none; margin-top: 15vh; }
.path li { position: relative; display: flex; flex-direction: column; padding-top: 40px; }
.path li::before {
  content: ""; position: absolute; top: 3px; left: 0; right: calc(-1 * var(--m)); height: 1px; background: var(--ink);
  transform: scaleX(0); transform-origin: left; transition: transform 1s var(--glide);
  transition-delay: calc(0.3s + var(--k, 0) * 0.5s);
}
.path li:last-child::before { right: 0; }
.path .pt {
  position: absolute; top: 0; left: 0; z-index: 1; width: 7px; height: 7px; border-radius: 50%;
  background: #fff; box-shadow: inset 0 0 0 1px var(--ink);
  transition: background 0.6s var(--soft), transform 0.9s var(--soft);
  transition-delay: calc(0.3s + var(--k, 0) * 0.5s), 0s;
}
.path.seen li::before { transform: scaleX(1); }
.path.seen .pt { background: var(--ink); }
.path.seen .pt.end { background: var(--green); box-shadow: none; animation: breathe 3.2s ease-in-out 3s infinite; }
.path li:hover .pt { transform: scale(1.5); }
.path b { margin-top: 14px; }
.path li > span:not(.n) { margin-top: 8px; }
.path li > span:not(.n) { padding-right: var(--m); }
.path li:last-child > span:not(.n) { max-width: calc((100% - 2 * var(--m)) / 3 * 2 + var(--m)); }

/* ---------- вопросы и ответы: свой раздел с заголовком, строки раскрываются ---------- */
.faq-sec { margin-top: 26vh; padding-bottom: 22vh; }
.faq-head { margin-bottom: 9vh; }
.faq .line { padding: 9px 0 10px; }
.faq .name-s .mark { --dy: 0.62em; }
.faq .line::after { content: "+"; justify-self: end; transition: transform 0.9s var(--soft); }
.faq .row.open .line::after { transform: rotate(45deg); }
.faq .more .inner > p { padding: 6px 0 22px; }
/* вопросы — правые 8 колонок, ответ — 5 колонок (удобная длина строки); слева — «Не нашли ответ?» */
.faq-wrap { align-items: start; }
.faq-aside { grid-column: 2 / span 2; position: sticky; top: 96px; }
.faq-aside p + p { margin-top: 6px; }
.faq-aside .ln { text-decoration: underline 1.5px var(--green) !important; text-underline-offset: 0.22em; }
.faq { grid-column: 5 / -1; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: var(--m); }
.faq .line, .faq .more .inner { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.faq .line .n { grid-column: 1; }
.faq .name-s { grid-column: 2 / span 6; }
.faq .line::after { grid-column: 8; }
.faq .more .inner > p { grid-column: 2 / span 5; }

/* =================================================================
   ПОДВАЛ — открывается из-под страницы; зелёный знак проявляется слева направо
   ================================================================= */
main { position: relative; z-index: 1; background: #fff; }
.foot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 0; background: var(--green); color: #fff; padding-top: 56px; --f: 0; }
.foot .muted { color: rgba(255, 255, 255, 0.62); }
.f-top { align-items: baseline; }
.f-top .name { margin: 0; }
.f-req { margin-top: 28px; }
.f-verse { margin-top: 10vh; row-gap: 14px; }
.f-verse blockquote { font-size: clamp(30px, 3.4vw, 54px); line-height: 0.98; letter-spacing: -0.025em; text-wrap: balance; }
/* знак в подвале белый; буквы по очереди всплывают снизу, пока подвал открывается (--f — сглаженная прокрутка) */
.f-word { --fw: clamp(0, (var(--f) - 0.3) / 0.62, 1); padding: 9vh var(--m) 0; color: #fff; }
.f-word svg { display: block; width: 100%; height: auto; overflow: hidden; }
.f-word .wl { transform: translateY(calc((1 - clamp(0, (var(--fw) - var(--i) * 0.06) / 0.58, 1)) * 108%)); }
.f-legal { padding-top: 14px; padding-bottom: var(--m); }
.f-docs { display: flex; justify-content: flex-end; flex-wrap: wrap; column-gap: 1.6em; }

/* =================================================================
   ЗАКАЗ — лист справа, только гротеск
   ================================================================= */
.co-scrim { position: fixed; inset: 0; z-index: 95; background: rgba(0, 0, 0, 0.3); opacity: 0; visibility: hidden; transition: opacity 0.8s var(--soft), visibility 0s linear 0.8s; }
html.co-on .co-scrim { opacity: 1; visibility: visible; transition: opacity 0.8s var(--soft), visibility 0s; }
.co {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 96; width: calc(50vw + 8px); background: #fff;
  display: flex; flex-direction: column; padding: var(--m);
  transform: translateX(101%); transition: transform 1.1s var(--soft);
}
html.co-on .co { transform: none; }
.co-head { display: flex; justify-content: space-between; align-items: baseline; }
.co-x, .co-back { border: 0; background: none; padding: 0; }

.co-steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--m); margin-top: 34px; }
.co-steps li { position: relative; padding-top: 22px; color: var(--muted); transition: color 0.8s var(--soft); }
.co-steps li .n { margin-right: 8px; }
.co-steps li::before { content: ""; position: absolute; top: 3px; left: 0; right: calc(-1 * var(--m)); height: 1px; background: var(--rule); }
.co-steps li::after { content: ""; position: absolute; top: 3px; left: 0; right: calc(-1 * var(--m)); height: 1px; background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform 1s var(--glide); }
.co-steps li:last-child::before, .co-steps li:last-child::after { right: 0; }
.co-steps i { position: absolute; top: 0; left: 0; z-index: 1; width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px #c4c4c4; transition: background 0.8s var(--soft), box-shadow 0.8s var(--soft); }
.co-steps li.cur, .co-steps li.done { color: var(--ink); }
.co-steps li.cur i, .co-steps li.done i { background: var(--ink); box-shadow: none; }
.co-steps li.done::after { transform: scaleX(1); }
.co.fin .co-steps li i { background: var(--green); }

.co-body { position: relative; flex: 1; margin-top: 7vh; min-height: 0; }
.co-step { position: absolute; inset: 0; overflow: hidden auto; opacity: 0; visibility: hidden; filter: blur(8px); transform: translateY(12px); transition: opacity 0.5s var(--soft), filter 0.5s var(--soft), transform 0.7s var(--soft), visibility 0s linear 0.7s; }
.co-step.past { transform: translateY(-12px); }
.co-step.cur { opacity: 1; visibility: visible; filter: none; transform: none; transition: opacity 1s var(--soft) 0.2s, filter 1s var(--soft) 0.2s, transform 1.2s var(--soft) 0.2s, visibility 0s; }
.co-big { font-size: clamp(30px, 2.8vw, 44px); line-height: 1.04; letter-spacing: -0.035em; margin: 6px 0 14px; }
.co-add { margin-top: 18px; }

/* корзина */
.co-items li { display: grid; grid-template-columns: 64px 1fr auto auto; column-gap: var(--m); align-items: center; padding: 12px 0; border-top: 1px solid var(--rule); }
.co-items li:last-child { border-bottom: 1px solid var(--rule); }
.co-items img { width: 64px; height: auto; }
.co-items .nm { display: block; font-size: 22px; line-height: 1.1; letter-spacing: -0.025em; margin-bottom: 3px; }
.qty { display: inline-flex; align-items: baseline; gap: 12px; }
.qty button { border: 0; background: none; padding: 0; cursor: pointer; width: 22px; text-align: center; color: var(--muted); transition: color 0.6s var(--soft); }
.qty button:hover { color: var(--ink); }
.qty .q { min-width: 1.2em; text-align: center; }
.co-items .sum { min-width: 5.5em; text-align: right; }
.co-empty { display: none; }
.co.empty .co-empty { display: block; }
.co.empty .co-items { display: none; }

/* поля: подпись мелко, ввод — крупным гротеском */
.fld { display: block; margin-bottom: 26px; }
.fld input {
  display: block; width: 100%; margin-top: 4px; padding: 4px 0 9px; border: 0; border-bottom: 1px solid var(--rule); border-radius: 0;
  background: none; color: var(--ink); font: 500 24px/1.2 "Geist Site", "Helvetica Neue", Arial, sans-serif; letter-spacing: -0.025em; outline: none;
  transition: border-color 0.8s var(--soft);
}
.fld input::placeholder { color: #cdcdcd; }
.fld input:focus { border-bottom-color: var(--ink); }
.err { display: block; max-height: 0; overflow: hidden; color: var(--err); font-style: normal; opacity: 0; transition: opacity 0.7s var(--soft), max-height 0.7s var(--soft), margin 0.7s var(--soft); }
.fld.bad input { border-bottom-color: var(--err); }
.fld.bad .err, .err.show { max-height: 4em; margin-top: 6px; opacity: 1; }
/* шаг «Доставка»: карта Яндекса для пункта выдачи или адрес для курьера */
.ship-door { display: none; }
.co[data-ship="door"] .ship-pvz { display: none; }
.co[data-ship="door"] .ship-door { display: block; }
#delivery-widget { height: 320px; background: #f3f3f3; }
/* от виджета Яндекса оставляем только карту: панель с адресом и карточкой пункта скрыта (выбор и адрес — наши).
   Логотип и условия Яндекс Карт в углу не трогаем. Класс внутренний: при обновлении виджета сверить */
#delivery-widget .widget__panel { display: none !important; }
#delivery-widget .ydw-widget { overflow: hidden !important; }
#delivery-widget { isolation: isolate; }
.pvz-city { margin-bottom: 12px; }
/* подсказка городов: выпадает под полем, строки как в указателе, активная отмечена той же точкой */
.fld { position: relative; }
.sg { position: absolute; left: 0; right: 0; top: 100%; z-index: 20; background: #fff; box-shadow: 0 0 0 1px var(--ink); max-height: 214px; overflow: hidden auto;
  opacity: 0; visibility: hidden; filter: blur(4px); transform: translateY(-4px); transition: opacity 0.4s var(--soft), filter 0.4s var(--soft), transform 0.5s var(--soft), visibility 0s linear 0.4s; }
.sg.open { opacity: 1; visibility: visible; filter: none; transform: none; transition: opacity 0.4s var(--soft), filter 0.4s var(--soft), transform 0.5s var(--soft), visibility 0s; }
.sg-o { display: flex; justify-content: space-between; gap: var(--m); padding: 8px 12px 9px; cursor: pointer; }
.sg-o + .sg-o { border-top: 1px solid var(--rule); }
.sg-o .muted { text-align: right; }
.pvz-sel { margin-bottom: 8px; min-height: var(--line); }
.pvz-sel.on { color: var(--ink); }
.quote-env { margin-top: 10px; }
.opt .o-d, .opt .o-p { transition: opacity 0.5s var(--soft); }
.opt.calc .o-p { opacity: 0.4; }

/* варианты: строки; выбранный отмечен той же точкой, что и ссылки */
.opts { margin-bottom: 30px; }
.opt { position: relative; display: grid; grid-template-columns: 1fr auto auto; column-gap: var(--m); align-items: baseline; padding: 10px 0 11px; border-top: 1px solid var(--rule); cursor: pointer; }
.opt:last-child { border-bottom: 1px solid var(--rule); }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt .o-t { justify-self: start; }
.opt .o-p { min-width: 4.5em; text-align: right; }
.agree { display: flex; gap: 12px; align-items: baseline; cursor: pointer; }
.agree input { position: absolute; opacity: 0; pointer-events: none; }
.agree i { flex: none; width: 11px; height: 11px; box-shadow: inset 0 0 0 1px var(--ink); transform: translateY(1px); transition: background 0.6s var(--soft); }
.agree:has(input:checked) i { background: var(--ink); }

/* итог и кнопки */
.co-foot { border-top: 1px solid var(--ink); padding-top: 10px; }
.receipt li { display: grid; grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows 0.8s var(--soft), opacity 0.8s var(--soft), filter 0.8s var(--soft); }
.receipt li.enter, .receipt li.leave { grid-template-rows: 0fr; opacity: 0; filter: blur(4px); }
.receipt li > div { min-height: 0; overflow: hidden; display: flex; align-items: baseline; padding: 2px 0; }
.receipt .k { white-space: nowrap; }
.receipt .dots { flex: 1; margin: 0 8px; border-bottom: 1px dotted #bcbcbc; transform: translateY(-4px); }
.receipt .v { white-space: nowrap; transition: opacity 0.5s var(--soft), filter 0.5s var(--soft); }
.receipt .v.swapping { opacity: 0; filter: blur(3px); }
.receipt li.tot { margin-top: 6px; font-weight: 600; }
.co-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; }
.co-back { transition: opacity 0.8s var(--soft), padding-left 0.9s var(--soft); }
.co-back.off { opacity: 0; pointer-events: none; }
.btn { border: 0; border-radius: 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center; min-width: 50%; padding: 13px 16px; background: var(--ink); color: #fff; transition: opacity 0.8s var(--soft); }
.btn::after { content: "→"; transition: transform 0.9s var(--soft); }
.btn:hover::after { transform: translateX(4px); }
.btn.wait { pointer-events: none; opacity: 0.55; }
.btn.idle { opacity: 0.25; }
.co.fin .co-nav { opacity: 0; pointer-events: none; }

/* заказ через Telegram: шаги оформления спрятаны, остаётся состав заказа */
.co.tg-mode .co-steps, .co.tg-mode .co-back { display: none; }
.co.tg-mode .co-nav { justify-content: flex-end; }
.co.tg-mode .co-title::after { content: none; }
@media (max-width: 760px) { .co.tg-mode .co-nav .btn { flex: 1; } }
.co.tg-mode .co-body { margin-top: 5vh; }
.tg { position: fixed; inset: 0; z-index: 110; display: grid; place-items: center; padding: var(--m); background: rgba(0, 0, 0, 0.3);
  opacity: 0; visibility: hidden; transition: opacity 0.7s var(--soft), visibility 0s linear 0.7s; }
.tg.on { opacity: 1; visibility: visible; transition: opacity 0.7s var(--soft), visibility 0s; }
.tg-in { width: min(560px, 100%); max-height: calc(100vh - 2 * var(--m)); overflow: hidden auto; background: #fff; padding: var(--m) var(--m) 20px; opacity: 0; filter: blur(8px); transform: translateY(14px);
  transition: opacity 0.6s var(--soft), filter 0.6s var(--soft), transform 0.9s var(--soft); }
.tg.on .tg-in { opacity: 1; filter: none; transform: none; transition-delay: 0.1s; }
/* «Закрыть» — в углу поверх, чтобы заголовок начинался сразу, без пустой строки над ним */
.tg-in { position: relative; }
.tg-head { position: absolute; top: var(--m); right: var(--m); }
.tg-x { border: 0; background: none; padding: 0; }
/* окно-объявление: метка «Временно», крупный заголовок, живой текст, готовое сообщение */
.tg-tag { display: flex; align-items: baseline; gap: 8px; color: var(--muted); }
.tg-tag .dot { margin: 0; transform: translateY(-1px); }
.tg-h { font-size: clamp(26px, 2.4vw, 34px); line-height: 1.05; letter-spacing: -0.03em; text-wrap: balance; margin-bottom: 14px; padding-right: 76px; }
.tg-text { color: #555; margin-bottom: 22px; text-wrap: pretty; }
.tg-msg { margin: 0 0 18px; padding: 10px 12px; box-shadow: inset 0 0 0 1px var(--rule); font: inherit; white-space: pre-wrap; }
.co-soon-note { display: none; }
.co.tg-mode .co-soon-note { display: flex; gap: 8px; align-items: baseline; color: var(--muted); padding-bottom: 10px; margin-bottom: 8px; border-bottom: 1px solid var(--rule); }
.co-soon-note .dot { flex: none; margin: 0; transform: translateY(-1px); }
.tg-act { display: flex; align-items: center; justify-content: space-between; gap: var(--m); }
.tg-act .btn { min-width: 60%; text-decoration: none !important; }
.tg-copy { border: 0; background: none; padding: 0; }
@media (max-width: 760px) { .tg-act { flex-direction: column-reverse; align-items: stretch; } .tg-act .btn { min-width: 0; } .tg-copy { align-self: flex-start; } }

/* книга плывёт из кнопки в корзину */
.fly { position: fixed; left: 0; top: 0; z-index: 99; width: 56px; pointer-events: none; }

/* =================================================================
   ЗАГРУЗКА, ПРЕВЬЮ, ТЕЛЕФОН
   ================================================================= */
body.is-loading .row::before, body.is-loading .idx > .row:last-child::after { transform: scaleX(0); }
body.is-loading .line > * { opacity: 0; filter: blur(6px); transform: translateY(6px); }
.idx .row:nth-child(1)::before { transition-delay: 0.05s; }
.idx .row:nth-child(2)::before { transition-delay: 0.15s; }
.idx .row:nth-child(3)::before { transition-delay: 0.25s; }
.idx > .row:last-child::after { transition-delay: 0.35s; }
body.is-ready .strip img { opacity: 1; filter: none; }
body.is-ready .strip figcaption { opacity: 1; }
.line > * { transition-delay: var(--d, 0s); }

.idx { position: relative; }
.preview {
  position: absolute; left: 0; top: calc(100% + 22px); z-index: 30; pointer-events: none;
  width: 260px; height: 188px; opacity: 0; transform-origin: 0 0;
  transition: opacity 0.5s var(--soft);
}
.preview.show { opacity: 1; }
.preview .frame { position: absolute; inset: 0; }
.preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.35s var(--soft); }
.preview img.cur { opacity: 1; }
.tip { position: fixed; left: 0; top: 0; z-index: 30; pointer-events: none; opacity: 0; transition: opacity 0.5s var(--soft); white-space: nowrap; }
.tip.show { opacity: 1; }

@media (max-width: 760px) {
  .hd > p:first-child, .hd > ul, .hd > p:last-child { display: none; }
  .dock { --force: 1; }
  .dock-row { top: var(--m); }
  main { padding-top: 96px !important; }
  .screen { min-height: calc(100svh - 96px); }
  .brand-logo { --big: 64px; }
  .dock-menu { grid-column: 5 / span 4; }
  .dock-cart { grid-column: 9 / span 4; }
  .line { grid-template-columns: 2.2em 1fr auto; row-gap: 2px; }
  .line > * { grid-column: auto !important; }
  .line > :nth-child(n+3):not(.status):not(.price) { display: none; }
  .status { grid-column: 2 !important; }
  .price { grid-row: 1; grid-column: 3 !important; }
  .more .inner > * { grid-column: 1 / -1 !important; }
  .more .thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; }
  .more .buy { text-align: left; }
  /* первый экран на телефоне: лента — одна строка, листается пальцем; обложки и развороты одной высоты, как настоящие книги */
  .strip { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 var(--m);
    padding: 28px var(--m) var(--m); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .strip::-webkit-scrollbar { display: none; }
  .strip figure { flex: none; scroll-snap-align: start; }
  .strip img, .strip .tall img, .strip .cover-p img { width: auto; height: clamp(180px, 32svh, 320px); }
  .idx { align-self: start; margin-top: 4svh; }
  .preview, .tip, .m-img { display: none; }
  .chap > *, .chap > div, .author > div { grid-column: 1 / -1 !important; }
  .chap .n { display: none; }
  .chap-h { margin-bottom: 10px; }
  .portrait { max-width: 50%; margin-bottom: 20px; }
  /* шапки разделов на телефоне: тире, название, подпись справа — одной строкой */
  .sec-head, .faq-head { grid-template-columns: 1.4em 1fr auto; column-gap: 10px; }
  .sec-head > *, .faq-head > * { grid-column: auto !important; }
  .sec-head > :nth-child(3), .faq-head > :nth-child(3) { justify-self: end; text-align: right; }
  /* путь заказа на телефоне — сверху вниз: точки на вертикальной линии слева */
  .path { display: block; margin-top: 6vh; }
  .path li { padding: 0 0 36px 28px; }
  .path li:last-child { padding-bottom: 0; }
  .path li::before { top: 4px; bottom: -4px; left: 3px; right: auto; width: 1px; height: auto; transform: scaleY(0); transform-origin: top; }
  .path li:last-child::before { display: none; }
  .path.seen li::before { transform: scaleY(1); }
  .path .pt { top: 1px; }
  .path b { margin-top: 10px; }
  .path li:last-child > span:not(.n) { max-width: none; }
  /* пустоты меньше, чем на компьютере */
  .sec { margin-top: 16vh; }
  .chap { margin-top: 7vh; }
  .chap + .chap { margin-top: 8vh; }
  .ink { font-size: 28px; line-height: 1.06; }
  .faq .line { grid-template-columns: 2.2em 1fr auto; }
  .faq .line::after { grid-column: 3; }
  .faq-wrap { display: flex; flex-direction: column-reverse; gap: 44px; }
  .faq-aside { position: static; }
  .faq { display: block; }
  .m-item { grid-column: 1 / -1; grid-template-columns: 2.4em 1fr; }
  .m-t { grid-column: 2; font-size: 10.4vw; white-space: normal; }
  .m-contact > * { grid-column: 1 / -1 !important; }
  .co { width: 100vw; }
  .co-steps .lbl { display: none; }
  .co-title::after { content: " — " attr(data-step); }
  .opt { grid-template-columns: 1fr auto; }
  .opt > .muted { display: none; }
  .f-top ul, .f-req ul, .f-verse > * { grid-column: 2 / -1 !important; margin-top: 10px; }
}

/* строки указателя на телефоне — «карточка»: номер и статус сверху, крупное название, под ним формат · главы и цена.
   Порядок ячеек в строке: 1 номер, 2 название, 3 перевод, 4 формат, 5 главы, 6 статус, 7 цена */
@media (max-width: 760px) {
  #books .line > * { grid-column: auto !important; grid-row: auto !important; }
  #books .line > :nth-child(3) { display: none !important; }

  #books .line { grid-template-columns: auto 1fr auto; column-gap: 0; row-gap: 4px; padding: 14px 0 16px; }
  #books .line > .n { grid-column: 1 / 3 !important; grid-row: 1 !important; }
  #books .line > .status { grid-column: 3 !important; grid-row: 1 !important; justify-self: end; }
  #books .line > .name { grid-column: 1 / -1 !important; grid-row: 2 !important; font-size: 30px; margin: 2px 0 4px; }
  #books .line > :nth-child(4) { display: block !important; grid-column: 1 !important; grid-row: 3 !important; color: var(--muted); }
  #books .line > :nth-child(5) { display: block !important; grid-column: 2 !important; grid-row: 3 !important; color: var(--muted); }
  #books .line > :nth-child(5)::before { content: "\00a0·\00a0"; }
  #books .line > .price { grid-column: 3 !important; grid-row: 3 !important; }
}

body.shot *, body.shot *::before, body.shot *::after { transition: none !important; animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; }
}

/* два абзаца «проявки» подряд — с отбивкой */
p.ink + p.ink { margin-top: 0.5em; }