/* Стили раздела «Публикации». Общий style.css не трогаем: им пользуются
   «Новости», «Журнал» и «Члены», и переучивать их незачем. Гарнитуры здесь
   не объявляются — Roboto Condensed/Source Serif 4/Golos Text уже
   подключены в style.css (шрифтовые файлы, @font-face). Этот файл только
   ИСПОЛЬЗУЕТ их для разметки, которой в общем style.css нет: бар черновика,
   #хэштеги, перечни материалов, поиск, — раньше это жило Python-строкой
   EXTRA_CSS прямо в build.py под именем /assets/pv.css; вынесено в
   отдельный файл, чтобы его можно было писать и проверять как обычный CSS,
   а не строку с ручным экранированием.

   Текст материала (задача 4, самое главное здесь). В style.css ПРАВИЛО
   «article p, ul { font-family: "Source Serif 4", serif }» есть (строка
   167) — но в том же файле ниже, строка 489, есть ВТОРОЕ «article p, ul
   { font-family: 'Golos Text', sans-serif }», без media-запроса, и оно
   позже по файлу, поэтому побеждает при равной специфичности: текст
   материала набирается Golos Text (рубленым), хотя первое правило style.css
   явно задумывало Source Serif 4. Отсюда и жалоба заказчика «не похоже
   на журнал» — гарнитура была объявлена, но перебита им же самим ниже.
   style.css трогать нельзя (общий файл), поэтому здесь — правило с более
   высокой специфичностью (класс + тег бьёт два тега), оно выигрывает вне
   зависимости от порядка ссылок <link> в SHELL. */


/* ─────────────────────── журнальная страница материала ───────────────────
   Значения взяты из утверждённых макетов mockups/1-журнал.html и
   mockups/_common.css, а не придуманы заново. Палитра раздела — оттуда же:
   она согласована с зелёным сайта (#003333 шапки и подвала).            */
:root { --pv-ink:#16302f; --pv-dim:#6d8483; --pv-line:#dfeae9;
        --pv-acc:#00706e; --pv-deep:#003b39; --pv-paper:#fff;
        --pv-ground:#f4f7f7;
        /* Интерфейсная гарнитура раздела — ОДНА, и она из макета:
           `_common.css` задаёт body{font-family:"Roboto Condensed"}, то
           есть всё, что не текст статьи, набрано ею. Здесь половина
           элементов шла Golos Text (подпись автора, плашки тегов, «Ещё
           по теме», карточка темы, метаданные ленты, поле поиска), а
           другая половина — Roboto Condensed (крошки, «СТАТЬЯ», .lbl),
           и на одной странице стояли две интерфейсные гарнитуры. Теперь
           имя одно и меняется в одном месте. */
        --pv-ui:'Roboto Condensed',Arial,sans-serif;
        --pv-serif:"Source Serif 4",Georgia,serif }

/* Полоса страниц раздела. Общий style.css задаёт div.container
   { max-width:760px } — странице материала мало (660 текста + 200 колонки
   сносок + отбивка), витрине с плиткой по три в ряд тоже. Ширину даёт
   класс на том же div-е (pub.shell.page(mainclass=…)): специфичность
   класса выше, чем у голого div.container, и общий файл остаётся цел. */
body { background:var(--pv-ground) }
/* box-sizing:border-box — как в утверждённых макетах (`_common.css`,
   правило `*`). В общем style.css его нет нигде, и без него max-width
   считается по СОДЕРЖИМОМУ: полоса выходила на 80 px шире макета
   (900 вместо 820 у материала, 980 вместо 900 у витрины), а мера набора
   вместе с ней — 666 px вместо утверждённых 586, около восьмидесяти
   знаков в строке. Правило стоит на своих классах, чужие .container
   сайта не задевает. */
main div.container.pv-journal, main div.container.pv-showcase {
    background:var(--pv-paper); padding:34px 40px 48px; margin:0 auto;
    /* Базовая гарнитура полосы — как body в макетах: всё, что не текст
       статьи, набрано Roboto Condensed. Засечные элементы (заголовок,
       текст, аннотация, лента) переопределяют её ниже поимённо. */
    font-family:var(--pv-ui) }
