/* блог: список (blog.html, en/blog.html) и статьи (blog/<slug>.html, en/blog/<slug>.html). Страницы собирает gen/blog_build.py.
   Общие токены, шапка, карточки и подвал — в sub.css; здесь то, что раньше жило в <style> у blog.html и post.html */

/* ---------- список: заголовок слева, разделы под ним ---------- */
.bl-top{padding-top:72px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px}
.chips button{flex:none;height:40px;padding:0 18px;border:0;border-radius:39px;background:#131313;color:var(--t2);cursor:pointer;font:500 16px/19px var(--inter);letter-spacing:-.06em;transition:background .2s,color .2s}
.chips button:hover{background:#1f1f1f;color:#fff}
.chips button.on{background:#fff;color:#000}
.chips button sup{margin-left:4px;font-size:11px;letter-spacing:0;color:var(--t3)}
.chips button.on sup{color:rgba(0,0,0,.45)}
@media (max-width:899px){.bl-top{padding-top:48px}.chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;width:calc(100% + 2 * var(--ear));margin:28px calc(-1 * var(--ear)) 0;padding:0 var(--ear)}.chips::-webkit-scrollbar{display:none}}
.cards{margin-top:64px}
@media (max-width:899px){.cards{margin-top:44px}}

/* канал: зелёная полоса с кнопкой */
.chan{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;gap:32px;padding:44px 52px;border-radius:24px;
  background:radial-gradient(120% 140% at 0% 0%,#7dff7d,#1afc1a 50%,#0fc40f 100%);color:#000}
.chan h2{margin:0;font:700 60px/52px var(--inter);letter-spacing:-.08em}
.chan h2 span{color:rgba(0,0,0,.4)}
.chan p{margin:12px 0 0;max-width:420px;font:500 16px/19px var(--inter);letter-spacing:-.06em;color:rgba(0,0,0,.66)}
.chan .btn{background:#000;color:#fff;flex:none}
.chan .btn:hover{background:#1c1c1c}
.chan > div,.chan .btn{position:relative;z-index:2}
.chan::before,.chan::after{content:"";position:absolute;z-index:0;border-radius:50%;pointer-events:none;will-change:transform}
.chan::before{left:-15%;top:-60%;width:55%;height:160%;background:radial-gradient(closest-side,rgba(255,255,255,.34),transparent);animation:chA 16s ease-in-out infinite alternate}
.chan::after{right:-10%;bottom:-70%;width:50%;height:150%;background:radial-gradient(closest-side,rgba(0,110,0,.22),transparent);animation:chB 20s ease-in-out infinite alternate}
@keyframes chA{0%{transform:translate(0,0) scale(1)}50%{transform:translate(60%,10%) scale(1.12)}100%{transform:translate(120%,-5%) scale(.95)}}
@keyframes chB{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-90%,-15%) scale(1.15)}}
.chan .fly{position:absolute;z-index:1;right:250px;top:50%;width:220px;height:220px;transform:translateY(-50%);pointer-events:none}
.chan svg.tg{display:block;width:100%;height:100%;fill:rgba(0,0,0,.07);transform:rotate(-12deg)}
@media (prefers-reduced-motion:reduce){.chan::before,.chan::after{animation:none}}
@media (max-width:899px){.chan{flex-direction:column;align-items:flex-start;padding:32px 24px}.chan h2{font-size:46px;line-height:38px}.chan .fly{right:-40px;top:auto;bottom:-60px;transform:none}}

/* ---------- статья: шапка и текст в колонке 760 по центру, обложка шире ---------- */
.col{max-width:calc(760px * var(--k,1));margin:0 auto}
.art-h{padding-top:48px}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font:500 15px/18px var(--inter);letter-spacing:-.04em;color:var(--t3)}
.crumbs a{color:var(--t3);transition:color .2s}
.crumbs a:hover{color:#fff}
.crumbs svg{width:6px;height:10px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.7}
.art-h h1{margin:28px 0 0;font:700 calc(60px * var(--k,1))/calc(54px * var(--k,1)) var(--inter);letter-spacing:-.08em;text-wrap:balance} /* как заголовок первого экрана главной */
.art-h .lead{max-width:calc(560px * var(--k,1));margin-top:calc(21px * var(--k,1));font-size:calc(17px * var(--k,1));line-height:calc(21px * var(--k,1))}
.art-m{margin-top:24px}
.art-m span,.art-m time{white-space:nowrap}
.art-cv{max-width:1100px;margin:44px auto 0}
.art-cv .cv{aspect-ratio:16/7}
.art-cv .cv img{height:84%}
.art-cv .cv-wide img{height:auto;width:56%}

/* текст статьи */
.art{margin-top:48px;font:400 18px/28px var(--font);letter-spacing:-.02em;color:rgba(255,255,255,.82)}
.art p{margin:0 0 22px}
.art h2{margin:52px 0 16px;font:700 calc(28px * var(--k,1))/1.08 var(--inter);letter-spacing:-.065em;color:#fff}
.art h3{margin:30px 0 8px;font:600 19px/24px var(--inter);letter-spacing:-.045em;color:#fff}
.art h3 + p{margin-bottom:18px}
.art b{color:#fff;font-weight:600}
.art a{color:var(--g2);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;overflow-wrap:anywhere}
.art ol,.art ul{margin:0 0 26px;padding:0;list-style:none}
.art li{position:relative;margin-bottom:14px;padding-left:46px}
.art ol{counter-reset:li}
.art ol li::before{counter-increment:li;content:counter(li);position:absolute;left:0;top:-1px;width:31px;height:31px;border-radius:50%;background:#000;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);color:rgba(255,255,255,.45);display:grid;place-items:center;font:500 14px/1 var(--inter)} /* как шаги в мини-аппе (connect.html .step .n) */
.art ul li::before{content:"";position:absolute;left:11px;top:11px;width:7px;height:7px;border-radius:50%;background:var(--g2)}
.tip{position:relative;margin:34px 0;padding:2px 0 2px 26px;font-size:17px;line-height:25px}
.tip::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px;background:var(--g2)}
.tip > b:first-child{display:block;margin-bottom:6px;font:600 13px/15px var(--inter);letter-spacing:-.02em;color:var(--g2)}
@media (max-width:899px){.art-h{padding-top:32px}.crumbs{font-size:14px}.art-h h1{margin-top:22px;font-size:40px;line-height:38px}.art-h .lead{font-size:16px;line-height:20px}
  .art-cv{margin-top:28px}.art-cv .cv{aspect-ratio:16/11}.art{margin-top:36px;font-size:17px;line-height:26px}.art h2{font-size:26px;margin-top:42px}.art li{padding-left:42px}}

/* попробовать: тёмная карточка, подарок справа */
.try{position:relative;display:flex;align-items:center;min-height:240px;padding:20px 0}
.try > div{position:relative;z-index:1;max-width:440px}
.try h2{margin:0;font:700 60px/52px var(--inter);letter-spacing:-.08em}
.try h2 span{color:rgba(255,255,255,.34)}
.try .btn{margin-top:26px}
.try img{position:absolute;right:0;top:50%;width:250px;height:auto;transform:translateY(-50%) rotate(-8deg);pointer-events:none}
@media (max-width:899px){.try{flex-direction:column;align-items:flex-start;padding:0 0 230px}.try h2{font-size:46px;line-height:38px}.try img{right:auto;left:50%;top:auto;bottom:0;width:220px;transform:translateX(-50%) rotate(-8deg)}}
.more{margin-top:120px}
.more .cards{margin-top:40px}
@media (max-width:899px){.more{margin-top:90px}}

/* обложки блога без зелёной подсветки (24.10, просьба Артёма): свечение под картинкой только серое */
.cards .cv-g::before,.art-cv .cv-g::before{background:radial-gradient(closest-side,rgba(255,255,255,.07),transparent)}