/* ==========================================================================
   Цифровые расследования — тема Ghost
   Свёрстано по Figma HoycUWQbjKotokiF2ODnas, фрейм 1:2 «Главная».
   Токены соответствуют figma-export/css/tokens.css.
   Макет существует только в 1920x1080 — все брейкпойнты ниже это адаптация.
   ========================================================================== */

/* ---------- Шрифты (self-hosted, Manrope variable) ---------- */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('../fonts/manrope-cyrillic.woff2') format('woff2');
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200 800;
    font-display: swap;
    src: url('../fonts/manrope-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;
}

/* ---------- Токены ---------- */
:root {
    --ink:            #242b51;
    --muted:          #898989;
    --on-dark:        #e9eef9;
    --purple:         #a273f4;
    --blue:           #087efc;

    --surface-50:     rgba(247, 249, 253, 0.5);
    --surface-70:     rgba(247, 249, 253, 0.7);
    --surface-80:     rgba(247, 249, 253, 0.8);
    --panel-80:       rgba(229, 236, 249, 0.8);
    --chip:           #e9eef9;

    --shadow-button:  -2px 4px 5px 0 #94e6f9;
    --shadow-panel:   -2px 4px 3px 0 rgba(11, 229, 246, 0.5);
    --shadow-icon:    0 4px 4px rgba(173, 203, 242, 0.85);
    --shadow-text:    0 4px 4px var(--on-dark);

    --radius:         20px;

    --gutter:         clamp(20px, 5.05vw, 97px);
    --content-max:    880px;   /* ширина плашки выпуска в макете — 876px */
    /* от неё считается левая граница портрета: он не должен заходить в текст */
    --content-w:      880px;

    --header-h:       clamp(84px, 8vw, 125px);
}

/* ---------- Сброс и база ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-weight: 500;
    color: var(--ink);
    background: #f4f8fd;
    line-height: 1.45;
    overflow-x: hidden;
}

img, svg { max-width: 100%; }
img { height: auto; display: block; }

a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul { margin: 0; }
ul { list-style: none; padding: 0; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }

:focus-visible {
    outline: 3px solid var(--purple);
    outline-offset: 3px;
    border-radius: 4px;
}

.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Шапка
   В макете шапка лежит поверх героя и не имеет своей подложки.
   ========================================================================== */
.site-header {
    position: absolute;
    inset: 0 0 auto 0;
    z-index: 30;
    padding-top: clamp(16px, 2.6vw, 28px);
}

.site-header__inner {
    display: flex;
    align-items: center;
    gap: clamp(16px, 2vw, 32px);
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.brand { flex: 0 0 auto; }
.brand__img {
    width: clamp(180px, 15.7vw, 301px);   /* в макете 301px */
    height: auto;
}

/* --- основная навигация --- */
.nav {
    display: flex;
    align-items: center;
    gap: clamp(16px, 2vw, 40px);
    margin-left: auto;
}

.nav__list {
    display: flex;
    align-items: center;
    gap: clamp(20px, 3.5vw, 64px);
}

.nav__item { position: relative; }

.nav__link {
    font-weight: 700;
    font-size: clamp(15px, 1vw, 18px);
    color: var(--ink);
    text-shadow: var(--shadow-text);
    white-space: nowrap;
    transition: color .18s ease;
}
.nav__link:hover { color: var(--purple); }

/* фиолетовая точка под активным пунктом (Ellipse 4 в макете) */
.nav__item.is-active::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -14px;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    border-radius: 50%;
    background: var(--purple);
}

.nav__cta-list { display: flex; gap: 12px; }

/* --- кнопки-иконки справа --- */
.site-header__actions {
    display: flex;
    align-items: center;
    gap: clamp(10px, 1.8vw, 34px);
    flex: 0 0 auto;
}

