/* Страницы статей skladfbs.ru - типографика поверх style.css */
.page-head{background:var(--ink); color:#fff; padding:calc(var(--s9) + 40px) 0 var(--s8)}
.page-head .tag{color:var(--brand)}
.page-head h1{color:#fff; max-width:900px; font-size:clamp(28px,3.4vw,44px)}
.page-head .lead{color:rgba(255,255,255,.72); max-width:760px; font-size:clamp(16px,1.25vw,18.5px); margin:0}
.crumbs{display:flex; flex-wrap:wrap; gap:6px; font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:rgba(255,255,255,.72); margin-bottom:var(--s5)}
.crumbs a{color:rgba(255,255,255,.85)}
.crumbs a:hover{color:var(--brand)}
.crumbs span::before{content:"/"; margin:0 4px; color:rgba(255,255,255,.3)}
.page-meta{display:flex; gap:var(--s5); flex-wrap:wrap; margin-top:var(--s5); font-size:13.5px; color:rgba(255,255,255,.75)}

.article{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:var(--s8); align-items:start; padding-top:var(--s8); padding-bottom:var(--s8)}
.prose{max-width:720px; min-width:0}
.prose h2{font-size:clamp(21px,2vw,27px); margin:var(--s7) 0 var(--s4); scroll-margin-top:90px}
.prose h3{font-size:clamp(17px,1.4vw,19px); margin:var(--s6) 0 var(--s3)}
.prose p,.prose li{font-size:16.5px; line-height:1.7; color:#2B3441}
.prose p{margin-bottom:var(--s4)}
.prose ul,.prose ol{padding-left:22px; margin:0 0 var(--s5)}
.prose li{margin-bottom:8px}
.prose li::marker{color:#0369A1; font-weight:700}
.prose a{color:#0369A1; text-decoration:underline; text-underline-offset:3px}
.prose strong{color:var(--ink)}
.prose table{width:100%; border-collapse:collapse; margin:0 0 var(--s5); font-size:15px}
.prose th,.prose td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--border); vertical-align:top}
.prose th{font-family:var(--mono); font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-muted); font-weight:400}
.prose .table-wrap{overflow-x:auto; margin-bottom:var(--s5)}
.prose .table-wrap table{margin:0; min-width:520px}
.summary{background:var(--bg-soft); border:1px solid var(--border); border-left:4px solid var(--brand); border-radius:var(--r-md); padding:var(--s5) var(--s6); margin:0 0 var(--s7)}
.summary h2{margin:0 0 var(--s3); font-size:15px; font-family:var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--fg-muted); font-weight:400}
.summary ul{margin:0}
.summary li{font-size:16px}
.callout{background:var(--ink); color:#fff; border-radius:var(--r-md); padding:var(--s5) var(--s6); margin:var(--s6) 0}
.callout p{color:rgba(255,255,255,.85); margin:0}
.callout b{color:var(--brand)}
.steps-list{counter-reset:st; list-style:none; padding:0; margin:0 0 var(--s6)}
.steps-list li{position:relative; padding-left:54px; margin-bottom:var(--s4)}
.steps-list li::before{counter-increment:st; content:counter(st,decimal-leading-zero); position:absolute; left:0; top:2px; width:38px; height:38px; border-radius:50%; background:var(--brand); color:var(--brand-ink); font-family:'Rubik',sans-serif; font-weight:700; font-size:14px; display:flex; align-items:center; justify-content:center}
.steps-list li b{display:block; color:var(--ink); font-family:'Rubik',sans-serif; font-weight:600; margin-bottom:3px}

.aside{position:sticky; top:90px; display:flex; flex-direction:column; gap:var(--s4); min-width:0}
.aside .card-form{padding:var(--s5)}
.aside .card-form h2{font-size:18px}
.aside__box{background:var(--bg-soft); border:1px solid var(--border); border-radius:var(--r-md); padding:var(--s5)}
.aside__box h4{font-family:var(--mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-muted); margin:0 0 var(--s3); font-weight:400}
.aside__box a{display:block; font-size:14.5px; line-height:1.4; padding:7px 0; border-bottom:1px solid var(--border); color:var(--fg)}
.aside__box a:last-child{border-bottom:0}
.aside__box a:hover{color:var(--accent)}

.related{padding-bottom:var(--s8)}
.related h2{font-size:clamp(20px,2vw,26px); margin-bottom:var(--s5)}

.stati-list{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); padding-top:var(--s8); padding-bottom:var(--s8)}
.stati-list .tile{min-height:220px}

@media (max-width:1040px){
  .article{grid-template-columns:minmax(0,1fr); gap:var(--s6)}
  .aside{position:static}
  .stati-list{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .page-head{padding:calc(var(--s8) + 50px) 0 var(--s7)}
  .stati-list{grid-template-columns:1fr}
  .prose p,.prose li{font-size:16px}
}