/* =========================================================================
   All-In Podcast — русско-английские выжимки
   Единственный стилевой файл проекта (§8.1). Без сборки, без CDN.

   Порядок:
     1.  Шрифты (@font-face, локальные .woff2, font-display: swap)
     2.  Токены (палитра §8.1, шкала, тени)
     3.  Сброс и база
     4.  Типографика
     5.  Каркас: шапка, контейнер, футер
     6.  Категории (функциональный цвет, [data-category])
     7.  Плеер
     8.  Главы, TL;DR, тезисы, цитаты, теги, прогнозы
     9.  Индекс (список эпизодов)
     10. Утилиты, фокус, состояния
     11. Адаптив от 360px
     12. prefers-reduced-motion
     13. prefers-color-scheme: dark (сдержанно, производно от той же палитры)
     14. Разметка шаблонов: отступы и блоки (БЭМ-классы app/templates)
   ========================================================================= */

/* ============================ 1. ШРИФТЫ =================================
   Файлы кладёт scripts/fetch_fonts.sh в static/fonts/ (см. fonts/README.md).
   Ни одного внешнего URL: из РФ CDN Google нестабилен и добавляет
   блокирующий запрос (§8.1, §9 «шрифты локально»).
   Если файла нет — @font-face просто не применится и сработает
   полный fallback-стек, страница остаётся читаемой.
   ======================================================================== */

/* --- Golos Text — основной текст, спроектирован под кириллицу --- */
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/golos-text-400-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/golos-text-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/golos-text-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/golos-text-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/golos-text-600-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/golos-text-600-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/golos-text-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Golos Text';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('fonts/golos-text-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

/* --- Unbounded — только H1/H2, крупно и редко --- */
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/unbounded-700-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/unbounded-700-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/unbounded-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Unbounded';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/unbounded-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

/* --- JetBrains Mono — таймкоды, номера эпизодов, тикеры --- */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/jetbrains-mono-400-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/jetbrains-mono-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/jetbrains-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/jetbrains-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

/* ============================ 2. ТОКЕНЫ ================================= */

:root {
  /* Палитра §8.1 — значения фиксированы ТЗ, менять нельзя. */
  --ink: #12151A;         /* текст, фон шапки */
  --surface: #F2F3F5;     /* фон страницы */
  --card: #FFFFFF;
  --muted: #6B7280;
  --rule: #DFE2E7;

  --cat-markets: #C2410C; /* рынки, макро */
  --cat-ai: #4C5FD5;      /* ИИ и технологии */
  --cat-policy: #0F766E;  /* политика, регулирование */
  --cat-science: #7C3AED; /* science corner */
  --cat-deals: #B45309;   /* сделки, компании */

  /* Производные.
     --muted даёт 4.83:1 на --card, но только 4.35:1 на --surface.
     Для вторичного текста прямо на фоне страницы берём --muted-strong
     (5.19:1 на --surface, 5.76:1 на --card) — §8.4 требует ≥ 4.5:1. */
  --muted-strong: #5F6675;
  --ink-soft: #2A303A;
  --accent: var(--cat-ai);

  /* Категория по умолчанию: если data-category отсутствует или незнаком,
     сегмент/чип красится нейтрально, а не пропадает. */
  --cat: var(--muted-strong);

  /* Шкала (4px-сетка) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;

  --radius: 6px;
  --radius-lg: 10px;
  --measure: 68ch;         /* комфортная длина строки для кириллицы */
  --page: 1080px;

  --shadow-1: 0 1px 2px rgba(18, 21, 26, 0.05);
  --shadow-2: 0 2px 12px rgba(18, 21, 26, 0.08);

  --font-display: 'Unbounded', 'Golos Text', 'Segoe UI', 'Helvetica Neue', Arial,
    'PT Sans', 'Liberation Sans', sans-serif;
  --font-body: 'Golos Text', 'Inter', 'Segoe UI', 'Helvetica Neue', Arial, 'PT Sans',
    'Liberation Sans', 'DejaVu Sans', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas,
    'DejaVu Sans Mono', 'Liberation Mono', monospace;

  color-scheme: light dark;
}

