/* ==========================================================================
   journal-brand-light.css — белая редакционная тема журнала на языке бренда
   --------------------------------------------------------------------------
   ЗАЧЕМ. Журнал был светлым, но не нашим: акцент бирюзовый (#0f766e), второй
   акцент голубой (#0ea5e9), фоны с холодными градиентами, чернила синеватые
   (#0b1220). Бренд OCC — тёплый оранжевый #FF641E на почти чёрном. Человек
   уходил со статьи на лендинг и попадал в другой продукт: одно и то же имя,
   два разных языка. Доверие теряется именно здесь.

   ЧТО ДЕЛАЕТ. Накладывается ПОСЛЕДНИМ поверх journal.css / journal-pro.css /
   landing-*.css и переопределяет только цвет, типографику и плотность.
   Разметку, классы, скрипты и структуру страниц не трогает — переход
   обратимый: убрать один <link> и вернётся прежний вид.

   ПРАВИЛА ЦВЕТА (то, чем эта тема отличается от «залить всё оранжевым»):
   * оранжевый — акцент, а не фон: метки, подчёркивания, главная кнопка,
     линия при наведении, активное состояние. Заливки блоков остаются белыми;
   * оранжевый в ТЕКСТЕ берётся тёмный (#C2410C, контраст 4.9:1 на белом);
     #FF641E на белом даёт 3.1:1 и для текста не годится;
   * нейтрали тёплые (#14110F, #6F6862, #FAF8F6), а не синеватые: рядом с
     оранжевым холодный серый выглядит грязным;
   * фон статьи — белая бумага. Текст читают, а не рассматривают.
   ========================================================================== */

