/* Shared site header. Keep navigation layout and responsive behavior here. */
header.site-header {
  position:sticky;
  top:0;
  z-index:1000;
  width:100%;
  margin:0 0 clamp(-90px,-6.4vw,-48px);
  padding:0;
}

.site-header .navbar {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:min(1352px,calc(100% - 32px));
  max-width:1352px;
  height:clamp(48px,6.4vw,90px);
  margin:0 auto;
  padding:clamp(8px,1.1vw,15px) 40px;
  border:1px solid rgba(200,200,200,.5);
  border-radius:0 0 clamp(24px,3.7vw,50px) clamp(24px,3.7vw,50px);
  background:linear-gradient(182deg,rgba(200,200,200,.13) 2.47%,rgba(255,255,255,.01) 98.03%);
  background-blend-mode:difference;
  box-shadow:0 4px 10px rgba(0,0,0,.15);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.site-header .navbar-logo {
  position:absolute;
  top:50%;
  left:50%;
  display:flex;
  align-items:center;
  transform:translate(-50%,-50%);
}

.site-header .navbar-logo img {
  display:block;
  width:clamp(34px,2.96vw,40px);
  height:clamp(34px,2.96vw,40px);
  mix-blend-mode:difference;
}

.site-header .navbar .links {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  align-items:center;
  width:100%;
  gap:0;
}

.site-header .navbar .links li { display:flex; justify-content:center; }
.site-header .navbar .links li:nth-child(1) { grid-column:1; }
.site-header .navbar .links li:nth-child(2) { grid-column:2; }
.site-header .navbar .links li:nth-child(3) { grid-column:4; }
.site-header .navbar .links li:nth-child(4) { grid-column:5; }

.site-header .navbar .links a {
  color:#fff;
  font-size:clamp(14px,1vw,15px);
  font-weight:700;
  white-space:nowrap;
  mix-blend-mode:difference;
}

.site-header .navbar .links a:hover,
.site-header .navbar .links a:focus-visible,
.site-header .dropdown_menu a,
.site-header .dropdown_menu a:hover,
.site-header .dropdown_menu a:focus-visible { color:#fff; }

.site-header .navbar .links li,
.site-header .dropdown_menu li {
  list-style:none;
  color:#fff;
  font-family:var(--font-greycliff);
  font-weight:700;
}

.site-header .dropdown_menu {
  position:absolute;
  top:clamp(48px,6.4vw,90px);
  left:50%;
  z-index:1001;
  width:min(calc(100% - 32px),1352px);
  max-height:0;
  overflow:hidden;
  transform:translateX(-50%);
  border-radius:10px;
  background:rgba(0,0,0,.5);
  opacity:0;
  pointer-events:none;
  backdrop-filter:blur(15px);
  transition:max-height .2s ease,opacity .2s ease;
}

.site-header .dropdown_menu.open { max-height:320px; opacity:1; pointer-events:auto; }
.site-header .dropdown_menu li { display:flex; align-items:center; justify-content:center; padding:.7rem; }
.site-header .dropdown_menu a { font-weight:700; }

.site-header .toggle_btn {
  display:none;
  border:0;
  background:none;
  color:#fff;
  font-size:clamp(20px,2.1vw,29px);
  line-height:1;
  cursor:url('/svg/cursor-hover.svg'),pointer;
}

.header-wave__char { display:inline-block; }
.header-wave--active .header-wave__char { animation:header-wave .72s cubic-bezier(.34,1.56,.64,1) 1 both; animation-delay:calc(var(--wave-index) * 45ms); }
#about-title.header-wave--active .header-wave__char,
#gallery-title.header-wave--active .header-wave__char,
#hero .hero__content > h1.header-wave--active .header-wave__char { animation-duration:.95s; animation-delay:calc(var(--wave-index) * 65ms); }

@keyframes header-wave {
  0%,100% { transform:translateY(0); text-shadow:0 0 0 rgba(255,255,255,0); }
  38% { transform:translateY(-6px); text-shadow:0 0 10px rgba(255,255,255,.55); }
  72% { transform:translateY(2px); text-shadow:0 0 4px rgba(255,255,255,.3); }
}

@media(max-width:700px) {
  .site-header .navbar { padding:8px 16px; }
  .site-header .navbar .links { display:none; }
  .site-header .navbar-logo { position:static; transform:none; }
  .site-header .toggle_btn { display:block; }
  .site-header .dropdown_menu { display:block; }
}

@media(min-width:701px) {
  .site-header .dropdown_menu { display:none; }
}

@media(prefers-reduced-motion:reduce) {
  .header-wave--active .header-wave__char { animation:none; }
}