/*
Theme Name:   Ethereal
Theme URI:    https://etherealmiami.com/
Description:  Child theme of Twenty Twenty-Five for Ethereal Skin. Design tokens, palette, type and block styles live in theme.json and styles/. Replaces the Pro/Cornerstone stack and absorbs the ethereal-v2 plugin (v0.1.0).
Author:       Subculture Filmworks
Template:     twentytwentyfive
Version:      0.2.44
Requires at least: 6.7
Requires PHP: 7.4
License:      GPL-2.0-or-later
Text Domain:  ethereal
*/

/* ------------------------------------------------------------------
 * Only what theme.json cannot express lives here.
 * ------------------------------------------------------------------ */

/* Parent-slug aliases. Twenty Twenty-Five templates and patterns use
   base / contrast / accent-1..6. This theme replaces the palette with her
   eth-* slugs, so map the parent names onto hers. Anything the parent
   renders still lands on-brand and passes contrast. */
:root {
	--wp--preset--color--base:     var(--wp--preset--color--eth-ivory);
	--wp--preset--color--contrast: var(--wp--preset--color--eth-charcoal);
	--wp--preset--color--accent-1: var(--wp--preset--color--eth-teal);
	--wp--preset--color--accent-2: var(--wp--preset--color--eth-oat);
	--wp--preset--color--accent-3: var(--wp--preset--color--eth-midnight);
	--wp--preset--color--accent-4: var(--wp--preset--color--eth-charcoal); /* parent uses it for small meta text: taupe would fail */
	--wp--preset--color--accent-5: var(--wp--preset--color--eth-oat);
	--wp--preset--color--accent-6: var(--wp--preset--color--eth-oat);
}

/* Links: gold underline is decoration, not text, so it's allowed on ivory. */
:where(.wp-site-blocks) a:where(:not(.wp-element-button)) {
	text-decoration-color: var(--wp--preset--color--eth-gold);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
}
:where(.wp-site-blocks) a:where(:not(.wp-element-button)):hover {
	text-decoration-color: currentColor;
}

:where(.wp-site-blocks) :focus-visible {
	outline: 2px solid var(--wp--preset--color--eth-teal);
	outline-offset: 3px;
}

/* Readable measure for running text inside constrained layouts. */
.entry-content p,
.entry-content li {
	/* Never wider than the content column, so paragraphs line up with headings. */
	max-width: min(var(--wp--custom--measure), var(--wp--style--global--content-size));
	text-wrap: pretty;
}
.entry-content .has-text-align-center {
	margin-inline: auto;
}
h1, h2, h3, h4, h5, h6 {
	text-wrap: balance;
}

/* Legacy content: Cornerstone-era headings sometimes start with <br>. */
:is(h1, h2, h3, h4, h5, h6) > br:first-child {
	display: none;
}

/* Outline buttons. Kept here, not in theme.json, so the teal band can
   invert them without fighting per-instance variation styles. */
.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--eth-teal);
	border-color: currentColor;
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--eth-teal);
	border-color: var(--wp--preset--color--eth-teal);
	color: var(--wp--preset--color--eth-ivory);
}
.is-style-eth-band .wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--wp--preset--color--eth-ivory);
}
.is-style-eth-band .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--wp--preset--color--eth-ivory);
	border-color: var(--wp--preset--color--eth-ivory);
	color: var(--wp--preset--color--eth-teal);
}

/* Wordmark: spaced capitals, as in her mockup. The text itself comes from
   Settings → General, so the name decision stays in one place. */
.eth-wordmark {
	font-size: 1.25rem;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	line-height: 1;
}
.eth-wordmark a {
	color: inherit;
	text-decoration: none;
}

/* Navigation: small spaced capitals. */
.eth-nav {
	font-size: 0.8125rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.eth-nav a {
	text-decoration: none;
}

/* Header stays compact on phones: wordmark, menu, Book, one row. */
header .wp-block-button__link {
	white-space: nowrap;
}
@media (max-width: 600px) {
	.eth-wordmark { font-size: 0.9375rem; letter-spacing: 0.18em; }
	header .wp-block-button__link { padding: 0.75em 1.2em; }
}

/* Step numbers on the first-visit sequence. */
.eth-step-number {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1;
	color: var(--wp--preset--color--eth-teal);
}

/* Full-width sections sit flush: no ivory slivers between bands, or
   between the last section and the footer. */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}
