/* ==========================================================================
   journal-editorial-light.css — редакционная структура журнала в языке главной
   --------------------------------------------------------------------------
   ОТКУДА ЯЗЫК. Снят с реального экрана occochi.ru (`.qa/journal-audit/
   ref_landing_*.png`, токены в `.qa/landing_ref_tokens.json`), а не придуман:

     фон  #0a0a0b          текст #f2f2ee        акцент #ff641e
     H1   134px / -4.7px трекинг / вес 800 / КАПС
     H2   66px  / вес 800
     секции 150px сверху, 90px снизу
     приёмы: гигантский КАПС, надзаголовок 11px с широким трекингом,
             вторая строка заголовка серая, оранжевые стрелки-разделители,
             тонкие линии сетки, ноль скруглений, ноль теней

   ЧТО ЗДЕСЬ. Тот же язык, вывернутый в светлую сторону: тёплая бумага вместо
   чёрного, чернила вместо белого, оранжевый — там же, где на главной. Плюс то,
   чего на главной нет и что нужно журналу: оглавление рядами, редакционная
   сетка рубрик, инверсные врезки, читаемая колонка текста.

   ПОЧЕМУ НЕ СКРУГЛЕНИЯ И НЕ ТЕНИ. На главной их нет вовсе: глубина делается
   линиями и инверсией. Карточка с радиусом 16 и тенью — язык дашборда, а не
   издания; поставив её рядом, мы получили бы два разных продукта на одном
   домене. Ровно это и было до сих пор.

   Грузится ПОСЛЕ journal-brand-light.css: тот привёл цвет, этот меняет
   структуру, плотность и типографику.
   ========================================================================== */

body.journal-page {
    /* Бумага — чистый белый. Тёплый оттенок (#fbfaf7) на большой площади рядом
       с фотографиями интерьеров читался как выцветший беж, а не как «светлый
       дизайн». Тепло даём линиями и чернилами, а не заливкой. */
    --je-paper: #ffffff;
    --je-paper-warm: #faf8f4;
    --je-ink: #0a0a0b;
    --je-ink-2: #33302c;
    --je-muted: #8c8781;
    --je-line: #e4e0d9;
    --je-line-strong: #cfc9c0;
    --je-accent: #ff5a1f;
    --je-accent-ink: #c2410c;

    --je-gap: clamp(20px, 2.2vw, 34px);
    --je-pad: clamp(20px, 4vw, 56px);
    --je-rhythm: clamp(56px, 7vw, 104px);
    --je-max: 1440px;

    background: var(--je-paper) !important;
    color: var(--je-ink) !important;
    letter-spacing: -0.005em;
}

/* ==========================================================================
   1. СЕТКА И РИТМ
   --------------------------------------------------------------------------
   Секции разделяет линия, а не смена фона: полосатая страница («серая, белая,
   серая») выглядит как набор чужих блоков. Линия говорит «новая глава» тише и
   точнее.
   ========================================================================== */

body.journal-page .landing-container,
body.journal-page .journal-shell {
    max-width: var(--je-max) !important;
    padding-left: var(--je-pad) !important;
    padding-right: var(--je-pad) !important;
    margin-left: auto;
    margin-right: auto;
}

body.journal-page .jpro-section {
    padding-top: var(--je-rhythm) !important;
    padding-bottom: calc(var(--je-rhythm) * 0.62) !important;
    background: transparent !important;
    border-top: 1px solid var(--je-line);
}

body.journal-page .jpro-section--tight {
    padding-top: calc(var(--je-rhythm) * 0.55) !important;
    padding-bottom: calc(var(--je-rhythm) * 0.4) !important;
}

/* Секция «приглушённая» больше не заливается: отличие несёт типографика. */
body.journal-page .jpro-section--muted {
    background: transparent !important;
}

/* ==========================================================================
   2. ТИПОГРАФИКА
   ========================================================================== */

/* Надзаголовок: 11px, широкий трекинг, короткая черта перед текстом —
   ровно как в «РЕМОНТ КВАРТИР · ЧАСТНЫЕ ДОМА · СТРОИТЕЛЬСТВО» на главной. */
body.journal-page .jpro-eyebrow,
body.journal-page .journal-section-eyebrow,
body.journal-page .jpro-hero-kicker,
body.journal-page .journal-kicker {
    display: inline-flex !important;
    align-items: center;
    gap: 12px;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    font-size: 0.69rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase;
    color: var(--je-muted) !important;
    border-radius: 0 !important;
}

body.journal-page .jpro-eyebrow::before,
body.journal-page .journal-section-eyebrow::before,
body.journal-page .jpro-hero-kicker::before {
    content: "";
    display: block;
    width: 28px;
    height: 2px;
    background: var(--je-accent) !important;
    border-radius: 0 !important;
    flex: none;
}

/* Заголовок секции — крупный КАПС. Это главный приём главной страницы, и он
   же делает журнал похожим на издание, а не на блог CMS. */
body.journal-page .jpro-section-title,
body.journal-page .journal-section-title,
body.journal-page .jpro-topic-cloud-head h2 {
    font-size: clamp(2rem, 3.6vw, 3.5rem) !important;
    line-height: 0.96 !important;
    letter-spacing: -0.035em !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    color: var(--je-ink) !important;
    margin: 14px 0 0 !important;
    max-width: 22ch;
}

body.journal-page .jpro-section-lead,
body.journal-page .journal-section-lead {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    color: var(--je-muted) !important;
    max-width: 56ch;
}

/* Шапка секции: заголовок слева, пояснение и ссылка справа — как в эталоне. */
body.journal-page .jpro-section-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: end;
    gap: var(--je-gap);
    padding-bottom: 26px;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--je-line);
}

body.journal-page .jpro-section-aside {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

/* ==========================================================================
   3. ГЕРОЙ ГЛАВНОЙ
   --------------------------------------------------------------------------
   Было: заголовок в три строки, три кнопки в ряд, метрики плашками, справа
   карточка с тенью. Стало: гигантский КАПС на всю колонку, вторая строка
   серая (иерархия внутри одной фразы), метрики — таблица цифр на линиях,
   справа главный материал без рамки — фото и текст, разделённые линией.
   ========================================================================== */

body.journal-page .jpro-hero {
    /* Шапка фиксированная (~74px). Даём ей воздух, но не полтора экрана:
       заголовок такого кегля сам создаёт паузу. */
    padding-top: clamp(92px, 8vw, 124px) !important;
    padding-bottom: clamp(30px, 4vw, 56px) !important;
    border-bottom: 1px solid var(--je-line);
}

body.journal-page .jpro-hero-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
    gap: clamp(28px, 4vw, 72px);
    align-items: start;
}

