/* ===========================================================================
   pechenitsyna.ru — слой усиления поверх темы Knife 1.17.37

   Подключается mu-плагином pech-design.php после стилей темы.
   Источник значений — UI-kit: «Усиление pechenitsyna.dc.html», DESIGN.md.

   Структура:
     1. Токены: цвет
     2. Токены: типографика
     3. Токены: пространство, радиусы, тени
     4. Семантические псевдонимы
     5. Переопределение темы (только проверенные селекторы)

   Три вещи этот файл не трогает намеренно:
     — шрифты: пара Formular + PT Serif уже верная, новых не подключаем;
     — форматирование статьи: .entry-content и .entry-header__* как были;
     — комментарии и реакции: их рисует Cloud Comments из соседнего проекта.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. ЦВЕТ

   Один синий на весь сайт — #1e488f, акцент темы. Он темнее бирюзового
   #11769c наших плагинов (8.7:1 против 4.0:1 на белом: второй не проходит
   AA для мелкого текста), и им уже покрашена бо́льшая часть сайта, значит
   правок меньше. #11769c выведен из обращения полностью — вместе с
   сопутствующими #f1f8ff, #d5e3f0, #c8d5de, #e4ecf2, которые жили только
   рядом с ним.
   --------------------------------------------------------------------------- */
:root {
    /* Холст и поверхности */
    --pz-canvas:          #2c3a4a; /* фон страницы; задаётся в кастомайзере */
    --pz-surface:         #ffffff; /* карточки, шапка */
    --pz-surface-cream:   #faf9f3; /* врезки, пейвол */
    --pz-surface-quiet:   #f2f5f9; /* тихие кнопки, бейджи, подложки */
    --pz-surface-input:   #f7f9fb; /* фон заглушек для владелицы */

    /* Текст. Серые сведены к четырём вместо семи. */
    --pz-ink:             #16181c; /* основной,      17.9:1 на белом */
    --pz-ink-soft:        #2f3a44; /* врезки,        12.4:1 */
    --pz-ink-second:      #4a5761; /* вторичный,      7.6:1 */
    --pz-ink-meta:        #667380; /* метаданные,     4.8:1 — минимум для 13px */
    --pz-ink-disabled:    #8a97a3; /* только на выключенных кнопках */
    --pz-ink-on-accent:   #ffffff;

    /* Акцент — единственный синий */
    --pz-accent:          #1e488f;
    --pz-accent-hover:    #16376d;
    --pz-accent-active:   #102a55;
    --pz-accent-wash:     #f2f5f9;
    --pz-accent-ring:     rgba(30, 72, 143, 0.12);

    /* Тёплый второй акцент: рубрики, даты новостей, маркеры списков.
       Никогда не кнопка и не фон. */
    --pz-warm:            #b94d16; /* 5.1:1 на белом */
    --pz-warm-wash:       #f4ece5;

    /* Границы */
    --pz-line:            #dde2ea; /* поля и кнопки */
    --pz-line-strong:     #c8d0da; /* кружки переключателей: темнее рамки поля */
    --pz-line-soft:       #e6e9f0; /* карточки, разделители */
    --pz-line-hair:       #edeff3; /* волосяные линейки */
    --pz-line-dashed:     #c8d5de; /* пунктир заглушек */

    /* Состояния */
    --pz-ok-bg:           #eef4ec;
    --pz-ok-ink:          #24512e; /* 7.0:1 на своей подложке */
    --pz-ok-mark:         #2f6b3c;
    --pz-warn-bg:         #fff3d6;
    --pz-warn-ink:        #7a5300; /* 6.2:1 */
    --pz-error-bg:        #fdf5f4;
    --pz-error-ink:       #8e2b20; /* 7.3:1 на белом */
    --pz-error-line:      #c0392b; /* 5.4:1 — граница поля и текст ошибки */

    /* Внешние бренды — только кнопки входа.
       ВК притемнён с #0077ff до #0062d6: белый текст даёт 5.7:1 вместо 4.1:1.
       Яндекс менять нельзя, поэтому на его кнопке текст крупный — см. §5. */
    --pz-vk:              #0062d6;
    --pz-yandex:          #fc3f1d;
}

/* ---------------------------------------------------------------------------
   2. ТИПОГРАФИКА

   Шрифты НЕ меняем: Formular и PT Serif уже подключены темой, файлы лежат
   в theme/app/assets/fonts. Токены только ссылаются на них, чтобы наши
   плагины не объявляли семейства заново и не разъезжались.

   Моноширинный — системный стек: своего моношрифта на сервере нет,
   а подключать ради подписей ещё один файл не стоит.
   --------------------------------------------------------------------------- */
:root {
    --pz-font-ui:   Formular, sans-serif;
    --pz-font-text: "PT Serif", serif;
    --pz-font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

    /* Интерфейс */
    --pz-h2:      34px;  --pz-h2-lh: 1.15;  --pz-h2-ls: -0.02em;
    --pz-h3:      26px;  --pz-h3-lh: 1.25;  --pz-h3-ls: -0.015em;
    --pz-h4:      22px;  --pz-h4-lh: 1.25;  --pz-h4-ls: -0.01em;
    --pz-ui-lg:   17px;
    --pz-ui:      16px;  /* поля: меньше — и iOS зумит страницу при фокусе */
    --pz-ui-sm:   15px;
    --pz-ui-xs:   14px;
    --pz-meta:    13px;
    --pz-caps:    12px;  --pz-caps-ls: 0.1em;

    /* Статья: заголовок, лид, тело, цитата — значения из кита */
    --pz-h1:      46px;  --pz-h1-lh: 1.12;  --pz-h1-ls: -0.025em;
    --pz-lead:    23px;  --pz-lead-lh: 1.5;
    --pz-quote:   24px;  --pz-quote-lh: 1.45;

    /* Наборный текст в наших блоках */
    --pz-text-sm: 18px;  --pz-text-sm-lh: 1.6;
    --pz-caption: 12px;

    /* Веса Formular */
    --pz-w-light:   300;
    --pz-w-regular: 400;
    --pz-w-medium:  500;
    --pz-w-bold:    600;
}

/* ---------------------------------------------------------------------------
   3. ПРОСТРАНСТВО, РАДИУСЫ, ТЕНИ
   Шкала 4 px.
   --------------------------------------------------------------------------- */
