/* Keep the seated figures AND the foreground board inside the artwork. */
.hero-scenes .hero-image[data-hero-style]{object-position:75% 50%}
.hero-scenes .hero-image>img{inset:0;width:100%;height:100%;object-fit:cover;object-position:inherit}
@media(min-width:1101px){
 .hero{width:100%;min-width:0;height:100svh;aspect-ratio:auto;min-height:0;max-height:none}
 /* Keep the artwork's scale and top edge; the viewport crops only its foot. */
 .hero-scenes{inset:0 0 auto;width:100%;height:auto;aspect-ratio:25/16;min-height:780px}
 .hero-shade{background:linear-gradient(90deg,#071f1dd9 0%,#102b2673 26%,#122a2018 48%,transparent 65%),linear-gradient(0deg,#0b201e66,transparent 13%,transparent 85%,#0a231f66)}
 .hero .scene-caption{bottom:68px;right:2%;font-size:10px}
 .hero .caption-line{display:none}
}
@media(max-width:1100px){
 .hero{height:auto;min-height:0;max-height:none;display:flex;flex-direction:column;background:#102b26}
 .hero-scenes{position:relative;inset:auto;width:100%;height:calc(var(--hero-art-top,113px) + 66.6667vw);flex:none}
 .hero-shade{inset:0 0 auto;height:calc(var(--hero-art-top,113px) + 66.6667vw);background:linear-gradient(180deg,transparent 88%,#102b26)}
 .hero-scenes>.hero-image[data-hero-style]{top:var(--hero-art-top,113px);bottom:0;height:calc(100% - var(--hero-art-top,113px));object-position:75% 50%}
 .hero-content{position:relative;inset:auto;width:auto;margin:0;padding:16px 6% 24px;text-shadow:none}
 .hero h1{font-size:46px;line-height:1.3;margin:14px 0}.hero-actions{margin-top:22px}
 .scene-caption{position:relative;inset:auto;padding:0 6% 20px;text-align:left}.caption-line{display:none}
}
/* One shallow row at the foot of the hero. All ten titles remain available. */
.hero .hero-bottom{position:absolute;inset:auto 0 0;display:flex;align-items:center;flex-wrap:nowrap;gap:8px;width:100%;height:52px;margin:0;padding:0 12px;background:#0b241eed;border-top:1px solid #e0cc9638}
.hero .hero-bottom .hero-scroll{display:none}
.hero .hero-bottom .hero-pause{width:28px;height:28px;flex:0 0 28px;margin:0;font-size:11px}
.hero .scene-gallery{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));width:auto;min-width:0;flex:1;gap:0;border:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#bfa16b #0b241e}
.hero .scene-gallery button{display:flex;align-items:center;justify-content:center;gap:5px;min-width:0;height:42px;min-height:42px;padding:0 5px;border:0;border-radius:0;background:none;white-space:nowrap;text-align:center;color:#d8ddce}
.hero .scene-gallery button>span{font:500 10px var(--sans);margin:0;color:#bfa778}
.hero .scene-gallery button b{display:block;overflow:hidden;text-overflow:ellipsis;font:400 11px/1.3 var(--sans);letter-spacing:-.3px}
.hero .scene-gallery button small{display:none}
.hero .scene-gallery button:before{top:auto;bottom:0;height:2px;background:#dec085}
.hero .scene-gallery button[aria-pressed=true]{color:#fff2cf;background:#d8b67912;outline:0}
@media(min-width:1101px) and (max-width:1400px){.hero .scene-gallery button{gap:3px;padding:0 3px}.hero .scene-gallery button b{font-size:clamp(9px,.84vw,10px);letter-spacing:-.4px}}
@media(max-width:1100px){.hero .scene-gallery{grid-template-columns:repeat(10,minmax(132px,1fr))}}
@media(max-width:1100px){.hero .hero-bottom{position:relative;inset:auto;flex:none;height:52px;padding:0 8px}.hero .scene-gallery button{height:40px;min-height:40px}}
@media(max-width:720px){.hero h1{font-size:clamp(32px,8vw,43px)}.hero-content{padding-top:10px}.hero .scene-gallery{grid-template-columns:repeat(10,138px)}}