/* Extend the photographic atmosphere without regenerating the original person. */
body {
  background: #2b465b url('assets/home-scene-blurred.webp') center top / cover no-repeat fixed;
}
.scene-background .masthead { border-bottom-color: transparent; }
.hero-brush-top { display: none; }
.scene-background .portrait-stage {
  left: 0;
  width: 100%;
  mask-image: none;
  -webkit-mask-image: none;
}
.scene-background .hero-portrait {
  mix-blend-mode: normal;
  mask-image: url('assets/hero-brush-mask.svg'), linear-gradient(90deg, transparent, #000 13%, #000 82%, transparent), linear-gradient(#000 72%, transparent 100%);
  -webkit-mask-image: url('assets/hero-brush-mask.svg'), linear-gradient(90deg, transparent, #000 13%, #000 82%, transparent), linear-gradient(#000 72%, transparent 100%);
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
}
.scene-background .hero-copy .calligraphy-title {
  filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgba(12,30,43,.22));
}
@media (min-width: 761px) {
  .scene-background .hero-portrait {
    left: clamp(76px, 11vw, 220px);
    width: calc(var(--reader-top) * 1.8);
    max-width: 700px;
  }
}
@media (max-width: 760px) {
  .scene-background { --hero-header-height: 74px; --portrait-top-gap: 54px; }
  .scene-background .portrait-stage {
    top: calc(-1 * var(--hero-header-height));
    height: calc(620px + var(--portrait-top-gap));
  }
  /* Continue only the photograph's head-free top strip behind the masthead. */
  .scene-background .hero-brush-top {
    display: block;
    position: absolute;
    top: 0;
    left: -1vw;
    width: 92vw;
    height: var(--portrait-top-gap);
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, #000 13%, #000 82%, transparent);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 13%, #000 82%, transparent);
  }
  .scene-background .hero-portrait {
    top: var(--portrait-top-gap);
    left: -1vw;
    width: 92vw;
    max-width: none;
  }
}
@media (max-width: 760px) and (max-height: 740px) {
  .scene-background { --hero-header-height: 62px; --portrait-top-gap: 42px; }
}