:root {
    --pz-1: 4px;   --pz-2: 8px;   --pz-3: 12px;  --pz-4: 16px;
    --pz-5: 20px;  --pz-6: 24px;  --pz-7: 26px;  --pz-8: 32px;
    --pz-9: 40px;  --pz-10: 44px; --pz-11: 52px; --pz-12: 64px;

    --pz-gap-grid-2:  26px;
    --pz-gap-grid-3:  24px;
    --pz-pad-card:    26px;
    --pz-pad-card-lg: 44px;

    --pz-r-sm:   6px;   /* бейджи */
    --pz-r-md:   10px;  /* кнопки, поля */
    --pz-r-lg:   14px;  /* карточки */
    --pz-r-xl:   16px;  /* крупные блоки */
    --pz-r-pill: 999px; /* метки */

    --pz-h-btn:     46px;
    --pz-h-btn-lg:  52px; /* главное действие экрана: отправка формы */
    --pz-h-btn-mob: 52px;
    --pz-h-btn-sm:  38px;
    --pz-h-field:   50px;
    --pz-tap-min:   44px; /* минимальная цель нажатия */

    /* Ширина карточки формы на холсте — из кита, артборд «04 — Форма записи».
       Шире колонки текста (40rem у темы): в карточке есть парные поля,
       и в узкой колонке они стали бы неразличимо тесными. */
    --pz-card-form: 760px;

    /* Статья: белая карточка, колонка текста и ширина иллюстрации.
       Тема даёт 42.25rem под карточку и 40rem под текст — кит просит
       чуть шире, потому что сайдбар уходит и место освобождается. */
    --pz-card-max:      812px;
    /* «Обо мне» шире прочих: фото рядом с текстом, лента дипломов
       и новости в два столбца в 812 не помещаются (кит, артборд 03). */
    --pz-card-wide:     1180px;
    --pz-measure:       668px;
    --pz-measure-wide:  852px;

    --pz-shadow-card: 0 1px 2px rgba(20, 26, 34, 0.04);

    --pz-dur:  140ms;
    --pz-ease: cubic-bezier(0.2, 0, 0.2, 1);
}

/* Узкий экран. Мобильный трафик преобладает, поэтому кнопка растёт
   под палец, а отступы карточек ужимаются. */
@media screen and (max-width: 899px) {
    :root {
        --pz-h1: 30px;  --pz-lead: 19px;  --pz-quote: 20px;
        --pz-h2: 26px;  --pz-h3: 21px;  --pz-h4: 19px;
        --pz-text-sm: 17px;
        --pz-pad-card: 20px;
        --pz-pad-card-lg: 20px;
        --pz-h-btn: 52px;
    }
}

/* ---------------------------------------------------------------------------
   4. СЕМАНТИЧЕСКИЕ ПСЕВДОНИМЫ
   В разметке пользуемся ими, а не «сырыми» цветами: смена акцента тогда
   делается в одном месте.
   --------------------------------------------------------------------------- */
:root {
    --pz-link:           var(--pz-accent);
    --pz-link-hover:     var(--pz-accent-hover);
    --pz-rubric:         var(--pz-warm);
    --pz-focus-ring:     0 0 0 3px var(--pz-accent-ring);
    --pz-badge-soon-bg:  var(--pz-warn-bg);
    --pz-badge-soon-ink: var(--pz-warn-ink);
    --pz-badge-open-bg:  var(--pz-ok-bg);
    --pz-badge-open-ink: var(--pz-ok-mark);
}

/* ===========================================================================
   5. ПЕРЕОПРЕДЕЛЕНИЕ ТЕМЫ

   Только по классам, которые в теме действительно есть — сверено с
   theme/app/assets/styles.min.css и шаблонами. Правки самой темы
   не требуется ни одной.

   Чего здесь намеренно нет:

   — Глобального правила для `a`. В теме `a { color: inherit }`, то есть
     ссылки берут цвет у родителя. Правило `a { color: … }` перекрасило бы
     заодно ссылки в теле статьи и в комментариях, а их не трогаем.
     Цвет ссылок задаётся внутри наших компонентов.

   — Разделов про тело статьи. Кит их описывает, но форматирование статьи
     выведено из работы.

   — Скрытия «мёртвых» блоков (.promo, .quiz, .subscribe и прочих из кита):
     ни одного из этих классов в теме нет, это были заглушки-примеры.
     Прятать несуществующее — в лучшем случае мёртвый CSS.
   =========================================================================== */

/* 5.1. Заголовок раздела.

   В теме он залит градиентом «Ножа» (жёлтый → розовый) через
   `color: transparent` и `background-clip: text`. Такой пары в палитре
   сайта нет вовсе, и на странице психолога она читается чужой.

   Возвращаем сплошной цвет. Именно белый, а не основной тёмный: блок
   `.caption` лежит прямо на холсте, а холст тёмный — тёмным по нему
   было бы не прочитать. */
/*
 * Селектор с `.caption` обязателен: тема задаёт градиент как
 * `.caption .caption__title` — два класса против нашего одного. Наше
 * правило проигрывало, и заголовки разделов, которые печатают наши
 * шаблоны (клуб, поиск), оставались жёлто-розовыми.
 */
.caption .caption__title {
    font-family: var(--pz-font-ui);
    font-size: var(--pz-h2);
    font-weight: var(--pz-w-bold);
    line-height: var(--pz-h2-lh);
    letter-spacing: var(--pz-h2-ls);
    color: #fff;
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
}

/* 5.2. Кнопка темы.

   Цвет у неё уже наш — `#1e488f`, менять нечего. Приводим форму: радиус
   и скорость перехода из кита, при наведении — притемнение вместо
   штатного. */
.button {
    border-radius: var(--pz-r-md);
    transition: background-color var(--pz-dur) var(--pz-ease),
                border-color var(--pz-dur) var(--pz-ease);
}

.button:hover,
.button:focus-visible {
    background-color: var(--pz-accent-hover);
    border-color: var(--pz-accent-hover);
}

/* 5.3. Видимый фокус.

   В теме `a { outline: 0 }`, то есть с клавиатуры не видно, где ты
   находишься. Возвращаем — по `:focus-visible`, поэтому у мыши обводка
   не появляется.

   Комментарии исключены: их оформление живёт в своём плагине, и спорить
   с ним отсюда не нужно. */
:focus-visible {
    outline: 2px solid var(--pz-accent);
    outline-offset: 2px;
}

.comments :focus-visible,
.entry-comments :focus-visible {
    outline: revert;
    outline-offset: revert;
}

/* 5.4. Шапка.

   Структуру не трогаем — только вид: вместо тяжёлой тени волосяная
   линейка. Тень в 8 пикселей с четвертью непрозрачности была заметнее
   самой шапки. */
.header {
    box-shadow: none;
    border-bottom: 1px solid var(--pz-line-hair);
}

/* 5.5. Карточка в ленте.

   Разметку карточки менять нельзя, поэтому только форма: скругление
   и волосяная граница вместо ничего. Ритм ленты (крупная → ряд из двух →
   ряд из трёх) правится не здесь: у темы для этого есть размеры
   `unit--double` и `unit--triple`, они задаются настройками виджета
   в админке. */
.unit__inner {
    border-radius: var(--pz-r-lg);
    overflow: hidden;
}

.unit__content {
    border: 1px solid var(--pz-line-soft);
    border-top: 0;
}

