/**
 * wyg-css-publication-single
 *
 * WHAT: The essay page's own residue -- the crumb bar, the dark masthead, the
 * two-column article, and the five rail cards.
 *
 * NOT HERE: the footnote apparatus, the notes heading, the `:target` highlight
 * and the print stylesheet. Those are `wyg-css-publication`, they are scoped to
 * the `.single-publication` BODY class, and they therefore survived the switch
 * from Hello Elementor's default template to this Theme Builder single without
 * a single change. Verified 2026-08-20: 8 markers, 8 notes, heading intact.
 *
 * SPECIFICITY: see wyg-css-research-publications §0 -- the same three Elementor
 * layers apply here. Containers need `.e-con` plus a doubled class to clear
 * `.e-con.e-flex` at 0,2,0; headings need a doubled class to clear the per-post
 * rule that ties every heading to the Primary global.
 */

/* ==========================================================================
   1. Crumb bar
   ========================================================================== */

.wyg-pub-crumb .wyg-pub-crumb__inner,
.wyg-pub-crumb {
	font-family: var( --wyg-mono );
	font-size: var( --e-global-typography-1c3ea07a-font-size );
	letter-spacing: 0.02em;
	color: var( --e-global-color-d89acb7d );
	/* Wraps rather than truncates: the current essay's full title is the one
	   crumb a reader actually needs, so it has to stay legible at 390px.
	   Same fix as the mockup carries, HO-23. */
	overflow-wrap: break-word;
}

.wyg-pub-crumb.wyg-pub-crumb a { color: var( --e-global-color-accent ); text-decoration: none; }

.wyg-pub-crumb.wyg-pub-crumb a:hover,
.wyg-pub-crumb.wyg-pub-crumb a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Yoast wraps its separator in a span with no class of its own. */
.wyg-pub-crumb .breadcrumb_last { color: var( --e-global-color-d89acb7d ); }

/* ==========================================================================
   2. Masthead
   ========================================================================== */

.wyg-pub-masthead__idx.wyg-pub-masthead__idx .elementor-heading-title,
.wyg-pub-chip.wyg-pub-chip .elementor-heading-title,
.wyg-pub-season.wyg-pub-season .elementor-heading-title {
	font-family: var( --wyg-mono );
	font-size: var( --e-global-typography-1c3ea07a-font-size );
	font-weight: var( --wyg-label-weight, 600 );
	text-transform: uppercase;
	letter-spacing: 0.14em;
	margin: 0;
}

/* The two chips are bordered; the season beside them is not. */
.wyg-pub-chip.wyg-pub-chip .elementor-heading-title {
	border: 1px solid rgba( 225, 194, 154, 0.55 );
	padding: 0.22rem 0.55rem;
	letter-spacing: 0.1em;
	display: inline-block;
}

.wyg-pub-masthead__title.wyg-pub-masthead__title .elementor-heading-title {
	line-height: 1.06;
	letter-spacing: -0.022em;
	max-inline-size: 20ch;
	margin: 0;
}

.wyg-pub-masthead__by.wyg-pub-masthead__by .elementor-heading-title {
	font-family: var( --wyg-mono );
	font-size: var( --e-global-typography-a66c1ed1-font-size );
	letter-spacing: 0.03em;
	margin: 0.75rem 0 0;
}

.wyg-pub-masthead__proj.wyg-pub-masthead__proj .elementor-heading-title {
	font-family: var( --wyg-mono );
	font-size: var( --e-global-typography-1c3ea07a-font-size );
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin: 0.75rem 0 0;
}

/* ==========================================================================
   3. The two columns
   ========================================================================== */

.e-con.wyg-pub-main.wyg-pub-main { flex: 1 1 62%; min-inline-size: 0; }