body.journal-page .jpro-hero-title,
body.journal-page .journal-title {
    /* 4.4rem, а не 6.2: на главной такой кегль живёт на всю ширину экрана, а
       здесь рядом стоит колонка с главным материалом. При 6.2rem длинные слова
       («новостройках») выходили за колонку и налезали на фото. */
    font-size: clamp(2.3rem, 4.4vw, 4.4rem) !important;
    /* 0.98, а не 0.92: при более плотном интерлиньяже КАПС обрезает «Й» и «Ё» —
       краткая и точки уходят под строку выше. */
    line-height: 0.98 !important;
    letter-spacing: -0.042em !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    margin: 18px 0 0 !important;
    max-width: none !important;
    color: var(--je-ink) !important;
    /* Перенос по слогам вместо разрыва слова посередине: на телефоне
       «НОВОСТРОЙКА|Х» выглядит как ошибка, «НОВОСТРОЙ-КАХ» — как типографика.
       Работает благодаря lang="ru" в разметке. */
    hyphens: auto;
    overflow-wrap: normal;
    padding-right: 8px;
}

/* Акцентная часть заголовка: серая, а не оранжевая. На главной так и сделано
   («Один контур.» белым, «Три разных объекта.» серым) — важность падает,
   фраза продолжается. Оранжевый в заголовке кричал бы вторым голосом. */
body.journal-page .jpro-hero-title .jpro-hero-accent,
body.journal-page .journal-title span {
    /* Темнее, чем служебный серый: это всё ещё заголовок, а не подпись. */
    color: #6f6a63 !important;
    -webkit-text-fill-color: currentColor !important;
    background: none !important;
    box-shadow: none !important;
}

body.journal-page .jpro-hero-lead {
    font-size: 1.06rem !important;
    line-height: 1.62 !important;
    color: var(--je-ink-2) !important;
    max-width: 52ch;
    margin-top: 22px !important;
}

/* Действия: главное — залитое, остальные — текстом со стрелкой. Четыре
   равновесных кнопки в две строки, как было, означали «выбери сам, что тут
   важно». */
body.journal-page .jpro-hero-actions {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin-top: 26px !important;
}

/* Четыре действия в герое — это не выбор, а список. Первое остаётся кнопкой,
   остальные становятся ссылками со стрелкой: они по-прежнему доступны, но не
   спорят с главным действием за внимание. */
body.journal-page .jpro-hero-actions .jpro-btn:not(.jpro-btn-primary) {
    border-color: transparent !important;
    padding: 13px 4px !important;
    color: var(--je-ink-2) !important;
    background: none !important;
}

body.journal-page .jpro-hero-actions .jpro-btn:not(.jpro-btn-primary)::after {
    content: "→";
    margin-left: 8px;
    color: var(--je-accent);
}

body.journal-page .jpro-hero-actions .jpro-btn:not(.jpro-btn-primary):hover {
    background: none !important;
    color: var(--je-ink) !important;
    text-decoration: underline;
    text-decoration-color: var(--je-accent);
    text-underline-offset: 5px;
}

/* Полоска перед надзаголовком: в исходном слое здесь была пульсирующая точка,
   и рядом с новой чертой они читались как трёхцветный флажок. */
body.journal-page .jpro-hero-kicker::before,
body.journal-page .jpro-eyebrow::before {
    animation: none !important;
    box-shadow: none !important;
    border: none !important;
}

/* Метрики — цифровая таблица на вертикальных линиях. */
body.journal-page .jpro-hero-metrics {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0 !important;
    margin-top: clamp(30px, 4vw, 54px) !important;
    border-top: 1px solid var(--je-line);
}

body.journal-page .jpro-metric {
    background: none !important;
    border: none !important;
    border-left: 1px solid var(--je-line) !important;
    border-radius: 0 !important;
    padding: 18px 18px 6px !important;
    box-shadow: none !important;
}

body.journal-page .jpro-metric:first-child {
    border-left: none !important;
    padding-left: 0 !important;
}

/* Иконка в метрике — шум: цифра и подпись уже всё сказали. */
body.journal-page .jpro-metric-icon {
    display: none !important;
}

body.journal-page .jpro-metric-value {
    font-size: clamp(1.7rem, 2.6vw, 2.5rem) !important;
    line-height: 1 !important;
    letter-spacing: -0.04em;
    font-weight: 800 !important;
    color: var(--je-ink) !important;
}

body.journal-page .jpro-metric-label {
    font-size: 0.7rem !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--je-muted) !important;
    margin-top: 8px;
}

/* Главный материал справа: без рамки и тени, «фото + линия + текст». */
body.journal-page .jpro-hero-featured {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.journal-page .jpro-hero-featured-media {
    border-radius: 0 !important;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--je-line);
}

body.journal-page .jpro-hero-featured-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Тёплая бумага и цветное фото рядом: лёгкая деконтрастность связывает их
       в одно изображение страницы. */
    filter: saturate(0.96) contrast(1.02);
}

body.journal-page .jpro-hero-featured-body {
    padding: 20px 0 0 !important;
    border-top: 1px solid var(--je-ink);
}

body.journal-page .jpro-hero-featured-title {
    font-size: clamp(1.15rem, 1.6vw, 1.5rem) !important;
    line-height: 1.18 !important;
    letter-spacing: -0.02em;
    font-weight: 780 !important;
    color: var(--je-ink) !important;
}

body.journal-page .jpro-hero-featured-tag {
    position: static !important;
    background: none !important;
    border: none !important;
    color: var(--je-accent-ink) !important;
    padding: 0 !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.16em;
}

body.journal-page .jpro-hero-featured-meta,
body.journal-page .jpro-art-meta,
body.journal-page .jpro-mag-meta,
body.journal-page .jpro-related-meta {
    font-size: 0.7rem !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--je-muted) !important;
    gap: 14px !important;
}

/* ==========================================================================
   4. КНОПКИ
   --------------------------------------------------------------------------
   Прямоугольник, КАПС, трекинг — как «НАЧАТЬ БЕСПЛАТНО» на главной. Скругление
   и тень убраны: они делали кнопку элементом интерфейса, а здесь она часть
   набора.
   ========================================================================== */

body.journal-page .jpro-btn,
body.journal-page .journal-btn {
    border-radius: 0 !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase;
    font-weight: 800 !important;
    padding: 15px 22px !important;
    box-shadow: none !important;
    border: 1px solid transparent !important;
    transition: background 0.14s, color 0.14s, border-color 0.14s;
}

body.journal-page .jpro-btn-primary,
body.journal-page .journal-btn-primary,
body.journal-page .jpro-search-form button,
body.journal-page .journal-media-search-form button {
    background: var(--je-accent) !important;
    color: #fff !important;
    border-color: var(--je-accent) !important;
}

body.journal-page .jpro-btn-primary:hover,
body.journal-page .journal-btn-primary:hover {
    background: var(--je-ink) !important;
    border-color: var(--je-ink) !important;
    color: #fff !important;
    transform: none !important;
}

