/*
 * Everyday Within — main stylesheet.
 *
 * Contents
 *   1.  Fonts
 *   2.  Design tokens
 *   3.  Base & reset
 *   4.  Utilities & accessibility
 *   5.  Layout containers
 *   6.  Buttons, pills, badges, arrow links
 *   7.  Header, navigation, drawer, search overlay
 *   8.  Hero grid
 *   9.  Cards & grids
 *   10. Homepage sections
 *   11. Books & Resources band
 *   12. Page heads, breadcrumbs, pagination
 *   13. Article (prose), author box, related, post nav
 *   14. Comments, widgets, forms
 *   15. Footer
 *   16. Responsive
 */

/* ==========================================================================
   1. Fonts — self-hosted, swap, with a graceful system fallback
   ========================================================================== */

@font-face {
	font-family: "Playfair Display";
	src: url("../fonts/playfair-display-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Playfair Display";
	src: url("../fonts/playfair-display-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-600.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   2. Design tokens
   ========================================================================== */

:root {
	/* Palette — overridden by the Customizer via an inline :root block. */
	--ew-primary: #1c3f5e;
	--ew-primary-rgb: 28, 63, 94;
	--ew-secondary: #2e6a96;
	--ew-secondary-rgb: 46, 106, 150;
	--ew-tint: #dce9f2;
	--ew-tint-rgb: 220, 233, 242;
	--ew-footer-bg: #14324a;
	--ew-footer-bg-rgb: 20, 50, 74;
	--ew-background: #f8f6f2;
	--ew-background-rgb: 248, 246, 242;
	--ew-surface: #ffffff;
	--ew-surface-rgb: 255, 255, 255;
	--ew-text: #2a2a2a;
	--ew-text-rgb: 42, 42, 42;
	--ew-muted: #6b7280;
	--ew-muted-rgb: 107, 114, 128;
	--ew-accent: #c4633d;
	--ew-accent-rgb: 196, 99, 61;

	/* Derived */
	--ew-border: rgba(var(--ew-primary-rgb), 0.12);
	--ew-pill-bg: rgba(var(--ew-primary-rgb), 0.85);
	--ew-band-bg: color-mix(in srgb, var(--ew-tint) 55%, var(--ew-background));

	/* Type */
	--ew-font-serif: "Playfair Display", "Lora", Georgia, "Times New Roman", serif;
	--ew-font-sans: "Inter", "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--ew-step--1: clamp(0.82rem, 0.79rem + 0.15vw, 0.9rem);
	--ew-step-0: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
	--ew-step-1: clamp(1.15rem, 1.09rem + 0.3vw, 1.3rem);
	--ew-step-2: clamp(1.35rem, 1.24rem + 0.55vw, 1.65rem);
	--ew-step-3: clamp(1.6rem, 1.4rem + 1vw, 2.15rem);
	--ew-step-4: clamp(1.95rem, 1.6rem + 1.7vw, 2.9rem);
	--ew-step-5: clamp(2.3rem, 1.75rem + 2.6vw, 3.6rem);

	/* Space */
	--ew-space-1: 0.35rem;
	--ew-space-2: 0.65rem;
	--ew-space-3: 1rem;
	--ew-space-4: 1.5rem;
	--ew-space-5: 2.25rem;
	--ew-space-6: 3.25rem;
	--ew-space-7: 4.75rem;

	/* Shape */
	--ew-radius-sm: 8px;
	--ew-radius: 12px;
	--ew-radius-lg: 20px;
	--ew-radius-pill: 999px;
	--ew-notch: 32px;

	--ew-shadow-sm: 0 1px 2px rgba(var(--ew-primary-rgb), 0.05), 0 2px 8px rgba(var(--ew-primary-rgb), 0.05);
	--ew-shadow: 0 2px 6px rgba(var(--ew-primary-rgb), 0.06), 0 12px 28px rgba(var(--ew-primary-rgb), 0.08);
	--ew-shadow-lg: 0 4px 10px rgba(var(--ew-primary-rgb), 0.07), 0 22px 48px rgba(var(--ew-primary-rgb), 0.1);

	--ew-container: 1200px;
	--ew-container-narrow: 760px;
	--ew-header-height: 88px;

	--ew-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ==========================================================================
   3. Base & reset
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--ew-header-height) + 16px);
}

body {
	margin: 0;
	background-color: var(--ew-background);
	color: var(--ew-text);
	font-family: var(--ew-font-sans);
	font-size: var(--ew-step-0);
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 var(--ew-space-3);
	font-family: var(--ew-font-serif);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--ew-primary);
	text-wrap: balance;
}

p {
	margin: 0 0 var(--ew-space-3);
}

a {
	color: var(--ew-secondary);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color 0.18s var(--ew-ease);
}

a:hover,
a:focus-visible {
	color: var(--ew-accent);
}

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

img {
	display: block;
}

ul,
ol {
	padding-left: 1.25em;
}

blockquote {
	margin: var(--ew-space-4) 0;
	padding: var(--ew-space-3) var(--ew-space-4);
	border-left: 3px solid var(--ew-tint);
	color: var(--ew-primary);
	font-family: var(--ew-font-serif);
	font-size: var(--ew-step-2);
	font-style: italic;
	line-height: 1.45;
}

code,
pre,
kbd {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
	font-size: 0.92em;
}