.wp-block-post-content > .alignfull {
	margin-block: 0;
}

/* Embeds keep their ratio at every width. */
.wp-block-embed.is-type-video iframe {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition: none !important;
		animation: none !important;
	}
}

/* Link list on the homepage "Where to start" block. */
.eth-link-list {
	list-style: none;
	padding-left: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 1.3;
}
.eth-link-list li {
	padding-block: 0.6rem;
	border-bottom: 1px solid var(--wp--preset--color--eth-oat);
}
.eth-link-list a {
	text-decoration: none;
}
.eth-link-list a::after {
	content: " →";
}

.eth-link-list.is-compact {
	font-size: var(--wp--preset--font-size--large);
	margin-top: var(--wp--preset--spacing--30);
}
.eth-link-list.is-compact li {
	padding-block: 0.45rem;
}

/* Homepage hero (Cover block, class eth-hero): full-bleed photo, text on the
   darkened left side as in her mockup. On phones the text drops to the bottom
   and the shade runs bottom-up, so the headline never sits across the face. */
.wp-block-cover.eth-hero.eth-hero .wp-block-cover__inner-container {
	width: 100% !important; /* core sets width:auto for left-positioned content */
	margin: 0;
}
.wp-block-cover.eth-hero .wp-block-cover__inner-container > .alignwide {
	max-width: var(--wp--style--global--wide-size);
	margin-left: auto !important;
	margin-right: auto !important;
}
/* Buttons invert on the photo, as on the teal band. */
.eth-hero .wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	background: var(--wp--preset--color--eth-ivory);
	border-color: var(--wp--preset--color--eth-ivory);
	color: var(--wp--preset--color--eth-teal);
}
.eth-hero .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
	background: var(--wp--preset--color--eth-oat);
	border-color: var(--wp--preset--color--eth-oat);
}
.eth-hero :focus-visible {
	outline-color: var(--wp--preset--color--eth-ivory);
}
@media (max-width: 781px) {
	/* Phones: the photo is a fixed-height band at the top (framed on the face,
	   which sits right of centre), and the text follows on teal. The hero is
	   only as tall as photo + text, so there's no empty teal on tall phones.
	   A dedicated portrait photo can replace this crop later (see
	   eth_hero_mobile_image in functions.php). */
	.eth-hero.wp-block-cover {
		min-height: 0 !important;
		display: block;
		padding-top: calc(100vw * 1.0) !important;
		padding-bottom: var(--wp--preset--spacing--50) !important;
		background-color: var(--wp--preset--color--eth-teal);
	}
	.eth-hero .wp-block-cover__image-background {
		height: calc(100vw * 1.1) !important;
		bottom: auto !important;
		object-position: 30% 50% !important; /* mobile photo (Media 380): hands, lips, nose, eyes */
	}
	.eth-hero .wp-block-cover__background {
		background: linear-gradient(to bottom, rgba(23, 43, 41, 0) 0, rgba(23, 43, 41, 0) calc(100vw * 0.72), var(--wp--preset--color--eth-teal) calc(100vw * 1.08)) !important;
		opacity: 1 !important;
	}
}

/* Rating strip: five stars before the text. Stars are CSS so an edit in the
   block editor can't break them, and the empty alt text ("") keeps screen
   readers from reading "star star star…"; the text already says 5.0. */
.eth-rating::before {
	content: "★★★★★" / "";
	color: var(--wp--preset--color--eth-gold);
	letter-spacing: 0.12em;
	margin-right: 0.6em;
	font-size: 0.95em;
}

/* Meet Indhira portrait: 4:5 crop from a square source, framed on her.
   Change object-position if a new photo sits differently. */
.eth-portrait img {
	object-position: 72% 35%;
}

/* Pull statement: a secondary line from her own copy, set off by a gold rule. */
.eth-pull {
	border-left: 1px solid var(--wp--preset--color--eth-gold);
	padding-left: 1.25rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.5;
}

/* Breathing room before the footer when a page ends in plain content
   (full-width sections, like the homepage's, bring their own padding). */
