.site-header {
  position: relative;
  z-index: 20;
  width: min(calc(100% - 64px), 1180px);
  min-height: auto;
  margin: 30px auto 0;
  padding: 16px 18px 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 28px;
  background: rgba(244, 245, 246, .72);
  box-shadow: 8px 8px 18px rgba(174, 179, 184, .26), -8px -8px 18px rgba(255, 255, 255, .8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.site-header .brand {
  color: #171819;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: .16em;
  white-space: nowrap;
}

.site-header .header-controls { display: flex; align-items: center; gap: 12px; }
.site-header .pill-nav { display: flex; align-items: center; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(231, 233, 235, .52); box-shadow: inset 4px 4px 10px rgba(177, 182, 187, .22), inset -4px -4px 10px rgba(255, 255, 255, .78); }
.site-header .pill-nav a { min-width: 78px; min-height: 0; padding: 10px 16px; display: block; border-radius: 999px; color: #6e7277; text-align: center; text-decoration: none; font-size: .875rem; font-weight: 400; transition: color .2s ease, box-shadow .2s ease, transform .2s ease; }
.site-header .pill-nav a:hover { color: #171819; }
.site-header .pill-nav a:active { transform: translateY(1px); }
.site-header .pill-nav a[aria-current="page"] { color: #171819; background: rgba(250, 251, 251, .9); box-shadow: 8px 8px 18px rgba(174, 179, 184, .26), -8px -8px 18px rgba(255, 255, 255, .8); }
.site-header .language-switch { display: flex; align-items: center; gap: 2px; margin: 0; padding: 4px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 999px; background: rgba(231, 233, 235, .5); box-shadow: inset 4px 4px 10px rgba(177, 182, 187, .22), inset -4px -4px 10px rgba(255, 255, 255, .78); white-space: nowrap; }
.site-header .language-switch button { min-width: 42px; min-height: 0; padding: 10px 9px; display: block; color: #6e7277; border: 0; border-radius: 999px; background: transparent; font-size: .72rem; font-weight: 400; letter-spacing: .08em; text-decoration: none; cursor: pointer; }
.site-header .language-switch button[aria-pressed="true"] { color: #171819; background: rgba(250, 251, 251, .9); box-shadow: 8px 8px 18px rgba(174, 179, 184, .26), -8px -8px 18px rgba(255, 255, 255, .8); text-decoration: none; }
.site-header .pill-nav a:focus-visible, .site-header .brand:focus-visible, .site-header button:focus-visible { outline: 2px solid #171819; outline-offset: 3px; }

@media (max-width: 680px) {
  .site-header { width: calc(100% - 32px); margin-top: max(16px, env(safe-area-inset-top)); padding: 14px; border-radius: 25px; flex-direction: column; gap: 15px; }
  .site-header .brand { margin-top: 2px; font-size: .86rem; }
  .site-header .header-controls { width: 100%; gap: 8px; }
  .site-header .pill-nav { min-width: 0; flex: 1; }
  .site-header .pill-nav a { flex: 1; min-width: 0; padding: 10px 8px; font-size: .82rem; }
  .site-header .language-switch { flex: 0 0 auto; }
  .site-header .language-switch button { min-width: 34px; padding: 10px 6px; font-size: .65rem; }
}