/* One integrated hero: live text over the artwork. */
.hero{position:relative;display:block;isolation:isolate;overflow:hidden;min-height:clamp(760px,60vw,920px);background:var(--espresso)}
.hero .hero-image{position:absolute;inset:auto 0 0;width:100%;height:auto;max-width:100%;object-fit:contain;object-position:center bottom;margin:0;z-index:-2;mask-image:none;-webkit-mask-image:none}
.hero::after{content:'';display:block;position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,var(--espresso) 0%,rgba(36,28,18,.85) 18%,rgba(36,28,18,.35) 44%,transparent 70%,var(--espresso) 100%),linear-gradient(90deg,rgba(36,28,18,.7),rgba(36,28,18,.25) 46%,transparent 72%)}
.hero .hero-content{position:relative;padding-top:clamp(68px,6.9vw,122px);padding-bottom:220px}
.hero .hero-story-link{margin-top:28px}.hero .hero-intro{max-width:48ch}

@media(max-width:760px){.hero{min-height:760px}.hero .hero-content{padding-top:80px;padding-bottom:240px}.hero .hero-image{position:absolute;inset:auto 0 0;width:100%;height:auto;object-fit:contain;object-position:center bottom;mask-image:none;-webkit-mask-image:none}.hero::after{background:linear-gradient(180deg,var(--espresso),rgba(36,28,18,.9) 40%,rgba(36,28,18,.2) 70%,transparent 83%,var(--espresso) 100%)}.hero .hero-intro{font-size:1.125rem}.hero h1{font-size:clamp(2rem,9.8vw,3rem)}}

/* Light anchored to the artwork coordinates, at every viewport width. */
.hero .hero-glow{position:absolute;inset:auto 0 0;aspect-ratio:2/1;pointer-events:none;z-index:0;background:radial-gradient(ellipse 1.2% 2.4% at 63.6% 47.7%,rgba(255,246,206,.98) 0%,rgba(255,219,146,.75) 25%,rgba(241,186,94,.28) 60%,transparent 100%),radial-gradient(ellipse 9% 18% at 63.6% 47.7%,rgba(246,190,98,.36) 0%,rgba(224,164,77,.15) 42%,transparent 100%);mix-blend-mode:screen}
.hero .hero-content{z-index:1}
.hero h1 span{display:block;white-space:nowrap}
@media(max-width:760px){.hero h1{font-size:clamp(1.55rem,8.5vw,3rem);text-wrap:initial}.hero h1 span{display:block}}

/* One continuous background behind both life chapters, without extra vertical space. */
.ali-story-pair{position:relative;isolation:isolate;display:flow-root}
.ali-story-pair .story-mandala{position:absolute;z-index:-1;pointer-events:none;left:50%;top:50%;transform:translate(-50%,-50%);width:min(106%,1120px);max-width:none;height:auto;opacity:.26;mix-blend-mode:screen;mask-image:radial-gradient(circle,#000 15%,rgba(0,0,0,.9) 42%,transparent 70%);-webkit-mask-image:radial-gradient(circle,#000 15%,rgba(0,0,0,.9) 42%,transparent 70%)}

@media(max-width:700px){.ali-story-pair .story-mandala{width:112%;opacity:.18}}

/* Opaque portrait backing prevents the carved relief showing through photo masks. */
.ali-story-pair .portrait{isolation:isolate;background:var(--espresso)}
.ali-story-pair .portrait::before{inset:-22px;z-index:-1;background:var(--espresso);filter:blur(10px)}
/* Let the shared relief continue behind both text columns. */
.ali-story-pair .story-copy{position:relative;background:transparent}



/* Fade the image itself so its upper edge remains seamless at every hero height. */
.hero .hero-image{-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 20%,#000 88%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 20%,#000 88%,transparent 100%)}

/* Mobile artwork fills the hero behind its content, rather than a bottom strip. */
@media(max-width:760px){
.hero .hero-image{inset:0;width:100%;height:100%;object-fit:cover;object-position:63.6% 50%;mask-image:linear-gradient(to bottom,transparent 0%,#000 20%,#000 88%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 20%,#000 88%,transparent 100%)}
.hero::after{background:linear-gradient(180deg,rgba(36,28,18,.85),rgba(36,28,18,.42) 30%,rgba(36,28,18,.5) 72%,var(--espresso)),linear-gradient(90deg,rgba(36,28,18,.4),transparent)}
.hero .hero-glow{inset:0;aspect-ratio:auto;background:radial-gradient(ellipse 2% 1% at 63.6% 47.7%,rgba(255,239,192,.55),rgba(241,186,94,.2) 50%,transparent 100%),radial-gradient(ellipse 22% 9% at 63.6% 47.7%,rgba(246,190,98,.18),transparent 100%)}
.hero .hero-content{padding-bottom:100px}
.ali-story-pair .story-mandala{top:55%}
}

/* Artwork reaches the top edge, behind the masthead, with no upper fade. */
.hero .hero-image{inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;-webkit-mask-image:none;mask-image:none}
.hero::after{background:linear-gradient(0deg,var(--espresso),transparent 22%),linear-gradient(90deg,rgba(36,28,18,.7),rgba(36,28,18,.25) 46%,transparent 72%)}
/* The original image supplies the light; avoid a detached glow after cover cropping. */
.hero .hero-glow{display:none}
@media(max-width:760px){
 .hero .hero-image{object-position:63.6% 50%}
 .hero::after{background:linear-gradient(0deg,var(--espresso),transparent 22%),linear-gradient(90deg,rgba(36,28,18,.65),rgba(36,28,18,.3))}
}