:root{
--side:86px;
--hdr-side-m:36px;
--pill-h:55px; --radius:36px;
--ink:#141414;
--lime:#d8ff00;
--safe-top: env(safe-area-inset-top, 0px);
--safe-bottom: env(safe-area-inset-bottom, 0px);
--gut-l:max(20px, env(safe-area-inset-left, 0px));
--gut-r:max(20px, env(safe-area-inset-right, 0px));
--adminbar: var(--wp-admin--admin-bar--height, 0px);
--ui-color:var(--ink); --ui-contrast:#fff;
}
body.header-light{ --ui-color:#fff; --ui-contrast:var(--ink); }
body.header-dark { --ui-color:var(--ink); --ui-contrast:#fff; }
.site-header, .main-navigation, #site-navigation, .inside-header{ display:none !important; }
.dts-sr-only{
position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
} .logo-container{
position:fixed; z-index:900;
top:calc(34px + var(--safe-top) + var(--adminbar)); left:var(--side);
}
.logo{ width:56px; height:auto; display:block; transition:opacity .16s ease; }
.header-actions{
position:fixed; z-index:950;
top:calc(37px + var(--safe-top) + var(--adminbar)); right:var(--side);
display:flex; align-items:center; gap:25px;
} .navbar{
position:relative;
display:flex; align-items:center; gap:0;
height:var(--pill-h); padding:0; box-sizing:border-box;
border-radius:var(--radius);
border:1.5px solid var(--ui-color) !important;
background:rgba(0,0,0,0.03);
-webkit-backdrop-filter:saturate(160%) blur(8px); backdrop-filter:saturate(160%) blur(8px);
color:var(--ui-color) !important;
transition:border-color .16s ease, color .16s ease, background-color .16s ease;
}
.navbar a{
position:relative; z-index:2;
display:flex; align-items:center; height:100%;
padding:0 40px;
font:500 22px/1 "Swear Display", serif;
color:var(--ui-color) !important; text-decoration:none; white-space:nowrap;
transition:color .16s ease;
}
.navbar a:focus-visible{ outline:none; } .header-highlight{
position:absolute; z-index:1; top:-1.5px; left:-1.5px;
height:var(--pill-h); width:0; border-radius:var(--radius);
background:var(--ink) !important;
transform:translateX(0); opacity:0;
transition:transform .28s cubic-bezier(0.23,1,0.32,1), width .28s cubic-bezier(0.23,1,0.32,1), opacity .16s ease;
}
.navbar.has-active .header-highlight{ opacity:1; }
.navbar a.is-active{ color:#fff !important; } .header-cta{
display:inline-flex; align-items:center; justify-content:center;
height:var(--pill-h); min-width:71px; padding:0 23px; box-sizing:border-box;
border-radius:var(--radius);
background:var(--lime); color:var(--ink);
font:500 22px/1 "Swear Display", serif; text-decoration:none; white-space:nowrap;
}
.header-cta .dts-icon-send{ flex:0 0 auto; width:24px; height:24px; }
.header-cta__label{
display:inline-block; overflow:hidden;
max-width:0; opacity:0; margin-left:0;
transition:max-width .32s cubic-bezier(0.23,1,0.32,1), opacity .2s ease, margin-left .32s cubic-bezier(0.23,1,0.32,1);
}
.header-cta:hover .header-cta__label,
.header-cta:focus-visible .header-cta__label{ max-width:12em; opacity:1; margin-left:12px; }
.header-cta:focus-visible{ outline:2px solid var(--ui-color); outline-offset:3px; } .mobile-menu-toggle{
display:none; position:fixed; z-index:100001;
top:calc(45px + var(--safe-top) + var(--adminbar)); right:var(--hdr-side-m);
width:108px; height:54px; padding:0; box-sizing:border-box;
border-radius:999px;
border:1.5px solid var(--ui-color) !important;
background:transparent;
-webkit-appearance:none; appearance:none;
-webkit-tap-highlight-color:transparent; cursor:pointer;
transition:border-color .16s ease;
}
.toggle-knob{
position:absolute; top:-1.5px; right:-1.5px;
width:54px; height:54px; border-radius:50%;
display:flex; align-items:center; justify-content:center;
background:var(--ink); color:#fff;
transition:transform .28s cubic-bezier(0.23,1,0.32,1), background-color .2s ease, color .2s ease;
}
.toggle-knob .icon-close{ display:none; }
body.menu-open .mobile-menu-toggle{ border-color:#fff !important; }
body.menu-open .toggle-knob{ transform:translateX(-54px); background:#fff; color:var(--ink); }
body.menu-open .toggle-knob .icon-burger{ display:none; }
body.menu-open .toggle-knob .icon-close{ display:block; }
.mobile-menu-toggle:focus-visible{ outline:2px solid var(--ui-color); outline-offset:3px; } .mobile-menu-overlay{
position:fixed; inset:0; z-index:99999;
display:none;
background:rgba(20,20,20,.33);
-webkit-backdrop-filter:blur(12px) saturate(140%); backdrop-filter:blur(12px) saturate(140%);
min-height:100dvh; box-sizing:border-box; overflow:hidden;
padding:calc(var(--safe-top) + 120px) var(--hdr-side-m) calc(var(--safe-bottom) + 43px);
}
body.menu-open .mobile-menu-overlay{ display:flex; }
body.menu-open{ overflow:hidden; }
.mobile-menu-content{
width:100%;
display:flex; flex-direction:column; justify-content:flex-end; gap:26px;
}
.mobile-menu-frame{
display:flex; flex-direction:column;
border:1.5px solid #fff; border-radius:var(--radius);
text-align:center;
}
.mobile-link{
display:flex; align-items:center; justify-content:center;
height:clamp(52px, 9.8dvh, 83px);
font:500 22px/1 "Swear Display", serif;
color:#fff !important; text-decoration:none;
}
.mobile-link:focus-visible{ outline:2px solid #fff; outline-offset:-8px; border-radius:var(--radius); }
.mobile-menu-cta{
display:flex; align-items:center; justify-content:center; gap:12px;
height:clamp(60px, 9.8dvh, 83px); border-radius:999px;
background:var(--lime); color:var(--ink) !important;
font:500 22px/1 "Swear Display", serif; text-decoration:none;
}
.mobile-menu-cta .dts-icon-send{ width:24px; height:24px; }
.mobile-menu-cta:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
@media (max-width:900px){
.header-actions{ display:none; }
.logo-container{ position:fixed; left:var(--hdr-side-m); top:calc(45px + var(--safe-top) + var(--adminbar)); }
.logo{ width:auto; height:54px; } .mobile-menu-toggle{ display:block; }
}
@media (min-width:901px){
.mobile-menu-toggle{ display:none !important; }
.mobile-menu-overlay{ display:none !important; }
}
@media (prefers-reduced-motion: reduce){
.header-highlight, .header-cta__label, .toggle-knob{ transition:none; }
} .ui-nav-typo{
font:500 22px "Swear Display", serif;
line-height:1.2;
letter-spacing:0.01em;
}