.brand{
  display:grid;
  grid-template-columns:auto;
  gap:4px;
  color:var(--ink);
  text-decoration:none;
}
.brand-wordmark{
  display:flex;
  align-items:center;
  width:max-content;
  padding:0;
  font-size:1.58rem;
  font-weight:950;
  line-height:1;
  letter-spacing:-.055em;
}
.brand-port{color:#fff}
.brand-hub{
  margin-left:2px;
  padding:5px 7px 6px;
  border-radius:7px;
  background:linear-gradient(145deg,#a77bff,#7c45ed);
  color:#0d0b13;
  box-shadow:0 7px 18px #6634df32;
}
.brand-tagline{
  color:var(--muted);
  font-size:.54rem;
  font-weight:850;
  line-height:1.1;
  letter-spacing:.055em;
  text-transform:uppercase;
  white-space:nowrap;
}
@media(max-width:640px){
  .brand{display:grid!important;gap:3px!important}
  .brand span:last-child.brand-tagline{display:block;font-size:.43rem;max-width:145px;overflow:hidden;text-overflow:ellipsis}
  .brand-wordmark{font-size:1.35rem}
  .brand-hub{padding:4px 6px 5px}
}
.topbar{
  width:min(1180px,calc(100% - 20px));
  margin:10px auto 18px;
  padding:11px 14px;
  border:1px solid #2e2a39;
  border-radius:18px;
  background:#15131c;
  color:#fff;
  box-shadow:0 14px 35px #17121f22;
}
.topbar .brand-tagline{color:#bdb7c7}