/* ============================================================
   Чтение вслух — «картотека» читального зала после закрытия.
   Тёмное дерево стеллажей, тёплый свет одной лампы, карточки
   каталога вместо плиток «магазина аудиокниг».
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500&family=PT+Serif:ital,wght@0,400;0,700;1,400&family=PT+Mono&display=swap');

:root {
  /* Светлая версия: не тёмный читальный зал ночью, а сама карточка в руке при
     дневном свете. Материалы настоящей картотеки — манильский картон, лента
     пишущей машинки, малахит (камень Бажова, он же в этом каталоге) и
     штемпельный сурик на возрастной метке.

     Намеренно НЕ тёплый кремовый с терракотой: это то, во что светлая тема
     превращается по умолчанию. Бумага уведена в серо-зелёное, чернила синеватые.

     Имена токенов означают ровно то, что означали: `ink` — чернила, то есть
     текст; `paper` — бумага, то есть фон. Роли поменялись местами, значения
     остались честными. */
  --paper:      #e6e0cf;   /* бумага карточки — фон страницы */
  --wood:       #efeade;   /* сама карточка, светлее поля */
  --wood-2:     #f6f2e8;   /* карточка под курсором */
  --ink:        #23262b;   /* чернила: синевато-чёрный, а не чёрный */
  --paper-dim:  #6f6a5f;   /* карандашная пометка, второстепенный текст */
  --malachite:  #2f6b56;   /* фольклор, сказы — и основное действие */
  --malachite-d:#1f4a3b;
  --amber:      #b4741d;   /* лампа: только то, что звучит сейчас */
  --amber-d:    #8a5713;
  --plum:       #8e3b3b;   /* штемпельный сурик: мистика, 16+ */
  --rule:       #cdc5b0;   /* типографская линейка */
  --radius: 3px;
  --shadow: 0 1px 0 rgba(35,38,43,.06), 0 10px 22px -16px rgba(35,38,43,.35);
}

* { box-sizing: border-box; }
html { color-scheme: light; }

body {
  margin: 0;
  background: var(--paper);
  background-image:
    repeating-linear-gradient(180deg, rgba(35,38,43,.030) 0 1px, transparent 1px 26px);
  color: var(--ink);
  font-family: 'PT Serif', Georgia, serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

::selection { background: var(--amber-d); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

.skip-link {
  position: absolute; left: -999px; top: 0;
}
.skip-link:focus { left: 8px; top: 8px; z-index: 100; background: var(--amber); color: var(--paper); padding: .5em 1em; }

/* ---------- header ---------- */

.site-header {
  max-width: 1040px;
  margin: 0 auto;
  padding: 3.2rem 1.5rem 1.6rem;
}

.site-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  font-style: italic;
  font-size: clamp(2.1rem, 4vw, 3rem);
  margin: 0 0 .3rem;
  letter-spacing: .01em;
}

.site-title .amp { color: var(--amber); font-style: normal; }

.site-tagline {
  margin: 0;
  color: var(--paper-dim);
  font-size: 1.02rem;
  max-width: 46em;
}

/* Пунктир под перечислением жанров убран: на тёмном фоне линейка была едва
   заметна, на бумаге она стала читаться как подчёркивание ссылки — и по ней
   пытаются нажать. Выделения цветом достаточно: строка идёт карандашной
   пометкой, перечисление — чернилами. */
.site-tagline em {
  color: var(--ink);
  font-style: normal;
}

.about-link {
  display: inline-block;
  margin-top: .9rem;
  font-family: 'PT Mono', monospace;
  font-size: .78rem;
  color: var(--paper-dim);
  text-decoration: none;
  border-bottom: 1px dotted var(--rule);
}
.about-link:hover { color: var(--amber); border-color: var(--amber); }

.work.about p {
  color: var(--paper-dim);
  max-width: 62ch;
}
.work.about p:not(.work-note) { color: var(--ink); }

/* ---------- search / filter slip ---------- */

.catalog-slip {
  max-width: 1040px;
  margin: 0 auto 1.1rem;
  padding: 0 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1rem;
  align-items: baseline;
}

.slip-label {
  font-family: 'PT Mono', monospace;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--paper-dim);
  margin-right: .3rem;
}

