/* app.css — публичная часть blondinki.ru, направление «Пудра» (design/v2).
 *
 * Написан руками, без сборщика (ARCHITECTURE.md §7 п.4). Прототипы в
 * design/v2 собраны на Tailwind 4 и тянут шрифты, Alpine и сам Tailwind
 * с CDN — здесь всё переведено в обычные custom properties и классы.
 *
 * ТРИ ВЕЩИ ИЗ ПРОТОТИПА, КОТОРЫЕ СЮДА НЕ ПЕРЕЕХАЛИ, И ПОЧЕМУ:
 *
 *   1. Playfair Display и Inter с Google Fonts. Публичный CSP не пускает
 *      внешние источники ни в одной директиве, кроме frame-src (инвариант 6),
 *      а font-src разрешает только свой origin. Взяты системные стеки; замер
 *      ⟨З-20⟩ показал, что кириллицу из системных антикв полностью держит
 *      Constantia — она и стоит первой. Свой хостинг Playfair возможен и
 *      требует отдельного решения: это килобайты в бюджет и ADR.
 *   2. Tailwind. Шага сборки в проекте нет, он потребовал бы node_modules.
 *   3. Alpine — шапка, белеющая при прокрутке. Alpine запрещён на публичных
 *      страницах (инвариант 6: x-data требует unsafe-eval в CSP). Шапка
 *      сплошная сразу; в «Глянце» решение было тем же и по той же причине.
 *
 * Бюджет: не больше 15 КБ gzip, проверяется scripts/budget.sh.
 *
 * ЧТО ЗДЕСЬ ГЛАВНОЕ. Направление держится на трёх приёмах:
 *   1. тёплый почти-белый фон и НИ ОДНОГО чёрного пикселя;
 *   2. роза как основной цвет, а не как редкий акцент;
 *   3. мягкость формы — скругления, тонкая рамка, цветная тень вместо серой.
 */