body.journal-page .jpro-btn:not(.jpro-btn-primary) {
    background: transparent !important;
    color: var(--je-ink) !important;
    border-color: var(--je-line-strong) !important;
}

body.journal-page .jpro-btn:not(.jpro-btn-primary):hover {
    background: var(--je-ink) !important;
    border-color: var(--je-ink) !important;
    color: #fff !important;
}

/* ==========================================================================
   5. ПЛИТКИ И КАРТОЧКИ → РЕДАКЦИОННЫЕ БЛОКИ
   --------------------------------------------------------------------------
   Наведение переворачивает блок в чернила. Это дешёвая по коду и очень
   заметная в работе обратная связь: понятно, где ты стоишь, без цветных
   рамок и подпрыгивания.
   ========================================================================== */

body.journal-page .jpro-art-card,
body.journal-page .jpro-mag-tile,
body.journal-page .jpro-related-card,
body.journal-page .jpro-guide-card,
body.journal-page .jpro-rubric-card,
body.journal-page .jpro-strip-card,
body.journal-page .jpro-pillar,
body.journal-page .jpro-tool,
body.journal-page .jpro-dist-card,
body.journal-page .jpro-trust-card,
body.journal-page .jpro-room,
body.journal-page .jpro-city,
body.journal-page .jpro-jk,
body.journal-page .jpro-aside-card,
body.journal-page .journal-card,
body.journal-page .jpro-topic-group,
body.journal-page .jpro-faq-item,
body.journal-page .jphoto {
    background: transparent !important;
    border: 1px solid var(--je-line) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: background 0.16s, color 0.16s, border-color 0.16s;
}

body.journal-page .jpro-art-card:hover,
body.journal-page .jpro-mag-tile:hover,
body.journal-page .jpro-related-card:hover,
body.journal-page .jpro-guide-card:hover,
body.journal-page .jpro-rubric-card:hover,
body.journal-page .jpro-strip-card:hover,
body.journal-page .jpro-pillar:hover,
body.journal-page .jpro-tool:hover,
body.journal-page .jpro-dist-card:hover,
body.journal-page .jpro-room:hover,
body.journal-page .jpro-city:hover,
body.journal-page .jpro-jk:hover,
body.journal-page .journal-card:hover {
    background: var(--je-ink) !important;
    border-color: var(--je-ink) !important;
    transform: none !important;
    box-shadow: none !important;
}

body.journal-page .jpro-art-card:hover *,
body.journal-page .jpro-mag-tile:hover *,
body.journal-page .jpro-related-card:hover *,
body.journal-page .jpro-guide-card:hover *,
body.journal-page .jpro-rubric-card:hover *,
body.journal-page .jpro-strip-card:hover *,
body.journal-page .jpro-pillar:hover *,
body.journal-page .jpro-tool:hover *,
body.journal-page .jpro-dist-card:hover *,
body.journal-page .jpro-room:hover .jpro-room-body *,
body.journal-page .jpro-city:hover *,
body.journal-page .jpro-jk:hover .jpro-jk-body *,
body.journal-page .journal-card:hover .journal-card-body * {
    color: #f2f2ee !important;
    border-color: rgba(242, 242, 238, 0.24) !important;
}

/* Стрелка при наведении становится оранжевой — единственный цвет на чёрном. */
body.journal-page .jpro-art-card:hover .jpro-art-tag,
body.journal-page .jpro-mag-tile:hover .jpro-mag-cta,
body.journal-page .jpro-guide-card:hover .jpro-guide-cta,
body.journal-page .jpro-pillar:hover .jpro-pillar-cta,
body.journal-page .jpro-tool:hover .jpro-tool-cta,
body.journal-page .jpro-dist-card:hover .jpro-dist-cta,
body.journal-page .jpro-city:hover .jpro-city-icon,
body.journal-page .journal-card:hover .journal-card-footer {
    color: var(--je-accent) !important;
}

/* Иконки-плашки: рамка вместо заливки, ноль радиуса. */
body.journal-page .jpro-rubric-icon,
body.journal-page .jpro-strip-icon,
body.journal-page .jpro-pillar-icon,
body.journal-page .jpro-tool-icon,
body.journal-page .jpro-dist-icon,
body.journal-page .jpro-trust-icon,
body.journal-page .jpro-city-icon,
body.journal-page .jpro-topic-group-icon {
    background: none !important;
    border: 1px solid var(--je-line-strong) !important;
    border-radius: 0 !important;
    color: var(--je-accent-ink) !important;
}

body.journal-page .jpro-art-cover,
body.journal-page .jpro-mag-media,
body.journal-page .jpro-guide-cover,
body.journal-page .jpro-room-cover,
body.journal-page .jpro-jk-cover,
body.journal-page .journal-card-media {
    border-radius: 0 !important;
}

/* Метки рубрик на карточках — текстом, без пилюль. */
body.journal-page .jpro-art-tag,
body.journal-page .jpro-mag-tag,
body.journal-page .jpro-related-cat,
body.journal-page .jpro-room-tag,
body.journal-page .jpro-jk-cover-tag,
body.journal-page .jpro-guide-badge {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    color: var(--je-accent-ink) !important;
    font-size: 0.67rem !important;
    letter-spacing: 0.16em;
    font-weight: 800;
    text-transform: uppercase;
}

/* ==========================================================================
   6. ОГЛАВЛЕНИЕ РЯДАМИ вместо стены карточек
   --------------------------------------------------------------------------
   Секция свежих публикаций была сеткой из девяти одинаковых карточек — в такой
   стене человек не читает ни одного заголовка. Газетное оглавление читается
   сверху вниз за секунды: дата, рубрика, заголовок, время. Строку целиком
   переворачиваем в чернила при наведении.
   ========================================================================== */

body.journal-page #media-new .jpro-mag-grid,
body.journal-page #media-new .jpro-grid,
body.journal-page #media-new .jpro-mag-tiles {
    display: block !important;
}

body.journal-page #media-new .jpro-mag-tile {
    display: grid !important;
    grid-template-columns: 104px minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px;
    border: none !important;
    border-top: 1px solid var(--je-line) !important;
    padding: 18px 12px !important;
    margin: 0 !important;
}

body.journal-page #media-new .jpro-mag-tile:last-child {
    border-bottom: 1px solid var(--je-line) !important;
}

body.journal-page #media-new .jpro-mag-media {
    width: 104px;
    height: 70px;
    margin: 0 !important;
    overflow: hidden;
}

body.journal-page #media-new .jpro-mag-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.journal-page #media-new .jpro-mag-body {
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

body.journal-page #media-new .jpro-mag-tile h3 {
    font-size: 1.18rem !important;
    line-height: 1.22 !important;
    letter-spacing: -0.02em;
    margin: 0 !important;
}

/* Описание в ряду не нужно: его читают уже внутри материала. */
body.journal-page #media-new .jpro-mag-tile p {
    display: none !important;
}