.icon-btn {
    display: grid;
    place-items: center;
    width: clamp(46px, 3.6vw, 69px);
    height: clamp(46px, 3.6vw, 69px);
    border-radius: 50%;
    background: var(--chip);
    color: var(--ink);
    box-shadow: var(--shadow-icon);
    transition: transform .18s ease, background .18s ease;
}
.icon-btn:hover { transform: translateY(-2px); background: #fff; }

.icon-btn .icon { width: 42%; height: auto; }
.icon-btn--menu .icon { width: 38%; }

/* Бургер нужен только там, где инлайн-меню свёрнуто. На десктопе меню видно,
   поэтому кнопку прячем (в макете она есть, но там она дублирует навигацию). */
.icon-btn--menu { display: none; }

/* ==========================================================================
   Кнопки
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    border-radius: var(--radius);
    font-weight: 600;
    line-height: 1.2;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

/* пилюля «Свяжитесь с нами» в шапке */
.btn--pill {
    padding: 6px 22px;
    min-height: 31px;
    background: var(--purple);
    color: var(--on-dark);
    font-weight: 700;
    font-size: clamp(14px, 0.95vw, 18px);
    white-space: nowrap;
}
.btn--pill:hover { background: #8f5cf0; transform: translateY(-1px); }

/* «Смотреть последний выпуск» */
.btn--primary {
    padding: 16px clamp(24px, 2.2vw, 43px);
    min-height: 72px;
    background: var(--surface-70);
    box-shadow: var(--shadow-button);
    font-size: clamp(16px, 1.05vw, 20px);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.btn--primary:hover { background: var(--surface-80); transform: translateY(-2px); }

.btn__play {
    display: grid;
    place-items: center;
    width: clamp(34px, 2.4vw, 45px);
    height: clamp(34px, 2.4vw, 45px);
    flex: 0 0 auto;
    color: var(--ink);
}
/* треугольник в макете повёрнут на 90° — вершиной вправо */
.btn__play .icon--play { width: 72%; transform: rotate(90deg); }

/* «Все выпуски» */
.btn--ghost {
    padding: 16px clamp(20px, 1.8vw, 34px);
    min-height: 72px;
    background: var(--surface-50);
    font-size: clamp(16px, 1.05vw, 20px);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
.btn--ghost:hover { background: var(--surface-70); transform: translateY(-2px); }

.icon--arrow { width: 33px; height: 33px; flex: 0 0 auto; color: #000; }

/* ==========================================================================
   Герой
   ========================================================================== */
.hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 100svh;
    padding: calc(var(--header-h) + clamp(24px, 4vh, 72px)) 0 clamp(40px, 6vh, 88px);
    overflow: hidden;
    isolation: isolate;
}

/* Фон — отдельный слой, портрет — отдельный.
   Сводить их в один кадр нельзя: при обрезке под разные пропорции ведущая
   уезжала влево и оказывалась под тёмным заголовком, оба тёмные и сливались. */
.hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image: url('../images/bg-wide-1920.jpg');
    background-size: cover;
    /* контент прижат влево, поэтому обрезаем правый край облака кубов */
    background-position: left top;
}

/* Портрет живёт СТРОГО правее колонки с текстом: слева бокс начинается там,
   где кончается контент. object-fit: contain вписывает ведущую в это окно,
   поэтому на любом экране она сама уменьшается, но под заголовок не заходит.
   Нижние 14% окна уходят за границу секции — так же, как кадр обрезан в макете. */
.hero__host {
    position: absolute;
    /* Левая граница = правый край колонки с текстом. Правило одно и то же на
       всех ширинах, поэтому под заголовок ведущая не заходит никогда. */
    left: calc(var(--gutter) + var(--content-w) + 24px);
    right: 0;
    /* Отсчёт от блока контента, а не от секции: на высоких экранах контент
       центрируется, и портрет должен ехать вместе с ним, а не падать вниз.
       В макете верх ведущей совпадает с верхом текста, а её высота — 171%
       высоты текстового блока; низ обрезается границей секции. */
    top: 0;
    height: 171%;
    z-index: 0;
    pointer-events: none;
}
.hero__host img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: right bottom;
}

.hero__inner {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.hero__content {
    position: relative;
    z-index: 1;
    max-width: var(--content-w);
}

/* --- вордмарк: три строки контуров, не текст --- */
.wordmark {
    width: min(100%, 848px);
    color: #000;
}
.wordmark__line { display: block; height: auto; }
/* пропорции и просветы взяты из макета (блок 848.55 шириной) */
.wordmark__line--1 { width: 68.73%; }
.wordmark__line--2 { width: 100%;   margin-top: 0.81%; }
.wordmark__line--3 { width: 68.15%; margin-top: 1.20%; }

.hero__lead {
    max-width: 527px;                      /* как в макете */
    margin-top: clamp(20px, 2.9vh, 43px);
    font-weight: 500;
    font-size: clamp(16px, 1.25vw, 24px);
    line-height: 1.28;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(12px, 1.8vw, 34px);
    margin-top: clamp(24px, 4.7vh, 51px);
}

/* ==========================================================================
   Плашка последнего выпуска
   ========================================================================== */
.episode-card {
    display: grid;
    grid-template-columns: minmax(0, 425fr) minmax(0, 451fr);  /* пропорции макета */
    align-items: stretch;
    margin-top: clamp(20px, 2.6vh, 28px);
    background: var(--panel-80);
    border-radius: var(--radius);
    box-shadow: var(--shadow-panel);
    overflow: hidden;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.episode-card__media {
    display: block;
    overflow: hidden;
    background: #0d1b2a;
}
.episode-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
.episode-card:hover .episode-card__media img { transform: scale(1.04); }

.episode-card__body {
    padding: clamp(20px, 1.7vw, 31px) clamp(20px, 1.8vw, 34px) clamp(22px, 2vw, 38px);
    display: flex;
    flex-direction: column;
    gap: clamp(8px, 0.9vw, 12px);
}

.badge {
    align-self: flex-start;
    padding: 5px 14px;
    border-radius: var(--radius);
    background: var(--purple);
    color: var(--on-dark);
    font-weight: 800;
    font-size: clamp(12px, 0.83vw, 16px);
    line-height: 1.35;
    text-transform: uppercase;
    letter-spacing: 0.01em;
}

.episode-card__title {
    font-weight: 600;
    font-size: clamp(20px, 1.67vw, 32px);
    line-height: 1.06;
    color: var(--ink);
}
.episode-card__title a { transition: color .18s ease; }
.episode-card__title a:hover { color: var(--purple); }

.episode-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    color: var(--muted);
    font-weight: 600;
    font-size: clamp(12px, 0.68vw, 13px);
    line-height: 1.7;
}
.meta-item { display: inline-flex; align-items: center; gap: 6px; }
.icon--meta { width: 13px; height: 13px; flex: 0 0 auto; }

.episode-card__excerpt {
    font-weight: 500;
    font-size: clamp(14px, 1.04vw, 20px);
    line-height: 1.15;
    color: var(--ink);
}

.episode-card--empty {
    display: block;
    padding: clamp(24px, 2vw, 38px);
    font-size: 18px;
    color: var(--ink);
}

/* ==========================================================================
   Подвал (в макете отсутствует — собран на тех же токенах)
   ========================================================================== */
.site-footer {
    position: relative;
    background: linear-gradient(180deg, #eef4fc 0%, #e3ecf9 100%);
    color: var(--ink);
}

.site-footer__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
    gap: clamp(28px, 3vw, 56px);
    max-width: 1920px;
    margin: 0 auto;
    padding: clamp(40px, 5vw, 80px) var(--gutter) clamp(28px, 3vw, 48px);
}

/* В подвале тот же вордмарк, что и в герое, но мельче и цветом текста */
.brand--footer { display: block; max-width: 320px; }
.brand--footer .wordmark { width: 100%; color: var(--ink); }
.brand--footer:hover .wordmark { color: var(--purple); }

.site-footer__tagline {
    max-width: 420px;
    margin-top: 18px;
    color: var(--ink);
    font-size: 16px;
    line-height: 1.45;
}

.site-footer__heading {
    margin-bottom: 16px;
    font-weight: 800;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}

.site-footer__nav li,
.site-footer__contact li { margin-bottom: 10px; }

.site-footer__nav a,
.site-footer__contact a {
    font-weight: 600;
    font-size: 18px;
    transition: color .18s ease;
}
.site-footer__nav a:hover,
.site-footer__contact a:hover { color: var(--purple); }

.site-footer__bottom {
    border-top: 1px solid rgba(36, 43, 81, 0.12);
}
.site-footer__bottom p {
    max-width: 1920px;
    margin: 0 auto;
    padding: 22px var(--gutter);
    font-size: 15px;
    color: var(--muted);
}

/* ==========================================================================
   Адаптив
   ========================================================================== */

/* Портрет начинает мешать колонке с контентом раньше, чем ломается сетка */
@media (max-width: 1400px) {
    /* Колонка сужается — вместе с ней сдвигается и левая граница портрета,
       так что зазор до заголовка сохраняется. */
    .hero { --content-w: 720px; }
}

@media (max-width: 1180px) {
    /* здесь инлайн-меню сворачивается в панель, поэтому бургер возвращаем */
    .icon-btn--menu { display: grid; }

    /* инлайн-меню прячем, остаётся бургер */
    .nav {
        position: fixed;
        inset: 0 0 auto 0;
        z-index: 40;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin: 0;
        padding: calc(var(--header-h) + 16px) var(--gutter) 32px;
        background: rgba(244, 248, 253, 0.97);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        box-shadow: 0 18px 40px rgba(36, 43, 81, 0.14);
        transform: translateY(-100%);
        opacity: 0;
        visibility: hidden;
        transition: transform .28s ease, opacity .28s ease, visibility .28s;
    }
    .nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; }

    /* Панель лежит внутри шапки, поэтому логотип и кнопки нужно поднять
       над ней — иначе бургер закрыт панелью и меню не закрыть. */
    .brand,
    .site-header__actions { position: relative; z-index: 41; }

    .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
    .nav__item { border-bottom: 1px solid rgba(36, 43, 81, 0.1); }
    .nav__link { display: block; padding: 16px 0; font-size: 20px; text-shadow: none; }
    .nav__item.is-active::after { left: auto; right: 4px; bottom: 50%; margin: 0 0 -5px; }

    .nav__cta-list { margin-top: 22px; }
    .btn--pill { width: 100%; justify-content: center; min-height: 52px; font-size: 17px; }
}

/* Ниже 1180 свободного места справа от текста уже не остаётся: колонка
   занимает всю ширину. Портрет уходит в правый нижний угол — то есть ПОД
   карточку выпуска, но не под заголовок, который стоит вверху слева. */
@media (max-width: 1180px) {
    .hero { --content-w: 100%; }
    .hero__host {
        left: auto;
        right: 0;
        top: auto;
        bottom: 0;
        /* высота подобрана так, чтобы верх портрета оказался НИЖЕ лид-абзаца:
           тёмный текст и тёмный жакет не должны накладываться */
        width: min(52%, 430px);
        height: 56%;
        opacity: 0.55;
    }
}

@media (max-width: 1024px) {
    .hero { min-height: 0; }
    .wordmark { width: min(100%, 620px); }
    .hero__bg { background-image: url('../images/bg-wide-1280.jpg'); }
}

@media (max-width: 900px) {
    .hero__bg { background-image: url('../images/bg-tall-1200.jpg'); background-position: center top; }
}

@media (max-width: 760px) {
    /* На телефоне высокий кадр обрезается по бокам — смещаем к светлой
       левой части и кладём лёгкую вуаль, чтобы тёмный текст читался. */
    .hero__bg { background-image: url('../images/bg-tall-800.jpg'); background-position: 32% top; }
    .hero__host { right: 0; width: 84%; height: 52%; opacity: 0.22; }
    .hero::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        background: linear-gradient(180deg,
            rgba(247, 250, 254, 0.55) 0%,
            rgba(247, 250, 254, 0.28) 40%,
            rgba(247, 250, 254, 0.60) 100%);
    }

    .hero { padding-bottom: 48px; }
    .hero__lead { font-size: 17px; }

    .btn--primary, .btn--ghost {
        width: 100%;
        justify-content: flex-start;
        min-height: 62px;
    }
    .btn--ghost { justify-content: space-between; }

    .episode-card { grid-template-columns: 1fr; }
    .episode-card__media { aspect-ratio: 16 / 10; }

    .site-footer__inner { grid-template-columns: 1fr; }
}

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

/* ==========================================================================
   Внутренние страницы
   Опорные шаблоны, чтобы ссылки из шапки и героя вели на живые страницы.
   Оформлены на тех же токенах; детальная вёрстка по фреймам 9:61 / 10:194 / 48:2
   в этот заход не делалась.
   ========================================================================== */
.inner-page {
    position: relative;
    min-height: 60vh;
    padding-bottom: clamp(48px, 6vw, 96px);
    background: linear-gradient(180deg, #eaf2fb 0%, #f4f8fd 45%);
}

.page-head {
    padding: calc(var(--header-h) + clamp(24px, 4vw, 56px)) 0 clamp(20px, 2.4vw, 34px);
}
.page-head__inner,
.page-body {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.crumbs {
    display: flex;
    flex-wrap: wrap;          /* длинный заголовок переносим, а не ломаем строку */
    align-items: center;
    gap: 4px 10px;
    color: var(--muted);
    font-size: clamp(15px, 0.95vw, 18px);
}
/* текущая страница может быть длинной — обрезаем многоточием в одну строку */
.crumbs [aria-current] {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.crumbs a { transition: color .18s ease; }
.crumbs a:hover { color: var(--purple); }
.crumbs__sep { color: var(--muted); }

.page-head__title {
    margin-top: clamp(14px, 1.5vw, 26px);
    font-weight: 800;
    font-size: clamp(32px, 3.4vw, 64px);
    line-height: 1.12;
    color: var(--ink);
}

/* --- сетка выпусков (перенесена в блок «Все выпуски») --- */

/* ==========================================================================
   Страница одиночного поста — универсальная, одна на все публикации.
   Не копия фрейма 48:2: там нарисован конкретный экран с плеером.
   Верх на общей подложке, тело на светлом холсте — как на других страницах.
   ========================================================================== */
.post__inner {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 var(--gutter);
}

/* --- верхний блок на подложке --- */
.post__head {
    position: relative;
    isolation: isolate;
    padding: calc(var(--header-h) + clamp(20px, 3vh, 44px)) 0 clamp(28px, 3vw, 56px);
    overflow: hidden;
}

.post__art {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: url('../images/bg-wide-1920.jpg');
    background-size: cover;
    background-position: left top;
}

.post__title {
    max-width: 16em;
    margin-top: clamp(12px, 1.4vw, 24px);
    font-weight: 800;
    font-size: clamp(28px, 2.7vw, 52px);
    line-height: 1.1;
    color: var(--ink);
}

.post__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px clamp(18px, 1.8vw, 34px);
    margin-top: clamp(14px, 1.4vw, 24px);
    color: var(--muted);
    font-weight: 600;
    font-size: clamp(14px, 1vw, 18px);
}
.post__meta .icon--meta { width: 1.05em; height: 1.05em; }

.post__tags { margin-top: clamp(14px, 1.3vw, 22px); }
/* в шапке поста чипы мельче, чем в фильтре выпусков */
.post__tags .chip {
    min-height: clamp(32px, 2.1vw, 40px);
    padding: 0 clamp(12px, 1vw, 18px);
    font-size: clamp(13px, 0.94vw, 18px);
}

.post__lead {
    max-width: 780px;
    margin-top: clamp(16px, 1.5vw, 26px);
    font-weight: 500;
    font-size: clamp(16px, 1.15vw, 22px);
    line-height: 1.35;
    color: var(--ink);
}

.post__cover {
    max-width: 1100px;
    margin: clamp(22px, 2.4vw, 44px) 0 0;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-panel);
}
/* Кадрируем под 16:9: шаблон универсальный, обложки грузят разные,
   и картинка с нестандартными пропорциями не должна распирать страницу. */
.post__cover img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
.post__cover figcaption {
    padding: 10px 4px 0;
    color: var(--muted);
    font-size: 15px;
}

/* --- тело поста на светлом холсте --- */
.post__body {
    padding: clamp(32px, 4vw, 72px) 0 clamp(40px, 5vw, 88px);
    background: linear-gradient(180deg, #eef4fc 0%, #f4f8fd 40%);
}

.post__content {
    max-width: 760px;   /* комфортная длина строки */
    font-size: clamp(16px, 1.1vw, 20px);
    line-height: 1.6;
    color: var(--ink);
}
.post__content > * + * { margin-top: 1.1em; }
.post__content h2 {
    margin-top: 1.7em;
    font-weight: 700;
    font-size: clamp(22px, 1.8vw, 32px);
    line-height: 1.2;
}
.post__content h3 {
    margin-top: 1.4em;
    font-weight: 700;
    font-size: clamp(19px, 1.4vw, 26px);
    line-height: 1.25;
}
.post__content a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.post__content a:hover { color: var(--purple); }
.post__content img { border-radius: var(--radius); }
.post__content ul { list-style: disc; padding-left: 1.3em; }
.post__content ol { list-style: decimal; padding-left: 1.4em; }
.post__content li + li { margin-top: .5em; }
.post__content blockquote {
    padding: 4px 0 4px 1.1em;
    border-left: 4px solid var(--purple);
    font-style: italic;
}
.post__content hr {
    height: 1px;
    margin: 2em 0;
    border: 0;
    background: rgba(36, 43, 81, 0.14);
}
.post__content code {
    padding: 2px 6px;
    border-radius: 6px;
    background: var(--chip);
    font-size: .9em;
}
.post__content pre {
    padding: 18px 22px;
    border-radius: var(--radius);
    background: var(--ink);
    color: var(--on-dark);
    overflow-x: auto;
}
.post__content pre code { padding: 0; background: none; color: inherit; }
.post__content table { width: 100%; border-collapse: collapse; }
.post__content th, .post__content td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(36, 43, 81, 0.14);
    text-align: left;
}

/* --- кнопки под текстом --- */
.post__actions {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(12px, 1.4vw, 24px);
    margin-top: clamp(32px, 4vw, 64px);
}
.post__actions .btn--ghost { background: var(--surface-80); box-shadow: var(--shadow-button); }
.icon--share { width: 24px; height: 24px; flex: 0 0 auto; color: var(--ink); }

/* --- ещё выпуски --- */
.post__more {
    padding: 0 0 clamp(48px, 6vw, 96px);
    background: #f4f8fd;
}
.post__more-title {
    margin-bottom: clamp(20px, 2vw, 36px);
    font-weight: 800;
    font-size: clamp(24px, 2vw, 38px);
    line-height: 1.15;
    color: var(--ink);
}
.post__more .ep-grid { margin-top: 0; }

@media (max-width: 900px) {
    .post__art { background-image: url('../images/bg-tall-1200.jpg'); background-position: center top; }
}

@media (max-width: 760px) {
    .post__art { background-image: url('../images/bg-tall-800.jpg'); }
    .post__actions .btn--ghost { width: 100%; justify-content: space-between; }
}

.empty-note, .error__message {
    font-size: clamp(17px, 1.2vw, 22px);
    color: var(--muted);
    margin-bottom: 28px;
}

/* ==========================================================================
   Карточки редактора Koenig
   Обязательные классы: изображения шире колонки текста.
   ========================================================================== */
.gh-content { position: relative; }

.kg-width-wide {
    width: min(100vw - 2 * var(--gutter), 1100px);
    max-width: none;
    margin-left: 50%;
    transform: translateX(-50%);
}

.kg-width-full {
    width: 100vw;
    max-width: none;
    margin-left: 50%;
    transform: translateX(-50%);
}
.kg-width-full img { border-radius: 0; }

.kg-image-card, .kg-embed-card { margin-top: 1.6em; margin-bottom: 1.6em; }
.kg-image-card figcaption, .kg-embed-card figcaption {
    margin-top: 10px;
    text-align: center;
    font-size: 15px;
    color: var(--muted);
}
.kg-gallery-container { display: flex; flex-direction: column; gap: 10px; }
.kg-gallery-row { display: flex; gap: 10px; }
.kg-gallery-image img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }

/* ==========================================================================
   Страница «О проекте» — Figma-фрейм 9:61
   Пропорции пересчитаны от кадра 1920x1080:
     карточка тезисов  93,477  977x340   → 50.9% ширины
     кнопка            98,901  342x72
     синяя плашка     471,901  599x72
   ========================================================================== */
.about {
    position: relative;
    isolation: isolate;
    display: flex;
    /* в макете блок прижат к верху (крошки на 162 из 1080), а не центрирован */
    align-items: flex-start;
    min-height: 100svh;
    padding: calc(var(--header-h) + clamp(20px, 3vh, 44px)) 0 clamp(40px, 6vh, 80px);
    overflow: hidden;
}

.about__art {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: url('../images/about-wide-1920.jpg');
    background-size: cover;
    /* контент прижат влево, поэтому обрезаем правый край, а не светлое поле */
    background-position: left top;
}

.about__inner {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.about__title {
    margin-top: clamp(12px, 1.4vw, 24px);
    font-weight: 800;
    font-size: clamp(34px, 3.33vw, 64px);   /* в макете 64px */
    line-height: 1.12;
    color: var(--ink);
}

/* --- тело страницы: приходит из редактора Ghost --- */
.about__body { margin-top: clamp(18px, 1.5vw, 28px); }

/* первый абзац — вводный текст (в макете Bold 24px, ширина 909px) */
.about__body > p:first-of-type {
    max-width: 909px;
    font-weight: 700;
    font-size: clamp(17px, 1.25vw, 24px);
    line-height: 1.36;
    color: var(--ink);
}

/* список превращается в карточку с тезисами */
.about__body > ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(20px, 1.9vw, 36px) clamp(24px, 2.3vw, 44px);
    max-width: 977px;
    margin-top: clamp(20px, 2vw, 36px);
    /* в макете поля карточки 72px по горизонтали и 33px сверху */
    padding: clamp(22px, 1.75vw, 33px) clamp(24px, 3.75vw, 72px);
    background: var(--panel-80);
    border-radius: var(--radius);
    box-shadow: var(--shadow-panel);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.about__body > ul > li {
    position: relative;
    padding-left: clamp(48px, 3.39vw, 65px);
    font-weight: 500;
    font-size: clamp(15px, 1.04vw, 20px);
    line-height: 1.28;
    color: var(--ink);
}

/* кружок со стрелкой (Icon arrow, 45.576px, заливка #A273F4 20%) */
.about__body > ul > li::before {
    content: '';
    position: absolute;
    left: 0;
    top: -2px;
    width: clamp(34px, 2.37vw, 45.576px);
    height: clamp(34px, 2.37vw, 45.576px);
    border-radius: 50%;
    background-color: rgba(162, 115, 244, 0.2);
    background-image: url('../images/arrow-right.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50%;
}

/* прочие элементы контента, если редактор добавит */
.about__body > h2 {
    max-width: 909px;
    margin-top: 1.2em;
    font-weight: 700;
    font-size: clamp(20px, 1.6vw, 30px);
}
.about__body > p:not(:first-of-type) {
    max-width: 909px;
    margin-top: 1em;
    font-size: clamp(15px, 1.04vw, 20px);
    line-height: 1.4;
}

/* --- нижний ряд: кнопка + синяя плашка --- */
.about__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: clamp(14px, 1.6vw, 31px);
    margin-top: clamp(26px, 7.8vh, 84px);
}

.about__cta .btn--primary {
    background: var(--surface-80);
    box-shadow: var(--shadow-button);
}

.about__banner {
    display: flex;
    align-items: center;
    min-height: 72px;
    padding: 14px clamp(22px, 2vw, 38px);
    background: var(--blue);
    border-radius: var(--radius);
    box-shadow: var(--shadow-button);
    color: #fff;
    font-weight: 600;
    font-size: clamp(15px, 1.04vw, 20px);
    line-height: 1.25;
}

/* Здесь фон абстрактный, без портрета, поэтому переключаем кадр по ширине,
   а не по пропорции: широкий кадр нормально кадрируется на любом десктопе.
   Высокий нужен только там, где от кадра 16:9 осталась бы узкая полоса. */
@media (max-width: 900px) {
    .about__art {
        background-image: url('../images/about-tall-1200.jpg');
        background-position: center top;
    }
}

@media (max-width: 1024px) {
    .about { min-height: 0; }
}

@media (max-width: 760px) {
    .about__art { background-image: url('../images/about-tall-800.jpg'); }
    /* тезисы в одну колонку, иначе строки по 3 слова; поля тоже уже */
    .about__body > ul {
        grid-template-columns: 1fr;
        padding: 22px 24px;
    }
    .about__cta { flex-direction: column; align-items: stretch; }
    .about__cta .btn--primary { justify-content: flex-start; }
    .about__banner { min-height: 62px; }
}

/* ==========================================================================
   «Все выпуски» и страницы тем — Figma-фрейм 10:194
   Пропорции от кадра 1920x1080:
     H1            95,232
     чипы          y=336, высота 54, радиус 20
     поиск       1348,336  383x54
     карточки     355x280, превью 355x159; шаг 427 по X (зазор 72), 316 по Y (зазор 36)
   ========================================================================== */
.ep-page {
    position: relative;
    isolation: isolate;
    min-height: 100svh;
    padding: calc(var(--header-h) + clamp(20px, 3vh, 44px)) 0 clamp(48px, 7vh, 96px);
    overflow: hidden;
}

.ep-page__art {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: url('../images/bg-wide-1920.jpg');
    background-size: cover;
    background-position: left top;
}

.ep-page__inner {
    position: relative;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.ep-page__title {
    margin-top: clamp(12px, 1.4vw, 24px);
    font-weight: 800;
    font-size: clamp(34px, 3.33vw, 64px);
    line-height: 1.12;
    color: var(--ink);
}

.ep-page__lead {
    max-width: 760px;
    margin-top: 14px;
    font-size: clamp(15px, 1.04vw, 20px);
    color: var(--ink);
}

/* --- панель: чипы тем + поиск --- */
.ep-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: clamp(12px, 1.2vw, 22px);
    margin-top: clamp(20px, 2.3vw, 44px);
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(8px, 0.9vw, 17px);   /* в макете просветы 24–33px между чипами */
    /* без min-width:0 флекс-элемент не сжимается ниже своего контента
       и ряд чипов вылезает за экран вместо прокрутки */
    min-width: 0;
}

.chip {
    display: inline-flex;
    align-items: center;
    min-height: clamp(40px, 2.8vw, 54px);
    padding: 0 clamp(14px, 1.25vw, 24px);
    border-radius: var(--radius);
    background: var(--chip);
    color: var(--ink);
    font-weight: 600;
    font-size: clamp(15px, 1.25vw, 24px);
    line-height: 1.2;
    white-space: nowrap;
    transition: background .18s ease, transform .18s ease, color .18s ease;
}
.chip:hover { transform: translateY(-1px); background: #dfe7f6; }

/* активная тема — градиент из макета */
.chip.is-active {
    background: linear-gradient(to right, #53d4f9, #72defb);
    color: var(--ink);
}
.chip.is-active:hover { background: linear-gradient(to right, #45cdf6, #66d9fa); }

.ep-search {
    display: flex;
    align-items: center;
    gap: 8px;
    width: clamp(240px, 20vw, 383px);
    min-height: clamp(40px, 2.8vw, 54px);
    padding: 0 6px 0 clamp(14px, 1.25vw, 24px);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.77);
    box-shadow: 0 1px 1px 0 #72defb;
}

.ep-search__input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 600;
    font-size: clamp(14px, 1.25vw, 24px);
    color: var(--ink);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}
.ep-search__input::placeholder { color: var(--muted); }
.ep-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }

.ep-search__btn {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 33px;
    height: 33px;
    border-radius: 50%;
    /* радиальный градиент кнопки из макета, 20% непрозрачности */
    background: radial-gradient(circle at 50% 50%, rgba(0, 237, 255, 0.2) 49%, rgba(219, 231, 232, 0.2) 100%);
    color: var(--ink);
    transition: transform .18s ease;
}
.ep-search__btn:hover { transform: scale(1.08); }
.icon--glass { width: 16px; height: auto; }

/* --- сетка карточек --- */
.ep-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: clamp(20px, 1.9vw, 36px) clamp(20px, 3.75vw, 72px);
    margin-top: clamp(24px, 1.9vw, 36px);
}

.ep {
    display: flex;
    flex-direction: column;
    background: var(--surface-50);
    border-radius: var(--radius);
    box-shadow: var(--shadow-button);
    overflow: hidden;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    transition: transform .22s ease;
}
.ep:hover { transform: translateY(-4px); }
.ep[hidden] { display: none; }

.ep__media {
    display: block;
    aspect-ratio: 355 / 159;   /* пропорции превью из макета */
    background: #0d1b2a;
    overflow: hidden;
}
.ep__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.ep:hover .ep__media img { transform: scale(1.04); }

.ep__body { padding: clamp(16px, 0.85vw, 16px) clamp(20px, 1.46vw, 28px) clamp(20px, 1.4vw, 26px); }

.ep__title {
    font-weight: 700;
    font-size: clamp(18px, 1.25vw, 24px);
    line-height: 1.12;
    color: var(--ink);
}
.ep__title a { transition: color .18s ease; }
.ep__title a:hover { color: var(--purple); }

.ep__date {
    margin-top: clamp(10px, 0.6vw, 14px);
    color: var(--muted);
    font-weight: 500;
    font-size: clamp(14px, 0.83vw, 16px);
}

.ep-empty {
    margin-top: 28px;
    font-size: clamp(16px, 1.1vw, 20px);
    color: var(--muted);
}

@media (max-width: 900px) {
    .ep-page__art { background-image: url('../images/bg-tall-1200.jpg'); background-position: center top; }
    .ep-toolbar { flex-direction: column; align-items: stretch; }
    .ep-search { width: 100%; }
    .chips {
        /* width:100% обязателен: align-items:stretch не удерживает ширину,
           когда содержимое шире контейнера, и ряд вылезал за экран
           вместо горизонтальной прокрутки */
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 4px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    .chips > li { flex: 0 0 auto; }
    .chips::-webkit-scrollbar { display: none; }
}

@media (max-width: 760px) {
    .ep-page { min-height: 0; }
    .ep-page__art { background-image: url('../images/bg-tall-800.jpg'); }
}