/* Match the page surface before the image reaches its bounding edge. */
body[data-page="website-home"] .hero{background:var(--bg)}
body[data-page="website-home"] .hero-photo{-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 57%,rgba(0,0,0,.96) 65%,rgba(0,0,0,.8) 73%,rgba(0,0,0,.48) 82%,rgba(0,0,0,.15) 90%,transparent 98%,transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 57%,rgba(0,0,0,.96) 65%,rgba(0,0,0,.8) 73%,rgba(0,0,0,.48) 82%,rgba(0,0,0,.15) 90%,transparent 98%,transparent 100%)}
@media(max-width:760px){body[data-page="website-home"] .hero-photo{-webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.45) 7%,#000 18%,#000 60%,rgba(0,0,0,.8) 72%,rgba(0,0,0,.4) 84%,transparent 98%);mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.45) 7%,#000 18%,#000 60%,rgba(0,0,0,.8) 72%,rgba(0,0,0,.4) 84%,transparent 98%)}}