body.journal-page #media-new .jpro-mag-cta {
    font-size: 1.2rem !important;
    color: var(--je-line-strong) !important;
}

body.journal-page #media-new .jpro-mag-tile:hover .jpro-mag-cta {
    color: var(--je-accent) !important;
}

/* ==========================================================================
   7. РУБРИКИ КАК СЕТКА С НУМЕРАЦИЕЙ
   ========================================================================== */

body.journal-page .jpro-rubric {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
    gap: 0 !important;
    border-top: 1px solid var(--je-line);
    border-left: 1px solid var(--je-line);
    counter-reset: rubric;
}

body.journal-page .jpro-rubric-card {
    border: none !important;
    border-right: 1px solid var(--je-line) !important;
    border-bottom: 1px solid var(--je-line) !important;
    padding: 22px 20px !important;
    display: flex !important;
    flex-direction: column;
    gap: 10px;
    min-height: 132px;
    counter-increment: rubric;
}

/* Номер рубрики — приём печатного оглавления: он даёт масштаб раздела. */
body.journal-page .jpro-rubric-card::after {
    content: counter(rubric, decimal-leading-zero);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    color: var(--je-muted);
    margin-top: auto;
}

body.journal-page .jpro-rubric-card:hover::after {
    color: var(--je-accent) !important;
}

body.journal-page .jpro-rubric-icon {
    border: none !important;
    color: var(--je-accent) !important;
    font-size: 1.1rem;
}

body.journal-page .jpro-rubric-text {
    font-size: 1.02rem !important;
    font-weight: 760 !important;
    letter-spacing: -0.015em;
    line-height: 1.2;
}

/* ==========================================================================
   8. ОБЛАКО ТЕМ → СТРОКА С ОРАНЖЕВЫМИ РАЗДЕЛИТЕЛЯМИ
   --------------------------------------------------------------------------
   На главной есть бегущая строка «ОБЪЕКТ → СМЕТА → ДОГОВОР → ЭТАПЫ». Здесь
   тот же приём без движения: движущиеся ссылки невозможно нажать, а мы ведём
   человека именно по ссылкам.
   ========================================================================== */

body.journal-page .jpro-topic-cloud-list {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 !important;
}

body.journal-page .jpro-topic-cloud-chip {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 6px 0 !important;
    margin: 0 !important;
    color: var(--je-ink-2) !important;
    font-size: 0.92rem !important;
    font-weight: 600 !important;
}

body.journal-page .jpro-topic-cloud-chip::after {
    content: "→";
    display: inline-block;
    margin: 0 14px;
    color: var(--je-accent);
    font-weight: 700;
}

body.journal-page .jpro-topic-cloud-chip:last-child::after {
    display: none;
}

body.journal-page .jpro-topic-cloud-chip:hover {
    background: none !important;
    color: var(--je-ink) !important;
    text-decoration: underline;
    text-decoration-color: var(--je-accent);
    text-underline-offset: 4px;
}

/* ==========================================================================
   9. ИНВЕРСНЫЕ СЕКЦИИ
   --------------------------------------------------------------------------
   Одна-две чернильные полосы на странице делают ритм: белое, белое, чёрное.
   Это и есть глубина без теней.
   ========================================================================== */

body.journal-page .jpro-section--dark,
body.journal-page .jpro-conversion,
body.journal-page .journal-cta-band {
    background: var(--je-ink) !important;
    color: #f2f2ee !important;
    border: none !important;
    border-radius: 0 !important;
    padding-top: var(--je-rhythm) !important;
    padding-bottom: var(--je-rhythm) !important;
}

body.journal-page .jpro-section--dark .jpro-section-title,
body.journal-page .jpro-conversion h2,
body.journal-page .journal-cta-band h2 {
    color: #f2f2ee !important;
}

body.journal-page .jpro-section--dark .jpro-section-lead,
body.journal-page .jpro-conversion p,
body.journal-page .journal-cta-band p {
    color: rgba(242, 242, 238, 0.66) !important;
}

body.journal-page .jpro-section--dark .jpro-section-head,
body.journal-page .jpro-section--dark .jpro-dist-card {
    border-color: rgba(242, 242, 238, 0.16) !important;
}

body.journal-page .jpro-section--dark .jpro-dist-card:hover {
    background: rgba(242, 242, 238, 0.06) !important;
    border-color: rgba(242, 242, 238, 0.3) !important;
}

body.journal-page .jpro-section--dark .jpro-dist-card:hover * {
    color: #f2f2ee !important;
}

body.journal-page .jpro-section--dark .jpro-eyebrow,
body.journal-page .jpro-conversion .jpro-eyebrow {
    color: rgba(242, 242, 238, 0.6) !important;
}

/* ==========================================================================
   10. ШАПКА
   ========================================================================== */

body.journal-page .landing-navbar {
    background: rgba(251, 250, 247, 0.92) !important;
    border-bottom: 1px solid var(--je-line) !important;
    backdrop-filter: saturate(150%) blur(12px);
}

body.journal-page .navbar-link {
    font-size: 0.7rem !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase;
    font-weight: 700 !important;
    color: var(--je-ink-2) !important;
    background: none !important;
    border-radius: 0 !important;
    padding: 8px 2px !important;
    margin: 0 8px;
    border-bottom: 2px solid transparent;
}

body.journal-page .navbar-link:hover {
    color: var(--je-ink) !important;
    background: none !important;
    border-bottom-color: var(--je-accent);
}

/* Иконки в меню убраны: девять иконок в строке — девять лишних деталей. */
body.journal-page .navbar-links .navbar-link i {
    display: none !important;
}

body.journal-page .navbar-btn {
    background: var(--je-accent) !important;
    border-radius: 0 !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 800 !important;
    box-shadow: none !important;
    padding: 13px 20px !important;
}

body.journal-page .navbar-btn:hover {
    background: var(--je-ink) !important;
}

/* Логотип: ромб, как на главной. */
body.journal-page .navbar-logo-icon {
    background: var(--je-accent) !important;
    border-radius: 2px !important;
    transform: rotate(45deg);
    box-shadow: none !important;
    width: 20px !important;
    height: 20px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

body.journal-page .navbar-logo-icon i {
    display: none !important;
}

body.journal-page .navbar-logo-text,
body.journal-page .navbar-logo {
    letter-spacing: -0.01em;
    font-weight: 800 !important;
    text-transform: uppercase;
}

body.journal-page .navbar-logo-muted {
    color: var(--je-muted) !important;
    text-transform: none;
    font-weight: 600 !important;
}

/* ==========================================================================
   11. СТАТЬЯ
   --------------------------------------------------------------------------
   Колонка 700px, кегль 1.16rem, интерлиньяж 1.75. Абзац шириной во весь экран
   не читают: глаз теряет начало строки. Заголовки разделов — КАПС поменьше,
   на линии, как главы.
   ========================================================================== */

body.journal-page--article .journal-article-hero {
    padding-top: clamp(96px, 10vw, 140px) !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
}

body.journal-page--article h1 {
    font-size: clamp(2.1rem, 4.4vw, 3.9rem) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.038em !important;
    text-transform: none;
    max-width: 24ch;
    font-weight: 800 !important;
}

body.journal-page--article .journal-article-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: clamp(28px, 5vw, 76px);
    align-items: start;
    border-top: 1px solid var(--je-line);
    padding-top: 40px;
    margin-top: 34px;
}

