/* bala-kkk.kz — тема «Дети в Казахстане». Прототип для kz-engine. Mobile-first, без сборки. */

/* ---------- Шрифты (самохостинг, OFL; сабсет: латиница, кириллица с казахскими буквами, №, ₸) ---------- */
@font-face {
  font-family: "Geologica";
  src: url("fonts/Geologica.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Piazzolla";
  src: url("fonts/Piazzolla.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Токены ---------- */
:root {
  color-scheme: light;

  /* тёплые нейтрали */
  --paper: oklch(0.985 0.006 70);
  --paper-2: oklch(0.957 0.011 65);
  --paper-3: oklch(0.925 0.014 60);
  --line: oklch(0.885 0.012 60);
  --line-strong: oklch(0.78 0.015 55);
  --ink: oklch(0.24 0.02 35);
  --ink-2: oklch(0.44 0.018 40);
  --ink-3: oklch(0.51 0.014 45); /* ≥4.5:1 и на --paper, и на --paper-2 (мелкий текст 13px) */

  /* апорт: журнал и бренд */
  --apple: oklch(0.52 0.17 27);
  --apple-deep: oklch(0.43 0.15 27);
  --apple-tint: oklch(0.945 0.028 30);

  /* жусан: справочник */
  --sage: oklch(0.45 0.05 160);
  --sage-deep: oklch(0.33 0.042 165);
  --sage-panel: oklch(0.385 0.045 165);
  --sage-tint: oklch(0.952 0.018 155);
  --sage-line: oklch(0.86 0.03 155);
  --on-dark: oklch(0.975 0.008 120);
  --on-dark-2: oklch(0.87 0.02 150);
  --on-dark-line: oklch(1 0 0 / 0.13);
  --peach: oklch(0.94 0.03 70); /* фон заглушки иллюстрации главной */

  --focus: oklch(0.5 0.17 27);

  --font-ui: "Geologica", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-text: "Piazzolla", Georgia, "Times New Roman", serif;

  --gutter: 16px;
  --max: 1240px;
  --radius: 14px;
  --radius-sm: 8px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --step--1: 0.875rem;
  --step-0: 1rem;
  --text-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
}
@media (min-width: 640px) { :root { --gutter: 24px; } }
@media (min-width: 1024px) { :root { --gutter: 32px; } }

/* ---------- База ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--step-0);
  line-height: 1.5;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; font-weight: 700; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
[id] { scroll-margin-top: 20px; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.ref-band :focus-visible { outline-color: var(--on-dark); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -100px; z-index: 100;
  padding: 12px 16px; background: var(--ink); color: var(--paper);
  border-radius: var(--radius-sm); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; }

.container { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.i { width: 20px; height: 20px; flex: none; }
.count { color: var(--ink-3); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ---------- Кнопки, ссылки-действия, чипы ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 24px; border-radius: 999px;
  font-weight: 600; font-size: 1rem; text-decoration: none; border: 1.5px solid transparent;
  transition: background-color 160ms var(--ease-out), color 160ms var(--ease-out), border-color 160ms var(--ease-out), transform 140ms var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn .i { width: 18px; height: 18px; }
.btn--primary { background: var(--sage-deep); color: var(--on-dark); }
.btn--ghost { border-color: var(--line-strong); color: var(--ink); }
.btn--light { background: var(--on-dark); color: var(--sage-deep); }
@media (hover: hover) {
  .btn--primary:hover { background: var(--sage); }
  .btn--ghost:hover { border-color: var(--ink); }
  .btn--light:hover { background: #fff; }
}

.more-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  color: var(--apple-deep); font-weight: 600; text-decoration: none;
}
.more-link .i { width: 18px; height: 18px; transition: transform 200ms var(--ease-out); }
.more-link .count { color: inherit; opacity: 0.75; }
@media (hover: hover) { .more-link:hover .i { transform: translateX(3px); } .more-link:hover { text-decoration: underline; text-underline-offset: 0.2em; } }

.kicker { font-size: var(--step--1); font-weight: 600; color: var(--apple-deep); letter-spacing: 0.01em; }
.kicker a { text-decoration: none; }
.kicker a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.kicker--ref { color: var(--sage); }

/* ---------- Шапка ---------- */
.site-header { background: var(--paper); border-bottom: 1px solid var(--line); position: relative; z-index: 20; }
.header-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  min-height: 64px; padding-block: 8px;
}
.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; margin-right: auto; min-height: 44px; }
.brand-mark { width: 30px; height: 30px; flex: none; }
.bm-apple { fill: var(--apple); }
.bm-stem { stroke: var(--ink); }
.bm-leaf { fill: var(--sage); }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name { font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; white-space: nowrap; }
.brand-domain { font-size: 0.75rem; color: var(--ink-2); font-weight: 500; }

.header-actions { display: flex; gap: 4px; }
.icon-btn, .menu-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 44px; height: 44px; padding: 0 12px; border-radius: 999px;
  background: transparent; border: 1px solid var(--line); color: var(--ink);
  transition: background-color 160ms var(--ease-out), transform 140ms var(--ease-out);
}
.menu-btn { padding: 0 12px; font-weight: 600; font-size: 0.9375rem; }
@media (max-width: 379px) { .menu-btn { padding: 0 12px; } .menu-btn > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
.icon-btn:active, .menu-btn:active { transform: scale(0.96); }
@media (hover: hover) { .icon-btn:hover, .menu-btn:hover { background: var(--paper-2); } }
.menu-btn .i-close { display: none; }
.menu-btn[aria-expanded="true"] .i-open { display: none; }
.menu-btn[aria-expanded="true"] .i-close { display: block; }
.icon-btn[aria-expanded="true"], .menu-btn[aria-expanded="true"] { background: var(--paper-3); border-color: var(--paper-3); }

/* поиск */
.search {
  display: flex; align-items: center; gap: 4px; width: 100%;
  background: var(--paper-2); border: 1.5px solid var(--paper-3); border-radius: 999px;
  padding: 4px 4px 4px 20px;
  transition: border-color 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
.search:focus-within { border-color: var(--apple); background: var(--paper); }
/* фокус в поле — кольцо 3px вокруг всей формы, как у остальных элементов (у самого поля своё кольцо снято ниже) */
.search:has(.search-input:focus) { outline: 3px solid var(--focus); outline-offset: 2px; }
.search-input {
  flex: 1; min-width: 0; height: 40px; border: 0; background: transparent; outline: none;
  font-size: 1rem;
}
.search-input::placeholder { color: var(--ink-3); }
.search-input::-webkit-search-cancel-button { cursor: pointer; }
.search:focus-within .search-input:focus-visible { outline: none; }
.search-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; min-width: 40px; padding: 0 8px; border: 0; border-radius: 999px;
  background: var(--ink); color: var(--paper);
  transition: background-color 160ms var(--ease-out), transform 140ms var(--ease-out);
}
/* зона нажатия 44×44 при видимых 40 px: выходит в паддинг поля поиска */
.search-btn { position: relative; }
.search-btn::before { content: ""; position: absolute; inset: -2px; border-radius: inherit; }
.search-btn:active { transform: scale(0.96); }
@media (hover: hover) { .search-btn:hover { background: var(--apple-deep); } }
.search-btn .i { width: 18px; height: 18px; }
.search-btn--text { padding: 0 20px; font-weight: 600; }
.search--big { padding-left: 20px; }
.search--big .search-input { height: 48px; font-size: 1.0625rem; }
.search--big .search-btn { height: 48px; }
.search--header { order: 3; }

/* навигация (мобайл) */
.site-nav { border-top: 1px solid var(--line); }
.nav-list { list-style: none; padding-block: 8px 16px; }
.nav-link {
  display: flex; align-items: center; gap: 8px; min-height: 48px;
  font-weight: 600; font-size: 1.0625rem; text-decoration: none; color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.nav-link--ref { color: var(--sage); }
.nav-link[aria-current="page"] { color: var(--apple-deep); }
.more > summary { list-style: none; cursor: pointer; }
.more > summary::-webkit-details-marker { display: none; }
.i-chev { width: 18px; height: 18px; transition: transform 200ms var(--ease-out); }
.more[open] .i-chev { transform: rotate(180deg); }
.more-list { list-style: none; padding: 4px 0 8px 16px; }
.more-list a {
  display: flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--ink-2); font-weight: 500;
}
.more-list a[aria-current="page"], .more-list a.is-current { color: var(--apple-deep); font-weight: 600; }
@media (hover: hover) { .nav-link:hover, .more-list a:hover { color: var(--apple-deep); } }

/* с JS на телефоне меню и поиск свёрнуты; без JS — развёрнуты */
html:not(.js) .header-actions { display: none; }
@media (max-width: 1023.98px) {
  .js .site-header:not(.is-menu-open) .site-nav { display: none; }
  .js .site-header:not(.is-search-open) .search--header { display: none; }
  .js .site-header.is-menu-open .site-nav,
  .js .site-header.is-search-open .search--header { animation: drop-in 200ms var(--ease-out); }
}
@keyframes drop-in { from { opacity: 0; transform: translateY(-6px); } }

@media (min-width: 1024px) {
  .header-bar { flex-wrap: nowrap; min-height: 76px; gap: 24px; }
  .brand { gap: 12px; }
  .brand-mark { width: 38px; height: 38px; }
  .brand-name { font-size: 1.1875rem; }
  .header-actions { display: none; }
  .search--header { order: 0; width: 340px; }
  .nav-list { display: flex; align-items: stretch; gap: 4px; padding: 0; margin-left: -12px; }
  .nav-link {
    min-height: 50px; padding: 0 12px; border-bottom: 0; font-size: 0.9688rem;
    box-shadow: inset 0 -3px 0 transparent; transition: box-shadow 160ms var(--ease-out), color 160ms var(--ease-out);
  }
  .nav-link[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--apple); color: var(--ink); }
  .nav-link--ref[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--sage); color: var(--sage-deep); }
  .nav-link.is-current { box-shadow: inset 0 -3px 0 var(--apple); }
  .nav-more { position: relative; margin-left: auto; }
  .more-list {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 270px;
    padding: 8px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
    box-shadow: 0 12px 32px -12px color-mix(in oklch, var(--ink) 25%, transparent);
    transform-origin: top right;
  }
  .more[open] .more-list { animation: pop-in 180ms var(--ease-out); }
  .more-list a { padding: 0 12px; border-radius: var(--radius-sm); min-height: 42px; }
  @media (hover: hover) { .more-list a:hover { background: var(--paper-2); } }
}
@keyframes pop-in { from { opacity: 0; transform: scale(0.96) translateY(-4px); } }

