.portal-nav-header {
  gap:clamp(20px,4vw,56px);
  background:linear-gradient(120deg,#101b2af5,#080b12f2 65%);
  border-bottom-color:#7598c135;
}
.portal-nav-header .brand {
  flex:none; min-height:44px; width:fit-content; white-space:nowrap;
}
.portal-nav-header .brand-mark {
  filter:drop-shadow(0 0 7px #a8d7fc5c);
}
.portal-nav-header .nav {
  flex:none; align-self:center; align-items:stretch; gap:4px;
  padding:4px; border:1px solid #a5b8d230; border-radius:14px;
  background:#080e18aa;
}
.portal-nav-header .nav a {
  min-width:44px; min-height:44px; padding-inline:clamp(7px,.65vw,12px);
  border-radius:9px; color:var(--muted); text-align:center;
  font-size:clamp(13px,1.35vw,16px); font-weight:590; line-height:1.2;
  transition:background-color 180ms,color 180ms;
}
.portal-nav-header .nav a:hover,
.portal-nav-header .nav a:focus-visible {
  color:var(--text); background-color:#719ed01f;
}
.portal-nav-header .nav a[aria-current] {
  color:var(--text); background-color:#6bace12e; box-shadow:inset 0 0 0 1px #94bfea40;
}
.portal-nav-header .nav a[aria-current]::after { content:none; }
.portal-nav-header .nav a:focus-visible { outline-offset:1px; }

@media (min-width:1281px) and (max-width:1550px) {
  .portal-nav-header { gap:20px; }
  .portal-nav-header .nav a { padding-inline:7px; font-size:14px; }
}

@media (max-width:1280px) {
  :root { --header:151px; }
  .portal-nav-header {
    height:auto; min-height:var(--header); display:grid; grid-template-columns:minmax(0,1fr);
    justify-content:stretch; align-content:center; gap:0; padding:3px clamp(12px,3vw,20px) 7px;
  }
  .portal-nav-header .brand {
    justify-self:center; gap:9px; font-size:clamp(17px,3.6vw,20px);
  }
  .portal-nav-header .brand-mark { display:inline-block; width:15px; }
  .portal-nav-header .nav {
    display:grid; grid-template-columns:repeat(5,minmax(0,1fr));
    width:100%; max-width:500px; justify-self:center; gap:2px;
  }
  .portal-nav-header .nav a {
    min-width:0; min-height:46px; padding:4px 5px; font-size:clamp(11px,2.65vw,14px);
  }
}


@media (max-width:1280px) {
  :root:has(.portal-nav-toggle:not([hidden])) { --header:64px; }
  .portal-nav-header:has(.portal-nav-toggle:not([hidden])) {
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    min-height:0; height:var(--header); padding:0 clamp(12px,3vw,20px);
  }
  .portal-nav-toggle {
    display:grid; place-items:center; flex:none; width:44px; height:44px;
    padding:0; color:var(--text); border:1px solid #a5b8d248; border-radius:10px;
    background:#111f31; cursor:pointer;
  }
  .portal-nav-toggle:hover { background:#1b304a; }
  .portal-nav-toggle:focus-visible { outline-offset:2px; }
  .portal-nav-toggle span {
    position:relative; display:block; width:19px; height:14px;
    border-block:2px solid currentColor;
  }
  .portal-nav-toggle span::after {
    content:""; position:absolute; top:4px; inset-inline:0; border-top:2px solid currentColor;
  }
  .portal-nav-header .nav[popover]:not(:popover-open) { display:none; }
  .portal-nav-header .nav[popover]:popover-open {
    position:fixed; inset:calc(var(--header) + 8px) clamp(12px,3vw,20px) auto auto;
    grid-template-columns:minmax(0,1fr); align-self:auto;
    width:min(320px,calc(100dvw - 24px)); max-width:none;
    max-height:calc(100dvh - var(--header) - 16px);
    box-sizing:border-box; overflow:auto; margin:0; padding:6px; gap:2px;
    background:#101a2a; border:1px solid #a5b8d248; border-radius:14px;
    box-shadow:0 12px 32px #03070d80;
  }
  .portal-nav-header .nav[popover] a {
    justify-items:start; padding-inline:12px; text-align:left; font-size:15px;
  }
}

@media (max-width:440px) {
  :root { --header:246px; }
  .portal-nav-header .nav { grid-template-columns:repeat(3,minmax(0,1fr)); }
}