/* Brand book v1.0: use the complete horizontal lockup, with 10% clear space. */
.brand,
.topbar .brand {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  width: 256px;
  min-width: 256px;
  padding: 8px;
  line-height: 1;
  text-decoration: none;
}
.brand img,
.topbar .brand img {
  display: block;
  width: 240px;
  height: 80px;
  max-width: none;
  object-fit: contain;
  border-radius: 0;
}
.topbar { background: #070a16; min-height: 96px; }
header:has(> .brand) { height: auto; min-height: 102px; flex-wrap: wrap; }
header:has(> .brand) > nav { gap: clamp(12px, 2vw, 24px); margin-left: auto; flex-wrap: wrap; justify-content: flex-end; padding: 8px 0; }
.topbar-actions { display: flex; align-items: center; gap: 16px; margin-left: auto; }
nav a.events, .topbar a.events {
  display: inline-flex;
  align-items: center;
  padding: 9px 14px;
  border: 1px solid #f0396466;
  border-radius: 5px;
  color: #f4f3f6;
  font-size: 12px;
  text-decoration: none;
  white-space: nowrap;
}
nav a.events:hover, .topbar a.events:hover { color: #f03964; border-color: #f03964; }
@media (max-width: 800px) {
  header:has(> .brand) { min-height: 96px; }
}
@media (max-width: 540px) {
  header:has(> .brand),
  .topbar {
    height: auto;
    min-height: 96px;
    flex-wrap: wrap;
    gap: 0 16px;
    padding-top: 0;
    padding-bottom: 12px;
  }
  header:has(> .brand) > nav,
  .topbar > form,
  .topbar > .back { margin-left: auto; }
}