/* Heart pages only: one floating optical plane is a sibling of the controls.
   Keeping them in separate compositing subtrees prevents SVG backdrop effects
   from attenuating the dotmark or filtering primary-header foreground. */
.offering-page {
  --heart-glass-inset: max(12px, calc(var(--pad) - 20px));
  --heart-glass-height: calc(var(--heart-primary-height) + var(--heart-index-height) - 4px);
  --heart-glass-radius: 22px;
}

.offering-page .site-header,
.offering-page.past-hero .site-header {
  color: var(--ink);
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  mix-blend-mode: normal;
}

.offering-page .site-header::before,
.offering-page .site-header::after,
.offering-page .heart-index::before {
  content: none;
}

.offering-page .heart-glass-surface {
  position: fixed;
  z-index: 29;
  top: 6px;
  left: var(--heart-glass-inset);
  right: var(--heart-glass-inset);
  height: var(--heart-glass-height);
  pointer-events: none;
  border-radius: var(--heart-glass-radius);
}

.offering-page .heart-glass-surface::before,
.offering-page .heart-glass-surface::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
}

/* The thin optical shoulder remains transparent and visibly refracts content. */
.offering-page .heart-glass-surface::before {
  border: 1px solid rgba(255, 255, 255, .52);
  border-right-color: rgba(255, 255, 255, .20);
  border-bottom-color: rgba(24, 27, 24, .12);
  background: rgba(248, 248, 248, .26);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .58),
    inset 0 -1px 0 rgba(255, 255, 255, .18),
    0 3px 12px rgba(24, 27, 24, .08);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.offering-page .heart-glass-surface[data-heart-glass='svg']::before {
  -webkit-backdrop-filter: var(--heart-glass-filter, none);
  backdrop-filter: var(--heart-glass-filter, none);
}

/* Internal luminosity coating, rather than a broad external blur or wash. */
.offering-page .heart-glass-surface::after {
  background: rgba(248, 248, 248, .82);
  -webkit-mask-image:
    linear-gradient(to bottom, transparent, #000 9px, #000 calc(100% - 9px), transparent),
    linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
  mask-image:
    linear-gradient(to bottom, transparent, #000 9px, #000 calc(100% - 9px), transparent),
    linear-gradient(to right, transparent, #000 20px, #000 calc(100% - 20px), transparent);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

.offering-page .heart-index {
  z-index: 31;
}

.offering-page .heart-tab,
.offering-page .heart-tab[aria-current='page'],
.offering-page .heart-tab:hover,
.offering-page .heart-tab:focus-visible {
  color: var(--ink);
}

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

.offering-page.menu-open .heart-glass-surface {
  display: none;
}

@media (prefers-reduced-transparency: reduce) {
  .offering-page .heart-glass-surface::before {
    background: var(--paper);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .offering-page .heart-glass-surface::after {
    display: none;
  }
}

@media (forced-colors: active) {
  .offering-page .site-header,
  .offering-page.past-hero .site-header {
    color: CanvasText;
  }

  .offering-page .heart-glass-surface::before {
    background: Canvas;
    border-color: CanvasText;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .offering-page .heart-glass-surface::after {
    display: none;
  }

  .offering-page .heart-tab {
    color: LinkText;
  }
}