:root {
  --paper: #fffafb;
  --ink: #212631;        /* НЕ чёрный: тёмный сине-графит. 15,3:1 по бумаге */
  --card: #ffffff;
  --primary: #e21d48;    /* роза. 4,9:1 по бумаге — годится и для текста */
  --primary-dark: #9e1532;
  --blush: #f7bad9;
  --pale: #fff0f2;
  --muted: #f8f2f3;
  --smoke: #686f7e;      /* вторичный текст. 4,89:1 по бумаге, 4,57:1 по подложке
                            --muted. Светлее не делать: на подложке провалится. */
  --mist: #efe7e9;

  /* Цвет рубрики в «Пудре» — тон бейджа и подложки, а не волосяная линия.
     Это главное отличие от «Глянца»: там цвет был редкостью, здесь он
     носитель настроения. Слаг, которого нет ниже, наследует розу: деградация
     мягкая, но НОВАЯ РУБРИКА ПОЛУЧАЕТ СВОЙ ЦВЕТ ТОЛЬКО ПРАВКОЙ ЭТОГО ФАЙЛА,
     и на связь «данные в БД — представление в CSS» замка нет.

     ЦВЕТА НИЖЕ ТЕМНЕЕ, ЧЕМ В README ПРОТОТИПА, И ЭТО ЗАМЕР, А НЕ ВКУС.
     Текст метки — 10 px, то есть мелкий: порог 4,5:1. Считал на
     НАСТОЯЩЕЙ подложке (бумага + 9 % цвета рубрики), она темнее чистой
     бумаги. Из шести цветов README три не проходили: dom 3,60,
     zdorove 3,87, krasota 4,05 — считано на подложке, которая мешается ИЗ
     ТОГО ЖЕ токена, поэтому затемнение текста темнит и фон. Затемнены
     ровно до 4,6: dom на 18 %, zdorove на 11 %, krasota на 8 %.
     --r-krasota намеренно НЕ равна --primary: у них разная работа —
     бренд-роза живёт в кнопках и ссылках крупнее 10 px. */
  --rubric: var(--primary);
  --r-krasota: #d01b42;
  --r-zdorove: #1c7c55;
  --r-stil: #6247aa;
  --r-otnosheniya: #a8325e;
  --r-dom: #956130;
  --r-karera: #395c8f;

  --on-ink-1: rgb(255 255 255 / .92);
  --on-ink-2: rgb(255 255 255 / .74);
  --rule-ink: rgb(255 255 255 / .22);
  --rule-paper: var(--mist);

  /* Прототип: Playfair Display + Inter. Здесь системные стеки, см. шапку.
     --figure сохранён как имя: на него ссылались номера страниц. */
  --display: Constantia, "Playfair Display", "Times New Roman",
             "Liberation Serif", Georgia, "PT Serif", serif;
  --figure: var(--display);
  --sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --inner: 87.5rem;
  --col: 44rem;
  --col-wide: 52rem;
  --pad: clamp(1.25rem, 4vw, 2.5rem);
  --gap-x: clamp(1.25rem, 2.5vw, 2rem);
  --gap-y: clamp(2rem, 4vw, 3.5rem);
  --sect: clamp(3.5rem, 8vw, 7rem);

  --radius: 1rem;
  --radius-sm: .5rem;
  --shadow: 0 4px 24px -4px rgb(226 29 72 / .08);
  --shadow-lift: 0 12px 40px -8px rgb(226 29 72 / .15);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { overflow-x: clip; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
::selection { background: var(--blush); color: var(--primary-dark); }
a { color: inherit; text-decoration: none; }

a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, summary:focus-visible {
  outline: 2px solid var(--primary); outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; transition-duration: .001ms !important;
  }
}

/* ── Шкала. Семь ролей, ни одной сверх. ─────────────────────────────────── */
.t-hero { font-family: var(--display); font-weight: 500;
  font-size: clamp(36px, 6.5vw, 72px); line-height: 1.08;
  letter-spacing: -.02em; text-wrap: balance; }
.t-cover { font-family: var(--display); font-weight: 500;
  font-size: clamp(40px, 7.5vw, 88px); line-height: 1.05; letter-spacing: -.02em; }
.t-sect { font-family: var(--display); font-weight: 500;
  font-size: clamp(26px, 3.4vw, 40px); line-height: 1.15; letter-spacing: -.01em; }
.t-card { font-family: var(--display); font-weight: 500;
  font-size: clamp(19px, 1.7vw, 25px); line-height: 1.25; text-wrap: balance; }
.t-lead { font-size: clamp(16px, 1.2vw, 18px); line-height: 1.6;
  color: var(--smoke); text-wrap: pretty; }
.t-meta { font: 500 12px/1.4 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.t-micro { font: 500 11px/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; }

/* ── Линии, метки, кнопки ───────────────────────────────────────────────── */
.hair { color: inherit; border-bottom: 1px solid var(--mist); padding-bottom: 1px;
  transition: border-color .25s ease, color .25s ease; }
.hair:hover { border-bottom-color: var(--primary); color: var(--primary); }

.mark { display: inline-block; padding: .3rem .7rem; border-radius: 999px;
  font: 500 10px/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: var(--rubric);
  background: color-mix(in srgb, var(--rubric) 9%, transparent);
  transition: background-color .25s ease; }
.mark:hover { background: color-mix(in srgb, var(--rubric) 16%, transparent); }
.mark--krasota { --rubric: var(--r-krasota); }
.mark--zdorove { --rubric: var(--r-zdorove); }
.mark--stil { --rubric: var(--r-stil); }
.mark--otnosheniya { --rubric: var(--r-otnosheniya); }
.mark--dom { --rubric: var(--r-dom); }
.mark--karera { --rubric: var(--r-karera); }

/* Микро-кнопка: прямоугольник на фоне общей мягкости. Контраст формы
   намеренный, он есть и в прототипе. */
.read { display: inline-flex; align-items: center; gap: .6rem;
  padding: .55rem 1.1rem; border: 1px solid var(--mist);
  font: 500 10px/1 var(--sans); letter-spacing: .25em; text-transform: uppercase;
  color: var(--ink); background: transparent;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
.read:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.read--prev { flex-direction: row-reverse; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .8rem 1.6rem; border: 1px solid var(--primary); border-radius: 0;
  font: 500 11px/1 var(--sans); letter-spacing: .25em; text-transform: uppercase;
  color: #fff; background: var(--primary); cursor: pointer;
  transition: background-color .25s ease, border-color .25s ease; }
.btn:hover { background: var(--primary-dark); border-color: var(--primary-dark); }
.btn--danger { background: transparent; color: var(--primary); }
.btn--danger:hover { background: var(--primary); color: #fff; }

.sep { color: var(--mist); padding-inline: .45rem; }
.link-inv { color: var(--primary); }
.link-inv:hover { color: var(--primary-dark); }
.badge { display: inline-block; padding: .25rem .6rem; border-radius: 999px;
  background: var(--pale); color: var(--primary-dark);
  font: 500 10px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; }

/* ── Раскладка ──────────────────────────────────────────────────────────── */
.wrap { width: 100%; padding-inline: var(--pad); }
.inner { max-width: var(--inner); margin-inline: auto; }
main { max-width: none; padding: 0; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--pad); top: .75rem; z-index: 60;
  background: var(--card); color: var(--ink); padding: .8rem 1.25rem;
  border: 1px solid var(--primary);
  font: 500 11px/1.3 var(--sans); letter-spacing: .2em; text-transform: uppercase; }

.section { margin-block: var(--sect); }
.section__head { display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: var(--gap-y); }
.kicker { display: inline-flex; align-items: center; gap: .8rem; color: var(--primary); }
.kicker__rule { display: block; width: 40px; height: 1px; background: var(--primary); }

/* ── Шапка ──────────────────────────────────────────────────────────────── */
.site-header { position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--paper) 95%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--mist); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; height: 4.5rem; }

.logotype { font-family: var(--display); font-weight: 600; font-size: 22px;
  letter-spacing: -.01em; color: var(--ink); }
.logotype span { color: var(--primary); }

.nav__list { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem);
  list-style: none; margin: 0; padding: 0; }
