/* Heart pages only. The existing header owns geometry and interaction;
   one feathered optical backing replaces the two stacked Paper bars. */
.offering-page {
  --heart-navigation-reading-height: calc(var(--heart-primary-height) + var(--heart-index-height));
  --heart-navigation-feather: 36px;
}

.offering-page .site-header,
.offering-page.past-hero .site-header {
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.offering-page .site-header::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  z-index: -1;
  height: calc(var(--heart-navigation-reading-height) + var(--heart-navigation-feather));
  pointer-events: none;
  /* The unfiltered fallback still fades without a hard lower edge. */
  background: linear-gradient(
    to bottom,
    rgba(248, 248, 248, .88) 0,
    rgba(248, 248, 248, .86) var(--heart-navigation-reading-height),
    rgba(248, 248, 248, .48) calc(var(--heart-navigation-reading-height) + 12px),
    rgba(248, 248, 248, 0) 100%
  );
}

/* Keep the separate narrow-screen row sharp above the shared backing. */
.offering-page .heart-index {
  z-index: 31;
}

.offering-page .heart-index::before {
  content: none;
}

.offering-page .heart-tab:not([aria-current='page']) {
  color: #40443d;
}

.offering-page .heart-tab:is(:hover, :focus-visible) {
  color: var(--ink);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @supports ((mask-image: linear-gradient(#000, transparent)) or (-webkit-mask-image: linear-gradient(#000, transparent))) {
    .offering-page .site-header::before {
      /* Darker inactive names allow the image to show through the veil.
         Masking feathers the blur itself, as well as its pale wash. */
      background: linear-gradient(
        to bottom,
        rgba(248, 248, 248, .80) 0,
        rgba(248, 248, 248, .74) var(--heart-navigation-reading-height),
        rgba(248, 248, 248, .74) 100%
      );
      -webkit-backdrop-filter: blur(16px) saturate(1.08);
      backdrop-filter: blur(16px) saturate(1.08);
      -webkit-mask-image: linear-gradient(
        to bottom,
        #000 0,
        #000 var(--heart-navigation-reading-height),
        rgba(0, 0, 0, .65) calc(var(--heart-navigation-reading-height) + 12px),
        rgba(0, 0, 0, .16) calc(var(--heart-navigation-reading-height) + 26px),
        transparent 100%
      );
      mask-image: linear-gradient(
        to bottom,
        #000 0,
        #000 var(--heart-navigation-reading-height),
        rgba(0, 0, 0, .65) calc(var(--heart-navigation-reading-height) + 12px),
        rgba(0, 0, 0, .16) calc(var(--heart-navigation-reading-height) + 26px),
        transparent 100%
      );
    }
  }
}

@media (min-width: 1200px) {
  .offering-page {
    --heart-navigation-reading-height: var(--heart-primary-height);
  }
}

/* The navigation already hides while the full-screen menu is open. */
.offering-page.menu-open .site-header::before {
  display: none;
}

@media (prefers-reduced-transparency: reduce) {
  .offering-page .site-header::before {
    background: linear-gradient(
      to bottom,
      var(--paper) 0,
      var(--paper) var(--heart-navigation-reading-height),
      rgba(248, 248, 248, 0) 100%
    );
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    -webkit-mask-image: none;
    mask-image: none;
  }
}