/* Shared look: the painted header (hero.html), for themes without a 3D scene. Three layers of
   the theme's art; the back ones sink a little slower as the page scrolls (engine/theme/painted.js
   sets --depth), which gives the painting depth. Art is anchored bottom-center and cropped to fit,
   so the important parts of each layer belong in the middle. */
.hero.painted{--depth:0; position:relative; height:clamp(460px, 72svh, 700px); margin-top:-6px; overflow:hidden; isolation:isolate; background:var(--paper)}
.hero.painted .layer{position:absolute; top:-20%; bottom:-2%; left:-2%; right:-2%; background:no-repeat center bottom / cover; pointer-events:none}
.hero.painted .back{background-image:var(--art-hero-back); transform:translateY(calc(var(--depth) * 18%))}
.hero.painted .mid{background-image:var(--art-hero-mid); transform:translateY(calc(var(--depth) * 9%))}
.hero.painted .front{background-image:var(--art-hero-front); z-index:2}
.hero-title{position:absolute; left:50%; top:clamp(16px, 5svh, 52px); transform:translateX(-50%); width:min(62vw, 320px); z-index:1; pointer-events:none;
  filter:drop-shadow(0 0 14px rgba(var(--paper-rgb),.85))}
.hero-title img{display:block; width:100%; height:auto}
.hero-title h1{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
@media (min-width:900px){.hero-title{width:min(30vw, 380px)}}
/* the painting fades into the paper instead of ending in a hard edge */
.hero.painted::after{content:""; position:absolute; left:0; right:0; bottom:0; height:14%; z-index:3; pointer-events:none; background:linear-gradient(rgba(var(--paper-rgb),0), var(--paper))}