/* ── Шрифт заголовков ──────────────────────────────────────────────────
   Fraunces, только латиница, swap: пока файл едет, текст читается запасным
   шрифтом, а не висит невидимым. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,800&display=swap');

:root {
  --paper:#fffdf8;
  --paper-warm:#f7f3ea;
  --paper-card:#ffffff;
  --ink:#16181d;
  --ink-soft:#4a545f;
  --ink-faint:#5a6470;
  --line:#e3ddd0;
  --line-strong:#c9c0ad;
  --accent:#b3212e;
  --accent-bright:#8f1a25;
  --accent-wash:#fdf2f2;
  --on-accent:#ffffff;

  /* Полоса-акцент держит свои значения, не завязанные на цвет текста:
     иначе в тёмной теме она выцветает, а белый текст на ней исчезает. */
  --slab:#16181d;
  --on-slab:#fffdf8;

  --head:'Fraunces',Georgia,'Times New Roman',serif;
  --body:system-ui,-apple-system,'Segoe UI',Helvetica,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;

  --r-s:6px; --r-m:10px; --r-l:16px; --r-xl:24px;
  --shadow:0 1px 2px rgba(22,24,29,.04), 0 8px 24px rgba(22,24,29,.06);
  --shadow-lift:0 2px 4px rgba(22,24,29,.06), 0 16px 40px rgba(22,24,29,.10);
  --ease:.22s cubic-bezier(.16,1,.3,1);
  --wrap:74rem;
  --read:41rem;
}

