/* Раздел статей yavo.pro. Токены и базовые классы повторяют лендинг
   (index.html, блок :root) — раздел обязан выглядеть его частью, а не
   соседним сайтом. Всё, чего на лендинге нет, живёт ниже, в блоке
   «типографика статьи». */

:root{
  --ink:#1A1A22; --ink-60:#5A5A66; --ink-40:#9A9AA6;
  --brand:#6C47FF; --brand-hover:#5A38E0; --mist:#EDE9FF; --lift:#9A80FF;
  --surface:#fff;
  --ok:#12B76A; --warn:#E8A317; --err:#F04438;
  --navy:#2A3350;
  --r-sm:10px; --r-md:16px; --r-lg:24px; --r-full:999px;
  --shadow-sm:0 2px 8px rgba(108,71,255,.08);
  --shadow-md:0 8px 24px rgba(108,71,255,.10);
  --shadow-btn:0 6px 16px rgba(108,71,255,.30);
  --maxw:1160px;
  /* Схемы статьи рисуются с var(--sans|--surface|--ink) и своими
     запасными значениями. Объявляем их здесь — тогда схема берёт шрифт и
     цвета сайта, а не запасные. */
  --sans:'Onest',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  color:var(--ink); background:var(--surface);
  -webkit-font-smoothing:antialiased; line-height:1.6;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px}
@media(min-width:768px){.wrap{padding:0 40px}}
img,svg{max-width:100%; display:block}
a{color:var(--brand)}

/* ---------- Логотип и шапка: как на лендинге ---------- */
.logo{display:inline-flex; align-items:baseline; gap:0; font-weight:800; font-size:24px; letter-spacing:-.02em; color:var(--ink); text-decoration:none; line-height:1}
.logo .check{width:16px; height:20px; align-self:center; margin:0 1px}
.logo .check path{stroke:var(--brand); stroke-width:4.4; fill:none; stroke-linecap:round; stroke-linejoin:round}
.logo small{font-size:11px; font-weight:600; color:var(--ink-40); margin-left:9px; letter-spacing:0; align-self:center}
/* Подпись «by Systematika» — отдельная ссылка на systematika.legal: вложенная ссылка
   внутри ссылки-логотипа запрещена HTML-ом, поэтому знак и подпись стоят рядом. */
.logo-row{display:inline-flex; align-items:center}
.logo-by{font-size:11px; font-weight:600; color:var(--ink-40); margin-left:9px; letter-spacing:0; text-decoration:none; white-space:nowrap}
.logo-by:hover{color:var(--ink-60); text-decoration:underline}
footer .logo-by{color:rgba(255,255,255,.55)}

.nav{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.86); backdrop-filter:blur(10px); border-bottom:1px solid rgba(26,26,34,.06)}
.nav .wrap{height:64px; display:flex; align-items:center; justify-content:space-between}
.nav-right{display:flex; align-items:center; gap:22px}
.nav-link{color:var(--ink-60); text-decoration:none; font-weight:500; font-size:15px}
.nav-link:hover{color:var(--ink)}
.nav-link[aria-current]{color:var(--ink)}
@media(max-width:520px){.nav-right{gap:12px} .nav .nav-link{display:none}}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:inherit; font-weight:700; font-size:16px; border-radius:var(--r-md); cursor:pointer; border:0; text-decoration:none; transition:.15s; padding:15px 26px; line-height:1}
.btn-primary{background:var(--brand); color:#fff; box-shadow:var(--shadow-btn)}
.btn-primary:hover{background:var(--brand-hover)}
.btn-sm{padding:10px 18px; font-size:15px}

h1{font-weight:800; letter-spacing:-.02em}
h2{font-size:clamp(24px,2.6vw,30px); line-height:1.2; font-weight:800; letter-spacing:-.015em}
h3{font-size:19px; line-height:1.35; font-weight:700; letter-spacing:-.01em}
.lead{font-size:18px; color:var(--ink-60)}
.cap{font-size:14px; color:var(--ink-40); letter-spacing:.01em}
.overline{font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--brand)}