/* 🚨 PARTIALLY STICKY -- Todd and Gabi, 9 August sync, recorded in the
   Gemini notes as an Aligned decision: "the website sidebar will utilize partial
   stickiness". Todd's own words in the transcript: "we can make part of the
   sidebar sticky and not others... the author section doesn't need to be sticky.
   But we'll start the stickiness here... the majority of the time they're reading
   the article, they're gonna see these 3, and then when they get down to the
   bottom of the page, the bottom of the page will show this."

   An earlier version of this file said NOT sticky, citing the mockup: the rail is
   taller than the viewport, so pinning ALL of it puts Related permanently below
   the fold. That is true of a fully sticky rail and is exactly what partial
   stickiness answers. The mockup note was taken as settled without checking the
   meeting record.

   RE-MEASURED 2026-08-23 (HO-52), and the arithmetic below REPLACES the
   2026-08-20 figures, which no longer describe this rail. Two things moved: the
   Themes card was merged into About this publication as a chips row, and the
   author records have been filled in since, so the author card is now more than
   twice the height it was.

   At a 997px viewport with the chrome bottom at 170px (130px header + the 40px
   review-gate bar) and the sticky group's own 1.5rem offset, 803px is usable.
   Card heights, rail 360px wide, 18px gaps throughout:

     Author 844 / Take it with you 166 / About this publication 494 / Related 400

   The sticky group is Take it with you + About + one gap = 678px, which clears
   803 with 125px to spare -- still the only grouping that fits, and still the
   one Todd described. The merge bought about 51px: the two old cards plus the
   gap between them came to 545px where the merged card is 494px.

   The author card at 844px is the number to watch. It is not in the sticky
   group and does not have to fit the viewport, but it is now taller than the
   whole group beneath it, so anything that later moves a card INTO the group
   should be measured against 803 rather than assumed to fit. */
.e-con.wyg-pub-rail.wyg-pub-rail {
	flex: 0 1 34%;
	min-inline-size: 0;
	max-inline-size: 360px;
	/* 🚨 STRETCH IS LOAD-BEARING. `position: sticky` is bounded by its PARENT,
	   so with a content-height rail the group would travel only the rail's own
	   1,526px and stop -- roughly a fifth of the 8,686px article. Stretching the
	   rail BOX to the article's height gives the group the full run. The cards
	   stay content-height at the top; the box itself paints nothing. */
	align-self: stretch;
}

/* 🚨 THE TOKEN LIVES IN wyg-css-global NOW -- HO-46, 2026-08-21. This file used
   to define its own `--wyg-chrome-bottom` (130/170px, desktop-only, and wrong
   the moment an admin bar was present -- see the HO-46 build log). One
   definition, consumed here and by wyg-css-publication, responsive across the
   header's own two breakpoints and admin-bar-aware via wyg-review-gate's own
   `--wyg-review-gate-top`/`-h`. See wyg-css-global section 6. */

/* The zone GROWS to fill the space between the author card and Related, and the
   sticky group is bounded by it -- so Related pushes the group up instead of
   scrolling underneath it. Todd, Userback #8240623: "it should release the sticky
   elements and push them up with it." */
.e-con.wyg-pub-rail__zone.wyg-pub-rail__zone { flex: 1 1 auto; min-block-size: 0; }

.e-con.wyg-pub-rail__sticky.wyg-pub-rail__sticky {
	position: sticky;
	top: calc( var( --wyg-chrome-bottom ) + 1.5rem );
}

/* Related needs no auto margin: the growing zone above it already puts it at the
   foot of the rail, and it now ENDS the sticky run rather than overlapping it. */

/* ==========================================================================
   4. Abstract
   ========================================================================== */

.e-con.wyg-pub-abstract.wyg-pub-abstract {
	border-inline-start: 4px solid var( --e-global-color-accent );
	padding-inline-start: clamp( 1rem, 2vw, 1.4rem );
	padding-block: 0.15rem;
}

.wyg-pub-abstract__k.wyg-pub-abstract__k .elementor-heading-title {
	font-family: var( --wyg-mono );
	font-size: var( --e-global-typography-1c3ea07a-font-size );
	font-weight: var( --wyg-label-weight, 600 );
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin: 0;
}

