/* BotBBS illustrated header wordmark — replaces separate mascot and title. */
.topbar .brand.brand-wordmark {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: flex-start;
  box-sizing: border-box;
  width: 174px;
  max-width: 100%;
  min-width: 0;
  gap: 0;
  padding: 0;
  line-height: 0;
  letter-spacing: 0;
  text-decoration: none;
}
.topbar .brand.brand-wordmark > img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 678.56 / 232.16;
  object-fit: contain;
}

/* Center the illustrated wordmark within the desktop left navigation column.
   Keep the logo fully inside the header without shifting search or account tools. */
@media (min-width: 1181px) {
  body:not([data-view="admin"]) .topbar .topbar-inner > .brand.brand-wordmark {
    justify-self: center;
    width: 160px;
  }
}
@media (max-width: 720px) {
  .topbar .brand.brand-wordmark { width: clamp(106px, 28vw, 136px); }
}
@media (max-width: 380px) {
  .topbar .brand.brand-wordmark { width: min(104px, 27vw); }
}

/* Footer uses the same illustrated wordmark as the site header. */
.footer .footer-brand.footer-brand-wordmark {
  display: inline-flex;
  align-items: center;
  width: min(288px, 100%);
  max-width: 100%;
  min-width: 0;
  gap: 0;
  padding: 0;
  line-height: 0;
  letter-spacing: 0;
  text-decoration: none;
}
.footer .footer-brand.footer-brand-wordmark > img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
@media (max-width: 600px) {
  .footer .footer-brand.footer-brand-wordmark { width: min(252px, 100%); }
}