/* 5.6. Строка метаданных: рубрика и время чтения.

   Разметку печатает mu-plugins/pech-info.php — своя версия `the_info()`.
   Классы `meta` и `meta__item` оставлены темовские, поэтому здесь только
   два уточнения на наши модификаторы. */
.meta__item--rubric {
    font-size: var(--pz-caps);
    font-weight: var(--pz-w-bold);
    letter-spacing: var(--pz-caps-ls);
    text-transform: uppercase;
    color: var(--pz-rubric);
}

.meta__item--reading {
    color: var(--pz-ink-meta);
}

/*
 * Дата и счётчик просмотров.
 *
 * Цвет задан явно, потому что иначе они наследуют белый от `body` — тема
 * держит текст белым для тёмного холста. На белой карточке статьи и
 * в карточках ленты дата получалась белым по белому: рубрике и времени
 * чтения свой цвет я задал, а дате забыл.
 *
 * Ограничено теми местами, где под текстом белое. В прозрачном виджете
 * тема красит `.meta` в белый поверх картинки — туда не лезем.
 */
.entry-header__info .meta__item--date,
.unit__content-info .meta__item--date,
.pz-card__info .meta__item--date {
    color: var(--pz-ink-second);
}

.entry-header__info .meta__item[data-pech-views],
.unit__content-info .meta__item[data-pech-views],
.pz-card__info .meta__item[data-pech-views] {
    color: var(--pz-ink-meta);
}

/* ===========================================================================
   6. ОБЩИЕ КОМПОНЕНТЫ

   Ими пользуются наши плагины и шаблоны: пустые состояния, врезка записи,
   второстепенные кнопки. Живут здесь, а не в каждом плагине, потому что
   одинаковы везде.
   =========================================================================== */

/* 6.1. Кнопки второго ряда.

   Главная кнопка у каждого плагина своя (она часть его разметки), а вот
   выходы из пустых состояний и вторичные действия одинаковы везде. */
.pz-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pz-2);
    min-height: var(--pz-h-btn);
    padding: 0 22px;

    font-family: var(--pz-font-ui);
    font-size: var(--pz-ui-sm);
    font-weight: var(--pz-w-medium);
    line-height: 1;
    text-decoration: none;

    border: 0;
    border-radius: var(--pz-r-md);
    cursor: pointer;

    transition: background-color var(--pz-dur) var(--pz-ease),
                border-color var(--pz-dur) var(--pz-ease);
}

.pz-btn--primary {
    background-color: var(--pz-accent);
    color: var(--pz-ink-on-accent);
}

.pz-btn--primary:hover {
    background-color: var(--pz-accent-hover);
    color: var(--pz-ink-on-accent);
}

.pz-btn--secondary {
    background-color: transparent;
    color: var(--pz-accent);
    border: solid 1px var(--pz-line);
}

.pz-btn--secondary:hover {
    border-color: var(--pz-accent);
    background-color: var(--pz-accent-wash);
    color: var(--pz-accent);
}


/* 6.2. Пустое состояние.

   В ките это белая карточка, а не пунктирная рамка на холсте: пустой
   раздел — обычное состояние сайта, а не поломка, и рамка «здесь чего-то
   не хватает» говорила бы неправду. Карточка ставит его в один ряд
   с обычным содержимым.

   Правило: значок, заголовок, одна фраза о том, что будет, и один выход. */
.pz-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--pz-3);

    padding: var(--pz-9);

    text-align: center;

    background-color: var(--pz-surface);
    border-radius: var(--pz-r-lg);
}

/* Значок — короткий прочерк в светлой плашке. Намеренно почти ничего
   не изображает: это пауза, а не иконка «ошибка». */
.pz-empty__mark {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;

    background-color: var(--pz-surface-quiet);
    border-radius: 11px;
}

.pz-empty__mark::before {
    content: "";
    width: 16px;
    height: 2px;
    background-color: #a9b8c4;
}

.pz-empty__title {
    margin: 0;

    font-family: var(--pz-font-ui);
    font-size: 19px;
    font-weight: var(--pz-w-bold);
    line-height: 1.3;
    color: var(--pz-ink);
}

.pz-empty__text {
    max-width: 440px;
    margin: 0;

    font-family: var(--pz-font-text);
    font-size: 17px;
    line-height: 1.55;
    color: var(--pz-ink-second);
    text-wrap: pretty;
}

.pz-empty .pz-btn {
    margin-top: var(--pz-1);
}

/* 6.3. Ссылки-метки как выход из пустого поиска.

   Раньше пустой поиск лежал прямо на тёмном холсте, и пилюли были белыми
   полупрозрачными. Теперь поиск — белая карточка (кит, артборд 07),
   поэтому пилюли светлые: #f2f5f9 с тёмной подписью, как в макете. */
.pz-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pz-2);
    justify-content: center;
    margin: var(--pz-3) 0 0;
    padding: 0;
    list-style: none;
}

.pz-tags__item {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 14px;

    font-family: var(--pz-font-ui);
    font-size: var(--pz-ui-xs);
    font-weight: var(--pz-w-medium);
    text-decoration: none;
    color: var(--pz-ink-second);

    background-color: var(--pz-surface-quiet);
    border-radius: var(--pz-r-pill);

    transition: background-color var(--pz-dur) var(--pz-ease),
                color var(--pz-dur) var(--pz-ease);
}

.pz-tags__item:hover {
    color: var(--pz-accent);
    background-color: var(--pz-accent-ring);
    text-decoration: none;
}

/* 6.4. Врезка после текста записи.

   Заменяет боковую колонку: на 18 статьях сайдбар был наполовину пуст,
   а единственное, что стоило там показывать, — запись на консультацию.
   После текста она уместнее: человек уже прочитал и готов. */
.pz-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 22px;

    padding: var(--pz-7) var(--pz-8);

    background-color: var(--pz-surface-quiet);
    border-radius: var(--pz-r-lg);
}

.pz-cta__body {
    flex: 1 1 16rem;
}

.pz-cta__title {
    margin: 0 0 var(--pz-1);

    font-family: var(--pz-font-ui);
    font-size: var(--pz-ui-lg);
    font-weight: var(--pz-w-bold);
    line-height: 1.3;
    color: var(--pz-ink);
}

.pz-cta__text {
    margin: 0;

    font-family: var(--pz-font-ui);
    font-size: var(--pz-ui-sm);
    line-height: 1.5;
    color: var(--pz-ink-second);
}

@media screen and (max-width: 767px) {
    .pz-cta {
        flex-direction: column;
        align-items: stretch;
    }

    /*
     * `flex: 1 1 16rem` задумано как минимальная ширина колонки с текстом.
     * После смены направления те же 16rem превращаются в минимальную
     * ВЫСОТУ, и врезка вырастала до 380 px с пустотой между текстом
     * и кнопкой.
     */
    .pz-cta__body {
        flex: 0 1 auto;
    }

    .pz-cta .pz-btn {
        width: 100%;
    }
}