.wp-block-post-content > :last-child:not(.alignfull) {
	margin-bottom: var(--wp--custom--space--section);
}

/* Titled pages: pull the first section up under the H1. */
.wp-block-post-title + .wp-block-post-content > .alignfull:first-child:not([class*="is-style-"]),
.wp-block-post-title + .wp-block-post-featured-image + .wp-block-post-content > .alignfull:first-child:not([class*="is-style-"]) {
	padding-top: var(--wp--preset--spacing--40) !important;
}

/* FAQ accordions (core Details block): quiet rules, serif questions,
   a plus/minus marker in teal. Keyboard and screen-reader behaviour is
   the browser's native <details>, so nothing custom to break. */
.wp-block-details {
	border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent);
	padding-block: 0.9rem;
	margin-block: 0 !important;
}
.wp-block-details:last-of-type {
	border-bottom: 1px solid color-mix(in srgb, currentColor 18%, transparent);
}
.wp-block-details summary {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.35;
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
}
.wp-block-details summary::-webkit-details-marker {
	display: none;
}
.wp-block-details summary::after {
	content: "+";
	color: var(--wp--preset--color--eth-teal);
	flex-shrink: 0;
}
.wp-block-details[open] summary::after {
	content: "–";
}
.wp-block-details[open] summary {
	margin-bottom: 0.75rem;
}

/* Skin Concerns illustrations: fill the column at their native 4:5. */
.eth-illustration {
	margin: 0;
}
.eth-illustration img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}
.eth-illustration figcaption {
	font-size: var(--wp--preset--font-size--small);
	margin-top: 0.75rem;
	text-align: left;
}

/* Contact page map (Google Maps embed, lazy-loaded). Slightly muted so it
   sits with the palette; full colour returns on hover. */
.eth-map iframe {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	min-height: 360px;
	border: 0;
	filter: grayscale(0.35) sepia(0.12);
	transition: filter 0.3s ease;
}
.eth-map iframe:hover,
.eth-map iframe:focus {
	filter: none;
}
@media (max-width: 781px) {
	.eth-map iframe { aspect-ratio: 4 / 3; }
}

/* Opening hours (synced pattern "Opening hours"): day on the left, time on the right. */
.eth-hours {
	list-style: none;
	padding-left: 0;
	max-width: 26rem;
}
.eth-hours li {
	display: flex;
	justify-content: space-between;
	gap: 1.5rem;
	padding-block: 0.55rem;
	border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent);
}
.eth-hours strong {
	font-weight: 500;
}

/* Fluent Forms: bring the contact form into the palette. */
.fluentform .ff-el-form-control {
	background: var(--wp--preset--color--eth-ivory);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--eth-charcoal) 30%, transparent);
	border-radius: 3px;
	color: var(--wp--preset--color--eth-charcoal);
	font-family: var(--wp--preset--font-family--text);
	font-size: 1rem;
	padding: 0.7em 0.85em;
}
.fluentform .ff-el-form-control:focus {
	border-color: var(--wp--preset--color--eth-teal);
	outline: 2px solid var(--wp--preset--color--eth-teal);
	outline-offset: 1px;
}
.fluentform .ff-el-input--label label {
	font-weight: 500;
	font-size: 0.9375rem;
}
.fluentform .ff-el-help-message {
	font-size: 0.875rem;
	color: var(--wp--preset--color--eth-charcoal);
	opacity: 0.8;
}
.fluentform .ff-btn-submit {
	border-radius: 3px !important;
	padding: 0.95em 1.9em !important;
	font-weight: 500;
	letter-spacing: 0.04em;
}
.fluentform .ff-btn-submit:hover {
	background-color: var(--wp--preset--color--eth-midnight) !important;
}
.eth-form-note {
	border-left: 1px solid var(--wp--preset--color--eth-gold);
	padding-left: 1rem;
	font-size: 0.9375rem;
}
.eth-contact-form {
	max-width: 640px;
}

/* Columns set to "vertically centred" in the editor. Core's rule doesn't load
   on the front end here, so it's restated. */
.wp-block-columns.are-vertically-aligned-center { align-items: center !important; }

/* Photos placed in page columns (First Visit). Crops come from the block's
   aspect ratio. */
