/*
Theme Name: Shabdbodh
Theme URI: https://shabdbodh.com/
Author: Shabdbodh
Author URI: https://shabdbodh.com/
Description: Standalone hybrid theme for Shabdbodh, a Hindi community publishing platform. Design tokens live in theme.json; rendering is handled by PHP templates. No parent theme.
Version: 0.1.1
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: shabdbodh
Tags: blog, one-column, custom-logo, custom-menu, featured-images, translation-ready, accessibility-ready
*/

/* ==========================================================================
   Design tokens come from theme.json, which emits them as CSS custom
   properties (--wp--preset--* and --wp--custom--*). This file never hardcodes
   a colour or a line-height that theme.json already owns.

   Two constraints that shape everything below:

   1. Devanagari needs more leading than Latin. Below roughly 1.7, matras
      (the vowel marks above and below the baseline) collide with the line
      above. Body is 1.72; long-form reading is 1.8.

   2. #e84f5b measures 3.68:1 against white and fails WCAG AA for normal-size
      text. Text-bearing surfaces use --accent (#cf3442, 4.97:1). #d9a441 is
      2.25:1 and may only ever be a decorative fill, never behind text.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset and base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	/* text-wrap: pretty avoids short last lines; it degrades silently where unsupported. */
	text-wrap: pretty;
	-webkit-font-smoothing: antialiased;
}

img,
picture,
video,
iframe {
	max-width: 100%;
	height: auto;
}

/* --------------------------------------------------------------------------
   2. Accessibility primitives
   -------------------------------------------------------------------------- */

/* Visually hidden but available to screen readers. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

/*
 * Focus rings.
 *
 * Two variants are required, not one. A dark ring is invisible on the dark
 * footer, and a white ring is invisible on white. One colour cannot pass on
 * both surfaces, so sections with an inverse background override the ring.
 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: var(--wp--custom--focus-ring--width, 2px) solid var(--wp--preset--color--contrast);
	outline-offset: var(--wp--custom--focus-ring--offset, 2px);
	border-radius: 2px;
}

.section--inverse :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible,
.site-footer :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline-color: var(--wp--preset--color--inverse-text);
}

/* Skip link: hidden until focused, then pinned top-left over everything. */
.skip-link {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 100000;
	padding: 0.75rem 1.25rem;
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--accent);
	font-weight: 600;
	text-decoration: underline;
	transform: translateY(-120%);
}

.skip-link:focus {
	transform: translateY(0);
}

/* Respect a reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* --------------------------------------------------------------------------
   3. Layout
   -------------------------------------------------------------------------- */

/*
 * Inner-page main: same 80rem box and same gutter as the header, so archive and post content lines up
 * with the logo exactly as the homepage sections do.
 */
.site-main {
	margin-inline: auto;
	padding-inline: 1.25rem;
	max-width: var(--wp--style--global--wide-size, 80rem);
}

@media (min-width: 64em) {
	.site-main {
		padding-inline: 2rem;
	}
}

/*
 * The homepage is composed of sections that carry their own gutter and their own 80rem inner box, so
 * main must add neither. Leaving the padding on produced a double gutter and pushed every content box
 * inward relative to the header.
 */
.site-main--home {
	max-width: none;
	padding-inline: 0;
}

.site-main--single {
	/*
	 * Narrower than the wide layout on purpose. A comfortable measure matters
	 * more than filling the viewport when the job is sustained reading.
	 */
	max-width: 48rem;
	padding-block: var(--wp--preset--spacing--50);
}

/* --------------------------------------------------------------------------
   4. Header and footer

   Values resolved from the design's compiled CSS rather than eyeballed:
     header inner  flex, items-center, justify-between, px-5 py-3, lg:px-8
     brand         flex items-center gap-3  (tagline INLINE, not stacked)
     tagline       text-xs (0.75rem), hidden below sm
     nav           hidden below lg, gap-6 (1.5rem), links 0.95rem
     header CTA    min-h-12 (3rem), px-6 (1.5rem), text-sm, pill
   -------------------------------------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	/* Slightly translucent over the cream page, as in the design. */
	background-color: color-mix(in srgb, var(--wp--preset--color--base) 95%, transparent);
	border-block-end: 1px solid var(--wp--preset--color--border);
	backdrop-filter: blur(8px);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	margin-inline: auto;
	/* px-5 py-3 */
	padding: 0.75rem 1.25rem;
	max-width: var(--wp--style--global--wide-size, 1200px);
}

@media (min-width: 64em) {
	.site-header__inner {
		/* lg:px-8 */
		padding-inline: 2rem;
	}
}

/* Brand: logo and tagline on one line, gap-3. */
.site-header__brand {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-width: 0;
}

.site-title {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	line-height: var(--wp--custom--line-height--tight);
}

.site-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

/* Constrain the Customizer logo; the source file is 300x165. */
.custom-logo-link img,
.wp-block-site-logo img {
	display: block;
	width: auto;
	max-height: 2.25rem;
}

.site-header__tagline {
	/* text-xs */
	font-size: 0.75rem;
	color: var(--wp--preset--color--contrast-secondary);
	/* Hidden below sm, where the row has no room for it. */
	display: none;
}

@media (min-width: 40em) {
	.site-header__tagline {
		display: block;
	}
}

/*
 * Desktop navigation. Pushed right by the brand's auto margin, and hidden below lg where the
 * disclosure menu takes over.
 */
.site-nav {
	display: none;
}

@media (min-width: 64em) {
	.site-nav {
		display: block;
	}
}

.site-nav__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	/* gap-6 */
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav__list a {
	color: var(--wp--preset--color--contrast-secondary);
	font-size: 0.95rem;
	text-decoration: none;
	transition: color 150ms ease;
}

.site-nav__list a:hover,
.site-nav__list a:focus-visible {
	color: var(--wp--preset--color--contrast);
}

.site-header__actions {
	display: none;
}

@media (min-width: 64em) {
	.site-header__actions {
		display: block;
	}
}

/* --- Mobile disclosure menu (native <details>, no JS) --- */

.site-header__mobile {
	display: block;
}

@media (min-width: 64em) {
	.site-header__mobile {
		display: none;
	}
}

.site-header__toggle {
	display: grid;
	place-items: center;
	/* size-11 = 2.75rem, a comfortable touch target. */
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: 999px;
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	list-style: none;
}

/*
 * Remove the disclosure triangle.
 *
 * list-style: none handles most engines, ::marker is required in current Chrome and Firefox, and
 * ::-webkit-details-marker covers older Safari. Missing ::marker leaves a visible ▶ next to the icon.
 */
.site-header__toggle::marker,
.site-header__toggle::-webkit-details-marker {
	content: "";
	display: none;
}

.site-header__mobile-panel {
	position: absolute;
	inset-inline: 0;
	/* Sits directly under the sticky header. */
	top: 100%;
	display: grid;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--surface);
	border-block-end: 1px solid var(--wp--preset--color--border);
	box-shadow: 0 8px 24px rgb(24 35 49 / 8%);
}

.site-nav--mobile .site-nav__list {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
}

.site-nav--mobile .site-nav__list a {
	display: block;
	padding-block: 0.75rem;
	border-block-end: 1px solid var(--wp--preset--color--border);
	font-size: var(--wp--preset--font-size--medium);
}

.site-footer {
	margin-block-start: var(--wp--preset--spacing--70);
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--inverse);
	color: var(--wp--preset--color--inverse-text);
}

.site-footer a {
	color: var(--wp--preset--color--inverse-text);
}

.site-footer__copyright {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
}

