/* ===== страница статьи (шрифты, токены и шапка — в ref.css) ===== */
.bp { background: var(--paper); color: var(--ink); }
/* в шапке одна ссылка «к статьям» вместо меню, показываем её и на телефоне */
.bp .rh__nav a { white-space: nowrap; }
@media (max-width: 1024px) { .bp .rh__nav { display: flex; } }

.bp__main { min-height: calc(var(--vh, 1vh) * 100); padding: calc(var(--head) + clamp(48px, 8vw, 110px)) var(--pad) clamp(80px, 9vw, 140px); }
.bp__h1 { margin: 0; font: 500 clamp(32px, 4.4vw, 72px)/1.02 var(--sans); letter-spacing: -.04em; text-wrap: balance; }

/* слева для кого и тема, справа название, обложка и текст */
.ap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gut); align-content: start; }
.ap__side { grid-column: 1 / span 3; display: flex; flex-direction: column; gap: 10px; padding-top: 14px; }
.ap__meta { font: 400 12px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #6b6b6b; }
.ap__art { grid-column: 4 / span 8; min-width: 0; }
.ap__cover { position: relative; margin-top: clamp(32px, 4vw, 56px); aspect-ratio: 16 / 9; background: #dadada; }
.ap__cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ap__body { max-width: 680px; margin-top: clamp(32px, 4vw, 56px); font-size: 18px; line-height: 1.6; }
.ap__body p { margin: 0 0 1.1em; }
.ap__body h2 { margin: 1.6em 0 .6em; font: 500 clamp(22px, 2vw, 30px)/1.15 var(--sans); letter-spacing: -.03em; }
.ap__body ul { margin: 0 0 1.1em; padding-left: 1.2em; }
.ap__body li { margin-bottom: .35em; }
.ap__foot { margin-top: clamp(48px, 6vw, 88px); }
/* назад — на главную, в блок «Статьи» */
.ap__back { display: inline-flex; align-items: center; min-height: 44px; font: 400 12px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 5px; transition: color .2s; }
.ap__back:hover { color: #6b6b6b; }

@media (max-width: 1024px) {
  .ap { display: block; }
  .ap__side { flex-direction: row; gap: 20px; padding: 0; margin-bottom: 20px; }
}
@media (max-width: 760px) {
  .bp__main { padding-top: calc(var(--head) + 40px); }
  .ap__body { font-size: 17px; }
}
/* ссылки внутри текста документов и статей */
.ap__body a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .2s; }
.ap__body a:hover { color: #6b6b6b; }