/* В макетах box-sizing:border-box стоит на ЗВЁЗДОЧКЕ, и мера набора
   считается по ней же. Здесь правило стояло только на самой полосе, и
   врезка с аннотацией выходила на 19 px шире макета: max-width:34em
   складывался с отбивкой 16 px и полосой 3 px. Правило ограничено
   нашими двумя классами — чужие .container сайта не задеваются. */
main div.container.pv-journal, main div.container.pv-showcase,
main div.container.pv-journal *, main div.container.pv-showcase * {
    box-sizing:border-box }
main div.container.pv-journal { max-width:900px }
/* Длинный материал: слева 210 px липкой колонки и отбивка 38 — их полоса
   шире ровно на эту величину, иначе мера набора съедалась бы колонкой. */
/* 40 + 210 (колонка) + 38 (отбивка) + 586 (мера) + 34 + 200 (сноски) + 40.
   Было 1180 — мера выходила 618 вместо утверждённых 586. */
main div.container.pv-journal.pv-toc { max-width:1148px }
main div.container.pv-showcase { max-width:980px }

.mat p { font-family:"Source Serif 4", Georgia, serif; line-height:1.62 }
.mat .kind { font:700 11px/1.65 var(--pv-ui);
        letter-spacing:.18em; text-transform:uppercase; color:var(--pv-acc);
        margin:0 }
