/* Site nav, shared by every page. Markup lives in scripts/nav.html (copied into each page by scripts/sync-nav.py). */
.site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: #020202; }
/* A short fade under the bar, so text dissolves as it scrolls beneath instead of being cut off. */
.site-nav::after { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 24px; background: linear-gradient(#020202, rgba(2,2,2,0)); pointer-events: none; }
.site-nav .nav-in { max-width: 1400px; margin: 0 auto; padding: 0 20px; height: 64px; display: flex; align-items: center; justify-content: space-between; }
@media (min-width: 768px) { .site-nav .nav-in { padding: 0 32px; } }
@media (min-width: 1024px) { .site-nav .nav-in { padding: 0 48px; } }
.site-nav .nav-logo { display: flex; align-items: center; min-height: 44px; transition: opacity 0.3s; user-select: none; }
.site-nav .nav-logo:hover { opacity: 0.7; }
.site-nav .nav-links { display: none; align-items: center; gap: 32px; }
@media (min-width: 768px) { .site-nav .nav-links { display: flex; } }

.nav-link { position: relative; padding-bottom: 2px; font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.03em; line-height: 1.25rem; color: #b0b0b0; text-decoration: none; transition: color 0.3s; }
.nav-link:hover { color: #fff; }
.nav-link::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 0; height: 1px; background: #fff; transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.nav-link:hover::after, .nav-link.active::after { width: 100%; }
.nav-link.active { color: #fff !important; }
.nav-link.active::after { height: 1.5px; }
.nav-link:focus-visible, .mob-link:focus-visible, .nav-logo:focus-visible, .hamburger:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 2px; }

.hamburger { display: flex; flex-direction: column; gap: 5px; padding: 8px; margin-right: -8px; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; position: relative; z-index: 50; }
@media (min-width: 768px) { .hamburger { display: none; } }
.ham-line { display: block; width: 24px; height: 2px; background: #fff; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); transform-origin: center; }
.hamburger.is-active .ham-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.is-active .ham-line:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.is-active .ham-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-overlay { position: fixed; inset: 0; z-index: 40; background: rgba(2,2,2,0.97); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; pointer-events: none; -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); transition: opacity 0.35s ease, visibility 0.35s ease; }
.mobile-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
.mobile-overlay .mob-list { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.mobile-overlay .mob-link { font-size: 1.5rem; line-height: 2rem; font-weight: 300; color: rgba(255,255,255,0.6); text-decoration: none; transition: color 0.3s; }
.mobile-overlay .mob-link:hover, .mobile-overlay .mob-link.text-white, .mobile-overlay .mob-link[aria-current="page"] { color: #fff; }
@media (min-width: 768px) { .mobile-overlay { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .nav-link::after, .mobile-overlay, .ham-line { transition-duration: 0.01s !important; }
}
@media print { .site-nav, .mobile-overlay { display: none !important; } }

/* Page transitions (js/page-transition.js fades out, this fades in). The nav never moves. */
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
@media (prefers-reduced-motion: no-preference) {
  body > #smooth-wrapper, body > main, body > footer { animation: pt-in 560ms cubic-bezier(0.2, 0.7, 0.2, 1) 40ms backwards; }
  body > main { animation-name: pt-in-rise; }
  html.pt-leave body > #smooth-wrapper, html.pt-leave body > main, html.pt-leave body > footer { opacity: 0; transition: opacity 280ms cubic-bezier(0.4, 0, 1, 1); }
}
@keyframes pt-in { from { opacity: 0; } }
@keyframes pt-in-rise { from { opacity: 0; transform: translateY(8px); } }

/* Site-wide polish: balanced headings (no one-word last lines), anchors clear the fixed nav,
   and small text links get a 44px tall hit area without moving the layout. */
html { scroll-padding-top: 88px; }
h1, h2, h3 { text-wrap: balance; }
.tap { display: inline-block; padding-block: 14px; margin-block: -14px; }
footer a[href^="mailto:"] { display: inline-block; padding-block: 14px; margin-block: -14px; }