pre {
	overflow-x: auto;
	padding: var(--ew-space-3);
	border-radius: var(--ew-radius-sm);
	background: rgba(var(--ew-primary-rgb), 0.05);
}

hr {
	height: 1px;
	margin: var(--ew-space-5) 0;
	border: 0;
	background: var(--ew-border);
}

table {
	width: 100%;
	border-collapse: collapse;
}

th,
td {
	padding: 0.6em 0.8em;
	border-bottom: 1px solid var(--ew-border);
	text-align: left;
}

/* ==========================================================================
   4. Utilities & accessibility
   ========================================================================== */

.ew-screen-reader-text,
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.ew-skip-link {
	position: absolute;
	top: -100px;
	left: var(--ew-space-3);
	z-index: 999;
	padding: 0.85rem 1.4rem;
	border-radius: 0 0 var(--ew-radius) var(--ew-radius);
	background: var(--ew-primary);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	transition: top 0.2s var(--ew-ease);
}

.ew-skip-link:focus {
	top: 0;
	color: #fff;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--ew-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

.ew-image,
.ew-card__media img,
.ew-feature__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ew-image-placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background:
		radial-gradient(120% 120% at 15% 10%, rgba(var(--ew-tint-rgb), 1) 0%, rgba(var(--ew-secondary-rgb), 0.18) 100%);
}

.ew-empty {
	padding: var(--ew-space-5) 0;
	color: var(--ew-muted);
	font-size: var(--ew-step-1);
}

/* ==========================================================================
   5. Layout containers
   ========================================================================== */

.ew-site {
	display: flex;
	min-height: 100vh;
	flex-direction: column;
}

.ew-main {
	flex: 1 0 auto;
	padding-bottom: var(--ew-space-7);
}

.ew-container {
	width: 100%;
	max-width: var(--ew-container);
	margin-inline: auto;
	padding-inline: var(--ew-space-4);
}

.ew-container--narrow {
	max-width: var(--ew-container-narrow);
}

.ew-layout {
	display: grid;
	gap: var(--ew-space-6);
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}

.ew-layout__main {
	min-width: 0;
}

.ew-layout__aside {
	min-width: 0;
}

/* ==========================================================================
   6. Buttons, pills, badges, arrow links
   ========================================================================== */

.ew-btn {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	padding: 0.6rem 1.4rem;
	border: 0;
	border-radius: var(--ew-radius-pill);
	background: var(--ew-primary);
	color: #fff;
	font-family: var(--ew-font-sans);
	font-size: var(--ew-step--1);
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.18s var(--ew-ease), background-color 0.18s var(--ew-ease), box-shadow 0.18s var(--ew-ease);
}

.ew-btn:hover,
.ew-btn:focus-visible {
	color: #fff;
	box-shadow: var(--ew-shadow-sm);
	transform: translateY(-1px);
}

.ew-btn--accent {
	background: var(--ew-accent);
}

.ew-btn--accent:hover,
.ew-btn--accent:focus-visible {
	background: color-mix(in srgb, var(--ew-accent) 88%, #000);
}

.ew-iconbtn {
	display: inline-flex;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid transparent;
	border-radius: var(--ew-radius-pill);
	background: transparent;
	color: var(--ew-primary);
	cursor: pointer;
	transition: background-color 0.18s var(--ew-ease), color 0.18s var(--ew-ease);
}

.ew-iconbtn:hover,
.ew-iconbtn:focus-visible {
	background: var(--ew-tint);
	color: var(--ew-primary);
}

.ew-icon {
	width: 20px;
	height: 20px;
	flex: none;
}

.ew-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.32rem 0.85rem;
	border-radius: var(--ew-radius-pill);
	background: var(--ew-pill-bg);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	line-height: 1.6;
	text-transform: uppercase;
	text-decoration: none;
	backdrop-filter: blur(6px);
}

a.ew-pill:hover,
a.ew-pill:focus-visible {
	background: var(--ew-primary);
	color: #fff;
}

.ew-pill--overlay {
	position: absolute;
	top: var(--ew-space-3);
	left: var(--ew-space-3);
	z-index: 2;
}

.ew-pill--featured {
	background: rgba(var(--ew-accent-rgb), 0.92);
}

.ew-eyebrow {
	display: inline-block;
	margin-bottom: var(--ew-space-2);
	color: var(--ew-secondary);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-decoration: none;
	text-transform: uppercase;
}

.ew-badge {
	display: inline-flex;
	width: 48px;
	height: 48px;
	flex: none;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--ew-tint);
	color: var(--ew-primary);
}

.ew-badge .ew-icon {
	width: 24px;
	height: 24px;
}

.ew-badge--lg {
	width: 64px;
	height: 64px;
	margin-bottom: var(--ew-space-3);
}

.ew-badge--lg .ew-icon {
	width: 30px;
	height: 30px;
}

.ew-link-arrow {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	gap: 0.45em;
	color: var(--ew-secondary);
	font-size: var(--ew-step--1);
	font-weight: 600;
	text-decoration: none;
}

.ew-link-arrow .ew-icon {
	width: 17px;
	height: 17px;
	transition: transform 0.2s var(--ew-ease);
}

.ew-link-arrow:hover .ew-icon,
.ew-link-arrow:focus-visible .ew-icon {
	transform: translateX(4px);
}

.ew-link-arrow--strong {
	color: var(--ew-primary);
	font-size: var(--ew-step-0);
}

