/* ═══════════════════════════════════════════════════════════════
   Раздел «Статьи» Solis-GOLD.
   Подключается ПОСЛЕ main.css и только на страницах раздела.
   Свои токены не заводит - берёт переменные из main.css (:root).
   Никаких внешних шрифтов, скриптов и картинок: всё локальное.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Витрина раздела ─────────────────────────────────────────── */

.arts{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)}

.art-card{
  background:var(--panel);display:grid;grid-template-columns:minmax(0,46%) minmax(0,54%);
  transition:background .4s var(--ease);
}
.art-card:hover{background:var(--panel-2)}

.art-card__vis{position:relative;overflow:hidden;min-height:320px;background:#0B0D0F}
.art-card__vis img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .8s var(--ease);
}
.art-card:hover .art-card__vis img{transform:scale(1.035)}
.art-card__vis::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 40%,rgba(13,15,17,.55) 100%),
             radial-gradient(70% 90% at 22% 30%,rgba(217,180,95,.13),transparent 60%);
}

.art-card__body{padding:clamp(28px,3.4vw,52px);display:flex;flex-direction:column}
.art-card__meta{
  display:flex;flex-wrap:wrap;gap:10px 20px;align-items:center;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);
}
.art-card__meta b{color:var(--gold);font-weight:600;letter-spacing:.18em}
.art-card__t{
  font-family:'Unbounded',sans-serif;font-weight:300;letter-spacing:-.025em;line-height:1.16;
  font-size:clamp(22px,2.35vw,34px);margin:20px 0 0;
}
.art-card__d{color:var(--muted);font-size:15.5px;margin-top:18px;max-width:46ch}
.art-card__go{
  margin-top:auto;padding-top:30px;display:inline-flex;align-items:center;gap:12px;
  font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);
}
.art-card__go span{
  display:block;width:34px;height:1px;background:var(--gold-deep);
  transition:width .4s var(--ease),background .4s var(--ease);
}
.art-card:hover .art-card__go span{width:54px;background:var(--gold)}

/* Заглушка «скоро» - держит ритм витрины, пока статья одна */
.art-soon{background:var(--panel);padding:clamp(28px,3.4vw,52px)}
.art-soon__h{
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);
  margin:0 0 22px;
}
/* Колонки задаём на самом списке: если повесить сетку на .art-soon,
   весь ul уедет в одну колонку и строки схлопнутся в узкий столбик. */
.art-soon ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px 36px}
.art-soon li{color:#B7B9BB;font-size:15px;line-height:1.5;padding-left:20px;position:relative}
.art-soon li::before{
  content:"";position:absolute;left:0;top:10px;width:8px;height:1px;background:var(--gold-deep);
}

@media(max-width:900px){
  .art-card{grid-template-columns:1fr}
  .art-card__vis{min-height:210px}
  .art-card__vis::after{background:linear-gradient(180deg,transparent 45%,rgba(13,15,17,.6) 100%)}
}

/* ─── Шапка статьи ────────────────────────────────────────────── */

.ahead{
  position:relative;padding:calc(76px + clamp(52px,6vw,92px)) 0 clamp(34px,4vw,54px);
  background:radial-gradient(88% 130% at 78% 4%,rgba(217,180,95,.12),transparent 58%),var(--panel);
  border-bottom:1px solid var(--line);
}
.ahead__in{width:min(880px,100% - 88px);margin-inline:auto}
@media(max-width:820px){.ahead__in{width:calc(100% - 32px)}}
.ahead h1{font-size:clamp(27px,3.7vw,52px);font-weight:300;line-height:1.12}
.ahead__lead{margin-top:24px;color:var(--muted);font-size:clamp(16px,1.15vw,18.5px);line-height:1.62;max-width:62ch}
.ahead__meta{
  display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:30px;padding-top:22px;
  border-top:1px solid var(--line);
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
}
.ahead__meta b{color:#C4C6C8;font-weight:600;letter-spacing:.16em}

/* Обложка во всю ширину под шапкой */
.acover{position:relative;border-bottom:1px solid var(--line);background:#0B0D0F}
.acover img{width:100%;height:clamp(220px,42vw,520px);object-fit:cover;object-position:center 58%}
.acover::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,9,10,.42) 0%,transparent 26%,transparent 68%,rgba(8,9,10,.5) 100%);
}
.acover figcaption{
  position:relative;width:min(880px,100% - 88px);margin:0 auto;padding:14px 0 0;
  color:var(--dim);font-size:12.5px;
}
@media(max-width:820px){.acover figcaption{width:calc(100% - 32px)}}

