/*
Theme Name: Dummy Star
Theme URI: https://dummystarmethod.com
Author: The Dummy Star Method
Author URI: https://dummystarmethod.com
Description: A gentle, night-sky block theme for The Dummy Star Method — a toolkit for helping toddlers say goodbye to the dummy. No page builder, no external assets: system fonts, hand-written CSS and core blocks only.
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 8.0
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dummy-star
Tags: blog, one-column, block-patterns, full-site-editing, custom-colors, custom-menu, featured-images, wide-blocks
*/

/* -------------------------------------------------------------------------
   1. Base
   ---------------------------------------------------------------------- */

html {
	scroll-behavior: smooth;
	scroll-padding-top: 5rem;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

::selection {
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--primary-deep);
}

:where(a):focus-visible,
:where(button):focus-visible,
:where(input):focus-visible,
:where(summary):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
	border-radius: 3px;
}

/* Skip link */
.ds-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 0.75rem 1.25rem;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	text-decoration: none;
	border-radius: 0 0 8px 0;
}
.ds-skip-link:focus {
	left: 0;
}

/* -------------------------------------------------------------------------
   2. Reading rhythm
   ---------------------------------------------------------------------- */

.entry-content > * + h2,
.ds-prose > * + h2 {
	margin-top: var(--wp--preset--spacing--50);
}

.entry-content > * + h3,
.ds-prose > * + h3 {
	margin-top: var(--wp--preset--spacing--40);
}

/* Measure is controlled by the container width in theme.json (40rem ≈ 75
   characters), not by a narrower max-width on paragraphs — that just inset the
   prose from the cards and callouts sitting at full container width. */

.entry-content ul,
.entry-content ol {
	padding-left: 1.15rem;
}

.entry-content li::marker {
	color: var(--wp--preset--color--secondary);
}

.entry-content strong {
	color: var(--wp--preset--color--primary-deep);
	font-weight: 650;
}

/* Tables get a soft card treatment */
.wp-block-table table {
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	border-radius: 12px;
	box-shadow: var(--wp--preset--shadow--soft);
	background: var(--wp--preset--color--surface);
}
.wp-block-table th {
	background: var(--wp--preset--color--lavender-mist);
	color: var(--wp--preset--color--primary-deep);
	font-weight: 650;
	text-align: left;
}
.wp-block-table th,
.wp-block-table td {
	border: 0;
	border-bottom: 1px solid rgba(142, 130, 184, 0.18);
	padding: 0.7rem 0.9rem;
}
.wp-block-table tr:last-child td {
	border-bottom: 0;
}
.wp-block-table {
	overflow-x: auto;
}

/* -------------------------------------------------------------------------
   3. Header
   ---------------------------------------------------------------------- */

.ds-header {
	position: relative;
	z-index: 10;
}

.ds-header .wp-block-navigation__responsive-container-open,
.ds-header .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--primary);
}

.ds-header .wp-block-navigation a:where(:not(.wp-element-button)) {
	padding-bottom: 3px;
	border-bottom: 2px solid transparent;
	transition: border-color 160ms ease, color 160ms ease;
}

.ds-header .wp-block-navigation a:where(:not(.wp-element-button)):hover,
.ds-header .wp-block-navigation .current-menu-item > a {
	border-bottom-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--primary);
}

/* Region switcher (UK / US) */
.ds-region-switch {
	display: inline-flex;
	align-items: center;
	gap: 0.15rem;
	font-size: var(--wp--preset--font-size--x-small);
	background: var(--wp--preset--color--lavender-mist);
	border-radius: 999px;
	padding: 0.2rem;
	line-height: 1;
}

.ds-region-switch__item {
	display: inline-block;
	padding: 0.4rem 0.75rem;
	border-radius: 999px;
	text-decoration: none;
	color: var(--wp--preset--color--contrast-soft);
	font-weight: 600;
	letter-spacing: 0.03em;
	white-space: nowrap;
}

.ds-region-switch__item:hover {
	color: var(--wp--preset--color--primary);
}

.ds-region-switch__item[aria-current="true"] {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary);
	box-shadow: 0 1px 2px rgba(36, 30, 56, 0.10);
}

/* -------------------------------------------------------------------------
   4. Stars & night-sky sections
   ---------------------------------------------------------------------- */

.ds-night {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

/* Starfield drawn with layered radial gradients — no image requests. */
.ds-night::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	opacity: 0.75;
	background-image:
		url("assets/img/constellation.svg"),
		radial-gradient(1.6px 1.6px at 12% 22%, rgba(255, 253, 245, 0.95) 50%, transparent 51%),
		radial-gradient(1.2px 1.2px at 28% 62%, rgba(255, 253, 245, 0.70) 50%, transparent 51%),
		radial-gradient(2px 2px   at 42% 14%, rgba(247, 230, 196, 0.95) 50%, transparent 51%),
		radial-gradient(1.1px 1.1px at 58% 44%, rgba(255, 253, 245, 0.65) 50%, transparent 51%),
		radial-gradient(1.7px 1.7px at 71% 25%, rgba(255, 253, 245, 0.90) 50%, transparent 51%),
		radial-gradient(1.3px 1.3px at 84% 66%, rgba(247, 230, 196, 0.80) 50%, transparent 51%),
		radial-gradient(1px 1px   at 92% 34%, rgba(255, 253, 245, 0.60) 50%, transparent 51%),
		radial-gradient(1.4px 1.4px at 18% 82%, rgba(255, 253, 245, 0.70) 50%, transparent 51%),
		radial-gradient(1.1px 1.1px at 64% 86%, rgba(247, 230, 196, 0.65) 50%, transparent 51%),
		radial-gradient(1.5px 1.5px at 36% 38%, rgba(255, 253, 245, 0.55) 50%, transparent 51%);
}

