/*
 * WonderTale House — homepage sections (Phase 2B.2), markup from wondertale-core sections.php.
 *
 *   .wt-shelf   Featured books: "Pick a Book. Open a Door." Each cover is a 3D book standing in a
 *               glowing arched doorway; the doorway brightens and the book turns toward the reader
 *               on hover/focus. Swipeable track below 1024px, a three-up shelf above.
 *   .wt-world   Story world (Bal Leela Tales): deep storybook teal night forest with stars, layered
 *               tree lines, hanging lanterns, fireflies, night foliage and floating covers.
 *   .wt-friends Character gallery: arched pastel portraits with the approved cut-outs stepping out
 *               of the arch; horizontally scrollable with accessible controls.
 *
 * Phase 2B.3 refinements: the character-gallery vines stay in the side margins (they had touched
 * the heading at 1024–1440px), the gallery gained a ground ledge, layered shadows, a back-light
 * and edge fades, and the three sections share one eyebrow style and a soft gold light thread.
 *
 * Depth: decorative layers are .wt-scene__layer elements driven by motion.js (scroll parallax,
 * >=768px only) plus CSS ambient motion. Decorative artwork lives in ../img/ornaments/*.svg and is
 * only requested once a section is near the viewport (sections.js adds .is-near; without JS it
 * loads normally). Reduced motion: every animation, parallax and hover movement is switched off.
 */

/* ---------- Shared: section heads ---------- */
.wt-section-head { position: relative; z-index: 2; max-width: 760px; }
.wt-section-head--center { margin-inline: auto; text-align: center; }
.wt-section-head__eyebrow {
	margin: 0 0 var(--wt-space-3);
	font-family: var(--wt-font-body);
	font-size: var(--wt-fs-eyebrow);
	font-weight: 800;
	letter-spacing: var(--wt-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--wt-gold-700);
}
.wt-section-head__eyebrow::before,
.wt-section-head__eyebrow::after { content: "✦"; display: inline-block; margin-inline: 0.7em; font-size: 0.8em; color: var(--wt-gold); letter-spacing: 0; }
.wt-friends__head .wt-section-head__eyebrow::before { margin-inline: 0 0.7em; }
.wt-friends__head .wt-section-head__eyebrow::after { display: none; }
.wt-site .wt-section-head__title {
	margin: 0;
	font-family: var(--wt-font-display);
	font-weight: 600;
	font-size: clamp(2.125rem, 1.45rem + 2.6vw, 3.6rem);
	line-height: 1.06;
	letter-spacing: -0.015em;
	color: var(--wt-teal-900);
	font-variation-settings: "SOFT" 60, "WONK" 0, "opsz" 96;
	text-wrap: balance;
}
.wt-section-head__accent { color: var(--wt-gold-700); }
.wt-section-head__title > span + span { margin-left: 0.25em; }
@media (max-width: 599px) {
	.wt-section-head__title > span { display: block; }
	.wt-section-head__title > span + span { margin-left: 0; }
}
.wt-site .wt-section-head__lead {
	margin: var(--wt-space-5) 0 0;
	font-size: var(--wt-fs-lead);
	line-height: 1.6;
	color: #3b4646;
	text-wrap: pretty;
}
.wt-site .wt-section-head--center .wt-section-head__lead { margin-inline: auto; max-width: 620px; }