/* Рубрики — НЕ кнопки. На карточке каталога предметные рубрики набраны
   в строку, а не расставлены плашками, и это здесь не стилизация под старину:
   тегов двадцать два, и в виде коробочек они образуют стену из двадцати семи
   прямоугольников впереди самого каталога. Набор в строку убирает стену и
   возвращает главное на первое место. */
.tab {
  font-family: 'PT Mono', monospace;
  font-size: .78rem;
  letter-spacing: .02em;
  color: var(--paper-dim);
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  padding: .1rem 0;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}

.tab:hover { color: var(--ink); border-bottom-color: var(--rule); }

/* Выбранное подчёркнуто янтарём — тем же цветом, которым горит звучащая
   дорожка. Один цвет, один смысл: «сейчас в работе». */
.tab[aria-pressed="true"] {
  color: var(--ink);
  font-weight: 700;
  border-bottom-color: var(--amber);
}

/* Первая фраза записи под номером части. Подаётся тише названия и в
   кавычках: это цитата из текста, а не имя главы, и путать одно с другим
   нельзя — имя дала бы Мария, а фразу взял из звука робот. */
.chapter-opening {
  margin: .15rem 0 .35rem;
  font-family: 'PT Serif', Georgia, serif;
  font-style: italic;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--paper-dim);
}

.chapter-opening::before { content: '«'; }
.chapter-opening::after { content: '»'; }

/* ---------- search slip ---------- */

/* Поиск — третий формуляр в той же стопке, поэтому у него нет ни рамки, ни
   лупы, ни скруглённой «пилюли»: всё это элементы из другого интерфейса, и
   рядом с бумажными вкладками они читаются как чужая наклейка. Поле — строка
   на линейке, которая загорается янтарём, как активная вкладка. */
.slip-search { align-items: baseline; }

.search-field {
  position: relative;
  display: inline-flex;
  align-items: center;
  border-bottom: 1px solid var(--rule);
  transition: border-color .15s;
}

.search-field:focus-within { border-bottom-color: var(--amber); }

.search-input {
  font-family: 'PT Mono', monospace;
  font-size: .8rem;
  color: var(--ink);
  background: none;
  border: 0;
  padding: .15rem 1.3rem .25rem 0;
  width: 15rem;
  max-width: 60vw;
}

.search-input::placeholder { color: var(--paper-dim); }
.search-input:focus { outline: none; }
/* Родной крестик Safari/Chrome убран: он рисуется системным стилем и ломает
   строку. Свой стоит на его месте и виден только когда есть что чистить. */
.search-input::-webkit-search-cancel-button { display: none; }

.search-clear {
  position: absolute;
  right: 0;
  font-family: 'PT Mono', monospace;
  font-size: .95rem;
  line-height: 1;
  color: var(--paper-dim);
  background: none;
  border: 0;
  padding: 0 .1rem;
  cursor: pointer;
}

.search-clear:hover { color: var(--ink); }

.search-count {
  font-family: 'PT Mono', monospace;
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--paper-dim);
}

/* Найденный кусок подчёркнут тем же янтарём, что и активная вкладка: один
   цвет — один смысл, «вот это сейчас в работе». Фона нет намеренно, заливка
   поверх Playfair в карточке выглядит как дефект печати. */
.card mark {
  background: none;
  color: inherit;
  box-shadow: inset 0 -.35em 0 color-mix(in srgb, var(--amber) 30%, transparent);
  border-radius: 2px;
}

/* ---------- catalog grid ---------- */

.catalog {
  max-width: 1040px;
  margin: 0 auto;
  padding: .8rem 1.5rem 5rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.1rem 1rem;
}

