/* ==========================================================================
   Easy Cooking Ways — design system
   Loaded after kadence-global, so cascade order does the work wherever it can.
   Where Kadence uses a 0,1,1 selector (.entry-content h2) we match it with two
   classes rather than reaching for !important.
   ========================================================================== */

:root {
	/* Grounds */
	--ecw-ground: #FBF8F3;
	--ecw-surface: #FFFFFF;
	--ecw-tint: #F4EFE6;
	--ecw-tint-warm: #FBEFE6;
	--ecw-band-dark: #384038;

	/* Lines */
	--ecw-line: #E6DFD3;
	--ecw-line-strong: #D6CCB8;

	/* Ink */
	--ecw-ink: #211D1A;
	--ecw-ink-soft: #4A423B;
	--ecw-ink-muted: #6B625A;
	--ecw-ink-invert: #FBF8F3;

	/* Brand. #C1561D is the logo value and measures 4.29:1 on --ecw-ground,
	   BELOW the 4.5 AA floor — so it never carries text at body size. It is
	   used for rules, icon fills, the focus ring and display type >= 24px
	   (which only has to clear 3:1). Every text-sized terracotta is -700
	   (7.01:1 on ground); every filled button is -600 (5.78:1 against white). */
	--ecw-terracotta: #C1561D;
	--ecw-terracotta-600: #A8491A;
	--ecw-terracotta-700: #8E3D14;

	--ecw-sage: #637363;
	--ecw-sage-deep: #495449;

	/* Decorative on light grounds — 1.78:1, never a text colour there.
	   On --ecw-band-dark it reaches 6.00:1 and may carry small text. */
	--ecw-tan: #CCC1A7;

	/* Space */
	--ecw-gutter: clamp(16px, 4vw, 32px);
	--ecw-section: clamp(56px, 8vw, 96px);
	--ecw-stack-sm: 12px;
	--ecw-stack-md: 24px;
	--ecw-stack-lg: 40px;

	/* Shape */
	--ecw-r-sm: 4px;
	--ecw-r-md: 8px;

	--ecw-wrap: 1200px;
	--ecw-measure: 680px;

	--ecw-serif: "Lora", "Iowan Old Style", Georgia, serif;
	--ecw-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

body {
	background: var(--ecw-ground);
	color: var(--ecw-ink);
	font-family: var(--ecw-sans);
	font-size: clamp(17px, 1.2vw, 18px);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.widget-title {
	font-family: var(--ecw-serif);
	color: var(--ecw-ink);
	text-transform: none;
	letter-spacing: -0.01em;
}

/* Focus is never removed. */
:focus-visible {
	outline: 3px solid var(--ecw-terracotta);
	outline-offset: 2px;
	border-radius: inherit;
}

.ecw-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 10000;
	background: var(--ecw-terracotta-600);
	color: #fff;
	padding: 14px 20px;
	font: 700 16px/1 var(--ecw-sans);
	border-radius: 0 0 var(--ecw-r-sm) 0;
}
.ecw-skip:focus { left: 0; }

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.ecw-wrap {
	max-width: var(--ecw-wrap);
	margin-inline: auto;
	padding-inline: var(--ecw-gutter);
}

.ecw-band { padding-block: var(--ecw-section); }
.ecw-band--tint { background: var(--ecw-tint); }
.ecw-band--dark {
	background: var(--ecw-band-dark);
	color: var(--ecw-ink-invert);
	padding-block: clamp(48px, 7vw, 80px);
}
.ecw-band--dark :is(h1, h2, h3, h4) { color: var(--ecw-ink-invert); }
.ecw-band--ruled { border-block: 1px solid var(--ecw-line); }

/* Section head. Its running text is divs, never <p> — an injected ad unit
   anchors to paragraphs, and one landing here would split a heading from
   its dek. Same trap that broke every card on a sibling site. */
.ecw-head { margin-bottom: var(--ecw-stack-lg); }
.ecw-head--center { text-align: center; }
.ecw-head__title {
	font-family: var(--ecw-serif);
	font-weight: 700;
	font-size: clamp(26px, 3.2vw, 34px);
	line-height: 1.25;
	letter-spacing: -0.01em;
	margin: 0;
}
.ecw-head__sub {
	font-family: var(--ecw-sans);
	font-size: 17px;
	line-height: 1.5;
	color: var(--ecw-ink-muted);
	margin-top: 10px;
	max-width: 62ch;
}
.ecw-head--center .ecw-head__sub { margin-inline: auto; }
.ecw-band--dark .ecw-head__sub { color: var(--ecw-tan); }

.ecw-eyebrow {
	display: inline-block;
	font-family: var(--ecw-sans);
	font-weight: 700;
	font-size: 12px;
	line-height: 1;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--ecw-terracotta-700);
}
.ecw-eyebrow--sage { color: var(--ecw-sage-deep); }
.ecw-band--dark .ecw-eyebrow { color: var(--ecw-tan); }

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

