#characters{width:min(1100px,96vw);max-height:92dvh;overflow:auto;padding:22px}
#characters .dialog-heading{position:sticky;top:-22px;z-index:2;background:#243a30;padding:12px 0;border-bottom:1px solid #bfa46c44}
#character-cards{margin-top:18px;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.character-card{min-width:0;padding:10px 10px 16px}
button.character-inspect{position:relative;display:block;width:100%;height:320px;min-height:0;padding:0;overflow:hidden;border:1px solid #cdb78966;border-radius:7px;background:radial-gradient(ellipse at 45% 35%,#f4eade,#d7c5ac 80%);box-shadow:none;cursor:zoom-in}
button.character-inspect:hover{filter:none;border-color:#f4d493;background:radial-gradient(ellipse at 45% 35%,#fff2e4,#d7c5ac 80%)}
button.character-inspect:focus-visible{outline:3px solid #ffe1a5;outline-offset:3px}
.character-inspect img{display:block;width:100%;height:100%;object-fit:contain;padding:6px 5px 25px;box-sizing:border-box;transition:transform .2s ease}
.character-inspect:hover img{transform:scale(1.025)}
.character-inspect-hint{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);font:11px system-ui;color:#614729;background:#eee0cacc;border-radius:12px;padding:4px 10px;white-space:nowrap}
#character-detail{width:min(850px,94vw);max-height:94dvh;overflow:auto;padding:18px;background:#e4d7c2;color:#423526;border-color:#b18a52}
#character-detail .dialog-heading{position:sticky;top:-18px;z-index:1;background:#e4d7c2;padding:10px 0}
#character-detail h2{margin:0;color:#5c3e21}
#character-detail-image{display:block;width:100%;height:min(69dvh,800px);object-fit:contain;background:radial-gradient(ellipse,#f4eadd,#d8c8b1);border-radius:8px}
#character-detail-copy{font:14px/1.5 system-ui;text-align:center;margin:12px 0 3px}
@media(max-width:700px){#characters{padding:12px;width:96vw}#characters .dialog-heading{top:-12px}#character-cards{gap:9px;grid-template-columns:repeat(2,minmax(0,1fr))}button.character-inspect{height:245px}.character-card h3{font-size:18px}.character-card p{font-size:11px}#character-detail{padding:12px}#character-detail .dialog-heading{top:-12px}#character-detail-image{height:70dvh}}
@media(max-width:400px){button.character-inspect{height:215px}.character-card{padding:6px 6px 12px}.character-card h3{font-size:17px}}
@media(prefers-reduced-motion:reduce){.character-inspect img{transition:none}.character-inspect:hover img{transform:none}}

/* A shared foot line makes height differences visible instead of normalizing every figure. */
.character-inspect img{position:absolute;left:0;bottom:27px;width:100%;height:calc((100% - 36px)*var(--hearth-stature,1));padding:0 6px;object-position:center bottom;transform-origin:center bottom}