/* =========================================================
   logo-mark — the compact "MB" brand monogram as a home link.
   Two-tone: accent stroke + neutral letter, both token-driven
   (the source SVG ships hard-coded hex; we map fills to tokens
   so the mark stays correct on any surface).
   Brand mark — does NOT use the Heroicons .icon rule.
   ========================================================= */

.logo-mark {
  display: inline-flex;
  align-items: center;
  /* pad the hit target up from the 28px glyph, pull back visually */
  padding: var(--spacing-02);
  margin: calc(-1 * var(--spacing-02));
  border-radius: var(--border-radius-pill);
}

.logo-mark__svg {
  display: block;
  width: 1.75rem;   /* 28px */
  height: 1.75rem;
}

.logo-mark__accent { fill: var(--color-accent); }
.logo-mark__letter { fill: var(--color-font); }

.logo-mark:focus-visible {
  outline: var(--accessibility-focus-outline-width)
           var(--accessibility-focus-outline-style, solid)
           var(--accessibility-focus-outline-color);
  outline-offset: var(--accessibility-focus-outline-offset);
  border-radius: var(--border-radius-pill);   /* keep the pill — overrides the global 5px focus default */
}