.ecw-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 13px 24px;
	font: 700 16px/1.2 var(--ecw-sans);
	letter-spacing: 0.01em;
	text-decoration: none;
	border-radius: var(--ecw-r-sm);
	border: 2px solid transparent;
	transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.ecw-btn--primary { background: var(--ecw-terracotta-600); color: #fff; }
.ecw-btn--primary:hover,
.ecw-btn--primary:focus { background: var(--ecw-terracotta-700); color: #fff; }
.ecw-btn--secondary {
	background: transparent;
	color: var(--ecw-sage-deep);
	border-color: var(--ecw-sage-deep);
}
.ecw-btn--secondary:hover,
.ecw-btn--secondary:focus { background: var(--ecw-sage-deep); color: var(--ecw-ink-invert); }
.ecw-band--dark .ecw-btn--secondary { color: var(--ecw-ink-invert); border-color: var(--ecw-ink-invert); }
.ecw-band--dark .ecw-btn--secondary:hover { background: var(--ecw-ink-invert); color: var(--ecw-band-dark); }

/* The closing link every grid on the site ends with. */
.ecw-more {
	display: inline-block;
	padding: 12px 0;
	font: 700 16px/1.2 var(--ecw-sans);
	color: var(--ecw-terracotta-700);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}
.ecw-more:hover { text-decoration-thickness: 2px; }
.ecw-band--dark .ecw-more { color: var(--ecw-tan); }
.ecw-more-row { margin-top: var(--ecw-stack-lg); text-align: center; }

/* --------------------------------------------------------------------------
   Card — one component, reused by the homepage, every archive, search,
   related posts and 404.
   4:3 media: 257 featured images are exactly 1024x768, so the dominant asset
   is lossless at this ratio; 500x500 squares lose 25% of height and 896x1344
   portraits lose 50%, which is why no card is ever rendered wider than ~384px.
   -------------------------------------------------------------------------- */

.ecw-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 32px;
	row-gap: 40px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.ecw-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ecw-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.ecw-card {
	display: flex;
	flex-direction: column;
	background: var(--ecw-surface);
	border: 1px solid var(--ecw-line);
	border-radius: var(--ecw-r-md);
	overflow: hidden;
	height: 100%;
	position: relative;
	transition: border-color 150ms ease;
}
.ecw-card:hover { border-color: var(--ecw-line-strong); }
.ecw-card__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--ecw-tint);
	margin: 0;
}
.ecw-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 40%;
	display: block;
	transition: transform 300ms ease-out;
}
.ecw-card:hover .ecw-card__media img { transform: scale(1.03); }

.ecw-card__body {
	padding: 16px 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}
.ecw-card__title {
	font-family: var(--ecw-serif);
	font-weight: 600;
	font-size: clamp(17px, 1.5vw, 19px);
	line-height: 1.3;
	letter-spacing: -0.005em;
	color: var(--ecw-ink);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color 150ms ease;
}
/* The whole card is one link; the title is not separately focusable. */
.ecw-card__link { text-decoration: none; color: inherit; }
.ecw-card__link::after { content: ""; position: absolute; inset: 0; }
.ecw-card:hover .ecw-card__title { color: var(--ecw-terracotta-700); }
.ecw-card:focus-within { outline: 3px solid var(--ecw-terracotta); outline-offset: 2px; }
.ecw-card:focus-within .ecw-card__link:focus-visible { outline: none; }

/* Meta is a div, not a <p>. */
.ecw-card__meta {
	font: 500 14px/1.4 var(--ecw-sans);
	color: var(--ecw-ink-muted);
	margin-top: auto;
	padding-top: 4px;
}


@media (prefers-reduced-motion: reduce) {
	.ecw-card:hover .ecw-card__media img,
	.ecw-tile:hover .ecw-tile__media img { transform: none; }
}

/* --------------------------------------------------------------------------
   Equipment tiles — the module that makes 469 previously unreachable guides
   reachable.
   -------------------------------------------------------------------------- */

.ecw-tiles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 32px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.ecw-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	background: var(--ecw-surface);
	border: 1px solid var(--ecw-line);
	border-radius: var(--ecw-r-md);
	overflow: hidden;
	transition: border-color 150ms ease;
}
.ecw-tile:hover { border-color: var(--ecw-terracotta); }
.ecw-tile__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--ecw-tint);
	margin: 0;
}
.ecw-tile__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 300ms ease-out;
}
.ecw-tile:hover .ecw-tile__media img { transform: scale(1.04); }
.ecw-tile__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 4px; }
.ecw-tile__title {
	font-family: var(--ecw-serif);
	font-weight: 600;
	font-size: 19px;
	line-height: 1.3;
	color: var(--ecw-ink);
	margin: 0;
}
.ecw-tile__count { font: 500 14px/1.4 var(--ecw-sans); color: var(--ecw-ink-muted); }
.ecw-tile__link { position: absolute; inset: 0; z-index: 1; }
.ecw-tile:focus-within { outline: 3px solid var(--ecw-terracotta); outline-offset: 2px; }
.ecw-tile:focus-within .ecw-tile__link:focus-visible { outline: none; }

/* --------------------------------------------------------------------------
   Hero — typographic. A photographic hero is not possible: the widest featured
   image on the site is 1024px and would upscale visibly across a 1200px band.
   -------------------------------------------------------------------------- */

.ecw-hero {
	background: var(--ecw-tint);
	padding-block: clamp(56px, 8vw, 96px);
	text-align: center;
}
.ecw-hero__inner { max-width: 820px; margin-inline: auto; }
.ecw-hero__rule {
	width: 64px;
	height: 2px;
	background: var(--ecw-terracotta);
	margin: 0 auto 28px;
	border: 0;
}
.ecw-hero__title {
	font-family: var(--ecw-serif);
	font-weight: 700;
	font-size: clamp(34px, 5.6vw, 52px);
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 0;
	color: var(--ecw-ink);
}
.ecw-hero__dek {
	font-family: var(--ecw-sans);
	font-size: clamp(18px, 1.8vw, 21px);
	line-height: 1.5;
	color: var(--ecw-ink-soft);
	margin: 18px auto 0;
	max-width: 60ch;
}
.ecw-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: center;
	margin-top: 32px;
}

/* --------------------------------------------------------------------------
   Method band
   -------------------------------------------------------------------------- */

.ecw-method {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px;
	margin-top: var(--ecw-stack-lg);
}
.ecw-method__item { display: flex; flex-direction: column; gap: 10px; }
.ecw-method__text {
	font: 400 16px/1.6 var(--ecw-sans);
	color: var(--ecw-ink-invert);
	opacity: .92;
}
.ecw-method__note {
	margin-top: 40px;
	text-align: center;
	font: 500 16px/1.6 var(--ecw-sans);
	color: var(--ecw-tan);
	max-width: 72ch;
	margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Course chips
   -------------------------------------------------------------------------- */

.ecw-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
}
.ecw-chip {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 18px;
	font: 600 14px/1 var(--ecw-sans);
	color: var(--ecw-ink-soft);
	background: var(--ecw-surface);
	border: 1px solid var(--ecw-line);
	border-radius: var(--ecw-r-sm);
	text-decoration: none;
	transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.ecw-chip:hover,
.ecw-chip[aria-current="page"] {
	background: var(--ecw-tint-warm);
	border-color: var(--ecw-terracotta);
	color: var(--ecw-terracotta-700);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.ecw-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: 32px; }
	.ecw-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ecw-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
	.ecw-method { grid-template-columns: 1fr; gap: 32px; }
}

