/* ============================================================
   IMPULSE — редакционная типографика статей
   Подключать после site.css: <link rel="stylesheet" href="article.css">
   Классы совпадают с существующей разметкой: .art-hero, .article,
   .lead, .art-meta. Новые элементы описаны в конце файла.
   ============================================================ */

:root{
  --art-measure: 68ch;          /* длина строки — главный параметр читаемости */
  --art-body: rgba(255,255,255,.80);
  --art-quiet: rgba(255,255,255,.52);
  --art-rule: rgba(255,255,255,.10);
  --art-grad: linear-gradient(90deg,#5861FF,#8A3FFC);
  --art-serif: "Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
}

/* ---------- Индикатор прочитанного ---------- */
.art-progress{
  position:fixed; top:0; left:0; height:2px; width:0;
  background:var(--art-grad); z-index:200;
  transition:width .1s linear; pointer-events:none;
}

/* ---------- Шапка статьи ---------- */
.art-hero{
  padding:clamp(120px,14vw,180px) 0 clamp(28px,4vw,44px);
  border-bottom:1px solid var(--art-rule);
  margin-bottom:clamp(36px,5vw,56px);
}
.art-hero .container{max-width:calc(var(--art-measure) + 8ch);}
.art-hero h1{
  font-size:clamp(32px,5.2vw,60px);
  line-height:1.06;
  letter-spacing:-.028em;
  font-weight:800;
  max-width:20ch;
  margin:0 0 22px;
  text-wrap:balance;
}
.art-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:0 10px;
  font-size:13px; color:var(--art-quiet); letter-spacing:.01em;
}
.art-meta span{display:inline-flex; align-items:center;}
.art-meta span + span::before{
  content:""; width:3px; height:3px; border-radius:50%;
  background:currentColor; opacity:.5; margin-right:10px;
}

/* ---------- Тело статьи ---------- */
.article{
  max-width:var(--art-measure);
  margin:0 auto;
  font-size:clamp(17px,1.15vw,19px);
  line-height:1.75;
  color:var(--art-body);
  text-wrap:pretty;
}
.article > * + *{margin-top:1.35em;}

/* Лид — крупнее и светлее основного текста */
.article .lead{
  font-size:clamp(20px,1.7vw,25px);
  line-height:1.5;
  letter-spacing:-.012em;
  color:rgba(255,255,255,.94);
  font-weight:400;
  margin-bottom:1.6em;
}

