/*
 * FRENKEL — content singles chrome: press/watch&read article header + meta,
 * and the careers job posting. (Body sections use sections.css.)
 */

/* ===== Watch & Read hero =====
   Image is pinned to the right edge of the page at 30% of its width; the
   title / intro / date sit in the normal container on the left. */
.cf-article{
	background: #ffffff;
	padding-bottom: 60px;
}
.cf-wrhero {
	position: relative;
}
.cf-wrhero__media {
	position: absolute;
	inset-block: 0;              /* fills the whole hero height */
	inset-inline-end: 0;
	inline-size: 40%;
	overflow: hidden;
}
.cf-wrhero__media .wpt-wrap{
	height: 100%;
}
.cf-wrhero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* The image's portrait ratio drives the hero height (30vw wide → 5/4 tall),
   so the picture always fills top to bottom regardless of how short the text
   is; the min-block-size is just a floor for very tall viewports. */
.cf-wrhero.has-media {
	min-height: 100vh;
	display: flex;
	box-shadow: inset 0px 0px 30px 0px rgba(0, 0, 0, 0.15);
}
.cf-wrhero.has-media .cf-wrhero__text {
	padding-inline-end: 50vw;
	padding-inline-start: 50px;
	padding-block-start: 150px;
	padding-block-end: 5vh;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
	margin-inline: 0;
}
.cf-text p{
	font-size: 18px;
	line-height: 1.4;
}
/* The no-image Watch & Read hero. Design-controlled (inc/design-controls.php);
   as everywhere else, each fallback repeats the value the element already
   computed to — here that means restating what base.css gives an h1, because
   naming the property at all takes it out of that rule's hands.
   The cover variant below overrides every one of these, so its own values are
   stated there rather than inherited from here. */
.cf-wrhero__title {
	margin: 0;
	font-family: var(--cf-hero-font, var(--cf-font-display));
	font-size: var(--cf-hero-size, var(--cf-h1));
	font-weight: var(--cf-hero-weight, 700);
	line-height: var(--cf-hero-lh, 1);
	color: var(--cf-hero-color, var(--cf-dark));
}
/* The same ACF field as the cover subtitle, but a different Design row — this
   is the `lead` (no hero image), that one is `herosub`. Mirrors how the press
   template splits the two. */
.cf-wrhero__subtitle {
	margin-block-start: 1.5rem;
	max-width: 46ch;
	font-family: var(--cf-lead-font, var(--cf-font-display)), sans-serif;
	font-size: var(--cf-lead-size, var(--cf-subtitle));
	font-weight: var(--cf-lead-weight, inherit);
	line-height: var(--cf-lead-lh, 1.7);
	color: var(--cf-lead-color, inherit);
}
.cf-wrhero__meta {
	margin-block-start: 2rem;
	display: grid;
	gap: .35rem;
	font-family: var(--cf-herodate-font, var(--cf-font-latin), var(--cf-font-display), sans-serif);
	font-size: var(--cf-herodate-size, var(--cf-small));
	font-weight: var(--cf-herodate-weight, inherit);
	line-height: var(--cf-herodate-lh, inherit);
	color: var(--cf-herodate-color, inherit);
	/* Not design-controlled: these are what makes it a meta label, not type. */
	letter-spacing: .08em;
	text-transform: uppercase;
}
.cf-wrhero__meta-row { display: flex; gap: .75em; }
.cf-wrhero__meta dt,
.cf-wrhero__meta dd { margin: 0; }

/* ===== Watch & Read cover hero =====
   Full-bleed image running under the transparent header, with the headline /
   intro / date overlaid at the bottom-left. A soft bottom wash keeps the text
   legible over any featured image. */
.cf-wrhero--cover {
	position: relative;
	margin-block-start: calc(var(--cf-header-h) * -1);
	overflow: hidden;
}
.cf-wrhero--cover .cf-wrhero__media {
	position: static;
	width: 100%;
	inline-size: 100%;
	block-size: min(92vh, 860px);
	overflow: hidden;
}
.cf-wrhero--cover .cf-wrhero__media .wpt-wrap { height: 100%;
	width: 100%;}
