.portrait img{width:100%;height:100%;object-fit:cover;object-position:center 36%;filter:saturate(.92) contrast(1.04)}
.portrait-shade{position:absolute;inset:0;background:linear-gradient(90deg,#100b22d9 0,#100b2266 42%,transparent 70%),linear-gradient(0deg,#100b22cc,transparent 52%)}
.portrait p{z-index:2;color:#fff;text-shadow:0 2px 14px #000}
.character-shelf{padding:110px 6vw;background:#120e22}
.shelf-head{display:grid;grid-template-columns:1.1fr .9fr;gap:10vw;align-items:end;margin-bottom:46px}
.shelf-head>div>p{color:var(--violet2);font:800 11px/1.5 ui-monospace,monospace;letter-spacing:.17em}
.shelf-head h2{margin:15px 0 0;font-size:clamp(40px,4.7vw,72px);line-height:1.07;letter-spacing:-.055em}
.shelf-head>p{margin:0;color:var(--muted);line-height:1.8}
.character-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.character-card{overflow:hidden;border:1px solid #3b3159;border-radius:18px;background:#171229;transition:.3s}
.character-card:hover{transform:translateY(-7px);border-color:#7759df;box-shadow:0 24px 60px #0006}
.character-photo{position:relative;aspect-ratio:4/5;overflow:hidden;background:#21173b}
.character-photo:after{position:absolute;inset:45% 0 0;content:"";background:linear-gradient(transparent,#171229)}
.character-photo img{width:100%;height:100%;object-fit:cover;transition:.5s}
.character-card:hover .character-photo img{transform:scale(1.035)}
.character-photo>span{position:absolute;z-index:1;top:16px;left:16px;padding:8px 10px;border:1px solid #ffffff44;border-radius:99px;background:#100b20aa;color:white;font:800 9px ui-monospace,monospace;letter-spacing:.09em}
.character-info{padding:5px 22px 24px}
.character-info>p:first-child{margin:0 0 9px;color:var(--violet2);font:800 9px ui-monospace,monospace;letter-spacing:.12em}
.character-info h3{margin:0;font-size:28px}
.character-info h3 small{color:#7f7794;font-size:15px}
.character-info>p:nth-of-type(2){min-height:50px;color:var(--muted);font-size:13px;line-height:1.7}
.character-info>div{display:flex;flex-wrap:wrap;gap:7px}
.character-info>div span{padding:6px 9px;border:1px solid #3d3457;border-radius:99px;color:#aaa2bd;font-size:10px}
@media(max-width:900px){.shelf-head{grid-template-columns:1fr;gap:22px}.character-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.character-shelf{padding:80px 20px}.character-grid{grid-template-columns:1fr}}