.wyg-pub-abstract__body.wyg-pub-abstract__body {
	font-size: var( --e-global-typography-95a228b0-font-size );
	line-height: 1.5;
	max-inline-size: 56ch;
}

.wyg-pub-abstract__body.wyg-pub-abstract__body p { margin: 0; }

/* ==========================================================================
   5. The essay
   ========================================================================== */

/* 🚨 The measure needs Elementor's own selector SHAPE, not more classes.
   `custom-frontend.min.css` ships
   `.e-con.e-con > .e-con-inner > .elementor-widget, .elementor.elementor .e-con > .elementor-widget { max-width: 100% }`
   at 0,4,0 and loads after the snippets, so a doubled class at 0,2,0 lost and the
   essay ran the full column width. Mirroring the shape reaches 0,5,0 and makes it
   obvious what is being answered -- same move as wyg-css-homepage's measures,
   build-log 2026-08-19-HO-35 §5b. */
.elementor.elementor .e-con .elementor-widget.wyg-essay-body {
	font-size: var( --e-global-typography-a66c1ed1-font-size );
	line-height: 1.75;
	max-inline-size: 66ch;
}

.wyg-essay-body.wyg-essay-body p { margin: 0 0 1.75rem; }
.wyg-essay-body.wyg-essay-body > *:last-child { margin-block-end: 0; }

/* The drop cap. Applied to the first paragraph rather than a `.lead` class,
   because the essays arrive from Mammoth as plain paragraphs and nothing in the
   import marks a lead. `::first-letter` is inert on an empty or image-led
   paragraph, so an essay that opens differently simply does not get one. */
.wyg-essay-body.wyg-essay-body > p:first-of-type::first-letter {
	float: inline-start;
	font-size: 3.6em;
	line-height: 0.84;
	font-weight: 900;
	color: var( --e-global-color-primary );
	padding-inline-end: 0.09em;
	padding-block-start: 0.06em;
}

/* Word's section breaks, when an essay has them. */
.wyg-essay-body.wyg-essay-body hr {
	border: none;
	margin: 3.5rem 0;
	text-align: center;
	height: auto;
	background: none;
}

.wyg-essay-body.wyg-essay-body hr::before {
	content: "\002A\00A0\00A0\002A\00A0\00A0\002A";
	font-family: var( --wyg-mono );
	font-size: var( --e-global-typography-fd54d4a4-font-size );
	letter-spacing: 0.2em;
	color: var( --e-global-color-accent );
}

/* 🚨 The notes list draws a SECOND hairline under the heading's own, and
   sits 48px below it. Both come from wyg-css-publication, whose `.wyg-notes-heading + ol`
   reset does not win here. Zeroed rather than edited there, because that file is
   the shared apparatus and this is the essay page's own layout. Todd, Userback
   #8240657: "this extra line shouldn't be here, and then the list would move up a tad." */
.single-publication .wyg-notes-heading + ol:has( > li[id] ) {
	/* 0,2,2 to match wyg-css-publication's own `ol:has( > li[id^="fn-"] )`, which is
	   where both the second hairline and the 3rem gap come from. A plain
	   `.wyg-notes-heading + ol` is 0,2,1 and loses. */
	border-block-start: none;
	margin-block-start: 1.125rem;
}

/* 🚨 NO MEASURE ON THE NOTES -- and that is the fix, not an omission.
   The notes heading and its list sit INSIDE the essay widget, which already caps
   at 66ch. Adding `max-inline-size: 66ch` to the heading as well made it
   NARROWER, not equal: `ch` resolves against the element's own font, and the
   heading is 13px mono, so 66ch measured 66 monospace characters -- 517px
   against the body's 752px. The hairline above the notes stopped short of the
   notes beneath it. The mockup carries the same note against `.notes-block`.
   Keep measure caps on elements that inherit the body face. */

/* ==========================================================================
   6. Cite this essay
   ========================================================================== */

