:root { --site-header-height: 64px; }
.site-header { height: var(--site-header-height); flex-shrink: 0; background: #faf8f3; color: #272724; border-bottom: 1px solid #dcd7cb; }
.site-header-inner { width: min(1060px, calc(100% - 80px)); height: 100%; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-logo { display: block; flex-shrink: 0; line-height: 0; }
.site-logo img { display: block; width: 36px; height: 36px; }
.site-nav { display: flex; align-items: center; gap: 29px; font: 13px/1.4 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.site-nav a { display: flex; align-items: center; min-height: 44px; padding: 7px 0; color: #77756f; text-decoration: none; border-bottom: 1px solid transparent; touch-action: manipulation; }
.site-nav a:hover { color: #725e41; }
.site-nav a[aria-current=page] { color: #272724; border-bottom-color: #272724; }
.site-header a:focus-visible { outline: 2px solid #725e41; outline-offset: 3px; }
.skip-link { position: absolute; top: -100px; left: 16px; z-index: 1000; background: #faf8f3; color: #272724; padding: 12px; font: 14px/1.4 system-ui, sans-serif; }
.skip-link:focus { top: 10px; }
@media (max-width: 900px) { .site-header-inner { width: calc(100% - 48px); } }
@media (max-width: 600px) {
  :root { --site-header-height: 56px; }
  .site-header-inner { width: calc(100% - 36px); gap: 12px; }
  .site-logo img { width: 30px; height: 30px; }
  .site-nav { gap: 17px; font-size: 12px; }
}
@media (max-width: 360px) {
  .site-header-inner { width: calc(100% - 24px); gap: 8px; }
  .site-nav { gap: 12px; font-size: 11px; }
}