/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	/* 44px minimum target: comfortable for touch, and a WCAG 2.2 target-size aid. */
	min-height: 2.75rem;
	padding: 0.625rem 1.5rem;
	border: 1px solid transparent;
	/* 999px, from the design's --radius-button. Applies to every button, not only the hero. */
	border-radius: var(--wp--custom--radius-pill, 999px);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	/*
	 * 1.4, not the design's --font-button-line-height: 1. A line-height of 1 clips Devanagari matras
	 * and the ि/ी vowel signs, which sit above the cap height. min-height still governs the button
	 * size, so this only gives the glyphs room rather than making buttons taller.
	 */
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 150ms ease, color 150ms ease;
}

/* #cf3442 with white text is 4.97:1 — passes AA for normal-size text. */
.btn--primary {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--inverse-text);
}

.btn--primary:hover,
.btn--primary:focus-visible {
	background-color: var(--wp--preset--color--accent-hover);
	color: var(--wp--preset--color--inverse-text);
}

.btn--secondary {
	background-color: transparent;
	/* border-strong (#767670) is 4.57:1, clearing the 3:1 non-text minimum. */
	border-color: var(--wp--preset--color--border-strong);
	color: var(--wp--preset--color--contrast);
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
	border-color: var(--wp--preset--color--contrast);
}

.btn--sm {
	/*
	 * min-h-12 = 3rem, px-6 = 1.5rem. A small amount of vertical padding is kept rather than zeroed:
	 * with padding-block: 0 the text sits hard against the pill edges once the label wraps, and
	 * Devanagari matras need the clearance.
	 */
	min-height: 3rem;
	padding-block: 0.5rem;
	padding-inline: 1.5rem;
	font-size: 0.875rem;
}

.btn--link {
	min-height: 0;
	padding: 0;
	background: none;
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}

/*
 * Ghost button, for a secondary action sitting beside a filled one on a coloured panel.
 *
 * The design's own treatment: `border-transparent px-0 text-white`, keeping the same min-h-12 and
 * text-sm as the pill next to it so the two align on one baseline, but with no border, no horizontal
 * padding and no underline.
 *
 * It inherits colour from its panel, which is the point. The previous approach used .btn--link, whose
 * accent colour measures 1.61:1 against the teal trust panel — effectively illegible. Inheriting gives
 * white on teal at 8.02:1 and white on the coral CTA at 4.97:1.
 */
.btn--ghost {
	min-height: 3rem;
	padding-block: 0.5rem;
	padding-inline: 0;
	border-color: transparent;
	background: none;
	color: inherit;
	font-size: 0.875rem;
	text-decoration: none;
}

.btn--ghost:hover,
.btn--ghost:focus-visible {
	background: none;
	color: inherit;
	opacity: 0.8;
}

/* --------------------------------------------------------------------------
   6. Entry header and meta
   -------------------------------------------------------------------------- */

.entry-header {
	margin-block-end: var(--wp--preset--spacing--50);
}

.entry-eyebrow {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

.entry-eyebrow a {
	color: var(--wp--preset--color--secondary);
	text-decoration: none;
}

.entry-eyebrow a:hover,
.entry-eyebrow a:focus-visible {
	text-decoration: underline;
}

.entry-title {
	margin: 0 0 var(--wp--preset--spacing--30);
	/*
	 * Slightly looser than a Latin display heading would be. At this size,
	 * 1.12 clips matras on a two-line Devanagari title.
	 */
	line-height: var(--wp--custom--line-height--heading);
	letter-spacing: var(--wp--custom--letter-spacing--heading);
	/* text-wrap: balance evens out ragged multi-line headings. */
	text-wrap: balance;
}

.entry-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem;
	margin: 0;
	/* 7.38:1 — muted but still AA for body text. */
	color: var(--wp--preset--color--contrast-secondary);
	font-size: var(--wp--preset--font-size--small);
}

.entry-meta a {
	color: inherit;
}

.entry-meta__sep {
	opacity: 0.6;
}

.entry-thumbnail {
	margin: 0 0 var(--wp--preset--spacing--50);
}

.entry-thumbnail img {
	border-radius: 0.5rem;
}

.entry-thumbnail figcaption {
	margin-block-start: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--contrast-secondary);
	font-size: var(--wp--preset--font-size--small);
}

/* --------------------------------------------------------------------------
   7. Long-form content — the heart of single.php
   -------------------------------------------------------------------------- */

.entry-content {
	/*
	 * 1.8, looser than the 1.72 site default. Sustained reading in Devanagari
	 * benefits from the extra clearance, and this is the one place a reader
	 * spends minutes rather than seconds.
	 */
	line-height: var(--wp--custom--line-height--longform);
	font-size: var(--wp--preset--font-size--medium);
}

.entry-content > * {
	/*
	 * Constrain the measure, not the container, so full-width and wide blocks
	 * can still break out while text stays readable.
	 */
	max-width: var(--wp--custom--measure--longform, 68ch);
	margin-inline: auto;
}

.entry-content > .alignwide,
.entry-content > .alignfull,
.entry-content > figure,
.entry-content > .wp-block-table {
	max-width: none;
}

.entry-content > * + * {
	margin-block-start: 1.5em;
}

/*
 * Headings inside long-form copy.
 *
 * The large space above and small space below deliberately binds a heading to
 * the text it introduces rather than letting it float between sections.
 */
.entry-content :where(h2, h3, h4, h5, h6) {
	margin-block: 2.25em 0.75em;
	line-height: var(--wp--custom--line-height--heading);
	letter-spacing: var(--wp--custom--letter-spacing--heading);
	text-wrap: balance;
}

.entry-content :where(h2) {
	font-size: var(--wp--preset--font-size--x-large);
}

.entry-content :where(h3) {
	font-size: var(--wp--preset--font-size--large);
}

.entry-content :where(h4, h5, h6) {
	font-size: var(--wp--preset--font-size--medium);
}

/* Poetry and short verse: preserve the author's line breaks. */
.entry-content p {
	margin-block: 0;
}

.entry-content :where(ul, ol) {
	padding-inline-start: 1.5em;
}

.entry-content li + li {
	margin-block-start: 0.5em;
}

.entry-content :where(ul, ol) li {
	/* Matras need the same clearance inside list items as in paragraphs. */
	line-height: var(--wp--custom--line-height--longform);
}

.entry-content blockquote {
	margin-inline: 0;
	padding-inline-start: var(--wp--preset--spacing--40);
	border-inline-start: 3px solid var(--wp--preset--color--secondary);
	font-style: normal;
}

.entry-content :where(table) {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--small);
}

.entry-content :where(th, td) {
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--wp--preset--color--border);
	text-align: start;
	vertical-align: top;
}

.entry-content :where(th) {
	background-color: var(--wp--preset--color--surface-alt);
	font-weight: 600;
}

/* Tables are the one block here that can overflow on a phone. */
.entry-content :where(.wp-block-table) {
	overflow-x: auto;
}

.entry-content a {
	/*
	 * Underline offset keeps the rule clear of Devanagari descenders, which sit
	 * lower than Latin ones.
	 */
	text-underline-offset: 0.2em;
}

/* --------------------------------------------------------------------------
   8. Entry footer: author card, tags, CTA
   -------------------------------------------------------------------------- */

.entry-footer {
	margin-block-start: var(--wp--preset--spacing--60);
	padding-block-start: var(--wp--preset--spacing--50);
	border-block-start: 1px solid var(--wp--preset--color--border);
}

.author-card {
	display: flex;
	gap: var(--wp--preset--spacing--40);
	align-items: flex-start;
	padding: var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--surface-alt);
	border-radius: var(--wp--custom--radius, 1rem);
}

.author-card__body {
	flex: 1 1 auto;
	min-width: 0;
}

.author-card__name {
	margin: 0 0 0.25rem;
	font-size: var(--wp--preset--font-size--large);
}

.author-card__name a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.author-card__name a:hover,
.author-card__name a:focus-visible {
	text-decoration: underline;
}

