/* Site navigation, extracted from global.css for pages that do not load the global stylesheet.
   Design tokens the nav relies on are declared here with the global defaults; page-level
   :root values (accent, border, fonts) still take precedence through inheritance. */
/* Minimal reset the global stylesheet normally provides */
.site-nav ul, .site-nav li { list-style: none; margin: 0; padding: 0; }
.site-nav a, .nav-drawer a { text-decoration: none; }
.site-nav button, .nav-drawer button { cursor: pointer; border: none; background: none; font: inherit; }
.site-nav, .nav-drawer {
  --white: #ffffff; --ink: #0e0e0e; --ink-mid: #3a3a3a;
  --sp-4: 16px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --r-sm: 2px; --ease: cubic-bezier(.16,1,.3,1); --t-fast: 0.2s;
}
.site-nav { position: fixed;   top: 0; left: 0; right: 0;   z-index: 500;   padding: 20px 0;   transition: all 0.4s var(--ease); }
.site-nav.scrolled { background: rgba(255,255,255,0.95);   backdrop-filter: blur(16px);   -webkit-backdrop-filter: blur(16px);   border-bottom: 1px solid var(--border);   padding: 14px 0;   box-shadow: 0 2px 24px rgba(0,0,0,0.06); }
.site-nav--dark {  }
.nav-inner { display: flex;   align-items: center;   justify-content: space-between;   max-width: 1200px;   margin: 0 auto;   padding: 0 var(--sp-8); }
.nav-logo { font-family: var(--font-display);   font-size: 1.25rem;   font-weight: 700;   color: var(--ink);   letter-spacing: -0.01em;   transition: color var(--t-fast); }
.nav-logo span { color: var(--accent); }
.site-nav:not(.scrolled) .nav-logo { color: var(--white); }
.site-nav:not(.scrolled) .nav-logo span { color: var(--accent-light); }
.nav-links { display: flex;   align-items: center;   gap: var(--sp-7); }
.nav-links a { font-family: var(--font-mono);   font-size: 0.65rem;   letter-spacing: 0.12em;   text-transform: uppercase;   color: var(--ink-mid);   transition: color var(--t-fast);   position: relative; }
.nav-links a::after { content: '';   position: absolute;   bottom: -3px; left: 0; right: 0;   height: 1px;   background: var(--accent);   transform: scaleX(0);   transform-origin: left;   transition: transform var(--t-fast); }
.nav-links a:hover { color: var(--accent); }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a.active { color: var(--accent); }
.nav-links a.active::after { transform: scaleX(1); }
.site-nav:not(.scrolled) .nav-links a { color: rgba(255,255,255,0.7); }
.site-nav:not(.scrolled) .nav-links a:hover { color: var(--white); }
.nav-cta { font-family: var(--font-mono);   font-size: 0.65rem;   letter-spacing: 0.12em;   text-transform: uppercase;   padding: 9px 20px;   border: 1.5px solid var(--accent);   color: var(--accent);   border-radius: var(--r-sm);   transition: all var(--t-fast); }
.nav-cta:hover { background: var(--accent);   color: var(--white); }
.site-nav:not(.scrolled) .nav-cta { border-color: rgba(255,255,255,0.4);   color: var(--white); }
.site-nav:not(.scrolled) .nav-cta:hover { background: rgba(255,255,255,0.15);   border-color: var(--white); }
.nav-hamburger { display: none;   flex-direction: column;   gap: 5px;   padding: 4px; }
.nav-hamburger span { display: block;   width: 22px; height: 1.5px;   background: var(--ink);   transition: all var(--t-fast); }
.site-nav:not(.scrolled) .nav-hamburger span { background: var(--white); }
.nav-drawer { display: none;   position: fixed;   inset: 0;   background: var(--white);   z-index: 499;   flex-direction: column;   justify-content: center;   align-items: center;   gap: var(--sp-6);   transform: translateX(100%);   transition: transform 0.4s var(--ease); }
.nav-drawer.open { transform: none; }
.nav-drawer a { font-family: var(--font-display);   font-size: 2rem;   font-weight: 700;   color: var(--ink); }
.nav-drawer a:hover { color: var(--accent); }
.nav-drawer-close { position: absolute;   top: 24px; right: 24px;   font-size: 1.5rem;   color: var(--ink); }
.footer-brand .nav-logo { color: var(--white);   display: inline-block;   margin-bottom: var(--sp-4);   font-size: 1.4rem; }
@media (max-width: 768px) { .nav-links, .nav-cta { display: none; }
 }
@media (max-width: 768px) { .nav-hamburger { display: flex; }
 }
@media (max-width: 768px) { .nav-drawer { display: flex; }
 }