@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --paper:#0f1216;
  --paper-warm:#161b21;
  --paper-card:#161b21;
  --ink:#f0ece4;
  --ink-soft:#b6bfc9;
  --ink-faint:#98a3ae;
  --line:#252d36;
  --line-strong:#3a4550;
  --accent:#ff8a80;
  --accent-bright:#ffab9f;
  --accent-wash:#1c1618;
  --on-accent:#1a0f10;
  --slab:#f0ece4;
  --on-slab:#0f1216;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
  --shadow-lift:0 2px 4px rgba(0,0,0,.5), 0 16px 40px rgba(0,0,0,.4);
} }
:root[data-theme="dark"] {
  --paper:#0f1216; --paper-warm:#161b21; --paper-card:#161b21;
  --ink:#f0ece4; --ink-soft:#b6bfc9; --ink-faint:#98a3ae;
  --line:#252d36; --line-strong:#3a4550;
  --accent:#ff8a80; --accent-bright:#ffab9f; --accent-wash:#1c1618;
  --on-accent:#1a0f10; --slab:#f0ece4; --on-slab:#0f1216;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} }

body {
  font-family:var(--body); background:var(--paper); color:var(--ink);
  line-height:1.65; font-size:1.0625rem;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

.wrap { max-width:var(--wrap); margin:0 auto;
  padding-left:clamp(1.25rem,4vw,2.5rem); padding-right:clamp(1.25rem,4vw,2.5rem); }
.wrap--read { max-width:calc(var(--read) + 5rem); }

h1,h2,h3,h4 { font-family:var(--head); font-weight:800; line-height:1.12;
  letter-spacing:-.02em; }
h1 { font-size:clamp(2.25rem,5.5vw,3.75rem); }
h2 { font-size:clamp(1.6rem,3.2vw,2.25rem); }
h3 { font-size:1.25rem; font-weight:600; letter-spacing:-.01em; }
p { text-wrap:pretty; }
a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }

:focus-visible { outline:3px solid var(--accent); outline-offset:3px;
  border-radius:var(--r-s); }
.skip { position:absolute; left:-9999px; top:0; background:var(--accent);
  color:var(--on-accent); padding:.75rem 1.25rem; border-radius:0 0 var(--r-m) 0;
  font-weight:700; z-index:200; }
.skip:focus { left:0; }

/* ── Шапка ─────────────────────────────────────────────────────────── */
.top { position:sticky; top:0; z-index:100; background:var(--paper);
  border-bottom:1px solid var(--line); backdrop-filter:saturate(1.4) blur(8px); }
.top__in { display:flex; align-items:center; gap:1.5rem;
  padding-top:.9rem; padding-bottom:.9rem; }
/* Зазора здесь быть не должно. Последняя буква вынесена в <em> ради цвета,
   а flex с gap раздвинул её пробелом: на телефоне название читалось как
   «Kernin g» — два слова вместо одного. Название журнала, разорванное
   пополам в собственной шапке, — худшее, что может случиться с обложкой. */
.brand { font-family:var(--head); font-weight:800; font-size:1.35rem;
  letter-spacing:-.035em; display:inline-flex; align-items:baseline; gap:0;
  flex-shrink:0; white-space:nowrap; }
.brand em { font-style:normal; color:var(--accent); }
.nav { display:flex; gap:1.4rem; margin-left:auto; align-items:center; }
.nav a { font-size:.9375rem; font-weight:500; color:var(--ink-soft);
  transition:color var(--ease); white-space:nowrap; }
.nav a:hover,.nav a[aria-current="page"] { color:var(--ink); }
.nav a[aria-current="page"] { font-weight:700; }
/* Селектор с .nav обязателен. Правило `.nav a` сильнее одиночного класса
   (0,1,1 против 0,1,0), и белый цвет кнопки им перебивался: на карминовом
   фоне оставался серый текст, 1.16:1 — нечитаемо. Глазами это не ловится,
   потому что кнопка выглядит нормально, пока не присмотришься к тексту. */
.nav a.nav__sub { background:var(--accent); color:var(--on-accent);
  padding:.5rem 1rem; border-radius:999px; font-weight:700; }
.nav a.nav__sub:hover,.nav a.nav__sub:focus-visible {
  background:var(--accent-bright); color:var(--on-accent);
  transform:translateY(-1px); }
.burger { display:none; margin-left:auto; background:none; border:1px solid var(--line-strong);
  border-radius:var(--r-s); padding:.5rem .7rem; cursor:pointer; color:var(--ink);
  font:inherit; font-size:.875rem; font-weight:600; }
@media (max-width:53rem){
  .nav { display:none; }
  .nav--open { display:flex; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0; background:var(--paper);
    border-bottom:1px solid var(--line); padding:.5rem 0 1rem;
    box-shadow:var(--shadow); }
  .nav--open a { padding:.85rem clamp(1.25rem,4vw,2.5rem); }
  .nav--open .nav__sub { margin:.5rem clamp(1.25rem,4vw,2.5rem) 0;
    border-radius:var(--r-m); text-align:center; }
  .burger { display:block; }
}

/* ── Отметка рубрики ───────────────────────────────────────────────── */
.kicker { display:inline-flex; align-items:center; gap:.4rem;
  font-size:.6875rem; font-weight:800; letter-spacing:.11em;
  text-transform:uppercase; color:var(--kicker,var(--accent)); }

/* Цвет рубрики в тёмной теме — свой, а не тот же самый.
   Насыщенный тон, спокойный на белой бумаге, на чёрной даёт 2.4:1 и
   перестаёт читаться: об этом же написана статья «Dark mode is not an
   inversion» в этом самом журнале. Повторить здесь её ошибку значило бы
   опровергнуть собственный материал. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  .kicker, .row__k, .topic h3 { color:var(--kicker-dark,var(--kicker,var(--accent))); }
  .topic { border-top-color:var(--kicker-dark,var(--kicker,var(--accent))); }
} }
:root[data-theme="dark"] .kicker,
:root[data-theme="dark"] .row__k { color:var(--kicker-dark,var(--kicker,var(--accent))); }
:root[data-theme="dark"] .topic { border-top-color:var(--kicker-dark,var(--kicker,var(--accent))); }
.kicker::before { content:''; width:.5rem; height:.5rem; border-radius:2px;
  background:currentColor; }
.kicker--plain::before { display:none; }

/* ── Обложка ───────────────────────────────────────────────────────── */
.lede { padding-top:clamp(2.5rem,6vw,4.5rem); padding-bottom:clamp(2rem,4vw,3rem); }
.lede__grid { display:grid; gap:clamp(2rem,4vw,3.5rem);
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); align-items:start; }
@media (max-width:57rem){ .lede__grid { grid-template-columns:1fr; } }
.lede h1 { margin:.65rem 0 .9rem; }
.lede__sub { font-size:clamp(1.0625rem,1.9vw,1.3rem); color:var(--ink-soft);
  max-width:34rem; }