@media (max-width: 767px) {
	.ecw-grid { grid-template-columns: 1fr; row-gap: 24px; }
	/* Recipes stay 2-up at phone width: a 450x450 source still covers a 163px
	   box at 2.7x, and four full-width cards is three screens of scroll. */
	.ecw-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 24px; }
	.ecw-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
	.ecw-tile__title { font-size: 17px; }
	.ecw-tile__body,
	.ecw-grid--4 .ecw-card__body { padding: 14px 14px 16px; }
	.ecw-grid--4 .ecw-card__title { -webkit-line-clamp: 2; }
	.ecw-hero__actions { flex-direction: column; }
	.ecw-hero__actions .ecw-btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   Header utility strip
   -------------------------------------------------------------------------- */

.ecw-utility {
	background: var(--ecw-band-dark);
	color: var(--ecw-ink-invert);
}
.ecw-utility__text {
	font: 500 13px/1.4 var(--ecw-sans);
	letter-spacing: 0.01em;
	text-align: center;
	padding-block: 11px;
	color: var(--ecw-ink-invert);
}

/* --------------------------------------------------------------------------
   Header — Kadence chrome, restyled
   -------------------------------------------------------------------------- */

/* The logo is a three-line stacked wordmark at 1.52:1, so height is what has
   to be constrained; left to its own width it drives the header to 111px and
   leaves the mark touching both edges. */
.site-branding .custom-logo {
	max-height: 72px;
	width: auto;
	height: auto;
}
.site-header-main-section-left .site-branding { padding-block: 12px; }

/* Kadence 1.5.2 renders navigation anchors with NO class — there is no
   .menu-link here — so every selector below targets `.menu-item > a`. */
#main-header .header-navigation .menu > .menu-item > a {
	color: var(--ecw-ink);
	min-height: 44px;
	display: flex;
	align-items: center;
}
#main-header .header-navigation .menu > .menu-item > a:hover,
#main-header .header-navigation .menu > .current-menu-item > a,
#main-header .header-navigation .menu > .current-menu-ancestor > a,
#main-header .header-navigation .menu > .current_page_parent > a {
	color: var(--ecw-terracotta-700);
}
/* The current item gets a rule as well as a colour, so it is not signalled by
   colour alone. */
#main-header .header-navigation .menu > .current-menu-item > a,
#main-header .header-navigation .menu > .current-menu-ancestor > a,
#main-header .header-navigation .menu > .current_page_parent > a {
	box-shadow: inset 0 -3px 0 0 var(--ecw-terracotta);
}
#main-header .header-navigation ul ul.sub-menu {
	background: var(--ecw-surface);
	border: 1px solid var(--ecw-line);
	border-radius: var(--ecw-r-md);
	box-shadow: 0 12px 28px rgba(33, 29, 26, 0.10);
	padding-block: 6px;
	overflow: hidden;
}
#main-header .header-navigation ul ul.sub-menu > li > a {
	color: var(--ecw-ink-soft);
	min-height: 44px;
	display: flex;
	align-items: center;
}
#main-header .header-navigation ul ul.sub-menu > li > a:hover,
#main-header .header-navigation ul ul.sub-menu > li.current-menu-item > a {
	color: var(--ecw-terracotta-700);
	background: var(--ecw-tint-warm);
}
#main-header.item-is-fixed .site-main-header-wrap,
.site-header-row-container.kadence-sticky-header.item-is-fixed {
	box-shadow: 0 1px 0 0 var(--ecw-line), 0 6px 20px rgba(33, 29, 26, 0.06);
}

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

.ecw-foot {
	background: var(--ecw-band-dark);
	color: var(--ecw-ink-invert);
	padding-top: 64px;
}
.ecw-foot__grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: 40px;
	padding-bottom: 48px;
}
.ecw-foot__mark {
	font: 700 22px/1.2 var(--ecw-serif);
	color: var(--ecw-ink-invert);
	letter-spacing: -0.01em;
}
.ecw-foot__blurb {
	font: 400 15px/1.6 var(--ecw-sans);
	color: var(--ecw-tan);
	margin-top: 12px;
	max-width: 46ch;
}
.ecw-foot__col--brand .ecw-more { margin-top: 8px; }
.ecw-foot__h {
	font: 700 12px/1 var(--ecw-sans);
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--ecw-tan);
	margin-bottom: 14px;
}
.ecw-foot__list { list-style: none; margin: 0; padding: 0; }
.ecw-foot__list li { margin: 0; }
.ecw-foot__list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 40px;
	font: 400 15px/1.4 var(--ecw-sans);
	color: var(--ecw-ink-invert);
	text-decoration: none;
	opacity: .9;
}
.ecw-foot__list a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.ecw-foot__n { font-size: 13px; color: var(--ecw-tan); }

