/* Photographic ink surface replaces the abstract ribbons. */
.living-hero{background:#0e0812 url('/art/ink-splash.jpg') center/cover no-repeat}
.living-hero canvas{z-index:0;opacity:0;transition:opacity .6s}.living-hero canvas.art-ready{opacity:1}
.living-hero .ink-backdrop{z-index:0;background:linear-gradient(90deg,#100c18e6 0%,#100c18b0 28%,#100c1830 54%,transparent 75%)}
.living-hero .hero-copy{z-index:1}.living-hero h1{font-size:clamp(76px,8vw,125px)}
html[dir=rtl] .living-hero{background-position:center;}
html[dir=rtl] .living-hero .ink-backdrop{background:linear-gradient(270deg,#100c18e6 0%,#100c18b0 28%,#100c1830 54%,transparent 75%)}
@media(max-width:760px){
.living-hero{background:#100c18;min-height:860px}
.living-hero::before{content:'';position:absolute;bottom:0;inset-inline:0;height:430px;background:url('/art/ink-splash.jpg') 74% center/cover no-repeat;z-index:0}
.living-hero canvas{top:auto;bottom:0;height:430px}
.living-hero .ink-backdrop,html[dir=rtl] .living-hero .ink-backdrop{background:linear-gradient(180deg,#100c18 0%,#100c18 46%,#100c18a0 58%,transparent 74%)}
.living-hero h1{font-size:clamp(65px,18vw,100px)}
.colour-coordinates{text-shadow:0 1px 8px #000}
}
@media(prefers-reduced-motion:reduce){.living-hero canvas{transition:none}}