/* Start:/local/components/custom/collections.book/templates/.default/style.css?179020069923629*/
/* Книга коллекций (/collections/). Разметку отдаёт custom:collections.book.
   Единица --u = 1 px исходного фото книги (1426×827): вся геометрия разворота снята
   с этого фото и задана в --u, поэтому книга масштабируется целиком, без JS. */

.cbook {
    --cb-text: #231F20;
    --cb-muted: #756a5a;
    /* Буквы металла. Фирменное золото сайта (#a67c52) на 12 px даёт 3,3:1 — берём темнее;
       «серебро» — нейтральный графит: светлое серебро на кремовой бумаге не прочесть. */
    --cb-gold: #7a5429;
    --cb-steel: #66645f;
    --cb-accent: #a67c52;
    --cb-ease: var(--motion-ease, cubic-bezier(.22, 1, .36, 1));
    /* Тень бумаги под обложкой по ходу страницы, снята пипеткой с фото книги: к корешку
       страница темнее. Это обычная полупрозрачная заливка, а не multiply: умножение на серый
       и есть тёмный слой с прозрачностью, а режимы смешивания Safari в анимируемом 3D-слое
       не рисует — на листе обложки светлели бы, и страница «перерисовывалась» на месте. */
    --cb-shade-l: linear-gradient(90deg, rgba(46, 32, 18, .005) 0%, rgba(46, 32, 18, 0) 58%, rgba(46, 32, 18, .045) 80%, rgba(46, 32, 18, .1) 92%, rgba(46, 32, 18, .14) 100%);
    --cb-shade-r: linear-gradient(90deg, rgba(46, 32, 18, .06) 0%, rgba(46, 32, 18, 0) 4%, rgba(46, 32, 18, .005) 14%, rgba(46, 32, 18, .06) 32%, rgba(46, 32, 18, .075) 52%, rgba(46, 32, 18, .065) 78%, rgba(46, 32, 18, .045) 100%);
    /* Зерно бумаги: тёплые тёмные крапинки с прозрачностью до 12%. */
    --cb-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .18 0 0 0 0 .13 0 0 0 0 .08 .22 0 0 0 -.06'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
    /* Бумага листа — сами страницы с фото книги, развёрнутые в плоскость разворота
       (local/tools/make_collections_pages.py). Лист в покое совпадает с фото пиксель в пиксель. */
    --cb-page-l: url("/local/templates/box/images/collections/book-page-l.webp?v=1");
    --cb-page-r: url("/local/templates/box/images/collections/book-page-r.webp?v=1");
    /* Поле страницы: та же формула, что у .main-container сайта (1320 + 20). Нужна, потому
       что блок выходит из контейнера на всю ширину окна, а заголовок должен стоять в сетке. */
    --cb-gutter: max(20px, calc((100vw - 1320px) / 2 + 20px));
    position: relative;
    margin: 0 calc(50% - 50vw) 80px;
}

/* 100vw считает и полосу прокрутки: без clip на системах с классическим скроллбаром
   страница получала бы 15 px горизонтальной прокрутки (тот же приём, что у .gc--wide). */
body:has(.cbook) {
    overflow-x: clip;
}

.cbook-title {
    margin: 10px 0 20px;
    padding: 0 var(--cb-gutter);
}

.cbook__viewport {
    position: relative;
    /* Третье ограничение — по высоте окна: книга целиком в первом экране. 252 px — шапка
       сайта (147), строка заголовка (81) и воздух снизу. 1.724 = 1426 / 827. */
    width: min(1640px, 88vw, calc((100svh - 252px) * 1.724));
    margin: 0 auto;
}

.cbook__stage {
    --u: calc(100cqw / 1426);
    /* Единица сцены без суперсэмплинга: --u внутри плоскости бывает крупнее (см. .cbook__plane). */
    --u1: var(--u);
    position: relative;
    container-type: inline-size;
    aspect-ratio: 1426 / 827;
    width: 100%;
}

/* Контактная тень: вырезанный объект без неё «висит» над фоном. */
.cbook__stage::before {
    content: '';
    position: absolute;
    left: 7%;
    right: 7%;
    bottom: 0.5%;
    height: 9%;
    background: radial-gradient(ellipse at 50% 50%, rgba(35, 31, 32, .34), rgba(35, 31, 32, 0) 68%);
    filter: blur(calc(16 * var(--u)));
    transform: scaleY(.55);
}

