/* Bakasana — база: сброс, каркас страницы и голые элементы.
   Значения сюда не пишем — они в tokens.css, компоненты — в components.css.
   Порядок подключения: fonts → tokens → base → components. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  /* На телефоне 100vh считается по РАЗВЁРНУТОЙ адресной строке: страница получает
     лишнюю высоту и подрагивает при скролле. svh — та же величина по СВЁРНУТОЙ,
     то есть по минимуму, который виден всегда. Строка выше остаётся запасной
     для браузеров без svh; dvh здесь не годится — он меняется на ходу. */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
}

/* Заголовки идут плотнее текста — отрицательный трекинг, как в макетах дизайнера.
   ⚠️ Капслоком названия курсов не набираем: дизайнер так делает на обложках,
   и там это работает, а в интерфейсе длинное название капсом читается заметно
   медленнее, особенно с телефона (VOICE.md, решение Pet 13.08). */
h1, h2, h3 {
  font-family: var(--font-head);
  color: var(--ink);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -.015em;
  margin: 0 0 var(--sp-3);
}
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); letter-spacing: -.01em; }

p { margin: 0 0 var(--sp-3); }
p:last-child { margin-bottom: 0; }

a { color: var(--ink); text-decoration-color: var(--hairline); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--accent); }

img, svg, video { max-width: 100%; }

/* 🚩 Атрибут hidden обязан побеждать display компонента. У карточки задан display:flex,
   у чипа — inline-flex, и правило браузера [hidden]{display:none} им проигрывает:
   элемент помечен скрытым в DOM, а на экране стоит как ни в чём не бывало.
   Поймано Pet глазами 29.08.26: фильтр честно писал «нашлось 5», а под ним лежала
   вся стена из 144 карточек. Мои проверки этого не увидели, потому что считали
   свойство `hidden`, а не то, что реально видно. */
[hidden] { display: none !important; }

hr { border: 0; border-top: 1px solid var(--hairline); margin: var(--sp-5) 0; }

main { flex: 1 0 auto; }
/* Отступ под шапкой — ОДНО число, у макета (слово Pet 28.09: «32 везде»). До этого его держали пять механизмов в шаблонах
   (.page 32, .crumbs / .med-head / .home 24, .narrow 64) — и кит, забыв свой, прилипал к шапке. Шаблоны его больше не помнят. */
main { padding-top: var(--sp-6); }
main:has(> .bkg) { padding-top: 0; }   /* лендинг курса — свой первый экран во всю ширину */

.wrap { width: 100%; max-width: var(--content); margin: 0 auto; padding: 0 var(--gutter); }

/* ── Перелёт обложки между страницами (слово Pet 30.09.26; приём из эскиза «Полёт») ─────────────────
   Переход между страницами сайта — мягкое проявление, а обложка записи перелетает из карточки на своё место
   на странице записи и обратно. Чистый механизм браузера (View Transitions между документами: Chromium 126+,
   Safari 18.2+); где его нет — обычный переход, ничего не ломается. Имя обложке-источнику ставит ui.js
   (на странице много карточек, имя должно быть одно). Шапка названа, чтобы не мигала вместе со страницей.
   При «меньше движения» переходов нет вовсе. */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
.rp-hero .player-cover { view-transition-name: rec-cover; }
::view-transition-group(rec-cover) { animation-duration: 360ms; animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
::view-transition-old(rec-cover), ::view-transition-new(rec-cover) { height: 100%; object-fit: cover; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 200ms; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

.muted { color: var(--text-dim); }
.small { font-size: var(--fs-sm); }
.xs    { font-size: var(--fs-xs); }
.head  { font-family: var(--font-head); letter-spacing: -.01em; }

/* Иконка стоит вровень со строкой, а не висит над ней. */
.ic { display: inline-block; vertical-align: -.18em; }

/* Видно только программе чтения с экрана: подписи к кнопкам-иконкам. */
.sr {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}