.author-card__bio {
	margin: 0 0 0.5rem;
	color: var(--wp--preset--color--contrast-secondary);
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--body);
}

.author-card__link {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
}

/*
 * Initials avatar.
 *
 * White on --secondary is 8.02:1. Used in place of Gravatar's mystery-person,
 * which reads as "no identity" rather than "this person". Most contributors
 * here have no Gravatar, so this is the common case, not the edge case.
 */
.avatar-initials {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--inverse-text);
	border-radius: 50%;
	font-weight: 600;
	line-height: 1;
	/* The glyph is centred optically; Devanagari sits slightly high in the box. */
	padding-block-start: 0.05em;
	user-select: none;
}

.avatar-initials--sm {
	width: 2rem;
	height: 2rem;
	font-size: 0.875rem;
}

.avatar-initials--md {
	width: 3rem;
	height: 3rem;
	font-size: 1.25rem;
}

.avatar-initials--lg {
	width: 4rem;
	height: 4rem;
	font-size: 1.75rem;
}

.avatar-image {
	flex: 0 0 auto;
	border-radius: 50%;
}

.entry-tags {
	margin-block-start: var(--wp--preset--spacing--40);
}

.entry-tags__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.entry-tags__list a {
	display: inline-block;
	padding: 0.25rem 0.625rem;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: 999px;
	color: var(--wp--preset--color--contrast-secondary);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
}

.entry-tags__list a:hover,
.entry-tags__list a:focus-visible {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

.entry-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	margin-block-start: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--surface-alt);
	border-radius: var(--wp--custom--radius, 1rem);
}

.entry-cta__text {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
}

/* --------------------------------------------------------------------------
   9. Post navigation
   -------------------------------------------------------------------------- */

.post-navigation {
	margin-block-start: var(--wp--preset--spacing--60);
	padding-block-start: var(--wp--preset--spacing--40);
	border-block-start: 1px solid var(--wp--preset--color--border);
}

.post-navigation .nav-links {
	display: grid;
	gap: var(--wp--preset--spacing--40);
}

@media (min-width: 40em) {
	.post-navigation .nav-links {
		grid-template-columns: 1fr 1fr;
	}

	.post-navigation .nav-next {
		text-align: end;
	}
}

.post-navigation a {
	display: block;
	text-decoration: none;
}

.post-nav__label {
	display: block;
	color: var(--wp--preset--color--contrast-secondary);
	font-size: var(--wp--preset--font-size--small);
}

.post-nav__title {
	display: block;
	margin-block-start: 0.25rem;
	color: var(--wp--preset--color--accent);
	font-weight: 500;
	line-height: var(--wp--custom--line-height--tight);
}

.post-navigation a:hover .post-nav__title,
.post-navigation a:focus-visible .post-nav__title {
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   10. Archive and index listings
   -------------------------------------------------------------------------- */

.site-main--archive,
.site-main--author,
.site-main--search,
.site-main--404 {
	padding-block: var(--wp--preset--spacing--50);
}

.page-header {
	margin-block-end: var(--wp--preset--spacing--50);
	padding-block-end: var(--wp--preset--spacing--40);
	border-block-end: 1px solid var(--wp--preset--color--border);
}

.page-eyebrow {
	margin: 0 0 var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

.page-title {
	margin: 0;
	line-height: var(--wp--custom--line-height--heading);
	letter-spacing: var(--wp--custom--letter-spacing--heading);
	text-wrap: balance;
}

.page-description {
	margin-block-start: var(--wp--preset--spacing--30);
	max-width: var(--wp--custom--measure--narrow, 52ch);
	color: var(--wp--preset--color--contrast-secondary);
	font-size: var(--wp--preset--font-size--large);
	line-height: var(--wp--custom--line-height--body);
}

.page-header__search {
	margin-block-start: var(--wp--preset--spacing--40);
}

.section-title {
	margin-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	font-size: var(--wp--preset--font-size--x-large);
}

/* --- Card grid --- */

.card-grid {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	grid-template-columns: 1fr;
}

@media (min-width: 40em) {
	.card-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64em) {
	.card-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.card {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	min-width: 0;
}

.card__media {
	display: block;
	overflow: hidden;
	border-radius: 0.5rem;
}

.card__media img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.card__body {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	min-width: 0;
}

.card__eyebrow {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

.card__eyebrow a {
	color: var(--wp--preset--color--secondary);
	text-decoration: none;
}

.card__eyebrow a:hover,
.card__eyebrow a:focus-visible {
	text-decoration: underline;
}

.card__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	line-height: var(--wp--custom--line-height--tight);
	letter-spacing: normal;
}

.card__title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.card__title a:hover,
.card__title a:focus-visible {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}

.card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem;
	margin: 0;
	color: var(--wp--preset--color--contrast-secondary);
	font-size: var(--wp--preset--font-size--small);
}

.card__meta a {
	color: inherit;
}

.card__sep {
	opacity: 0.6;
}

.card__excerpt {
	margin: 0;
	color: var(--wp--preset--color--contrast-secondary);
	line-height: var(--wp--custom--line-height--body);
}

.card__more {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

/* --- Author header --- */

.author-header {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--40);
	align-items: flex-start;
	margin-block-end: var(--wp--preset--spacing--50);
	padding-block-end: var(--wp--preset--spacing--40);
	border-block-end: 1px solid var(--wp--preset--color--border);
}

.author-header__body {
	flex: 1 1 18rem;
	min-width: 0;
}

.author-header__subtitle {
	margin: var(--wp--preset--spacing--20) 0 0;
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
}

.author-header__bio {
	margin: var(--wp--preset--spacing--30) 0 0;
	max-width: var(--wp--custom--measure--narrow, 52ch);
	color: var(--wp--preset--color--contrast-secondary);
	line-height: var(--wp--custom--line-height--body);
}

.author-header__link {
	margin: var(--wp--preset--spacing--20) 0 0;
	font-size: var(--wp--preset--font-size--small);
	/* Author-supplied URLs can be long; never let one force a horizontal scrollbar. */
	overflow-wrap: anywhere;
}

/* --- Empty states --- */

.no-results {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	max-width: var(--wp--custom--measure--longform, 68ch);
}

.no-results__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--x-large);
}

.no-results__message {
	margin: 0;
	color: var(--wp--preset--color--contrast-secondary);
	font-size: var(--wp--preset--font-size--large);
}

.no-results__subtitle {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--medium);
}

.collection-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.collection-links a {
	display: inline-block;
	padding: 0.5rem 1rem;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: 999px;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.collection-links a:hover,
.collection-links a:focus-visible {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

.no-results__cta p {
	margin: 0 0 var(--wp--preset--spacing--30);
}

/* --- Search form --- */

.search-form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.search-form label {
	flex: 1 1 14rem;
}

.search-field {
	width: 100%;
	min-height: 2.75rem;
	padding: 0.5rem 0.75rem;
	/* border-strong is 4.57:1, clearing the 3:1 minimum for input boundaries. */
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius-pill, 999px);
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
}

.search-submit {
	min-height: 2.75rem;
	padding: 0.5rem 1.25rem;
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius-pill, 999px);
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--inverse-text);
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	cursor: pointer;
}

.search-submit:hover,
.search-submit:focus-visible {
	background-color: var(--wp--preset--color--accent-hover);
}

/* --- Pagination --- */

