.masthead { position: fixed; top: var(--nav-top); left: 50%; transform: translateX(-50%); z-index: var(--nav-layer);
  width: min(var(--page), calc(100% - var(--gutter) * 2)); border-radius: var(--r-full);
  background: color-mix(in srgb, var(--sheet) 88%, transparent); backdrop-filter: blur(var(--blur));
  box-shadow: var(--inner), var(--nav-shadow); }
.masthead-in { min-height: var(--nav-height); padding: var(--s2) var(--s3) var(--s2) var(--s6);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s5); }
.brand { display: flex; align-items: center; flex: none; min-height: var(--s12); }
.wordmark { width: var(--s28); height: auto; aspect-ratio: 1198 / 293; color: var(--ink); }
.nav ul { display: flex; align-items: center; gap: var(--s6); }
.nav a, .sign-in { text-decoration: none; font-size: var(--t-small); font-weight: var(--w-medium); white-space: nowrap; }
.nav a { padding-block: var(--s3); color: var(--ink-2); }
.nav a:hover, .sign-in:hover { color: var(--clay); }
.masthead-actions { display: flex; align-items: center; gap: var(--s5); }
.masthead .key { min-height: var(--s12); }
.masthead .key-trail { width: var(--s8); height: var(--s8); }
.menu-toggle { display: none; width: var(--s12); height: var(--s12); position: relative; border: 0; border-radius: var(--r-full);
  background: var(--sheet-2); z-index: var(--nav-layer); }
.menu-toggle span { position: absolute; width: var(--s5); height: var(--hair); left: 50%; top: 50%; background: var(--ink);
  transition: transform var(--t-fade) var(--ease-key); }
.menu-toggle span:first-child { transform: translate(-50%, calc(-50% - var(--s1))); }
.menu-toggle span:last-child { transform: translate(-50%, calc(-50% + var(--s1))); }
.menu-toggle[aria-expanded='true'] span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.menu-toggle[aria-expanded='true'] span:last-child { transform: translate(-50%, -50%) rotate(-45deg); }
#mobile-menu { inset: 0; width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; border: 0;
  padding: var(--s32) var(--s8) var(--s8); background: var(--paper); color: var(--ink); }
#mobile-menu::backdrop { background: var(--paper); }
#mobile-menu nav { display: grid; gap: var(--s12); }
#mobile-menu ul { display: grid; gap: var(--s6); }
#mobile-menu a { text-decoration: none; font-size: var(--t-h2); letter-spacing: var(--track-head); }
#mobile-menu .menu-close { position: absolute; right: var(--gutter); top: var(--nav-top); display: block; }
#mobile-menu[open] li { animation: menu-reveal var(--t-reveal) var(--ease-out) both; }
#mobile-menu li:nth-child(2) { animation-delay: 60ms; } #mobile-menu li:nth-child(3) { animation-delay: 120ms; }
#mobile-menu li:nth-child(4) { animation-delay: 180ms; }
@keyframes menu-reveal { from { opacity: 0; transform: translateY(var(--travel)); } to { opacity: 1; transform: none; } }
@media (max-width: 1199px) { .nav ul { gap: var(--s4); }.masthead-actions { gap: var(--s4); }.masthead-in { gap: var(--s4); } }
@media (max-width: 1023px) { .nav { display: none; }.menu-toggle { display: block; }.masthead-actions { margin-left: auto; } }
@media (max-width: 767px) {
  .masthead-in { padding: var(--s1) var(--s2) var(--s1) var(--s5); }.masthead .key { display: none; }
  .masthead-actions { gap: var(--s5); }.brand .wordmark { width: var(--s24); }
}
@media (prefers-reduced-transparency: reduce) { .masthead { background: var(--sheet); backdrop-filter: none; } }