/* Читалка. Отдельный файл: она грузится только на страницах рассказов и
   ничем не обязана карточкам проектов — у прозы своя мера.

   С 02.10.2026 читалка стоит на новой главной: шапка, шрифты и цвета берутся
   из /site.css (его вместе с шапкой вставляет tools/shapka-rasskazov.mjs), а
   здесь — только то, что нужно чтению. Прежняя ночная палитра (розовый,
   фиолетовый фон, свечение) — та самая, про которую Сергей сказал «в том же
   странном цвете, не в духе нашего нового сайта». Своих цветов здесь нет:
   всё сведено к токенам новой главной, а три корешка сборников взяли три
   акцента её разделов. */

.reader {
  --ink: var(--text);
  --ink-soft: var(--muted);
  --ground: var(--bg);
  --ground-soft: var(--panel);
  --rule: var(--line);
  /* Акцент раздела «Рассказы» новой главной (.page-stories в site.css). */
  --accent-read: var(--accent);
  --accent-read-alt: #b392ff;
  --accent-read-third: #5ee39b;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --read-font: Literata, Georgia, "Times New Roman", serif;
  --maxw: 1360px;
  --read-size: 19px;
  /* Мера строки в кеглях текста: одна на абзацы и на служебную строку над ними. */
  --mera: 37;
  background: var(--ground);
  color: var(--ink);
}
/* Бумажный грунт переопределяет сами токены сайта, поэтому вместе с текстом
   светлеет и шапка — чёрная полоса над бумагой выглядела бы заплаткой. */
html[data-ground="paper"] .reader {
  --bg: #f2f1ee;
  --panel: #e7e5e0;
  --text: #1b1e1c;
  --muted: #5a605d;
  --line: #d3cfc6;
  --accent: #8a5a1f;
  --accent-read-alt: #6842a4;
  --accent-read-third: #1f7658;
}
html[data-size="s"] .reader { --read-size: 17px; }
html[data-size="l"] .reader { --read-size: 21px; }
html[data-size="xl"] .reader { --read-size: 24px; }

/* Шапка — та же, что на новой главной, но не липнет: на телефоне она в три
   ряда, около 150 точек, и прилипшая съела бы пятую часть экрана чтения.
   Липкая шапка к тому же закрыла бы полосу прочитанного. */
.reader .site-header { position: static; background: var(--ground); backdrop-filter: none; }
.reader .main-nav a[aria-current=page] { background: var(--ground-soft); }
.reader .pill:hover, .reader .main-nav a:hover { background: var(--ground-soft); }

/* Тонкая полоса прочитанного. Не индикатор загрузки, а ответ на вопрос
   «сколько ещё» — единственное, что читатель спрашивает у длинного текста. */
.reader-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 30;
  background: transparent;
}
.reader-progress i { display: block; height: 100%; width: 0; background: var(--accent-read); }

/* Единственная плавающая навигация текста: круг означает только «вверх».
   Без подписи он не спорит с рассказом, а у цели остаётся честные 44 px. */
.reader-back-to-top {
  position: fixed;
  right: max(18px, env(safe-area-inset-right, 0px));
  bottom: max(18px, env(safe-area-inset-bottom, 0px));
  z-index: 30;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: var(--ground-soft);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .3);
  color: var(--ink);
  cursor: pointer;
}
.reader-back-to-top[hidden] { display: none; }
.reader-back-to-top svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.reader-back-to-top:hover { border-color: var(--accent-read); color: var(--accent-read); }
.reader-back-to-top:focus-visible { outline: 2px solid var(--accent-read); outline-offset: 3px; border-color: var(--accent-read); }

/* Строка под шапкой — по той же ширине, что шапка новой главной. */
.reader-top {
  display: flex; align-items: center; gap: 14px;
  width: min(var(--maxw), calc(100% - 64px)); margin: 0 auto; padding: 18px 0 6px;
}
.reader-top .site-home {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 14px; color: var(--ink-soft);
}
.reader-top .site-home:hover { color: var(--accent-read); }

