/* ajmalps.com - the bar, and nothing else.
   ==================================================================
   Loaded by EVERY page, the home page included - and the home page is built
   from landing/ and has a stylesheet of its own. That is the point: the bar
   is written once and both halves of the site get the same one.

   The cover has no token sheet, so every token here carries a fallback, and
   each fallback is the same value assets/style.css defines. Change one and
   change the other.

   The markup is written by tools/sync_chrome.py for the content pages and by
   landing/src/components/SiteNav.tsx for the cover. The two must carry the
   same classes; tools/check_browser.mjs exercises both.
   ================================================================== */

#nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--nav-h,60px);
  /* Translucent over the page, and dark enough to stay near-black where it
     crosses the cover's one white section. */
  background:rgba(12,12,12,.88);
  -webkit-backdrop-filter:saturate(170%) blur(18px);backdrop-filter:saturate(170%) blur(18px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease,cubic-bezier(.25,.1,.25,1));
}
#nav.scrolled{border-bottom-color:var(--line,#23262a)}
.navin{
  max-width:1180px;height:100%;margin:0 auto;padding:0 var(--gut,22px);
  display:flex;align-items:center;gap:10px;position:relative;
}

.brand{
  display:flex;align-items:center;gap:10px;
  font-family:var(--display,"Kanit",sans-serif);font-weight:500;
  font-size:15px;letter-spacing:.01em;text-transform:uppercase;
  color:var(--ink,#f2f6f9);
}
.brand:hover{color:var(--ink,#f2f6f9)}
.brand svg{width:26px;height:26px;flex:none}

/* ---- the centred menu row ----
   Centred on the viewport rather than laid out between the brand and the
   right edge, so it does not shift when either changes width. */
.navlinks{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:2px;
}
.navgroup{position:relative}
.navtrig,.navcta{
  font-family:var(--display,"Kanit",sans-serif);font-weight:500;
  font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  padding:9px 15px;border-radius:999px;border:1px solid transparent;
  background:none;color:var(--faint,#767f88);cursor:pointer;
  transition:color .25s var(--ease,ease),background .25s var(--ease,ease);
}
.navtrig:hover,.navtrig[aria-expanded="true"]{color:var(--ink,#f2f6f9);background:rgba(255,255,255,.06)}
.navtrig .caret{width:10px;height:10px;flex:none;transition:transform .3s var(--ease-out,ease)}
.navtrig[aria-expanded="true"] .caret{transform:rotate(180deg)}
/* the section you are in, marked without moving anything */
.navgroup[data-current] .navtrig{color:var(--ink,#f2f6f9)}
.navgroup[data-current] .navtrig::after{
  content:"";position:absolute;left:50%;bottom:-1px;width:16px;height:2px;border-radius:2px;
  transform:translateX(-50%);
  background:var(--grad,linear-gradient(96deg,#00c8ff 0%,#2563eb 48%,#7c3aed 100%));
}
.navcta{
  margin-left:10px;background:var(--ink,#f2f6f9);color:var(--bg,#0c0c0c);
  border-color:transparent;
  transition:background .25s var(--ease,ease),color .25s var(--ease,ease);
}
.navcta:hover{background:#fff;color:var(--bg,#0c0c0c)}
.navcta[aria-current="page"]{background:transparent;color:var(--ink,#f2f6f9);box-shadow:inset 0 0 0 1px var(--line,#23262a)}

/* ---- the panel under a menu ----
   Opaque. A menu is for reading, and a translucent one puts the page's own
   headlines through the middle of its links wherever backdrop blur is not
   drawn - which is not everywhere. */
.navmenu{
  position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%,0);
  min-width:280px;padding:8px;border-radius:18px;list-style:none;margin:0;
  background:#131315;border:1px solid var(--line,#23262a);
  box-shadow:0 24px 56px rgba(0,0,0,.6);
  display:grid;gap:2px;
}
.navmenu li{min-width:0}
/* Closed only once a script is there to open it again. With no JavaScript
   every menu simply stays open under its heading. */
html.js .navmenu{
  opacity:0;visibility:hidden;transform:translate(-50%,-8px);
  transition:opacity .2s var(--ease,ease),transform .26s var(--ease-out,ease),visibility 0s linear .2s;
}
html.js .navgroup.open .navmenu{
  opacity:1;visibility:visible;transform:translate(-50%,0);
  transition:opacity .2s var(--ease,ease),transform .26s var(--ease-out,ease),visibility 0s linear 0s;
}
.navmenu a{
  display:grid;gap:3px;padding:11px 14px;border-radius:12px;
  color:var(--ink,#f2f6f9);transition:background .2s var(--ease,ease);
}
.navmenu a:hover{background:rgba(255,255,255,.06);color:var(--ink,#f2f6f9)}
.navmenu a b{
  font-family:var(--display,"Kanit",sans-serif);font-weight:500;font-size:14px;
  letter-spacing:.02em;text-transform:uppercase;
}
.navmenu a span{font-size:12.5px;line-height:1.35;color:var(--faint,#767f88)}
.navmenu a[aria-current="page"]{background:rgba(255,255,255,.06)}
.navmenu a[aria-current="page"] b{color:var(--accent,#4aa8ff)}

/* ---- right cluster ---- */
.navend{display:flex;align-items:center;gap:4px;margin-left:auto}
#menuBtn{
  display:none;width:44px;height:44px;border:none;background:none;cursor:pointer;
  align-items:center;justify-content:center;border-radius:12px;
}
#menuBtn span{
  position:relative;display:block;width:20px;height:1.5px;
  background:var(--ink,#f2f6f9);transition:background .3s var(--ease,ease);
}
#menuBtn span::before,#menuBtn span::after{
  content:"";position:absolute;left:0;width:20px;height:1.5px;
  background:var(--ink,#f2f6f9);transition:transform .3s var(--ease,ease),top .3s var(--ease,ease);
}
#menuBtn span::before{top:-6px}
#menuBtn span::after{top:6px}
#menuBtn[aria-expanded="true"] span{background:transparent}
#menuBtn[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
#menuBtn[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}

/* ---- under 1000px: one sheet, every page one tap away ----
   The menus do not become sub-menus to open. The three triggers turn into
   plain headings and their links are listed, so no page on the site is more
   than one tap from the sheet. */
@media(max-width:1000px){
  #menuBtn{display:flex;order:-1;margin-left:-10px}
  .navlinks{
    position:fixed;top:var(--nav-h,60px);left:0;right:0;
    max-height:calc(100dvh - var(--nav-h,60px));overflow-y:auto;overscroll-behavior:contain;
    display:block;padding:8px var(--gut,22px) 34px;
    background:#0e0e10;border-bottom:1px solid var(--line,#23262a);
    opacity:0;transform:translateY(-8px);pointer-events:none;visibility:hidden;
    transition:opacity .28s var(--ease,ease),transform .28s var(--ease,ease),visibility .28s;
  }
  .navlinks.open{opacity:1;transform:none;pointer-events:auto;visibility:visible}
  .navgroup{position:static;padding-top:18px}
  .navtrig{
    pointer-events:none;width:100%;padding:0 2px 10px;border-radius:0;
    font-size:11.5px;letter-spacing:.2em;color:var(--faint,#767f88);background:none;
  }
  .navtrig .caret{display:none}
  .navgroup[data-current] .navtrig::after{display:none}
  html.js .navmenu,.navmenu{
    position:static;transform:none;opacity:1;visibility:visible;
    min-width:0;padding:0;border:none;background:none;box-shadow:none;
    transition:none;
  }
  .navmenu a{padding:14px 2px;border-radius:0;border-bottom:1px solid var(--line-soft,#191b1e)}
  .navmenu li:last-child a{border-bottom:none}
  .navmenu a:hover{background:none}
  .navmenu a b{font-size:17px;letter-spacing:.01em}
  .navmenu a[aria-current="page"]{background:none}
  /* The one-line description doubles the height of the sheet and pushes
     Contact off the bottom of a phone. The names carry themselves here. */
  .navmenu a span{display:none}
  .navcta{margin:26px 0 0;width:100%;justify-content:center;min-height:50px;font-size:13px}
}

@media print{#nav{display:none !important}}