.ecw-foot__legal {
	border-top: 1px solid rgba(251, 248, 243, .16);
	padding-block: 24px 32px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.ecw-foot__disclosure {
	font: italic 400 13px/1.55 var(--ecw-sans);
	color: var(--ecw-tan);
	max-width: 100ch;
}
.ecw-foot__copy { font: 500 13px/1.4 var(--ecw-sans); color: var(--ecw-tan); }

/* The whole footer is rendered by the child theme on kadence_before_footer,
   which outputs a sibling BEFORE .site-footer. Kadence's own footer element
   then still renders its (now empty) bottom row as 121px of dead dark space
   under ours, so it is collapsed outright. If Kadence's footer builder is ever
   wanted back, delete this rule and remove ecw_footer_columns(). */
.site-footer { display: none; }

@media (max-width: 1024px) {
	.ecw-foot__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
	.ecw-foot__col--brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
	.ecw-foot__grid { grid-template-columns: 1fr; gap: 28px; }
	.ecw-utility__text { padding-block: 10px; font-size: 12.5px; }
}

/* --------------------------------------------------------------------------
   Tap targets
   Kadence ships the header search toggle at 32px tall and the mobile menu
   toggle at 37x31. Both are below the 44px floor and the hamburger is the only
   way to reach navigation on a phone.
   -------------------------------------------------------------------------- */

#main-header .search-toggle-open,
#mobile-header .search-toggle-open,
#main-header .menu-toggle-open,
#mobile-header .menu-toggle-open,
#mobile-header .menu-toggle,
.mobile-toggle-open-container .menu-toggle-open {
	min-width: 48px;
	min-height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}
#main-header .search-toggle-open .kadence-svg-iconset,
#mobile-header .search-toggle-open .kadence-svg-iconset,
.menu-toggle-open .menu-toggle-icon { font-size: 1.1em; }

/* The off-canvas drawer: 52px rows, and the panel inherits the site grounds
   rather than Kadence's default dark. */
#mobile-drawer .drawer-inner,
.popup-drawer .drawer-inner { background: var(--ecw-ground); }
#mobile-drawer .mobile-navigation ul li > a,
.popup-drawer .mobile-navigation ul li > a {
	min-height: 52px;
	display: flex;
	align-items: center;
	font: 600 16px/1.3 var(--ecw-sans);
	color: var(--ecw-ink);
	border-bottom: 1px solid var(--ecw-line);
}
#mobile-drawer .mobile-navigation ul ul li > a,
.popup-drawer .mobile-navigation ul ul li > a {
	font-weight: 400;
	font-size: 15px;
	color: var(--ecw-ink-soft);
	padding-left: 16px;
}
#mobile-drawer .drawer-toggle,
.popup-drawer .drawer-toggle { min-width: 48px; min-height: 48px; }

/* ==========================================================================
   SINGLE POST
   The 469 guides are classic-editor HTML with no block classes, so prose rules
   target bare elements — but always inside .single-content.entry-content (0,2,1)
   so they beat Kadence's own .single-content h2 (0,1,1) without !important,
   and never leak onto the layout components that also live in .entry-content.
   ========================================================================== */

/* ---- Title band ---- */
.entry-hero-container-inner .entry-header { padding-block: clamp(28px, 4vw, 44px); }
.entry-hero .kadence-breadcrumbs {
	font: 500 13px/1.5 var(--ecw-sans);
	color: var(--ecw-ink-muted);
	margin-bottom: 10px;
}
.entry-hero .kadence-breadcrumbs a { color: var(--ecw-ink-muted); text-decoration: none; }
.entry-hero .kadence-breadcrumbs a:hover { color: var(--ecw-terracotta-700); text-decoration: underline; }
.entry-hero .entry-taxonomies,
.entry-hero .category-style-normal {
	font: 700 12px/1 var(--ecw-sans);
	letter-spacing: 0.09em;
	text-transform: uppercase;
}
.entry-hero .entry-taxonomies a { color: var(--ecw-terracotta-700); text-decoration: none; }
.entry-hero .entry-meta {
	font: 500 14px/1.5 var(--ecw-sans);
	color: var(--ecw-ink-muted);
	margin-top: 12px;
}
.entry-hero .entry-meta a { color: var(--ecw-ink-muted); }

/* ---- Featured image. The widest source on the site is 1024px, so the frame is
   capped rather than stretched on wide screens. ---- */
.single-post .post-thumbnail img {
	border-radius: var(--ecw-r-md);
	max-height: 520px;
	width: 100%;
	object-fit: cover;
}

/* ---- Prose ---- */
.single-content.entry-content {
	font-size: 18px;
	line-height: 1.68;
	color: var(--ecw-ink);
}
.single-content.entry-content > p { margin: 0 0 24px; }
.single-content.entry-content h2 {
	font-family: var(--ecw-serif);
	font-weight: 700;
	font-size: clamp(26px, 3vw, 31px);
	line-height: 1.25;
	letter-spacing: -0.01em;
	margin: 48px 0 16px;
	scroll-margin-top: 120px;
}
.single-content.entry-content h3 {
	font-family: var(--ecw-serif);
	font-weight: 600;
	font-size: clamp(20px, 2vw, 23px);
	line-height: 1.3;
	margin: 32px 0 12px;
	scroll-margin-top: 120px;
}
.single-content.entry-content h4 {
	font-family: var(--ecw-sans);
	font-weight: 700;
	font-size: 18px;
	margin: 26px 0 10px;
}
.single-content.entry-content ul,
.single-content.entry-content ol { margin: 0 0 24px 22px; padding: 0; }
.single-content.entry-content li { margin-bottom: 8px; }
.single-content.entry-content figure { margin: 32px 0; }
.single-content.entry-content figure img { border-radius: var(--ecw-r-md); }
.single-content.entry-content figcaption {
	font: italic 400 14px/1.5 var(--ecw-sans);
	color: var(--ecw-ink-muted);
	margin-top: 8px;
	text-align: center;
}
.single-content.entry-content blockquote {
	border-left: 3px solid var(--ecw-tan);
	background: transparent;
	margin: 32px 0;
	padding: 4px 0 4px 24px;
	font-style: normal;
	color: var(--ecw-ink-soft);
}
.single-content.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 16px;
	margin: 28px 0;
}
.single-content.entry-content :is(th, td) {
	border: 1px solid var(--ecw-line);
	padding: 12px 14px;
	text-align: left;
	vertical-align: top;
}
.single-content.entry-content th {
	background: var(--ecw-tint);
	font-family: var(--ecw-sans);
	font-weight: 700;
	font-size: 14px;
}
/* Wide tables scroll inside their own box rather than pushing the page sideways. */
.single-content.entry-content figure.wp-block-table,
.single-content.entry-content .ecw-scroll { overflow-x: auto; }

