/* The site header, shared by the homepage and the blog so it is the same everywhere.
   The highlight behind the current link is one pill that slides between links, and across pages
   (a cross-document view transition carries it from the homepage to the blog and back). */
@view-transition { navigation: auto; }
::view-transition-group(nav-pill) { animation-duration: .38s; animation-timing-function: cubic-bezier(.3, .7, .2, 1); }
::view-transition-group(root) { animation-duration: .22s; }

.nav { position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.92); backdrop-filter: saturate(160%) blur(10px); -webkit-backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s; view-transition-name: site-nav; }
.nav.scrolled, .nav.lined { border-bottom-color: #E3E4EB; }
.nav .wrap { max-width: 1120px; margin: 0 auto; padding: 0 28px; display: flex; align-items: center; height: 68px; gap: 28px; }
.nav .logo { display: inline-flex; align-items: center; gap: 10px; font: 700 20px/1 'Bricolage Grotesque', 'Geist', sans-serif; letter-spacing: -0.02em; text-decoration: none; color: #14161D; }
.nav .links { position: relative; display: flex; gap: 4px; margin-left: auto; }
.nav .links a { position: relative; z-index: 1; text-decoration: none; color: #3A3F4D; font: 500 15px/1.6 'Geist', system-ui, sans-serif; padding: 8px 12px; border-radius: 8px; transition: color .2s, background .15s; }
.nav .links a:hover { color: #14161D; background: #F5F5F9; }
.nav .links a[aria-current="true"], .nav .links a[aria-current="page"] { color: #4B3CF5; background: transparent; }
.nav .links .pill { position: absolute; top: 0; left: 0; height: 100%; width: 0; border-radius: 8px; background: #ECEAFE; opacity: 0; pointer-events: none; z-index: 0;
  transition: transform .38s cubic-bezier(.3, .7, .2, 1), width .38s cubic-bezier(.3, .7, .2, 1), opacity .2s; view-transition-name: nav-pill; }
.nav .nav-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 16px; border-radius: 10px; border: 1.5px solid transparent; background: #4B3CF5; color: #fff; font: 600 15px/1 'Geist', system-ui, sans-serif; text-decoration: none; cursor: pointer; transition: background .15s; margin: 0; }
.nav .nav-cta:hover { background: #3A2DD6; color: #fff; }
.nav .menu-btn { display: none; margin-left: auto; width: 44px; height: 44px; border: 0; background: transparent; border-radius: 10px; cursor: pointer; color: #14161D; }
.nav .menu-btn svg { width: 22px; height: 22px; }
.nav .sheet { display: none; }
@media (max-width: 760px) {
  .nav .wrap { padding: 0 20px; }
  .nav .links, .nav .wrap > .nav-cta { display: none; }
  .nav .menu-btn { display: grid; place-items: center; }
  .nav .sheet { position: fixed; inset: 68px 0 auto; background: #fff; border-bottom: 1px solid #E3E4EB; padding: 8px 20px 20px; box-shadow: 0 20px 30px -20px rgba(20,22,29,.25); }
  .nav .sheet.open { display: grid; gap: 2px; }
  .nav .sheet a { text-decoration: none; font: 600 18px/1.4 'Geist', system-ui, sans-serif; padding: 14px 4px; border-bottom: 1px solid #F5F5F9; color: #14161D; }
  .nav .sheet a[aria-current="page"], .nav .sheet a[aria-current="true"] { color: #4B3CF5; }
  .nav .sheet .nav-cta { margin-top: 12px; border-bottom: 0; min-height: 48px; color: #fff; }
}
@media (prefers-reduced-motion: reduce) {
  .nav .links .pill { transition: none; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}