/* A compact header with a spacious, independent mobile dropdown. */
html { scrollbar-gutter: stable; }
:root { --header-height: 105px; }
.site-header {
  background: transparent;
  border-bottom-color: transparent;
  transition: background-color 280ms ease, border-color 280ms ease, backdrop-filter 280ms ease;
}
.page-home .site-header { margin-bottom: calc(-1 * var(--header-height)); }
.site-header.is-scrolled {
  background: rgb(16 16 16 / 72%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
  backdrop-filter: blur(18px) saturate(130%);
  border-bottom-color: rgb(255 255 255 / 10%);
}
.menu-open .site-header { background: #101010; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header.is-scrolled { background: rgb(16 16 16 / 94%); }
}
@media (max-width: 1100px) { :root { --header-height: 87px; } }
@media (max-width: 375px) { :root { --header-height: 81px; } }
.menu-backdrop { position: fixed; inset: 0; z-index: 25; background: #0009; backdrop-filter: blur(3px); }
@media (max-width: 1100px) {
  /* Lock the viewport only: locking body creates a new scroll container and
     pulls the sticky header offscreen when the page is already scrolled. */
  .menu-open { overflow: hidden; }
  .js .nav-wrap { flex-wrap: nowrap; }
  .js .menu-toggle { min-width: 72px; min-height: 44px; justify-content: flex-end; gap: 12px; }
  .js .menu-lines, .js .menu-toggle[aria-expanded=true] .menu-lines { position: relative; width: 20px; height: 16px; border: 0; transform: none; }
  .menu-lines::before, .menu-lines::after { content: ''; position: absolute; left: 0; width: 20px; height: 1px; background: currentColor; transition: transform 240ms ease, top 240ms ease; }
  .menu-lines::before { top: 4px; }
  .menu-lines::after { top: 11px; }
  .menu-toggle[aria-expanded=true] .menu-lines::before { top: 7px; transform: rotate(45deg); }
  .menu-toggle[aria-expanded=true] .menu-lines::after { top: 7px; transform: rotate(-45deg); }
  .js .primary-navigation, .js .primary-navigation.is-open {
    position: absolute; top: 100%; left: 0; right: 0;
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    width: 100%; padding: 12px var(--gutter) 30px; background: #101010;
    border-bottom: 1px solid #353535;
    max-height: calc(100dvh - 90px); overflow-y: auto; overscroll-behavior: contain;
    animation: none; opacity: 0; visibility: hidden; transform: translateY(-8px); pointer-events: none;
    transition: opacity 220ms ease, transform 260ms cubic-bezier(.22,1,.36,1), visibility 220ms;
  }
  .js .primary-navigation.is-open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
  .primary-navigation > a { min-height: 72px; padding: 18px 0; font-size: 26px; font-weight: 500; letter-spacing: -.035em; border-bottom: 1px solid #303030; justify-content: space-between; }
  .primary-navigation > a:not(.nav-contact)::after { display: none; }
  .primary-navigation > a[aria-current=page]:not(.nav-contact) { color: #fff; }
  .primary-navigation > a[aria-current=page]:not(.nav-contact)::before { content: ''; position: absolute; right: 4px; width: 5px; height: 5px; border-radius: 50%; background: #eee; }
  .primary-navigation > a:not([aria-current]):not(.nav-contact) { color: #aaa; }
  .primary-navigation > a:not(.nav-contact):hover { color: #fff; }
  .primary-navigation > .nav-contact { margin-top: 26px; min-height: 54px; padding: 15px 19px; border: 0; background: #f5f5f1; color: #101010; font-size: 13px; font-weight: 600; letter-spacing: 0; }
  .primary-navigation > .nav-contact:hover { background: #ddd; }
  .primary-navigation > a:focus-visible { outline-offset: 3px; }
}
@media (prefers-reduced-motion: reduce) { .menu-backdrop { backdrop-filter: none; } }
@media print { .menu-backdrop { display: none; } }

/* Shared social link stays visible beside the mobile menu. */
.header-instagram { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; color: #f5f5f1; margin-left: auto; transition: opacity 180ms ease; }
.header-instagram:hover { opacity: .7; }
@media (min-width: 1101px) {
  .primary-navigation { margin-left: 0; }
}
@media (max-width: 1100px) {
  .js .nav-wrap { column-gap: 12px; }
  .header-instagram { width: 40px; }
}
@media (max-width: 375px) {
  .js .nav-wrap { column-gap: 6px; }
  .js .menu-toggle { min-width: 64px; gap: 8px; }
}

/* Do not interpolate backdrop blur while the mobile viewport is scrolling. */
@media (max-width: 1100px), (pointer: coarse) {
  .site-header { transition: background-color 200ms ease, border-color 200ms ease; }
}