/* Left-aligned logo, right-aligned links; use a menu before labels get cramped. */
.header-navigation {
  --nav-link-gap: clamp(20px, 2vw, 34px);
  display: flex;
  gap: var(--nav-link-gap);
  width: 100%;
  max-width: none;
}
.header-navigation .nav-left { margin-left: auto; }
.header-navigation .menu-toggle { margin-left: auto; }
.site-header::after { display: none; }
/* Orange on every content page; only the home hero starts with white artwork. */
.site-header .brand { position: relative; }
.site-header .brand img { opacity: 1; transition: opacity .3s ease; }
.site-header .brand::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('assets/meeple-corp-landing-white.svg') center / contain no-repeat;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s ease;
}
@media not (forced-colors: active) {
  .player-page:not(.menu-open) .site-header:not(.is-scrolled) .brand img { opacity: 0; }
  .player-page:not(.menu-open) .site-header:not(.is-scrolled) .brand::after { opacity: 1; }
}
.motion-paused .site-header .brand img,
.motion-paused .site-header .brand::after { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .site-header .brand img, .site-header .brand::after { transition: none; }
}
.header-navigation .desktop-nav a,
.header-navigation .desktop-nav button { font-size: clamp(14px, 1.05vw, 16px); }
.desktop-nav a::after, .desktop-nav button::after { transform-origin: center; }
.desktop-nav a:focus-visible::after, .desktop-nav button:focus-visible::after { transform: scaleX(1); }
.desktop-nav a[aria-current="page"]::after { transform: scaleX(1); }
.mobile-menu a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; }

@media (max-width: 960px) {
  :root { --nav-height: 78px; }
  .site-header { height: var(--nav-height); }
  .header-navigation { gap: 12px; }
  .header-navigation .desktop-nav { display: none; }
  .header-navigation .menu-toggle {
    display: flex;
    position: relative;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 6px;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 50%;
  }
  .menu-toggle span {
    display: block;
    width: 17px;
    height: 1px;
    background: var(--cream);
    transition: transform .3s;
  }
  .menu-toggle[aria-expanded="true"] span { transform: translateY(3.5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span + span { transform: translateY(-3.5px) rotate(-45deg); }
  .mobile-menu {
    position: absolute;
    left: 0;
    right: 0;
    top: var(--nav-height);
    padding: 16px var(--gutter) 28px;
    background: var(--cocoa);
    box-shadow: 0 40px 70px #2A1A1280;
    max-height: calc(100svh - var(--nav-height));
    overflow: auto;
  }
  .mobile-menu a, .mobile-menu button {
    display: flex;
    align-items: center;
    background: none;
    font-size: clamp(24px, 3.1vw, 30px);
    font-weight: 700;
    text-align: left;
    width: 100%;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
  }
  .mobile-menu p { margin-top: 24px; font-size: 12px; color: var(--latte); }
}
@media (min-width: 651px) and (max-width: 960px) { .site-header .brand { width: 143px; } }
@media (forced-colors: active) {
  .site-header .brand img { opacity: 1; }
  .site-header .brand::after { display: none; }
  .mobile-menu { background: Canvas; color: CanvasText; }
  .mobile-menu p { color: CanvasText; }
  .site-header .menu-toggle span { background: ButtonText; }
}