/* Full-width illustrated scenes with readable HTML copy over the quiet area. */
.characters.shell{width:min(1760px,calc(100% - 64px));max-width:none;padding-block:54px 72px}
.characters h2{margin-bottom:36px}
.character-grid{gap:24px}
.character-card{display:block;min-height:0;aspect-ratio:3/2;isolation:isolate;border-radius:8px}
.character-backdrop{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1}
.character-card .character-copy{position:absolute;left:53%;right:3%;top:10%;height:60%;padding:0;display:flex;flex-direction:column;justify-content:center;align-items:center}
.character-copy h3{font-size:clamp(32px,2.7vw,46px);line-height:1.08}
.character-copy h4{font-size:clamp(18px,1.65vw,28px);line-height:1.2;margin-top:9px;max-width:100%;text-wrap:balance}
.character-copy p{font-size:clamp(14px,1.08vw,18px);line-height:1.55;margin-top:24px}
.character-card:hover{border-color:var(--sand)}
.character-light:hover{border-color:#a18b65}
.character-card:focus-visible{outline:3px solid var(--sand);outline-offset:5px}
@media(max-width:1100px) and (min-width:761px){
 .character-grid{gap:18px}
 .character-copy h3{font-size:30px}
 .character-copy h4{font-size:18px}
 .character-copy p{font-size:13px;margin-top:16px}
}
@media(max-width:760px){
 .characters.shell{width:calc(100% - 32px);padding-block:36px 48px}
 .characters h2{margin-bottom:26px}
 .character-grid{grid-template-columns:1fr;gap:20px}
 .character-copy h3{font-size:clamp(28px,5.8vw,40px)}
 .character-copy h4{font-size:clamp(16px,3.2vw,24px);margin-top:7px}
 .character-copy p{font-size:clamp(13px,2.6vw,17px);margin-top:16px;line-height:1.5}
}
@media(max-width:390px){
 .character-card{aspect-ratio:1.35}
 .character-backdrop{object-position:42% center}
 .character-card .character-copy{left:52%;right:2%;top:7%;height:68%}
 .character-copy h3{font-size:27px}
 .character-copy h4{font-size:16px}
 .character-copy p{font-size:12px;margin-top:12px}
}