/* ---------- Заглушки картинок ---------- */
.ph {
  position: relative; display: grid; place-items: center; width: 100%;
  aspect-ratio: var(--ar, 3 / 2); border-radius: inherit; overflow: hidden;
  background: var(--apple-tint); color: color-mix(in oklch, var(--apple) 30%, var(--apple-tint));
}
.ph--warm { background: var(--peach); color: color-mix(in oklch, var(--apple) 30%, var(--peach)); }
.ph--sage { background: var(--sage-tint); color: color-mix(in oklch, var(--sage) 35%, var(--sage-tint)); }
.ph-mark { width: 26%; max-width: 72px; height: auto; aspect-ratio: 1; fill: currentColor; stroke: currentColor; }
.ph-label {
  font-family: var(--font-ui); position: absolute; left: 12px; right: 12px; bottom: 10px;
  font-size: 0.75rem; line-height: 1.35; color: var(--ink-2); text-align: center;
}

/* ---------- Секции ---------- */
.section { padding-block: 40px; }
@media (min-width: 1024px) { .section { padding-block: 64px; } }
.section-title { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem); letter-spacing: -0.015em; margin-bottom: 20px; }
.section-title--small { font-size: 1.25rem; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.section-head .section-title { margin-bottom: 0; }

/* ---------- Главная: hero ---------- */
.hero { padding-block: 28px 8px; }
.hero-grid { display: grid; gap: 24px; }
.hero-title {
  font-size: clamp(2.375rem, 1.5rem + 4.2vw, 4.25rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.02;
}
.hero-lead { margin-top: 16px; font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); line-height: 1.55; color: var(--ink-2); max-width: 36em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
@media (max-width: 639px) { .hero-actions .btn { flex: 1 1 auto; } }
.hero-art { border-radius: var(--radius); overflow: hidden; }
@media (max-width: 639.98px) { .hero-art { display: none; } } /* на телефоне топ-статьи важнее иллюстрации */
.hero-art .ph { aspect-ratio: 2 / 1; }
@media (min-width: 900px) {
  .hero { padding-block: 56px 16px; }
  .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 48px; }
  .hero-art .ph { aspect-ratio: 4 / 3; }
}

/* чаще всего читают */
.top-list { list-style: none; display: grid; gap: 0; counter-reset: top; }
.top-item {
  position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-content: start;
  padding-block: 20px; border-top: 1px solid var(--line);
}
.top-num { font-size: 2.25rem; font-weight: 800; line-height: 0.9; color: var(--apple); letter-spacing: -0.04em; font-variant-numeric: lining-nums; }
.top-kicker { font-size: 0.8125rem; font-weight: 600; color: var(--ink-3); margin-bottom: 4px; }
.top-title { font-size: 1.1875rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; }
.top-title a { text-decoration: none; }
.top-title a::after { content: ""; position: absolute; inset: 0; }
.top-ex { margin-top: 8px; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.5; }
@media (hover: hover) { .top-item:hover .top-title a { color: var(--apple-deep); } }
@media (min-width: 900px) {
  .top-list { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .top-item { grid-template-columns: 1fr; gap: 12px; padding-top: 20px; border-top: 2px solid var(--ink); }
  .top-num { font-size: 3rem; }
  .top-title { font-size: 1.3125rem; }
}

/* справочник на главной */
.ref-band { background: var(--sage-deep); color: var(--on-dark); padding-block: 44px; }
@media (min-width: 1024px) { .ref-band { padding-block: 72px; } }
.ref-head { max-width: 40rem; margin-bottom: 24px; }
.ref-title { font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem); letter-spacing: -0.02em; }
.ref-lead { margin-top: 12px; color: var(--on-dark-2); font-size: 1.0625rem; }
.branches { display: grid; gap: 12px; }
.branch { background: var(--sage-panel); border-radius: var(--radius); padding: 20px 20px 8px; }
.branch-title { font-size: 1.25rem; }
.branch-title a { text-decoration: none; }
.branch-title a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.branch-desc { margin-top: 8px; color: var(--on-dark-2); font-size: 0.9375rem; }
.branch-links { list-style: none; margin-top: 12px; }
.branch-links a {
  display: flex; align-items: center; min-height: 48px; padding-block: 8px;
  border-top: 1px solid var(--on-dark-line); text-decoration: none; font-weight: 500; line-height: 1.35;
}
@media (hover: hover) { .branch-links a:hover { text-decoration: underline; text-underline-offset: 0.2em; } }
.ref-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 24px; }
.ref-foot p { color: var(--on-dark-2); font-size: 0.9375rem; max-width: 46rem; }
.ref-foot p a { color: var(--on-dark); text-underline-offset: 0.2em; }
@media (min-width: 900px) {
  .branches { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .branch { padding: 24px 24px 8px; }
}

/* темы для родителей */
.topic-list { border-top: 2px solid var(--ink); }
.topic { display: grid; gap: 12px; padding-block: 24px; border-bottom: 1px solid var(--line); }
.topic-title { font-size: 1.1875rem; letter-spacing: -0.01em; }
.topic-title a { text-decoration: none; }
@media (hover: hover) { .topic-title a:hover { color: var(--apple-deep); } }
.topic-desc { margin-top: 4px; color: var(--ink-2); }
.topic-head .more-link { margin-top: 4px; }
.topic-links { list-style: none; }
.topic-links a {
  display: block; padding-block: 12px; border-top: 1px solid var(--line);
  text-decoration: none; font-weight: 500; line-height: 1.35;
}
.topic-links li:first-child a { border-top: 0; }
@media (hover: hover) { .topic-links a:hover { color: var(--apple-deep); text-decoration: underline; text-underline-offset: 0.2em; } }
@media (max-width: 899.98px) {
  /* на телефоне «Все статьи» — после списка, а не между описанием и ссылками */
  .topic { gap: 0; }
  .topic-head { display: contents; }
  .topic-links { margin-top: 12px; }
  .topic-head .more-link { order: 1; justify-self: start; margin-top: 8px; }
}
@media (min-width: 900px) {
  .topic { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 40px; padding-block: 28px; }
  .topic-title { font-size: 1.375rem; }
  .topic-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-content: start; }
  .topic-links a, .topic-links li:first-child a { border-top: 1px solid var(--line); padding-top: 12px; }
}

