/* Only this new private page's portrait; lower chapters retain original assets. */
#koi-artist-page[data-portrait-revision="3"] .hero-scroll-shell{height:150svh;height:round(nearest,150svh,1px);position:relative}
#koi-artist-page[data-portrait-revision="3"] .hero-scroll-shell .hero{position:fixed;inset:0;width:100%;height:100svh;min-height:0;z-index:5;opacity:1;background:#050505;will-change:opacity;pointer-events:none}
#koi-artist-page[data-portrait-revision="3"] .hero-copy{pointer-events:auto}
#koi-artist-page[data-portrait-revision="3"] .hero-portrait-bg .tp-canvas{position:absolute;left:0;width:100%;height:96svh;max-height:1100px;top:3svh;object-fit:contain;object-position:center bottom;filter:saturate(.72) contrast(1.02) brightness(.86);mask-image:linear-gradient(#000 70%,transparent 99%);opacity:0}
#koi-artist-page[data-portrait-revision="3"].tp-decoded .tp-canvas{opacity:1}
#koi-artist-page[data-portrait-revision="3"].tp-decoded .hero-portrait-image{opacity:0}
#koi-artist-page[data-portrait-revision="3"] .tp-decoder{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
#koi-artist-page[data-portrait-revision="3"] .hero.tp-released{visibility:hidden;pointer-events:none}
#koi-artist-page[data-portrait-revision="3"] .hero.tp-released .hero-copy{pointer-events:none}
@media(max-width:799px){
 #koi-artist-page[data-portrait-revision="3"] .hero-scroll-shell{height:145svh;height:round(nearest,145svh,1px)}
 #koi-artist-page[data-portrait-revision="3"] .hero-portrait-bg .tp-canvas{top:48px;height:71svh;object-position:center top;mask-image:linear-gradient(#000 50%,transparent 98%)}
}
@media(max-height:600px) and (min-width:800px){
 #koi-artist-page[data-portrait-revision="3"] .hero h1{font-size:44px}
 #koi-artist-page[data-portrait-revision="3"] .hero .lead{font-size:14px;line-height:1.5}
 #koi-artist-page[data-portrait-revision="3"] .hero-copy .kicker{font-size:14px}
 #koi-artist-page[data-portrait-revision="3"] .hero-link{margin-top:14px}
}
@media(prefers-reduced-motion:reduce){
 #koi-artist-page[data-portrait-revision="3"] .hero-scroll-shell{height:auto}
 #koi-artist-page[data-portrait-revision="3"] .hero-scroll-shell .hero{position:relative;inset:auto;height:100svh;min-height:620px;visibility:visible!important;opacity:1!important;will-change:auto}
 #koi-artist-page[data-portrait-revision="3"] .hero-copy{pointer-events:auto!important}
 #koi-artist-page[data-portrait-revision="3"] .tp-canvas{display:none}
 #koi-artist-page[data-portrait-revision="3"] .hero-portrait-image{opacity:1!important}
}
/* Feather the actual media bounds, not a wider letterboxed canvas.
   Matching treatment on decoded motion and reduced-motion/error still. */
#koi-artist-page[data-portrait-revision="3"] .hero-portrait-bg{background:#050505;isolation:isolate}
#koi-artist-page[data-portrait-revision="3"] .hero-portrait-bg :is(.tp-canvas,.hero-portrait-image){
 left:50%;right:auto;top:3svh;transform:translateX(-50%);
 width:min(72svh,100%,825px);height:auto;max-height:none;aspect-ratio:3/4;
 object-fit:contain;object-position:center;mix-blend-mode:lighten;
 mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.25) 5%,#000 19%,#000 78%,rgba(0,0,0,.25) 95%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 4%,#000 62%,rgba(0,0,0,.55) 80%,transparent 99%);
 mask-composite:intersect;
}
@media(max-width:799px){
 #koi-artist-page[data-portrait-revision="3"] .hero-portrait-bg :is(.tp-canvas,.hero-portrait-image){top:48px;width:min(53.25svh,100%);mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.25) 5%,#000 19%,#000 78%,rgba(0,0,0,.25) 95%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 4%,#000 52%,rgba(0,0,0,.4) 76%,transparent 98%)}
}