.characters-page{--text:#dee3ea;--muted:#ddc1b3;--gold:#e9c349;--peach:#ffb68d;background:#0a0f14;color:var(--text)}
.characters-page main{width:min(1280px,100%);margin:auto;background:#0f1419}
.characters-page .ch-hero{padding:120px 48px 64px;text-align:center;background:linear-gradient(115deg,#151a1f,#0f1419)}
.characters-page .ch-kicker{display:flex;align-items:center;justify-content:center;gap:16px;color:var(--gold);font:14px/20px "Libre Caslon Text",serif;letter-spacing:2.8px;text-transform:uppercase}
.characters-page .ch-kicker i{width:48px;height:1px;background:var(--gold);flex-shrink:0}
.characters-page .ch-hero h1{position:static;width:auto;margin:24px auto;max-width:1000px;font:700 64px/1.125 "Libre Caslon Text",serif;letter-spacing:-1.2px}
.characters-page .ch-hero p{max-width:1080px;margin:0 auto;color:var(--muted);font-size:18px;line-height:1.625}
.characters-page .filters{margin:0 80px;padding:0 16px;display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid #e9c3491a;border-radius:12px;background:#0c1217;box-shadow:0 12px 24px #0003}
.characters-page .filters button{position:relative;min-height:64px;padding:12px 4px;border:0;background:transparent;color:var(--muted);font:700 14px/1.5 "Libre Caslon Text",serif;cursor:pointer}
.characters-page .filters button.selected{color:var(--peach)}
.characters-page .filters button.selected:after{content:"";position:absolute;bottom:7px;left:calc(50% - 3px);width:6px;height:6px;background:var(--gold);border-radius:50%;box-shadow:0 0 8px var(--gold)}
.characters-page :is(button,a):focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.characters-page .principal{padding:112px 80px 0}
.characters-page .principal-heading{display:flex;align-items:center;gap:24px}
.characters-page .principal-heading h2{margin:0;font:700 48px/1.17 "Libre Caslon Text",serif}
.characters-page .principal-heading i{height:1px;flex:1;background:linear-gradient(90deg,#e9c34940,transparent)}
.characters-page .trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:64px}
.characters-page .portrait{position:relative;display:block;min-height:600px;overflow:hidden;border-radius:8px;background:#151b20;text-decoration:none}
.characters-page .portrait-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:none;opacity:1;transition:transform .4s ease}
.characters-page .portrait:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#0f1419 0%,#0f1419cc 25%,transparent 75%);pointer-events:none}
.characters-page .portrait-content{position:absolute;z-index:1;inset:auto 32px 32px}
.characters-page .portrait small{display:block;margin-bottom:12px;color:var(--gold);font:14px/1.5 "Libre Caslon Text",serif;letter-spacing:1.4px;text-transform:uppercase;opacity:0;transition:opacity .25s}
.characters-page .portrait h3{margin:0;color:var(--peach);font:700 32px/1.25 "Libre Caslon Text",serif}
.characters-page .portrait-details{max-height:0;overflow:hidden;opacity:0;transition:max-height .3s ease,opacity .25s ease}
.characters-page .portrait-details p{margin:16px 0 24px;color:var(--muted);font-size:16px;line-height:1.5}
.characters-page .portrait-details span{display:flex;align-items:center;gap:12px;color:var(--gold);font:14px/1.5 "Libre Caslon Text",serif;letter-spacing:1px;text-transform:uppercase}
.characters-page .portrait-details img{width:16px;height:16px}
.characters-page .portrait:is(:hover,:focus-visible) .portrait-details{max-height:300px;opacity:1}
.characters-page .portrait:is(:hover,:focus-visible) small{opacity:1}
.characters-page .portrait:is(:hover,:focus-visible) .portrait-image{transform:scale(1.035)}
.characters-page [hidden]{display:none!important}
.characters-page .character-empty{grid-column:1/-1;padding:40px;border:1px solid #e9c34933;border-radius:8px;color:var(--muted);text-align:center}
.characters-page .dossier{display:grid;grid-template-columns:4fr 7fr;gap:8.33%;padding:96px 80px;background:linear-gradient(115deg,#151a1f,#0f1419)}
.characters-page .dossier-title h2{margin:0;font-size:48px;line-height:1.17;font-weight:400}
.characters-page .book-icon{display:grid;place-items:center;width:96px;height:96px;border:1px solid #e9c34933;border-radius:12px;margin-top:40px}
.characters-page .book-icon img{width:48px;height:48px}
.characters-page .dossier-list{display:grid;gap:48px;padding:48px;background:#0f141999;border-radius:16px}
.characters-page .dossier-list article{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr);gap:16px}
.characters-page .dossier-list article:before{content:"";position:absolute;left:-24px;top:11px;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.characters-page .dossier-list article:not(:last-child):after{content:"";position:absolute;left:-22px;top:20px;bottom:-39px;width:1px;background:#e9c34926}
.characters-page .dossier-list article>img{width:24px;height:24px;margin-top:4px}
.characters-page .dossier-list h3{margin:0 0 8px;color:var(--peach);font-size:24px;line-height:1.33;font-weight:400}
.characters-page .dossier-list p{margin:0;color:var(--muted);font-size:16px;line-height:1.5}
@media(max-width:1100px){
.characters-page .filters{margin-inline:32px;flex-wrap:wrap;justify-content:center}
.characters-page .filters button{min-height:52px}
.characters-page .principal{padding:80px 32px 0}
.characters-page .trio{gap:20px}
.characters-page .portrait{min-height:520px}
.characters-page .portrait-content{inset:auto 20px 28px}
.characters-page .portrait h3{font-size:28px}
.characters-page .dossier{padding:72px 32px;gap:40px}
.characters-page .dossier-title h2{font-size:40px}
}
@media(max-width:767px){
.characters-page .ch-hero{padding:64px 20px 40px}
.characters-page .ch-kicker{font-size:11px;letter-spacing:1.5px;gap:10px}
.characters-page .ch-kicker i{width:20px}
.characters-page .ch-hero h1{font-size:clamp(32px,6.5vw,48px);letter-spacing:-.5px}
.characters-page .ch-hero h1 br{display:none}
.characters-page .ch-hero p{font-size:16px}
.characters-page .filters{margin-inline:20px;gap:4px 16px}
.characters-page .filters button{font-size:12px}
.characters-page .principal{padding:64px 20px 0}
.characters-page .principal-heading h2{font-size:32px}
.characters-page .trio{grid-template-columns:1fr;margin-top:32px;gap:24px}
.characters-page .portrait{min-height:580px}
.characters-page .portrait-content{inset:auto 28px 28px}
.characters-page .portrait h3{font-size:32px}
.characters-page .portrait-details{max-height:none;opacity:1}
.characters-page .portrait small{opacity:1}
.characters-page .dossier{grid-template-columns:1fr;padding:64px 20px;gap:32px}
.characters-page .dossier-title{display:flex;align-items:center;gap:24px}
.characters-page .dossier-title h2{font-size:32px;flex:1}
.characters-page .book-icon{width:72px;height:72px;margin:0;flex-shrink:0}
.characters-page .dossier-list{padding:32px 24px 32px 40px;gap:36px}
.characters-page .dossier-list h3{font-size:22px}
.characters-page .dossier-list article:not(:last-child):after{bottom:-27px}
}
@media(hover:none){.characters-page .portrait-details{max-height:none;opacity:1}.characters-page .portrait small{opacity:1}}
@media(prefers-reduced-motion:reduce){.characters-page .portrait *{transition:none}}
/* Keep portrait media cropped and nested copy in normal flow despite legacy shell rules. */
.characters-page .portrait .portrait-image{object-fit:cover!important}
.characters-page .portrait .portrait-content small{position:static;left:auto;right:auto;bottom:auto}
.characters-page .portrait .portrait-details span{position:static;left:auto;bottom:auto}