.site-header { position: fixed; inset: 0 0 auto; z-index: 50; color: white; background: transparent; transition: background var(--transition-medium); }
.site-header.over-light-section { background: #000000e6; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 35px; min-height: 0; padding-block: 9px; border-bottom: 1px solid #ffffff2b; }
.wordmark { display: flex; flex: 0 0 auto; flex-direction: column; align-items: center; line-height: 1; padding-block: 0; }
.wordmark-name { font-family: var(--serif-font-family); font-size: 34px; letter-spacing: .13em; padding-left: .13em; }
.wordmark-caption { font-size: 10px; letter-spacing: .35em; margin-top: 12px; padding-left: .35em; text-transform: uppercase; }
.navbar-brand { flex-shrink: 1; min-width: 0; }
.navbar-logo { width: 230px; height: auto; }
.site-nav { display: flex; align-items: center; gap: clamp(24px, 2.6vw, 44px); }
.site-nav > a:not(.btn) { position: relative; padding-block: 12px; font-size: 14px; color: #f1f0e8; }
.site-nav > a:not(.btn)::after { content: ""; position: absolute; bottom: 5px; left: 0; width: 100%; height: 1px; background: var(--color-primary); transform: scaleX(0); transform-origin: left; transition: transform var(--transition-medium); }
.site-nav > a:hover::after { transform: scaleX(1); }
.menu-toggle { display: none; align-items: center; gap: 12px; min-height: 44px; border: 0; background: transparent; color: inherit; font-size: 14px; }
.menu-icon { width: 24px; display: grid; gap: 6px; }
.menu-icon span { height: 1px; background: currentColor; transition: transform var(--transition-fast); }
.menu-toggle[aria-expanded="true"] .menu-icon span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-icon span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
@media (max-width: 1000px) {
    :root { --nav-height: 96px; }
    .navbar-logo { width: 190px; }
    .site-nav { gap: 20px; }
    .site-nav > a:not(.btn) { font-size: 13px; }
    .wordmark-name { font-size: 29px; }
}
@media (max-width: 800px) {
    :root { --nav-height: 88px; }
    .navbar-logo { width: 170px; }
    .menu-toggle { display: inline-flex; }
    .site-nav { display: none; position: absolute; top: 100%; left: 0; width: 100%; padding: 24px var(--page-gutter) 34px; background: #171c1bf7; border-bottom: 1px solid #ffffff29; box-shadow: 0 20px 35px #0003;}
    .site-nav.is-open { display: flex; flex-direction: column; align-items: stretch; gap: 14px; }
    .site-nav > a:not(.btn) { font-size: 16px;}
    .site-nav > .btn { margin-top: 10px; }
    .wordmark-name { font-size: 27px; }
    .wordmark-caption { font-size: 9px; margin-top: 9px; }
}
/* Layered mobile drawer: gold, white, then the black menu panel. */
.menu-backdrop { display: none; }
@media (max-width: 800px) {
    html.mobile-menu-open, html.mobile-menu-open body { overflow: hidden; }
    .site-header, .site-header.over-light-section { backdrop-filter: none; -webkit-backdrop-filter: none; }
    .site-header { --drawer-width: min(84vw, 360px); }
    .site-header::before, .site-header::after {
        content: ''; position: fixed; inset: 0 0 0 auto; height: 100dvh;
        width: var(--drawer-width); background: #c6a667; z-index: 2;
        transform: translateX(105%); visibility: hidden;
        transition: transform 450ms cubic-bezier(.4,0,.2,1) 360ms, visibility 0s 810ms;
        pointer-events: none;
    }
    .site-header::after { width: calc(var(--drawer-width) - 10px); background: #fff; z-index: 3; transition-delay: 180ms, 630ms; }
    .site-header.menu-open::before, .site-header.menu-open::after { transform: translateX(0); visibility: visible; transition-delay: 0ms, 0ms; }
    .site-header.menu-open::after { transition-delay: 180ms, 0ms; }
    .site-header .site-nav, .site-header .site-nav.is-open {
        display: flex; flex-direction: column; align-items: stretch; gap: 16px;
        position: fixed; inset: 0 0 0 auto; z-index: 4;
        width: calc(var(--drawer-width) - 20px); height: 100dvh;
        padding: calc(var(--nav-height) + 48px) 28px max(32px, env(safe-area-inset-bottom));
        background: #000; border: 0; box-shadow: none;
        overflow-y: auto; overscroll-behavior: contain;
        transform: translateX(105%); visibility: hidden; pointer-events: none;
        transition: transform 450ms cubic-bezier(.4,0,.2,1), visibility 0s 450ms;
    }
    .site-header .site-nav.is-open { transform: translateX(0); visibility: visible; pointer-events: auto; transition-delay: 360ms, 0ms; }
    .site-header .site-nav > a:not(.btn) { font-family: var(--serif-font-family); font-size: 32px; line-height: 1.25; padding-block: 12px; color: #fff; }
    .site-nav > a { opacity: 0; transform: translateX(20px); transition: opacity 180ms ease, transform 280ms ease; }
    .site-nav.is-open > a { opacity: 1; transform: translateX(0); transition-delay: 620ms; }
    .site-nav.is-open > a:nth-of-type(2) { transition-delay: 670ms; }
    .site-nav.is-open > a:nth-of-type(3) { transition-delay: 720ms; }
    .site-nav.is-open > a:nth-of-type(4) { transition-delay: 770ms; }
    .site-nav.is-open > a:nth-of-type(5) { transition-delay: 820ms; }
    .site-nav.is-open > a:nth-of-type(6) { transition-delay: 870ms; }
    .site-nav > .btn { margin-top: 24px; }
    .menu-toggle { position: relative; z-index: 5; min-width: 72px; justify-content: flex-end; }
    .menu-backdrop { display: block; position: fixed; inset: 0; width: 100%; height: 100dvh; z-index: 1; border: 0; background: rgb(0 0 0 / 55%); opacity: 0; visibility: hidden; transition: opacity 280ms ease, visibility 0s 580ms; }
    .menu-open .menu-backdrop { opacity: 1; visibility: visible; transition-delay: 0s; }
}
@media (prefers-reduced-motion: reduce) {
    .site-header::before, .site-header::after, .site-header .site-nav, .site-nav > a, .menu-backdrop { transition: none !important; }
}

@media (max-width: 800px) {
    .menu-open .menu-toggle { color: #fff; }
    .site-nav > .btn--nav { background: #c6a667; color: #000; border-color: #c6a667; padding-inline: 16px; }
    .site-nav > .btn--nav:hover { background: transparent; color: #fff; border-color: #c6a667; }
    .site-nav > a:focus-visible, .menu-open .menu-toggle:focus-visible { outline: 2px solid #c6a667; outline-offset: 3px; box-shadow: none; }
}

@media (max-width: 800px) {
    .site-header .site-nav > a:not(.btn) { align-self: center; width: fit-content; max-width: 100%; font-size: 24px; height: 50px; }
}

.drawer-shield { display: none; }
@media (max-width: 800px) {
    .drawer-shield { display: block; width: 75px; height: 75px; object-fit: contain; flex-shrink: 0; margin-bottom: 16px; margin-left: 50%; opacity: 0; transform: translateX(-50%); transition: opacity 180ms ease, transform 280ms ease; }
    .site-nav.is-open .drawer-shield { opacity: 1; transition-delay: 540ms; }
}
@media (prefers-reduced-motion: reduce) { .drawer-shield { transition: none !important; } }
