/* ============================================================
   Shared mobile menu — GiuliaRinaldo stays top-left (each page's
   own .logo); a "Menu" button top-right reveals the section links
   just below it. Mobile only; the landing shows the names directly.
   ============================================================ */

@media (max-width: 760px) {
  .menu-btn {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + clamp(20px, 4vh, 34px));
    right: clamp(20px, 2.2vw, 36px);
    z-index: 6;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: var(--fs-body);
    font-weight: 400;
    letter-spacing: -0.015em;
    color: var(--ink);
    white-space: nowrap;
    mix-blend-mode: difference;   /* inverts against the page / image behind, like the logo */
    -webkit-tap-highlight-color: transparent;
  }

  .menu-panel {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + clamp(20px, 4vh, 34px) + 2em);
    right: clamp(20px, 2.2vw, 36px);
    z-index: 6;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.7em;
    text-align: right;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.28s ease;   /* a plain fade — no per-line text animation */
    mix-blend-mode: difference;
  }
  .menu-panel.is-open { opacity: 1; pointer-events: auto; }

  .menu-panel a {
    color: var(--ink);
    text-decoration: none;
    font-size: var(--fs-body);
    font-weight: 400;
    white-space: nowrap;
  }
  .menu-panel a.is-current { opacity: 0.4; }

  /* Tuck the menu away while a full-screen overlay is open (project Info sheet,
     Space catalogue) so it doesn't float over them. */
  body.info-open .menu-btn,
  body.info-open .menu-panel,
  body.catalogue-open .menu-btn,
  body.catalogue-open .menu-panel {
    opacity: 0;
    pointer-events: none;
  }
}

/* Desktop keeps the full nav in the bar — the mobile menu never shows. */
@media (min-width: 761px) {
  .menu-btn,
  .menu-panel { display: none !important; }
}