/* ================= СТАТЬЯ =================

   Отдельный лист, а не правки в style.css. Причина простая: style.css
   держит витрину и кабинет, туда лезть ради текстовых страниц опасно —
   одна правка h2 поедет по всему сайту. Здесь живёт только то, что
   нужно длинному тексту, и ломать оно может только статьи.

   Всё на переменных сайта (--gold, --dim, --line): цвета и шрифты
   меняются в одном месте, здесь их не дублируем.

   Главное правило страницы — ширина строки. Длинная статья читается
   не с ноутбука, а с телефона в дороге; глаз теряет начало строки
   после ~75 знаков, поэтому колонка узкая и на большом экране тоже. */

.wrap.uzko{ max-width:740px; }

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

.statya{ font-size:17px; line-height:1.72; }
.statya p{ color:var(--dim); margin:0 0 20px; }

/* Первый абзац после подзаголовка светлее прочих: он несёт мысль
   раздела, и по нему человек решает, читать дальше или пролистнуть. */
.statya h2{
  font-size:clamp(22px,3vw,29px);
  margin:46px 0 16px; color:var(--txt);
  scroll-margin-top:66px;   /* шапка липкая: без этого якорь прячет заголовок под неё */
}
.statya h2:first-child{ margin-top:0; }
.statya h3{
  font-size:18.5px; margin:32px 0 10px; color:var(--txt);
  letter-spacing:-.01em;
}

.statya a{ color:var(--gold2); text-decoration:underline; text-underline-offset:3px; }
.statya a:hover{ color:var(--gold); }
.statya b,.statya strong{ color:var(--txt); font-weight:600; }

.statya ul,.statya ol{ margin:0 0 20px; padding-left:0; list-style:none; }
.statya ol{ counter-reset:пункт; }
.statya li{
  color:var(--dim); margin-bottom:11px;
  padding-left:28px; position:relative;
}
.statya ul > li::before{
  content:''; position:absolute; left:8px; top:11px;
  width:6px; height:6px; border-radius:50%; background:var(--gold);
}
.statya ol > li{ counter-increment:пункт; }
.statya ol > li::before{
  content:counter(пункт) '.'; position:absolute; left:0; top:0;
  color:var(--gold); font-weight:700; font-size:14px; line-height:1.72;
}

/* Цитата — не украшение, а место, где человек узнаёт себя дословно.
   Поэтому она крупнее текста и светлее, а не мельче и серее. */
.statya blockquote{
  margin:28px 0; padding:2px 0 2px 22px;
  border-left:2px solid var(--gold);
  color:var(--txt); font-size:18px; font-style:italic;
}
.statya blockquote p{ color:inherit; margin-bottom:0; }

.statya hr{
  border:0; border-top:1px solid var(--line); margin:40px 0;
}

/* Врезка — короткая важная мысль, которую не хочется терять в тексте. */
.statya .vrezka{
  background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:20px 22px; margin:28px 0;
}
.statya .vrezka p:last-child{ margin-bottom:0; }

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

.statya-shapka{ padding:52px 0 26px; }
.statya-shapka h1{ font-size:clamp(28px,4.4vw,42px); margin:0 0 18px; }
.statya-shapka .lead{ max-width:none; margin:0; }
.statya-data{
  font-size:13px; color:#6b7488; margin-top:20px;
  display:flex; flex-wrap:wrap; gap:6px 16px;
}

/* ── вопросы и ответы ──────────────────────────────────────────────── */

.voprosy{ margin-top:46px; }
.vopros{
  border:1px solid var(--line); border-radius:14px;
  padding:18px 20px; margin-bottom:10px; background:var(--card);
}
.vopros > summary{
  cursor:pointer; list-style:none; color:var(--txt);
  font-weight:600; font-size:16px; display:flex; gap:12px;
  align-items:flex-start;
}
.vopros > summary::-webkit-details-marker{ display:none; }
.vopros > summary::before{
  content:'+'; color:var(--gold); font-weight:700;
  font-size:18px; line-height:1.3; flex:0 0 auto;
}
.vopros[open] > summary::before{ content:'–'; }
.vopros p{ margin:12px 0 0; }
.vopros p:last-child{ margin-bottom:0; }

