@font-face {
  font-family: 'Baksey Sans';
  src: url('../fonts/baksey-sans/BakseySans-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Baksey Sans';
  src: url('../fonts/baksey-sans/BakseySans-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

html.modern-brand {
  color-scheme: dark;
  --bg: #090a0b;
  --font-family: 'Baksey Sans', Arial, sans-serif;
  font-synthesis: none;
  font-kerning: normal;
}

.modern-brand body {
  font-family: var(--font-family);
  font-weight: 400;
}

.modern-brand .nav { flex: 0 0 var(--nav-height); z-index: 5; }
.modern-brand .logo-svg { height: auto; aspect-ratio: 3 / 1; }
.logo-s-tail { pointer-events: none; }
.logo-s-tail-reveal {
  transform-box: fill-box;
  transform-origin: 100% 50%;
  transform: scaleX(0);
  transition: transform 0.12s cubic-bezier(0.42, 0, 0.58, 1);
}
.logo:focus-visible .logo-s-tail-reveal {
  transform: scaleX(1);
  transition-duration: 0.18s;
}
@media (hover: hover) and (pointer: fine) {
  .logo:hover .logo-s-tail-reveal {
    transform: scaleX(1);
    transition-duration: 0.18s;
  }
}
.modern-brand .social-nav-layer,
.modern-brand .footer { z-index: 4; }
.modern-brand .social-link:focus-visible,
.modern-brand .nav-link:focus-visible,
.modern-brand .logo:focus-visible { outline: 1px solid currentColor; outline-offset: 5px; }

@media (max-width: 600px) {
  .modern-brand .social-nav { gap: 14px 18px; font-size: 11px; }
}