/* The signatures belong to the first screen; only the compact menu stays fixed. */
:root{--nav-unit:1px}
.topbar.site-navigation{position:absolute}
.topbar.site-navigation .header-portfolio{grid-column:3;justify-self:end}
.topbar.site-navigation .nav{
  position:fixed;inset:calc(16 * var(--nav-unit)) auto auto 50%;
  transform:translateX(-50%);width:max-content;gap:calc(4 * var(--nav-unit));
  padding:calc(6 * var(--nav-unit));border:1px solid #ffffff29;border-radius:999px;
  background:rgba(24,24,33,.94);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:0 5px 18px #0003;font-size:calc(12 * var(--nav-unit));
}
.topbar.site-navigation .nav>a{
  min-height:calc(38 * var(--nav-unit));padding:calc(12 * var(--nav-unit)) calc(18 * var(--nav-unit));
  border-radius:999px;font-size:inherit;font-weight:600;
}
.topbar.site-navigation .nav>a.is-current{
  color:#fff;background:var(--control-active-bg);border-color:var(--control-active-border);
  box-shadow:var(--control-active-shadow);
}
.topbar.site-navigation .nav>a:not(.is-current):hover{background:#ffffff12;color:#fff;box-shadow:none}
.topbar.site-navigation .header-language{
  min-width:calc(42 * var(--nav-unit));min-height:calc(38 * var(--nav-unit));
  padding:calc(12 * var(--nav-unit));margin-left:calc(4 * var(--nav-unit));
  border-radius:999px;background:#3a3455;border-color:#ffffff19;box-shadow:none;
  color:#edeaff;font-size:inherit;
}
.topbar.site-navigation .header-language:hover{background:#4a426b;border-color:#aaa5ff5c}
html:lang(en) .topbar.site-navigation .header-language{background:#254c52;border-color:#80cfcb55;color:#e2fffb}
html:lang(en) .topbar.site-navigation .header-language:hover{background:#2b6367;border-color:#91ded477}
@media(min-width:981px){:root{--nav-unit:var(--ref-x)}}
@media(max-width:980px){
  :root{--mobile-nav-top:max(10px,env(safe-area-inset-top,0px));--site-header-height:calc(var(--mobile-nav-top) + 52px)}
  .topbar.site-navigation{grid-template-columns:1fr 1fr;grid-template-rows:calc(var(--mobile-nav-top) + 52px) 48px;height:calc(var(--mobile-nav-top) + 100px);padding:0 6vw}
  .topbar.site-navigation .header-signature{grid-row:2}
  .topbar.site-navigation .header-portfolio{grid-column:2}
  .topbar.site-navigation .brand{font-size:17px}
  .topbar.site-navigation .header-signature{gap:16px}
  .topbar.site-navigation .header-rule{width:26px}
  .topbar.site-navigation .nav{
    top:var(--mobile-nav-top);grid-column:auto;grid-row:auto;align-self:auto;
    width:calc(100% - 24px);max-width:440px;gap:2px;padding:5px;
    justify-content:space-between;font-size:11px;
  }
  .topbar.site-navigation .nav>a{flex:1;min-height:40px;padding:10px 8px}
  .topbar.site-navigation .header-language{flex:0 0 40px;min-width:40px;min-height:40px;padding:10px;margin-left:2px}
}
@media(max-width:360px){
  .topbar.site-navigation .nav{font-size:10px;gap:1px}
  .topbar.site-navigation .nav>a{padding-inline:3px}
  .topbar.site-navigation .header-language{font-size:inherit}
  .topbar.site-navigation .header-signature{gap:12px}
  .topbar.site-navigation .header-rule{width:22px}
}