/* ---- Prose links.
   Scoped to body.single-post and excluding anything carrying an inline style,
   because every affiliate button in this content is a styled <a>. Writing this
   as :where(.entry-content) a:not(.x):not(.y) is the trap — :where() zeroes only
   the ancestor while each :not(.class) still counts toward specificity, and the
   rule then outranks every component on the page. ---- */
body.single-post .single-content a:not([style]):not(.ecw-btn):not(.ecw-more):not(.cpu-btn):not(.wp-element-button):not(.wp-block-button__link) {
	color: var(--ecw-terracotta-700);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-thickness: 1px;
}
body.single-post .single-content a:not([style]):not(.ecw-btn):not(.cpu-btn):hover {
	text-decoration-thickness: 2px;
}

/* ---- Table of contents ---- */
.ecw-toc {
	background: var(--ecw-tint);
	border: 1px solid var(--ecw-line);
	border-radius: var(--ecw-r-md);
	padding: 20px 24px;
	margin: 8px 0 36px;
}
.ecw-toc__h {
	font: 700 12px/1 var(--ecw-sans);
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--ecw-terracotta-700);
	margin-bottom: 12px;
}
.ecw-toc__list { margin: 0; padding-left: 20px; }
.ecw-toc__list li { margin-bottom: 6px; }
.ecw-toc__list a {
	font: 400 16px/1.5 var(--ecw-sans);
	color: var(--ecw-ink-soft);
	text-decoration: none;
}
.ecw-toc__list a:hover { color: var(--ecw-terracotta-700); text-decoration: underline; }

/* ---- Affiliate disclosure ---- */
.ecw-disclosure {
	font: italic 400 14px/1.55 var(--ecw-sans);
	color: var(--ecw-ink-muted);
	background: var(--ecw-tint-warm);
	border-left: 3px solid var(--ecw-terracotta);
	border-radius: 0 var(--ecw-r-sm) var(--ecw-r-sm) 0;
	padding: 12px 16px;
	margin: 0 0 28px;
}
.ecw-disclosure a { color: var(--ecw-terracotta-700); }

/* ==========================================================================
   IN-CONTENT MARKUP THAT PREDATES THIS DESIGN
   444 of 527 posts carry inline styles with hard-coded colours: #FF9900 and
   #232F3E (Amazon), #2E86AB (blue), #FF6B35. Inline styles beat a stylesheet,
   so these need !important — the alternative is rewriting 444 posts' content,
   which is destructive and cannot be undone with a cache purge. Attribute
   selectors carry " i" because the same hex appears in both cases.
   ========================================================================== */

/* ---- Callouts. 25 posts use these class names and NO css for them has ever
   existed on this site, so they render today as bare unstyled divs. ---- */
.single-content .callout {
	border-radius: var(--ecw-r-md);
	padding: 18px 22px;
	margin: 28px 0;
	border-left: 3px solid var(--ecw-tan);
	background: var(--ecw-tint);
}
.single-content .callout > :first-child { margin-top: 0; }
.single-content .callout > :last-child { margin-bottom: 0; }
.single-content .callout--takeaways { border-left-color: var(--ecw-sage); }
.single-content .callout--tip { border-left-color: var(--ecw-sage-deep); }
.single-content .callout--warning { border-left-color: var(--ecw-terracotta); background: var(--ecw-tint-warm); }
.single-content .callout :is(h2, h3, h4) {
	font-family: var(--ecw-sans);
	font-weight: 700;
	font-size: 16px;
	letter-spacing: 0.02em;
	margin: 0 0 10px;
}

/* ---- The inline-styled blue/orange callout boxes (393+ occurrences) ---- */
.single-content div[style*="border-left"][style*="2E86AB" i] {
	background: var(--ecw-tint) !important;
	border-left-color: var(--ecw-sage) !important;
	border-left-width: 3px !important;
	border-radius: 0 var(--ecw-r-md) var(--ecw-r-md) 0 !important;
	padding: 18px 22px !important;
	margin: 28px 0 !important;
}
.single-content div[style*="border-left"][style*="FF9900" i],
.single-content div[style*="border-left"][style*="FF6B35" i] {
	background: var(--ecw-tint-warm) !important;
	border-left-color: var(--ecw-terracotta) !important;
	border-left-width: 3px !important;
	border-radius: 0 var(--ecw-r-md) var(--ecw-r-md) 0 !important;
	padding: 18px 22px !important;
	margin: 28px 0 !important;
}

/* ---- Product showcase card (533 of them, stable class name) ---- */
.single-content .product-showcase-card {
	border: 1px solid var(--ecw-line) !important;
	border-radius: var(--ecw-r-md) !important;
	background: var(--ecw-surface) !important;
	box-shadow: none !important;
	padding: 22px !important;
	margin: 32px 0 !important;
}
.single-content .product-showcase-card h3 {
	font-family: var(--ecw-serif) !important;
	font-weight: 600 !important;
	font-size: 19px !important;
	line-height: 1.3 !important;
	color: var(--ecw-ink);
}
/* Rank medallion */
.single-content .product-showcase-card div[style*="border-radius:50%"] {
	background: var(--ecw-terracotta-600) !important;
	color: #fff !important;
	font-family: var(--ecw-sans);
}
/* "OUR PICK" / "BEST VALUE" pills */
.single-content .product-showcase-card div[style*="FF6B35" i]:not([style*="border-left"]) {
	background: var(--ecw-terracotta-700) !important;
	color: #fff !important;
	border-radius: var(--ecw-r-sm) !important;
	font-family: var(--ecw-sans);
}
.single-content .product-showcase-card div[style*="2E86AB" i]:not([style*="border-left"]) {
	background: var(--ecw-sage-deep) !important;
	color: #fff !important;
	border-radius: var(--ecw-r-sm) !important;
	font-family: var(--ecw-sans);
}