/* the signature element: a library index card, complete with a
   punched top tab and a stamped corner ticket for age + duration */
.card {
  position: relative;
  background: var(--wood);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem 1.1rem 1.1rem;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  transform: rotate(0deg);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.card::before {
  /* punch-tab of a physical catalog card */
  content: "";
  position: absolute;
  top: -1px; left: 50%;
  width: 34px; height: 10px;
  transform: translateX(-50%);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-top: none;
  border-radius: 0 0 4px 4px;
}
.card:hover, .card:focus-visible {
  transform: rotate(-0.6deg) translateY(-3px);
  background: var(--wood-2);
  border-color: var(--paper-dim);
}

.card-eyebrow {
  font-family: 'PT Mono', monospace;
  font-size: .68rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--malachite);
}
.card-eyebrow.is-plum { color: var(--plum); }

/* Строка приёма: слева род («сказ», «роман»), справа дата поступления —
   ровно так заполнена верхняя строка настоящей каталожной карточки. */
.card-rule {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .6rem;
}

.card-added {
  font-family: 'PT Mono', monospace;
  font-size: .68rem;
  letter-spacing: .04em;
  color: var(--paper-dim);
  white-space: nowrap;
}

/* Свежую карточку в ящике находят по цветной закладке, а не по надписи
   «НОВОЕ». Язычок у карточки уже есть — у недавних он малахитовый, и это
   единственное цветное пятно в сетке. */
.card.is-fresh::before {
  background: var(--malachite);
  border-color: var(--malachite-d);
}

/* Сколько всего в последней партии. Стоит вплотную к слову: это не отдельная
   плашка со счётчиком, а приписка карандашом на разделителе ящика. */
.tab-count {
  font-size: .62rem;
  vertical-align: .35em;
  margin-left: .2rem;
  color: var(--paper-dim);
}
.tab[aria-pressed="true"] .tab-count { color: var(--malachite); }

.card-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  font-size: 1.28rem;
  line-height: 1.22;
  margin: 0;
}

.card-author {
  color: var(--paper-dim);
  font-size: .92rem;
  font-style: italic;
}

.card-meta {
  margin-top: auto;
  padding-top: .6rem;
  border-top: 1px dashed var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'PT Mono', monospace;
  font-size: .72rem;
  color: var(--paper-dim);
}

.stamp {
  display: inline-block;
  border: 1px solid currentColor;
  border-radius: 2px;
  padding: .12rem .4rem;
  transform: rotate(-2deg);
}

.card-tags {
  display: flex; flex-wrap: wrap; gap: .3rem;
}
.tag {
  font-family: 'PT Mono', monospace;
  font-size: .66rem;
  color: var(--paper-dim);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: .08rem .35rem;
}

/* ---------- work page ---------- */

.work {
  max-width: 760px;
  margin: 0 auto;
  padding: 3rem 1.5rem 5rem;
}

.back-link {
  display: inline-block;
  font-family: 'PT Mono', monospace;
  font-size: .78rem;
  color: var(--paper-dim);
  text-decoration: none;
  margin-bottom: 1.6rem;
}
.back-link:hover { color: var(--amber); }

.work-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-style: italic;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin: 0 0 .3rem;
}
.work-author { color: var(--paper-dim); font-size: 1.05rem; margin: 0 0 1.2rem; }

.work-facts {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-bottom: 1.6rem;
}

.work-note {
  color: var(--paper-dim);
  border-left: 2px solid var(--malachite);
  padding-left: .9rem;
  margin: 1.4rem 0;
}