.reader-bar { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.reader-bar button {
  min-width: 44px; height: 44px; padding: 0 12px;
  border: 1px solid var(--rule); border-radius: 999px;
  background: transparent; color: var(--ink-soft);
  font: 600 12px/1 var(--mono); cursor: pointer;
}
.reader-bar button:hover { color: var(--ink); border-color: var(--accent-read); }
.reader-size { display: inline-flex; gap: 6px; }

/* Та же безопасная зона, что и в подвале: без неё плашка с адресом сайта
   на iPhone закрывает последние строки текста. */
.reader-main { max-width: 720px; margin: 0 auto; padding: 0 20px calc(80px + env(safe-area-inset-bottom, 0px)); }
/* Оглавление — часть сайта, а не узкая колонка книги. Сам текст рассказа
   остаётся комфортной строкой в .reader-main--wide / .story-body. */
.reader-main:not(.reader-main--wide) { max-width: calc(var(--maxw) + 40px); }

.reader .kicker {
  font: 600 11px var(--mono); letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft);
}

/* ── Оглавление ─────────────────────────────────────────────────────── */

.reader-lede { padding: 26px 0 10px; }
.reader-lede h1 { font-size: clamp(32px, 6vw, 48px); font-weight: 600; letter-spacing: -.03em; color: var(--ink); }
.reader-lede p { margin-top: 8px; color: var(--ink-soft); font-size: 14px; }

/* Одна короткая «послесветовая» сборка: сначала остаётся зернистый след
   заголовка, затем текст становится обычным. Это не скрывает чтение и не
   требует скрипта или тяжёлого canvas. */
.afterimage-title {
  position: relative; display: inline-block; isolation: isolate;
  animation: reader-afterimage-solid 1.25s cubic-bezier(.16, .8, .24, 1) both;
  animation-delay: var(--afterimage-delay, 0s); animation-play-state: paused;
}
.afterimage-title::after {
  content: attr(data-afterimage); position: absolute; inset: 0; z-index: -1;
  pointer-events: none; color: transparent;
  background: radial-gradient(circle, var(--accent-read) 0 1px, transparent 1.7px) 0 0 / 7px 7px;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: .12em -.05em 0 rgba(231, 186, 138, .4), -.1em .08em 0 rgba(179, 146, 255, .28);
  animation: reader-afterimage-grain 1.25s cubic-bezier(.16, .8, .24, 1) both;
  animation-delay: var(--afterimage-delay, 0s); animation-play-state: paused;
}
@keyframes reader-afterimage-solid {
  0% { opacity: 1; filter: none; transform: none; }
  55% { opacity: .76; filter: blur(.25px); }
  100% { opacity: .24; filter: blur(1.2px); transform: translateY(-3px); }
}
@keyframes reader-afterimage-grain {
  0% { opacity: 0; transform: translate(-.16em, .08em) scaleX(1.06); filter: blur(.5px); }
  58% { opacity: .52; transform: translate(.08em, -.03em) scaleX(.99); }
  100% { opacity: .94; transform: translate(.28em, -.12em) scaleX(.92); filter: blur(1.4px); }
}
@media (prefers-reduced-motion: reduce) {
  .afterimage-title { animation: none; }
  .afterimage-title::after { display: none; animation: none; }
}

/* «Меня печатали» — единственная строка на странице, которую сказали не
   мы: её поставила чужая редакция. Поэтому она отделена от наших чисел
   полоской, но без хвастовства — рамок и значков тут не надо. */
.reader-lede p.pub {
  margin: 8px 0 0; padding-left: 11px;
  border-left: 2px solid var(--accent-read);
  font-size: 14px; line-height: 1.45; color: var(--ink);
}

/* «Напечатано» — страницы журнала. Кадры разной высоты и разного нрава:
   две обложки, разворот, три страницы текста. Общей обрезки нет намеренно —
   у страницы текста обрезать нечего, там всё содержание. Поэтому колонки
   ровные, а высота у каждого своя. */
.ploshchadki { margin: 6px 0 0; font-size: 14px; color: var(--ink-soft); }
.ploshchadki--chisla { color: var(--ink); }
.ploshchadki a { color: var(--accent-read); text-decoration: none; }
.ploshchadki a:hover { text-decoration: underline; }