/* рубрики */
.rubric-list { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.rubric-list a, .chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--line-strong); border-radius: 999px; text-decoration: none; font-weight: 500;
  transition: border-color 160ms var(--ease-out), background-color 160ms var(--ease-out), transform 140ms var(--ease-out);
}
.rubric-list a:active, .chip:active { transform: scale(0.97); }
@media (hover: hover) { .rubric-list a:hover, .chip:hover { border-color: var(--ink); background: var(--paper-2); } }
.rubrics { padding-top: 8px; }
@media (min-width: 900px) {
  /* та же сетка 1/3 + 2/3, что у «Тем для родителей»: чипы ложатся ровными рядами, без одинокого на второй строке */
  .rubrics .container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 40px; align-items: start; }
  .rubrics .section-title { margin: 0; padding-top: 8px; }
}

/* ---------- Карточки ---------- */
.card { position: relative; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: start; align-content: start; }
.card-media { border-radius: var(--radius-sm); overflow: hidden; background: var(--paper-2); }
.card-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 400ms var(--ease-out); }
/* нет файла картинки: нейтральная заглушка; тон (apple, warm, sage) только у иллюстраций главной и справочника */
.card-media .ph, .cover-ph, .prose-ph { background: var(--paper-3); color: var(--line-strong); }
.card-media .ph-mark { width: 30%; max-width: 48px; }
.card-kicker { font-size: 0.8125rem; font-weight: 600; color: var(--apple-deep); margin-bottom: 4px; }
.card-title { font-size: 1.0625rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.005em; }
.card-title a { text-decoration: none; }
.card-title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius-sm); }
.card-excerpt { display: none; margin-top: 8px; color: var(--ink-2); font-size: 0.9688rem; line-height: 1.5; }
.card-meta { margin-top: 4px; font-size: 0.8125rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
@media (hover: hover) {
  .card:hover .card-title a { color: var(--apple-deep); }
  .card:hover .card-media img { transform: scale(1.03); }
}
.card-title a:focus-visible { outline: none; }
.card-title a:focus-visible::after { outline: 3px solid var(--focus); outline-offset: 4px; }

.feed, .related-grid { display: grid; gap: 20px; }
.feed > .card, .related-grid > .card { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
@media (min-width: 640px) {
  .feed, .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; }
  .feed > .card, .related-grid > .card { grid-template-columns: 1fr; gap: 12px; padding-bottom: 0; border-bottom: 0; }
  .card--feed .card-title, .card--related .card-title { font-size: 1.125rem; }
}
@media (min-width: 1024px) {
  .feed, .related-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* строка списка (рубрика) */
.list { display: grid; }
.card--row { padding-block: 20px; border-bottom: 1px solid var(--line); }
.list > .card--row:first-child { padding-top: 24px; }
@media (min-width: 640px) {
  .card--row { grid-template-columns: 200px minmax(0, 1fr); gap: 20px; }
  .card--row .card-excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .card--row .card-title { font-size: 1.25rem; }
}
@media (min-width: 1024px) { .card--row { grid-template-columns: 240px minmax(0, 1fr); gap: 24px; } }

/* ---------- Реклама: места с зарезервированной высотой ---------- */
.ad-slot {
  display: grid; place-items: center; min-height: 280px; margin-block: 32px;
  background: var(--paper-2); border: 1px dashed var(--line-strong); border-radius: var(--radius-sm);
  color: var(--ink-3); font-size: 0.8125rem; text-align: center; padding: 12px;
}
.ad-slot--feed { min-height: 250px; margin-block: 0; grid-column: 1 / -1; }
.list .ad-slot--feed { margin-block: 20px; }
@media (min-width: 1024px) { .ad-slot--feed { min-height: 200px; } }

/* ---------- Крошки ---------- */
.crumbs { padding-block: 16px 4px; font-size: 0.875rem; color: var(--ink-2); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; row-gap: 4px; }
.crumbs li { display: inline-flex; align-items: center; min-width: 0; }
.crumbs li + li::before { content: "›"; margin-inline: 8px; color: var(--ink-3); }
.crumbs a { display: inline-flex; align-items: center; min-height: 32px; text-decoration: none; }
.crumbs a:hover { color: var(--apple-deep); text-decoration: underline; text-underline-offset: 0.2em; }
.crumbs-current { display: none !important; }
/* длинная цепочка на узком экране: «Главная › … › родитель»; средние звенья свёрнуты в «…» (в разметке и BreadcrumbList — полные) */
@media (max-width: 480px) {
  .crumbs li:nth-child(n+3):nth-last-child(n+3) { display: none; }
  .crumbs li:nth-child(2):nth-last-child(n+3) a { font-size: 0; padding-inline: 4px; }
  .crumbs li:nth-child(2):nth-last-child(n+3) a::after { content: "…"; font-size: 0.875rem; }
}
@media (min-width: 1024px) {
  .crumbs { padding-top: 24px; }
  .crumbs-current { display: inline-flex !important; color: var(--ink-3); max-width: 32ch; }
  .crumbs-current { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block !important; }
}

/* ---------- Статья ---------- */
.article { padding-bottom: 8px; }
.article-head { padding-top: 12px; }
.article-title {
  margin-top: 8px; font-size: clamp(1.75rem, 1.3rem + 2.1vw, 2.75rem); font-weight: 800;
  letter-spacing: -0.022em; line-height: 1.1;
}
.article-meta { display: flex; flex-wrap: wrap; gap: 4px 0; margin-top: 16px; color: var(--ink-2); font-size: 0.9375rem; }
.meta-sep { margin-inline: 8px; color: var(--ink-3); }
.article-cover { margin: 24px 0 0; border-radius: var(--radius); overflow: hidden; }
.cover-img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.article-foot { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: 0.9375rem; }
.article-foot a { color: var(--apple-deep); font-weight: 600; text-underline-offset: 0.2em; }

.prose { font-family: var(--font-text); font-size: var(--text-size); line-height: 1.68; max-width: 68ch; }
@media (max-width: 639px) { .prose, .qa-a { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 8 4 4; } }
.prose--intro { margin-top: 24px; }
.prose > * + * { margin-top: 1em; }
.prose .lead { font-size: 1.12em; line-height: 1.58; color: var(--ink); }
.prose h2, .prose h3 { font-family: var(--font-ui); hyphens: manual; letter-spacing: -0.012em; }
.prose h2 { margin-top: 1.9em; font-size: clamp(1.375rem, 1.2rem + 0.75vw, 1.6875rem); line-height: 1.22; }
.prose h3 { margin-top: 1.6em; font-size: clamp(1.1875rem, 1.1rem + 0.35vw, 1.3125rem); font-weight: 600; line-height: 1.3; }
.prose h2 + *, .prose h3 + * { margin-top: 0.6em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.45em; }
.prose li::marker { color: var(--apple); }
.prose a { color: var(--apple-deep); text-decoration-thickness: 0.07em; text-underline-offset: 0.18em; }
@media (hover: hover) { .prose a:hover { text-decoration-thickness: 0.12em; } }
.prose strong, .prose b { font-weight: 600; }
.prose em, .prose i, .qa-a em, .qa-a i { font-style: normal; font-weight: 500; } /* у Piazzolla нет курсива: без фальшивого наклона */
.prose-figure { margin: 1.8em 0; border-radius: var(--radius-sm); overflow: hidden; }
.prose-img { width: 100%; }
.prose-hr { border: 0; height: 1px; width: 96px; margin: 2.4em 0; background: var(--line-strong); }

/* оглавление: мобайл = раскрывашка, десктоп = липкая колонка */
.toc { margin-top: 28px; max-width: 68ch; }
.toc-details { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.toc-summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 52px; padding: 0 16px; font-weight: 600; cursor: pointer; list-style: none;
}
.toc-summary::-webkit-details-marker { display: none; }
.toc-details[open] .toc-chev { transform: rotate(180deg); }
.toc-chev { transition: transform 200ms var(--ease-out); }
.toc-list { list-style: none; padding: 0 16px 12px; counter-reset: toc; }
.toc-list a {
  display: block; padding: 8px 0 8px 20px; position: relative;
  text-decoration: none; font-size: 0.9375rem; line-height: 1.35; color: var(--ink-2);
  border-top: 1px solid var(--line);
}
.toc-list a::before {
  content: ""; position: absolute; left: 2px; top: 1.05em; width: 6px; height: 6px; border-radius: 50%;
  background: var(--line-strong); transition: background-color 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.toc-sub { list-style: none; padding-left: 16px; }
.toc-sub a { font-size: 0.875rem; border-top: 0; padding-top: 4px; }
.toc-list a.is-active { color: var(--ink); font-weight: 600; }
.toc-list a.is-active::before { background: var(--apple); transform: scale(1.35); }
.toc--clamp .toc-list > li { position: relative; padding-block: 8px; border-top: 1px solid var(--line); }
.toc--clamp .toc-list > li > a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; padding-block: 0; border-top: 0; position: static; }
.toc--clamp .toc-list > li > a::before { top: calc(8px + 0.55em); }
@media (hover: hover) { .toc-list a:hover { color: var(--apple-deep); } }

@media (min-width: 1024px) {
  .article { display: grid; grid-template-columns: minmax(0, 42rem) minmax(0, 17.5rem); column-gap: clamp(3rem, 7vw, 6.5rem); align-items: start; }
  .article > * { grid-column: 1; }
  .article > .toc {
    grid-column: 2; grid-row: 2 / span 14; align-self: start; position: sticky; top: 24px; margin-top: 24px;
  }
  .toc-details { border: 0; background: transparent; }
  .toc-summary { min-height: 0; padding: 0 0 12px; cursor: default; pointer-events: none; font-size: 0.8125rem; color: var(--ink-3); letter-spacing: 0.04em; text-transform: uppercase; }
  .toc-chev { display: none; }
  .toc-list { padding: 0 0 40px; max-height: calc(100vh - 96px); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin;
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent); }
  .toc-details::details-content { content-visibility: visible; display: block; }
  .toc-list a { border-top: 0; padding-block: 8px; }
  .toc--clamp .toc-list > li { border-top: 0; padding-block: 8px; }
  .toc--clamp .toc-list > li > a::before { top: calc(6px + 0.55em); }
}

/* справочная страница */
.notice {
  display: flex; gap: 12px; align-items: flex-start; margin-top: 24px; max-width: 68ch;
  padding: 16px; background: var(--sage-tint); border: 1px solid var(--sage-line); border-radius: var(--radius-sm);
  font-size: 0.9375rem; line-height: 1.45;
}
.notice-i { width: 22px; height: 22px; color: var(--sage); margin-top: 1px; }
.notice a { color: var(--sage-deep); font-weight: 600; text-underline-offset: 0.2em; }
.qa-list { max-width: 68ch; margin-top: 8px; }
.qa { padding-block: 28px 24px; border-top: 1px solid var(--line); }
.qa:first-child { border-top: 0; padding-top: 8px; }
.qa-num { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 0.8125rem; font-weight: 600; color: var(--sage); margin-bottom: 8px; }
/* ссылка назад к оглавлению: на телефоне страница из 20 вопросов длинная; на десктопе оглавление и так рядом */
.qa-up { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; color: var(--sage); font-weight: 500; text-underline-offset: 0.2em; }
@media (min-width: 1024px) { .qa-up { display: none; } }
/* вопрос — голос читателя: текстовая антиква полужирным, легче рубленого и отличается от заголовков разделов */
.qa-q { font-family: var(--font-text); font-size: clamp(1.125rem, 1.09rem + 0.2vw, 1.25rem); font-weight: 600; line-height: 1.4; text-wrap: pretty; }
.qa-a { font-family: var(--font-text); font-size: var(--text-size); line-height: 1.68; margin-top: 12px; }
.qa-a p + p { margin-top: 0.9em; }

.sources { margin-top: 40px; max-width: 68ch; padding: 20px; background: var(--paper-2); border-radius: var(--radius); }
.sources-title { font-size: 1.25rem; margin-bottom: 8px; }
.sources-list { list-style: none; }
.src-link {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px;
  min-height: 48px; padding-block: 12px; border-top: 1px solid var(--line); text-decoration: none;
}
.sources-list li:first-child .src-link { border-top: 0; }
.src-name { font-weight: 600; line-height: 1.35; }
.src-domain { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: 0.875rem; }
.i-ext { width: 15px; height: 15px; }
@media (hover: hover) { .src-link:hover .src-name { color: var(--sage-deep); text-decoration: underline; text-underline-offset: 0.2em; } }
.verified { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 0.875rem; color: var(--ink-2); }

.siblings { margin-block: 36px 64px; max-width: 68ch; }
.siblings-title { font-size: 1.125rem; margin-bottom: 8px; }
.link-list { list-style: none; }
.link-list a {
  display: flex; align-items: center; min-height: 48px; padding-block: 8px; border-top: 1px solid var(--line);
  text-decoration: none; font-weight: 500; line-height: 1.35;
}
@media (hover: hover) { .link-list a:hover { color: var(--apple-deep); text-decoration: underline; text-underline-offset: 0.2em; } }

/* «О проекте» без боковой колонки */
.article--page { max-width: 44rem; padding-bottom: 56px; }
.article--page .article-head + .prose { margin-top: 20px; }
@media (min-width: 1024px) { .article--page { display: block; } }

/* ---------- Хаб справочника ---------- */
.hub-head { display: grid; gap: 24px; padding-top: 12px; }
.page-title { font-size: clamp(1.875rem, 1.35rem + 2.4vw, 3rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.06; margin-top: 8px; }
.hub-lead { margin-top: 16px; font-size: 1.0625rem; color: var(--ink-2); max-width: 40rem; }
.hub-art { display: none; border-radius: var(--radius); overflow: hidden; }
.hub-art .ph { aspect-ratio: 2 / 1; }
@media (min-width: 900px) {
  .hub-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: 48px; }
  .hub-art { display: block; }
  .hub-art .ph { aspect-ratio: 4 / 3; }
}
.hub-popular { margin-top: 32px; }
.label-title { font-size: 0.8125rem; font-weight: 600; color: var(--ink-3); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 12px; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
@media (min-width: 900px) { .hub-popular .chips { max-width: 44rem; } } /* по ширине текстовой колонки: 2 + 2, без одинокого чипа */
.hub-jump { margin-top: 28px; border-block: 1px solid var(--line); }
.hub-jump ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0 20px; }
.hub-jump a { display: inline-flex; align-items: center; min-height: 48px; font-weight: 600; color: var(--sage); text-decoration: none; }
@media (hover: hover) { .hub-jump a:hover { color: var(--sage-deep); text-decoration: underline; text-underline-offset: 0.2em; } }
.hub-branch { display: grid; gap: 16px; padding-block: 32px; border-bottom: 1px solid var(--line); }
.hub-branch-title { font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); letter-spacing: -0.015em; }
.hub-branch-desc { margin-top: 8px; color: var(--ink-2); }
.hub-branch-meta .more-link { color: var(--sage-deep); }
.hub-branch-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 8px; font-size: 0.9375rem; color: var(--ink-3); }
.tree { list-style: none; }
.tree a {
  display: flex; align-items: center; min-height: 48px; padding-block: 8px; border-bottom: 1px solid var(--line);
  text-decoration: none; font-weight: 600; line-height: 1.35;
}
.tree ul { list-style: none; margin-left: 8px; padding-left: 16px; border-left: 1px solid var(--line-strong); }
.tree ul a { font-weight: 500; color: var(--ink-2); font-size: 0.9688rem; }
@media (hover: hover) { .tree a:hover { color: var(--sage-deep); text-decoration: underline; text-underline-offset: 0.2em; } }
@media (min-width: 900px) {
  .hub-branch { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 40px; padding-block: 44px; }
  .tree { columns: 2; column-gap: 32px; }
  .tree > li { break-inside: avoid; }
}
.hub-page .sources { margin-block: 40px 64px; }

