/* ==========================================================================
   article.css — استایل مشترک همهٔ مقاله‌های بلاگ
   ========================================================================== */

.article-wrap{max-width:760px;margin:0 auto;padding:var(--header-height,86px) 20px 90px}

.article-head{padding:44px 0 26px;border-bottom:1px solid rgba(199,176,74,.22)}
.crumb{font-size:14px;color:rgba(255,255,255,.45);margin-bottom:18px}
.crumb a{color:rgba(255,255,255,.45);text-decoration:none}
.crumb a:hover{color:var(--gold-light,#F2DE84)}
.article-head h1{font-size:34px;line-height:1.45;font-weight:800;margin:0 0 14px;color:#fff}
.article-meta{font-size:14px;color:rgba(255,255,255,.42)}

article{font-size:17px;line-height:2.05;color:rgba(255,255,255,.78)}
article h2{font-size:24px;line-height:1.5;margin:44px 0 14px;font-weight:700;color:#fff}
article h2::after{content:'';display:block;width:70px;height:2px;
                  background:var(--gold,#C7B04A);opacity:.6;margin-top:12px}
article h3{font-size:19px;margin:30px 0 10px;font-weight:700;color:#fff}
article p{margin:0 0 20px}
article strong{font-weight:700;color:#fff}

article ul,article ol{margin:0 0 22px;padding-right:22px}
article li{margin-bottom:9px;line-height:1.95}

.callout{border-right:3px solid var(--gold,#C7B04A);background:rgba(199,176,74,.07);
         padding:20px 24px;border-radius:10px;margin:28px 0;font-size:16.5px;line-height:1.95}

.warn{border-right:3px solid #D9534F;background:rgba(217,83,79,.07);
      padding:20px 24px;border-radius:10px;margin:28px 0;font-size:16.5px;line-height:1.95}

.calc{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);
      border-radius:10px;padding:22px 24px;margin:26px 0;font-size:16px;line-height:2}
.calc b{color:var(--gold-light,#F2DE84)}
.calc .row{display:flex;justify-content:space-between;gap:14px;
           padding:7px 0;border-bottom:1px dashed rgba(255,255,255,.09)}
.calc .row:last-child{border-bottom:0;padding-top:12px;font-weight:700;color:#fff}

.related{margin-top:52px;padding-top:26px;border-top:1px solid rgba(199,176,74,.22)}
.related h3{font-size:19px;margin:0 0 14px;font-weight:700}
.related ul{margin:0;padding:0;list-style:none}
.related li{margin:0 0 10px}
.related a{color:var(--gold-light,#F2DE84);text-decoration:none}
.related a:hover{text-decoration:underline}

@media(max-width:640px){
  .article-head h1{font-size:26px}
  article{font-size:16px}
  article h2{font-size:21px}
  .callout,.warn,.calc{padding:18px 18px}
}