.home-hero--chiaroscuro { --chiaroscuro-shadow: #17170f; }
.home-hero--chiaroscuro .chiaroscuro-art { position: absolute; inset: 0 0 0 auto; width: 80%; overflow: hidden; z-index: -2; }
.home-hero--chiaroscuro .home-hero__visual { inset: 0; width: 100%; height: 100%; z-index: auto; }
.home-hero--chiaroscuro .home-hero__visual img { position: static; width: 100%; height: 100%; object-fit: cover; object-position: right center; mask: none; }
.chiaroscuro-world { position: absolute; top: 0; left: 0; width: 1920px; height: 1080px; transform-origin: 0 0; opacity: 0; pointer-events: none; }
.chiaroscuro-art.is-ready .chiaroscuro-world { opacity: 1; }
.chiaroscuro-world > img, .chiaroscuro-world > canvas, .chiaroscuro-wall, .chiaroscuro-shadow, .chiaroscuro-leaves { position: absolute; inset: 0; width: 1920px; height: 1080px; max-width: none; pointer-events: none; }
.chiaroscuro-world > img { object-fit: cover; }
.chiaroscuro-wall { mask-size: 100% 100%; mask-repeat: no-repeat; }
.chiaroscuro-shadow { opacity: .74; background: var(--chiaroscuro-shadow); mask-size: 100% 100%; mask-repeat: no-repeat; transform-origin: 100% 0; animation: chiaroscuro-shadow 7s ease-in-out infinite paused; }
.chiaroscuro-leaves { transform-origin: 100% 0; animation: chiaroscuro-leaves 7s ease-in-out infinite paused; }
.chiaroscuro-art.is-running :is(.chiaroscuro-shadow, .chiaroscuro-leaves) { animation-play-state: running; }
@keyframes chiaroscuro-leaves { 0%, 100% { transform: translateX(var(--olive-overscan, 3%)) rotate(-1.4deg); } 50% { transform: translateX(var(--olive-overscan, 3%)) rotate(4deg); } }
@keyframes chiaroscuro-shadow { 0%, 100% { transform: translate(0, 0) rotate(-1.4deg); } 50% { transform: translate(-16.1px, 5.74px) rotate(4deg); } }
@media (min-width: 761px) and (max-width: 1100px) { .home-hero--chiaroscuro .chiaroscuro-art { width: 75%; } }
@media (max-width: 760px) {
 .home-hero--chiaroscuro { display: block; --hero-header-height: 81px; min-height: calc(100vh - var(--hero-header-height)); min-height: calc(100dvh - var(--hero-header-height)); height: auto; --hero-type-size: 40px; --hero-line-indent: 6px; }
 /* One photographic scene: copy in the wall's negative space, bottle at the right. */
 .home-hero--chiaroscuro .chiaroscuro-art { position: absolute; inset: 0; width: 100%; height: 100%; --olive-overscan: -20%; }
 .home-hero--chiaroscuro .home-hero__visual { position: absolute; inset: 0; width: 100%; height: 100%; mask: none; }
 /* The same 1188/1920 focal point used by the animated world, including fallback. */
 .home-hero--chiaroscuro .home-hero__visual img { position: absolute; top: 0; left: 78%; right: auto; width: auto; max-width: none; height: 100%; transform: translateX(-61.875%); }
 .home-hero--chiaroscuro .home-hero__inner { padding-block: 42px 185px; height: auto; }
 .home-hero--chiaroscuro .home-hero__copy { width: 100%; max-width: none; }
 .home-hero--chiaroscuro h1 { max-width: 260px; margin-bottom: 16px; }
 .home-hero--chiaroscuro .home-hero__description { max-width: 52%; margin-bottom: 22px; }
 .home-hero--chiaroscuro .button.gold-button { min-width: 0; padding-inline: 20px; }
 .home-hero--chiaroscuro .home-hero__shade { display: none; }
}
@media (min-width: 540px) and (max-width: 760px) {
 .home-hero--chiaroscuro .home-hero__inner { padding-block: 60px 210px; }
 .home-hero--chiaroscuro h1 { max-width: 380px; }
 .home-hero--chiaroscuro .home-hero__description { max-width: 48%; font-size: 18px; line-height: 1.5; }
 .home-hero--chiaroscuro { --hero-type-size: 52px; --hero-line-indent: 10px; }
}
@media (max-width: 360px) {
 .home-hero--chiaroscuro { --hero-type-size: 32px; }
 .home-hero--chiaroscuro .home-hero__inner { padding-block: 34px 150px; }
 .home-hero--chiaroscuro .home-hero__visual img { left: 76%; }
 .home-hero--chiaroscuro .button.gold-button { min-width: 0; padding-inline: 12px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
 .home-hero--chiaroscuro .chiaroscuro-world { display: none; }
 .home-hero--chiaroscuro .hero-scene-toggle { display: none; }
}