/* Статья журнала — вариант A «Три колонки». Подключается через pageCss: article.css (layout article.njk). */
.a-head{position:relative;padding:56px 0 40px;border-bottom:1px solid var(--line);overflow:hidden}
.a-head::before{content:"";position:absolute;left:50%;top:-320px;width:1100px;height:600px;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(124,58,237,.22),transparent);pointer-events:none}
.a-head .wrap{position:relative}
.a-tags{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin-top:22px}
.a-upd::before{content:"·";margin-right:10px}
.a-title{margin:16px 0 0;max-width:920px;font-size:clamp(32px,4.4vw,56px);overflow-wrap:break-word}
.a-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:26px;font-size:14px;color:var(--mute)}
.a-meta .who{display:flex;align-items:center;gap:10px;color:var(--ink2)}.a-meta .who b{display:block;font-weight:600;color:var(--ink)}
.a-cols{display:grid;grid-template-columns:220px minmax(0,720px) 260px;gap:48px;justify-content:center;padding-top:44px}
.a-side{position:sticky;top:90px;align-self:start;max-height:calc(100vh - 110px);overflow:auto}.a-side .mono{display:block;margin-bottom:12px}
.a-main{min-width:0;overflow-wrap:break-word}
.a-mtoc{display:none;margin-bottom:24px;padding:0 16px}.a-mtoc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;padding:14px 0;font-weight:600}.a-mtoc summary::-webkit-details-marker{display:none}.a-mtoc .toc{padding-bottom:12px}
html:not(.js) .a-side,html:not(.js) .a-mtoc{visibility:hidden}
.a-tldr{font-size:16.5px;line-height:1.65;color:var(--ink2)}.a-tldr strong{color:var(--ink);font-weight:600}
.a-tldr a{color:var(--v3);text-decoration:underline;text-decoration-color:rgba(196,181,253,.35);text-underline-offset:3px}
.a-tldr code{font:500 .86em var(--mono);padding:2px 6px;border-radius:6px;background:rgba(255,255,255,.07);color:#E9E3FF;overflow-wrap:anywhere}
.a-rail{position:sticky;top:90px;align-self:start;display:grid;gap:12px}
.a-try{padding:22px}.a-try h3{margin:12px 0 6px;font-size:17px;letter-spacing:-.02em}.a-try p{margin:0 0 16px;font-size:14px;color:var(--mute)}.a-try .btn{width:100%}
.a-rel{padding:18px 20px}.a-rel a{display:block;padding:10px 0;border-top:1px solid var(--line);font-size:14px;line-height:1.4;color:var(--ink2)}.a-rel .mono+a{border-top:0}.a-rel a:hover{color:var(--v3)}
.a-share{display:flex;gap:8px}
.a-share a,.a-share button{flex:1;height:36px;display:flex;align-items:center;justify-content:center;border:0;border-radius:10px;font:500 13px var(--font);color:var(--mute);background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;transition:color .2s}
.a-share a:hover,.a-share button:hover{color:var(--ink)}
html:not(.js) .a-share button{display:none}
.a-cta{margin:48px 0 0;padding:34px;text-align:center;background:radial-gradient(70% 120% at 50% 0%,rgba(124,58,237,.3),transparent 70%),linear-gradient(180deg,var(--p2),var(--p1))}
.a-cta p{color:var(--mute);margin:10px auto 22px;max-width:440px}
.a-author{display:flex;gap:18px;align-items:flex-start;margin-top:16px;padding:24px}
.a-author .avatar{width:64px;height:64px;flex-shrink:0}
.a-author h3{margin:2px 0 8px;font-size:17px;font-weight:600;letter-spacing:-.02em}
.a-author p{margin:0;font-size:14.5px;line-height:1.6;color:var(--mute)}.a-author p strong{color:var(--ink);font-weight:600}
.a-links{display:flex;gap:18px;margin-top:12px;font-size:14px;font-weight:500}.a-links a{color:var(--v2)}.a-links a:hover{color:var(--v3)}
.a-more{margin-top:80px}.a-more-h{margin-bottom:22px}.a-more-h .d3{margin-top:10px}
.a-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.a-card{padding:20px;display:flex;flex-direction:column;gap:10px}.a-card h3{margin:0;font-size:17px;line-height:1.3;font-weight:600;letter-spacing:-.02em}
/* на широком экране первые 4 статьи уже в колонке «Related»; на узком колонки нет — показываем 1–6 */
.a-grid .a-card-wide{display:none}
@media (min-width:1181px){.a-grid .a-card-rel{display:none}.a-grid .a-card-wide{display:flex}}
.a-card-top{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.a-card p{margin:0;font-size:14px;color:var(--mute);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* вставки внутри текста статьи */
.prose .callout{margin:24px 0}
.prose .a-lead{font-size:20px;line-height:1.55;font-weight:600;color:var(--ink);margin-bottom:24px}
.prose figure{margin:30px 0}.prose figcaption{margin-top:10px;text-align:center;font-size:14px;color:var(--mute)}
.prose img{max-width:100%;height:auto;border-radius:var(--r2)}
.prose .figure img{width:auto;max-width:100%;margin:0 auto}
.prose .fig-narrow img{max-width:min(280px,100%)}
.prose .fig-tall img{max-width:min(360px,100%)}
.prose blockquote{margin:24px 0;padding:4px 0 4px 22px;border-left:2px solid var(--v2);font-size:17px;line-height:1.6;font-style:italic;color:var(--ink)}
.prose blockquote p:last-child{margin-bottom:0}
.prose ol{margin:0 0 20px;padding-left:22px}.prose ol>li{padding-left:6px;margin:10px 0}.prose ol>li::before{display:none}
.prose li>ul,.prose li>ol{margin:10px 0 0}
.prose hr{border:0;height:1px;background:var(--line2);margin:40px 0}
.prose code{overflow-wrap:anywhere}
/* код: без JS — тот же вид, что даёт обёртка .code из site.js */
.prose pre{margin:18px 0 24px;padding:16px 18px;border-radius:var(--r2);background:#0C0B12;box-shadow:inset 0 0 0 1px var(--line2);overflow-x:auto;font:400 13.5px/1.7 var(--mono);color:#E4DFF2}
.prose .code pre{margin:0;border-radius:0;box-shadow:none;background:none}
.prose pre code{padding:0;border-radius:0;background:none;font:inherit;color:inherit;overflow-wrap:normal}
.prose .inline-cta{margin:30px 0;padding:24px;border-radius:var(--r3);text-align:center;background:linear-gradient(180deg,rgba(139,92,246,.12),rgba(139,92,246,.04));box-shadow:inset 0 0 0 1px rgba(167,139,250,.28)}
.prose .inline-cta p{margin:0}.prose .inline-cta a.btn{text-decoration:none;color:#fff}
/* FAQ — аккордеон, вопрос остаётся заголовком h3 */
.prose .faq-item:first-of-type{border-top:1px solid var(--line)}
.prose .faq-item summary h3{margin:0;font-size:17px;line-height:1.4;font-weight:600;letter-spacing:-.01em}
.prose .faq-item>p,.prose .faq-item>ul,.prose .faq-item>ol{color:var(--mute)}
/* оценка статьи */
.a-rating{display:flex;flex-direction:column;align-items:center;gap:10px;margin:48px 0 0;padding:28px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);text-align:center}
.article-rating{display:flex;gap:4px}
.article-rating button{border:0;background:none;padding:2px;font-size:24px;line-height:1;cursor:pointer;opacity:.4;transition:transform .15s,opacity .15s}
.article-rating button:hover,.article-rating button:focus-visible{opacity:1;transform:scale(1.2)}
.article-rating.is-done{opacity:.5}.article-rating button:disabled{cursor:default}
.a-rating-avg{font-size:14px;line-height:1.5;color:var(--mute)}.a-rating-avg strong{color:var(--ink)}
.a-rating-msg{min-height:18px;font-size:12px;font-weight:500;color:var(--ok)}

@media (max-width:1180px){.a-cols{grid-template-columns:200px minmax(0,1fr)}.a-rail{display:none}}
@media (max-width:960px){
 .a-head{padding:36px 0 28px}.a-cols{grid-template-columns:minmax(0,1fr);padding-top:28px;gap:0}.a-side{display:none}
 .a-mtoc{display:block}.a-grid{grid-template-columns:minmax(0,1fr)}.a-cta{padding:26px 18px}
 .a-author{padding:20px;gap:14px}.a-author .avatar{width:48px;height:48px}
 .prose .a-lead{font-size:18px}
}