.reader .block { margin-top: 46px; }
.reader .block-head { max-width: 720px; padding-bottom: 10px; border-bottom: 1px solid var(--rule); }
.reader .block-head h2 { margin-top: 6px; font-size: 22px; color: var(--ink); }
.pgrid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 16px; align-items: start; margin-top: 18px;
}
.pcard { margin: 0; }
.pcard a { display: block; border-radius: 8px; overflow: hidden; border: 1px solid var(--rule); }
.pcard a:hover, .pcard a:focus-visible { border-color: var(--accent-read); }
.pcard img { display: block; width: 100%; height: auto; }
.pcard figcaption {
  margin-top: 7px; font-size: 12px; line-height: 1.4; color: var(--ink-soft);
}

/* Три сборника — тремя карточками в ряд, в том же языке, что карточки
   новой главной: полоса с картинкой, кикер, название, строка действия.

   .sbornik раскладки не имеет (display: contents): её дети — карточка и
   список — становятся ячейками сетки напрямую. Из-за этого список
   рассказов встаёт ПОД своей строкой карточек, а не в её колонке: на
   широком экране три карточки стоят рядом и список раскрывается во всю
   ширину под ними, на телефоне колонка одна и список оказывается прямо
   под своей карточкой. Одна разметка, оба поведения правильные. */
.bgrid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 30px; }
.bgrid .sbornik { display: contents; }

/* Колонки задаются явно, а не auto-fit. Раскрытый список шире колонки, и
   при автоподборе он разрывал строку прямо на себе: первая карточка
   оставалась одна наверху, а две другие уезжали под список. Поэтому
   карточкам назначен первый ряд, списку второй — тогда три обложки стоят
   рядом, что бы ни было открыто. На телефоне рядов нет вовсе: одна
   колонка, и список встаёт сразу под своей карточкой, а не под всеми. */
@media (min-width: 641px) {
  .bgrid { grid-template-columns: repeat(3, 1fr); }
  .bcard { grid-row: 1; }
  .book-body { grid-row: 2; grid-column: 1 / -1; }
}

.bcard {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--rule); border-radius: 16px;
  background: var(--ground-soft);
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease;
}
.bcard:hover, .sbornik.is-open .bcard { border-color: var(--accent-read); }
.bcard:hover { transform: translateY(-3px); }

/* Обложка вписана целиком, а полосу заполняет её же размытая копия:
   пропорции у трёх обложек разные (квадрат, альбом, портрет), и общая
   обрезка срезала бы названия, которые нарисованы на самих картинках. */
.bart {
  position: relative; display: grid; place-items: center;
  height: 208px; flex: none; overflow: hidden;
  border-bottom: 1px solid var(--rule);
}
.bart-fon {
  position: absolute; inset: -12%; width: 124%; height: 124%;
  object-fit: cover; filter: blur(22px) saturate(1.2) brightness(.62);
}
.bart-list {
  position: relative; max-width: 86%; max-height: 176px;
  width: auto; height: auto; object-fit: contain;
  border-radius: 4px; box-shadow: 0 6px 22px rgba(0, 0, 0, .5);
  transition: transform .3s ease;
}
.bcard:hover .bart-list { transform: scale(1.04); }

.bcard-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.bcard-top { min-height: 14px; }
.bcard-body h2 { margin: 0; font-family: var(--read-font); font-size: 22px; font-weight: 500; line-height: 1.2; letter-spacing: -.01em; color: var(--ink); }
.bcard-text { margin: 0; font-family: var(--mono); font-size: 12px; color: var(--ink-soft); }

/* Оглавление входит в общий поток на узких экранах, а после 1180px становится
   боковой колонкой. */
.reader-main--wide { max-width: 720px; }
.reader-side {
  display: grid; gap: 20px; margin: 0 0 28px;
  font-size: 13px;
}
/* Корешок сборника: своя цветная рамка, плоская панель новой главной.
   Прежние градиенты и тени ушли вместе со старой палитрой; разделение трёх
   сборников (просьба Сергея) держат рамка, плашка заголовка и зазор. */
