/* odNOVA series 2–4 header contract
   One top-header geometry and type system. The canonical mobile overlay
   remains owned by menu.css, odnova-canonical-menu.css and nav.js. */

html body #top > #announce {
  position: relative !important;
  z-index: 20 !important;
  display: block !important;
  box-sizing: border-box !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 11px 5vw !important;
  border-bottom: 1px solid rgba(237, 232, 223, .08) !important;
  background: linear-gradient(180deg, #05080d 0%, #06090e 55%, rgba(6, 9, 14, 0) 100%) !important;
  color: #9f8d74 !important;
  font: 400 8.5px/1.5 "IBM Plex Mono", ui-monospace, monospace !important;
  letter-spacing: .16em !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

html body #top > #announce #annShort,
html body #top > #announce #annL,
html body #top > #announce #annR {
  display: none !important;
}

html body #top > #announce #annFull {
  display: inline !important;
}

html body #top > #heroNav {
  position: relative !important;
  z-index: 20 !important;
  inset: auto !important;
  display: flex !important;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: none !important;
  height: 84px !important;
  min-height: 84px !important;
  margin: 0 !important;
  padding: 0 5vw !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0 !important;
  transform: none !important;
  border-bottom: 1px solid rgba(237, 232, 223, .065) !important;
}

html body #top > #heroNav .hero-mark {
  display: block !important;
  flex: 0 0 100px !important;
  width: 100px !important;
  height: 44px !important;
  min-width: 100px !important;
  min-height: 44px !important;
  margin: 0 !important;
  background-size: auto 36px !important;
}

/* Give the wordmark its own quiet field before the first navigation item.
   This applies only when the full desktop navigation is visible. */
@media (min-width:1121px) {
  html body #top > #heroNav .hero-mark {
    margin-right: clamp(24px, 2vw, 36px) !important;
  }
}

html body #top > #heroNav #navLinks {
  display: flex !important;
  align-items: center !important;
  gap: clamp(13px, 1.45vw, 27px) !important;
  margin: 0 !important;
  font-size: 10.5px !important;
  font-weight: 400 !important;
  letter-spacing: .1em !important;
}

html body #top > #heroNav #navLinks > a {
  min-height: 44px !important;
  margin: 0 !important;
  padding: 16px 0 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #aeb9c3 !important;
  font: 400 10.5px/1.4 "IBM Plex Mono", ui-monospace, monospace !important;
  letter-spacing: .1em !important;
}

html body #top > #heroNav #navLinks > .nav-book {
  border: 0 !important;
  background: transparent !important;
  color: var(--gold-soft, #c9b79a) !important;
}

html body #top > #heroNav #navLinks > a[aria-current="page"] {
  color: #fbf9f4 !important;
}

@media (min-width: 1121px) {
  html body #top > #heroNav #navLinks > a {
    position: relative !important;
    transition: color .18s ease, background-color .18s ease, transform .18s ease !important;
  }

  html body #top > #heroNav #navLinks > a:not(.nav-book)::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -2px;
    left: 0;
    height: 1px;
    background: var(--gold, #c09a63);
    opacity: 0;
    transform: scaleX(.55);
    transform-origin: left center;
    transition: opacity .18s ease, transform .22s cubic-bezier(.16, 1, .3, 1);
    pointer-events: none;
  }

  html body #top > #heroNav #navLinks > a[aria-current="page"]::after,
  html body #top > #heroNav #navLinks > a:not(.nav-book):hover::after,
  html body #top > #heroNav #navLinks > a:not(.nav-book):focus-visible::after {
    opacity: .9;
    transform: scaleX(1);
  }

  html body #top > #heroNav #navLinks > a:not(.nav-book):hover,
  html body #top > #heroNav #navLinks > a:not(.nav-book):focus-visible,
  html body #top > #heroNav #navLinks > .nav-book:hover,
  html body #top > #heroNav #navLinks > .nav-book:focus-visible {
    color: #fbf9f4 !important;
  }

  html body #top > #heroNav #navLinks > .nav-book:hover,
  html body #top > #heroNav #navLinks > .nav-book:focus-visible {
    background: rgba(201, 183, 154, .14) !important;
    transform: translateY(-1px);
  }

  html body #top > #heroNav #navLinks > a:focus-visible {
    outline: 2px solid var(--gold-soft, #c9b79a) !important;
    outline-offset: 4px !important;
  }
}

html body #top > #heroNav > .nav-tools {
  display: flex !important;
  flex: 0 0 auto !important;
  margin-left: auto !important;
  align-items: center !important;
  gap: 16px !important;
}

@media (max-width: 1120px) {
  html body #top > #heroNav #navLinks {
    display: none !important;
  }
}

@media (max-width: 900px) {
  html body #top > #announce,
  html body #top > #heroNav {
    padding-inline: 28px !important;
  }
}

@media (max-width: 600px) {
  html body #top > #announce {
    display: block !important;
    min-height: 40px !important;
    padding: 10px 20px !important;
  }

  html body #top > #announce #annFull {
    display: none !important;
  }

  html body #top > #announce #annShort {
    display: inline !important;
  }

  html body #top > #heroNav {
    height: 70px !important;
    min-height: 70px !important;
    padding: 0 20px !important;
  }

  html body #top > #heroNav .hero-mark {
    flex-basis: 90px !important;
    width: 90px !important;
    min-width: 90px !important;
    height: 44px !important;
    min-height: 44px !important;
    background-size: auto 32px !important;
  }

  html body #top > #heroNav > .nav-tools {
    gap: 8px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body #top > #heroNav #navLinks > a,
  html body #top > #heroNav #navLinks > a::after {
    transition: none !important;
  }
}