/* ========================= 3. СБРОС И БАЗА ============================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Чтобы якоря не уезжали под прилипший плеер. */
  scroll-padding-top: var(--s-5);
}

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  font-feature-settings: 'kern' 1, 'liga' 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  /* Кириллица переносится плохо — не даём длинным словам ломать сетку. */
  overflow-wrap: break-word;
}

img,
picture,
video,
iframe {
  max-width: 100%;
}

img {
  height: auto;
  display: block;
}

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--s-6) 0;
}

/* ========================= 4. ТИПОГРАФИКА ===============================
   Дисплейный Unbounded — только H1/H2, крупно и редко (§8.1).
   Всё остальное — Golos Text.
   ======================================================================== */

h1,
h2 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.14;
  text-wrap: balance;
  margin: 0 0 var(--s-4);
}

h1 {
  font-size: clamp(1.75rem, 1.15rem + 2.6vw, 2.9rem);
}

h2 {
  font-size: clamp(1.3rem, 1.05rem + 1.1vw, 1.7rem);
  margin-top: var(--s-7);
}

h3,
h4,
h5,
h6 {
  font-family: var(--font-body);
  font-weight: 600;
  line-height: 1.3;
  margin: 0 0 var(--s-3);
  letter-spacing: -0.005em;
}

h3 {
  font-size: 1.14rem;
}

p {
  margin: 0 0 var(--s-4);
  max-width: var(--measure);
}

a {
  color: var(--ink);
  text-decoration-color: var(--rule);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: color 0.12s ease, text-decoration-color 0.12s ease;
}

a:hover {
  text-decoration-color: currentColor;
}

strong,
b {
  font-weight: 600;
}

small,
.text-small {
  font-size: 0.875rem;
}

code,
kbd,
samp,
pre,
time,
.mono,
.ticker,
.timecode,
.episode-number,
a[data-seek],
[data-seek] time {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

blockquote {
  margin: 0;
}

ul,
ol {
  margin: 0 0 var(--s-4);
  padding-left: 1.25em;
  max-width: var(--measure);
}

li + li {
  margin-top: var(--s-2);
}

/* Приглушённый текст. На --surface только --muted-strong (см. токены). */
.muted,
.meta,
.dim,
.text-muted {
  color: var(--muted-strong);
}

.card .muted,
.card .meta {
  color: var(--muted);
}

/* ==================== 5. КАРКАС: ШАПКА, СЕТКА, ФУТЕР ==================== */

.wrap,
.container,
.page,
.layout,
[class$='__inner'] {
  width: 100%;
  max-width: var(--page);
  margin-inline: auto;
  padding-inline: var(--s-5);
}

/* The landmarks hold their content directly — base.html has no inner wrapper
   element — so the page measure is applied as symmetric padding instead. That
   keeps the header's dark band full-bleed while its contents still line up
   with the rest of the page. */
.site-header,
.site-main,
.site-footer {
  padding-inline: max(var(--s-5), calc((100% - var(--page)) / 2));
}

/* The brand is name + tagline on one line; below the page measure the tagline
   is the first thing to go rather than being clipped by the header band. */
.brand {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2, 8px);
  min-width: 0;
}

@media (max-width: 720px) {
  .brand__tagline {
    display: none;
  }
}

main {
  display: block;
  padding-block: var(--s-6) var(--s-8);
}

/* --- Шапка: фон --ink, единственный тёмный массив в светлой теме --- */
header.site-header,
.site-header,
body > header {
  background: var(--ink);
  color: var(--surface);
  border-bottom: 1px solid var(--ink);
}

.site-header a,
body > header a {
  color: var(--surface);
  text-decoration: none;
}

.site-header a:hover,
body > header a:hover {
  text-decoration: underline;
  text-decoration-color: currentColor;
}

.site-header__inner,
.site-header > .wrap,
body > header > .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  padding-block: var(--s-3);
  min-height: 56px;
}