.cf-wrhero--cover .cf-wrhero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/*
 * Wash over the whole hero, the counterpart of .cf-presshero::before. On the
 * hero itself rather than on __overlay so it covers the entire photo: as an
 * overlay background it would only ever be as tall as the text and would move
 * with it, so the "Distance from top" row would drag the gradient along and
 * leave the top of the image unwashed.
 *
 * Its own variable, not --cf-presshero-wash, so the two heroes can be tuned
 * apart — they do not share a text colour.
 */
.cf-wrhero--cover::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--cf-wrhero-wash, linear-gradient(transparent, rgba(45, 42, 38, .72)));
	pointer-events: none;
}
.cf-wrhero--cover .cf-wrhero__overlay {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	padding-block: 8rem 3rem;
	/* Above the wash (z-index: 1), or the gradient would paint over the text. */
	z-index: 2;
}
.cf-wrhero--cover .cf-wrhero__text {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
/* Each of these re-declares every typographic property its unqualified
   counterpart above sets. That is load-bearing: if one were left out, the base
   rule's fallback — and so the other variant's Design row — would show through
   here. */
.cf-wrhero--cover .cf-wrhero__title {
	margin: 0;
	max-inline-size: 16ch;
	font-family: var(--cf-hero-font, var(--cf-font-display)), serif;
	font-weight: var(--cf-hero-weight, 500);
	font-size: var(--cf-hero-size, var(--cf-h1));
	line-height: var(--cf-hero-lh, .98);
	color: var(--cf-hero-color, var(--cf-dark));
}
.cf-wrhero--cover .cf-wrhero__subtitle {
	margin-block-start: 1.25rem;
	max-inline-size: 44ch;
	font-family: var(--cf-herosub-font, var(--cf-font-display)), serif;
	font-size: var(--cf-herosub-size, var(--cf-subtitle));
	font-weight: var(--cf-herosub-weight, inherit);
	line-height: var(--cf-herosub-lh, 1.6);
	color: var(--cf-herosub-color, var(--cf-dark));
}
/* A different element from .cf-wrhero__meta, not a variant of it — the two
   never both match, so each simply states its own values. */
.cf-wrhero--cover .cf-wrhero__date {
	margin-block-start: 1.75rem;
	font-family: var(--cf-herodate-font, var(--cf-font-latin), var(--cf-font-display), sans-serif);
	font-size: var(--cf-herodate-size, var(--cf-small));
	font-weight: var(--cf-herodate-weight, inherit);
	line-height: var(--cf-herodate-lh, inherit);
	color: var(--cf-herodate-color, var(--cf-dark));
	letter-spacing: .12em;
	text-transform: uppercase;
}
.cf-wrhero--cover .cf-wrhero__date-label { margin-inline-end: .6em; }

/* Empty by design: it replaces the hero date, which is switched off in
   single-watch_read.php, and exists only to keep the space that date left under
   the subtitle. A zero-height flex child's margins do not collapse, so this is
   exactly 2rem of gap and nothing else. */
.cf-wrhero__spacer { margin-block-start: 2rem; }

@media (max-width: 782px) {
	.cf-wrhero--cover .cf-wrhero__media { block-size: min(80vh, 560px); }
	.cf-wrhero--cover .cf-wrhero__overlay { padding-block: 5rem 2rem; }
	/* No font-size here. It used to restate var(--cf-subtitle), which the rule
	   above already sets — a no-op, but one that outranked it (same specificity,
	   later, inside a matching query) and so would have pinned the subtitle size
	   below 782px no matter what the Design row said. */
}

/*
 * Hero text pushed down from the top instead of sitting on the bottom edge —
 * the Watch & Read counterpart of .cf-presshero--top, set by the "Distance from
 * top" row and applied by frenkel_design_hero_class(). The overlay is already
 * absolutely positioned here, so this only has to swap which edge it hangs off;
 * a percentage inset resolves against the hero's height, which is what makes
 * the % mean what the editor expects.
 *
 * Deliberately after the 782px block above, which also sets this overlay's
 * padding at the same specificity — later source has to win, or the offset
 * would come out double-padded on phones.
 */
.cf-wrhero--top .cf-wrhero__overlay {
	inset-block-start: var(--cf-hero-top, 45%);
	inset-block-end: auto;
	padding-block: 0 3rem;
}
/* Text near the top, so the wash runs the other way — ::before reads this, the
   text block still paints nothing itself. Mirrors .cf-presshero--top. */
.cf-wrhero--top {
	--cf-wrhero-wash: linear-gradient(rgba(45, 42, 38, .62), transparent);
}

/* ===== Byline band above the body (title left, source · date right) ===== */
.cf-wrbyline {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding-block: var(--cf-section-y) 1.25rem;
}
.cf-wrbyline__title { margin: 0; }
/* Credit column: source label on top, "author · date" underneath. dir="auto"
   on the wrapper flips it to RTL when the source is Hebrew. */
.cf-wrbyline__credit { text-align: end; }
.cf-wrbyline__source {
	display: block;
	font-family: var(--cf-font-he-display);
	font-size: var(--cf-h3);
	line-height: 1.2;
	text-align: start;
}
.cf-wrbyline__meta {
	margin: .35rem 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: .5em;
	justify-content: flex-end;
	font-size: var(--cf-small);
	opacity: .8;
}
.cf-wrbyline__published { display: inline-flex; gap: .4em; }
/* Thin divider between author and the published block. */
.cf-wrbyline__author + .cf-wrbyline__published::before {
	content: "|";
	margin-inline-end: .5em;
	opacity: .6;
}

@media (max-width: 782px) {
	/* Stack: image on top, text below — fully neutralise the desktop hero
	   (100vh / flex / big paddings) so nothing is left oversized on phones. */
	.cf-wrhero.has-media {
		display: block;
		block-size: auto;
		min-height: 0;
		min-block-size: 0;
		box-shadow: none;
	}
	.cf-wrhero__media {
		position: static;
		inline-size: auto;
		margin-inline: var(--cf-gutter);
		aspect-ratio: 4 / 2;
		margin: 0 0 1.75rem;
	}
	.cf-wrhero__media .wpt-wrap{
		width: 100%;
	}

	.cf-wrhero.has-media .cf-wrhero__text {
		display: block;
		padding-block: 0;
		padding-inline-end: var(--cf-gutter);
	}
	/* Same reason as the cover subtitle further up: this restated the size the
	   unqualified rule already sets, and would have pinned it on phones. */
}

/* ===== Press hero: full-width cover image, title + intro overlaid =====
   The photo is a background on the header itself rather than an <img> in a
   wrapper, matching .cf-project__hero: the box owns its own size, so there is
   no inner element to keep in sync and no object-fit. --cf-hero-image is set
   inline per post (frenkel_hero_background_attr). */
.cf-presshero {
	position: relative;
	/* Runs under the transparent sticky header, like the project hero. */
	margin-block-start: calc(var(--cf-header-h) * -1);
	/* Same trap as the project hero: aspect-ratio plus a min-block-size
	   inflates an indefinite width until the ratio is satisfied, so the box
	   runs off the right edge on narrow screens. Pin the inline size. */
	inline-size: 100%;
	max-inline-size: 100%;
	aspect-ratio: 21 / 9;
	min-block-size: min(64vh, 620px);
	overflow: hidden;
	background-image: var(--cf-hero-image, none);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;

	/* The title block is laid out, not absolutely placed — same as
	   .cf-project__hero. The wash stays absolute, so it is out of this flow
	   and still covers the whole box: an absolute child resolves against the
	   padding box, which the 5% below does not inset. */
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-end;
	padding: 5%;
}
/*
 * Wash over the whole hero, so the text block carries none of it. As a
 * background on .cf-presshero__overlay it was only ever as tall as the text
 * and moved with it — pushing the title down the image dragged the gradient
 * along, leaving the top of the photo unwashed.
 */
.cf-presshero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--cf-presshero-wash, linear-gradient(transparent, rgba(45, 42, 38, .72)));
	pointer-events: none;
}

