/* -----------------------------------------------------------------------
   site.css — оболочка. Устройство взято с becaneparis целиком.

   ГЛАВНОЕ ПРАВИЛО, из которого следует всё остальное: во время перехода
   на экране ДВА листа разом, и они не должны видеть правил друг друга.
   Поэтому здесь нет ни одного голого `body`, `.page` или `.masthead` —
   всё, что принадлежит странице, живёт в её собственном файле и носит
   её имя: .p-index, .p-untitled, .p-documentation, .p-license.
   Здесь только то, что общее для всех и не может конфликтовать.

   Роль body отдана ЛИСТУ. Раньше колонку держал body: он был флексом, а
   .page тянулся в нём. Теперь между ними стоит лист, поэтому флексом
   стал он, а страница получает свои прежние свойства через .p-* — числа
   не изменились ни одного.
   ----------------------------------------------------------------------- */

/* Полоса прокрутки на месте ВСЕГДА, а не только когда странице есть что
   листать. `scrollbar-gutter: stable` держал под неё место, но саму
   полосу не показывал — и на переходе, когда оба листа вынуты из потока
   и у документа нет высоты, она пропадала и возвращалась. `overflow-y:
   scroll` занимает ровно те же 15 px и рисует её постоянно.          */
html { overflow-y: scroll; }
html, body { margin: 0; padding: 0; background: #000000; }

/* прокрутка больше нигде не выключается на уровне документа. index
   держал её выключенной, пока был одноэкранным; выключать больше
   нечего — с 22 августа хода у него нет вовсе (--field: 0), а полоса
   на месте от правила выше: без ползунка, дорожка и стрелки.        */

/* ------------------------------------------------------------------ лист
   единица страницы. на экране их бывает два: уходящий и приходящий.  */
.sheet {
    position: relative;
    z-index: 5;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.sheet-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 100%;
}

/* ============================================================== лист
   Коллекция. Одинакова на всех четырёх страницах, поэтому живёт
   здесь, а не в правилах какой-то одной.

   Числа сняты с тех. мишени index: её сильные линии стоят на 10%
   и 90% по обеим осям — это её 80-процентная зона, строки встают по
   ним. Высота строки та же, что у кнопки view, чтобы на сайте не
   завёлся второй кегль.                                                */
.sheet {
    --list-x:        10%;
    --list-y:        10%;
    --list-h:       15px;
    --list-size:    12px;
    --list-gap:      8px;
}

.sheet .collection {
    display: none;
    position: fixed;
    left: var(--list-x);
    right: var(--list-x);
    top: var(--list-y);
    z-index: 900;
}
html[data-list="open"] .sheet .collection { display: block; }

.sheet .col-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--page-pad);
    height: var(--list-h);
    padding: 0 0.615em;
    background: #ffffff;
    color: var(--bg);
    font-family: var(--sans);
    font-size: var(--list-size);
    border: 0;
    transition: background var(--out), color var(--out);
}
.sheet .col-row + .col-row { margin-top: var(--list-gap); }

/* на наведении строка выворачивается в чёрное. Времена те же, что у
   всех наведений на сайте: приход медленнее ухода.                 */
/* ПОКА ОКНО ОТКРЫТО, ЛИСТ ПОД НИМ ЗАТЕМНЯЕТСЯ. Размытие на 2.93 снято
   23 августа: на сайте есть своё затемнение, то самое, которым гаснет
   нижний лист в стопке, и второго приёма для того же смысла не надо.
   Число тоже оттуда — --stack-dim.

   Слоем, а не фильтром: фильтр пришлось бы вешать поимённо на каждого
   ребёнка, чтобы не задеть само окно, — так и было, и index держал для
   этого два своих правила. Слой ложится поверх листа и под окно, и
   знать про содержимое ему не нужно.                              */
html[data-list="open"] .sheet::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 850;              /* выше шапки, 800; ниже окна, 900 */
    background: #000;
    opacity: var(--stack-dim);
    pointer-events: none;
}

@font-face {
    font-family: "Ronzino";
    src: url("fonts/Ronzino-Regular.woff2") format("woff2");
    font-weight: 400; font-style: normal; font-display: block;
}

/* Налиста здесь больше нет. Межстраничный переход браузера
   (@view-transition + ::view-transition-old/new с page-in/page-lift)
   уносил страницу вверх и подавал новую снизу — это ровно тот принцип,
   от которого мы отказались в пользу статического преобразования.
   Без motion.js переход теперь просто не играет: обычная навигация.  */