/* 6.5. Служебная страница (404): пустое состояние плюс выходы. */
.pz-page {
    width: calc(100% - 2rem);
    max-width: 40rem;
    margin: 0 auto var(--pz-12);
}


/* 6.6. Подвал.

   Структуру не трогаем: тема печатает знак с описанием сайта, меню
   и строку копирайта. Приводим вид — воздух, волосяной разделитель,
   спокойные цвета поверх холста. */
.footer {
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.footer__logo-desc {
    font-family: var(--pz-font-ui);
    font-size: var(--pz-ui-xs);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.72);
}

.footer__copy {
    font-family: var(--pz-font-ui);
    font-size: var(--pz-meta);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.6);
}

/* 6.7. Заголовок группы на холсте: «Доступны сейчас», «Скоро», «Статьи».
   Лежит прямо на тёмном фоне, поэтому светлый. */
.seminar-group-title,
.pz-section-title {
    font-family: var(--pz-font-ui);
    font-size: 20px;
    font-weight: var(--pz-w-bold);
    line-height: 1.25;
    color: #fff;
}

/* ===========================================================================
   7. ШАПКА, ПОДВАЛ, ГЛАВНАЯ

   То, чего в теме нет вовсе или что она делает иначе, чем макет.
   =========================================================================== */

/* 7.1. Кнопка «Записаться» в шапке.

   Стоит на месте меню соцсетей (фильтр `pre_wp_nav_menu` в pech-design.php):
   значки уводили с сайта из шапки, их место в подвале. Разметка повторяет
   темовский пункт меню, поэтому кнопка попадает и в мобильное меню. */
.navbar__book .menu {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Зазор до значка поиска: без него кнопка упирается в лупу и читается
   как одна деталь с ней. */
.navbar__book {
    margin-right: var(--pz-4);
}

.navbar__book .menu .menu__item--book,
.navbar__menu .menu .menu__item--book,
.navbar__pages .menu .menu__item--book {
    align-items: center;
    margin: 0 0 0 var(--pz-5);
    font-size: var(--pz-ui-xs);
    line-height: 1;
}

/*
 * Высота ровно 36, как в макете.
 *
 * Тема делает пункт меню флекс-контейнером, а ссылку внутри — блоком:
 * без `align-self` ссылка растягивается по высоте самого высокого пункта,
 * и кнопка выходила заметно выше кнопки из макета. Отсюда и явная высота,
 * и центрирование по вертикали.
 */
.navbar__book .menu .menu__item--book .menu__item-link,
.navbar__menu .menu .menu__item--book .menu__item-link,
.navbar__pages .menu .menu__item--book .menu__item-link {
    display: inline-flex;
    align-items: center;
    align-self: center;
    box-sizing: border-box;
    height: 36px;
    min-height: 0;
    padding: 0 16px;

    font-size: var(--pz-ui-xs);
    font-weight: var(--pz-w-medium);
    line-height: 1;
    color: var(--pz-ink-on-accent);

    background-color: var(--pz-accent);
    border-radius: 9px;
}

.navbar__book .menu .menu__item--book .menu__item-link:hover,
.navbar__menu .menu .menu__item--book .menu__item-link:hover,
.navbar__pages .menu .menu__item--book .menu__item-link:hover {
    background-color: var(--pz-accent-hover);
    color: var(--pz-ink-on-accent);
}

/* 7.2. Подвал.

   Разметку печатает сам mu-плагин (см. pech-design.php): в теме подвал
   одноколоночный, а хуков внутри шаблона нет. Классы свои, поэтому
   спорить с темой не приходится вовсе. */
.pz-footer {
    display: block;
    width: calc(100% - 2rem);
    max-width: 78rem;
    margin: var(--pz-9) auto 0;
    padding: var(--pz-10) 0 var(--pz-8);
}

.pz-footer__cols {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--pz-8);
    padding-bottom: var(--pz-8);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

@media screen and (min-width: 768px) {
    .pz-footer__cols {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--pz-9);
    }
}

.pz-footer__logo {
    display: inline-block;

    font-family: var(--pz-font-ui);
    font-size: 24px;
    font-weight: var(--pz-w-bold);
    letter-spacing: 0.02em;
    color: #fff;
    text-decoration: none;
}

.pz-footer__desc {
    max-width: 260px;
    margin: var(--pz-3) 0 0;

    font-family: var(--pz-font-ui);
    font-size: var(--pz-ui-sm);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.6);
}

/* Значки соцсетей — плашки 38×38. Глиф центрируем явно: у шрифта иконок
   своя базовая линия, и без этого он прижимается к верхнему углу. */
.pz-footer__social {
    /* Тема центрирует `.social` — здесь значки идут от левого края,
       под описанием, как в макете. */
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--pz-2);
    margin: var(--pz-4) 0 0;
    padding: 0;
    list-style: none;
}

.pz-footer__social .menu__item,
.pz-footer__social .social__item {
    margin: 0;
}

/*
 * Селектор длинный не для красоты: тема объявляет
 * `.social .social__item .social__item-link { display: block }` — три класса,
 * и это специфичнее, чем `.pz-footer__social a`. Значок переставал
 * центрироваться и прижимался к левому верхнему углу плашки, а размер
 * брался темовский. Повторяем её цепочку и добавляем свой класс сверху.
 */
.pz-footer__social a,
.pz-footer__social .social__item .social__item-link,
.pz-footer__social .menu__item .menu__item-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;

    font-size: 17px;
    line-height: 1;
    color: rgba(255, 255, 255, 0.86);

    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 9px;
}

/*
 * Значки внутри плашек.
 *
 * Тут два разных механизма: почти все значки — глифы шрифта `knife-icons`,
 * а YouTube мы рисуем маской по SVG (его в шрифте нет вовсе). У глифа своя
 * базовая линия, у маски — своя коробка, и в одном ряду они вставали
 * на разной высоте. Поэтому задаём обоим одинаковую коробку 1em и центруем
 * содержимое явно.
 */
.pz-footer__social .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1em;
    height: 1em;
    line-height: 1;
}

.pz-footer__social .icon::before {
    display: block;
    line-height: 1;
}

/* Значок-маска (YouTube) должен занимать ту же коробку, что и глиф. */
.pz-footer__social .icon--youtube::before {
    width: 1em;
    height: 1em;
    background-size: contain;
}

