/* Navigation stays outside the scroll story and keeps one shared set of links. */
.site-header .brand-symbol,
.mobile-menu-heading,
.mobile-menu-note { display: none; }
.mobile-menu-panel { margin-left: auto; }

@media (max-width: 820px) {
  :root { --mobile-header-height: calc(65px + env(safe-area-inset-top, 0px)); }
  html { scroll-padding-top: calc(var(--mobile-header-height) + 16px); }
  html.menu-open, html.menu-open body { overflow: hidden; }
  .js-ready body { padding-top: var(--mobile-header-height); }
  .js-ready .site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 100;
    padding-top: env(safe-area-inset-top, 0px);
    background: var(--paper);
    border-bottom: 1px solid var(--ink);
  }
  .site-header .nav-shell {
    min-height: 64px;
    flex-wrap: nowrap;
    gap: 12px;
    width: auto;
    margin-inline: max(20px, env(safe-area-inset-left, 0px)) max(20px, env(safe-area-inset-right, 0px));
  }
  .site-header .brand { gap: 10px; min-height: 44px; margin: 0; }
  .site-header .brand img:not(.brand-symbol) { width: 112px; }
  .site-header .brand-symbol { display: block; width: 32px; height: 32px; }
  .site-header .brand > span { display: none; }
  .js-ready .menu-toggle {
    flex: 0 0 44px;
    margin-left: auto;
    background: var(--lime);
    border-radius: 8px;
  }
  .menu-toggle span { flex-shrink: 0; }
  .menu-toggle[aria-expanded=true] span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-toggle[aria-expanded=true] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  .js-ready .mobile-menu-panel {
    display: none;
    position: fixed;
    inset: var(--mobile-header-height) 0 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 24px max(24px, env(safe-area-inset-right, 0px)) max(32px, env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px));
    background: var(--paper);
    margin: 0;
  }
  .js-ready .mobile-menu-panel.is-open { display: block; }
  .mobile-menu-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
  .mobile-menu-heading p { max-width: 15ch; font-family: var(--font-display, inherit); font-size: 23px; font-weight: 700; line-height: 1.2; }
  .menu-close {
    display: grid;
    place-items: center;
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: var(--line);
    border-radius: 8px;
    background: var(--paper);
    color: var(--ink);
    font-size: 32px;
    line-height: 1;
  }
  .js-ready .mobile-menu-panel .navigation { display: flex; padding: 0; }
  .mobile-menu-panel .navigation > a:not(.button) { min-height: 56px; display: flex; align-items: center; padding: 16px 0; font-size: 20px; }
  .mobile-menu-panel .navigation .button { min-height: 52px; margin-top: 26px; }
  .mobile-menu-note { display: block; max-width: 30ch; margin-top: 30px; color: var(--muted); font-size: 15px; line-height: 1.5; }
  /* Without JavaScript the navigation remains in normal page flow. */
  html:not(.js-ready) .site-header { position: static; }
  html:not(.js-ready) .site-header .nav-shell { flex-wrap: wrap; padding-block: 10px; }
  html:not(.js-ready) .mobile-menu-panel { width: 100%; margin: 0; }
  html:not(.js-ready) .mobile-menu-heading,
  html:not(.js-ready) .mobile-menu-note { display: none; }
}