/* ─── Тело статьи ─────────────────────────────────────────────── */

.art{
  width:min(880px,100% - 88px);margin:0 auto;
  padding:clamp(46px,5.5vw,86px) 0 clamp(56px,6vw,96px);
}
@media(max-width:820px){.art{width:calc(100% - 32px)}}

.art > *{max-width:68ch}
.art > .art-wide,.art > figure,.art > .atable,.art > .acta{max-width:none}

.art p{margin:0 0 22px;font-size:17px;line-height:1.75;color:#C7C9CB}
.art p:last-child{margin-bottom:0}
.art strong{color:var(--text);font-weight:700}
.art em{font-style:normal;color:var(--gold);font-weight:600}

.art h2{
  font-family:'Unbounded',sans-serif;font-weight:300;letter-spacing:-.025em;line-height:1.18;
  font-size:clamp(21px,2.15vw,31px);color:var(--text);
  margin:clamp(50px,5vw,78px) 0 22px;padding-top:clamp(30px,3vw,44px);
  border-top:1px solid var(--line);
}
.art h2:first-child{margin-top:0;padding-top:0;border-top:0}
.art h3{
  font-family:'Unbounded',sans-serif;font-weight:400;letter-spacing:-.02em;
  font-size:clamp(17px,1.45vw,20px);margin:38px 0 14px;
}

/* Ссылки в тексте */
.art a:not(.btn){
  color:var(--text);border-bottom:1px solid var(--gold-deep);
  transition:color .25s var(--ease),border-color .25s var(--ease);
}
.art a:not(.btn):hover{color:var(--gold);border-bottom-color:var(--gold)}

/* Списки.
   list-style:none обязателен: main.css гасит маркеры только у ul, и без этого
   у ol рядом с нашим счётчиком печатается ещё и родной номер браузера. */
.art ul,.art ol{margin:0 0 24px;padding:0;list-style:none}
.art ul li,.art ol li{
  position:relative;color:#C7C9CB;font-size:17px;line-height:1.7;
  margin-bottom:13px;padding-left:30px;
}
.art ul li::before{
  content:"";position:absolute;left:0;top:12px;width:13px;height:1px;background:var(--gold-deep);
}
.art ol{counter-reset:astep}
.art ol li{counter-increment:astep;padding-left:42px}
.art ol li::before{
  content:counter(astep,decimal-leading-zero);position:absolute;left:0;top:1px;
  font-family:'Unbounded',sans-serif;font-size:12.5px;font-weight:400;color:var(--gold);
  letter-spacing:.04em;
}

/* Блок «Коротко» - выжимка в начале раздела */
.tldr{
  margin:0 0 30px;padding:2px 0 2px 26px;border-left:1px solid var(--gold-deep);
}
.tldr__l{
  display:block;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);margin-bottom:10px;
}
.tldr p{margin:0;font-size:16.5px;line-height:1.66;color:#D8DADB}

/* Врезка-предупреждение */
.note{
  margin:30px 0;padding:22px 26px;background:var(--panel);border:1px solid var(--line);
  border-left:2px solid var(--gold-deep);
}
.note__l{
  display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--dim);margin-bottom:11px;
}
.note p{margin:0;font-size:16px;line-height:1.68}
.note p + p{margin-top:14px}

/* Крупная выносная мысль */
.pull{
  margin:clamp(40px,4.5vw,64px) 0;padding:0;
  font-family:'Unbounded',sans-serif;font-weight:300;letter-spacing:-.02em;
  font-size:clamp(19px,1.95vw,28px);line-height:1.32;color:var(--text);
}
.pull b{color:var(--gold);font-weight:400}

