.brand-logo {
  display: block;
  width: 68px;
  height: 68px;
  object-fit: contain;
  background: #020407;
}

/* Edited 2026-09-30 by Claude (AI assistant): text wordmark used in place of the logo image. Colour is
   inherited so it reads dark on the light header and light in the dark footer. */
.brand-name {
  font: 800 19px/1.15 system-ui, -apple-system, sans-serif;
  letter-spacing: .03em;
  color: inherit;
  white-space: nowrap;
}
@media (max-width: 680px) {
  .brand-name { font-size: 16px; white-space: normal; }
}

.brand-logo-fallback {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #020407;
}

.skater-avatar {
  width: 52px;
  height: 52px;
  object-fit: cover;
  background: #020407;
}

@media (max-width: 680px) {
  .brand-logo {
    width: 56px;
    height: 56px;
  }
}