.e-con.wyg-pub-cite.wyg-pub-cite {
	border-block-start: 1px solid var( --e-global-color-5f8039f0 );
	padding-block-start: 1.125rem;
	max-inline-size: 66ch;
}

.wyg-pub-cite__k.wyg-pub-cite__k .elementor-heading-title {
	font-family: var( --wyg-mono );
	font-size: var( --e-global-typography-1c3ea07a-font-size );
	font-weight: var( --wyg-label-weight, 600 );
	text-transform: uppercase;
	letter-spacing: 0.12em;
	margin: 0;
}

.wyg-pub-cite__c {
	font-size: var( --e-global-typography-fd54d4a4-font-size );
	line-height: 1.6;
	color: var( --e-global-color-d89acb7d );
	background-color: #EDE7DC;
	border: 1px solid var( --e-global-color-3e660e4c );
	padding: 0.9rem 1.05rem;
}

/* ==========================================================================
   7. The rail
   ========================================================================== */

.wyg-pub-card,
.wyg-pub-card--dl {
	background-color: var( --e-global-color-dbfd062c );
	border: 1px solid var( --e-global-color-3e660e4c );
	padding: clamp( 1.1rem, 2.2vw, 1.4rem );
}

.wyg-pub-card__k.wyg-pub-card__k .elementor-heading-title,
.wyg-pub-card__k {
	font-family: var( --wyg-mono );
	font-size: var( --e-global-typography-1c3ea07a-font-size );
	font-weight: var( --wyg-label-weight, 600 );
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var( --e-global-color-accent );
	margin: 0 0 1.125rem;
	display: block;
}

/* The download card is the one dark card in the rail. */
.wyg-pub-card--dl {
	background-color: var( --e-global-color-primary );
	border-color: var( --e-global-color-primary );
	color: var( --e-global-color-a5f61243 );
}

.wyg-pub-card--dl .wyg-pub-card__k { color: var( --e-global-color-83bd7746 ); }

.wyg-pub-card--dl .wyg-pub-dlbtn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	border: 1px solid var( --e-global-color-83bd7746 );
	color: var( --e-global-color-a5f61243 );
	text-decoration: none;
	padding: 0.8rem 1rem;
	font-size: var( --e-global-typography-fd54d4a4-font-size );
	font-weight: 700;
	min-block-size: 48px;
	transition: background-color 0.18s cubic-bezier( 0.2, 0.6, 0.3, 1 ),
	            color 0.18s cubic-bezier( 0.2, 0.6, 0.3, 1 );
}

.wyg-pub-card--dl .wyg-pub-dlbtn:hover,
.wyg-pub-card--dl .wyg-pub-dlbtn:focus-visible {
	background-color: var( --e-global-color-83bd7746 );
	color: var( --e-global-color-primary );
}

.wyg-pub-card__meta {
	font-family: var( --wyg-mono );
	font-size: var( --e-global-typography-1c3ea07a-font-size );
	color: #C9D4D8;
	margin: 0.6rem 0 0;
	line-height: 1.5;
}

/* -- author ---------------------------------------------------------------- */

.wyg-pub-author { text-align: center; }

/* The same 4:5 oval and brown ring as About Us, so one person reads the same
   wherever they appear on the site. */
.wyg-pub-author__oval {
	inline-size: 100%;
	max-inline-size: 170px;
	aspect-ratio: 4 / 5;
	border-radius: 50%;
	overflow: hidden;
	border: 4px solid var( --e-global-color-0e573e58 );
	background-color: #EDE7DC;
	margin-inline: auto;
	display: flex;
	align-items: center;
	justify-content: center;
}

.wyg-pub-author__oval img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: center 18%;
}

.wyg-pub-author__initials {
	inline-size: 100%;
	block-size: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var( --e-global-color-83bd7746 );
	font-weight: 900;
	font-size: 2.4rem;
	color: var( --e-global-color-primary );
}

.wyg-pub-author__name {
	font-weight: 800;
	color: var( --e-global-color-primary );
	font-size: var( --e-global-typography-a66c1ed1-font-size );
	letter-spacing: -0.008em;
	line-height: 1.25;
	margin: 1.1rem 0 0.35rem;
}

