html { scroll-padding-top: 92px; }

.site-header {
    position: sticky;
    top: 0;
    z-index: 5;
    min-height: 90px;
    padding: 18px 40px;
    padding-inline: max(40px, calc((100% - 1120px) / 2));
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: #f6f2ea;
    color: #463c2b;
}

.site-header a { color: inherit; }
.site-header a:focus-visible { outline: 3px solid currentColor; outline-offset: 6px; }
.site-header .brand { display: flex; flex-shrink: 0; }
.site-header .brand img { width: 160px; height: 55px; object-fit: contain; }
.site-header nav { display: flex; flex-wrap: wrap; gap: 30px; font-size: 14px; }
.site-header nav a { text-decoration: none; text-underline-offset: 6px; }
.site-header nav a:hover, .site-header nav a[aria-current="page"] { text-decoration: underline; }

@media (max-width: 540px) {
    html { scroll-padding-top: 112px; }
    .site-header { padding: 16px 20px; flex-direction: column; gap: 12px; }
    .site-header .brand img { width: 135px; height: 46px; }
    .site-header nav { gap: 24px; font-size: 13px; }
}