.site-header__logo,
.site-header__brand,
.brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.site-header__nav,
.site-nav,
nav ul {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  list-style: none;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

nav li + li {
  margin-top: 0;
}

/* --- Переключатель языка --- */
.lang-switch,
.lang,
[class*='lang-switch'] {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.lang-switch a,
.lang-switch span {
  padding: 2px var(--s-2);
  border-radius: 4px;
  border: 1px solid transparent;
}

.lang-switch a {
  border-color: currentColor;
  opacity: 0.75;
}

.lang-switch a:hover {
  opacity: 1;
}

.lang-switch [aria-current],
.lang-switch .is-active {
  background: var(--surface);
  color: var(--ink);
}

/* --- Хлебные крошки --- */
.breadcrumbs,
.breadcrumb,
[class$='__breadcrumbs'] {
  font-size: 0.85rem;
  color: var(--muted-strong);
  margin-bottom: var(--s-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  list-style: none;
  padding: 0;
}

.breadcrumbs a,
.breadcrumb a {
  color: var(--muted-strong);
}

/* --- Карточки --- */
.card,
.panel,
.box {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
}

/* --- Футер --- */
footer.site-footer,
.site-footer,
body > footer {
  border-top: 1px solid var(--rule);
  background: var(--card);
  color: var(--muted-strong);
  font-size: 0.875rem;
  padding-block: var(--s-6);
  margin-top: var(--s-8);
}

.site-footer a,
body > footer a {
  color: var(--muted-strong);
}

.site-footer p,
body > footer p {
  max-width: var(--measure);
}

.site-footer__disclaimer,
.disclaimer {
  color: var(--muted-strong);
}

/* ===================== 6. КАТЕГОРИИ — ФУНКЦИОНАЛЬНЫЙ ЦВЕТ ===============
   Цвет кодирует категорию главы, поэтому он живёт в CSS, а не в шаблоне:
   разметка отдаёт только [data-category], палитра — здесь.
   ======================================================================== */

[data-category='markets'] { --cat: var(--cat-markets); }
[data-category='ai']      { --cat: var(--cat-ai); }
[data-category='policy']  { --cat: var(--cat-policy); }
[data-category='science'] { --cat: var(--cat-science); }
[data-category='deals']   { --cat: var(--cat-deals); }

/* Чип категории: белым по цвету категории — все пять пар ≥ 5.0:1. */
.chip,
.tag--category,
.category-chip,
[class$='__chip'],
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  padding: 2px var(--s-2);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1.7;
}

.chip[data-category],
.category-chip[data-category],
[class$='__chip'][data-category],
.badge[data-category] {
  background: var(--cat);
  color: #FFFFFF;
  border: 1px solid transparent;
  text-decoration: none;
}

/* Тихий вариант чипа — для плотных списков на главной. */
.chip--quiet[data-category],
.chip--soft[data-category] {
  background: transparent;
  color: var(--cat);
  border-color: var(--cat);
}

/* Простые теги (компании, люди) — без цвета категории. */
.tag,
.entity,
[class$='__tag'] {
  display: inline-block;
  padding: 2px var(--s-2);
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--card);
  font-size: 0.85rem;
  color: var(--ink-soft);
  white-space: nowrap;
}

.tags,
.entities,
[class*='__tags'] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s-4);
}

.tags li + li,
.entities li + li {
  margin-top: 0;
}

/* ============================ 7. ПЛЕЕР ==================================
   Пропорцию 16/9 держит рамка (см. секцию 14), здесь — рамка и фон.
   CLS обязан быть 0 (§8.2), поэтому никаких высот в JS.
   ======================================================================== */

.player,
.player__frame,
[class$='__player'] {
  position: relative;
}

#player,
.player iframe,
[class$='__player'] > iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--radius);
  background: var(--ink);
}

/* ============ 8. ГЛАВЫ, TL;DR, ТЕЗИСЫ, ЦИТАТЫ, ПРОГНОЗЫ ================= */

