/* Yelumio — База знаний: index + article. Requires base.css. Айдентика «Горизонт · Предрассветная степь». */
/* обложка раздела: небо на восходе, солнце на горизонте, ниже — полоса степи */
.kb-hero{--gr:44px;padding:clamp(128px,14vw,168px) 0 calc(var(--gr) + clamp(130px,13vw,170px));position:relative;overflow:hidden;
  background:linear-gradient(0deg,#F9A77E 0,#F2775A 30px,#8A5687 120px,#2B2F6E 250px,#171A3F 430px) 0 calc(100% - var(--gr))/100% 430px no-repeat,var(--deep)}
.kb-hero::before{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--gr);background:var(--deep);z-index:1}
.kb-hero::after{content:"";position:absolute;right:14%;bottom:var(--gr);width:clamp(150px,20vw,280px);aspect-ratio:2/1;border-radius:999px 999px 0 0;background:var(--sun);
  animation:kbsun 1.6s .2s cubic-bezier(.16,1,.3,1) both}
@keyframes kbsun{from{transform:translateY(100%)}to{transform:none}}
.kb-hero .wrap{position:relative;z-index:2}
.kb-hero h1{font-size:clamp(30px,5.2vw,68px);line-height:1;margin:22px 0 22px;max-width:900px}
.kb-hero p{font-size:clamp(17px,1.6vw,20px);color:var(--ink-2);max-width:640px}
.kb-hero+section{padding-top:clamp(40px,5vw,64px)}
.kb-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 28px}
.kb-filter button{font:600 13px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;padding:11px 16px;border-radius:3px;border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;transition:all .2s}
.kb-filter button:hover{border-color:var(--ink)}
.kb-filter button.on{background:var(--deep);color:var(--fog);border-color:var(--deep)}
.kb-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding-bottom:clamp(80px,10vw,120px)}
.kb-grid .kb-card[hidden]{display:none}
@media (max-width:980px){.kb-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.kb-grid{grid-template-columns:1fr}.kb-card{min-height:0}.kb-hero::after{right:6%}}

/* article: шапка на глубоком индиго (без неба), текст — на светлом тумане */
.art-head{padding:clamp(120px,13vw,156px) 0 clamp(40px,5vw,64px);position:relative;border-bottom:3px solid var(--coral)}
.crumbs{display:flex;flex-wrap:wrap;gap:8px;font:600 12px/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:28px}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--ink)}
.crumbs span{opacity:.5}
.art-head .kb-tag{display:inline-block;font:650 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;padding:8px 11px;border-radius:2px;background:var(--coral);color:#12142E}
.art-head h1{font-size:clamp(26px,4vw,52px);line-height:1.04;margin:22px 0 22px;max-width:960px}
.art-lead{font-size:clamp(18px,1.8vw,22px);line-height:1.5;color:var(--ink-2);max-width:760px}
.art-meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:26px;font:600 12px/1 var(--sans);color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.art-layout{display:grid;grid-template-columns:minmax(0,720px) 260px;gap:clamp(40px,6vw,96px);padding-bottom:clamp(64px,8vw,100px);padding-top:clamp(40px,5vw,64px)}
.toc{position:sticky;top:100px;align-self:start;font-size:14px}
.toc h4{font:650 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.toc a{display:block;text-decoration:none;color:var(--ink-2);padding:8px 0 8px 14px;border-left:2px solid var(--line);line-height:1.35;transition:border-color .2s,color .2s}
.toc a:hover,.toc a.on{border-color:var(--coral);color:var(--ink)}
.prose{font-size:18px;line-height:1.72;color:var(--ink-2)}
.prose>*+*{margin-top:1.1em}
.prose h2{font-size:clamp(20px,2.1vw,26px);color:var(--ink);margin-top:2em;line-height:1.12}
.prose h3{font-size:clamp(18px,1.7vw,21px);color:var(--ink);margin-top:1.8em;font-family:var(--sans);font-stretch:normal;font-weight:700;text-transform:none;letter-spacing:0}
.prose h2+*,.prose h3+*{margin-top:.6em}
.prose strong{color:var(--ink);font-weight:700}
.prose a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--coral);text-decoration-thickness:2px;text-underline-offset:3px}
.prose a:hover{background:rgba(242,119,90,.16)}
.prose ul,.prose ol{padding-left:1.3em}
.prose li+li{margin-top:.45em}
.prose li::marker{color:var(--coral)}
.prose blockquote{margin:1.6em 0;padding:4px 0 4px 22px;border-left:3px solid var(--coral);font-size:20px;color:var(--ink)}
.prose table{width:100%;border-collapse:collapse;font-size:16px}
.prose th,.prose td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
.prose th{font:650 12px/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.prose.faq-prose h2{font-size:clamp(17px,1.7vw,20px);margin-top:1.6em;padding-top:1.4em;border-top:1px solid var(--line)}
.prose.faq-prose h2:first-child{margin-top:0;padding-top:0;border-top:0}

/* CTA-обложка: маленький восход внизу справа */
.cta-box{--gr:26px;margin-top:clamp(48px,6vw,72px);padding:clamp(28px,4vw,44px) clamp(28px,4vw,44px) calc(var(--gr) + clamp(28px,4vw,44px));border-radius:var(--r-lg);position:relative;overflow:hidden;
  background:linear-gradient(0deg,#F9A77E 0,#F2775A 20px,#8A5687 80px,#2B2F6E 170px,#171A3F 290px) 0 calc(100% - var(--gr))/100% 290px no-repeat,var(--deep)}
.cta-box::before{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--gr);background:var(--deep);z-index:1}
.cta-box::after{content:"";position:absolute;right:9%;bottom:var(--gr);width:120px;height:60px;border-radius:999px 999px 0 0;background:var(--sun)}
.cta-box h2{font-size:clamp(20px,2.4vw,28px);max-width:80%;position:relative;z-index:1}
.cta-box p{color:var(--ink-2);margin:14px 0 26px;max-width:520px;position:relative;z-index:1}
.cta-box h2+.btns{margin-top:26px}
.cta-box .btns{display:flex;gap:10px;flex-wrap:wrap;position:relative;z-index:2}
.cta-box .btn-line{background:rgba(23,26,63,.45)}
.related{padding:clamp(64px,8vw,100px) 0;background:var(--paper-2)}
.related h2{font-size:clamp(22px,2.8vw,34px);margin-bottom:32px}
.related .kb-grid{padding-bottom:0}
@media (max-width:980px){
  .art-layout{grid-template-columns:1fr}
  .toc{display:none}
}
@media (max-width:640px){
  .prose{font-size:17px}
  .cta-box h2{max-width:100%}
  .cta-box::after{width:84px;height:42px;right:7%}
  .cta-box .btn{flex:1 1 100%}
}

.ru-note{display:none}
html:not([lang=ru]) .ru-note{display:block}
.kb-langnote{margin-top:18px;font:500 13px/1.4 var(--sans);color:var(--muted)}
.crumbs em{font-style:normal;color:var(--ink-2)}
.art-head h1,.kb-card h3{overflow-wrap:break-word}
@media (max-width:640px){.art-head h1{font-size:clamp(22px,6.4vw,28px)}}