/* Generated by scripts/build-blog-assets.mjs. Edit the sources, not this file. */
/**
 * Telegram WebApp Theme Variables
 *
 * Все стили приложения используют --app-* переменные поверх официальных
 * --tg-theme-* CSS variables, которые Telegram инжектит в Mini App.
 * Для обычного браузера оставляем стабильные fallback значения.
 * НЕ используем @media (prefers-color-scheme) — тему определяет Telegram.
 */

:root {
  /* Десктопные browser-only темы */
  --desktop-light-bg-color: #ffffff;
  --desktop-light-secondary-bg-color: #f5f5f5;
  --desktop-light-section-bg-color: #ffffff;
  --desktop-light-header-bg-color: #ffffff;
  --desktop-light-bottom-bar-bg-color: #ffffff;
  --desktop-light-text-color: #111827;
  --desktop-light-hint-color: #6b7280;
  --desktop-light-link-color: #1d6fb0;
  --desktop-light-subtitle-color: #6b7280;
  --desktop-light-section-header-color: #111827;
  --desktop-light-accent-text-color: #1d6fb0;
  --desktop-light-destructive-color: #e53935;
  /* Синий Telegram #2481cc давал 4,13:1 с белым и 3,79:1 на сером — ниже AA (BUG-52) */
  --desktop-light-button-color: #1d6fb0;
  --desktop-light-button-text-color: #ffffff;
  --desktop-light-separator-color: #d9d9d9;

  /* Графит, а не почти чёрный: на #0f1419 карточки без фото (#161d25) и полосы сливались с фоном */
  --desktop-dark-bg-color: #1a1f26;
  --desktop-dark-secondary-bg-color: #27303b;
  --desktop-dark-section-bg-color: #20272f;
  --desktop-dark-header-bg-color: #1a1f26;
  --desktop-dark-bottom-bar-bg-color: #1a1f26;
  --desktop-dark-text-color: #f3f6fb;
  --desktop-dark-hint-color: #97a1ae;
  --desktop-dark-link-color: #67a9ff;
  --desktop-dark-subtitle-color: #aeb8c6;
  --desktop-dark-section-header-color: #f8fafc;
  --desktop-dark-accent-text-color: #67a9ff;
  --desktop-dark-destructive-color: #ff8383;
  /* #4a93ff с белым текстом — 3,04:1; ссылки #67a9ff на графите и так 6,9:1 (BUG-52) */
  --desktop-dark-button-color: #2f6cc7;
  --desktop-dark-button-text-color: #ffffff;
  --desktop-dark-separator-color: #36424f;
  --desktop-dark-selected-bg: #23395c;

  /* Фон */
  --app-bg-color: var(--tg-theme-bg-color, #ffffff);
  --app-secondary-bg-color: var(--tg-theme-secondary-bg-color, #f5f5f5);
  /* Цвета новее Bot API 6.1 старый клиент не присылает — выводим их из базовых, а не из
     светлых констант, иначе тёмная тема получает светлые поверхности и разделители */
  --app-section-bg-color: var(--tg-theme-section-bg-color, var(--app-bg-color));
  --app-header-bg-color: var(--tg-theme-header-bg-color, var(--app-bg-color));
  --app-bottom-bar-bg-color: var(--tg-theme-bottom-bar-bg-color, var(--app-bg-color));

  /* Текст */
  --app-text-color: var(--tg-theme-text-color, #000000);
  --app-hint-color: var(--tg-theme-hint-color, #999999);
  /* Запасные — синий сайта (BUG-52): без JS статья блога остаётся без data-desktop-theme */
  --app-link-color: var(--tg-theme-link-color, #1d6fb0);
  /* Клиенты без subtitle_text_color: hint по умолчанию на белом — 2.85:1, поэтому muted */
  --app-subtitle-color: var(--tg-theme-subtitle-text-color, var(--app-muted-text-color));
  --app-section-header-color: var(--tg-theme-section-header-text-color, var(--app-text-color));
  --app-accent-text-color: var(--tg-theme-accent-text-color, var(--app-link-color));
  --app-destructive-color: var(--tg-theme-destructive-text-color, #e53935);

  /* Кнопки */
  --app-button-color: var(--tg-theme-button-color, #1d6fb0);
  --app-button-text-color: var(--tg-theme-button-text-color, #ffffff);
  /* Выбранный нейтральный вариант Google сохраняет фирменные цвета в обеих темах. */
  --app-google-button-bg: #f2f2f2;
  --app-google-button-text: #1f1f1f;

  /* Разделители */
  --app-separator-color: var(
    --tg-theme-section-separator-color,
    color-mix(in srgb, var(--app-text-color) 12%, var(--app-bg-color))
  );

  /* Алиасы для удобства */
  --app-primary-color: var(--app-button-color);
  --app-primary-text-color: var(--app-button-text-color);
  --app-favorite-color: var(--app-button-color);

  /* Тени — полупрозрачные, работают на любом фоне */
  --app-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.1);
  --app-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
  --app-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  --app-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 8px 10px rgba(0, 0, 0, 0.04);

  /* Радиусы */
  --app-border-radius-sm: 8px;
  --app-border-radius-md: 12px;
  --app-border-radius-lg: 16px;
  --app-border-radius-xl: 20px;
  --app-border-radius-pill: 999px;

  /* Шрифты: Golos Text — текст и заголовки, Unbounded — цены, лого, счётчики */
  --app-font-heading: 'Golos Text', system-ui, sans-serif;
  --app-font-body: 'Golos Text', system-ui, sans-serif;
  --app-font-display: 'Unbounded', 'Golos Text', sans-serif;
  --app-font-google: 'Google Sans', var(--app-font-body);

  /* Цены и выбранные пилюли — от цветов темы, чтобы работало в любой теме Telegram */
  --app-price-color: var(--app-link-color);
  --app-selected-bg: color-mix(in srgb, var(--app-link-color) 16%, var(--app-bg-color));
  /* Текст на --app-selected-bg: чистый link (синий Telegram #2481cc) на голубой подложке даёт ~3.4:1,
     подмес основного текста — ~5.5:1 в светлой теме, в тёмной оттенок почти не меняется */
  --app-on-selected-color: color-mix(in srgb, var(--app-link-color) 78%, var(--app-text-color));
  /* Нейтральная заливка (выбранный сегмент, бейджи статуса). Разделитель для заливки не годится:
     он рассчитан на тонкую линию и у части клиентов светлый даже в тёмной теме */
  --app-fill-color: color-mix(in srgb, var(--app-text-color) 10%, var(--app-secondary-bg-color));
  /* Переключатель как системный: серая дорожка из текста читается на любом фоне. Включённый
     бегунок — цвета текста кнопки: Telegram сам держит его контраст с цветом кнопки (BUG-47).
     Половина текста — 3,3–3,9:1 к фону в светлой (WCAG 1.4.11 требует 3:1; 30% давали 1,96:1). Выключенный
     бегунок цвета фона, а не белый: в тёмных iOS и Android поверхность разделов светлее фона, дорожка
     поверх неё светлеет, и белый бегунок падал до 2,96:1. Цвет фона уходит от дорожки в ту же сторону,
     что и поверхность, поэтому доля текста ограничена только снизу (BUG-80) */
  --app-switch-track-color: color-mix(in srgb, var(--app-text-color) 50%, transparent);
  --app-switch-thumb-color: var(--app-bg-color);
  /* Второстепенный текст (весь, не только на secondary): hint Telegram по умолчанию (#999)
     даёт 2.85:1 на белом и ~2.5:1 на #efeff4, подмес основного текста поднимает до AA.
     hint остаётся для нетекстовых мелочей: разделители, подложки */
  --app-muted-text-color: color-mix(in srgb, var(--app-hint-color) 65%, var(--app-text-color));
  /* Бледный янтарь архива. Подмес основного текста держит контраст на всех подложках архива (голый
     фон, 12% поверх фона и второго фона, сплошная 18%): худшее — 4.8:1 у текста сайта #111827, 5.3:1 у
     чёрного Telegram и в тёмной; сам янтарь (#d97706) на белом — 3.2:1. При 75% сайт давал 4.0–4.3 */
  --app-archive-accent: #d97706;
  --app-archive-text-color: color-mix(in srgb, var(--app-archive-accent) 65%, var(--app-text-color));
  --app-archive-bg: color-mix(in srgb, var(--app-archive-accent) 12%, transparent);
  /* Поверх фото прозрачная подложка теряется — непрозрачная от фона темы */
  --app-archive-solid-bg: color-mix(in srgb, var(--app-archive-accent) 18%, var(--app-bg-color));
  /* Янтарь рубрики «Свежее на ThorGash» (social/daily/defaults.json): капсула «Блог» и главы выпуска */
  --app-episode-accent: #eab921;
  /* Текст и подложка ошибки: голый destructive на фоне 4.0–4.2:1, на розовой подложке 3.7:1;
     подмес основного текста даёт ≥5.3:1 в обеих темах, оттенок ошибки остаётся */
  --app-error-text-color: color-mix(in srgb, var(--app-destructive-color) 70%, var(--app-text-color));
  --app-error-bg: color-mix(in srgb, var(--app-destructive-color) 10%, var(--app-bg-color));
  /* «Куплю»: белый на #ff9800 давал 2.16:1; оранжевый в фоне и в тексте — от 5.8:1 до 8.3:1 */
  --app-warning-bg: color-mix(in srgb, #ff9800 22%, var(--app-bg-color));
  --app-warning-text-color: color-mix(in srgb, #ff9800 45%, var(--app-text-color));
  /* Бейдж поверх фото — как в ките: белая плашка и тёмный текст в обеих темах (фото от темы не
     зависит); 8% просвета не опускают пару ниже 15:1 */
  --app-photo-badge-bg: rgb(255 255 255 / 92%);
  --app-photo-badge-text: #0f1419;
  /* Тёмная подложка поверх фото («+N» на миниатюре), одна в обеих темах по той же причине.
     В макете 56%, но на белом снимке белый текст давал бы 4.1:1; 60% — 4.66:1 в худшем случае */
  --app-photo-scrim-bg: rgb(17 24 39 / 60%);
  --app-photo-scrim-text: #ffffff;
  /* Кромка того же бейджа на поверхности карточки без фото: цвет текста с прозрачностью — в светлой
     теме серая линия на белом, в тёмной светлая на белом и не видна, то есть тёмная не меняется */
  --app-surface-badge-border: color-mix(in srgb, var(--app-text-color) 20%, transparent);

  /* Стекло — только на управлении поверх контента (поиск, категории, нижняя панель, кнопки на фото).
     Как капсулы Telegram (iOS 26): чуть светлее фона экрана (7 % текста), светлая кромка сверху и
     мягкая тень, как в макете HomeC-Mobile, — капсула читается над любым фото. Линзу у края добавляет
     utils/liquidGlass.ts */
  --app-glass-bg: color-mix(in srgb, color-mix(in srgb, var(--app-text-color) 7%, var(--app-bg-color)) 74%, transparent);
  --app-glass-border: color-mix(in srgb, var(--app-text-color) 8%, transparent);
  --app-glass-blur: blur(20px) saturate(180%) brightness(1.06);
  --app-glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 8px 24px rgba(17, 24, 39, 0.1);
  /* Полоса десктопа (вариант D, j 23.10): лёгкий серо-голубой оттенок и тонкое кольцо — белая заливка
     с белым ободком на белом фоне краёв не имела. Блик-ободок и тень — полоса висит над лентой */
  --app-strip-tint: 246 247 249;
  /* Над тёмным фото (sRGB ~40) тёмный текст держит 4,5:1 от ~43 % этого оттенка — у D плотнее, ~72 % */
  --app-strip-fill-top: 76%;
  --app-strip-fill-bottom: 68%;
  --app-strip-shade: 17 24 39;
  --app-strip-highlight: 0.75;
  --app-strip-float: 0.24;
  --app-strip-ring: 0 0 0 1px rgb(15 23 42 / 0.08);
  --app-strip-rim-hi: rgba(255, 255, 255, 0.95);
  --app-strip-rim-lo: rgba(255, 255, 255, 0.35);
  --app-strip-rim-end: rgba(255, 255, 255, 0.6);

  /* Type scale (ratio 1.25) */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.625rem;

  /* Spacing scale */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;

  /* Layout */
  --app-content-max-width: 1200px;
  --app-detail-max-width: 680px;
  --app-content-padding: 16px;
  /* Нижняя панель телефона — одна высота на панель и на место под ней у экранов и ленты главной.
     Размер Б (решение j 23.10): легче прежних 64 px, вкладки 44 — не крупнее кнопок деталки (50 px) */
  --bottom-nav-height: 56px;
}

:root[data-desktop-theme='light'] {
  color-scheme: light;

  --app-bg-color: var(--desktop-light-bg-color);
  --app-secondary-bg-color: var(--desktop-light-secondary-bg-color);
  --app-section-bg-color: var(--desktop-light-section-bg-color);
  --app-header-bg-color: var(--desktop-light-header-bg-color);
  --app-bottom-bar-bg-color: var(--desktop-light-bottom-bar-bg-color);
  --app-text-color: var(--desktop-light-text-color);
  --app-hint-color: var(--desktop-light-hint-color);
  --app-link-color: var(--desktop-light-link-color);
  --app-subtitle-color: var(--desktop-light-subtitle-color);
  --app-section-header-color: var(--desktop-light-section-header-color);
  --app-accent-text-color: var(--desktop-light-accent-text-color);
  --app-destructive-color: var(--desktop-light-destructive-color);
  --app-button-color: var(--desktop-light-button-color);
  --app-button-text-color: var(--desktop-light-button-text-color);
  --app-separator-color: var(--desktop-light-separator-color);
}

:root[data-desktop-theme='dark'] {
  color-scheme: dark;

  --app-bg-color: var(--desktop-dark-bg-color);
  --app-secondary-bg-color: var(--desktop-dark-secondary-bg-color);
  --app-section-bg-color: var(--desktop-dark-section-bg-color);
  --app-header-bg-color: var(--desktop-dark-header-bg-color);
  --app-bottom-bar-bg-color: var(--desktop-dark-bottom-bar-bg-color);
  --app-text-color: var(--desktop-dark-text-color);
  --app-hint-color: var(--desktop-dark-hint-color);
  --app-link-color: var(--desktop-dark-link-color);
  --app-subtitle-color: var(--desktop-dark-subtitle-color);
  --app-section-header-color: var(--desktop-dark-section-header-color);
  --app-accent-text-color: var(--desktop-dark-accent-text-color);
  --app-destructive-color: var(--desktop-dark-destructive-color);
  --app-button-color: var(--desktop-dark-button-color);
  --app-button-text-color: var(--desktop-dark-button-text-color);
  --app-separator-color: var(--desktop-dark-separator-color);
  /* primary — цвет текста, рамок и фокуса (шапка, категории). Тёмная заливка кнопки на графите — 2,3–3,2:1,
     поэтому здесь он светлый, как ссылка (6,9:1); заливки берут --app-button-color (BUG-52) */
  --app-primary-color: var(--app-link-color);
  /* Палитра веба — из кита, контраст уже проверен (подпись 7.1:1, выбранный чип 5.9:1): подмес
     основного текста, нужный под цвета Telegram, здесь только сдвигал оттенки от макета */
  --app-muted-text-color: var(--app-hint-color);
  --app-selected-bg: var(--desktop-dark-selected-bg);
  --app-on-selected-color: var(--app-link-color);
  /* Кромка стекла заметнее, чем 8 % текста в светлой: на графите тоньше не видно. Литерал, а не
     color-mix — блок без color-mix ниже слабее этого селектора и не подменил бы значение */
  --app-glass-border: rgba(243, 246, 251, 0.12);
  --app-strip-tint: 32 39 48;
  /* Над светлым фото (sRGB ~220) светлый текст держит 4,5:1 от ~59 % этого графита — у D плотнее, ~70 % */
  --app-strip-fill-top: 74%;
  --app-strip-fill-bottom: 66%;
  --app-strip-shade: 0 0 0;
  --app-strip-highlight: 0.16;
  --app-strip-float: 0.6;
  --app-strip-ring: inset 0 0 0 1px rgb(255 255 255 / 0.16);
  --app-strip-rim-hi: rgba(255, 255, 255, 0.34);
  --app-strip-rim-lo: rgba(255, 255, 255, 0.1);
  --app-strip-rim-end: rgba(255, 255, 255, 0.2);

  --app-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.28), 0 1px 3px rgba(0, 0, 0, 0.34);
  --app-shadow-md: 0 8px 18px rgba(0, 0, 0, 0.22), 0 3px 8px rgba(0, 0, 0, 0.3);
  --app-shadow-lg: 0 18px 30px rgba(0, 0, 0, 0.3), 0 8px 14px rgba(0, 0, 0, 0.24);
  --app-shadow-xl: 0 28px 48px rgba(0, 0, 0, 0.32), 0 10px 18px rgba(0, 0, 0, 0.26);
}

/* WebView без color-mix (iOS < 16.2): иначе стекло и выбранная пилюля становятся прозрачными */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  :root {
    --app-separator-color: var(--tg-theme-section-separator-color, var(--app-hint-color));
    --app-glass-bg: var(--app-secondary-bg-color);
    --app-glass-border: var(--app-separator-color);
    /* Фон страницы, а не secondary: выбранное чаще лежит на secondary-поверхностях и слилось бы */
    --app-selected-bg: var(--app-bg-color);
    --app-fill-color: var(--app-bg-color);
    /* Голый hint — 2,85:1 на белом. Дорожка цвета текста с бегунком цвета фона из :root контрастна
       в любой теме (BUG-80) */
    --app-switch-track-color: var(--app-text-color);
    --app-on-selected-color: var(--app-link-color);
    /* Ниже AA, но ошибка остаётся ошибкой по цвету — важнее, чем контраст без оттенка */
    --app-error-text-color: var(--app-destructive-color);
    --app-error-bg: var(--app-secondary-bg-color);
    --app-warning-bg: var(--app-bg-color);
    --app-warning-text-color: var(--app-text-color);
    /* Кромка бейджа на текстовой карточке: в светлой теме разделитель заметен на плашке (без
       section_separator_color это hint — 2.6:1). Тёмная тема тут меняется: тёмный разделитель
       сливается с плашкой, а hint старого клиента — серая линия по краю бейджа. Без color-mix
       цвета, видного только в светлой теме, не собрать */
    --app-surface-badge-border: var(--app-separator-color);
    /* Цвет текста, а не hint: голый hint на secondary — около 2.5:1, ровно то, от чего
       защищает токен. Иерархия без подмеса теряется, но подпись читается (AA) */
    --app-muted-text-color: var(--app-text-color);
    /* Без подмеса янтарь не собрать под неизвестную тему: метку держит слово «Архив» */
    --app-archive-text-color: var(--app-text-color);
    --app-archive-bg: var(--app-secondary-bg-color);
    --app-archive-solid-bg: var(--app-secondary-bg-color);
  }
}

@media (min-width: 640px) {
  :root {
    --app-content-padding: 24px;
  }
}

@media (min-width: 1024px) {
  :root {
    --app-content-padding: 32px;
  }
}

* { box-sizing: border-box; }
html { scrollbar-gutter: stable; }
body { margin: 0; background: var(--app-bg-color); color: var(--app-text-color); font-family: var(--app-font-body); -webkit-font-smoothing: antialiased; }
a { color: var(--app-link-color); text-underline-offset: 4px; }
a:focus-visible { outline: 2px solid var(--app-link-color); outline-offset: 5px; border-radius: 2px; }
.blog-header { max-width: var(--app-content-max-width); margin: auto; padding: 24px var(--app-content-padding); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.blog-brand { font-family: var(--app-font-display); font-weight: 600; font-size: 22px; color: var(--app-text-color); text-decoration: none; }
.blog-catalog { font-size: 14px; color: var(--app-muted-text-color); text-decoration: none; padding: 12px 0; }
.blog-main, .blog-footer { width: min(var(--app-detail-max-width), calc(100% - 2 * var(--app-content-padding))); margin: auto; }
.blog-main { padding: 48px 0 64px; min-height: 65vh; }
h1, h2, h3 { font-family: var(--app-font-heading); font-weight: 600; letter-spacing: -0.025em; text-wrap: balance; }
h1 { font-size: clamp(30px, 5vw, 44px); line-height: 1.14; margin: 0 0 32px; }
h2 { font-size: 26px; line-height: 1.25; margin: 0 0 16px; }
h3 { font-size: 22px; line-height: 1.3; margin: 0 0 16px; }
p { margin: 0 0 24px; line-height: 1.75; font-size: 18px; }
.blog-list { display: grid; gap: 24px; }
.blog-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 24px; }
.blog-article, .blog-list { overflow-wrap: anywhere; }
.blog-article .blog-card + .blog-card { margin-top: 24px; }
.blog-article ul, .blog-article ol { margin: 0 0 24px; padding-left: 24px; line-height: 1.75; font-size: 18px; }
.blog-article li + li { margin-top: 8px; }
.blog-eyebrow { color: var(--app-muted-text-color); font-size: 13px; line-height: 1.5; margin-bottom: 16px; }
.blog-card { background: var(--app-section-bg-color); border: 1px solid var(--app-separator-color); border-radius: var(--app-border-radius-xl); padding: 28px; }
.blog-card h2 a { color: var(--app-text-color); text-decoration: none; }
.blog-card h2 a:hover, .blog-catalog:hover { text-decoration: underline; }
.blog-card p:not(.blog-eyebrow) { color: var(--app-muted-text-color); }
.blog-read { display: inline-block; padding: 8px 0; font-size: 15px; font-weight: 500; }
.blog-breadcrumb { margin-bottom: 32px; font-size: 14px; }
.blog-breadcrumb a { color: var(--app-muted-text-color); text-decoration: none; }
.blog-lead { font-size: 21px; line-height: 1.6; font-weight: 500; }
.blog-footer { display: flex; flex-wrap: wrap; gap: 24px; padding: 24px 0 40px; border-top: 1px solid var(--app-separator-color); }
.blog-footer a { color: var(--app-muted-text-color); font-size: 13px; padding: 8px 0; text-decoration: none; }
.blog-footer a:hover { text-decoration: underline; }
.blog-skip { position: absolute; left: 16px; top: -100px; padding: 12px; background: var(--app-bg-color); z-index: 1; }
.blog-skip:focus { top: 12px; }
/* Выпуск «Свежее на ThorGash» (FEAT-78): ролик выше сгиба — так Google считает страницу видеостраницей.
   Янтарь — цвет рубрики (social/daily/defaults.json, style.palette.yellow) */
.blog-episode { --episode-accent: var(--app-episode-accent); }
.blog-episode h1 { margin-bottom: 24px; }
.blog-player { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 28px; align-items: start; margin-bottom: 36px; }
.blog-video { display: block; width: 100%; height: auto; max-height: 72vh; aspect-ratio: 9 / 16; object-fit: contain; background: #000; border-radius: var(--app-border-radius-xl); }
.blog-article .blog-chapters { list-style: none; padding: 0; margin: 0; font-size: 16px; line-height: 1.4; }
.blog-article .blog-chapters li + li { margin-top: 0; border-top: 1px solid var(--app-separator-color); }
.blog-chapters a { display: flex; gap: 14px; align-items: baseline; padding: 11px 0; color: var(--app-text-color); text-decoration: none; }
.blog-chapters a[aria-current] { font-weight: 600; }
.blog-chapter-time { flex: none; min-width: 3.2em; font-family: var(--app-font-display); font-size: 13px; font-variant-numeric: tabular-nums; color: var(--app-muted-text-color); border-bottom: 2px solid transparent; }
.blog-chapters a[aria-current] .blog-chapter-time { color: var(--app-text-color); border-bottom-color: var(--episode-accent); }
.blog-cards { display: grid; gap: 24px; }
.blog-episode .blog-cards { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
.blog-article .blog-cards .blog-card + .blog-card { margin-top: 0; }
.blog-episode .blog-card { padding: 0 0 20px; overflow: hidden; display: flex; flex-direction: column; }
.blog-episode .blog-card > :not(.blog-card-photo) { margin-left: 20px; margin-right: 20px; }
.blog-episode .blog-card h3 { font-size: 18px; margin-top: 16px; margin-bottom: 8px; }
.blog-episode .blog-card p { font-size: 16px; margin-bottom: 12px; }
.blog-card-photo { display: block; aspect-ratio: 4 / 3; background: var(--app-separator-color); }
.blog-card-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.blog-card-sold .blog-card-photo img { filter: grayscale(1); opacity: 0.6; }
.blog-card-status { font-weight: 600; }
@media (hover: hover) {
  .blog-chapters a:hover .blog-chapter-time { color: var(--app-text-color); }
}
@media (max-width: 639px) {
  .blog-header { padding-top: 16px; padding-bottom: 16px; }
  .blog-brand { font-size: 20px; }
  .blog-main { padding-top: 28px; padding-bottom: 40px; }
  .blog-card { padding: 24px 20px; }
  p, .blog-article ul, .blog-article ol { font-size: 17px; }
  .blog-lead { font-size: 20px; }
  .blog-player { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .blog-video { max-height: 78vh; margin: 0 auto; width: auto; max-width: 100%; }
  .blog-episode .blog-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .blog-episode .blog-card > :not(.blog-card-photo) { margin-left: 14px; margin-right: 14px; }
  .blog-episode .blog-card h3 { font-size: 16px; }
}