.eth-photo { margin: 0; }
.eth-photo img { display: block; width: 100%; height: auto; }

/* Stacked text/photo rows need room between them. */
.wp-block-columns.alignwide + .wp-block-columns.alignwide,
.wp-block-columns.alignwide + .wp-block-group.alignwide {
	margin-top: var(--wp--preset--spacing--70, 4rem);
}
@media (max-width: 781px) {
	.wp-block-columns.alignwide + .wp-block-columns.alignwide,
	.wp-block-columns.alignwide + .wp-block-group.alignwide { margin-top: 3rem; }
}
/* Text + photo rows on phones (Skin Concerns, First Visit). Desktop rows
   alternate sides; stacked, that would alternate photo-first and text-first.
   Instead every row reads the same way: rule and heading, then the photo,
   then the body text. The text column is dissolved (display: contents) so
   its children and the photo column can be ordered together. */
@media (max-width: 781px) {
	.wp-block-columns:has(.eth-photo, .eth-illustration) {
		flex-direction: column;
		flex-wrap: nowrap;
		row-gap: 0;
	}
	.wp-block-columns:has(.eth-photo, .eth-illustration) > .wp-block-column:not(:has(.eth-photo, .eth-illustration)) {
		display: contents;
	}
	.wp-block-columns:has(.eth-photo, .eth-illustration) > .wp-block-column > * { order: 3; }
	.wp-block-columns:has(.eth-photo, .eth-illustration) > .wp-block-column > :is(hr, h1, h2, h3, .is-style-eth-label) { order: 1; }
	.wp-block-columns:has(.eth-photo, .eth-illustration) > .wp-block-column:has(.eth-photo, .eth-illustration) {
		order: 2;
		flex-basis: auto !important;
		margin-block: var(--wp--preset--spacing--40, 1.5rem) 0.25rem;
	}
}

/* Results: Instagram photo grid. 3 across on desktop, fewer as it narrows
   (grid layout's minimum column width). Tiles are square, and each photo is
   fitted whole (never cropped), so no before or after panel gets cut off.
   Non-square posts sit on an oat background. */
.eth-ig-grid { margin-top: var(--wp--preset--spacing--50); }
.eth-ig-grid > * { margin: 0 !important; }
.eth-ig-grid .wp-block-image,
.eth-ig-grid figure { margin: 0; }
.eth-ig-grid img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: contain !important;
	background: var(--wp--preset--color--eth-oat);
	transition: opacity .2s ease;
}
.eth-ig-grid a:hover img,
.eth-ig-grid a:focus-visible img { opacity: .85; }

/* Book page: Square Appointments embed. The inside of the frame belongs to
   Square and can't be styled; this dresses the frame so it sits in the page. */
.eth-booking {
	margin-top: var(--wp--preset--spacing--50);
	background: #fff;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--eth-charcoal) 14%, transparent);
	border-top: 2px solid var(--wp--preset--color--eth-gold);
	border-radius: 3px;
	overflow: hidden;
}
.eth-booking__frame {
	display: block;
	width: 100%;
	height: 1000px;
	border: 0;
}
@media (max-width: 781px) {
	.eth-booking__frame { height: 1200px; }
}

/* Logo (shortcode [eth_logo]). Sized by height; the lockup is ~5:3. */
.eth-logo { display: inline-block; line-height: 0; }
.eth-logo img { height: 64px; width: auto; }
.eth-logo--light img { height: 88px; }
@media (max-width: 781px) {
	.eth-logo img { height: 48px; }
	.eth-logo--light img { height: 72px; }
}

/* ------------------------------------------------------------------
   Scenes: full-bleed photo sections with text over a teal shade, like
   the homepage hero (Cover block, class eth-scene + eth-scene--left or
   eth-scene--right for the text side). First used on First Visit.
   ------------------------------------------------------------------ */