.pagination {
	margin-block-start: var(--wp--preset--spacing--60);
	padding-block-start: var(--wp--preset--spacing--40);
	border-block-start: 1px solid var(--wp--preset--color--border);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0 0.75rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 0.5rem;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.pagination .page-numbers:hover,
.pagination .page-numbers:focus-visible {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

.pagination .page-numbers.current {
	background-color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--inverse-text);
	font-weight: 600;
}

.pagination .page-numbers.dots {
	border-color: transparent;
}

/* --- Index fallback entries --- */

.entry {
	padding-block: var(--wp--preset--spacing--40);
	border-block-end: 1px solid var(--wp--preset--color--border);
}

.entry--single {
	padding-block: 0;
	border-block-end: 0;
}

.entry-summary {
	margin-block-start: var(--wp--preset--spacing--20);
	max-width: var(--wp--custom--measure--longform, 68ch);
}

.recent-posts {
	margin-block-start: var(--wp--preset--spacing--60);
}

/* --------------------------------------------------------------------------
   11. Comments
   -------------------------------------------------------------------------- */

.comments-area {
	margin-block-start: var(--wp--preset--spacing--60);
	padding-block-start: var(--wp--preset--spacing--50);
	border-block-start: 1px solid var(--wp--preset--color--border);
}

.comment-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ==========================================================================
   12. Homepage
   ========================================================================== */

/* --- Section scaffolding --- */

.section {
	padding-block: var(--wp--preset--spacing--60);
}

@media (min-width: 64em) {
	.section {
		padding-block: var(--wp--preset--spacing--70);
	}
}

.section__inner {
	margin-inline: auto;
	max-width: var(--wp--style--global--wide-size, 80rem);
}

.section__inner--narrow {
	max-width: 46rem;
}

/*
 * The one section tint in the design.
 *
 * Verified against the design markup: ten of its eleven sections carry no background class at all and
 * simply inherit the page cream. Only `latest-writing` is tinted, with `bg-ploy-neutral-primary-s2`
 * (#f3eeea) — the warm alt, NOT white.
 *
 * This previously painted `surface` (#ffffff) and was applied to several sections, which is why the
 * page background kept flipping to white. Backgrounds belong to cards, not to sections.
 */
.section--alt {
	background-color: var(--wp--preset--color--surface-alt);
}

/*
 * Dark sections.
 *
 * The focus-ring override in section 2 targets .section--inverse, because a dark ring on this
 * background is invisible. Any new dark section must use this class to inherit that.
 */
.section--inverse {
	background-color: var(--wp--preset--color--inverse);
	color: var(--wp--preset--color--inverse-text);
}

/* White on #15201f is 16.69:1. */
.section--inverse a {
	color: var(--wp--preset--color--inverse-text);
}

.section--inverse .section__lede,
.section--inverse .section__text {
	/* rgba white rather than a grey token: stays high-contrast on this background. */
	color: rgb(255 255 255 / 86%);
}

.section__header {
	max-width: var(--wp--custom--measure--longform, 68ch);
	margin-block-end: var(--wp--preset--spacing--50);
}

.section__eyebrow {
	margin: 0 0 var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

.section__title {
	margin: 0;
	line-height: var(--wp--custom--line-height--heading);
	letter-spacing: var(--wp--custom--letter-spacing--heading);
	text-wrap: balance;
}

.section__lede {
	margin: var(--wp--preset--spacing--30) 0 0;
	color: var(--wp--preset--color--contrast-secondary);
	font-size: var(--wp--preset--font-size--large);
	line-height: var(--wp--custom--line-height--body);
}

.section__text {
	margin: var(--wp--preset--spacing--30) 0 0;
	line-height: var(--wp--custom--line-height--body);
}

.section__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
	margin-block-start: var(--wp--preset--spacing--40);
}

/* --- Hero --- */

.hero {
	padding-block-start: var(--wp--preset--spacing--50);
}

.hero__inner {
	display: grid;
	gap: var(--wp--preset--spacing--60);
	align-items: center;
}

@media (min-width: 64em) {
	.hero__inner {
		grid-template-columns: 1.15fr 0.85fr;
	}
}

.hero__title {
	margin: 0;
	/* max-w-3xl = 48rem, but never wider than the column it sits in. */
	max-width: min(48rem, 100%);
	/*
	 * The design's literal sizes: text-4xl (2.25rem), rising to md:text-5xl (3rem) at 48em.
	 *
	 * These only hold if the column is wide enough — the longer line needs ~518px at 3rem. See the
	 * two-column breakpoint below, which is raised so that is always true.
	 */
	font-size: 2.25rem;
	line-height: var(--wp--custom--line-height--heading);
	letter-spacing: var(--wp--custom--letter-spacing--heading);
	/*
	 * No text-wrap: balance here. The two lines are explicit <span> blocks, and balance re-distributes
	 * words *within* each span — which is what turned a 1+1 headline into 2+2.
	 */
}

/*
 * The design jumps to md:text-5xl (3rem) at 48em, which is where its two-line headline breaks.
 *
 * Measured: the longer line needs ~518px at 3rem, and ~389px at 2.25rem. In the two-column card the
 * copy column yields roughly 422px at 1024px, 475px at 1152px and 541px at 1408px. So 2.25rem holds
 * from the moment the columns appear, while 3rem only fits from about 1408px.
 *
 * Holding 2.25rem through that range keeps the design's layout at every width AND keeps the headline on
 * its two intended lines — rather than choosing between the two.
 */
@media (min-width: 88em) {
	.hero__title {
		font-size: 3rem;
	}
}

.hero__lede {
	margin: var(--wp--preset--spacing--40) 0 0;
	max-width: var(--wp--custom--measure--narrow, 52ch);
	color: var(--wp--preset--color--contrast-secondary);
	font-size: var(--wp--preset--font-size--large);
	line-height: var(--wp--custom--line-height--body);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	margin-block-start: var(--wp--preset--spacing--50);
}

.hero__chips {
	display: grid;
	gap: 0.75rem;
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: 0;
	list-style: none;
	color: var(--wp--preset--color--contrast-secondary);
	font-size: var(--wp--preset--font-size--small);
}

/*
 * Decorative hero panel.
 *
 * accent-brand (#e84f5b) is used here as a background behind large display type only. It is
 * 3.68:1 with white and fails AA for normal-size text, so nothing small goes on it.
 */
.hero__panel {
	padding: var(--wp--preset--spacing--50);
	border-radius: 1rem;
	background-color: var(--wp--preset--color--accent-brand);
	color: var(--wp--preset--color--inverse-text);
}

.hero__panel-brand {
	margin: 0;
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--tight);
}

.hero__panel-tagline {
	margin: 0.5rem 0 0;
	font-size: var(--wp--preset--font-size--large);
}

.hero__panel-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
	list-style: none;
}

.hero__panel-tags li {
	padding: 0.25rem 0.75rem;
	border: 1px solid rgb(255 255 255 / 55%);
	border-radius: 999px;
	font-size: var(--wp--preset--font-size--small);
}

.hero__panel-steps {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem var(--wp--preset--spacing--30);
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
}

.hero__panel-steps li + li::before {
	content: "→";
	margin-inline-end: 0.5rem;
}

/* --- Collection cards --- */

.collection-cards,
.benefit-cards,
.writer-cards,
.trust-points,
.pick-cards,
.process-steps {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 40em) {
	.collection-cards,
	.benefit-cards,
	.pick-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64em) {
	.collection-cards,
	.benefit-cards {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/*
 * Cards are white on the cream page.
 *
 * Note the palette inverted in the design revision: `base` used to be white and `surface` a light
 * grey; now `base` is cream #faf8f5 and `surface` is white #ffffff. Card backgrounds therefore moved
 * from base to surface. Getting this wrong renders cream cards on a cream page — invisible edges.
 */
.collection-card,
.benefit-card,
.writer-card,
.trust-point,
.pick-card {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius, 1rem);
}

/* Cards stay white on a tinted section so they still read as raised. */
.section--alt .benefit-card,
.section--alt .writer-card,
.section--alt .trust-point,
.section--alt .pick-card,
.section--alt .read-card {
	background-color: var(--wp--preset--color--surface);
}

.collection-card__eyebrow,
.pick-card__eyebrow {
	margin: 0;
	color: var(--wp--preset--color--contrast-secondary);
	font-size: var(--wp--preset--font-size--small);
}

.pick-card__eyebrow a {
	color: var(--wp--preset--color--secondary);
	text-decoration: none;
}

.collection-card__title,
.benefit-card__title,
.writer-card__name,
.trust-point__title,
.pick-card__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	line-height: var(--wp--custom--line-height--tight);
	letter-spacing: normal;
}