.reader-side-group {
  --group-accent: var(--accent-read);
  --group-summary: rgba(231, 186, 138, .1);
  overflow: hidden; padding: 0 11px 10px;
  border: 1px solid var(--rule); border-color: var(--group-accent);
  border-left: 4px solid var(--group-accent); border-radius: 14px;
  background: var(--ground-soft);
}
.reader-side-group:nth-child(2) {
  --group-accent: var(--accent-read-alt);
  --group-summary: rgba(179, 146, 255, .1);
}
.reader-side-group:nth-child(3) {
  --group-accent: var(--accent-read-third);
  --group-summary: rgba(94, 227, 155, .08);
}
html[data-ground="paper"] .reader-side-group { --group-summary: rgba(27, 30, 28, .05); }
.reader-side-book {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px; align-content: center;
  min-height: 44px; margin: 0 -11px; padding: 5px 11px 5px 7px;
  border-bottom: 1px solid var(--rule); background: var(--group-summary);
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--group-accent);
  cursor: pointer; list-style: none;
}
.reader-side-book::-webkit-details-marker { display: none; }
.reader-side-book::after {
  content: '›'; grid-column: 2; grid-row: 1 / span 2; align-self: center;
  font-size: 24px; line-height: 1; text-align: right;
  transform: rotate(0); transition: transform 150ms ease;
}
.reader-side-group[open] .reader-side-book {
  margin-bottom: 7px;
  box-shadow: inset 0 -1px 0 var(--group-accent);
}
.reader-side-group[open] .reader-side-book::after { transform: rotate(90deg); }
.reader-side-meta {
  grid-column: 1; grid-row: 2;
  color: var(--ink-soft); font-size: 9px; letter-spacing: .06em;
}
.reader-side-current {
  grid-column: 1; grid-row: 2; justify-self: end; align-self: center;
  padding: 1px 5px; border-radius: 999px;
  background: var(--group-accent); color: var(--ground);
  font-size: 8px; line-height: 1.25; letter-spacing: .04em; white-space: nowrap;
}
.reader-side ul { list-style: none; margin: 0; padding: 0; }
.reader-side li { margin: 0; }
.reader-side a {
  display: block; padding: 6px 8px; border-radius: 6px;
  color: var(--ink-soft); text-decoration: none; line-height: 1.35;
}
.reader-side a:hover { color: var(--ink); background: var(--ground); }
/* Текущий помечен полосой слева, а не цветом: цвет здесь уже занят. */
.reader-side a[aria-current] {
  color: var(--ink); background: var(--ground);
  box-shadow: inset 2px 0 0 var(--group-accent);
}

/* На узком экране оглавление встаёт ПОСЛЕ рассказа. Раньше оно шло первым,
   и на телефоне 375 первая строка текста стояла на 1146-й точке при экране
   в 812: человек открывал рассказ и видел список ссылок. После текста оно
   отвечает на тот вопрос, который у читателя и появляется, — что дальше. */
@media (max-width: 1179px) {
  .reader-main--wide { display: flex; flex-direction: column; }
  .reader-main--wide .reader-col { order: 1; }
  .reader-main--wide .reader-side { order: 2; margin: 40px 0 0; }
}

@media (min-width: 1180px) {
  /* Ширина растёт вместе с экраном, а не стоит на 1060. Сергей сказал дважды:
     «всё ещё всё жмётся к левому краю» — на широком мониторе колонка занимала
     0.55 ширины, и текст стоял правее центра, потому что слева 240 точек
     оглавления, а справа пусто.
     Строку прозы при этом не удлиняем без предела: растёт ЗАЗОР и общая
     ширина, а не длина строки до бесконечности. */
  .reader-main--wide {
    max-width: min(var(--maxw), 100% - 64px);
    padding-inline: 0;
    display: grid; grid-template-columns: 252px minmax(0, 860px); gap: 48px;
    justify-content: center;
    align-items: start;
  }
  .reader-side {
    position: sticky; top: 18px; margin: 0;
    padding-right: 8px;
  }
}

.book-list { list-style: none; margin: 0; padding: 0; counter-reset: story; }
.book-list li { counter-increment: story; }
/* Первый столбец одной ширины у всех строк — и там, где обложка, и там, где
   только номер. Иначе внутри одного сборника названия разъезжались по
   левому краю: у «Трёх изнутри» обложки есть у четырёх рассказов из девяти. */