.ew-taglist {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ew-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ew-tag {
	display: inline-flex;
	min-height: 36px;
	align-items: center;
	padding: 0.3rem 0.85rem;
	border: 1px solid var(--ew-border);
	border-radius: var(--ew-radius-pill);
	background: var(--ew-surface);
	color: var(--ew-primary);
	font-size: var(--ew-step--1);
	text-decoration: none;
}

.ew-tag:hover,
.ew-tag:focus-visible {
	border-color: var(--ew-secondary);
	background: var(--ew-tint);
	color: var(--ew-primary);
}

/* ==========================================================================
   7. Header, navigation, drawer, search overlay
   ========================================================================== */

.ew-header {
	position: sticky;
	top: 0;
	z-index: 100;
	border-bottom: 1px solid transparent;
	background: rgba(var(--ew-background-rgb), 0.92);
	backdrop-filter: blur(12px);
	transition: box-shadow 0.2s var(--ew-ease), border-color 0.2s var(--ew-ease);
}

.ew-header.is-stuck {
	border-bottom-color: var(--ew-border);
	box-shadow: 0 4px 20px rgba(var(--ew-primary-rgb), 0.06);
}

.ew-header__inner {
	display: flex;
	min-height: var(--ew-header-height);
	align-items: center;
	justify-content: space-between;
	gap: var(--ew-space-4);
	padding-block: var(--ew-space-2);
}

.ew-brand {
	display: flex;
	align-items: center;
	gap: var(--ew-space-3);
	min-width: 0;
}

.ew-brand__logo .custom-logo-link,
.ew-brand__mark {
	display: inline-flex;
	width: 46px;
	height: 46px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--ew-tint);
	color: var(--ew-primary);
	text-decoration: none;
}

.ew-brand__mark .ew-icon {
	width: 26px;
	height: 26px;
}

.ew-brand__logo .custom-logo {
	width: auto;
	max-height: 46px;
	border-radius: 50%;
}

.ew-brand__name {
	margin: 0;
	font-family: var(--ew-font-serif);
	font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.015em;
}

.ew-brand__name a {
	color: var(--ew-primary);
	text-decoration: none;
}

.ew-brand__tagline {
	margin: 2px 0 0;
	color: var(--ew-muted);
	font-size: 0.78rem;
	line-height: 1.35;
}

.ew-brand__tagline-line {
	display: block;
}

.ew-header__actions {
	display: flex;
	align-items: center;
	gap: var(--ew-space-2);
}

.ew-nav__list {
	display: flex;
	align-items: center;
	gap: var(--ew-space-1);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ew-nav__list li {
	position: relative;
}

.ew-nav__list a {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	padding: 0 0.85rem;
	border-radius: var(--ew-radius-pill);
	color: var(--ew-primary);
	font-size: var(--ew-step--1);
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.18s var(--ew-ease), color 0.18s var(--ew-ease);
}

.ew-nav__list a:hover,
.ew-nav__list a:focus-visible,
.ew-nav__list .current-menu-item > a,
.ew-nav__list .current-cat > a {
	background: var(--ew-tint);
	color: var(--ew-primary);
}

/* Second level */
.ew-nav__list .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 20;
	min-width: 210px;
	margin: 0;
	padding: var(--ew-space-1);
	border: 1px solid var(--ew-border);
	border-radius: var(--ew-radius);
	background: var(--ew-surface);
	box-shadow: var(--ew-shadow);
	list-style: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity 0.18s var(--ew-ease), transform 0.18s var(--ew-ease), visibility 0.18s;
}

.ew-nav__list li:hover > .sub-menu,
.ew-nav__list li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.ew-nav__list .sub-menu a {
	width: 100%;
	border-radius: var(--ew-radius-sm);
}

.ew-menu-toggle {
	display: none;
}

.ew-menu-toggle__close,
.ew-menu-toggle[aria-expanded="true"] .ew-menu-toggle__open {
	display: none;
}

.ew-menu-toggle[aria-expanded="true"] .ew-menu-toggle__close {
	display: inline-flex;
}

/* Drawer */
.ew-drawer {
	border-top: 1px solid var(--ew-border);
	background: var(--ew-background);
}

.ew-drawer[hidden] {
	display: none;
}

.ew-drawer__nav {
	padding-block: var(--ew-space-3) var(--ew-space-4);
}

.ew-drawer__list {
	margin: 0 0 var(--ew-space-3);
	padding: 0;
	list-style: none;
}

.ew-drawer__list li + li {
	border-top: 1px solid var(--ew-border);
}

.ew-drawer__list a {
	display: flex;
	min-height: 52px;
	align-items: center;
	color: var(--ew-primary);
	font-size: var(--ew-step-1);
	font-family: var(--ew-font-serif);
	text-decoration: none;
}

.ew-drawer__list .sub-menu {
	margin: 0 0 var(--ew-space-2) var(--ew-space-3);
	padding: 0;
	list-style: none;
}

.ew-drawer__list .sub-menu a {
	min-height: 44px;
	font-family: var(--ew-font-sans);
	font-size: var(--ew-step-0);
}

/* Search overlay */
.ew-search-overlay {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: grid;
	place-items: start center;
	padding: clamp(4rem, 14vh, 9rem) var(--ew-space-4) var(--ew-space-4);
	background: rgba(var(--ew-primary-rgb), 0.55);
	backdrop-filter: blur(8px);
	animation: ew-fade 0.2s var(--ew-ease);
}