.collection-card__title a,
.writer-card__name a,
.pick-card__title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.collection-card__title a:hover,
.collection-card__title a:focus-visible,
.writer-card__name a:hover,
.writer-card__name a:focus-visible,
.pick-card__title a:hover,
.pick-card__title a:focus-visible {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}

.collection-card__blurb,
.benefit-card__text,
.trust-point__text,
.process-step__text {
	margin: 0;
	color: var(--wp--preset--color--contrast-secondary);
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--body);
}

.collection-card__more,
.writer-card__more {
	margin: auto 0 0;
	padding-block-start: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

/* --- Process steps --- */

@media (min-width: 40em) {
	.process-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64em) {
	.process-steps {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.process-step {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/*
 * The step number is decorative: the list is an <ol>, so assistive tech already conveys order.
 * secondary (#0f5960) with white is 8.02:1.
 */
.process-step__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	margin: 0;
	border-radius: 50%;
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--inverse-text);
	font-weight: 600;
}

.process-step__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	line-height: var(--wp--custom--line-height--tight);
	letter-spacing: normal;
}

/* --- Writers --- */

@media (min-width: 40em) {
	.writer-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64em) {
	.writer-cards {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.writer-card {
	align-items: flex-start;
}

.writer-card__subtitle {
	margin: 0;
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

/* --- Trust --- */

@media (min-width: 40em) {
	.trust-points {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64em) {
	.trust-points {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.trust-point__title {
	font-size: var(--wp--preset--font-size--medium);
}

/* --- Pull quote --- */

.pull-quote {
	margin: var(--wp--preset--spacing--50) 0 0;
	padding-inline-start: var(--wp--preset--spacing--40);
	border-inline-start: 3px solid var(--wp--preset--color--tertiary);
}

.pull-quote blockquote {
	margin: 0;
}

.pull-quote p {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
}

.pull-quote figcaption {
	margin-block-start: var(--wp--preset--spacing--20);
	font-size: var(--wp--preset--font-size--small);
	opacity: 0.85;
}

/* --- FAQ (native details) --- */

.faq-list {
	border-block-start: 1px solid var(--wp--preset--color--border);
}

.faq-item {
	border-block-end: 1px solid var(--wp--preset--color--border);
}

.faq-item__question {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	/* Comfortable target height for the whole row, per WCAG 2.2 target size. */
	padding-block: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	line-height: var(--wp--custom--line-height--tight);
	cursor: pointer;
	/* list-style: none removes the default marker; ::-webkit-details-marker covers Safari. */
	list-style: none;
}

.faq-item__question::marker,
.faq-item__question::-webkit-details-marker {
	content: "";
	display: none;
}

/* Custom marker. Decorative, so it is generated content rather than markup. */
.faq-item__question::after {
	content: "+";
	flex: 0 0 auto;
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1;
}

.faq-item[open] .faq-item__question::after {
	content: "–";
}

.faq-item__answer {
	padding-block-end: var(--wp--preset--spacing--40);
	color: var(--wp--preset--color--contrast-secondary);
}

.faq-item__answer p {
	margin: 0;
	line-height: var(--wp--custom--line-height--body);
}

/* --- Closing CTA --- */

.closing-cta {
	text-align: center;
}

.closing-cta .section__header,
.closing-cta .section__lede {
	margin-inline: auto;
}

.closing-cta .section__actions {
	justify-content: center;
}

.closing-cta__reassurance {
	margin: var(--wp--preset--spacing--40) 0 0;
	color: rgb(255 255 255 / 86%);
	font-size: var(--wp--preset--font-size--small);
}

/* --- Footer --- */

.site-footer__inner {
	margin-inline: auto;
	max-width: var(--wp--style--global--wide-size, 1200px);
}

.site-footer__blurb {
	margin: 0 0 var(--wp--preset--spacing--50);
	max-width: var(--wp--custom--measure--narrow, 52ch);
	color: rgb(255 255 255 / 86%);
}

.site-footer__columns {
	display: grid;
	gap: var(--wp--preset--spacing--50);
}

@media (min-width: 40em) {
	.site-footer__columns {
		grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	}
}

.site-footer__heading {
	margin: 0 0 var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.site-footer__list {
	display: grid;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--small);
}

.site-footer__legal {
	margin-block-start: var(--wp--preset--spacing--60);
	padding-block-start: var(--wp--preset--spacing--40);
	border-block-start: 1px solid rgb(255 255 255 / 18%);
	font-size: var(--wp--preset--font-size--small);
}

.site-footer__rights,
.site-footer__legal-text {
	margin: 0.25rem 0 0;
	color: rgb(255 255 255 / 86%);
}

/* --- Mobile sticky CTA (front page only) --- */

.sticky-cta {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 90;
	padding: 0.75rem var(--wp--preset--spacing--40);
	/* Keep clear of the iOS home indicator. */
	padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
	background-color: var(--wp--preset--color--surface);
	border-block-start: 1px solid var(--wp--preset--color--border);
}

.sticky-cta__link {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	border-radius: 0.5rem;
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--inverse-text);
	font-weight: 500;
	text-decoration: none;
}

.sticky-cta__link:hover,
.sticky-cta__link:focus-visible {
	background-color: var(--wp--preset--color--accent-hover);
}

/* Desktop does not need it — the header CTA is always visible there. */
@media (min-width: 48em) {
	.sticky-cta {
		display: none;
	}
}

/*
 * Hide on short viewports, which covers landscape phones and high zoom levels. A fixed bar there
 * eats an unacceptable share of the reading area, and WCAG 1.4.10 expects content to stay usable
 * when reflowed.
 */
@media (max-height: 26rem) {
	.sticky-cta {
		display: none;
	}
}

/* Reserve space so the footer is never hidden behind the fixed bar. */
@media (max-width: 47.9375em) {
	body.home {
		padding-bottom: var(--wp--custom--sticky-cta-height, 4.5rem);
	}
}

/* ==========================================================================
   13. Recent reads (one per collection, under the hero)
   ========================================================================== */

.recent-reads__header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	max-width: none;
}

.read-cards {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: 1fr;
}

@media (min-width: 40em) {
	.read-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64em) {
	.read-cards {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.read-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius, 1rem);
	background-color: var(--wp--preset--color--surface);
}

.read-card__media {
	display: block;
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background-color: var(--wp--preset--color--surface-alt);
}

.read-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Placeholder for posts with no featured image.
 *
 * This is the common case, not an edge case: most कविता and कहानी posts have no thumbnail. Rendering
 * the title on a dark panel keeps the row visually even instead of leaving gaps.
 *
 * --inverse with white text is 16.69:1, so the title stays readable at any size.
 */
.read-card__placeholder {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	padding: var(--wp--preset--spacing--40);
	background-color: var(--wp--preset--color--inverse);
	color: var(--wp--preset--color--inverse-text);
}

.read-card__placeholder-title {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	/* Devanagari clearance still applies here. */
	line-height: var(--wp--custom--line-height--body);
	/* Long titles must not overflow the panel. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.read-card__placeholder-brand {
	font-size: var(--wp--preset--font-size--small);
	opacity: 0.7;
}

.read-card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 0.5rem;
	padding: var(--wp--preset--spacing--40);
	min-width: 0;
}

.read-card__eyebrow {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

.read-card__eyebrow a {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

.read-card__eyebrow a:hover,
.read-card__eyebrow a:focus-visible {
	text-decoration: underline;
}

.read-card__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	line-height: var(--wp--custom--line-height--tight);
	letter-spacing: normal;
}

.read-card__title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.read-card__title a:hover,
.read-card__title a:focus-visible {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}

.read-card__meta {
	margin: 0;
	color: var(--wp--preset--color--contrast-secondary);
	font-size: var(--wp--preset--font-size--small);
}

.read-card__meta a {
	color: inherit;
}

.read-card__more {
	margin: auto 0 0;
	padding-block-start: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

/* ==========================================================================
   14. Hero card (design revision)

   The hero is one white card on the cream page, split into a copy column and a
   manifesto panel. Palette note: `base` is now cream #faf8f5 and `surface` is
   white #ffffff, the reverse of the first revision.

   Contrast substitutions applied here, all measured rather than assumed:
     - the design's #e84f5b eyebrow is 3.48:1 on cream and fails AA for normal
       text, so --accent (#cf3442, 4.69:1) is used instead
     - the design's muted #617080 is only 4.41:1 on the #f3eeea panel, so the
       palette's --contrast-secondary is #5a6875 (4.96:1 on that panel)
     - the design's #d4c6bc border is 1.57:1 and cannot bound a control, so
       secondary buttons use --border-strong (#8f8178, 3.55:1)
   ========================================================================== */

.hero {
	/* pt-8 / pb-16 in the design: the hero sits closer to the header than to what follows. */
	padding-block: 2rem 4rem;
}

@media (min-width: 64em) {
	.hero {
		/* lg:pt-12 / lg:pb-24 */
		padding-block: 3rem 6rem;
	}
}

.hero__card {
	display: grid;
	/* The inner box is already 80rem wide and unpadded, so the card simply fills it. */
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius-card, 1.5rem);
	background-color: var(--wp--preset--color--surface);
	/* Very soft lift; the border does the real work of separating card from page. */
	box-shadow: 0 1px 2px rgb(24 35 49 / 4%);
}

/* Two columns from 64em, as in the design. */
@media (min-width: 64em) {
	.hero__card {
		grid-template-columns: 1.02fr 0.98fr;
	}
}

.hero__copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	/* px-6 py-12 */
	padding: 3rem 1.5rem;
}

@media (min-width: 40em) {
	.hero__copy {
		/* sm:px-10 */
		padding-inline: 2.5rem;
	}
}

@media (min-width: 64em) {
	.hero__copy {
		padding-block: 4rem;
	}
}

@media (min-width: 88em) {
	.hero__copy {
		/* lg:px-14 lg:py-16 */
		padding: 4rem 3.5rem;
	}
}

.hero__eyebrow {
	margin: 0 0 var(--wp--preset--spacing--30);
	/* #cf3442, not the design's #e84f5b: this is small text and needs 4.5:1. */
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

.hero__title {
	margin: 0;
	/* max-w-3xl = 48rem, but never wider than the column it sits in. */
	max-width: min(48rem, 100%);
	font-size: var(--wp--preset--font-size--display);
	line-height: var(--wp--custom--line-height--heading);
	letter-spacing: var(--wp--custom--letter-spacing--heading);
	text-wrap: balance;
}

/*
 * The headline is two deliberate lines in the design. Block spans rather than a <br> so the break is
 * structural and the balance algorithm still applies within each line.
 */
.hero__title-line {
	display: block;
}

.hero__lede {
	margin: var(--wp--preset--spacing--40) 0 0;
	/* max-w-2xl = 42rem */
	max-width: 42rem;
	color: var(--wp--preset--color--contrast-secondary);
	font-size: var(--wp--preset--font-size--large);
	/* leading-8 = 2rem against a 1.125rem font, i.e. ~1.78 — close to the 1.72 body value. */
	line-height: 2rem;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	margin-block-start: var(--wp--preset--spacing--50);
}

.hero__chips {
	display: grid;
	gap: 0.75rem;
	margin: var(--wp--preset--spacing--50) 0 0;
	padding: 0;
	list-style: none;
	color: var(--wp--preset--color--contrast-secondary);
	/* text-sm */
	font-size: 0.875rem;
}

@media (min-width: 40em) {
	.hero__chips {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.hero__chip {
	display: inline-flex;
	align-items: flex-start;
	gap: 0.375rem;
}

/*
 * The tick sits in a small tinted circle, as in the design (`size-5 rounded-full bg-accent/10`).
 * color-mix keeps the tint derived from the accent rather than hardcoding a fifth pink.
 */
.hero__chip-icon {
	display: grid;
	place-items: center;
	flex: 0 0 auto;
	width: 1.25rem;
	height: 1.25rem;
	border-radius: 999px;
	background-color: color-mix(in srgb, var(--wp--preset--color--accent) 10%, transparent);
	color: var(--wp--preset--color--accent);
}

.hero__chip-icon svg {
	width: 0.875rem;
	height: 0.875rem;
}

/* --- Manifesto panel --- */

.hero__manifesto {
	display: flex;
	flex-direction: column;
	/* justify-content: space-between + a min-height is what balances the panel in the design. */
	justify-content: space-between;
	gap: var(--wp--preset--spacing--40);
	/* min-h-80 = 20rem */
	min-height: 20rem;
	padding: var(--wp--preset--spacing--50);
	background-color: var(--wp--preset--color--surface-alt);
}

@media (min-width: 64em) {
	.hero__manifesto {
		/* lg:min-h-[620px] */
		min-height: 620px;
	}
}

@media (min-width: 88em) {
	.hero__manifesto {
		padding: var(--wp--preset--spacing--60);
	}
}

.hero__manifesto-top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	/* pb-5 */
	padding-block-end: 1.25rem;
	border-block-end: 1px solid var(--wp--preset--color--border);
}

.hero__manifesto-eyebrow,
.hero__manifesto-brand {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
}

.hero__manifesto-eyebrow {
	color: var(--wp--preset--color--secondary);
}

.hero__manifesto-brand {
	color: var(--wp--preset--color--contrast-secondary);
	font-weight: 500;
}

/*
 * text-4xl -> md:text-5xl, weight 500, leading-[1.25], tracking -0.025em, max-w-md, in
 * accent-secondary. The teal is the design's choice here and measures 6.96:1 on the panel, so it
 * passes AA comfortably.
 */
.hero__manifesto-title {
	margin: 0;
	/* max-w-md = 28rem */
	max-width: 28rem;
	color: var(--wp--preset--color--secondary);
	font-size: 2.25rem;
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: var(--wp--custom--letter-spacing--heading);
}

@media (min-width: 88em) {
	.hero__manifesto-title {
		font-size: 3rem;
	}
}

.hero__manifesto-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.hero__manifesto-tags a {
	display: inline-block;
	/* px-4 py-2 */
	padding: 0.5rem 1rem;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: 999px;
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast-secondary);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
}

.hero__manifesto-tags a:hover,
.hero__manifesto-tags a:focus-visible {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}

/*
 * Three equal columns aligned start / center / end, matching the design's
 * `grid grid-cols-3 border-t pt-5 text-sm`. No connecting arrows: the design has none, and the <ol>
 * already conveys the sequence to assistive tech.
 */
.hero__manifesto-steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.75rem;
	margin: auto 0 0;
	padding-block-start: 1.25rem;
	padding-inline: 0;
	border-block-start: 1px solid var(--wp--preset--color--border);
	list-style: none;
	color: var(--wp--preset--color--contrast-secondary);
	font-size: 0.875rem;
}

.hero__manifesto-steps li:nth-child(2) {
	text-align: center;
}

.hero__manifesto-steps li:nth-child(3) {
	text-align: end;
}

/* --- Split section headers (title left, "see all" link right) --- */

.section__header--split {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	max-width: none;
}

.section__note {
	margin: var(--wp--preset--spacing--30) 0 0;
	color: var(--wp--preset--color--contrast-secondary);
	font-size: var(--wp--preset--font-size--small);
}

/* Secondary buttons need a 3:1 boundary; the design's hairline colour is 1.57:1. */
.btn--secondary {
	border-color: var(--wp--preset--color--border-strong);
}

/* ==========================================================================
   15. Design-fidelity pass

   Every value below is resolved from the design's compiled CSS, not estimated.
   Where the design fails WCAG AA the substitution is noted inline with its
   measured ratio.
   ========================================================================== */

/* --- Devanagari and letter-spacing --- */

/*
 * No positive letter-spacing anywhere, and no text-transform: uppercase.
 *
 * Letter-spacing is a Latin typographic device. Applied to Devanagari it inserts space between every
 * glyph — including between a base consonant and its combining vowel sign — so चुनें renders as
 * "चु नें" with a visible gap mid-cluster. The same applies to conjuncts. This was the cause of the
 * broken eyebrow labels; it affected all seven of them.
 *
 * uppercase is separately meaningless here: Devanagari has no case distinction.
 *
 * The design agrees, and I should have checked sooner: it uses `uppercase` zero times, and its only
 * tracking is the NEGATIVE -0.025em on headings, which tightens Latin-style without splitting
 * clusters. Its eyebrow labels are simply `text-sm opacity-75`.
 *
 * Negative tracking on headings is retained — it does not introduce gaps.
 */

/* --- 0. Container geometry, matching the design's structure exactly --- */

/*
 * The design puts the gutter on the SECTION and leaves the inner box unpadded:
 *
 *     <section class="px-5 lg:px-8"><div class="mx-auto max-w-7xl"> ... </div></section>
 *
 * while the header puts its gutter INSIDE the max-width box:
 *
 *     <div class="site-header__inner mx-auto max-w-7xl px-5 lg:px-8">
 *
 * That asymmetry is deliberate and it is what produces the look: content boxes sit flush at the
 * container edge, and the logo sits one gutter (2rem) inside them.
 *
 * Previously .section__inner carried both max-width and padding, which pushed every card inwards by
 * the gutter and left the logo level with — or outside — the card edge instead of inset from it. That
 * is the inconsistency between the header and the content boxes.
 */
.section {
	padding-inline: 1.25rem;
}

.section__inner {
	max-width: 80rem;
	margin-inline: auto;
	padding-inline: 0;
}

.site-header__inner {
	max-width: 80rem;
	padding-inline: 1.25rem;
}

@media (min-width: 64em) {
	.section {
		padding-inline: 2rem;
	}

	.site-header__inner {
		padding-inline: 2rem;
	}
}

/* --- 1. Hero corrections --- */

/*
 * The manifesto title sits in its own padded block (the design wraps it in py-12), which is what
 * centres it between the top and bottom rules rather than letting it sit flush under the header.
 */
.hero__manifesto-block {
	padding-block: 3rem;
}

.hero__lede {
	/* text-lg is a fixed 1.125rem; letting it grow made the subtext visibly larger than the design. */
	font-size: 1.125rem;
}

/*
 * Trust chips on one line each.
 *
 * The labels are long, so three equal columns wrap them. Sizing columns to content and letting the
 * row use the full card width keeps each on a single line.
 */
.hero__chips {
	font-size: 0.8125rem;
}

@media (min-width: 40em) {
	.hero__chips {
		grid-template-columns: repeat(3, auto);
		justify-content: start;
		gap: 1.25rem;
	}
}

.hero__chip {
	align-items: center;
	white-space: nowrap;
}

/* --- 2. Collection cards: four brand colours, min-h-72, p-7 --- */

.collection-card {
	/* min-h-72 = 18rem; p-7 = 1.75rem */
	min-height: 18rem;
	padding: 1.75rem;
	justify-content: space-between;
	border: 0;
	border-radius: var(--wp--custom--radius-card, 1.5rem);
	transition: transform 150ms ease;
}

.collection-card:hover {
	transform: scale(1.01);
}

/*
 * Colour 1 is #cf3442, not the design's #e84f5b.
 *
 * #e84f5b is the only card colour where NO text colour passes AA: white is 3.68:1 and the dark ink is
 * 4.31:1, and these cards carry small blurb text. #cf3442 takes white at 4.97:1 and is already the
 * accent used for buttons, so the substitution is consistent rather than a new colour.
 */
.collection-card--1 {
	background-color: var(--wp--custom--card-colors--one);
	color: var(--wp--custom--card-colors--one-text);
}

/* white on #0f5960 = 8.02:1 */
.collection-card--2 {
	background-color: var(--wp--custom--card-colors--two);
	color: var(--wp--custom--card-colors--two-text);
}

/* white on #24223e = 15.29:1 */
.collection-card--3 {
	background-color: var(--wp--custom--card-colors--three);
	color: var(--wp--custom--card-colors--three-text);
}

/* Gold takes dark ink, not white: white would be 2.25:1, the dark ink is 7.05:1. */
.collection-card--4 {
	background-color: var(--wp--custom--card-colors--four);
	color: var(--wp--custom--card-colors--four-text);
}

.collection-card__eyebrow,
.collection-card__blurb,
.collection-card__more a,
.collection-card__title a {
	color: inherit;
}

/* opacity-75, as in the design. */
.collection-card__eyebrow {
	opacity: 0.75;
}

.collection-card__title {
	margin-block-start: auto;
	font-size: var(--wp--preset--font-size--x-large);
}

.collection-card__blurb {
	opacity: 0.92;
}

.collection-card__more a {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* --- 3. Accent eyebrow --- */

.section__eyebrow--accent {
	/*
	 * accent-hover (#ad2633), not accent (#cf3442).
	 *
	 * This eyebrow appears on the tinted latest-writing section, where #cf3442 measures only 4.32:1
	 * against #f3eeea — a token that passes on cream and white but not here. #ad2633 is 5.88:1 on the
	 * tint and 6.39:1 on cream, so it is safe on either surface.
	 */
	color: var(--wp--preset--color--accent-hover);
	text-transform: none;
	letter-spacing: normal;
	font-size: var(--wp--preset--font-size--small);
}

/* --- 4. Two-column section header pattern (heading left, body right) --- */

.section__split {
	display: grid;
	gap: 2.5rem;
}

@media (min-width: 64em) {
	.section__split {
		grid-template-columns: 0.9fr 1.1fr;
	}
}

.section__split--wide-right {
	gap: 3rem;
}

@media (min-width: 64em) {
	.section__split--wide-right {
		grid-template-columns: 0.82fr 1.18fr;
	}
}

@media (min-width: 64em) {
	.section__split--faq {
		grid-template-columns: 0.72fr 1.28fr;
	}
}

@media (min-width: 64em) {
	.section__split--about {
		grid-template-columns: 1.1fr 0.9fr;
		align-items: center;
	}
}

/* community-intro: hairlines top and bottom, py-12 */
.community-intro .section__split {
	padding-block: 3rem;
	border-block: 1px solid var(--wp--preset--color--border);
}

/* --- 5. Card-shaped sections (process, trust) --- */

.section--card .section__inner > .card-shell {
	padding: 1.5rem;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius-card, 1.5rem);
	background-color: var(--wp--preset--color--surface);
	box-shadow: 0 1px 2px rgb(24 35 49 / 4%);
}

@media (min-width: 40em) {
	.section--card .section__inner > .card-shell {
		padding: 2.5rem;
	}
}

@media (min-width: 64em) {
	.section--card .section__inner > .card-shell {
		padding: 3.5rem;
	}
}

/* Process steps: four columns separated by vertical rules, each with a tinted icon. */
.process-steps {
	margin-block-start: 3rem;
	grid-template-columns: 1fr;
	gap: 2rem;
}

@media (min-width: 48em) {
	.process-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64em) {
	.process-steps {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.process-step {
	gap: 0.75rem;
	padding-block-start: 1.5rem;
	border-block-start: 1px solid var(--wp--preset--color--border);
}

.step-icon {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 999px;
	background-color: color-mix(in srgb, var(--wp--preset--color--accent) 10%, transparent);
	color: var(--wp--preset--color--accent);
}

.step-icon svg {
	width: 1.125rem;
	height: 1.125rem;
}

/* --- 6/9/10. Divided row lists (writer benefits, trust points, FAQ) --- */

.row-list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-block: 1px solid var(--wp--preset--color--border);
}

.row-list > li {
	display: grid;
	gap: 0.5rem;
	padding-block: 1.75rem;
}

.row-list > li + li {
	border-block-start: 1px solid var(--wp--preset--color--border);
}

@media (min-width: 40em) {
	.row-list > li {
		grid-template-columns: 0.7fr 1.3fr;
		gap: 2rem;
		align-items: start;
	}
}

.row-list__title {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	line-height: var(--wp--custom--line-height--tight);
	letter-spacing: normal;
}

.row-list__text {
	margin: 0;
	color: var(--wp--preset--color--contrast-secondary);
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--body);
}

/* Trust rows carry a tick badge before the title. */
.row-list--checked > li {
	grid-template-columns: auto 1fr;
	gap: 0.75rem;
}

@media (min-width: 40em) {
	.row-list--checked > li {
		grid-template-columns: auto 0.65fr 1.3fr;
		gap: 1rem 1.5rem;
		align-items: center;
	}
}

.row-check {
	display: grid;
	place-items: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 999px;
	background-color: color-mix(in srgb, var(--wp--preset--color--accent) 12%, transparent);
	color: var(--wp--preset--color--accent);
}

.row-check svg {
	width: 0.875rem;
	height: 0.875rem;
}

/* --- 7. Author cards: coral initials, per the design --- */

.writer-card .avatar-initials {
	width: 4rem;
	height: 4rem;
	/* bg-accent-primary with white: #cf3442 at 4.97:1 rather than #e84f5b at 3.68:1. */
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--inverse-text);
	font-size: 1.5rem;
}

/* --- 8. About: dark statement card on the left, body text on the right --- */

.about {
	background-color: transparent;
	color: inherit;
}

.about .section__title {
	margin: 0;
	color: var(--wp--preset--color--inverse-text);
}

.about__statement {
	padding: 2rem;
	border-radius: var(--wp--custom--radius-card, 1.5rem);
	background-color: var(--wp--preset--color--inverse);
	color: var(--wp--preset--color--inverse-text);
}

@media (min-width: 40em) {
	.about__statement {
		padding: 3rem;
	}
}

@media (min-width: 64em) {
	.about__statement {
		padding: 4rem;
	}
}

.about__body .section__text {
	color: var(--wp--preset--color--contrast-secondary);
}

/* --- 9. Trust: teal panel flush inside the card --- */

.trust__grid {
	display: grid;
	overflow: hidden;
	border-radius: var(--wp--custom--radius-card, 1.5rem);
	border: 1px solid var(--wp--preset--color--border);
	background-color: var(--wp--preset--color--surface);
}

@media (min-width: 64em) {
	.trust__grid {
		grid-template-columns: 0.9fr 1.1fr;
	}
}

/* White on #0f5960 is 8.02:1. */
.trust__panel {
	padding: 2rem;
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--inverse-text);
}

@media (min-width: 40em) {
	.trust__panel {
		padding: 3rem;
	}
}

@media (min-width: 64em) {
	.trust__panel {
		padding: 3.5rem;
	}
}

.trust__panel .section__title,
.trust__panel .section__lede {
	color: var(--wp--preset--color--inverse-text);
}

.trust__panel .btn--secondary {
	border-color: rgb(255 255 255 / 55%);
	color: var(--wp--preset--color--inverse-text);
}

.trust__rows {
	padding: 2rem;
}

@media (min-width: 64em) {
	.trust__rows {
		padding: 2.5rem 3rem;
	}
}

.trust__rows .row-list {
	border-block-start: 0;
}

/* --- 10. FAQ: hairline rows, no plus/minus box --- */

.faq-list {
	border-block: 1px solid var(--wp--preset--color--border);
}

.faq-item {
	border-block-end: 0;
}

.faq-item + .faq-item {
	border-block-start: 1px solid var(--wp--preset--color--border);
}

.faq-item__question {
	padding-block: 1.5rem;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
}

.faq-item__question::after {
	content: "+";
	font-size: var(--wp--preset--font-size--large);
	color: var(--wp--preset--color--contrast-secondary);
}

.faq-item[open] .faq-item__question::after {
	content: "–";
}

/* --- 11. Closing CTA: coral card, centred, with an icon --- */

.closing-cta {
	background-color: transparent;
	color: inherit;
	padding-block: var(--wp--preset--spacing--60);
}

.closing-cta__card {
	padding: 3.5rem 1.5rem;
	border-radius: var(--wp--custom--radius-card, 1.5rem);
	/* #cf3442, not #e84f5b: white body text needs 4.5:1 and #e84f5b gives only 3.68:1. */
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--inverse-text);
	text-align: center;
}

.closing-cta__icon {
	display: inline-grid;
	place-items: center;
	margin-block-end: 1.5rem;
	color: var(--wp--preset--color--inverse-text);
}

.closing-cta__icon svg {
	width: 1.75rem;
	height: 1.75rem;
}

.closing-cta .section__title,
.closing-cta .section__lede {
	color: var(--wp--preset--color--inverse-text);
	margin-inline: auto;
}

/*
 * This heading is deliberately the largest type on the page: text-4xl rising to md:text-6xl
 * (2.25rem -> 3.75rem), with max-w-3xl.
 *
 * It was inheriting the generic section-title size, which tops out at 2.625rem — noticeably smaller
 * than the design and the reason this heading read as undersized.
 */
.closing-cta .section__title {
	max-width: 48rem;
	font-size: 2.25rem;
}

@media (min-width: 48em) {
	.closing-cta .section__title {
		font-size: 3.75rem;
	}
}

.closing-cta .section__lede {
	/* max-w-2xl = 42rem */
	max-width: 42rem;
}

.closing-cta .section__actions {
	justify-content: center;
}

/* On the coral card the primary button inverts: white pill, coral label. */
.closing-cta .btn--primary {
	background-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--accent);
}

.closing-cta .btn--ghost {
	color: var(--wp--preset--color--inverse-text);
}

/*
 * Full white, not 90%.
 *
 * At 90% opacity over #cf3442 this measured 4.30:1 and failed AA for body text; the coral background
 * leaves no headroom to soften the ink. Hierarchy here comes from size, not from a dimmer white.
 */
.closing-cta__reassurance {
	color: var(--wp--preset--color--inverse-text);
}

/* Focus rings on the coral and teal panels need the white variant. */
.closing-cta__card :where(a, button):focus-visible,
.trust__panel :where(a, button):focus-visible,
.about__statement :where(a, button):focus-visible,
.collection-card :where(a, button):focus-visible {
	outline-color: var(--wp--preset--color--inverse-text);
}

/* --- Shared: the design's ↗ on "read more" style links --- */

/*
 * The `/ ""` gives the generated content empty alternative text.
 *
 * Without it a screen reader announces "north east arrow" after every one of these links — eighteen
 * times on the homepage. The arrow is purely an affordance, so it should be silent.
 */
.link-arrow::after {
	content: "↗" / "";
	margin-inline-start: 0.25rem;
	font-size: 0.85em;
}