.hero{
  position:relative;
  width:100%;
  height:100vh;             
  block-size: 100svh;       
  min-block-size: 620px;
  isolation:isolate;
  overflow:hidden;          
}
@supports (height: 100dvh) {
  .hero{ height:100dvh; }   
}
.hero-bg{ position:absolute; inset:0; background: var(--hero-vignette); z-index:0; }
canvas.hero-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:1 }

.hero-copy{
  position:absolute; inset:0; display:grid; place-items:center; text-align:center; z-index:2;
  padding: 0 18px;
}
.hero-copy h1{
  margin:0; font-size: clamp(28px, 5vw, 58px); line-height:1.05; font-weight:800;
  text-shadow: 0 8px 40px rgba(0,0,0,.35);
}
.lead{ color:var(--muted) }