.lede__meta { margin-top:1.5rem; display:flex; flex-wrap:wrap; gap:.6rem 1.25rem;
  align-items:center; font-size:.875rem; color:var(--ink-faint); }
.lede__side { display:grid; gap:1.25rem; border-left:1px solid var(--line);
  padding-left:clamp(1.25rem,2.5vw,2rem); }
@media (max-width:57rem){ .lede__side { border-left:0; padding-left:0;
  border-top:1px solid var(--line); padding-top:1.75rem; } }
.lede__side h2 { font-size:.6875rem; font-weight:800; letter-spacing:.11em;
  text-transform:uppercase; color:var(--ink-faint); font-family:var(--body); }

/* ── Обложечная иллюстрация ────────────────────────────────────────── */
.art { border-radius:var(--r-l); overflow:hidden; background:var(--paper-warm);
  border:1px solid var(--line); }
.art svg { display:block; width:100%; height:auto; }

/* ── Карточки статей ───────────────────────────────────────────────── */
.cards { display:grid; gap:clamp(1.5rem,3vw,2.25rem);
  grid-template-columns:repeat(auto-fill,minmax(17.5rem,1fr)); }
.card { display:flex; flex-direction:column; gap:.6rem; padding-bottom:1.5rem;
  border-bottom:1px solid var(--line); }
/* Обложка в карточке. Рисунок в цвете рубрики весит около килобайта и
   опознаёт раздел с расстояния — в ленте из восьми заголовков подряд это
   единственное, за что цепляется глаз. */
.card__art { border-radius:var(--r-m); overflow:hidden; background:var(--paper-warm);
  border:1px solid var(--line); aspect-ratio:16/9; margin-bottom:.25rem; }
.card__art svg { display:block; width:100%; height:100%; }
.card a.card__link:hover .card__art { border-color:var(--kicker,var(--accent)); }
.card__title { font-family:var(--head); font-size:1.3rem; font-weight:600;
  line-height:1.22; letter-spacing:-.015em; }
.card a.card__link { display:block; transition:color var(--ease); }
.card a.card__link:hover .card__title { color:var(--accent); }
.card__sub { color:var(--ink-soft); font-size:.9375rem; }
.card__meta { margin-top:auto; padding-top:.4rem; font-size:.8125rem;
  color:var(--ink-faint); display:flex; gap:.75rem; flex-wrap:wrap;
  align-items:center; }

/* Список — плотнее карточек, для длинных перечней */
.rows { display:grid; }
.row { display:grid; grid-template-columns:auto 1fr auto; gap:1.25rem;
  align-items:baseline; padding:1.15rem 0; border-bottom:1px solid var(--line); }
.row__k { font-size:.6875rem; font-weight:800; letter-spacing:.09em;
  text-transform:uppercase; color:var(--kicker,var(--accent)); white-space:nowrap; }
.row__t { font-family:var(--head); font-size:1.15rem; font-weight:600;
  line-height:1.3; letter-spacing:-.01em; }
.row:hover .row__t { color:var(--accent); }
.row__d { font-size:.8125rem; color:var(--ink-faint); white-space:nowrap;
  font-variant-numeric:tabular-nums; }
@media (max-width:44rem){
  .row { grid-template-columns:1fr; gap:.35rem; }
  .row__d { text-align:left; }
}

/* ── Полосы ────────────────────────────────────────────────────────── */
.band { padding-top:clamp(3rem,6vw,5rem); padding-bottom:clamp(3rem,6vw,5rem); }
.band--warm { background:var(--paper-warm); border-top:1px solid var(--line);
  border-bottom:1px solid var(--line); }
.band--slab { background:var(--slab); color:var(--on-slab); }
.band--slab .band__head p,.band--slab .card__sub { color:inherit; opacity:.78; }
.band__head { display:flex; align-items:flex-end; justify-content:space-between;
  gap:1.5rem; margin-bottom:clamp(1.5rem,3vw,2.25rem); flex-wrap:wrap; }
.band__head p { color:var(--ink-soft); max-width:38rem; margin-top:.5rem; }
.more { font-weight:700; font-size:.9375rem; color:var(--accent);
  white-space:nowrap; }
.more:hover { text-decoration:underline; text-underline-offset:3px; }

