:root{
--side:86px; --side-m:20px;
--pill-h:55px; --radius:36px;
--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));
--ui-color:#000; --ui-contrast:#fff; --frame-pad-x: clamp(16px, 4.2vw, 24px);
--frame-pad-y: clamp(18px, 4.8vh, 28px);
}
body.header-light{ --ui-color:#fff; --ui-contrast:#000; }
body.header-dark { --ui-color:#000; --ui-contrast:#fff; }
.site-header, .main-navigation, #site-navigation, .inside-header{ display:none !important; } .logo-container{ position:fixed; z-index:900; top:calc(34px + var(--safe-top)); left:var(--side); }
.logo{ width:56px; height:auto; display:block; transition: opacity .16s ease; }
.navbar{
position:fixed; z-index:950; top:calc(34px + var(--safe-top)); right:var(--side);
display:flex; align-items:center; gap:12px;
height:var(--pill-h); padding:10px 10px; 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{
text-decoration:none; position:relative; z-index:2; font:400 22px "Swear Display", serif;
padding:0 12px; color:var(--ui-color) !important; white-space:nowrap; transition: color .16s ease;
}
.header-highlight{
position:absolute; top:0; left:0; height:var(--pill-h); border-radius:var(--radius);
background:var(--ui-color) !important; z-index:1;
width:0; 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), background-color .16s ease, opacity .16s ease;
}
.navbar.has-active .header-highlight{ opacity:1; }
.navbar a.is-active{ color:var(--ui-contrast) !important; } .mobile-link{
font: 400 clamp(22px, 5.8vw, 32px) "Swear Display", serif;
line-height:1.2;
letter-spacing:0.01em;
color:var(--ui-color) !important;
text-decoration:none;
} .mobile-menu-toggle{
display:none; position:fixed; z-index:100001;
top:calc(16px + var(--safe-top)); right:var(--side);
padding:10px 22px; border-radius:999px; height:auto;
border:1.5px solid var(--ui-color) !important; background: rgba(0,0,0,0.03); -webkit-backdrop-filter: blur(8px) saturate(160%);
backdrop-filter: blur(8px) saturate(160%);
-webkit-appearance: none; appearance: none;
-webkit-tap-highlight-color: transparent; cursor:pointer;
transition: border-color .16s ease, color .16s ease, background-color .16s ease, opacity .16s ease;
} body.header-light .mobile-menu-toggle{ background: rgba(255,255,255,0.10); }
body.header-dark  .mobile-menu-toggle{ background: rgba(0,0,0,0.03); } @supports (background: color-mix(in srgb, white 10%, transparent)){
body.header-light .mobile-menu-toggle{ background: color-mix(in srgb, white 10%, transparent); }
body.header-dark  .mobile-menu-toggle{ background: color-mix(in srgb, black 6%, transparent); }
}
.mobile-menu-toggle .label-close{ display:none; }
body.menu-open .mobile-menu-toggle .label-open{ display:none; }
body.menu-open .mobile-menu-toggle .label-close{ display:inline; } .mobile-menu-overlay{
position:fixed; inset:0; z-index:99999;
display:none;
align-items:center; justify-content:center;
background:rgba(0,0,0,.12);
-webkit-backdrop-filter:blur(9px) saturate(140%); backdrop-filter:blur(9px) saturate(140%);
min-height:100dvh;
padding: calc(var(--safe-top) + 24px) var(--gut-r) calc(var(--safe-bottom) + 24px) var(--gut-l);
box-sizing:border-box; overflow:hidden;
}
body.menu-open .mobile-menu-overlay{ display:flex; }
body.menu-open{ overflow:hidden; } .mobile-menu-content{
position:relative; width:100%; max-width:100%;
border:0; background:transparent;
color:var(--ui-color);
display:flex; align-items:center; justify-content:center;
} .mobile-menu-frame{
position:relative;
width: min(680px, calc(100% - 48px));
margin: clamp(12vh, 22vh, 28vh) auto clamp(10vh, 16vh, 22vh);
padding: var(--frame-pad-y) var(--frame-pad-x);
border:1.8px solid var(--ui-color);
border-radius: clamp(28px, 7vw, 44px);
display:flex; flex-direction:column; align-items:center;
gap: clamp(24px, 8vh, 64px);
text-align:center;
background: rgba(0,0,0,0.03);
-webkit-backdrop-filter:saturate(160%) blur(9px); backdrop-filter:saturate(160%) blur(9px);
}
.mobile-menu-frame .mobile-link{ position:relative; z-index:2; }
.mobile-menu-frame .mobile-link.is-current{ color:var(--ui-contrast) !important; } .mobile-menu-highlight{
position:absolute; z-index:1;
left: var(--frame-pad-x);
right: var(--frame-pad-x);
top: 0;
height: 56px;
border-radius: 999px;
background: var(--ui-color);
opacity: 0;
transform: translateY(0);
transition: transform .28s cubic-bezier(0.23,1,0.32,1),
opacity .18s ease,
background-color .16s ease;
} @media (max-width:900px){
.navbar{ display:none; }
.logo-container{ left:var(--side-m); }
.mobile-menu-toggle{
display:inline-flex;
right:var(--side-m);
align-items:center; justify-content:center; gap:8px;
}
}
@media (min-width:901px){
.mobile-menu-toggle{ display:none !important; }
.mobile-menu-overlay{ display:none !important; }
} .logo, .navbar, .mobile-menu-toggle, .mobile-menu-content, .mobile-menu-content a, .mobile-menu-frame, .mobile-menu-highlight{
will-change: color, border-color, background-color, transform, opacity;
} .ui-nav-typo{
font: 400 22px "Swear Display", serif;
line-height:1.2;
letter-spacing:0.01em;
}