/* Each mascot introduces their craft; the whole card remains one accessible link. */
.character-card .character-copy{top:8%;height:64%;gap:0}
.character-copy h3{display:inline-flex;align-items:center;gap:8px;padding:6px 15px;border:1px solid #d8c5a260;border-radius:999px;background:#d8c5a214;color:#e3d1b0;font-size:14px;font-weight:750;line-height:1.1;letter-spacing:.14em;text-transform:uppercase}
.character-copy h3::before{content:"";width:6px;height:6px;border-radius:50%;background:#ec6d62}
.character-light .character-copy h3{color:#403426;border-color:#52402c40;background:#fff8e933}
.character-light .character-copy h3::before{background:#1674a4}
.character-copy h4{font-size:clamp(27px,2.55vw,44px);font-weight:800;line-height:1.03;letter-spacing:-.035em;margin-top:16px;text-wrap:initial}
.character-copy p{font-size:clamp(16px,1.16vw,20px);line-height:1.45;margin-top:20px;color:#e3d1b0}
.character-light .character-copy p{color:#4b3b29}
.character-action{display:inline-flex;align-items:center;justify-content:center;gap:20px;min-height:46px;margin-top:24px;padding:10px 20px;border:1px solid #d8c5a2;border-radius:4px;background:#d8c5a2;color:#211f1c;font-size:15px;font-weight:700;line-height:1.25;transition:background .2s}
.character-action span{font-size:20px;line-height:1}
.character-light .character-action{background:#211f1c;border-color:#211f1c;color:#f7eedf}
.character-card:hover .character-action{background:#efddbc}
.character-light:hover .character-action{background:#40372c}
@media(min-width:761px) and (max-width:1100px){
 .character-copy h3{font-size:11px;padding:4px 10px}
 .character-copy h4{font-size:25px;margin-top:10px}
 .character-copy p{font-size:14px;margin-top:12px}
 .character-action{font-size:12px;min-height:36px;margin-top:14px;padding:8px 10px;gap:10px}
}
@media(max-width:760px){
 .character-copy h3{font-size:12px;padding:5px 12px}
 .character-copy h4{font-size:clamp(24px,5.6vw,40px);margin-top:12px}
 .character-copy p{font-size:clamp(14px,3vw,18px);margin-top:13px}
 .character-action{font-size:clamp(12px,2.7vw,15px);min-height:38px;margin-top:16px;padding:8px 12px;gap:10px}
}
@media(max-width:450px){
 .character-card{aspect-ratio:1.25}
 .character-backdrop{object-position:39% center}
 .character-card .character-copy{left:52%;right:2%;top:5%;height:76%}
 .character-copy h3{font-size:10px;padding:4px 9px}
 .character-copy h3::before{width:5px;height:5px}
 .character-copy h4{font-size:24px;margin-top:10px}
 .character-copy p{font-size:13px;margin-top:12px}
 .character-action{font-size:11px;min-height:35px;margin-top:14px;padding:8px 9px;gap:7px}
 .character-action span{font-size:17px}
}
@media(max-width:350px){
 .character-copy h4{font-size:21px}
 .character-copy p{font-size:12px;margin-top:9px}
 .character-action{font-size:10px;gap:5px;margin-top:11px;padding-inline:6px}
}
@media(max-width:350px){
 .character-card .character-copy{top:4%;height:84%}
 .character-copy h4{font-size:18px;margin-top:8px}
 .character-copy p{margin-top:8px}
 .character-action{margin-top:9px;padding-block:6px}
}

/* Keep two balanced phrase lines at every card size. */
.character-card{container-type:inline-size}
.character-copy h4{font-size:clamp(14px,4.8cqw,42px);line-height:1.12}
.character-copy p{font-size:clamp(12px,2.5cqw,20px)}
.character-copy h4>span,.character-copy p>span{display:block;white-space:nowrap}