/* Таблица */
.atable{margin:34px 0;overflow-x:auto;border:1px solid var(--line);background:var(--panel)}
.atable table{width:100%;min-width:560px;border-collapse:collapse;font-size:15px}
.atable caption{
  caption-side:top;text-align:left;padding:18px 22px 0;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);
}
.atable th,.atable td{
  padding:14px 22px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;
}
.atable thead th{
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
  font-weight:600;white-space:nowrap;
}
.atable tbody th{font-weight:600;color:var(--text);font-size:15px}
.atable td{color:#B9BBBD}
.atable tbody tr:last-child th,.atable tbody tr:last-child td{border-bottom:0}
.atable tbody tr:hover th,.atable tbody tr:hover td{background:var(--panel-2)}
.atable .num{color:var(--gold);font-weight:600;white-space:nowrap}

/* Иллюстрация внутри статьи */
.art figure{margin:clamp(38px,4vw,58px) 0}
.art figure img{width:100%;border:1px solid var(--line)}
/* Студийная вырезка техники: та же тёмная сцена, что в каталоге */
.figstage{
  background:radial-gradient(66% 66% at 50% 52%,#1B1E21,#0C0E10 78%);
  border:1px solid var(--line);padding:clamp(20px,3vw,44px);
}
.figstage img{border:0;width:min(100%,560px);margin-inline:auto}
.art figcaption{margin-top:13px;color:var(--dim);font-size:13px;line-height:1.5;max-width:64ch}

/* Призыв внутри статьи */
.acta{
  margin:clamp(44px,5vw,72px) 0;padding:clamp(28px,3.2vw,44px);
  background:linear-gradient(152deg,rgba(217,180,95,.13),rgba(217,180,95,.02) 48%,var(--panel) 80%);
  border:1px solid var(--line-strong);
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center;
}
.acta__t{
  font-family:'Unbounded',sans-serif;font-weight:300;letter-spacing:-.02em;line-height:1.24;
  font-size:clamp(18px,1.75vw,25px);margin:0;
}
.acta__d{margin:14px 0 0;color:var(--muted);font-size:15px;line-height:1.6;max-width:52ch}
.acta__acts{display:flex;gap:12px;flex-wrap:wrap}
@media(max-width:820px){
  .acta{grid-template-columns:1fr;gap:24px}
  .acta__acts .btn{flex:1 1 100%}
}

/* Источники */
.srcs{margin-top:clamp(50px,5vw,78px);padding-top:clamp(30px,3vw,44px);border-top:1px solid var(--line)}
.srcs h2{margin:0 0 20px;padding-top:0;border-top:0;font-size:clamp(19px,1.8vw,25px)}
/* Селекторы намеренно той же длины, что у .art ol li: правила стоят ниже
   и потому перекрывают общий счётчик статьи своим, сквозным для источников. */
.srcs ol{counter-reset:asrc;margin:0;padding:0;list-style:none}
.srcs ol li{
  counter-increment:asrc;position:relative;padding-left:36px;margin-bottom:14px;
  color:var(--muted);font-size:14.5px;line-height:1.6;
}
.srcs ol li::before{
  content:counter(asrc);position:absolute;left:0;top:2px;
  font-family:'Unbounded',sans-serif;font-size:12px;font-weight:400;color:var(--gold-deep);
  letter-spacing:0;
}
.srcs a{color:#C4C6C8;border-bottom:1px solid var(--line-strong)}
.srcs a:hover{color:var(--gold);border-bottom-color:var(--gold)}

/* Подпись-дисклеймер под статьёй */
.adisc{
  margin-top:34px;padding:18px 22px;border:1px solid var(--line);background:var(--panel);
  color:var(--dim);font-size:13px;line-height:1.6;
}

/* Навигация в конце статьи */
.aback{
  border-top:1px solid var(--line);background:var(--panel);
  padding:clamp(34px,4vw,54px) 0;
}
.aback__in{
  width:min(1380px,100% - 88px);margin-inline:auto;
  display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;
}
@media(max-width:820px){.aback__in{width:calc(100% - 32px)}}
.aback__t{font-family:'Unbounded',sans-serif;font-weight:300;font-size:clamp(18px,1.8vw,26px);margin:0}