.ew-search-overlay[hidden] {
	display: none;
}

.ew-search-overlay__inner {
	position: relative;
	width: min(680px, 100%);
	padding: var(--ew-space-5);
	border-radius: var(--ew-radius-lg);
	background: var(--ew-surface);
	box-shadow: var(--ew-shadow-lg);
}

.ew-search-overlay__close {
	position: absolute;
	top: var(--ew-space-2);
	right: var(--ew-space-2);
}

.ew-search-overlay__title {
	margin: 0 0 var(--ew-space-3);
	font-family: var(--ew-font-serif);
	font-size: var(--ew-step-2);
	color: var(--ew-primary);
}

@keyframes ew-fade {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

body.ew-scroll-locked {
	overflow: hidden;
}

/* ==========================================================================
   8. Hero grid
   ========================================================================== */

.ew-hero {
	padding-block: var(--ew-space-5) var(--ew-space-6);
}

.ew-hero__grid {
	display: grid;
	gap: var(--ew-space-4);
	grid-template-columns: minmax(0, 1fr);
}

.ew-hero__side {
	display: grid;
	gap: var(--ew-space-4);
	align-content: start;
}

.ew-feature__frame {
	position: relative;
	display: flex;
	flex-direction: column;
}

.ew-feature__media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 3 / 2;
	border-radius: var(--ew-radius-lg);
	background: var(--ew-tint);
}

.ew-feature__card {
	position: relative;
	z-index: 1;
	width: calc(100% - var(--ew-space-5));
	margin: calc(var(--ew-space-5) * -1) auto 0;
	padding: var(--ew-space-4) var(--ew-space-5) var(--ew-space-4);
	border-radius: var(--ew-radius);
	background: var(--ew-surface);
	box-shadow: var(--ew-shadow);
}

.ew-feature__title {
	margin: 0 0 var(--ew-space-2);
	font-size: var(--ew-step-4);
	line-height: 1.14;
}

.ew-feature__title a {
	color: var(--ew-primary);
	text-decoration: none;
}

.ew-feature__title a:hover,
.ew-feature__title a:focus-visible {
	color: var(--ew-secondary);
	text-decoration: underline;
}

.ew-feature__excerpt {
	margin: 0 0 var(--ew-space-2);
	color: var(--ew-muted);
	font-size: var(--ew-step-0);
}

/* ==========================================================================
   9. Cards & grids
   ========================================================================== */

.ew-grid {
	display: grid;
	gap: var(--ew-space-4);
	grid-template-columns: minmax(0, 1fr);
}

.ew-card {
	min-width: 0;
}

.ew-card__frame {
	position: relative;
	display: flex;
	height: 100%;
	flex-direction: column;
	overflow: visible;
	border-radius: var(--ew-radius);
	background: var(--ew-surface);
	box-shadow: var(--ew-shadow-sm);
	transition: transform 0.22s var(--ew-ease), box-shadow 0.22s var(--ew-ease);
}

.ew-card:hover .ew-card__frame,
.ew-card:focus-within .ew-card__frame {
	box-shadow: var(--ew-shadow);
	transform: translateY(-3px);
}

.ew-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 11;
	border-radius: var(--ew-radius) var(--ew-radius) 0 0;
	background: var(--ew-tint);
}

.ew-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	padding: var(--ew-space-4);
}

.ew-card__title {
	margin: 0 0 var(--ew-space-2);
	font-size: var(--ew-step-2);
	line-height: 1.24;
}

.ew-card__title a {
	color: var(--ew-primary);
	text-decoration: none;
}

.ew-card__title a:hover,
.ew-card__title a:focus-visible {
	color: var(--ew-secondary);
	text-decoration: underline;
}

.ew-card__excerpt {
	margin: 0 0 var(--ew-space-2);
	color: var(--ew-muted);
	font-size: var(--ew-step--1);
	line-height: 1.65;
}

.ew-card__more {
	margin-top: auto;
}

/* Side cards in the hero: caption overlaps the image with one notched corner. */
.ew-card--side .ew-card__frame {
	background: transparent;
	box-shadow: none;
}

.ew-card--side .ew-card__media {
	aspect-ratio: 16 / 9;
	border-radius: var(--ew-radius-lg);
}

.ew-card--side .ew-card__body {
	position: relative;
	z-index: 1;
	width: calc(100% - var(--ew-space-4));
	margin: calc(var(--ew-space-4) * -1) 0 0 var(--ew-space-4);
	padding: var(--ew-space-3) var(--ew-space-4);
	background: var(--ew-surface);
	box-shadow: var(--ew-shadow);
}

.ew-card__body--notched {
	border-radius: var(--ew-radius) var(--ew-notch) var(--ew-radius) var(--ew-radius);
}

.ew-card--side .ew-card__title {
	font-size: var(--ew-step-1);
}

.ew-card--side:hover .ew-card__frame,
.ew-card--side:focus-within .ew-card__frame {
	transform: none;
}

.ew-card--side:hover .ew-card__body,
.ew-card--side:focus-within .ew-card__body {
	box-shadow: var(--ew-shadow-lg);
}

/* Compact cards (related posts) */
.ew-card--compact .ew-card__media {
	aspect-ratio: 3 / 2;
}

.ew-card--compact .ew-card__body {
	padding: var(--ew-space-3);
}