.wyg-pub-author__affil {
	font-family: var( --wyg-mono );
	font-size: var( --e-global-typography-1c3ea07a-font-size );
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var( --e-global-color-accent );
	margin: 0 0 1.125rem;
}

.wyg-pub-author__bio {
	font-size: var( --e-global-typography-fd54d4a4-font-size );
	color: var( --e-global-color-d89acb7d );
	line-height: 1.55;
	margin: 0;
	text-align: start;
}

.wyg-pub-author__bio p:last-child { margin-block-end: 0; }

/* -- facts ----------------------------------------------------------------- */

.wyg-pub-facts { list-style: none; padding: 0; margin: 0; }

.wyg-pub-facts li {
	display: flex;
	gap: 0.8rem;
	font-size: var( --e-global-typography-fd54d4a4-font-size );
	border-block-end: 1px solid var( --e-global-color-3e660e4c );
	padding-block: 0.55rem;
}

.wyg-pub-facts li:last-child { border-block-end: none; }

.wyg-pub-facts__k {
	font-family: var( --wyg-mono );
	font-size: var( --e-global-typography-1c3ea07a-font-size );
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var( --e-global-color-d89acb7d );
	flex: none;
	inline-size: 82px;
	padding-block-start: 0.15rem;
}

.wyg-pub-facts__v { color: var( --e-global-color-text ); min-inline-size: 0; }

/* -- themes, merged into the facts card above -------------------------------

   HO-52, 23 August 2026. The standalone Themes card is gone and themes are now
   the final row of .wyg-pub-facts, rendered as chips. Todd's reasoning: two rail
   cards of what a reader perceives as one thing -- facts about this essay -- is
   redundant and lengthens the rail; chips keep the row reading as its own kind
   of thing inside a list of plain text, and reuse a device that already appears
   on the publication cards.

   The chip is defined ONCE, in wyg-css-publication-card. Do not restate its
   border width, padding, family, case, size or tracking here.

   The old .wyg-pub-themes block that used to sit here is gone with the card. It
   was a paragraph of bare spans joined by nothing, which is why the themes read
   as "Conflict and ResolutionFaith and TheologyLanguage". Chips retire the
   separator question rather than answering it: each theme is its own box. */

/* The themes row is the one row that does NOT use the two-column shape. Measured
   23 August: in the 218px value column, "Conflict and Resolution" -- the longest
   of the eight approved theme terms -- comes to exactly 218px at 13px mono with
   0.1em tracking, so the chip filled its column and wrapped INSIDE its own
   border, rendering as a two-line bordered block rather than as a chip. Giving
   the row the card's full 316px lets that term sit on one line and the shorter
   ones pack two to a row.

   Done by changing the row rather than the chip on purpose: the chip's size,
   case and tracking are the shared definition in wyg-css-publication-card, and
   shrinking them here to fit one column would have changed the device on the
   publication cards too. */
.wyg-pub-facts li:has( .wyg-pub-facts__chips ) {
	display: block;
}

.wyg-pub-facts li:has( .wyg-pub-facts__chips ) .wyg-pub-facts__k {
	display: block;
	inline-size: auto;
	padding-block-start: 0;
	margin-block-end: 0.5rem;
}

.wyg-pub-facts__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
}

/* The one light-surface correction, and the only property restated. The shared
   chip is drawn for the dark blue plate, where its Tan hairline at 55 percent
   reads clearly. Over this white card the same value computes to about #F0E4D5
   and the box all but vanishes, so the border color is answered against the
   card's own Rule Strong, and the text against Muted Ink so it sits below the
   fact values rather than beside them. */
.wyg-pub-facts span.wyg-plate-essay__chip.wyg-plate-essay__chip {
	border-color: var( --e-global-color-5f8039f0 );
	color: var( --e-global-color-d89acb7d );
}