/* --- TL;DR — единственный выделенный блок в теле страницы --- */
.tldr,
.digest__tldr,
.episode__tldr {
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--ink);
  border-radius: var(--radius);
  padding: var(--s-5);
  margin: var(--s-5) 0 var(--s-7);
  font-size: 1.06rem;
  line-height: 1.6;
  box-shadow: var(--shadow-1);
}

.tldr p:last-child,
.digest__tldr p:last-child,
.episode__tldr p:last-child {
  margin-bottom: 0;
}

.tldr__label,
[class$='__label'] {
  display: block;
  margin-bottom: var(--s-2);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted-strong);
}

/* --- Таймкоды: моно, кликабельны, цвет категории родителя --- */
a[data-seek],
.timecode,
[class*='__time'] {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-decoration: none;
  color: var(--cat);
  border-bottom: 1px solid transparent;
}

a[data-seek]:hover,
a[data-seek]:focus-visible {
  border-bottom-color: currentColor;
}

/* Таймкод главы: заметная кнопка-метка слева от заголовка. */
.chapter__time,
.chapter a[data-seek]:first-child {
  display: inline-block;
  padding: 1px var(--s-2);
  border-radius: 4px;
  /* Фон только --card: любая подмешанная категория опускала
     контраст текста ниже 4.5:1 (проверено на --cat-deals). */
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--rule);
  border-bottom: 0;
}

/* --- Глава --- */
.chapter {
  position: relative;
  padding: var(--s-4) 0 var(--s-4) var(--s-5);
  border-top: 1px solid var(--rule);
  scroll-margin-top: var(--s-8);
}

.chapter:first-of-type {
  border-top: 0;
}

/* Тонкая полоса категории слева — тот же функциональный цвет, тихо. */
.chapter::before {
  content: '';
  position: absolute;
  left: 0;
  top: var(--s-4);
  bottom: var(--s-4);
  width: 3px;
  border-radius: 2px;
  background: var(--cat);
  opacity: 0.35;
  transition: opacity 0.15s ease;
}

.chapter.is-active::before {
  opacity: 1;
}

.chapter.is-active {
  background: var(--card);
  border-radius: var(--radius);
}

.chapter__header,
.chapter > header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-3);
  margin-bottom: var(--s-2);
}

.chapter__title {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.14rem;
  line-height: 1.32;
}

.chapter__summary,
.chapter p {
  margin-bottom: 0;
  color: var(--ink-soft);
}

.chapters,
.chapter-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* --- Лента эпизодов на главной --- */
.feed {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--s-5);
}

.feed__item {
  margin: 0;
}

.chapters > li + li {
  margin-top: 0;
}

/* --- Ключевые тезисы --- */
.takeaways,
[class*='takeaway'] ul,
ul.takeaways {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--s-5);
  max-width: var(--measure);
}

.takeaways > li {
  position: relative;
  padding-left: var(--s-5);
  margin-top: var(--s-3);
}

.takeaways > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 8px;
  height: 2px;
  background: var(--ink);
}

/* --- Цитаты (не более 25 слов, всегда с таймкодом) --- */
.quote,
blockquote.quote,
[class$='__quote'],
.quotes__item {
  margin: 0 0 var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-size: 1.06rem;
}

.quote p,
[class$='__quote'] p {
  margin-bottom: var(--s-2);
}

.quote > .quote__meta,
.quote > footer,
[class$='__quote'] > footer {
  display: flex;
  gap: var(--s-3);
  align-items: baseline;
  font-size: 0.85rem;
  color: var(--muted);
}

.quote__author,
cite {
  font-style: normal;
  font-weight: 600;
  color: var(--ink);
}

/* --- Прогнозы --- */
.prediction,
[class$='__prediction'],
.predictions__item {
  padding: var(--s-4) 0;
  border-top: 1px solid var(--rule);
}

.prediction__horizon,
[class$='__horizon'] {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-strong);
}

/* --- Внешняя ссылка «Смотреть оригинал» --- */
.button,
.btn,
.link-external,
[class$='__button'] {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--surface);
  font-size: 0.94rem;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.12s ease;
}

.button:hover,
.btn:hover {
  opacity: 0.88;
  color: var(--surface);
}