/* Orion's Belt sits behind the top-right of every night section — the one
   constellation this whole method is anchored to. */
.ds-night::before {
	background-position:
		right -60px top -30px,
		0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
	background-repeat: no-repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat, repeat;
	background-size: 420px auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto;
	animation: ds-shimmer 9s ease-in-out infinite;
}

@keyframes ds-shimmer {
	0%, 100% { opacity: 0.62; }
	50%      { opacity: 0.88; }
}

/* Below about 60rem the hero copy grows to fill the width and Orion ends up
   drawn straight through the standfirst — a decorative constellation
   competing with the one sentence that has to be read. Pull it smaller, push
   it further into the corner and drop it back. It should be something you
   notice second, never something you read through. */
@media (max-width: 60rem) {
	.ds-night::before {
		background-position:
			right -110px top -50px,
			0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0, 0 0;
		background-size: 280px auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto;
	}

	/* A separate animation rather than redefining ds-shimmer inside the media
	   query — same-name keyframes under a condition are legal but fragile,
	   and the failure is silent. */
	.ds-night::before {
		animation-name: ds-shimmer-quiet;
	}
}

@keyframes ds-shimmer-quiet {
	0%, 100% { opacity: 0.4; }
	50%      { opacity: 0.58; }
}

/* The garden itself, along the bottom of hero sections: the fairy houses with
   solar lights, which is where the whole idea actually started. */
.ds-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.ds-hero::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	z-index: -1;
	height: clamp(96px, 13vw, 190px);
	pointer-events: none;
	/* cover, not stretch — on a narrow screen the band is proportionally much
	   taller than the artwork, and stretching turns the cottages into towers.
	   Cropping the sides instead keeps every shape honest. */
	background: url("assets/img/garden-silhouette.svg") bottom center / cover no-repeat;
}

/* Keep hero copy clear of the treeline. */
.ds-hero > * {
	position: relative;
}

.ds-hero {
	padding-bottom: clamp(7.5rem, 15vw, 13rem) !important;
}

/* The lede is muted grey on cream and near-white on the night sections. */
.ds-lede {
	margin-inline: auto;
}

.ds-night .ds-lede,
.ds-hero .ds-lede {
	color: rgba(253, 249, 243, 0.86);
}

.ds-night :where(h1, h2, h3, h4, h5, p, li) {
	color: var(--wp--preset--color--base);
}

.ds-night :where(h6) {
	color: var(--wp--preset--color--accent);
}

.ds-night :where(a:not(.wp-element-button)) {
	color: var(--wp--preset--color--accent-soft);
}

/* Decorative star divider */
.ds-stars-rule {
	display: block;
	text-align: center;
	line-height: 1;
	color: var(--wp--preset--color--accent);
	letter-spacing: 0.8em;
	font-size: 0.7rem;
	margin-inline: auto;
}

/* -------------------------------------------------------------------------
   5. Cards, steps, callouts
   ---------------------------------------------------------------------- */

.ds-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid rgba(142, 130, 184, 0.20);
	border-radius: 16px;
	box-shadow: var(--wp--preset--shadow--soft);
}

.ds-card--tint {
	background: linear-gradient(180deg, #FFFFFF 0%, #FBF8FF 100%);
}

/* Numbered steps: the counter sits in the margin as a gold star-disc. */
.ds-steps {
	counter-reset: ds-step;
	list-style: none;
	padding-left: 0;
	display: grid;
	gap: 1.25rem;
}

.ds-steps > li {
	counter-increment: ds-step;
	position: relative;
	padding: 1.35rem 1.5rem 1.35rem 4.25rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid rgba(142, 130, 184, 0.20);
	border-radius: 16px;
	box-shadow: var(--wp--preset--shadow--soft);
}

.ds-steps > li::before {
	content: counter(ds-step);
	position: absolute;
	left: 1.35rem;
	top: 1.3rem;
	width: 2.1rem;
	height: 2.1rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-soft);
	color: var(--wp--preset--color--primary-deep);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	font-size: 1rem;
	box-shadow: inset 0 0 0 1px rgba(224, 168, 60, 0.45);
}

.ds-steps > li > strong:first-child,
.ds-steps > li > p:first-child > strong:first-child {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.15rem;
	color: var(--wp--preset--color--primary);
	margin-bottom: 0.35rem;
}

.ds-steps > li p {
	max-width: none;
	margin-block: 0.5rem 0;
}

.ds-steps > li p:last-child { margin-bottom: 0; }

