/* Character profiles + index (single-character.php / archive-character.php) */

.th-char, .th-char-index { color: inherit; }

.th-char__head h1, .th-char-index__head h1 {
	margin: .35em 0 .15em;
	font-size: 1.6rem;
	line-height: 1.25;
}
.th-char__series { margin: 0 0 1rem; opacity: .85; }
.th-char__series a { text-decoration: underline; }

.th-char__top {
	display: grid;
	grid-template-columns: minmax(220px, 340px) 1fr;
	gap: 1.25rem;
	align-items: start;
	background: #2a2b31;
	border-radius: 8px;
	padding: 1rem;
	margin-bottom: 1.25rem;
}
.th-char__hero { margin: 0; }
.th-char__hero img {
	width: 100%;
	height: auto;
	max-height: 480px;
	object-fit: cover;
	border-radius: 6px;
	display: block;
}
.th-char__meta { min-width: 0; }
.th-char__stats { list-style: none; margin: 0 0 .75rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; }
.th-char__stats li { font-size: 1rem; }
.th-char__stats strong { font-size: 1.15rem; }
.th-char__attrs { display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; margin: 0 0 .75rem; }
.th-char__attrs dt { opacity: .7; }
.th-char__attrs dd { margin: 0; }
.th-char__aliases { opacity: .8; font-size: .92rem; margin: 0 0 1rem; }
.th-char__ctas { display: flex; flex-wrap: wrap; gap: .6rem; }
.th-char__cta {
	display: inline-block;
	padding: .55rem .9rem;
	border-radius: 6px;
	background: #e0447c;
	color: #fff !important;
	font-weight: 600;
	text-decoration: none;
}
.th-char__cta--alt { background: #4a5568; }
.th-char__cta:hover { filter: brightness(1.1); }

.th-char__bio { max-width: 72ch; margin-bottom: 1.25rem; line-height: 1.65; }
.th-char__bio p { margin: 0 0 .8em; }

.th-char__facts {
	background: #2a2b31;
	border-radius: 8px;
	padding: 1rem 1.25rem;
	margin-bottom: 1.25rem;
}
.th-char__facts h2 { font-size: 1.15rem; margin: 0 0 .5rem; }
.th-char__facts ul { margin: 0; padding-left: 1.2rem; }
.th-char__facts li { margin-bottom: .35rem; }

.th-char__section { margin-bottom: 1.5rem; }
.th-char__section h2 { font-size: 1.2rem; margin: 0 0 .75rem; }
.th-char__more { margin-top: .6rem; }
.th-char__more a { text-decoration: underline; }

/* character cards (related + index grid) */
.th-char__related, .th-char-index__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: .9rem;
}
.th-char-card {
	display: block;
	background: #2a2b31;
	border-radius: 8px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform .12s ease;
}
.th-char-card:hover { transform: translateY(-2px); }
.th-char-card__thumb {
	display: block;
	aspect-ratio: 3 / 4;
	background: #1d1e23;
}
.th-char-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.th-char-card__name { display: block; padding: .5rem .6rem 0; font-weight: 600; font-size: .95rem; }
.th-char-card__series { display: block; padding: 0 .6rem; font-size: .8rem; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.th-char-card__count { display: block; padding: .15rem .6rem .55rem; font-size: .8rem; opacity: .85; }

/* index controls */
.th-char-index__intro { max-width: 78ch; opacity: .9; }
.th-char-index__controls { margin: .9rem 0 1.1rem; display: grid; gap: .6rem; }
.th-char-index__sort { display: flex; gap: .4rem; flex-wrap: wrap; }
.th-char-index__sort a,
.th-char-index__letters a {
	display: inline-block;
	padding: .3rem .65rem;
	border-radius: 5px;
	background: #2a2b31;
	color: inherit;
	text-decoration: none;
	font-size: .9rem;
}
.th-char-index__letters { display: flex; gap: .25rem; flex-wrap: wrap; }
.th-char-index__letters a { padding: .25rem .5rem; font-size: .85rem; }
.th-char-index__sort a.is-active,
.th-char-index__letters a.is-active { background: #e0447c; color: #fff; }

.th-char-index__pagination { margin-top: 1.25rem; }
.th-char-index__pagination .page-numbers {
	display: inline-block;
	padding: .35rem .7rem;
	margin: 0 .15rem .3rem 0;
	background: #2a2b31;
	border-radius: 5px;
	text-decoration: none;
	color: inherit;
}
.th-char-index__pagination .page-numbers.current { background: #e0447c; color: #fff; }

@media (max-width: 640px) {
	.th-char__top { grid-template-columns: 1fr; }
	.th-char__hero img { max-height: 420px; }
	.th-char__related, .th-char-index__grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}