/* ==========================================================================
   02. NAVIGATION + FOOTER
   ========================================================================== */

header{
  position:absolute; top:0; left:0; right:0; z-index:100;
  padding:26px 0;
}
header.solid{
  position:fixed;
  background:rgba(10,14,26,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  padding:16px 0;
}
/* pages without a full-bleed hero should start with the solid header state */
header.static{position:relative; background:var(--paper); border-bottom:1px solid var(--line); padding:16px 0;}

nav.wrap{display:flex; align-items:center; justify-content:space-between;}
.brand{font-family:var(--font-display); font-weight:800; font-size:15px; letter-spacing:0.12em; text-transform:uppercase;}
header .brand, header .navlinks a{color:var(--ink);}

.navlinks{display:none; gap:32px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;}
.navlinks a{
  opacity:.85; transition:opacity var(--dur-fast) ease, color var(--dur-fast) ease;
  position:relative; padding-bottom:4px;
}
.navlinks a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:currentColor; transition:right .25s ease;
}
.navlinks a:hover{opacity:1;}
.navlinks a:hover::after{right:0;}
header:not(.solid):not(.static) .navlinks a:hover{color:var(--gold);}
header.solid .navlinks a:hover, header.static .navlinks a:hover{color:var(--accent);}
.navlinks a[aria-current="page"]{opacity:1; color:var(--accent);}
@media(min-width:840px){.navlinks{display:flex;}}

.menu-btn{display:flex; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px;}
.menu-btn span{width:22px; height:1.5px; background:currentColor; color:inherit;}
@media(min-width:840px){.menu-btn{display:none;}}

.mobile-nav{position:fixed; inset:0; background:var(--paper); z-index:200; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px; transform:translateY(-100%); transition:transform var(--dur-med) ease;}
.mobile-nav.open{transform:translateY(0);}
.mobile-nav a{font-family:var(--font-display); font-weight:700; font-size:24px; text-transform:uppercase; letter-spacing:.04em;}
.mobile-nav .close{position:absolute; top:24px; right:28px; font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; background:none; border:1px solid var(--line); color:var(--ink); padding:8px 14px; cursor:pointer;}

/* ---------- footer ---------- */
footer{
  border-top:1px solid var(--line); padding:30px 0;
  font-family:var(--font-mono); font-size:10.5px; color:var(--mid);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
}
footer a{opacity:.85; transition:opacity var(--dur-fast) ease, color var(--dur-fast) ease;}
footer a:hover{opacity:1; color:var(--accent);}
footer .footer-links{display:flex; gap:18px; flex-wrap:wrap;}