.article-head{/*margin-top:8px*/}
.article-head__row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.article-head__row--top{/*margin-top:6px*/}
.article-head__title{margin:0}

/* Автор */
.article-head__author{display:flex;align-items:center;gap:12px}
.author-avatar{width:56px;height:56px;border-radius:50%;overflow:hidden;flex:0 0 56px}
.author-avatar img{width:100%;height:100%;object-fit:cover;display:block}
.author-text{display:flex;flex-direction:column;line-height:1.15}
.author-label{font-size:13px;color:#6b7686}
.author-name{font-size:18px;font-weight:600;color:#2a2f36}

/* Мета */
.article-head__row--meta{/*margin-top:10px*/}
.article-head__meta-left{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.meta-item{display:flex;align-items:center;gap:8px;font-size:14px;color:#2a2f36}
.meta-ico{display:inline-block;vertical-align:middle;opacity:.85}
.meta-views .meta-ico path{fill:#2a2f36}
.meta-read .meta-ico path:first-child{fill:#2a2f36}

/* Теги справа */
.article-head__tags{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-left:auto}
.article-head__tags .tag{
  display:inline-block;padding:6px 10px;border-radius:999px;
  border:1px solid #e0e4ea;font-size:13px;line-height:1;white-space:nowrap
}
.article-layout{ padding: 24px 0 60px; }
.article-grid{
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 32px;
}
.article-aside{ position: sticky; top: 135px; align-self: start; }
.article-cover{
  background: #f7f9fb; border: 1px solid #eef1f4; border-radius: 14px;
  overflow: hidden; margin-bottom: 18px;
}
.article-cover img{ display:block; width:100%; height:auto; }

.article-toc{
  display: none;
  font-family: 'NTSomic', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 16px;
  background: #ffffff;
  border: 1px solid #e8edf2;
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 6px 16px rgba(15,17,21,.04);
}
.article-toc.is-visible{ display:block; }
.toc-title{
  font-weight: 700; letter-spacing: .2px; margin: 2px 4px 10px;
}
.toc-list{
  list-style:none; margin:0; padding:0; max-height: 60vh; overflow:auto;
  scrollbar-width: thin;
}
.toc-list li{ margin:6px 0; }
.toc-list a{
  display:block; text-decoration:none; line-height:1.35;
  padding:6px 8px; border-radius:10px; color:#4F4E62;
  transition: background-color .15s ease, border-color .15s ease;
  border:1px solid transparent;
}
.toc-list a:hover{ background:#f1f5f9; }
.toc-list .is-active > a{ background:#e6f3f7; border-color:#cfe6ee; }

.toc-h2{ margin-left: 0; }
.toc-h3{ margin-left: 10px; }
.toc-h4{ margin-left: 20px; }
.toc-h5{ margin-left: 30px; }

.article-content{
  background:#fff; border:1px solid #eef1f4; border-radius:14px;
  padding: 22px 24px; box-shadow: 0 6px 16px rgba(15,17,21,.04);
}
.article-content img{ max-width:100%; height:auto; }
.article-content h2{ margin-top:26px; font-size:28px; }
.article-content h3{ margin-top:22px; font-size:22px; }
.article-content h4{ margin-top:18px; font-size:18px; }
.article-content h5{ margin-top:14px; font-size:16px; }
.article-content p{ margin:12px 0; }

@media (max-width: 1199px){
  .article-grid{ grid-template-columns: 280px 1fr; gap:24px; }
}
@media (max-width: 991px){
  .article-grid{ grid-template-columns: 1fr; }
  .article-aside{ position: static; top:auto; }
  .article-toc{
    font-size: 15px;
    padding: 12px;
    border-radius: 12px;
    margin-bottom: 12px;
  }
  .toc-list a{ padding:6px 8px; }
}
@media (max-width: 575px){
  .article-toc{ font-size: 14.5px; }
  .toc-h3{ margin-left: 8px; }
  .toc-h4{ margin-left: 16px; }
  .toc-h5{ margin-left: 24px; }
}

.article-cover img + img { display: none; }


/* Адаптив */
@media (max-width:992px){
  .author-name{font-size:17px}
}
@media (max-width:768px){
  .article-head__title{flex:1 1 100%}
  .article-head__author{order:2;flex:1 1 100%}
  .article-head__row--meta{gap:10px}
  .article-head__tags{margin-left:0}
  .author-avatar{width:48px;height:48px}
  .author-name{font-size:16px}
}

/* Отступы у блока H1 + Автор */
.article-head{ /*margin-top:10px; margin-bottom:18px; */}

/* Делает нижний край ряда ровным */
.article-head__row--top{
  /*margin-bottom: 20px;*/      /* отступ под строкой H1+Автор */
}

/* Опустить Автор материала чуть ниже H1 */
.article-head__author{ /*margin-top:30px;*/ }  /* увеличь до 10–12px при желании */

/* Мобилка: автор всё равно переносится ниже — добавим чуть больше воздуха */
@media (max-width: 768px){
  .article-head{ /*margin-top:12px; margin-bottom:14px; */}
  .article-head__author{ /*margin-top:8px;*/ }
}

/* === Фикс круглого аватара автора (десктоп+мобайл) === */
.article-head__author{display:flex;align-items:center;gap:12px}

/* контейнер всегда квадратный и круглый */
.author-avatar{
  width:56px;            /* десктопная ширина */
  aspect-ratio:1/1;      /* фиксируем квадрат */
  height:auto;           /* пусть высота следует из aspect-ratio */
  border-radius:50%;
  overflow:hidden;
  flex:0 0 56px;         /* не даём флексу сплющивать */
  display:flex;align-items:center;justify-content:center;
  background:#eef2f7;
}

/* изображение/заглушка всегда заполняют контейнер */
.author-avatar img,
.author-avatar svg{
  width:100% !important;
  height:100% !important;
  display:block;
  object-fit:cover;      /* центрируем и обрезаем по кругу */
}

/* Мобайл: просто меняем ширину — круг сохранится автоматически */
@media (max-width:768px){
  .author-avatar{ width:48px; flex:0 0 48px; }
}

/* Страницы статей: сохраняем верхний отступ 40px, нижний уменьшаем */
.about-page .page-top{
  padding-top: 40px;
  padding-bottom: 5px; /* было 40px */
}

/* Можно сделать на мобилках ещё компактнее */
@media (max-width: 768px){
  .about-page .page-top{
    padding-bottom: 8px;
  }
}




/* Настройте высоту вашей шапки здесь */
:root { --sticky-header-h: 135px; }

/* Современный способ (где поддерживается) */
.article-content h2[id],
.article-content h3[id],
.article-content h4[id],
.article-content h5[id]{
  scroll-margin-top: var(--sticky-header-h);
}

/* Кроссбраузерный фолбэк: работает без JS и без :target */
.article-content h2[id],
.article-content h3[id],
.article-content h4[id],
.article-content h5[id]{
  position: relative;
}

.article-content h2[id]::before,
.article-content h3[id]::before,
.article-content h4[id]::before,
.article-content h5[id]::before{
  content: "";
  display: block;
  height: var(--sticky-header-h);          /* величина отступа */
  margin-top: calc(-1 * var(--sticky-header-h)); /* компенсация, чтобы не появлялась пустота */
  visibility: hidden;
  pointer-events: none;
}