/* ---------- Список рубрики ---------- */
.list-head { padding-block: 12px 20px; border-bottom: 2px solid var(--ink); }
.list-desc { margin-top: 12px; color: var(--ink-2); font-size: 1.0625rem; }
.list-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; padding-bottom: 56px; }
@media (min-width: 1024px) { .list-layout { grid-template-columns: minmax(0, 1fr) 18rem; gap: 64px; } .list-side { padding-top: 24px; } }
.pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 28px; }
.pg-nums { display: flex; align-items: center; gap: 4px; }
.pg-num, .pg-prev, .pg-next {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; height: 44px; padding: 0 12px;
  border-radius: var(--radius-sm); text-decoration: none; font-weight: 600; font-variant-numeric: tabular-nums;
}
.pg-num[aria-current="page"] { background: var(--ink); color: var(--paper); }
.pg-prev { border: 1px solid var(--line-strong); padding: 0 16px 0 12px; }
.pg-next { border: 1px solid var(--line-strong); padding: 0 12px 0 16px; }
.i-back { transform: scaleX(-1); }
.pg-gap { color: var(--ink-3); padding-inline: 4px; }
@media (hover: hover) { .pg-num:not([aria-current]):hover, .pg-next:hover { background: var(--paper-2); } }
.pg-status { margin-top: 12px; font-size: 0.875rem; color: var(--ink-3); }
/* узкий экран: «← Назад» и «Дальше →» в первой строке, номера — второй; уже 340px у «Назад» только стрелка (подпись — для чтения с экрана) */
@media (max-width: 599px) { .pg-nums { order: 3; flex-basis: 100%; justify-content: center; } }
@media (max-width: 340px) {
  .pg-prev { padding: 0 11px; }
  .pg-prev .pg-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.side-box { padding: 20px; border: 1px solid var(--line); border-radius: var(--radius); }
.side-box + .side-box { margin-top: 16px; }
.side-box--ref { background: var(--sage-tint); border-color: var(--sage-line); }
.side-box--ref p { margin-top: 8px; color: var(--ink-2); font-size: 0.9375rem; }
.side-box--ref .more-link { color: var(--sage-deep); }
.side-title { font-size: 1.0625rem; margin-bottom: 8px; }
.side-title a { text-decoration: none; }
.side-list { list-style: none; }
.side-list a { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 44px; border-top: 1px solid var(--line); text-decoration: none; font-weight: 500; }
.side-list li:first-child a { border-top: 0; }
@media (hover: hover) { .side-list a:hover { color: var(--apple-deep); } }

/* ---------- 404 ---------- */
.nf-page { padding-bottom: 64px; }
.nf-head { max-width: 40rem; padding-top: 48px; }
.nf-code { font-weight: 600; color: var(--apple-deep); }
.nf-lead { margin-top: 12px; color: var(--ink-2); font-size: 1.0625rem; margin-bottom: 24px; }
.nf-grid { display: grid; gap: 28px; margin-top: 48px; }
@media (min-width: 900px) { .nf-grid { grid-template-columns: repeat(3, 1fr); gap: 40px; } }
.nf-col--ref .side-title a { color: var(--sage); }
.nf-home { margin-top: 36px; }

/* ---------- Подвал ---------- */
.site-footer { margin-top: 0; background: var(--paper-2); border-top: 1px solid var(--line); padding-top: 40px; font-size: 0.9375rem; }
.footer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
.footer-about { grid-column: 1 / -1; }
.footer-about p { margin-top: 12px; color: var(--ink-2); max-width: 30rem; }
.footer-note a { color: var(--ink); text-underline-offset: 0.2em; }
.brand--footer { margin-right: 0; }
.footer-title { font-size: 0.8125rem; font-weight: 600; color: var(--ink-3); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 8px; }
.footer-col .footer-title a { display: inline; min-height: 0; color: inherit; text-decoration: none; }
.footer-col .footer-title a:hover { color: var(--apple-deep); }
.footer-col ul { list-style: none; }
.footer-col a { display: flex; align-items: center; min-height: 40px; padding-block: 8px; text-decoration: none; color: var(--ink); line-height: 1.3; }
@media (hover: hover) { .footer-col a:hover { color: var(--apple-deep); text-decoration: underline; text-underline-offset: 0.2em; } }
.footer-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  position: relative; margin-top: 32px; padding-block: 20px 28px; color: var(--ink-3); font-size: 0.8125rem;
}
.footer-bottom::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: 1px solid var(--line); }
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: minmax(0, 1.6fr) repeat(4, minmax(0, 1fr)); gap: 40px; }
  .footer-about { grid-column: auto; }
  .site-footer { padding-top: 56px; }
}

