/* Shared subpage navigation; the animated homepage keeps its existing menu. */
.site-menu-toggle { display: none; }
.site-menu-links { display: flex; align-items: center; gap: 28px; }
.site-menu-links[hidden] { display: none; }
.site-menu-toggle svg { display: block; width: 22px; height: 22px; }
.site-menu-close-icon,
.site-menu-toggle[aria-expanded="true"] .site-menu-open-icon { display: none; }
.site-menu-toggle[aria-expanded="true"] .site-menu-close-icon { display: block; }

@media (max-width: 1120px) {
  .site-head .wrap { height: auto; min-height: 88px; flex-wrap: wrap; }
  .site-head .site-nav { flex-wrap: wrap; gap: 12px 22px; }
  .site-head .site-nav > a:not(.btn) { display: inline-flex; }
  .site-head:not(.site-menu-ready) .site-nav { width: 100%; padding-bottom: 16px; }
  .site-head.site-menu-ready .wrap { flex-wrap: nowrap; gap: 12px; }
  .site-head.site-menu-ready .site-nav { flex: none; gap: 0; }
  .site-menu-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    flex: 0 0 44px; width: 44px; height: 44px; margin-left: auto; padding: 0;
    border: 1px solid #695227; border-radius: 4px;
    background: #141210; color: #fce6a4; cursor: pointer;
    transition: background-color .15s, border-color .15s;
  }
  .site-menu-toggle:hover { background: #221c12; border-color: #e9a93b; }
  .site-menu-links {
    position: absolute; z-index: 1; inset: 100% 0 auto;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 24px;
    max-height: calc(100vh - 88px); max-height: calc(100dvh - 88px); overflow-y: auto;
    padding: 16px max(20px, calc((100% - 1120px) / 2));
    background: #080706; border-top: 1px solid #51401e; border-bottom: 1px solid #8d713d;
    box-shadow: 0 12px 20px #0006;
  }
  .site-menu-links a { display: flex; align-items: center; min-height: 44px; padding: 8px 4px; }
}

@media (max-width: 600px) {
  .site-head.site-menu-ready .wrap { gap: 8px; }
  .site-head.site-menu-ready .wordmark .logo-anim,
  .site-head.site-menu-ready .wordmark img { width: 92px; height: 48px; }
  .site-head.site-menu-ready .site-nav .btn { padding: 10px 8px; font-size: 11px; white-space: nowrap; }
  .site-head.site-menu-ready .site-nav-actions { gap: 6px; }
  .site-menu-links { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; padding: 14px 20px; font-size: 15px; }
}

@media (max-width: 360px) {
  .site-head.site-menu-ready .wrap { gap: 6px; }
  .site-head.site-menu-ready .wordmark .logo-anim,
  .site-head.site-menu-ready .wordmark img { width: 76px; height: 40px; }
  .site-head.site-menu-ready .site-nav .btn { padding-inline: 6px; font-size: 10px; }
  .site-head.site-menu-ready .site-nav-actions { gap: 4px; }
}

@media (max-width: 340px) {
  .site-head.site-menu-ready .wrap { flex-wrap: wrap; min-height: 112px; padding-block: 8px; gap: 8px; }
  .site-head.site-menu-ready .site-nav { flex: 0 0 100%; }
  .site-head.site-menu-ready .site-nav-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 8px; }
  .site-head.site-menu-ready .site-nav .btn { justify-content: center; min-height: 44px; font-size: 12px; }
  .site-menu-links { max-height: calc(100vh - 112px); max-height: calc(100dvh - 112px); }
}

@media (prefers-reduced-motion: reduce) {
  .site-menu-toggle { transition: none; }
}