/* Знак «ГЛАВНАЯ» и подзаголовок под ним.
   Отдельный файл: подключается последним и перекрывает тему, не смешиваясь с ней.

   Решение владельца 10.08.2026: вместо набранного слова, синей черты и синего
   квадрата — рисованный логотип, без подложки. Прежние украшения (::after-квадрат
   и черта над подзаголовком) убраны нарочно: знак теперь держит начертание сам,
   а лишние линии спорили бы с его геометрией.

   Знак — инлайновый SVG в шапке (public/index.html), потому что внешних файлов и
   шрифтов игра не грузит: ни сети, ни сборщика тут нет. Цвет наследуется через
   currentColor, размер задаётся высотой .logo-mark — так знак одинаково хорош и
   на светлой теме DTF, и на старой тёмной. */

/* Знак с подзаголовком стоят по центру шапки, а не прижаты к её верху.
   У шапки задана наименьшая высота (76 px на телефоне, 68 на широком экране),
   и она больше содержимого: знак с подзаголовком занимают 43 px, поля дают 24 —
   остаётся 9 px лишних. При выравнивании по верхнему краю все девять падали
   ВНИЗ, и снизу зияло 21 px против 12 сверху (владелец это и заметил).
   Центрирование делит остаток поровну, и поля становятся одинаковыми.
   Файл подключён последним — перебивает и тему, и адаптив. */
.masthead { align-items: center; }

.masthead-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

/* Знак — картинка, а не строка: ни интерлиньяжа, ни прежних украшений. */
.logo {
  display: block;
  color: #0a0a0a;
  line-height: 0;
  text-shadow: none;
}

/* Высота знака и есть его размер: ширина подстраивается сама через viewBox. */
.logo-mark {
  display: block;
  height: 32px;
  width: auto;
  max-width: 100%;
}

/* Если знак подставили файлом (<img class="logo-mark" src="art/logo.svg">),
   правила те же — картинка ведёт себя как SVG. */
img.logo-mark { object-fit: contain; }

.tagline {
  display: inline-block;
  margin-top: 8px;
  font-family: 'Helvetica Neue', Arial, Roboto, system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .2px;
  /* Тот же тон, каким подзаголовок пишет светлая тема (public/dtf-theme.css).
     Прежний #5f7484 на голубой шапке (#d9f0ff) давал 4,14:1 — ниже нормы 4,5:1
     для обычного текста; этот держит 4,88:1. Знак и подзаголовок читают на
     телефоне при уличном свете, и полтишка контраста тут не украшение. */
  color: #52697a;
}

/* ── Узкие экраны ─────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .logo-mark { height: 27px; }
  .tagline { font-size: 11px; margin-top: 7px; }
}

@media (max-width: 420px) {
  .logo-mark { height: 22px; }
  .tagline { font-size: 10px; margin-top: 6px; }
}