/* Studio mark: preserve the original image and round only its outer corners. */
.nav-shell > .brand {
  gap: 10px;
}

.nav-shell .brand-logo {
  display: block;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  object-fit: contain;
  border-radius: 10px;
  background: #000;
}

@media (max-width: 680px) {
  .nav-shell > .brand { gap: 8px; }
  .nav-shell .brand-logo { width: 32px; height: 32px; border-radius: 8px; }
}

/* Keep the existing navigation and both placeholder buttons visible on phones. */
@media (max-width: 420px) {
  .nav-shell > .brand { font-size: 22px; }
  .nav-shell .brand-logo { width: 30px; height: 30px; }
  .nav-actions .button { font-size: .75rem; padding: 9px 8px; }
}