body.journal-page--article .journal-article-main {
    max-width: 760px;
}

body.journal-page--article .journal-article-main p,
body.journal-page--article .journal-article-main li {
    font-size: 1.14rem !important;
    line-height: 1.75 !important;
    color: #26241f !important;
}

body.journal-page--article .journal-article-main h2 {
    font-size: clamp(1.3rem, 2vw, 1.75rem) !important;
    line-height: 1.14 !important;
    letter-spacing: -0.025em !important;
    text-transform: uppercase;
    margin: 2.4em 0 0.8em !important;
    padding-top: 0.8em !important;
    border-top: 1px solid var(--je-line) !important;
}

body.journal-page--article .journal-article-main h3 {
    font-size: 1.16rem !important;
    letter-spacing: -0.01em;
    margin: 1.9em 0 0.5em !important;
}

/* Первый абзац — лид: крупнее, темнее. Так текст «стартует», а не начинается
   с полутона. */
body.journal-page--article .journal-article-main > p:first-of-type {
    font-size: 1.28rem !important;
    line-height: 1.6 !important;
    color: var(--je-ink) !important;
}

body.journal-page blockquote,
body.journal-page .journal-callout {
    border-left: 2px solid var(--je-accent) !important;
    padding-left: 22px !important;
    font-size: 1.2rem !important;
    line-height: 1.55 !important;
    color: var(--je-ink) !important;
    margin: 2em 0 !important;
}

/* Врезки — на линиях, без заливки и радиуса. */
body.journal-page .journal-checklist,
body.journal-page .journal-faq-block,
body.journal-page .journal-summary,
body.journal-page .journal-cta-links {
    background: none !important;
    border: none !important;
    border-top: 2px solid var(--je-ink) !important;
    border-bottom: 1px solid var(--je-line) !important;
    border-radius: 0 !important;
    padding: 18px 0 20px !important;
}

body.journal-page .journal-checklist__title,
body.journal-page .journal-faq-block__title {
    font-size: 0.7rem !important;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--je-muted) !important;
}

/* Оглавление статьи: липкое, на линиях, активного цвета не занимает. */
body.journal-page--article .journal-sidebar {
    position: sticky;
    top: 96px;
}

body.journal-page .journal-side-card {
    background: none !important;
    border: none !important;
    border-top: 2px solid var(--je-ink) !important;
    border-radius: 0 !important;
    padding: 16px 0 0 !important;
}

body.journal-page .journal-side-card-heading {
    font-size: 0.68rem !important;
    letter-spacing: 0.2em;
    color: var(--je-muted) !important;
}

body.journal-page .journal-side-link {
    display: block;
    padding: 9px 0 !important;
    font-size: 0.9rem !important;
    line-height: 1.4;
    color: var(--je-ink-2) !important;
    border-bottom: 1px solid var(--je-line) !important;
}

body.journal-page .journal-side-link:hover {
    color: var(--je-accent-ink) !important;
    padding-left: 6px !important;
    transition: padding 0.12s;
}

/* Ссылки в тексте: чернила с оранжевым подчёркиванием. Цветной текст в
   длинном материале утомляет, подчёркивание — нет. */
body.journal-page--article .journal-article-main a {
    color: var(--je-ink) !important;
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    text-decoration-color: var(--je-accent) !important;
    text-underline-offset: 4px;
    font-weight: 600;
}

body.journal-page--article .journal-article-main a:hover {
    background: var(--je-accent);
    color: #fff !important;
    text-decoration-color: transparent !important;
}

/* ==========================================================================
   12. ХЛЕБНЫЕ КРОШКИ
   ========================================================================== */

body.journal-page .jpro-breadcrumb,
body.journal-page .journal-breadcrumb {
    font-size: 0.68rem !important;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

body.journal-page .jpro-breadcrumb a,
body.journal-page .journal-breadcrumb-list a {
    color: var(--je-muted) !important;
}

body.journal-page .jpro-breadcrumb a:hover,
body.journal-page .journal-breadcrumb-list a:hover {
    color: var(--je-accent-ink) !important;
}

/* ==========================================================================
   13. ФУТЕР
   --------------------------------------------------------------------------
   Чернильный: страница заканчивается плотным блоком, а не растворяется в
   светло-серое ничто.
   ========================================================================== */

body.landing-page.journal-page .landing-footer-v2 {
    background: var(--je-ink) !important;
    border-top: none !important;
    color: rgba(242, 242, 238, 0.72) !important;
}

body.landing-page.journal-page .landing-footer-v2 .footer-v2-logo,
body.landing-page.journal-page .landing-footer-v2 .footer-v2-col-title {
    color: #f2f2ee !important;
}

body.landing-page.journal-page .landing-footer-v2 .footer-v2-link,
body.landing-page.journal-page .landing-footer-v2 small,
body.landing-page.journal-page .landing-footer-v2 .footer-v2-tagline,
body.landing-page.journal-page .landing-footer-v2 .footer-v2-disclaimer {
    color: rgba(242, 242, 238, 0.6) !important;
}

body.landing-page.journal-page .landing-footer-v2 .footer-v2-link:hover {
    color: var(--je-accent) !important;
}

body.landing-page.journal-page .landing-footer-v2 .footer-v2-top,
body.landing-page.journal-page .landing-footer-v2 .footer-v2-bottom,
body.landing-page.journal-page .landing-footer-v2 .footer-v2-trust-card,
body.landing-page.journal-page .landing-footer-v2 .footer-v2-col-sep {
    border-color: rgba(242, 242, 238, 0.14) !important;
}

body.landing-page.journal-page .landing-footer-v2 .footer-v2-trust-card {
    background: transparent !important;
    border-radius: 0 !important;
}

body.landing-page.journal-page .landing-footer-v2 .footer-v2-trust-icon,
body.landing-page.journal-page .landing-footer-v2 .footer-v2-social-link {
    background: transparent !important;
    border: 1px solid rgba(242, 242, 238, 0.22) !important;
    border-radius: 0 !important;
    color: #f2f2ee !important;
}

body.landing-page.journal-page .landing-footer-v2 .footer-v2-primary-link {
    background: var(--je-accent) !important;
    border-radius: 0 !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 0.7rem !important;
}

body.landing-page.journal-page .landing-footer-v2 .footer-v2-primary-link-alt {
    background: transparent !important;
    border: 1px solid rgba(242, 242, 238, 0.28) !important;
    color: #f2f2ee !important;
    border-radius: 0 !important;
}

/* ==========================================================================
   14. МОБИЛЬНЫЙ
   ========================================================================== */

@media (max-width: 900px) {
    body.journal-page .jpro-hero-grid,
    body.journal-page .jpro-section-head,
    body.journal-page--article .journal-article-layout {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.journal-page--article .journal-sidebar {
        position: static;
        order: 2;
    }
}

@media (max-width: 768px) {
    body.journal-page .jpro-hero {
        padding-top: 92px !important;
    }

    body.journal-page .jpro-hero-title {
        font-size: clamp(2.1rem, 10vw, 3rem) !important;
        line-height: 0.94 !important;
    }

    body.journal-page .jpro-section-title,
    body.journal-page .journal-section-title {
        font-size: clamp(1.55rem, 7.4vw, 2.1rem) !important;
        max-width: none;
    }

    body.journal-page--article h1 {
        font-size: clamp(1.75rem, 8.4vw, 2.4rem) !important;
        max-width: none;
    }

    body.journal-page--article .journal-article-main > p:first-of-type {
        font-size: 1.14rem !important;
    }

    body.journal-page--article .journal-article-main p,
    body.journal-page--article .journal-article-main li {
        font-size: 1.06rem !important;
        line-height: 1.72 !important;
    }

    /* Ряд оглавления на телефоне: превью уходит, остаётся заголовок и мета. */
    body.journal-page #media-new .jpro-mag-tile {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 14px;
        padding: 16px 0 !important;
    }

    body.journal-page #media-new .jpro-mag-media {
        display: none !important;
    }

    body.journal-page .jpro-metric {
        padding: 14px 12px 4px !important;
    }

    body.journal-page .jpro-rubric {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }

    body.journal-page .jpro-rubric-card {
        min-height: 108px;
        padding: 16px 14px !important;
    }
}