.cf-presshero__overlay {
	/* In flow, so the hero's align-items / justify-content actually place it.
	   `relative` rather than `static` because z-index only applies to a
	   positioned box — without it the wash would paint over the title. */
	position: relative;
	/* Above the wash (z-index: 1). */
	z-index: 2;
	/* Unlike the project hero, .cf-container is a child here rather than a
	   class on this element — without a width this flex item would shrink to
	   its content and the container could never centre against it. */
	inline-size: 100%;
	color: var(--cf-cream);
}
.cf-presshero__title {
	margin: 0;
	/* Full width by default; a per-post cap arrives as an inline max-width from
	   the Press Details "Title max width" field. The old fixed 18ch broke any
	   headline longer than a few words. */
	max-width: 100%;
	/* Type, colour and line-height live with the other Design-driven rules
	   further down this file, not here. */
	text-shadow: 0 1px 12px rgba(30, 28, 25, .35);
}
.cf-presshero__subtitle {
	margin-block-start: 1.25rem;
	max-width: 52ch;
	/* Ditto — see .cf-presshero__subtitle under "Short description" below. */
	text-shadow: 0 1px 10px rgba(30, 28, 25, .4);
}

/* Byline band with the title removed (title now lives on the hero):
   push the credit block to the end of the row. */