/* 🚨 A DELIBERATE RESTATEMENT, NOT AN ACCIDENT. Re-confirmed by Todd, 23 August
   2026, when HO-49 consolidated the shared components.

   THE CANONICAL HOME FOR THESE TWO VALUES IS `wyg-css-global` section 5f. They
   are here instead because that file is frozen (page-build-conventions section
   5), and Todd's decision on 23 August was to keep it frozen through launch
   rather than reopen the one file whose syntax error takes down the header, the
   footer and every page in three languages at once.

   THE MECHANISM. `wyg-css-global` 5d kills letter-spacing in Hebrew and Arabic
   with a blanket `!important` rule at 0,1,2; 5f hands a little back to nine
   named selectors, the chip among them -- but ONLY in its
   `.elementor-heading-title` form. This row's chip is a bare `span` printed by a
   shortcode, which is not on that list. The two values are restated here, scoped
   to this row, at 0,4,2 so they clear 5d inside the `!important` layer rather
   than fighting it.

   🚨 IF EITHER VALUE EVER CHANGES IT MUST CHANGE IN BOTH PLACES -- here and in
   `wyg-css-global` 5f. Ticketed for after launch, together with the chip's class
   rename, so the file is opened once with proper re-verification rather than
   twice.

   The chip itself is no longer defined in `wyg-css-publication-card`: HO-49
   moved it to `wyg-css-shared` (60), where both class names and both element
   forms are aliases on one declaration block. */
html[lang^="he"] .wyg-pub-facts span.wyg-plate-essay__chip.wyg-plate-essay__chip {
	letter-spacing: 0.03em !important;
}

html[lang^="ar"] .wyg-pub-facts span.wyg-plate-essay__chip.wyg-plate-essay__chip {
	letter-spacing: 0.015em !important;
}

/* -- related --------------------------------------------------------------- */

/* Doubled to clear the kit's own `a` color, which is 0,2,0. */
.wyg-pub-rel.wyg-pub-rel a {
	display: block;
	color: var( --e-global-color-primary );
	text-decoration: none;
	font-size: var( --e-global-typography-fd54d4a4-font-size );
	font-weight: 700;
	border-block-end: 1px solid var( --e-global-color-3e660e4c );
	padding-block: 0.7rem;
	line-height: 1.35;
	transition: color 0.18s cubic-bezier( 0.2, 0.6, 0.3, 1 );
}

.wyg-pub-rel.wyg-pub-rel a:last-child { border-block-end: none; }

.wyg-pub-rel.wyg-pub-rel a:hover,
.wyg-pub-rel.wyg-pub-rel a:focus-visible { color: var( --e-global-color-accent ); }

.wyg-pub-rel__sm {
	display: block;
	font-weight: 400;
	font-size: var( --e-global-typography-1c3ea07a-font-size );
	color: var( --e-global-color-d89acb7d );
	font-family: var( --wyg-mono );
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-block-end: 0.15rem;
}

/* ==========================================================================
   8. Mobile
   ========================================================================== */

@media ( max-width: 1000px ) {

	.e-con.wyg-pub-main.wyg-pub-main,
	.e-con.wyg-pub-rail.wyg-pub-rail { flex: 0 1 auto; inline-size: 100%; max-inline-size: none; }

	/* One column: nothing travels, and Related goes back to sitting after the
	   group rather than at the foot of a stretched box. */
	.e-con.wyg-pub-rail.wyg-pub-rail { align-self: auto; }
	.e-con.wyg-pub-rail__sticky.wyg-pub-rail__sticky { position: static; }
	.e-con.wyg-pub-card--related.wyg-pub-card--related { margin-block-start: 0; }

	/* Measures come off: at this width the column IS the measure. */
	.elementor.elementor .e-con .elementor-widget.wyg-essay-body,
	.e-con.wyg-pub-cite.wyg-pub-cite,
	.wyg-pub-abstract__body.wyg-pub-abstract__body,
	.wyg-pub-masthead__title.wyg-pub-masthead__title .elementor-heading-title { max-inline-size: none; }
}

