/* Keep equipment dimensions tied to the card, not the viewport. */
.hero-art #page-hero .character-main{container-type:inline-size}
.hero-art #page-hero .hero-overview{grid-template-columns:minmax(0,1fr) 246px;gap:20px;align-items:start;margin:20px 0 0}
.hero-art #page-hero .hero-doll-wrap{width:100%;max-width:390px;margin:0 auto}
.hero-art #page-hero .paperdoll{width:100%;max-width:none;margin:0;grid-template-columns:58px minmax(0,1fr) 58px;gap:10px;min-height:0}
.hero-art #page-hero .hero-stage{height:300px;min-height:300px;border:2px solid #a88951;box-shadow:0 0 0 2px #49351d,0 3px 8px #37251955}
.hero-art #page-hero .hero-painting{object-position:50% 16%}
.hero-art #page-hero .hero-stage strong{font:bold 21px Georgia;padding:26px 6px 14px}
.hero-art #page-hero .slot-column{gap:18px}
.hero-art #page-hero .gear-slot{width:58px;height:90px;min-height:90px;padding:6px 3px 22px;gap:5px;box-shadow:0 0 0 1px #604926,inset 0 0 8px #0005}
.hero-art #page-hero .slot-type{font:8px system-ui;letter-spacing:.3px}
.hero-art #page-hero .slot-icon,.hero-art #page-hero .slot-icon>.painted-item{width:46px;height:46px}
.hero-art #page-hero .gear-slot .unequip{font-size:10px;bottom:3px;padding:2px}
.hero-art #page-hero .level-panel{height:59px;margin:14px 0 0;padding:8px 10px}
.hero-art #page-hero .level-panel>div{font-size:12px;flex-wrap:nowrap}
.hero-art #page-hero .level-panel #xp-label{font-size:11px}
.hero-art #page-hero .hero-overview .backpack{width:246px;min-height:373px;padding:14px;border:1px solid #a78957;background:linear-gradient(130deg,#eedbb4,#dec38f);border-radius:6px;box-shadow:inset 0 1px #fff0ce;margin:0}
.hero-art #page-hero .hero-overview .backpack .profile-heading{display:flex;flex-wrap:nowrap;align-items:center;gap:8px}
.hero-art #page-hero .hero-overview .backpack h2{font-size:22px;margin:2px 0 0}
.hero-art #page-hero .hero-overview .backpack .eyebrow{font-size:8px;letter-spacing:1.2px}
.hero-art #page-hero .hero-overview #profile-shop{font-size:10px;white-space:nowrap;padding:5px 7px}
.hero-art #page-hero .hero-overview .bag-tabs{display:flex;gap:4px;margin:13px 0 12px;padding-bottom:10px}
.hero-art #page-hero .hero-overview .bag-tabs button{font-size:10px;padding:7px 4px;flex:1 1 auto}
.hero-art #page-hero .hero-overview .bag-grid{display:grid;grid-template-columns:repeat(3,66px);grid-auto-rows:66px;justify-content:center;gap:8px;width:100%;max-width:none;margin:0}
.hero-art #page-hero .hero-overview .bag-tile,.hero-art #page-hero .hero-overview .bag-empty-slot{width:66px;height:66px;max-height:66px;min-height:0;padding:2px;border-width:1px;aspect-ratio:1}
.hero-art #page-hero .hero-overview .bag-tile>.painted-item{width:100%;height:100%}
.hero-art #page-hero .hero-overview .bag-help{font-size:10px;line-height:1.4;margin:12px 0 0}
.hero-art #page-hero .hero-overview .food-grid{grid-template-columns:minmax(0,1fr)!important;grid-auto-rows:auto;gap:10px;max-height:280px;overflow:auto}
.hero-art #page-hero .hero-overview .food-card{width:100%;padding:12px}
.hero-art #page-hero .hero-overview .food-card small{font-size:11px}
.hero-art #page-hero .profile-section:not(.backpack){margin-top:22px;padding-top:18px}
.hero-art #page-hero .hero-task-sidebar .profile-tasks{margin:0;padding:0}
.hero-art #page-hero .hero-task-sidebar{align-self:start}
@container(max-width:570px){
 .hero-art #page-hero .hero-overview{grid-template-columns:minmax(0,1fr) 216px;gap:14px}
 .hero-art #page-hero .hero-overview .backpack{width:216px;padding:10px;min-height:373px}
 .hero-art #page-hero .hero-overview .bag-grid{grid-template-columns:repeat(3,58px);grid-auto-rows:58px;gap:7px}
 .hero-art #page-hero .hero-overview .bag-tile,.hero-art #page-hero .hero-overview .bag-empty-slot{width:58px;height:58px;max-height:58px}
 .hero-art #page-hero .paperdoll{grid-template-columns:48px minmax(0,1fr) 48px;gap:6px}
 .hero-art #page-hero .gear-slot{width:48px}
 .hero-art #page-hero .slot-icon,.hero-art #page-hero .slot-icon>.painted-item{width:38px;height:38px}
}
@container(max-width:480px){
 .hero-art #page-hero .hero-overview{grid-template-columns:1fr;gap:18px}
 .hero-art #page-hero .hero-doll-wrap{max-width:350px}
 .hero-art #page-hero .hero-overview .backpack{width:100%;min-height:0}
 .hero-art #page-hero .hero-overview .bag-grid{grid-template-columns:repeat(auto-fit,58px);justify-content:start}
 .hero-art #page-hero .hero-overview .food-grid{grid-template-columns:1fr!important}
}