.cf-wrbyline--credit-only { justify-content: flex-end; }

/* End-of-article source link + logo (right-aligned). */
.cf-presslink {
	margin-block: var(--cf-section-y);
}
/* Placed inline by the External Article Link content section instead: the row's
   padding fields own the spacing, so the block's own margin gets out of the way. */
.cf-presslink--inline {
	margin-block: 0;
}
.cf-presslink__link {
	display: inline-block;
	/* Type and colour live with the Design-driven rules further down. */
	text-decoration: none;
	transition: opacity var(--cf-dur) var(--cf-ease);
}
.cf-presslink__link:hover,
.cf-presslink__link:focus-visible { opacity: .6; }
.cf-presslink__logo {
	display: block;
	margin-block-start: 1rem;
}
.cf-presslink__logo img {
	display: inline-block;
	max-block-size: 34px;
	inline-size: auto;
}

/* ===== Article (press / watch & read) ===== */
.cf-article__hero { position: relative; }
.cf-article__hero-media {
	aspect-ratio: 16 / 9;
	overflow: hidden;
}
.cf-article__hero-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.cf-article__hero-overlay {
	position: absolute;
	inset-block-end: 0;
	inset-inline: 0;
	padding-block: 2.5rem;
	background: linear-gradient(transparent, rgba(96, 92, 84, .6));
}
.cf-article__hero-overlay .cf-article__title { color: var(--cf-cream); }

.cf-article__head { margin-block: var(--cf-section-y) 0; }
.cf-article__title { margin: 0; }

.cf-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-block: 1.5rem;
	font-size: var(--cf-small);
}
.cf-article__logo img { max-height: 40px; width: auto; }
.cf-article__credit { opacity: .7; }

.cf-article__lead {
	margin-block: var(--cf-gap);
	font-size: 1.125rem;
}
.cf-article__cover,
.cf-article__video,
.cf-article__external { margin-block: var(--cf-section-y); }