/* Буквица у первого абзаца после лида */
.article .lead + p::first-letter{
  float:left;
  font-family:var(--art-serif);
  font-size:4.1em;
  line-height:.82;
  font-weight:600;
  padding:.06em .12em 0 0;
  background:var(--art-grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* ---------- Заголовки внутри статьи ---------- */
.article h2{
  font-size:clamp(24px,2.6vw,33px);
  line-height:1.18;
  letter-spacing:-.022em;
  font-weight:800;
  color:#fff;
  margin-top:2.4em;
  padding-top:1.1em;
  border-top:1px solid var(--art-rule);
  position:relative;
  text-wrap:balance;
}
.article h2::before{
  content:""; position:absolute; top:-1px; left:0;
  width:64px; height:2px; background:var(--art-grad);
}
.article h3{
  font-size:clamp(19px,1.5vw,22px);
  line-height:1.3; letter-spacing:-.014em;
  font-weight:700; color:#fff;
  margin-top:2em;
}
.article h2 + p, .article h3 + p{margin-top:.85em;}

.article strong{color:#fff; font-weight:650;}
.article a:not(.btn){
  color:#fff;
  text-decoration:underline;
  text-decoration-color:rgba(138,63,252,.55);
  text-underline-offset:4px;
  text-decoration-thickness:1.5px;
  transition:text-decoration-color .2s;
}
.article a:not(.btn):hover{text-decoration-color:#8A3FFC;}

/* ---------- Списки ---------- */
.article ul, .article ol{padding-left:0; list-style:none;}
.article li{position:relative; padding-left:30px; margin-top:.7em;}
.article ul > li::before{
  content:""; position:absolute; left:8px; top:.72em;
  width:6px; height:6px; border-radius:50%; background:var(--art-grad);
}
.article ol{counter-reset:art-ol;}
.article ol > li{counter-increment:art-ol;}
.article ol > li::before{
  content:counter(art-ol);
  position:absolute; left:0; top:.05em;
  font-size:13px; font-weight:700; color:#fff;
  width:21px; height:21px; border-radius:50%;
  display:grid; place-items:center;
  background:rgba(255,255,255,.10);
  border:1px solid var(--art-rule);
}

/* ---------- Цитата ---------- */
.article .pull{
  margin:2.4em 0;
  padding:0 0 0 clamp(20px,3vw,32px);
  border-left:2px solid transparent;
  border-image:var(--art-grad) 1;
  font-family:var(--art-serif);
  font-size:clamp(21px,2.1vw,27px);
  line-height:1.42;
  color:#fff;
  font-style:italic;
}
.article .pull cite{
  display:block; margin-top:.7em;
  font-family:inherit; font-style:normal;
  font-size:14px; letter-spacing:.02em;
  color:var(--art-quiet);
}

/* ---------- Врезка с пояснением ---------- */
.article .note{
  margin:2.2em 0;
  padding:clamp(20px,2.4vw,26px);
  border:1px solid var(--art-rule);
  border-radius:var(--radius-lg,16px);
  background:rgba(255,255,255,.035);
  font-size:.95em;
}
.article .note-h{
  display:flex; align-items:center; gap:9px;
  font-size:11px; font-weight:700; letter-spacing:.2em;
  text-transform:uppercase; color:var(--art-quiet);
  margin-bottom:12px;
}
.article .note-h::before{
  content:""; width:20px; height:1px; background:var(--art-grad);
}
.article .note > *:first-child + *{margin-top:0;}

/* ---------- Блок цифр. Заодно даёт извлекаемые факты для ИИ-поиска ---------- */
.article .stats{
  display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  margin:2.4em 0;
  background:var(--art-rule);
  border:1px solid var(--art-rule);
  border-radius:var(--radius-lg,16px);
  overflow:hidden;
}
.article .stats > div{
  background:#0A0A0A; padding:clamp(20px,2.4vw,26px);
}
.article .stat-n{
  display:block;
  font-size:clamp(28px,3.4vw,40px);
  font-weight:800; line-height:1; letter-spacing:-.03em;
  background:var(--art-grad);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  margin-bottom:9px;
}
.article .stat-l{
  font-size:13px; line-height:1.45; color:var(--art-quiet);
}

/* ---------- Иллюстрации ---------- */
.article figure{
  margin:2.6em 0;
  /* шире колонки текста — даёт воздух и ритм */
  width:min(100vw - 48px, calc(var(--art-measure) + 12ch));
  margin-left:50%; transform:translateX(-50%);
}
.article figure img, .article figure svg{
  display:block; width:100%; height:auto;
  border-radius:var(--radius-lg,16px);
  border:1px solid var(--art-rule);
  background:rgba(255,255,255,.03);
}
.article figcaption{
  margin-top:12px; font-size:13.5px; line-height:1.5;
  color:var(--art-quiet); text-align:center;
  max-width:64ch; margin-inline:auto;
}

/* ---------- Таблица ---------- */
.article .table-wrap{
  margin:2.4em 0; overflow-x:auto;
  border:1px solid var(--art-rule);
  border-radius:var(--radius-lg,16px);
}
.article table{
  width:100%; border-collapse:collapse;
  font-size:15px; line-height:1.55;
}
.article th{
  text-align:left; font-weight:700; color:#fff;
  padding:14px 18px; white-space:nowrap;
  border-bottom:1px solid var(--art-rule);
  background:rgba(255,255,255,.04);
  font-size:12px; letter-spacing:.11em; text-transform:uppercase;
}
.article td{
  padding:14px 18px;
  border-bottom:1px solid rgba(255,255,255,.06);
  vertical-align:top;
}
.article tr:last-child td{border-bottom:none;}

/* ---------- Вопросы и ответы ---------- */
.art-faq{
  max-width:var(--art-measure); margin:clamp(48px,6vw,72px) auto 0;
  border-top:1px solid var(--art-rule); padding-top:clamp(28px,3.5vw,40px);
}
.art-faq h2{
  font-size:clamp(22px,2.3vw,29px); font-weight:800;
  letter-spacing:-.02em; margin:0 0 6px;
}
.art-faq details{
  border-bottom:1px solid var(--art-rule);
}
.art-faq summary{
  cursor:pointer; list-style:none;
  padding:20px 40px 20px 0; position:relative;
  font-size:clamp(16px,1.2vw,18px); font-weight:650; color:#fff;
  transition:color .2s;
}
.art-faq summary::-webkit-details-marker{display:none;}
.art-faq summary::after{
  content:""; position:absolute; right:6px; top:50%;
  width:9px; height:9px; margin-top:-6px;
  border-right:1.6px solid rgba(255,255,255,.5);
  border-bottom:1.6px solid rgba(255,255,255,.5);
  transform:rotate(45deg); transition:transform .25s var(--ease,ease);
}
.art-faq details[open] summary::after{transform:rotate(-135deg); margin-top:-2px;}
.art-faq summary:hover{color:#fff;}
.art-faq details p{
  margin:0 0 22px; padding-right:40px;
  color:var(--art-body); line-height:1.7; font-size:16px;
}

/* ---------- Подвал статьи: следующий шаг ---------- */
.art-cta{
  max-width:var(--art-measure); margin:clamp(48px,6vw,72px) auto 0;
  padding:clamp(28px,3.4vw,40px);
  border:1px solid var(--art-rule);
  border-radius:var(--radius-lg,16px);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(88,97,255,.14), transparent 60%),
    rgba(255,255,255,.02);
}
.art-cta h2{font-size:clamp(21px,2.1vw,27px); font-weight:800; letter-spacing:-.02em; margin:0 0 10px; border:0; padding:0;}
.art-cta h2::before{display:none;}
.art-cta p{color:var(--art-quiet); margin:0 0 22px; max-width:52ch;}

/* ---------- Читать дальше ---------- */
.art-next{
  max-width:calc(var(--art-measure) + 12ch); margin:clamp(52px,6vw,80px) auto 0;
  border-top:1px solid var(--art-rule); padding-top:clamp(24px,3vw,34px);
}
.art-next h2{font-size:12px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--art-quiet); margin:0 0 20px;}
.art-next-grid{display:grid; gap:14px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.art-next a{
  display:block; padding:22px;
  border:1px solid var(--art-rule); border-radius:var(--radius-lg,16px);
  text-decoration:none; transition:border-color .25s, transform .25s var(--ease,ease), background .25s;
}
.art-next a:hover{border-color:rgba(255,255,255,.3); transform:translateY(-2px); background:rgba(255,255,255,.03);}
.art-next .n-k{font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--art-quiet); display:block; margin-bottom:10px;}
.art-next .n-t{font-size:17px; font-weight:700; color:#fff; line-height:1.35; letter-spacing:-.012em;}

/* ---------- Мобильные ---------- */
@media (max-width:640px){
  .article{font-size:17px; line-height:1.72;}
  .article .lead{font-size:19px;}
  .article .lead + p::first-letter{font-size:3.4em;}
  .article figure{width:100%; margin-left:0; transform:none;}
  .article h2{margin-top:2em;}
  .article th, .article td{padding:12px 14px;}
}

/* ---------- Печать и доступность ---------- */
@media print{
  .art-progress,.art-cta,.art-next{display:none;}
  .article{max-width:none; color:#000;}
}
@media (prefers-reduced-motion:reduce){
  .art-progress{transition:none;}
  .art-next a:hover{transform:none;}
}

/* ============================================================
   Список статей (blog.html) — редакционная раскладка
   ============================================================ */
.blog-feat{
  display:block; text-decoration:none;
  padding:clamp(28px,3.6vw,44px) 0 clamp(28px,3.6vw,42px);
  border-top:1px solid var(--art-rule);
  border-bottom:1px solid var(--art-rule);
  position:relative; margin-bottom:clamp(32px,4vw,48px);
  transition:opacity .25s;
}
.blog-feat::before{content:"";position:absolute;top:-1px;left:0;width:96px;height:2px;background:var(--art-grad);}
.blog-feat:hover{opacity:.86;}
.blog-feat .bf-k{
  display:inline-flex; align-items:center; gap:10px;
  font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  color:var(--art-quiet); margin-bottom:18px;
}
.blog-feat .bf-k b{color:#fff; font-weight:700;}
.blog-feat h2{
  font-size:clamp(28px,4.4vw,52px); line-height:1.06; letter-spacing:-.028em;
  font-weight:800; color:#fff; margin:0 0 18px; max-width:19ch; text-wrap:balance;
}
.blog-feat p{
  color:var(--art-body); font-size:clamp(16px,1.25vw,19px); line-height:1.65;
  max-width:60ch; margin:0 0 22px;
}
.blog-feat .bf-go{
  display:inline-flex; align-items:center; gap:9px;
  font-size:15px; font-weight:650; color:#fff;
}
.blog-feat .bf-go::after{
  content:""; width:18px; height:1.5px; background:#fff;
  transition:width .25s var(--ease,ease);
}
.blog-feat:hover .bf-go::after{width:30px;}

.blog-list{display:grid; gap:0;}
.blog-row{
  display:grid; grid-template-columns:auto 1fr auto; gap:clamp(16px,2.4vw,32px);
  align-items:baseline; padding:clamp(22px,2.6vw,30px) 0;
  border-bottom:1px solid var(--art-rule); text-decoration:none;
  transition:padding-left .3s var(--ease,ease);
}
.blog-row:hover{padding-left:10px;}
.blog-row .br-n{
  font-size:12px; font-weight:700; color:var(--art-quiet);
  font-variant-numeric:tabular-nums; padding-top:5px;
}
.blog-row h3{
  font-size:clamp(18px,1.9vw,25px); line-height:1.24; letter-spacing:-.02em;
  font-weight:700; color:#fff; margin:0 0 9px; max-width:30ch; text-wrap:balance;
}
.blog-row .br-d{color:var(--art-quiet); font-size:15px; line-height:1.55; max-width:58ch; margin:0;}
.blog-row .br-m{
  text-align:right; white-space:nowrap; font-size:12px;
  color:var(--art-quiet); letter-spacing:.02em; padding-top:5px;
}
.blog-row .br-m b{display:block; color:rgba(255,255,255,.7); font-weight:600; margin-bottom:5px;}
@media (max-width:720px){
  .blog-row{grid-template-columns:auto 1fr; gap:14px;}
  .blog-row .br-m{grid-column:2; text-align:left; padding-top:10px;}
  .blog-row .br-m b{display:inline; margin-right:10px;}
}