.nav-item{position:relative;display:flex;align-items:center}
.nav-item>a{white-space:nowrap}
.submenu-toggle{width:28px;height:34px;margin-left:2px;padding:0;border:0;background:transparent;color:inherit;display:grid;place-items:center;cursor:pointer;font-size:14px;transition:color .3s ease,transform .35s ease}
.submenu{position:absolute;top:calc(100% + 15px);left:50%;width:250px;padding:10px;background:#050505f7;border:1px solid #ffffff24;box-shadow:0 22px 55px #00000066;backdrop-filter:blur(16px);opacity:0;visibility:hidden;transform:translate(-50%,10px);transition:opacity .3s ease,transform .45s cubic-bezier(.22,1,.36,1),visibility .3s;pointer-events:none}
.submenu:before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px}
.submenu a{display:flex!important;align-items:center;justify-content:space-between;min-height:42px;padding:11px 14px!important;border-bottom:1px solid #ffffff17;color:#ededeb;font-size:12px!important;font-weight:400;letter-spacing:.02em!important;text-transform:none!important;transition:background .3s ease,color .3s ease,padding .3s ease}
.submenu a:last-child{border-bottom:0}
.submenu a:after{content:"↗"!important;position:static!important;width:auto!important;height:auto!important;background:none!important;color:#aaa;opacity:.8}
.submenu a:hover,.submenu a:focus-visible{padding-left:18px!important;background:#ffffff15;color:#fff}
.nav-item:hover>.submenu,.nav-item:focus-within>.submenu,.nav-item.open>.submenu{opacity:1;visibility:visible;transform:translate(-50%,0);pointer-events:auto}
.nav-item.open>.submenu-toggle{transform:rotate(180deg);color:#fff}
@media(max-width:900px){
  .nav-item{display:grid;grid-template-columns:1fr 44px;width:100%;border-bottom:1px solid #ffffff1f}
  .nav-item>a{border-bottom:0!important}
  .submenu-toggle{width:44px;height:48px;margin:0;font-size:16px}
  .submenu{position:static;grid-column:1/-1;width:100%;padding:4px 0 10px;border:0;border-top:1px solid #ffffff18;box-shadow:none;background:#0d0d0d;backdrop-filter:none;display:none;opacity:1;visibility:visible;transform:none!important;pointer-events:auto}
  .submenu:before{display:none}
  .nav-item:hover>.submenu,.nav-item:focus-within>.submenu{display:none}
  .nav-item.open>.submenu{display:block}
  .submenu a{min-height:44px;padding:10px 18px!important;font-size:12px!important}
}

/* Align the visible wordmark, compensating for transparent image padding. */
.header > a.logo,
.header > a.official-logo {
  --header-logo-width: 178px;
  display: block;
  flex: 0 0 var(--header-logo-width);
  width: var(--header-logo-width) !important;
  max-width: none !important;
  height: 44px !important;
  margin: 0;
  padding: 0;
  align-self: center;
  background-size: 242% auto;
  background-position: center calc(50% + var(--header-logo-width) * .0605);
  background-repeat: no-repeat;
}
@media (max-width: 900px) {
  .header > a.logo,
  .header > a.official-logo { --header-logo-width: 145px; }
}
@media (max-width: 767px) {
  .header > a.logo,
  .header > a.official-logo { --header-logo-width: 138px; }
}
/* Center the opaque lettering (source y=1863..2235), not the image canvas. */
.header > a.logo,
.header > a.official-logo {
  background-size: 430.76px auto !important;
  background-position: center calc(50% + 10.823655px) !important;
}
@media (max-width: 900px) {
  .header > a.logo,
  .header > a.official-logo {
    background-size: 350.9px auto !important;
    background-position: center calc(50% + 8.8163625px) !important;
  }
}
@media (max-width: 767px) {
  .header > a.logo,
  .header > a.official-logo {
    background-size: 333.96px auto !important;
    background-position: center calc(50% + 8.390745px) !important;
  }
}

@media(min-width:901px){#submenu-projects{width:310px;max-width:calc(100vw - 40px)}#submenu-projects a{white-space:normal}}