.button--ghost,
.btn--ghost {
  background: transparent;
  color: var(--ink);
}

.button--ghost:hover,
.btn--ghost:hover {
  color: var(--ink);
}

/* --- Пред/след эпизод --- */
.episode-nav,
[class*='episode-nav'],
[class*='episode__nav'],
.pager {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin: var(--s-7) 0 0;
  padding-top: var(--s-5);
  border-top: 1px solid var(--rule);
  font-size: 0.94rem;
}

/* --- Мета-строка эпизода --- */
.episode__meta,
.meta-row,
[class$='__meta'] {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
  margin: 0 0 var(--s-5);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  color: var(--muted-strong);
}

/* ===================== 9. ИНДЕКС (СПИСОК ЭПИЗОДОВ) ===================== */

.episode-list,
.episodes,
.episodes__list {
  display: grid;
  gap: var(--s-4);
  grid-template-columns: 1fr;
  list-style: none;
  margin: 0;
  padding: 0;
}

.episode-list > li + li,
.episodes > li + li {
  margin-top: 0;
}

.episode-card,
.episode-list__item,
.episodes__item {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: var(--s-5);
  align-items: start;
  padding: var(--s-4);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.episode-card:hover,
.episodes__item:hover,
.episode-list__item:hover {
  border-color: #C9CED6;
  box-shadow: var(--shadow-2);
}

.episode-card img,
.episodes__item img,
.episode-list__item img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--rule);
}

