.site-header { position: sticky; z-index: 100; top: 0; min-height: 5.75rem; background: rgb(36 21 38 / 92%); border-bottom: 1px solid var(--color-border); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.site-header__frame { position: relative; min-height: 5.75rem; overflow: visible; }
.site-header__frame::before { position: absolute; inset: 0; pointer-events: none; content: ""; background: repeating-linear-gradient(90deg, transparent 0, transparent 4.5rem, rgb(201 164 92 / 7%) 4.56rem, transparent 4.68rem); opacity: .7; }
.site-header__inner { position: relative; display: flex; min-height: 5.75rem; align-items: center; gap: 1rem; }
.site-header__brand { display: inline-flex; min-width: 0; flex: 0 1 auto; align-items: center; gap: .7rem; color: var(--color-moon-ivory); text-decoration: none; }
.site-header__brand:hover { color: var(--color-antique-gold); }
.site-header__logo { width: 3rem; height: 3rem; flex: 0 0 3rem; object-fit: contain; }
.site-header__brand-copy { display: grid; min-width: 0; gap: .05rem; color: currentColor; font-family: var(--font-body); line-height: 1.1; text-transform: uppercase; }
.site-header__brand-copy strong { font-size: .9rem; font-weight: 700; letter-spacing: .1em; white-space: nowrap; }
.site-header__brand-copy small { color: var(--color-antique-gold); font-size: .61rem; font-weight: 700; letter-spacing: .14em; white-space: nowrap; }
.site-header__nav { min-width: 0; flex: 1 1 auto; }
.site-header__nav-list { display: flex; min-width: 0; align-items: center; justify-content: center; gap: .85rem; margin: 0; padding: 0; list-style: none; }
.site-header__nav-list li, .site-header__nav-list li + li { display: flex; align-items: center; margin: 0; padding: 0; }
.site-header__nav-list a { position: relative; display: inline-flex; min-height: 2.75rem; align-items: center; color: var(--color-moon-ivory); font-size: .69rem; font-weight: 650; letter-spacing: .075em; line-height: 1.2; text-align: center; text-decoration: none; text-transform: uppercase; white-space: nowrap; }
.site-header__nav-list a::after { position: absolute; right: 0; bottom: .45rem; left: 0; height: 1px; transform: scaleX(0); transform-origin: left; background: var(--color-antique-gold); content: ""; transition: transform var(--transition-base); }
.site-header__nav-list a:hover::after, .site-header__nav-list a[aria-current="page"]::after { transform: scaleX(1); }
.site-header__cta { flex: 0 0 auto; width: auto; min-height: 2.7rem; padding-inline: .78rem; font-size: .62rem; white-space: nowrap; }
.site-header__toggle, .site-header__mobile-cta { display: none; }
@media (max-width: 1180px) { .site-header__nav-list { gap: .6rem; } .site-header__nav-more { display: none !important; } .site-header__cta { font-size: .58rem; } }
@media (max-width: 940px) { .site-header { min-height: 4.8rem; } .site-header__frame, .site-header__inner { min-height: 4.8rem; } .site-header__logo { width: 2.5rem; height: 2.5rem; flex-basis: 2.5rem; } .site-header__brand-copy strong { font-size: .78rem; } .site-header__brand-copy small { font-size: .55rem; } .site-header__cta { display: none; } .site-header__toggle { display: inline-flex; width: 2.75rem; min-width: 2.75rem; min-height: 2.75rem; margin-left: auto; align-items: center; justify-content: center; gap: .18rem; border-color: var(--color-border); background: rgb(22 59 50 / 42%); color: var(--color-antique-gold); padding: .35rem; } .site-header__toggle:hover, .site-header__toggle[aria-expanded="true"] { border-color: var(--color-border-strong); background: var(--color-bottle-green-deep); color: var(--color-moon-ivory); } .site-header__toggle-leaf { font-size: .9rem; line-height: 1; } .site-header__toggle-lines { display: grid; width: .8rem; gap: .17rem; } .site-header__toggle-lines span { display: block; width: 100%; height: 1px; background: currentColor; transition: transform var(--transition-fast), opacity var(--transition-fast); } .site-header__toggle[aria-expanded="true"] .site-header__toggle-lines span:nth-child(1) { transform: translateY(.26rem) rotate(45deg); } .site-header__toggle[aria-expanded="true"] .site-header__toggle-lines span:nth-child(2) { opacity: 0; } .site-header__toggle[aria-expanded="true"] .site-header__toggle-lines span:nth-child(3) { transform: translateY(-.26rem) rotate(-45deg); } .site-header__nav { position: absolute; z-index: 2; top: 100%; right: 0; left: 0; display: none; max-height: calc(100vh - 4.8rem); overflow-y: auto; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border-strong); background: var(--color-plum-night); box-shadow: var(--shadow-raised); padding: .75rem var(--container-padding) 1rem; } .site-header__nav.is-open { display: block; } .site-header__nav-list { display: grid; align-items: stretch; justify-content: stretch; gap: 0; } .site-header__nav-list li, .site-header__nav-list li + li { display: block; border-bottom: 1px solid rgb(201 164 92 / 25%); } .site-header__nav-list a { display: flex; min-height: 2.9rem; justify-content: flex-start; padding-inline: .2rem; font-size: .76rem; } .site-header__nav-list a::after { bottom: .4rem; right: auto; width: 2.2rem; } .site-header__nav-more { display: block !important; } .site-header__mobile-cta { display: inline-flex; width: 100%; margin-top: 1rem; } }
@media (max-width: 420px) { .site-header__inner { gap: .55rem; } .site-header__brand { gap: .45rem; } .site-header__logo { width: 2.3rem; height: 2.3rem; flex-basis: 2.3rem; } .site-header__brand-copy strong { font-size: .7rem; letter-spacing: .075em; } .site-header__brand-copy small { font-size: .5rem; letter-spacing: .1em; } }