/*
Theme Name: We Love Phonics
Theme URI: https://welovephonics.com
Author: We Love Phonics
Description: Lightweight block theme for We Love Phonics, simple and playful phonics help for parents teaching their kids to read at home. Tokens live in theme.json; sections are block patterns, so every word and image is editable in the block editor.
Version: 0.6.0
Requires at least: 6.6
Tested up to: 7.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: welovephonics
*/

/* Only what theme.json can't express lives here. */

:root {
	--wlp-focus: 0 0 0 3px var(--wp--preset--color--cream), 0 0 0 6px var(--wp--preset--color--teal);
	--wlp-ease: cubic-bezier(.2, .7, .2, 1);
}

/* Focus that is visible on every background. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: none;
	box-shadow: var(--wlp-focus);
	border-radius: 6px;
}

img { height: auto; }

/* ---------- Buttons ---------- */

.wp-element-button,
.wp-block-button__link {
	transition: background-color .2s var(--wlp-ease), transform .2s var(--wlp-ease), box-shadow .2s var(--wlp-ease);
	display: inline-flex;
	align-items: center;
	gap: .55em;
	min-height: 48px;
	text-decoration: none;
}

.is-style-soft .wp-block-button__link {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--teal);
}
.is-style-soft .wp-block-button__link:hover,
.is-style-soft .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--teal);
	color: var(--wp--preset--color--cream);
}

/* ---------- Card style for groups ---------- */

.wp-block-group.is-style-card {
	background: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--preset--shadow--soft);
	padding: var(--wp--preset--spacing--40);
}

/* ---------- Header ---------- */

/* The header stays on screen. WordPress wraps it in a template-part div that is exactly its height, so
   the wrapper is what sticks. Once you scroll, the logo shrinks so the header takes less room. */
.wp-site-blocks > .wp-block-template-part:first-child { position: sticky; top: 0; z-index: 50; }
.admin-bar .wp-site-blocks > .wp-block-template-part:first-child { top: var(--wp-admin--admin-bar--height, 0); }
@media (max-width: 600px) { .admin-bar .wp-site-blocks > .wp-block-template-part:first-child { top: 0; } } /* admin bar scrolls away on phones */
.wlp-header {
	position: relative;
	background: var(--wp--preset--color--cream);
	border-bottom: 1px solid rgba(14, 79, 85, .08);
	transition: padding .25s var(--wlp-ease, ease), box-shadow .25s ease;
}
.is-scrolled .wlp-header { padding-top: .35rem !important; padding-bottom: .35rem !important; box-shadow: 0 8px 18px -14px rgba(10, 58, 63, .55); }
.wlp-header .wlp-logo img { transition: height .25s var(--wlp-ease, ease); }
.is-scrolled .wlp-header .wlp-logo img { height: 64px; }

/* Header logo: the same die-cut sticker as the footer, slightly tilted. */
.wlp-header .wlp-logo--sticker { display: inline-block; transform: rotate(-3deg); transition: transform .25s var(--wlp-ease); }
.wlp-header .wlp-logo--sticker:hover { transform: rotate(0deg) scale(1.04); }
.wlp-header .wlp-logo img { display: block; height: 100px; width: auto; } /* logo v3 is wide (1.7:1): taller keeps "Read . Learn . Grow" legible */
@media (max-width: 599px) {
	.wlp-header .wlp-logo img { height: 72px; }
	.is-scrolled .wlp-header .wlp-logo img { height: 52px; }
}

.wlp-header .wp-block-navigation a { text-decoration: none; }
/* Menu items are the s a t p i letter cards from the hero's wall: one colour each, white die-cut
   edge (the header is mint, like the "t" card), tilted like cards pinned up by hand. Hover or focus
   straightens and lifts the card; the current page sits straight with a gold reward star. */
.wlp-header .wp-block-navigation .wp-block-navigation-item {
	--tile: #B83F2C; --tile-ink: #fff; --tilt: -3deg;   /* s: white on coral 5.55:1 */
}
.wlp-header .wp-block-navigation .wp-block-navigation-item:nth-child(5n+2) { --tile: #F2C14E; --tile-ink: #0E4F55; --tilt: 2deg; }  /* a: 5.52 */
.wlp-header .wp-block-navigation .wp-block-navigation-item:nth-child(5n+3) { --tile: #B8E3D6; --tile-ink: #0E4F55; --tilt: -2deg; } /* t: 6.61 (lighter than the mint header) */
.wlp-header .wp-block-navigation .wp-block-navigation-item:nth-child(5n+4) { --tile: #2E7F79; --tile-ink: #fff; --tilt: 3deg; }     /* p: 4.74 */
.wlp-header .wp-block-navigation .wp-block-navigation-item:nth-child(5n+5) { --tile: #F79D85; --tile-ink: #1D2B2D; --tilt: -1.5deg; } /* i: 7.05 */
.wlp-header .wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
	padding: .45rem .95rem;
	color: var(--tile-ink) !important;
	background: var(--tile);
	border: 3px solid #fff;
	border-radius: 12px;
	box-shadow: 0 6px 12px -6px rgba(10, 58, 63, .45);
	transform: rotate(var(--tilt));
	transition: transform .3s var(--wlp-ease, ease), box-shadow .3s ease;
}
.wlp-header .wp-block-navigation .wp-block-navigation-item__content:hover,
.wlp-header .wp-block-navigation .wp-block-navigation-item__content:focus-visible {
	transform: rotate(0deg) translateY(-3px);
	box-shadow: 0 10px 16px -8px rgba(10, 58, 63, .55);
}
.wlp-header .wp-block-navigation .wp-block-navigation-item__content:focus-visible {
	outline: 3px solid var(--wp--preset--color--teal, #0E4F55); outline-offset: 3px;
}
.wlp-header .wp-block-navigation .current-menu-item > a,
.wlp-header .wp-block-navigation a[aria-current="page"] { transform: rotate(0deg); }
.wlp-header .wp-block-navigation a[aria-current="page"]::after {
	content: "★"; position: absolute; top: -.7rem; right: -.55rem;
	font-size: 1.05rem; line-height: 1; color: var(--wp--preset--color--sun, #FFC23D);
	-webkit-text-stroke: 1.5px #fff; paint-order: stroke fill;
	filter: drop-shadow(0 2px 2px rgba(10, 58, 63, .35));
}
/* Phone menu (open overlay): big, centred tiles you can tap easily. */
.wlp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	align-items: center; padding-top: 2.5rem; gap: 1.1rem;
}
.wlp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: center; gap: 1.1rem; }
.wlp-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content.wp-block-navigation-item__content {
	min-width: 12rem; padding: .7rem 1.4rem; text-align: center;
	font-size: 1.375rem; font-weight: 800;
	border-width: 4px; border-radius: 16px;
	transform: rotate(calc(var(--tilt) / 2));
}
@media (prefers-reduced-motion: reduce) {
	.wlp-header .wp-block-navigation .wp-block-navigation-item__content { transition: none; }
}

/* Mobile menu overlay */
.wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--cream) !important;
	padding: var(--wp--preset--spacing--40);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	gap: .75rem;
	font-size: 1.5rem;
	font-weight: 800;
}
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	min-width: 48px;
	min-height: 48px;
	display: inline-grid;
	place-items: center;
}

/* ---------- Footer ---------- */