.book-list a {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto;
  gap: 3px 14px; align-items: start;
  padding: 13px 0; border-bottom: 1px solid var(--rule);
  color: inherit; text-decoration: none;
}
.book-list a::before {
  content: counter(story, decimal-leading-zero);
  font-family: var(--mono); font-size: 11px; color: var(--ink-soft);
  padding-top: 3px;
}
.book-list a:hover { background: var(--ground-soft); }
.story-name { font-size: 17px; color: var(--ink); }
.story-time { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); white-space: nowrap; }
/* Первая фраза вместо описания: у рассказа нет аннотации, и придумывать её
   за автора нечестно — пусть представляет себя сам. */
.story-lead {
  grid-column: 2 / -1; font-size: 13px; line-height: 1.5; color: var(--ink-soft);
}
/* Авторская подпись к рассказу — не аннотация, а его собственная строка,
   написанная для сборника. Она короче вытащенной первой фразы и весит
   иначе: набираем её светлее и без многоточия, потому что это законченная
   мысль, а не обрывок текста. */
.story-lead--avtor { color: var(--ink); font-style: italic; }

.book-list .story-name, .book-list .story-time { padding-top: 1px; }

/* Обложки. Их рисовали под каждый рассказ, и без них раздел терял половину
   впечатления — так и было сказано. В оглавлении маленькие, чтобы список
   оставался списком; на странице рассказа во всю меру текста.
   Со обложкой номер не нужен: якорем строки становится она сама, а лишний
   столбец только растаскивал текст. */
.book-list .has-cover a::before { display: none; }
.story-thumb {
  grid-row: 1 / -1; align-self: start;
  width: 44px; height: 44px; border-radius: 7px;
  object-fit: cover; background: var(--ground-soft);
}


/* Подпись стоит у каждой обложки отдельно, а не одной строкой на раздел:
   часть обложек не её, и общая подпись приписала бы художнице чужие
   фотографии. Псевдоним без ссылки — решение владельца. */
.story-cover { margin: 0 0 26px; }
.story-cover img {
  display: block; width: 100%; max-width: 34em; height: auto;
  border-radius: 12px; border: 1px solid var(--rule); background: var(--ground-soft);
}
/* Обложка сборника вместо своей — полосой, а не во всю высоту. Своя
   обложка у рассказа горизонтальная и занимает разумное место, а обложки
   сборников вертикальные: 887×1200 у «Трёх изнутри» дало бы 744 пикселя
   картинки перед каждым текстом. Полоса заодно честнее по смыслу: это
   обложка сборника, а не иллюстрация к этому рассказу.
   Стоит ПОСЛЕ .story-cover img: сила у правил одна, и пока полоса шла раньше,
   height:auto её перебивал — у 9 рассказов без своей обложки до 02.10.2026
   стоял квадрат во всю ширину (343 точки на телефоне, 544 на ноутбуке). */
.story-cover--book img { height: 220px; object-fit: cover; object-position: center; }
@media (max-width: 640px) { .story-cover--book img { height: 160px; } }

/* ── Сам рассказ ────────────────────────────────────────────────────── */

.story { padding: 26px 0 10px; }
/* Надстрочная строка и строка времени — тем же строем, что подписи на новой
   главной. Селекторы через .story: иначе правило абзаца ниже (.story p)
   перебивало их и набирало служебную строку антиквой в кегль текста. */
.story .story-book {
  font: 600 11px var(--mono); letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-soft);
}
.story h1 {
  margin: 10px 0 8px;
  font-family: var(--read-font); font-weight: 500;
  font-size: clamp(32px, 5.4vw, 48px); line-height: 1.1; letter-spacing: -.02em;
  color: var(--ink);
}
.story .story-meta {
  max-width: calc(var(--mera) * var(--read-size));
  font: 12px var(--mono); color: var(--ink-soft);
  padding-bottom: 22px; margin-bottom: 26px; border-bottom: 1px solid var(--rule);
}

/* Мера строки — то, от чего чтение зависит сильнее, чем от шрифта: на
   ноутбуке 60–75 знаков. Замер 02.10.2026 по всем 23 рассказам на 1440:
   мера 37 — медиана 66 знаков, 93% полных строк в 60–75, длиннее 75 ни
   одной; 38 уже даёт строки по 77. Антиква — Literata новой главной: она уже
   лежит в /fonts/ ради заголовков раздела, второй шрифтовой загрузки нет. */