/* Soft callout used for "if it goes wrong" / reassurance boxes */
.ds-note {
	border-left: 3px solid var(--wp--preset--color--accent);
	background: var(--wp--preset--color--accent-soft);
	border-radius: 0 14px 14px 0;
	padding: 1.25rem 1.5rem;
}

.ds-note p { max-width: none; }
.ds-note p:first-child { margin-top: 0; }
.ds-note p:last-child { margin-bottom: 0; }

.ds-note--blush {
	border-left-color: var(--wp--preset--color--blush);
	background: var(--wp--preset--color--blush-soft);
}

.ds-note--lavender {
	border-left-color: var(--wp--preset--color--secondary);
	background: var(--wp--preset--color--lavender-mist);
}

/* Key-takeaway box — also the passage most likely to be lifted by AI search,
   so it is written to stand alone. */
.ds-answer {
	background: var(--wp--preset--color--surface);
	border: 1px solid rgba(224, 168, 60, 0.5);
	border-radius: 16px;
	padding: 1.5rem 1.65rem;
	box-shadow: var(--wp--preset--shadow--soft);
}

.ds-answer > h6:first-child {
	margin-top: 0;
}

.ds-answer p { max-width: none; }
.ds-answer p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------------------
   6. FAQ
   ---------------------------------------------------------------------- */

.ds-faq {
	display: grid;
	gap: 0.6rem;
}

.ds-faq details {
	background: var(--wp--preset--color--surface);
	border: 1px solid rgba(142, 130, 184, 0.22);
	border-radius: 14px;
	padding: 0.15rem 1.25rem;
	transition: box-shadow 160ms ease;
}

.ds-faq details[open] {
	box-shadow: var(--wp--preset--shadow--soft);
}

.ds-faq summary {
	cursor: pointer;
	list-style: none;
	padding: 1rem 2rem 1rem 0;
	position: relative;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary);
}

.ds-faq summary::-webkit-details-marker { display: none; }

.ds-faq summary::after {
	content: "";
	position: absolute;
	right: 0.25rem;
	top: 1.45rem;
	width: 0.55rem;
	height: 0.55rem;
	border-right: 2px solid var(--wp--preset--color--secondary);
	border-bottom: 2px solid var(--wp--preset--color--secondary);
	transform: rotate(45deg);
	transition: transform 180ms ease;
}

.ds-faq details[open] summary::after {
	transform: rotate(-135deg);
	top: 1.7rem;
}

.ds-faq .ds-faq__a {
	padding: 0 0 1.1rem;
	color: var(--wp--preset--color--contrast-soft);
}

.ds-faq .ds-faq__a p { max-width: none; margin-top: 0; }
.ds-faq .ds-faq__a p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------------------
   7. Bedtime-story voice
   ---------------------------------------------------------------------- */

.ds-story p {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.25rem;
	line-height: 1.75;
	color: var(--wp--preset--color--primary-deep);
	max-width: 34rem;
}

.ds-story p:first-of-type::first-letter {
	float: left;
	font-size: 3.6rem;
	line-height: 0.82;
	padding: 0.12em 0.1em 0 0;
	color: var(--wp--preset--color--accent);
}

/* -------------------------------------------------------------------------
   8. Footer
   ---------------------------------------------------------------------- */

.ds-footer a {
	text-decoration: none;
}

.ds-footer a:hover {
	text-decoration: underline;
}

.ds-footer .wp-block-heading {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.09em;
	text-transform: uppercase;
	font-weight: 700;
}

/* -------------------------------------------------------------------------
   9. Misc blocks
   ---------------------------------------------------------------------- */

.wp-block-post-title a { text-decoration: none; }

.wp-block-image img { border-radius: 14px; }

.ds-lede {
	font-size: 1.25rem;
	line-height: 1.6;
	color: var(--wp--preset--color--contrast-soft);
	max-width: 36rem;
}

.ds-meta {
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--contrast-soft);
	letter-spacing: 0.02em;
}

/* Soft ink is a mid purple — legible on cream, nearly invisible on the night
   sections, where the footer small print lives. */
.ds-night .ds-meta,
.ds-footer .ds-meta {
	color: rgba(228, 222, 242, 0.72);
}

.ds-toc {
	background: var(--wp--preset--color--lavender-mist);
	border-radius: 16px;
	padding: 1.35rem 1.6rem;
}

.ds-toc ol {
	margin: 0.5rem 0 0;
	padding-left: 1.1rem;
	columns: 2;
	column-gap: 2rem;
	font-size: var(--wp--preset--font-size--small);
}

.ds-toc li { break-inside: avoid; margin-bottom: 0.3rem; }

@media (max-width: 600px) {
	.ds-toc ol { columns: 1; }
	.ds-steps > li { padding: 1.2rem 1.15rem 1.2rem 1.15rem; }
	.ds-steps > li::before { position: static; margin-bottom: 0.6rem; }
	.ds-story p { font-size: 1.15rem; }

	.ds-flow__item { grid-template-columns: 1fr; gap: 0.9rem; }
	.ds-flow__mark { width: 3.6rem; height: 3.6rem; }
	.ds-flow__mark .ds-art { width: 24px; height: 24px; }
	.ds-flow__title { font-size: 1.18rem; }

	.ds-origin { padding: 2rem 1.4rem; }
	.ds-origin p { font-size: 1.1rem; }
	.ds-feature { padding: 1.5rem 1.3rem 1.3rem; }

	/* The treeline eats too much of a small screen at full height. */
	.ds-hero { padding-bottom: 8.5rem !important; }
}