.verification {
  font-size: .82rem;
  color: var(--paper-dim);
  font-family: 'PT Mono', monospace;
  margin: 1.6rem 0 2rem;
  padding: .8rem .9rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.verification b { color: var(--ink); font-weight: 600; }

.play-all {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: 'PT Mono', monospace;
  font-size: .82rem;
  letter-spacing: .02em;
  color: var(--paper);
  background: var(--amber);
  border: 1px solid var(--amber-d);
  border-radius: var(--radius);
  padding: .55rem 1rem;
  cursor: pointer;
  margin-bottom: 1.4rem;
  transition: background .15s, transform .1s;
}
.play-all:hover { background: #e39c50; }
.play-all:active { transform: translateY(1px); }

.chapters { list-style: none; margin: 0; padding: 0; }
.chapter {
  display: grid;
  grid-template-columns: 2.2rem 1fr auto;
  gap: .8rem;
  align-items: center;
  padding: .85rem 0;
  border-bottom: 1px solid var(--rule);
  transition: background .2s;
}
.chapter.is-playing {
  background: var(--wood);
  margin: 0 -1rem;
  padding: .85rem 1rem;
  border-radius: var(--radius);
  border-bottom-color: transparent;
}
.chapter.is-playing .chapter-n { color: var(--amber); }
.chapter-n {
  font-family: 'PT Mono', monospace;
  color: var(--paper-dim);
  font-size: .85rem;
}
.chapter-title { font-size: .96rem; }
.chapter-dur {
  font-family: 'PT Mono', monospace;
  font-size: .78rem;
  color: var(--paper-dim);
}
.chapter audio { width: 100%; margin-top: .4rem; grid-column: 1 / -1; }
.chapter a.tg-link {
  font-family: 'PT Mono', monospace;
  font-size: .7rem;
  color: var(--paper-dim);
  text-decoration: none;
  border-bottom: 1px dotted var(--rule);
}
.chapter a.tg-link:hover { color: var(--amber); }

.gallery { display: flex; gap: .6rem; flex-wrap: wrap; margin: 1.4rem 0; }
.gallery img { max-height: 160px; border-radius: var(--radius); border: 1px solid var(--rule); }

.site-footer {
  max-width: 1040px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
  color: var(--paper-dim);
  font-family: 'PT Mono', monospace;
  font-size: .72rem;
}

@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  .card:hover, .card:focus-visible { transform: none; }
}

@media (max-width: 640px) {
  .site-header { padding: 2rem 1.2rem 1.2rem; }
  /* На узком экране три формуляра («картотека», «возраст», «поиск») стоят
     впритык друг к другу, и их подписи набраны той же мелкой моно-строкой,
     что и сами варианты, — три блока сливаются в одну простыню текста.
     Метка встаёт на отдельную строку (полноширинный flex-элемент) и красится
     малахитом — тем же цветом, которым на карточке отмечен род произведения,
     — а между формулярами появляется линейка картотечного ящика. */
  .catalog-slip { padding: .65rem 1.2rem; gap: .5rem .8rem; }
  .catalog-slip + .catalog-slip { border-top: 1px solid var(--rule); }
  .slip-label { flex: 1 0 100%; margin: 0 0 .1rem; color: var(--malachite); }
  /* На телефоне поле занимает строку целиком: рядом с меткой ему остаётся
     полтора сантиметра, и набирать в него невозможно. */
  .search-field { flex: 1 1 100%; }
  .search-input { width: 100%; max-width: none; }
  .catalog { padding: .6rem 1.2rem 3.5rem; grid-template-columns: 1fr; gap: .9rem; }
  .work { padding: 2rem 1.2rem 3.5rem; }
  .play-all { display: flex; justify-content: center; width: 100%; }
  .card:hover, .card:focus-visible { transform: none; } /* тач-устройства без hover */
}

@media (max-width: 480px) {
  .chapter { grid-template-columns: 1fr auto; }
  .chapter-n { display: none; }
  .chapter.is-playing { margin: 0 -1.2rem; padding: .85rem 1.2rem; }
}

/* ── подписка в подкаст-приложении ────────────────────────────────────────
   Кнопка ведёт на podcast://…, эту схему перехватывают Podcast Addict и
   AntennaPod. Рядом приглушённая ссылка на сам адрес фида — для случая,
   когда схему никто на себя не взял и адрес надо вставить руками. */
.subscribe {
  display: flex;
  align-items: center;
  gap: .9rem;
  flex-wrap: wrap;
  margin: 1.1rem 0 .4rem;
}

.subscribe-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: 'PT Mono', monospace;
  font-size: .82rem;
  letter-spacing: .02em;
  color: var(--paper);
  background: var(--amber);
  border: 1px solid var(--amber-d);
  border-radius: var(--radius);
  padding: .55rem 1rem;
  text-decoration: none;
}