@media ( max-width: 767px ) {
	.wyg-essay-body.wyg-essay-body > p:first-of-type::first-letter { font-size: 3em; }
}

/* The Copy reference button. Color, border, padding and type scale are on the
   widget's own controls; only the mono family and the 44px tap target are here,
   because no Elementor control reaches either. Matches the mockup's .minibtn. */
.wyg-pub-cite__btn.wyg-pub-cite__btn .elementor-button {
	font-family: var( --wyg-mono );
	min-block-size: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* #8241163 -- too much air between the breadcrumb and the masthead chips on a
   430px screen. The masthead's own top padding was carrying the desktop
   proportion into a viewport a third of the width. */
@media ( max-width: 767px ) {
	.e-con.wyg-pub-masthead__inner.wyg-pub-masthead__inner {
		padding-block-start: 1.75rem;
	}

	.wyg-pub-masthead__idx.wyg-pub-masthead__idx {
		margin-block-end: 1.125rem;
	}
}

/* ==========================================================================
   9. The English-original card
   ========================================================================== */

/* WHERE: inside the post-content widget on a translated essay, in place of the
   body. `wyg-english-original` swaps `the_content` at priority 100, so the card
   inherits the 66ch measure from section 5 and the measure release in section 8
   without asking for either. Nothing here is scoped to a language: the card
   only ever renders on a page whose language is not the article's own.

   A NEW ARRANGEMENT OF EXISTING PARTS, NOT A NEW VISUAL LANGUAGE. The surface,
   hairline and olive top edge are `.wyg-mission__forum` from wyg-css-homepage
   section 4. The heading size and weight are that same Forum card's title. The
   button is `.wyg-pub-dlbtn` above, inverted -- Off White on Dark Blue rather
   than Off White on Dark Blue inside a dark card -- because this card is light.
   No new color, no new type scale, no new radius. */

.wyg-engl {
	background-color: var( --e-global-color-dbfd062c );
	border: 1px solid var( --e-global-color-3e660e4c );
	border-block-start: 4px solid var( --e-global-color-3c1895e9 );
	padding: clamp( 1.25rem, 3vw, 1.75rem );
}

/* 0,3,0. The heading has to clear the per-post rule that ties every heading on
   the page to the Primary typography global at 0,2,0 -- see section 0 of
   wyg-css-research-publications, and the same note at the head of this file. */
.wyg-engl.wyg-engl .wyg-engl__k {
	font-size: var( --e-global-typography-95a228b0-font-size );
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var( --e-global-color-primary );
	margin: 0 0 0.75rem;
}

/* 0,3,0, to clear `.wyg-essay-body.wyg-essay-body p` at 0,2,0 in section 5. The
   essay's paragraph rhythm is 1.75rem, which is right for a 66ch column of
   continuous prose and far too loose for two lines inside a box. */
.wyg-engl.wyg-engl .wyg-engl__b {
	font-size: var( --e-global-typography-fd54d4a4-font-size );
	line-height: 1.6;
	color: var( --e-global-color-d89acb7d );
	margin: 0 0 0.4rem;
	max-inline-size: 52ch;
}

.wyg-engl.wyg-engl .wyg-engl__b:last-of-type { margin-block-end: 1.25rem; }

/* Doubled for the same reason as `.wyg-pub-rel a` above: the kit's own `a` color
   is 0,2,0. */
.wyg-engl.wyg-engl .wyg-engl__btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	background-color: var( --e-global-color-primary );
	border: 1px solid var( --e-global-color-primary );
	color: var( --e-global-color-a5f61243 );
	text-decoration: none;
	padding-block: 0.8rem;
	padding-inline: 1.1rem 2.6rem;
	font-size: var( --e-global-typography-fd54d4a4-font-size );
	font-weight: 700;
	min-block-size: 48px;
	transition: background-color 0.18s cubic-bezier( 0.2, 0.6, 0.3, 1 ),
	            color 0.18s cubic-bezier( 0.2, 0.6, 0.3, 1 );
}

