/*
 * Дизайн-система Эдитус (2026-11-07) поверх базовых слоёв и общих блоков:
 * шрифты только с засечками, кнопки без стрелок, ссылки-действия в Roboto Slab,
 * «газетные» поля форм с точечной линией, скруглённые поля — только в калькуляторах,
 * подвал со знаком и значками соцсетей, общие блоки главной (баннер, рамки, карточка сертификата).
 * Описание и превью компонентов — артефакт «Э́дитус»: https://claude.ai/artifact/R1x83b6AV2LHK5MQGxfjVS
 * Подключается после components.css (layouts/site.blade.php) и до стилей страницы (pages/*.css).
 * Переменные — tokens.css.
 */

/* ---------- Основа ---------- */
::selection{background:var(--brand-tint-line);color:var(--ink)}
h1,h2,h3,h4{text-wrap:balance}
@media(max-width:560px){main p{hyphens:auto}}

/* ---------- Кнопка: без стрелки, Roboto Slab. Стрелка «→» — только у ссылок-действий ---------- */
.btn .arr{display:none}
.btn{font-family:var(--reading-font);letter-spacing:.01em;transition:background .2s,border-color .2s,color .2s,transform .1s}
.btn:active{transform:translateY(1px)}
.btn.secondary{background:var(--paper);border-color:var(--brand);color:var(--brand)}
.btn.secondary:hover{background:var(--brand-tint);border-color:var(--brand-dark);color:var(--brand-dark)}

/* ---------- Ссылка-действие: красная, Roboto Slab, стрелка сдвигается при наведении ---------- */
.text-link{font-family:var(--reading-font);letter-spacing:.05em}
.text-link:hover{color:var(--brand-dark);text-decoration:none}
.on-soft-deep .text-link{color:var(--brand-dark)}

