/* Reuse the real desktop navigation, including its themes and hover masks.
   Only the mobile presentation changes; the desktop grid stays untouched. */
.mobile-menu-toggle,
.mobile-menu:not([open]) { display: none; }

@media (max-width: 760px) {
  /* Avoid a flash of the old stacked nav before the module moves these nodes. */
  .sidebar > .work-nav,
  .sidebar > .sidebar-footer,
  .identity > .about-link { display: none; }

  /* Keep the original 24px icon frame at the page inset, independently of
     wordmark leading. The shared .identity keeps its desktop top alignment. */
  .mobile-menu-toggle,
  .mobile-menu-close {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex: none;
    color: var(--ink);
  }
  .mobile-menu-toggle svg,
  .mobile-menu-close svg { width: 24px; height: 24px; }
  /* Three identical strokes morph in place while the panel slides beneath.
     The controller samples these CSS endpoints, including on interruption. */
  [data-menu-stroke] { transform-box: view-box; transform-origin: 12px 12px; }
  [data-menu-stroke="top"] { transform: translateY(-6px); }
  [data-menu-stroke="middle"] { transform: scaleX(1); opacity: 1; }
  [data-menu-stroke="bottom"] { transform: translateY(6px); }
  .mobile-menu[data-menu-state="open"] [data-menu-stroke="top"] {
    transform: rotate(45deg) scaleX(1.1);
  }
  .mobile-menu[data-menu-state="open"] [data-menu-stroke="middle"] {
    transform: scaleX(0.4);
    opacity: 0;
  }
  .mobile-menu[data-menu-state="open"] [data-menu-stroke="bottom"] {
    transform: rotate(-45deg) scaleX(1.1);
  }
  /* Keep the original 24px frame and page inset. The modal owns the visible
     icon until dismissal completes, so no duplicate glyph or position jump. */
  .mobile-menu-close {
    position: absolute;
    top: max(var(--page-padding), env(safe-area-inset-top));
    right: var(--page-padding);
    z-index: 1;
  }
  html.has-mobile-menu .mobile-menu-toggle { visibility: hidden; }
  .mobile-menu-toggle:focus-visible,
  .mobile-menu-close:focus-visible { outline: 1px solid var(--ink); outline-offset: -2px; }

  html.has-mobile-menu,
  html.has-mobile-menu body { overflow: hidden; overscroll-behavior: none; }
  .mobile-menu {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    background: transparent;
    color: var(--ink);
  }
  .mobile-menu::backdrop { background: transparent; }
  .mobile-menu-scrim {
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 12%);
  }
  .mobile-menu-panel {
    position: absolute;
    inset: 0 0 0 auto;
    width: min(360px, calc(100% - 32px));
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: 24px;
    padding: max(var(--page-padding), env(safe-area-inset-top))
      var(--page-padding) max(var(--page-padding), env(safe-area-inset-bottom));
    border-left: 1px solid var(--line);
    background: #fff;
  }
  .mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 24px;
  }
  .mobile-menu-navigation {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
  }
  .mobile-menu-navigation::-webkit-scrollbar { display: none; }
  .mobile-menu .work-nav { display: block; margin: 0; overflow: visible; }
  .mobile-menu .project-index { display: block; }
  .mobile-menu .category,
  .mobile-menu .index-link {
    justify-content: start;
    text-align: left;
  }
  .mobile-menu .category:first-child { border-top: 1px solid var(--line); }
  /* Only placement is mobile-specific. Row height, text, language spacing
     and separators come from the same footer styles as the desktop sidebar. */
  .mobile-menu .sidebar-footer { margin: 0; }
}

@media print {
  .mobile-menu-toggle, .mobile-menu { display: none; }
}