/* -------------------------------------------------------------------------
   9a. Brand — the crest, the Do-Do Fairy, the region bar
   ---------------------------------------------------------------------- */

.ds-logo {
	display: block;
	height: auto;
	overflow: visible;
}

.ds-logo--mark {
	width: 3.1rem;
	flex: none;
}

.ds-logo--full {
	width: min(24rem, 100%);
	margin-inline: auto;
}

.ds-logo--footer {
	width: min(17rem, 100%);
	margin: 0 0 var(--wp--preset--spacing--30);
}

.ds-logo__word {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 44px;
	font-weight: 700;
	letter-spacing: -0.01em;
	fill: #FDF9F3;
}

.ds-logo__sub {
	font-family: var(--wp--preset--font-family--body);
	font-size: 19px;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	fill: var(--wp--preset--color--accent);
}

/* The header lockup: mark plus real HTML text, so the site name stays
   selectable, translatable and crisp at any zoom. */
.ds-brandlock {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	text-decoration: none;
}

.ds-brandlock__text {
	display: flex;
	flex-direction: column;
	line-height: 1.05;
}

.ds-brandlock__name {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	letter-spacing: -0.012em;
}

.ds-brandlock__sub {
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.19em;
	text-transform: uppercase;
	color: var(--wp--preset--color--secondary);
	margin-top: 0.22rem;
}

.ds-night .ds-brandlock__name { color: var(--wp--preset--color--base); }
.ds-night .ds-brandlock__sub  { color: var(--wp--preset--color--accent); }

/* The Do-Do Fairy */
.ds-fairy {
	display: block;
	width: auto;
	overflow: visible;
	filter: drop-shadow(0 8px 22px rgba(36, 30, 56, 0.18));
}

.ds-fairy--flying {
	animation: ds-drift 7s ease-in-out infinite;
}

@keyframes ds-drift {
	0%, 100% { transform: translateY(0) rotate(0deg); }
	50%      { transform: translateY(-10px) rotate(-1.5deg); }
}

.ds-fairy__trail { animation: ds-shimmer 4.5s ease-in-out infinite; }

.ds-hero__fairy {
	margin: 0 auto var(--wp--preset--spacing--20);
}

/* Fairy floated beside a block of copy. */
.ds-withfairy {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--wp--preset--spacing--40);
	align-items: center;
}

.ds-withfairy--right { grid-template-columns: 1fr auto; }

.ds-brandline {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.3rem;
	line-height: 1.6;
	color: var(--wp--preset--color--primary);
	max-width: 34rem;
}

.ds-night .ds-brandline { color: var(--wp--preset--color--base); }
.ds-brandline strong { color: var(--wp--preset--color--accent); font-weight: 700; }

/* Region bar. Static markup, identical for every visitor and every crawler —
   no IP sniffing, no redirect, nothing hidden from Google. */
.ds-regionbar {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	padding: 0.6rem 2.75rem 0.6rem 1.25rem;
	background: var(--wp--preset--color--primary-deep);
	color: var(--wp--preset--color--base);
	font-size: 0.85rem;
	text-align: center;
}

.ds-regionbar__link {
	color: var(--wp--preset--color--accent-soft);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	font-weight: 600;
}

.ds-regionbar__link:hover { color: var(--wp--preset--color--base); }

.ds-regionbar__close {
	position: absolute;
	right: 0.6rem;
	top: 50%;
	transform: translateY(-50%);
	background: none;
	border: 0;
	color: var(--wp--preset--color--secondary);
	font-size: 1.4rem;
	line-height: 1;
	padding: 0.15rem 0.45rem;
	cursor: pointer;
	border-radius: 6px;
}

.ds-regionbar__close:hover { color: var(--wp--preset--color--base); }

@media (max-width: 600px) {
	.ds-withfairy,
	.ds-withfairy--right { grid-template-columns: 1fr; justify-items: center; text-align: center; }
	.ds-brandline { text-align: center; }
	.ds-brandlock__name { font-size: 1.12rem; }
	.ds-logo--mark { width: 2.5rem; }
	.ds-regionbar { font-size: 0.78rem; }
}

/* -------------------------------------------------------------------------
   9b. Illustrations
   ---------------------------------------------------------------------- */

.ds-art {
	display: block;
	flex: none;
	stroke-linecap: round;
	color: var(--wp--preset--color--primary);
}

.ds-night .ds-art {
	color: var(--wp--preset--color--lavender-mist);
}

/* The four-step flow on the home page. Icon + rule + copy, so the eye can
   scan the four titles alone and still get the whole method. */
.ds-flow {
	list-style: none;
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
	display: grid;
	gap: 0;
	counter-reset: ds-flow;
}

.ds-flow__item {
	counter-increment: ds-flow;
	display: grid;
	grid-template-columns: 4.5rem 1fr;
	gap: 1.5rem;
	padding: 1.6rem 0;
	position: relative;
}