body.journal-page {
    /* ---- Чернила и бумага ---- */
    --jb-ink: #14110f;
    --jb-ink-2: #3d3833;
    --jb-muted: #6f6862;
    --jb-line: rgba(20, 17, 15, 0.10);
    --jb-line-2: rgba(20, 17, 15, 0.18);
    --jb-paper: #ffffff;
    --jb-paper-2: #faf8f6;
    --jb-paper-3: #f4f1ed;

    /* ---- Бренд ---- */
    --jb-accent: #ff641e;          /* заливки, иконки, полосы */
    --jb-accent-ink: #c2410c;      /* текст-ссылка на белом */
    --jb-accent-deep: #8f2d06;     /* hover текста */
    --jb-accent-soft: rgba(255, 100, 30, 0.10);
    --jb-accent-line: rgba(255, 100, 30, 0.38);

    /* ---- Тени тёплые: холодная тень на тёплой бумаге читается как грязь ---- */
    --jb-shadow-sm: 0 2px 8px rgba(20, 17, 15, 0.05);
    --jb-shadow-md: 0 10px 28px rgba(20, 17, 15, 0.08);
    --jb-shadow-lg: 0 20px 48px rgba(20, 17, 15, 0.10);

    --jb-radius: 14px;
    --jb-radius-sm: 10px;
    --jb-read: 720px;              /* ширина колонки чтения */

    /* ---- Переопределение токенов существующих слоёв ---- */
    --jpro-ink: var(--jb-ink);
    --jpro-ink-soft: var(--jb-ink-2);
    --jpro-muted: var(--jb-muted);
    --jpro-line: var(--jb-line);
    --jpro-line-strong: var(--jb-line-2);
    --jpro-card: var(--jb-paper);
    --jpro-card-soft: var(--jb-paper);
    --jpro-bg-1: var(--jb-paper-2);
    --jpro-bg-2: var(--jb-paper-3);
    --jpro-accent: var(--jb-accent-ink);
    --jpro-accent-2: var(--jb-accent);
    --jpro-accent-3: #ffae7a;
    --jpro-accent-warm: var(--jb-accent);
    --jpro-shadow-sm: var(--jb-shadow-sm);
    --jpro-shadow-md: var(--jb-shadow-md);
    --jpro-shadow-lg: var(--jb-shadow-lg);
    --jpro-radius: var(--jb-radius);
    --jpro-radius-sm: var(--jb-radius-sm);

    --journal-bg: var(--jb-paper);
    --journal-ink: var(--jb-ink);
    --journal-muted: var(--jb-muted);
    --journal-line: var(--jb-line);
    --journal-card: var(--jb-paper);
    --journal-purple: var(--jb-accent-ink);
    --journal-violet: var(--jb-accent);
    --journal-blue: var(--jb-accent-ink);
    --journal-amber: var(--jb-accent);

    background: var(--jb-paper);
    color: var(--jb-ink);
    /* Системный стек — тот же, что во всём продукте. Своего вебшрифта в
       проекте нет (vendor/inter объявлен через local()), и подключать его
       ради журнала значит грузить мегабайт на статью. */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
    font-feature-settings: "kern" 1, "liga" 1;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Числа в таблицах и метриках — табличные, иначе колонки цен «пляшут». */
body.journal-page table,
body.journal-page .jpro-metric-value,
body.journal-page .jpro-jk-price,
body.journal-page .jtag-chip-count,
body.journal-page .jpro-topic-group-count {
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   1. ТИПОГРАФИКА: заголовок перестаёт съедать первый экран
   --------------------------------------------------------------------------
   Было 86 px на десктопе — заголовок статьи занимал экран целиком, и текста
   на первом экране не оставалось вовсе. В редакционном формате первым экраном
   человек должен начать ЧИТАТЬ, а не разглядывать шрифт.
   ========================================================================== */

body.journal-page h1,
body.journal-page .jpro-hero-title,
body.journal-page .jpro-topic-title,
body.journal-page .journal-title,
body.journal-page .jpro-page-hero h1 {
    font-size: clamp(1.95rem, 3.1vw, 2.85rem) !important;
    line-height: 1.14 !important;
    letter-spacing: -0.022em;
    font-weight: 800;
    color: var(--jb-ink) !important;
    /* Градиентный текст в заголовках убираем: он мешает читать и на печати
       превращается в пустоту. */
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    /* 26ch — примерно четыре-пять слов в строке: заголовок читается блоком и
       при этом не растягивается на всю ширину экрана, где глаз теряет строку. */
    max-width: 26ch;
}

body.journal-page .jpro-hero-title .jpro-hero-accent,
body.journal-page .journal-title span {
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--jb-accent-ink) !important;
}

body.journal-page h2 {
    font-size: clamp(1.35rem, 1.9vw, 1.7rem);
    line-height: 1.25;
    letter-spacing: -0.015em;
    font-weight: 780;
    color: var(--jb-ink);
}

body.journal-page h3 {
    font-size: clamp(1.08rem, 1.4vw, 1.24rem);
    line-height: 1.3;
    font-weight: 740;
    color: var(--jb-ink);
}

/* Лид под заголовком: крупнее корпуса, но не второй заголовок. */
body.journal-page .jpro-hero-lead,
body.journal-page .jpro-topic-lead,
body.journal-page .journal-lead,
body.journal-page .jpro-page-hero p {
    font-size: 1.06rem;
    line-height: 1.62;
    color: var(--jb-ink-2);
    max-width: 62ch;
}

/* Надзаголовок-рубрика — единственное место, где оранжевый работает текстом. */
body.journal-page .jpro-eyebrow,
body.journal-page .jpro-hero-kicker,
body.journal-page .journal-kicker,
body.journal-page .journal-section-eyebrow,
body.journal-page .jpro-guide-badge {
    color: var(--jb-accent-ink) !important;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    font-size: 0.72rem;
    font-weight: 800;
}

/* ==========================================================================
   2. ССЫЛКИ
   ========================================================================== */

body.journal-page a {
    color: var(--jb-accent-ink);
    text-decoration-color: var(--jb-accent-line);
    text-underline-offset: 3px;
}

body.journal-page a:hover {
    color: var(--jb-accent-deep);
    text-decoration-color: var(--jb-accent);
}

/* Ссылки-карточки и навигация не подчёркиваются: подчёркивание — признак
   ссылки в ТЕКСТЕ, в интерфейсе оно превращается в шум. */
body.journal-page .jpro-art-card,
body.journal-page .jpro-mag-tile,
body.journal-page .jpro-related-card,
body.journal-page .jpro-topic-card,
body.journal-page .jpro-guide-card,
body.journal-page .jpro-rubric-card,
body.journal-page .jpro-strip-card,
body.journal-page .jpro-room,
body.journal-page .jpro-city,
body.journal-page .jpro-jk,
body.journal-page .journal-card,
body.journal-page .jpro-chip,
body.journal-page .jpro-pill,
body.journal-page .jtag-chip,
body.journal-page .jpro-topic-cloud-chip,
body.journal-page .navbar-link,
body.journal-page .footer-v2-link {
    text-decoration: none;
}

/* ==========================================================================
   3. ШАПКА
   --------------------------------------------------------------------------
   Белая, с волосяной линией и одним акцентом — активным разделом. Логотип
   остаётся чёрным: оранжевым в шапке горит только действие.
   ========================================================================== */

body.journal-page .landing-navbar {
    background: rgba(255, 255, 255, 0.94) !important;
    backdrop-filter: saturate(140%) blur(10px);
    border-bottom: 1px solid var(--jb-line) !important;
    box-shadow: none !important;
}

body.journal-page .navbar-logo,
body.journal-page .navbar-logo-text {
    color: var(--jb-ink) !important;
}

body.journal-page .navbar-logo-sep,
body.journal-page .navbar-logo-icon {
    color: var(--jb-accent) !important;
}

body.journal-page .navbar-logo-icon {
    background: linear-gradient(135deg, #c2410c, #ff641e 55%, #ffae7a) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px rgba(255, 100, 30, 0.28);
}

body.journal-page .navbar-logo-muted {
    color: var(--jb-muted) !important;
}

body.journal-page .navbar-link {
    color: var(--jb-ink-2) !important;
    font-weight: 600;
    border-radius: 8px;
}

body.journal-page .navbar-link:hover {
    color: var(--jb-accent-ink) !important;
    background: var(--jb-accent-soft) !important;
}

body.journal-page .navbar-btn {
    background: linear-gradient(135deg, #ff641e, #e8500f) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 6px 18px rgba(255, 100, 30, 0.28) !important;
}

body.journal-page .navbar-btn:hover {
    background: linear-gradient(135deg, #e8500f, #c2410c) !important;
    box-shadow: 0 8px 22px rgba(255, 100, 30, 0.34) !important;
}

body.journal-page .navbar-mobile-toggle {
    color: var(--jb-ink) !important;
    border-color: var(--jb-line-2) !important;
}

/* ==========================================================================
   4. ГЕРОИ И СЕКЦИИ: холодные градиенты → белая бумага
   ========================================================================== */

body.journal-page .jpro-hero,
body.journal-page .jpro-page-hero,
body.journal-page .journal-hero,
body.journal-page .journal-media-hero {
    background: var(--jb-paper) !important;
    border-bottom: 1px solid var(--jb-line);
}

/* Тёплая подложка вместо голубой — только для секций, которые обязаны
   отделяться от белого. */
body.journal-page .jpro-section--muted,
body.journal-page .journal-section--muted,
body.journal-page .jpro-strip,
body.journal-page .journal-featured-media {
    background: var(--jb-paper-2) !important;
}

body.journal-page .jpro-section {
    background: var(--jb-paper);
}

/* Декоративные разноцветные полосы над карточками: три цвета в одной полосе
   читались как три разных смысла. Оставляем один брендовый штрих. */
body.journal-page .jpro-jk::before,
body.journal-page .jpro-dist-card::before,
body.journal-page .jpro-conversion::before,
body.journal-page .jpro-tool::before {
    background: linear-gradient(90deg, var(--jb-accent), #ffae7a) !important;
}

body.journal-page .jpro-section-title,
body.journal-page .jpro-topic-head h2,
body.journal-page .journal-section-title {
    color: var(--jb-ink) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
}

body.journal-page .jpro-section-lead,
body.journal-page .journal-section-lead {
    color: var(--jb-muted) !important;
    max-width: 68ch;
}

/* ==========================================================================
   5. КНОПКИ
   --------------------------------------------------------------------------
   Главное действие одно и оно оранжевое. Всё остальное — белое с чернильной
   линией: когда «важных» кнопок три, важных нет ни одной.
   ========================================================================== */

body.journal-page .jpro-btn,
body.journal-page .journal-btn {
    border-radius: 11px;
    font-weight: 700;
    letter-spacing: -0.01em;
    transition: background 0.16s, border-color 0.16s, color 0.16s,
        box-shadow 0.16s, transform 0.16s;
}

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,
body.journal-page .jpro-conversion .jpro-btn-primary,
body.journal-page .jpro-room-tab--active {
    background: linear-gradient(135deg, #ff641e, #e8500f) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 8px 22px rgba(255, 100, 30, 0.26) !important;
}

body.journal-page .jpro-btn-primary:hover,
body.journal-page .journal-btn-primary:hover,
body.journal-page .jpro-conversion .jpro-btn-primary:hover {
    background: linear-gradient(135deg, #e8500f, #c2410c) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

body.journal-page .jpro-btn-ghost,
body.journal-page .journal-btn-ghost,
body.journal-page .jpro-btn:not(.jpro-btn-primary) {
    background: var(--jb-paper) !important;
    color: var(--jb-ink) !important;
    border: 1px solid var(--jb-line-2) !important;
    box-shadow: none !important;
}

body.journal-page .jpro-btn-ghost:hover,
body.journal-page .journal-btn-ghost:hover,
body.journal-page .jpro-btn:not(.jpro-btn-primary):hover {
    border-color: var(--jb-accent-line) !important;
    color: var(--jb-accent-ink) !important;
    background: var(--jb-accent-soft) !important;
}

/* ==========================================================================
   6. МЕТКИ, ЧИПЫ, ПИЛЮЛИ
   ========================================================================== */

body.journal-page .jpro-chip,
body.journal-page .jpro-pill,
body.journal-page .jpro-tag-pill,
body.journal-page .jtag-chip,
body.journal-page .jpro-topic-cloud-chip,
body.journal-page .journal-topic {
    background: var(--jb-paper-2) !important;
    border: 1px solid var(--jb-line) !important;
    color: var(--jb-ink-2) !important;
    border-radius: 999px;
    font-weight: 600;
}

body.journal-page .jpro-chip:hover,
body.journal-page .jpro-pill:hover,
body.journal-page .jpro-tag-pill:hover,
body.journal-page .jtag-chip:hover,
body.journal-page .jpro-topic-cloud-chip:hover,
body.journal-page a.journal-topic:hover {
    background: var(--jb-accent-soft) !important;
    border-color: var(--jb-accent-line) !important;
    color: var(--jb-accent-ink) !important;
}

body.journal-page a.journal-topic:hover::before {
    color: var(--jb-accent) !important;
}

/* Тег с большим количеством материалов — сильный, он и выделен заливкой. */
body.journal-page .jtag-chip--strong {
    background: var(--jb-ink) !important;
    border-color: var(--jb-ink) !important;
    color: #fff !important;
}

body.journal-page .jtag-chip--strong:hover {
    background: var(--jb-accent-ink) !important;
    border-color: var(--jb-accent-ink) !important;
    color: #fff !important;
}

body.journal-page .jtag-chip-count,
body.journal-page .jpro-topic-group-count,
body.journal-page .jpro-room-counter {
    color: var(--jb-muted) !important;
    font-weight: 700;
}

/* Метка рубрики на карточке и обложке. */
body.journal-page .jpro-art-tag,
body.journal-page .jpro-mag-tag,
body.journal-page .jpro-room-tag,
body.journal-page .jpro-jk-cover-tag,
body.journal-page .jpro-related-cat,
body.journal-page .journal-guide-media-tag,
body.journal-page .jpro-guide-badge {
    background: rgba(255, 255, 255, 0.94) !important;
    color: var(--jb-accent-ink) !important;
    border: 1px solid var(--jb-accent-line) !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.66rem;
    font-weight: 800;
}

/* ==========================================================================
   7. КАРТОЧКИ
   --------------------------------------------------------------------------
   Белая бумага, волосяная линия, при наведении — брендовая линия и подъём.
   Никаких цветных заливок: в списке из девяти карточек цвет перестаёт быть
   информацией и становится обоями.
   ========================================================================== */

body.journal-page .jpro-art-card,
body.journal-page .jpro-mag-tile,
body.journal-page .jpro-related-card,
body.journal-page .jpro-topic-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 .jpro-metric,
body.journal-page .journal-card,
body.journal-page .journal-side-card,
body.journal-page .jpro-topic-group,
body.journal-page .jpro-faq-item,
body.journal-page .jphoto {
    background: var(--jb-paper) !important;
    border: 1px solid var(--jb-line) !important;
    border-radius: var(--jb-radius) !important;
    box-shadow: none !important;
    transition: border-color 0.16s, box-shadow 0.16s, transform 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-topic-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 {
    border-color: var(--jb-accent-line) !important;
    box-shadow: var(--jb-shadow-md) !important;
    transform: translateY(-2px);
}

body.journal-page .jpro-art-card h3,
body.journal-page .jpro-mag-tile h3,
body.journal-page .jpro-related-title,
body.journal-page .jpro-topic-card-text,
body.journal-page .journal-card-body h3,
body.journal-page .jpro-topic-group-title,
body.journal-page .jpro-city-name {
    color: var(--jb-ink) !important;
}

body.journal-page .jpro-art-meta,
body.journal-page .jpro-mag-meta,
body.journal-page .jpro-related-meta,
body.journal-page .jpro-related-sub,
body.journal-page .journal-meta,
body.journal-page .jpro-jk-meta,
body.journal-page .jpro-topic-group-desc {
    color: var(--jb-muted) !important;
}

/* Стрелка «читать» — оранжевая, но только она: это единственное действие
   карточки. */
body.journal-page .jpro-mag-cta,
body.journal-page .jpro-guide-cta,
body.journal-page .jpro-pillar-cta,
body.journal-page .jpro-tool-cta,
body.journal-page .jpro-dist-cta,
body.journal-page .jpro-jk-cta,
body.journal-page .jpro-topic-card-arrow,
body.journal-page .jpro-topic-group-cta,
body.journal-page .journal-card-footer,
body.journal-page .journal-card-footer--cta {
    color: var(--jb-accent-ink) !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    font-weight: 700;
}

body.journal-page .jpro-guide-card:hover .jpro-guide-cta,
body.journal-page .journal-card--guide:hover .journal-card-footer--cta {
    background: none !important;
    color: var(--jb-accent-deep) !important;
    -webkit-text-fill-color: currentColor !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-metric-icon,
body.journal-page .jpro-trust-icon,
body.journal-page .jpro-city-icon,
body.journal-page .jpro-topic-group-icon,
body.journal-page .journal-media-cta-icon {
    background: var(--jb-accent-soft) !important;
    color: var(--jb-accent-ink) !important;
    border: 1px solid var(--jb-accent-line) !important;
    border-radius: 12px !important;
}

body.journal-page .jpro-metric-value {
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--jb-ink) !important;
}

body.journal-page .jpro-metric-label {
    color: var(--jb-muted) !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 .jpro-photo-cover,
body.journal-page .journal-card-media {
    background: var(--jb-paper-3) !important;
    border-radius: calc(var(--jb-radius) - 2px);
    overflow: hidden;
}

/* ==========================================================================
   8. СТАТЬЯ: то, ради чего человек пришёл
   ========================================================================== */

body.journal-page--article .journal-article-main {
    color: var(--jb-ink);
}

body.journal-page--article .journal-article-main > p,
body.journal-page--article .journal-article-main > ul,
body.journal-page--article .journal-article-main > ol,
body.journal-page--article .journal-article-main > blockquote,
body.journal-page--article .journal-article-main > h2,
body.journal-page--article .journal-article-main > h3,
body.journal-page--article .journal-article-main > table {
    max-width: var(--jb-read);
}

body.journal-page--article .journal-article-main p {
    font-size: 1.05rem;
    line-height: 1.72;
    color: var(--jb-ink-2);
    margin: 0 0 1.1em;
}

/* Заголовок раздела отделяется воздухом и волосяной линией — так текст
   делится на главы без «плашек». */
body.journal-page--article .journal-article-main h2 {
    margin: 2.1em 0 0.7em;
    padding-top: 0.85em;
    border-top: 1px solid var(--jb-line);
}

body.journal-page--article .journal-article-main h3 {
    margin: 1.6em 0 0.55em;
}

body.journal-page--article .journal-article-main li {
    font-size: 1.02rem;
    line-height: 1.68;
    color: var(--jb-ink-2);
    margin-bottom: 0.45em;
}

body.journal-page--article .journal-article-main strong {
    color: var(--jb-ink);
    font-weight: 700;
}

/* Ссылка в тексте: цвет плюс подчёркивание. Только цвет — и её не видят
   те, кто различает цвета хуже. */
body.journal-page--article .journal-article-main a {
    color: var(--jb-accent-ink);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: var(--jb-accent-line);
    font-weight: 600;
}

body.journal-page--article .journal-article-main a:hover {
    color: var(--jb-accent-deep);
    text-decoration-color: var(--jb-accent);
}

/* Цитата и врезка: оранжевая полоса слева — единственный «цвет» в тексте. */
body.journal-page blockquote,
body.journal-page .journal-callout {
    margin: 1.6em 0;
    padding: 0.2em 0 0.2em 1.15em;
    border-left: 3px solid var(--jb-accent);
    background: none;
    color: var(--jb-ink);
    font-size: 1.06rem;
    line-height: 1.6;
}

/* Чек-лист и FAQ — редакционные блоки, а не серые коробки. */
body.journal-page .journal-checklist,
body.journal-page .journal-faq-block {
    background: var(--jb-paper-2) !important;
    border: 1px solid var(--jb-line) !important;
    border-left: 3px solid var(--jb-accent) !important;
    border-radius: var(--jb-radius-sm) !important;
    padding: 16px 18px;
    max-width: var(--jb-read);
}

body.journal-page .journal-checklist__title,
body.journal-page .journal-faq-block__title {
    color: var(--jb-ink) !important;
    font-weight: 800;
}

body.journal-page .journal-faq-q,
body.journal-page .jpro-faq-item h3 {
    color: var(--jb-ink) !important;
    font-weight: 740;
}

body.journal-page .journal-faq-a,
body.journal-page .jpro-faq-answer {
    color: var(--jb-ink-2) !important;
}

/* Таблицы: цифры читают, поэтому линии тонкие, шапка тёплая. */
body.journal-page table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.96rem;
    margin: 1.4em 0;
}

body.journal-page table th {
    text-align: left;
    background: var(--jb-paper-2);
    color: var(--jb-ink);
    font-weight: 750;
    border-bottom: 1px solid var(--jb-line-2);
    padding: 10px 12px;
}

body.journal-page table td {
    border-bottom: 1px solid var(--jb-line);
    padding: 10px 12px;
    color: var(--jb-ink-2);
}

body.journal-page table tr:hover td {
    background: var(--jb-accent-soft);
}

/* Фото в статье: подпись — часть материала, а не служебная строка. */
body.journal-page .jphoto-cap,
body.journal-page .jphoto-alt {
    color: var(--jb-muted) !important;
    font-size: 0.84rem;
    line-height: 1.5;
}

body.journal-page .jphoto-src a {
    color: var(--jb-muted) !important;
}

/* ==========================================================================
   9. САЙДБАР И СОДЕРЖАНИЕ
   ========================================================================== */

body.journal-page .journal-side-card {
    background: var(--jb-paper-2) !important;
}

body.journal-page .journal-side-card-heading {
    color: var(--jb-ink) !important;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 800;
}

body.journal-page .journal-side-link {
    color: var(--jb-ink-2) !important;
    border-bottom: 1px solid var(--jb-line);
    font-size: 0.92rem;
    line-height: 1.45;
}

body.journal-page .journal-side-link:hover {
    color: var(--jb-accent-ink) !important;
    border-bottom-color: var(--jb-accent-line);
}

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

/* ==========================================================================
   10. ХЛЕБНЫЕ КРОШКИ
   --------------------------------------------------------------------------
   Крошки — служебная навигация. Раньше они были бирюзовыми и спорили с
   заголовком за внимание. Теперь серые, акцент появляется при наведении.
   ========================================================================== */

body.journal-page .jpro-breadcrumb,
body.journal-page .journal-breadcrumb-list {
    color: var(--jb-muted) !important;
    font-size: 0.82rem;
}

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

body.journal-page .jpro-breadcrumb a:hover,
body.journal-page .journal-breadcrumb-list a:hover {
    color: var(--jb-accent-ink) !important;
    text-decoration: underline;
    text-decoration-color: var(--jb-accent-line);
}

/* ==========================================================================
   11. КОНВЕРСИОННАЯ ПОЛОСА И ФУТЕР
   --------------------------------------------------------------------------
   Полоса перехода в продукт — чернильная, не бирюзовая: это единственное
   тёмное место на белой странице, и поэтому его видно.
   ========================================================================== */

body.journal-page .jpro-conversion,
body.journal-page .journal-cta-band,
body.journal-page .journal-media-cta-card--primary {
    background: linear-gradient(135deg, #14110f 0%, #2a2320 100%) !important;
    color: #fff !important;
    border: none !important;
}

body.journal-page .jpro-conversion h2,
body.journal-page .jpro-conversion p,
body.journal-page .journal-cta-band h2,
body.journal-page .journal-cta-band p {
    color: #fff !important;
    background: none !important;
    -webkit-text-fill-color: currentColor !important;
}

body.journal-page .jpro-conversion .jpro-btn:not(.jpro-btn-primary) {
    background: transparent !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.32) !important;
}

body.journal-page .jpro-conversion .jpro-btn:not(.jpro-btn-primary):hover {
    background: rgba(255, 255, 255, 0.10) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: #fff !important;
}

body.journal-page .footer-v2-trust-icon,
body.journal-page--media .footer-v2-trust-icon {
    background: linear-gradient(135deg, #c2410c, #ff641e 55%, #ffae7a) !important;
    color: #fff !important;
}

body.journal-page .footer-v2-link--accent,
body.journal-page .footer-v2-primary-link {
    color: var(--jb-accent-ink) !important;
}

/* Плавающая кнопка чата: бренд, а не бирюза. */
body.journal-page .float-fab,
body.journal-page .float-chat-single {
    background: linear-gradient(135deg, #ff641e, #e8500f) !important;
    color: #fff !important;
    box-shadow: 0 10px 26px rgba(255, 100, 30, 0.32) !important;
}

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

@media (max-width: 768px) {
    body.journal-page h1,
    body.journal-page .jpro-hero-title,
    body.journal-page .jpro-topic-title,
    body.journal-page .journal-title {
        font-size: clamp(1.62rem, 6.4vw, 2rem) !important;
        max-width: none;
    }

    body.journal-page .jpro-hero-lead,
    body.journal-page .jpro-topic-lead {
        font-size: 1rem;
    }

    body.journal-page--article .journal-article-main p,
    body.journal-page--article .journal-article-main li {
        font-size: 1.02rem;
        line-height: 1.68;
    }

    /* Ряды чипов и вкладок листаются, а не переносятся в четыре строки. */
    body.journal-page .jpro-topic-actions,
    body.journal-page .jpro-room-tabs,
    body.journal-page .jpro-chip-row {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 8px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    body.journal-page .jpro-topic-actions::-webkit-scrollbar,
    body.journal-page .jpro-room-tabs::-webkit-scrollbar {
        display: none;
    }

    /* Таблица не ломает страницу: скроллится внутри себя. */
    body.journal-page table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    /* Палец, а не мышь. */
    body.journal-page .jpro-btn,
    body.journal-page .journal-btn,
    body.journal-page .navbar-btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/* ==========================================================================
   13. ДОСТУПНОСТЬ И ПЕЧАТЬ
   ========================================================================== */

body.journal-page a:focus-visible,
body.journal-page button:focus-visible,
body.journal-page input:focus-visible,
body.journal-page [tabindex]:focus-visible {
    outline: 2px solid var(--jb-accent);
    outline-offset: 2px;
    border-radius: 6px;
}

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

/* Статью печатают и сохраняют в PDF — это тоже способ её прочитать. */
@media print {
    body.journal-page {
        background: #fff;
        color: #000;
    }

    body.journal-page .landing-navbar,
    body.journal-page .landing-footer-v2,
    body.journal-page .float-fab-stack,
    body.journal-page .exit-popup,
    body.journal-page .jpro-conversion,
    body.journal-page .journal-sidebar {
        display: none !important;
    }

    body.journal-page--article .journal-article-main,
    body.journal-page--article .journal-article-main > * {
        max-width: none !important;
    }

    body.journal-page a {
        color: #000;
        text-decoration: underline;
    }

    /* Адрес ссылки на бумаге: иначе ссылка на печати теряет смысл. */
    body.journal-page--article .journal-article-main a::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #444;
    }
}

/* ==========================================================================
   14. ХОЛОДНЫЕ ОСТАТКИ — по списку, найденному инструментом, а не на глаз
   --------------------------------------------------------------------------
   `.qa/find_cold.py` обходит страницу и возвращает элементы, у которых в
   вычисленных стилях синего заметно больше красного. Это честнее ручного
   осмотра: голубое пятно за заголовком давал `::before` героя, а не сам герой,
   и глазом источник не найти. Ниже — точные адреса из этого отчёта.
   ========================================================================== */

/* Полоса за заголовком статьи была сине-сиреневым градиентом на всю высоту
   первого экрана. */
body.journal-page .journal-article-hero,
body.journal-page .journal-hero-wrap {
    background: var(--jb-paper) !important;
}

/* Голубое пятно на страницах темы и тега давали два радиальных градиента в
   ::before. Тёплый вариант выглядел не лучше: контейнер обрезан по краю, и
   пятно упиралось в прямую границу — на белом это читается как дефект вёрстки.
   Убираем совсем: чистый лист держит заголовок лучше любой подсветки. */
body.journal-page .jpro-page-hero::before,
body.journal-page .jpro-hero::before {
    background: none !important;
}

/* Подложки надзаголовка и краткого содержания. */
body.journal-page .journal-kicker,
body.journal-page .jpro-hero-kicker,
body.journal-page .journal-summary,
body.journal-page .jpro-chip-accent {
    background: var(--jb-accent-soft) !important;
    border-color: var(--jb-accent-line) !important;
}

/* Пульсирующая точка в бейдже медиацентра была зелёной — зелёный в системе
   значит «заказчик/успешно», а здесь это просто фирменный знак. */
body.journal-page .jpro-hero-kicker::before {
    background: var(--jb-accent) !important;
}

body.journal-page .journal-summary {
    color: var(--jb-ink-2) !important;
    border-left: 3px solid var(--jb-accent) !important;
    border-radius: var(--jb-radius-sm);
}

body.journal-page .journal-cta-links {
    background: var(--jb-paper-2) !important;
    border: 1px solid var(--jb-line) !important;
    border-radius: var(--jb-radius-sm);
}

body.journal-page .jpro-guide-cta {
    border-color: var(--jb-accent-line) !important;
}

/* Заглушка под фото, пока изображение не загрузилось. */
body.journal-page .jphoto-link,
body.journal-page .jphoto {
    background: var(--jb-paper-3) !important;
}

/* ---- Холодные серые в мелком тексте ---- */
body.journal-page small,
body.journal-page figcaption,
body.journal-page .journal-seo-cover__caption,
body.journal-page .footer-v2-tagline,
body.journal-page .footer-v2-disclaimer,
body.journal-page .jphoto-src,
body.journal-page .jpro-search-form i,
body.journal-page .journal-media-search-form i {
    color: var(--jb-muted) !important;
}

body.journal-page .bi-chevron-right::before,
body.journal-page .bi-chevron-right::after,
body.journal-page .journal-breadcrumb-list li::before {
    color: var(--jb-line-2) !important;
}

/* ==========================================================================
   15. ФУТЕР
   --------------------------------------------------------------------------
   Футер журнала был фиолетово-голубым (#7c3aed → #06b6d4): подстраницы
   наследуют «светлую» тему лендинга, а фирменный оранжевый футер объявлен
   только для главной (`landing-home-polish.css`). То есть журнал отличался и
   от бренда, и от главной. Приводим к главной.
   ========================================================================== */

body.journal-page .landing-footer-v2 {
    background: var(--jb-paper-2) !important;
    border-top: 1px solid var(--jb-line) !important;
}

body.journal-page .footer-v2-top,
body.journal-page .footer-v2-bottom,
body.journal-page .footer-v2-trust-card,
body.journal-page .footer-v2-col-sep {
    border-color: var(--jb-line) !important;
}

body.journal-page .footer-v2-trust-card {
    background: var(--jb-paper) !important;
}

body.journal-page .footer-v2-logo,
body.journal-page .footer-v2-col-title,
body.journal-page .footer-v2-logo-sep {
    color: var(--jb-ink) !important;
}

body.journal-page .footer-v2-logo-icon,
body.journal-page .footer-v2-primary-link {
    background: linear-gradient(135deg, #ff641e, #e8500f) !important;
    color: #fff !important;
    border-color: transparent !important;
}

body.journal-page .footer-v2-primary-link-alt {
    background: var(--jb-paper) !important;
    color: var(--jb-ink) !important;
    border: 1px solid var(--jb-line-2) !important;
}

body.journal-page .footer-v2-social-link {
    background: var(--jb-accent-soft) !important;
    border: 1px solid var(--jb-accent-line) !important;
    color: var(--jb-accent-ink) !important;
}

body.journal-page .footer-v2-social-link:hover {
    background: var(--jb-accent) !important;
    color: #fff !important;
    border-color: var(--jb-accent) !important;
}

body.journal-page .footer-v2-social-link i,
body.journal-page .footer-v2-col-title i {
    color: inherit !important;
}

body.journal-page .footer-v2-link {
    color: var(--jb-ink-2) !important;
}

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

/* ==========================================================================
   16. АКЦЕНТ В ЗАГОЛОВКЕ: подчёркивание вместо второй оранжевой строки
   --------------------------------------------------------------------------
   Разметка героя красит акцентным цветом целый кусок заголовка — на главной
   это давало две оранжевые строки из трёх, и первый экран начинал кричать.
   Оставляем чернила, а бренд отдаём подчёркиванию: акцент виден, крика нет.
   ========================================================================== */

body.journal-page .jpro-hero-title .jpro-hero-accent,
body.journal-page .journal-title span {
    color: var(--jb-ink) !important;
    -webkit-text-fill-color: currentColor !important;
    background: none !important;
    /* Линия идёт по базовой линии текста и не разрывается на переносах. */
    box-shadow: inset 0 -0.14em 0 rgba(255, 100, 30, 0.32);
    padding-bottom: 0.04em;
}

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

body.journal-page .jpro-pillar::before,
body.journal-page .jpro-rubric-card::before,
body.journal-page .jpro-strip-card::before,
body.journal-page .jpro-tool::before,
body.journal-page small::before {
    background: var(--jb-accent) !important;
    color: var(--jb-accent) !important;
}

body.journal-page .jpro-rubric-card::before,
body.journal-page .jpro-pillar::before {
    opacity: 0.55;
}

body.journal-page .jpro-rubric-card:hover::before,
body.journal-page .jpro-pillar:hover::before {
    opacity: 1;
}

/* Затемнение поверх обложки: тёплые чернила вместо бирюзы с синим. */
body.journal-page .jpro-guide-cover::after,
body.journal-page .jpro-room-cover::after,
body.journal-page .jpro-jk-cover::after {
    background: linear-gradient(135deg, rgba(20, 17, 15, 0),
                                rgba(20, 17, 15, 0.38)) !important;
}

body.journal-page .jpro-dist-card::after,
body.journal-page .jpro-tool::after {
    background: radial-gradient(circle at 30% 30%, rgba(255, 100, 30, 0.08),
                                rgba(255, 255, 255, 0) 60%) !important;
}

/* ==========================================================================
   18. УПОРНЫЕ ХОЛОДНЫЕ СЕРЫЕ
   --------------------------------------------------------------------------
   Мелкий текст в футере и подписи красит `landing-light.css` через
   `body.landing-page:not(.landing-page--home)` — специфичность та же, что у
   наших правил, и исход зависел бы от порядка файлов. Порядок — вещь хрупкая:
   достаточно кому-то переставить <link>. Поэтому здесь берём на один класс
   больше и снимаем зависимость от порядка.
   ========================================================================== */

body.landing-page.journal-page small,
body.landing-page.journal-page p small,
body.landing-page.journal-page .footer-v2-tagline,
body.landing-page.journal-page .footer-v2-disclaimer,
body.landing-page.journal-page .footer-v2-bottom,
body.landing-page.journal-page .footer-v2-bottom a,
body.landing-page.journal-page figcaption,
body.landing-page.journal-page .jphoto-src,
body.landing-page.journal-page .jphoto-src a {
    color: var(--jb-muted) !important;
}

body.landing-page.journal-page .footer-v2-trust-icon {
    background: linear-gradient(135deg, #c2410c, #ff641e 55%, #ffae7a) !important;
    border: 1px solid transparent !important;
    color: #fff !important;
}

body.landing-page.journal-page .footer-v2-trust-icon i {
    color: #fff !important;
}

/* ==========================================================================
   19. ФИОЛЕТОВЫЕ СВЕЧЕНИЯ И ИКОНКИ ФУТЕРА
   --------------------------------------------------------------------------
   Последнее, что оставалось чужим: фиолетовое свечение под футером, сиреневые
   иконки в его ссылках и бирюзовый отблеск на конверсионной полосе. Мелочь по
   площади, но именно она делает страницу «не нашей» при взгляде вскользь.
   ========================================================================== */

body.landing-page.journal-page .landing-footer-v2::before,
body.landing-page.journal-page .landing-footer-v2::after {
    background: radial-gradient(circle, rgba(255, 100, 30, 0.08),
                                rgba(255, 255, 255, 0) 70%) !important;
}

body.landing-page.journal-page .footer-v2-col-title::after,
body.landing-page.journal-page .footer-v2-col-title::before {
    background: linear-gradient(135deg, #ff641e, #ffae7a) !important;
}

body.landing-page.journal-page .footer-v2-link i,
body.landing-page.journal-page .footer-v2-col-body i,
body.landing-page.journal-page .footer-v2-actions i {
    color: var(--jb-accent-ink) !important;
}

body.landing-page.journal-page .jpro-conversion::after {
    background: radial-gradient(circle at 30% 30%, rgba(255, 174, 122, 0.14),
                                rgba(0, 0, 0, 0) 60%) !important;
}

/* Прочие холодные серые (#64748b) оставлены намеренно: это почти нейтральный
   серый в мелком тексте, он не спорит с брендом, а переписывать каждую подпись
   в футере значит трогать общий слой лендинга — а он принадлежит не журналу. */

/* ==========================================================================
   20. ПЛОТНОСТЬ ПЕРВОГО ЭКРАНА
   --------------------------------------------------------------------------
   У героев было `padding: 132px 0 48px` при фиксированной шапке ~74px — то
   есть под шапкой оставалось ещё 58px пустоты, и на телефоне заголовок
   начинался почти на втором экране. Пустота — инструмент, но здесь она ничего
   не отделяла: над заголовком и так белый лист.
   ========================================================================== */

body.journal-page .journal-article-hero,
body.journal-page .jpro-page-hero,
body.journal-page .jpro-hero {
    padding-top: 98px !important;
    padding-bottom: 34px !important;
}

@media (max-width: 768px) {
    body.journal-page .journal-article-hero,
    body.journal-page .jpro-page-hero,
    body.journal-page .jpro-hero {
        padding-top: 82px !important;
        padding-bottom: 22px !important;
    }

    /* Последняя крошка — это заголовок страницы, который человек и так читает
       ниже. На узком экране она занимала две строки и уносила разделитель на
       новую строку. В разметке и в JSON-LD она остаётся: скрыт только показ. */
    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;
    }
}