/* ============================================================
   Единый лейбл «Список Вместе».
   Один и тот же элемент на всех страницах сайта.

   Разметка (менять только здесь и синхронно во всех .html):

   <a class="brand" href="/" aria-label="Список Вместе — главная">
       <img class="brand-mark" src="icons/app_icon_160.webp" alt=""
            width="160" height="160"
            loading="eager" decoding="async" fetchpriority="high" />
       <span class="brand-copy">
           <strong>Список Вместе</strong>
           <small>Единое семейное пространство</small>
       </span>
   </a>

   Файл подключается последним, чтобы перебивать локальные стили страниц.
   Значения продублированы литералами: страницы вне home.css не объявляют
   переменные палитры.
   ============================================================ */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: inherit;
  text-decoration: none;
}

/* Иконка приложения нарисована в другом языке — толстые контуры и
   насыщенные заливки. Гасим её подачу: меньше размер, светлая плитка
   вместо синей тени, лёгкая десатурация под бумажную палитру сайта. */
.brand .brand-mark {
  flex: none;
  width: 38px;
  height: 38px;
  padding: 4px;
  border: 1px solid rgba(47, 107, 255, 0.1);
  border-radius: 12px;
  background: rgba(47, 107, 255, 0.05);
  box-shadow: none;
  filter: saturate(0.86);
}

.brand .brand-copy {
  display: grid;
  gap: 2px;
}

.brand .brand-copy strong {
  color: var(--ink, #15171c);
  font-family: "Onest", "Inter", sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.brand .brand-copy small {
  color: var(--muted, #717783);
  font-family: "Inter", sans-serif;
  font-size: 9px;
  line-height: 1.3;
}

/* Отдельно стоящий лейбл (юридические страницы) — без шапки вокруг. */
.brand-standalone {
  margin-bottom: 24px;
}

@media (max-width: 820px) {
  .brand .brand-copy small {
    display: none;
  }
}

@media (max-width: 580px) {
  .brand {
    gap: 8px;
  }

  .brand .brand-mark {
    width: 34px;
    height: 34px;
    padding: 3px;
    border-radius: 11px;
  }

  .brand .brand-copy strong {
    font-size: 13px;
  }
}