.nav-link { font: 500 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); padding-block: .4rem;
  border-bottom: 1px solid transparent; transition: color .25s ease, border-color .25s ease; }
.nav-link:hover { color: var(--primary); border-bottom-color: var(--primary); }

/* Меню на узком экране — details, без единой строки JS. */
.menu { position: relative; }
.menu__toggle { list-style: none; cursor: pointer; padding: .5rem;
  font: 500 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  color: var(--ink); }
.menu__toggle::-webkit-details-marker { display: none; }
.menu[open] .menu__label--open { display: none; }

/* ── Обложка и герой ────────────────────────────────────────────────────── */
.cover { position: relative; padding-block: clamp(3rem, 8vw, 6rem);
  background: linear-gradient(160deg, var(--pale), var(--paper) 60%); }
.cover__title { color: var(--ink); max-width: 20ch; }
.cover__lead { margin-top: 1.25rem; max-width: 52ch; color: var(--smoke); }

.hero { position: relative; display: grid; gap: var(--gap-x);
  grid-template-columns: 1fr; align-items: center; }
.hero__img { width: 100%; height: auto; border-radius: var(--radius);
  box-shadow: var(--shadow); }
.hero__scrim { position: absolute; inset: 0; border-radius: var(--radius);
  background: linear-gradient(to top, rgb(33 38 49 / .55), transparent 55%); }
.hero__body { display: grid; gap: 1rem; }
.hero__title { color: inherit; }
.hero__lead { color: var(--smoke); max-width: 56ch; }
.hero__byline, .hero__foot { color: var(--smoke); }
.hero__link { display: inline-flex; }

@media (min-width: 60rem) {
  .hero { grid-template-columns: 1.15fr .85fr; }
}

/* ── Карточки ───────────────────────────────────────────────────────────── */
.grid { display: grid; gap: var(--gap-y) var(--gap-x); grid-template-columns: 1fr; }
@media (min-width: 40rem) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .grid { grid-template-columns: repeat(3, 1fr); } }

.card { display: flex; flex-direction: column; overflow: hidden;
  background: var(--card); border: 1px solid var(--mist); border-radius: var(--radius);
  box-shadow: var(--shadow); transition: box-shadow .3s ease, transform .3s ease; }
.card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.card__body { display: grid; gap: .8rem; padding: 1.4rem; }
.card__kicker { margin: 0; }
.card__title { margin: 0; }
.card__title a { transition: color .25s ease; }
.card__title a:hover { color: var(--primary); }
.card__lead { margin: 0; }
.card__foot { margin: 0; color: var(--smoke); display: flex; align-items: center;
  flex-wrap: wrap; }