/* ---- Affiliate buttons.
   #FF9900 with white text measures about 2:1 and fails AA outright; #232F3E is
   Amazon navy and reads as a foreign brand inside this palette. Both become the
   site's own primary button, which clears AA at 5.78:1. ---- */
.single-content a[style*="background:#FF9900" i],
.single-content a[style*="background: #FF9900" i],
.single-content a[style*="background:#232F3E" i],
.single-content a[style*="background: #232F3E" i],
.single-content a[style*="background:#FF6B35" i] {
	background: var(--ecw-terracotta-600) !important;
	color: #fff !important;
	border-radius: var(--ecw-r-sm) !important;
	font-family: var(--ecw-sans) !important;
	font-weight: 700 !important;
	font-size: 16px !important;
	padding: 13px 24px !important;
	min-height: 48px;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	text-decoration: none !important;
	transition: background-color 150ms ease;
}
.single-content a[style*="background:#FF9900" i]:hover,
.single-content a[style*="background:#232F3E" i]:hover,
.single-content a[style*="background:#FF6B35" i]:hover {
	background: var(--ecw-terracotta-700) !important;
}

/* ---- Contextual Product Unit (snippet 5). It ships its own inline <style>
   with literal values and a prefers-color-scheme dark rule, so the unit would
   otherwise flip to a dark card inside a light page. Do not edit the snippet —
   it is theme-agnostic and survives theme switches intact. ---- */
.single-content .cpu-unit {
	background: var(--ecw-surface) !important;
	border: 1px solid var(--ecw-line) !important;
	border-radius: var(--ecw-r-md) !important;
	color: var(--ecw-ink) !important;
}
.single-content .cpu-kicker {
	font-family: var(--ecw-sans) !important;
	font-weight: 700 !important;
	font-size: 12px !important;
	letter-spacing: 0.09em !important;
	text-transform: uppercase !important;
	color: var(--ecw-ink-muted) !important;
}
.single-content .cpu-title {
	font-family: var(--ecw-serif) !important;
	color: var(--ecw-ink) !important;
}
.single-content .cpu-btn {
	background: var(--ecw-terracotta-600) !important;
	color: #fff !important;
	border-radius: var(--ecw-r-sm) !important;
	font-family: var(--ecw-sans) !important;
	font-weight: 700 !important;
	min-height: 48px;
	display: inline-flex !important;
	align-items: center;
}
.single-content .cpu-btn:hover { background: var(--ecw-terracotta-700) !important; }
.single-content .cpu-disclosure {
	font: italic 400 13px/1.5 var(--ecw-sans) !important;
	color: var(--ecw-ink-muted) !important;
}

/* ---- WP Recipe Maker card (the 51 recipe posts) ---- */
.wprm-recipe-container .wprm-recipe {
	border: 1px solid var(--ecw-line) !important;
	border-radius: var(--ecw-r-md) !important;
	background: var(--ecw-surface) !important;
}
.wprm-recipe .wprm-recipe-name {
	font-family: var(--ecw-serif) !important;
	color: var(--ecw-ink) !important;
}
.wprm-recipe .wprm-recipe-header,
.wprm-recipe .wprm-recipe-ingredients-header,
.wprm-recipe .wprm-recipe-instructions-header {
	font-family: var(--ecw-sans) !important;
	font-weight: 700 !important;
	letter-spacing: 0.04em;
	color: var(--ecw-ink) !important;
}
.wprm-recipe a.wprm-recipe-link,
.wprm-recipe .wprm-recipe-jump,
.wprm-recipe .wprm-recipe-print {
	background: var(--ecw-terracotta-600) !important;
	color: #fff !important;
	border-radius: var(--ecw-r-sm) !important;
	font-family: var(--ecw-sans) !important;
}


/* ---- Related posts ---- */
.entry-related {
	background: var(--ecw-tint);
	border-top: 1px solid var(--ecw-line);
	padding-block: var(--ecw-section);
}
.entry-related .entry-related-title {
	font-family: var(--ecw-serif);
	font-weight: 700;
	font-size: clamp(24px, 2.6vw, 30px);
	margin-bottom: var(--ecw-stack-lg);
}

@media (max-width: 767px) {
	.single-content.entry-content { font-size: 17px; }
	.ecw-toc { padding: 16px 18px; }
	.single-content .product-showcase-card { padding: 16px !important; }
	.single-content a[style*="background:#FF9900" i],
	.single-content a[style*="background:#232F3E" i] { width: 100%; }
}

/* ==========================================================================
   ARCHIVES, SEARCH, RELATED
   Kadence renders these with its own loop markup
   (li.entry-list-item > article.loop-entry > .post-thumbnail + .entry-content-wrap),
   so the card look is rebuilt here rather than reusing .ecw-card. Both must stay
   in step — they are the same component to a reader.
   ========================================================================== */

.archive .entry-hero-container-inner,
.search .entry-hero-container-inner,
.blog .entry-hero-container-inner { background: var(--ecw-tint); }

.archive .entry-hero .entry-title,
.search .entry-hero .entry-title {
	font-family: var(--ecw-serif);
	font-weight: 700;
	font-size: clamp(30px, 3.6vw, 40px);
	line-height: 1.2;
	letter-spacing: -0.015em;
}
.ecw-archive-meta {
	font: 700 12px/1 var(--ecw-sans);
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--ecw-terracotta-700);
	margin-top: 14px;
}
.archive .entry-hero .archive-description p {
	font: 400 17px/1.6 var(--ecw-sans);
	color: var(--ecw-ink-soft);
	max-width: 66ch;
	margin: 12px auto 0;
}
.ecw-archive-desc {
	font: 400 17px/1.6 var(--ecw-sans);
	color: var(--ecw-ink-soft);
	margin-top: 12px;
	max-width: 66ch;
}

