/* STELLART STUDIO — спільний знак для сайту, календаря бронювання, сторінок умов і адмінки.
   Один джерельний файл: сайт підключає /brand/brand.css, адмінка (Vite) і віджети (esbuild) вбудовують його в збірку.

   Словесний знак: /brand/stellart-logo-420.png (420×84) і /brand/stellart-logo.png (778×156) — білий на прозорому,
   для темно-синього фону. Підпис під знаком — «КОНТЕКСТ | МІСТО», як «ADMIN | BRUSSELS» в адмінці:

   <a class="st-brand" href="/">
     <img class="st-brand__mark" src="/brand/stellart-logo-420.png"
          srcset="/brand/stellart-logo-420.png 420w, /brand/stellart-logo.png 778w" sizes="150px"
          width="150" height="30" alt="STELLART STUDIO">
     <span class="st-brand__sub" translate="no">ADMIN<em>BRUSSELS</em></span>
   </a> */

.st-brand {
  --st-brand-w: 150px;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  color: inherit;
  text-decoration: none;
  line-height: 1;
  border-radius: 10px;
}
.st-brand__mark {
  display: block;
  width: var(--st-brand-w);
  height: auto;
  max-width: none;
  filter: drop-shadow(0 6px 22px rgba(107, 116, 255, 0.25));
}
.st-brand__sub {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "Manrope", Inter, "Segoe UI", Arial, Helvetica, sans-serif;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.42em;
  line-height: 1;
  color: #8597ae;
  text-transform: uppercase;
  white-space: nowrap;
}
.st-brand__sub em {
  font-style: normal;
  color: #63dfff;
  letter-spacing: 0.24em;
  padding-left: 8px;
  border-left: 1px solid #2a4058;
}

/* Варіанти розміру */
.st-brand--compact { --st-brand-w: 132px; gap: 8px; }
.st-brand--compact .st-brand__sub { font-size: 7.5px; letter-spacing: 0.36em; }
.st-brand--hero { --st-brand-w: 230px; }

/* Шапка сайту й публічних сторінок: на телефоні — менший знак, підпис ховається на найвужчих екранах. */
@media (max-width: 720px) {
  .st-brand--nav { --st-brand-w: 112px; gap: 6px; }
  .st-brand--nav .st-brand__sub { font-size: 6.5px; letter-spacing: 0.3em; gap: 6px; }
  .st-brand--nav .st-brand__sub em { padding-left: 6px; letter-spacing: 0.16em; }
}
@media (max-width: 390px) {
  .st-brand--nav { --st-brand-w: 104px; }
  .st-brand--nav .st-brand__sub { display: none; }
}