/* Shared site navigation (24 Oct 2026). Used by every page so the nav looks and behaves the same everywhere.
   Markup: <header id="nav"><div class="navwrap"><nav><a class="name">..</a><div class="links"><a>Work</a><a>About</a><a class="navcta">Contact</a></div></nav></div></header>
   Mark the current page's link with class="on". Pages toggle .scrolled (or the older .nav-scrolled) on #nav when scrolled. */
#nav { position: fixed; inset: 0 0 auto 0; z-index: 50; transition: background .3s, border-color .3s; border-bottom: 1px solid transparent; background: transparent; }
#nav.scrolled, #nav.nav-scrolled { background: rgba(251,251,252,.86); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-color: #ece9f1; }
#nav .navwrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }
#nav nav { max-width: none; margin: 0; padding: 0; height: 72px; display: flex; align-items: center; justify-content: space-between; }
#nav .name { font-family: "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 50, "opsz" 144; font-size: 22px; font-weight: 500; letter-spacing: 0; color: #17151c; text-decoration: none; transition: opacity .2s; }
#nav .name:hover { opacity: .7; }
#nav .links { display: flex; align-items: center; gap: 28px; font-family: "Instrument Sans", system-ui, sans-serif; font-size: 15px; color: #4a4752; }
#nav .links a { position: relative; padding: 0; color: inherit; text-decoration: none; opacity: 1; }
#nav .links a.on { color: #17151c; font-weight: 500; }
#nav .links .navcta { color: #17151c; font-weight: 500; padding: 8px 16px; border: 1px solid #17151c; border-radius: 999px; transition: transform .3s cubic-bezier(.34,1.56,.64,1), background-color .25s, color .25s; }
#nav .links .navcta:hover, #nav .links .navcta.on { background: #17151c; color: #fff; }
#nav .links .navcta:hover { transform: translateY(-1px); }
/* pencil underline that draws itself in on hover, and stays on the current page */
#nav .links a:not(.navcta)::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: -5px; height: 7px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 7' preserveAspectRatio='none'%3E%3Cpath d='M1 4.5 C10 1.5 18 6.5 29 3.5 S48 1.5 59 4.5' fill='none' stroke='%23db2777' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%;
  clip-path: inset(0 100% 0 0); transition: clip-path .35s ease; }
#nav .links a:not(.navcta):hover::after, #nav .links a.on::after { clip-path: inset(0 0 0 0); }
@media (max-width: 760px) {
  #nav .navwrap { padding: 0 20px; }
  #nav nav { height: 64px; }
  #nav .name { font-size: 20px; }
  #nav .links { gap: 18px; font-size: 14px; }
  #nav .links .navcta { padding: 6px 14px; }
}
@media (prefers-reduced-motion: reduce) { #nav .links a::after, #nav .links .navcta { transition: none; } }