/* ---- Loop cards ---- */
.loop-entry.entry {
	background: var(--ecw-surface);
	border: 1px solid var(--ecw-line);
	border-radius: var(--ecw-r-md);
	overflow: hidden;
	box-shadow: none;
	height: 100%;
	transition: border-color 150ms ease;
}
.loop-entry.entry:hover { border-color: var(--ecw-line-strong); }
.loop-entry .post-thumbnail { margin: 0; border-radius: 0; }
.loop-entry .post-thumbnail img { transition: transform 300ms ease-out; }
.loop-entry:hover .post-thumbnail img { transform: scale(1.03); }
.loop-entry .entry-content-wrap { padding: 16px 18px 20px; }
.loop-entry .entry-header { margin: 0; }
.loop-entry .entry-taxonomies,
.loop-entry .entry-taxonomies a {
	font-family: var(--ecw-sans);
	font-weight: 700;
	font-size: 12px;
	line-height: 1;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--ecw-terracotta-700);
	text-decoration: none;
}
.loop-entry .entry-title {
	font-family: var(--ecw-serif);
	font-weight: 600;
	font-size: clamp(17px, 1.5vw, 19px);
	line-height: 1.3;
	letter-spacing: -0.005em;
	margin: 8px 0 0;
}
.loop-entry .entry-title a { color: var(--ecw-ink); text-decoration: none; }
.loop-entry:hover .entry-title a { color: var(--ecw-terracotta-700); }
.loop-entry:focus-within { outline: 3px solid var(--ecw-terracotta); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	.loop-entry:hover .post-thumbnail img { transform: none; }
}

/* ---- Pagination ---- */
.navigation.pagination { margin-top: var(--ecw-stack-lg); }
.navigation.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}
.navigation.pagination .page-numbers {
	min-width: 48px;
	min-height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 12px;
	font: 600 15px/1 var(--ecw-sans);
	color: var(--ecw-ink-soft);
	background: var(--ecw-surface);
	border: 1px solid var(--ecw-line);
	border-radius: var(--ecw-r-sm);
	text-decoration: none;
}
.navigation.pagination .page-numbers:hover {
	border-color: var(--ecw-terracotta);
	color: var(--ecw-terracotta-700);
}
.navigation.pagination .page-numbers.current {
	background: var(--ecw-terracotta-600);
	border-color: var(--ecw-terracotta-600);
	color: #fff;
}

/* ---- Search form ---- */
.search-form input[type="search"],
.search-form .search-field {
	font: 400 16px/1.4 var(--ecw-sans);
	min-height: 48px;
	border: 1px solid var(--ecw-line);
	border-radius: var(--ecw-r-sm);
	background: var(--ecw-surface);
	color: var(--ecw-ink);
	padding: 12px 14px;
}
.search-form input[type="search"]:focus { border-color: var(--ecw-terracotta); }

/* ---- 404 ---- */
.ecw-404 { padding-block: var(--ecw-section); text-align: center; }
.ecw-404__inner { max-width: 640px; margin-inline: auto; }
.ecw-404__title {
	font-family: var(--ecw-serif);
	font-weight: 700;
	font-size: clamp(30px, 4vw, 44px);
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 0 0 14px;
}
.ecw-404__text {
	font: 400 18px/1.6 var(--ecw-sans);
	color: var(--ecw-ink-soft);
	max-width: 56ch;
	margin: 0 auto 28px;
}
.ecw-404__search { margin: 0 auto 28px; max-width: 460px; }
.ecw-404__search .search-form { display: flex; gap: 8px; }
.ecw-404__search .search-form label { flex: 1; }
.ecw-404__search .search-form input[type="search"] { width: 100%; }
.ecw-404__cats { margin-top: 48px; }
.ecw-404__cats .ecw-eyebrow { display: block; margin-bottom: 16px; }
/* Kadence boxes the 404 body on a white card; the section supplies its own
   ground, so the card is dropped. */
.error404 .content-bg.entry-content-wrap {
	background: transparent;
	box-shadow: none;
	padding: 0;
}

/* --------------------------------------------------------------------------
   About page
   -------------------------------------------------------------------------- */

.ecw-lead {
	font: 400 clamp(19px, 2vw, 21px)/1.55 var(--ecw-sans);
	color: var(--ecw-ink-soft);
}

.ecw-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin: 32px 0;
	padding: 24px 0;
	border-block: 1px solid var(--ecw-line);
}
.ecw-stat { text-align: center; }
.ecw-stat__n {
	font: 700 clamp(26px, 3vw, 34px)/1.1 var(--ecw-serif);
	color: var(--ecw-terracotta);
	letter-spacing: -0.02em;
}
.ecw-stat__l {
	font: 500 13px/1.3 var(--ecw-sans);
	color: var(--ecw-ink-muted);
	margin-top: 6px;
}

.ecw-authors {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}
.ecw-author {
	background: var(--ecw-surface);
	border: 1px solid var(--ecw-line);
	border-radius: var(--ecw-r-md);
	padding: 24px;
}
.ecw-author__name {
	font: 600 20px/1.25 var(--ecw-serif);
	color: var(--ecw-ink);
	margin-bottom: 6px;
}
.ecw-author__count {
	font: 500 14px/1.4 var(--ecw-sans);
	color: var(--ecw-ink-muted);
	margin-top: 8px;
}
.ecw-author__bio {
	font: 400 15px/1.6 var(--ecw-sans);
	color: var(--ecw-ink-soft);
	margin-top: 12px;
}

@media (max-width: 767px) {
	.ecw-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 12px; }
	.ecw-authors { grid-template-columns: 1fr; gap: 16px; }
	.ecw-author { padding: 18px; }
}

/* --------------------------------------------------------------------------
   Contact form
   -------------------------------------------------------------------------- */