.subscribe-btn:hover, .subscribe-btn:focus-visible { filter: brightness(1.08); }

.subscribe-raw {
  font-family: 'PT Mono', monospace;
  font-size: .72rem;
  color: var(--paper-dim);
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}

.subscribe-raw:hover { color: var(--ink); }

.chapter-missing {
  font-family: 'PT Mono', monospace;
  font-size: .74rem;
  color: var(--paper-dim);
  margin: .4rem 0 0;
}

@media (max-width: 480px) {
  .subscribe-btn { width: 100%; justify-content: center; }
}

/* Действия у главы. Родного <audio controls> здесь больше нет: играет один
   плеер сайта, живущий доком внизу, — иначе на странице оказывалось семь
   независимых плееров, и очередь была не нужна. */
.chapter-actions {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  margin-top: .5rem;
}

/* На странице произведения подписка — второе по важности действие после
   «слушать», поэтому она приглушена: две одинаково громкие янтарные кнопки
   рядом заставляют выбирать вместо того, чтобы просто нажать нужную.
   На главной подписка остаётся основным действием и цвет сохраняет. */
/* Подписка нигде не главное действие: на главной главное — каталог, на
   странице произведения — «слушать». Поэтому кнопка везде приглушённая, а
   янтарь остаётся за тем, что звучит. */
.subscribe-btn {
  color: var(--ink);
  background: transparent;
  border-color: var(--rule);
}

.subscribe-btn:hover, .subscribe-btn:focus-visible {
  border-color: var(--amber);
  filter: none;
}

/* Ссылки на автора внизу страницы «Об авторе». */
.work .links {
  list-style: none;
  padding: 0;
  margin: 1.4rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem;
  font-family: 'PT Mono', monospace;
  font-size: .78rem;
}

.work .links a {
  color: var(--paper-dim);
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}

.work .links a:hover { color: var(--amber); }

/* Пустой отбор. Появляется вместо карточек, когда под выбранные тему и
   возраст ничего нет: молча опустевшая страница читается как поломка. */
.catalog-empty {
  max-width: 1040px;
  margin: 0 auto;
  /* Снизу с запасом: когда отбор пуст, страница становится короткой, и кнопка
     «показать всё» оказывается ровно под панелью плеера. Тот же класс ошибки,
     что описан в site/player/README.md, только с другой стороны — не якорь
     доводит элемент под док, а сам документ кончается под ним. */
  padding: 2.5rem 1.5rem 9rem;
  color: var(--paper-dim);
  font-family: 'PT Mono', monospace;
  font-size: .8rem;
  line-height: 1.8;
}

.catalog-reset {
  font: inherit;
  color: var(--paper);
  background: var(--amber);
  border: 1px solid var(--amber-d);
  border-radius: var(--radius);
  padding: .3rem .7rem;
  margin-left: .4rem;
  cursor: pointer;
}

/* «В приложении» у отдельной главы. Намеренно тихая ссылка, а не кнопка:
   в списке из тридцати глав три равногромких действия в каждой строке
   превращают страницу в частокол. */
.chapter-app {
  align-self: center;
  font-family: 'PT Mono', monospace;
  font-size: .72rem;
  color: var(--paper-dim);
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}

.chapter-app:hover, .chapter-app:focus-visible { color: var(--amber); }