/* ===== Job posting ===== */
.cf-job {
	margin-block: var(--cf-section-y);
	max-width: 760px;
}
.cf-job__title { margin: 0 0 1rem; }
.cf-job__meta {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	font-size: var(--cf-small);
	letter-spacing: .08em;
	text-transform: uppercase;
	opacity: .7;
}
.cf-job__req { margin-block: var(--cf-section-y); }
.cf-job__req h2 { margin-block-end: 1rem; }
.cf-job__apply { margin-block-start: var(--cf-section-y); }


@media (max-width: 782px) {
	.cf-wrbyline{
		justify-content: center;
	}
	.cf-wrbyline * {
		text-align: center;
	}
}

/* ===== Single Service =====
 * Title, featured image, editor content — nothing else, so this only needs
 * the vertical rhythm between the three. Type and measure come from
 * .cf-article__title and .cf-richtext, shared with the other singles.
 */
.cf-service__media {
	margin-block: var(--cf-section-y) 0;
}
.cf-service__media img {
	width: 100%;
	height: auto;
}
.cf-service__body {
	margin-block: var(--cf-section-y);
	max-width: 760px;
}

/* ===== Per-post design overrides (Design meta box, inc/design-controls.php) =====
   Every fallback below repeats the value the element already computed to, so
   loading these rules changes nothing until an override is actually set.
   Direction is an attribute on the markup, not a property, so it needs no rule. */

/* Whole-page alignment. Inherited by the content sections below the hero. */
.cf-article { text-align: var(--cf-content-align, inherit); }

/* Hero alignment covers the title and the short description together — they
   read as one block, so splitting them here would be a trap. */
.cf-presshero__title,
.cf-presshero__subtitle,
.cf-article__head .cf-article__title,
.cf-article__head .cf-article__lead,
.cf-wrhero__title,
.cf-wrhero__subtitle,
.cf-wrhero__meta,
.cf-wrhero__date {
	text-align: var(--cf-hero-align, inherit);
}

/* --- Hero title: The Seasons, bold --- */
.cf-presshero__title,
.cf-article__head .cf-article__title {
	font-family: var(--cf-hero-font, var(--cf-font-display));
	font-size: var(--cf-hero-size, var(--cf-h1));
	/* 700, not the 600 base.css gives every other h1 — The Seasons ships a real
	   bold file, so this is the one weight that maps to an actual face rather
	   than being matched to the nearest one. */
	font-weight: var(--cf-hero-weight, 700);
}
/* Two different line-height defaults: the press hero sets 1, a plain header
   inherits the 1.1 from base.css. */
.cf-presshero__title { line-height: var(--cf-hero-lh, 1); }
.cf-article__head .cf-article__title { line-height: var(--cf-hero-lh, 1.1); }
.cf-presshero__title { color: var(--cf-hero-color, var(--cf-cream)); }
.cf-article__head .cf-article__title { color: var(--cf-hero-color, var(--cf-dark)); }

/* --- Short description: The Seasons, regular ---
   The same ACF field, but two elements with their own Design rows: over the
   hero image it is a 27px subtitle on cream, and without one it is a 1.125rem
   lead in the body colour. They were a single `desc` row until the two layouts
   needed different type. */
.cf-presshero__subtitle {
	font-family: var(--cf-herosub-font, var(--cf-font-display));
	font-size: var(--cf-herosub-size, var(--cf-subtitle));
	font-weight: var(--cf-herosub-weight, 400);
	line-height: var(--cf-herosub-lh, 1.7);
	color: var(--cf-herosub-color, var(--cf-cream));
}
.cf-article__head .cf-article__lead {
	font-family: var(--cf-lead-font, var(--cf-font-display));
	font-size: var(--cf-lead-size, 1.125rem);
	font-weight: var(--cf-lead-weight, 400);
	line-height: var(--cf-lead-lh, inherit);
	color: var(--cf-lead-color, inherit);
}

/* --- Byline title: Regga, regular ---
   Via the token rather than naming Regga directly, so it keeps the designed
   fallback chain — Regga's licensed files are still pending, and until they
   land the token resolves to the self-hosted Cafe. */