.wpcf7 .ecw-form__row { margin-bottom: 20px; }
.wpcf7 .ecw-form__row label {
	display: block;
	font: 600 15px/1.4 var(--ecw-sans);
	color: var(--ecw-ink);
	margin-bottom: 6px;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 select,
.wpcf7 textarea {
	width: 100%;
	box-sizing: border-box;
	min-height: 48px;
	padding: 12px 14px;
	/* 16px stops iOS zooming the page when a field takes focus. */
	font: 400 16px/1.5 var(--ecw-sans);
	color: var(--ecw-ink);
	background: var(--ecw-surface);
	border: 1px solid var(--ecw-line);
	border-radius: var(--ecw-r-sm);
	transition: border-color 150ms ease, box-shadow 150ms ease;
}
.wpcf7 textarea { min-height: 180px; resize: vertical; }
.wpcf7 :is(input, select, textarea):focus {
	border-color: var(--ecw-terracotta);
	box-shadow: 0 0 0 3px rgba(193, 86, 29, 0.16);
	outline: none;
}
.wpcf7 ::placeholder { color: var(--ecw-ink-muted); opacity: .7; }

.wpcf7 .ecw-form__actions { margin-top: 28px; }
.wpcf7 input[type="submit"] {
	min-height: 48px;
	padding: 13px 28px;
	font: 700 16px/1.2 var(--ecw-sans);
	letter-spacing: 0.01em;
	color: #fff;
	background: var(--ecw-terracotta-600);
	border: 0;
	border-radius: var(--ecw-r-sm);
	cursor: pointer;
	transition: background-color 150ms ease;
}
.wpcf7 input[type="submit"]:hover { background: var(--ecw-terracotta-700); }

.wpcf7 .wpcf7-not-valid-tip {
	font: 500 14px/1.4 var(--ecw-sans);
	color: #9B2C1B;
	margin-top: 6px;
}
.wpcf7 .wpcf7-response-output {
	font: 500 15px/1.5 var(--ecw-sans);
	border: 1px solid var(--ecw-line);
	border-left: 3px solid var(--ecw-terracotta);
	border-radius: 0 var(--ecw-r-sm) var(--ecw-r-sm) 0;
	background: var(--ecw-tint-warm);
	padding: 14px 16px;
	margin: 20px 0 0;
}

@media (max-width: 600px) {
	.wpcf7 input[type="submit"] { width: 100%; }
}

/* Cards with no featured image — the 10 posts that lack one, and the pages that
   surface in search — otherwise render title-at-top and break the row rhythm
   next to cards that do have media. A placeholder of the same 4:3 box keeps
   every card in a row the same shape. */
.loop-entry:not(:has(.post-thumbnail))::before,
.ecw-card__media--empty {
	content: "";
	display: block;
	aspect-ratio: 4 / 3;
	background-color: var(--ecw-tint);
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23637363' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round' opacity='0.5'%3E%3Cpath d='M12 3c2.2 0 3.6 1.8 3.6 4.1 0 2-1.2 3.4-2.6 3.9l.6 9.1a1.6 1.6 0 0 1-3.2 0l.6-9.1c-1.4-.5-2.6-1.9-2.6-3.9C8.4 4.8 9.8 3 12 3z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 46px 46px;
	border-bottom: 1px solid var(--ecw-line);
}
.ecw-card__media--empty svg { display: none; }

/* --------------------------------------------------------------------------
   Author box — PublishPress Authors, NOT Kadence.
   PublishPress renders its own box into the_content, so Kadence's
   .entry-author-profile never appears on this site and styling that class does
   nothing. The real markup is:
     .pp-multiple-authors-boxes-wrapper
       > h2.box-header-title
       > .ppma-author-category-wrap ul.pp-multiple-authors-boxes-ul
         > li.pp-multiple-authors-boxes-li
           > .pp-author-boxes-avatar > .avatar-image > img
           > .pp-author-boxes-avatar-details
               > .pp-author-boxes-name > a
               > .pp-author-boxes-description > p
   The bio itself lives in the author TERM meta, not the user's description.
   -------------------------------------------------------------------------- */

.single-content .pp-multiple-authors-boxes-wrapper {
	background: var(--ecw-tint);
	border: 1px solid var(--ecw-line);
	border-radius: var(--ecw-r-md);
	padding: 24px;
	margin: 48px 0 8px;
}
.single-content .pp-multiple-authors-boxes-wrapper .box-header-title {
	font-family: var(--ecw-sans) !important;
	font-weight: 700;
	font-size: 12px;
	line-height: 1;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--ecw-terracotta-700);
	margin: 0 0 16px;
}
.single-content .pp-multiple-authors-boxes-ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.single-content .pp-multiple-authors-boxes-li {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	margin: 0;
}
.single-content .pp-author-boxes-avatar { flex: 0 0 auto; }
.single-content .pp-author-boxes-avatar img {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	border: 2px solid var(--ecw-surface);
}
.single-content .pp-author-boxes-avatar-details { flex: 1; min-width: 0; }
.single-content .pp-author-boxes-name {
	font-family: var(--ecw-serif);
	font-weight: 600;
	font-size: 19px;
	line-height: 1.25;
	margin-bottom: 6px;
}
.single-content .pp-author-boxes-name a {
	color: var(--ecw-ink) !important;
	text-decoration: none !important;
}
.single-content .pp-author-boxes-name a:hover {
	color: var(--ecw-terracotta-700) !important;
	text-decoration: underline !important;
}
.single-content .pp-author-boxes-description,
.single-content .pp-author-boxes-description p {
	font: 400 15px/1.6 var(--ecw-sans);
	color: var(--ecw-ink-soft);
	margin: 0;
}
.single-content .ppma-author-category-wrap,
.single-content .ppma-category-group { display: block; }

@media (max-width: 600px) {
	.single-content .pp-multiple-authors-boxes-wrapper { padding: 18px; }
	.single-content .pp-multiple-authors-boxes-li { gap: 14px; }
	.single-content .pp-author-boxes-avatar img { width: 56px; height: 56px; }
}