/* Progressive frosted blur behind hero captions: strongest at the bottom,
   fading out upwards, without darkening the image. Pages can tune the
   height with --hero-blur-height. */
.hero-blur {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--hero-blur-height, clamp(170px, 38%, 300px));
    pointer-events: none;
}
.hero-blur > span {
    position: absolute;
    inset: 0;
}
.hero-blur > span:nth-child(1) {
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    -webkit-mask: linear-gradient(to top, #000 40%, transparent 100%);
    mask: linear-gradient(to top, #000 40%, transparent 100%);
}
.hero-blur > span:nth-child(2) {
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    -webkit-mask: linear-gradient(to top, #000 25%, transparent 70%);
    mask: linear-gradient(to top, #000 25%, transparent 70%);
}
.hero-blur > span:nth-child(3) {
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    -webkit-mask: linear-gradient(to top, #000 0%, transparent 40%);
    mask: linear-gradient(to top, #000 0%, transparent 40%);
}
.hero-caption {
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}