/* ==========================================================================
   Site menu — Figma 4788:37998. One component for every page: logo left,
   Work / About me / Playground right, 64px tall, no fill of its own.

   Variants (add to .site-menu):
     --light    dark text, for pages with a white background (About)
     --overlay  floats over the page's hero instead of taking up space (Home)
     --sticky   stays pinned and gets a solid dark bar (case studies)
   ========================================================================== */
.site-menu {
  position: relative;
  z-index: 50;
  height: 64px;
  padding-inline: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: transparent;
  color: #fff;
  font-family: "Manrope", system-ui, sans-serif;
  box-sizing: border-box;
}
.site-menu *, .site-menu *::before, .site-menu *::after { box-sizing: border-box; }
.site-menu--light { color: #000; }
.site-menu--overlay { position: fixed; top: 0; left: 0; right: 0; z-index: 5; }
.site-menu--sticky { position: sticky; top: 0; background: #0a0a0a; }

.site-menu__logo { display: block; flex: none; line-height: 0; }
.site-menu__logo img { display: block; width: 39px; height: 20px; filter: brightness(0) invert(1); }
.site-menu--light .site-menu__logo img { filter: none; }

.site-menu__nav { display: flex; align-items: center; gap: 32px; font-size: 16px; letter-spacing: -0.16px; line-height: 0.9; white-space: nowrap; }
.site-menu__nav a { padding: 6px 0; color: inherit; font-weight: 400; text-decoration: none; text-underline-position: from-font; text-underline-offset: 0.18em; }
.site-menu__nav a:hover { text-decoration: underline; }
.site-menu__nav a[aria-current="page"] { font-weight: 600; text-decoration: underline; }
.site-menu a:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 4px; }

@media (max-width: 900px) {
  .site-menu { padding-inline: 24px; }
  .site-menu--overlay { position: absolute; }
  .site-menu__nav { gap: 20px; font-size: 16px; }
}
@media (max-width: 420px) {
  .site-menu { padding-inline: 16px; }
  .site-menu__nav { gap: 12px; font-size: 14px; }
}
@media print { .site-menu { display: none; } }