.episode-card__title,
.episodes__item [class$='__title'],
.episode-list__item [class$='__title'] {
  margin: 0 0 var(--s-2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.16rem;
  line-height: 1.3;
}

.episode-card__title a,
.episodes__item [class$='__title'] a {
  text-decoration: none;
}

.episode-card__title a:hover,
.episodes__item [class$='__title'] a:hover {
  text-decoration: underline;
}

.episode-card__tldr,
[class*='__tldr-excerpt'] {
  margin: 0 0 var(--s-3);
  color: var(--ink-soft);
  font-size: 0.96rem;
}

.episode-card__chips,
[class*='__chips'] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.episode-card__chips li + li {
  margin-top: 0;
}

/* ================= 10. УТИЛИТЫ, ФОКУС, СОСТОЯНИЯ ======================== */

.visually-hidden,
.sr-only,
.skip-link:not(:focus):not(:active) {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link:focus {
  position: fixed;
  top: var(--s-2);
  left: var(--s-2);
  z-index: 100;
  padding: var(--s-2) var(--s-4);
  background: var(--card);
  color: var(--ink);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
}

/* Видимый фокус клавиатуры (§8.4) — двухслойное кольцо,
   читается и на светлом, и на цветном, и на тёмной шапке. */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  border-radius: 3px;
}

.site-header :focus-visible,
.button:focus-visible,
.btn:focus-visible {
  outline-color: var(--card);
  box-shadow: 0 0 0 4px var(--ink);
}

/* Браузеры без :focus-visible — не оставлять пользователя без фокуса. */
@supports not selector(:focus-visible) {
  a:focus,
  button:focus,
  [tabindex]:focus {
    outline: 2px solid var(--ink);
    outline-offset: 2px;
  }
}

::selection {
  background: var(--ink);
  color: var(--surface);
}

/* ==================== 11. АДАПТИВ: от 360px ============================= */

@media (max-width: 860px) {
  .episode-card,
  .episode-list__item,
  .episodes__item,
  .episode-list__item {
    grid-template-columns: 1fr;
    gap: var(--s-3);
  }
}

@media (max-width: 600px) {
  body {
    font-size: 16px;
    line-height: 1.6;
  }

  .wrap,
  .container,
  .page,
  .layout,
  [class$='__inner'] {
    padding-inline: var(--s-4);
  }

  main {
    padding-block: var(--s-5) var(--s-7);
  }

  h2 {
    margin-top: var(--s-6);
  }

  .tldr,
  .quote {
    padding: var(--s-4);
  }

  .chapter {
    padding-left: var(--s-4);
  }

  .site-header__inner,
  body > header > .wrap {
    gap: var(--s-2);
  }
}

/* Нижняя граница поддержки — 360px (§8.4). */
@media (max-width: 360px) {
  :root {
    --s-5: 16px;
    --s-6: 24px;
    --s-7: 32px;
    --s-8: 40px;
  }

  body {
    font-size: 16px;
  }

  h1 {
    font-size: 1.55rem;
    letter-spacing: -0.01em;
  }

  .wrap,
  .container,
  .page,
  .layout,
  [class$='__inner'] {
    padding-inline: var(--s-3);
  }

  .episode__meta,
  .meta-row,
  [class$='__meta'] {
    gap: var(--s-1) var(--s-3);
    font-size: 0.76rem;
  }

  .button,
  .btn {
    width: 100%;
    justify-content: center;
  }
}

/* ==================== 12. PREFERS-REDUCED-MOTION ======================== */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ================= 13. PREFERS-COLOR-SCHEME: DARK =======================
   ТЗ тёмной темы не требует. Делаем сдержанно и производно от той же
   палитры: фон уходит к --ink, категории берутся светлее ровно настолько,
   чтобы удержать 4.5:1. Светлый дизайн при этом не меняется.
   ======================================================================== */

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #E7E9EC;         /* теперь это цвет текста */
    --surface: #101317;
    --card: #171B21;
    --muted: #98A1AE;
    --muted-strong: #A7B0BC;
    --rule: #2A303A;
    --ink-soft: #C7CCD4;

    --cat-markets: #FB923C;
    --cat-ai: #A5B4FC;
    --cat-policy: #5EEAD4;
    --cat-science: #C4B5FD;
    --cat-deals: #FBBF24;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-2: 0 2px 14px rgba(0, 0, 0, 0.5);
  }

  /* Шапка в тёмной теме не может быть «тёмным массивом» — инвертируем. */
  header.site-header,
  .site-header,
  body > header {
    background: var(--card);
    color: var(--ink);
    border-bottom: 1px solid var(--rule);
  }

  .site-header a,
  body > header a {
    color: var(--ink);
  }

  /* Активный язык должен читаться и на тёмном: инвертируем чип. */
  .lang-switch [aria-current],
  .lang-switch .is-active {
    background: var(--ink);
    color: var(--surface);
  }

  /* На светлой категории текст должен быть тёмным, а не белым. */
  .chip[data-category],
  .category-chip[data-category],
  [class$='__chip'][data-category],
  .badge[data-category] {
    color: #101317;
  }

  .tldr {
    border-left-color: var(--muted-strong);
  }

  .button,
  .btn {
    background: var(--ink);
    color: var(--surface);
    border-color: var(--ink);
  }

  .button--ghost,
  .btn--ghost {
    background: transparent;
    color: var(--ink);
  }

  .episode-card:hover,
  .episodes__item:hover,
  .episode-list__item:hover {
    border-color: #3A424E;
  }

  :focus-visible {
    outline-color: var(--ink);
  }

  .site-header :focus-visible {
    outline-color: var(--ink);
    box-shadow: 0 0 0 4px var(--surface);
  }

  ::selection {
    background: var(--ink);
    color: var(--surface);
  }

  #player,
  .player iframe,
  [class$='__player'] > iframe {
    background: #000000;
  }
}

/* ================= 14. РАЗМЕТКА ШАБЛОНОВ: ОТСТУПЫ И БЛОКИ ===============
   Секции 5–9 писались под ранний набор классов (.site-header__inner,
   .episode-card, .breadcrumbs). Шаблоны в app/templates используют БЭМ
   (.card__body, .crumbs__list, .chapters__list …), поэтому часть правил
   выше ни к чему не прикладывалась: списки оставались с маркерами,
   карточки — без внутренних полей, шапка — без вертикальных отступов,
   а плеер схлопывался по высоте (высоту задавал height: 100% внутри
   контейнера без высоты).

   Здесь те же решения выражены через классы, которые реально есть в
   разметке. Значения — из той же шкалы --s-*.
   ======================================================================== */