/* ---------- Движение: уважать настройку ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ======================================================================
   Тема kz-engine: то, чего не было в прототипе (живые данные ядра)
   ====================================================================== */

/* реклама: живое место — без пунктирной заглушки, но с резервом высоты против сдвига вёрстки */
.ad-slot--live { background: transparent; border: 0; padding: 0; color: inherit; display: block; min-height: 280px; }
.ad-slot--live > ins { display: block; width: 100%; }
.ad-slot--live.ad-slot--empty, .ads-failed .ad-slot--live { display: none; } /* свёртку ставит site.js — только вне экрана, без сдвига текста */
.prose > .ad-slot { margin-block: 1.8em; max-width: none; font-family: var(--font-ui); }
.fresh .ad-slot, .list-main > .ad-slot { margin-block: 0 28px; }

/* меню: раздел текущей страницы (запись хаба, справочная страница) */
.nav-link.is-current { color: var(--apple-deep); }
.nav-link--ref.is-current, .nav-link--ref[aria-current="page"] { color: var(--sage-deep); }
@media (min-width: 1024px) {
  .nav-link.is-current { color: var(--ink); }
  .nav-link--ref.is-current { box-shadow: inset 0 -3px 0 var(--sage); color: var(--sage-deep); }
}
.side-list a[aria-current="page"] { color: var(--apple-deep); font-weight: 600; }

