/* Both entrances carry the same mark; each header supplies its own surface colours. */
.brand {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: .55rem;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.brand img {
  display: block;
  width: var(--brand-icon-size, 44px);
  height: var(--brand-icon-size, 44px);
  object-fit: contain;
  border-radius: 22%;
}
.brand-words {
  display: grid;
  justify-items: center;
  gap: .18rem;
}
.brand-name {
  font: 800 var(--brand-name-size, 1.55rem)/1 "Segoe UI Variable Display", "Segoe UI", Arial, sans-serif;
  letter-spacing: -.055em;
}
.brand-name > span { color: var(--brand-accent, var(--red)); }
.brand-caption {
  color: var(--brand-caption, var(--muted));
  font-size: .67rem;
  line-height: 1.15;
  font-weight: 650;
  letter-spacing: .075em;
}
.logout-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  gap: .5rem;
  margin-inline-start: auto;
  min-height: 44px;
  padding: .6rem .95rem;
  border: 1px solid var(--red);
  border-radius: 9px;
  color: #fff;
  background: var(--red);
  font-size: .875rem;
  font-weight: 650;
  line-height: 1.25;
  white-space: nowrap;
}
.logout-button svg {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.logout-button:hover { background: #941022; border-color: #941022; filter: none; }
.logout-button:focus-visible { outline: 3px solid var(--logout-focus, var(--red)); outline-offset: 3px; }
.logout-button[hidden] { display: none; }
@media (max-width: 760px) {
  .brand { --brand-name-size: 1.3rem; --brand-icon-size: 36px; gap: .4rem; }
  .logout-button { font-size: .8125rem; padding-inline: .7rem; }
}