/* ---------- Ссылки в тексте — красные с подчёркиванием (брендбук, «Ссылки»): серых и чёрных ссылок нет ---------- */
.feedback-dialog__consent a,.consent a{color:var(--brand);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.feedback-dialog__consent a:hover,.consent a:hover{color:var(--brand-dark)}
/* Старый класс из статей и описаний, перенесённых с прежнего сайта */
.link_red{color:var(--brand);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.link_red:hover{color:var(--brand-dark)}

/* ---------- Шапка: круглый знак ---------- */
.logo .logo-mark{border-radius:50%}

/* ---------- Поля форм — «газетные»: без рамки, точечная линия снизу, как строка в бланке ---------- */
.field label{font:500 14px/1.4 var(--reading-font);color:var(--ink)}
.field input:not([type=checkbox]):not([type=radio]):not([type=file]),.field select,.field textarea{box-sizing:border-box;width:100%;margin:0;padding:8px 0;border:0;border-bottom:2px dotted var(--field-border);border-radius:0;background-color:transparent;color:var(--ink);font:400 19px/1.5 var(--body-font);box-shadow:none;transition:border-color .15s}
.field input:not([type=checkbox]):not([type=radio]):not([type=file]),.field select{height:46px}
.field input::placeholder,.field textarea::placeholder{color:var(--muted);font-style:italic;opacity:1}
.field select{-webkit-appearance:none;appearance:none;padding-right:28px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23161616' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 4px center;background-size:12px 8px;cursor:pointer}
/* Сообщение — одна газетная линия снизу, как у остальных полей (разлиновка сливалась с нижней линией поля) */
.field textarea{min-height:120px;padding:8px 0;line-height:1.6;resize:vertical;background-image:none}
.field input:not([type=checkbox]):not([type=radio]):not([type=file]):hover,.field select:hover,.field textarea:hover{border-bottom-color:var(--brand)}
.field input:not([type=checkbox]):not([type=radio]):not([type=file]):focus,.field select:focus,.field textarea:focus{outline:none;border-bottom:2px solid var(--brand)}
.field input:disabled,.field select:disabled{color:var(--muted);border-bottom-color:var(--line-strong);cursor:not-allowed}
.field small{font:italic 400 14px/1.5 var(--body-font);color:var(--muted)}
.field .field-error,.field .field__error{font:italic 400 14px/1.5 var(--body-font);color:var(--brand)}
.field.is-invalid input,.field.is-invalid select,.field.is-invalid textarea{border-bottom-color:var(--brand)}
.form-grid{gap:var(--space-6) var(--space-8)}
/* Форма «Связаться с нами» */
.feedback-dialog__files{border:2px dotted var(--field-border);border-radius:var(--radius-lg)}
.feedback-dialog__consent{font-family:var(--body-font);font-size:14px}

/* ---------- Поля калькуляторов — скруглённые, как на editus.ru ---------- */
.calculator-fields .field label{padding-left:var(--space-6)}
.calculator-fields .field input:not([type=checkbox]):not([type=radio]):not([type=file]),.calculator-fields .field select{height:54px;min-height:54px;padding:0 var(--space-6);border:1px solid var(--field-border);border-radius:var(--radius-pill);background-color:var(--paper);font-size:17px;line-height:52px}
.calculator-fields .field select{padding-right:56px;border-color:var(--soft);background-color:var(--soft);background-position:right var(--space-6) center}
.calculator-fields .field input:not([type=checkbox]):not([type=radio]):not([type=file]):hover{border-color:var(--muted)}
.calculator-fields .field select:hover{border-color:var(--field-border)}
.calculator-fields .field input:not([type=checkbox]):not([type=radio]):not([type=file]):focus,.calculator-fields .field select:focus{outline:none;border:1px solid var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
.calculator-fields .field input:disabled,.calculator-fields .field select:disabled{background-color:var(--soft);color:var(--muted)}
.editus-calculator .calculator__form-el{border-color:var(--field-border)}
.editus-calculator .calculator__form-select{border-color:var(--soft);background-color:var(--soft)}

/* ---------- Подвал: знак, телефон, «Назначить встречу», соцсети и три колонки ---------- */
.footer{background:var(--paper);border-top:1px solid var(--line);padding:var(--space-14) 0 var(--space-8)}
.footer-top{grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));gap:var(--space-8);padding-bottom:var(--space-10)}
.footer-intro{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-6)}
.footer-contact{display:flex;align-items:center;gap:var(--space-4)}
.footer-logo img{display:block;width:44px;height:44px}
.footer .footer-intro .footer-phone{display:block;margin:0;font:500 17px/1.35 var(--reading-font);color:var(--ink);text-decoration:none}
.footer .footer-intro .footer-email{display:block;margin:0;font:400 14px/1.5 var(--body-font);color:var(--brand);text-decoration:none}
.footer-socials{display:flex;flex-wrap:wrap;gap:var(--space-3);margin:0;padding:0;list-style:none}
.footer-socials a.social{display:block;width:28px;height:28px;border-radius:50%;background-position:center;background-size:cover;background-repeat:no-repeat;opacity:1;transition:transform .15s}
.footer-socials a.social:active{transform:scale(.94)}
.social--telegram{background-image:url(/img/socials/twitter-red.png)}
.social--vk{background-image:url(/img/socials/vk-red.png)}
.social--ok{background-image:url(/img/socials/ok-red.png)}
.social--youtube{background-image:url(/img/socials/youtube-red.png)}
.social--zen{background-image:url(/img/socials/zen-red.png)}
.footer-socials a.social--telegram:hover{background-image:url(/img/socials/twitter.png)}
.footer-socials a.social--vk:hover{background-image:url(/img/socials/vk.png)}
.footer-socials a.social--ok:hover{background-image:url(/img/socials/ok.png)}
.footer-socials a.social--youtube:hover{background-image:url(/img/socials/youtube.png)}
.footer-socials a.social--zen:hover{background-image:url(/img/socials/zen.png)}
.footer-col{padding-left:var(--space-5);border-left:1px solid var(--brand)}
.footer .footer-title{margin:0 0 var(--space-3);font:500 15px/1.4 var(--reading-font);letter-spacing:0;text-transform:none;color:var(--brand)}
.footer .footer-col a{display:block;margin:0;padding:1px 0;font:400 14px/1.65 var(--body-font);color:var(--text-soft)}
.footer .footer-col a:hover{color:var(--brand)}
.footer .footer-bottom{justify-content:center;padding-top:var(--space-5);border-top:1px solid var(--line);font:400 13px/1.5 var(--body-font);color:var(--muted);text-align:center}
@media(max-width:560px){.footer-col{padding-left:var(--space-4)}}

/* ---------- Бордовый баннер с h1 (главная) ---------- */
.brand-banner{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;min-height:300px;border-radius:var(--radius-2xl);background:linear-gradient(100deg,var(--brand-night) 0%,var(--brand-night) 35%,var(--brand-dark) 100%);color:var(--white);overflow:hidden}
.brand-banner__text{display:flex;flex-direction:column;justify-content:center;gap:var(--space-5);padding:var(--space-12)}
.brand-banner h1,.brand-banner h2{margin:0;color:var(--white);font:500 40px/1.15 var(--reading-font);letter-spacing:-.03em}
.brand-banner p{max-width:540px;margin:0;font:400 17px/1.7 var(--body-font);color:var(--white)}
.brand-banner__media{position:relative;margin:0;min-height:240px}
.brand-banner__media img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:right center;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 30%);mask-image:linear-gradient(90deg,transparent 0%,#000 30%)}
@media(max-width:900px){
    .brand-banner{grid-template-columns:1fr}
    .brand-banner__text{padding:var(--space-8) var(--space-6) 0}
    .brand-banner__media{min-height:200px}
    .brand-banner__media img{-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 35%);mask-image:linear-gradient(180deg,transparent 0%,#000 35%);object-position:75% center}
    .brand-banner h1,.brand-banner h2{font-size:30px}
}

/* ---------- Приглашение в рамке из красных точек («Нужен совет?») ---------- */
.advice-card{padding:var(--space-10) var(--space-12);border:2px dotted var(--brand);border-radius:var(--radius-lg)}
@media(max-width:800px){.advice-card{padding:var(--space-8) var(--space-6)}}

/* ---------- Серая карточка-предложение («Сертификат на издание книги») ---------- */
.gift-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;gap:var(--space-8);padding:var(--space-6) var(--space-12) var(--space-6) var(--space-6);border-radius:var(--radius-2xl);background:linear-gradient(90deg,var(--soft) 0%,var(--soft-deep) 100%);overflow:hidden}
.gift-card__media{margin:0}
.gift-card__media img{display:block;width:auto;max-width:100%;max-height:300px;height:auto;margin:0 auto}
.gift-card h2{margin:0 0 var(--space-4)}
.gift-card p{margin:0 0 var(--space-6);color:var(--text)}
@media(max-width:800px){.gift-card{grid-template-columns:1fr;padding:var(--space-6)}}

/* ---------- «Остались вопросы?» — тонкая красная рамка, картинка по краям ---------- */
.contact-card{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-5);min-height:200px;padding:var(--space-10) var(--space-6);border:1px solid var(--brand);border-radius:var(--radius-lg);background:var(--paper);text-align:center;overflow:hidden;box-sizing:border-box}
.contact-card h2,.contact-card .btn{position:relative;margin:0}
.contact-card__art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
@media(max-width:800px){.contact-card__art{display:none}}