/* ── блок автора ───────────────────────────────────────────────────── */

.statya-avtor{
  margin-top:46px; padding-top:28px; border-top:1px solid var(--line);
}
.statya-avtor .imya{ color:var(--txt); font-weight:600; margin-bottom:4px; }
.statya-avtor p{ font-size:14.5px; margin:0; }

/* ── список статей ─────────────────────────────────────────────────── */

.stati-spisok{ display:grid; gap:14px; margin-top:34px; }

.statya-karta{
  display:block; text-decoration:none; color:inherit;
  background:var(--card); border:1px solid var(--line);
  border-radius:16px; padding:22px 24px; transition:.18s;
}
.statya-karta:hover{
  border-color:rgba(216,180,95,.4);
  transform:translateY(-2px);
}
.statya-karta .kogda{
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); font-weight:600; margin-bottom:9px;
  display:flex; flex-wrap:wrap; gap:4px 12px;
}
.statya-karta h2{
  font-size:20px; margin:0 0 9px; color:var(--txt);
  letter-spacing:-.01em; line-height:1.3;
}
.statya-karta p{ font-size:14.5px; margin:0; }
.statya-karta .dalshe{
  display:inline-block; margin-top:13px;
  font-size:13.5px; font-weight:600; color:var(--gold2);
}

/* Пусто — честная заглушка, а не пустой экран. */
.stati-pusto{
  border:1px dashed var(--line); border-radius:16px;
  padding:34px 24px; text-align:center;
}

/* ================= ТЕЛЕФОН =================
   80–90% читателей приходят из поиска с телефона. Проверяем от 375 px. */

@media(max-width:680px){
  .statya{ font-size:16.5px; line-height:1.7; }
  .statya h2{ font-size:22px; margin:36px 0 13px; }
  .statya h3{ font-size:17.5px; margin:26px 0 9px; }
  .statya blockquote{ font-size:17px; padding-left:16px; margin:22px 0; }
  .statya .vrezka{ padding:17px 18px; }

  .statya-shapka{ padding:30px 0 18px; }
  .statya-shapka h1{ font-size:27px; line-height:1.24; }

  .statya-karta{ padding:19px 18px; }
  .statya-karta h2{ font-size:18.5px; }

  .voprosy{ margin-top:36px; }
  .vopros{ padding:16px 17px; }
}

/* ── таблица ────────────────────────────────────────────────────────── */

/* Обёртка со своей прокруткой. На телефоне таблица из трёх колонок
   не влезает в 375 точек никогда; без обёртки она растягивает страницу
   и появляется горизонтальная прокрутка у всего документа сразу. */
.statya .tablica{
  margin:28px 0; overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--line); border-radius:14px;
}
.statya table{
  border-collapse:collapse; width:100%;
  font-size:15px; min-width:420px;
}
.statya th,
.statya td{
  padding:11px 16px; text-align:left;
  border-bottom:1px solid var(--line);
}
.statya th{
  color:var(--txt); font-weight:600; font-size:13px;
  letter-spacing:.04em; text-transform:uppercase;
  background:var(--bg2); white-space:nowrap;
}
.statya td{ color:var(--dim); }
.statya tbody tr:last-child td{ border-bottom:0; }
.statya td:first-child{ color:var(--txt); }

@media(max-width:680px){
  .statya table{ font-size:14px; }
  .statya th,
  .statya td{ padding:9px 12px; }
}

/* Список внутри врезки: у самой врезки свои отступы, поэтому нижний
   отступ последнего списка лишний. */
.statya .vrezka ul{ margin-bottom:0; }
.statya .vrezka ul + p{ margin-top:14px; }