.ew-card--compact .ew-card__title {
	font-size: var(--ew-step-1);
}

/* ==========================================================================
   10. Homepage sections
   ========================================================================== */

.ew-section {
	padding-block: var(--ew-space-5);
}

.ew-section--page {
	padding-block: var(--ew-space-6);
}

.ew-section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ew-space-2) var(--ew-space-4);
	margin-bottom: var(--ew-space-4);
}

.ew-section__heading {
	display: flex;
	align-items: center;
	gap: var(--ew-space-3);
	min-width: 0;
}

.ew-section__title {
	margin: 0;
	font-size: var(--ew-step-3);
}

.ew-section__link {
	margin-left: auto;
}

/* ==========================================================================
   11. Books & Resources band
   ========================================================================== */

.ew-books {
	margin-block: var(--ew-space-6);
	padding-block: var(--ew-space-6);
	background: var(--ew-tint);
	background: linear-gradient(180deg, rgba(var(--ew-tint-rgb), 0.55) 0%, rgba(var(--ew-tint-rgb), 0.95) 100%);
}

.ew-books__inner {
	display: grid;
	gap: var(--ew-space-5);
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
}

.ew-books__title {
	margin: var(--ew-space-3) 0 var(--ew-space-2);
	font-size: var(--ew-step-3);
}

.ew-books__text {
	max-width: 46ch;
	color: color-mix(in srgb, var(--ew-primary) 78%, var(--ew-muted));
}

.ew-books__intro .ew-badge {
	background: var(--ew-surface);
}

.ew-books__shelf {
	display: grid;
	gap: var(--ew-space-3);
	grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.ew-books__item {
	min-width: 0;
}

.ew-books__link {
	display: block;
	text-decoration: none;
}

.ew-books__cover {
	width: 100%;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	border-radius: var(--ew-radius-sm);
	box-shadow: var(--ew-shadow);
	transition: transform 0.22s var(--ew-ease), box-shadow 0.22s var(--ew-ease);
}

.ew-books__link:hover .ew-books__cover,
.ew-books__link:focus-visible .ew-books__cover {
	box-shadow: var(--ew-shadow-lg);
	transform: translateY(-4px);
}

.ew-books__label {
	display: block;
	margin-top: var(--ew-space-2);
	color: var(--ew-primary);
	font-size: 0.78rem;
	line-height: 1.4;
}

.ew-books__empty {
	padding: var(--ew-space-4);
	border: 1px dashed rgba(var(--ew-primary-rgb), 0.3);
	border-radius: var(--ew-radius);
	color: var(--ew-primary);
	font-size: var(--ew-step--1);
}

.ew-books__empty p {
	margin: 0;
}

/* ==========================================================================
   12. Page heads, breadcrumbs, pagination
   ========================================================================== */

.ew-breadcrumbs {
	padding-block: var(--ew-space-4) 0;
	font-size: var(--ew-step--1);
}

.ew-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ew-breadcrumbs__item {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	color: var(--ew-muted);
}

.ew-breadcrumbs a {
	color: var(--ew-muted);
	text-decoration: none;
}

.ew-breadcrumbs a:hover,
.ew-breadcrumbs a:focus-visible {
	color: var(--ew-secondary);
	text-decoration: underline;
}

.ew-breadcrumbs [aria-current="page"] {
	color: var(--ew-primary);
	font-weight: 500;
}

.ew-breadcrumbs__sep {
	color: rgba(var(--ew-muted-rgb), 0.6);
}

.ew-pagehead {
	max-width: 46rem;
	padding-block: var(--ew-space-5) var(--ew-space-4);
}

.ew-pagehead--category,
.ew-pagehead--404 {
	text-align: center;
	margin-inline: auto;
}

.ew-pagehead__eyebrow {
	margin: 0 0 var(--ew-space-1);
	color: var(--ew-secondary);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

.ew-pagehead__title {
	margin: 0 0 var(--ew-space-2);
	font-size: var(--ew-step-4);
}

.ew-pagehead__intro {
	color: var(--ew-muted);
	font-size: var(--ew-step-1);
}

.ew-pagehead__search {
	margin-top: var(--ew-space-3);
	max-width: 480px;
}

.ew-pagehead--404 .ew-pagehead__search,
.ew-pagehead--category .ew-pagehead__search {
	margin-inline: auto;
}

.ew-pagehead__avatar {
	border-radius: 50%;
}

.ew-pagination {
	margin-top: var(--ew-space-5);
}

.ew-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--ew-space-2);
}

.ew-pagination .page-numbers {
	display: inline-flex;
	min-width: 44px;
	min-height: 44px;
	align-items: center;
	justify-content: center;
	padding: 0 0.75rem;
	border: 1px solid var(--ew-border);
	border-radius: var(--ew-radius-pill);
	background: var(--ew-surface);
	color: var(--ew-primary);
	font-size: var(--ew-step--1);
	font-weight: 500;
	text-decoration: none;
}

.ew-pagination .page-numbers:hover,
.ew-pagination .page-numbers:focus-visible {
	background: var(--ew-tint);
}

.ew-pagination .page-numbers.current {
	border-color: var(--ew-primary);
	background: var(--ew-primary);
	color: #fff;
}

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

/* ==========================================================================
   13. Article, author box, related, post nav
   ========================================================================== */