.cbook__paper {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    user-select: none;
    pointer-events: none;
}

/* Разворот на фото снят в лёгкой перспективе: верх страниц уже низа на 7,5%. Одна
   плоскость на оба листа с точкой схода по корешку повторяет это точно: корешок
   остаётся вертикальным, внешние края сходятся кверху. Числа — калибровка по углам
   страниц (см. оверлей ?guides в прототипе), менять только вместе с фото книги. */
.cbook__scene {
    position: absolute;
    inset: 0;
    perspective: calc(1646 * var(--u));
    perspective-origin: 49.86% 50%;
    pointer-events: none;
}

.cbook__plane {
    /* Суперсэмплинг для Chrome. Слой с перспективой Chrome растрирует в 1 пиксель на CSS-пиксель
       и на ретине обложки и подписи выходят вдвое мягче (проверено: резкость ×0,1). Поэтому
       плоскость верстается в --ss раз крупнее и сжимается scale(1 / --ss) внутри того же
       transform: Chrome растрирует крупный слой, а сжимает уже видеокарта. Середина нижнего
       края (711, 765)u остаётся на месте, геометрия разворота та же. --ss ставит script.js,
       только в движке Blink (не меньше 2 — это ещё и сглаживает ступеньки изгиба на обычных
       экранах): Safari слои с перспективой и так рисует в полном разрешении.
       Всё внутри плоскости меряется в --u, а пиксели в ней умножаются на --ss. */
    --ss: var(--cb-ss, 1);
    --u: calc(var(--ss) * var(--u1));
    position: absolute;
    left: calc((711 - 625 * var(--ss)) * var(--u1));
    top: calc((765 - 769 * var(--ss)) * var(--u1));
    width: calc(1250 * var(--u));
    height: calc(769 * var(--u));
    transform-origin: 50% 100%;
    transform: rotateX(10deg) scale(calc(1 / var(--ss)));
    transform-style: preserve-3d;
}

.cbook__spread {
    position: absolute;
    inset: 0;
    /* Развороты лежат стопкой в одной рамке. Без этого контейнер последнего разворота
       накрывает первый и съедает клики по обложкам, даже когда его страницы скрыты. */
    pointer-events: none;
}

.cbook__spread[hidden],
.cbook__page[hidden] {
    display: none;
}

/* Страницы абсолютные, а не flex: при листании бывает видна одна правая страница
   разворота без левой, и во flex она съехала бы на место левой. */
.cbook__page {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(2, calc(216 * var(--u)));
    column-gap: calc(60 * var(--u));
    row-gap: calc(18 * var(--u));
    align-content: start;
    padding-top: calc(44 * var(--u));
}