.pz-footer__social a:hover {
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.pz-footer__label {
    margin: 0 0 var(--pz-3);

    font-family: var(--pz-font-ui);
    font-size: var(--pz-caps);
    font-weight: var(--pz-w-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.pz-footer__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pz-footer__list a {
    font-family: var(--pz-font-ui);
    font-size: var(--pz-ui-sm);
    color: #fff;
    text-decoration: none;
}

.pz-footer__list a:hover {
    color: rgba(255, 255, 255, 0.7);
}

.pz-footer__text {
    max-width: 240px;
    margin: 0 0 var(--pz-4);

    font-family: var(--pz-font-ui);
    font-size: var(--pz-ui-sm);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.7);
}

/* Кнопка вывернутая: белая на тёмном. Синяя на этом фоне теряется,
   а это единственное действие во всём подвале. */
.pz-footer__button {
    display: inline-flex;
    align-items: center;
    min-height: var(--pz-h-btn);
    padding: 0 var(--pz-5);

    font-family: var(--pz-font-ui);
    font-size: var(--pz-ui-sm);
    font-weight: var(--pz-w-medium);
    color: var(--pz-accent);
    text-decoration: none;

    background-color: #fff;
    border-radius: var(--pz-r-md);
}

.pz-footer__button:hover {
    background-color: rgba(255, 255, 255, 0.88);
    color: var(--pz-accent-hover);
}

.pz-footer__bottom {
    padding-top: 22px;

    font-family: var(--pz-font-ui);
    font-size: var(--pz-ui-xs);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.5);
}

.pz-footer__bottom a {
    color: rgba(255, 255, 255, 0.7);
}

/* 7.3. Главная: блок автора. */
.pz-hero {
    display: flex;
    align-items: center;
    gap: 30px;

    width: calc(100% - 2rem);
    max-width: 78rem;
    /* 34px сверху — отступ содержимого от шапки, как в макете.
       Шапка липкая, и без него карточка к ней прилипала. */
    margin: 34px auto var(--pz-7);
    padding: 30px;

    background-color: var(--pz-surface);
    border-radius: var(--pz-r-lg);
}

.pz-hero__photo {
    flex: none;
    width: 168px;
    height: 200px;
    overflow: hidden;
    border-radius: 12px;
    background-color: var(--pz-surface-quiet);
}

/* Плашка без фото видна только владелице — и тогда объясняет, что не так. */
.pz-hero__photo--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--pz-3);
    border: dashed 1.5px var(--pz-line-dashed);
    background-color: var(--pz-surface-input);
}

.pz-hero__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Кадр вертикальный, а лицо на портрете выше середины: без сдвига
       в маленький кадр попадает стена, а подбородок встаёт по центру. */
    object-position: center 30%;
}

.pz-hero__body {
    display: flex;
    flex-direction: column;
    gap: var(--pz-3);
}

.pz-hero__kicker {
    margin: 0;

    font-family: var(--pz-font-ui);
    font-size: var(--pz-caps);
    font-weight: var(--pz-w-bold);
    letter-spacing: var(--pz-caps-ls);
    text-transform: uppercase;
    color: var(--pz-ink-meta);
}

.pz-hero__name {
    margin: 0;

    font-family: var(--pz-font-ui);
    font-size: var(--pz-h2);
    font-weight: var(--pz-w-bold);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--pz-ink);
}

.pz-hero__lead {
    max-width: 560px;
    margin: 0;

    font-family: var(--pz-font-text);
    font-size: 19px;
    line-height: 1.55;
    color: var(--pz-ink-soft);
    text-wrap: pretty;
}

.pz-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pz-3);
    margin: var(--pz-1) 0 0;
}

/* 7.3а. Архивы рубрик и меток: заголовок раздела над той же лентой.

   Заголовок темы залит градиентом «Ножа» и набран в 2.5rem — на сайте
   психолога это плашка из другого издания. Здесь он такой же, как
   у вебинаров и клуба: белый, 34, на холсте. */
.pz-archive-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--pz-4);

    width: calc(100% - 2rem);
    max-width: 78rem;
    margin: var(--pz-9) auto var(--pz-4);
}

.pz-archive-title {
    margin: 0;

    font-family: var(--pz-font-ui);
    font-size: var(--pz-h2);
    font-weight: var(--pz-w-bold);
    line-height: var(--pz-h2-lh);
    letter-spacing: var(--pz-h2-ls);
    color: #fff;
}

.pz-archive-desc {
    width: calc(100% - 2rem);
    max-width: 62rem;
    margin: 0 auto var(--pz-6);

    font-family: var(--pz-font-text);
    font-size: var(--pz-text-sm);
    line-height: var(--pz-text-sm-lh);
    color: rgba(255, 255, 255, 0.7);
    text-wrap: pretty;
}

/*
 * Пагинация — теми же кнопками, что «Все статьи» на главной. Тема рисует
 * ссылки «Предыдущие» и «Следующие» полосами во всю ширину: на холсте они
 * читались как две пустые плашки, а не как кнопки.
 */
.pz-archive-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pz-3);
    justify-content: center;

    width: calc(100% - 2rem);
    max-width: 78rem;
    margin: var(--pz-8) auto 0;
}

.pz-archive-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-height: var(--pz-h-btn);
    margin: 0;
    padding: 0 22px;

    font-family: var(--pz-font-ui);
    font-size: var(--pz-ui-sm);
    font-weight: var(--pz-w-medium);
    line-height: 1;
    color: #fff;
    text-align: center;
    text-decoration: none;

    background-color: transparent;
    border: solid 1px rgba(255, 255, 255, 0.35);
    border-radius: var(--pz-r-md);

    transition: background-color var(--pz-dur) var(--pz-ease),
                border-color var(--pz-dur) var(--pz-ease);
}

.pz-archive-nav a:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
    border-color: #fff;
    filter: none;
}

/* Тема прячет первую ссылку на узком экране и растягивает вторую —
   кнопкам это не нужно, они и так по месту. */
@media screen and (max-width: 767px) {
    .pz-archive-nav a,
    .pz-archive-nav a:last-child {
        display: inline-flex;
    }
}

/* 7.4. Главная: заголовок ленты и сама лента. */
.pz-feed-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--pz-4);

    width: calc(100% - 2rem);
    max-width: 78rem;
    margin: 0 auto var(--pz-4);
}

.pz-feed-head__count {
    font-family: var(--pz-font-ui);
    font-size: var(--pz-ui-xs);
    color: rgba(255, 255, 255, 0.62);
}

/*
 * Ритм: одна крупная, ряд из двух, дальше по три. Шесть колонок — общее
 * кратное двух и трёх, поэтому оба ряда ложатся в одну сетку без вложенных
 * контейнеров.
 */
.pz-feed {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--pz-gap-grid-2);

    width: calc(100% - 2rem);
    max-width: 78rem;
    margin: 0 auto;
}

.pz-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;

    background-color: var(--pz-surface);
    border-radius: var(--pz-r-lg);
}

.pz-card__media {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background-color: var(--pz-surface-quiet);
}

.pz-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.pz-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--pz-2);
    padding: var(--pz-6);
}

.pz-card__title {
    margin: 0;

    font-family: var(--pz-font-ui);
    font-size: var(--pz-h4);
    font-weight: var(--pz-w-bold);
    line-height: 1.25;
    letter-spacing: var(--pz-h4-ls);
    text-wrap: pretty;
}