main .mat h1 { font-family:"Source Serif 4", Georgia, serif; font-weight:600;
        font-size:34px; line-height:1.18; letter-spacing:0; margin:8px 0 0;
        color:#0d2726; max-width:16em; overflow-wrap:anywhere }
main .mat.lit h2 { font-family:"Source Serif 4", Georgia, serif;
        font-weight:600; font-size:26px; line-height:1.2; margin:8px 0 0;
        color:#0d2726; max-width:16em; border:0 }
.mat .author { font:600 15px/1.65 var(--pv-ui);
        margin:14px 0 0; color:var(--pv-ink) }
.mat .regalia { font-family:"Source Serif 4", Georgia, serif;
        font-style:italic; font-size:13.5px; color:var(--pv-dim);
        margin:3px 0 0; line-height:1.45 }
.mat .rule { height:1px; background:var(--pv-line); margin:24px 0 }
.mat .annot { font-family:"Source Serif 4", Georgia, serif; font-size:15px;
        font-style:italic; line-height:1.6; color:#33504e;
        border-left:3px solid #cfe0df; padding-left:16px; margin:22px 0 26px;
        max-width:34em; overflow-wrap:anywhere }

/* Сноски на полях справа — без единой строчки JavaScript. Сетка «текст +
   200px», у каждого абзаца своя grid-row, у сноски — та же строка, что у
   абзаца с её маркером: оттого она и стоит против своего места в тексте.
   Вертикальной отбивки строк НЕТ нарочно (column-gap, а не gap): пустые
   строки 1–2 у материалов без аннотации иначе дали бы 68px пустоты. */
.mat .cols { display:grid; grid-template-columns:minmax(0,1fr) 200px;
        column-gap:34px; align-items:start }
/* overflow-wrap:anywhere — в текстах попадаются неразрывные куски длиннее
   меры набора (адреса и номера дел вроде
   «https://www.legislation.gov.uk/ukpga/2015/4/contents/enacted»). На 390 px
   такой кусок вылезал за край и давал горизонтальную прокрутку всей
   странице, причём НЕЗАМЕТНО: рамка самого абзаца остаётся в полосе, за
   край уходит только текст — по getBoundingClientRect такое не найти,
   видно лишь по scrollWidth элемента. */
/* Цвет — из макета (`body{color:var(--ink)}` в _common.css): у журнальной
   полосы тёмно-зелёная краска, а не чёрная #1d1d1d общего style.css. */
.mat .cols > p.t { font-family:"Source Serif 4", Georgia, serif;
        font-size:16.5px; line-height:1.66; margin:0 0 14px; grid-column:1;
        color:var(--pv-ink); overflow-wrap:anywhere }
.mat .cols > .annot, .mat .cols > .cell { grid-column:1 }
/* Линейка — «во всю меру» (спека, пункт 6): она отбивает шапку материала от
   его текста, а шапка (автор, регалии) набрана во всю полосу, поэтому и
   линейка идёт через обе колонки сетки, как в утверждённом макете. */
.mat .cols > .rule { grid-column:1/-1 }
/* Воздух там, где линейки с врезкой нет. У 164 материалов из 454 аннотации
   в журнале нет вовсе, блок не выводится (пункт 7), и текст без этой
   отбивки начинался бы вплотную к заголовку. */
.mat .cols > p.t:first-child, .mat .cols > .cell:first-child { margin-top:22px }
.mat .cols > .sn, .mat .cols > .sn-h, .mat .cols > .src { grid-column:2 }
.mat .cols > p.drop::first-letter { font-family:"Source Serif 4",Georgia,serif;
        font-size:3.4em; float:left; line-height:.82; padding:4px 9px 0 0;
        color:var(--pv-deep) }
.mat .end { color:var(--pv-acc) }
.mat sup.fn { line-height:0 }
.mat sup.fn a { text-decoration:none; color:var(--pv-acc); font-size:11px }
.mat .sn p, .mat .src p { font-family:"Source Serif 4", Georgia, serif;
        font-size:12.5px; line-height:1.45; color:var(--pv-dim); margin:0 0 14px;
        overflow-wrap:anywhere }
/* overflow-wrap:anywhere выше — не украшение: сноски это постраничный
   список литературы, адреса в них не гиперссылки, а просто текст
   («URL: https://cyberleninka.ru/article/n/…»), и на 390px такая строка
   без пробелов раздвигала всю страницу вбок — единственный источник
   горизонтальной прокрутки, который нашёлся при проверке headless Chrome. */
.mat .sn p { border-left:2px solid var(--pv-line); padding-left:9px }
/* Сноски блоком под текстом — там, где на поля они не помещаются
   (см. article_html: столбик сносок выше самого текста). Вид тот же,
   что у сносок на узком экране и в макете _common.css `.notes`:
   блок в меру набора, отбитый линейкой, без полосы у каждой сноски. */
.mat .sn.wide { grid-column:1; margin-top:16px; padding-top:16px;
        border-top:1px solid var(--pv-line) }
.mat .sn.wide p { border-left:0; padding-left:0; margin-bottom:7px;
        font-size:13px; color:#3f5857 }
.mat .sn.wide .sn-h { margin-bottom:10px }
/* Подпись колонки — ВВЕРХУ колонки, как в утверждённом макете: свой
   грид-элемент, растянутый от первой строки сетки до первой сноски и
   прижатый к верху (align-self:start). Раньше она лежала внутри первой
   сноски и ехала вместе с ней: у 140 страниц из 204 первый маркер стоит
   не в первом абзаце, и верх колонки пустовал, а подпись обнаруживалась
   посреди полосы. */
.mat .sn .num { color:var(--pv-acc); font-weight:700; margin-right:5px;
        text-decoration:none }
.mat .src { margin-top:22px }
.mat .src .lbl { margin:0 0 8px }
.mat .src .pubdate, .mat .src .req { margin-top:-10px }
/* Интерлиньяж рублёных подписей — 1.65, как в обоих утверждённых
   макетах: там эти элементы своего line-height не объявляют и берут
   его у body из общего style.css. Свои 1.35–1.5 давали на одних и тех
   же надписях на 1.5–4 px меньше. */
.lbl { font:10.5px/1.65 var(--pv-ui); letter-spacing:.14em;
        text-transform:uppercase; color:#9db0af; margin:0 0 10px }

/* Пункт 12 спеки — «Ещё по этой теме»; стоит вне <article>. */
.more { margin-top:32px; padding-top:16px; border-top:1px solid var(--pv-line) }
.more a { display:block; font:600 14.5px/1.65 var(--pv-ui);
        color:#00504e; text-decoration:none; margin:7px 0 1px;
        overflow-wrap:anywhere }
.more a:hover { text-decoration:underline }
.more i { font-style:normal; font-size:12px; color:var(--pv-dim) }

/* Длинный материал (>120 абзацев): липкая колонка слева. Оглавления по
   подзаголовкам в ней нет — выгрузка docx их ничем не помечает (см.
   toc_html в build.py), поэтому колонка ведёт по настоящим ориентирам
   страницы и несёт ссылку на PDF выпуска. */
.withtoc { display:grid; grid-template-columns:210px minmax(0,1fr); gap:38px;
        align-items:start }
.withtoc .toc { position:sticky; top:20px; font-size:13px }
.withtoc .toc a { display:block; color:var(--pv-dim); text-decoration:none;
        padding:5px 0 5px 11px; border-left:2px solid transparent;
        line-height:1.35 }
.withtoc .toc a:hover { color:var(--pv-acc); border-left-color:var(--pv-acc) }
.withtoc .toc .src { margin-top:20px; padding-top:14px;
        border-top:1px solid var(--pv-line); color:var(--pv-dim);
        font-size:12.5px; line-height:1.5 }
.withtoc .toc .src b { color:#22403f }
.withtoc .toc .src a.pv-pdf { color:var(--pv-acc); padding:0; border:0;
        display:inline }
.withtoc .toc .src .why { margin:10px 0 0; font-size:11.5px; color:#9db0af }

/* Узкий экран (спека, «Узкий экран»). Ниже 1100px колонка сносок уходит
   ПОД текст обычным блоком, выходные данные встают строкой под регалиями
   (order:-1 — потому и лежат внутри .cols), буквица снимается. Порядок
   чтения не меняется: в разметке текст и так идёт раньше сносок. */
/* Ниже 1100 px колонка сносок уходит под текст, и полоса в 900 px
   осталась бы мерой набора: 820 px, около ста знаков в строке (в макете
   восемьдесят). Сужается полоса, а не растягивается текст.
   666 = 586 (мера) + 40 + 40 (поля). */
@media (max-width:1099px) {
  main div.container.pv-journal,
  main div.container.pv-journal.pv-toc { max-width:666px }
  /* align-items:stretch обязателен: в колоночном flex поперечная ось —
     ГОРИЗОНТАЛЬНАЯ, и унаследованный от сетки align-items:start растянул
     бы каждый блок по его max-content, а не по ширине полосы — заголовок
     и врезка уезжали бы за правый край экрана. */
  .mat .cols { display:flex; flex-direction:column; align-items:stretch }
  .mat .cols > .src { order:-1; margin:14px 0 0; display:flex;
        flex-wrap:wrap; gap:0 10px; align-items:baseline }
  .mat .cols > .src .lbl { margin:0 }
  .mat .cols > .src p { margin:0 }
  .mat .cols > .src .pubdate, .mat .cols > .src .req { margin-top:0 }
  /* Колонка сносок стала обычным блоком под текстом — её надо отбить от
     текста волосяной линейкой. Целится подпись «Сноски»: в разметке она
     стоит первой из всего блока сносок. */
  .mat .cols > .sn-h { margin-top:26px; padding-top:14px;
        border-top:1px solid var(--pv-line) }
  .mat .cols > .sn p { color:#3f5857 }
  .mat .cols > p.drop::first-letter { font-size:inherit; float:none;
        padding:0; line-height:inherit; color:inherit }
  .withtoc { display:block }
  .withtoc .toc { position:static; margin-bottom:24px }
  .withtoc .toc a { display:inline-block; margin-right:14px }
}
@media (max-width:760px) {
  main div.container.pv-journal, main div.container.pv-showcase {
        padding:20px 16px 32px }
  main .mat h1 { font-size:27px }
}

.pv-bar { background:repeating-linear-gradient(135deg,#fff4d6,#fff4d6 14px,
          #ffeec0 14px,#ffeec0 28px); border-bottom:2px solid #d8bf7a;
          color:#5a4a1a; font:13px/1.6 var(--pv-ui);
          padding:7px 16px; text-align:center }
.pv-bar a { color:#5a4a1a }
.pv-bar b.flag { background:#5a4a1a; color:#fff4d6; padding:1px 7px;
          border-radius:4px; letter-spacing:.06em; font-weight:700 }
.crumbs { font:12px/1.65 var(--pv-ui);
          color:var(--pv-dim); margin:0 0 18px }
.crumbs a { color:var(--pv-acc) }
.pv-nav { display:flex; justify-content:space-between; gap:1em;
          margin:1.5em 0 2em; font:14px/1.5 var(--pv-ui) }
.pv-nav a { color:#00706e }
.pv-note { border-left:4px solid #d8bf7a; background:#fffaf0; padding:2px 16px;
           margin:2.5em 0 0; font:14px/1.6 var(--pv-ui) }
article .tags, p.tags { margin:-4px 0 18px; line-height:2.2 }
/* Имя тега — одно «слово» без пробелов («#АльтернативноеРазрешениеСпоров»);
   на 390px оно и в чипе, и в <h1> страницы-фильтра (см. .idx h1 ниже) шире
   экрана — вторая находка headless-проверки из задачи 9. */
/* Плашка — из макета 1-журнал.html (`.tags a`): скруглённая до овала,
   12 px, заливка #edf5f4. Плашки двух оттенков здесь раньше стояли по
   тому, свой ли это тег docx или тег из индекса заказчика; разницу в
   два процента светлоты читатель не видит, а легенды к ней на странице
   нет — в утверждённом макете плашка одна. Класс .own в разметке
   остался: он несёт сведения, просто не красит. */
a.tag { display:inline-block; background:#edf5f4; color:#00605e;
        border-radius:13px; padding:3px 11px; margin:0 6px 4px 0;
        font:12px/1.65 var(--pv-ui); text-decoration:none;
        overflow-wrap:anywhere; max-width:100% }
a.tag:hover { background:#00706e; color:#fff }
a.tag .n { color:#7a8a8a; font-size:.9em }
a.tag:hover .n { color:#cfe3e3 }
/* Библиографическая строка из оглавления журнала — в блоке «Источник», над
   выходными данными (см. article_html). Набор тот же, что у выходных
   данных, но плотнее: это ссылка, а не текст для чтения. */
.mat .src .tocline { font-family:"Source Serif 4", Georgia, serif;
          font-size:12.5px; line-height:1.45; color:var(--pv-dim);
          margin:0 0 6px }
/* Подпись колонки сносок. border-left:0 — полоса слева это признак самой
   сноски (макет 1-журнал.html, `.side p`), у подписи её нет; набор
   повторён целиком, потому что правило `.mat .sn p` специфичнее одного
   класса и иначе перебило бы подпись засечными 12.5 px. */
.mat .sn-h, .mat .sn p.sn-h { font:10.5px/1.65 var(--pv-ui);
        letter-spacing:.14em; text-transform:uppercase; color:#9db0af;
        margin:0 0 10px; align-self:start; border-left:0; padding-left:0 }
.tblwrap { overflow-x:auto; margin:1.4em 0 }
article table { border-collapse:collapse; width:100%; font-size:.95em;
                font-family:var(--pv-ui) }
article table td, article table th { border:1px solid #c9d6d6;
                padding:8px 10px; vertical-align:top; text-align:left }
article table th { background:#eef4f4; color:#003333 }
article figure.shot { margin:1.6em 0; text-align:center }
article figure.shot img { max-height:70vh }
/* Правила для figure.noshot здесь больше нет: техническая заглушка
   «иллюстрация <2022-02-58-1> — не вытянута из PDF» читателю не
   показывается вовсе (см. figure() в build.py). */
.idx { font-family:var(--pv-ui) }
/* Заголовок страницы-тега и поиска — тем же набором, что заголовок
   витрины и страницы темы (Source Serif 4, 36 px). Прежде эти 760 страниц
   из 1215 несли заголовок общего стиля сайта (Golos Text 36px), и раздел
   распадался на два разных оформления. <h1> тега — сам тег без пробелов,
   отсюда overflow-wrap. */
.idx h1 { font-family:var(--pv-serif); font-weight:600; font-size:36px;
          line-height:1.15; letter-spacing:0; margin:0 0 10px; color:#0d2726;
          overflow-wrap:anywhere }
.idx > p:first-of-type { font-family:var(--pv-serif); font-size:15.5px;
          line-height:1.58; color:#3f5857; max-width:38em; margin:0 0 20px }
.idx h2 { font-family:var(--pv-serif); font-weight:600 }
.idx ul { list-style:none; padding-left:0 }
/* Отбивка строк перечня. Раньше её держал ПУСТОЙ <p></p> после каждого
   <li> — 405 таких абзацев внутри <ul> на шести страницах, невалидная
   разметка, на которой висела вёрстка. Теперь отбивку задаёт CSS, а
   разметка перечня валидна. */
.idx li { margin:0 0 1.05em }
/* Строка перечня — тем же набором, что лента витрины (.pv-list .item):
   заголовок засечным 16 px, метаданные рублеными 11.5 px. Раньше здесь
   стояли рубленый заголовок 18 px и метаданные Golos Text — третье
   оформление одного и того же объекта на 749 страницах тегов. */
.idx li a { color:#0d2726; font-weight:600; text-decoration:none;
            font-family:var(--pv-serif); font-size:16px; line-height:1.3 }
.idx li a:hover { color:var(--pv-acc); text-decoration:underline }
.idx li i { color:#555; display:block; margin:4px 0 0; font-style:normal;
            font-family:'Source Serif 4',Georgia,serif; font-size:.95em }
/* Аннотация из журнала — курсивом; зачин текста (аннотации в журнале
   нет) — прямым, светлее и с полосой слева, чтобы разница читалась
   и на чёрно-белой распечатке. Легенда стоит над каждым перечнем. */
.idx li i.annot { font-style:italic; color:#3f4f4f }
.idx li .opening { color:#7a8a8a; display:block; margin:4px 0 0;
            border-left:2px solid #dde6e6; padding-left:9px;
            font-family:'Source Serif 4',Georgia,serif; font-size:.95em }
/* Метаданные строки перечня — отдельной строкой под заголовком, как в
   ленте раздела: приклеенные к заголовку, они переносились вместе с ним
   и читались его продолжением. */
.idx li .meta { color:var(--pv-dim); font-size:11.5px; display:block;
            margin-top:2px; font-family:var(--pv-ui) }
.idx li .meta.nodate { color:#a0522d }
.idx p.legend { margin:.2em 0 1.2em; color:#7a8a8a; font-size:.85em }
.idx h2 { border-bottom:1px solid #dde6e6; padding-bottom:4px }
.cards { display:grid; gap:14px; grid-template-columns:repeat(auto-fit,
         minmax(240px,1fr)); margin:1.4em 0 2em; padding:0; list-style:none }
.cards li { background:#fff; border:1px solid rgba(0,51,51,.14);
            border-left:4px solid #00706e; border-radius:10px; padding:14px 16px;
            margin:0 }
.cards li a { color:#003333; font-weight:600; text-decoration:none;
              font-size:1.05em }
.cards li p { margin:.4em 0 0; font-size:.88em; color:#4a5a5a;
              font-family:var(--pv-ui) }

/* ─────────────────────────── витрина раздела ──────────────────────────
   Значения — из утверждённого макета mockups/b2-поиск-и-фильтры.html.
   Порядок блоков задан спекой (пункты 1–7), см. showcase_main в build.py. */
.pv-showcase h1 { font-family:"Source Serif 4", Georgia, serif;
    font-weight:600; font-size:36px; line-height:1.15; letter-spacing:0;
    margin:0 0 10px; color:#0d2726 }
/* Описание раздела — засечным, мера не шире 38 em (спека, пункт 2).
   Правило общее для витрины и для перечня раздела: страница литературы
   собрана в полосе pv-journal, но шапка у неё та же. */
.pv-showcase .lead, main div.container.pv-journal > .lead {
    font-family:var(--pv-serif);
    font-size:15.5px; line-height:1.58; color:#3f5857; max-width:38em;
    margin:0 0 24px }
/* Заголовок страницы литературы и её подзаголовки — тем же набором, что
   заголовок витрины: это перечень раздела, а не текст материала. */
main div.container.pv-journal > h1 { font-family:var(--pv-serif);
    font-weight:600; font-size:36px; line-height:1.15; letter-spacing:0;
    margin:0 0 10px; color:#0d2726 }
main div.container.pv-journal > h2 { font-family:var(--pv-serif);
    font-weight:600; color:#0d2726 }
/* Пункт 4: ряд быстрых фильтров. Кнопка — ССЫЛКА на заранее собранную
   страницу, никаких <button>: без JavaScript раздел обязан работать
   целиком, иначе поисковик увидит пустой каркас. */
.f { display:flex; flex-wrap:wrap; gap:6px; align-items:baseline;
    margin-bottom:7px }
.f .lbl { width:82px; flex:none; margin:0 }
.f a.fbtn { border:1px solid var(--pv-line); border-radius:14px;
    padding:3px 11px; font:12.5px/1.65 var(--pv-ui);
    color:#38504f; text-decoration:none; white-space:nowrap }
.f a.fbtn:hover { border-color:var(--pv-acc); color:var(--pv-acc) }
.f a.fbtn.on { background:var(--pv-acc); border-color:var(--pv-acc);
    color:#fff; font-weight:600 }
.gap { height:22px }
/* Пункт 5: плитка тем, 14 рубрик карточками по три в ряд. */
.pv-showcase .pv-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
    gap:11px; margin:8px 0 0 }
.pv-showcase .card { border:1px solid var(--pv-line);
    border-left:3px solid var(--pv-acc); border-radius:7px; padding:12px 14px;
    text-decoration:none; display:block; background:var(--pv-paper) }
.pv-showcase .card:hover { border-color:var(--pv-acc) }
.pv-showcase .card b { font-family:"Source Serif 4", Georgia, serif;
    display:block; font-size:15px; color:#0d2726; line-height:1.26;
    font-weight:600 }
.pv-showcase .card em { font-style:normal; font-size:11.5px;
    color:var(--pv-dim); display:block; margin-top:4px;
    font-family:var(--pv-ui) }
.pv-showcase .card.on { background:var(--pv-acc); border-color:var(--pv-acc) }
.pv-showcase .card.on b { color:#fff }
.pv-showcase .card.on em { color:#cfe3e3 }
/* Пункт 6: «Найдено: N · сначала новые». */
.found { font-family:"Source Serif 4", Georgia, serif; font-size:16px;
    color:#0d2726; margin:22px 0 4px; font-weight:400 }
.found b { font-weight:400 }
/* Пункт 7: лента. */
.pv-list .item { padding:10px 0; border-bottom:1px solid #f0f6f5 }
.pv-list .item a { font-family:"Source Serif 4", Georgia, serif; font-size:16px;
    color:#0d2726; text-decoration:none; line-height:1.3;
    overflow-wrap:anywhere }
.pv-list .item a:hover { color:var(--pv-acc) }
.pv-list .item i { font-style:normal; font-size:11.5px; color:var(--pv-dim);
    display:block; margin-top:2px; font-family:var(--pv-ui) }
/* Аннотация в перечне раздела (спека, «Перечень раздела»: «заголовок,
   автор, выпуск, дата, аннотация»). Курсив — признак настоящей аннотации
   из журнала; зачина текста здесь нет вовсе, чтобы он нигде не выдавался
   за аннотацию. */
.pv-list .item .blurb { font-family:var(--pv-serif); font-style:italic;
    font-size:14px; line-height:1.5; color:#3f5857; margin:5px 0 0;
    max-width:46em }
.pv-list .item.off { display:none }
/* Витрина одной страницей — это 24 000 px ленты. Со включённым скриптом
   показывается первая полусотня и ссылка «показать все», без скрипта —
   вся лента целиком (поисковик и читатель без JS видят всё). */
.pv-list.capped .item:nth-child(n+51) { display:none }
.pv-more { margin:14px 0 0; font:13px/1.6 var(--pv-ui) }
.pv-more a { color:var(--pv-acc); cursor:pointer }
.pv-tail { margin:18px 0 0; font:13px/1.6 var(--pv-ui) }
.pv-tail a { color:var(--pv-acc) }
@media (max-width:760px) {
  /* Плитка перестраивается в один столбец, ряды фильтров переносятся,
     подписи рядов встают над кнопками (спека, «Узкий экран»). */
  .pv-showcase .pv-grid { grid-template-columns:1fr }
  .f { display:block }
  .f .lbl { display:block; width:auto; margin:0 0 5px }
  .f a.fbtn { display:inline-block; margin:0 5px 5px 0 }
  .pv-showcase h1 { font-size:28px }
}

.pvs { margin:1.6em 0 2em; font-family:var(--pv-ui) }
.pvs.wide { margin:0 0 14px }
.pvs-box { position:relative }
/* Пункт 3: подсказка справа ВНУТРИ рамки. pointer-events:none — иначе по
   ней нельзя было бы попасть в само поле. */
.pvs-hint { position:absolute; right:16px; top:50%; transform:translateY(-50%);
    font:12px/1 var(--pv-ui); color:#b3c4c3;
    pointer-events:none }
/* В макете `.q` — не поле, а div со своей строкой; высота выходит 56 px.
   У поля ввода строка по умолчанию короче, и рамка получалась 48 px.
   26 + 13 + 13 + 2 + 2 = 56. */
.pvs.wide input[type=search] { padding:13px 16px; border-radius:9px;
    font-size:15.5px; line-height:26px }
.pvs input[type=search] { width:100%; box-sizing:border-box; font-size:1.05em;
    padding:11px 14px; border:2px solid #00706e; border-radius:8px;
    font-family:var(--pv-ui) }
/* На узком экране подсказка не помещается в рамку рядом с приглашением и
   легла бы поверх него — встаёт строкой под полем. Правило стоит ПОСЛЕ
   объявления .pvs-hint: у них одинаковая специфичность, и решает порядок. */
@media (max-width:760px) {
  .pvs-hint { position:static; transform:none; display:block;
      margin:6px 2px 0; text-align:right }
}
.pvs label { display:inline-block; margin:8px 0 0; font-size:.86em;
             color:#4a5a5a }
.pvs-out { margin-top:12px }
.pvs-item { padding:10px 0; border-bottom:1px solid #eef2f2 }
.pvs-item a { color:#00706e; font-weight:600; text-decoration:none }
.pvs-item .meta { color:#7a8a8a; font-size:.82em; display:block;
                  margin-top:2px }
.pvs-item .snip { color:#40504f; font-size:.9em; margin-top:4px;
                  font-family:'Source Serif 4',Georgia,serif }
/* до того, как страница дочитает отрывок, в выдаче стоит аннотация
   журнала — тем же курсивом, что и в перечнях */
.pvs-item .snip.annot { font-style:italic }
.pvs-item mark { background:#fff0a8; padding:0 1px }
.pvs-head { color:#7a8a8a; font-size:.86em; margin:.4em 0 }
/* Оговорка «поиск работает при включённом JavaScript» набиралась кеглем
   основного текста (18 px) и на узком экране занимала четыре строки,
   оказываясь заметнее самих рядов фильтров. Это сноска к полю поиска,
   а не текст для чтения. */
.pvs noscript p { margin:8px 0 0; font:12.5px/1.5 var(--pv-ui);
    color:var(--pv-dim); max-width:44em }
.lit-toc { font-size:.92em; columns:2; column-gap:2em }
.lit-toc a { color:#00706e; text-decoration:none }
article.lit { border-top:1px solid #dde6e6; padding-top:1.2em; margin-top:2em }
@media (max-width:560px){ .lit-toc { columns:1 } }