/* One header bar for every public page. Desktop pills, phone menu. */
header.hero .top{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  column-gap:1rem;
  min-height:3.35rem;
  padding:.65rem 0;
  position:relative;
}
header.hero{overflow:visible}
header.hero.page-hero{padding:0}
header.hero .brand{
  grid-column:1;
  grid-row:1;
  justify-self:start;
  font:600 1.22rem var(--serif);
  letter-spacing:-.03em;
  text-decoration:none;
  line-height:1;
  padding:.2rem 0;
}
header.hero .nav-toggle{
  position:absolute;
  left:0;
  top:0;
  width:1px;
  height:1px;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  pointer-events:none;
}
header.hero .menu-btn{
  display:none;
  grid-column:2;
  grid-row:1;
  justify-self:end;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  min-width:4.75rem;
  height:2.4rem;
  padding:0 .95rem;
  border:1px solid #f5b82e;
  border-radius:999px;
  color:#f4f8fb;
  background:transparent;
  font:650 .92rem var(--sans);
  cursor:pointer;
}
header.hero .top>nav{
  grid-column:2;
  grid-row:1;
  justify-self:end;
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  gap:.15rem;
  font-size:.92rem;
}
header.hero .top>nav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:2.4rem;
  padding:0 .78rem;
  border-radius:999px;
  text-decoration:none;
  white-space:nowrap;
  line-height:1;
}
header.hero .top>nav a:hover{
  background:#ffffff1f;
  text-decoration:none;
}
header.hero .nav-toggle:focus-visible+.menu-btn{
  outline:3px solid #ffd166;
  outline-offset:2px;
}
@media(max-width:840px){
  header.hero .menu-btn{display:inline-flex}
  header.hero .top>nav{
    display:none;
    position:absolute;
    left:0;
    right:0;
    top:100%;
    z-index:40;
    flex-direction:column;
    align-items:stretch;
    gap:.25rem;
    margin:0;
    padding:.55rem 0 .7rem;
    background:#0c2740;
    box-shadow:0 18px 32px #00000059;
    border-top:1px solid #f5b82e66;
  }
  header.hero .top:has(.nav-toggle:checked)>nav{display:flex}
  header.hero .top>nav a{
    justify-content:flex-start;
    height:auto;
    min-height:2.6rem;
    padding:.7rem .9rem;
    border-radius:12px;
    background:#ffffff14;
  }
  header.hero .top>nav a[aria-current=page]{
    background:#f5b82e;
    color:#1c1500;
  }
}
@media(min-width:841px){
  header.hero .menu-btn{display:none}
  header.hero .top>nav a:hover,
  header.hero .top>nav a[aria-current=page]{
    background:#ffffff1f;
    text-decoration:none;
  }
}