.ds-flow__item + .ds-flow__item {
	border-top: 1px solid rgba(142, 130, 184, 0.22);
}

.ds-flow__mark {
	position: relative;
	width: 4.5rem;
	height: 4.5rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--wp--preset--color--surface);
	box-shadow:
		inset 0 0 0 1px rgba(142, 130, 184, 0.28),
		0 6px 18px rgba(36, 30, 56, 0.07);
}

.ds-flow__num {
	position: absolute;
	top: -0.35rem;
	right: -0.35rem;
	width: 1.7rem;
	height: 1.7rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--primary-deep);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1;
}

.ds-flow__title {
	font-size: 1.3rem;
	margin: 0.25rem 0 0.4rem;
}

.ds-flow__body p {
	margin: 0;
	max-width: 34rem;
	color: var(--wp--preset--color--contrast-soft);
}

/* Feature cards with an illustration in the corner. */
.ds-feature {
	position: relative;
	background: var(--wp--preset--color--surface);
	border: 1px solid rgba(142, 130, 184, 0.2);
	border-radius: 20px;
	padding: 1.9rem 1.75rem 1.6rem;
	box-shadow: var(--wp--preset--shadow--soft);
	transition: transform 200ms ease, box-shadow 200ms ease;
	overflow: hidden;
}

.ds-feature::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 4px;
	background: linear-gradient(90deg,
		var(--wp--preset--color--accent) 0%,
		var(--wp--preset--color--blush) 50%,
		var(--wp--preset--color--secondary) 100%);
	opacity: 0.75;
}

.ds-feature:hover {
	transform: translateY(-3px);
	box-shadow: var(--wp--preset--shadow--lift);
}

.ds-feature .ds-art {
	margin-bottom: 0.9rem;
}

.ds-feature h3,
.ds-feature .wp-block-heading {
	margin-top: 0;
}

.ds-feature p:last-child,
.ds-feature ul:last-child {
	margin-bottom: 0;
}

/* The family story block — the origin, told once, properly. */
.ds-origin {
	position: relative;
	border-radius: 22px;
	padding: 2.4rem 2.2rem;
	background:
		linear-gradient(180deg, rgba(228, 222, 242, 0.75) 0%, rgba(250, 227, 230, 0.55) 100%);
	border: 1px solid rgba(142, 130, 184, 0.25);
}

.ds-origin::before {
	content: "“";
	position: absolute;
	top: -0.35em;
	left: 0.5rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 7rem;
	line-height: 1;
	color: var(--wp--preset--color--accent);
	opacity: 0.35;
	pointer-events: none;
}

.ds-origin p {
	position: relative;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.2rem;
	line-height: 1.65;
	color: var(--wp--preset--color--primary-deep);
	max-width: 36rem;
}

.ds-origin p:last-child {
	margin-bottom: 0;
}

.ds-origin cite {
	display: block;
	margin-top: 1rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--x-small);
	font-style: normal;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-soft);
}

/* Buttons: a little lift, because everything else on the page is soft. */
.wp-block-button__link {
	box-shadow: 0 2px 6px rgba(36, 30, 56, 0.12);
	transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(36, 30, 56, 0.18);
}

.wp-block-button.is-style-outline .wp-block-button__link {
	box-shadow: none;
}

/* Body links: give the underline room to breathe. */
.entry-content a:where(:not(.wp-element-button)) {
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(142, 130, 184, 0.6);
}

.entry-content a:where(:not(.wp-element-button)):hover {
	text-decoration-color: currentColor;
}

/* Reference list. Health claims on this site are sourced, and the sources are
   set smaller and quieter than body copy — present for anyone checking, not
   competing with the guidance itself. */