/* ---------- Подвал: как на лендинге ---------- */
footer{border-top:1px solid rgba(26,26,34,.08); padding:44px 0; margin-top:80px}
footer .wrap{display:flex; flex-wrap:wrap; gap:28px; align-items:flex-start; justify-content:space-between}
footer .legal{font-size:14px; color:var(--ink-60); line-height:1.65; max-width:52ch}
footer .fr{display:flex; align-items:center; gap:20px; flex-wrap:wrap}
footer .fr a{color:var(--ink-60); text-decoration:none; font-size:15px; font-weight:500}
footer .fr a:hover{color:var(--ink)}
footer .fr a.btn{color:#fff}

/* ---------- Хлебные крошки ---------- */
.crumbs{font-size:14px; color:var(--ink-40); padding:24px 0 0}
.crumbs a{color:var(--ink-40); text-decoration:none}
.crumbs a:hover{color:var(--ink-60)}
.crumbs span{margin:0 8px; color:var(--ink-40)}

/* ---------- Типографика статьи ---------- */
.post{padding:20px 0 0}
.post-head{max-width:760px; margin:0 auto 40px}
.post-head h1{font-size:clamp(28px,3.4vw,40px); line-height:1.14; text-wrap:balance; margin:12px 0 16px}
.post-meta{font-size:14px; color:var(--ink-40); display:flex; gap:16px; flex-wrap:wrap}
/* Обложка: без подписи — тему уже назвал заголовок строкой выше */
.post-head .cover{width:100%; height:auto; border-radius:var(--r-lg); margin-top:24px; box-shadow:var(--shadow-sm)}

.post-body{max-width:760px; margin:0 auto}
.post-body > * + *{margin-top:20px}
.post-body h2{margin-top:52px; text-wrap:balance}
.post-body h3{margin-top:36px}
.post-body p{font-size:17px; line-height:1.72}
.post-body ul,.post-body ol{padding-left:24px}
.post-body li{font-size:17px; line-height:1.72; margin-top:10px}
.post-body li::marker{color:var(--brand)}
.post-body strong{font-weight:700}
.post-body a{text-decoration:underline; text-underline-offset:2px}

/* Схема: идёт перед разделом, который поясняет */
.post-body figure{margin-top:36px; background:var(--mist); border-radius:var(--r-lg); padding:24px}
.post-body figure svg{width:100%; height:auto; border-radius:var(--r-sm); background:var(--surface)}
.post-body figure img{width:100%; height:auto; border-radius:var(--r-sm)}
.post-body figcaption{font-size:14px; color:var(--ink-60); margin-top:14px; text-align:center}

/* Таблица: на узком экране прокручивается, а не ломает страницу */
.post-body .table-wrap{overflow-x:auto; margin-top:28px; border:1px solid rgba(26,26,34,.1); border-radius:var(--r-md)}
.post-body table{border-collapse:collapse; width:100%; min-width:640px; font-size:15px}
.post-body th,.post-body td{text-align:left; padding:14px 16px; border-bottom:1px solid rgba(26,26,34,.08); vertical-align:top}
.post-body th{background:var(--mist); font-weight:700; font-size:14px}
.post-body tr:last-child td{border-bottom:0}

/* Хвост статьи: автор, дата, источники */
.post-foot{max-width:760px; margin:56px auto 0; padding-top:28px; border-top:1px solid rgba(26,26,34,.1)}
.post-foot h2{font-size:17px; font-weight:700; letter-spacing:0; margin-bottom:12px}
.post-foot ul{padding-left:22px}
.post-foot li{font-size:15px; color:var(--ink-60); line-height:1.6; margin-top:8px}
.post-foot .by{font-size:15px; color:var(--ink-60); margin-bottom:24px}

.post-cta{max-width:760px; margin:56px auto 0; background:var(--mist); border-radius:var(--r-lg); padding:32px; text-align:center}
.post-cta .cta-title{font-size:24px; font-weight:800; letter-spacing:-.015em; line-height:1.2; margin-bottom:12px}
.post-cta p{color:var(--ink-60); margin-bottom:22px; font-size:16px}

/* ---------- Лента раздела ---------- */
.feed-head{max-width:760px; margin:40px auto 44px}
.feed-head h1{font-size:clamp(30px,3.6vw,42px); line-height:1.12; margin:12px 0 16px; text-wrap:balance}
.feed{max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:20px}
.feed-item{display:block; text-decoration:none; color:inherit; border:1px solid rgba(26,26,34,.1); border-radius:var(--r-lg); padding:28px; transition:.15s}
.feed-item:hover{border-color:var(--lift); box-shadow:var(--shadow-sm)}
.feed-item h2{font-size:22px; line-height:1.28; text-wrap:balance}
.feed-item p{color:var(--ink-60); font-size:16px; margin-top:10px}
.feed-item .cap{margin-top:14px}
.feed-empty{color:var(--ink-40); font-size:17px}