/* Стили этого сайта. Подключается после tokens.css и base.css,
   поэтому здесь можно перебивать общее, ничего в нём не трогая.

   Объявление шрифта отсюда убрано: Geist переехал в общую часть, в
   base.css, и приезжает вместе с файлами каждому сайту. Здесь он лежал,
   пока был личной добавкой апекса, — из-за чего блог и тестовый ехали
   системным шрифтом и выглядели чужими. */

/* Шапка. На узком экране ссылки переносятся, а не уезжают за край —
   base.css задаёт .top как flex без переноса, здесь это дополняется. */
.top { flex-wrap: wrap; row-gap: var(--space-2); }
.top .brand { font-weight: 600; color: var(--fg); }
.top nav { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Портрет: круг слева от вводного абзаца на большом экране, сверху на
   телефоне. Без медиазапроса — раскладка сама переносит. */
.wrap > p:first-of-type img {
  float: left;
  width: 132px;
  height: 132px;
  margin: 0 var(--space-3) var(--space-2) 0;
  border-radius: 50%;
  object-fit: cover;
  shape-outside: circle();
}

@media (max-width: 30rem) {
  .wrap > p:first-of-type img { float: none; margin: 0 0 var(--space-3); }
}

/* Заголовок страницы крупнее обычного: это визитка, а не статья. */
.wrap > h1 { font-size: var(--step-4); margin-bottom: var(--space-3); }