/* Reference masthead with the same automatic light/dark colour modes. */
body { padding-top: 0; }
#fixedArea > header {
  position: relative;
  isolation: isolate;
  display: block;
  box-sizing: border-box;
  width: min(1180px, calc(100% - 28px));
  max-width: 1180px;
  min-height: 70px;
  margin: max(12px, env(safe-area-inset-top, 0px)) auto 12px;
  padding: 0;
  inset: auto;
  transform: none;
  will-change: auto;
  border: 1px solid rgba(125,112,255,.38);
  border-radius: 22px;
  color: #f5f4ff;
  background: linear-gradient(145deg,rgba(113,84,255,.13),transparent 38%,rgba(40,200,255,.09)),rgba(13,18,52,.78);
  box-shadow: 0 6px 20px rgba(3,9,23,.18), inset 0 0 40px rgba(98,79,238,.06);
  z-index: 1;
}
#fixedArea > header::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0 0 0 auto;
  width: min(48%, 620px);
  background: url('../images/target/header-cosmic.webp') 70% 48% / cover no-repeat;
  opacity: .66;
  mask-image: linear-gradient(90deg,transparent 0,#000 36%);
  -webkit-mask-image: linear-gradient(90deg,transparent 0,#000 36%);
  pointer-events: none;
}
#fixedArea > header::after {
  inset: auto 16px 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #765cff, #34d6ff, transparent);
  box-shadow: none;
  opacity: .65;
  animation: none;
}
#fixedArea > header .nav {
  width: 100%;
  min-height: 68px;
  padding: 7px 18px;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
}
#fixedArea > header .brand-logo-box {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  min-height: 0;
  padding: 0;
  gap: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  transform: none;
}
#fixedArea > header .brand-logo-box::after { content: none; }
#fixedArea > header .brand-logo {
  width: min(252px, 100%);
  max-width: 252px;
  height: 49px;
  object-fit: contain;
  object-position: left center;
  filter: none;
  /* Use the reference's light-lettered logo for its dark masthead. */
  content: url('../images/target/header-brand-dark.webp');
}
#fixedArea > header .nav-links { flex: 0 0 auto; gap: 0; }
#fixedArea > header .nav-main-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 0 auto;
  width: auto;
  min-width: 106px;
  max-width: 174px;
  min-height: 44px;
  margin: 0;
  padding: 5px 12px;
  border: 1px solid color-mix(in srgb,#765cff 28%,rgba(140,162,255,.22));
  border-radius: 14px;
  color: #f5f4ff !important;
  background: linear-gradient(135deg,rgba(17,23,62,.94),color-mix(in srgb,#765cff 13%,#11173e));
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 9px 22px rgba(0,0,0,.2);
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}
#fixedArea > header .nav-main-btn::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: linear-gradient(90deg,transparent,#765cff,#34d6ff,transparent);
  opacity: .72;
  transform: none;
  pointer-events: none;
}
#fixedArea > header .nav-main-btn:hover { border-color: #765cff; }
#fixedArea > header .nav-main-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin: 0;
}
#fixedArea > header .nav-main-icon svg { width: 20px; height: 20px; }
html[data-header-mode="light"] #fixedArea > header {
  color: #20214c;
  border-color: rgba(100,87,201,.25);
  background: linear-gradient(145deg,rgba(113,84,255,.13),transparent 38%,rgba(40,200,255,.09)),rgba(255,255,255,.82);
}
html[data-header-mode="light"] #fixedArea > header::after {
  background: linear-gradient(90deg,transparent,#6652df,#168fc7,transparent);
}
html[data-header-mode="light"] #fixedArea > header .brand-logo { content: normal; }
html[data-header-mode="light"] #fixedArea > header .nav-main-btn {
  color: #20214c !important;
  border-color: color-mix(in srgb,#6652df 28%,rgba(96,78,208,.2));
  background: linear-gradient(135deg,rgba(255,255,255,.96),color-mix(in srgb,#6652df 9%,#fff));
  box-shadow: inset 0 1px rgba(255,255,255,.72),0 7px 18px rgba(32,33,76,.09);
}
html[data-header-mode="light"] #fixedArea > header .nav-main-btn::after {
  background: linear-gradient(90deg,transparent,#6652df,#168fc7,transparent);
}
@media (max-width: 720px) {
  #fixedArea > header {
    width: calc(100% - 24px);
    min-height: 58px;
    margin-top: max(10px, env(safe-area-inset-top, 0px));
    border-radius: 20px;
  }
  #fixedArea > header .nav { min-height: 56px; padding: 6px 12px; gap: 10px; }
  #fixedArea > header::before { width: 58%; opacity: .52; mask-image: linear-gradient(90deg,transparent 0,#000 48%); -webkit-mask-image: linear-gradient(90deg,transparent 0,#000 48%); }
  #fixedArea > header .brand-logo { width: min(189px, 100%); max-width: 189px; height: 36px; }
  #fixedArea > header .nav-main-btn { min-width: 92px; min-height: 40px; padding-inline: 12px; }
}