.wp-block-cover.eth-scene {
	--scene-shade: var(--wp--preset--color--eth-teal);
	min-height: 88vh;
	padding-block: var(--wp--custom--space--section);
	color: var(--wp--preset--color--eth-ivory);
}
.wp-block-cover.eth-scene.eth-scene .wp-block-cover__inner-container {
	width: 100% !important;
	margin: 0;
}
.eth-scene .wp-block-cover__inner-container > .eth-scene__text {
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto !important;
	padding-inline: var(--wp--style--root--padding-left, 1.5rem);
}
.eth-scene .eth-scene__text > * { max-width: 32rem; }
.eth-scene--right .eth-scene__text > * { margin-left: auto; }
.eth-scene :is(h1, h2, h3, p, li) { color: inherit; }
.eth-scene .wp-block-cover__background {
	opacity: 1 !important;
	background: linear-gradient(to right,
		color-mix(in srgb, var(--scene-shade) 92%, transparent) 0%,
		color-mix(in srgb, var(--scene-shade) 78%, transparent) 38%,
		color-mix(in srgb, var(--scene-shade) 40%, transparent) 66%,
		color-mix(in srgb, var(--scene-shade) 28%, transparent) 100%) !important;
}
.eth-scene--right .wp-block-cover__background {
	background: linear-gradient(to left,
		color-mix(in srgb, var(--scene-shade) 92%, transparent) 0%,
		color-mix(in srgb, var(--scene-shade) 78%, transparent) 38%,
		color-mix(in srgb, var(--scene-shade) 40%, transparent) 66%,
		color-mix(in srgb, var(--scene-shade) 28%, transparent) 100%) !important;
}
/* Big gold step number. */
.eth-scene .eth-scene__num {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(3rem, 2rem + 4vw, 5.5rem);
	line-height: 1;
	color: var(--wp--preset--color--eth-gold);
	margin-bottom: 0.25rem;
}
.eth-scene .is-style-eth-label { color: var(--wp--preset--color--eth-gold); }
/* Buttons invert on the photo, as on the homepage hero. */
.eth-scene .wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	background: var(--wp--preset--color--eth-ivory);
	border-color: var(--wp--preset--color--eth-ivory);
	color: var(--wp--preset--color--eth-teal);
}
.eth-scene .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover {
	background: var(--wp--preset--color--eth-oat);
	border-color: var(--wp--preset--color--eth-oat);
}
.eth-scene :focus-visible { outline-color: var(--wp--preset--color--eth-ivory); }
/* Scenes sit flush against each other and the header. */
:where(.is-layout-flow, .is-layout-constrained, .wp-site-blocks, main) > .wp-block-cover.eth-scene {
	margin-block: 0 !important;
}

@media (max-width: 781px) {
	/* Phones: photo band on top, text below on teal (same as the homepage). */
	.wp-block-cover.eth-scene {
		min-height: 0 !important;
		display: block;
		padding-top: calc(100vw * 0.95) !important;
		padding-bottom: var(--wp--preset--spacing--60) !important;
		background-color: var(--scene-shade);
	}
	.eth-scene .wp-block-cover__image-background {
		height: calc(100vw * 1.05) !important;
		bottom: auto !important;
	}
	.eth-scene .wp-block-cover__background,
	.eth-scene--right .wp-block-cover__background {
		background: linear-gradient(to bottom,
			transparent 0,
			transparent calc(100vw * 0.68),
			var(--scene-shade) calc(100vw * 1.03)) !important;
	}
	.eth-scene--right .eth-scene__text > * { margin-left: 0; }
}
/* Hide the sub-pixel seam between stacked scenes (88vh is rarely a whole pixel). */
:where(.is-layout-flow, .is-layout-constrained, .wp-site-blocks, main) > .wp-block-cover.eth-scene + .wp-block-cover.eth-scene {
	margin-top: -1px !important;
}

/* ------------------------------------------------------------------
   Rejuran page. Headings stay H4 (as on the live page, until Search
   Console has a baseline); these classes only change how they look.
   ------------------------------------------------------------------ */
.eth-scene .eth-scene__title {
	font-size: var(--wp--preset--font-size--xxx-large);
	line-height: 1.08;
	margin-top: 0;
}
.eth-rj-title {
	font-size: var(--wp--preset--font-size--xx-large) !important;
	line-height: 1.12;
	margin-top: 0;
}
.eth-rj-sub {
	font-family: var(--wp--preset--font-family--text) !important;
	font-size: var(--wp--custom--font-size--label, 0.8125rem) !important;
	font-weight: 500 !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--eth-gold);
	margin-top: var(--wp--preset--spacing--50) !important;
}
.is-style-eth-band .eth-rj-sub { color: var(--wp--preset--color--eth-gold); }
/* Video band: the Telemundo piece is ~2.12:1, so size the frame to it
   instead of core's 16:9 box (which added black bars). */