.ew-entry {
	max-width: var(--ew-container-narrow);
	margin-inline: auto;
	padding-block: var(--ew-space-4) var(--ew-space-5);
}

.ew-entry__header {
	margin-bottom: var(--ew-space-4);
}

.ew-entry__header .ew-pill {
	margin-bottom: var(--ew-space-3);
}

.ew-entry__title {
	margin: 0 0 var(--ew-space-3);
	font-size: var(--ew-step-5);
	line-height: 1.1;
}

.ew-entry__standfirst {
	color: var(--ew-muted);
	font-size: var(--ew-step-2);
	font-family: var(--ew-font-serif);
	line-height: 1.45;
}

.ew-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em;
	margin: 0;
	color: var(--ew-muted);
	font-size: var(--ew-step--1);
}

.ew-meta__author {
	color: var(--ew-primary);
	font-weight: 600;
}

.ew-entry__figure {
	margin: 0 0 var(--ew-space-5);
}

.ew-entry__figure img {
	width: 100%;
	border-radius: var(--ew-radius-lg);
	box-shadow: var(--ew-shadow-sm);
}

.ew-entry__caption,
.wp-element-caption,
figcaption {
	margin-top: var(--ew-space-2);
	color: var(--ew-muted);
	font-size: var(--ew-step--1);
	text-align: center;
}

/* Prose */
.ew-prose {
	font-size: clamp(1.05rem, 1rem + 0.25vw, 1.15rem);
	line-height: 1.75;
}

.ew-prose > * + * {
	margin-top: var(--ew-space-3);
}

.ew-prose h2 {
	margin-top: var(--ew-space-5);
	font-size: var(--ew-step-3);
}

.ew-prose h3 {
	margin-top: var(--ew-space-4);
	font-size: var(--ew-step-2);
}

.ew-prose h4 {
	margin-top: var(--ew-space-4);
	font-size: var(--ew-step-1);
}

.ew-prose img,
.ew-prose figure img {
	border-radius: var(--ew-radius);
}

.ew-prose a {
	text-decoration: underline;
}

.ew-prose ul,
.ew-prose ol {
	padding-left: 1.35em;
}

.ew-prose li + li {
	margin-top: 0.35em;
}

/* Wide / full alignment inside the narrow column */
.ew-prose .alignwide {
	width: min(100vw - 2 * var(--ew-space-4), 1040px);
	max-width: none;
	margin-inline: calc(50% - min(50vw - var(--ew-space-4), 520px));
}

.ew-prose .alignfull {
	width: calc(100vw - (100vw - 100%));
	max-width: none;
	margin-inline: calc(50% - 50vw + (100vw - 100%) / 2);
}

.ew-prose .alignleft {
	float: left;
	margin: 0 var(--ew-space-4) var(--ew-space-3) 0;
}

.ew-prose .alignright {
	float: right;
	margin: 0 0 var(--ew-space-3) var(--ew-space-4);
}

.ew-prose .aligncenter {
	margin-inline: auto;
}

.ew-page-links {
	margin-top: var(--ew-space-4);
	display: flex;
	flex-wrap: wrap;
	gap: var(--ew-space-2);
	align-items: center;
	font-size: var(--ew-step--1);
}

.ew-entry__tags {
	margin-top: var(--ew-space-5);
}

.ew-authorbox {
	display: flex;
	gap: var(--ew-space-4);
	margin-top: var(--ew-space-5);
	padding: var(--ew-space-4);
	border-radius: var(--ew-radius);
	background: var(--ew-surface);
	box-shadow: var(--ew-shadow-sm);
}

.ew-authorbox__img {
	border-radius: 50%;
}

.ew-authorbox__eyebrow {
	margin: 0;
	color: var(--ew-secondary);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.11em;
	text-transform: uppercase;
}

.ew-authorbox__name {
	margin: 0 0 var(--ew-space-1);
	font-size: var(--ew-step-1);
}

.ew-authorbox__name a {
	color: var(--ew-primary);
	text-decoration: none;
}

.ew-authorbox__bio {
	margin: 0;
	color: var(--ew-muted);
	font-size: var(--ew-step--1);
}

.ew-postnav {
	display: grid;
	gap: var(--ew-space-3);
	max-width: var(--ew-container-narrow);
	margin: var(--ew-space-5) auto 0;
	grid-template-columns: minmax(0, 1fr);
}

.ew-postnav__item {
	display: flex;
	min-height: 44px;
	flex-direction: column;
	justify-content: center;
	padding: var(--ew-space-3) var(--ew-space-4);
	border: 1px solid var(--ew-border);
	border-radius: var(--ew-radius);
	background: var(--ew-surface);
	text-decoration: none;
	transition: border-color 0.18s var(--ew-ease), box-shadow 0.18s var(--ew-ease);
}

.ew-postnav__item:hover,
.ew-postnav__item:focus-visible {
	border-color: var(--ew-secondary);
	box-shadow: var(--ew-shadow-sm);
}

.ew-postnav__item--next {
	text-align: right;
}

.ew-postnav__label {
	color: var(--ew-muted);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ew-postnav__title {
	color: var(--ew-primary);
	font-family: var(--ew-font-serif);
	font-size: var(--ew-step-1);
	line-height: 1.3;
}

.ew-related {
	margin-top: var(--ew-space-6);
}

.ew-related__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--ew-space-2);
	margin-bottom: var(--ew-space-4);
}