.wyg-engl.wyg-engl .wyg-engl__btn:hover,
.wyg-engl.wyg-engl .wyg-engl__btn:focus-visible {
	background-color: var( --e-global-color-a5f61243 );
	color: var( --e-global-color-primary );
}

/* The arrow is DRAWN, not typed. A character inside the anchor becomes part of
   the link text, and the accessible name is already the label.

   🚨 IT HAS TO MIRROR, AND THAT IS TWO SEPARATE THINGS. `inset-inline-end` puts
   it on the correct side under Hebrew and Arabic on its own -- but U+2192 is a
   right arrow in every writing direction, so the GLYPH is swapped as well. Same
   pair as `.wyg-essay-row::after` in wyg-css-publication-card.

   This is not an Elementor button, so it cannot use the site's
   `.elementor-button-content-wrapper::after` rule; the discipline is copied, not
   the selector.

   🚨 THE ANCHOR CARRIES NO `dir` OF ITS OWN, DELIBERATELY. `dir` resolves per
   element: one on the anchor would make `inset-inline-end` resolve against the
   anchor rather than the page and quietly undo the first half of this. The label
   is in the reader's language, not English, so there is nothing to mark. Judge
   the result from a rendered screenshot in both languages, never from this
   file. */
.wyg-engl.wyg-engl .wyg-engl__btn::after {
	content: "\2192";
	position: absolute;
	inset-inline-end: 1.1rem;
	inset-block-start: 50%;
	transform: translateY( -50% );
	font-weight: 400;
	pointer-events: none;
}

[dir="rtl"] .wyg-engl.wyg-engl .wyg-engl__btn::after {
	content: "\2190";
}

/* Full width at phone sizes, like every other call to action on the site. The
   arrow stays absolutely positioned at the inline end, so it travels to the far
   edge rather than sitting against the label. */
@media ( max-width: 767px ) {
	.wyg-engl.wyg-engl .wyg-engl__btn {
		display: flex;
		inline-size: 100%;
	}
}

/* ---------------------------------------------------------------------------
   The *But* essay's masthead title is italic, in all three languages.

   Same call as the card rule in wyg-css-publication-card section 8, and the
   same reason: the title is a word standing in for a name. Keyed to the post
   IDs -- 633 English, 875 Hebrew, 864 Arabic -- rather than to the string, so
   it holds when the translations are revised.

   `postid-<id>` is WordPress's own body class on a singular view. Doubling the
   component class puts this at 0,4,0, above the per-post stylesheet's heading
   binding.

   Post 633 is `future` until 1 October, so its page 404s and this rule has
   nothing to paint yet. Verified on the card surfaces instead; re-check the
   single the day it publishes.
   ------------------------------------------------------------------------ */

body.postid-633 .wyg-pub-masthead__title.wyg-pub-masthead__title .elementor-heading-title,
body.postid-875 .wyg-pub-masthead__title.wyg-pub-masthead__title .elementor-heading-title,
body.postid-864 .wyg-pub-masthead__title.wyg-pub-masthead__title .elementor-heading-title {
	font-style: italic;
}

/* ---------------------------------------------------------------------------
   The author card's label is centered with the rest of the card.

   The approved mockup carries `.card-author { text-align: center; }`, which
   puts the label, the oval, the name and the affiliation on one center line.
   Live, `.wyg-pub-author` centers everything inside itself, but the label is
   rendered by `wyg_pub_rail_card()` as its SIBLING inside `.wyg-pub-card` --
   so it never inherited the centering and sat left against a centered card.
   Todd, ticket z92046mxue.

   Scoped with `:has()` so the download, facts and related cards keep their
   left-aligned labels, which is what the same mockup shows: only `.card-author`
   carries the centering there.

   0,4,0 -- `:has()` takes the specificity of its argument.
   ------------------------------------------------------------------------ */

.wyg-pub-card:has( .wyg-pub-author ) .wyg-pub-card__k.wyg-pub-card__k {
	text-align: center;
}