/* ==========================================================================
   15. ДОСТУПНОСТЬ
   ========================================================================== */

body.journal-page a:focus-visible,
body.journal-page button:focus-visible {
    outline: 2px solid var(--je-accent);
    outline-offset: 3px;
    border-radius: 0;
}

@media (prefers-reduced-motion: reduce) {
    body.journal-page * {
        transition-duration: 0.001ms !important;
        animation-duration: 0.001ms !important;
    }
}

/* ==========================================================================
   16. ДЕКОР, КОТОРЫЙ МЕШАЕТ
   --------------------------------------------------------------------------
   В исходном слое у карточек направлений и инструментов есть декоративные
   `::before` — большие радиальные свечения. Брендовый слой перекрасил их в
   оранжевый, и на светлой бумаге они превратились в оранжевые кляксы под
   текстом. В редакционном языке декора нет вовсе: структуру держат линии,
   номера и типографика.
   ========================================================================== */

body.journal-page .jpro-pillar::before,
body.journal-page .jpro-pillar::after,
body.journal-page .jpro-tool::before,
body.journal-page .jpro-tool::after,
body.journal-page .jpro-dist-card::before,
body.journal-page .jpro-dist-card::after,
body.journal-page .jpro-strip-card::before,
body.journal-page .jpro-jk::before,
body.journal-page .jpro-conversion::before,
body.journal-page .jpro-conversion::after,
body.journal-page .jpro-guide-card::before {
    display: none !important;
}

/* ==========================================================================
   17. МЕТКИ ПОВЕРХ ФОТО
   --------------------------------------------------------------------------
   Метку рубрики, которая лежит НА изображении, нельзя оставлять просто
   оранжевым текстом: на светлом кадре она исчезает. Здесь плашка не украшение,
   а условие читаемости — поэтому она чернильная и прямоугольная.
   ========================================================================== */

body.journal-page .jpro-art-cover .jpro-art-tag,
body.journal-page .jpro-mag-media .jpro-mag-tag,
body.journal-page .jpro-room-cover .jpro-room-tag,
body.journal-page .jpro-jk-cover .jpro-jk-cover-tag,
body.journal-page .jpro-guide-cover .jpro-guide-badge,
body.journal-page .journal-card-media .journal-guide-media-tag {
    position: absolute;
    top: 0;
    left: 0;
    background: var(--je-ink) !important;
    color: #f2f2ee !important;
    padding: 7px 11px !important;
    border-radius: 0 !important;
    letter-spacing: 0.14em;
    z-index: 2;
}

/* Счётчик идей на обложке комнаты — тем же языком, но в другом углу. */
body.journal-page .jpro-room-counter {
    background: var(--je-ink) !important;
    color: #f2f2ee !important;
    border-radius: 0 !important;
    padding: 6px 10px !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.1em;
}

/* ==========================================================================
   18. ПОЛОСА НАПРАВЛЕНИЙ
   --------------------------------------------------------------------------
   `.jpro-strip` выходила за правый край: пять карточек фиксированной ширины в
   строке без переноса. Делаем сетку, которая честно считает доступное место.
   ========================================================================== */

body.journal-page .jpro-strip {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0 !important;
    border-top: 1px solid var(--je-line);
    border-left: 1px solid var(--je-line);
}

body.journal-page .jpro-strip-card {
    border: none !important;
    border-right: 1px solid var(--je-line) !important;
    border-bottom: 1px solid var(--je-line) !important;
    padding: 18px 18px !important;
    min-width: 0;
}

body.journal-page .jpro-strip-text {
    min-width: 0;
    overflow-wrap: break-word;
}

/* ==========================================================================
   19. СЕТКИ КАРТОЧЕК — ОДНА ЛИНЕЙКА ВМЕСТО ПЯТИ РАЗНЫХ
   --------------------------------------------------------------------------
   Секции собирались независимо, и колонок в них было то три, то пять, то
   четыре. Ровный ритм колонок — то, что отличает издание от набора блоков.
   ========================================================================== */

body.journal-page .jpro-pillars-grid,
body.journal-page .jpro-tools-grid,
body.journal-page .jpro-rooms,
body.journal-page .jpro-guides-grid,
body.journal-page .jpro-trust-grid,
body.journal-page .jpro-dist-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)) !important;
    gap: 0 !important;
    border-top: 1px solid var(--je-line);
    border-left: 1px solid var(--je-line);
}

body.journal-page .jpro-pillars-grid > *,
body.journal-page .jpro-tools-grid > *,
body.journal-page .jpro-rooms > *,
body.journal-page .jpro-guides-grid > *,
body.journal-page .jpro-trust-grid > *,
body.journal-page .jpro-dist-grid > * {
    border: none !important;
    border-right: 1px solid var(--je-line) !important;
    border-bottom: 1px solid var(--je-line) !important;
    min-width: 0;
}