.ew-related__title {
	margin: 0;
	font-size: var(--ew-step-3);
}

/* ==========================================================================
   14. Comments, widgets, forms
   ========================================================================== */

.ew-comments {
	max-width: var(--ew-container-narrow);
	margin: var(--ew-space-6) auto 0;
}

.ew-comments__title {
	font-size: var(--ew-step-3);
}

.ew-comments__list,
.ew-comments__list .children {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ew-comments__list .children {
	margin-left: var(--ew-space-4);
	padding-left: var(--ew-space-4);
	border-left: 2px solid var(--ew-tint);
}

.ew-comments__list .comment,
.ew-comments__list .pingback {
	padding: var(--ew-space-4) 0;
	border-bottom: 1px solid var(--ew-border);
}

.ew-comments__list .comment-author {
	display: flex;
	align-items: center;
	gap: var(--ew-space-2);
	font-weight: 600;
}

.ew-comments__list .comment-author img {
	border-radius: 50%;
}

.ew-comments__list .comment-metadata {
	color: var(--ew-muted);
	font-size: var(--ew-step--1);
}

.ew-comments__list .comment-metadata a {
	color: var(--ew-muted);
}

.ew-comments__notes {
	color: var(--ew-muted);
	font-size: var(--ew-step--1);
}

.ew-comments__closed {
	color: var(--ew-muted);
	font-style: italic;
}

/* Forms */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="password"],
input[type="number"],
textarea,
select {
	width: 100%;
	min-height: 44px;
	padding: 0.65rem 1rem;
	border: 1px solid var(--ew-border);
	border-radius: var(--ew-radius-sm);
	background: var(--ew-surface);
	color: var(--ew-text);
	font-family: inherit;
	font-size: var(--ew-step-0);
	transition: border-color 0.18s var(--ew-ease), box-shadow 0.18s var(--ew-ease);
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--ew-secondary);
	box-shadow: 0 0 0 3px rgba(var(--ew-secondary-rgb), 0.18);
	outline: none;
}

textarea {
	min-height: 140px;
	resize: vertical;
}

label {
	display: block;
	margin-bottom: var(--ew-space-1);
	font-size: var(--ew-step--1);
	font-weight: 500;
}

.comment-form .submit,
input[type="submit"],
button[type="submit"]:not(.ew-searchform__submit):not(.ew-iconbtn) {
	display: inline-flex;
	min-height: 44px;
	align-items: center;
	justify-content: center;
	padding: 0.6rem 1.4rem;
	border: 0;
	border-radius: var(--ew-radius-pill);
	background: var(--ew-accent);
	color: #fff;
	font-family: var(--ew-font-sans);
	font-size: var(--ew-step--1);
	font-weight: 600;
	cursor: pointer;
}

.ew-searchform {
	position: relative;
	display: flex;
	align-items: center;
}

.ew-searchform__input {
	padding-right: 52px;
	border-radius: var(--ew-radius-pill);
}

.ew-searchform__submit {
	position: absolute;
	right: 4px;
	display: inline-flex;
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--ew-primary);
	color: #fff;
	cursor: pointer;
}

.ew-searchform__submit:hover,
.ew-searchform__submit:focus-visible {
	background: var(--ew-accent);
}

/* Sidebar widgets */
.ew-sidebar {
	display: grid;
	gap: var(--ew-space-4);
}

.widget {
	padding: var(--ew-space-4);
	border-radius: var(--ew-radius);
	background: var(--ew-surface);
	box-shadow: var(--ew-shadow-sm);
}

.widget__title {
	margin: 0 0 var(--ew-space-3);
	font-size: var(--ew-step-1);
}

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

.widget li + li {
	margin-top: var(--ew-space-1);
	padding-top: var(--ew-space-1);
	border-top: 1px solid var(--ew-border);
}

.widget a {
	display: inline-flex;
	min-height: 36px;
	align-items: center;
	color: var(--ew-primary);
	font-size: var(--ew-step--1);
	text-decoration: none;
}

.widget a:hover,
.widget a:focus-visible {
	color: var(--ew-accent);
	text-decoration: underline;
}

/* ==========================================================================
   15. Footer
   ========================================================================== */

.ew-footer {
	flex: none;
	padding-block: var(--ew-space-6) var(--ew-space-4);
	background: var(--ew-footer-bg);
	color: rgba(255, 255, 255, 0.78);
	font-size: var(--ew-step--1);
}

.ew-footer__inner {
	display: grid;
	gap: var(--ew-space-5);
	grid-template-columns: minmax(0, 1fr);
}

.ew-footer h2,
.ew-footer h3 {
	color: #fff;
}

.ew-footer a {
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
}

.ew-footer a:hover,
.ew-footer a:focus-visible {
	color: #fff;
	text-decoration: underline;
}

.ew-footer__identity {
	display: flex;
	align-items: center;
	gap: var(--ew-space-2);
}

.ew-footer__mark {
	display: inline-flex;
	width: 40px;
	height: 40px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
}

.ew-footer__name {
	color: #fff;
	font-family: var(--ew-font-serif);
	font-size: var(--ew-step-2);
	font-weight: 700;
}

.ew-footer__tagline {
	margin: var(--ew-space-2) 0 0;
	color: rgba(255, 255, 255, 0.62);
	font-family: var(--ew-font-serif);
	font-size: var(--ew-step-0);
	font-style: italic;
}