.story p {
  max-width: calc(var(--mera) * 1em);
  margin: 0 0 1.15em;
  font-family: var(--read-font);
  font-size: var(--read-size);
  line-height: 1.65;
  color: var(--ink);
  hyphens: manual;
}
.story-break {
  width: 46px; margin: 2em 0 2.1em;
  border: 0; border-top: 1px solid var(--rule);
}

.story-nav {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px;
  align-items: center; margin-top: 46px; padding-top: 12px;
  border-top: 1px solid var(--rule);
  font-size: 14px;
}
.story-nav a { display: flex; align-items: center; min-height: 44px; color: var(--ink-soft); text-decoration: none; }
.story-nav a:hover { color: var(--accent-read); }
.story-nav a:last-child { justify-content: flex-end; text-align: right; }
.story-nav a:nth-child(2) { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }

/* Переход между полками: одна ссылка, тем же цветом раздела. */
.reader .story-cross {
  margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--rule);
  font-size: 14px;
}
.reader .story-cross a { color: var(--accent-read); text-decoration: none; }
.reader .story-cross a:hover { text-decoration: underline; }
.reader .story-cross b { font-weight: 400; }

/* Нижний отступ считает безопасную зону: на iPhone под страницей висит
   плашка с адресом сайта, и без этого она съедала последнюю строку. */
.reader .sitefoot {
  width: min(var(--maxw), calc(100% - 64px)); margin: 0 auto;
  padding: 22px 0 calc(40px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--rule);
  font-family: var(--mono); font-size: 11px; letter-spacing: .1em; color: var(--ink-soft);
}
.reader .sitefoot a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; }
.reader .sitefoot a:hover { color: var(--accent-read); }

@media (max-width: 950px) {
  .reader-top, .reader .sitefoot { width: calc(100% - 40px); }
}
@media (max-width: 650px) {
  .reader-top, .reader .sitefoot { width: calc(100% - 32px); }
}
@media (max-width: 640px) {
  .reader-top { padding: 12px 0 4px; gap: 8px; }
  .reader-main { padding: 0 16px calc(60px + env(safe-area-inset-bottom, 0px)); }
  .story-nav { grid-template-columns: 1fr; gap: 0; text-align: left; }
  .story-nav a:last-child { justify-content: flex-start; text-align: left; }
}

/* Внутри читалки проявление блоков выключено: оно хорошо для карточек и
   мешает тексту, который читают подряд. */
.reader [data-reveal] { opacity: 1; transform: none; }

/* ── Оглавление: раскрытие сборника и разворот рассказа ─────────────── */

/* Кнопку и обложку-кнопку рисуем только когда скрипт их включил: без
   скриптов страница остаётся обычным полным оглавлением, и намекать на
   несуществующее нажатие нельзя. */
/* Строка действия внизу карточки — тот же приём, что «Играть ↗» на
   карточках новой главной: не кнопка-пилюля, а подпись, которая говорит,
   что будет по нажатию. Нажимается вся карточка, подпись только объявляет это. */
.book-toggle {
  margin: auto 0 0; padding: 10px 0 0; border: 0; background: none;
  font-family: var(--mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent-read);
  text-align: left; cursor: pointer;
}
.sbornik.is-open .book-toggle { color: var(--ink-soft); }

/* Текст, развёрнутый прямо в списке. Ширина та же, что у страницы
   рассказа, — читать одинаково удобно, где бы ни открыл. */
.story-inline { grid-column: 1 / -1; margin: 14px 0 4px; }
.story-inline-body p { margin: 0 0 1em; max-width: calc(var(--mera) * 1em); font-family: var(--read-font); font-size: 18px; line-height: 1.62; color: var(--ink); }
.story-inline-body .story-break { border: 0; margin: 1.6em auto; width: 60px; border-top: 1px solid var(--rule); }
.story-inline-wait { color: var(--ink-soft); font-family: var(--mono); font-size: 12px; }
.story-inline-more { margin-top: 10px; font-family: var(--mono); font-size: 11px; }
.story-inline-more a { color: var(--accent-read); }
.book-list li.is-open { background: var(--ground-soft); }