/* Shared storefront masthead. Catalog pages use the taller catalog variant. */
.page-masthead {
  position: relative;
  width: 100%;
  height: 126px;
  min-height: 126px;
  overflow: hidden;
  border-bottom: 3px solid var(--brand-cyan);
  background:
    radial-gradient(circle at 82% 24%, rgba(0, 200, 255, .13), transparent 28%),
    linear-gradient(112deg, var(--brand-navy) 0%, #093654 62%, var(--brand-blue-dark) 135%);
  box-shadow: 0 10px 28px rgba(7, 31, 54, .1);
  color: var(--surface-white, #fff);
}

.page-masthead__art {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.page-masthead__art svg {
  display: block;
  width: 100%;
  height: 100%;
}

.page-masthead__badge {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: clamp(30px, 3.2vw, 62px);
  width: clamp(56px, 3.8vw, 72px);
  transform: translateY(-50%);
  pointer-events: none;
}

.page-masthead__badge img {
  display: block;
  width: 100%;
  height: auto;
}

.page-masthead--catalog .page-masthead__badge {
  width: clamp(64px, 4.1vw, 78px);
}

.page-masthead--catalog {
  height: 150px;
  min-height: 150px;
}

.page-masthead--article {
  height: auto;
  min-height: 304px;
}

.page-masthead--article .page-masthead__art {
  right: clamp(108px, 7.4vw, 150px);
  opacity: .98;
  filter: saturate(1.02) brightness(.98);
}

/* The catalog artwork is an ultra-wide, shallow production crop. A quiet
   navy veil keeps live masthead copy readable without obscuring the art. */
.page-masthead--catalog.page-masthead--has-art::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(7, 31, 54, .58) 0%,
    rgba(7, 31, 54, .45) 29%,
    rgba(7, 31, 54, .2) 38%,
    transparent 48%
  );
}

.page-masthead--article.page-masthead--has-art::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(7, 31, 54, .99) 0%,
    rgba(7, 31, 54, .98) 43%,
    rgba(7, 31, 54, .94) 49%,
    rgba(7, 31, 54, .76) 57%,
    rgba(7, 31, 54, .38) 67%,
    rgba(7, 31, 54, .08) 80%,
    rgba(7, 31, 54, 0) 100%
  );
  content: "";
  pointer-events: none;
}

.page-masthead .bc-rail,
.page-masthead__breadcrumb-slot,
.page-masthead__inner {
  position: relative;
  z-index: 3;
}

.page-masthead .bc-rail__inner,
.page-masthead__breadcrumb-slot,
.page-masthead__inner {
  width: var(--site-container-width);
  margin-inline: auto;
}

.page-masthead .bc-rail__inner,
.page-masthead__breadcrumb-slot {
  padding: 14px 0 8px;
}

.page-masthead__breadcrumb-slot .breadcrumb {
  margin: 0;
}

.page-masthead .breadcrumbs {
  --bc-link: rgba(255, 255, 255, .76);
  --bc-home: #fff;
  --bc-sep-color: rgba(255, 255, 255, .48);
  --bc-current: rgba(255, 255, 255, .82);
  --bc-font: 13px;
  margin-left: 0;
  font-weight: 700;
}

.page-masthead .breadcrumbs__link:hover {
  color: var(--brand-cyan);
  text-decoration: none;
}

.page-masthead__inner {
  padding: 3px 0 22px;
}

.page-masthead--catalog .page-masthead__inner {
  padding-top: 4px;
  padding-bottom: 24px;
}

.page-masthead--article .page-masthead__inner {
  padding-top: 4px;
  padding-bottom: 34px;
}

.page-masthead__eyebrow {
  margin: 0 0 6px;
  color: var(--brand-cyan);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .13em;
  line-height: 1.25;
  text-transform: uppercase;
}

.page-masthead__title {
  margin: 0;
  color: #fff;
  font-family: var(--font-sans);
  font-size: clamp(1.75rem, 2.2vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.08;
  overflow-wrap: break-word;
}

.page-masthead--catalog .page-masthead__title {
  max-width: min(560px, 45vw);
  font-size: clamp(1.9rem, 2.35vw, 2.35rem);
}

.page-masthead--article .page-masthead__title {
  max-width: min(980px, 61vw);
  font-size: clamp(2.25rem, 3.15vw, 3.25rem);
  font-weight: 850;
  letter-spacing: -.04em;
  line-height: 1.03;
}

.page-masthead__lead {
  max-width: 800px;
  margin: 14px 0 0;
  color: rgba(255, 255, 255, .82);
  font-size: clamp(.9rem, 1.15vw, 1.05rem);
  line-height: 1.6;
}

.page-masthead--article .page-masthead__lead {
  max-width: 720px;
}

.page-masthead__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-top: 17px;
  color: rgba(255, 255, 255, .66);
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.page-masthead__meta span::before {
  margin-right: 18px;
  color: rgba(255, 255, 255, .35);
  content: "/";
}

@media (max-width: 980px) {
  .page-masthead--article .page-masthead__art,
  .page-masthead--article .page-masthead__badge {
    display: none;
  }

  .page-masthead--article.page-masthead--has-art::before {
    background: linear-gradient(112deg, var(--brand-navy), #093654);
  }

  .page-masthead--article .page-masthead__title,
  .page-masthead--article .page-masthead__lead {
    max-width: none;
  }
}

@media (max-width: 768px) {
  .page-masthead .bc-rail__inner,
  .page-masthead__breadcrumb-slot,
  .page-masthead__inner {
    width: calc(100% - 32px);
  }

  .page-masthead {
    height: auto;
    min-height: 126px;
  }

  .page-masthead__art,
  .page-masthead__badge {
    display: none;
  }

  .page-masthead--catalog.page-masthead--has-art::before {
    content: none;
  }

  .page-masthead__inner {
    padding-bottom: 18px;
  }

  .page-masthead--catalog .page-masthead__inner {
    padding-top: 3px;
    padding-bottom: 18px;
  }

  .page-masthead--article {
    min-height: 0;
  }

  .page-masthead--article .page-masthead__inner {
    padding-top: 3px;
    padding-bottom: 24px;
  }

  .page-masthead--article .page-masthead__title {
    font-size: clamp(1.8rem, 8vw, 2.35rem);
    line-height: 1.08;
  }

  .page-masthead__meta span::before {
    display: none;
  }

  .page-masthead--catalog .page-masthead__title {
    max-width: none;
    font-size: clamp(1.65rem, 7vw, 2rem);
  }

  .page-masthead .breadcrumbs {
    margin-left: 0 !important;
    font-size: 12px;
  }
}