/* The top navigation bar, shared by every page: one tab per page, and a
   dropdown on Home for the sections of the front page.

   It is fixed to the window everywhere. On the front page nav.js keeps it
   clear of the scrolling screen's scrollbar and of the section rail, marks
   which tab is current, and hides it inside the 3D sky. */

.topnav{
  --nav-bg:rgba(5,6,14,.88);
  --nav-panel:#070914;
  --nav-ink:#F4F1E4;
  --nav-dim:rgba(244,241,228,.72);
  --nav-accent:#C9A227;
  --nav-line:rgba(244,241,228,.13);
  --nav-brand-font:"Cinzel",Georgia,"Times New Roman",serif;
  --nav-font:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  position:fixed;top:0;left:0;right:0;z-index:58;height:64px;
  border-bottom:1px solid transparent;font-family:var(--nav-font);font-weight:400;
  transition:background-color .3s,border-color .3s;
}
.topnav[hidden]{display:none!important}
.topnav.on-landing{--nav-accent:#C9A227;--nav-ink:#F4F1E4;--nav-dim:rgba(244,241,228,.66)}
.topnav *{box-sizing:border-box}
.topnav.solid,.topnav.open{
  background:var(--nav-bg);border-bottom-color:var(--nav-line);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.topnav .nav-inner{
  height:100%;margin:0 auto;padding:0 clamp(16px,3vw,36px);
  display:flex;align-items:center;gap:16px;
}
.topnav .brand{
  display:flex;align-items:center;gap:10px;min-height:44px;white-space:nowrap;
  font-family:var(--nav-brand-font);font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--nav-ink);text-decoration:none;
}
.topnav .brand svg{width:14px;height:14px;flex:none;color:var(--nav-accent)}
.topnav .menu{margin-left:auto}
.topnav ul{list-style:none;margin:0;padding:0}
.topnav .tabs{display:flex;align-items:center;gap:2px}
.topnav .tabs>li{position:relative;display:flex;align-items:center}
.topnav .tab{
  position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 12px;
  color:var(--nav-dim);text-decoration:none;font-size:14px;white-space:nowrap;border-radius:6px;
}
.topnav .tab:hover,.topnav .tab[aria-current="page"]{color:var(--nav-ink)}
.topnav .tab[aria-current="page"]::after{
  content:"";position:absolute;left:12px;right:12px;bottom:6px;height:2px;border-radius:2px;
  background:var(--nav-accent);
}
.topnav .has-sub .tab{padding-right:4px}
.topnav .has-sub .tab[aria-current="page"]::after{right:4px}
.topnav .sub-toggle{
  display:inline-flex;align-items:center;justify-content:center;width:28px;min-height:44px;
  margin:0;padding:0;border:0;border-radius:6px;background:none;color:var(--nav-dim);cursor:pointer;
}
.topnav .sub-toggle:hover{color:var(--nav-ink)}
.topnav .sub-toggle svg{width:12px;height:12px;transition:transform .2s}
.topnav .has-sub.sub-open .sub-toggle svg{transform:rotate(180deg)}
.topnav .sub{
  display:none;position:absolute;top:calc(100% + 6px);left:0;min-width:210px;padding:6px;
  background:var(--nav-panel);border:1px solid var(--nav-line);border-radius:10px;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
}
.topnav .has-sub.sub-open .sub{display:block}
.topnav .sub a{
  display:flex;align-items:center;min-height:40px;padding:0 12px;border-radius:6px;
  color:var(--nav-dim);text-decoration:none;font-size:14px;white-space:nowrap;
}
.topnav .sub a:hover,.topnav .sub a:focus-visible{color:var(--nav-ink);background:rgba(238,241,255,.06)}
.topnav a:focus-visible,.topnav button:focus-visible{outline:2px solid var(--nav-accent);outline-offset:2px}
.topnav .menu-btn{display:none}

/* Room gets tight before the phone layout takes over: drop the wordmark to its star. */
@media (max-width:1240px){ .topnav .brand span{display:none} }

@media (max-width:1000px){
  .topnav .brand span{display:inline}
  .topnav .menu-btn{
    display:inline-flex;align-items:center;justify-content:center;gap:8px;margin-left:auto;
    min-width:44px;min-height:44px;padding:0 12px;border:1px solid var(--nav-line);border-radius:8px;
    background:none;color:var(--nav-ink);font:inherit;font-size:14px;cursor:pointer;
  }
  .topnav .menu-btn svg{width:18px;height:18px}
  .topnav .menu{
    display:none;position:absolute;top:64px;left:0;right:0;margin:0;
    max-height:calc(100vh - 64px);overflow-y:auto;
    padding:6px clamp(16px,3vw,36px) 18px;background:var(--nav-panel);border-bottom:1px solid var(--nav-line);
  }
  .topnav.open .menu{display:block}
  .topnav .tabs{flex-direction:column;align-items:stretch;gap:0}
  .topnav .tabs>li{flex-wrap:wrap;border-bottom:1px solid var(--nav-line)}
  .topnav .tab{flex:1;min-height:52px;padding:0 4px;font-size:16px;border-radius:0}
  .topnav .tab[aria-current="page"]::after{left:-12px;right:auto;top:14px;bottom:14px;width:3px;height:auto}
  .topnav .has-sub .tab[aria-current="page"]::after{right:auto}
  .topnav .sub-toggle{width:52px;min-height:52px}
  .topnav .sub{position:static;width:100%;min-width:0;margin:0 0 10px;padding:0 0 0 14px;
    background:none;border:0;border-left:1px solid var(--nav-line);border-radius:0;box-shadow:none}
  .topnav .sub a{min-height:44px;font-size:15px}
}
@media (max-width:380px){
  .topnav .brand{font-size:11.5px;letter-spacing:.12em}
  .topnav .menu-btn span{display:none}
}
@media (prefers-reduced-motion:reduce){.topnav,.topnav .sub-toggle svg{transition:none}}

/* The separate pages scroll the window, so they need room for the bar. */
body.with-topnav{padding-top:104px}