/* Approved reference crops use the original pixels; full expression sheets remain uncropped. */
#characters,.characters-dialog{color-scheme:light;--bg:#f6f3ec;--panel:#fffdf8;--ink:#292f2d;--muted:#656c66;--gold:#896b3b;--line:#d9d3c7;--field-bg:#fffefb;--control-bg:#fffdf8;--hover-bg:#ebe5d8;--primary-bg:#293d36;--primary-ink:#fffdf6;background:var(--bg);color:var(--ink)}
.characters-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;align-items:stretch}
.character-card-wrap{min-width:0}
.character-card{width:100%;height:100%;display:flex;flex-direction:column;text-align:left;padding:0;background:var(--panel);border:1px solid var(--line);border-radius:13px;overflow:hidden;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.character-card:hover{transform:translateY(-3px);border-color:var(--gold);box-shadow:0 14px 30px #203b2d0c}
.character-card:focus-visible{outline:3px solid var(--primary-bg);outline-offset:4px}
.character-card-portrait,.character-detail-portrait,.character-sheet-image{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;background:#eae5dc;overflow:hidden}
.character-card-portrait{width:100%;aspect-ratio:3/4;border-bottom:1px solid var(--line)}
.character-artwork{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.character-card-portrait>.character-artwork,.character-detail-portrait>.character-artwork{position:absolute;inset:0}
.character-card-copy{display:flex;flex:1;flex-direction:column;width:100%;padding:21px 19px 18px;min-width:0}
.character-universe{display:block;font-size:10px;font-weight:600;line-height:1.5;letter-spacing:.11em;color:var(--gold);text-transform:uppercase}
.character-name{display:block;font-family:var(--serif);font-size:27px;font-weight:500;line-height:1.35;letter-spacing:-.02em;margin:8px 0 7px;overflow-wrap:anywhere}
.character-role{display:block;font-size:12px;line-height:1.8;color:var(--muted);min-height:3.6em;overflow-wrap:anywhere}
.character-card-cta{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px;line-height:1.6;color:var(--primary-bg);padding-top:17px;margin-top:auto}
.character-card-cta>span{font-size:17px}
.character-image-message{display:block;text-align:center;font-size:11px;line-height:1.7;color:#646a63;padding:20px;z-index:1}
.character-image-loading>.character-artwork{opacity:0}
.character-image-error{flex-direction:column;gap:4px;padding:14px}
.character-image-error .character-image-message{padding:10px}
.character-image-retry{min-height:42px;font-size:12px;padding:8px 13px}
.character-monogram{display:grid;place-items:center;font:72px/1 var(--serif);color:#7e847a;height:100%;width:100%}
.characters-status{grid-column:1/-1;width:100%;padding:27px;border:1px dashed var(--line);border-radius:10px;color:var(--muted);font-size:14px;margin:0}
.characters-status p{margin:0 0 14px}
.characters-dialog{width:min(1060px,94vw);max-width:94vw;max-height:92dvh;border:1px solid var(--line);border-radius:16px;padding:0;box-shadow:0 30px 100px #0008;overscroll-behavior:contain;scroll-padding-top:83px}
.characters-dialog::backdrop{background:#07130de0;backdrop-filter:blur(6px)}
.character-dialog-header{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 26px;background:var(--bg);border-bottom:1px solid var(--line);z-index:2}
.character-dialog-close{display:grid;place-items:center;min-width:44px;min-height:44px;padding:0;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink);font-size:28px;line-height:1}
.character-dialog-close:hover{border-color:var(--gold);background:var(--hover-bg)}
.character-detail{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:35px;padding:34px}
.character-detail-portrait{aspect-ratio:3/4;border:1px solid var(--line);border-radius:12px;align-self:start}
.character-detail-copy{padding:8px 0;min-width:0}
.character-detail-copy h2{font-family:var(--serif);font-size:clamp(32px,4vw,46px);font-weight:500;letter-spacing:-.04em;line-height:1.25;margin:0 0 13px;overflow-wrap:anywhere}
.character-detail-role{font-size:15px;font-weight:500;color:var(--primary-bg);margin:0 0 22px;line-height:1.8;overflow-wrap:anywhere}
.character-biography{white-space:pre-wrap;overflow-wrap:anywhere;font-size:14px;line-height:2;color:var(--muted)}
.character-card-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:25px}.character-sheet-jump{margin-top:0}
.character-sheet-section{padding:0 34px 34px;scroll-margin-top:90px}
.character-sheet-section h3{font-size:18px;font-weight:500;margin:0 0 18px;padding-top:26px;border-top:1px solid var(--line)}
.character-sheet-image{min-height:200px;max-width:100%;border:1px solid var(--line);border-radius:11px;flex-direction:column}
.character-sheet-image>.character-artwork{width:100%;height:auto;max-width:100%;object-fit:contain}
.characters-modal-open{overflow:hidden}
@media(max-width:1020px){.characters-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.character-card-copy{padding:23px}.character-detail{gap:26px;padding:28px}.character-sheet-section{padding:0 28px 28px}}
@media(max-width:650px){.characters-grid{gap:13px}.character-card-copy{padding:17px 13px 15px}.character-name{font-size:23px}.character-universe{font-size:9px;letter-spacing:.06em}.character-role{font-size:11px}.character-card-cta{font-size:10px;padding-top:13px}.character-card-cta>span{font-size:15px}.characters-dialog{width:96vw;max-width:96vw;max-height:94dvh;border-radius:12px}.character-dialog-header{padding:12px 18px}.character-detail{grid-template-columns:1fr;padding:23px;gap:23px}.character-detail-portrait{width:min(100%,330px);justify-self:center}.character-detail-copy{padding:0}.character-detail-copy h2{font-size:35px}.character-detail-role{font-size:14px;margin-bottom:16px}.character-biography{font-size:13px;line-height:1.95}.character-sheet-section{padding:0 23px 23px}.character-sheet-section h3{font-size:16px}.character-sheet-image{min-height:130px}}
@media(prefers-reduced-motion:reduce){.character-card{transition:none}.character-card:hover{transform:none}}