/* Shared phone/tablet menu for every page with a top nav (Work and See sides).

   Each page keeps its own wide-screen link row. At 960px and below that row is
   hidden and the Menu button opens .mnav: one panel with the same structure on
   every page (this side's pages, Resume, the switch to the other side, theme).
   The nav carries data-side="work" | "see"; the side only changes the lettering
   and the shape of the marker (square = How I Work, round = How I See, as on
   the landing page). Colours come from each page's own palette tokens. */

.mbtn, .mnav, .side-mark { display:none; }

nav[data-side="work"] { --mn-face:'Schibsted Grotesk',system-ui,sans-serif; --mn-size:22px; --mn-weight:600; --mn-track:-0.015em; --mn-muted:var(--muted); }
nav[data-side="see"]  { --mn-face:'EB Garamond',Georgia,serif; --mn-size:27px; --mn-weight:400; --mn-track:0; --mn-muted:var(--muted-2); }

@media (max-width:960px) {
  nav[data-side] { box-sizing:border-box; --gut:clamp(16px,4vw,32px); flex-wrap:nowrap !important; gap:12px !important; min-height:64px; padding:10px var(--gut) !important; }
  nav[data-side] .links, nav[data-side] #navLinks, nav[data-side] .brand .mono, nav[data-side] #navTag { display:none !important; }
  nav[data-side] .brand, nav[data-side] .brand-row { min-width:0; }

  /* the marker names the side you are on */
  nav[data-side] .side-mark { display:inline-block; width:7px; height:7px; margin-right:10px; flex:none; background:var(--accent); vertical-align:0.12em; }
  nav[data-side="see"] .side-mark { border-radius:50%; }
  nav[data-side] .brand-link { white-space:nowrap; }
  nav[data-side="work"] .brand-link { font-size:17px !important; font-weight:600; letter-spacing:-0.01em; }
  nav[data-side="see"] .brand-link { font-size:clamp(19px,5.6vw,21px) !important; }

  .mbtn { display:inline-flex; align-items:center; justify-content:center; flex:none; min-height:44px; min-width:76px; padding:0 16px; margin-left:auto;
    border:1px solid color-mix(in srgb, var(--ink) 32%, transparent); border-radius:999px; background:transparent; color:var(--ink); cursor:pointer;
    font-family:'Schibsted Grotesk',system-ui,sans-serif; font-weight:500; font-size:14px; line-height:1; transition:background-color 160ms ease-out, border-color 160ms ease-out; }
  nav[data-side="see"] .mbtn { font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.16em; text-transform:uppercase; min-width:84px; }
  .mbtn[aria-expanded="true"] { background:var(--ink); border-color:var(--ink); color:var(--bg); }

  /* the panel drops over the page instead of pushing it down */
  .mnav { box-sizing:border-box; position:absolute; top:100%; left:0; right:0; max-height:calc(100dvh - 64px); overflow-y:auto; overscroll-behavior:contain;
    padding:4px var(--gut) 20px; background:var(--bg); border-bottom:1px solid var(--line);
    box-shadow:0 18px 40px -18px rgba(0,0,0,0.45); }
  .mnav.open { display:block; animation:mnav-in 220ms cubic-bezier(.16,1,.3,1) both; }
  @keyframes mnav-in { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }

  .mnav ul { list-style:none; margin:0; padding:0; }
  .mnav li + li { border-top:1px solid var(--line); }
  .mnav li a { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:60px;
    font-family:var(--mn-face); font-size:var(--mn-size); font-weight:var(--mn-weight); letter-spacing:var(--mn-track); line-height:1.1; color:var(--ink); }
  .mnav li a:active { opacity:0.6; }
  .mnav li a[aria-current]::after { content:""; width:7px; height:7px; flex:none; background:var(--accent); }
  nav[data-side="see"] .mnav li a[aria-current]::after { border-radius:50%; }
  nav .mnav li a[aria-current], nav .mnav li a[aria-current]:hover { color:var(--accent); }

  .mnav .mnav-switch { display:flex; align-items:center; justify-content:space-between; min-height:52px; margin-top:12px; padding:0 20px;
    border-radius:999px; background:var(--ink); color:var(--bg); font-family:'Schibsted Grotesk',system-ui,sans-serif; font-weight:600; font-size:15px; }
  nav .mnav a.mnav-switch, nav .mnav a.mnav-switch:hover { color:var(--bg); }
  .mnav .mnav-switch:active { opacity:0.8; }

  .mnav-theme { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:16px; }
  .mnav-theme > span { font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.14em; text-transform:uppercase; color:var(--mn-muted); }
  .mnav-theme .seg { display:inline-flex; padding:3px; border:1px solid var(--line); border-radius:999px; }
  .mnav-theme button { min-height:44px; min-width:72px; padding:0 14px; border:0; border-radius:999px; background:transparent; cursor:pointer;
    font-family:'Schibsted Grotesk',system-ui,sans-serif; font-weight:500; font-size:14px; color:var(--mn-muted); }
  .mnav-theme button[aria-pressed="true"] { background:color-mix(in srgb, var(--ink) 10%, transparent); color:var(--ink); }
}

@media (max-width:960px) and (prefers-reduced-motion: reduce) {
  .mnav.open { animation:none; }
}