/* Общие стили раздела «Статьи» — Чин Кар */
@font-face{font-family:'Garet';src:local('Garet Book'),local('Garet-Book'),url('../fonts/Garet-Book.woff2') format('woff2');font-weight:100 500;font-display:swap}
@font-face{font-family:'Garet';src:local('Garet Heavy'),local('Garet-Heavy'),url('../fonts/Garet-Heavy.woff2') format('woff2');font-weight:600 900;font-display:swap}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--red:#E8001D;--red2:#bf0018;--dark:#080808;--dark2:#0e0e0e;--dark3:#141414;--muted:#bdbdbd;--soft:#dcdcdc;--border:rgba(255,255,255,.08);--border2:rgba(255,255,255,.15);--F:'Garet','Garet Book','Helvetica Neue',Arial,sans-serif}
html{-webkit-text-size-adjust:100%}
body{background:var(--dark);color:#f5f5f5;font-family:var(--F);line-height:1.6}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block;height:auto}

.top{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 32px;background:rgba(8,8,8,.95);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.logo{display:inline-block;background:url(../img/logo.webp) no-repeat left center/contain;aspect-ratio:557/112;height:32px}
.top nav{display:flex;align-items:center;gap:24px;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:#ccc}
.top nav a:hover{color:#fff}
.btn{border-radius:14px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;padding:13px 22px;border:1px solid transparent;transition:background .2s,border-color .2s;text-align:center}
.btn-red{background:var(--red);color:#fff!important}.btn-red:hover{background:var(--red2)}
.btn-out{border-color:var(--border2);color:#fff}.btn-out:hover{border-color:#fff}

.wrap{max-width:760px;margin:0 auto;padding:48px 20px 80px}
.wide{max-width:1100px}
.crumbs{font-size:12px;color:#999;margin-bottom:22px}
.crumbs a{color:#bbb}.crumbs a:hover{color:#fff}
.label{font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--red);margin-bottom:12px}
h1{font-size:clamp(30px,5vw,46px);font-weight:800;line-height:1.1;letter-spacing:-.5px;margin-bottom:18px}
.meta{font-size:13px;color:#999;margin-bottom:30px}
.lead{font-size:19px;color:#fff;line-height:1.7;margin-bottom:26px;border-left:2px solid var(--red);padding-left:20px}
.cover{margin:0 0 34px;border:1px solid var(--border);border-radius:16px;width:100%;aspect-ratio:3/2;object-fit:cover}
article h2{font-size:clamp(22px,3vw,30px);font-weight:800;line-height:1.2;margin:46px 0 16px}
article h3{font-size:19px;font-weight:700;margin:28px 0 10px}
article p{font-size:17px;color:var(--soft);line-height:1.8;margin-bottom:16px}
article strong{color:#fff}
article ul,article ol{margin:0 0 18px 0;padding-left:22px;color:var(--soft);font-size:17px;line-height:1.8}
article li{margin-bottom:8px}
article li::marker{color:var(--red)}
article a{color:#fff;border-bottom:1px solid var(--red)}
.toc{background:var(--dark2);border:1px solid var(--border);padding:22px 26px;margin:0 0 34px}
.toc b{display:block;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:#999;margin-bottom:10px}
.toc ol{margin:0;padding-left:20px;font-size:15px}
.toc a{border:0;color:#ddd}.toc a:hover{color:#fff}
table{width:100%;border-collapse:collapse;margin:8px 0 22px;font-size:15px}
th,td{text-align:left;padding:12px 14px;border:1px solid var(--border);vertical-align:top}
th{background:var(--dark3);color:#fff;font-weight:700}
td{color:var(--soft)}
.table-scroll{overflow-x:auto}
.cta-box{border-radius:20px;margin:46px 0 10px;padding:30px;border:1px solid rgba(232,0,29,.5);background:linear-gradient(160deg,rgba(232,0,29,.14),rgba(8,8,8,.9) 60%)}
.cta-box h2{margin:0 0 10px!important}
.cta-box p{margin-bottom:20px}
.cta-box .btns{display:flex;gap:12px;flex-wrap:wrap}
.cta-box a{border-bottom:0}
.faq details{border-bottom:1px solid var(--border)}
.faq summary{cursor:pointer;list-style:none;padding:18px 0;font-weight:700;font-size:17px;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--red);font-size:22px;line-height:1}
.faq details[open] summary::after{content:'–'}
.faq details p{padding-bottom:16px}
.related{margin-top:50px;padding-top:30px;border-top:1px solid var(--border)}

/* список статей */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-top:34px}
.card{border-radius:16px;overflow:hidden;display:flex;flex-direction:column;background:var(--dark2);border:1px solid var(--border);transition:border-color .25s}
.card:hover{border-color:rgba(232,0,29,.5)}
.card img{aspect-ratio:16/9;object-fit:cover;width:100%}
.card>div{padding:20px 22px 24px}
.card .tag{font-size:10px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--red);margin-bottom:8px}
.card h2{font-size:19px;font-weight:700;line-height:1.3;margin-bottom:8px}
.card p{font-size:14px;color:var(--muted);line-height:1.6}

footer{border-top:1px solid var(--border);padding:30px 20px 40px;text-align:center;font-size:12px;color:#888;line-height:1.8}
footer a{color:#bbb}

@media(max-width:700px){
  .top{padding:12px 16px}.top nav .hide-m{display:none}.top .btn{padding:10px 12px;font-size:10px;letter-spacing:1px;white-space:nowrap}
  .logo{height:26px}
  .wrap{padding:30px 16px 60px}
  .lead{font-size:17px}
  article p,article ul,article ol{font-size:16px}
  .cta-box{padding:22px 18px}.cta-box .btn{width:100%}
}