.frame { display: block; overflow: hidden; background: var(--muted); }
.frame--4x5 { aspect-ratio: 4 / 5; }
.frame--3x4 { aspect-ratio: 3 / 4; }
.frame img { width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s ease; }
.card:hover .frame img { transform: scale(1.03); }

.empty { padding: var(--gap-y); text-align: center; color: var(--smoke);
  background: var(--muted); border-radius: var(--radius); }

/* ── Материал ───────────────────────────────────────────────────────────── */
.article { display: block; }
.article__hero { position: relative; padding-block: clamp(2.5rem, 6vw, 5rem);
  background: linear-gradient(160deg, var(--pale), var(--paper) 65%); }
.article__hero--plain { background: var(--paper); }
.article__hero-inner { max-width: var(--col-wide); margin-inline: auto; text-align: center; }
.article__hero-img { width: 100%; height: auto; border-radius: var(--radius);
  margin-top: 2rem; box-shadow: var(--shadow); }
.article__hero-type { display: inline-flex; }
.article__kicker { margin: 0 0 1rem; }
.article__title { margin: 0; color: var(--ink); }
.article__lead { margin: 1.25rem auto 0; max-width: 56ch; }
.article__byline { margin-top: 1.5rem; color: var(--smoke); display: flex;
  justify-content: center; align-items: center; flex-wrap: wrap; }
.article__bar { display: flex; align-items: center; gap: .8rem; justify-content: center; }
.article__bar-role { margin: 0; color: var(--smoke); }

/* ТЕЛО МАТЕРИАЛА — ОФОРМЛЕНИЕ НА ГОЛЫХ ТЕГАХ, И ЭТО НЕ СТИЛЬ, А НЕОБХОДИМОСТЬ.
   Санитайзер снимает class и style со всего, что приходит из админки
   (инвариант 9), поэтому автор физически не может разметить абзац классом.
   Раздача блоков по тегам записана в docs/redakciya/06 и повторена здесь. */
.article__body { max-width: var(--col); margin-inline: auto; padding-block: var(--gap-y);
  font-size: 18px; line-height: 1.8; }
.article__body > * + * { margin-top: 1.5em; }
.article__body h2 { font-family: var(--display); font-weight: 500;
  font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; margin-top: 2.2em; }
.article__body h3 { font-family: var(--display); font-weight: 500;
  font-size: clamp(20px, 2vw, 24px); line-height: 1.25; margin-top: 1.8em; }
.article__body h4 { font-family: var(--sans); font-weight: 600; font-size: 17px;
  letter-spacing: .02em; margin-top: 1.6em; }
.article__body a { color: var(--primary);
  border-bottom: 1px solid color-mix(in srgb, var(--primary) 35%, transparent); }
