body.home-page{
  --home-quote-height:calc((100svh - var(--site-header-height)) * .62);
  isolation:isolate;
}

/* Use the large viewport for the painting so browser chrome cannot rescale it. */
body.home-page::before,
body.home-page::after{
  position:fixed;
  inset:var(--site-header-height) 0 auto;
  height:calc(var(--home-artwork-viewport, 100lvh) - var(--site-header-height));
  background:url("../images/home-visitor-right.jpg") left center / cover no-repeat;
  pointer-events:none;
  transform:translateZ(0);
}

/* Cover the scrolling introduction where it passes behind the quotation. */
body.home-page::after{
  display:block;
  z-index:3;
  clip-path:inset(0 0 calc(100% - var(--home-quote-height)) 0);
}

body.home-page main{
  padding-top:100svh;
}

body.home-page .home-hero{
  position:fixed;
  inset:var(--site-header-height) 0 auto;
  height:var(--home-quote-height);
  min-height:0;
  margin:0;
  padding:8px var(--side) clamp(12px, 3svh, 28px);
  align-items:end!important;
  z-index:4;
  pointer-events:none;
}

body.home-page .home-quotation-text{
  font-size:clamp(18px, min(5.4vw, 8svh), 82px)!important;
}

body.home-page .home-quotation-text span{
  white-space:normal;
}

body.home-page .home-quotation-author{
  margin-top:clamp(10px, 2.5svh, 26px)!important;
  font-size:clamp(14px, 3.5svh, 32px)!important;
}

body.home-page .home-introduction{
  margin-top:0;
}

@media(max-width:800px){
  body.home-page{
    --home-quote-height:calc((100svh - var(--site-header-height)) * .56);
  }

  body.home-page .home-quotation-text{
    font-size:clamp(14px, min(5.8vw, 3.8svh), 28px)!important;
    line-height:1.6;
  }

  body.home-page .home-quotation-author{
    font-size:clamp(13px, 2.5svh, 16px)!important;
  }

  body.home-page .home-introduction{
    padding:14px clamp(16px, 4.5vw, 24px);
  }

  body.home-page .home-introduction p{
    font-size:clamp(14px, 3.7vw, 16px);
    line-height:1.65;
  }
}