.character-grid{display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;}
.character-card{min-height: 210px; display: grid; grid-template-columns: 92px 1fr; gap: 20px; align-items: center; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: radial-gradient(circle at 15% 20%, rgba(126,190,85,.13), transparent 31%), var(--surface); transition: transform .22s, border-color .22s, background .22s;}
.character-card:hover, .character-card:focus-visible{transform: translateY(-4px); border-color: rgba(126,190,85,.58); background-color: #181b19;}
.character-card[hidden]{display: none;}
.character-monogram{width: 86px; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid #294330; border-radius: 50%; background: #102218; color: var(--gold-soft); font: 30px Georgia, serif; box-shadow: none;}
.character-monogram.small{width: 48px; aspect-ratio: 1; border-radius: 50%; font-size: 15px;}
.character-photo{background-image: linear-gradient(180deg, transparent 68%, rgba(5,6,6,.28)), var(--portrait-image, linear-gradient(145deg, #23553d, #0a1710)); background-size: 100% 100%, var(--portrait-size, cover); background-position: center, var(--portrait-x, center) var(--portrait-y, center); background-repeat: no-repeat;}
.character-monogram.character-photo{box-shadow: inset 0 0 22px rgba(0,0,0,.24);}
.character-group{color: var(--gold-soft); font-size: 9px; letter-spacing: .12em; text-transform: uppercase;}
.character-card h2{margin: 11px 0 5px; font: 25px/1.1 Georgia, serif;}
.character-card p{margin: 0 0 22px; color: var(--muted); font-size: 12px;}
.home-characters .character-card{min-height: 185px;}
.home-characters .character-card:nth-child(n+4){opacity: .9;}
.character-portrait.character-photo{background-image: linear-gradient(180deg, transparent 55%, rgba(5,6,6,.52)), var(--portrait-image, linear-gradient(145deg, #23553d, #0a1710)); background-size: 100% 100%, var(--portrait-size, cover); background-position: center, var(--portrait-x, center) var(--portrait-y, center); box-shadow: inset 0 0 70px rgba(0,0,0,.18), 0 28px 72px rgba(0,0,0,.42);}
@media (max-width: 980px){.character-grid{grid-template-columns: repeat(2, 1fr);}}
@media (max-width: 680px){.character-grid{grid-template-columns: 1fr;}
.character-card{min-height: 175px; grid-template-columns: 72px 1fr; padding: 16px;}
.character-monogram{width: 68px;}}
.search-result-card .search-result-portrait .character-monogram,.search-result-card .search-result-portrait .character-photo-image{width:78px;height:auto;aspect-ratio:1;border-radius:50%}
.character-photo-image{width:86px;height:116px;object-fit:cover;object-position:center;border-radius:999px 999px 22px 22px;border:1px solid #294330}
.character-portrait .character-photo-image{width:100%;height:100%;border-radius:inherit}
.character-monogram.small,.character-photo-image.small{width:48px;height:56px}
@media(max-width:760px){.search-result-card .search-result-portrait .character-monogram,.search-result-card .search-result-portrait .character-photo-image{width:58px}}