.cbook__page--l {
    left: 0;
    padding-left: calc(78 * var(--u));
    /* Изгиб страницы: на фото книги страница к середине приподнята, у корешка проседает, и
       обложки с подписями ложатся по ней, как напечатанные (карта — make_collections_warp.py).
       Фильтр на всей странице: так обложка и её подпись гнутся вместе, а лист при повороте
       уносит страницу с тем же изгибом — старт и конец поворота не видны. */
    filter: url(#cbook-warp-l);
}

.cbook__page--r {
    left: 50%;
    padding-left: calc(55 * var(--u));
    filter: url(#cbook-warp-r);
}

/* Свой слой у каждой страницы обязателен для изгиба в Safari: без него WebKit считает
   координаты карты изгиба от начала всей плоскости, и правая страница (left: 50%) вместо
   изгиба сдвигалась целиком — а на листе, где страница стоит в нуле, изгибалась. На старте
   поворота это выглядело как перерисовка страницы на месте. */
.cbook__page {
    transform: translateZ(0);
}

.cbook__defs {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
}

.cbook__tile {
    display: block;
    pointer-events: auto;
    color: var(--cb-text);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

/* Обложка без рамки — «напечатана» прямо на странице (решение Вани 2026-09-23 после
   примерки линейки и багета; багет лежит в истории, коммит f7f6da4).
   Своя группа наложения обязательна: без неё ::after с z-index «всплывает» в слой листа,
   и Safari на перелистывании рисует тон и зерно отдельно от фото. */
.cbook__pic {
    position: relative;
    display: block;
    isolation: isolate;
}

.cbook__photo {
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
}

.cbook__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Краска на матовой бумаге: цвет тише, чёрное — тёплая сажа, белое — тон бумаги.
       Только CSS-фильтры: они одинаково рисуются на странице и на листе, в любом браузере. */
    filter: saturate(.88) contrast(.84) brightness(1.04) sepia(.1);
}

.cbook__photo::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    /* Кромка оттиска: у края краска ложится плотнее, а сам край не бритвенный — бумага
       чуть заходит на фото. Без этого обложка читается наклейкой поверх снимка книги. */
    box-shadow: inset 0 0 calc(5 * var(--u)) rgba(62, 48, 36, .26), inset 0 0 0 calc(1 * var(--u)) rgba(246, 239, 231, .55);
    /* Тень страницы растянута на всю страницу и сдвинута на место обложки — тон непрерывен
       от обложки к обложке. Первым слоем — зерно бумаги. */
    pointer-events: none;
}

.cbook__page--l .cbook__photo::after { background-image: var(--cb-grain), var(--cb-shade-l); }
.cbook__page--r .cbook__photo::after { background-image: var(--cb-grain), var(--cb-shade-r); }
.cbook__photo::after { background-size: calc(180px * var(--ss)) calc(180px * var(--ss)), calc(625 * var(--u)) 100%; background-repeat: repeat, no-repeat; }
.cbook__page--l .cbook__tile:nth-child(odd) .cbook__photo::after { background-position: 0 0, calc(-78 * var(--u)) 0; }
.cbook__page--l .cbook__tile:nth-child(even) .cbook__photo::after { background-position: 0 0, calc(-354 * var(--u)) 0; }
.cbook__page--r .cbook__tile:nth-child(odd) .cbook__photo::after { background-position: 0 0, calc(-55 * var(--u)) 0; }
.cbook__page--r .cbook__tile:nth-child(even) .cbook__photo::after { background-position: 0 0, calc(-331 * var(--u)) 0; }

.cbook__label {
    display: block;
    /* Подпись шире обложки на 22u в каждую сторону: «Monarch Butterfly G S» и
       «Обручальные кольца» иначе рвутся на две строки, а вторая упирается в обрез страницы.
       Между соседними подписями остаётся 16u, до корешка — 33u. */
    margin: calc(11 * var(--u)) calc(-22 * var(--u)) 0;
    min-height: calc(40 * var(--u));
    text-align: center;
    font-family: var(--font-family-display, 'Manrope', sans-serif);
    font-weight: 400;
    font-size: clamp(calc(12px * var(--ss)), calc(20 * var(--u)), calc(23px * var(--ss)));
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.cbook__name {
    padding-bottom: calc(2px * var(--ss));
    background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 0 calc(1px * var(--ss));
    transition: background-size 500ms var(--cb-ease);
}

/* abbr[title] — чтобы перебить normalize сайта: он рисует под аббревиатурами пунктир. */
abbr.cbook__metal[title] {
    border-bottom: 0;
    text-decoration: none;
}

.cbook__metal {
    margin-left: .5em;
    font-family: 'Jost', var(--font-family-serif, sans-serif);
    font-weight: 600;
    font-size: .74em;
    letter-spacing: .06em;
    text-decoration: none;
    vertical-align: .12em;
    cursor: inherit;
}

.cbook__metal + .cbook__metal { margin-left: .32em; }
.cbook__metal--g { color: var(--cb-gold); }
.cbook__metal--s { color: var(--cb-steel); }

@media (hover: hover) {
    .cbook__tile:hover .cbook__name { background-size: 100% calc(1px * var(--ss)); }
}

.cbook__tile:focus-visible { outline: none; }
.cbook__tile:focus-visible .cbook__pic { outline: calc(2px * var(--ss)) solid var(--cb-accent); outline-offset: calc(4 * var(--u)); }
.cbook__tile:focus-visible .cbook__name { background-size: 100% calc(1px * var(--ss)); }

/* Лист, который переворачивается. Собирается скриптом из клонов страниц и живёт
   только на время поворота. translateZ — чтобы не спорить по глубине со статичными
   страницами, пока лист лежит в их плоскости. */
.cbook__leaf {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    transform-style: preserve-3d;
    will-change: transform;
    /* Внутри листа — клоны обложек с настоящими ссылками: клик по летящему листу
       открывал бы коллекцию, которую не выбирали. */
    pointer-events: none;
}

.cbook__leaf--fwd { left: 50%; transform-origin: 0 50%; }
.cbook__leaf--back { left: 0; transform-origin: 100% 50%; }

.cbook__face {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.cbook__face--rear { transform: rotateY(180deg); }
.cbook__face--l { background: var(--cb-page-l) 0 0 / 100% 100% no-repeat; }
.cbook__face--r { background: var(--cb-page-r) 0 0 / 100% 100% no-repeat; }
.cbook__face .cbook__page { left: 0; width: 100%; }

.cbook__shade,
.cbook__cast {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
}

.cbook__face--l .cbook__shade { background: linear-gradient(90deg, rgba(62, 48, 36, 0) 35%, rgba(62, 48, 36, .28) 100%); }
.cbook__face--r .cbook__shade { background: linear-gradient(270deg, rgba(62, 48, 36, 0) 35%, rgba(62, 48, 36, .28) 100%); }

.cbook__cast { width: 50%; inset: 0 auto 0 auto; top: 0; bottom: 0; }
.cbook__face--l .cbook__shade, .cbook__cast--l { -webkit-mask: var(--cb-page-l) 0 0 / 100% 100% no-repeat; mask: var(--cb-page-l) 0 0 / 100% 100% no-repeat; }
.cbook__face--r .cbook__shade, .cbook__cast--r { -webkit-mask: var(--cb-page-r) 0 0 / 100% 100% no-repeat; mask: var(--cb-page-r) 0 0 / 100% 100% no-repeat; }
.cbook__cast--r { left: 50%; background: linear-gradient(90deg, rgba(62, 48, 36, .14), rgba(62, 48, 36, 0) 45%); }
.cbook__cast--l { left: 0; background: linear-gradient(270deg, rgba(62, 48, 36, .14), rgba(62, 48, 36, 0) 45%); }

/* Стрелки: одна кнопка-контур на весь блок. Ховер несёт направление: круг заливается
   от центра, стрелка уезжает в свою сторону; тайминги слоёв разные нарочно. */
.cbook__arrow {
    position: absolute;
    top: 50%;
    width: 48px;
    height: 48px;
    margin-top: -24px;
    padding: 0;
    display: grid;
    place-items: center;
    border: 1px solid rgba(35, 31, 32, .28);
    border-radius: 999px;
    background: none;
    color: var(--cb-text);
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition: color 320ms var(--cb-ease), border-color 320ms var(--cb-ease), opacity 320ms var(--cb-ease);
}

.cbook__arrow[hidden] { display: none; }
.cbook__arrow--prev { left: calc(-48px - 1.4vw); }
.cbook__arrow--next { right: calc(-48px - 1.4vw); }

.cbook__arrow::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--cb-text);
    transform: scale(0);
    transition: transform 500ms var(--cb-ease);
}

.cbook__arrow svg { transition: transform 520ms var(--cb-ease); }
.cbook__arrow:disabled { opacity: .28; cursor: default; }
.cbook__arrow:focus-visible { outline: 2px solid var(--cb-accent); outline-offset: 3px; }

@media (hover: hover) {
    .cbook__arrow:not(:disabled):hover { color: #fff; border-color: var(--cb-text); }
    .cbook__arrow:not(:disabled):hover::before { transform: scale(1); }
    .cbook__arrow--prev:not(:disabled):hover svg { transform: translateX(-3px); }
    .cbook__arrow--next:not(:disabled):hover svg { transform: translateX(3px); }
}

/* На десктопе счётчик и подсказка стоят в строке заголовка, справа: под книгой они
   уезжали под сгиб на 1440×900, а справа от заголовка место пустует. С планшета вниз
   возвращаются под книгу — там они рядом со стрелками. */
.cbook__foot {
    position: absolute;
    top: 10px;
    right: var(--cb-gutter);
    height: calc(var(--main-h1-size, 44px) * 1.15);
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-end;
    gap: 28px;
    padding-bottom: 8px;
}

.cbook__count {
    margin: 0;
    font-family: 'Jost', sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 1.8;
    letter-spacing: .18em;
    color: var(--cb-text);
    font-variant-numeric: tabular-nums;
}

.cbook__count[hidden] { display: none; }

.cbook__hint {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: var(--cb-muted);
}

/* Появление лесенкой. У книги без blur: filter на предке плиток ломает их multiply
   (и вешает скриншот Chromium), размытие остаётся заголовку и подписи. */
@keyframes cbook-in {
    from { opacity: 0; transform: translateY(28px); }
    to { opacity: 1; transform: none; }
}

@keyframes cbook-in-blur {
    from { opacity: 0; transform: translateY(28px); filter: blur(14px); }
    to { opacity: 1; transform: none; filter: blur(0); }
}

.cbook-title { animation: cbook-in-blur 900ms var(--motion-ease, cubic-bezier(.22, 1, .36, 1)) both; }
.cbook__viewport { animation: cbook-in 900ms var(--cb-ease) 140ms both; }
.cbook__foot { animation: cbook-in-blur 900ms var(--cb-ease) 300ms both; }

@media (max-width: 1023px) {
    /* Сбоку от книги места нет — стрелки встают под неё, по бокам от счётчика:
       строка счётчика ровно в высоту кнопки, кнопки привязаны к её центру. */
    .cbook__arrow { top: auto; bottom: -68px; margin-top: 0; }
    .cbook__arrow--prev { left: calc(50% - 104px); }
    .cbook__arrow--next { right: calc(50% - 104px); }
    .cbook__foot {
        position: static;
        height: auto;
        display: block;
        margin: 20px auto 0;
        padding: 0 20px;
        text-align: center;
        /* Стрелки лежат в той же полосе, что счётчик. Блок счётчика после появления
           (filter в анимации) становится контекстом наложения и рисуется поверх стрелок:
           тап уходил в текст «1 / 6», а не в кнопку. Поймано настоящим кликом в WebKit. */
        pointer-events: none;
    }
    .cbook__count { margin: 0 0 12px; line-height: 48px; }
}

@media (max-width: 767px) {
    /* Телефон: в окне одна страница. Сцена шире окна в 2,28 раза, между страницами
       разворота она сдвигается (--cb-pan), между разворотами ещё и переворачивается лист.
       Обрезает отдельная обёртка, а не viewport: стрелки висят под книгой и попали бы под нож. */
    .cbook__viewport { width: 100%; }
    .cbook__clip { overflow: hidden; }
    .cbook__stage {
        width: 228vw;
        transform: translateX(var(--cb-pan, -14.1vw));
        transition: transform 800ms var(--cb-ease);
    }
    .cbook[data-side="r"] .cbook__stage { --cb-pan: -114.2vw; }
    .cbook__label { font-size: calc(24 * var(--u)); margin-top: calc(9 * var(--u)); }
    .cbook { margin-bottom: 48px; }
}

@media (prefers-reduced-motion: reduce) {
    .cbook-title, .cbook__viewport, .cbook__foot { animation: none; }
    .cbook__stage, .cbook__name, .cbook__arrow, .cbook__arrow::before, .cbook__arrow svg { transition: none; }
}

.cbook__clip { touch-action: pan-y; }

/* Коллекций с обложкой ещё нет: страница не должна остаться с одним заголовком. */
.cbook-empty {
    max-width: 560px;
    padding: 8px 0 96px;
}

.cbook-empty__text {
    margin: 0 0 24px;
    font-size: 16px;
    line-height: 1.6;
    text-wrap: pretty;
}

/* Список для браузера без скриптов (внутри <noscript>): книга там не листается. */
.cbook-list {
    max-width: 1320px;
    margin: 32px auto 0;
    padding: 0 var(--cb-gutter);
    list-style: none;
    columns: 3 220px;
    font-size: 16px;
    line-height: 2;
}

/* End */
/* /local/components/custom/collections.book/templates/.default/style.css?179020069923629 */