.eth-video { margin-top: var(--wp--preset--spacing--50); }
.eth-video .wp-block-embed__wrapper {
	position: relative;
	border-top: 2px solid var(--wp--preset--color--eth-gold);
	background: #000;
}
.eth-video .wp-block-embed__wrapper::before {
	content: "";
	display: block !important;
	padding-top: 47.19% !important; /* 604 / 1280 */
}
.eth-video iframe {
	position: absolute !important;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
}

/* ------------------------------------------------------------------
   Split: full-bleed Media & Text (class eth-split) — photo fills one
   half edge to edge, text on teal on the other. Homepage "Meet Indhira".
   ------------------------------------------------------------------ */
.wp-block-media-text.eth-split { margin-block: 0 !important; min-height: 80vh; }
.eth-split .wp-block-media-text__content {
	padding: var(--wp--custom--space--section) clamp(1.5rem, 6vw, 6rem) !important;
}
.eth-split .wp-block-media-text__content > * { max-width: 32rem; }
.eth-split :is(h1, h2, h3, p) { color: inherit; }
.eth-split .is-style-eth-label { color: var(--wp--preset--color--eth-gold); }
.eth-split .is-style-eth-hairline { border-color: var(--wp--preset--color--eth-gold); }
@media (max-width: 781px) {
	.eth-split.wp-block-media-text .wp-block-media-text__media { min-height: 100vw; }
}

/* ------------------------------------------------------------------
   Photo cards: portrait Cover blocks (class eth-card) with the text
   laid over the lower part of the photo. Homepage first-visit steps.
   ------------------------------------------------------------------ */
.wp-block-cover.eth-card {
	aspect-ratio: 4 / 5;
	min-height: 0 !important;
	height: auto;
	align-items: flex-end;
	padding: var(--wp--preset--spacing--50) !important;
	color: var(--wp--preset--color--eth-ivory);
	border-radius: 3px;
	overflow: hidden;
}
.eth-card .wp-block-cover__background {
	opacity: 1 !important;
	background: linear-gradient(to top,
		color-mix(in srgb, var(--wp--preset--color--eth-teal) 95%, transparent) 0%,
		color-mix(in srgb, var(--wp--preset--color--eth-teal) 70%, transparent) 38%,
		color-mix(in srgb, var(--wp--preset--color--eth-teal) 15%, transparent) 70%,
		color-mix(in srgb, var(--wp--preset--color--eth-teal) 10%, transparent) 100%) !important;
}
.eth-card .wp-block-cover__inner-container { width: 100% !important; }
.eth-card :is(h2, h3, p) { color: inherit; }
.eth-card h3 { margin-top: 0.25rem; }
.eth-card .eth-scene__num,
.eth-card .eth-step-number {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(2.25rem, 1.8rem + 1.5vw, 3.25rem);
	line-height: 1;
	color: var(--wp--preset--color--eth-gold);
	margin: 0;
}
@media (max-width: 781px) {
	.wp-block-cover.eth-card { aspect-ratio: 4 / 5; }
}
.eth-split .wp-block-media-text__content > .wp-block-separator { margin-left: 0 !important; margin-right: auto !important; }

/* Accessibility (WCAG AA): the brand gold #B4955A is too light for small
   text (2.5:1 on ivory, 1.9:1 on oat, 4.2:1 on teal). Small gold text uses a
   deeper gold on light backgrounds and a lighter gold on teal. Large numerals
   and rules keep the brand gold. */
:root {
	--eth-gold-text-light: #6E552A; /* 6.2:1 on ivory, 4.8:1 on oat */
	--eth-gold-text-dark: #C9AC72;  /* 5.5:1 on teal */
}
.eth-rj-sub { color: var(--eth-gold-text-light) !important; }
.is-style-eth-band .eth-rj-sub,
.eth-scene .is-style-eth-label,
.eth-split .is-style-eth-label { color: var(--eth-gold-text-dark) !important; }