/* ---------- Точечный разделитель вокруг заголовка по центру («Примеры наших работ») ---------- */
.dotted-head{display:flex;align-items:center;gap:var(--space-6)}
.dotted-head::before,.dotted-head::after{content:"";flex:1;border-top:2px dotted var(--line-strong)}

/* Поиск (журнал, магазин) — капсула с лупой, как поля калькуляторов и «Помощи с изданием» */
.journal-search-wrap .journal-search,.store-search .store-search__input{-webkit-appearance:none;appearance:none;box-sizing:border-box;width:100%;max-width:none;height:48px;margin:0;padding:0 var(--space-5) 0 46px;border:1px solid var(--line-strong);border-radius:var(--radius-pill);background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23da2127' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") no-repeat 18px center/18px;font:400 17px/1.5 var(--body-font);color:var(--ink);box-shadow:none;outline:none;transition:border-color .15s,box-shadow .15s}
.journal-search-wrap .journal-search::placeholder,.store-search .store-search__input::placeholder{color:var(--muted);font-style:italic;opacity:1}
.journal-search-wrap .journal-search:hover,.store-search .store-search__input:hover{border-color:var(--field-border)}
.journal-search-wrap .journal-search:focus,.store-search .store-search__input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint-line);outline:none}
.journal-search-wrap .journal-search::-webkit-search-cancel-button,.store-search .store-search__input::-webkit-search-cancel-button{-webkit-appearance:none}