.pz-card__title a {
    color: var(--pz-ink);
    text-decoration: none;
}

.pz-card__title a:hover {
    color: var(--pz-accent);
}

.pz-card__excerpt {
    margin: 0;

    font-family: var(--pz-font-text);
    font-size: 17px;
    line-height: 1.55;
    color: var(--pz-ink-second);
    text-wrap: pretty;
}

.pz-card__info .meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pz-2);
}

@media screen and (min-width: 900px) {
    .pz-feed { grid-template-columns: repeat(6, 1fr); }

    .pz-card--lead {
        grid-column: span 6;
        flex-direction: row;
        align-items: stretch;
    }

    .pz-card--lead .pz-card__media {
        flex: 0 0 520px;
        aspect-ratio: auto;
    }

    .pz-card--lead .pz-card__body {
        justify-content: center;
        padding: var(--pz-pad-card-lg);
    }

    .pz-card--lead .pz-card__title { font-size: var(--pz-h3); }

    .pz-card--mid   { grid-column: span 3; }
    .pz-card--small { grid-column: span 2; }

    .pz-card--small .pz-card__title { font-size: 21px; }
}

@media screen and (max-width: 899px) {
    .pz-hero {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--pz-5);
        padding: var(--pz-pad-card);
    }

    .pz-hero__photo { width: 100%; height: 260px; }
    .pz-hero__actions .pz-btn { width: 100%; }
}

/* ===========================================================================
   8. НАШИ КНОПКИ ВНУТРИ ТЕКСТА ЗАПИСИ

   Тема красит все ссылки в теле записи: `.entry-content a { color: #1e488f;
   border-bottom: 1px solid }`. Специфичность этого правила (0,1,1) выше,
   чем у одиночного класса кнопки (0,1,0), поэтому наши кнопки внутри
   `the_content` получали синий текст на синем фоне и подчёркивание.

   Врезка «Записаться» в статье, блок подписки клуба и кнопка на странице
   консультаций дописываются фильтрами `the_content`, то есть попадают
   именно туда. Поднимаем специфичность и возвращаем свои цвета.
   =========================================================================== */
.entry-content .pz-btn,
.entry-content .club-paywall__button {
    border-bottom: 0;
    text-decoration: none;
}

.entry-content .pz-btn--primary,
.entry-content .club-paywall__button {
    color: var(--pz-ink-on-accent);
}

.entry-content .pz-btn--primary:hover,
.entry-content .club-paywall__button:hover:not([disabled]) {
    color: var(--pz-ink-on-accent);
}

.entry-content .pz-btn--secondary {
    color: var(--pz-accent);
}

.entry-content .club-paywall__button[disabled] {
    color: var(--pz-ink-disabled);
}

/* 9. Подсказка на месте незагруженного материала.

   Видна только тому, кто может править страницы: владелице она говорит,
   чего не хватает, посетителю говорила бы лишь о недоделанном сайте.
   Моноширинный — служебный голос, отличимый от авторского. */
.pz-placeholder {
    font-family: var(--pz-font-mono);
    font-size: 11px;
    line-height: 1.5;
    text-align: center;
    color: var(--pz-ink-meta);
}

/* 10. Кнопка на тёмном холсте: архивы, «Все статьи», выходы из пустых
   состояний, которые лежат не в карточке. Обычная второстепенная кнопка
   на этом фоне читалась бы синим по чёрному. */
.pz-btn--on-canvas {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.35);
}

.pz-btn--on-canvas:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
    border-color: #fff;
}

.pz-feed-more {
    display: flex;
    justify-content: center;

    width: calc(100% - 2rem);
    max-width: 78rem;
    margin: var(--pz-8) auto 0;
}

/* Кнопку «Записаться» прижимаем к правому краю меню — в макете она стоит
   отдельно от разделов, рядом с поиском, а не в их ряду. */
.navbar__menu .menu { align-items: center; }

/* 11. Фон за краями страницы.

   Холст задаётся настройкой темы и красит саму страницу, но у `html` тема
   держит свой цвет — и при «резиновом» прокручивании за верхний или нижний
   край на секунду показывается он. Приводим к тому же холсту, чтобы
   на этом краю не мигало чужим цветом. */
html {
    background-color: var(--pz-canvas);
}

/* ===========================================================================
   9. КАРТОЧКА СТРАНИЦЫ И СТАТЬИ

   Только форма самой карточки — скругление углов. Внутренности статьи
   (колонка текста, заголовок, лид, цитаты, подписи, метки, сайдбар)
   принадлежат теме и остаются за ней: здесь их не трогаем.
   =========================================================================== */

/* 9.0. Карточка целиком.

   Тело страницы и статьи у темы белое и во всю ширину, с прямыми углами:
   приём сетевого издания, где полоса тянется от края до края.

   Белый фон отдаём самому `.post`, а не полагаемся на фоны его детей.
   Так у карточки один край и одно скругление. Скругление отдельных блоков
   (`.entry-header`, `.entry-content`, `.entry-footer`) выглядело как
   несколько карточек подряд: между блоками просвечивал холст, и в конце
   статьи получались два «дна» одно под другим.

   `overflow: hidden` у `.post` уже стоит — содержимое обрезается по радиусу. */
.post {
    background-color: var(--pz-surface);
    border-radius: var(--pz-r-lg);
}

/*
 * Отступ от шапки. Раньше его случайно давал прозрачный блок тэглайна,
 * который тема ставит первым (`.entry-caption` с `order: -1`): сквозь него
 * просвечивал холст. Стоило отдать фон самому `.post` — и полоска пропала.
 * Теперь отступ задан явно и не зависит от того, печатает тема этот блок
 * или нет.
 */
body.is-single .post,
body.is-page .post {
    margin-top: var(--pz-9);
}

/*
 * Две страницы живут по другому правилу: у формы и у «Обо мне» карточки
 * лежат внутри — одна у формы, три у «Обо мне», — и белый фон самого
 * `.post` подложил бы под них ещё одно полотно. Там он прозрачный,
 * а отступы сверху задают сами страницы.
 */
body.pech-form-page .post,
body.pech-about-page .post {
    margin-top: 0;

    background-color: transparent;
    border-radius: 0;
}

/* Страницы («Консультации», «Обо мне», политика) — той же ширины, что
   карточка статьи. Страница формы шире не станет: её карточка живёт внутри
   и держит свои 760. */
body.is-page .post {
    max-width: var(--pz-card-max);
}

/* ===========================================================================
   10. ТЕКУЩИЙ ПУНКТ МЕНЮ

   Кит подсвечивает раздел, в котором человек находится (DESIGN.md, 5.6);
   тема этого не делает вовсе, хотя WordPress сам ставит нужный класс
   на элемент списка. Одна строка избавляет от вопроса «где я».
   =========================================================================== */
