/* ============================================================
   Kobaladze Realty - типографика страницы статьи.
   Подключается ТОЛЬКО на stati/<slug>.html, после site.css.
   Токены, шрифты и характер берутся из site.css, здесь - только длинный текст.
   @import запрещён (блокирует отрисовку) - подключение отдельным <link>.
   ============================================================ */

/* ---------- Шапка статьи ---------- */
.art-head { padding-top: var(--s-5); padding-bottom: var(--s-4); }

.art-kicker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  margin-bottom: 18px;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
}
.art-kicker .brass { color: var(--brass); font-weight: 500; }

.art-title {
  font-family: 'Prata', Georgia, serif;
  font-size: clamp(1.95rem, 4.2vw, 3.3rem);
  /* 1.14 на узком экране: у Prata длинные выносные у «р», «у», «д»,
     на строках по 2-3 слова они подходят вплотную к следующей строке */
  line-height: 1.14;
  letter-spacing: -0.01em;
  max-width: 22ch;
}
@media (min-width: 900px) { .art-title { line-height: 1.08; } }

.art-lede {
  margin-top: var(--s-3);
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  line-height: 1.6;
  color: var(--mute);
  max-width: 62ch;
}

.art-cover {
  margin-top: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
}
.art-cover img { width: 100%; }

/* ---------- Обещание читателю ---------- */
.art-promise {
  margin-top: var(--s-4);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s-3);
  background:
    radial-gradient(120% 160% at 8% 0%, rgba(201, 169, 103, 0.08) 0%, transparent 60%),
    var(--ink-2);
  max-width: 74ch;
}
.art-promise h2 {
  font-family: 'Onest', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
  font-weight: 500;
}
.art-promise ul { margin: 14px 0 0; padding: 0; list-style: none; }
.art-promise li {
  position: relative;
  padding-left: 22px;
  margin-top: 8px;
  color: var(--bone);
}
.art-promise li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.68em;
  width: 8px; height: 1px;
  background: var(--brass-dim);
}
.art-promise .art-cost {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-size: 0.88rem;
  color: var(--mute);
}

/* ---------- Тело статьи ---------- */
.article { max-width: 74ch; }

.article > * + * { margin-top: var(--s-3); }

.article h2 {
  font-family: 'Prata', Georgia, serif;
  font-size: clamp(1.45rem, 2.6vw, 2.05rem);
  line-height: 1.18;
  letter-spacing: -0.006em;
  margin-top: var(--s-5);
  scroll-margin-top: 110px;
}
.article h3 {
  font-family: 'Prata', Georgia, serif;
  font-size: clamp(1.14rem, 1.7vw, 1.4rem);
  line-height: 1.28;
  margin-top: var(--s-4);
  scroll-margin-top: 110px;
}

.article p { color: var(--mute); }
.article p strong,
.article li strong { color: var(--bone); font-weight: 500; }
.article a { color: var(--brass); border-bottom: 1px solid rgba(201, 169, 103, 0.32); }
.article a:hover { border-bottom-color: var(--brass); }

.article ul, .article ol { margin: 0; padding-left: 0; color: var(--mute); }
.article ul { list-style: none; }
.article ul li { position: relative; padding-left: 22px; }
.article ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.72em;
  width: 8px; height: 1px;
  background: var(--brass-dim);
}
.article ol { list-style: none; counter-reset: art; }
.article ol li { position: relative; padding-left: 34px; counter-increment: art; }
.article ol li::before {
  content: counter(art);
  position: absolute;
  left: 0; top: 0;
  font-family: 'Prata', Georgia, serif;
  font-variant-numeric: tabular-nums;
  color: var(--brass);
  font-size: 0.94rem;
  line-height: 1.75;
}
.article li + li { margin-top: 8px; }

/* ---------- Выжимка раздела ---------- */
.tldr {
  border-left: 1px solid var(--brass-dim);
  background: var(--ink-2);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 16px var(--s-3);
}
.tldr p { color: var(--bone); }
.tldr .tldr-l {
  display: block;
  margin-bottom: 6px;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
  font-weight: 500;
}

/* ---------- Врезка-предупреждение ---------- */
.note {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s-3);
  background: var(--ink-2);
}
.note .note-l {
  display: block;
  margin-bottom: 8px;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
  font-weight: 500;
}
.note p { color: var(--bone); }
.note p + p { margin-top: 10px; }

/* ---------- Цитата ---------- */
.article blockquote {
  margin: 0;
  border-left: 1px solid var(--brass-dim);
  padding-left: var(--s-3);
}
.article blockquote p {
  font-family: 'Prata', Georgia, serif;
  font-size: clamp(1.06rem, 1.7vw, 1.28rem);
  line-height: 1.45;
  color: var(--bone);
}
.article blockquote cite {
  display: block;
  margin-top: 12px;
  font-family: 'Onest', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.82rem;
  font-style: normal;
  color: var(--mute);
}

/* ---------- Таблица ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.article table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: 0.94rem;
}
.article th, .article td {
  text-align: left;
  vertical-align: top;
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--line-soft);
}
.article th {
  color: var(--brass);
  font-weight: 500;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom-color: var(--line);
}
.article td { color: var(--mute); }
.article td:first-child { color: var(--bone); }
.article tr:last-child td { border-bottom: 0; }

/* ---------- Источники ---------- */
.sources { margin-top: var(--s-5); border-top: 1px solid var(--line); padding-top: var(--s-3); }
.sources h2 {
  font-family: 'Onest', 'Segoe UI', system-ui, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
  font-weight: 500;
  margin: 0;
}
.sources ol { margin-top: 16px; }
.sources li { font-size: 0.9rem; }

/* ---------- Соседние статьи ---------- */
.art-next { display: grid; gap: var(--s-3); }
@media (min-width: 760px) { .art-next { grid-template-columns: 1fr 1fr; } }
.art-next a {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: var(--s-3);
  background: var(--ink-2);
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.art-next a:hover { border-color: var(--brass-dim); background: var(--ink-3); }
.art-next .an-l {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
  font-weight: 500;
}
.art-next .an-t {
  display: block;
  margin-top: 10px;
  font-family: 'Prata', Georgia, serif;
  font-size: 1.1rem;
  line-height: 1.28;
  color: var(--bone);
}

/* ---------- Служебное: отступы перебивают блочные правила выше ---------- */
.article > .tldr + p,
.article > h2 + .tldr { margin-top: var(--s-3); }
.article > h2:first-child { margin-top: 0; }