/* ── Плитки рубрик ─────────────────────────────────────────────────── */
.topics { display:grid; gap:1.25rem;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); }
.topic { display:block; padding:1.5rem; border-radius:var(--r-l);
  background:var(--paper-card); border:1px solid var(--line);
  border-top:4px solid var(--kicker,var(--accent));
  transition:transform var(--ease),box-shadow var(--ease); }
.topic:hover { transform:translateY(-3px); box-shadow:var(--shadow-lift); }
.topic h3 { font-family:var(--head); font-size:1.35rem; font-weight:800;
  margin-bottom:.4rem; }
.topic p { font-size:.9375rem; color:var(--ink-soft); }
.topic__n { margin-top:.9rem; font-size:.8125rem; color:var(--ink-faint);
  font-weight:600; }

/* ── Авторы ────────────────────────────────────────────────────────── */
.people { display:grid; gap:1.5rem;
  grid-template-columns:repeat(auto-fill,minmax(16rem,1fr)); }
.person { display:flex; gap:1rem; align-items:flex-start; }
.avatar { width:3.5rem; height:3.5rem; border-radius:50%; flex-shrink:0;
  display:grid; place-items:center; font-family:var(--head); font-weight:800;
  font-size:1.1rem; background:var(--accent-wash); color:var(--accent);
  border:1px solid var(--line); }
.avatar--lg { width:5.5rem; height:5.5rem; font-size:1.6rem; }
.person__name { font-family:var(--head); font-weight:600; font-size:1.0625rem; }
.person__role { font-size:.8125rem; color:var(--ink-faint); }
.person__bio { font-size:.9375rem; color:var(--ink-soft); margin-top:.35rem; }

/* ── Статья ────────────────────────────────────────────────────────── */
.article { padding-top:clamp(2rem,4vw,3rem); padding-bottom:clamp(3rem,6vw,5rem); }
.article__head { max-width:var(--read); margin:0 auto clamp(2rem,4vw,3rem); }
.article__head h1 { margin:.7rem 0 1rem; }
.article__sub { font-size:clamp(1.0625rem,1.7vw,1.25rem); color:var(--ink-soft); }
.byline { display:flex; align-items:center; gap:.85rem; margin-top:1.75rem;
  padding-top:1.25rem; border-top:1px solid var(--line); font-size:.875rem; }
.byline__meta { color:var(--ink-faint); }
.prose { max-width:var(--read); margin:0 auto; font-size:1.125rem;
  line-height:1.72; }
.prose p { margin-bottom:1.4rem; }
.prose p strong { font-weight:700; }
.prose > p:first-of-type::first-line { font-weight:600; }
.prose h2 { margin:2.5rem 0 1rem; }
.prose code { font-family:var(--mono); font-size:.9em; background:var(--paper-warm);
  padding:.15em .4em; border-radius:var(--r-s); border:1px solid var(--line); }
.pull { margin:2.25rem 0; padding-left:1.5rem; border-left:3px solid var(--accent);
  font-family:var(--head); font-size:1.4rem; font-weight:600; line-height:1.3;
  letter-spacing:-.015em; }
.article__foot { max-width:var(--read); margin:clamp(2.5rem,5vw,4rem) auto 0;
  padding-top:2rem; border-top:1px solid var(--line); }

/* ── Форма подписки ────────────────────────────────────────────────── */
.sub { display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.25rem; }
.sub input { flex:1 1 16rem; min-width:0; padding:.85rem 1.1rem;
  border:1px solid var(--line-strong); border-radius:var(--r-m);
  font:inherit; font-size:1rem; background:var(--paper-card); color:var(--ink); }
.sub input::placeholder { color:var(--ink-faint); }
.sub button { padding:.85rem 1.6rem; border:0; border-radius:var(--r-m);
  background:var(--accent); color:var(--on-accent); font:inherit;
  font-weight:700; font-size:1rem; cursor:pointer; transition:background var(--ease); }
.sub button:hover { background:var(--accent-bright); }
.band--slab .sub button { background:var(--paper); color:var(--ink); }
/* Отклик на наведение для кнопки на тёмной полосе. Правило .sub button:hover
   стоит выше и имеет ту же силу, поэтому фон из .band--slab перебивал его:
   кнопка выглядела мёртвой. Проверено аудитом, а не на глаз. */
.band--slab .sub button:hover { background:var(--accent-bright);
  color:var(--on-accent); }