/* --- Шапка: своя же флекс-строка, внутренней обёртки в base.html нет --- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  padding-block: var(--s-4);
}

.site-header .brand {
  display: flex;
  flex-direction: column;
  gap: 2px;
  white-space: normal;
  text-decoration: none;
}

.brand__tagline {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 0.8rem;
  letter-spacing: 0;
  opacity: 0.72;
}

.site-nav {
  gap: var(--s-4);
}

/* --- Воздух между шапкой и первым заголовком страницы --- */
.site-main {
  padding-block: var(--s-7) var(--s-8);
}

/* --- Хлебные крошки (.crumbs) --- */
.crumbs {
  margin-bottom: var(--s-4);
  font-size: 0.85rem;
  color: var(--muted-strong);
}

.crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.crumbs__item + .crumbs__item::before {
  content: '/';
  margin-right: var(--s-2);
  color: var(--rule);
}

.crumbs__item,
.crumbs__link {
  color: var(--muted-strong);
}

.crumbs__item + .crumbs__item {
  margin-top: 0;
}

/* --- Плеер: пропорцию задаёт рамка, а не высота iframe ---
   .player__iframe наследует height: 100%, поэтому без явной высоты у
   .player__frame видео сжималось до нескольких десятков пикселей.
   aspect-ratio держит 16/9 до загрузки iframe, так что CLS остаётся 0.
   Ширина рамки ограничена так, чтобы высота не превышала ~56vh: иначе на
   широком экране видео занимает почти весь первый экран. */
.player__frame {
  position: relative;
  width: 100%;
  max-width: calc(56vh * 16 / 9);
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink);
}

.player__iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* --- Мета-строка эпизода (.meta — без __meta, своё правило) --- */
.meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
  margin: 0 0 var(--s-5);
  max-width: none;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--muted-strong);
}

.meta__lang-link {
  color: var(--muted-strong);
}

/* --- TL;DR: заголовок внутри блока — метка, а не дисплейный H2 --- */
.tldr__heading {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--muted-strong);
  margin: 0 0 var(--s-2);
}

.tldr__text {
  margin: 0;
}

/* --- Главы --- */
.chapters__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.chapters__list > li + li {
  margin-top: 0;
}

/* Правое поле было нулевым: у активной главы текст упирался в край карточки. */
.chapter {
  padding-right: var(--s-4);
}

/* В шаблоне .chapter__time — строка-обёртка для таймкода и чипа,
   а не сам таймкод, поэтому кнопочные стили снимаем. */
.chapter__time {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  margin: 0 0 var(--s-2);
  padding: 0;
  background: none;
  box-shadow: none;
}

.chapter__timecode {
  display: inline-block;
  padding: 1px var(--s-2);
  border-radius: 4px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--rule);
}

.chapter__title {
  margin: 0 0 var(--s-2);
}

.chapter__summary {
  margin: 0;
  max-width: var(--measure);
}

/* --- Ключевые тезисы --- */
.takeaways__list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: var(--measure);
}

.takeaways__item {
  position: relative;
  padding-left: var(--s-5);
  margin-top: var(--s-3);
}

.takeaways__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 8px;
  height: 2px;
  background: var(--ink);
}

/* --- Цитаты: figure по умолчанию имеет margin: 1em 40px --- */
.quotes__item {
  margin: 0 0 var(--s-4);
  padding: var(--s-4) var(--s-5);
}

.quotes__text {
  margin: 0;
}

.quotes__text p:last-child {
  margin-bottom: var(--s-2);
}

.quotes__attr {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-3);
  font-size: 0.85rem;
  color: var(--muted-strong);
}

.quotes__author {
  font-weight: 600;
  color: var(--ink);
}

/* --- Упомянутые компании и люди ---
   Правило .entities выше делает флекс-строку из списка тегов; здесь
   .entities — это <section> с заголовком и группами, поэтому блок. */
.entities {
  display: block;
}

.entities__group {
  margin-bottom: var(--s-4);
}