.cf-wrbyline__title {
	font-family: var(--cf-bylinetitle-font, var(--cf-font-he-display));
	font-size: var(--cf-bylinetitle-size, var(--cf-h2));
	font-weight: var(--cf-bylinetitle-weight, 400);
	line-height: var(--cf-bylinetitle-lh, 1.1);
	color: var(--cf-bylinetitle-color, var(--cf-dark));
}

/* --- Credit text, author, date: Heebo 400 ---
   Heebo is self-hosted (assets/fonts/heebo); --cf-font-he-body carries it
   plus the fallback chain behind it. */

.cf-wrbyline__source {
	font-family: var(--cf-credit-font, var(--cf-font-he-body));
	font-size: var(--cf-credit-size, var(--cf-h3));
	font-weight: var(--cf-credit-weight, 400);
	line-height: var(--cf-credit-lh, 1.2);
	color: var(--cf-credit-color, inherit);
}

/* --- Author --- */
.cf-wrbyline__author {
	font-family: var(--cf-author-font, var(--cf-font-he-body));
	font-size: var(--cf-author-size, inherit);
	font-weight: var(--cf-author-weight, 400);
	line-height: var(--cf-author-lh, inherit);
	color: var(--cf-author-color, inherit);
}

/* --- Publication date (the "פורסם:" label and the date together) --- */
.cf-wrbyline__published {
	font-family: var(--cf-date-font, var(--cf-font-he-body));
	font-size: var(--cf-date-size, inherit);
	font-weight: var(--cf-date-weight, 400);
	line-height: var(--cf-date-lh, inherit);
	color: var(--cf-date-color, inherit);
}

/* --- External article link: the "read it at the publisher" line --- */
.cf-presslink__link {
	font-family: var(--cf-presslink-font, inherit);
	font-size: var(--cf-presslink-size, 22px);
	font-weight: var(--cf-presslink-weight, inherit);
	line-height: var(--cf-presslink-lh, inherit);
	color: var(--cf-presslink-color, var(--cf-dark));
}

/* ===== "Get in touch" button =====
   The theme's .cf-btn (base.css) with the design settings wired in. Three
   things about the selectors are load-bearing, so they are written out rather
   than tidied:

   1. `.cf-btn.cf-cta`, not a bare `.cf-cta`. Base's `.cf-btn:hover` is two
      classes' worth of specificity; a single-class rule would lose to it and the
      hover inversion would stomp the configured normal colours. The compound
      ties, and this file loads after base.css (it depends on frenkel-base), so
      source order settles it.
   2. That tie also switches base's hover inversion off for this button, so both
      state rules below have to state all three colours themselves.
   3. The `color` declaration repeats `var(--_fg)` in every rule. Base already
      sets `color: var(--_fg)`, but at one class it loses to an Elementor kit's
      `.elementor-kit-N a`, so setting only the custom property would leave the
      text colour alone — the same reason the Press Grid widget writes both. */
.cf-cta-wrap {
	margin-block: var(--cf-section-y);
	text-align: var(--cf-cta-align, start);
}

/* Minimums, not `auto`: .cf-btn is a fixed 200x56 "per spec", and collapsing it
   would restyle every unconfigured site. With nothing set these compute to
   exactly that box with its 0/20px padding. */