/* Шапка по брендбуку (Header): служебная строка — тёплый серый фон; меню — Roboto Slab 15px, ink, при наведении brand;
   шеврон и домик — SVG с currentColor; линии — газетные, пунктир 1px вместо чёрной сплошной */
.topline{background:#f5f5f3;border-bottom:0;font:400 13px/1.4 var(--body-font);color:var(--text-soft)}
.topline .top-right a{font-family:var(--body-font)}
.topline .top-right a:first-of-type{color:var(--brand)}
.topline .top-right .top-phone{color:var(--ink)}
.header{border-bottom:1px dotted var(--line-strong)}
.nav-chevron{display:inline-block;width:10px;height:10px;margin-left:5px;vertical-align:1px;transition:transform .15s}
.nav-dropdown.open .nav-chevron{transform:rotate(180deg)}
.nav-home{display:inline-block;width:16px;height:16px;margin-right:6px;vertical-align:-2px}
.dropdown-panel{border:1px solid var(--line);box-shadow:0 14px 34px rgba(22,22,22,.08)}
.nav-group-title{font:500 13px/1.5 var(--reading-font);color:var(--muted)}
.mega-service b{color:var(--ink)}
.mega-service small{font:400 14px/1.5 var(--body-font);color:var(--text-soft)}
.mega-tools,.mega-bottom,.dropdown-panel .book-certificate{border-top:1px dotted var(--line-strong)}
.mega-tools>span{font:italic 400 13px/1.6 var(--body-font);color:var(--muted)}
.dropdown-panel .mega-tools a{font:500 14px/1.5 var(--reading-font);color:var(--ink)}
.dropdown-panel .mega-tools a:hover{color:var(--brand)}
.dropdown-panel .mega-detail,.dropdown-panel .mega-bottom a{font:500 14px/1.5 var(--reading-font)}
@media (min-width:1121px){
    .navrow{height:80px}
    .logo .logo-name{font-size:19px}
    /* «Кабинет» — у кнопки «Издать книгу» с тем же отступом, что между пунктами меню; меню — подальше от логотипа */
    .navrow{gap:26px}
    .logo{margin-right:22px}
    .main-nav{gap:26px}
    .main-nav .nav-account{margin-left:auto}
    .main-nav>a,.nav-dropdown>button{font:500 15px/1.4 var(--reading-font);color:var(--ink)}
    .main-nav>a:hover,.nav-dropdown>button:hover,.nav-dropdown.open>button,.dropdown-toggle.active{color:var(--brand)}
}
@media (max-width:1120px){
    .main-nav{border-bottom:1px dotted var(--line-strong)}
    .main-nav .nav-dropdown>button{justify-content:flex-start}
    .main-nav .nav-dropdown>button .nav-chevron{margin-left:auto}
}
@media (max-width:560px){
    .topline .container>span{display:none}
    .topline .container{justify-content:flex-end}
}

/* Лендинги услуг (текст, дизайн, иллюстрации, печать, публикация, аудио, написание): общие блоки.
   Линии-разделители — газетные (пунктир 1px), как под шапкой; вопросы — во всю ширину контейнера, как остальные блоки.
   То, что задано в pages/*.css (грузятся после system.css), поправлено в самих файлах страниц */
.container.faq:not(.prices-faq){max-width:none}
.section-head{border-bottom:1px dotted var(--line-strong)}
.divider{border-top:1px dotted var(--line-strong)}
.svc-price-card{border-top:1px dotted var(--line-strong)}
.svc-price-list{border-top:1px dotted var(--line-strong)}
.svc-price-row{border-bottom:1px dotted var(--line)}
.steps-zigzag{border-bottom:1px dotted var(--line-strong)}
.editorial-hero .inner-meta{font:400 14px/1.7 var(--body-font);color:var(--text-soft);border-top:1px dotted var(--line-strong)}
/* Подсказка «?» у цены — как у таблицы цен на «Работе с текстом» */
.svc-price-tip__mark{border:1px solid var(--line-strong);background:var(--white);font:500 12px/1 var(--reading-font);color:var(--text-soft)}

/* Лендинги «Услуг»: под первым экраном — газетный пунктир, внизу — карточка-призыв как «Остались вопросы?» на главной */
.svc-hero{border-bottom:1px dotted var(--line-strong)}
.svc-cta{padding:var(--space-14) 0;background:none;text-align:center}
.svc-cta .contact-card{min-height:220px}
.svc-cta .contact-card .svc-actions{position:relative;margin:0}
.svc-cta--compact{padding:var(--space-14) 0}
.svc-cta--compact .contact-card h2{margin:0}

/* Подвал: четыре колонки ссылок (Издательство, Услуги, Информация, Для партнёров) */
.footer-top{grid-template-columns:minmax(0,1.3fr) repeat(4,minmax(0,1fr))}
.footer-info{grid-column:auto}
@media(max-width:1120px){
    .footer-intro{grid-column:1/-1}
    .footer-top{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media(max-width:800px){
    .footer-top{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Выпадающее меню шапки: у каждой ссылки — линейный значок brand на brand-tint */
.mega-ico{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:var(--brand-tint);color:var(--brand)}
.mega-ico svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dropdown-panel .mega-service{display:flex;align-items:flex-start;gap:12px}
.dropdown-panel .mega-service>span:not(.mega-ico){min-width:0}
.dropdown-panel .mega-service>b{align-self:center}
.dropdown-panel .mega-tools a,.dropdown-panel .mega-bottom a{display:inline-flex;align-items:center;gap:8px}
.dropdown-panel .mega-tools .mega-ico,.dropdown-panel .mega-bottom .mega-ico{width:26px;height:26px}
.dropdown-panel .mega-tools .mega-ico svg,.dropdown-panel .mega-bottom .mega-ico svg{width:15px;height:15px}

.svc-cta .contact-card .cta-sub{position:relative;margin:calc(-1 * var(--space-3)) 0 0;font-size:18px;color:var(--text-soft)}

/* Академия: статьи (тексты из базы со старой разметкой print.editus.ru — Bootstrap-классы, встроенные стили) по брендбуку */
.article-body img{border-radius:var(--radius-lg)}
.article-body video{display:block;width:100%;height:auto;margin:25px 0;border-radius:var(--radius-lg);background:var(--ink)}
.article-body hr{height:0;margin:2em 0;border:0;border-top:1px dotted var(--line-strong)}
.article-body .text-center{text-align:center}
.article-body .text-muted{color:var(--muted)}
.article-body .d-flex{display:flex;flex-wrap:wrap;gap:12px}
.article-body .flex-column{flex-direction:column}
.article-body .justify-content-center{justify-content:center}
.article-body .mt-2{margin-top:8px}.article-body .mt-4{margin-top:24px}.article-body .mt-5{margin-top:40px}
.article-body .mb-4{margin-bottom:24px}.article-body .mb-5{margin-bottom:40px}
.article-body .fs-4,.article-body .fs-5{font-size:19px}
.article-body .icon-pushpin,.article-body .icon-download-alt{display:none}
/* Подзаголовок-метка (h6 и «Полезные советы») — Roboto Slab капсом, красная черта слева вместо серой */
.article-body h6,.article-body .meta-nav{margin:1.6em 0 .8em!important;padding:0 0 0 12px!important;border-left:2px solid var(--brand)!important;font:500 14px/1.45 var(--reading-font);letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
/* Врезка-цитата из старого текста (рамка сверху и снизу) — газетный пунктир */
.article-body [style*="border-width"]{border-color:var(--line-strong)!important;border-style:dotted!important;color:var(--text)!important;font-family:var(--body-font);font-style:italic}
/* Заметка со скрепкой — розовая плашка, как «Продолжить» и подсказки мастера */
.article-body .info-editus{border:1px solid var(--brand-tint-line);border-left:1px solid var(--brand-tint-line);border-radius:var(--radius-xl);background:var(--brand-tint)}
.article-body .alert{border-left:0;border:1px solid var(--brand-tint-line);border-radius:var(--radius-xl);background:var(--brand-tint)}
/* Таблицы — газетные: без вертикальных линий, пунктир между строками, первая строка/столбец — Roboto Slab */
.article-body table{display:table;width:auto;max-width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.article-body td,.article-body th{padding:10px 16px;border:0;border-bottom:1px dotted var(--line-strong);font-size:17px;text-align:center}
.article-body tr:first-child td,.article-body tr:first-child th,.article-body th{border-bottom:2px solid var(--ink);font:500 16px/1.4 var(--reading-font);color:var(--ink)}
.article-body td:first-child{font:500 16px/1.4 var(--reading-font);color:var(--ink);text-align:left}
/* Старые кнопки */
.article-body .button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 26px;border:1px solid var(--brand);border-radius:var(--radius-pill);background:var(--brand);color:var(--white);font:500 15px/1 var(--reading-font);text-decoration:none}
.article-body .button:hover{background:var(--brand-dark);border-color:var(--brand-dark)}
.article-body .button_outline{background:var(--white);color:var(--brand)}
.article-body .button_outline:hover{background:var(--brand-tint);color:var(--brand)}
/* Вкладки Bootstrap (Мягкая / Твёрдая обложка) — капсулы, как переключатели калькулятора; переключает site.js */
.article-body .nav-tabs{display:inline-flex;margin:0 0 8px;padding:4px;border-radius:var(--radius-pill);background:var(--soft);list-style:none}
.article-body .nav-tabs .nav-item{margin:0}
.article-body .nav-tabs .nav-link{min-height:40px;padding:0 20px;border:0;border-radius:var(--radius-pill);background:none;font:500 15px/1 var(--reading-font);color:var(--text-soft);text-decoration:none;cursor:pointer}
.article-body .nav-tabs .nav-link.active{background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--brand)}
.article-body .tab-pane{display:none}
.article-body .tab-pane.active{display:block}
/* «Читать дальше →» / «Выбрать переплёт →» — текстовая ссылка брендбука; стрелка .meta-nav внутри — не метка */
.article-body .more-link{display:inline-flex;align-items:center;gap:8px;font:500 15px/1.4 var(--reading-font);color:var(--brand);text-decoration:none}
.article-body .more-link .meta-nav{margin:0!important;padding:0!important;border:0!important;font:inherit;font-size:20px;letter-spacing:0;text-transform:none;color:inherit}

/* Академия: список статей — карточки как на «Старте» и лендингах «Услуг» (белые, рамка line, radius-xl, картинка сверху во всю ширину);
   рубрики — капсулы, выбранная — красная рамка, как переключатели калькулятора */
.journal-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6)}
.article-card.article-preview{display:flex;flex-direction:column;align-items:stretch;padding:0 0 var(--space-6);border:1px solid var(--line);border-radius:var(--radius-xl);background:var(--white);overflow:hidden}
.article-preview>*{margin-left:var(--space-6)!important;margin-right:var(--space-6)!important}
.article-preview>img,.article-preview>iframe,.article-preview>p:has(>img:only-child){order:-1;margin:0 0 var(--space-5)!important;width:100%!important}
.article-preview>img,.article-preview>p>img{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;margin:0;border-radius:0}
.article-preview>iframe{height:auto;aspect-ratio:16/9;border:0}
.article-preview h1,.article-preview h2,.article-preview h3,.article-preview h4,.article-preview h5{order:0;margin-top:0;margin-bottom:var(--space-2);font-size:21px!important;line-height:1.3;letter-spacing:-.01em;text-align:left!important}
.article-preview p{font-family:var(--body-font)!important;font-size:15px;line-height:1.6;color:var(--text-soft);text-align:left!important}
.article-preview .text-link{margin-top:auto;padding-top:var(--space-2)}
.filters{display:flex;flex-wrap:wrap;gap:6px}
.filters a.filter-btn{min-height:36px;display:inline-flex;align-items:center;padding:0 16px;border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--soft);font:500 14px/1 var(--reading-font);color:var(--text-soft)}
.filters a.filter-btn:hover{border-color:var(--brand-tint-line);background:var(--brand-tint);color:var(--ink)}
.filters a.filter-btn.active{border-color:var(--brand);background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 .5px var(--brand)}
@media(max-width:900px){.journal-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.journal-grid{grid-template-columns:1fr}}