.ds-refs {
	font-size: 0.86rem;
	line-height: 1.6;
	color: var(--wp--preset--color--soft-ink, #6B6288);
	padding-left: 1.4em;
}

.ds-refs li {
	margin-bottom: 0.85em;
}

.ds-refs cite {
	font-style: italic;
}

/* Superscript reference markers in the body: keep them from stretching the
   line box, and give them a hit area big enough for a thumb. */
.entry-content sup a {
	text-decoration: none;
	padding: 0 0.15em;
	font-variant-numeric: lining-nums;
}

.entry-content sup {
	line-height: 0;
	font-size: 0.7em;
}

/* Landing highlight when a reference is jumped to. */
.ds-refs li:target {
	background: var(--wp--preset--color--accent-soft, #F7E6C4);
	border-radius: 0.35rem;
	box-shadow: 0 0 0 0.45rem var(--wp--preset--color--accent-soft, #F7E6C4);
}

/* -------------------------------------------------------------------------
   9d. Word preference
   Exactly one word is ever in the markup — the spans are swap targets, not a
   second copy of the text. So there is nothing here hiding an alternative,
   which is the whole point of the rewrite: strip the tags and the sentence
   still reads as English.
   ---------------------------------------------------------------------- */

/* The synonym line. Said once, near the top, and then never again — the body
   prose is written in one word and stays in it. */
.ds-vocab {
	margin: var(--wp--preset--spacing--40, 1.5rem) 0;
	padding: 0.85rem 1.1rem;
	font-size: 0.88rem;
	line-height: 1.55;
	color: var(--wp--preset--color--primary-deep, #1E1940);
	background: var(--wp--preset--color--lavender-mist, #E4DEF2);
	border-radius: 12px;
}

.ds-vocab p {
	margin: 0;
	font-size: inherit;
}

/* Price. Pulled out of the H2 — "The Complete Do-Do Fairy Kit — £3.49" wrapped
   with the price orphaned on its own line, and a heading is the wrong place
   for a number that changes anyway. */
.ds-price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.55rem;
	margin-top: calc(var(--wp--preset--spacing--20, 0.75rem) * -1);
}

.ds-price strong {
	font-family: var(--wp--preset--font-family--heading, Georgia, serif);
	font-size: clamp(1.6rem, 3.5vw, 2rem);
	line-height: 1;
	color: var(--wp--preset--color--primary, #37306B);
}

.ds-price__was {
	font-size: 0.9rem;
	color: #7B6FA6;
	text-decoration: line-through;
}

.ds-price__note {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-deep, #1E1940);
	background: var(--wp--preset--color--accent-soft, #F7E6C4);
	padding: 0.25rem 0.6rem;
	border-radius: 999px;
}

/* The picker. Lives in the footer, on the night-sky background. */
.ds-wordpick {
	position: relative;
	max-width: 34rem;
	margin: var(--wp--preset--spacing--50, 2.5rem) auto 0;
	padding: 1rem 1.25rem;
	text-align: center;
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(228, 222, 242, 0.22);
	border-radius: 14px;
}

.ds-wordpick__q {
	margin: 0 0 0.7rem;
	font-family: var(--wp--preset--font-family--heading, Georgia, serif);
	font-size: 0.98rem;
	color: var(--wp--preset--color--base, #FDF9F3);
}

.ds-wordpick__close {
	position: absolute;
	top: 0.35rem;
	right: 0.5rem;
	width: 1.9rem;
	height: 1.9rem;
	font: inherit;
	font-size: 1.15rem;
	line-height: 1;
	color: rgba(228, 222, 242, 0.6);
	background: none;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.ds-wordpick__close:hover {
	color: var(--wp--preset--color--base, #FDF9F3);
	background: rgba(228, 222, 242, 0.14);
}

/* Only meaningful on the first-visit prompt — in the footer the panel is
   already permanent and there is nothing to dismiss. */
.ds-wordpick:not(.is-prompt) .ds-wordpick__close {
	display: none;
}

.ds-wordpick__opts {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem;
}

.ds-wordpick__btn {
	padding: 0.4rem 0.85rem;
	font: inherit;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--wp--preset--color--base, #FDF9F3);
	background: transparent;
	border: 1px solid rgba(228, 222, 242, 0.35);
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.ds-wordpick__btn:hover {
	background: rgba(228, 222, 242, 0.16);
}

.ds-wordpick__btn[aria-pressed="true"] {
	color: var(--wp--preset--color--primary-deep, #1E1940);
	background: var(--wp--preset--color--accent, #E0A83C);
	border-color: transparent;
}

.ds-wordpick__note {
	margin: 0.75rem 0 0;
	font-size: 0.76rem;
	color: rgba(228, 222, 242, 0.72);
}

/* First visit only: the same control, lifted out of the footer so it is
   actually seen once. Dismissed by choosing — there is no "no thanks",
   because the default is already a valid answer. */
.ds-wordpick.is-prompt {
	position: fixed;
	left: 50%;
	bottom: 1rem;
	z-index: 60;
	width: min(30rem, calc(100vw - 1.5rem));
	margin: 0;
	padding: 0.85rem 1rem 0.9rem;
	transform: translateX(-50%);
	background: var(--wp--preset--color--primary-deep, #1E1940);
	border-color: rgba(228, 222, 242, 0.3);
	box-shadow: 0 10px 34px rgba(20, 16, 38, 0.45);
	animation: ds-wordpick-in 0.35s ease-out both;
}

/* Slides up rather than appearing under the reader's eye. Delayed slightly so
   it arrives after the page has settled, not during first paint. */
@keyframes ds-wordpick-in {
	from { opacity: 0; transform: translate(-50%, 0.75rem); }
	to   { opacity: 1; transform: translate(-50%, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.ds-wordpick.is-prompt {
		animation: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ds-wordpick__btn {
		transition: none;
	}
}

@media print {
	.ds-vocab,
	.ds-wordpick {
		display: none !important;
	}
}

/* -------------------------------------------------------------------------
   9c. The letter builder
   Form on the left, the letter on the right, updating as you type. On narrow
   screens the letter stacks under the form — a parent filling this in on a
   phone wants to see what they are typing, then scroll to the result.
   ---------------------------------------------------------------------- */

.ds-builder {
	margin: var(--wp--preset--spacing--60, 3rem) 0;
	padding: clamp(1.25rem, 3vw, 2rem);
	background: var(--wp--preset--color--lavender-mist, #E4DEF2);
	border-radius: 20px;

	/* Queried on its own width, not the viewport's. This block sits in a wide
	   wrapper on the letter page but could be dropped into the 40rem reading
	   column anywhere else, and a viewport media query would happily split a
	   400px container into two 190px columns. */
	container-type: inline-size;
	container-name: ds-builder;
}

.ds-builder__intro {
	max-width: 44rem;
	margin-bottom: 1.75rem;
}

.ds-builder__title {
	margin: 0 0 0.5rem;
	font-size: clamp(1.35rem, 2.6vw, 1.75rem);
}

.ds-builder__intro p {
	margin: 0;
	font-size: 0.95rem;
	color: var(--wp--preset--color--primary-deep, #1E1940);
}

.ds-builder__grid {
	display: grid;
	gap: clamp(1.25rem, 3vw, 2.25rem);
	grid-template-columns: 1fr;
	align-items: start;
}

@container ds-builder (min-width: 48rem) {
	.ds-builder__grid {
		grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
	}

	/* The letter should stay in view while the form is scrolled. */
	.ds-builder__preview {
		position: sticky;
		top: 1.5rem;
	}
}

/* --- the form --- */

.ds-builder__form fieldset {
	margin: 0;
	padding: 0;
	border: 0;
}

.ds-builder__legend {
	display: block;
	margin-bottom: 1rem;
	font-family: var(--wp--preset--font-family--heading, Georgia, serif);
	font-size: 1.05rem;
	color: var(--wp--preset--color--primary-deep, #1E1940);
}

.ds-builder__row {
	margin-bottom: 1.15rem;
}

.ds-builder__label {
	display: block;
	margin-bottom: 0.3rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary-deep, #1E1940);
}

.ds-builder__input {
	width: 100%;
	padding: 0.6rem 0.75rem;
	font: inherit;
	font-size: 0.95rem;
	color: var(--wp--preset--color--contrast, #241E38);
	background: var(--wp--preset--color--base, #FDF9F3);
	border: 1px solid rgba(55, 48, 107, 0.25);
	border-radius: 9px;
}

.ds-builder__input--short {
	max-width: 12rem;
}

.ds-builder__input:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary, #37306B);
	outline-offset: 1px;
	border-color: transparent;
}

.ds-builder__input::placeholder {
	color: rgba(55, 48, 107, 0.45);
}

.ds-builder__hint {
	margin: 0.35rem 0 0;
	font-size: 0.78rem;
	line-height: 1.45;
	color: #6B6288;
}

/* Segmented UK / US control built from real radios, so it works with a
   keyboard and reports itself correctly to a screen reader. */
.ds-builder__seg {
	display: inline-flex;
	padding: 3px;
	background: rgba(255, 255, 255, 0.6);
	border-radius: 999px;
}

.ds-builder__segbtn input {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.ds-builder__segbtn span {
	display: block;
	padding: 0.4rem 0.85rem;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary, #37306B);
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.ds-builder__segbtn input:checked + span {
	background: var(--wp--preset--color--primary, #37306B);
	color: var(--wp--preset--color--base, #FDF9F3);
}

.ds-builder__segbtn input:focus-visible + span {
	outline: 2px solid var(--wp--preset--color--primary, #37306B);
	outline-offset: 2px;
}

/* --- tabs --- */

.ds-builder__tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin-bottom: 0.75rem;
}

.ds-builder__tab {
	padding: 0.45rem 0.9rem;
	font: inherit;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary, #37306B);
	background: rgba(255, 255, 255, 0.55);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
}

.ds-builder__tab[aria-selected="true"] {
	background: var(--wp--preset--color--primary, #37306B);
	color: var(--wp--preset--color--base, #FDF9F3);
}

/* --- the sheet --- */

.ds-builder__sheet {
	padding: clamp(1.5rem, 4vw, 2.75rem);
	background: #FFFDF8;
	background-image:
		radial-gradient(ellipse at 15% 12%, rgba(224, 168, 60, 0.07), transparent 55%),
		radial-gradient(ellipse at 85% 88%, rgba(231, 174, 182, 0.09), transparent 55%);
	border-radius: 4px;
	box-shadow:
		0 1px 2px rgba(36, 30, 56, 0.08),
		0 10px 26px rgba(36, 30, 56, 0.1);
}

.ds-builder__sheet p {
	font-family: var(--wp--preset--font-family--heading, Georgia, serif);
	font-size: clamp(0.98rem, 1.6vw, 1.08rem);
	line-height: 1.72;
	margin: 0 0 0.9em;
}

.ds-builder__head {
	margin-bottom: 1.5rem;
	text-align: center;
}

.ds-builder__from {
	font-family: var(--wp--preset--font-family--body, sans-serif) !important;
	font-size: 0.72rem !important;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #7B6FA6;
}

.ds-builder__sig {
	margin-top: 1.6em;
}

.ds-builder__role {
	font-family: var(--wp--preset--font-family--body, sans-serif);
	font-size: 0.78rem;
	color: #7B6FA6;
}

/* The filled-in words. Underlined and gold while blank so the letter reads as
   a form; plain ink once written, so it reads as a letter. */
.ds-tok {
	font-style: normal;
	color: inherit;
}

.ds-tok.is-empty {
	padding: 0 0.15em;
	color: #9086B5;
	background: rgba(224, 168, 60, 0.14);
	border-bottom: 1px dashed rgba(142, 130, 184, 0.75);
	border-radius: 2px;
}

/* --- certificate --- */

.ds-builder__sheet--cert {
	text-align: center;
	border: 1px solid rgba(224, 168, 60, 0.5);
	outline: 3px solid #FFFDF8;
	outline-offset: -9px;
	box-shadow:
		inset 0 0 0 10px rgba(224, 168, 60, 0.18),
		0 10px 26px rgba(36, 30, 56, 0.1);
}

.ds-builder__sheet--cert h3 {
	margin: 0.2em 0 0.6em;
	font-size: clamp(1.3rem, 3vw, 1.75rem);
}

.ds-builder__c-intro {
	font-size: 0.9rem !important;
	color: #6B6288;
	margin-bottom: 0.4em !important;
}

.ds-builder__c-name {
	font-size: clamp(1.5rem, 4vw, 2.1rem) !important;
	line-height: 1.2 !important;
	color: var(--wp--preset--color--primary, #37306B);
	margin-bottom: 0.6em !important;
}

/* --- toolbar --- */

.ds-builder__toolbar,
.ds-builder__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	margin-top: 1rem;
}

.ds-builder__btn {
	padding: 0.6rem 1.2rem;
	font: inherit;
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--wp--preset--color--primary-deep, #1E1940);
	background: var(--wp--preset--color--accent, #E0A83C);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.ds-builder__btn:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(36, 30, 56, 0.18);
}

.ds-builder__btn--ghost {
	color: var(--wp--preset--color--primary, #37306B);
	background: transparent;
	box-shadow: inset 0 0 0 1px rgba(55, 48, 107, 0.35);
}

.ds-builder__status {
	margin: 0;
	font-size: 0.8rem;
	color: var(--wp--preset--color--primary-deep, #1E1940);
}

.ds-builder__smallprint {
	margin: 0.9rem 0 0;
	font-size: 0.78rem;
	color: #6B6288;
}

@media (prefers-reduced-motion: reduce) {
	.ds-builder__btn {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
   10. Print
   The fairy letters and the certificate are meant to come out of a home
   printer at 9pm. Strip everything that isn't the letter.
   ---------------------------------------------------------------------- */

@media print {
	.ds-header,
	.ds-footer,
	.ds-skip-link,
	.wp-block-buttons,
	.ds-toc,
	.ds-region-switch {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
		font-size: 12pt;
	}

	.ds-night,
	.ds-night::before,
	.ds-night::after {
		background: none !important;
		box-shadow: none !important;
	}

	.ds-night :where(h1, h2, h3, h4, h5, p, li) {
		color: #000;
	}

	/* The builder's "Print this one" button prints exactly one sheet. Rather
	   than hide the rest of the page rule by rule, collapse the whole body and
	   let the chosen sheet out on its own — the parent asked for the letter,
	   not for the article wrapped around it. */
	body.ds-printing-letter > *,
	body.ds-printing-letter .wp-site-blocks > * {
		display: none !important;
	}

	body.ds-printing-letter .wp-site-blocks,
	body.ds-printing-letter main,
	body.ds-printing-letter .entry-content,
	body.ds-printing-letter .ds-builder,
	body.ds-printing-letter .ds-builder__grid,
	body.ds-printing-letter .ds-builder__preview,
	body.ds-printing-letter .ds-builder__stage {
		display: block !important;
		position: static !important;
		margin: 0 !important;
		padding: 0 !important;
		max-width: none !important;
		background: none !important;
	}

	body.ds-printing-letter .ds-builder__form,
	body.ds-printing-letter .ds-builder__intro,
	body.ds-printing-letter .ds-builder__tabs,
	body.ds-printing-letter .ds-builder__toolbar,
	body.ds-printing-letter .ds-builder__smallprint {
		display: none !important;
	}

	body.ds-printing-letter .ds-builder__sheet:not(.is-printing) {
		display: none !important;
	}

	body.ds-printing-letter .ds-builder__sheet.is-printing {
		display: block !important;
		box-shadow: none !important;
		background: #fff !important;
		padding: 0 !important;
	}

	/* Blanks left unfilled print as a rule to write on, not as grey shading a
	   home printer would waste ink rendering. */
	.ds-tok.is-empty {
		background: none !important;
		color: #000 !important;
		border-bottom: 1px solid #000 !important;
		min-width: 6em;
		display: inline-block;
	}

	/* Each letter and the certificate get their own sheet. */
	.ds-printable {
		break-inside: avoid;
		break-after: page;
		border: 1px solid #999;
		box-shadow: none;
		padding: 2cm 1.8cm;
	}

	.ds-printable:last-of-type {
		break-after: auto;
	}

	.ds-story p {
		font-size: 13pt;
		max-width: none;
	}

	.ds-faq details {
		break-inside: avoid;
	}

	.ds-faq details:not([open]) .ds-faq__a {
		display: block;
	}

	a[href^="/"]::after,
	a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 9pt;
		color: #555;
	}

	.ds-printable a::after {
		content: "";
	}
}