.menu .menu__item.current-menu-item .menu__item-link,
.menu .menu__item.current-menu-parent .menu__item-link,
.menu .menu__item.current-menu-ancestor .menu__item-link {
    color: var(--pz-accent);
}

/* В подвале пункты стоят на тёмном холсте: акцентный синий по нему
   не читается, поэтому там текущий пункт отмечаем яркостью. */
.pz-footer .menu .menu__item.current-menu-item .menu__item-link {
    color: var(--pz-ink-on-accent);
}

/* ===========================================================================
   11. СТРАНИЦА 404

   Кит (артборд 07) рисует её белой карточкой: номер ошибки — служебная
   строка моноширинным, заголовок обычного размера, три выхода. Прежний
   вариант печатал «404» заголовком темы во всю ширину — самая крупная
   надпись на экране сообщала то единственное, что человеку не нужно.
   =========================================================================== */
.pz-404 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--pz-3);

    padding: var(--pz-9) var(--pz-8) var(--pz-10);

    background-color: var(--pz-surface);
    border-radius: var(--pz-r-lg);
}

.pz-404__code {
    margin: 0;

    font-family: var(--pz-font-mono);
    font-size: var(--pz-ui-sm);
    color: var(--pz-ink-meta);
}

.pz-404__title {
    margin: 0;

    font-family: var(--pz-font-ui);
    font-size: var(--pz-h3);
    font-weight: var(--pz-w-bold);
    line-height: 1.2;
    letter-spacing: var(--pz-h3-ls);
    color: var(--pz-ink);
    text-wrap: pretty;
}

.pz-404__text {
    max-width: 34rem;
    margin: 0;

    font-family: var(--pz-font-text);
    font-size: var(--pz-text-sm);
    line-height: var(--pz-text-sm-lh);
    color: var(--pz-ink-second);
    text-wrap: pretty;
}

/* Выходы: первый — главный, остальные равны между собой. Все три
   одинаковыми кнопками означали бы, что выбор безразличен, а он не
   безразличен: с главной человек хотя бы поймёт, куда попал. */
.pz-404__exits {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pz-2);
    margin: var(--pz-3) 0 0;
}

/* ===========================================================================
   12. САЙДБАР СТАТЬИ

   Тема держит справа колонку в 316 px и печатает в неё виджеты зоны
   `knife-sidebar`. Виджетов не было, и колонка стояла пустой. Теперь там
   запись и вебинары — разметку даёт mu-плагин (`pech_design_sidebar`).
   =========================================================================== */
.pz-side {
    display: flex;
    flex-direction: column;
    gap: var(--pz-4);

    /* Колонка короче статьи, поэтому она едет вместе с чтением. Отступ
       сверху — под липкую шапку темы. */
    position: sticky;
    top: 88px;
}

.pz-side__card {
    padding: var(--pz-6);

    background-color: var(--pz-surface);
    border-radius: var(--pz-r-lg);
}

.pz-side__title {
    margin: 0 0 var(--pz-2);

    font-family: var(--pz-font-ui);
    font-size: var(--pz-ui-lg);
    font-weight: var(--pz-w-bold);
    line-height: 1.25;
    color: var(--pz-ink);
    text-wrap: pretty;
}

.pz-side__text {
    margin: 0 0 var(--pz-4);

    font-family: var(--pz-font-ui);
    font-size: var(--pz-ui-xs);
    line-height: 1.5;
    color: var(--pz-ink-second);
    text-wrap: pretty;
}

.pz-side__button {
    width: 100%;
}

.pz-side__list {
    display: flex;
    flex-direction: column;
    gap: var(--pz-3);
    margin: var(--pz-3) 0 0;
    padding: 0;
    list-style: none;
}

.pz-side__link {
    display: flex;
    gap: var(--pz-3);
    align-items: center;

    color: inherit;
    text-decoration: none;
}

.pz-side__media {
    flex: 0 0 64px;
    width: 64px;
    height: 48px;
    overflow: hidden;

    background-color: var(--pz-surface-quiet);
    border-radius: var(--pz-r-sm);
}

.pz-side__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pz-side__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pz-side__name {
    font-family: var(--pz-font-ui);
    font-size: var(--pz-ui-xs);
    font-weight: var(--pz-w-medium);
    line-height: 1.35;
    color: var(--pz-ink);
    text-wrap: pretty;
}

.pz-side__link:hover .pz-side__name {
    color: var(--pz-accent);
}

.pz-side__note {
    font-family: var(--pz-font-ui);
    font-size: var(--pz-meta);
    color: var(--pz-ink-meta);
}

.pz-side__more {
    display: inline-block;
    margin-top: var(--pz-4);

    font-family: var(--pz-font-ui);
    font-size: var(--pz-ui-xs);
    font-weight: var(--pz-w-medium);
    color: var(--pz-accent);
    text-decoration: none;
}

.pz-side__more:hover {
    color: var(--pz-accent-hover);
    text-decoration: underline;
}

/* На узком экране тема кладёт сайдбар под статью — липкость там только
   мешала бы. */
@media screen and (max-width: 899px) {
    .pz-side {
        position: static;
    }
}

/* ===========================================================================
   13. КНОПКИ «ПОДЕЛИТЬСЯ»

   Радиус у темы 4 px — от прямоугольника отличается едва, и рядом с нашими
   кнопками (10 px) они читались как чужие. Цвета сервисов оставляем: это
   их фирменные, и узнаются они именно по ним.
   =========================================================================== */
.share .share__link,
.share .share__native {
    border-radius: var(--pz-r-md);
}

/*
 * «Поделиться» — наша кнопка, и рядом с темовскими она выходила мельче:
 * у соцсетей значок из шрифта `knife-icons` крупнее, чем наша маска в 1em,
 * и он же задавал кнопкам высоту. Приводим к одной высоте и увеличиваем
 * значок, чтобы ряд читался как три одинаковые кнопки, а не две и одна.
 */
.share .share__link,
.share .share__native {
    min-height: 40px;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
}

.share .share__native .icon--share:before {
    width: 1.125em;
    height: 1.125em;
}

/* ===========================================================================
   14. ОТСТУП САЙДБАРА

   Карточка статьи получает отступ от шапки (раздел 9), а колонка справа
   начиналась сразу под ней и вставала выше на эти же 40 px. Верхние края
   должны совпадать: это один ряд, а не два разных блока.
   =========================================================================== */
body.is-single .sidebar {
    margin-top: var(--pz-9);
}

/* ===========================================================================
   15. КНОПКА «ЗАПИСАТЬСЯ» В МОБИЛЬНОМ МЕНЮ

   На узком экране тема разворачивает `.navbar` панелью на синем фоне.
   Наш блок с кнопкой попадал туда обычной строкой в ряду пунктов: главное
   действие сайта выглядело как ссылка «Политика конфиденциальности».

   Отделяем его линейкой (так тема отделяла значки соцсетей, стоявшие
   на этом месте раньше) и делаем белой кнопкой: акцентный синий на синем
   фоне панели не читается.
   =========================================================================== */
