/* Shared bits for the inner pages (projects, research, MercuryMail, 404) so they
   match the home page: same Inter features, cursor light, and the same phone
   header + hamburger panel. Loaded before each page's inline <style>. */

body { font-feature-settings:"cv11","ss01"; }

/* cursor light (desktop only); images sit above it so screenshots aren't tinted */
.spot { position:fixed; inset:0; pointer-events:none; z-index:30; background:radial-gradient(600px circle at var(--x,-999px) var(--y,-999px), rgba(255,255,255,.12), transparent 80%); }
@media (hover:none) { .spot { display:none; } }
main img, .finding img, .fig img { position:relative; z-index:31; }

.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.menu-btn { display:none; }
header.top .elsewhere { display:none; }

@media (max-width:899px) {
  /* header band: big name like the home page, links tucked behind the menu button */
  header.top { display:block; padding:calc(.5rem + env(safe-area-inset-top,0px)) 0 1.75rem; }
  header.top h1 a { font-size:clamp(2rem,9vw,2.6rem); line-height:1.05; letter-spacing:-.02em; }
  header.top nav.nav, header.top nav.lang { display:none; }

  .menu-btn { display:block; position:fixed; top:calc(.9rem + env(safe-area-inset-top,0px)); right:var(--pad); z-index:70;
    width:44px; height:44px; padding:0; border:0; background:none; color:rgba(90,98,112,.7); cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .menu-btn span { position:absolute; left:13px; right:13px; height:2px; background:currentColor; border-radius:2px; transition:transform .25s ease, opacity .2s ease; }
  .menu-btn span:nth-child(1) { top:15px; }
  .menu-btn span:nth-child(2) { top:21px; }
  .menu-btn span:nth-child(3) { top:27px; }
  .menu-btn[aria-expanded="true"] span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
  .menu-btn[aria-expanded="true"] span:nth-child(2) { opacity:0; }
  .menu-btn[aria-expanded="true"] span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }

  /* open panel: same layout as the home page menu */
  header.top.open { position:fixed; inset:0; z-index:60; overflow-y:auto; background:var(--bg); border:0;
    padding:calc(var(--pad) + 3.5rem) var(--pad) var(--pad); display:flex; flex-direction:column; }
  header.top.open h1 { display:none; }
  header.top.open nav.nav { display:grid; gap:1.4rem; font-size:1.6rem; margin:0; color:var(--muted); }
  header.top.open nav.nav a { display:inline-flex; align-items:center; gap:1rem; }
  header.top.open nav.nav a::before { content:""; width:2.5rem; height:1px; background:currentColor; }
  header.top.open nav.nav a[aria-current] { color:var(--ink); }
  header.top.open .elsewhere { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:3rem; }
  header.top.open nav.lang { display:flex; gap:1.25rem; margin-top:1.5rem; font-size:1rem; }
  body.menu-open { overflow:hidden; }

  /* fade the panel in/out, then bring its items up like the hero text */
  header.top.open { animation:menuIn .4s cubic-bezier(.16,.84,.44,1) both; }
  header.top.open.closing { animation:menuOut .25s ease both; }
  header.top.open nav.nav a, header.top.open nav.lang, header.top.open .elsewhere { animation:itemIn 1.1s cubic-bezier(.16,.84,.44,1) both; animation-delay:var(--md,0ms); }
  header.top.open nav.nav a:nth-child(1) { --md:60ms; }
  header.top.open nav.nav a:nth-child(2) { --md:140ms; }
  header.top.open nav.nav a:nth-child(3) { --md:220ms; }
  header.top.open nav.nav a:nth-child(4) { --md:300ms; }
  header.top.open nav.nav a:nth-child(5) { --md:380ms; }
  header.top.open nav.lang { --md:460ms; }
  header.top.open .elsewhere { --md:540ms; }
}

@keyframes menuIn  { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }
@keyframes menuOut { from { opacity:1; transform:none; } to { opacity:0; transform:translateY(-8px); } }
@keyframes itemIn  { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { header.top.open, header.top.open * { animation:none !important; } }

.elsewhere a { display:inline-flex; align-items:center; justify-content:center; width:2.75rem; height:2.75rem; border-radius:10px; background:var(--pill); color:var(--muted); transition:color .15s, background .15s; }
.elsewhere a:hover { color:var(--accent); background:var(--card); }
.elsewhere svg { width:1.3rem; height:1.3rem; }