/* ── lironross.com nav ─────────────────────────────────────────
   One stylesheet for every page served on lironross.com: index-v3.html
   links it directly; assets/lr-nav.js injects it into the shared case
   study and experiment pages on that host, over their own nav rules.
   Layout follows Figma "Resume25" › Lironross (nav 48px on phones,
   62px on desktop). ─────────────────────────────────────────── */
nav.top { --ink: #faf4e6; --mid: rgba(250,244,230,0.68); --hair: rgba(250,244,230,0.11); }
/* the bar takes the page's own background (lr-nav.js reads it into
   --lr-nav-rgb; #222 when it can't), and a light page gets dark ink */
nav.top { --lr-nav-rgb: 34, 34, 34; }
nav.top.lr-light { --ink: #222222; --mid: rgba(34,34,34,0.68); --hair: rgba(34,34,34,0.11); }
nav.top {
  position: fixed;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  background: rgba(var(--lr-nav-rgb), 0.90);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 100;
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s, padding 0.3s, background 0.3s;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
nav.top.scrolled { border-bottom-color: var(--hair); padding: 14px 24px; }
nav.top .name { font-weight: 500; line-height: 1; color: var(--ink); position: relative; z-index: 112; text-decoration: none; }
@media (max-width: 480px) { nav.top .name { font-size: 11px; } }
nav.top a { text-decoration: none; transition: color 0.2s; }
nav.top .links a { color: var(--ink); }
nav.top .links a:hover { color: var(--mid); }

@media (min-width: 720px) {
  nav.top { padding: 22px 56px; }
  nav.top.scrolled { padding: 16px 56px; }
  /* desktop: the wordmark lives in the hero, so the nav is links on the
     left and Contact alone on the right */
  nav.top .name { display: none; }
  nav.top .links { display: flex; gap: 36px; flex: 1; }
  nav.top .links a.contact { margin-left: auto; font-weight: 500; }
  .burger { display: none !important; }
}

@media (max-width: 719px) {
  nav.top.open {
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgb(var(--lr-nav-rgb));
    border-bottom-color: transparent;
  }
  nav.top.open .name { position: absolute; top: 18px; left: 24px; }
  nav.top.open .burger { position: absolute; top: 2px; right: 16px; margin: 0; }
  nav.top .links {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    letter-spacing: 0.08em;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    width: 100%;
  }
  nav.top.open .links { opacity: 1; visibility: visible; }
  nav.top.open .links a { color: var(--ink); font-size: 20px; }
}

/* ── hamburger ────────────────────────────────────────── */
/* 44x44 hit area (the accessible minimum) around 28px bars; the negative
   vertical margins keep the button 12px tall in flow, so the nav stays
   48px (18 + 12 + 18) as in Figma while the tap target stays 44. */
.burger {
  display: block;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  width: 44px;
  height: 44px;
  margin: -16px -8px -16px 0;
  position: relative;
  z-index: 110;
}
.burger span {
  display: block;
  width: 28px;
  height: 1.5px;
  background: var(--ink);
  position: absolute;
  left: 8px;
  transition: transform 0.3s, top 0.3s;
}
.burger span:first-child { top: 16px; }
.burger span:last-child { top: 26px; }
nav.top.open .burger span:first-child { top: 21px; transform: rotate(45deg); }
nav.top.open .burger span:last-child { top: 21px; transform: rotate(-45deg); }