@media screen and (max-width: 1023px) {
    .navbar .navbar__book {
        width: 100%;
        /* Отступ до лупы нужен только в шапке: в развёрнутом меню он
           сдвигал кнопку влево от центра. */
        margin: var(--pz-4) 0 0;
        padding: var(--pz-4) 0 0;

        border-top: solid 1px rgba(255, 255, 255, 0.25);
    }

    /* Центрируем и контейнер, и список внутри: тема кладёт меню в колонку,
       и одного `justify-content` на списке не хватало — кнопка вставала
       левее середины. */
    .navbar .navbar__book {
        display: flex;
        justify-content: center;
    }

    .navbar .navbar__book .menu {
        display: flex;
        justify-content: center;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .navbar .navbar__book .menu .menu__item--book {
        margin: 0;
    }

    .navbar .navbar__book .menu .menu__item--book .menu__item-link {
        height: var(--pz-h-btn);
        padding: 0 24px;

        font-size: var(--pz-ui-sm);
        color: var(--pz-accent);

        background-color: #fff;
        border-radius: var(--pz-r-md);
    }

    .navbar .navbar__book .menu .menu__item--book .menu__item-link:hover {
        color: var(--pz-accent-hover);
        background-color: #fff;
    }
}

/* ===========================================================================
   16. КОММЕНТАРИИ И РЕАКЦИИ НА УЗКОМ ЭКРАНЕ

   Плагин комментариев объявляет `.cloud-comments { max-width: 46rem }`,
   а тема — `.entry-content > * { width: 40rem; max-width: 100% }`.
   Специфичность у обоих одинаковая, и побеждает тот, чей файл подключён
   позже, — плагин. На телефоне блок оставался шириной 640 px при экране
   в 390: заголовок «Оцените материал», кнопки реакций и поле ввода
   уезжали за правый край.

   Селектор из двух классов возвращает блоку ширину родителя. Внутренности
   (форма, поле, кнопка отправки) сжимаются вслед за ним.
   =========================================================================== */
.entry-content .cloud-comments {
    width: 100%;
    /* Не «во всю ширину», а по колонке текста: 100% чинило телефон,
       но на большом экране растягивало реакции и форму на всю карточку,
       и блок переставал быть частью статьи. 40rem — та же колонка,
       по которой тема выравнивает абзацы. */
    max-width: 40rem;
    margin-left: auto;
    margin-right: auto;
}

/* ===========================================================================
   17. ФИЛЬТР БЛОГА

   Ряды кнопок над лентой: доступ, тема, возраст. Живут на холсте, поэтому
   светлые контурные — как выходы на 404 и пагинация архива.
   =========================================================================== */
.pz-filter {
    display: flex;
    flex-direction: column;
    gap: var(--pz-3);

    width: calc(100% - 2rem);
    max-width: 78rem;
    margin: 0 auto var(--pz-6);
}

.pz-filter__row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pz-2) var(--pz-3);
    align-items: baseline;
}

.pz-filter__label {
    flex: 0 0 96px;

    font-family: var(--pz-font-ui);
    font-size: var(--pz-caps);
    font-weight: var(--pz-w-bold);
    letter-spacing: var(--pz-caps-ls);
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}

.pz-filter__items {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pz-2);
}

.pz-filter__item {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 14px;

    font-family: var(--pz-font-ui);
    font-size: var(--pz-ui-xs);
    font-weight: var(--pz-w-medium);
    color: #fff;
    text-decoration: none;

    background-color: rgba(255, 255, 255, 0.08);
    border: solid 1px transparent;
    border-radius: var(--pz-r-pill);

    transition: background-color var(--pz-dur) var(--pz-ease),
                border-color var(--pz-dur) var(--pz-ease);
}

.pz-filter__item:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.16);
}

/* Выбранное значение — белым по холсту: на тёмном фоне это единственная
   заливка, которую видно боковым зрением. */
.pz-filter__item--on,
.pz-filter__item--on:hover {
    color: var(--pz-accent);
    background-color: #fff;
    border-color: #fff;
}

.pz-filter__reset {
    align-self: flex-start;

    font-family: var(--pz-font-ui);
    font-size: var(--pz-ui-xs);
    color: rgba(255, 255, 255, 0.7);
    text-decoration: underline;
}

.pz-filter__reset:hover {
    color: #fff;
}

@media screen and (max-width: 599px) {
    .pz-filter__row {
        flex-direction: column;
        gap: var(--pz-2);
        align-items: stretch;
    }

    .pz-filter__label {
        flex: none;
    }
}

/* ===========================================================================
   18. ВЕБИНАР В СТАТЬЕ

   Блок стоит внутри текста, поэтому он тише врезки «Записаться»: кремовая
   поверхность вместо серо-голубой и обычная строка вместо заголовка —
   это предложение по ходу чтения, а не конец страницы.
   =========================================================================== */
.entry-content .pz-offer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--pz-5);
    align-items: center;

    margin: var(--pz-8) auto;
    padding: var(--pz-6);

    background-color: var(--pz-surface-cream);
    border-radius: var(--pz-r-lg);
}

.pz-offer__media {
    flex: 0 0 168px;
    width: 168px;
    overflow: hidden;

    aspect-ratio: 16 / 9;
    background-color: var(--pz-surface-quiet);
    border-radius: var(--pz-r-md);
    line-height: 0;
}

.entry-content .pz-offer__media {
    border-bottom: 0;
}

.pz-offer__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pz-offer__body {
    flex: 1 1 16rem;
    min-width: 0;
}

.pz-offer__kicker {
    margin: 0 0 var(--pz-2);

    font-family: var(--pz-font-ui);
    font-size: var(--pz-caps);
    font-weight: var(--pz-w-bold);
    letter-spacing: var(--pz-caps-ls);
    text-transform: uppercase;
    color: var(--pz-warm);
}

.entry-content .pz-offer__title {
    margin: 0 0 var(--pz-2);

    font-family: var(--pz-font-ui);
    font-size: var(--pz-h4);
    font-weight: var(--pz-w-bold);
    line-height: 1.25;
    letter-spacing: var(--pz-h4-ls);
    text-wrap: pretty;
}

.entry-content .pz-offer__title a {
    color: var(--pz-ink);
    text-decoration: none;
    border-bottom: 0;
}

.entry-content .pz-offer__title a:hover {
    color: var(--pz-accent);
}

.entry-content .pz-offer__text {
    margin: 0 0 var(--pz-4);

    font-family: var(--pz-font-ui);
    font-size: var(--pz-ui-sm);
    line-height: 1.5;
    color: var(--pz-ink-second);
    text-wrap: pretty;
}

@media screen and (max-width: 599px) {
    .pz-offer__media {
        flex: 1 1 100%;
        width: 100%;
    }

    .entry-content .pz-offer .pz-offer__button {
        width: 100%;
    }
}