/*
 * WonderTale House — Story Worlds and Characters (Phase 3C). Markup: wondertale-core worlds.php,
 * characters.php.
 *
 *   .wt-worlds   Story Worlds landing: a moonlit terrace of three Story Doors ("Every World Has a
 *                Story to Tell."), then the featured world seen through a portal window.
 *   .wt-wl       World / series landing: an enchanted Indian storybook dusk (palace skyline, lotus
 *                pond, marigold toran, fireflies) with the covers and characters on a lit stage;
 *                series doors, stories, story friends, the storyteller.
 *   .wt-dir      Character directory: a gallery hall of arches.
 *   .wt-char     Character profile: a large arched portrait, intro, "At a glance", stories,
 *                "Also in these stories", the home-world band.
 *
 * Reuses: sections.css (.wt-friend arch card, .wt-chip, sparkles, section heads), catalogue.css
 * (.wt-bookcard grid, filters, crumbs, .wt-book__* sections, editor panel). All artwork is
 * decorative CSS/SVG (aria-hidden). Motion: transform/opacity only, off for reduced motion.
 */

/* ---------- Shared ---------- */
.wt-main--worlds { display: block; background: var(--wt-ivory); overflow-x: clip; }
.wt-main--worlds:focus { outline: none; }

.wt-editor-bar {
	position: relative;
	z-index: 6;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 20px;
	padding: 10px var(--wt-gutter);
	background: #fff0e8;
	border-bottom: 1.5px dashed rgb(180 71 47 / 0.5);
	font-size: 0.875rem;
	line-height: 1.5;
	color: #7a2f1e;
}
.wt-editor-bar__text { margin: 0; max-width: 90ch; }
.wt-editor-bar__text strong { margin-inline-end: 0.4em; }
.wt-editor-bar__switch { display: inline-flex; margin: 0; padding: 3px; border-radius: var(--wt-radius-pill); background: #fff; box-shadow: inset 0 0 0 1.5px rgb(180 71 47 / 0.35); }
.wt-site .wt-editor-bar__switch a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: var(--wt-radius-pill); font-weight: 800; color: #7a2f1e; text-decoration: none; }
.wt-site .wt-editor-bar__switch a[aria-current] { background: #7a2f1e; color: #fff; }
.wt-site .wt-editor-bar__switch a:focus-visible { outline: var(--wt-focus-ring); outline-offset: 2px; }
.wt-visitor-404 { margin-block: clamp(32px, 5vw, 64px); }

.wt-lotus { width: 1.6em; height: 1em; flex: none; vertical-align: -0.1em; }

/* The original-fiction note: a quiet card with a lotus. */
.wt-wnote {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin: 22px 0 0;
	padding: 14px 18px;
	max-width: 56ch;
	border-radius: 18px;
	border: 1px solid rgb(233 162 59 / 0.45);
	background: linear-gradient(180deg, rgb(255 247 230 / 0.92), rgb(253 236 205 / 0.8));
	font-size: 0.9375rem;
	line-height: 1.55;
	color: #4b3410;
}
.wt-wnote__icon { width: 30px; height: 20px; flex: none; margin-top: 2px; color: var(--wt-gold-700); }
.wt-wnote--on-dark { border-color: rgb(246 201 120 / 0.45); background: rgb(11 36 51 / 0.45); color: rgb(255 247 238 / 0.92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.wt-wnote--on-dark .wt-wnote__icon { color: var(--wt-gold); }

/* Hidden records (editors' full view): dashed outline, gently desaturated, never mistaken for live. */
.wt-bookcard.is-hidden,
.wt-friend.is-hidden,
.wt-door.is-hidden { outline: 2px dashed rgb(180 71 47 / 0.55); outline-offset: 6px; border-radius: 28px; }
.wt-bookcard.is-hidden .wt-bookcard__cover,
.wt-friend.is-hidden .wt-friend__img,
.wt-door.is-hidden .wt-door__arch > * { filter: saturate(0.55) brightness(0.98); }
.wt-friend .wt-chip--hidden { margin-top: 4px; padding: 2px 9px; font-size: 0.6875rem; }

/* Placeholder portrait: a lit arch with a lotus, until approved artwork arrives. */
.wt-portrait-ph {
	position: absolute;
	inset: 12% 14% 14%;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border-radius: 999px 999px 18px 18px;
	border: 1.5px dashed rgb(138 90 16 / 0.45);
	background: radial-gradient(ellipse 70% 55% at 50% 60%, rgb(255 255 255 / 0.85), rgb(255 255 255 / 0.25) 70%);
	color: var(--wt-gold-700);
	text-align: center;
}
.wt-portrait-ph__glyph .wt-lotus { width: 54px; height: 34px; }
.wt-portrait-ph__text { padding-inline: 10px; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.3; }

/* ---------- Story Worlds landing ---------- */
.wt-worlds { --_edge: 64px; background: var(--wt-ivory); }
.wt-worlds__hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: clamp(620px, 58vw, 860px);
	padding: clamp(56px, 7vw, 104px) var(--wt-gutter) calc(var(--_edge) + clamp(260px, 30vw, 420px));
	color: var(--wt-ivory);
	text-align: center;
	background:
		radial-gradient(ellipse 30% 40% at 50% 70%, rgb(246 201 120 / 0.35), transparent 70%),
		radial-gradient(ellipse 60% 50% at 50% 0%, rgb(42 90 110 / 0.55), transparent 70%),
		linear-gradient(180deg, var(--wt-night) 0%, #0f3443 55%, #14373f 100%);
}
.wt-worlds__art { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.wt-worlds__layer--sky { background: url(../img/ornaments/stars.svg) center top / cover no-repeat; opacity: 0.8; }
.wt-worlds__layer--gates { inset: auto 0 calc(var(--_edge) - 24px); height: clamp(320px, 34vw, 520px); background: url(../img/ornaments/world-gates.svg) center bottom / auto 100% no-repeat; }
/* Characters standing in the light of the central door. */
.wt-worlds__doorcast {
	position: absolute;
	left: 50%;
	bottom: 23%;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	width: clamp(84px, 11vw, 160px);
	height: clamp(84px, 11vw, 160px);
	translate: -50% 0;
}
.wt-site .wt-worlds__doorcast-img { width: auto; height: 100%; max-width: 60%; object-fit: contain; object-position: 50% 100%; margin-inline: -9%; filter: drop-shadow(0 6px 10px rgb(90 50 10 / 0.35)); }
.wt-worlds__doorcast--3 .wt-worlds__doorcast-img:nth-child(2) { height: 115%; z-index: 1; }
.wt-worlds__sparkles { position: absolute; inset: 0 0 30%; pointer-events: none; }
.wt-worlds__sparkles .wt-spark { --s: 7px; background: radial-gradient(circle, #fffbe0 0%, rgb(255 226 140 / 0.9) 28%, rgb(233 162 59 / 0) 70%); }
.wt-worlds__intro { position: relative; z-index: 2; max-width: 820px; margin-inline: auto; }
.wt-worlds__eyebrow,
.wt-wl__eyebrow,
.wt-portal__eyebrow {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0 0 var(--wt-space-4);
	font-size: var(--wt-fs-eyebrow);
	font-weight: 800;
	letter-spacing: var(--wt-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--wt-gold);
}
.wt-site .wt-worlds__title,
.wt-site .wt-wl__title {
	margin: 0;
	font-family: var(--wt-font-display);
	font-weight: 600;
	font-size: var(--wt-fs-display);
	line-height: 1.02;
	letter-spacing: -0.02em;
	color: var(--wt-ivory);
	font-variation-settings: "SOFT" 70, "WONK" 0, "opsz" 144;
	text-wrap: balance;
	text-shadow: 0 2px 24px rgb(4 20 28 / 0.45);
}
.wt-worlds__title > span,
.wt-wl__line { display: block; }
.wt-worlds__accent,
.wt-wl__line--accent { color: var(--wt-gold); font-style: italic; font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 144; }
.wt-site .wt-worlds__lead { margin: var(--wt-space-5) auto 0; max-width: 60ch; font-size: var(--wt-fs-lead); line-height: 1.6; color: rgb(255 247 238 / 0.9); text-wrap: pretty; text-shadow: 0 1px 12px rgb(4 20 28 / 0.6); }
.wt-worlds__jump { margin: 28px 0 0; }
.wt-worlds__edge,
.wt-wl__edge,
.wt-char__edge {
	position: absolute;
	inset: auto 0 -1px;
	height: var(--_edge);
	z-index: 3;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 30 C200 2 360 52 560 26 C760 0 900 50 1100 30 C1260 14 1360 38 1440 24 V64 H0Z' fill='%23E9A23B' fill-opacity='.6'/%3E%3Cpath d='M0 36 C200 8 360 58 560 32 C760 6 900 56 1100 36 C1260 20 1360 44 1440 30 V64 H0Z' fill='%23FFF7EE'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
}

.wt-worlds__body {
	position: relative;
	padding: clamp(32px, 4vw, 64px) var(--wt-gutter) var(--wt-section-pad);
	background:
		radial-gradient(ellipse 50% 30% at 50% 0%, rgb(255 236 200 / 0.75), transparent 70%),
		linear-gradient(180deg, #fff7ee 0%, #fdf0df 100%);
}
.wt-worlds__body > * { max-width: var(--wt-content-max); margin-inline: auto; }
.wt-worlds__empty { margin: 0 auto; padding: 40px 24px; border: 1.5px dashed var(--wt-line); border-radius: var(--wt-radius-lg); text-align: center; color: #3b4646; font-size: var(--wt-fs-lead); }

/* Featured world: a portal window into the world beside its story. */
.wt-portal {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	border-radius: 36px;
	background: #fffdf9;
	box-shadow: 0 0 0 1px var(--wt-line), 0 30px 60px -30px rgb(122 74 20 / 0.45), 0 10px 20px -12px rgb(122 74 20 / 0.2);
	scroll-margin-top: calc(var(--wt-header-h, 72px) + 24px);
}
.wt-site .wt-portal:focus { outline: none; }
.wt-portal__window {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: clamp(360px, 40vw, 560px);
	border-radius: 36px 36px 0 0;
	background: var(--wt-night);
}
.wt-portal__copy { position: relative; padding: clamp(28px, 4vw, 56px); text-align: left; }
.wt-portal__eyebrow { justify-content: flex-start; color: var(--wt-gold-700); }
.wt-portal__eyebrow::before { content: "✦"; letter-spacing: 0; }
.wt-site .wt-portal__title { margin: 0; font-family: var(--wt-font-display); font-weight: 600; font-size: var(--wt-fs-h1); line-height: 1.05; color: var(--wt-teal-900); font-variation-settings: "SOFT" 60, "opsz" 120; }
.wt-site .wt-portal__tagline { margin: 10px 0 0; font-family: var(--wt-font-display); font-style: italic; font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.6rem); line-height: 1.3; color: var(--wt-gold-700); font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 96; }
.wt-site .wt-portal__lead { margin: 18px 0 0; max-width: 56ch; font-size: var(--wt-fs-lead); line-height: 1.6; color: #2c3838; }
.wt-portal__group { margin-top: 24px; }
.wt-portal__label { margin: 0 0 10px; font-size: var(--wt-fs-eyebrow); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wt-gold-700); }
.wt-site .wt-portal__series { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.wt-portal__serie { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; padding: 10px 14px; border-radius: 14px; background: #fff7ee; box-shadow: inset 0 0 0 1px var(--wt-line); }
.wt-portal__serie > a,
.wt-portal__serie > span:first-child { font-family: var(--wt-font-display); font-weight: 600; font-size: 1.125rem; color: var(--wt-teal-900); }
.wt-site .wt-portal__serie > a { text-decoration: underline; text-decoration-color: rgb(6 79 75 / 0.3); text-underline-offset: 4px; }
.wt-portal__count { font-size: 0.875rem; font-weight: 700; color: var(--wt-forest-700); }
.wt-portal__serie.is-hidden { background: repeating-linear-gradient(-45deg, #fffaf6 0 8px, #fff3ec 8px 16px); }
.wt-site .wt-portal__by { margin: 22px 0 0; font-weight: 700; color: var(--wt-forest-700); }
.wt-site .wt-portal__by a { color: var(--wt-teal); }
.wt-portal__cta { margin: 26px 0 0; }
@media (min-width: 960px) {
	.wt-portal { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
	.wt-portal__window { border-radius: 36px 0 0 36px; min-height: 620px; }
}

.wt-worlds__more { margin-top: clamp(48px, 6vw, 88px); }
.wt-site .wt-worlds__h2 { margin: 0 0 24px; text-align: center; font-family: var(--wt-font-display); font-weight: 600; font-size: var(--wt-fs-h2); color: var(--wt-teal-900); }
.wt-site .wt-worlds__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; }
.wt-worlddoor { position: relative; margin: 0; padding: 24px; border-radius: 28px; background: #fffdf9; box-shadow: var(--wt-shadow-1); text-align: center; }
.wt-worlddoor__arch { display: block; width: 90px; height: 120px; margin: 0 auto 16px; border-radius: 999px 999px 12px 12px; background: linear-gradient(180deg, #fff2cf, #f6c978); box-shadow: 0 0 0 6px #fff7ee, 0 0 0 7px var(--wt-line); }

.wt-worlds__onward { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: clamp(40px, 5vw, 72px); }
@media (min-width: 720px) { .wt-worlds__onward { grid-template-columns: 1fr 1fr; } }
.wt-site .wt-onward {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 2px 16px;
	padding: 22px 26px;
	border-radius: 24px;
	background: linear-gradient(135deg, #064f4b, #03302d);
	color: var(--wt-ivory);
	text-decoration: none;
	box-shadow: 0 18px 30px -18px rgb(3 48 45 / 0.6);
	transition: transform var(--wt-dur-base) var(--wt-ease-out), box-shadow var(--wt-dur-base) var(--wt-ease-out);
}
.wt-site .wt-onward--friends { background: linear-gradient(135deg, #6e4c78, #3f2a49); }
.wt-onward__kicker { grid-column: 1; font-size: var(--wt-fs-eyebrow); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wt-gold); }
.wt-onward__title { grid-column: 1; font-family: var(--wt-font-display); font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.75rem); font-weight: 600; }
.wt-onward .wt-btn__arrow { grid-column: 2; grid-row: 1 / span 2; width: 22px; height: 22px; }
.wt-site .wt-onward:hover { transform: translateY(-3px); color: var(--wt-ivory); box-shadow: 0 26px 40px -20px rgb(3 48 45 / 0.7); }
.wt-site .wt-onward:focus-visible { outline: var(--wt-focus-ring); outline-offset: 4px; }

@media (max-width: 767px) {
	.wt-worlds { --_edge: 40px; }
	.wt-worlds__hero { min-height: 0; padding-bottom: calc(var(--_edge) + 240px); }
	.wt-worlds__layer--gates { height: 300px; background-size: auto 100%; }
	/* Reserve the copy's height so a late web-font swap cannot move the artwork (no layout shift). */
	.wt-worlds__intro { min-height: 400px; }
}
@media (max-width: 479px) {
	.wt-worlds__hero { padding-bottom: calc(var(--_edge) + 200px); }
	.wt-worlds__layer--gates { height: 250px; }
	.wt-worlds__intro { min-height: 460px; }
}

/* ---------- World scene (shared by the world landing and the portal window) ---------- */
.wt-wscene__art { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.wt-wscene,
.wt-portal__window {
	background:
		radial-gradient(ellipse 30% 26% at 72% 36%, rgb(255 236 190 / 0.4), transparent 70%),
		linear-gradient(180deg, #0b2433 0%, #123b47 34%, #2f566a 56%, #8f7a92 74%, #e6b48f 90%, #f6c69a 100%);
}
.wt-wscene__layer--sky { background: url(../img/ornaments/stars.svg) center top / cover no-repeat; opacity: 0.75; -webkit-mask-image: linear-gradient(180deg, #000 0 45%, transparent 70%); mask-image: linear-gradient(180deg, #000 0 45%, transparent 70%); }
.wt-wscene__layer--moon { inset: 9% auto auto 66%; width: clamp(70px, 8vw, 120px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 38%, #fffaf0 0%, #ffe9c2 55%, #f6c978 100%); box-shadow: 0 0 40px 16px rgb(255 226 170 / 0.35), 0 0 120px 40px rgb(255 226 170 / 0.18); }
.wt-wscene__layer--far { inset: auto 0 15%; height: 52%; background: url(../img/ornaments/skyline-far.svg) center bottom / auto 100% no-repeat; opacity: 0.9; }
.wt-wscene__layer--near { inset: auto 0 9%; height: 36%; background: url(../img/ornaments/skyline-near.svg) center bottom / auto 100% no-repeat; }
.wt-wscene__layer--pond { inset: auto 0 -2%; height: 26%; background: url(../img/ornaments/lotus-pond.svg) center bottom / auto 100% repeat-x; }
.wt-wscene__layer--toran { inset: 0 0 auto; height: clamp(84px, 9vw, 130px); background: url(../img/ornaments/toran.svg) left top / auto 100% repeat-x; transform: none; filter: drop-shadow(0 6px 8px rgb(4 20 28 / 0.35)); }
.wt-wscene__fireflies { position: absolute; inset: 14% 0 18%; pointer-events: none; }
.wt-wscene__fireflies .wt-spark { --s: 7px; background: radial-gradient(circle, #fffbe0 0%, rgb(255 226 140 / 0.9) 28%, rgb(233 162 59 / 0) 70%); filter: blur(0.3px); }

/* Hero stage: covers floating behind, characters on a lit lotus platform. */
.wt-wstage { position: relative; display: grid; place-items: end center; min-height: clamp(320px, 36vw, 500px); }
.wt-wstage__art { position: relative; width: min(100%, 560px); height: clamp(320px, 36vw, 500px); }
.wt-wstage__halo { position: absolute; left: 50%; bottom: 8%; width: 82%; aspect-ratio: 1; translate: -50% 0; border-radius: 50%; background: radial-gradient(circle, rgb(255 233 180 / 0.55) 0%, rgb(255 210 130 / 0.18) 45%, transparent 70%); }
.wt-wstage__cover { position: absolute; bottom: 30%; width: 44%; animation: wt-wstage-float 9s ease-in-out infinite; }
.wt-wstage__cover--1 { left: 8%; rotate: -7deg; z-index: 1; }
.wt-wstage__cover--2 { right: 8%; rotate: 6deg; z-index: 1; animation-delay: -4.5s; }
.wt-wstage--covers-1 .wt-wstage__cover--1 { left: 50%; translate: -50% 0; width: 50%; rotate: -4deg; }
.wt-site .wt-wstage__cover-img { display: block; width: 100%; height: auto; border-radius: 4px 12px 12px 4px; box-shadow: -3px 0 0 rgb(40 20 0 / 0.25), 18px 26px 34px -12px rgb(4 20 28 / 0.6), 0 0 0 1px rgb(255 255 255 / 0.15); }
.wt-wstage__platform { position: absolute; left: 50%; bottom: 3%; width: 86%; height: 16%; translate: -50% 0; border-radius: 50%; z-index: 2; background: radial-gradient(ellipse at center, rgb(255 240 200 / 0.75) 0%, rgb(246 201 120 / 0.35) 45%, rgb(246 201 120 / 0) 70%); }
.wt-wstage__cast { position: absolute; bottom: 7%; z-index: 3; height: 46%; display: flex; align-items: flex-end; }
.wt-site .wt-wstage__cast-img { width: auto; height: 100%; max-width: none; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 4px 4px rgb(4 20 28 / 0.25)) drop-shadow(0 14px 16px rgb(4 20 28 / 0.25)); }
.wt-wstage__cast--1 { left: 50%; translate: -50% 0; height: 50%; z-index: 4; }
.wt-wstage__cast--2 { left: 12%; height: 44%; }
.wt-wstage__cast--3 { right: 12%; height: 42%; }
.wt-wstage__cast--4 { right: 34%; height: 30%; bottom: 5%; z-index: 5; }
.wt-wstage--cast-2 .wt-wstage__cast--1 { left: 30%; }
.wt-wstage--cast-2 .wt-wstage__cast--2 { left: auto; right: 14%; }
.wt-wstage__note { position: absolute; inset: auto 0 -6px; margin: 0; text-align: center; z-index: 6; }
@keyframes wt-wstage-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Inside the portal window the stage fills the scene. */
.wt-wstage--portal { position: absolute; inset: 0; z-index: 2; min-height: 0; padding: clamp(84px, 9vw, 130px) 6% 4%; }
.wt-wstage--portal .wt-wstage__art { height: 100%; }

/* ---------- World / series landing ---------- */
.wt-wl { --_edge: 64px; }
.wt-wl__hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(110px, 11vw, 160px) var(--wt-gutter) calc(var(--_edge) + clamp(56px, 6vw, 96px));
	color: var(--wt-ivory);
}
.wt-wl--series .wt-wl__hero {
	background:
		radial-gradient(ellipse 34% 30% at 70% 40%, rgb(255 226 170 / 0.45), transparent 70%),
		linear-gradient(180deg, #0f2f3d 0%, #1c4a57 30%, #5b6f86 55%, #c99a8c 74%, #f2c79b 90%, #fbd9ae 100%);
}
.wt-wl__inner { position: relative; z-index: 5; display: grid; grid-template-columns: 1fr; gap: clamp(24px, 4vw, 48px); max-width: var(--wt-content-max); margin-inline: auto; align-items: center; }
@media (min-width: 960px) { .wt-wl__inner { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.wt-wl__copy { min-width: 0; }
.wt-wl__copy .wt-crumbs { margin-bottom: 20px; }
.wt-wl__eyebrow { justify-content: flex-start; }
.wt-site .wt-wl__lead { margin: var(--wt-space-5) 0 0; max-width: 54ch; font-size: var(--wt-fs-lead); line-height: 1.6; color: rgb(255 247 238 / 0.94); text-shadow: 0 1px 14px rgb(4 20 28 / 0.6); }
.wt-wl__jumps { display: flex; flex-wrap: wrap; gap: 12px 16px; margin: 30px 0 0; }
/* Legibility: a soft veil behind the copy. */
.wt-wl__copy { position: relative; }
.wt-wl__copy::before {
	content: "";
	position: absolute;
	inset: -40px -60px -40px -40px;
	z-index: -1;
	border-radius: 50%;
	background: radial-gradient(ellipse at 40% 50%, rgb(11 36 51 / 0.55), rgb(11 36 51 / 0) 70%);
	pointer-events: none;
}

.wt-wl__section { position: relative; padding: clamp(56px, 7vw, 112px) var(--wt-gutter); scroll-margin-top: calc(var(--wt-header-h, 72px) + 16px); }
.wt-site .wt-wl__section:focus { outline: none; }
.wt-wl__section-inner { position: relative; z-index: 2; max-width: var(--wt-content-max); margin-inline: auto; }
.wt-wl__series { background: linear-gradient(180deg, #fff7ee 0%, #fdf0df 100%); }
.wt-wl__books { background: radial-gradient(ellipse 50% 30% at 50% 0%, rgb(255 236 200 / 0.7), transparent 70%), #fffdf9; }
.wt-wl__friends { background: linear-gradient(180deg, #fffdf9 0%, #fff4e6 100%); }
.wt-wl__teller { padding-top: clamp(32px, 4vw, 56px); background: #fff4e6; }
.wt-wl__grid { margin-top: clamp(28px, 3vw, 44px) !important; }
.wt-wl__empty { margin: 32px auto 0; max-width: 560px; padding: 32px 24px; border: 1.5px dashed var(--wt-line); border-radius: var(--wt-radius-lg); text-align: center; font-size: var(--wt-fs-lead); color: #3b4646; }
.wt-wl__panel { margin-bottom: clamp(32px, 4vw, 56px); }

/* Series doors. */
.wt-site .wt-doors { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 3vw, 40px); margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; list-style: none; }
@media (min-width: 720px) { .wt-site .wt-doors { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } }
.wt-door {
	--door-a: #fff2cf;
	--door-b: #f6c978;
	position: relative;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 18px 18px 24px;
	border-radius: 999px 999px 28px 28px;
	background: #fffdf9;
	box-shadow: 0 0 0 1px var(--wt-line), 0 24px 40px -26px rgb(122 74 20 / 0.5);
	text-align: center;
	transition: transform var(--wt-dur-base) var(--wt-ease-out), box-shadow var(--wt-dur-base) var(--wt-ease-out);
}
.wt-door--tint-2 { --door-a: #f3ecfa; --door-b: #c7aee0; }
.wt-door--tint-3 { --door-a: #fde6d6; --door-b: #f2a98f; }
.wt-door__arch {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 4.2;
	border-radius: 999px 999px 18px 18px;
	background: radial-gradient(ellipse 60% 50% at 50% 85%, rgb(255 255 255 / 0.95), rgb(255 255 255 / 0) 70%), linear-gradient(180deg, var(--door-a), var(--door-b));
	box-shadow: inset 0 0 0 6px rgb(255 255 255 / 0.6), inset 0 0 0 7px rgb(138 90 16 / 0.18);
}
.wt-door__light { position: absolute; inset: auto 10% 6%; height: 18%; border-radius: 50%; background: radial-gradient(ellipse at center, rgb(255 255 255 / 0.9), transparent 70%); }
.wt-door__cast { position: absolute; inset: 14% 4% 6%; display: flex; align-items: flex-end; justify-content: center; }
.wt-site .wt-door__face { width: auto; height: 82%; max-width: 46%; object-fit: contain; object-position: 50% 100%; margin-inline: -5%; filter: drop-shadow(0 6px 8px rgb(90 50 10 / 0.25)); transition: transform var(--wt-dur-slow) var(--wt-ease-spring); }
.wt-door__cast--3 .wt-door__face:nth-child(2) { height: 100%; z-index: 1; }
.wt-door__cast--1 .wt-door__face { height: 96%; max-width: 70%; }
.wt-door__book { position: absolute; inset: 14% 22% 10%; display: grid; place-items: end center; }
.wt-site .wt-door__cover { width: 100%; height: auto; border-radius: 3px 8px 8px 3px; rotate: -4deg; box-shadow: 14px 18px 24px -10px rgb(70 38 6 / 0.45); }
.wt-door__glyph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--wt-gold-700); }
.wt-door__glyph .wt-lotus { width: 70px; height: 44px; }
.wt-door__body { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 18px; }
.wt-site .wt-door__name { margin: 0; font-family: var(--wt-font-display); font-weight: 600; font-size: var(--wt-fs-h3); line-height: 1.15; color: var(--wt-teal-900); }
.wt-site .wt-door__link { color: inherit; text-decoration: none; }
.wt-door__link::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; }
.wt-door__copy { margin: 0; max-width: 34ch; font-size: 0.9375rem; line-height: 1.55; color: #3b4646; }
.wt-door__meta { margin: 0; font-size: 0.8125rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wt-gold-700); }
.wt-door:hover,
.wt-door:focus-within { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--wt-line), 0 0 0 6px rgb(255 255 255 / 0.8), 0 32px 48px -26px rgb(122 74 20 / 0.6); }
.wt-door:hover .wt-door__face,
.wt-door:focus-within .wt-door__face { transform: translateY(-6px); }
.wt-door:has(.wt-door__link:focus-visible) { outline: var(--wt-focus-ring); outline-offset: 5px; }
.wt-site .wt-door__link:focus-visible { outline: none; text-decoration: underline; }

/* Character gallery grid (world pages, directory, profiles). */
.wt-site .wt-gallery {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(36px, 4vw, 56px) clamp(16px, 2.4vw, 32px);
	margin: clamp(56px, 6vw, 80px) 0 0;
	padding: 0;
	list-style: none;
}
.wt-gallery__item { margin: 0; min-width: 0; }
@media (min-width: 720px) { .wt-site .wt-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .wt-site .wt-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .wt-site .wt-gallery--compact { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.wt-friend--card .wt-friend__line { max-width: 26ch; }
.wt-friend__world { display: inline-flex; align-items: center; gap: 4px; margin: 2px 0 0; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wt-gold-700); }
.wt-friend__world-icon { width: 20px; height: 13px; }
.wt-friend__books { margin: 0; max-width: 28ch; font-size: 0.8125rem; line-height: 1.4; font-style: italic; color: #4a5656; }

/* "Part of the story world" band. */
.wt-wl__band { position: relative; isolation: isolate; overflow: hidden; padding: clamp(56px, 7vw, 112px) var(--wt-gutter); color: var(--wt-ivory); background: radial-gradient(ellipse 50% 70% at 80% 30%, rgb(246 201 120 / 0.22), transparent 70%), linear-gradient(180deg, #064f4b 0%, #03302d 100%); }
.wt-wl__band-art { position: absolute; inset: 0; z-index: 0; background: url(../img/ornaments/skyline-far.svg) center bottom / auto 70% no-repeat, url(../img/ornaments/stars.svg) center top / cover no-repeat; opacity: 0.5; }
.wt-wl__band-eyebrow { margin: 0 0 10px; font-size: var(--wt-fs-eyebrow); font-weight: 800; letter-spacing: var(--wt-tracking-eyebrow); text-transform: uppercase; color: var(--wt-gold); }
.wt-site .wt-wl__band-title { margin: 0 0 16px; font-family: var(--wt-font-display); font-weight: 600; font-size: var(--wt-fs-h2); line-height: 1.1; color: var(--wt-ivory); }
.wt-wl__band-copy { max-width: 60ch; margin: 0 0 24px; font-size: var(--wt-fs-lead); line-height: 1.6; color: rgb(255 247 238 / 0.92); }

/* The storyteller: a gold medallion (no portrait until one is approved). */
.wt-wteller { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px 32px; max-width: 860px; margin: 0 auto; padding: clamp(24px, 3vw, 40px); border-radius: 32px; background: linear-gradient(135deg, #fffdf9, #fdf0df); box-shadow: 0 0 0 1px var(--wt-line), var(--wt-shadow-2); }
.wt-wteller__medal { position: relative; display: grid; place-items: center; width: 116px; height: 116px; flex: none; border-radius: 50%; background: conic-gradient(from 0deg, #f1c66b, #8a5a10, #f1c66b, #c48a2c, #f1c66b); box-shadow: 0 10px 24px -10px rgb(138 90 16 / 0.6); }
.wt-wteller__medal::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #0f5c57, #03302d); }
.wt-wteller__medal span { position: relative; font-family: var(--wt-font-display); font-size: 2.2rem; font-weight: 600; color: var(--wt-gold); letter-spacing: 0.02em; }
.wt-wteller__body { flex: 1 1 320px; min-width: 0; }
.wt-wteller__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 6px; font-size: var(--wt-fs-eyebrow); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wt-gold-700); }
.wt-site .wt-wteller__name { margin: 0; font-family: var(--wt-font-display); font-weight: 600; font-size: var(--wt-fs-h3); color: var(--wt-teal-900); }
.wt-site .wt-wteller__name a { color: inherit; }
.wt-wteller__line { margin: 8px 0 0; font-size: var(--wt-fs-body); line-height: 1.6; color: #2c3838; }

@media (max-width: 959px) {
	.wt-wl__hero { padding-top: clamp(96px, 16vw, 120px); }
	.wt-wl__copy::before { inset: -30px -20px; }
	.wt-wstage { min-height: 300px; }
	.wt-wstage__art { height: 300px; }
}
@media (max-width: 599px) {
	.wt-wl { --_edge: 40px; }
	.wt-wstage__art { height: 260px; }
	.wt-wstage { min-height: 260px; }
	.wt-wscene__layer--moon { inset: 12% auto auto 72%; }
	.wt-wscene__layer--far { height: 40%; opacity: 0.6; }
	.wt-wscene__fireflies .wt-spark:nth-child(n + 8) { display: none; }
}

/* ---------- Character directory ---------- */
.wt-dir { background: var(--wt-ivory); }
.wt-dir__hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(56px, 7vw, 104px) var(--wt-gutter) clamp(40px, 5vw, 72px);
	text-align: center;
	background:
		radial-gradient(ellipse 40% 60% at 50% 100%, rgb(255 226 170 / 0.55), transparent 70%),
		linear-gradient(180deg, #fff7ee 0%, #fdeedb 100%);
}
.wt-dir__art { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.wt-dir__layer--hall { inset: auto 0 0; height: 100%; background: url(../img/ornaments/arch-hall.svg) center bottom / auto 92% repeat-x; opacity: 0.85; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 40%); mask-image: linear-gradient(180deg, transparent 0%, #000 40%); }
.wt-dir__layer--vine-left,
.wt-dir__layer--vine-right { inset: -24px auto auto auto; width: clamp(64px, 10vw, 170px); height: 100%; background: url(../img/ornaments/vine.svg) top center / contain no-repeat; opacity: 0.8; }
.wt-dir__layer--vine-left { left: -22px; }
.wt-dir__layer--vine-right { right: -22px; transform: scaleX(-1) translate3d(0, var(--wt-parallax-y, 0px), 0); }
.wt-dir__sparkles { position: absolute; inset: 0; pointer-events: none; }
.wt-dir__intro { position: relative; z-index: 2; max-width: 780px; margin-inline: auto; }
.wt-dir__intro .wt-section-head__eyebrow { justify-content: center; }
.wt-site .wt-dir__title { margin: 0; font-family: var(--wt-font-display); font-weight: 600; font-size: var(--wt-fs-display); line-height: 1.02; letter-spacing: -0.02em; color: var(--wt-teal-900); font-variation-settings: "SOFT" 70, "opsz" 144; text-wrap: balance; }
.wt-site .wt-dir__lead { margin: var(--wt-space-5) auto 0; max-width: 54ch; font-size: var(--wt-fs-lead); line-height: 1.6; color: #2c3838; }
.wt-dir__body { padding: clamp(24px, 3vw, 40px) var(--wt-gutter) var(--wt-section-pad); background: linear-gradient(180deg, #fdeedb 0%, #fff7ee 30%, #fdf0df 100%); }
.wt-dir__body > * { max-width: var(--wt-content-max); margin-inline: auto; }
.wt-dir__results { margin-top: clamp(24px, 3vw, 40px); }
.wt-dir__grid { margin-top: clamp(48px, 5vw, 72px) !important; }
@media (max-width: 599px) {
	.wt-dir__layer--vine-left, .wt-dir__layer--vine-right { width: 60px; opacity: 0.6; }
	.wt-dir__layer--vine-left { left: -26px; }
	.wt-dir__layer--vine-right { right: -26px; }
}

/* ---------- Character profile ---------- */
.wt-char { --_edge: 56px; }
.wt-char__hero {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: clamp(28px, 4vw, 56px) var(--wt-gutter) calc(var(--_edge) + clamp(36px, 5vw, 72px));
}
.wt-char--tint .wt-char__hero {
	background:
		radial-gradient(ellipse 40% 60% at 28% 60%, var(--hero-glow, rgb(255 226 170 / 0.7)), transparent 70%),
		radial-gradient(ellipse 50% 50% at 90% 10%, rgb(248 215 196 / 0.6), transparent 70%),
		linear-gradient(180deg, #fff7ee 0%, var(--hero-floor, #fdeedb) 100%);
}
.wt-char--tint-2 { --hero-glow: rgb(214 196 236 / 0.75); --hero-floor: #f4ecf8; }
.wt-char--tint-3 { --hero-glow: rgb(190 228 204 / 0.75); --hero-floor: #eef7f0; }
.wt-char--tint-4 { --hero-glow: rgb(190 216 240 / 0.75); --hero-floor: #eef4fb; }
.wt-char--tint-5 { --hero-glow: rgb(255 226 150 / 0.75); --hero-floor: #fdf3dc; }
.wt-char--tint-6 { --hero-glow: rgb(246 196 206 / 0.75); --hero-floor: #fdeef0; }
.wt-char--world .wt-char__hero {
	color: var(--wt-ivory);
	background:
		radial-gradient(ellipse 36% 50% at 30% 62%, rgb(255 226 170 / 0.45), transparent 70%),
		linear-gradient(180deg, #0b2433 0%, #143c49 40%, #3e5f73 70%, #a98a8f 92%, #e6b48f 100%);
}
.wt-char__art { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.wt-char__layer--hall { inset: auto 0 0; height: 90%; background: url(../img/ornaments/arch-hall.svg) center bottom / auto 100% repeat-x; opacity: 0.6; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 50%); mask-image: linear-gradient(180deg, transparent 0%, #000 50%); }
.wt-char__layer--far { inset: auto 0 calc(var(--_edge) - 6px); height: 46%; background: url(../img/ornaments/skyline-far.svg) center bottom / auto 100% no-repeat; opacity: 0.75; }
.wt-char__layer--toran { inset: 0 0 auto; height: clamp(70px, 7vw, 100px); background: url(../img/ornaments/toran.svg) left top / auto 100% repeat-x; transform: none; }
.wt-char__sparkles { position: absolute; inset: 0; pointer-events: none; }
.wt-char--world .wt-char__sparkles .wt-spark { background: radial-gradient(circle, #fffbe0 0%, rgb(255 226 140 / 0.9) 28%, rgb(233 162 59 / 0) 70%); }
.wt-char__inner { position: relative; z-index: 5; display: grid; grid-template-columns: 1fr; gap: clamp(24px, 4vw, 64px); max-width: var(--wt-content-max); margin-inline: auto; align-items: center; }
@media (min-width: 900px) { .wt-char__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.wt-char--world .wt-char__inner { padding-top: clamp(36px, 4vw, 56px); }

.wt-char__portrait { position: relative; margin: 0 auto; width: min(100%, 440px); aspect-ratio: 4 / 5; }
.wt-char__arch {
	position: absolute;
	inset: 0;
	border-radius: 999px 999px 32px 32px;
	background: linear-gradient(180deg, var(--tint-a, #fde6d6) 0%, var(--tint-b, #fff4ec) 100%);
	box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.85), 0 0 0 1px var(--rim, #f2c2a6), 0 0 0 10px rgb(255 255 255 / 0.55), 0 0 0 11px rgb(233 162 59 / 0.35), 0 40px 60px -30px rgb(122 74 20 / 0.55);
}
.wt-char--tint-1 .wt-char__portrait { --tint-a: #fde6d6; --tint-b: #fff4ec; --rim: #f2c2a6; }
.wt-char--tint-2 .wt-char__portrait { --tint-a: #e9ddf2; --tint-b: #f8f2fb; --rim: #cdb5e0; }
.wt-char--tint-3 .wt-char__portrait { --tint-a: #d8eedf; --tint-b: #f1faf4; --rim: #a9d3b8; }
.wt-char--tint-4 .wt-char__portrait { --tint-a: #d9e9f6; --tint-b: #f2f8fd; --rim: #a9c8e3; }
.wt-char--tint-5 .wt-char__portrait { --tint-a: #fbeac0; --tint-b: #fff8e4; --rim: #ecc977; }
.wt-char--tint-6 .wt-char__portrait { --tint-a: #f9d9de; --tint-b: #fff1f3; --rim: #ebb0ba; }
.wt-char--world .wt-char__portrait { --tint-a: #fff0c9; --tint-b: #f7d08a; --rim: #e9a23b; }
.wt-char__sky { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; background: radial-gradient(ellipse 50% 38% at 50% 64%, rgb(255 246 220 / 0.6), transparent 72%), radial-gradient(ellipse 60% 40% at 50% 16%, rgb(255 255 255 / 0.85), transparent 70%), radial-gradient(circle at 22% 30%, rgb(255 255 255 / 0.9) 0 2px, transparent 3px), radial-gradient(circle at 78% 22%, rgb(255 255 255 / 0.9) 0 2px, transparent 3px); }
.wt-site .wt-char__img {
	position: absolute;
	left: 50%;
	bottom: 8%;
	z-index: 1;
	width: 96%;
	height: 112%;
	translate: -50% 0;
	object-fit: contain;
	object-position: 50% 100%;
	filter: drop-shadow(0 4px 4px rgb(90 50 10 / 0.14)) drop-shadow(0 20px 22px rgb(90 50 10 / 0.2));
}
.wt-char__ground { position: absolute; left: 50%; bottom: 6%; width: 62%; height: 22px; translate: -50% 0; border-radius: 50%; background: radial-gradient(ellipse at center, rgb(90 50 10 / 0.3), transparent 70%); }
.wt-char__portrait .wt-portrait-ph { inset: 14% 16% 16%; }
.wt-char__intro { min-width: 0; }
.wt-char__intro .wt-crumbs { margin-bottom: 18px; }
.wt-char__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.wt-chip__icon { width: 20px; height: 13px; }
.wt-char--world .wt-chip--series { background: rgb(255 247 238 / 0.14); color: var(--wt-ivory); }
.wt-site .wt-char__title { margin: 0; font-family: var(--wt-font-display); font-weight: 600; font-size: var(--wt-fs-display); line-height: 1.02; letter-spacing: -0.02em; color: var(--wt-teal-900); font-variation-settings: "SOFT" 70, "opsz" 144; text-wrap: balance; }
.wt-char--world .wt-char__title { color: var(--wt-ivory); text-shadow: 0 2px 20px rgb(4 20 28 / 0.45); }
.wt-site .wt-char__lead { margin: 18px 0 0; max-width: 42ch; font-family: var(--wt-font-display); font-style: italic; font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem); line-height: 1.4; color: var(--wt-gold-700); font-variation-settings: "SOFT" 100, "WONK" 1, "opsz" 96; }
.wt-char--world .wt-char__lead { color: #ffe1a6; }
.wt-char__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 28px; }
.wt-site a.wt-link-arrow.wt-link-arrow--on-dark { color: var(--wt-ivory); }
.wt-char__about { padding: clamp(32px, 4vw, 64px) var(--wt-gutter) clamp(48px, 6vw, 96px); background: #fffdf9; }
.wt-char__about-inner { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 64px); max-width: var(--wt-content-max); margin-inline: auto; }
@media (min-width: 900px) { .wt-char__about-inner { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: start; } }
.wt-char__prose { font-size: var(--wt-fs-body); line-height: 1.75; color: var(--wt-ink); }
.wt-char__prose blockquote { margin: 24px 0; padding: 18px 22px; border-left: 4px solid var(--wt-gold); border-radius: 0 18px 18px 0; background: #fff7ea; font-family: var(--wt-font-display); font-style: italic; font-size: 1.2rem; color: var(--wt-teal-900); }
.wt-char__prose blockquote p { margin: 0; }
.wt-char .wt-editor-note { margin: 12px 0 0; text-align: left; }
.wt-char__section { padding: clamp(48px, 6vw, 96px) var(--wt-gutter); background: linear-gradient(180deg, #fff7ee 0%, #fdf0df 100%); }
.wt-char__friends { background: linear-gradient(180deg, #fffdf9 0%, #fff4e6 100%); }
.wt-char__friends .wt-gallery { margin-top: clamp(48px, 5vw, 72px); }

@media (max-width: 899px) {
	.wt-char__portrait { width: min(78vw, 360px); }
	/* Keep the palace behind the portrait, never behind the title and copy. */
	.wt-char__layer--far { inset: 10% 0 auto; height: 34%; opacity: 0.35; }
}
@media (max-width: 719px) {
	.wt-door { width: 100%; max-width: 340px; margin-inline: auto; }
}

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
	.wt-wstage__cover { animation: none; }
	.wt-door, .wt-door__face, .wt-onward { transition: none !important; }
	.wt-door:hover, .wt-door:focus-within, .wt-onward:hover { transform: none; }
	.wt-door:hover .wt-door__face, .wt-door:focus-within .wt-door__face { transform: none; }
}
@media (hover: none) {
	.wt-door:hover { transform: none; }
	.wt-door:hover .wt-door__face { transform: none; }
}