.entities__label {
  margin: 0 0 var(--s-2);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-strong);
}

.entities__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.entities__list > li + li {
  margin-top: 0;
}

.entities__tag {
  display: inline-block;
  padding: 2px var(--s-3);
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--card);
  font-size: 0.85rem;
  color: var(--ink-soft);
}

/* --- Прогнозы --- */
.predictions__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.predictions__list > li + li {
  margin-top: 0;
}

.predictions__text {
  margin: 0 0 var(--s-2);
}

.predictions__attr {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s-2) var(--s-3);
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted-strong);
}

.predictions__author {
  font-weight: 600;
  color: var(--ink);
}

/* --- «Смотреть оригинал» — кнопка --- */
.source {
  margin: var(--s-6) 0 0;
}

.source__link {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--surface);
  font-size: 0.94rem;
  font-weight: 600;
  text-decoration: none;
}

.source__link:hover {
  opacity: 0.88;
  color: var(--surface);
}

/* --- Пред/след --- */
.pager__link {
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--card);
  text-decoration: none;
}

.pager__link:hover {
  border-color: var(--muted-strong);
}

/* --- Чипы категорий списком --- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.chips__item {
  margin: 0;
}

.chips > li + li {
  margin-top: 0;
}

/* ===================== Главная: шапка списка и карточки ================= */

.index__head {
  margin-bottom: var(--s-6);
}

.index__title {
  margin-bottom: var(--s-3);
}

.index__lede {
  margin: 0;
  color: var(--muted-strong);
  font-size: 1.05rem;
}

/* Карточка эпизода: .card задаёт только фон и рамку — без внутренних
   полей текст лежал вплотную к краю. */
.feed .card {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: var(--s-5);
  align-items: start;
  padding: var(--s-4);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.feed .card:hover {
  box-shadow: var(--shadow-2);
}

.card__thumb {
  display: block;
}

.card__thumb img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--rule);
}

.card__body {
  min-width: 0;
}

.card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-3);
  margin: 0 0 var(--s-2);
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--muted);
}

.card__title {
  margin: 0 0 var(--s-2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.16rem;
  line-height: 1.3;
  letter-spacing: -0.005em;
}

.card__link {
  text-decoration: none;
}

.card__link:hover {
  text-decoration: underline;
}

.card__tldr {
  margin: 0 0 var(--s-3);
  color: var(--ink-soft);
  font-size: 0.96rem;
}

.index__empty {
  color: var(--muted-strong);
}

@media (max-width: 860px) {
  .feed .card {
    grid-template-columns: 1fr;
    gap: var(--s-3);
  }
}

/* ============================ О проекте ================================= */

/* .page уже получает max-width и боковые поля из секции 5, а <main> даёт
   свои — второй раз их добавлять не нужно. */
.page--about {
  padding-inline: 0;
}

.page--about .lead {
  font-size: 1.1rem;
  color: var(--ink-soft);
}

.page__section {
  margin-bottom: var(--s-6);
}

.page__section > p:last-child {
  margin-bottom: 0;
}

/* ============================== Подвал ================================== */

.site-footer .disclaimer {
  margin-bottom: var(--s-5);
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-5);
  margin: 0 0 var(--s-5);
}

.footer-links__group h2 {
  margin: 0 0 var(--s-2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--muted-strong);
}

.footer-links__group ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-links__group li + li {
  margin-top: var(--s-2);
}

.footer-rights {
  margin: 0;
}

/* --- Узкий экран: поля внутри блоков не должны съедать текст --- */
@media (max-width: 600px) {
  .site-header {
    padding-block: var(--s-3);
  }

  .quotes__item {
    padding: var(--s-4);
  }

  .feed .card {
    padding: var(--s-3);
  }

  .chapter {
    padding-right: var(--s-3);
  }
}

/* ============================ ПЕЧАТЬ ==================================== */

@media print {
  .site-header,
  [class$='__player'] {
    display: none !important;
  }

  body {
    background: #FFFFFF;
    color: #000000;
    font-size: 11pt;
  }
}