.cf-btn.cf-cta {
	width: auto;
	min-width: 200px;
	height: auto;
	min-height: 56px;
	padding: var(--cf-cta-pad-y, 0) var(--cf-cta-pad-x, 20px);
	border-radius: var(--cf-cta-radius, 0);
	font-family: var(--cf-cta-font, var(--cf-font-latin));
	font-size: var(--cf-cta-size, 15px);
	font-weight: var(--cf-cta-weight, inherit);
	line-height: var(--cf-cta-lh, 1);
	--_fg: var(--cf-cta-color, var(--cf-dark));
	--_bg: var(--cf-cta-bg, transparent);
	--_bd: var(--cf-cta-border, var(--cf-dark));
	color: var(--_fg);
}
/* Unset, these keep base's "hover inverts to negative" design rule. */
.cf-btn.cf-cta:hover,
.cf-btn.cf-cta:focus-visible {
	--_fg: var(--cf-cta-color-hover, var(--cf-cream));
	--_bg: var(--cf-cta-bg-hover, var(--cf-dark));
	--_bd: var(--cf-cta-border-hover, var(--cf-dark));
	color: var(--_fg);
}
/*
 * Must stay after :hover. A pressed button is also hovered and the two rules
 * have identical specificity, so source order is the only thing that lets the
 * active colours win. Each falls back to its hover value, so setting only two
 * states still behaves.
 *
 * :active fires on press, which for an <a> means pointer only — keyboard
 * activation will not show this state. Accepted rather than scripted around.
 */
.cf-btn.cf-cta:active {
	--_fg: var(--cf-cta-color-active, var(--cf-cta-color-hover, var(--cf-cream)));
	--_bg: var(--cf-cta-bg-active, var(--cf-cta-bg-hover, var(--cf-dark)));
	--_bd: var(--cf-cta-border-active, var(--cf-cta-border-hover, var(--cf-dark)));
	color: var(--_fg);
}

/*
 * text-align on its own cannot move these: they carry a max-width (the hero
 * title's is per post, the description's is 52ch), so the box itself has to be
 * shifted by its margins — a title left at the default 100% has nothing to
 * shift, which is the point of setting a narrower one. Physical
 * left/right rather than logical, to match the physical Right/Center/Left
 * labels in the meta box — otherwise picking RTL would quietly invert what
 * the editor just chose.
 */
.cf-design-heroalign-center :is(.cf-presshero__title, .cf-presshero__subtitle, .cf-article__title, .cf-article__lead, .cf-wrhero__title, .cf-wrhero__subtitle, .cf-wrhero__meta, .cf-wrhero__date) {
	margin-left: auto;
	margin-right: auto;
}
.cf-design-heroalign-right :is(.cf-presshero__title, .cf-presshero__subtitle, .cf-article__title, .cf-article__lead, .cf-wrhero__title, .cf-wrhero__subtitle, .cf-wrhero__meta, .cf-wrhero__date) {
	margin-left: auto;
	margin-right: 0;
}
.cf-design-heroalign-left :is(.cf-presshero__title, .cf-presshero__subtitle, .cf-article__title, .cf-article__lead, .cf-wrhero__title, .cf-wrhero__subtitle, .cf-wrhero__meta, .cf-wrhero__date) {
	margin-left: 0;
	margin-right: auto;
}

/*
 * Hero text pushed down from the top instead of sitting on the bottom edge.
 * A percentage inset on an absolutely positioned box resolves against the
 * containing block's height, which is what makes the % mean what the editor
 * expects — a percentage padding would resolve against the width instead.
 */
/*
 * "Distance from the top" is a percentage of the hero height, and that only
 * means anything on an absolutely positioned box — as a relative offset it
 * would push the title *down* from its flex-end position and straight out of
 * the hero. So this variant opts back out of the flex flow. The 5% inline
 * inset matches the hero's own padding, so the text lines up either way.
 */
.cf-presshero--top .cf-presshero__overlay {
	position: absolute;
	inset-block-start: var(--cf-hero-top, 45%);
	inset-block-end: auto;
	inset-inline: 5%;
	padding-block: 0 2.5rem;
}
/* Text near the top, so the wash runs the other way — the hero's ::before
   reads this, the text block no longer paints anything itself. */
.cf-presshero--top {
	--cf-presshero-wash: linear-gradient(rgba(45, 42, 38, .62), transparent);
}

/* Background images get no srcset, so swap to the smaller file by hand.
   Falls back to the full-size one when that is all the post has. */
@media (max-width: 782px) {
	.cf-presshero {
		background-image: var(--cf-hero-image-sm, var(--cf-hero-image, none));
	}
}