/* ---------- Shared: chips, notes ---------- */
.wt-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 11px;
	border-radius: var(--wt-radius-pill);
	font-size: 0.75rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.5;
}
.wt-chip--status { background: var(--wt-peach); color: var(--wt-teal-900); }
.wt-chip--status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--wt-coral-700); }
.wt-chip--on-dark { background: rgb(255 247 238 / 0.14); color: var(--wt-ivory); }
.wt-chip--draft { background: transparent; color: var(--wt-coral-700); border: 1.5px dashed currentColor; letter-spacing: 0.04em; text-transform: none; font-weight: 700; }
.wt-world .wt-chip--draft { color: #ffb8a6; }
/* Publication-status chips: one palette everywhere (homepage, catalogue, book pages, story
   worlds, characters). Moved here from catalogue.css in Phase 3C so the homepage matches. */
.wt-chip--published { background: #dff1e5; color: #1f4a2c; }
.wt-chip--published::before { background: #2f7a47; }
.wt-chip--ready { background: #fdeccd; color: var(--wt-teal-900); }
.wt-chip--ready::before { background: var(--wt-gold-700); }
.wt-chip--in-production { background: #e9e2f3; color: var(--wt-lavender-700); }
.wt-chip--in-production::before { background: var(--wt-lavender-700); }
.wt-chip--unavailable { background: #ececec; color: #3a3a3a; }
.wt-chip--unavailable::before { background: #6b6b6b; }
.wt-chip--planning,
.wt-chip--unset { background: transparent; color: var(--wt-coral-700); border: 1.5px dashed currentColor; }
.wt-chip--planning::before,
.wt-chip--unset::before { background: var(--wt-coral-700); }
.wt-chip--on-dark.wt-chip--published { background: rgb(201 236 213 / 0.16); color: #d5f1df; }
.wt-chip--on-dark.wt-chip--published::before { background: #7fd39a; }
.wt-chip--on-dark.wt-chip--ready { background: rgb(253 236 205 / 0.16); color: #ffe6b5; }
.wt-chip--on-dark.wt-chip--ready::before { background: var(--wt-gold); }
.wt-chip--on-dark.wt-chip--in-production { background: rgb(233 226 243 / 0.16); color: #eadff5; }
.wt-chip--on-dark.wt-chip--in-production::before { background: #cdb5e0; }
.wt-chip--on-dark.wt-chip--planning,
.wt-chip--on-dark.wt-chip--unset { background: transparent; color: #ffb8a6; }
.wt-chip--on-dark.wt-chip--planning::before,
.wt-chip--on-dark.wt-chip--unset::before { background: #ffb8a6; }
/* Editors only (Phase 3C): a record shown in a preview that visitors cannot see. */
.wt-chip--hidden { background: repeating-linear-gradient(-45deg, #fff4ef 0 6px, #ffe8df 6px 12px); color: #8f2f1b; border: 1.5px dashed #b4472f; letter-spacing: 0.02em; text-transform: none; font-weight: 800; }
.wt-chip--hidden::before { content: ""; width: 10px; height: 10px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8s2.5-5 7-5 7 5 7 5-2.5 5-7 5-7-5-7-5z' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M2 14L14 2' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8s2.5-5 7-5 7 5 7 5-2.5 5-7 5-7-5-7-5z' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3Cpath d='M2 14L14 2' stroke='%23000' stroke-width='1.8'/%3E%3C/svg%3E") center / contain no-repeat; }

.wt-editor-note {
	position: relative;
	z-index: 3;
	margin: var(--wt-space-5) auto 0;
	max-width: var(--wt-content-max);
	font-size: 0.8125rem;
	color: var(--wt-coral-700);
	text-align: center;
}
.wt-world .wt-editor-note { color: #ffcbbd; grid-column: 1 / -1; }

/* ---------- Shared: carousel (native scroll + snap; JS only adds buttons) ---------- */
.wt-carousel { position: relative; }
.wt-carousel__viewport {
	overflow-x: auto;
	overflow-y: visible;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	scroll-padding-inline: var(--wt-gutter);
	outline-offset: 4px;
	border-radius: var(--wt-radius-md);
}
.wt-carousel__viewport::-webkit-scrollbar { display: none; }
.wt-carousel__viewport:focus-visible { outline: var(--wt-focus-ring); }
.wt-site .wt-carousel__track {
	display: flex;
	gap: var(--_gap, 20px);
	margin: 0;
	padding: var(--_pad-top, 12px) var(--wt-gutter) var(--_pad-bottom, 28px);
	list-style: none;
	width: max-content;
	min-width: 100%;
	box-sizing: border-box;
}
.wt-carousel__item { flex: none; scroll-snap-align: start; margin: 0; padding: 0; }
.wt-carousel__controls { display: flex; gap: 10px; }
.wt-carousel__controls[hidden] { display: none; }
.wt-site .wt-carousel__btn { width: 48px; height: 48px; padding: 0; color: var(--wt-teal-900); background: #fffdf9; }
.wt-carousel__btn[aria-disabled="true"] { opacity: 0.4; cursor: default; transform: none; box-shadow: none; }
.wt-carousel__btn:focus-visible { outline: var(--wt-focus-ring); outline-offset: 3px; }

/* ---------- Shared: sparkles / fireflies ---------- */
.wt-shelf__sparkles,
.wt-world__fireflies,
.wt-friends__sparkles { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.wt-spark {
	position: absolute;
	left: var(--x, 50%);
	top: var(--y, 50%);
	width: var(--s, 8px);
	height: var(--s, 8px);
	border-radius: 50%;
	background: radial-gradient(circle, #fff6d6 0%, rgb(255 214 120 / 0.85) 30%, rgb(233 162 59 / 0) 70%);
	opacity: 0.7;
	animation: wt-spark-twinkle var(--d, 5s) ease-in-out var(--delay, 0s) infinite;
}
.wt-spark:nth-child(1)  { --x: 8%;  --y: 22%; --s: 9px;  --d: 5.5s; --delay: -1s; }
.wt-spark:nth-child(2)  { --x: 17%; --y: 64%; --s: 6px;  --d: 4.2s; --delay: -3s; }
.wt-spark:nth-child(3)  { --x: 28%; --y: 12%; --s: 7px;  --d: 6.1s; --delay: -2s; }
.wt-spark:nth-child(4)  { --x: 39%; --y: 82%; --s: 5px;  --d: 4.8s; }
.wt-spark:nth-child(5)  { --x: 52%; --y: 8%;  --s: 8px;  --d: 5.2s; --delay: -4s; }
.wt-spark:nth-child(6)  { --x: 63%; --y: 70%; --s: 6px;  --d: 6.6s; --delay: -1.5s; }
.wt-spark:nth-child(7)  { --x: 74%; --y: 18%; --s: 9px;  --d: 4.6s; --delay: -2.5s; }
.wt-spark:nth-child(8)  { --x: 86%; --y: 58%; --s: 7px;  --d: 5.8s; --delay: -0.5s; }
.wt-spark:nth-child(9)  { --x: 93%; --y: 28%; --s: 5px;  --d: 4.4s; --delay: -3.5s; }
.wt-spark:nth-child(10) { --x: 46%; --y: 44%; --s: 6px;  --d: 6.2s; --delay: -5s; }
.wt-spark:nth-child(11) { --x: 58%; --y: 36%; --s: 10px; --d: 7s;   --delay: -2s; }
.wt-spark:nth-child(12) { --x: 69%; --y: 88%; --s: 7px;  --d: 5.1s; --delay: -4.5s; }
.wt-spark:nth-child(13) { --x: 81%; --y: 80%; --s: 9px;  --d: 6.4s; --delay: -1s; }
.wt-spark:nth-child(14) { --x: 33%; --y: 52%; --s: 6px;  --d: 4.9s; --delay: -2.2s; }
.wt-spark:nth-child(15) { --x: 12%; --y: 88%; --s: 8px;  --d: 5.7s; --delay: -3.3s; }
.wt-spark:nth-child(16) { --x: 97%; --y: 8%;  --s: 6px;  --d: 6.8s; --delay: -0.8s; }
@keyframes wt-spark-twinkle {
	0%, 100% { opacity: 0.15; transform: translate3d(0, 0, 0) scale(0.7); }
	50% { opacity: 0.95; transform: translate3d(6px, -14px, 0) scale(1); }
}

/* Butterflies on a flutter layer: two per layer, pseudo-elements, wings beat by scaleX. */
.wt-shelf__layer--flutter::before,
.wt-shelf__layer--flutter::after,
.wt-world__layer--flutter::before,
.wt-world__layer--flutter::after,
.wt-friends__layer--flutter::before,
.wt-friends__layer--flutter::after {
	content: "";
	position: absolute;
	width: var(--bw, 46px);
	aspect-ratio: 64 / 52;
	background: url(../img/ornaments/butterfly.svg) center / contain no-repeat;
	animation: wt-flap 0.9s ease-in-out infinite alternate, wt-drift var(--fd, 14s) ease-in-out infinite;
	filter: drop-shadow(0 0 10px rgb(255 210 120 / 0.55));
}
@keyframes wt-flap { from { scale: 1 1; } to { scale: 0.62 1; } }
@keyframes wt-drift {
	0%, 100% { translate: 0 0; rotate: -8deg; }
	33% { translate: 18px -22px; rotate: 6deg; }
	66% { translate: -12px -8px; rotate: -2deg; }
}

/* Lazy decoration: no artwork requests until the section is near the viewport. */
.wt-js [data-wt-section]:not(.is-near) .wt-scene__layer,
.wt-js [data-wt-section]:not(.is-near) .wt-scene__layer::before,
.wt-js [data-wt-section]:not(.is-near) .wt-scene__layer::after { background-image: none !important; }

/* Pause ambient motion off-screen or when the tab is hidden. */
[data-wt-section][data-paused] *,
[data-wt-section][data-paused] *::before,
[data-wt-section][data-paused] *::after,
.wt-motion-paused [data-wt-section] *,
.wt-motion-paused [data-wt-section] *::before,
.wt-motion-paused [data-wt-section] *::after { animation-play-state: paused !important; }

/* =========================================================================================
 * 1. Featured books — .wt-shelf
 * ======================================================================================= */
.wt-shelf {
	--_wave: 72px;
	position: relative;
	margin-top: calc(-1 * var(--_wave)); /* the seam overlaps the bottom of the hero */
	/* (When the Welcome section sits between them, the seam becomes a gold divider instead: see story.css.) */
	padding: calc(var(--_wave) + clamp(40px, 5vw, 72px)) 0 clamp(48px, 5vw, 80px);
	background:
		radial-gradient(ellipse 60% 48% at 50% 58%, rgb(255 236 200 / 0.9), rgb(255 236 200 / 0) 70%),
		radial-gradient(ellipse 40% 30% at 12% 20%, rgb(248 215 196 / 0.55), transparent 70%),
		radial-gradient(ellipse 40% 30% at 88% 30%, rgb(220 235 224 / 0.6), transparent 70%),
		linear-gradient(180deg, #fff7ee 0%, #fdf0df 100%);
	background-position: 0 var(--_wave);
	background-size: 100% calc(100% - var(--_wave));
	background-repeat: no-repeat;
	color: var(--wt-ink);
	overflow: hidden;
}
/* Seam from the night hero: a soft ivory hill line with a thin gold rim. */
.wt-shelf__edge {
	position: absolute;
	inset: 0 0 auto;
	height: var(--_wave);
	z-index: 2;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 72' preserveAspectRatio='none'%3E%3Cpath d='M0 40 C180 4 340 60 540 30 C740 0 880 56 1080 34 C1250 16 1350 44 1440 30 V72 H0Z' fill='%23E9A23B' fill-opacity='.55'/%3E%3Cpath d='M0 46 C180 10 340 66 540 36 C740 6 880 62 1080 40 C1250 22 1350 50 1440 36 V72 H0Z' fill='%23FFF7EE'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
	pointer-events: none;
}
.wt-shelf__layer--glow {
	background: radial-gradient(ellipse 34% 40% at 50% 62%, rgb(255 222 160 / 0.45), transparent 70%);
}
.wt-shelf__layer--vine-left,
.wt-shelf__layer--vine-right,
.wt-friends__layer--vine-left,
.wt-friends__layer--vine-right {
	inset: auto;
	top: calc(var(--_wave, 0px) - 6px);
	width: clamp(110px, 15vw, 250px);
	aspect-ratio: 360 / 900;
	background: url(../img/ornaments/vine.svg) top left / contain no-repeat;
}
.wt-shelf__layer--vine-left,
.wt-friends__layer--vine-left { left: clamp(-60px, -2vw, -10px); }
.wt-shelf__layer--vine-right,
.wt-friends__layer--vine-right { right: clamp(-60px, -2vw, -10px); transform: translate3d(0, var(--wt-parallax-y, 0px), 0) scaleX(-1); }
.wt-shelf__layer--flutter::before { --bw: 40px; left: 13%; top: 30%; --fd: 16s; }
.wt-shelf__layer--flutter::after { --bw: 30px; right: 14%; top: 18%; --fd: 12s; animation-delay: -0.4s, -5s; }

.wt-shelf__inner { position: relative; z-index: 3; max-width: calc(var(--wt-content-max) + 2 * var(--wt-gutter)); margin-inline: auto; }
.wt-shelf__inner > .wt-section-head { padding-inline: var(--wt-gutter); }
.wt-shelf__carousel { margin-top: clamp(28px, 4vw, 56px); }
.wt-shelf__list { --_gap: clamp(18px, 2.4vw, 34px); --_pad-top: 18px; --_pad-bottom: 34px; }
.wt-shelf__item { width: min(78vw, 330px); }
.wt-shelf__controls { justify-content: center; margin-top: 4px; }
.wt-shelf__more { position: relative; z-index: 3; margin: clamp(20px, 3vw, 36px) 0 0; text-align: center; }
.wt-shelf__note { padding-inline: var(--wt-gutter); }

@media (min-width: 768px) {
	.wt-shelf__item { width: min(42vw, 340px); }
}
@media (min-width: 1024px) {
	/* Three-up shelf: no scrolling needed, so the track becomes a centred grid. */
	.wt-shelf .wt-carousel__viewport { overflow: visible; }
	.wt-site .wt-shelf__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: auto; max-width: calc(1120px + 2 * var(--wt-gutter)); margin-inline: auto; }
	.wt-shelf__item { width: auto; }
	.wt-shelf__item:nth-child(n + 4) { display: none; } /* six books → still three on the shelf; the rest live on /books/ */
}

/* Book card */
.wt-bookcard {
	--portal-a: #fff2cf;
	--portal-b: #f6c978;
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	border-radius: 30px;
	background: linear-gradient(180deg, rgb(255 255 255 / 0.55) 0%, #fffaf2 46%, #fffaf2 100%);
	border: 1px solid rgb(234 217 196 / 0.9);
	box-shadow: 0 1px 0 rgb(255 255 255 / 0.9) inset, 0 24px 44px -28px rgb(122 74 20 / 0.45), 0 2px 6px rgb(122 74 20 / 0.06);
	transition: transform var(--wt-dur-slow) var(--wt-ease-out), box-shadow var(--wt-dur-slow) var(--wt-ease-out);
}
.wt-shelf__item:nth-child(3n + 2) .wt-bookcard { --portal-a: #eaf6ee; --portal-b: #9fd0b8; }
.wt-shelf__item:nth-child(3n + 3) .wt-bookcard { --portal-a: #f3ecfa; --portal-b: #c7aee0; }
.wt-bookcard__stage {
	position: relative;
	display: block;
	height: clamp(270px, 26vw, 350px);
	padding-top: 22px;
	perspective: 1100px;
	perspective-origin: 50% 30%;
}
/* The doorway: an arch of warm light behind the book. */
.wt-bookcard__portal {
	position: absolute;
	left: 50%;
	bottom: 26px;
	width: 74%;
	height: 88%;
	translate: -50% 0;
	border-radius: 999px 999px 16px 16px;
	background:
		radial-gradient(ellipse 70% 55% at 50% 78%, rgb(255 255 255 / 0.95) 0%, rgb(255 255 255 / 0) 70%),
		linear-gradient(180deg, var(--portal-a) 0%, var(--portal-b) 100%);
	box-shadow: 0 0 0 1px rgb(233 162 59 / 0.35) inset, 0 0 0 6px rgb(255 250 240 / 0.8), 0 0 0 7px rgb(233 162 59 / 0.28), 0 18px 40px -18px rgb(184 115 28 / 0.6);
	opacity: 0.92;
	transition: opacity var(--wt-dur-slow) var(--wt-ease-out), box-shadow var(--wt-dur-slow) var(--wt-ease-out), scale var(--wt-dur-slow) var(--wt-ease-out);
}
.wt-bookcard__portal::after { /* light spilling from the doorway */
	content: "";
	position: absolute;
	inset: 18% 12% -14%;
	border-radius: inherit;
	background: radial-gradient(ellipse at 50% 70%, rgb(255 230 160 / 0.8), transparent 65%);
	filter: blur(12px);
	opacity: 0.6;
	transition: opacity var(--wt-dur-slow) var(--wt-ease-out);
}
.wt-bookcard__book {
	display: block;
	position: absolute;
	z-index: 1;
	left: 0;
	right: 0;
	bottom: 36px;
	width: fit-content;
	height: 78%;
	margin-inline: auto;
	transform-style: preserve-3d;
	transform: rotateY(-20deg) rotateX(4deg);
	transition: transform 700ms var(--wt-ease-spring);
	animation: wt-book-bob 6.5s ease-in-out infinite;
	animation-delay: calc(var(--i, 0) * -1.6s);
}
.wt-site .wt-bookcard__cover {
	display: block;
	height: 100%;
	width: auto;
	max-width: none;
	border-radius: 3px 9px 9px 3px;
	box-shadow:
		inset 0 0 0 1px rgb(0 0 0 / 0.04),
		-2px 0 0 rgb(40 20 0 / 0.25),
		18px 22px 30px -12px rgb(70 38 6 / 0.5),
		4px 6px 10px rgb(70 38 6 / 0.18);
}
.wt-bookcard__book::before { /* spine crease */
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 7%;
	z-index: 2;
	border-radius: 3px 0 0 3px;
	background: linear-gradient(90deg, rgb(0 0 0 / 0.32), rgb(255 255 255 / 0.18) 55%, rgb(0 0 0 / 0));
	pointer-events: none;
}
.wt-bookcard__pages { /* page block, turned 90° into the depth */
	position: absolute;
	top: 3px;
	bottom: 3px;
	left: 100%;
	width: 16px;
	transform-origin: left center;
	transform: rotateY(90deg);
	background: repeating-linear-gradient(90deg, #fffdf6 0 1px, #ece0c8 1px 2px);
	border-radius: 0 2px 2px 0;
}
.wt-bookcard__gloss {
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: 3px 9px 9px 3px;
	background: linear-gradient(115deg, rgb(255 255 255 / 0) 30%, rgb(255 255 255 / 0.35) 45%, rgb(255 255 255 / 0) 60%);
	background-size: 260% 100%;
	background-position: 100% 0;
	transition: background-position 900ms var(--wt-ease-out);
	pointer-events: none;
}
.wt-bookcard__floor {
	position: absolute;
	left: 50%;
	bottom: 18px;
	width: 62%;
	height: 26px;
	translate: -50% 0;
	border-radius: 50%;
	background: radial-gradient(ellipse at center, rgb(70 38 6 / 0.34), rgb(70 38 6 / 0) 70%);
	transition: scale var(--wt-dur-slow) var(--wt-ease-out), opacity var(--wt-dur-slow);
}
@keyframes wt-book-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }

.wt-bookcard__body { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 4px clamp(20px, 2vw, 28px) 26px; flex: 1; }
.wt-bookcard__chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 4px; }
.wt-site .wt-bookcard__title {
	margin: 0;
	font-family: var(--wt-font-display);
	font-weight: 600;
	font-size: clamp(1.3rem, 1.1rem + 0.5vw, 1.55rem);
	line-height: 1.15;
	color: var(--wt-teal-900);
	font-variation-settings: "SOFT" 50, "opsz" 48;
}
.wt-site .wt-bookcard__link { color: inherit; text-decoration: none; }
.wt-bookcard__link::after { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: 30px; }
.wt-bookcard__by { margin: 0; font-size: 0.9375rem; color: var(--wt-forest-700); font-weight: 600; }
.wt-bookcard__hook { margin: 2px 0 0; font-size: 0.9375rem; line-height: 1.55; color: #3b4646; }
.wt-bookcard__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 10px;
	font-size: 0.9375rem;
	font-weight: 800;
	color: var(--wt-gold-700);
}
.wt-bookcard__cta .wt-btn__arrow { transition: transform var(--wt-dur-base) var(--wt-ease-out); }
.wt-bookcard.is-draft { border-style: dashed; border-color: rgb(180 71 47 / 0.35); }

/* "Open the door": hover and keyboard focus */
.wt-bookcard:hover,
.wt-bookcard:focus-within { transform: translateY(-6px); box-shadow: 0 1px 0 rgb(255 255 255 / 0.9) inset, 0 34px 54px -26px rgb(122 74 20 / 0.55), 0 2px 6px rgb(122 74 20 / 0.08); }
.wt-bookcard:hover .wt-bookcard__book,
.wt-bookcard:focus-within .wt-bookcard__book { transform: rotateY(-6deg) rotateX(0deg) translate3d(0, -10px, 30px); }
.wt-bookcard:hover .wt-bookcard__portal,
.wt-bookcard:focus-within .wt-bookcard__portal { opacity: 1; scale: 1.03; box-shadow: 0 0 0 1px rgb(233 162 59 / 0.5) inset, 0 0 0 6px rgb(255 250 240 / 0.9), 0 0 0 7px rgb(233 162 59 / 0.5), 0 0 60px -6px rgb(255 200 110 / 0.9); }
.wt-bookcard:hover .wt-bookcard__portal::after,
.wt-bookcard:focus-within .wt-bookcard__portal::after { opacity: 1; }
.wt-bookcard:hover .wt-bookcard__gloss,
.wt-bookcard:focus-within .wt-bookcard__gloss { background-position: 0 0; }
.wt-bookcard:hover .wt-bookcard__floor,
.wt-bookcard:focus-within .wt-bookcard__floor { scale: 0.86; opacity: 0.75; }
.wt-bookcard:hover .wt-bookcard__cta .wt-btn__arrow,
.wt-bookcard:focus-within .wt-bookcard__cta .wt-btn__arrow { transform: translateX(4px); }
.wt-bookcard:has(.wt-bookcard__link:focus-visible) { outline: var(--wt-focus-ring); outline-offset: 4px; }
.wt-bookcard__link:focus-visible { outline: none; }

/* =========================================================================================
 * 2. Story world — .wt-world (Bal Leela Tales)
 * ======================================================================================= */
.wt-world {
	--_edge: 64px;
	--_gold: #f2be62;
	position: relative;
	padding: calc(var(--_edge) + clamp(48px, 6vw, 88px)) 0 calc(var(--_edge) + clamp(40px, 4vw, 64px));
	background:
		radial-gradient(ellipse 46% 56% at 70% 46%, rgb(18 120 110 / 0.85), rgb(18 120 110 / 0) 70%),
		radial-gradient(ellipse 70% 60% at 20% 30%, rgb(6 79 75 / 0.9), rgb(6 79 75 / 0) 70%),
		linear-gradient(180deg, #053f3b 0%, var(--wt-teal) 38%, #04332f 100%);
	color: var(--wt-ivory);
	overflow: hidden;
}
/* Scalloped seams into the ivory sections above and below. */
.wt-world::before,
.wt-world::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: var(--_edge);
	z-index: 4;
	pointer-events: none;
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.wt-world::before {
	top: -1px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 0 H1440 V22 C1320 54 1200 14 1080 34 C960 54 840 18 720 36 C600 54 480 14 360 32 C240 50 120 18 0 34Z' fill='%23FDF0DF'/%3E%3Cpath d='M0 34 C120 18 240 50 360 32 C480 14 600 54 720 36 C840 18 960 54 1080 34 C1200 14 1320 54 1440 22' fill='none' stroke='%23E9A23B' stroke-opacity='.6' stroke-width='2'/%3E%3C/svg%3E");
}
.wt-world::after {
	bottom: -1px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 64 H1440 V30 C1300 8 1180 50 1040 30 C900 10 800 48 660 28 C520 8 400 50 260 30 C160 16 80 34 0 22Z' fill='%23FFF7EE'/%3E%3Cpath d='M0 22 C80 34 160 16 260 30 C400 50 520 8 660 28 C800 48 900 10 1040 30 C1180 50 1300 8 1440 30' fill='none' stroke='%23E9A23B' stroke-opacity='.6' stroke-width='2'/%3E%3C/svg%3E");
}
.wt-world__layer--sky { background: url(../img/ornaments/stars.svg) center top / cover no-repeat; opacity: 0.75; }
/* Keep the big stars out from behind the copy so the text stays clean. */
@media (min-width: 1024px) {
	.wt-world__layer--sky { -webkit-mask-image: linear-gradient(90deg, rgb(0 0 0 / 0.18) 0 44%, #000 58%); mask-image: linear-gradient(90deg, rgb(0 0 0 / 0.18) 0 44%, #000 58%); }
}
@media (max-width: 1023px) {
	.wt-world__layer--sky { opacity: 0.35; }
}
.wt-world__layer--far { inset: auto 0 0; height: 62%; background: url(../img/ornaments/forest-far.svg) center bottom / cover no-repeat; opacity: 0.55; }
.wt-world__layer--near { inset: auto 0 calc(var(--_edge) * -0.2); height: 40%; background: url(../img/ornaments/forest-near.svg) center bottom / cover no-repeat; opacity: 0.6; }
.wt-world__layer--lanterns { inset: 0 3% auto auto; width: clamp(120px, 14vw, 220px); aspect-ratio: 300 / 420; background: url(../img/ornaments/lanterns.svg) top center / contain no-repeat; top: calc(var(--_edge) - 10px); }
.wt-world__layer--lanterns::after { /* gentle flicker of the lantern glow */
	content: "";
	position: absolute;
	left: 10%;
	top: 30%;
	width: 60%;
	height: 40%;
	border-radius: 50%;
	background: radial-gradient(circle, rgb(255 205 120 / 0.35), transparent 70%);
	animation: wt-flicker 3.2s ease-in-out infinite;
}
@keyframes wt-flicker { 0%, 100% { opacity: 0.55; } 40% { opacity: 0.95; } 60% { opacity: 0.7; } }
.wt-world__layer--flutter::before { --bw: 44px; left: 41%; top: 18%; --fd: 15s; }
.wt-world__layer--flutter::after { --bw: 32px; left: 8%; top: 70%; --fd: 11s; animation-delay: -0.3s, -4s; }
.wt-world__layer--front { z-index: 6; }
.wt-world__layer--front::before,
.wt-world__layer--front::after {
	content: "";
	position: absolute;
	bottom: calc(var(--_edge) * 0.35);
	width: clamp(200px, 30vw, 460px);
	aspect-ratio: 560 / 420;
	background: url(../img/ornaments/foliage-night.svg) left bottom / contain no-repeat;
}
.wt-world__layer--front::before { left: -4%; }
.wt-world__layer--front::after { right: -4%; transform: scaleX(-1); width: clamp(160px, 24vw, 380px); }
.wt-world__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); }

.wt-world__inner {
	position: relative;
	z-index: 5;
	display: grid;
	gap: clamp(28px, 4vw, 48px);
	max-width: var(--wt-content-max);
	margin-inline: auto;
	padding-inline: var(--wt-gutter);
}
.wt-world__eyebrow {
	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(--_gold);
}
.wt-site .wt-world__title {
	margin: 0;
	font-family: var(--wt-font-display);
	font-weight: 600;
	font-size: clamp(2.4rem, 1.6rem + 2.6vw, 3.9rem);
	line-height: 1.04;
	letter-spacing: -0.02em;
	color: var(--wt-ivory);
	font-variation-settings: "SOFT" 70, "opsz" 120;
	text-shadow: 0 2px 30px rgb(0 0 0 / 0.25);
}
.wt-world__line { display: block; }
.wt-world__line--accent { color: var(--_gold); }
.wt-site .wt-world__lead { margin: var(--wt-space-5) 0 0; max-width: 46ch; font-size: var(--wt-fs-lead); line-height: 1.65; color: rgb(255 247 238 / 0.88); }
.wt-world__cta { margin-top: var(--wt-space-6); box-shadow: 0 12px 30px -10px rgb(233 162 59 / 0.65), 0 0 0 6px rgb(233 162 59 / 0.14); }
.wt-site .wt-world__cta:focus-visible { outline: 3px solid var(--wt-ivory); outline-offset: 4px; }

.wt-world__stage { position: relative; min-height: 380px; }
.wt-world__halo {
	position: absolute;
	inset: 6% 6% 10%;
	border-radius: 50%;
	background: radial-gradient(circle at 50% 50%, rgb(255 214 130 / 0.38), rgb(255 214 130 / 0.1) 40%, transparent 68%);
	filter: blur(6px);
	pointer-events: none;
}
.wt-site .wt-world__books { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 4vw, 32px) clamp(14px, 3vw, 28px); align-items: start; }
.wt-world__book { position: relative; margin: 0; }
.wt-world__book--2 { margin-top: clamp(26px, 5vw, 56px); }
.wt-world__figure { position: relative; margin: 0; }
.wt-world__float {
	position: relative;
	display: block;
	animation: wt-world-float 7s ease-in-out infinite;
}
.wt-world__book--2 .wt-world__float { animation-delay: -3.5s; animation-duration: 8s; }
@keyframes wt-world-float {
	0%, 100% { translate: 0 0; rotate: var(--r, -3deg); }
	50% { translate: 0 -12px; rotate: calc(var(--r, -3deg) + 1deg); }
}
.wt-world__book--1 { --r: -4deg; }
.wt-world__book--2 { --r: 3.5deg; }
.wt-site .wt-world__cover {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 4px 12px 12px 4px;
	box-shadow:
		-3px 0 0 rgb(0 0 0 / 0.3),
		0 0 0 1px rgb(255 255 255 / 0.06),
		0 36px 60px -24px rgb(0 0 0 / 0.75),
		0 0 70px -10px rgb(255 196 100 / 0.45);
}
.wt-world__float::before { /* spine crease */
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 6%;
	border-radius: 4px 0 0 4px;
	background: linear-gradient(90deg, rgb(0 0 0 / 0.35), rgb(255 255 255 / 0.15) 60%, transparent);
	z-index: 1;
}
.wt-world__gloss { position: absolute; inset: 0; border-radius: 4px 12px 12px 4px; background: linear-gradient(120deg, rgb(255 255 255 / 0.16), transparent 38%); pointer-events: none; }
.wt-world__companion {
	position: absolute;
	z-index: 2;
	left: -20%;
	top: 34%;
	width: 34%;
	pointer-events: none;
	filter: drop-shadow(0 14px 18px rgb(0 0 0 / 0.45));
	animation: wt-companion 6s ease-in-out infinite;
}
.wt-site .wt-world__companion-img { display: block; width: 100%; height: auto; max-width: none; }
@keyframes wt-companion { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
.wt-world__caption { font-style: normal; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 16px; }
.wt-world__series { font-size: 0.75rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--_gold); }
.wt-site .wt-world__link {
	font-family: var(--wt-font-display);
	font-weight: 600;
	font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
	line-height: 1.2;
	color: var(--wt-ivory);
	text-decoration: none;
}
.wt-world__link::after { content: ""; position: absolute; inset: 0 0 auto; aspect-ratio: 1 / 1; z-index: 3; }
.wt-site .wt-world__link:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.wt-site .wt-world__link:focus-visible { outline: 3px solid var(--wt-ivory); outline-offset: 4px; border-radius: 2px; }
.wt-world__book.is-draft .wt-world__cover { outline: 2px dashed rgb(255 184 166 / 0.6); outline-offset: 6px; }

/* "More tales" doorway */
.wt-world__book--more { grid-column: 1 / -1; }
.wt-site .wt-world__door {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 6px 20px;
	padding: 16px 22px 16px 16px;
	border-radius: 999px 28px 28px 999px;
	background: linear-gradient(100deg, rgb(3 48 45 / 0.85), rgb(6 79 75 / 0.55));
	border: 1px solid rgb(242 190 98 / 0.45);
	box-shadow: inset 0 0 40px rgb(242 190 98 / 0.08), 0 20px 40px -24px rgb(0 0 0 / 0.6);
	color: var(--wt-ivory);
	text-decoration: none;
	transition: border-color var(--wt-dur-base), box-shadow var(--wt-dur-base), transform var(--wt-dur-base) var(--wt-ease-out);
	backdrop-filter: blur(2px);
}
.wt-world__door-arch {
	grid-row: span 2;
	position: relative;
	width: 104px;
	height: 92px;
	border-radius: 999px 999px 10px 10px;
	background: radial-gradient(ellipse at 50% 85%, rgb(255 226 150 / 0.9), rgb(242 190 98 / 0.25) 55%, rgb(3 48 45 / 0.3) 80%);
	box-shadow: inset 0 0 0 1.5px rgb(242 190 98 / 0.6);
	overflow: hidden;
}
.wt-site .wt-world__door-cover { position: absolute; max-width: none; bottom: 6px; width: 46px; height: auto; border-radius: 2px 4px 4px 2px; box-shadow: 0 6px 10px rgb(0 0 0 / 0.4); }
.wt-world__door-cover:nth-child(1) { left: 10px; rotate: -10deg; }
.wt-world__door-cover:nth-child(2) { left: 30px; bottom: 10px; z-index: 1; }
.wt-world__door-cover:nth-child(3) { left: 50px; rotate: 10deg; }
.wt-world__door-text { align-self: end; font-family: var(--wt-font-display); font-weight: 600; font-size: 1.1rem; line-height: 1.2; }
.wt-world__door-text::after { content: " →"; color: var(--_gold); }
.wt-world__door-titles { align-self: start; font-size: 0.875rem; color: rgb(255 247 238 / 0.78); }
.wt-site .wt-world__door:hover { border-color: rgb(242 190 98 / 0.9); box-shadow: inset 0 0 50px rgb(242 190 98 / 0.18), 0 24px 44px -22px rgb(0 0 0 / 0.65); transform: translateY(-3px); color: var(--wt-ivory); }
.wt-site .wt-world__door:focus-visible { outline: 3px solid var(--wt-ivory); outline-offset: 4px; }

@media (min-width: 1024px) {
	.wt-world__inner { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 4vw, 64px); }
	.wt-world__stage { min-height: 520px; padding: 10px 0 0 4%; }
	.wt-site .wt-world__books { gap: 36px 40px; }
	.wt-world__book--more { margin-top: 6px; max-width: 520px; justify-self: end; }
}
@media (max-width: 767px) {
	.wt-world { --_edge: 40px; }
	.wt-world__layer--lanterns { width: 92px; right: 1%; opacity: 0.85; }
	.wt-world__layer--front::before { width: 220px; left: -18%; }
	.wt-world__layer--front::after { display: none; }
	.wt-world__stage { min-height: 0; }
	.wt-world__companion { left: -12%; top: 40%; width: 30%; }
	.wt-world__layer--flutter::before { top: 3%; left: 70%; }
	.wt-world__fireflies .wt-spark:nth-child(n + 9) { display: none; }
	.wt-site .wt-world__door { border-radius: 70px 22px 22px 70px; padding: 12px 16px 12px 12px; gap: 4px 14px; }
	.wt-world__door-arch { width: 84px; height: 76px; }
	.wt-world__door-cover { width: 38px; }
	.wt-world__door-cover:nth-child(2) { left: 24px; }
	.wt-world__door-cover:nth-child(3) { left: 40px; }
}

/* =========================================================================================
 * 3. Character gallery — .wt-friends
 * ======================================================================================= */
.wt-friends {
	position: relative;
	padding: clamp(56px, 6vw, 96px) 0 clamp(56px, 6vw, 88px);
	background:
		radial-gradient(ellipse 50% 40% at 20% 60%, rgb(248 215 196 / 0.55), transparent 70%),
		radial-gradient(ellipse 45% 40% at 85% 40%, rgb(234 223 241 / 0.6), transparent 70%),
		linear-gradient(180deg, #fff7ee 0%, #fffaf4 100%);
	overflow: hidden;
}
.wt-friends__layer--glow { background: radial-gradient(ellipse 60% 30% at 50% 66%, rgb(255 226 170 / 0.4), transparent 70%); }
.wt-friends::before { /* gold light thread carried down from the story-world lanterns */
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 260px;
	background: radial-gradient(ellipse 36% 70% at 50% 0%, rgb(242 190 98 / 0.22), transparent 70%);
	pointer-events: none;
}
/* Vines live in the side margin only: never wider than the space beside the 1240px content column
   (+ the part tucked off-screen), so they cannot reach the heading at any width. */
.wt-friends__layer--vine-left,
.wt-friends__layer--vine-right {
	top: -24px;
	width: clamp(56px, calc((100vw - var(--wt-content-max)) / 2 + 24px), 176px);
	opacity: 0.85;
}
.wt-friends__layer--vine-left { left: -22px; }
.wt-friends__layer--vine-right { right: -22px; }
.wt-friends__layer--flutter::before { --bw: 34px; left: 46%; top: 9%; --fd: 13s; }
.wt-friends__layer--flutter::after { --bw: 26px; right: 7%; top: 78%; --fd: 17s; animation-delay: -0.5s, -7s; }
.wt-friends__inner { position: relative; z-index: 3; max-width: calc(var(--wt-content-max) + 2 * var(--wt-gutter)); margin-inline: auto; }
.wt-friends__head {
	display: grid;
	gap: 16px 48px;
	max-width: none;
	padding-inline: var(--wt-gutter);
	align-items: end;
}
.wt-friends__aside { display: flex; flex-direction: column; gap: 18px; }
.wt-site .wt-friends__aside .wt-section-head__lead { margin: 0; max-width: 40ch; }
.wt-friends__controls { align-self: flex-start; }
@media (min-width: 900px) {
	.wt-friends__head { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
	.wt-friends__aside { flex-direction: row; align-items: flex-end; justify-content: space-between; }
	.wt-friends__controls { align-self: auto; }
}
.wt-friends__viewport {
	/* Full-bleed track: cards run to the screen edges while the first card lines up with the heading. */
	margin: clamp(14px, 2vw, 24px) calc(50% - 50vw) 0;
	/* Soft fade at the screen edges: cards drift in and out of view instead of being cut. */
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 min(5vw, 56px), #000 calc(100% - min(5vw, 56px)), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 min(5vw, 56px), #000 calc(100% - min(5vw, 56px)), transparent 100%);
	scroll-padding-inline: max(var(--wt-gutter), calc(50vw - var(--wt-content-max) / 2));
}
.wt-site .wt-friends__list { padding-inline: max(var(--wt-gutter), calc(50vw - var(--wt-content-max) / 2)); }
.wt-friends__list { --_gap: clamp(14px, 1.8vw, 24px); --_pad-top: clamp(44px, 5vw, 64px); --_pad-bottom: 28px; }
.wt-friends__item { width: clamp(150px, 42vw, 186px); }
@media (min-width: 768px) { .wt-friends__item { width: clamp(176px, 21vw, 214px); } }
@media (min-width: 1280px) { .wt-friends__item { width: 214px; } }
.wt-friends__more { margin: 6px 0 0; padding-inline: var(--wt-gutter); text-align: center; }

.wt-friend {
	--tint-a: #fde6d6;
	--tint-b: #fff4ec;
	--rim: #f2c2a6;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	text-align: center;
}
.wt-friend--tint-2 { --tint-a: #e9ddf2; --tint-b: #f8f2fb; --rim: #cdb5e0; }
.wt-friend--tint-3 { --tint-a: #d8eedf; --tint-b: #f1faf4; --rim: #a9d3b8; }
.wt-friend--tint-4 { --tint-a: #d9e9f6; --tint-b: #f2f8fd; --rim: #a9c8e3; }
.wt-friend--tint-5 { --tint-a: #fbeac0; --tint-b: #fff8e4; --rim: #ecc977; }
.wt-friend--tint-6 { --tint-a: #f9d9de; --tint-b: #fff1f3; --rim: #ebb0ba; }
.wt-friend__arch {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 5;
	border-radius: 999px 999px 26px 26px;
	background: linear-gradient(180deg, var(--tint-a) 0%, var(--tint-b) 100%);
	box-shadow:
		inset 0 0 0 1.5px rgb(255 255 255 / 0.85),
		inset 0 -26px 40px -24px rgb(122 74 20 / 0.12),
		0 0 0 1px var(--rim),
		0 2px 4px rgb(122 74 20 / 0.06),
		0 18px 28px -18px rgb(122 74 20 / 0.42),
		0 42px 50px -42px rgb(122 74 20 / 0.4);
	transition: box-shadow var(--wt-dur-slow) var(--wt-ease-out), transform var(--wt-dur-slow) var(--wt-ease-out);
}
.wt-friend__arch::before { /* fine inner frame, like a window bevel */
	content: "";
	position: absolute;
	inset: 7px;
	border-radius: 999px 999px 20px 20px;
	border: 1px solid rgb(255 255 255 / 0.75);
	box-shadow: 0 0 0 1px rgb(122 74 20 / 0.05);
	pointer-events: none;
}
.wt-friend__arch::after { /* ground ledge in front of the feet: the figure stands in the scene, not on the card edge */
	content: "";
	position: absolute;
	z-index: 2;
	left: 0;
	right: 0;
	bottom: 0;
	height: 13%;
	border-radius: 0 0 26px 26px;
	background:
		radial-gradient(ellipse 60% 120% at 50% 120%, rgb(255 255 255 / 0.9), transparent 70%),
		linear-gradient(180deg, rgb(255 255 255 / 0) 0%, var(--tint-b) 55%);
	pointer-events: none;
}
.wt-friend__sky {
	position: absolute;
	inset: 0;
	border-radius: inherit;
	overflow: hidden;
	background:
		radial-gradient(ellipse 50% 38% at 50% 60%, rgb(255 246 220 / 0.5), transparent 72%),
		radial-gradient(ellipse 60% 40% at 50% 18%, rgb(255 255 255 / 0.85), transparent 70%),
		radial-gradient(circle at 22% 30%, rgb(255 255 255 / 0.9) 0 1.5px, transparent 2.5px),
		radial-gradient(circle at 78% 22%, rgb(255 255 255 / 0.9) 0 1.5px, transparent 2.5px),
		radial-gradient(circle at 70% 48%, rgb(255 255 255 / 0.7) 0 1px, transparent 2px);
}
.wt-site .wt-friend__img {
	position: absolute;
	left: 50%;
	bottom: 9%;
	width: 94%;
	height: 109%; /* tall figures step out of the arch for depth */
	translate: -50% 0;
	object-fit: contain;
	object-position: 50% 100%;
	z-index: 1;
	filter: drop-shadow(0 2px 2px rgb(90 50 10 / 0.12)) drop-shadow(0 12px 14px rgb(90 50 10 / 0.16));
	transform-origin: 50% 100%;
	transition: transform var(--wt-dur-slow) var(--wt-ease-spring), filter var(--wt-dur-slow) var(--wt-ease-out);
}
.wt-friend__ground {
	position: absolute;
	left: 50%;
	bottom: 7%;
	width: 64%;
	height: 16px;
	translate: -50% 0;
	border-radius: 50%;
	z-index: 1;
	background: radial-gradient(ellipse at center, rgb(90 50 10 / 0.32), transparent 70%);
	transition: scale var(--wt-dur-slow) var(--wt-ease-out), opacity var(--wt-dur-slow);
}
.wt-site .wt-friend__name {
	margin: 14px 0 0;
	font-family: var(--wt-font-display);
	font-weight: 600;
	font-size: clamp(1.1rem, 1rem + 0.35vw, 1.3rem);
	line-height: 1.2;
	color: var(--wt-teal-900);
}
.wt-site .wt-friend__link { color: inherit; text-decoration: none; }
.wt-friend__link::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: 999px 999px 26px 26px; }
.wt-friend__line { margin: 0; font-size: 0.875rem; line-height: 1.4; color: var(--wt-forest-700); max-width: 22ch; }
.wt-friend .wt-chip--draft { margin-top: 2px; padding: 1px 8px; font-size: 0.6875rem; border-width: 1px; }
.wt-friend:hover .wt-friend__img,
.wt-friend:focus-within .wt-friend__img { transform: translateY(-10px) scale(1.04); filter: drop-shadow(0 2px 2px rgb(90 50 10 / 0.1)) drop-shadow(0 22px 18px rgb(90 50 10 / 0.18)); }
.wt-friend:hover .wt-friend__ground,
.wt-friend:focus-within .wt-friend__ground { scale: 0.8; opacity: 0.6; }
.wt-friend:hover .wt-friend__arch,
.wt-friend:focus-within .wt-friend__arch {
	transform: translateY(-4px);
	box-shadow:
		inset 0 0 0 1.5px rgb(255 255 255 / 0.95),
		inset 0 -26px 40px -24px rgb(122 74 20 / 0.1),
		0 0 0 1px var(--rim),
		0 0 0 6px rgb(255 255 255 / 0.7),
		0 0 36px -6px rgb(242 190 98 / 0.55),
		0 30px 40px -22px rgb(122 74 20 / 0.55);
}
.wt-friend:hover .wt-friend__name,
.wt-friend:focus-within .wt-friend__name { color: var(--wt-gold-700); }
.wt-site .wt-friend__name { transition: color var(--wt-dur-base); }
.wt-friend:has(.wt-friend__link:focus-visible) .wt-friend__arch { outline: var(--wt-focus-ring); outline-offset: 5px; }
.wt-friend__link:focus-visible { outline: none; text-decoration: underline; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.wt-spark,
	.wt-world__float,
	.wt-world__companion,
	.wt-bookcard__book,
	.wt-world__layer--lanterns::after,
	.wt-shelf__layer--flutter::before, .wt-shelf__layer--flutter::after,
	.wt-world__layer--flutter::before, .wt-world__layer--flutter::after,
	.wt-friends__layer--flutter::before, .wt-friends__layer--flutter::after { animation: none !important; }
	.wt-world__float { rotate: var(--r, 0deg); }
	.wt-bookcard, .wt-bookcard__book, .wt-bookcard__portal, .wt-friend__img, .wt-friend__arch, .wt-world__door { transition: none !important; }
	.wt-bookcard:hover, .wt-bookcard:focus-within { transform: none; }
	.wt-bookcard:hover .wt-bookcard__book, .wt-bookcard:focus-within .wt-bookcard__book { transform: rotateY(-20deg) rotateX(4deg); }
	.wt-friend:hover .wt-friend__img, .wt-friend:focus-within .wt-friend__img { transform: none; }
	.wt-friend:hover .wt-friend__arch, .wt-friend:focus-within .wt-friend__arch { transform: none; }
	.wt-friend__ground { transition: none !important; }
	.wt-site .wt-world__door:hover { transform: none; }
}

/* ---------- Touch: no sticky hover lifts ---------- */
@media (hover: none) {
	.wt-bookcard:hover { transform: none; }
	.wt-bookcard:hover .wt-bookcard__book { transform: rotateY(-20deg) rotateX(4deg); }
	.wt-friend:hover .wt-friend__img { transform: none; }
	.wt-friend:hover .wt-friend__arch { transform: none; }
}

/* ---------- Mobile tuning ---------- */
@media (max-width: 767px) {
	.wt-shelf { --_wave: 44px; }
	.wt-shelf__layer--vine-left, .wt-shelf__layer--vine-right { width: 84px; opacity: 0.75; }
	.wt-friends__layer--vine-left, .wt-friends__layer--vine-right { opacity: 0.6; }
	.wt-bookcard__stage { height: 252px; }
	.wt-shelf__sparkles .wt-spark:nth-child(n + 6),
	.wt-friends__sparkles .wt-spark:nth-child(n + 5) { display: none; }
}

/* Small screens: keep the vines in the margins so they never sit over the copy. */
@media (max-width: 599px) {
	.wt-shelf__layer--vine-left,
	.wt-shelf__layer--vine-right,
	.wt-friends__layer--vine-left,
	.wt-friends__layer--vine-right { width: 64px; opacity: 0.7; }
	.wt-shelf__layer--vine-left,
	.wt-friends__layer--vine-left { left: -26px; }
	.wt-shelf__layer--vine-right,
	.wt-friends__layer--vine-right { right: -26px; }
}
/* Sparkles never sit on top of headings or copy. */
.wt-world__copy, .wt-world__caption, .wt-section-head { position: relative; z-index: 2; }