.mobile-nav-heading, .mobile-nav-articles, .mobile-nav-footer, .mobile-nav-backdrop { display: none; }
.main-nav > a > .mobile-nav-icon { display: none; }
@media (max-width: 1100px) {
  .site-header { backdrop-filter: none; background: #f5f9fd; }
  body.mobile-menu-open { overflow: hidden; }
  .site-header:has(.main-nav.open) { z-index: 1000; backdrop-filter: none; }
  .site-header .main-nav {
    position: fixed; inset: 0 0 0 auto; width: min(100%, 440px);
    height: 100vh; height: 100dvh; margin: 0; padding: 0 18px 24px;
    border: 0; border-radius: 0; background: #f5f8fc;
    box-shadow: -16px 0 60px rgba(8, 67, 127, .18);
    display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
    flex-wrap: nowrap; gap: 12px; overflow-y: auto; overscroll-behavior: contain;
    z-index: 1002; transform: translateX(105%); visibility: hidden;
    transition: transform .28s ease, visibility .28s;
  }
  .site-header .main-nav.open { transform: translateX(0); visibility: visible; }
  .mobile-nav-heading {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    position: sticky; top: 0; z-index: 1; background: #fff;
    margin: 0 -18px 4px; padding: max(18px, env(safe-area-inset-top)) 20px 18px;
    border-bottom: 1px solid #e4edf6;
  }
  .mobile-nav-heading .brand { padding: 0; background: none; }
  .mobile-nav-close { display: grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #edf4fb; color: #08437f; font: 32px/1 sans-serif; cursor: pointer; }
  .site-header .main-nav > a, .mobile-nav-articles > a, .mobile-nav-footer > a {
    display: flex; align-items: center; gap: 16px; flex-shrink: 0; min-height: 62px;
    padding: 16px 20px; border: 1px solid #e4ebf3; border-radius: 18px;
    background: #fff; color: #2a3f5a; font-size: 1rem; font-weight: 600;
    box-shadow: 0 2px 3px rgba(11, 43, 76, .04); text-decoration: none;
  }
  .site-header .main-nav > a > .mobile-nav-icon, .mobile-nav-icon { display: block; width: 26px; height: 26px; flex-shrink: 0; color: #0e5ea8; }
  .mobile-nav-articles, .mobile-nav-footer { display: block; }
  .mobile-nav-articles > a { background: #eaf3ff; border-color: #cadff4; color: #08437f; }
  .mobile-nav-footer { margin-top: auto; padding-top: 16px; padding-bottom: env(safe-area-inset-bottom); }
  .mobile-nav-footer > a { justify-content: center; background: #e5edf5; box-shadow: none; }
  .site-header .main-nav a:hover { background: #eaf3ff; color: #08437f; }
  .main-nav a:focus-visible, .mobile-nav-close:focus-visible, .menu-toggle:focus-visible { outline: 3px solid #2e82ca; outline-offset: 3px; }
  .mobile-nav-backdrop:not([hidden]) { display: block; position: fixed; inset: 0; width: 100%; height: 100vh; height: 100dvh; border: 0; background: rgba(8, 30, 55, .4); z-index: 1001; cursor: pointer; }
  .site-header .menu-toggle { width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: #eaf3ff; }
  .site-header .menu-toggle span { background: #0e5ea8; }
}
@media (prefers-reduced-motion: reduce) { .site-header .main-nav { transition: none; } }