/* header.css — Site header, wordmark, desktop nav and the mobile menu. */

.site-header{ position: sticky; top: 0px; height: 66px; padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; z-index: 70; background: rgba(9, 9, 9, 0.96); border-bottom: 1px solid var(--line); gap: 20px; }
.wordmark{ font-family: var(--display); font-size: 24px; line-height: 1; letter-spacing: -0.4px; display: inline-flex; align-items: start; }
.wordmark span{ color: var(--red); font-size: 12px; margin: 1px 0px 0px 3px; }
.desktop-nav{ display: flex; gap: 32px; margin-left: 7%; }
.desktop-nav a{ font-size: 12px; min-height: 44px; display: flex; align-items: center; position: relative; color: var(--muted); transition: color 0.25s; }
.desktop-nav a:hover, .desktop-nav a.active{ color: var(--ink); }
.desktop-nav a.active::before{ content: ""; position: absolute; left: -11px; width: 4px; height: 4px; background: var(--red); border-radius: 50%; }
.header-actions{ display: flex; align-items: center; gap: 24px; }
.motion-toggle{ display: flex; align-items: center; gap: 7px; min-height: 44px; font-size: 10px; color: var(--muted); }
.motion-toggle:hover{ color: var(--ink); }
.header-contact{ display: flex; gap: 12px; align-items: center; min-height: 44px; font-size: 12px; }
.header-contact svg{ color: var(--red); }
.menu-toggle, .mobile-menu{ display: none; }

@media (max-width: 1100px){
.desktop-nav{ margin: 0px; gap: 25px; }
.header-actions{ gap: 20px; }
}

@media (max-width: 800px){
.site-header{ height: 60px; }
.desktop-nav{ gap: 20px; }
.desktop-nav a{ font-size: 11px; }
.header-actions{ gap: 10px; }
.header-contact{ display: none; }
}

@media (max-width: 600px){
.site-header{ height: 56px; gap: 12px; }
.wordmark{ font-size: 22px; }
.desktop-nav{ display: none; }
.header-actions{ gap: 13px; }
.motion-toggle{ font-size: 9px; min-width: 72px; }
.menu-toggle{ display: inline-flex; border: 0px; width: 36px; }
.mobile-menu{ position: absolute; top: 55px; left: 0px; right: 0px; display: flex; flex-direction: column; padding: 10px 20px 20px; background: rgb(16, 12, 12); border-bottom: 1px solid rgb(93, 32, 42); }
.mobile-menu > a{ display: flex; align-items: center; gap: 18px; min-height: 54px; border-bottom: 1px solid var(--line); font-size: 18px; }
.mobile-menu > a > span{ font-size: 10px; color: var(--red); }
.mobile-menu > a > svg{ margin-left: auto; color: var(--muted); }
}

.wordmark{ min-height: 44px; align-items: center; }
.wordmark > span{ align-self: flex-start; margin-top: 9px; }

@media (max-width: 600px){
.menu-toggle{ width: 44px; min-width: 44px; }
}

.mm{display:none;position:absolute;top:66px;left:0;right:0;flex-direction:column;padding:10px 20px 20px;background:#100c0c;border-bottom:1px solid #5d202a}
body.mmo .mm{display:flex}
.mm a{padding:12px 0;font-size:14px}