/* ARO Index shared navigation. Updated: Sept 22, 2026.
   One bar for every page on aroindex.com (Pages + Worker routes).
   Loaded by /assets/nav.js. Do not duplicate nav markup in pages. */

#aro-nav{position:sticky;top:0;z-index:500;background:#0D0D0D;border-bottom:1px solid #1e1e1e;font-family:'DM Sans',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
#aro-nav *{box-sizing:border-box}
#aro-nav .an-in{width:100%;padding:0 clamp(16px,5vw,64px);height:62px;display:flex;align-items:center;justify-content:space-between;gap:16px}

/* brand */
#aro-nav .an-brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0}
#aro-nav .an-brand img{height:30px;width:auto;display:block}
#aro-nav .an-brand span{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.08em;color:#71C9CB;white-space:nowrap}

/* desktop links */
#aro-nav .an-links{display:flex;align-items:center;gap:22px;background:none;border:0;padding:0;margin:0;height:auto;width:auto;position:static;box-shadow:none}
#aro-nav .an-links a{font-size:13px;font-weight:500;color:rgba(245,243,239,.72);text-decoration:none;white-space:nowrap;transition:color .15s}
#aro-nav .an-links a:hover{color:#f5f3ef}
#aro-nav .an-links a.active{color:#71C9CB;font-weight:600}

/* sign in with hover menu */
#aro-nav .an-signin{position:relative}
#aro-nav .an-signin>a{font-size:12px;color:rgba(245,243,239,.5)}
#aro-nav .an-signin>a::after{content:" \25BE";font-size:9px}
#aro-nav .an-menu{display:none;position:absolute;top:calc(100% + 10px);right:0;min-width:180px;background:#111111;border:1px solid #1e1e1e;border-radius:8px;padding:6px 0;box-shadow:0 12px 30px rgba(0,0,0,.45)}
#aro-nav .an-menu::before{content:"";position:absolute;top:-12px;left:0;right:0;height:12px}
#aro-nav .an-menu a{display:block;padding:9px 14px;font-size:13px;color:rgba(245,243,239,.8)}
#aro-nav .an-menu a:hover{background:#181818;color:#f5f3ef}
#aro-nav .an-signin:hover .an-menu,#aro-nav .an-signin:focus-within .an-menu{display:block}

/* cta */
#aro-nav .an-cta{background:#ED4EA6;color:#fff !important;font-size:13px;font-weight:700;padding:9px 18px;border-radius:6px;text-decoration:none;white-space:nowrap;transition:background .15s,transform .15s}
#aro-nav .an-cta:hover{background:#d93d94;transform:translateY(-1px)}

/* hamburger */
#aro-nav .an-burger{display:none;background:none;border:none;cursor:pointer;color:#71C9CB;font-family:'Space Mono',monospace;font-size:22px;line-height:1;padding:6px 8px}
#aro-nav-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9998;display:none}
#aro-nav-panel{position:fixed;top:0;right:-300px;width:280px;max-width:86vw;height:100vh;background:#0D0D0D;border-left:1px solid #1e1e1e;z-index:9999;transition:right .25s ease;overflow-y:auto;font-family:'DM Sans',system-ui,sans-serif}
#aro-nav-panel.open{right:0}
#aro-nav-overlay.open{display:block}
#aro-nav-panel .an-ph{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid #1e1e1e}
#aro-nav-panel .an-ph span{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.1em;color:#71C9CB;text-transform:uppercase}
#aro-nav-panel .an-ph button{background:none;border:none;color:#f5f3ef;font-size:22px;cursor:pointer;padding:0 4px;line-height:1}
#aro-nav-panel .an-pl a{display:block;padding:13px 22px;font-size:15px;color:#f5f3ef;text-decoration:none;border-bottom:1px solid #141414}
#aro-nav-panel .an-pl a.active{color:#71C9CB;font-weight:600}
#aro-nav-panel .an-pl .an-sub{font-size:13px;color:rgba(245,243,239,.55);padding-left:34px}
#aro-nav-panel .an-pl .an-lbl{padding:16px 22px 6px;font-family:'Space Mono',monospace;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(245,243,239,.35)}
#aro-nav-panel .an-pcta{display:block;margin:18px 22px;background:#ED4EA6;color:#fff;text-align:center;font-weight:700;font-size:14px;padding:12px;border-radius:6px;text-decoration:none}

@media (max-width:1040px){
  #aro-nav .an-links{gap:16px}
  #aro-nav .an-links a{font-size:12px}
}
@media (max-width:920px){
  #aro-nav .an-links{display:none}
  #aro-nav .an-burger{display:block}
  #aro-nav .an-in{padding:0 16px;height:58px}
}

/* shared page width. Pages may adopt .aro-wrap for their main column. */
.aro-wrap{width:100%;padding:0 clamp(16px,5vw,64px)}
@media (max-width:768px){.aro-wrap{padding:0 16px}}