.wlp-footer a { color: inherit; }
.wlp-footer a:hover, .wlp-footer a:focus-visible { color: var(--wp--preset--color--sun); }
.wlp-footer .wp-block-social-links .wp-social-link { background: rgba(255, 255, 255, .12); color: #fff; }
.wlp-footer .wp-block-social-links .wp-social-link a { padding: .6em; }
.wlp-footer ul { list-style: none; padding: 0; margin: 0; }
.wlp-footer li + li { margin-top: .4rem; }
.wlp-footer .wlp-footer-label {
	font-size: .8125rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-weight: 800;
	color: var(--wp--preset--color--sun);
	margin: 0 0 .5rem;
}

/* ---------- Placeholders (clearly marked, for content still to come) ---------- */

.wlp-placeholder {
	outline: 3px dashed var(--wp--preset--color--coral);
	outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
	.wp-block-button__link:hover { transform: none; }
}

/* ---------- Hero (first screen) ---------- */

.wlp-eyebrow {
	display: inline-block;
	margin: 0;
	padding: .35rem .85rem;
	border-radius: 12px; /* not a pill: the label wraps to two lines on phones */
	background: var(--wp--preset--color--sun-soft);
	color: var(--wp--preset--color--teal);
	font-weight: 800;
	font-size: .9375rem;
}
.wlp-hero-art {
	position: relative;
	aspect-ratio: 1;
	max-width: 440px;
	margin-inline: auto;
	border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%;
	background: var(--wp--preset--color--mint-soft);
	display: grid;
	place-items: center;
}
.wlp-hero-art img { width: 62%; height: auto; }
.wlp-tile {
	position: absolute;
	display: grid;
	place-items: center;
	width: 3.25rem;
	height: 3.25rem;
	border-radius: 14px;
	background: #fff;
	color: var(--wp--preset--color--teal);
	font-weight: 900;
	font-size: 1.75rem;
	line-height: 1;
	box-shadow: var(--wp--preset--shadow--soft);
}
.wlp-tile.t1 { top: 6%; left: 10%; transform: rotate(-8deg); color: var(--wp--preset--color--coral-text); }
.wlp-tile.t2 { top: 14%; right: 4%; transform: rotate(7deg); }
.wlp-tile.t3 { bottom: 10%; left: 2%; transform: rotate(5deg); }
.wlp-tile.t4 { bottom: 4%; right: 14%; transform: rotate(-6deg); background: var(--wp--preset--color--sun); }
@media (max-width: 781px) {
	.wlp-hero-art { max-width: 300px; }
	.wlp-tile { width: 2.6rem; height: 2.6rem; font-size: 1.35rem; }
}

.wlp-404-mark { display: block; width: 120px; height: auto; margin-bottom: 1rem; }

/* =========================================================
   Phase 3 sections
   ========================================================= */

.wlp-section { padding-block: var(--wp--preset--spacing--60); }
.wlp-kicker {
	margin: 0;
	font-size: .9375rem;
	font-weight: 800;
	letter-spacing: .02em;
	color: var(--wp--preset--color--coral-text);
}
.wlp-arrow-link a {
	font-weight: 800;
	text-decoration: none;
	border-bottom: 3px solid var(--wp--preset--color--sun);
	padding-bottom: 2px;
}
.wlp-arrow-link a::after { content: " \2192"; }
.wlp-arrow-link a:hover { color: var(--wp--preset--color--coral-text); }

/* Photos: one radius, one gentle shadow, never stretched. */
.wlp-photo img,
.wlp-photo-pair img {
	width: 100%;
	height: auto;
	border-radius: var(--wp--custom--radius--lg);
	box-shadow: var(--wp--preset--shadow--lift);
	display: block;
}
.wlp-photo { margin: 0; }
.wlp-photo-note { margin: .6rem 0 0; font-size: .875rem; color: #4a5a5c; }

/* ---------- Hero ---------- */
.wlp-hero { padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60); }
.wlp-hero h1 { margin-block: .75rem 1rem; }
.wlp-hero__media { position: relative; }
.wlp-hero__media .wlp-photo img { aspect-ratio: 4 / 5; object-fit: cover; max-height: 620px; }
.wlp-hero__media .wlp-photo { transform: rotate(1.5deg); }
.wlp-badge {
	position: absolute;
	left: -12px;
	bottom: 28px;
	margin: 0;
	padding: .7rem 1rem;
	border-radius: 16px;
	background: var(--wp--preset--color--sun);
	color: var(--wp--preset--color--teal);
	font-weight: 700;
	line-height: 1.2;
	box-shadow: var(--wp--preset--shadow--soft);
	transform: rotate(-3deg);
	max-width: 14rem;
}
.wlp-badge strong { display: block; font-size: 1.25rem; font-weight: 900; }
@media (max-width: 781px) {
	.wlp-hero { padding-top: var(--wp--preset--spacing--30); }
	/* Phones: a short photo strip first, so the first screen has a picture and the headline. */
	.wlp-hero__cols { display: flex; flex-direction: column; }
	.wlp-hero__media { order: -1; }
	.wlp-hero__media .wlp-photo { transform: none; }
	.wlp-hero__media .wlp-photo img { aspect-ratio: 16 / 9; max-height: 220px; object-position: center 35%; }
	.wlp-badge { left: auto; right: 10px; bottom: -14px; font-size: .875rem; padding: .5rem .75rem; }
	.wlp-badge strong { font-size: 1rem; }
}

/* ---------- What we teach ---------- */
.wlp-teach__media .wlp-photo { transform: rotate(-2deg); max-width: 420px; }
.wlp-subjects { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .25rem; }
.wlp-subjects li {
	display: grid;
	grid-template-columns: 3.25rem 1fr;
	align-items: center;
	gap: 1rem;
	padding: .75rem 0;
	border-bottom: 1px dashed rgba(14, 79, 85, .2);
}
.wlp-subjects li:last-child { border-bottom: 0; }
.wlp-subjects strong { display: block; font-size: 1.25rem; color: var(--wp--preset--color--teal); }
.wlp-subjects__tile {
	display: grid; place-items: center;
	width: 3.25rem; height: 3.25rem;
	border-radius: 14px;
	background: #fff;
	box-shadow: var(--wp--preset--shadow--soft);
	font-weight: 900; font-size: 1.35rem;
	color: var(--wp--preset--color--teal);
}
.wlp-subjects li:nth-child(1) .wlp-subjects__tile { background: var(--wp--preset--color--sun); }
.wlp-subjects li:nth-child(3) .wlp-subjects__tile { color: var(--wp--preset--color--coral-text); }

/* ---------- Steps ---------- */
.wlp-steps__list {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: var(--wp--preset--spacing--40);
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.wlp-steps__list li { display: grid; gap: .35rem; align-content: start; }
.wlp-steps__list strong { font-size: 1.3125rem; color: var(--wp--preset--color--teal); }
.wlp-steps__num { font-size: 4.5rem; line-height: .9; font-weight: 900; color: var(--wp--preset--color--coral-text); } /* 4.72:1 on mint */
.wlp-steps__list li:nth-child(2) .wlp-steps__num { color: var(--wp--preset--color--teal); }
.wlp-steps__list li:nth-child(3) .wlp-steps__num { color: #8A5A00; } /* 5.04:1 on mint */
.wlp-steps__list--compact .wlp-steps__num { font-size: 3rem; }

/* How to start: three flashcards. With JavaScript (assets/js/flashcards.js) they are dealt face
   down when the section scrolls into view, then flip face up one after another. Without it, or
   with reduced motion, they simply sit face up. */
.wlp-steps > .wp-block-heading { text-align: center; }
.wlp-steps .wlp-steps__list:not(.wlp-steps__list--compact) {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.25rem, 3vw, 2.5rem);
	max-width: 1080px; margin-inline: auto;
	padding: .5rem 0;
}
.wlp-steps .wlp-steps__list:not(.wlp-steps__list--compact) li {
	--accent: var(--wp--preset--color--coral, #E8604C);
	--ink-accent: var(--wp--preset--color--coral-text, #B83F2C); /* 5.55:1 on white */
	--tilt: -2deg;
	position: relative;
	gap: .5rem;
	padding: 1.4rem 1.6rem 1.9rem;
	background: #fff;
	border-top: 12px solid var(--accent);
	border-radius: 24px;
	box-shadow: 0 2px 0 rgba(14, 79, 85, .06), 0 18px 30px -18px rgba(10, 58, 63, .45);
	transform: rotate(var(--tilt));
	transition: transform .35s cubic-bezier(.2, .8, .3, 1.2), box-shadow .35s ease;
}
.wlp-steps .wlp-steps__list:not(.wlp-steps__list--compact) li:nth-child(2) {
	--accent: var(--wp--preset--color--teal, #0E4F55); --ink-accent: var(--wp--preset--color--teal, #0E4F55); --tilt: 1.5deg;
}
.wlp-steps .wlp-steps__list:not(.wlp-steps__list--compact) li:nth-child(3) {
	--accent: var(--wp--preset--color--sun, #FFC23D); --ink-accent: #8A5A00; /* 6.0:1 on white */ --tilt: -1deg;
}
.wlp-steps .wlp-steps__list:not(.wlp-steps__list--compact) li:hover {
	transform: rotate(0deg) translateY(-6px);
	box-shadow: 0 2px 0 rgba(14, 79, 85, .06), 0 26px 36px -20px rgba(10, 58, 63, .5);
}
/* Hole punched for the flashcard ring. */
.wlp-steps .wlp-steps__list:not(.wlp-steps__list--compact) li::before {
	content: ""; position: absolute; top: 14px; right: 18px;
	width: 14px; height: 14px; border-radius: 50%;
	background: var(--wp--preset--color--mint-soft, #DDF1EC);
	box-shadow: inset 0 2px 3px rgba(10, 58, 63, .3);
}
.wlp-steps .wlp-steps__list:not(.wlp-steps__list--compact) .wlp-steps__num {
	font-size: 5rem; line-height: .85; color: var(--ink-accent);
	padding-bottom: .55rem; margin-bottom: .35rem;
	border-bottom: 2px dashed color-mix(in srgb, var(--accent) 55%, transparent);
	transform-origin: 30% 80%;
}
.wlp-steps .wlp-steps__list:not(.wlp-steps__list--compact) li:hover .wlp-steps__num { animation: wlp-num-wiggle .6s ease-in-out; }
.wlp-steps .wlp-steps__list:not(.wlp-steps__list--compact) strong { font-size: 1.375rem; line-height: 1.25; }
.wlp-steps .wp-block-buttons { justify-content: center; margin-top: clamp(2rem, 4vw, 3rem); }

/* The back of each card (teal with a gold star), shown only while it is being dealt. */
.wlp-flash-armed li::after {
	content: "★"; position: absolute; inset: -12px 0 0; border-radius: 24px;
	display: grid; place-items: center;
	font-size: 3.5rem; color: var(--wp--preset--color--sun, #FFC23D);
	background:
		repeating-linear-gradient(45deg, rgba(255, 255, 255, .06) 0 10px, transparent 10px 20px),
		var(--wp--preset--color--teal, #0E4F55);
	box-shadow: inset 0 0 0 6px rgba(255, 194, 61, .55), inset 0 0 0 9px var(--wp--preset--color--teal, #0E4F55), inset 0 0 0 10px rgba(255, 194, 61, .35);
	opacity: 0; pointer-events: none;
}
.wlp-flash-armed li:not(.is-dealt) { opacity: 0; }
.wlp-flash-armed li.is-dealt { animation: wlp-deal 1.15s var(--d, 0s) both; }
.wlp-flash-armed li.is-dealt::after { animation: wlp-card-back 1.15s var(--d, 0s) both; }
.wlp-flash-armed li.is-done, .wlp-flash-armed li.is-done::after { animation: none; }
@media print { .wlp-flash-armed li:not(.is-dealt) { opacity: 1; } .wlp-flash-armed li::after { display: none; } }
@keyframes wlp-deal {
	0% { opacity: 0; transform: perspective(900px) translate(-40px, 60px) rotate(-10deg) rotateY(180deg); animation-timing-function: cubic-bezier(.2, .7, .3, 1); }
	45% { opacity: 1; transform: perspective(900px) translate(0, 0) rotate(var(--tilt)) rotateY(180deg); animation-timing-function: ease-in-out; }
	100% { opacity: 1; transform: perspective(900px) rotate(var(--tilt)) rotateY(0deg); }
}
/* Ease-in-out is symmetric, so the card is edge-on halfway through the flip (72.5%). */
@keyframes wlp-card-back {
	0%, 72% { opacity: 1; }
	73%, 100% { opacity: 0; }
}
@keyframes wlp-num-wiggle {
	0%, 100% { transform: rotate(0); }
	30% { transform: rotate(-8deg) scale(1.06); }
	65% { transform: rotate(5deg); }
}
@media (max-width: 781px) {
	.wlp-steps .wlp-steps__list:not(.wlp-steps__list--compact) { grid-template-columns: 1fr; max-width: 440px; gap: 1.5rem; }
	.wlp-steps .wlp-steps__list:not(.wlp-steps__list--compact) .wlp-steps__num { font-size: 4rem; }
}
@media (prefers-reduced-motion: reduce) {
	.wlp-steps .wlp-steps__list:not(.wlp-steps__list--compact) li,
	.wlp-steps .wlp-steps__list:not(.wlp-steps__list--compact) li:hover { transition: none; transform: rotate(var(--tilt)); }
	.wlp-steps .wlp-steps__list:not(.wlp-steps__list--compact) li:hover .wlp-steps__num { animation: none; }
}

/* ---------- Closing CTA ---------- */
.wlp-cta { padding-block: var(--wp--preset--spacing--50); }
.wlp-cta h2 { color: var(--wp--preset--color--teal); margin: 0 0 .5rem; }
.wlp-cta p { margin: 0; }
.wlp-cta a { color: var(--wp--preset--color--teal); }
@media (max-width: 781px) { .wlp-cta__buttons { justify-content: flex-start !important; } }

/* ---------- Inner page headers ---------- */
.wlp-page-head { padding-block: var(--wp--preset--spacing--50); }
.wlp-page-head h1 { margin: 0 0 .75rem; font-size: clamp(2.125rem, 6vw, 3.5rem); }
.wlp-page-head__media .wlp-photo img { aspect-ratio: 1; object-fit: cover; max-height: 380px; }

@media (max-width: 781px) {
	.wlp-page-head__media .wlp-photo img { aspect-ratio: 16 / 9; max-height: 200px; }
}
.wlp-jump { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.wlp-jump a {
	display: inline-flex; align-items: center; min-height: 44px;
	padding: .4rem 1rem; border-radius: 999px;
	background: #fff; color: var(--wp--preset--color--teal);
	box-shadow: inset 0 0 0 2px rgba(14, 79, 85, .18);
	font-weight: 800; text-decoration: none;
}
.wlp-jump a:hover { box-shadow: inset 0 0 0 2px var(--wp--preset--color--teal); }
.wlp-group-section { scroll-margin-top: 90px; }
.wlp-group-section h2 { margin-bottom: 0; }
.wlp-group-intro { margin-top: .25rem; color: #3f4e50; max-width: 60ch; }
.wlp-photo-pair { display: grid !important; grid-template-columns: 1.3fr 1fr; gap: .75rem; align-items: end; }
.wlp-photo-pair .wlp-photo img { aspect-ratio: 4 / 5; object-fit: cover; }

/* ---------- Contact ---------- */
.wlp-details { margin: 1.25rem 0; display: grid; grid-template-columns: auto 1fr; gap: .6rem 1rem; }
.wlp-details dt { font-weight: 800; color: var(--wp--preset--color--teal); }
.wlp-details dd { margin: 0; }
.wlp-map { margin-top: var(--wp--preset--spacing--30); border-radius: var(--wp--custom--radius--lg); overflow: hidden; box-shadow: var(--wp--preset--shadow--soft); }
.wlp-map iframe { display: block; width: 100%; height: 320px; border: 0; }
@media (max-width: 781px) {
	/* Phones: the form first, details after. */
	.wlp-contact__cols { display: flex; flex-direction: column-reverse; }
}

/* =========================================================
   Hero v2: full-background illustrated classroom (Cover block)
   ========================================================= */

.wlp-hero-cover {
	padding-block: var(--wp--preset--spacing--60) !important;
	align-items: center;
}
/* Anchor the scene to its left edge so the empty cream wall sits behind the text and the
   children stay on the right (overrides the block focal point on wide screens). */
.wlp-hero-cover .wp-block-cover__image-background { object-fit: cover; object-position: 8% 50% !important; }
/* A soft cream wash from the left keeps the headline crisp; the scene stays clear on the right. */
.wlp-hero-cover .wp-block-cover__background {
	opacity: 1 !important;
	background: linear-gradient(90deg,
		rgba(255, 246, 234, .97) 0%,
		rgba(255, 246, 234, .92) 32%,
		rgba(255, 246, 234, .6) 46%,
		rgba(255, 246, 234, 0) 60%) !important;
}
/* Content position "left" lets the inner box shrink against the screen edge; line it up with the
   header instead (same 1200px column). */
.wp-block-cover.wlp-hero-cover.has-custom-content-position.has-custom-content-position .wp-block-cover__inner-container {
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
	color: var(--wp--preset--color--ink);
}
.wlp-hero-cover .wlp-hero__text { margin-left: 0 !important; margin-right: auto !important; }
@media (min-width: 1240px) {
	.wp-block-cover.wlp-hero-cover .wp-block-cover__inner-container { padding-inline: 0; }
}
.wlp-hero__text { max-width: 540px; }
.wlp-hero__text h1 { margin-block: .6rem .4rem; color: var(--wp--preset--color--teal); font-size: clamp(2.375rem, 4.2vw, 3.4rem); }
.wlp-hero__lead { font-size: 1.125rem; margin: 0; max-width: 32rem; }
.wlp-hero__text .wp-block-buttons { margin-top: 1.25rem; }
.wlp-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	margin-top: 1.25rem;
	padding: .45rem .9rem;
	border-radius: 999px;
	background: var(--wp--preset--color--teal);
	color: var(--wp--preset--color--cream);
	font-size: .9375rem;
	font-weight: 700;
}
.wlp-hero__badge::before { content: "\2605"; color: var(--wp--preset--color--sun); }
.wlp-hero__badge strong { color: #fff; }

@media (max-width: 1024px) {
	/* Phones and tablets: the scene as a band across the top, focused on the children, fading into
	   cream behind the headline. Sizes are capped so tablets don't get a giant band. */
	.wlp-hero-cover {
		min-height: 0 !important;
		padding-top: calc(min(62vw, 430px, 46vh) + 8px) !important;
		padding-bottom: var(--wp--preset--spacing--50) !important;
		align-items: flex-end;
	}
	.wlp-hero-cover .wp-block-cover__image-background {
		inset: 0 0 auto 0 !important;
		height: min(78vw, 540px, 58vh) !important;
		object-position: 80% 50% !important;
	}
	.wlp-hero-cover .wp-block-cover__background {
		background: linear-gradient(180deg,
			rgba(255, 246, 234, 0) 0,
			rgba(255, 246, 234, 0) min(48vw, 330px, 35vh),
			rgba(255, 246, 234, .92) min(66vw, 455px, 49vh),
			var(--wp--preset--color--cream) min(78vw, 540px, 58vh)) !important;
	}
	.wlp-hero__text { max-width: 640px; }
	.wlp-hero__text h1 { font-size: clamp(2rem, 5.5vw, 2.8rem); }
}
@media (max-width: 600px) {
	.wlp-hero__text h1 { font-size: clamp(2rem, 9vw, 2.6rem); }
}
@media (min-width: 1600px) {
	.wlp-hero-cover { min-height: 760px !important; }
}

/* =========================================================
   Stickers: every button is a reward sticker a teacher would hand out.
   White die-cut edge, a slight tilt, a shadow that lifts when you hover,
   and a gold star that pops on like a "well done" sticker.
   ========================================================= */

:root {
	--wlp-sticker-edge: 0 0 0 4px #fff;
	--wlp-sticker-shadow: 0 7px 0 -1px rgba(10, 58, 63, .16), 0 12px 22px -10px rgba(10, 58, 63, .45);
	--wlp-sticker-shadow-up: 0 10px 0 -1px rgba(10, 58, 63, .14), 0 20px 30px -12px rgba(10, 58, 63, .5);
}
html { scroll-behavior: smooth; }

.wp-block-button__link,
.wp-element-button,
.wlp-sticker,
.wlp-jump a {
	position: relative;
	border-radius: 999px;
	box-shadow: var(--wlp-sticker-edge), var(--wlp-sticker-shadow);
	transform: rotate(-1.5deg);
	transition: transform .25s var(--wlp-ease), box-shadow .25s var(--wlp-ease), background-color .2s var(--wlp-ease);
}
/* Neighbouring stickers tilt different ways, like they were stuck on by hand. */
.wp-block-button:nth-child(2n) .wp-block-button__link,
.wlp-jump a:nth-child(2n) { transform: rotate(1.2deg); }
.wlp-jump a:nth-child(3n) { transform: rotate(-.6deg); }

.wp-block-button__link:hover,
.wp-block-button__link:focus-visible,
.wp-element-button:hover,
.wp-element-button:focus-visible,
.wlp-sticker:hover,
.wlp-sticker:focus-visible,
.wlp-jump a:hover,
.wlp-jump a:focus-visible {
	transform: rotate(0deg) translateY(-3px) scale(1.03) !important;
	box-shadow: var(--wlp-sticker-edge), var(--wlp-sticker-shadow-up);
}
.wp-block-button__link:active,
.wp-element-button:active,
.wlp-sticker:active { transform: rotate(0deg) translateY(1px) scale(.98) !important; }

/* The reward: a gold star sticker pops onto the corner on hover and keyboard focus. */
.wp-block-button__link::after,
.wlp-sticker::after,
.wlp-submit::after {
	content: "\2605";
	position: absolute;
	top: -12px;
	right: -8px;
	width: 26px;
	height: 26px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--wp--preset--color--sun);
	color: var(--wp--preset--color--teal);
	font-size: 14px;
	line-height: 1;
	box-shadow: 0 0 0 3px #fff, 0 4px 8px -2px rgba(10, 58, 63, .4);
	transform: scale(0) rotate(-40deg);
	transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
	pointer-events: none;
}
.wp-block-button__link:hover::after,
.wp-block-button__link:focus-visible::after,
.wlp-sticker:hover::after,
.wlp-sticker:focus-visible::after,
.wlp-submit:hover::after,
.wlp-submit:focus-visible::after { transform: scale(1) rotate(12deg); }

/* Focus ring sits outside the white sticker edge. */
.wp-block-button__link:focus-visible,
.wp-element-button:focus-visible,
.wlp-sticker:focus-visible,
.wlp-jump a:focus-visible {
	outline: 3px solid var(--wp--preset--color--teal);
	outline-offset: 6px;
}

/* On teal backgrounds (footer, trust strip) the edge stays white and the shadow goes darker. */
.wlp-footer .wlp-sticker { box-shadow: 0 0 0 4px #fff, 0 8px 18px -6px rgba(0, 0, 0, .45); }

/* Back to top */
.wlp-footer-bottom { gap: 1rem; }
.wlp-footer-bottom p { margin: 0; }
.wlp-to-top {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: 46px;
	padding: .55rem 1.15rem;
	background: var(--wp--preset--color--sun);
	color: var(--wp--preset--color--teal) !important;
	font-weight: 800;
	text-decoration: none;
	transform: rotate(2deg);
}
.wlp-to-top span { font-size: 1.15em; line-height: 1; }
.wlp-js .wlp-to-top {
	position: fixed; right: 18px; bottom: 18px; z-index: 45;
	opacity: 0; visibility: hidden; transform: translateY(14px) rotate(2deg);
	transition: opacity .25s ease, transform .3s var(--wlp-ease, ease), visibility 0s linear .3s;
	box-shadow: 0 0 0 3px #fff, 0 10px 20px -8px rgba(10, 58, 63, .5);
}
.wlp-js .wlp-to-top.is-visible { opacity: 1; visibility: visible; transform: rotate(2deg); transition-delay: 0s; }
.wlp-js body:has(.wlp-consent) .wlp-to-top { bottom: 128px; } /* stay above the cookie banner */
@media (max-width: 600px) { .wlp-js .wlp-to-top { right: 12px; bottom: 12px; padding: .5rem .9rem; min-height: 44px; } }
.wlp-to-top::after { background: var(--wp--preset--color--coral); color: #fff; }

/* Footer logo: a die-cut sticker (white edge baked into the image), slightly tilted. */
.wlp-footer .wlp-logo--sticker { display: inline-block; transform: rotate(-3deg); transition: transform .25s var(--wlp-ease); }
.wlp-footer .wlp-logo--sticker:hover { transform: rotate(0deg) scale(1.03); }
.wlp-footer .wlp-logo--sticker img { display: block; height: 140px; width: auto; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.wp-block-button__link, .wp-element-button, .wlp-sticker, .wlp-jump a,
	.wlp-footer .wlp-logo--sticker { transform: none !important; }
	.wp-block-button__link::after, .wlp-sticker::after, .wlp-submit::after { transition: none; }
}

/* Outlined stickers keep their teal outline inside the white die-cut edge. */
.is-style-soft .wp-block-button__link,
.wlp-jump a { box-shadow: inset 0 0 0 2px var(--wp--preset--color--teal), var(--wlp-sticker-edge), var(--wlp-sticker-shadow); }
.is-style-soft .wp-block-button__link:hover,
.is-style-soft .wp-block-button__link:focus-visible,
.wlp-jump a:hover,
.wlp-jump a:focus-visible { box-shadow: inset 0 0 0 2px var(--wp--preset--color--teal), var(--wlp-sticker-edge), var(--wlp-sticker-shadow-up); }

/* =========================================================
   "start here" ↔ the s a t p i n wall
   The headline's "start here" is highlighted and points at the letter wall in the picture;
   the tile row repeats the wall's six letters, with the n tilted like the one the boy is fixing.
   ========================================================= */

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px); white-space: nowrap;
}

.wlp-start {
	position: relative;
	background: linear-gradient(transparent 58%, var(--wp--preset--color--sun) 58%, var(--wp--preset--color--sun) 90%, transparent 90%);
	color: inherit;
	padding: 0 .08em;
	white-space: nowrap;
}
/* Hand-drawn arrow from "start here" towards the letter wall (up and to the right). */
.wlp-start::after {
	content: "";
	position: absolute;
	right: -1.15em;
	top: -.05em;
	width: .95em;
	height: .8em;
	background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 50' fill='none' stroke='%23E8604C' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 44 C 14 26, 28 14, 50 8'/%3E%3Cpath d='M36 4 L 51 8 L 43 21'/%3E%3C/svg%3E");
	pointer-events: none;
}

.wlp-satpin { margin: .9rem 0 1rem; }
.wlp-satpin__tiles { display: flex; gap: .45rem; margin: 0; }
.wlp-satpin__tiles span[aria-hidden] {
	display: grid;
	place-items: center;
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 11px;
	font-weight: 900;
	font-size: 1.45rem;
	line-height: 1;
	color: #fff;
	box-shadow: 0 0 0 3px #fff, 0 6px 12px -6px rgba(10, 58, 63, .45);
	transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
/* Same colours as the cards on the classroom wall: coral, yellow, mint, teal, coral, yellow. */
.wlp-satpin__tiles span:nth-of-type(2) { background: #C9553F; }
.wlp-satpin__tiles span:nth-of-type(3) { background: #F2C14E; color: var(--wp--preset--color--teal); }
.wlp-satpin__tiles span:nth-of-type(4) { background: #7CC7B8; color: var(--wp--preset--color--teal); }
.wlp-satpin__tiles span:nth-of-type(5) { background: var(--wp--preset--color--teal); }
.wlp-satpin__tiles span:nth-of-type(6) { background: #C9553F; }
.wlp-satpin__tiles span:nth-of-type(7) { background: #F2C14E; color: var(--wp--preset--color--teal); }
/* The n slipped, like on the wall... and gets set straight. */
.wlp-satpin__tiles .is-fixing { transform: rotate(-24deg) translateY(4px); animation: wlp-fix-n 1.6s 1.2s cubic-bezier(.34, 1.56, .64, 1) forwards; }
.wlp-satpin:hover .is-fixing { transform: rotate(0deg); }
@keyframes wlp-fix-n {
	0% { transform: rotate(-24deg) translateY(4px); }
	35% { transform: rotate(-30deg) translateY(2px); }
	70% { transform: rotate(6deg) translateY(0); }
	100% { transform: rotate(0deg) translateY(0); }
}
.wlp-satpin__note { margin: .8rem 0 0; font-size: 1rem; color: #3f4e50; max-width: 34rem; }
.wlp-satpin__note strong { color: var(--wp--preset--color--teal); }

@media (max-width: 1024px) {
	/* The wall is above the text here: the arrow points up. */
	.wlp-start::after { right: -1.05em; top: -.35em; transform: rotate(-40deg); }
}
@media (max-width: 600px) {
	.wlp-satpin__tiles span[aria-hidden] { width: 2.3rem; height: 2.3rem; font-size: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
	.wlp-satpin__tiles .is-fixing { animation: none; transform: rotate(-12deg); }
}

/* =========================================================
   "We teach a phonics foundation": illustration + learning path
   ========================================================= */

/* The illustration as a big sticker: thick white die-cut edge, slight tilt. */
.wlp-sticker-photo { margin: 0; }
.wlp-sticker-photo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 28px;
	border: 10px solid #fff;
	box-shadow: 0 18px 40px -16px rgba(10, 58, 63, .45);
	transform: rotate(-2deg);
}
.wlp-teach__media { max-width: 460px; }
@media (max-width: 781px) {
	.wlp-teach__media { max-width: 340px; margin-inline: auto; }
}

/* The path: each subject is a coloured icon sticker, joined by a dotted line. */
.wlp-path { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 1.1rem; }
.wlp-path__item {
	position: relative;
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: 1rem;
	align-items: start;
}
.wlp-path__item:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 27px;
	top: 60px;
	bottom: -1.1rem;
	border-left: 3px dotted var(--wp--preset--color--mint);
}
.wlp-path__icon {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	color: #fff;
	box-shadow: 0 0 0 4px #fff, 0 8px 16px -8px rgba(10, 58, 63, .5);
	transform: rotate(-6deg);
}
.wlp-path__item:nth-child(2n) .wlp-path__icon { transform: rotate(5deg); }
.wlp-path__icon svg { width: 28px; height: 28px; }
.wlp-path__item--phonics .wlp-path__icon { background: #C9553F; }
.wlp-path__item--reading .wlp-path__icon { background: var(--wp--preset--color--teal); }
.wlp-path__item--writing .wlp-path__icon { background: var(--wp--preset--color--sun); color: var(--wp--preset--color--teal); }
.wlp-path__item--grammar .wlp-path__icon { background: var(--wp--preset--color--mint); color: var(--wp--preset--color--teal); }
.wlp-path__item--handwriting .wlp-path__icon { background: var(--wp--preset--color--teal-deep); }
.wlp-path__text { padding-top: .35rem; color: #3f4e50; line-height: 1.5; }
.wlp-path__text strong { display: block; font-size: 1.25rem; color: var(--wp--preset--color--teal); margin-bottom: .1rem; }

@media (prefers-reduced-motion: reduce) {
	.wlp-sticker-photo img, .wlp-path__icon { transform: none !important; }
}

/* =========================================================
   Guides (Learn): topic chips, guide cards, article page
   ========================================================= */

/* Learn and topic page head: a sunny dotted band; on Learn the title is spelled in letter tiles. */
.wlp-learn-head {
	background-color: var(--wp--preset--color--sun-soft);
	background-image: radial-gradient(circle, rgba(184, 63, 44, .12) 2px, transparent 2.5px);
	background-size: 22px 22px;
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}
.wlp-learn-title { margin: .2rem 0 1rem; line-height: 1; }
.wlp-learn-title__tiles { display: inline-flex; gap: .55rem; }
.wlp-learn-title__tiles span {
	display: grid;
	place-items: center;
	width: clamp(3.4rem, 9vw, 5.4rem);
	height: clamp(3.4rem, 9vw, 5.4rem);
	border-radius: 18px;
	font-size: clamp(2.2rem, 6vw, 3.6rem);
	font-weight: 900;
	color: #fff;
	background: var(--wp--preset--color--coral-text);
	box-shadow: 0 0 0 4px #fff, 0 10px 18px rgba(10, 58, 63, .2);
	transform: rotate(-6deg);
	transition: transform .3s var(--wlp-ease);
}
.wlp-learn-title__tiles span:nth-child(2) { background: var(--wp--preset--color--sun); color: var(--wp--preset--color--teal); transform: rotate(4deg) translateY(4px); }
.wlp-learn-title__tiles span:nth-child(3) { background: var(--wp--preset--color--mint); color: var(--wp--preset--color--teal); transform: rotate(-3deg); }
.wlp-learn-title__tiles span:nth-child(4) { background: var(--wp--preset--color--teal); transform: rotate(5deg) translateY(2px); }
.wlp-learn-title__tiles span:nth-child(5) { background: #F79D85; color: var(--wp--preset--color--ink); transform: rotate(-4deg); }
@media (prefers-reduced-motion: no-preference) {
	.wlp-learn-title:hover .wlp-learn-title__tiles span { animation: wlp-hop .5s var(--wlp-ease); }
	.wlp-learn-title:hover .wlp-learn-title__tiles span:nth-child(2) { animation-delay: 60ms; }
	.wlp-learn-title:hover .wlp-learn-title__tiles span:nth-child(3) { animation-delay: 120ms; }
	.wlp-learn-title:hover .wlp-learn-title__tiles span:nth-child(4) { animation-delay: 180ms; }
	.wlp-learn-title:hover .wlp-learn-title__tiles span:nth-child(5) { animation-delay: 240ms; }
}
.wlp-learn-head > p.has-large-font-size { max-width: 46rem; }
.wlp-learn-facts { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: .4rem 0 0; font-weight: 700; color: var(--wp--preset--color--teal); }
.wlp-learn-facts span { display: inline-flex; align-items: baseline; gap: .3rem; }
.wlp-learn-facts span + span::before { content: "•"; margin-right: 1rem; color: var(--wp--preset--color--coral-text); }
.wlp-learn-facts strong { font-size: 1.35rem; font-weight: 900; color: var(--wp--preset--color--coral-text); }

/* Topic stickers: coloured pills, slightly tilted, with a count bubble. */
.wlp-topics { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.25rem; }
.wlp-topics__chip {
	--chip: #fff; --chip-ink: var(--wp--preset--color--teal);
	display: inline-flex; align-items: center; gap: .55rem; min-height: 46px;
	padding: .4rem .55rem .4rem 1.05rem; border-radius: 999px;
	background: var(--chip); color: var(--chip-ink);
	box-shadow: 0 0 0 3px #fff, 0 6px 14px rgba(10, 58, 63, .14);
	font-weight: 800; text-decoration: none;
	transform: rotate(-1.5deg);
	transition: transform .2s var(--wlp-ease), box-shadow .2s var(--wlp-ease);
}
.wlp-topics__chip:nth-child(2n) { transform: rotate(1.5deg); }
.wlp-topics__chip:nth-child(5n+2) { --chip: var(--wp--preset--color--mint-soft); }
.wlp-topics__chip:nth-child(5n+3) { --chip: #fff; }
.wlp-topics__chip:nth-child(5n+4) { --chip: var(--wp--preset--color--mint-soft); }
.wlp-topics__chip:hover, .wlp-topics__chip:focus-visible { transform: translateY(-3px) rotate(0); box-shadow: 0 0 0 3px #fff, 0 12px 22px rgba(10, 58, 63, .2); }
.wlp-topics__chip[aria-current="page"] { --chip: var(--wp--preset--color--teal); --chip-ink: #fff; }
.wlp-topics__n {
	display: grid; place-items: center; min-width: 1.8rem; height: 1.8rem; padding-inline: .35rem;
	border-radius: 999px; background: var(--wp--preset--color--coral-text); color: #fff; /* 5.55:1 */
	font-size: .875rem; font-weight: 900;
}
.wlp-topics__chip[aria-current="page"] .wlp-topics__n { background: var(--wp--preset--color--sun); color: var(--wp--preset--color--teal-deep); }

/* Guide cards: a polka-dot band in the letter-tile colours, cycling by position. */
.wlp-post-grid .wp-block-post-template { gap: var(--wp--preset--spacing--40); }
.wlp-post-card {
	--band: var(--wp--preset--color--coral);
	position: relative;
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: .6rem;
	padding: 2.4rem var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--lg);
	background: #fff;
	box-shadow: var(--wp--preset--shadow--soft);
	overflow: hidden;
	transition: transform .25s var(--wlp-ease), box-shadow .25s var(--wlp-ease);
}
.wlp-post-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 14px;
	background: var(--band) radial-gradient(circle, rgba(255, 255, 255, .45) 2px, transparent 2.5px) 0 0 / 12px 12px;
}
.wp-block-post:nth-child(5n+2) .wlp-post-card { --band: var(--wp--preset--color--sun); }
.wp-block-post:nth-child(5n+3) .wlp-post-card { --band: var(--wp--preset--color--mint); }
.wp-block-post:nth-child(5n+4) .wlp-post-card { --band: #2E7F79; }
.wp-block-post:nth-child(5n+5) .wlp-post-card { --band: #F79D85; }
.wlp-post-card:hover, .wlp-post-card:focus-within { transform: translateY(-4px); box-shadow: var(--wp--preset--shadow--lift); }
.wlp-post-card > * { margin: 0 !important; }
.wlp-post-card__topic, .wlp-article__topic { font-size: .875rem; font-weight: 800; }
.wlp-post-card__topic a, .wlp-article__topic a { color: var(--wp--preset--color--coral-text); text-decoration: none; }
.wlp-post-card__title { font-size: 1.375rem; line-height: 1.25; }
.wlp-post-card__title a { color: var(--wp--preset--color--teal); text-decoration: none; }
/* The whole card is the link target; the title stays the only real link. */
.wlp-post-card__title a::after { content: ""; position: absolute; inset: 0; }
.wlp-post-card__topic a { position: relative; z-index: 1; }
.wlp-post-card__excerpt { color: #3f4e50; }
.wlp-post-card__excerpt .wp-block-post-excerpt__more-text { display: none; }
.wlp-post-grid .wp-block-query-pagination { margin-top: var(--wp--preset--spacing--50); font-weight: 800; }

/* ---------- Home "Guides for parents": a bento of guide tiles (wlp-core includes/guide-tiles.php adds the art
   panel of letter tiles, the reading time and "Read the guide"). Used on Home, Learn, topic pages and search
   (pattern post-grid), where the first guide leads as a big dark tile and the rest are compact, title only;
   .wlp-guides--row ("Keep reading" under a guide) is a plain row of compact tiles.
   Contrast: on teal-deep, white 12.4:1, mint-soft 10.6:1, sun 7.7:1; teal on white 9.3:1. ---------- */
.wlp-guides .wp-block-post-template { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: dense; gap: 1.5rem; }
.wlp-guides:not(.wlp-guides--row) .wp-block-post:first-child { grid-column: span 2; grid-row: span 2; }
.wlp-guide-tile {
	--panel: var(--wp--preset--color--sun-soft);
	gap: .55rem;
	padding: 0 0 1.4rem;
	border-radius: 28px;
	box-shadow: 0 0 0 4px #fff, 0 14px 30px rgba(14, 79, 85, .14);
	transition: transform .3s var(--wlp-ease), box-shadow .3s var(--wlp-ease);
}
.wlp-guide-tile::before { content: none; }
.wlp-guide-tile > *:not(.wlp-guide-tile__art) { padding-inline: 1.5rem; }
/* Panel colours cycle: sun-soft, mint-soft, coral-text, teal. */
.wp-block-post:nth-child(4n+3) .wlp-guide-tile { --panel: var(--wp--preset--color--mint-soft); }
.wp-block-post:nth-child(4n+4) .wlp-guide-tile { --panel: var(--wp--preset--color--coral-text); }
.wp-block-post:nth-child(4n+5) .wlp-guide-tile { --panel: var(--wp--preset--color--teal); }
.wlp-guide-tile:hover, .wlp-guide-tile:focus-within { transform: translateY(-6px) rotate(-.6deg); box-shadow: 0 0 0 4px #fff, 0 22px 44px rgba(14, 79, 85, .22); }
.wlp-guide-tile:has(a:focus-visible) { outline: 3px solid var(--wp--preset--color--sun); outline-offset: 5px; }
.wlp-guide-tile .wlp-post-card__title a:focus-visible { outline: none; }

.wlp-guide-tile__art {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 9.5rem;
	margin-bottom: .6rem;
	padding: 2.4rem 1rem 1.6rem;
	background-color: var(--panel);
	background-image: radial-gradient(circle, rgba(255, 255, 255, .5) 2px, transparent 2.5px);
	background-size: 18px 18px;
}
.wlp-guide-tile__tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.wlp-guide-tile__tiles span {
	display: grid;
	place-items: center;
	min-width: 2.9rem;
	height: 2.9rem;
	padding-inline: .35rem;
	border-radius: 12px;
	font-size: 1.6rem;
	font-weight: 900;
	line-height: 1;
	color: #fff;
	background: var(--wp--preset--color--coral-text);
	box-shadow: 0 0 0 3px #fff, 0 6px 12px rgba(0, 0, 0, .14);
	transform: rotate(-5deg);
}
.wlp-guide-tile__tiles--many { gap: .35rem; flex-wrap: nowrap; }
.wlp-guide-tile__tiles--many span { min-width: 2.25rem; height: 2.25rem; font-size: 1.3rem; border-radius: 10px; }
.wlp-guide-tile__tiles span:nth-child(4n+2) { background: var(--wp--preset--color--sun); color: var(--wp--preset--color--teal); transform: rotate(4deg) translateY(3px); }
.wlp-guide-tile__tiles span:nth-child(4n+3) { background: var(--wp--preset--color--mint); color: var(--wp--preset--color--teal); transform: rotate(-2deg); }
.wlp-guide-tile__tiles span:nth-child(4n+4) { background: var(--wp--preset--color--teal); transform: rotate(6deg) translateY(2px); }
.wlp-guide-tile__time {
	position: absolute;
	top: .8rem;
	right: .8rem;
	padding: .2rem .65rem;
	border-radius: 999px;
	background: #fff;
	color: var(--wp--preset--color--teal);
	font-size: .8125rem;
	font-weight: 800;
}
.wlp-guide-tile__start {
	position: absolute;
	top: .7rem;
	left: .8rem;
	padding: .3rem .8rem;
	border-radius: 999px;
	background: var(--wp--preset--color--sun);
	color: var(--wp--preset--color--teal-deep);
	box-shadow: 0 0 0 3px #fff;
	font-size: .875rem;
	font-weight: 900;
	transform: rotate(-4deg);
}
.wlp-guide-tile .wlp-post-card__title { font-size: 1.25rem; }
.wlp-guide-tile .wlp-post-card__excerpt { display: none; }
.wlp-guide-tile__go {
	margin-top: auto;
	padding-top: .4rem;
	font-size: .9375rem;
	font-weight: 800;
	color: var(--wp--preset--color--coral-text);
}
.wlp-guide-tile__go::after { content: " →"; display: inline-block; transition: transform .25s var(--wlp-ease); }
.wlp-guide-tile:hover .wlp-guide-tile__go::after { transform: translateX(5px); }

/* The start-here guide: one big dark tile. */
.wlp-guides:not(.wlp-guides--row) .wp-block-post:first-child .wlp-guide-tile { background: var(--wp--preset--color--teal-deep); }
.wlp-guides:not(.wlp-guides--row) .wp-block-post:first-child .wlp-guide-tile__art { flex: 1; min-height: 15rem; background-color: transparent; background-image: radial-gradient(circle, rgba(255, 255, 255, .08) 2px, transparent 2.5px); }
.wlp-guides:not(.wlp-guides--row) .wp-block-post:first-child .wlp-guide-tile__tiles { gap: 1rem; }
.wlp-guides:not(.wlp-guides--row) .wp-block-post:first-child .wlp-guide-tile__tiles span { min-width: clamp(5rem, 9vw, 7.5rem); height: clamp(5rem, 9vw, 7.5rem); border-radius: 24px; font-size: clamp(3rem, 5.4vw, 4.6rem); box-shadow: 0 0 0 5px #fff, 0 12px 24px rgba(0, 0, 0, .3); }
.wlp-guides:not(.wlp-guides--row) .wp-block-post:first-child .wlp-post-card__title { font-size: clamp(1.6rem, 2.6vw, 2.1rem); line-height: 1.15; }
.wlp-guides:not(.wlp-guides--row) .wp-block-post:first-child .wlp-post-card__title a { color: #fff; }
.wlp-guides:not(.wlp-guides--row) .wp-block-post:first-child .wlp-post-card__topic a { color: var(--wp--preset--color--sun); }
.wlp-guides:not(.wlp-guides--row) .wp-block-post:first-child .wlp-post-card__excerpt { display: block; color: var(--wp--preset--color--mint-soft); font-size: 1.0625rem; }
.wlp-guides:not(.wlp-guides--row) .wp-block-post:first-child .wlp-guide-tile__go { color: var(--wp--preset--color--sun); font-size: 1.0625rem; }

@media (prefers-reduced-motion: no-preference) {
	.wlp-guide-tile:hover .wlp-guide-tile__tiles span { animation: wlp-hop .5s calc(var(--i, 0) * 70ms) var(--wlp-ease); }
}
@keyframes wlp-hop { 40% { translate: 0 -10px; } }
@media (prefers-reduced-motion: reduce) {
	.wlp-guide-tile:hover, .wlp-guide-tile:focus-within { transform: none; }
}
@media (max-width: 1023px) {
	.wlp-guides .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wlp-guides:not(.wlp-guides--row) .wp-block-post:first-child { grid-row: auto; }
	.wlp-guides:not(.wlp-guides--row) .wp-block-post:first-child .wlp-guide-tile__art { min-height: 12rem; }
}
/* Tablets (two columns): a last tile that would sit alone on its row fills the row. Not on phones: one column. */
@media (min-width: 600px) and (max-width: 1023px) {
	.wlp-guides:not(.wlp-guides--row) .wp-block-post:last-child:nth-child(even),
	.wlp-guides--row .wp-block-post:last-child:nth-child(odd) { grid-column: span 2; }
}
@media (max-width: 599px) {
	.wlp-guides .wp-block-post-template { grid-template-columns: 1fr; gap: 1.25rem; }
	.wlp-guides:not(.wlp-guides--row) .wp-block-post:first-child { grid-column: auto; }
	.wlp-guides:not(.wlp-guides--row) .wp-block-post:first-child .wlp-guide-tile__tiles span { min-width: 4rem; height: 4rem; font-size: 2.4rem; }
	.wlp-guide-tile__art { min-height: 8rem; }
}

/* Article page */
.wlp-article__head { background: var(--wp--preset--color--mint-soft); }
.wlp-article__head h1 { font-size: clamp(2rem, 5.5vw, 3.125rem); line-height: 1.12; }
.wlp-article__lead p { font-size: 1.25rem; line-height: 1.55; color: #2c3b3d; margin: 0; }
.wlp-article__meta { gap: .35rem 1rem; margin-top: 1rem; font-size: .9375rem; color: #3f4e50; }
.wlp-article__meta p, .wlp-article__meta .wp-block-post-date { margin: 0; }
.wlp-article__meta .wp-block-post-date::before { content: "Updated "; }
.wlp-article__body { font-size: 1.125rem; line-height: 1.7; }
.wlp-article__body h2 { margin-top: 2.5rem; font-size: clamp(1.625rem, 4vw, 2rem); }
.wlp-article__body h3 { margin-top: 1.75rem; font-size: 1.375rem; }
.wlp-article__body li + li { margin-top: .35rem; }
.wlp-article__body a:not(.wp-block-button__link) { color: var(--wp--preset--color--coral-text); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.wlp-article__body table { border-collapse: collapse; width: 100%; font-size: 1rem; }
.wlp-article__body th, .wlp-article__body td { padding: .6rem .75rem; border-bottom: 1px solid rgba(14, 79, 85, .15); text-align: left; vertical-align: top; }
.wlp-article__body th { background: var(--wp--preset--color--mint-soft); color: var(--wp--preset--color--teal); }
.wlp-article__body .wp-block-table { overflow-x: auto; }
/* A sound, written between slashes: <code>/s/</code> */
.wlp-article__body code {
	font-family: inherit; font-weight: 800; font-size: .95em;
	padding: .05em .4em; border-radius: 8px;
	background: var(--wp--preset--color--sun-soft); color: var(--wp--preset--color--teal);
}

/* "Try this tonight": a flashcard pinned in the article. */
.wlp-tonight {
	position: relative;
	margin-block: 2.25rem !important;
	padding: 2.25rem var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 0 0 4px #fff, inset 0 6px 0 var(--wp--preset--color--sun), var(--wp--preset--shadow--soft);
	transform: rotate(-.6deg);
}
.wlp-tonight > :first-child {
	position: absolute; top: -1rem; left: 1.25rem; margin: 0;
	padding: .3rem .9rem; border-radius: 12px;
	background: var(--wp--preset--color--teal); color: var(--wp--preset--color--cream);
	font-size: .9375rem; font-weight: 800; letter-spacing: .02em;
	box-shadow: 0 0 0 3px #fff;
	transform: rotate(-2deg);
}
.wlp-tonight h3 { margin-top: 0; }
.wlp-tonight > :last-child { margin-bottom: 0; }

/* Printable call to action inside an article. */
.wlp-printable-cta {
	margin-block: 2.25rem !important;
	padding: var(--wp--preset--spacing--40);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--teal);
	color: var(--wp--preset--color--cream);
}
.wlp-printable-cta h2, .wlp-printable-cta h3 { color: var(--wp--preset--color--sun); margin-top: 0; }
.wlp-printable-cta p { margin-block: .5rem 1rem; }
.wlp-printable-cta .wp-block-button__link { background: var(--wp--preset--color--sun); color: var(--wp--preset--color--teal); }

/* FAQ: Details blocks inside a Group with the class wlp-faq (also read for the FAQ schema). */
.wlp-faq .wp-block-details {
	margin: 0 0 .75rem;
	padding: 0;
	border-radius: var(--wp--custom--radius--md);
	background: #fff;
	box-shadow: inset 0 0 0 2px rgba(14, 79, 85, .12);
}
.wlp-faq summary {
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	min-height: 48px; padding: .85rem 1.1rem;
	font-weight: 800; color: var(--wp--preset--color--teal);
	cursor: pointer; list-style: none;
}
.wlp-faq summary::-webkit-details-marker { display: none; }
.wlp-faq summary::after { content: "+"; font-size: 1.5rem; line-height: 1; color: var(--wp--preset--color--coral-text); transition: transform .2s var(--wlp-ease); }
.wlp-faq details[open] summary::after { transform: rotate(45deg); }
.wlp-faq .wp-block-details > :not(summary) { margin: 0; padding: 0 1.1rem 1rem; }

/* Affiliate note at the top of round-ups. */
.wlp-disclosure {
	padding: .75rem 1rem; border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--preset--color--sun-soft); font-size: .9375rem;
}

@media (prefers-reduced-motion: reduce) {
	.wlp-tonight, .wlp-tonight > :first-child { transform: none; }
	.wlp-post-card:hover, .wlp-post-card:focus-within { transform: none; }
}

/* ---------- Word cards (Home, About): what the free CVC cards look like ---------- */
.wlp-cards-demo {
	position: relative;
	display: grid;
	gap: 1rem;
	justify-items: center;
	padding: 2rem 1rem;
	border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%;
	background: var(--wp--preset--color--mint-soft);
}
.wlp-page-head .wlp-cards-demo { background: var(--wp--preset--color--cream); }
.wlp-cards-demo__card {
	display: flex;
	gap: .15em;
	padding: .55rem 1.6rem 1rem;
	border-radius: 20px;
	background: #fff;
	box-shadow: 0 0 0 4px #fff, inset 0 6px 0 var(--wp--preset--color--coral), var(--wp--preset--shadow--soft);
	color: var(--wp--preset--color--teal);
	font-weight: 900;
	font-size: clamp(2.5rem, 7vw, 3.5rem);
	line-height: 1.1;
	transform: rotate(-4deg) translateX(-12%);
}
.wlp-cards-demo__card:nth-child(2) { transform: rotate(3deg) translateX(14%); box-shadow: 0 0 0 4px #fff, inset 0 6px 0 var(--wp--preset--color--sun), var(--wp--preset--shadow--soft); }
.wlp-cards-demo__card:nth-child(3) { transform: rotate(-2deg) translateX(-4%); box-shadow: 0 0 0 4px #fff, inset 0 6px 0 var(--wp--preset--color--mint), var(--wp--preset--shadow--soft); }
/* A sound button (dot) under each sound, as on the printable. */
.wlp-cards-demo__card span { position: relative; padding-bottom: .3em; }
.wlp-cards-demo__card span::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: .22em;
	height: .22em;
	border-radius: 50%;
	background: var(--wp--preset--color--coral);
	transform: translateX(-50%);
}

.wlp-ticks { list-style: none; padding: 0; }
.wlp-ticks li { position: relative; padding-left: 2rem; }
.wlp-ticks li + li { margin-top: .5rem; }
.wlp-ticks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .2em;
	width: 1.3rem;
	height: 1.3rem;
	border-radius: 50%;
	background: var(--wp--preset--color--sun) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E4F55' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 70% no-repeat;
}

/* Home "Free to print": the closing band, coral with the three free printables fanned out and one loud button.
   Contrast on coral-text #B83F2C: white 5.55:1, sun-soft 4.56:1; teal-deep on sun (the button) 7.7:1. */
.wlp-freebies {
	background-color: var(--wp--preset--color--coral-text);
	background-image: radial-gradient(circle, rgba(255,255,255,.12) 2px, transparent 2.5px);
	background-size: 22px 22px;
	color: #fff;
	overflow: clip;
}
.wlp-freebies .wlp-kicker { color: var(--wp--preset--color--sun-soft); }
.wlp-freebies h2 { color: #fff; font-size: clamp(2.25rem, 5vw, 3.4rem); line-height: 1.08; text-wrap: balance; }
.wlp-freebies__lead { font-size: clamp(1.15rem, 2vw, 1.35rem); font-weight: 700; }
.wlp-freebies a { color: #fff; text-underline-offset: .2em; }
.wlp-freebies a:hover { color: var(--wp--preset--color--sun-soft); }
.wlp-freebies__small { font-size: .9375rem; }

.wlp-freebie-fan { position: relative; max-width: 500px; aspect-ratio: 1 / .92; margin: 1rem auto; }
.wlp-freebie-fan__page {
	position: absolute;
	top: 9%;
	width: 47%;
	border-radius: 14px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 0 0 6px #fff, 0 24px 40px rgba(0, 0, 0, .3);
	transition: transform .3s var(--wlp-ease);
}
.wlp-freebie-fan__page img { display: block; width: 100%; height: auto; }
.wlp-freebie-fan__page:nth-of-type(1) { left: 6%; transform: rotate(-11deg); }
.wlp-freebie-fan__page:nth-of-type(2) { right: 6%; transform: rotate(10deg); }
.wlp-freebie-fan__page:nth-of-type(3) { left: 26.5%; top: 2%; z-index: 2; transform: rotate(-1deg); }
.wlp-freebie-fan__page:hover, .wlp-freebie-fan__page:focus-visible { z-index: 3; transform: translateY(-12px) rotate(0); }
.wlp-freebie-fan__sticker {
	position: absolute;
	top: -2%;
	right: 4%;
	z-index: 4;
	display: grid;
	place-items: center;
	width: 6.2rem;
	height: 6.2rem;
	border-radius: 50%;
	background: var(--wp--preset--color--sun);
	color: var(--wp--preset--color--teal-deep);
	box-shadow: 0 0 0 5px #fff, 0 10px 20px rgba(0, 0, 0, .25);
	font-size: 1.6rem;
	font-weight: 900;
	transform: rotate(12deg);
}

.wlp-freebies__cta { margin-top: 1.8rem; }
.wlp-btn-loud .wp-block-button__link {
	padding: 1.05rem 2.2rem;
	border-radius: 999px;
	background: var(--wp--preset--color--sun);
	color: var(--wp--preset--color--teal-deep);
	font-size: clamp(1.15rem, 2.2vw, 1.45rem);
	font-weight: 900;
	box-shadow: 0 0 0 5px #fff, 0 10px 0 5px #7E2A1D, 0 18px 30px rgba(0, 0, 0, .3);
	transform: rotate(-1.5deg);
	transition: transform .15s var(--wlp-ease), box-shadow .15s var(--wlp-ease);
}
.wlp-btn-loud .wp-block-button__link::after { content: " →"; display: inline-block; transition: transform .2s var(--wlp-ease); }
.wlp-btn-loud .wp-block-button__link:hover,
.wlp-btn-loud .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--sun);
	color: var(--wp--preset--color--teal-deep);
	transform: rotate(-1.5deg) translateY(4px);
	box-shadow: 0 0 0 5px #fff, 0 6px 0 5px #7E2A1D, 0 10px 20px rgba(0, 0, 0, .3);
}
.wlp-btn-loud .wp-block-button__link:hover::after { transform: translateX(5px); }
.wlp-btn-loud .wp-block-button__link:focus-visible { outline: 3px solid var(--wp--preset--color--teal-deep); outline-offset: 8px; }
/* A few wiggles when the button scrolls into view (site.js adds .is-in), then it keeps still. */
@media (prefers-reduced-motion: no-preference) {
	.wlp-freebies__cta.is-in .wlp-btn-loud .wp-block-button__link { animation: wlp-shout 1.1s .4s 2 ease-in-out; }
}
@keyframes wlp-shout {
	0%, 100% { transform: rotate(-1.5deg) scale(1); }
	15% { transform: rotate(2.5deg) scale(1.06); }
	30% { transform: rotate(-4deg) scale(1.06); }
	45% { transform: rotate(2deg) scale(1.03); }
	60% { transform: rotate(-1.5deg) scale(1); }
}
@media (max-width: 781px) {
	.wlp-freebie-fan { max-width: 340px; }
	.wlp-freebie-fan__sticker { width: 4.8rem; height: 4.8rem; font-size: 1.25rem; }
	.wlp-btn-loud .wp-block-button__link { padding: .95rem 1.6rem; }
}

/* Home "Sounds first, guessing never": a dark band (on ruled "handwriting paper" lines) with the method
   shown on a picture card: guessing from the picture vs sounding the word out.
   Contrast on teal-deep #0A3A3F: white 12.4:1, mint-soft 10.6:1, mint 6.3:1, sun 7.7:1. */
.wlp-approach {
	background-color: var(--wp--preset--color--teal-deep);
	background-image: repeating-linear-gradient( to bottom, transparent 0 47px, rgba(255,255,255,.05) 47px 48px );
	color: #fff;
	overflow: clip;
}
.wlp-approach .wlp-kicker { color: var(--wp--preset--color--mint); }
.wlp-approach h2 { color: #fff; font-size: clamp(2.25rem, 5vw, 3.4rem); line-height: 1.08; text-wrap: balance; }
.wlp-approach__hl {
	color: var(--wp--preset--color--sun);
	padding-bottom: .12em;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M2 7c12-5 22-5 34 0s22 5 34 0 22-5 34 0 10 3 14 1' fill='none' stroke='%23FFC23D' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") left bottom / 100% .28em no-repeat;
}
.wlp-approach__lead { font-size: clamp(1.2rem, 2.2vw, 1.4rem); line-height: 1.5; font-weight: 700; color: #fff; }
.wlp-approach .wp-block-column > p:not(.wlp-kicker):not(.wlp-approach__lead) { color: var(--wp--preset--color--mint-soft); }
.wlp-approach a { color: var(--wp--preset--color--sun); font-weight: 800; text-underline-offset: .2em; }
.wlp-approach a:hover { color: #fff; }

.wlp-method { position: relative; max-width: 470px; margin: 0 auto; padding: 4.2rem 0 4.6rem; }
.wlp-method__page {
	width: min(290px, 66%);
	margin: 0 auto;
	padding: 1.4rem 1.4rem 1.1rem;
	text-align: center;
	background: var(--wp--preset--color--cream);
	border-radius: 28px;
	box-shadow: 0 0 0 6px #fff, 0 26px 50px rgba(0,0,0,.35);
	transform: rotate(-3deg);
}
.wlp-method__page img { display: block; width: 78%; height: auto; margin: 0 auto .4rem; }
.wlp-method__word {
	display: flex;
	justify-content: center;
	gap: .12em;
	margin: 0;
	font-size: clamp(3rem, 7vw, 4.2rem);
	line-height: 1;
	font-weight: 900;
	color: var(--wp--preset--color--teal);
}
.wlp-method__word span { position: relative; display: inline-block; padding-bottom: .34em; }
/* Sound buttons: one dot under each sound, as on the CVC word cards. */
.wlp-method__word span::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: .2em;
	height: .2em;
	margin-left: -.1em;
	border-radius: 50%;
	background: var(--wp--preset--color--coral);
}
.wlp-method__bubble {
	position: absolute;
	display: grid;
	gap: .1rem;
	max-width: 15.5rem;
	padding: .8rem 1.15rem .85rem 3.4rem;
	border-radius: 22px;
	box-shadow: 0 14px 30px rgba(0,0,0,.28);
}
.wlp-method__bubble--guess { top: .4rem; right: 0; background: #fff; color: var(--wp--preset--color--ink); transform: rotate(4deg); }
.wlp-method__bubble--sound { bottom: .6rem; left: 0; background: var(--wp--preset--color--sun); color: var(--wp--preset--color--teal-deep); transform: rotate(-2deg); }
.wlp-method__badge {
	position: absolute;
	left: .8rem;
	top: 50%;
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	margin-top: -1rem;
	border-radius: 50%;
}
.wlp-method__badge svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: #fff; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.wlp-method__bubble--guess .wlp-method__badge { background: var(--wp--preset--color--coral); }
.wlp-method__bubble--sound .wlp-method__badge { background: var(--wp--preset--color--teal-deep); }
.wlp-method__tag { font-size: .8125rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.wlp-method__bubble--guess .wlp-method__tag { color: #5B6B6D; } /* 5.57:1 on white */
.wlp-method__say { font-size: 1.35rem; line-height: 1.25; font-weight: 900; }
.wlp-method__say s { text-decoration: line-through var(--wp--preset--color--coral); text-decoration-thickness: 3px; }

/* The demo plays once when it scrolls into view (site.js adds .is-in). Without JS, or with reduced motion,
   it simply shows the finished state. */
@media (prefers-reduced-motion: no-preference) {
	html.wlp-js .wlp-method__bubble { opacity: 0; }
	html.wlp-js .wlp-method__word span::after { background: #C9D6D4; }
	html.wlp-js .wlp-method.is-in .wlp-method__bubble--guess { animation: wlp-pop .5s .3s cubic-bezier(.3,1.6,.6,1) both; --r: 4deg; }
	html.wlp-js .wlp-method.is-in .wlp-method__word span { animation: wlp-sound .45s ease-out both; }
	html.wlp-js .wlp-method.is-in .wlp-method__word span::after { animation: wlp-dot .45s ease-out both; }
	html.wlp-js .wlp-method.is-in .wlp-method__word span:nth-child(1),
	html.wlp-js .wlp-method.is-in .wlp-method__word span:nth-child(1)::after { animation-delay: 1.2s; }
	html.wlp-js .wlp-method.is-in .wlp-method__word span:nth-child(2),
	html.wlp-js .wlp-method.is-in .wlp-method__word span:nth-child(2)::after { animation-delay: 1.7s; }
	html.wlp-js .wlp-method.is-in .wlp-method__word span:nth-child(3),
	html.wlp-js .wlp-method.is-in .wlp-method__word span:nth-child(3)::after { animation-delay: 2.2s; }
	html.wlp-js .wlp-method.is-in .wlp-method__bubble--sound { animation: wlp-pop .55s 2.9s cubic-bezier(.3,1.6,.6,1) both; --r: -2deg; }
}
@keyframes wlp-pop { from { opacity: 0; transform: rotate(var(--r)) scale(.6); } to { opacity: 1; transform: rotate(var(--r)) scale(1); } }
@keyframes wlp-sound { 40% { transform: translateY(-.12em); } }
@keyframes wlp-dot { from { background: #C9D6D4; transform: scale(1); } 50% { transform: scale(1.5); } to { background: var(--wp--preset--color--coral); transform: scale(1); } }

@media (max-width: 781px) {
	/* Phones: headline and lead sentence, then the picture card, then the rest of the text. */
	.wlp-approach .wp-block-columns { display: grid; gap: 0; }
	.wlp-approach .wp-block-column:first-child { display: contents; }
	.wlp-approach .wp-block-column:first-child > * { order: 3; }
	.wlp-approach .wp-block-column:first-child > .wlp-kicker,
	.wlp-approach .wp-block-column:first-child > h2,
	.wlp-approach .wp-block-column:first-child > .wlp-approach__lead { order: 1; }
	.wlp-approach .wp-block-column:last-child { order: 2; margin-bottom: 1rem; }
	.wlp-method { max-width: 400px; padding: 4.4rem 0 4.8rem; }
	.wlp-method__bubble { max-width: 13.5rem; padding: .65rem .95rem .7rem 3rem; }
	.wlp-method__badge { width: 1.75rem; height: 1.75rem; margin-top: -.875rem; left: .7rem; }
	.wlp-method__say { font-size: 1.15rem; }
	.wlp-method__tag { font-size: .75rem; }
}

.wlp-hero__buttons { margin-top: 1.5rem; gap: .9rem; }

/* ---------- Printables ---------- */
/* Shop head: a deck of six pack pages (paid packs in front). They are dealt onto the table one by one,
   then the front pages float gently; hovering fans the deck out. Stickers call out what is new. */
.wlp-shop-head__buttons { margin-top: 1.25rem; }
.wlp-deck { position: relative; display: block; max-width: 440px; margin-inline: auto; aspect-ratio: 1 / 1.08; }
.wlp-deck img {
	position: absolute; width: 54%; height: auto; left: var(--x); top: var(--y);
	border-radius: 6px; background: #fff;
	box-shadow: 0 0 0 1px rgba(14, 79, 85, .08), 0 18px 34px -16px rgba(10, 58, 63, .45);
	transform: rotate(var(--r));
	transition: transform .45s var(--wlp-ease, ease), left .45s var(--wlp-ease, ease), top .45s var(--wlp-ease, ease);
	animation: wlp-deal .7s var(--wlp-ease, ease) both;
	animation-delay: var(--d);
}
.wlp-deck__s1 { --x: 0%;  --y: 14%; --r: -14deg; --d: .05s; }
.wlp-deck__s2 { --x: 46%; --y: 12%; --r: 12deg;  --d: .15s; }
.wlp-deck__s3 { --x: 4%;  --y: 4%;  --r: -7deg;  --d: .25s; }
.wlp-deck__s4 { --x: 42%; --y: 2%;  --r: 7deg;   --d: .35s; }
.wlp-deck__s5 { --x: 12%; --y: 10%; --r: -3deg;  --d: .45s; }
.wlp-deck__s6 { --x: 30%; --y: 14%; --r: 4deg;   --d: .6s; width: 58%; }
.wlp-deck__s5, .wlp-deck__s6 { animation: wlp-deal .7s var(--wlp-ease, ease) both, wlp-float 5s ease-in-out 1.6s infinite alternate; animation-delay: var(--d), calc(var(--d) + 1.2s); }
.wlp-deck:hover img, .wlp-deck:focus-visible img { animation-play-state: paused; }
.wlp-deck:hover .wlp-deck__s1, .wlp-deck:focus-visible .wlp-deck__s1 { --x: -6%; --r: -20deg; }
.wlp-deck:hover .wlp-deck__s2, .wlp-deck:focus-visible .wlp-deck__s2 { --x: 52%; --r: 18deg; }
.wlp-deck:hover .wlp-deck__s3, .wlp-deck:focus-visible .wlp-deck__s3 { --x: -2%; --r: -11deg; }
.wlp-deck:hover .wlp-deck__s4, .wlp-deck:focus-visible .wlp-deck__s4 { --x: 48%; --r: 11deg; }
.wlp-deck:hover .wlp-deck__s6, .wlp-deck:focus-visible .wlp-deck__s6 { --y: 10%; --r: 1deg; }
@keyframes wlp-deal {
	from { opacity: 0; transform: translateY(60px) rotate(0deg) scale(.85); }
	to   { opacity: 1; transform: rotate(var(--r)); }
}
@keyframes wlp-float {
	from { transform: rotate(var(--r)) translateY(0); }
	to   { transform: rotate(calc(var(--r) - 1.5deg)) translateY(-10px); }
}
.wlp-deck__sticker {
	position: absolute; z-index: 2; display: grid; place-items: center; text-align: center;
	font-weight: 900; line-height: 1.05; border: 4px solid #fff;
	box-shadow: 0 10px 18px -8px rgba(10, 58, 63, .5);
	animation: wlp-pop .5s var(--wlp-ease, ease) both;
}
.wlp-deck__sticker--new {
	right: 2%; top: 4%; width: 96px; height: 96px; border-radius: 50%;
	background: var(--wp--preset--color--coral-text); color: #fff; font-size: 1.25rem;
	transform: rotate(10deg); animation-delay: 1.1s;
}
.wlp-deck__sticker--new small { display: block; font-size: .64rem; font-weight: 800; margin-top: 2px; padding-inline: 6px; }
.wlp-deck__sticker--price {
	left: 0; bottom: 2%; padding: .5rem 1rem; border-radius: 14px;
	background: var(--wp--preset--color--sun); color: var(--wp--preset--color--teal); font-size: 1.05rem;
	transform: rotate(-5deg); animation-delay: 1.3s;
}
.wlp-deck__sticker--price:empty { display: none; }
@keyframes wlp-pop {
	0% { opacity: 0; scale: .3; }
	70% { opacity: 1; scale: 1.12; }
	100% { opacity: 1; scale: 1; }
}
@media (max-width: 781px) {
	.wlp-deck { max-width: 340px; margin-top: 1rem; }
	.wlp-deck__sticker--new { width: 80px; height: 80px; font-size: 1.05rem; }
}
@media (prefers-reduced-motion: reduce) {
	.wlp-deck img, .wlp-deck__sticker { animation: none !important; transition: none; }
}

.wlp-printable__sheet img {
	border-radius: 6px;
	box-shadow: 0 0 0 1px rgba(14, 79, 85, .08), 0 18px 34px -16px rgba(10, 58, 63, .45);
	background: #fff;
}
.wlp-printable__meta { margin: .25rem 0 1rem; font-size: .9375rem; font-weight: 700; color: #3f4e50; }
.wlp-printable h3 { margin: 0 0 .5rem; font-size: 1.5rem; }
.wlp-printable__text > p { margin-top: 0; }

/* Lead item: big sheet beside the text. The pair below: smaller sheet above text. */
.wlp-printable--lead {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: var(--wp--preset--spacing--50);
	align-items: center;
	margin-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--50);
	border-radius: var(--wp--custom--radius--lg);
	background: var(--wp--preset--color--mint-soft);
}
.wlp-printable--lead .wlp-printable__sheet { margin: 0; transform: rotate(-2deg); }
.wlp-printable--lead h3 { font-size: clamp(1.75rem, 4vw, 2.25rem); }
.wlp-printable-pair { gap: var(--wp--preset--spacing--50); }
.wlp-printable-pair .wlp-printable { display: grid; grid-template-columns: 150px 1fr; gap: 1.25rem; align-items: start; }
.wlp-printable-pair .wlp-printable__sheet { margin: 0; transform: rotate(-3deg); }
.wlp-printable-pair .wlp-column:nth-child(2) .wlp-printable__sheet,
.wlp-printable-pair .wp-block-column:nth-child(2) .wlp-printable__sheet { transform: rotate(3deg); }

/* Paid packs: a compact list of three, then the bundle row. [wlp_buy] prints the price and Buy button,
   or a "Coming soon" badge while the shop is closed. */
.wlp-packs__list { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wp--preset--spacing--40); }
.wlp-pack { position: relative; display: grid; grid-template-rows: 220px auto; padding: 1.25rem; border-radius: var(--wp--custom--radius--lg); background: #fff; box-shadow: var(--wp--preset--shadow--soft); overflow: hidden; }
.wlp-pack img { width: 72%; height: auto; justify-self: center; border-radius: 6px; box-shadow: 0 0 0 1px rgba(14, 79, 85, .08), 0 12px 24px -12px rgba(10, 58, 63, .4); transform: rotate(-3deg); }
.wlp-pack:nth-child(2) img { transform: rotate(2deg); }
.wlp-pack > div { position: relative; padding-top: 1rem; background: #fff; box-shadow: 0 -24px 24px #fff; }
.wlp-pack h3 { margin: 0 0 .4rem; font-size: 1.375rem; }
.wlp-pack p { margin: 0 0 .5rem; }
.wlp-pack .wlp-printable__meta a { color: var(--wp--preset--color--coral-text); }
.wlp-pack__buy { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: .75rem; }
.wlp-pack__buy .wp-element-button { padding-inline: 2rem; }
.wlp-pack__price { font-size: 1.5rem; font-weight: 800; color: var(--wp--preset--color--teal); }
.wlp-pack__soon {
	display: inline-block;
	margin-top: .5rem;
	padding: .3rem .8rem;
	border-radius: 12px;
	background: var(--wp--preset--color--sun);
	color: var(--wp--preset--color--teal);
	font-weight: 800;
	font-size: .875rem;
	transform: rotate(-2deg);
}
.wlp-bundle { display: flex; align-items: center; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; margin-top: var(--wp--preset--spacing--40); padding: 1.25rem 1.5rem; border-radius: var(--wp--custom--radius--lg); background: var(--wp--preset--color--teal); color: #fff; }
.wlp-bundle h3 { margin: 0 0 .25rem; font-size: 1.375rem; color: #fff; }
.wlp-bundle p { margin: 0; }
.wlp-bundle .wlp-pack__buy { margin-top: 0; }
.wlp-bundle .wlp-pack__price { color: var(--wp--preset--color--sun); }
.wlp-bundle .wp-element-button { background: var(--wp--preset--color--sun); color: var(--wp--preset--color--teal-deep); }

@media (max-width: 900px) {
	.wlp-printable--lead { grid-template-columns: 1fr; }
	.wlp-printable--lead .wlp-printable__sheet { max-width: 300px; margin-inline: auto; }
	.wlp-packs__list { grid-template-columns: 1fr; }
	.wlp-pack { grid-template-columns: 110px 1fr; grid-template-rows: auto; gap: 1rem; align-items: start; }
	.wlp-pack img { width: 100%; }
	.wlp-pack > div { padding-top: 0; box-shadow: none; }
}
@media (max-width: 600px) {
	.wlp-printable-pair .wlp-printable { grid-template-columns: 110px 1fr; }
}
@media (max-width: 900px) { .wlp-pack { padding-top: 3.25rem; } }
.wlp-cards-demo__card span.is-digraph::after { width: .9em; height: .13em; border-radius: 4px; }
.wlp-prose h2:not(:first-child) { margin-top: 2.5rem; }

/* A single larger pack, shown between the three-pack list and the bundle row. */
.wlp-feature-pack { display: grid; grid-template-columns: 170px 1fr; gap: 1.5rem; align-items: center; margin-top: var(--wp--preset--spacing--40); padding: 1.25rem 1.5rem; border-radius: var(--wp--custom--radius--lg); background: #fff; box-shadow: var(--wp--preset--shadow--soft); }
.wlp-feature-pack img { width: 100%; height: auto; border-radius: 6px; box-shadow: 0 0 0 1px rgba(14, 79, 85, .08), 0 12px 24px -12px rgba(10, 58, 63, .4); transform: rotate(-2deg); }
.wlp-feature-pack h3 { margin: 0 0 .4rem; font-size: 1.5rem; }
.wlp-feature-pack p { margin: 0 0 .5rem; }
.wlp-feature-pack__tag { display: inline-block; padding: .2rem .7rem; border-radius: 12px; background: var(--wp--preset--color--sun-soft); color: var(--wp--preset--color--teal); font-weight: 800; font-size: .875rem; }
.wlp-feature-pack .wlp-printable__meta a { color: var(--wp--preset--color--coral-text); }
@media (max-width: 600px) {
	.wlp-feature-pack { grid-template-columns: 1fr; }
	.wlp-feature-pack img { max-width: 180px; justify-self: center; }
}
/* The second bundle sits right under the first; a deeper teal tells the two rows apart. */
.wlp-bundle + .wlp-bundle { margin-top: 12px; }
.wlp-bundle--four { background: var(--wp--preset--color--teal-deep); }

/* ---------- My Cart sticker (far right of the header) ----------
   A sun-yellow die-cut sticker with a basket, tilted like the menu cards. It wiggles on hover, and a coral
   bubble shows how many packs are waiting (filled in by assets/js/site.js). */
.wlp-cart {
	position: relative; flex: none; align-self: center; box-sizing: border-box;
	display: inline-flex; align-items: center; gap: .45rem;
	min-height: 46px; padding: .45rem 1rem .45rem .8rem;
	background: var(--wp--preset--color--sun); color: var(--wp--preset--color--teal) !important;
	font-weight: 900; font-size: 1rem; text-decoration: none; white-space: nowrap;
	border: 3px solid #fff; border-radius: 999px;
	box-shadow: 0 6px 12px -6px rgba(10, 58, 63, .5);
	transform: rotate(3deg);
	transition: transform .3s var(--wlp-ease, ease), box-shadow .3s ease;
}
.wlp-cart::before { /* little heart, because it is a cart full of reading */
	content: "♥"; position: absolute; left: -7px; top: -9px;
	font-size: .95rem; line-height: 1; color: var(--wp--preset--color--coral);
	-webkit-text-stroke: 1.5px #fff; paint-order: stroke fill; transform: rotate(-14deg);
}
.wlp-cart__icon { flex: none; }
.wlp-cart:hover, .wlp-cart:focus-visible { animation: wlp-wiggle .5s ease; box-shadow: 0 10px 16px -8px rgba(10, 58, 63, .55); }
.wlp-cart:focus-visible { outline: 3px solid var(--wp--preset--color--teal); outline-offset: 3px; }
.wlp-cart__count {
	position: absolute; right: -10px; top: -12px;
	min-width: 26px; height: 26px; padding: 0 6px; display: grid; place-items: center;
	background: var(--wp--preset--color--coral-text); color: #fff; font-size: .85rem; font-weight: 900;
	border: 3px solid #fff; border-radius: 999px;
	animation: wlp-pop .45s var(--wlp-ease, ease) both;
}
.wlp-cart__count[hidden] { display: none; }
@keyframes wlp-wiggle {
	0%, 100% { transform: rotate(3deg); }
	25% { transform: rotate(-4deg) scale(1.05); }
	50% { transform: rotate(5deg) scale(1.05); }
	75% { transform: rotate(-2deg); }
}
@media (max-width: 781px) {
	.wlp-cart { padding: .45rem .7rem; }
	.wlp-cart__label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
	.wlp-cart, .wlp-cart:hover, .wlp-cart:focus-visible { animation: none; }
}

/* Laptops and tablets: the six menu cards plus the cart sticker must still fit on one line, so the cards
   tighten up and the cart becomes a round basket. (Below 600px the menu folds into the menu button.) */
@media (min-width: 600px) and (max-width: 1180px) {
	.wlp-header .wp-block-navigation .wp-block-navigation__container,
	.wlp-header .wp-block-group.is-nowrap { gap: .5rem !important; }
	.wlp-header .wp-block-navigation .wp-block-navigation-item__content { padding: .4rem .65rem; }
	.wlp-cart { padding: .45rem .7rem; }
	.wlp-cart__label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 600px) and (max-width: 900px) {
	.wlp-header .wlp-logo img { height: 72px; }
	.wlp-header .wp-block-navigation { font-size: .9rem; }
	.wlp-header .wp-block-navigation .wp-block-navigation-item__content { padding: .35rem .5rem; border-width: 2px; }
}

/* Bundle buttons: the label, with the saving underneath in green (#0F5A24 on sun = 5.2:1). */
.wlp-bundle .wp-element-button { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.15; }
.wlp-buy__save { display: block; margin-top: .2rem; font-size: .8125rem; font-weight: 900; color: #0F5A24; letter-spacing: .01em; }

/* Cart and checkout: "You have 1 pack in your cart. Changed your mind? [Empty cart]" above the cart. */
.wlp-cart-note {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.25rem;
	margin: 0 auto 1.5rem; padding: .85rem 1.1rem;
	background: var(--wp--preset--color--mint-soft); border-radius: var(--wp--custom--radius--lg);
}
.wlp-cart-note p { margin: 0; font-weight: 700; color: var(--wp--preset--color--teal); }
.wlp-cart-note__empty {
	display: inline-flex; align-items: center; min-height: 44px; padding: .4rem 1.1rem;
	background: #fff; color: var(--wp--preset--color--coral-text) !important; font-weight: 800; text-decoration: none;
	border: 2px solid var(--wp--preset--color--coral-text); border-radius: 999px;
	transition: background-color .2s ease, color .2s ease;
}
.wlp-cart-note__empty:hover, .wlp-cart-note__empty:focus-visible { background: var(--wp--preset--color--coral-text); color: #fff !important; }

/* ---------- Pinterest ---------- */
/* Pin images (1000x1500) with a Save button: a plain link to Pinterest's pin builder, no script, no
   cookies. The button shows on hover or keyboard focus, and always on touch screens (no hover there). */
/* Handwriting, used only for the "Save it to Pinterest!" note (Caveat, SIL OFL 1.1: assets/fonts/Caveat-OFL.txt).
   Browsers only download it on pages that show a pin. */
@font-face {
	font-family: "Caveat";
	src: url("assets/fonts/caveat-latin-700-normal.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
.wlp-pin { position: relative; margin: 0; }
.wlp-pin__card { position: relative; display: block; transition: transform .3s var(--wlp-ease, ease); }
.wlp-pin img { display: block; width: 100%; height: auto; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px rgba(14, 79, 85, .08), 0 18px 34px -16px rgba(10, 58, 63, .45); }
/* The note sits above the card, its arrow curling down to where the Save button appears (top-left). */
.wlp-pin__hint {
	display: flex;
	align-items: flex-start;
	gap: .2rem;
	margin: 0 0 .2rem;
	color: var(--wlp-hint, var(--wp--preset--color--coral-text)); /* sun on the dark stages below */
	font-family: "Caveat", "Segoe Print", "Comic Sans MS", cursive;
	font-size: 1.7rem;
	font-weight: 700;
	line-height: 1;
	pointer-events: none;
}
.wlp-pin__hint span { transform: rotate(-4deg); transform-origin: left bottom; white-space: nowrap; }
.wlp-pin__hint svg { flex: none; width: 3.2rem; height: 2.6rem; margin: .45rem 0 0 .35rem; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }

/* Pins pop on a dark stage: the teal-deep head of a free printable page, and a teal-deep panel around a
   guide's pin. On teal-deep the note is sun (7.7:1). */
.wlp-free-head, .wlp-pin--guide {
	--wlp-hint: var(--wp--preset--color--sun);
	background-image: radial-gradient(circle, rgba(255, 255, 255, .09) 2px, transparent 2.5px);
	background-size: 20px 20px;
}
.wlp-free-head { color: var(--wp--preset--color--mint-soft); }
.wlp-free-head h1 { color: #fff; }
.wlp-free-head .wlp-kicker { color: var(--wp--preset--color--sun); }
.wlp-free-head p { color: var(--wp--preset--color--mint-soft); }
.wlp-free-head .wlp-printable__meta { color: var(--wp--preset--color--mint); }
.wlp-free-head .wp-block-button__link { background: var(--wp--preset--color--sun); color: var(--wp--preset--color--teal-deep); box-shadow: 0 0 0 4px #fff; }
.wlp-free-head .wp-block-button__link:hover, .wlp-free-head .wp-block-button__link:focus-visible { background: #fff; color: var(--wp--preset--color--teal-deep); }
.wlp-free-head .wlp-pin__card { transform: rotate(2deg); }
.wlp-free-head .wlp-pin:hover .wlp-pin__card { transform: rotate(0); }
.wlp-free-head .wlp-pin img, .wlp-pin--guide img { box-shadow: 0 0 0 6px #fff, 0 24px 44px rgba(0, 0, 0, .4); }
.wlp-pin--guide { padding: 1.1rem 1.4rem 1.6rem; border-radius: 28px; background-color: var(--wp--preset--color--teal-deep); }
.wlp-pin--guide .wlp-pin__card { transform: rotate(-2deg); }
.wlp-pin--guide:hover .wlp-pin__card { transform: rotate(0); }
.wlp-pin__save {
	position: absolute; top: 12px; left: 12px;
	display: inline-flex; align-items: center; min-height: 40px; padding: .35rem 1rem;
	background: var(--wp--preset--color--coral-text); color: #fff !important; /* 5.55:1 */
	font-weight: 900; font-size: .9375rem; text-decoration: none; border-radius: 999px;
	box-shadow: 0 0 0 3px #fff, 0 6px 12px -6px rgba(10, 58, 63, .5);
	transition: opacity .2s ease, transform .2s ease;
}
.wlp-pin__save:focus-visible { outline: 3px solid var(--wp--preset--color--teal); outline-offset: 3px; }
@media (hover: hover) {
	.wlp-pin__save { opacity: 0; transform: translateY(-4px); }
	.wlp-pin:hover .wlp-pin__save, .wlp-pin:focus-within .wlp-pin__save { opacity: 1; transform: none; }
}
/* In a guide: beside the opening text on wide screens, full width (but not huge) on phones. */
.wlp-pin--guide { float: right; width: min(330px, 42%); margin: .35rem 0 1.25rem 1.75rem !important; }
.wlp-pin--inline { max-width: 340px; margin-inline: auto; }
@media (max-width: 700px) {
	.wlp-pin--guide { float: none; width: auto; max-width: 340px; margin: 1.25rem auto 1.5rem !important; }
}
@media (prefers-reduced-motion: reduce) { .wlp-pin__save, .wlp-pin__card { transition: none; } }

/* Free printable landing pages. */
.wlp-free-head .wlp-pin--inline { max-width: 300px; }
.wlp-free-signup { margin-top: var(--wp--preset--spacing--50); }
.wlp-free-more { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wp--preset--spacing--40); }
.wlp-free-more a { display: grid; gap: .5rem; height: 100%; padding: 1.25rem; border-radius: var(--wp--custom--radius--lg); background: #fff; box-shadow: var(--wp--preset--shadow--soft); color: var(--wp--preset--color--ink); text-decoration: none; transition: transform .25s var(--wlp-ease, ease); }
.wlp-free-more a:hover, .wlp-free-more a:focus-visible { transform: translateY(-3px); }
.wlp-free-more img { width: 62%; height: auto; justify-self: center; border-radius: 6px; box-shadow: 0 0 0 1px rgba(14, 79, 85, .08), 0 12px 24px -12px rgba(10, 58, 63, .4); transform: rotate(-2deg); }
.wlp-free-more__title { font-size: 1.25rem; font-weight: 900; color: var(--wp--preset--color--teal); }
.wlp-free-more__small { font-size: .9375rem; }
.wlp-free-more__shop a { align-content: center; background: var(--wp--preset--color--teal); color: #fff; }
.wlp-free-more__shop .wlp-kicker { color: var(--wp--preset--color--sun); }
.wlp-free-more__shop .wlp-free-more__title { color: #fff; font-size: 1.5rem; }
@media (max-width: 781px) { .wlp-free-more { grid-template-columns: 1fr; } .wlp-free-more img { width: 40%; } }

/* =========================================================
   Shop page (2026-10-27): free cards, children holding the packs, Read & Answer spotlight,
   bundle boxes, printing-tip notes.
   Contrast: white on coral-text 5.55:1, on teal 9.3:1, on teal-deep 12.4:1; sun on teal-deep 7.7:1;
   teal-deep on sun 7.7:1; teal on sun-soft 7.6:1.
   ========================================================= */
.wlp-shop-free {
	background-color: var(--wp--preset--color--sun-soft);
	background-image: radial-gradient(circle, rgba(184, 63, 44, .12) 2px, transparent 2.5px);
	background-size: 22px 22px;
}
.wlp-freecards { list-style: none; padding: 0; margin: 1.75rem 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem; }
.wlp-freecard {
	--panel: var(--wp--preset--color--sun);
	display: flex; flex-direction: column; gap: .45rem;
	padding: 0 0 1.4rem; border-radius: 28px; background: #fff;
	box-shadow: 0 0 0 4px #fff, 0 16px 34px rgba(10, 58, 63, .14);
	transition: transform .3s var(--wlp-ease), box-shadow .3s var(--wlp-ease);
}
.wlp-freecard > :not(.wlp-freecard__art) { margin: 0; padding-inline: 1.4rem; }
.wlp-freecard--mint { --panel: var(--wp--preset--color--mint); }
.wlp-freecard--coral { --panel: var(--wp--preset--color--coral-text); }
.wlp-freecard:hover { transform: translateY(-6px) rotate(-.6deg); box-shadow: 0 0 0 4px #fff, 0 24px 44px rgba(10, 58, 63, .2); }
.wlp-freecard__art {
	position: relative; display: grid; place-items: center; height: 15.5rem; margin-bottom: .7rem;
	border-radius: 28px 28px 0 0; overflow: hidden;
	background: var(--panel) radial-gradient(circle, rgba(255, 255, 255, .3) 2px, transparent 2.5px) 0 0 / 18px 18px;
}
.wlp-freecard__art img { width: 50%; height: auto; margin-top: 3.2rem; border-radius: 8px; box-shadow: 0 0 0 4px #fff, 0 14px 26px rgba(0, 0, 0, .25); transform: rotate(-5deg); transition: transform .3s var(--wlp-ease); }
.wlp-freecard--mint .wlp-freecard__art img { transform: rotate(4deg); }
.wlp-freecard:hover .wlp-freecard__art img { transform: rotate(0) translateY(-10px); }
.wlp-freecard__sticker {
	position: absolute; top: .9rem; right: .9rem; display: grid; place-items: center; width: 4.4rem; height: 4.4rem;
	border-radius: 50%; background: var(--wp--preset--color--teal-deep); color: var(--wp--preset--color--sun);
	box-shadow: 0 0 0 4px #fff; font-size: 1.15rem; font-weight: 900; transform: rotate(12deg);
}
.wlp-freecard h3 { font-size: 1.4rem; line-height: 1.2; }
.wlp-freecard__meta { font-size: .9375rem; font-weight: 800; color: var(--wp--preset--color--coral-text); }
.wlp-freecard__go { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.1rem; margin-top: auto !important; padding-top: .6rem; }
.wlp-freecard__one { font-weight: 800; color: var(--wp--preset--color--teal); text-underline-offset: .2em; }
.wlp-freecard__one::after { content: " →"; }
.wlp-shop-free__signup { margin-top: var(--wp--preset--spacing--50); }

/* Paid packs: a child peeks over each card, fingers over its top edge. --r is the picture's height/width and
   --hold how far the fingertips reach below the card edge (share of width), from tools/clean-cutout.js.
   --lift must be at least --kid × (r − hold) for the tallest child (now 70 × .915 = 64cqw). */
.wlp-kidpacks { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem; }
.wlp-kidpack { --kid: 70cqw; --lift: 64cqw; position: relative; display: flex; flex-direction: column; container-type: inline-size; transition: transform .3s var(--wlp-ease); }
.wlp-kidpack__kid { position: absolute; top: calc(var(--lift) - var(--kid) * (var(--r) - var(--hold))); left: 50%; z-index: 2; width: var(--kid); height: auto; transform: translateX(-50%); pointer-events: none; filter: drop-shadow(0 6px 8px rgba(10, 58, 63, .15)); transition: transform .3s var(--wlp-ease); }
.wlp-kidpack__card {
	--band: var(--wp--preset--color--coral-text);
	position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column;
	margin-top: var(--lift); /* the same for every card, so the three line up; each child sits lower or higher to match */
	padding: 1.6rem 1.4rem 1.5rem; border-radius: 28px; border-top: 12px solid var(--band); background: #fff;
	box-shadow: 0 16px 34px rgba(10, 58, 63, .14);
}
.wlp-kidpack__card--sun { --band: var(--wp--preset--color--sun); }
.wlp-kidpack__card--mint { --band: var(--wp--preset--color--mint); }
.wlp-kidpack:hover { transform: translateY(-6px); }
.wlp-kidpack:hover .wlp-kidpack__kid { transform: translateX(-50%) rotate(-3deg); }
.wlp-kidpack__art { display: grid; place-items: center; margin: 0 0 1rem; padding: 1.2rem 0; border-radius: 18px; background: color-mix(in srgb, var(--band) 18%, #fff); }
.wlp-kidpack__art img { width: 54%; height: auto; border-radius: 6px; box-shadow: 0 0 0 3px #fff, 0 12px 22px rgba(10, 58, 63, .25); transform: rotate(-3deg); }
.wlp-kidpack:nth-child(2) .wlp-kidpack__art img { transform: rotate(3deg); }
.wlp-kidpack__card h3 { margin: 0 0 .4rem; font-size: 1.45rem; }
.wlp-kidpack__card p { margin: 0 0 .5rem; }
.wlp-kidpack__card .wlp-printable__meta a { color: var(--wp--preset--color--coral-text); }
.wlp-kidpack__card .wlp-pack__buy { margin-top: auto; padding-top: .5rem; }

/* Read & Answer: a dark spotlight with characters from the stories around the page. */
.wlp-spotlight {
	display: grid; grid-template-columns: 44% 1fr; gap: 2.5rem; align-items: center;
	margin-top: 3.5rem; padding: 2.5rem; border-radius: 32px; color: var(--wp--preset--color--mint-soft);
	background: var(--wp--preset--color--teal-deep) radial-gradient(circle, rgba(255, 255, 255, .08) 2px, transparent 2.5px) 0 0 / 20px 20px;
	box-shadow: 0 24px 48px rgba(10, 58, 63, .25);
}
.wlp-spotlight__art { position: relative; min-height: 24rem; display: grid; place-items: center; }
.wlp-spotlight__page { width: 56%; height: auto; border-radius: 10px; box-shadow: 0 0 0 6px #fff, 0 24px 40px rgba(0, 0, 0, .4); transform: rotate(-4deg); }
.wlp-spotlight__pal { position: absolute; height: auto; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .3)); }
.wlp-spotlight__pal--cat { left: 0; bottom: 2%; width: 30%; }
.wlp-spotlight__pal--dog { right: 0; bottom: 8%; width: 26%; }
.wlp-spotlight__pal--bee { left: 4%; top: 4%; width: 20%; }
@media (prefers-reduced-motion: no-preference) {
	.wlp-spotlight__pal { animation: wlp-bob 3.2s ease-in-out infinite; }
	.wlp-spotlight__pal--dog { animation-delay: -1.1s; }
	.wlp-spotlight__pal--bee { animation-duration: 2.4s; animation-delay: -.6s; }
}
@keyframes wlp-bob { 50% { translate: 0 -8px; } }
.wlp-spotlight__burst {
	position: absolute; top: 0; right: 4%; display: grid; place-items: center; width: 6.4rem; height: 6.4rem;
	background: var(--wp--preset--color--sun); color: var(--wp--preset--color--teal-deep); font-size: 1.35rem; font-weight: 900;
	clip-path: polygon(50% 0%, 61% 15%, 79% 9%, 79% 28%, 97% 33%, 87% 50%, 97% 67%, 79% 72%, 79% 91%, 61% 85%, 50% 100%, 39% 85%, 21% 91%, 21% 72%, 3% 67%, 13% 50%, 3% 33%, 21% 28%, 21% 9%, 39% 15%);
	transform: rotate(10deg);
}
.wlp-spotlight__tag { display: inline-block; margin: 0 0 .6rem; padding: .25rem .8rem; border-radius: 999px; background: var(--wp--preset--color--sun); color: var(--wp--preset--color--teal-deep); font-size: .875rem; font-weight: 900; }
.wlp-spotlight h3 { margin: 0 0 .6rem; color: #fff; font-size: clamp(1.75rem, 3.4vw, 2.4rem); line-height: 1.1; }
.wlp-spotlight__text > p { margin: 0 0 .8rem; }
.wlp-spotlight__facts { list-style: none; display: flex; flex-wrap: wrap; gap: .6rem; margin: 1rem 0 1.1rem; padding: 0; }
.wlp-spotlight__facts li { padding: .5rem .9rem; border-radius: 16px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .14); font-weight: 700; }
.wlp-spotlight__facts strong { display: block; color: var(--wp--preset--color--sun); font-size: 1.8rem; font-weight: 900; line-height: 1; }
.wlp-spotlight .wlp-printable__meta { color: var(--wp--preset--color--mint); }
.wlp-spotlight .wlp-printable__meta a { color: var(--wp--preset--color--sun); }
.wlp-spotlight .wlp-pack__price, .wlp-bundlebox .wlp-pack__price { color: var(--wp--preset--color--sun); font-size: 1.8rem; }
.wlp-spotlight .wp-element-button, .wlp-bundlebox .wp-element-button { background: var(--wp--preset--color--sun); color: var(--wp--preset--color--teal-deep); box-shadow: 0 0 0 4px #fff; }
.wlp-spotlight .wp-element-button:hover, .wlp-bundlebox .wp-element-button:hover { background: #fff; color: var(--wp--preset--color--teal-deep); }

/* Bundles: two boxes side by side, each fanning out the packs inside. */
.wlp-bundles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem; margin-top: 2.5rem; }
.wlp-bundlebox {
	position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center;
	padding: 1.8rem 1.6rem; border-radius: 28px; color: #fff;
	background: var(--wp--preset--color--coral-text) radial-gradient(circle, rgba(255, 255, 255, .12) 2px, transparent 2.5px) 0 0 / 20px 20px;
	box-shadow: 0 16px 34px rgba(10, 58, 63, .18);
}
.wlp-bundlebox--four { background-color: var(--wp--preset--color--teal); }
.wlp-bundlebox h3 { margin: .5rem 0 .4rem; color: #fff; font-size: 1.75rem; }
.wlp-bundlebox p { margin: 0 0 .5rem; max-width: 26rem; }
.wlp-bundlebox .wlp-bundlebox__tag { display: inline-block; margin: 0; padding: .2rem .75rem; border-radius: 999px; background: rgba(255, 255, 255, .16); font-size: .8125rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; }
.wlp-bundlebox__fan { display: flex; justify-content: center; width: 100%; margin: .4rem 0 1.4rem; }
.wlp-bundlebox__fan img { width: 25%; height: auto; border-radius: 6px; box-shadow: 0 0 0 3px #fff, 0 10px 18px rgba(0, 0, 0, .25); }
.wlp-bundlebox__fan img + img { margin-left: -7%; }
.wlp-bundlebox__fan img:nth-child(1) { transform: rotate(-10deg) translateY(8px); }
.wlp-bundlebox__fan img:nth-child(2) { position: relative; z-index: 1; transform: rotate(-2deg); }
.wlp-bundlebox__fan img:nth-child(3) { position: relative; z-index: 2; transform: rotate(8deg) translateY(6px); }
.wlp-bundlebox__fan img:nth-child(4) { position: relative; z-index: 3; transform: rotate(15deg) translateY(14px); }
.wlp-bundlebox__fan--four img { width: 22%; }
.wlp-bundlebox__ribbon {
	position: absolute; top: 1.4rem; right: -2.9rem; z-index: 4; width: 11rem; padding: .3rem 0; transform: rotate(40deg);
	background: var(--wp--preset--color--sun); color: var(--wp--preset--color--teal-deep); font-size: .8125rem; font-weight: 900; text-align: center;
	box-shadow: 0 4px 8px rgba(0, 0, 0, .2);
}
.wlp-bundlebox .wlp-pack__buy { justify-content: center; margin-top: auto; padding-top: .6rem; }

/* Printing tips: taped sticky notes. */
.wlp-tips { background: #fff; }
.wlp-tips .wlp-kicker { font-family: "Caveat", "Segoe Print", cursive; font-size: 1.7rem; font-weight: 700; letter-spacing: 0; text-transform: none; transform: rotate(-3deg); transform-origin: left; }
.wlp-notes { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.75rem; }
.wlp-note {
	position: relative; display: flex; flex-direction: column; gap: .4rem;
	padding: 2.2rem 1.3rem 1.5rem; background: var(--wp--preset--color--sun-soft);
	border-radius: 4px 4px 22px 4px; box-shadow: 0 14px 24px rgba(10, 58, 63, .14);
	transform: rotate(-2deg); transition: transform .25s var(--wlp-ease);
}
.wlp-note:nth-child(2n) { background: var(--wp--preset--color--mint-soft); transform: rotate(2deg); }
.wlp-note:nth-child(3) { transform: rotate(-1deg); }
.wlp-note:hover { transform: rotate(0) translateY(-5px); }
.wlp-note::before { content: ""; position: absolute; top: -12px; left: 50%; width: 5.5rem; height: 1.6rem; margin-left: -2.75rem; background: rgba(255, 255, 255, .7); box-shadow: 0 1px 3px rgba(0, 0, 0, .14); transform: rotate(-3deg); }
.wlp-note__icon { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; margin-bottom: .3rem; border-radius: 50%; background: var(--wp--preset--color--coral-text); }
.wlp-note:nth-child(2n) .wlp-note__icon { background: var(--wp--preset--color--teal); }
.wlp-note__icon svg { width: 1.4rem; height: 1.4rem; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.wlp-note strong { font-size: 1.2rem; font-weight: 900; color: var(--wp--preset--color--teal); }
.wlp-tips__small { margin-top: var(--wp--preset--spacing--50) !important; }

@media (max-width: 1023px) {
	.wlp-freecards, .wlp-kidpacks, .wlp-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wlp-spotlight { grid-template-columns: 1fr; }
	.wlp-spotlight__art { width: 100%; max-width: 440px; min-height: 20rem; margin-inline: auto; }
}
@media (max-width: 680px) {
	.wlp-freecards, .wlp-kidpacks, .wlp-bundles, .wlp-notes { grid-template-columns: 1fr; }
	.wlp-kidpacks { gap: 2.5rem; }
	.wlp-kidpack { --kid: 60cqw; --lift: 55cqw; } /* a little smaller on phones; --lift still clears the tallest child */
	.wlp-spotlight { padding: 1.6rem 1.2rem; }
	.wlp-spotlight__art { min-height: 17rem; }
}
@media (prefers-reduced-motion: reduce) {
	.wlp-freecard, .wlp-kidpack, .wlp-note { transition: none; }
}

/* =========================================================
   Recommended page (2026-10-27): wide and scannable. A head with jump stickers and a "Start here" note,
   books as a bookshelf (every spine is a link), supplies as shopping lists side by side, a shop band.
   Contrast: teal on sun-soft 7.6:1, white on coral-text 5.55:1, on teal 9.3:1, teal-deep on sun 7.7:1,
   teal-deep on mint 6.3:1, ink on #F79D85 8.0:1.
   ========================================================= */
.wlp-rec-head {
	background-color: var(--wp--preset--color--sun-soft);
	background-image: radial-gradient(circle, rgba(184, 63, 44, .12) 2px, transparent 2.5px);
	background-size: 22px 22px;
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}
.wlp-rec-head h1 { font-size: clamp(2.3rem, 5.4vw, 3.6rem); line-height: 1.05; text-wrap: balance; }
.wlp-rec-head__lead { font-size: clamp(1.1rem, 1.8vw, 1.3rem); max-width: 36rem; }
.wlp-jump { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.3rem 0 1rem; }
.wlp-jump a {
	display: inline-flex; align-items: center; min-height: 44px; padding: .35rem 1rem; border-radius: 999px;
	background: #fff; color: var(--wp--preset--color--teal); font-weight: 800; text-decoration: none;
	box-shadow: 0 0 0 3px #fff, 0 6px 14px rgba(10, 58, 63, .14); transform: rotate(-1.5deg);
	transition: transform .2s var(--wlp-ease);
}
.wlp-jump a:nth-child(2n) { transform: rotate(1.5deg); background: var(--wp--preset--color--mint-soft); }
.wlp-jump a::before { content: "↓"; margin-right: .4rem; color: var(--wp--preset--color--coral-text); }
.wlp-jump a:hover, .wlp-jump a:focus-visible { transform: translateY(-3px) rotate(0); }
.wlp-rec-head__disclosure { max-width: 36rem; margin: 0; font-size: .875rem; color: #3f4e50; }
.wlp-rec-head__disclosure a { color: var(--wp--preset--color--coral-text); font-weight: 800; }

/* "Start here": a taped note with three numbered picks. */
.wlp-starter {
	position: relative; max-width: 420px; margin: 1rem auto 0; padding: 2.4rem 1.6rem 1.6rem;
	background: #fff; border-radius: 6px 6px 28px 6px; box-shadow: 0 20px 40px rgba(10, 58, 63, .18); transform: rotate(2deg);
}
.wlp-starter::before { content: ""; position: absolute; top: -14px; left: 50%; width: 7rem; height: 1.8rem; margin-left: -3.5rem; background: rgba(124, 199, 184, .7); transform: rotate(-4deg); }
.wlp-starter__hand { position: absolute; top: -2.6rem; right: -.5rem; margin: 0; color: var(--wp--preset--color--coral-text); font-family: "Caveat", "Segoe Print", cursive; font-size: 2rem; font-weight: 700; transform: rotate(8deg); }
.wlp-starter__title { margin: 0 0 1rem; font-size: 1.45rem; line-height: 1.2; color: var(--wp--preset--color--teal); }
.wlp-starter__list { list-style: none; counter-reset: pick; margin: 0; padding: 0; display: grid; gap: .7rem; }
.wlp-starter__list li { counter-increment: pick; }
.wlp-starter__list a { display: grid; grid-template-columns: 3rem 1fr; column-gap: .9rem; align-items: center; padding: .55rem .7rem; border-radius: 16px; background: var(--wp--preset--color--cream); color: var(--wp--preset--color--ink); text-decoration: none; transition: transform .2s var(--wlp-ease), background-color .2s; }
.wlp-starter__list a::before {
	content: counter(pick); grid-row: span 2; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 12px;
	background: var(--wp--preset--color--coral-text); color: #fff; font-size: 1.5rem; font-weight: 900; box-shadow: 0 0 0 3px #fff; transform: rotate(-6deg);
}
.wlp-starter__list li:nth-child(2) a::before { background: var(--wp--preset--color--sun); color: var(--wp--preset--color--teal); transform: rotate(5deg); }
.wlp-starter__list li:nth-child(3) a::before { background: var(--wp--preset--color--teal); transform: rotate(-3deg); }
.wlp-starter__list strong { color: var(--wp--preset--color--teal); font-size: 1.05rem; }
.wlp-starter__list span { font-size: .9375rem; color: #3f4e50; }
.wlp-starter__list a:hover, .wlp-starter__list a:focus-visible { transform: translateX(4px); background: var(--wp--preset--color--sun-soft); }

/* Books: two shelves of spines. Each spine's height is set inline (--h). */
.wlp-books__intro, .wlp-supplies__intro { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 1.5rem; }
.wlp-books__intro > div, .wlp-supplies__intro > div { max-width: 40rem; }
.wlp-books__intro h2, .wlp-supplies__intro h2 { margin: .2rem 0 .5rem; }
.wlp-books__intro p:last-child, .wlp-supplies__intro div p:last-child { margin: 0; }
#books, #little-hands, #writing, #word-games, #grown-ups { scroll-margin-top: 110px; }
.wlp-shelves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 2.5rem; }
.wlp-shelf { margin-top: 1.2rem; min-width: 0; }
@media (max-width: 1023px) { .wlp-shelves { grid-template-columns: 1fr; } }
.wlp-shelf__label { margin: 0 0 .4rem; color: var(--wp--preset--color--coral-text); font-family: "Caveat", "Segoe Print", cursive; font-size: 1.75rem; font-weight: 700; }
.wlp-shelf__row {
	display: flex; align-items: flex-end; gap: .45rem; height: 15rem; padding: 0 1.2rem;
	border-bottom: 16px solid var(--wp--preset--color--teal-deep); border-radius: 0 0 6px 6px;
	box-shadow: 0 14px 0 -6px rgba(10, 58, 63, .25); overflow-x: auto; overflow-y: hidden;
}
.wlp-spine {
	--c: var(--wp--preset--color--coral-text); --ink: #fff;
	flex: none; display: grid; place-items: center; width: 4.4rem; height: var(--h, 90%);
	border-radius: 8px 8px 2px 2px; background: var(--c); color: var(--ink); text-decoration: none;
	box-shadow: inset 6px 0 0 rgba(255, 255, 255, .18), inset -6px 0 0 rgba(0, 0, 0, .12), 0 0 0 2px rgba(255, 255, 255, .6);
	background-image: linear-gradient(transparent 12%, rgba(255, 255, 255, .28) 12%, rgba(255, 255, 255, .28) 15%, transparent 15%, transparent 85%, rgba(255, 255, 255, .28) 85%, rgba(255, 255, 255, .28) 88%, transparent 88%);
	transform-origin: bottom center; transition: transform .25s var(--wlp-ease);
}
.wlp-spine span { writing-mode: vertical-rl; transform: rotate(180deg); font-weight: 900; font-size: 1rem; line-height: 1.15; max-height: 90%; text-align: center; }
.wlp-spine--wide { width: 5.4rem; }
/* A story character sits at the end of each shelf, like an ornament. */
.wlp-shelf__pal { flex: none; width: 8.5rem; height: auto; margin-left: auto; margin-bottom: -2px; filter: drop-shadow(0 6px 6px rgba(10, 58, 63, .18)); }
.wlp-shelf__pal--owl { width: 6rem; }
.wlp-spine--sun { --c: var(--wp--preset--color--sun); --ink: var(--wp--preset--color--teal-deep); }
.wlp-spine--teal { --c: var(--wp--preset--color--teal); }
.wlp-spine--mint { --c: var(--wp--preset--color--mint); --ink: var(--wp--preset--color--teal-deep); }
.wlp-spine--pink { --c: #F79D85; --ink: var(--wp--preset--color--ink); }
.wlp-spine:hover, .wlp-spine:focus-visible { transform: translateY(-14px) rotate(-3deg); }
.wlp-spine:focus-visible { outline: 3px solid var(--wp--preset--color--teal); outline-offset: 3px; }

/* Supplies: shopping lists in two balanced columns. */
.wlp-supplies {
	background-color: var(--wp--preset--color--mint-soft);
	background-image: radial-gradient(circle, rgba(14, 79, 85, .08) 2px, transparent 2.5px);
	background-size: 22px 22px;
}
.wlp-supplies__warn {
	max-width: 22rem; margin: 0; padding: .8rem 1rem; border-radius: 16px; background: var(--wp--preset--color--sun);
	color: var(--wp--preset--color--teal-deep); font-size: .9375rem; box-shadow: 0 0 0 3px #fff, 0 8px 16px rgba(10, 58, 63, .12); transform: rotate(-2deg);
}
.wlp-lists { columns: 2 380px; column-gap: 1.75rem; }
.wlp-list {
	--c: var(--wp--preset--color--coral-text);
	break-inside: avoid; display: inline-block; width: 100%; margin: 0 0 1.75rem; padding: 0 0 .6rem;
	border-radius: 24px; background: #fff; box-shadow: 0 14px 30px rgba(10, 58, 63, .12); overflow: hidden;
}
.wlp-list--sun { --c: var(--wp--preset--color--sun); }
.wlp-list--teal { --c: var(--wp--preset--color--teal); }
.wlp-list--mint { --c: var(--wp--preset--color--mint); }
.wlp-list h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .7rem; margin: 0; padding: 1rem 1.3rem; background: var(--c); color: #fff; font-size: 1.35rem; }
.wlp-list--sun h3, .wlp-list--mint h3 { color: var(--wp--preset--color--teal-deep); }
.wlp-list h3 small { font-family: "Caveat", "Segoe Print", cursive; font-size: 1.35rem; font-weight: 700; opacity: .9; }
.wlp-list__note { margin: .9rem 1.3rem 0; font-size: .9375rem; font-style: italic; color: #3f4e50; }
.wlp-list ul { list-style: none; margin: 0; padding: .4rem 1.3rem 0; }
.wlp-list li { position: relative; padding: .8rem 0 .8rem 2.1rem; border-bottom: 2px dashed rgba(14, 79, 85, .12); }
.wlp-list li:last-child { border-bottom: 0; }
.wlp-list li::before {
	content: ""; position: absolute; left: 0; top: .95rem; width: 1.35rem; height: 1.35rem; border-radius: 6px;
	box-shadow: inset 0 0 0 2.5px var(--c);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E4F55' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 0 no-repeat;
	transition: background-size .2s var(--wlp-ease);
}
.wlp-list li:hover::before { background-size: 80%; }
.wlp-list li strong { display: block; color: var(--wp--preset--color--teal); font-size: 1.05rem; }
.wlp-list li > span { display: block; margin: .15rem 0 .45rem; font-size: .9375rem; line-height: 1.5; color: #3f4e50; }
.wlp-amazon {
	display: inline-flex; align-items: center; gap: .3rem; margin: 0 .5rem .2rem 0; padding: .3rem .8rem; border-radius: 999px;
	background: var(--wp--preset--color--teal); color: #fff !important; font-size: .875rem; font-weight: 800; text-decoration: none;
	transition: background-color .2s, transform .2s var(--wlp-ease);
}
.wlp-amazon::after { content: "→"; transition: transform .2s var(--wlp-ease); }
.wlp-amazon:hover, .wlp-amazon:focus-visible { background: var(--wp--preset--color--coral-text); }
.wlp-amazon:hover::after { transform: translateX(3px); }

/* Closing band: our own printables. */
.wlp-rec-shop { background: var(--wp--preset--color--coral-text) radial-gradient(circle, rgba(255, 255, 255, .12) 2px, transparent 2.5px) 0 0 / 22px 22px; color: #fff; overflow: clip; }
.wlp-rec-shop__inner { display: grid; grid-template-columns: minmax(0, 2fr) 3fr; gap: 2rem; align-items: center; }
.wlp-rec-shop h2 { color: #fff; margin: .2rem 0 .5rem; }
.wlp-rec-shop .wlp-kicker { color: var(--wp--preset--color--sun-soft); }
.wlp-rec-shop .wp-element-button { background: var(--wp--preset--color--sun); color: var(--wp--preset--color--teal-deep); box-shadow: 0 0 0 4px #fff; }
.wlp-rec-shop .wp-element-button:hover { background: #fff; }
.wlp-rec-shop__fan { display: flex; justify-content: center; }
.wlp-rec-shop__fan img { width: 34%; height: auto; border-radius: 8px; box-shadow: 0 0 0 4px #fff, 0 14px 26px rgba(0, 0, 0, .3); }
.wlp-rec-shop__fan img + img { margin-left: -9%; }
.wlp-rec-shop__fan img:nth-child(1) { transform: rotate(-10deg) translateY(10px); }
.wlp-rec-shop__fan img:nth-child(2) { position: relative; z-index: 1; transform: rotate(-1deg); }
.wlp-rec-shop__fan img:nth-child(3) { position: relative; z-index: 2; transform: rotate(9deg) translateY(8px); }

@media (max-width: 781px) {
	.wlp-starter { margin-top: 3rem; }
	.wlp-shelf__row { height: 12.5rem; }
	.wlp-shelf__row { gap: .35rem; padding: 0 .5rem; }
	.wlp-spine, .wlp-spine--wide { width: 3.1rem; }
	.wlp-shelf__pal { display: none; } /* the books need the room on phones */
	.wlp-spine span { font-size: .78rem; }
	.wlp-rec-shop__inner { grid-template-columns: 1fr; }
	.wlp-rec-shop__fan { max-width: 320px; margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
	.wlp-spine, .wlp-jump a, .wlp-starter__list a { transition: none; }
}

/* =========================================================
   About page (2026-10-27): a welcome with Ria's girl holding a "hello" card, the story, what we believe on
   flashcards with the teaching order, three arch-shaped doors, promises beside an honest "who this isn't for",
   and a coral closing band.
   Contrast: teal on mint-soft 8.3:1, ink on white 15:1, white on teal-deep 12.4:1, sun on teal-deep 7.7:1,
   white on coral-text 5.55:1, teal-deep on sun 7.7:1, coral-text on white 5.55:1.
   ========================================================= */
.wlp-about-head {
	background-color: var(--wp--preset--color--mint-soft);
	background-image: radial-gradient(circle, rgba(14, 79, 85, .08) 2px, transparent 2.5px);
	background-size: 22px 22px;
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	overflow: clip;
}
.wlp-about-head h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); line-height: 1.06; text-wrap: balance; }
.wlp-about-head__lead { font-size: clamp(1.1rem, 1.8vw, 1.3rem); max-width: 34rem; }

/* The girl holds the card: her fingertips reach --hold (share of her width) below the card's top edge. */
.wlp-hello { --kid: 86cqw; position: relative; max-width: 440px; margin: 0 auto; container-type: inline-size; transform: rotate(-2deg); }
.wlp-hello__girl { position: absolute; top: 0; left: 50%; z-index: 2; width: var(--kid); height: auto; transform: translateX(-50%); filter: drop-shadow(0 8px 10px rgba(10, 58, 63, .15)); pointer-events: none; }
.wlp-hello__card {
	position: relative; z-index: 1; margin-top: calc(var(--kid) * (var(--r) - var(--hold)));
	padding: 2.4rem 1.2rem 1.4rem; border-radius: 26px; border-top: 12px solid var(--wp--preset--color--coral-text);
	background: #fff; text-align: center; box-shadow: 0 22px 44px rgba(10, 58, 63, .2);
}
.wlp-hello__word { display: flex; justify-content: center; gap: .14em; margin: 0; font-size: clamp(3.2rem, 15cqw, 5rem); font-weight: 900; line-height: 1; color: var(--wp--preset--color--teal); }
.wlp-hello__word span { position: relative; padding-bottom: .34em; }
.wlp-hello__word span::after { content: ""; position: absolute; left: 50%; bottom: 0; width: .2em; height: .2em; margin-left: -.1em; border-radius: 50%; background: var(--wp--preset--color--coral); }
.wlp-hello__word span.is-digraph::after { width: .8em; height: .12em; margin-left: -.4em; border-radius: 4px; }
.wlp-hello__note { margin: .5rem 0 0; color: var(--wp--preset--color--coral-text); font-family: "Caveat", "Segoe Print", cursive; font-size: 1.9rem; font-weight: 700; transform: rotate(-3deg); }

/* Story: text beside a taped "what we left out" note. */
.wlp-story__lead { font-size: clamp(1.1rem, 1.8vw, 1.3rem); font-weight: 700; color: var(--wp--preset--color--teal); }
.wlp-leftout {
	position: relative; max-width: 360px; margin: 1.5rem auto 0; padding: 2.2rem 1.6rem 1.6rem;
	background: var(--wp--preset--color--sun-soft); border-radius: 4px 4px 26px 4px;
	box-shadow: 0 16px 30px rgba(10, 58, 63, .15); transform: rotate(2.5deg);
}
.wlp-leftout::before { content: ""; position: absolute; top: -13px; left: 50%; width: 6rem; height: 1.7rem; margin-left: -3rem; background: rgba(232, 96, 76, .8); box-shadow: 0 1px 3px rgba(0, 0, 0, .14); transform: rotate(-4deg); }
.wlp-leftout__title { margin: 0 0 .4rem; color: var(--wp--preset--color--coral-text); font-family: "Caveat", "Segoe Print", cursive; font-size: 2rem; font-weight: 700; }
.wlp-leftout ul { list-style: none; margin: 0 0 .9rem; padding: 0; }
.wlp-leftout li { font-size: 1.45rem; font-weight: 900; color: var(--wp--preset--color--teal); }
.wlp-leftout s { text-decoration: line-through var(--wp--preset--color--coral); text-decoration-thickness: 4px; }
.wlp-leftout__kept { margin: 0; font-size: 1rem; }

/* Beliefs on flashcards, then the teaching order. */
.wlp-beliefs { background: var(--wp--preset--color--teal-deep) radial-gradient(circle, rgba(255, 255, 255, .07) 2px, transparent 2.5px) 0 0 / 20px 20px; color: var(--wp--preset--color--mint-soft); }
.wlp-beliefs .wlp-kicker { color: var(--wp--preset--color--sun); }
.wlp-beliefs h2 { color: #fff; margin: .2rem 0 0; }
.wlp-flash { list-style: none; padding: 0; margin: 2.2rem 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6rem; }
.wlp-flash__card {
	position: relative; display: flex; flex-direction: column; gap: .4rem; padding: 2.6rem 1.3rem 1.4rem;
	border-radius: 22px; background: #fff; color: var(--wp--preset--color--ink); box-shadow: 0 16px 30px rgba(0, 0, 0, .25);
	transform: rotate(-1.5deg); transition: transform .25s var(--wlp-ease);
}
.wlp-flash__card:nth-child(2n) { transform: rotate(1.5deg); }
.wlp-flash__card:hover { transform: rotate(0) translateY(-6px); }
.wlp-flash__card strong { font-size: 1.2rem; color: var(--wp--preset--color--teal); }
.wlp-flash__tile {
	position: absolute; top: -1.4rem; left: 1.2rem; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 14px;
	background: var(--wp--preset--color--coral-text); color: #fff; font-size: 2rem; font-weight: 900; box-shadow: 0 0 0 4px #fff; transform: rotate(-8deg);
}
.wlp-flash__card:nth-child(2) .wlp-flash__tile { background: var(--wp--preset--color--sun); color: var(--wp--preset--color--teal); transform: rotate(6deg); }
.wlp-flash__card:nth-child(3) .wlp-flash__tile { background: var(--wp--preset--color--mint); color: var(--wp--preset--color--teal); }
.wlp-flash__card:nth-child(4) .wlp-flash__tile { background: #F79D85; color: var(--wp--preset--color--ink); transform: rotate(5deg); }

.wlp-order { margin-top: 2.6rem; }
.wlp-order__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 1rem; margin: 0 0 1rem; color: #fff; font-size: 1.35rem; font-weight: 900; }
.wlp-order__title span { color: var(--wp--preset--color--sun); font-family: "Caveat", "Segoe Print", cursive; font-size: 1.6rem; font-weight: 700; }
.wlp-order ol { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; counter-reset: step; }
.wlp-order ol::before { content: ""; position: absolute; top: 2.1rem; left: 7%; right: 7%; border-top: 3px dashed rgba(255, 255, 255, .3); }
.wlp-order li { counter-increment: step; position: relative; }
.wlp-order a { display: grid; justify-items: center; gap: .55rem; color: #fff; font-weight: 800; text-align: center; text-decoration: none; }
.wlp-order b {
	display: grid; place-items: center; min-width: 4.2rem; height: 4.2rem; padding-inline: .6rem; border-radius: 18px;
	background: #fff; color: var(--wp--preset--color--teal); font-size: 1.25rem; font-weight: 900; box-shadow: 0 0 0 4px var(--wp--preset--color--teal-deep);
	transition: transform .2s var(--wlp-ease), background-color .2s;
}
.wlp-order b::before { content: counter(step); position: absolute; top: -.6rem; margin-left: 3.6rem; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--wp--preset--color--sun); color: var(--wp--preset--color--teal-deep); font-size: .8125rem; }
.wlp-order a:hover b, .wlp-order a:focus-visible b { transform: translateY(-4px) rotate(-4deg); background: var(--wp--preset--color--sun); }
.wlp-order a:hover, .wlp-order a:focus-visible { text-decoration: underline; text-underline-offset: .2em; }

/* Three ways we can help: rounded cards like the Shop's free cards, a bold dotted colour panel on top. */
.wlp-doors__list { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.75rem; }
.wlp-door {
	--panel: var(--wp--preset--color--sun);
	display: flex; flex-direction: column; gap: .45rem; height: 100%; padding: 0 1.5rem 1.6rem; overflow: hidden;
	border-radius: 28px; background: #fff; color: var(--wp--preset--color--ink); text-decoration: none;
	box-shadow: 0 0 0 4px #fff, 0 16px 34px rgba(10, 58, 63, .14); transition: transform .3s var(--wlp-ease), box-shadow .3s var(--wlp-ease);
}
.wlp-door--shop { --panel: var(--wp--preset--color--mint); }
.wlp-door--rec { --panel: var(--wp--preset--color--coral-text); }
.wlp-door:hover, .wlp-door:focus-visible { transform: translateY(-6px) rotate(-.6deg); box-shadow: 0 0 0 4px #fff, 0 24px 44px rgba(10, 58, 63, .2); }
.wlp-door__art {
	display: grid; place-items: center; height: 12rem; flex: none; overflow: hidden; margin: 0 -1.5rem .8rem;
	background: var(--panel) radial-gradient(circle, rgba(255, 255, 255, .3) 2px, transparent 2.5px) 0 0 / 18px 18px;
}
.wlp-door strong { font-size: 1.4rem; color: var(--wp--preset--color--teal); }
.wlp-door em { margin-top: auto; padding-top: .4rem; font-style: normal; font-weight: 800; color: var(--wp--preset--color--coral-text); }
.wlp-door em::after { content: " →"; display: inline-block; transition: transform .2s var(--wlp-ease); }
.wlp-door:hover em::after { transform: translateX(4px); }
.wlp-door__tiles { display: flex; gap: .35rem; }
.wlp-door__tiles span { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 10px; background: var(--wp--preset--color--coral-text); color: #fff; font-size: 1.4rem; font-weight: 900; box-shadow: 0 0 0 3px #fff; transform: rotate(-6deg); }
.wlp-door__tiles span:nth-child(2) { background: var(--wp--preset--color--sun); color: var(--wp--preset--color--teal); transform: rotate(5deg); }
.wlp-door__tiles span:nth-child(3) { background: var(--wp--preset--color--mint); color: var(--wp--preset--color--teal); }
.wlp-door__tiles span:nth-child(4) { background: var(--wp--preset--color--teal); transform: rotate(6deg); }
.wlp-door__tiles span:nth-child(5) { background: #F79D85; color: var(--wp--preset--color--ink); transform: rotate(-4deg); }
.wlp-door--shop .wlp-door__art { grid-template-columns: auto auto; justify-content: center; align-content: center; }
.wlp-door--shop .wlp-door__art img { width: 5.2rem; height: auto; border-radius: 6px; box-shadow: 0 0 0 3px #fff, 0 10px 18px rgba(10, 58, 63, .2); transform: rotate(-7deg); }
.wlp-door--shop .wlp-door__art img + img { margin-left: -1.6rem; transform: rotate(6deg) translateY(6px); }
.wlp-door__spines { display: flex; align-items: flex-end; gap: .3rem; height: 6.5rem; padding: 0 .6rem; border-bottom: 9px solid var(--wp--preset--color--teal-deep); }
.wlp-door--rec .wlp-door__spines i:nth-child(1) { background: #fff; } /* the first spine would vanish into the coral panel */
.wlp-door__spines i { width: 1.5rem; height: 100%; border-radius: 4px 4px 1px 1px; background: var(--wp--preset--color--coral-text); }
.wlp-door__spines i:nth-child(2) { height: 85%; background: var(--wp--preset--color--sun); }
.wlp-door__spines i:nth-child(3) { width: 1.9rem; height: 95%; background: var(--wp--preset--color--teal); }
.wlp-door__spines i:nth-child(4) { height: 78%; background: var(--wp--preset--color--mint); }
.wlp-door__spines i:nth-child(5) { height: 90%; background: #F79D85; transform: rotate(10deg); transform-origin: bottom left; }

/* Promises beside an honest note. */
.wlp-trust { background: var(--wp--preset--color--sun-soft) radial-gradient(circle, rgba(184, 63, 44, .12) 2px, transparent 2.5px) 0 0 / 22px 22px; }
.wlp-trust__grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 2rem; align-items: start; }
.wlp-promises { padding: 1.8rem 1.8rem 1.4rem; border-radius: 26px; background: #fff; box-shadow: 0 16px 34px rgba(10, 58, 63, .12); }
.wlp-promises h2, .wlp-notfor h2 { margin: .2rem 0 1rem; font-size: clamp(1.6rem, 3vw, 2.1rem); }
.wlp-promises ul { list-style: none; margin: 0; padding: 0; }
.wlp-promises li { position: relative; padding: .7rem 0 .7rem 2.4rem; border-bottom: 2px dashed rgba(14, 79, 85, .12); }
.wlp-promises li:last-child { border-bottom: 0; }
.wlp-promises li::before {
	content: ""; position: absolute; left: 0; top: .75rem; width: 1.6rem; height: 1.6rem; border-radius: 50%;
	background: var(--wp--preset--color--sun) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E4F55' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 68% no-repeat;
}
.wlp-promises strong { color: var(--wp--preset--color--teal); }
.wlp-promises a { color: var(--wp--preset--color--coral-text); font-weight: 800; }
.wlp-notfor {
	position: relative; margin-top: 1.4rem; padding: 2rem 1.6rem 1.4rem; border-radius: 26px; background: #fff;
	box-shadow: inset 0 0 0 3px var(--wp--preset--color--coral-text), 0 16px 34px rgba(10, 58, 63, .12); transform: rotate(1.5deg);
}
.wlp-notfor__hand { position: absolute; top: -1.4rem; left: 1.2rem; margin: 0; padding: .1rem .8rem; border-radius: 999px; background: var(--wp--preset--color--coral-text); color: #fff; font-family: "Caveat", "Segoe Print", cursive; font-size: 1.6rem; font-weight: 700; transform: rotate(-4deg); }
.wlp-notfor p:last-child { margin-bottom: 0; }

/* Closing band. */
.wlp-about-end { background: var(--wp--preset--color--coral-text) radial-gradient(circle, rgba(255, 255, 255, .12) 2px, transparent 2.5px) 0 0 / 22px 22px; color: #fff; }
.wlp-about-end__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2.5rem; }
.wlp-about-end .wlp-kicker { color: var(--wp--preset--color--sun-soft); }
.wlp-about-end h2 { margin: .2rem 0 .4rem; color: #fff; }
.wlp-about-end__inner p { margin: 0; }
.wlp-about-end__buttons { display: flex; flex-wrap: wrap; gap: .9rem; }
.wlp-about-end .wp-element-button { background: var(--wp--preset--color--sun); color: var(--wp--preset--color--teal-deep); box-shadow: 0 0 0 4px #fff; }
.wlp-about-end .wp-element-button.wlp-about-end__soft { background: transparent; color: #fff; box-shadow: inset 0 0 0 3px #fff; }
.wlp-about-end .wp-element-button:hover { background: #fff; color: var(--wp--preset--color--teal-deep); }

@media (max-width: 1023px) {
	.wlp-flash { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.4rem; }
	.wlp-order ol { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 1.6rem; }
	.wlp-order ol::before { display: none; }
	.wlp-doors__list { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; }
	.wlp-trust__grid { grid-template-columns: 1fr; }
}
@media (max-width: 781px) {
	.wlp-hello { max-width: 340px; margin-top: 1.5rem; }
}
@media (max-width: 560px) {
	.wlp-flash { grid-template-columns: 1fr; }
	.wlp-order ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
	.wlp-flash__card, .wlp-door, .wlp-order b { transition: none; }
}

/* =========================================================
   Contact page (2026-10-27): Ria's family illustration as a framed banner (wide scene on computers, the family
   close-up on phones), a message card (teal-deep side panel + restyled form), and "Before you write" notes.
   Contrast: teal on sun-soft 7.6:1, white on teal-deep 12.4:1, sun on teal-deep 7.7:1, teal-deep on sun 7.7:1.
   ========================================================= */
.wlp-contact-head {
	background-color: var(--wp--preset--color--sun-soft);
	background-image: radial-gradient(circle, rgba(184, 63, 44, .12) 2px, transparent 2.5px);
	background-size: 22px 22px;
	padding-block: var(--wp--preset--spacing--50) 9rem;
}
.wlp-contact-head h1 { max-width: 22ch; font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.06; text-wrap: balance; }
.wlp-contact-head__lead { font-size: clamp(1.1rem, 1.8vw, 1.3rem); }
.wlp-contact-banner { display: block; margin-top: 1.6rem !important; }
.wlp-contact-banner img { display: block; width: 100%; height: auto; border-radius: 32px; box-shadow: 0 0 0 8px #fff, 0 26px 50px rgba(10, 58, 63, .22); }

/* The message card rises over the bottom of the banner. */
.wlp-contact { padding-top: 0; }
.wlp-contact-card {
	display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); margin-top: -7rem !important;
	border-radius: 32px; background: #fff; box-shadow: 0 26px 54px rgba(10, 58, 63, .18); overflow: hidden; position: relative;
}
.wlp-contact-card__side {
	padding: 2.4rem 2rem; color: var(--wp--preset--color--mint-soft);
	background: var(--wp--preset--color--teal-deep) radial-gradient(circle, rgba(255, 255, 255, .07) 2px, transparent 2.5px) 0 0 / 20px 20px;
}
.wlp-contact-card__hand { margin: 0 0 1rem; color: var(--wp--preset--color--sun); font-family: "Caveat", "Segoe Print", cursive; font-size: 2.1rem; font-weight: 700; line-height: 1.1; transform: rotate(-3deg); transform-origin: left; }
.wlp-contact-card__side ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; }
.wlp-contact-card__side li { position: relative; padding-left: 2.2rem; line-height: 1.5; }
.wlp-contact-card__side li::before {
	content: ""; position: absolute; left: 0; top: .1rem; width: 1.5rem; height: 1.5rem; border-radius: 50%;
	background: var(--wp--preset--color--sun) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A3A3F' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 68% no-repeat;
}
.wlp-contact-card__side strong { color: #fff; }
.wlp-contact-card__small { margin: 1.6rem 0 0; padding-top: 1rem; border-top: 2px dashed rgba(255, 255, 255, .2); font-size: .9375rem; }
.wlp-contact-card__form { padding: 2.4rem 2.2rem 2.2rem; }
.wlp-contact-card__form h2 { margin: 0 0 1.2rem; font-size: clamp(1.7rem, 3vw, 2.2rem); }

/* The form itself, roomier and friendlier here. */
.wlp-contact-card .wlp-form { gap: 1.1rem; }
.wlp-contact-card .wlp-field label { font-size: 1rem; }
.wlp-contact-card .wlp-field input, .wlp-contact-card .wlp-field textarea {
	padding: .85rem 1rem; border: 2px solid var(--wp--preset--color--mint); border-radius: 16px; background: var(--wp--preset--color--cream); font-size: 1.05rem;
	transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.wlp-contact-card .wlp-field textarea { min-height: 160px; }
.wlp-contact-card .wlp-field input:focus, .wlp-contact-card .wlp-field textarea:focus { border-color: var(--wp--preset--color--teal); background: #fff; box-shadow: 0 0 0 4px var(--wp--preset--color--sun-soft); }
.wlp-contact-card .wlp-submit {
	padding: 1rem 2rem; border-radius: 999px; background: var(--wp--preset--color--sun); color: var(--wp--preset--color--teal-deep);
	font-size: 1.15rem; font-weight: 900; box-shadow: 0 0 0 4px #fff, 0 8px 0 4px #C99415, 0 14px 24px rgba(10, 58, 63, .2);
	transform: rotate(-1.5deg); transition: transform .15s var(--wlp-ease), box-shadow .15s var(--wlp-ease);
}
.wlp-contact-card .wlp-submit::after { content: " →"; }
.wlp-contact-card .wlp-submit:hover, .wlp-contact-card .wlp-submit:focus-visible { background: var(--wp--preset--color--sun); color: var(--wp--preset--color--teal-deep); transform: rotate(-1.5deg) translateY(3px); box-shadow: 0 0 0 4px #fff, 0 5px 0 4px #C99415, 0 10px 18px rgba(10, 58, 63, .2); }
.wlp-contact-card .wlp-submit:focus-visible { outline: 3px solid var(--wp--preset--color--teal); outline-offset: 8px; }

/* Before you write: three of the taped notes from the Shop's printing tips. */
.wlp-before { padding-top: var(--wp--preset--spacing--40); }
.wlp-before__hand { margin: 0 0 .4rem; color: var(--wp--preset--color--coral-text); font-family: "Caveat", "Segoe Print", cursive; font-size: 2rem; font-weight: 700; }
.wlp-notes.wlp-before__notes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wlp-before__notes a { color: var(--wp--preset--color--coral-text); font-weight: 800; }

@media (max-width: 900px) {
	.wlp-contact-card { grid-template-columns: 1fr; }
	.wlp-notes.wlp-before__notes { grid-template-columns: 1fr; max-width: 520px; }
}
@media (max-width: 700px) {
	.wlp-contact-head { padding-bottom: 6rem; }
	.wlp-contact-card { margin-top: -4.5rem !important; }
	.wlp-contact-card__side, .wlp-contact-card__form { padding: 1.8rem 1.3rem; }
	.wlp-contact-banner img { border-radius: 24px; box-shadow: 0 0 0 6px #fff, 0 20px 40px rgba(10, 58, 63, .2); }
}

/* =========================================================
   Guides (2026-10-27): a sunny head with the guide's letter tiles, then two columns: numbered chapter cards on
   the left, a sidebar with the pin card and a sticky "In this guide" menu on the right (wlp-core guide-layout.php).
   Phones: one column, the pin after the intro and the menu as a tap-to-open list.
   Contrast: teal on sun-soft 7.6:1, ink on white 15:1, white on coral-text 5.55:1, white on teal 9.3:1,
   teal-deep on sun 7.7:1, coral-text on white 5.55:1.
   ========================================================= */
.wlp-article__head {
	background-color: var(--wp--preset--color--sun-soft);
	background-image: radial-gradient(circle, rgba(184, 63, 44, .12) 2px, transparent 2.5px);
	background-size: 22px 22px;
	padding-block: var(--wp--preset--spacing--50);
}
.wlp-article__head h1 { font-size: clamp(2.1rem, 4.6vw, 3.3rem); line-height: 1.06; text-wrap: balance; }
.wlp-article__head .wlp-article__topic a { display: inline-block; padding: .2rem .75rem; border-radius: 999px; background: #fff; box-shadow: 0 0 0 2px rgba(184, 63, 44, .25); }
.wlp-article__head .wlp-article__topic { display: flex; flex-wrap: wrap; gap: .5rem; }
.wlp-article__head .wp-block-post-terms__separator { display: none; }
.wlp-article__lead p { max-width: 40rem; font-size: clamp(1.1rem, 1.8vw, 1.3rem); }
.wlp-article__meta { align-items: center; gap: .4rem 1rem; }
.wlp-article__minutes { display: inline-block; padding: .25rem .8rem; border-radius: 999px; background: var(--wp--preset--color--teal); color: #fff; font-weight: 800; }
.wlp-article__art { display: flex; justify-content: center; }
.wlp-guide-art { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; }
.wlp-guide-art span {
	display: grid; place-items: center; min-width: clamp(4rem, 8vw, 6.2rem); height: clamp(4rem, 8vw, 6.2rem); padding-inline: .4rem;
	border-radius: 22px; background: var(--wp--preset--color--coral-text); color: #fff; font-size: clamp(2.4rem, 5vw, 3.8rem); font-weight: 900;
	box-shadow: 0 0 0 5px #fff, 0 14px 26px rgba(10, 58, 63, .2); transform: rotate(-6deg);
}
.wlp-guide-art span:nth-child(4n+2) { background: var(--wp--preset--color--sun); color: var(--wp--preset--color--teal); transform: rotate(5deg) translateY(6px); }
.wlp-guide-art span:nth-child(4n+3) { background: var(--wp--preset--color--mint); color: var(--wp--preset--color--teal); transform: rotate(-2deg); }
.wlp-guide-art span:nth-child(4n+4) { background: var(--wp--preset--color--teal); transform: rotate(6deg) translateY(4px); }
.wlp-guide-art--many span { min-width: clamp(3rem, 5.5vw, 4.2rem); height: clamp(3rem, 5.5vw, 4.2rem); font-size: clamp(1.8rem, 3.4vw, 2.6rem); border-radius: 16px; }
@media (prefers-reduced-motion: no-preference) {
	.wlp-article__art:hover .wlp-guide-art span { animation: wlp-hop .5s calc(var(--i, 0) * 70ms) var(--wlp-ease); }
}

/* Two columns. */
.wlp-article__body { font-size: 1.1rem; line-height: 1.7; }
.wlp-guide { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 2.5rem; align-items: stretch; }
.wlp-guide__main > * { margin-block: 0; }
.wlp-guide__aside { position: relative; }
.wlp-guide__aside .wlp-pin--guide { float: none; width: auto; margin: 0 0 1.5rem !important; }
.wlp-guide__aside .wlp-guide-menu { position: sticky; top: 110px; }
.wlp-guide__pin-phone, .wlp-guide-menu-phone { display: none; }

.wlp-guide-menu { padding: 1.3rem 1.2rem 1rem; border-radius: 24px; background: #fff; box-shadow: 0 14px 30px rgba(10, 58, 63, .12); }
.wlp-guide-menu__title { margin: 0 0 .5rem; color: var(--wp--preset--color--coral-text); font-family: "Caveat", "Segoe Print", cursive; font-size: 1.8rem; font-weight: 700; line-height: 1; }
.wlp-guide-menu ol { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.wlp-guide-menu a { display: grid; grid-template-columns: 1.8rem 1fr; gap: .6rem; align-items: start; padding: .4rem .5rem; border-radius: 12px; color: var(--wp--preset--color--ink) !important; font-size: .9375rem; line-height: 1.35; text-decoration: none !important; transition: background-color .2s; }
.wlp-guide-menu a span { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 8px; background: var(--wp--preset--color--mint-soft); color: var(--wp--preset--color--teal); font-size: .8125rem; font-weight: 900; }
.wlp-guide-menu a:hover, .wlp-guide-menu a:focus-visible { background: var(--wp--preset--color--cream); }
.wlp-guide-menu a.is-active { background: var(--wp--preset--color--sun-soft); font-weight: 800; }
.wlp-guide-menu a.is-active span { background: var(--wp--preset--color--coral-text); color: #fff; }

/* Intro: the first paragraph reads like a lead. */
.wlp-guide__intro { padding: 0 .3rem 1rem; }
.wlp-guide__intro > p:first-of-type { font-size: clamp(1.15rem, 1.8vw, 1.3rem); font-weight: 600; color: var(--wp--preset--color--teal); }
.wlp-guide__intro .wlp-disclosure { margin-bottom: 1rem; }

/* Chapters: numbered cards, accent colours cycling coral, sun, mint, teal. */
.wlp-chapter {
	--band: var(--wp--preset--color--coral-text); --num-ink: #fff;
	margin-top: 1.75rem !important; padding: 2rem 2.2rem 1.6rem; border-radius: 28px; border-top: 10px solid var(--band);
	background: #fff; box-shadow: 0 16px 34px rgba(10, 58, 63, .1); scroll-margin-top: 110px;
}
.wlp-chapter:nth-of-type(4n+2) { --band: var(--wp--preset--color--sun); --num-ink: var(--wp--preset--color--teal); }
.wlp-chapter:nth-of-type(4n+3) { --band: var(--wp--preset--color--mint); --num-ink: var(--wp--preset--color--teal); }
.wlp-chapter:nth-of-type(4n+4) { --band: var(--wp--preset--color--teal); }
.wlp-chapter__head { display: flex; align-items: center; gap: 1rem; margin-bottom: .8rem; }
.wlp-chapter__num { flex: none; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border-radius: 14px; background: var(--band); color: var(--num-ink); font-size: 1.6rem; font-weight: 900; box-shadow: 0 0 0 4px #fff, 0 8px 14px rgba(10, 58, 63, .15); transform: rotate(-6deg); }
.wlp-chapter:nth-of-type(2n) .wlp-chapter__num { transform: rotate(5deg); }
.wlp-article__body .wlp-chapter h2 { margin: 0; font-size: clamp(1.5rem, 2.8vw, 2rem); line-height: 1.15; }
.wlp-chapter__body > :first-child { margin-top: 0; }
.wlp-chapter__body > :last-child { margin-bottom: 0; }
.wlp-article__body .wlp-chapter h3 { position: relative; margin-top: 1.8rem; padding-left: 1.3rem; color: var(--wp--preset--color--coral-text); font-size: 1.3rem; }
.wlp-article__body .wlp-chapter h3::before { content: ""; position: absolute; left: 0; top: .45em; width: .75rem; height: .75rem; border-radius: 4px; background: var(--wp--preset--color--sun); transform: rotate(45deg); }

/* Lists: sun dots, and numbered tiles for ordered lists. */
.wlp-article__body .wlp-chapter ul:not(.wlp-notes, .wlp-family__words), .wlp-guide__intro ul { list-style: none; padding-left: 0; }
.wlp-article__body .wlp-chapter ul:not(.wlp-notes, .wlp-family__words) > li, .wlp-guide__intro ul > li { position: relative; padding-left: 1.8rem; }
.wlp-article__body .wlp-chapter ul:not(.wlp-notes, .wlp-family__words) > li::before, .wlp-guide__intro ul > li::before { content: ""; position: absolute; left: .2rem; top: .6em; width: .7rem; height: .7rem; border-radius: 50%; background: var(--wp--preset--color--sun); box-shadow: 0 0 0 3px var(--wp--preset--color--sun-soft); }
.wlp-article__body .wlp-chapter ol { list-style: none; padding-left: 0; counter-reset: wlp-ol; }
.wlp-article__body .wlp-chapter ol > li { position: relative; padding-left: 2.6rem; counter-increment: wlp-ol; }
.wlp-article__body .wlp-chapter ol > li::before { content: counter(wlp-ol); position: absolute; left: 0; top: .1em; display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 8px; background: var(--wp--preset--color--teal); color: #fff; font-size: .875rem; font-weight: 900; }

/* Tables: a rounded card with striped rows. */
.wlp-article__body .wp-block-table { margin-block: 1.4rem; border-radius: 18px; box-shadow: inset 0 0 0 2px var(--wp--preset--color--mint-soft); overflow: hidden; overflow-x: auto; }
.wlp-article__body .wp-block-table th { background: var(--wp--preset--color--teal); color: #fff; }
.wlp-article__body .wp-block-table tbody tr:nth-child(2n) td { background: var(--wp--preset--color--cream); }
.wlp-article__body .wp-block-table td, .wlp-article__body .wp-block-table th { border-bottom: 0; }

/* "Try this tonight": a taped sticky note. */
.wlp-article__body .wlp-tonight {
	margin-block: 1.8rem !important; padding: 2.4rem 1.6rem 1.4rem; border-radius: 4px 4px 26px 4px;
	background: var(--wp--preset--color--sun-soft); box-shadow: 0 16px 30px rgba(10, 58, 63, .14); transform: rotate(-.8deg);
}
.wlp-article__body .wlp-tonight::before { content: ""; position: absolute; top: -13px; left: 50%; width: 6rem; height: 1.7rem; margin-left: -3rem; background: rgba(232, 96, 76, .8); box-shadow: 0 1px 3px rgba(0, 0, 0, .14); transform: rotate(-4deg); }
.wlp-article__body .wlp-tonight > :first-child {
	position: static; display: inline-block; margin: 0 0 .5rem; padding: 0; background: none; box-shadow: none; transform: rotate(-3deg);
	color: var(--wp--preset--color--coral-text); font-family: "Caveat", "Segoe Print", cursive; font-size: 2rem; font-weight: 700; letter-spacing: 0;
}
.wlp-article__body .wlp-tonight > :first-child::after { content: "!"; }

/* Printable box: a bold coral band with a little stack of pages. */
.wlp-article__body .wlp-printable-cta {
	position: relative; margin-top: 1.75rem !important; padding: 2rem 11rem 2rem 2.2rem; border-radius: 28px; overflow: hidden; color: #fff;
	background: var(--wp--preset--color--coral-text) radial-gradient(circle, rgba(255, 255, 255, .12) 2px, transparent 2.5px) 0 0 / 20px 20px;
	box-shadow: 0 16px 34px rgba(10, 58, 63, .16);
}
.wlp-article__body .wlp-printable-cta::before, .wlp-article__body .wlp-printable-cta::after {
	content: ""; position: absolute; right: 2.4rem; top: 50%; width: 5.6rem; height: 7.2rem; margin-top: -3.6rem; border-radius: 8px; background: #fff;
	background-image: repeating-linear-gradient(transparent 0 14px, rgba(14, 79, 85, .15) 14px 16px); background-clip: content-box; padding: 1rem .7rem;
	box-shadow: 0 10px 20px rgba(0, 0, 0, .25); transform: rotate(8deg);
}
.wlp-article__body .wlp-printable-cta::after { right: 4.2rem; transform: rotate(-8deg); background-color: var(--wp--preset--color--sun-soft); }
.wlp-article__body .wlp-printable-cta h2, .wlp-article__body .wlp-printable-cta h3 { color: var(--wp--preset--color--sun); }
.wlp-article__body .wlp-printable-cta a:not(.wp-block-button__link) { color: #fff; }
.wlp-article__body .wlp-printable-cta .wp-block-button__link { background: var(--wp--preset--color--sun); color: var(--wp--preset--color--teal-deep); box-shadow: 0 0 0 4px #fff; }
.wlp-article__body .wlp-printable-cta .wp-block-button__link:hover { background: #fff; }

/* FAQ: a card of its own with friendly accordion rows. */
.wlp-chapter-faq { margin-top: 1.75rem !important; padding: 2rem 2.2rem 1.6rem; border-radius: 28px; background: var(--wp--preset--color--teal-deep) radial-gradient(circle, rgba(255, 255, 255, .07) 2px, transparent 2.5px) 0 0 / 20px 20px; scroll-margin-top: 110px; }
.wlp-chapter-faq h2 { margin-top: 0 !important; color: #fff; font-size: clamp(1.5rem, 2.8vw, 2rem); }
.wlp-chapter-faq .wp-block-details { margin: 0 0 .7rem; border-radius: 18px; background: #fff; box-shadow: none; }
.wlp-chapter-faq summary { padding: 1rem 1.2rem; font-size: 1.05rem; }
.wlp-chapter-faq summary::after { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--wp--preset--color--sun); color: var(--wp--preset--color--teal-deep); font-weight: 900; }
.wlp-chapter-faq .wp-block-details > :not(summary) { padding: 0 1.2rem 1.1rem; }

@media (max-width: 1023px) {
	.wlp-guide { grid-template-columns: 1fr; }
	.wlp-guide__aside { display: none; }
	.wlp-guide__pin-phone { display: block; margin: .5rem 0 1rem; }
	.wlp-guide__pin-phone .wlp-pin--guide { float: none; width: auto; max-width: 340px; margin: 0 auto !important; }
	.wlp-guide-menu-phone { display: block; margin: 1rem 0 0; border-radius: 22px; background: #fff; box-shadow: 0 10px 24px rgba(10, 58, 63, .1); }
	.wlp-guide-menu-phone summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 52px; padding: .8rem 1.2rem; font-weight: 900; color: var(--wp--preset--color--teal); cursor: pointer; list-style: none; }
	.wlp-guide-menu-phone summary::-webkit-details-marker { display: none; }
	.wlp-guide-menu-phone summary span { font-size: .875rem; font-weight: 700; color: var(--wp--preset--color--coral-text); }
	.wlp-guide-menu-phone summary::after { content: "+"; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--wp--preset--color--sun); color: var(--wp--preset--color--teal-deep); font-size: 1.3rem; }
	.wlp-guide-menu-phone[open] summary::after { content: "−"; }
	.wlp-guide-menu-phone .wlp-guide-menu { padding-top: 0; box-shadow: none; }
	.wlp-guide-menu-phone .wlp-guide-menu__title { display: none; }
	.wlp-article__art { order: -1; padding-bottom: 1rem; }
}
@media (max-width: 700px) {
	.wlp-chapter, .wlp-chapter-faq { padding: 1.5rem 1.2rem 1.2rem; border-radius: 22px; }
	.wlp-article__body .wlp-printable-cta { padding: 1.6rem 1.3rem 9rem; }
	.wlp-article__body .wlp-printable-cta::before, .wlp-article__body .wlp-printable-cta::after { top: auto; bottom: 1.2rem; margin-top: 0; width: 4.4rem; height: 5.6rem; }
	.wlp-guide-art span { min-width: 3.4rem; height: 3.4rem; font-size: 2rem; border-radius: 14px; }
}
@media (prefers-reduced-motion: reduce) {
	.wlp-article__body .wlp-tonight { transform: none; }
}

/* Guides: word families (CVC list) as an ending tile plus word chips. */
.wlp-family { display: flex; align-items: flex-start; gap: .9rem; margin-block: 1rem; }
.wlp-family__end { flex: none; display: grid; place-items: center; min-width: 4.2rem; height: 3.2rem; margin: 0; padding-inline: .6rem; border-radius: 14px; background: var(--wp--preset--color--coral-text); color: #fff; font-size: 1.35rem; font-weight: 900; transform: rotate(-4deg); box-shadow: 0 6px 0 rgba(10, 58, 63, .14); }
.wlp-family--mixed { flex-direction: column; gap: .6rem; }
.wlp-family--mixed .wlp-family__end { height: 2.6rem; font-size: 1rem; transform: rotate(-2deg); background: var(--wp--preset--color--teal); }
.wlp-family__words { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: .2rem 0 0; list-style: none; }
.wlp-article__body .wlp-family__words li { margin: 0; padding: .3rem .8rem; border-radius: 10px; background: var(--wp--preset--color--sun-soft); color: var(--wp--preset--color--teal-deep); font-weight: 800; line-height: 1.4; box-shadow: inset 0 -3px 0 rgba(184, 63, 44, .18); }
@media (max-width: 700px) {
	.wlp-family { gap: .6rem; }
	.wlp-family__end { min-width: 3.4rem; height: 2.8rem; font-size: 1.15rem; }
}

/* Guides: each H3 inside a chapter is a card; "Best for" / "Not ideal for" rows; affiliate links as buttons. */
.wlp-sub { margin-block: 1.2rem; padding: 1.1rem 1.3rem 1.2rem; border-radius: 18px; background: var(--wp--preset--color--cream); box-shadow: inset 6px 0 0 var(--wp--preset--color--sun); }
.wlp-sub > h3:first-child { margin-top: 0; }
.wlp-sub > :last-child { margin-bottom: 0; }
.wlp-fit { position: relative; padding: .55rem .9rem .55rem 2.6rem; border-radius: 12px; background: #fff; }
.wlp-fit::before { position: absolute; left: .7rem; top: .6rem; display: grid; place-items: center; width: 1.35rem; height: 1.35rem; border-radius: 50%; color: #fff; font-size: .8rem; font-weight: 900; line-height: 1; }
.wlp-fit--yes::before { content: "✓"; background: var(--wp--preset--color--teal); }
.wlp-fit--no::before { content: "✕"; background: var(--wp--preset--color--coral-text); }
.wlp-fit--yes strong { color: var(--wp--preset--color--teal); }
.wlp-fit--no strong { color: var(--wp--preset--color--coral-text); }
.wlp-article__body .wlp-go a { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .5rem 1.2rem; border-radius: 999px; background: var(--wp--preset--color--teal); color: #fff; font-weight: 800; text-decoration: none; box-shadow: 0 4px 0 var(--wp--preset--color--teal-deep); transition: transform .2s var(--wlp-ease), box-shadow .2s var(--wlp-ease); }
.wlp-article__body .wlp-go a::after { content: "→"; }
.wlp-article__body .wlp-go a:hover, .wlp-article__body .wlp-go a:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 0 var(--wp--preset--color--teal-deep); }
@media (max-width: 700px) {
	.wlp-sub { padding: 1rem 1rem 1.1rem 1.2rem; }
}

/* =========================================================
   Legal pages (template page-legal): the guide layout, calmer.
   ========================================================= */
.wlp-legal__head {
	background-color: var(--wp--preset--color--mint-soft);
	background-image: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(14, 79, 85, .09) 31px 32px);
}
.wlp-legal__head::before { content: ""; position: absolute; inset: 0 auto 0 calc(50% - 632px); width: 2px; background: rgba(232, 96, 76, .35); }
.wlp-legal__head { position: relative; }
.wlp-legal__intro { position: relative; max-width: 46rem; }
.wlp-legal__kicker { display: inline-block; margin: 0 0 .6rem; padding: .2rem .8rem; border-radius: 999px; background: #fff; color: var(--wp--preset--color--coral-text); font-size: .875rem; font-weight: 900; letter-spacing: .04em; text-transform: uppercase; box-shadow: 0 0 0 2px rgba(184, 63, 44, .2); }
.wlp-legal__head h1 { margin-top: 0; }
.wlp-legal-nav ul { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1.4rem 0 0; padding: 0; list-style: none; }
.wlp-legal-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: .45rem 1rem; border-radius: 999px; background: #fff; color: var(--wp--preset--color--teal); font-weight: 800; text-decoration: none; box-shadow: 0 0 0 2px rgba(14, 79, 85, .18); transition: transform .2s var(--wlp-ease), box-shadow .2s var(--wlp-ease); }
.wlp-legal-nav a:hover, .wlp-legal-nav a:focus-visible { transform: translateY(-2px); box-shadow: 0 0 0 2px var(--wp--preset--color--teal); }
.wlp-legal-nav a[aria-current="page"] { background: var(--wp--preset--color--teal); color: #fff; box-shadow: none; }

.wlp-guide--legal { font-size: 1.05rem; }
.wlp-guide--legal .wlp-guide__intro { font-size: 1.15rem; }
.wlp-updated { display: inline-block; margin-bottom: .4rem !important; padding: .2rem .8rem; border-radius: 999px; background: var(--wp--preset--color--sun-soft); color: var(--wp--preset--color--teal-deep); font-size: .9rem; font-weight: 800; }
.wlp-updated em { font-style: normal; }
.wlp-guide--legal .wlp-chapter { border-top-width: 6px; }
.wlp-guide--legal .wlp-chapter__num, .wlp-guide--legal .wlp-chapter:nth-of-type(2n) .wlp-chapter__num { width: 2.5rem; height: 2.5rem; border-radius: 10px; font-size: 1.2rem; transform: none; box-shadow: none; }
.wlp-guide--legal .wlp-chapter h2 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); }
/* Lists that lead with a bold name (what we collect, who helps us): ruled rows, easy to scan. */
.wlp-guide--legal .wlp-chapter ul:not(.wlp-notes, .wlp-family__words) > li { padding-block: .55rem; border-bottom: 1px dashed rgba(14, 79, 85, .2); }
.wlp-guide--legal .wlp-chapter ul:not(.wlp-notes, .wlp-family__words) > li:last-child { border-bottom: 0; }
.wlp-guide--legal .wlp-chapter ul:not(.wlp-notes, .wlp-family__words) > li::before { top: 1.15em; }
.wlp-guide--legal code { padding: .05rem .35rem; border-radius: 6px; background: var(--wp--preset--color--cream); font-size: .9em; }

.wlp-legal-help { margin-top: 1.25rem; padding: 1.2rem 1.3rem; border-radius: 20px; background: var(--wp--preset--color--sun-soft); }
.wlp-legal-help p { margin: 0 0 .5rem; font-size: .95rem; }
.wlp-legal-help__title { font-family: "Caveat", cursive; font-size: 1.5rem !important; font-weight: 700; color: var(--wp--preset--color--coral-text); line-height: 1.1; }
.wlp-legal-help__link { display: inline-flex; align-items: center; min-height: 44px; padding: .45rem 1.1rem; border-radius: 999px; background: var(--wp--preset--color--teal); color: #fff; font-weight: 800; text-decoration: none; box-shadow: 0 4px 0 var(--wp--preset--color--teal-deep); }
.wlp-legal-help__link:hover, .wlp-legal-help__link:focus-visible { color: #fff; transform: translateY(-2px); }
@media (max-width: 700px) {
	.wlp-legal__top { gap: 0; }
}
.wlp-guide--legal .wlp-guide__aside { align-self: start; position: sticky; top: 110px; }
.wlp-guide--legal .wlp-guide__aside .wlp-guide-menu { position: static; }
.wlp-legal__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2rem; }
.wlp-legal__sheet { position: relative; display: grid; gap: .7rem; width: 230px; padding: 1.4rem 1.4rem 1.8rem; border-radius: 10px; background: #fff; box-shadow: 0 0 0 2px rgba(14, 79, 85, .08), 12px 14px 0 rgba(14, 79, 85, .1); transform: rotate(4deg); }
.wlp-legal__sheet::before { content: ""; position: absolute; top: -12px; left: 50%; width: 90px; height: 24px; margin-left: -45px; background: rgba(255, 194, 61, .85); transform: rotate(-3deg); }
.wlp-legal__sheet img { width: 136px; height: auto; margin-bottom: .3rem; }
.wlp-legal__sheet span { display: block; height: 8px; border-radius: 4px; background: var(--wp--preset--color--mint-soft); }
.wlp-legal__sheet span:nth-of-type(2n) { width: 82%; }
.wlp-legal__sheet span:last-of-type { width: 55%; }
.wlp-legal__sheet i { position: absolute; right: -18px; bottom: -18px; display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; background: var(--wp--preset--color--coral-text); color: #fff; font-size: 1.6rem; font-style: normal; font-weight: 900; box-shadow: 0 0 0 4px #fff; transform: rotate(-10deg); }
@media (max-width: 860px) {
	.wlp-legal__top { grid-template-columns: 1fr; }
	.wlp-legal__sheet { display: none; }
}
@media (max-width: 1320px) {
	.wlp-legal__head::before { display: none; }
}
.wlp-article__body .wlp-legal-help a.wlp-legal-help__link { color: #fff; text-decoration: none; }
.wlp-lead-in { margin-top: 1.4rem !important; padding: .55rem .9rem; border-radius: 12px; background: var(--wp--preset--color--mint-soft); }
.wlp-lead-in strong { color: var(--wp--preset--color--teal-deep); }
@media (max-width: 700px) {
	.wlp-legal-nav ul { gap: .4rem; }
	.wlp-legal-nav a { min-height: 40px; padding: .3rem .8rem; font-size: .9rem; }
}

/* =========================================================
   Blog (/blog/ and /blog/topic/...): a masonry pin board.
   ========================================================= */
.wlp-blog-head {
	background-color: var(--wp--preset--color--mint-soft);
	background-image: radial-gradient(circle, rgba(14, 79, 85, .12) 2px, transparent 2.5px);
	background-size: 22px 22px;
	padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
}
.wlp-blog-head__inner { max-width: 52rem; }
.wlp-blog-title { margin: .2rem 0 .8rem; font-size: clamp(2.3rem, 5vw, 3.6rem); line-height: 1.05; text-wrap: balance; }
.wlp-blog-intro { margin: 0; max-width: 42rem; font-size: clamp(1.1rem, 1.8vw, 1.3rem); }
.wlp-topics--blog .wlp-topics__chip[aria-current="page"] { background: var(--wp--preset--color--teal); color: #fff; }

.wlp-blog-board {
	background-color: var(--wp--preset--color--cream);
	background-image: linear-gradient(rgba(14, 79, 85, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(14, 79, 85, .05) 1px, transparent 1px);
	background-size: 32px 32px;
}
.wlp-masonry .wp-block-post-template { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 26px; margin: 0; padding: 0; list-style: none; }
.wlp-masonry .wp-block-post-template.is-masonry { grid-auto-rows: 4px; row-gap: 0; align-items: start; }
.wlp-masonry .wp-block-post-template > li { margin: 0; min-width: 0; }

.wlp-blog-card {
	--card: #fff;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .55rem;
	margin: 0 !important;
	padding: 1.4rem 1.4rem 1.3rem;
	border-radius: 22px;
	background: var(--card);
	box-shadow: 0 10px 24px rgba(10, 58, 63, .12);
	transform: rotate(-.6deg);
	transition: transform .25s var(--wlp-ease), box-shadow .25s var(--wlp-ease);
}
.wlp-masonry li:nth-child(4n+2) .wlp-blog-card { --card: var(--wp--preset--color--sun-soft); transform: rotate(.7deg); }
.wlp-masonry li:nth-child(4n+3) .wlp-blog-card { --card: var(--wp--preset--color--mint-soft); transform: rotate(-.3deg); }
.wlp-masonry li:nth-child(4n+4) .wlp-blog-card { transform: rotate(.5deg); }
/* The pushpin. */
.wlp-blog-card::before {
	content: "";
	position: absolute;
	top: -9px;
	left: 50%;
	width: 20px;
	height: 20px;
	margin-left: -10px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #F79D85, var(--wp--preset--color--coral-text) 70%);
	box-shadow: 0 3px 4px rgba(10, 58, 63, .3);
	z-index: 2;
}
.wlp-masonry li:nth-child(3n+2) .wlp-blog-card::before { background: radial-gradient(circle at 35% 35%, #FFE7A8, #E0A21C 70%); }
.wlp-masonry li:nth-child(3n+3) .wlp-blog-card::before { background: radial-gradient(circle at 35% 35%, #9AD8CB, var(--wp--preset--color--teal) 70%); }
.wlp-blog-card:hover, .wlp-blog-card:focus-within { transform: rotate(0) translateY(-4px); box-shadow: 0 16px 32px rgba(10, 58, 63, .18); }

.wlp-blog-card__art { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: .2rem; }
.wlp-blog-card__art span {
	display: grid; place-items: center; min-width: 2.6rem; height: 2.6rem; padding-inline: .35rem; border-radius: 11px;
	background: var(--wp--preset--color--coral-text); color: #fff; font-size: 1.45rem; font-weight: 900; box-shadow: 0 0 0 3px #fff;
	transform: rotate(-5deg);
}
.wlp-blog-card__art span:nth-child(4n+2) { background: var(--wp--preset--color--sun); color: var(--wp--preset--color--teal); transform: rotate(4deg); }
.wlp-blog-card__art span:nth-child(4n+3) { background: var(--wp--preset--color--mint); color: var(--wp--preset--color--teal); transform: rotate(-2deg); }
.wlp-blog-card__art span:nth-child(4n+4) { background: var(--wp--preset--color--teal); transform: rotate(5deg); }
.wlp-blog-card__pin { margin: -1.4rem -1.4rem .3rem; }
.wlp-blog-card__pin img { display: block; width: 100%; height: auto; border-radius: 22px 22px 0 0; }
.wlp-blog-card__time { order: 0; margin: 0; font-size: .875rem; font-weight: 800; color: var(--wp--preset--color--teal); }
.wlp-blog-card__topic { margin: 0; font-size: .85rem; font-weight: 800; }
.wlp-blog-card__topic a { color: var(--wp--preset--color--coral-text); text-decoration: none; position: relative; z-index: 2; }
.wlp-blog-card__title { margin: 0; font-size: clamp(1.25rem, 1.9vw, 1.5rem); line-height: 1.2; }
.wlp-blog-card__title a { color: var(--wp--preset--color--teal-deep); text-decoration: none; }
.wlp-blog-card__title a::after { content: ""; position: absolute; inset: 0; border-radius: 22px; }
.wlp-blog-card__title a:focus-visible { outline: none; }
.wlp-blog-card:has(.wlp-blog-card__title a:focus-visible) { outline: 3px solid var(--wp--preset--color--teal); outline-offset: 4px; }
.wlp-blog-card__excerpt { margin: 0; color: var(--wp--preset--color--ink); }
.wlp-blog-card__excerpt p { margin: 0; }
.wlp-blog-card__excerpt .wp-block-post-excerpt__more-text { display: none; }
.wlp-blog-card__go { margin-top: .2rem; font-weight: 900; color: var(--wp--preset--color--coral-text); }
.wlp-blog-card__go::after { content: " →"; }

.wlp-blog-cta__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem 2.5rem; }
.wlp-blog-cta__inner h2 { grid-column: 1; margin: 0; color: #fff; }
.wlp-blog-cta__inner p { grid-column: 1; margin: 0; max-width: 40rem; }
.wlp-blog-cta__inner .wp-block-buttons { grid-column: 2; grid-row: 1 / span 2; }
.wlp-blog-cta .wp-block-button:not(.is-style-soft) .wp-block-button__link { background: var(--wp--preset--color--sun); color: var(--wp--preset--color--teal-deep); }

@media (max-width: 1023px) {
	.wlp-masonry .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.wlp-masonry .wp-block-post-template { grid-template-columns: minmax(0, 1fr); }
	.wlp-blog-cta__inner { grid-template-columns: minmax(0, 1fr); }
	.wlp-blog-cta__inner .wp-block-buttons { grid-column: 1; grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) {
	.wlp-blog-card { transition: none; }
}

/* Seven menu items (Blog added 2026-11-02): tighter still on small tablets so the menu stays on one row. */
@media (min-width: 600px) and (max-width: 860px) {
	.wlp-header .wlp-logo img { height: 58px; }
	.wlp-header .wp-block-navigation .wp-block-navigation__container,
	.wlp-header .wp-block-group.is-nowrap { gap: .3rem !important; }
	.wlp-header .wp-block-navigation { font-size: .8rem; }
	.wlp-header .wp-block-navigation .wp-block-navigation-item__content { padding: .3rem .4rem; }
	.wlp-cart { padding: .4rem .55rem; }
}
@media (min-width: 600px) and (max-width: 699px) {
	.wlp-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.wlp-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}