.site-header{position:sticky;top:0;z-index:40;background:var(--background);border-bottom:1px solid var(--border)}
.header-top{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:20px;min-height:76px;padding-block:12px}
.site-brand{display:flex;align-items:center;gap:12px;min-width:0;justify-self:start;min-height:48px}
.site-name{font:600 21px/1.3 "Segoe UI",Arial,sans-serif;color:var(--foreground);white-space:nowrap}
.site-brand:hover .site-name,.site-brand:focus-visible .site-name{color:var(--foreground)}
.site-header img{display:block;width:38px;height:38px;object-fit:contain;flex-shrink:0}
.header-actions{justify-self:end;display:flex;align-items:center;gap:8px}
.header-linkedin{width:48px;height:48px;display:grid;place-items:center}
.project-navigation{display:flex;align-items:center;gap:16px;justify-content:center}
.project-link{position:relative;display:grid;align-items:center;min-height:48px;min-width:228px;padding:5px 8px;border-radius:5px;text-decoration:none}
.project-normal{display:flex;align-items:center;justify-content:center;gap:12px}
.project-normal{font-size:17px;font-weight:600;color:var(--foreground)}
.project-slogan{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%);width:max-content;max-width:300px;padding:9px 14px;border:1px solid var(--teal);border-radius:8px;background:var(--surface);color:var(--foreground);font-size:15px;line-height:1.5;white-space:normal;box-shadow:0 5px 18px #0004;visibility:hidden;opacity:0;z-index:3}
.project-slogan::before{content:"";position:absolute;left:0;right:0;top:-9px;height:9px}
.project-navigation .project-link:is(:hover,:focus-visible) .project-slogan{visibility:visible;opacity:1}
.project-link.slogan-dismissed .project-slogan{visibility:hidden!important;opacity:0!important}
.desktop-navigation{display:flex;justify-content:center;gap:30px;border-top:1px solid var(--border);padding-block:6px}
.desktop-navigation a{display:inline-flex;align-items:center;min-height:40px;font-size:15px;color:var(--text-2)}
.desktop-navigation a:is(:hover,:focus-visible){color:var(--teal)}
.menu-toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center;color:var(--foreground);border:1px solid var(--border);border-radius:5px;background:var(--surface);cursor:pointer}
.mobile-menu[hidden]{display:none!important}
.mobile-menu{display:none}
html{scroll-padding-top:144px}.skip:focus{z-index:60}
@media(max-width:1000px){
 .header-top{grid-template-columns:minmax(0,1fr) auto;gap:12px;min-height:72px;padding-block:10px}
 .project-navigation,.desktop-navigation{display:none}
 .menu-toggle{display:flex}
 .mobile-menu:not([hidden]){display:block;position:absolute;left:16px;right:16px;top:calc(100% + 8px);padding:16px;background:#253748;border:2px solid var(--teal);border-radius:10px;box-shadow:0 12px 30px #0006;max-height:calc(100dvh - 104px);overflow-y:auto;overscroll-behavior:contain}
 .mobile-navigation{display:grid;gap:4px}
 .mobile-navigation a{display:block;min-height:44px;padding:10px 12px;border-radius:5px;color:var(--foreground);font-size:17px}
 .mobile-navigation a:is(:hover,:focus-visible),.mobile-projects a:is(:hover,:focus-visible){background:#334c61}
 .mobile-projects{display:grid;gap:6px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
 .mobile-projects .project-link{min-width:0;padding:8px 12px;min-height:54px}
 .mobile-projects .project-normal{justify-content:flex-start}
 .mobile-projects .project-slogan{display:none}
 html{scroll-padding-top:96px}
}
@media(max-width:360px){.site-name .domain-ending{display:none}}
@media(max-width:330px){.site-name{display:none}}
@media print{.site-header{position:static}.header-actions,.project-navigation,.desktop-navigation,.mobile-menu{display:none!important}}