.band--slab .sub input { background:transparent; color:inherit;
  border-color:rgba(255,255,255,.32); }
.band--slab .sub input::placeholder { color:rgba(255,255,255,.6); }
.sub__note { margin-top:.85rem; font-size:.8125rem; color:var(--ink-faint); }
.band--slab .sub__note { color:inherit; opacity:.7; }
.said { margin-top:.85rem; font-size:.9375rem; font-weight:600; min-height:1.4em; }
.said[data-ok="1"] { color:var(--accent); }
.band--slab .said[data-ok="1"] { color:var(--on-slab); }

/* ── Поиск ─────────────────────────────────────────────────────────── */
.find { max-width:44rem; }
.find__box { display:flex; gap:.6rem; margin-top:1.5rem; }
.find__box input { flex:1; padding:1rem 1.25rem; font:inherit; font-size:1.125rem;
  border:2px solid var(--line-strong); border-radius:var(--r-m);
  background:var(--paper-card); color:var(--ink); }
.find__box input:focus { border-color:var(--accent); outline:none; }
.chips { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.25rem; }
.chip { padding:.45rem .95rem; border-radius:999px; border:1px solid var(--line-strong);
  background:transparent; color:var(--ink-soft); font:inherit; font-size:.875rem;
  font-weight:600; cursor:pointer; transition:all var(--ease); }
.chip:hover { border-color:var(--ink-faint); color:var(--ink); }
.chip[aria-pressed="true"] { background:var(--ink); color:var(--paper);
  border-color:var(--ink); }
/* Выбранная кнопка тоже обязана отзываться на наведение. Правило .chip:hover
   стоит выше и той же силы, поэтому состояние «нажата» его перебивало —
   ровно та же ловушка, что была с кнопкой подписки на тёмной полосе. */
.chip[aria-pressed="true"]:hover { background:var(--accent);
  border-color:var(--accent); color:var(--on-accent); }
.count { margin:2rem 0 1rem; font-size:.875rem; color:var(--ink-faint);
  font-weight:600; }
.empty { padding:3rem 0; color:var(--ink-soft); }
mark { background:var(--accent-wash); color:inherit; padding:0 .15em;
  border-radius:3px; font-weight:600; }

/* ── Руководства ───────────────────────────────────────────────────── */
.guides { display:grid; gap:1.25rem;
  grid-template-columns:repeat(auto-fill,minmax(19rem,1fr)); }
.guide { padding:1.6rem; border-radius:var(--r-l); background:var(--paper-card);
  border:1px solid var(--line); display:flex; flex-direction:column; gap:.6rem;
  transition:transform var(--ease),box-shadow var(--ease); }
.guide:hover { transform:translateY(-3px); box-shadow:var(--shadow-lift); }
.guide h3 { font-family:var(--head); font-size:1.2rem; font-weight:600; }
.guide p { font-size:.9375rem; color:var(--ink-soft); }
.guide__meta { margin-top:auto; padding-top:.75rem; font-size:.8125rem;
  color:var(--ink-faint); display:flex; gap:1rem; border-top:1px solid var(--line); }

/* ── Подвал ────────────────────────────────────────────────────────── */
footer { border-top:1px solid var(--line); padding-top:clamp(2.5rem,5vw,3.5rem);
  padding-bottom:2.5rem; margin-top:clamp(3rem,6vw,5rem); background:var(--paper-warm); }
.foot { display:grid; gap:2rem;
  grid-template-columns:minmax(0,1.4fr) repeat(auto-fit,minmax(9rem,1fr)); }
.foot h4 { font-family:var(--body); font-size:.6875rem; font-weight:800;
  letter-spacing:.11em; text-transform:uppercase; color:var(--ink-faint);
  margin-bottom:.85rem; }
.foot ul { list-style:none; display:grid; gap:.5rem; }
.foot a { font-size:.9375rem; color:var(--ink-soft); }
.foot a:hover { color:var(--accent); }
.foot__about { font-size:.9375rem; color:var(--ink-soft); max-width:26rem;
  margin-top:.75rem; }
.foot__base { margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  font-size:.8125rem; color:var(--ink-faint); }

.crumbs { font-size:.875rem; color:var(--ink-faint); padding-top:1.5rem; }
.crumbs a:hover { color:var(--accent); }
.hidden { display:none !important; }