/* Mobile header and menu (<= 900px). Loaded last. */

@media (max-width: 900px) {
  /* ---------- the bar ---------- */
  .nav { --navpad: 16px; top: 10px; left: 10px; right: 10px; padding: 6px 6px 6px 16px; min-height: 56px; border-radius: 999px; }
  .nav__logo img { height: 24px; }

  /* the menu button: a compact labelled pill instead of a heavy black disc */
  .nav__burger { display: inline-flex; align-items: center; gap: 10px; width: auto; height: 44px; padding: 0 14px 0 18px; border-radius: 999px; background: var(--ink); color: var(--paper); cursor: pointer; transition: background .3s, color .3s; }
  .nav__burger-label { font-style: normal; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
  .nav__burger-icon { position: relative; display: block; width: 18px; height: 10px; }
  .nav__burger-icon span { position: absolute; left: 0; right: 0; height: 1.5px; border-radius: 2px; background: currentColor; transition: transform .45s var(--ease), top .45s var(--ease); }
  .nav__burger-icon span:first-child { top: 1px; }
  .nav__burger-icon span:last-child { top: 7.5px; }
  .nav__burger[aria-expanded="true"] .nav__burger-icon span { top: 4.25px; }
  .nav__burger[aria-expanded="true"] .nav__burger-icon span:first-child { transform: rotate(45deg); }
  .nav__burger[aria-expanded="true"] .nav__burger-icon span:last-child { transform: rotate(-45deg); }
  /* the old line selectors no longer apply to the new spans */
  .nav__burger > span { display: none; }

  /* over the open menu the bar stays legible and quiet */
  .menu-open .nav { background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; translate: none !important; }

  /* ---------- the sheet ---------- */
  .menu {
    display: block; padding: 0; gap: 0; overflow-y: auto; overscroll-behavior: contain;
    clip-path: inset(0 0 100% 0 round 0 0 32px 32px); visibility: hidden;
    transition: clip-path .7s var(--ease), visibility 0s linear .7s;
  }
  .menu.is-open { clip-path: inset(0 0 0 0 round 0); visibility: visible; transition: clip-path .7s var(--ease), visibility 0s; }
  .menu__inner { min-height: 100%; display: flex; flex-direction: column; padding: 104px var(--gutter) calc(28px + env(safe-area-inset-bottom)); }
  .menu__label { margin: 0 0 12px; }
  .menu__label:not(:first-child) { margin-top: 40px; }

  /* pages: large, light, one per line; the current page is bold with an ember dot */
  .menu__pages { display: grid; border-top: 1px solid var(--line); }
  .menu a { font-size: inherit; letter-spacing: normal; line-height: normal; }
  .menu .menu__pages a { display: flex; justify-content: flex-start; align-items: baseline; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: clamp(32px, 9.4vw, 44px); line-height: 1.05; letter-spacing: -0.035em; font-weight: 300; color: var(--ink); }
  .menu__pages a .mono { flex: none; width: 24px; color: var(--mute); letter-spacing: .06em; transform: translateY(-.9em); }
  .menu__pages a.is-current { font-weight: 600; }
  .menu__pages a.is-current::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ember); align-self: center; margin-left: auto; }

  /* elsewhere: a quiet row */
  .menu__ext { display: flex; flex-wrap: wrap; gap: 8px; }
  .menu .menu__ext a { display: inline-flex; align-items: baseline; gap: 6px; padding: 10px 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); font-size: 15px; font-weight: 400; }
  .menu__ext a i { font-style: normal; color: var(--ember-ink); font-size: 1em; }

  /* foot: availability, email, one clear action */
  .menu__foot { margin-top: auto; padding-top: 40px; display: grid; gap: 12px; }
  .menu__avail { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--ink-2); }
  .menu .menu__mail { font-size: 20px; letter-spacing: -0.02em; color: var(--ink); }
  .menu .menu__cta { display: inline-flex; justify-content: center; margin-top: 8px; width: 100%; }
  .menu .menu__cta i { font-size: 15px; color: inherit; }

  /* Lab: the same sheet in the dark */
  body[data-page="lab"] .menu, body[data-page="experiment"] .menu { background: var(--id-lab, var(--ink)); color: var(--paper); }
  body[data-page="lab"] .menu .menu__pages a, body[data-page="experiment"] .menu .menu__pages a,
  body[data-page="lab"] .menu .menu__mail, body[data-page="experiment"] .menu .menu__mail { color: var(--paper); border-color: rgba(255,253,249,.12); }
  body[data-page="lab"] .menu__pages, body[data-page="experiment"] .menu__pages { border-color: rgba(255,253,249,.12); }
  body[data-page="lab"] .menu__pages a .mono, body[data-page="experiment"] .menu__pages a .mono, body[data-page="lab"] .menu__avail, body[data-page="experiment"] .menu__avail { color: rgba(255,253,249,.6); }
  body[data-page="lab"] .menu .menu__ext a, body[data-page="experiment"] .menu .menu__ext a { box-shadow: inset 0 0 0 1px rgba(255,253,249,.18); }
  body[data-page="lab"] .menu__label, body[data-page="experiment"] .menu__label, body[data-page="lab"] .menu__ext a i, body[data-page="experiment"] .menu__ext a i { color: var(--id-lab-accent); }
  body[data-page="lab"] .menu .menu__cta, body[data-page="experiment"] .menu .menu__cta { background: var(--paper); color: var(--ink); }
  body[data-page="lab"] .nav__burger, body[data-page="experiment"] .nav__burger { background: var(--paper); color: var(--ink); }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .menu, .menu.is-open { transition: visibility 0s; }
}