/* Keep the photography at gallery scale, with no photo stretched behind it. */
#hero{position:fixed;inset:0;background:radial-gradient(ellipse at 78% 24%,#35233e55,transparent 54%),radial-gradient(ellipse at 20% 82%,#21344844,transparent 50%),#0b0911}
#hero .hs-float{background:#17121de8;border:1px solid #d8b5ea22}
#hero .hs-cap{margin:0;padding:10px 9px;font-size:13px;line-height:1.45;background:#17121d}
body[data-section="hero"] #heroFocusBackdrop{background:#08060dd9!important;backdrop-filter:blur(7px)}
body[data-section="hero"] #heroFocus{width:max-content;max-width:calc(100vw - var(--rail-w) - 56px);top:50%;transform:translate(-50%,-50%) scale(.94)}
body[data-section="hero"] #heroFocus.show{transform:translate(-50%,-50%) scale(1)}
body[data-section="hero"] #heroFocus .frame{padding:14px;background:#15111b;border:1px solid #d8b5ea33;border-radius:16px;max-height:none;box-shadow:0 24px 90px #0009}
body[data-section="hero"] #heroFocus img{width:auto;height:auto;max-width:min(58vw,720px);max-height:min(62vh,720px);margin:auto;object-fit:contain;border-radius:5px}
body[data-section="hero"] #heroFocus .hs-cap{margin:0;padding:13px 4px 1px;line-height:1.5;font-size:13px}
body[data-section="hero"] #heroFocus .hs-cap:empty{display:none}
html[lang="it"] #heroTitle{max-width:12ch;line-height:1.18;overflow-wrap:normal;word-break:normal}
@media(max-width:800px){
 body[data-section="hero"] #heroFocus{max-width:calc(100vw - var(--rail-w) - 40px - var(--phone-right,0px))}
 body[data-section="hero"] #heroFocus .frame{padding:9px;border-radius:12px}
 body[data-section="hero"] #heroFocus img{max-width:calc(100vw - var(--rail-w) - 60px - var(--phone-right,0px));max-height:min(58vh,560px);width:auto;height:auto}
 html[lang="it"] #heroTitle{font-size:clamp(17px,4.5vw,28px)!important;width:12ch;max-width:calc(100vw - var(--rail-w) - 40px)!important;top:calc(var(--phone-top,0px) + 25px)!important}
 html[lang="it"] #heroCollectionToggle{top:calc(var(--phone-top,0px) + 105px);max-width:calc(100vw - var(--rail-w) - 40px)}
 html[lang="it"] #heroCluster{top:calc(var(--phone-top,0px) + 163px)}
 html[lang="it"] .hero-collection{top:calc(var(--phone-top,0px) + 163px)}
}
@media(max-height:500px) and (orientation:landscape){
 body[data-section="hero"] #heroFocus{top:55%}
 body[data-section="hero"] #heroFocus img{max-height:calc(100dvh - 150px)}
}