/*
 * MarkOnBrand header + logo: the single source for the wordmark size.
 * Loaded LAST on every page so nothing else can override it.
 * To resize the logo, change only the --logo-size values below.
 */
:root { --logo-size: 56px; }                                   /* desktop  > 1024px */
@media (max-width: 1024px) { :root { --logo-size: 48px; } }    /* tablet   721–1024px */
@media (max-width: 720px)  { :root { --logo-size: 34px; } }    /* mobile   361–720px */
@media (max-width: 360px)  { :root { --logo-size: 28px; } }    /* small phones ≤ 360px */

.site-nav { align-items: center; }
.site-nav .nav-toggle { flex-shrink: 0; }
.site-nav a.logo,
.site-nav a.logo:hover,
.site-nav a.logo:focus-visible {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: var(--logo-size);
  letter-spacing: -0.045em;
  line-height: 1;
  text-transform: lowercase;
  text-decoration: none;
  color: var(--color-text);
  white-space: nowrap;
  flex-shrink: 0;
  margin-right: auto;
}
.site-nav a.logo span { color: var(--color-accent); }