/* Character bios. Picking a medallion sets html[data-aura]; colors flow via --aura. */
.bio-tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(.8rem, 2.5vw, 2rem);
	margin: 0 auto var(--wp--preset--spacing--40);
}
.bio-tab {
	--kin: var(--gold);
	display: grid;
	justify-items: center;
	gap: .55rem;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--ash);
	font-family: var(--wp--preset--font-family--display);
	font-size: .82rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	transition: color .4s ease;
}
.bio-tab[data-aura="inanna"]   { --kin: #ff5a36; }
.bio-tab[data-aura="veyra"]    { --kin: #8fd3ff; }
.bio-tab[data-aura="elara"]    { --kin: #c07bff; }
.bio-tab[data-aura="thorvald"] { --kin: #e3a548; }
.bio-tab[data-aura="mara"]     { --kin: #f6e2b0; }

.bio-tab__medallion {
	position: relative;
	display: grid;
	place-items: center;
	width: clamp(64px, 9vw, 88px);
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--kin) 35%, var(--maroon)), var(--maroon-deep));
	border: 3px solid var(--copper);
	box-shadow: 0 0 0 4px rgba(11, 7, 9, .9), 0 0 0 5px rgba(171, 112, 53, .5), 0 8px 18px rgba(0, 0, 0, .6);
	color: var(--gold);
	font-size: 1.8rem;
	transition: box-shadow .5s ease, border-color .5s ease, transform .5s var(--ease-out), filter .5s ease;
	filter: saturate(.55) brightness(.8);
}
.bio-tab__medallion img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.bio-tab:hover .bio-tab__medallion { transform: translateY(-3px); filter: none; }
.bio-tab:hover, .bio-tab[aria-selected="true"] { color: color-mix(in srgb, var(--gold-light) 50%, var(--kin)); }
.bio-tab[aria-selected="true"] .bio-tab__medallion {
	filter: none;
	border-color: var(--kin);
	box-shadow: 0 0 0 4px rgba(11, 7, 9, .9), 0 0 0 5px var(--kin), 0 0 26px 6px color-mix(in srgb, var(--kin) 55%, transparent);
}

/* Panels stack in one grid cell, crossfade */
.bio-stage { display: grid; position: relative; }
.bio-stage > .bio-panel { grid-area: 1 / 1; }
.js .bio-panel {
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity .8s ease, transform .8s var(--ease-out), visibility 0s linear .8s;
}
.js .bio-panel.is-active {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity .8s ease .15s, transform .8s var(--ease-out) .15s, visibility 0s;
}

/* Panel frame: plaque with aura corners */
.bio-panel.is-style-plaque {
	border-color: color-mix(in srgb, var(--copper) 55%, var(--aura));
	background:
		radial-gradient(ellipse at 20% 100%, color-mix(in srgb, var(--aura-deep) 80%, transparent), transparent 60%),
		url("../img/wood-grain.svg") center / 520px auto,
		linear-gradient(160deg, rgba(40, 10, 10, .95), rgba(16, 7, 9, .97));
	box-shadow: 0 0 0 1px rgba(0,0,0,.7), 0 0 0 5px rgba(122,74,34,.35), 0 24px 60px rgba(0,0,0,.7), 0 0 50px color-mix(in srgb, var(--aura) 18%, transparent);
}
.bio-panel .wp-block-columns { gap: var(--wp--preset--spacing--40) !important; align-items: center !important; }

.bio-portrait { position: relative; }
.bio-portrait::before {
	content: "";
	position: absolute;
	inset: -14px;
	border-radius: 18px;
	border: 2px dashed color-mix(in srgb, var(--aura) 70%, transparent);
	opacity: .55;
	pointer-events: none;
	mask-image: linear-gradient(135deg, #000 0 18%, transparent 30% 70%, #000 82%);
	transition: border-color 1.4s ease;
}
.bio-portrait img, .bio-portrait .art-pending {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: 50% 15%;
	border-radius: 12px;
	border: 3px solid color-mix(in srgb, var(--copper) 60%, var(--aura));
	box-shadow: 0 18px 40px rgba(0, 0, 0, .65), 0 0 36px color-mix(in srgb, var(--aura) 30%, transparent);
	transition: border-color 1.4s ease, box-shadow 1.4s ease;
}

.bio-panel__epithet {
	font-family: var(--wp--preset--font-family--display);
	letter-spacing: .35em;
	text-transform: uppercase;
	font-size: .8rem;
	color: var(--aura);
	margin-bottom: .2rem !important;
}
.bio-panel h3.wp-block-heading {
	font-size: var(--wp--preset--font-size--xx-large);
	margin: 0;
	color: color-mix(in srgb, var(--gold-light) 60%, var(--aura));
	text-shadow: 0 0 24px color-mix(in srgb, var(--aura) 55%, transparent), 0 2px 0 #000;
}
.bio-panel .wp-block-quote { border-left-color: var(--aura); transition: border-color 1.4s ease; }

.bio-facts {
	list-style: none;
	padding: 0;
	margin: 1.4rem 0 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: .6rem;
}
.bio-facts li {
	padding: .55rem .8rem;
	border: 1px solid color-mix(in srgb, var(--copper) 55%, var(--aura));
	border-radius: 10px;
	background: rgba(11, 7, 9, .55);
	font-size: .95rem;
	line-height: 1.35;
}
.bio-facts strong {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: .68rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--copper);
}

/* Per-character accent on the portrait ring */
html[data-aura="veyra"] .bio-portrait::before { border-style: solid; border-width: 1px; inset: -10px; }
html[data-aura="elara"] .bio-portrait::before { border-style: dotted; border-width: 3px; }
html[data-aura="thorvald"] .bio-portrait::before { border-style: double; border-width: 4px; }
html[data-aura="mara"] .bio-portrait::before { border-color: var(--aura-2); box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--aura-3) 60%, transparent); }

@media (prefers-reduced-motion: reduce) {
	.js .bio-panel, .js .bio-panel.is-active { transition: opacity .2s linear; transform: none; }
}

.bio-stage { width: min(1100px, 100%); margin-inline: auto; }
.bio-stage > .bio-panel { width: 100%; max-width: none !important; margin: 0 !important; }
.bio-stage > .bio-panel { box-sizing: border-box; }
@media (max-width: 781px) {
	.bio-portrait { max-width: 260px; margin-inline: auto; }
	.bio-tabs { gap: .6rem; }
	.bio-tab__medallion { width: 58px; font-size: 1.4rem; }
	.bio-tab { font-size: .68rem; letter-spacing: .08em; }
	.bio-panel.is-style-plaque { padding: 1.4rem !important; }
}