:root{
  --bg:#030303;--card:#0b0c0e;--line:#3B3C41;--line2:#6C6F80;
  --ink:#ededed;--ink2:#a7a9b2;--ink3:#74767e;--rad:12px;--fs:18px;
  /* Ширина контентной колонки на странице статьи. 100% = во всю ширину .wrap,
     ровно как на главной и на /dividendy/ — раздел не должен отличаться.
     Одна ручка на всё: если когда-нибудь захочется узкую колонку чтения,
     поставить сюда фикс (напр. 820px), и текст, оглавление, обложка и
     нижняя кнопка сузятся вместе. */
  --col:100%;
  --sans:'Montserrat',"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --display:'Science Gothic','Montserrat',sans-serif;}
*{box-sizing:border-box}
html,body{background:var(--bg);margin:0}
body{font-family:var(--sans);color:var(--ink);line-height:1.55;font-size:var(--fs);-webkit-font-smoothing:antialiased;padding:0}
h1,h2,h3{text-wrap:balance;margin:0}
a{color:var(--ink);text-decoration:none}
.lnk{color:#cfd2da}
.lnk:hover{color:#fff}
/* Рабочий контейнер — 1-в-1 с главной (.container) и со страницами дивидендов. */
.wrap{width:1366px;max-width:calc(100% - 40px);margin:0 auto;padding:0 20px}
/* Шапка: бренд по центру (лого + название + TM), как на /dividendy/. */
.topbar{border-bottom:1px solid #111;padding:16px 0}
.topbar .wrap{display:flex;align-items:center;justify-content:center}
.brand{display:inline-flex;align-items:center;gap:11px}
.brand-logo{width:40px;height:40px;display:block;flex-shrink:0}
.brand-name{font-family:var(--display);font-size:22px;font-weight:300;letter-spacing:.05em;color:#fff;white-space:nowrap}
.brand-tm{font-size:8px;font-weight:300;letter-spacing:2.3px;display:inline-block;line-height:1;vertical-align:top;margin-left:4px;opacity:.85}
main{padding:26px 0 8px}
.crumbs{font-size:var(--fs);color:var(--ink3);margin-bottom:18px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.crumbs a:hover{color:#A9A9A9} .crumbs .sep{color:#3a3b40}
h1{font-family:var(--display);font-size:32px;font-weight:400;letter-spacing:.01em;line-height:1.3;overflow-wrap:anywhere}
.intro{color:var(--ink2);font-size:var(--fs);max-width:80ch;margin:14px 0 0}
/* Табы-пилюли по центру — компонент со страницы /dividendy/ (.hub-tools). */
.hub-tools{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:26px 0 4px}
.hub-tools button{flex:0 0 auto;white-space:nowrap;text-align:center;font-family:var(--sans);font-size:var(--fs);color:var(--ink2);background:transparent;border:1px solid var(--line);border-radius:var(--rad);padding:8px 14px;cursor:pointer}
.hub-tools button:hover{border-color:var(--line2)} .hub-tools button.on{background:#18191C;color:var(--ink)}
/* ── кластер: <h2> + описание + свои карточки ─────────────────────────── */
.cluster{margin-top:44px}
.cluster h2{font-family:var(--display);font-size:26px;font-weight:400;letter-spacing:.01em;line-height:1.3}
.cluster .cdesc{margin-top:10px;color:var(--ink2);font-size:var(--fs);max-width:80ch}
.posts{display:flex;flex-direction:column;gap:30px;margin-top:24px}
/* ── карточка статьи ──────────────────────────────────────────────────────
   Ссылка ОДНА и настоящая — на заголовке (анкор = название статьи), но её
   ::after растянут на всю карточку (inset:0), поэтому кликается вся площадь.
   Так краулер видит обычный <a href>, анкор остаётся чистым, а JS не нужен.
   «Читать полностью» — span, не ссылка: псевдо-органические анкоры вес не
   передают. Ховер рамки как у карточек дивидендов на главной (--line2). */
.post{position:relative;display:grid;grid-template-columns:340px 1fr;gap:24px;align-items:stretch;
  border:1px solid var(--line);border-radius:var(--rad);background:#0E0F11;padding:20px;
  transition:border-color .13s}
.post:hover{border-color:var(--line2)}
/* top/right/bottom/left дублируют inset ради совместимости со старыми браузерами
   (inset появился в 2021-м); если не понят ни один — ссылка просто перестаёт быть
   растянутой, но сама ссылка на заголовке продолжает работать. */
.post h3 a::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;inset:0;border-radius:var(--rad)}
/* фокус с клавиатуры подсвечивает карточку целиком, а не только текст заголовка */
.post:focus-within{border-color:var(--line2)}
.post-img{width:100%;height:100%;min-height:180px;aspect-ratio:16/9;object-fit:cover;
  display:block;border-radius:var(--rad);background:#141518}
.post-body{display:flex;flex-direction:column;min-width:0}
.post h3{font-family:var(--sans);font-size:22px;font-weight:600;line-height:1.35;overflow-wrap:anywhere}
.post h3 a:hover{color:#fff}
.post .exc{margin:12px 0 0;color:var(--ink2);font-size:var(--fs);line-height:1.6}
.post-meta{margin-top:auto;padding-top:18px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.post-meta .dt{font-size:16px;color:var(--ink3)}
.post-meta .dt .sep{margin:0 8px;color:#3a3b40}
.rd{display:inline-flex;align-items:center;gap:9px;font-size:var(--fs);color:var(--ink2);white-space:nowrap}
.rd svg{width:21px;height:12px;fill:currentColor;transition:transform .18s ease}
.post:hover .rd{color:var(--ink)}
.post:hover .rd svg{transform:translateX(5px)}
/* ── ссылки на соседние разделы ─────────────────────────────────────────── */
.xlinks{display:flex;flex-wrap:wrap;gap:10px;margin-top:40px;justify-content:center}
.xlink{border:1px solid var(--line);border-radius:var(--rad);padding:12px 16px;font-size:var(--fs);color:var(--ink)}
.xlink:hover{border-color:var(--line2)}
/* Кнопка возврата: тот же #icon-arrow-r, что у «Читать полностью» на хабе,
   отзеркаленный по X — своего левого символа в спрайте нет и не нужен.
   На ховере стрелка уезжает влево: в отражённых координатах это +X. */
.xlink-back{display:inline-flex;align-items:center;justify-content:center;gap:9px}
.xlink-back svg{width:21px;height:12px;fill:currentColor;transform:scaleX(-1);transition:transform .18s ease}
.xlink-back:hover svg{transform:scaleX(-1) translateX(5px)}
/* ── футер (1-в-1 с /dividendy/) ──────────────────────────────────────────
   padding-bottom 10px — ровно как в div.css: копирайт на всех страницах сайта
   отбит от низа одинаково. */
.pfoot{border-top:1px solid #111;margin-top:36px;padding:24px 0 10px;color:var(--ink3);font-size:var(--fs)}
.pfoot .disc{border:1px solid var(--line);border-radius:var(--rad);padding:14px 16px;background:#070809;color:var(--ink2);margin-bottom:18px;font-size:16px}
.pfoot .fnav{text-align:center;font-size:var(--fs)}
.pfoot .fnav a:hover{color:#A9A9A9}
.pfoot .fcopy{text-align:center;font-family:var(--display);font-size:16px;font-weight:400;letter-spacing:.04em;color:var(--ink3);margin-top:14px}
/* ══ СТРАНИЦА СТАТЬИ ═════════════════════════════════════════════════════
   Крошки, h1 и лид — те же классы и отступы, что на хабе, поэтому переход
   /blog/ → /blog/<slug>/ визуально бесшовный. Ниже — только то, чего на хабе
   нет: колонка чтения, типографика текста и оглавление. */
/* Колонка чтения. 80ch = ровно как .intro на хабе: строка ~90 знаков, дальше
   глаз теряет начало следующей строки. Контейнер .wrap при этом остаётся
   1366px — выравнивание по левому краю совпадает с хабом. */
.art{max-width:var(--col)}
/* Лид тянем по той же колонке, что и текст: на хабе .intro ограничен 80ch,
   но там под ним карточки, а здесь — сплошной текст, и разный правый край
   читался бы как сбитая вёрстка. */
.artpage .intro{max-width:var(--col)}
.artmeta{margin-top:16px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:16px;color:var(--ink3)}
.artmeta .sep{color:#3a3b40}
.artmeta .who{color:var(--ink2)}
.kicker{margin:10px 0 0;font-size:16px;color:var(--ink3);font-style:italic}
/* Обложка. Потолок высоты — 480px: 16:9 во всю ширину .wrap дало бы баннер под
   750px, то есть весь первый экран.
   ВАЖНО, как именно мы держим этот потолок. Раньше он стоял на .cover как
   max-height, и object-fit:cover срезал картинку сверху и снизу — на ПК от
   обложки оставалось 64% (проверено замером: слот 1326×480 против файла
   1200×675). Первым делом отваливался нижний край, а там у нас подпись бренда.
   Теперь тот же потолок задан ЧЕРЕЗ ШИРИНУ: 853px — это ровно 480px высоты при
   16:9. Картинка целая при любом экране, кадрировать её больше нечем. */
.cover-fig{margin:24px 0 0;max-width:min(var(--col),853px)}
.cover{width:100%;max-width:var(--col);height:auto;aspect-ratio:16/9;max-height:480px;object-fit:cover;
  display:block;border:1px solid var(--line);border-radius:var(--rad);background:#141518;margin:0}
/* Подпись под обложкой. В отличие от alt это обычный текст страницы: его
   индексируют наравне с абзацами, и он даёт картинке смысловое окружение. */
.capt{margin:10px 0 0;font-size:16px;line-height:1.5;color:var(--ink3);font-style:italic}
/* Тело статьи. Основной текст 18px (--fs) и line-height 1.75 — это читаемость
   на длинном тексте, а не «как в карточке». */
.art p{margin:0 0 18px;font-size:var(--fs);line-height:1.75;color:var(--ink)}
.art h2{font-family:var(--display);font-size:26px;font-weight:400;letter-spacing:.01em;line-height:1.3;margin:44px 0 14px}
.art h3{font-family:var(--sans);font-size:21px;font-weight:600;line-height:1.35;margin:32px 0 12px}
.art h4{font-family:var(--sans);font-size:18px;font-weight:600;margin:24px 0 10px}
.art strong{color:#fff;font-weight:600}
.art em{font-style:italic}
.art ul,.art ol{margin:0 0 18px;padding-left:24px}
.art li{font-size:var(--fs);line-height:1.7;color:var(--ink);margin:0 0 10px}
.art li::marker{color:var(--ink3)}
.art hr{border:0;border-top:1px solid var(--line);margin:38px 0}
/* Ссылки внутри текста подчёркнуты — сознательное отступление от правила
   «без подчёркиваний» (оно про навигацию): в сплошном тексте ссылка иначе
   неотличима от обычного слова. Цвет тот же, подчёркивание приглушённое. */
.art p a,.art li a{text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);text-underline-offset:3px}
.art p a:hover,.art li a:hover{color:#fff;text-decoration-color:rgba(255,255,255,.7)}
/* Пустой якорь под <a name>: сам не виден, но даёт отступ при переходе,
   чтобы заголовок не прилипал к верхней кромке окна. */
.anch{display:block;height:0;scroll-margin-top:24px}
/* Таблица в отдельной обёртке со скроллом: страница не должна ехать вбок. */
.tw{overflow-x:auto;margin:0 0 22px;border:1px solid var(--line);border-radius:var(--rad)}
.art table{border-collapse:collapse;width:100%;min-width:520px;font-size:16px}
.art th,.art td{padding:12px 14px;text-align:left;vertical-align:top;border-bottom:1px solid #141518;line-height:1.55}
.art th{background:#0E0F11;color:var(--ink);font-weight:600;white-space:nowrap}
.art tbody tr:last-child td{border-bottom:0}
.art td{color:var(--ink2)}
.art td strong{color:var(--ink)}
/* Оглавление: тот же бордер-бокс, что у карточек раздела. */
.toc{border:1px solid var(--line);border-radius:var(--rad);background:#0E0F11;padding:18px 20px;margin:28px 0 8px;max-width:var(--col)}
.toc-h{font-family:var(--display);font-size:20px;font-weight:400;letter-spacing:.01em;color:#fff;margin-bottom:12px}
.toc ol{margin:0;padding-left:22px}
.toc li{margin:0 0 8px;font-size:16px;line-height:1.5;color:var(--ink2)}
.toc li:last-child{margin-bottom:0}
.toc a{color:var(--ink2)} .toc a:hover{color:#fff}
/* Кнопку возврата центрируем по колонке чтения, а не по всему контейнеру:
   иначе на широком экране она уезжает правее текста и выглядит потерянной. */
.artpage .xlinks{max-width:var(--col)}
/* Планшет (768–1023px): раскладка ОСТАЁТСЯ горизонтальной — вертикальная тут
   раздувала обложку до половины экрана и делала страницу бесконечной. Колонка
   обложки сужается, чтобы тексту хватало места. */
/* Обложка тут НЕ растягивается по высоте карточки (иначе 16:9 превращается в
   портрет и скриншот графика обрезается по бокам) — держим пропорцию и центрируем. */
@media (max-width:1023px){
  .post{grid-template-columns:260px 1fr;gap:20px}
  .post-img{height:auto;min-height:0;align-self:center}
  .post h3{font-size:20px}
  .cluster{margin-top:38px}
  .posts{gap:24px}}
/* ≤899px (родной брейкпоинт сайта): вертикаль — обложка сверху во всю ширину,
   заголовок и текст под ней. Ниже 900px горизонтальная раскладка ломается:
   на текст остаётся ~360px, и строка «дата · время чтения / Читать полностью»
   перестаёт влезать в одну линию. max-height держит обложку баннерной, чтобы
   на широком экране она не занимала пол-страницы (на телефоне 16:9 меньше
   лимита — там ничего не обрезается). */
@media (max-width:899px){
  .post{grid-template-columns:1fr;gap:16px}
  .post-img{align-self:stretch;max-height:300px}
  .posts{gap:24px}}
@media (max-width:767px){
  :root{--fs:16px}                       /* весь читаемый текст 18→16, как на /dividendy/ */
  h1{font-size:26px}
  .cluster h2{font-size:22px}
  .post{padding:16px}
  .post h3{font-size:19px}
  .posts{gap:20px}
  .post-meta{padding-top:16px}
  .xlinks .xlink{width:100%;text-align:center}
  .art h2{font-size:22px;margin-top:36px}
  .art h3{font-size:19px;margin-top:26px}
  .toc{padding:16px}
  /* Таблица → карточки. Горизонтальный скролл в таблице на телефоне уже
     признавали неудобным на /dividendy/ — здесь тот же приём: thead прячем,
     каждая строка становится карточкой, подписи колонок выводит td::before
     из data-label. Первая ячейка (.c0) — заголовок карточки, без подписи. */
  .tw{overflow-x:visible;border:0;border-radius:0}
  .art table{min-width:0;width:100%;display:block;font-size:16px}
  .art thead{display:none}
  .art tbody{display:block}
  .art tbody tr{display:block;border:1px solid var(--line);border-radius:var(--rad);
    background:#0E0F11;padding:14px 16px;margin:0 0 12px}
  .art tbody tr:last-child{margin-bottom:0}
  .art td{display:block;border:0;padding:0;color:var(--ink2)}
  .art td.c0{color:#fff;font-weight:600;font-size:17px;margin-bottom:10px}
  .art td.c0 strong{color:#fff}
  .art td[data-label]{padding-top:9px;border-top:1px solid #141518;margin-top:9px}
  .art td[data-label]::before{content:attr(data-label);display:block;
    font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink3);margin-bottom:4px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}