body.journal-page .jpro-pillar,
body.journal-page .jpro-tool,
body.journal-page .jpro-trust-card,
body.journal-page .jpro-dist-card {
    padding: 24px 22px !important;
}

/* Тёмная секция: линии светлые, иначе сетка на чёрном не видна. */
body.journal-page .jpro-section--dark .jpro-dist-grid,
body.journal-page .jpro-section--dark .jpro-dist-grid > * {
    border-color: rgba(242, 242, 238, 0.16) !important;
}

/* ==========================================================================
   20. ОДНА БУМАГА НА ВСЮ СТРАНИЦУ
   --------------------------------------------------------------------------
   Полосы «серая — бежевая — серая» остались от прежней темы: каждая секция
   красила себе фон сама. На длинной странице это читается как склейка из
   чужих блоков. Бумага одна, разделяют линии; исключение — намеренно
   инверсные секции.
   ========================================================================== */

body.journal-page section:not(.jpro-section--dark):not(.jpro-conversion),
body.journal-page .jpro-section:not(.jpro-section--dark),
body.journal-page .jpro-search-section,
body.journal-page .journal-featured-media,
body.journal-page .jpro-strip {
    background: transparent !important;
    background-image: none !important;
}

/* ==========================================================================
   21. КРОШКИ НЕ ДОЛЖНЫ ЧИТАТЬСЯ ПЕРВЫМИ
   --------------------------------------------------------------------------
   После перевода в КАПС крошки стали заметнее заголовка: подчёркнутые
   прописные в две строки — это первое, что ловит глаз, а сообщают они меньше
   всего. Плюс последняя крошка дублирует заголовок, который идёт следом.
   Убираем показ последней крошки — в разметке и в JSON-LD она остаётся, для
   поиска цепочка не меняется.
   ========================================================================== */

body.journal-page .jpro-breadcrumb,
body.journal-page .journal-breadcrumb {
    font-size: 0.62rem !important;
    letter-spacing: 0.16em;
    margin-bottom: 18px !important;
}

body.journal-page .jpro-breadcrumb a,
body.journal-page .journal-breadcrumb-list a {
    text-decoration: none !important;
    border-bottom: none !important;
}

body.journal-page .journal-breadcrumb-list li:last-child,
body.journal-page .jpro-breadcrumb-list li:last-child,
body.journal-page .jpro-breadcrumb ol li:last-child {
    display: none !important;
}

/* Тёплый градиент над статьёй остался от прежней темы. Бумага одна. */
body.journal-page--article .journal-article-hero,
body.journal-page--article .journal-page-wrap {
    background: transparent !important;
    background-image: none !important;
}

body.journal-page--article .journal-article-hero {
    padding-top: clamp(88px, 8vw, 116px) !important;
}

/* Мета-строка автора и даты: тише заголовка, но читаемая. */
body.journal-page--article .journal-article-meta,
body.journal-page--article .journal-meta {
    font-size: 0.7rem !important;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--je-muted) !important;
    padding-top: 16px;
    border-top: 1px solid var(--je-line);
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

/* ==========================================================================
   22. ТЕГИ СТАТЬИ — СТРОКОЙ, А НЕ СПИСКОМ
   --------------------------------------------------------------------------
   Теги в статье используют тот же класс, что ссылки бокового оглавления
   (`journal-side-link`), поэтому вставали столбиком — каждый на своей строке
   с разделителем. Пятнадцать тегов давали пятнадцать строк пустоты. Внутри
   панели тегов тот же класс работает как строка.
   ========================================================================== */

body.journal-page .journal-topic-panel {
    display: flex !important;
    flex-wrap: wrap;
    gap: 8px 10px;
    background: none !important;
    border: none !important;
    border-top: 1px solid var(--je-line) !important;
    border-radius: 0 !important;
    padding: 16px 0 0 !important;
}

body.journal-page .journal-topic-panel .journal-side-link {
    display: inline-flex !important;
    padding: 6px 10px !important;
    border: 1px solid var(--je-line) !important;
    border-bottom: 1px solid var(--je-line) !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.02em;
    color: var(--je-ink-2) !important;
    text-decoration: none !important;
}

body.journal-page .journal-topic-panel .journal-side-link:hover {
    background: var(--je-ink) !important;
    border-color: var(--je-ink) !important;
    color: #f2f2ee !important;
    padding-left: 10px !important;
}

/* ==========================================================================
   23. ПОСЛЕДНИЕ ОСТАТКИ ПРЕЖНЕЙ ТЕМЫ НА СТРАНИЦАХ ТЕМ И ТЕГОВ
   ========================================================================== */

/* Градиентная подложка героя задавалась переменной `--jpro-page-hero-bg` —
   переменную и перекрываем, иначе она всплывает на каждой новой странице. */
body.journal-page .jpro-page-hero,
body.journal-page .jpro-hero {
    --jpro-page-hero-bg: none;
    background: transparent !important;
    background-image: none !important;
}

/* Разделитель крошек — отдельная иконка в разметке, а не псевдоэлемент:
   после скрытия последней крошки он оставался висеть в воздухе. */
body.journal-page .jpro-breadcrumb ol > i:last-child,
body.journal-page .jpro-breadcrumb ol > *:last-child.bi {
    display: none !important;
}

/* Иконка в надзаголовке: черта уже сказала «раздел», иконка повторяет. */
body.journal-page .jpro-eyebrow i,
body.journal-page .jpro-hero-kicker i,
body.journal-page .journal-section-eyebrow i {
    display: none !important;
}

/* ==========================================================================
   24. ФОН СТРАНИЦЫ И ХВОСТ КРОШЕК — по данным замера
   --------------------------------------------------------------------------
   Замер (`.qa/probe_tema.py`) показал: тёплые пятна рисует не герой, а сам
   `body.journal-page--topic` через background-image из прежней темы. И
   разделитель крошек лежит ВНУТРИ каждого `<li>`, поэтому после скрытия
   последней крошки «стрелка в никуда» осталась у предыдущей.
   ========================================================================== */

body.journal-page,
body.journal-page--topic,
body.journal-page--topic-index,
body.journal-page--article,
body.journal-page--media {
    background-image: none !important;
}

body.journal-page .jpro-breadcrumb ol li:nth-last-child(2) > i,
body.journal-page .journal-breadcrumb-list li:nth-last-child(2) > i {
    display: none !important;
}

/* ==========================================================================
   25. БУМАГА: КТО СИЛЬНЕЕ
   --------------------------------------------------------------------------
   Фон страницы держал `landing-light.css` правилом
   `body.landing-page:not(.landing-page--home)` — специфичность (0,2,1), выше
   нашей `body.journal-page` (0,1,1), поэтому бежевый оставался при любом
   `!important` с нашей стороны. Берём на один уровень больше и фиксируем
   белый лист. Это не «война важностей»: слой журнала обязан переопределять
   слой лендинга, потому что грузится специально для журнала.
   ========================================================================== */