/* текст записи из старого сайта: картинки, подписи, таблицы, видео */
.prose img { border-radius: var(--radius-sm); }
.prose figure, .prose .wp-caption { margin: 1.8em 0; max-width: 100%; width: auto !important; }
.prose figcaption, .prose .wp-caption-text { margin-top: 8px; font-family: var(--font-ui); font-size: 0.875rem; line-height: 1.4; color: var(--ink-3); }
.prose .aligncenter { margin-inline: auto; }
.prose hr { border: 0; height: 1px; width: 96px; margin: 2.4em 0; background: var(--line-strong); }
.prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-family: var(--font-ui); font-size: 0.9375rem; line-height: 1.4; }
.prose th, .prose td { padding: 8px 12px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.prose th { background: var(--paper-2); font-weight: 600; }
.prose iframe, .prose video, .prose embed { display: block; max-width: 100%; border: 0; border-radius: var(--radius-sm); }
.prose iframe[src*="youtube"] { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.prose blockquote { margin: 1.6em 0; padding-left: 1em; border-left: 3px solid var(--apple-tint); color: var(--ink-2); }
.prose pre { max-width: 100%; overflow-x: auto; }

/* подвал: «Популярное в справочнике» */
.footer-popular { padding-bottom: 28px; margin-bottom: 28px; position: relative; }
.footer-popular::after { content: ""; position: absolute; bottom: 0; left: var(--gutter); right: var(--gutter); border-bottom: 1px solid var(--line); }
.footer-popular .footer-title a { color: inherit; text-decoration: none; }
.footer-popular .footer-title a:hover { color: var(--sage-deep); }
.footer-popular-list { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 24px; }
.footer-popular-list a { display: flex; align-items: center; min-height: 40px; padding-block: 8px; text-decoration: none; line-height: 1.3; color: var(--ink); }
@media (hover: hover) { .footer-popular-list a:hover { color: var(--sage-deep); text-decoration: underline; text-underline-offset: 0.2em; } }
@media (min-width: 640px) { .footer-popular-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .footer-popular-list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; } }

/* списки: заголовки подборок, вступление из HTML, пустой список */
.list-title { font-size: 1.25rem; letter-spacing: -0.01em; margin-top: 28px; }
.list-main > .list-title:first-child { margin-top: 24px; }
.list-intro > * + * { margin-top: 0.8em; }
/* вступление хаба на телефоне: 4 строки и «Читать дальше» (кнопку показывает site.js, если текст не влез) */
.intro-more { margin-top: 8px; padding: 0; min-height: 44px; border: 0; background: none; color: var(--apple-deep); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }
@media (max-width: 639px) {
  .js .list-intro--clamp:not(.is-open) { max-height: calc(4 * 1.6em); overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent); mask-image: linear-gradient(to bottom, #000 60%, transparent); }
}
@media (min-width: 640px) { .intro-more { display: none; } }
.list-intro a { color: var(--apple-deep); text-underline-offset: 0.2em; }
.list-empty { padding-block: 32px; color: var(--ink-2); }
.search-empty { padding-block: 28px; }
.search-empty .list-desc { margin: 0 0 16px; }
.list-head .search--big { margin-top: 20px; max-width: 40rem; }

/* хаб: подборка «Главное в разделе» и текст раздела после ленты */
.featured { padding-bottom: 8px; }
.featured-grid { display: grid; gap: 20px; margin-top: 16px; }
.featured-grid > .card { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
@media (min-width: 640px) {
  .featured-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
  .featured-grid > .card { grid-template-columns: 1fr; gap: 12px; padding-bottom: 0; border-bottom: 0; }
  .card--featured .card-title { font-size: 1.125rem; }
}
@media (min-width: 1024px) { .featured-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.hub-more { margin-top: 48px; padding-top: 8px; border-top: 2px solid var(--ink); }
.hub-more > h2:first-child { margin-top: 1em; }

/* главная: кнопка «Все статьи: страница 2» под лентой */
.fresh-more { margin-top: 32px; }

/* пагинация: неактивные края */
a.pg-prev { color: var(--ink); }
@media (hover: hover) { a.pg-prev:hover { background: var(--paper-2); } }
span.pg-prev[aria-disabled="true"], span.pg-next[aria-disabled="true"] { color: var(--ink-3); border-color: var(--line); cursor: default; }

/* лента главной: широкие карточки добивают последний ряд на десктопе */
@media (min-width: 1024px) {
  .feed > .card--wide { grid-column: span 2; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
  .card--wide .card-title { font-size: 1.25rem; }
}

/* партнёрские записи (meta.role = secondary) в ленте главной и на /page/N/: после обычных, компактно, с меткой */
.card-kicker--partner { color: var(--ink-3); font-weight: 500; }
.feed--partner { margin-top: 20px; }
.card--partner { grid-template-columns: 88px minmax(0, 1fr); gap: 12px; }
.card--partner .card-title { font-size: 0.9688rem; }
.card--row.card--partner { padding-block: 14px; }
@media (min-width: 640px) {
  .feed--partner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin-top: 36px; }
  .feed > .card--partner { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding-block: 14px; border-top: 1px solid var(--line); }
  .card--feed.card--partner .card-title, .card--row.card--partner .card-title { font-size: 1rem; }
  .card--row.card--partner { grid-template-columns: 120px minmax(0, 1fr); gap: 16px; }
}
@media (min-width: 1024px) { .feed--partner { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* картинка внутри подзаголовка (так в текстах WP) или сразу под ним — с отступом от текста заголовка */
.prose :is(h2, h3, h4) img { display: block; margin-top: 0.75em; }
.prose :is(h2, h3, h4):has(img) + * { margin-top: 1em; }
.prose :is(h2, h3, h4) + p:has(> img:first-child), .prose :is(h2, h3, h4) + p:has(> a:first-child > img), .prose :is(h2, h3, h4) + figure { margin-top: 1em; }

/* справочная без оглавления: список подстраниц / веток — в правой колонке на десктопе */
@media (min-width: 1024px) {
  .article--notoc > .siblings { grid-column: 2; grid-row: 2 / span 14; align-self: start; position: sticky; top: 24px; margin: 24px 0 0; max-width: none; }
}