.article__body a:hover { border-bottom-color: var(--primary); }
.article__body ul, .article__body ol { padding-left: 1.4em; }
.article__body li + li { margin-top: .5em; }
.article__body blockquote { margin-inline: 0; padding: 1.4rem 1.6rem;
  background: var(--pale); border-left: 3px solid var(--primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-family: var(--display); font-size: 1.06em; }
.article__body blockquote p { margin: 0; }
.article__body blockquote p + p { margin-top: .8em; }
.article__body blockquote cite { display: block; margin-top: .8rem;
  font: 500 11px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: var(--smoke); font-style: normal; }
.article__body dl { padding: 1.3rem 1.5rem; background: var(--muted);
  border: 1px solid var(--mist); border-radius: var(--radius-sm); }
.article__body dt { font: 500 11px/1.4 var(--sans); letter-spacing: .16em;
  text-transform: uppercase; color: var(--primary); }
.article__body dt ~ dt { margin-top: 1.2em; }
.article__body dd { margin: .5em 0 0; }
.article__body figure { margin-inline: 0; }
.article__body figure img { width: 100%; border-radius: var(--radius-sm); }
.article__body figcaption { margin-top: .7rem; color: var(--smoke);
  font: 400 14px/1.5 var(--sans); }
.article__body hr { border: 0; height: 1px; background: var(--mist);
  margin-block: 2.4em; }
.article__body table { width: 100%; border-collapse: collapse; font-size: 15px; }
.article__body th, .article__body td { padding: .7rem .8rem; text-align: left;
  border-bottom: 1px solid var(--mist); vertical-align: top; }
.article__body th { font: 500 11px/1.4 var(--sans); letter-spacing: .12em;
  text-transform: uppercase; color: var(--smoke); }
.article__body caption { caption-side: top; text-align: left; padding-bottom: .7rem;
  color: var(--smoke); font: 400 14px/1.5 var(--sans); }

.table { width: 100%; border-collapse: collapse; }

/* ── Автор, теги, связанное ─────────────────────────────────────────────── */
.authorcard { display: flex; gap: 1.2rem; align-items: flex-start;
  max-width: var(--col); margin: var(--gap-y) auto 0; padding: 1.4rem;
  background: var(--card); border: 1px solid var(--mist); border-radius: var(--radius);
  box-shadow: var(--shadow); }
.authorcard__label { color: var(--primary); margin: 0 0 .4rem; }
.authorcard__name { font-family: var(--display); font-weight: 500; font-size: 20px;
  margin: 0; }
.authorcard__role { margin: .2rem 0 0; color: var(--smoke); }
.authorcard__more { margin-top: .6rem; }

.author { display: grid; gap: 1.5rem; }
.author__portrait { border-radius: var(--radius); }
.author__text { color: var(--smoke); }
.author__bio { max-width: var(--col); }

.tags { max-width: var(--col); margin: var(--gap-y) auto 0; }
.tags__label { color: var(--smoke); margin: 0 0 .6rem; }
.tags__list { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none;
  margin: 0; padding: 0; }
.tags__item { display: inline-block; padding: .35rem .8rem; border-radius: 999px;
  background: var(--muted); border: 1px solid var(--mist); color: var(--ink);
  font: 500 11px/1.2 var(--sans); letter-spacing: .1em;
  transition: background-color .25s ease, color .25s ease; }
.tags__item:hover { background: var(--primary); border-color: var(--primary); color: #fff; }

.related { margin-top: var(--sect); }

/* ── Комментарии ────────────────────────────────────────────────────────── */
.comments { max-width: var(--col); margin: var(--sect) auto 0; }
.comments__head { display: flex; align-items: baseline; gap: .8rem;
  margin-bottom: var(--gap-y); }
.comments__title { font-family: var(--display); font-weight: 500; font-size: 26px; margin: 0; }
.comments__count { color: var(--smoke); }
.comments__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.2rem; }
.comments__empty { color: var(--smoke); }
.comment { padding: 1.2rem 1.4rem; background: var(--card);
  border: 1px solid var(--mist); border-radius: var(--radius); }
.comment__author { font-weight: 600; }
.comment__date { color: var(--smoke); }
.comment__body { margin: .6rem 0 0; }
.comment__body p { margin: 0; }
.comment__body p + p { margin-top: .8em; }

.comment-form { margin-top: var(--gap-y); padding: 1.6rem;
  background: var(--muted); border: 1px solid var(--mist); border-radius: var(--radius); }
.comment-form__title { font-family: var(--display); font-weight: 500; font-size: 22px;
  margin: 0 0 1rem; }
.comment-form__note { color: var(--smoke); margin: 0 0 1rem; }
.comment-form__foot { margin-top: 1rem; display: flex; align-items: center;
  justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* ── Формы ──────────────────────────────────────────────────────────────── */
.form { display: grid; gap: 1.1rem; }
.form__row { display: grid; gap: 1.1rem; }
@media (min-width: 40rem) { .form__row { grid-template-columns: 1fr 1fr; } }
.form__hint { color: var(--smoke); font-size: 14px; margin: .3rem 0 0; }
.field { display: grid; gap: .4rem; }
.field__label { color: var(--ink); }
.field__input { width: 100%; padding: .75rem .9rem; font: inherit; color: var(--ink);
  background: var(--card); border: 1px solid var(--mist); border-radius: var(--radius-sm);
  transition: border-color .25s ease; }
.field__input:focus { border-color: var(--primary); }
.field__error { color: var(--primary-dark); font-size: 14px; }

.notice { padding: .9rem 1.1rem; border-radius: var(--radius-sm);
  background: var(--pale);
  border: 1px solid color-mix(in srgb, var(--primary) 25%, transparent);
  color: var(--primary-dark); }
.status { color: var(--smoke); }

/* ── Пагинация ──────────────────────────────────────────────────────────── */
.pager { margin-top: var(--sect); }
.pager__inner { display: flex; align-items: center; justify-content: center;
  gap: 1rem; flex-wrap: wrap; }
.pager__list { display: flex; align-items: center; gap: .4rem; list-style: none;
  margin: 0; padding: 0; }
.pg { display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.4rem; height: 2.4rem; padding-inline: .6rem;
  border: 1px solid var(--mist); border-radius: var(--radius-sm);
  font: 500 13px/1 var(--sans); color: var(--ink);
  transition: background-color .25s ease, border-color .25s ease, color .25s ease; }
.pg:hover { border-color: var(--primary); color: var(--primary); }
.pg[aria-current="page"] { background: var(--primary); border-color: var(--primary);
  color: #fff; }
.pager__ends { display: flex; gap: .6rem; }
.pager__state { color: var(--smoke); }

/* ── Хлебные крошки ─────────────────────────────────────────────────────── */
.crumbs { padding-block: 1rem; }
.crumbs__list { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  list-style: none; margin: 0; padding: 0; color: var(--smoke); }
.crumbs__item a:hover { color: var(--primary); }

/* ── Ошибки ─────────────────────────────────────────────────────────────── */
.error { display: grid; gap: 1rem; place-items: center; text-align: center;
  padding-block: var(--sect); }
.error__code { font-family: var(--display); font-weight: 500;
  font-size: clamp(64px, 14vw, 140px); line-height: 1; color: var(--primary); }
.error__title { font-family: var(--display); font-weight: 500; font-size: 28px; margin: 0; }
.error__message { color: var(--smoke); max-width: 46ch; }
.error__nav { margin-top: .6rem; }

/* ── Подвал ─────────────────────────────────────────────────────────────── */
.site-footer { margin-top: var(--sect); background: var(--muted);
  border-top: 1px solid var(--mist); }
.site-footer__inner { padding-block: var(--gap-y); }
.site-footer__head { display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: var(--gap-y); }
.site-footer__tagline { color: var(--smoke); margin: .4rem 0 0; max-width: 46ch; }
.site-footer__cols { display: grid; gap: var(--gap-y) var(--gap-x);
  grid-template-columns: 1fr; }
@media (min-width: 40rem) { .site-footer__cols { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .site-footer__cols { grid-template-columns: repeat(4, 1fr); } }
.site-footer__list { list-style: none; margin: .8rem 0 0; padding: 0;
  display: grid; gap: .5rem; }
.site-footer__list--two { grid-template-columns: 1fr 1fr; }
.site-footer__bottom { margin-top: var(--gap-y); padding-top: 1.2rem;
  border-top: 1px solid var(--mist); color: var(--smoke);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* ── На тёмной подложке ─────────────────────────────────────────────────── */
.on-ink { color: var(--on-ink-1); }
.on-ink .t-micro, .on-ink .t-meta { color: var(--on-ink-2); }
.on-ink a { color: var(--on-ink-1); }
.hp { display: contents; }

/* ── Навигация и мобильное меню ─────────────────────────────────────────── */
/* Меню открывается <details> — без единой строки JS и без Alpine, который
   запрещён на публичных страницах (инвариант 6). Раскрытие делает соседний
   селектор: .menu[open] ~ .nav. Ровно та же схема была в «Глянце». */
.nav__item { display: block; }
.nav-link.is-current { color: var(--primary); border-bottom-color: var(--primary); }

.menu__label { display: inline-block; }
.menu[open] .menu__label--closed { display: none; }
.menu__label--open { display: none; }
.menu[open] .menu__label--open { display: inline-block; }

.card__figure { display: block; }

@media (max-width: 59.99rem) {
  .menu { display: block; order: 2; }
  .nav { display: none; }
  .menu[open] ~ .nav {
    display: block; position: absolute; left: 0; right: 0; top: 4.5rem;
    padding: 1.2rem var(--pad) 1.6rem;
    background: var(--paper); border-bottom: 1px solid var(--mist);
    box-shadow: var(--shadow);
  }
  .menu[open] ~ .nav .nav__list { flex-direction: column; align-items: flex-start;
    gap: .9rem; }
}

@media (min-width: 60rem) {
  .menu { display: none; }
}