html body.landing-page.journal-page,
html body.landing-page.journal-page main,
html body.landing-page.journal-page .journal-page-wrap {
    background: var(--je-paper) !important;
    background-image: none !important;
}

/* ==========================================================================
   26. ПОЛОСА ПРОГРЕССА ЧТЕНИЯ
   --------------------------------------------------------------------------
   Длинный материал без индикатора кажется бесконечным — это главная причина,
   по которой закрывают статью на середине. Делается без JavaScript: анимация,
   привязанная к прокрутке (`animation-timeline: scroll()`). Где браузер этого
   не умеет, полосы просто нет — верстка не ломается, поведение прежнее.
   ========================================================================== */

@supports (animation-timeline: scroll()) {
    body.journal-page--article::before {
        content: "";
        position: fixed;
        top: 0;
        left: 0;
        height: 3px;
        width: 100%;
        background: var(--je-accent);
        transform-origin: 0 50%;
        transform: scaleX(0);
        z-index: 1200;
        animation: je-read-progress linear;
        animation-timeline: scroll(root block);
    }

    @keyframes je-read-progress {
        from { transform: scaleX(0); }
        to { transform: scaleX(1); }
    }
}

/* ==========================================================================
   27. КРУПНЫЕ ЭКРАНЫ
   --------------------------------------------------------------------------
   На мониторе 1600+ строка текста статьи не должна растягиваться: читаемая
   мера — около 75 знаков, дальше глаз теряет начало следующей строки.
   ========================================================================== */

@media (min-width: 1600px) {
    body.journal-page {
        --je-max: 1560px;
    }

    body.journal-page--article .journal-article-layout {
        grid-template-columns: minmax(0, 1fr) 340px;
    }

    body.journal-page--article .journal-article-main {
        max-width: 820px;
    }
}

/* ==========================================================================
   28. КРОШКИ НА ТЕЛЕФОНЕ
   --------------------------------------------------------------------------
   В статье рубрика уже стоит отдельной меткой над заголовком, а крошки на
   узком экране занимали две строки и повторяли её же. Скрываем показ: разметка
   и JSON-LD не меняются, цепочка для поиска остаётся.
   ========================================================================== */

@media (max-width: 768px) {
    body.journal-page--article .journal-breadcrumb,
    body.journal-page--article .jpro-breadcrumb {
        display: none !important;
    }

    /* На страницах тем и тегов крошки нужны — там это единственный путь
       наверх. Делаем строкой с прокруткой вместо переноса. */
    body.journal-page--topic .jpro-breadcrumb ol,
    body.journal-page--topic-index .jpro-breadcrumb ol {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        scrollbar-width: none;
    }

    body.journal-page--topic .jpro-breadcrumb ol::-webkit-scrollbar {
        display: none;
    }

    body.journal-page--topic .jpro-breadcrumb li {
        white-space: nowrap;
    }
}

/* ==========================================================================
   29. БЛОК ДАННЫХ СТАНДАРТА
   --------------------------------------------------------------------------
   Единственное место на странице темы, где лежат наши собственные цифры:
   норма выработки, звено, пауза, обязательные кадры, критерии приёмки. Он
   должен читаться как документ, а не как рекламная плашка — поэтому чернильная
   рамка, табличная сетка и никаких заливок.
   ========================================================================== */

body.journal-page .journal-standard {
    border: 2px solid var(--je-ink);
    padding: 26px 26px 22px;
    margin: 2.6em 0;
    max-width: 820px;
}

body.journal-page .journal-standard__eyebrow {
    display: inline-block;
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--je-accent-ink);
}

body.journal-page .journal-standard__title {
    font-size: clamp(1.2rem, 1.9vw, 1.6rem) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em;
    text-transform: none !important;
    margin: 10px 0 8px !important;
    border-top: none !important;
    padding-top: 0 !important;
}

body.journal-page .journal-standard__lead {
    font-size: 0.96rem !important;
    line-height: 1.6 !important;
    color: var(--je-muted) !important;
    margin: 0 0 20px !important;
    max-width: 60ch;
}

/* Факты — сетка «подпись / значение» на линиях. Цифры табличные, иначе
   колонка норм выглядит рваной. */
body.journal-page .journal-standard__facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 0;
    margin: 0;
    border-top: 1px solid var(--je-line);
}

body.journal-page .journal-standard__facts > div {
    padding: 14px 16px 14px 0;
    border-bottom: 1px solid var(--je-line);
}

body.journal-page .journal-standard__facts dt {
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--je-muted);
    font-weight: 700;
    margin-bottom: 6px;
}

body.journal-page .journal-standard__facts dd {
    margin: 0;
    font-size: 1.06rem;
    font-weight: 750;
    color: var(--je-ink);
    font-variant-numeric: tabular-nums;
}

body.journal-page .journal-standard__facts dd small {
    display: block;
    margin-top: 4px;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--je-muted);
}

body.journal-page .journal-standard__checks {
    margin-top: 20px;
}

body.journal-page .journal-standard__checks h3 {
    font-size: 0.68rem !important;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--je-muted) !important;
    margin: 0 0 10px !important;
}

body.journal-page .journal-standard__checks ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

body.journal-page .journal-standard__checks li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 8px;
    font-size: 1rem !important;
    line-height: 1.6 !important;
}

body.journal-page .journal-standard__checks li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 10px;
    height: 2px;
    background: var(--je-accent);
}

body.journal-page .journal-standard__mistakes {
    margin: 18px 0 0 !important;
    padding-top: 14px;
    border-top: 1px solid var(--je-line);
    font-size: 0.98rem !important;
    line-height: 1.6 !important;
    color: var(--je-ink-2) !important;
}

@media (max-width: 768px) {
    body.journal-page .journal-standard {
        padding: 20px 18px 18px;
    }

    body.journal-page .journal-standard__facts {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ==========================================================================
   30. ЗАГОЛОВОК В ЧЕРНИЛЬНОЙ ВРЕЗКЕ
   --------------------------------------------------------------------------
   `journal-cta-band__title` наследовал серый цвет от светлой темы, а сама
   врезка стала чёрной — серый текст на чёрном фоне читается плохо и выглядит
   как отключённый элемент.
   ========================================================================== */

body.journal-page .journal-cta-band,
body.journal-page .journal-cta-band * {
    color: #f2f2ee !important;
}

body.journal-page .journal-cta-band__title {
    font-size: clamp(1.2rem, 2vw, 1.7rem) !important;
    line-height: 1.16 !important;
    letter-spacing: -0.02em;
    font-weight: 800 !important;
    margin: 0 0 10px !important;
}

body.journal-page .journal-cta-band .journal-btn-primary {
    background: var(--je-accent) !important;
    color: #fff !important;
    margin-top: 16px;
}

body.journal-page .journal-cta-band .journal-btn-primary:hover {
    background: #fff !important;
    color: var(--je-ink) !important;
}