.ew-footer__mission {
	max-width: 42ch;
	margin-top: var(--ew-space-3);
	line-height: 1.7;
}

.ew-social {
	display: flex;
	gap: var(--ew-space-2);
	margin: var(--ew-space-3) 0 0;
	padding: 0;
	list-style: none;
}

.ew-social__link {
	display: inline-flex;
	width: 44px;
	height: 44px;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 50%;
	color: #fff;
	transition: background-color 0.18s var(--ew-ease), border-color 0.18s var(--ew-ease);
}

.ew-social__link:hover,
.ew-social__link:focus-visible {
	border-color: transparent;
	background: var(--ew-accent);
}

.ew-footer__columns {
	display: grid;
	gap: var(--ew-space-4);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ew-footer__column-title {
	margin: 0 0 var(--ew-space-2);
	font-family: var(--ew-font-sans);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

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

.ew-footer__list a {
	display: flex;
	min-height: 36px;
	align-items: center;
}

.ew-footer__newsletter-text {
	max-width: 34ch;
	color: rgba(255, 255, 255, 0.66);
}

.ew-newsletter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ew-space-2);
	margin-top: var(--ew-space-3);
}

.ew-newsletter__input {
	flex: 1 1 190px;
	min-width: 0;
	border-color: rgba(255, 255, 255, 0.2);
	background: rgba(255, 255, 255, 0.07);
	border-radius: var(--ew-radius-pill);
	color: #fff;
}

.ew-newsletter__input::placeholder {
	color: rgba(255, 255, 255, 0.45);
}

.ew-newsletter__input:focus {
	border-color: rgba(255, 255, 255, 0.5);
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.12);
}

.ew-newsletter__submit {
	flex: 0 0 auto;
}

.ew-footer__newsletter-note {
	margin-top: var(--ew-space-2);
	color: rgba(255, 255, 255, 0.45);
	font-size: 0.76rem;
}

.ew-footer__bottom {
	margin-top: var(--ew-space-5);
	padding-top: var(--ew-space-3);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.ew-footer__copyright {
	margin: 0;
	color: rgba(255, 255, 255, 0.55);
	font-size: 0.8rem;
}

/* ==========================================================================
   16. Responsive
   ========================================================================== */

@media (min-width: 600px) {
	.ew-grid--2,
	.ew-grid--3,
	.ew-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ew-postnav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ew-books__inner {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (min-width: 782px) {
	.ew-footer__inner {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr);
	}

	.ew-footer__newsletter {
		grid-column: 1 / -1;
		padding-top: var(--ew-space-4);
		border-top: 1px solid rgba(255, 255, 255, 0.12);
	}

	.ew-books__inner {
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
	}
}

@media (min-width: 900px) {
	:root {
		--ew-header-height: 96px;
	}

	.ew-hero__grid {
		grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
		gap: var(--ew-space-5);
	}

	.ew-grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ew-grid--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	body:not(.ew-no-sidebar) .ew-layout {
		grid-template-columns: minmax(0, 1fr) 300px;
	}

	.ew-footer__columns {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.ew-footer__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 0.9fr);
	}

	.ew-footer__newsletter {
		grid-column: auto;
		padding-top: 0;
		border-top: 0;
	}
}

/* Below the nav breakpoint: hide the inline nav, show the hamburger. */
@media (max-width: 899px) {
	.ew-nav {
		display: none;
	}

	.ew-menu-toggle {
		display: inline-flex;
	}

	.ew-feature__title {
		font-size: var(--ew-step-3);
	}

	.ew-feature__card {
		width: calc(100% - var(--ew-space-4));
		padding: var(--ew-space-4);
	}
}

@media (max-width: 599px) {
	.ew-brand__tagline {
		display: none;
	}

	.ew-authorbox {
		flex-direction: column;
	}

	.ew-books__shelf {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ew-postnav__item--next {
		text-align: left;
	}
}

/* Motion & contrast preferences */
@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;
		scroll-behavior: auto !important;
	}
}

@media print {
	.ew-header,
	.ew-footer,
	.ew-related,
	.ew-postnav,
	.ew-comments,
	.ew-search-overlay,
	.ew-drawer {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
	}
}

/* Block editor palette classes */
.has-ew-primary-color { color: var(--ew-primary); }
.has-ew-secondary-color { color: var(--ew-secondary); }
.has-ew-tint-color { color: var(--ew-tint); }
.has-ew-accent-color { color: var(--ew-accent); }
.has-ew-footer-color { color: var(--ew-footer-bg); }
.has-ew-background-color { color: var(--ew-background); }
.has-ew-surface-color { color: var(--ew-surface); }
.has-ew-text-color { color: var(--ew-text); }
.has-ew-muted-color { color: var(--ew-muted); }

.has-ew-primary-background-color { background-color: var(--ew-primary); }
.has-ew-secondary-background-color { background-color: var(--ew-secondary); }
.has-ew-tint-background-color { background-color: var(--ew-tint); }
.has-ew-accent-background-color { background-color: var(--ew-accent); }
.has-ew-footer-background-color { background-color: var(--ew-footer-bg); }
.has-ew-background-background-color { background-color: var(--ew-background); }
.has-ew-surface-background-color { background-color: var(--ew-surface); }
.has-ew-text-background-color { background-color: var(--ew-text); }
.has-ew-muted-background-color { background-color: var(--ew-muted); }