/*
Theme Name:   Hello Elementor Child Elite
Theme URI:    https://eliterecruitments.com/
Description:  Single article layout for the EliteRecruitments 2026 site. Renders every post in one editorial layout with no per-post setup, reusing the project's own create-block/header and create-block/footer blocks and its shared design system. Renders only the region between the header and the footer.
Author:       EliteRecruitments
Author URI:   https://eliterecruitments.com/
Template:     hello-elementor
Version:      2.11.1
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  hello-elementor-child-elite
*/

/* ==========================================================================
   TOKEN BLOCK

   These are the project's own tokens, not new ones. The names and values are
   copied verbatim from the shared block design system, which declares the same
   thirteen custom properties in every page plugin's styles/_base.scss
   (verified identical across 16 plugins). Re-declaring them on the article root
   means the article inherits exactly what the header and footer around it use.

   Source: */
/* <plugin>/src/<plugin>/styles/_base.scss, the :root token block re-homed onto
   the block root. Fraunces and Hanken Grotesk are already served by the site
   (assets/fonts.css, enqueued by the page plugins), so nothing new is loaded.

   Declared on all three template roots, .er-single (an article), .er-index (the
   blog listing) and .er-comments (the comment section below an article), so the
   pages cannot drift apart. Custom properties inherit, so a root that is not an
   ancestor of the markup gets none of them: .er-comments is a sibling of
   .er-single, not a descendant, which is why it has to be named here.

   There are no colour literals below this block.
   ========================================================================== */

.er-single,
.er-index,
.er-comments {
	/* Project palette. */
	--cream:      #FBF6EC;
	--cream-deep: #F3EAD9;
	--navy:       #1F3A5F;
	--navy-deep:  #16293F;
	--ember:      #E08A2B;
	--ember-deep: #C9781F;
	--line:       #E7E0D2;
	--ink:        rgba(31, 58, 95, .85);
	--ink-soft:   rgba(31, 58, 95, .64);

	/* Project typefaces. */
	--serif: 'Fraunces', Georgia, serif;
	--sans:  'Hanken Grotesk', system-ui, sans-serif;

	/* Project shadow and easing. */
	--shadow-card: 0 18px 40px -22px rgba(22, 41, 63, .28);
	--ease: cubic-bezier(.22, .7, .3, 1);

	/* Article-only additions, all derived from the tokens above. */
	--er-surface: #fff;
	/* The rail carries the author card as well as the table of contents and the
	   share controls, so it is wider than a tools-only rail needs to be: at 260px
	   the biography wrapped to ten lines and the card alone filled the column. */
	--er-rail: 310px;            /* sticky rail width */
	--er-gap: 56px;              /* column gap */
	/* The article column: the container minus its padding, the rail and the
	   column gap. The hero text and the featured image are aligned to this same
	   width above 1080px, so the content and the image are exactly as wide as
	   each other all the way down the page. */
	--er-col: calc(var(--er-container) - (var(--er-pad) * 2) - var(--er-rail) - var(--er-gap));
	/* Sticky offset for the rail and for in-page anchors.
	   The header block is position:sticky, top:0 (header style-index.css
	   .wp-block-create-block-header), so anything else that sticks must clear it
	   or it slides underneath.
	   Deriving this from the header's CSS is unreliable: its height is set by the
	   tallest child, currently the CTA button, and that changes whenever the
	   header does. assets/js/single.js measures the header and overwrites
	   --er-stick-top at runtime. This value is the no-JS fallback, chosen to
	   clear the header at its current height with room to spare. */
	--er-stick-top: 108px;
	--er-radius: 14px;           /* matches the project's card radius */
	--er-radius-sm: 8px;
	--er-pill: 999px;            /* project button radius */
	--er-container: 1200px;      /* project .container max-width */
	--er-pad: 24px;              /* project .container side padding */
	--er-sec: 88px;              /* project .sec vertical rhythm */
	--er-block: 40px;            /* gap between article blocks */
	--er-stack: 20px;            /* gap inside a block */
}

/* ==========================================================================
   SHELL
   Gated on :has(.er-single) and :has(.er-index) so nothing applies unless one of
   these templates rendered.
   ========================================================================== */

body:has(.er-single) .site-main,
body:has(.er-single) .page-content,
body:has(.er-index) .site-main,
body:has(.er-index) .page-content {
	max-inline-size: none;
	padding: 0;
	margin: 0;
}

/* Hello's own "Archives" page header and its tag list. The listing writes its
   own masthead, and this is what stops the page carrying two H1s. */
body:has(.er-single) .site-main > .page-header,
body:has(.er-single) .site-main > .post-tags,
body:has(.er-index) .site-main > .page-header,
body:has(.er-index) .site-main > .post-tags,
body:has(.er-index) .site-main > .pagination {
	display: none;
}

/* The listing is the full height of the viewport on a short first page, so the
   cream has to reach the footer rather than stopping under the last card. */
body:has(.er-index) { background: var(--cream, #FBF6EC); }

/* ==========================================================================
   ROOT
   ========================================================================== */

.er-single,
.er-index {
	background: var(--cream);
	color: var(--navy);
	font-family: var(--sans);
	font-size: 1.0625rem;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.er-single *,
.er-single *::before,
.er-single *::after,
.er-index *,
.er-index *::before,
.er-index *::after { box-sizing: border-box; }

.er-single img,
.er-single svg,
.er-single video,
.er-index img,
.er-index svg,
.er-index video { max-inline-size: 100%; block-size: auto; }

.er-single__container,
.er-index__container {
	max-inline-size: var(--er-container);
	margin-inline: auto;
	padding-inline: var(--er-pad);
}

.er-single :focus-visible,
.er-index :focus-visible {
	outline: 2px solid var(--ember);
	outline-offset: 2px;
	border-radius: 4px;
}

.er-single .screen-reader-text,
.er-index .screen-reader-text {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Subtle reveal. Disabled wholesale under reduced motion, below. */
.er-reveal {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .6s var(--ease), transform .6s var(--ease);
}

.er-reveal.is-in { opacity: 1; transform: none; }

/* ==========================================================================
   HERO
   ========================================================================== */

.er-hero {
	padding-block: clamp(40px, 6vw, 72px) 0;
	background: var(--cream);
}

.er-hero__inner { max-inline-size: 46em; }

/* Above 1080px the layout gains the right rail, so the hero and the featured
   image are capped to the article column's width and align with its left edge.
   Content, title and image then share one column all the way down. */
@media (min-width: 1080px) {
	.er-hero__inner,
	.er-figure {
		max-inline-size: var(--er-col);
	}
}

.er-hero__eyebrow {
	letter-spacing: .18em;
	text-transform: uppercase;
	font-size: .72rem;
	font-weight: 700;
	color: var(--ember);
	margin: 0 0 12px;
}

.er-hero__eyebrow a { color: inherit; text-decoration: none; }
.er-hero__eyebrow a:hover { color: var(--ember-deep); }

.er-hero__rule {
	inline-size: 38px;
	block-size: 3px;
	background: var(--ember);
	border-radius: 3px;
	margin: 0 0 20px;
}

.er-hero__title {
	font-family: var(--serif);
	font-optical-sizing: auto;
	font-weight: 600;
	line-height: 1.12;
	font-size: clamp(2rem, 4.2vw, 3.1rem);
	color: var(--navy);
	margin: 0;
	text-wrap: balance;
}

.er-hero__lede {
	font-size: 1.1rem;
	color: var(--ink);
	margin: 18px 0 0;
	text-wrap: pretty;
}

.er-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 18px;
	list-style: none;
	margin: 26px 0 0;
	padding: 0;
	font-size: .92rem;
	color: var(--ink-soft);
}

.er-hero__meta li { display: flex; align-items: center; gap: 8px; margin: 0; }

.er-hero__meta li + li::before {
	content: "";
	inline-size: 4px;
	block-size: 4px;
	border-radius: 50%;
	background: var(--ink-soft);
	opacity: .6;
}

.er-hero__avatar {
	inline-size: 26px;
	block-size: 26px;
	border-radius: 50%;
	display: block;
}

/* Featured image. The box is always rendered; only the contents change, so the
   article below never moves between the two states. */
.er-figure { margin: clamp(28px, 4vw, 44px) 0 0; }

.er-figure__box {
	position: relative;
	inline-size: 100%;
	aspect-ratio: 16 / 8;
	overflow: hidden;
	border-radius: var(--er-radius);
	background: var(--cream-deep);
	box-shadow: var(--shadow-card);
}

.er-figure__box img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* Empty state: a calm panel with a faint rule, never a broken image or a gap. */
.er-figure__box--empty::after {
	content: "";
	position: absolute;
	inset-inline: 12%;
	inset-block-start: 50%;
	block-size: 1px;
	background: var(--line);
}

.er-figure figcaption {
	font-size: .88rem;
	color: var(--ink-soft);
	margin-block-start: 12px;
}

/* ==========================================================================
   LAYOUT: article + sticky rail
   ========================================================================== */

.er-body { padding-block: clamp(40px, 5vw, 64px) var(--er-sec); }

.er-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--er-gap);
	align-items: start;
}

@media (min-width: 1080px) {
	.er-layout { grid-template-columns: minmax(0, 1fr) var(--er-rail); }

	/* The rail itself does not stick. Only the tools inside it do.
	 *
	   The author card, the table of contents and the share controls together are
	   taller than the space under the header on a 700px laptop screen, so a rail
	   that sticks as one piece has to scroll internally, and the share controls
	   end up below the fold of a box nobody thinks to scroll. Sticking only the
	   tools removes the competition: the card is read once and scrolls away with
	   the article, and what is wanted all the way down stays put. */
	.er-rail__sticky {
		position: sticky;
		/* Clears the sticky site header. */
		inset-block-start: var(--er-stick-top);
		/* Below the header's z-index of 100 so it can never cover the nav. */
		z-index: 1;
		max-block-size: calc(100vh - var(--er-stick-top) - var(--er-stack));
		overflow-y: auto;
		overscroll-behavior: contain;
		display: flex;
		flex-direction: column;
		gap: 28px;
	}

	/* Between the table of contents and the share controls only the list may
	   give up height, and assets/js/single.js is what takes it: the obvious CSS
	   answer, a flex column with min-block-size: 0 on the list, does not work
	   because the panel is a details element and a browser wraps everything after
	   the summary in an internal box, so the list is never a flex item of the
	   panel and never shrinks. The cap in the TOC section stays as the no-script
	   floor; the script narrows it further when the box cannot fit both. */
}

.er-rail { display: flex; flex-direction: column; gap: 28px; }

/* The tools inside the rail. Spaced here rather than only in the sticky rules
   below, or the table of contents and the share controls would sit flush against
   each other at every width under 1080px, where nothing is sticky. */
.er-rail__sticky { display: flex; flex-direction: column; gap: 28px; }

/* On narrow screens the rail sits above the article and reads as a row.
 *
 * order, rather than a different source order, because the source deliberately
 * puts the article first: that is what keeps the reading and tab order article,
 * then tools. Below 1080px the rail is two compact controls, a collapsed table
 * of contents and a row of share buttons, and a table of contents is worth
 * nothing underneath the article it indexes.
 *
 * Delete this one declaration to send the rail back below the article. */
@media (max-width: 1079px) {
	.er-rail { gap: 20px; order: -1; }
	.er-rail__sticky { gap: 20px; }
}

/* ==========================================================================
   TABLE OF CONTENTS
   A native details element in the rail. The list carries a hairline rail on its
   inline start, and the current section colours its own segment of it.
   ========================================================================== */

.er-toc__panel {
	background: var(--er-surface);
	border: 1px solid var(--line);
	border-radius: var(--er-radius);
	padding: 16px 18px;
}

.er-toc__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	cursor: pointer;
	list-style: none;
	/* Safari draws its own triangle without this. */
	-webkit-tap-highlight-color: transparent;
}

.er-toc__summary::-webkit-details-marker { display: none; }

.er-toc__title {
	letter-spacing: .18em;
	text-transform: uppercase;
	font-size: .72rem;
	font-weight: 700;
	color: var(--ember);
}

.er-toc__chevron {
	flex: none;
	color: var(--ink-soft);
	transition: transform .2s var(--ease);
}

/* Points down when the panel is closed, up when it is open. */
.er-toc__panel:not([open]) .er-toc__chevron { transform: rotate(180deg); }

.er-toc__list {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
	border-inline-start: 2px solid var(--line);
	/* A safety valve, not the usual case. The panel lists H2 only, so on these
	   posts it runs to eight or nine entries and never reaches this height. A
	   post with far more sections scrolls inside the panel rather than growing
	   past the viewport and pushing the share controls out of sight. */
	max-block-size: min(46vh, 420px);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--line) transparent;
}

.er-toc__list::-webkit-scrollbar { inline-size: 6px; }
.er-toc__list::-webkit-scrollbar-track { background: transparent; }

.er-toc__list::-webkit-scrollbar-thumb {
	background: var(--line);
	border-radius: var(--er-pill);
}

.er-toc__list:hover::-webkit-scrollbar-thumb { background: var(--cream-deep); }

/* The fade is added only when the list actually overflows, by single.js, so a
   short list is never dimmed at the bottom for no reason. */
.er-toc__list.is-scrollable {
	mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent);
}

.er-toc__item {
	margin: 0;
	/* Pulled back over the list's rule so the item can colour that segment. */
	margin-inline-start: -2px;
	border-inline-start: 2px solid transparent;
	transition: border-color .2s var(--ease);
}

.er-toc__item--sub .er-toc__link {
	padding-inline-start: 24px;
	font-size: .82rem;
}

/* Entries are never truncated. A three line clamp used to sit here as a guard
   against one very long heading, and on a post whose first H2 runs to four lines
   it cut the entry off mid-word: the panel then looks like it is hiding an entry
   rather than wrapping one. Length is handled by the list's own height cap and
   scroll instead, which shortens the panel without hiding any words. */
.er-toc__link {
	display: block;
	padding: 6px 4px 6px 13px;
	font-size: .88rem;
	line-height: 1.38;
	color: var(--ink);
	text-decoration: none;
	transition: color .2s var(--ease);
	overflow-wrap: break-word;
}

.er-toc__link:hover { color: var(--navy); }

.er-toc__item.is-current { border-inline-start-color: var(--ember); }

.er-toc__item.is-current > .er-toc__link {
	color: var(--ember-deep);
	font-weight: 600;
}

/* ==========================================================================
   AUTHOR CARD
   ========================================================================== */

.er-author {
	background: var(--er-surface);
	border: 1px solid var(--line);
	border-radius: var(--er-radius);
	padding: clamp(22px, 3vw, 30px);
	margin-block-end: clamp(28px, 4vw, 44px);
}

/* In the rail, above 1080px. The card is the same object, sized for a 310px
   column instead of the full article width: a smaller avatar, tighter type, and
   no bottom margin, because the rail's own gap already separates it from the
   table of contents. Below 1080px the rail is full width and none of this
   applies, so the card keeps its roomy layout on a phone. */
@media (min-width: 1080px) {
	.er-rail .er-author {
		margin-block-end: 0;
		padding: 20px 22px;
	}

	.er-rail .er-author__head { gap: 14px; }

	.er-rail .er-author__avatar {
		inline-size: 58px;
		block-size: 58px;
	}

	.er-rail .er-author__eyebrow {
		font-size: .62rem;
		margin-block-end: 5px;
	}

	.er-rail .er-author__name { font-size: 1.08rem; }
	.er-rail .er-author__role { font-size: .86rem; margin-block-start: 2px; }

	.er-rail .er-author__bio {
		font-size: .84rem;
		line-height: 1.55;
		margin-block-start: 16px;
		padding-block-start: 16px;
	}
}

.er-author__head {
	display: flex;
	align-items: center;
	gap: 18px;
}

.er-author__avatar {
	flex: none;
	inline-size: 88px;
	block-size: 88px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--cream-deep);
}

.er-author__avatar img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
	border-radius: 50%;
}

.er-author__id { min-inline-size: 0; }

.er-author__eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	letter-spacing: .18em;
	text-transform: uppercase;
	font-size: .68rem;
	font-weight: 700;
	color: var(--ink-soft);
	margin: 0 0 6px;
}

.er-author__linkedin {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--ink-soft);
	transition: color .2s var(--ease);
}

.er-author__linkedin:hover { color: var(--ember); }

.er-author__name {
	font-family: var(--serif);
	font-weight: 600;
	font-size: clamp(1.25rem, 2.2vw, 1.55rem);
	line-height: 1.2;
	margin: 0;
}

.er-author__name a { color: var(--navy); text-decoration: none; }
.er-author__name a:hover { color: var(--ember-deep); }

.er-author__role {
	font-size: .98rem;
	color: var(--ink);
	margin: 4px 0 0;
}

.er-author__bio {
	font-size: .98rem;
	color: var(--ink);
	margin: 20px 0 0;
	padding-block-start: 20px;
	border-block-start: 1px solid var(--line);
	text-wrap: pretty;
}

/* The avatar and the name stack rather than shrink on a narrow phone. */
@media (max-width: 419px) {
	.er-author__head { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ==========================================================================
   SHARE
   ========================================================================== */

.er-share__title {
	letter-spacing: .18em;
	text-transform: uppercase;
	font-size: .72rem;
	font-weight: 700;
	color: var(--ember);
	margin: 0 0 12px;
}

.er-share__list {
	list-style: none;
	display: flex;
	gap: 10px;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
}

.er-share__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 40px;
	block-size: 40px;
	border-radius: var(--er-pill);
	border: 1.5px solid var(--line);
	background: var(--er-surface);
	color: var(--navy);
	cursor: pointer;
	transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
	padding: 0;
}

.er-share__btn:hover,
.er-share__btn:focus-visible {
	background: var(--ember);
	border-color: var(--ember);
	color: var(--er-surface);
}

.er-share__btn:active { transform: scale(.95); }

.er-share__btn.is-copied {
	background: var(--navy);
	border-color: var(--navy);
	color: var(--er-surface);
}

.er-share__icon { display: block; }

/* ==========================================================================
   ARTICLE CONTENT
   Every Gutenberg block the project can produce is covered here so no post is
   ever styled by hand.
   ========================================================================== */

.er-article { min-inline-size: 0; }

.er-content {
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--ink);
}

.er-content > * { max-inline-size: 100%; }

/* Full-bleed exceptions: these read better wide. */
.er-content > .wp-block-image.alignwide,
.er-content > .wp-block-image.alignfull,
.er-content > .wp-block-gallery,
.er-content > .wp-block-table,
.er-content > .er-tablewrap,
.er-content > .wp-block-embed,
.er-content > .wp-block-video,
.er-content > .wp-block-columns { max-inline-size: none; }

.er-content > * + * { margin-block-start: var(--er-stack); }

.er-content p { margin: 0; text-wrap: pretty; }

.er-content h2,
.er-content h3,
.er-content h4,
.er-content h5,
.er-content h6 {
	font-family: var(--serif);
	font-optical-sizing: auto;
	font-weight: 600;
	line-height: 1.16;
	color: var(--navy);
	margin: 0;
	text-wrap: balance;
	scroll-margin-block-start: var(--er-stick-top);
}

.er-content > h2 { font-size: clamp(1.5rem, 2.6vw, 1.95rem); margin-block-start: var(--er-block); }
.er-content > h3 { font-size: clamp(1.22rem, 2vw, 1.42rem); margin-block-start: calc(var(--er-block) - 12px); }
.er-content > h4 { font-size: 1.12rem; margin-block-start: var(--er-stack); }
.er-content > h5,
.er-content > h6 { font-size: 1rem; margin-block-start: var(--er-stack); }

.er-content a {
	color: var(--ember);
	text-decoration: none;
	border-block-end: 1px solid currentColor;
	transition: color .2s var(--ease);
}

.er-content a:hover { color: var(--ember-deep); }

/* External citations read differently from internal links. */
.er-content a.er-cite::after {
	content: "\2197";
	margin-inline-start: .25em;
	font-size: .85em;
}

.er-content strong, .er-content b { font-weight: 700; color: var(--navy); }
.er-content em, .er-content i { font-style: italic; }

.er-content ul,
.er-content ol { margin: 0; padding-inline-start: 1.35em; }
.er-content li { margin-block-end: .5em; }
.er-content li:last-child { margin-block-end: 0; }
.er-content li > ul,
.er-content li > ol { margin-block-start: .5em; }
.er-content ul { list-style: disc; }
.er-content ul li::marker { color: var(--ember); }
.er-content ol li::marker { color: var(--ember); font-weight: 700; }

/* Images and galleries. */
.er-content img { border-radius: var(--er-radius-sm); display: block; }
.er-content figure { margin: 0; }

.er-content figcaption,
.er-content .wp-element-caption {
	font-size: .88rem;
	color: var(--ink-soft);
	margin-block-start: 10px;
	text-align: start;
}

.er-content .wp-block-image img { inline-size: 100%; }

.er-content .wp-block-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 14px;
}

.er-content .wp-block-gallery figure { margin: 0; }
.er-content .wp-block-gallery img { inline-size: 100%; block-size: 100%; object-fit: cover; }

/* Quotes and pullquotes. */
.er-content blockquote,
.er-content .wp-block-quote,
.er-content .wp-block-pullquote {
	margin: 0;
	padding: 22px 26px;
	background: var(--er-surface);
	border-inline-start: 3px solid var(--ember);
	border-radius: 0 var(--er-radius-sm) var(--er-radius-sm) 0;
	font-family: var(--serif);
	font-size: 1.14rem;
	line-height: 1.5;
	color: var(--navy);
}

.er-content blockquote p { margin: 0; }
.er-content blockquote p + p { margin-block-start: .6em; }

.er-content blockquote cite,
.er-content .wp-block-quote cite,
.er-content .wp-block-pullquote cite {
	display: block;
	font-family: var(--sans);
	font-size: .88rem;
	font-style: normal;
	color: var(--ink-soft);
	margin-block-start: 12px;
}

/* Tables. Scroll inside their own box rather than widening the page. */
.er-tablewrap,
.er-content .wp-block-table {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--line);
	border-radius: var(--er-radius-sm);
	background: var(--er-surface);
}

.er-content table {
	inline-size: 100%;
	min-inline-size: 34rem;
	border-collapse: collapse;
	font-size: .94rem;
	margin: 0;
}

.er-content th,
.er-content td {
	padding: 12px 16px;
	text-align: start;
	vertical-align: top;
	border-block-end: 1px solid var(--line);
}

.er-content thead th {
	background: var(--navy-deep);
	color: var(--er-surface);
	font-family: var(--sans);
	font-weight: 600;
	white-space: nowrap;
	border-block-end: 0;
}

.er-content tbody tr:nth-child(even) { background: var(--cream); }
.er-content tbody tr:last-child td { border-block-end: 0; }
.er-content .wp-block-table figcaption { padding: 0 16px 12px; }

/* Code. */
.er-content :not(pre) > code {
	font-family: ui-monospace, Menlo, monospace;
	font-size: .9em;
	background: var(--cream-deep);
	border-radius: 4px;
	padding: .12em .38em;
}

.er-content pre,
.er-content .wp-block-code,
.er-content .wp-block-preformatted {
	background: var(--navy-deep);
	color: var(--cream);
	border-radius: var(--er-radius-sm);
	padding: 20px;
	overflow-x: auto;
	font-family: ui-monospace, Menlo, monospace;
	font-size: .9rem;
	line-height: 1.6;
	margin: 0;
}

.er-content pre code { background: none; padding: 0; color: inherit; }

/* Buttons. Uses the project's pill button. */
.er-content .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.er-content .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: .55em;
	border-radius: var(--er-pill);
	font-family: var(--sans);
	font-weight: 600;
	font-size: .98rem;
	padding: 14px 28px;
	border: 1.5px solid transparent;
	background: var(--ember);
	color: var(--er-surface);
	text-decoration: none;
	transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}

.er-content .wp-block-button__link:hover { background: var(--ember-deep); color: var(--er-surface); }

.er-content .is-style-outline .wp-block-button__link {
	background: none;
	border-color: var(--navy);
	color: var(--navy);
}

.er-content .is-style-outline .wp-block-button__link:hover { background: var(--navy); color: var(--er-surface); }

/* Columns. */
.er-content .wp-block-columns {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
}

.er-content .wp-block-column { flex: 1 1 260px; min-inline-size: 0; }

@media (max-width: 720px) {
	.er-content .wp-block-columns { display: block; }
	.er-content .wp-block-column + .wp-block-column { margin-block-start: var(--er-stack); }
}

/* Video, embeds. Held at a ratio so nothing shifts while they load. */
.er-content .wp-block-embed__wrapper,
.er-content .wp-block-video { border-radius: var(--er-radius-sm); overflow: hidden; }

.er-content .wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper {
	position: relative;
	aspect-ratio: 16 / 9;
}

.er-content .wp-block-embed.wp-has-aspect-ratio iframe {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	border: 0;
}

.er-content .wp-block-video video { inline-size: 100%; display: block; }

/* Separator and spacer. */
.er-content hr,
.er-content .wp-block-separator {
	border: 0;
	block-size: 1px;
	background: var(--line);
	margin-block: var(--er-block);
}

.er-content .wp-block-separator.is-style-wide { inline-size: 100%; }

.er-content .wp-block-separator.is-style-dots {
	background: none;
	text-align: center;
	line-height: 1;
	block-size: auto;
	color: var(--ink-soft);
}

.er-content .wp-block-spacer { max-inline-size: none; }

/* Alignment helpers. */
.er-content .alignleft { float: inline-start; margin-inline-end: 24px; margin-block-end: 16px; max-inline-size: 45%; }
.er-content .alignright { float: inline-end; margin-inline-start: 24px; margin-block-end: 16px; max-inline-size: 45%; }
.er-content .aligncenter { margin-inline: auto; }

@media (max-width: 600px) {
	.er-content .alignleft,
	.er-content .alignright { float: none; margin-inline: 0; max-inline-size: 100%; }
}

/* The direct answer under a question-led H2. */
.er-content .er-answer {
	background: var(--er-surface);
	border-inline-start: 3px solid var(--ember);
	border-radius: 0 var(--er-radius-sm) var(--er-radius-sm) 0;
	padding: 16px 20px;
	font-size: 1.08rem;
	color: var(--navy);
}

/* Methodology or caveat callout. */
.er-callout {
	background: var(--cream-deep);
	border-radius: var(--er-radius);
	padding: 24px 26px;
}

.er-callout__label {
	display: block;
	letter-spacing: .18em;
	text-transform: uppercase;
	font-size: .72rem;
	font-weight: 700;
	color: var(--ember);
	margin: 0 0 10px;
}

.er-callout > :last-child { margin-block-end: 0; }

/* ==========================================================================
   FAQ
   ========================================================================== */

.er-faq { margin-block-start: var(--er-sec); }

.er-faq__title {
	font-family: var(--serif);
	font-weight: 600;
	font-size: clamp(1.5rem, 2.6vw, 1.95rem);
	line-height: 1.16;
	color: var(--navy);
	margin: 0 0 var(--er-stack);
}

.er-faq__item {
	border: 1px solid var(--line);
	border-radius: var(--er-radius-sm);
	background: var(--er-surface);
	margin-block-end: 10px;
	overflow: hidden;
}

.er-faq__item > summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 16px 20px;
	font-weight: 600;
	color: var(--navy);
	cursor: pointer;
	list-style: none;
}

.er-faq__item > summary::-webkit-details-marker { display: none; }

.er-faq__item > summary::after {
	content: "";
	flex: 0 0 auto;
	inline-size: 9px;
	block-size: 9px;
	border-inline-end: 2px solid var(--ember);
	border-block-end: 2px solid var(--ember);
	transform: rotate(45deg);
	transition: transform .25s var(--ease);
}

.er-faq__item[open] > summary::after { transform: rotate(-135deg); }

.er-faq__answer { padding: 0 20px 18px; color: var(--ink); }
.er-faq__answer > :last-child { margin-block-end: 0; }

/* ==========================================================================
   CTA
   ========================================================================== */

.er-cta {
	margin-block-start: var(--er-sec);
	background: var(--navy-deep);
	border-radius: var(--er-radius);
	padding: clamp(32px, 5vw, 56px);
	text-align: center;
	color: var(--cream);
}

.er-cta__title {
	font-family: var(--serif);
	font-weight: 600;
	font-size: clamp(1.5rem, 2.8vw, 2.1rem);
	line-height: 1.16;
	color: var(--er-surface);
	margin: 0 0 22px;
	text-wrap: balance;
}

.er-btn {
	display: inline-flex;
	align-items: center;
	gap: .55em;
	border-radius: var(--er-pill);
	font-family: var(--sans);
	font-weight: 600;
	font-size: .98rem;
	padding: 14px 28px;
	border: 1.5px solid transparent;
	background: var(--ember);
	color: var(--er-surface);
	text-decoration: none;
	transition: background .2s var(--ease), transform .2s var(--ease);
}

.er-btn:hover { background: var(--ember-deep); color: var(--er-surface); }
.er-btn .er-ar { transition: transform .2s var(--ease); }
.er-btn:hover .er-ar { transform: translateX(3px); }
.er-btn:active { transform: scale(.98); }

/* ==========================================================================
   PREVIOUS AND NEXT
   ========================================================================== */

.er-postnav {
	margin-block-start: var(--er-sec);
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.er-navcard {
	display: block;
	border: 1px solid var(--line);
	border-radius: var(--er-radius);
	background: var(--er-surface);
	padding: 22px 24px;
	text-decoration: none;
	transition: box-shadow .25s var(--ease), transform .25s var(--ease), border-color .25s var(--ease);
}

.er-navcard:hover {
	box-shadow: var(--shadow-card);
	transform: translateY(-2px);
	border-color: var(--cream-deep);
}

.er-navcard--next { text-align: end; }

.er-navcard__kicker {
	display: flex;
	align-items: center;
	gap: 8px;
	letter-spacing: .18em;
	text-transform: uppercase;
	font-size: .68rem;
	font-weight: 700;
	color: var(--ember);
	margin-block-end: 10px;
}

.er-navcard--next .er-navcard__kicker { justify-content: flex-end; }

.er-navcard__ar { transition: transform .2s var(--ease); }
.er-navcard:hover .er-navcard__ar { transform: translateX(3px); }
.er-navcard--prev:hover .er-navcard__ar { transform: translateX(-3px); }

.er-navcard__title {
	display: block;
	font-family: var(--serif);
	font-weight: 600;
	font-size: 1.1rem;
	line-height: 1.3;
	color: var(--navy);
}

/* ==========================================================================
   RELATED
   Mirrors the project's intel card anatomy: kicker, title, blurb, go link.
   ========================================================================== */

.er-related { margin-block-start: var(--er-sec); }

.er-related__head { max-inline-size: 46em; margin-block-end: 28px; }

.er-related__eyebrow {
	letter-spacing: .18em;
	text-transform: uppercase;
	font-size: .72rem;
	font-weight: 700;
	color: var(--ember);
	margin: 0 0 12px;
}

.er-related__rule {
	inline-size: 38px;
	block-size: 3px;
	background: var(--ember);
	border-radius: 3px;
	margin: 0 0 20px;
}

.er-related__title {
	font-family: var(--serif);
	font-weight: 600;
	font-size: clamp(1.6rem, 3vw, 2.1rem);
	line-height: 1.16;
	color: var(--navy);
	margin: 0;
}

.er-related__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.er-card {
	display: flex;
	flex-direction: column;
	background: var(--er-surface);
	border: 1px solid var(--line);
	border-radius: var(--er-radius);
	overflow: hidden;
	transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}

.er-card:hover { box-shadow: var(--shadow-card); transform: translateY(-3px); }

/* Aspect box held open so cards match height before images load. */
.er-card__media {
	display: block;
	position: relative;
	inline-size: 100%;
	block-size: 0;
	padding-block-end: 58%;
	background: var(--cream-deep);
}

.er-card__media img {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

.er-card__body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }

.er-card__kicker {
	letter-spacing: .18em;
	text-transform: uppercase;
	font-size: .68rem;
	font-weight: 700;
	color: var(--ember);
	margin: 0 0 10px;
}

.er-card__title {
	font-family: var(--serif);
	font-weight: 600;
	font-size: 1.14rem;
	line-height: 1.28;
	margin: 0 0 10px;
}

.er-card__title a { color: var(--navy); text-decoration: none; }
.er-card__title a:hover { color: var(--ember-deep); }

.er-card__excerpt { font-size: .95rem; color: var(--ink-soft); margin: 0 0 16px; }

.er-card__go {
	margin-block-start: auto;
	font-size: .9rem;
	font-weight: 600;
	color: var(--ember);
	display: inline-flex;
	align-items: center;
	gap: .4em;
}

.er-card__go .er-ar { transition: transform .2s var(--ease); }
.er-card:hover .er-ar { transform: translateX(3px); }

/* ==========================================================================
   BLOG INDEX
   /blogs/, every category, tag, author and date archive, and search results.

   This section adds a masthead, a filter row, a lead card, a grid, a pager and
   an empty state. It restates nothing: the grid cards are the .er-card object
   from RELATED, the closing panel is .er-cta and its button is .er-btn, so a
   card on the listing and a card at the foot of an article are the same object.
   ========================================================================== */

/* Reveal. The default state is visible, so a blocked or failed script leaves
   every card on the page. assets/js/archive.js adds .is-js to the root, and that
   is what opts the page into the animation at all. */
.er-index.is-js .er-rise {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .6s var(--ease), transform .6s var(--ease);
}

.er-index.is-js .er-rise.is-in { opacity: 1; transform: none; }

/* --- Masthead ------------------------------------------------------------ */

.er-mast { padding-block: clamp(40px, 6vw, 76px) 0; }

.er-mast__inner { max-inline-size: 42em; }

.er-mast__eyebrow {
	letter-spacing: .18em;
	text-transform: uppercase;
	font-size: .72rem;
	font-weight: 700;
	color: var(--ember);
	margin: 0 0 12px;
}

.er-mast__rule {
	inline-size: 38px;
	block-size: 3px;
	background: var(--ember);
	border-radius: 3px;
	margin: 0 0 20px;
}

.er-mast__title {
	font-family: var(--serif);
	font-optical-sizing: auto;
	font-weight: 600;
	line-height: 1.1;
	font-size: clamp(2.1rem, 4.6vw, 3.3rem);
	color: var(--navy);
	margin: 0;
	text-wrap: balance;
}

.er-mast__lede {
	font-size: 1.12rem;
	color: var(--ink);
	margin: 18px 0 0;
	text-wrap: pretty;
}

.er-mast__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 18px;
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
	font-size: .9rem;
	color: var(--ink-soft);
}

.er-mast__meta li { display: flex; align-items: center; gap: 8px; margin: 0; }

.er-mast__meta li + li::before {
	content: "";
	inline-size: 4px;
	block-size: 4px;
	border-radius: 50%;
	background: var(--ink-soft);
	opacity: .6;
}

/* --- Filters ------------------------------------------------------------- */

.er-filters { padding-block: clamp(26px, 3.4vw, 38px) 0; }

.er-filters__list {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.er-filters__list li { margin: 0; }

.er-chip {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	border-radius: var(--er-pill);
	border: 1px solid var(--line);
	background: var(--er-surface);
	color: var(--ink);
	font-family: var(--sans);
	font-size: .9rem;
	font-weight: 600;
	line-height: 1;
	padding: 11px 17px;
	text-decoration: none;
	transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}

.er-chip:hover { border-color: var(--ember); color: var(--navy); }

.er-chip.is-current {
	background: var(--navy);
	border-color: var(--navy);
	color: var(--cream);
}

.er-chip__count {
	font-size: .76rem;
	font-variant-numeric: tabular-nums;
	opacity: .6;
}

/* --- Body ---------------------------------------------------------------- */

.er-index__body { padding-block: clamp(28px, 4vw, 44px) var(--er-sec); }

/* --- Lead card ----------------------------------------------------------- */

.er-lead {
	display: grid;
	grid-template-columns: 1fr;
	background: var(--er-surface);
	border: 1px solid var(--line);
	border-radius: var(--er-radius);
	overflow: hidden;
	margin-block-end: clamp(26px, 3.6vw, 44px);
	transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}

.er-lead:hover { box-shadow: var(--shadow-card); transform: translateY(-2px); }

@media (min-width: 900px) {
	.er-lead { grid-template-columns: 1.02fr 1fr; }
}

/* Aspect box below 900px, then a stretched cell beside the copy above it. In
   both cases the box exists before the image loads, so nothing shifts. */
.er-lead__media {
	position: relative;
	display: block;
	inline-size: 100%;
	block-size: 0;
	padding-block-end: 58%;
	background: var(--cream-deep);
}

@media (min-width: 900px) {
	.er-lead__media { block-size: auto; padding-block-end: 0; }
}

.er-lead__media img {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* Empty state: the same calm panel and faint rule as the article's figure. */
.er-lead__media--empty::after {
	content: "";
	position: absolute;
	inset-inline: 16%;
	inset-block-start: 50%;
	block-size: 1px;
	background: var(--line);
}

.er-lead__body {
	padding: clamp(26px, 3vw, 40px);
	display: flex;
	flex-direction: column;
}

.er-lead__kicker {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	letter-spacing: .18em;
	text-transform: uppercase;
	font-size: .68rem;
	font-weight: 700;
	color: var(--ember);
	margin: 0 0 14px;
}

.er-lead__flag {
	background: var(--ember);
	color: var(--er-surface);
	border-radius: var(--er-pill);
	padding: 4px 11px;
	letter-spacing: .16em;
}

.er-lead__title {
	font-family: var(--serif);
	font-weight: 600;
	font-size: clamp(1.45rem, 2.6vw, 2rem);
	line-height: 1.18;
	margin: 0 0 14px;
	text-wrap: balance;
}

.er-lead__title a { color: var(--navy); text-decoration: none; }
.er-lead__title a:hover { color: var(--ember-deep); }

.er-lead__excerpt {
	color: var(--ink);
	margin: 0 0 22px;
	text-wrap: pretty;
}

/* auto pushes the foot down, so a short excerpt still leaves the meta line and
   the go link sitting against the bottom of the card. */
.er-lead__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 18px;
	margin-block: auto 16px;
	padding-block-start: 18px;
	border-block-start: 1px solid var(--line);
}

.er-lead__author {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: .9rem;
	color: var(--ink);
}

.er-lead__avatar {
	inline-size: 30px;
	block-size: 30px;
	border-radius: 50%;
	display: block;
}

.er-lead__foot .er-card__meta { margin: 0; }

/* --- Grid ---------------------------------------------------------------- */

.er-index__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
	gap: 22px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* The listing's cards carry a date and reading time line the related cards do
   not, so this is the one addition to the shared card anatomy. */
.er-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 14px;
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	font-size: .84rem;
	color: var(--ink-soft);
}

.er-card__meta li { display: flex; align-items: center; gap: 8px; margin: 0; }

.er-card__meta li + li::before {
	content: "";
	inline-size: 4px;
	block-size: 4px;
	border-radius: 50%;
	background: var(--ink-soft);
	opacity: .6;
}

/* --- Pager --------------------------------------------------------------- */

.er-pager { margin-block-start: clamp(34px, 4vw, 52px); }

.er-pager__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.er-pager__list li { margin: 0; }

.er-pager .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .45em;
	/* 42px keeps every control at a comfortable touch size. */
	min-inline-size: 42px;
	min-block-size: 42px;
	padding-inline: 15px;
	border-radius: var(--er-pill);
	border: 1px solid var(--line);
	background: var(--er-surface);
	color: var(--navy);
	font-family: var(--sans);
	font-size: .94rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}

.er-pager a.page-numbers:hover { border-color: var(--ember); color: var(--ember-deep); }

.er-pager .page-numbers.current {
	background: var(--navy);
	border-color: var(--navy);
	color: var(--cream);
}

.er-pager .page-numbers.dots {
	background: transparent;
	border-color: transparent;
	color: var(--ink-soft);
	min-inline-size: 0;
	padding-inline: 4px;
}

.er-pager a.page-numbers:hover .er-ar { transform: translateX(3px); }
.er-pager a.prev:hover .er-ar { transform: translateX(-3px); }
.er-pager .er-ar { transition: transform .2s var(--ease); }

/* --- Empty state --------------------------------------------------------- */

.er-empty {
	text-align: center;
	padding: clamp(40px, 6vw, 72px) var(--er-pad);
	border: 1px dashed var(--line);
	border-radius: var(--er-radius);
	background: var(--er-surface);
}

.er-empty__title {
	font-family: var(--serif);
	font-weight: 600;
	font-size: clamp(1.4rem, 2.6vw, 1.9rem);
	line-height: 1.18;
	color: var(--navy);
	margin: 0 0 12px;
}

.er-empty__body {
	color: var(--ink);
	max-inline-size: 34em;
	margin: 0 auto 24px;
}

/* ==========================================================================
   COMMENTS
   WordPress renders these; we only style them.

   Every selector below is scoped to .er-comments, the wrapper the template
   prints, so nothing here can reach a comment list anywhere else on the site.

   The markup is what Hello's comments.php and core's HTML5 comment walker
   produce, and the class names are theirs, not ours:

     .comments-area > h2.title-comments        the count, "3 Responses"
                    > ol.comment-list
                        > li.comment
                            > article.comment-body
                                > footer.comment-meta
                                    > .comment-author.vcard  img.avatar, b.fn, .says
                                    > .comment-metadata      time
                                > .comment-content
                                > .reply                     a.comment-reply-link
                            > ol.children                    replies, nested
                    > .comment-respond                       the form

   Note title-comments, not comments-title: the previous rule here targeted a
   class this markup never contains, so the heading was never styled.
   ========================================================================== */

.er-comments {
	background: var(--cream);
	font-family: var(--sans);
	color: var(--navy);
	font-size: 1.0625rem;
	line-height: 1.65;
}

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

.er-comments__container {
	max-inline-size: var(--er-container);
	margin-inline: auto;
	padding-inline: var(--er-pad);
}

/* The article's own bottom padding already sits above this, so the section only
   needs to space itself away from the footer. */
.er-comments .comments-area { padding-block-end: var(--er-sec); }

.er-comments :focus-visible {
	outline: 2px solid var(--ember);
	outline-offset: 2px;
	border-radius: 4px;
}

/* --- Headings ------------------------------------------------------------ */

.er-comments .title-comments,
.er-comments .comment-reply-title {
	font-family: var(--serif);
	font-weight: 600;
	font-size: clamp(1.35rem, 2.4vw, 1.75rem);
	line-height: 1.2;
	color: var(--navy);
	letter-spacing: 0;
	margin: 0 0 24px;
}

/* The ember rule the rest of the page uses to open a section. */
.er-comments .title-comments::before {
	content: "";
	display: block;
	inline-size: 38px;
	block-size: 3px;
	background: var(--ember);
	border-radius: 3px;
	margin-block-end: 18px;
}

/* --- The list ------------------------------------------------------------ */

.er-comments .comment-list {
	list-style: none;
	margin: 0 0 48px;
	padding: 0;
}

.er-comments .comment-list li { list-style: none; }

.er-comments .comment-body {
	background: var(--er-surface);
	border: 1px solid var(--line);
	border-radius: var(--er-radius);
	padding: 22px 24px;
	margin-block-end: 14px;
}

/* Replies step in behind a hairline, so depth reads without indenting so far
   that a third-level reply has no room left to say anything. */
.er-comments .comment-list .children {
	list-style: none;
	margin: 0;
	padding-inline-start: clamp(14px, 3vw, 30px);
	border-inline-start: 2px solid var(--line);
}

/* justify-content is set here rather than inherited from Hello's stylesheet on
   purpose. That stylesheet can be switched off in Theme Settings, and this
   layout must not quietly collapse into name-then-date when it is. */
.er-comments .comment-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 4px 12px;
	margin-block-end: 12px;
}

.er-comments .comment-author {
	display: flex;
	align-items: center;
	gap: 12px;
	font-style: normal;
}

.er-comments .comment-author .avatar {
	inline-size: 42px;
	block-size: 42px;
	border-radius: 50%;
	display: block;
	flex: none;
}

.er-comments .comment-author .fn,
.er-comments .comment-author .fn a {
	font-weight: 600;
	font-style: normal;
	color: var(--navy);
	text-decoration: none;
}

.er-comments .comment-author .fn a:hover { color: var(--ember-deep); }

/* "says:" adds nothing next to a name and a date. */
.er-comments .comment-author .says { display: none; }

.er-comments .comment-metadata,
.er-comments .comment-metadata a {
	font-size: .86rem;
	color: var(--ink-soft);
	text-decoration: none;
}

.er-comments .comment-metadata a:hover { color: var(--ember); }

.er-comments .comment-content {
	color: var(--ink);
	overflow-wrap: break-word;
}

.er-comments .comment-content > *:first-child { margin-block-start: 0; }
.er-comments .comment-content > *:last-child { margin-block-end: 0; }
.er-comments .comment-content p { margin-block: 0 1em; }

.er-comments .comment-content a { color: var(--ember-deep); }

.er-comments .comment-awaiting-moderation {
	display: inline-block;
	font-size: .82rem;
	color: var(--ember-deep);
	background: var(--cream-deep);
	border-radius: var(--er-pill);
	padding: 4px 12px;
	margin-block: 4px 0;
}

.er-comments .reply { margin-block-start: 14px; }

.er-comments .comment-reply-link {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	font-size: .86rem;
	font-weight: 600;
	color: var(--ember);
	text-decoration: none;
}

.er-comments .comment-reply-link:hover { color: var(--ember-deep); }

.er-comments .comment-reply-link::after {
	content: "\2192";
	transition: transform .2s var(--ease);
}

.er-comments .comment-reply-link:hover::after { transform: translateX(3px); }

/* --- Comment navigation, on a post with paged comments ------------------- */

.er-comments .comment-navigation,
.er-comments .comments-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px;
	margin-block-end: 28px;
	font-size: .92rem;
	font-weight: 600;
}

.er-comments .comment-navigation a { color: var(--ember); text-decoration: none; }
.er-comments .comment-navigation a:hover { color: var(--ember-deep); }

/* --- The form ------------------------------------------------------------ */

.er-comments .comment-respond {
	background: var(--er-surface);
	border: 1px solid var(--line);
	border-radius: var(--er-radius);
	padding: clamp(24px, 3.4vw, 36px);
}

/* Replying inline: the form moves inside the comment being replied to, where a
   second bordered panel inside a bordered card reads as a box in a box. */
.er-comments .comment .comment-respond {
	border: 0;
	background: transparent;
	padding: 22px 0 0;
	margin-block-start: 18px;
	border-block-start: 1px solid var(--line);
	border-radius: 0;
}

.er-comments .comment-reply-title { margin-block-end: 18px; }

.er-comments .comment-reply-title small {
	display: inline-block;
	font-family: var(--sans);
	font-size: .82rem;
	font-weight: 500;
	margin-inline-start: 10px;
}

.er-comments .comment-reply-title small a { color: var(--ember); text-decoration: none; }

.er-comments .comment-notes,
.er-comments .logged-in-as {
	font-size: .9rem;
	color: var(--ink-soft);
	margin: 0 0 20px;
}

.er-comments .comment-notes a,
.er-comments .logged-in-as a { color: var(--ember-deep); }

.er-comments .required-field-message,
.er-comments .required { color: var(--ember-deep); }

.er-comments .comment-form label {
	display: block;
	font-size: .8rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--ink-soft);
	margin-block-end: 7px;
}

.er-comments .comment-form input[type="text"],
.er-comments .comment-form input[type="email"],
.er-comments .comment-form input[type="url"],
.er-comments .comment-form textarea {
	inline-size: 100%;
	padding: 12px 14px;
	font-family: var(--sans);
	font-size: 1rem;
	color: var(--navy);
	background: var(--er-surface);
	border: 1px solid var(--line);
	border-radius: var(--er-radius-sm);
	margin-block-end: 18px;
	transition: border-color .2s var(--ease);
}

.er-comments .comment-form input[type="text"]:focus,
.er-comments .comment-form input[type="email"]:focus,
.er-comments .comment-form input[type="url"]:focus,
.er-comments .comment-form textarea:focus { border-color: var(--ember); }

.er-comments .comment-form textarea { min-block-size: 150px; resize: vertical; }

/* Name, email and website side by side once there is room for them. */
@media (min-width: 720px) {
	.er-comments .comment-form {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: 18px;
	}

	.er-comments .comment-form > *:not(.comment-form-author):not(.comment-form-email):not(.comment-form-url) {
		grid-column: 1 / -1;
	}
}

/* The consent checkbox is not a stacked field: its label belongs beside it. */
.er-comments .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-block-end: 20px;
}

.er-comments .comment-form-cookies-consent input { margin-block-start: 3px; flex: none; }

.er-comments .comment-form-cookies-consent label {
	margin: 0;
	text-transform: none;
	letter-spacing: 0;
	font-size: .88rem;
	font-weight: 400;
	color: var(--ink-soft);
}

.er-comments .form-submit { margin: 0; }

.er-comments .comment-form .submit {
	border: 0;
	cursor: pointer;
	background: var(--ember);
	color: var(--er-surface);
	font-family: var(--sans);
	font-weight: 600;
	font-size: .98rem;
	padding: 14px 28px;
	border-radius: var(--er-pill);
	transition: background .2s var(--ease), transform .2s var(--ease);
}

.er-comments .comment-form .submit:hover { background: var(--ember-deep); }
.er-comments .comment-form .submit:active { transform: scale(.98); }

.er-comments .no-comments,
.er-comments .comment-form-comment + .form-submit ~ p {
	color: var(--ink-soft);
	font-size: .92rem;
}

/* --- Outranking the parent ----------------------------------------------
   Hello styles comments through #comments, an id, and an id beats any number
   of classes. Everything above would therefore lose to it on the properties it
   sets, and the section would render as a blend of the two designs: Hello's
   30px 0 padding and grey bottom rule inside our bordered card, its flex-column
   body, its absolutely positioned avatar, its 11px metadata, and a floating
   "↪" before every reply list.

   Repeating the declarations here with #comments in the selector is what makes
   this design win outright. Each block below is the same value as its
   counterpart above; nothing new is introduced, so there is one design, not a
   negotiated one. They are kept together rather than folded into the rules
   above so that the reason for the extra specificity stays visible.
   ------------------------------------------------------------------------ */

.er-comments #comments .comment-list { font-size: inherit; }

.er-comments #comments .comment .comment-body,
.er-comments #comments .pingback .comment-body {
	display: block;
	background: var(--er-surface);
	border: 1px solid var(--line);
	border-block-end: 1px solid var(--line);
	border-radius: var(--er-radius);
	padding: 22px 24px;
	margin-block-end: 14px;
}

/* The avatar is a flex item in .comment-author here, not a floated or absolutely
   positioned element beside the text. */
.er-comments #comments .comment .avatar,
.er-comments #comments .pingback .avatar {
	position: static;
	float: none;
	margin: 0;
	inline-size: 42px;
	block-size: 42px;
}

.er-comments #comments .comment-metadata,
.er-comments #comments .comment-metadata a {
	font-size: .86rem;
	line-height: 1.4;
}

.er-comments #comments .reply { font-size: .86rem; line-height: 1.4; }

.er-comments #comments .children {
	padding-inline-start: clamp(14px, 3vw, 30px);
	border-inline-start: 2px solid var(--line);
}

/* Hello draws a floating "↪" before a reply list. The rail above already says
   the same thing, and the glyph hangs outside the card it belongs to. */
.er-comments #comments ol.comment-list .children::before { content: none; }

/* ==========================================================================
   MOTION
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
	html:has(.er-single) { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
	.er-single *,
	.er-single *::before,
	.er-single *::after,
	.er-index *,
	.er-index *::before,
	.er-index *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}

	.er-reveal { opacity: 1; transform: none; }

	/* The listing's reveal is opt-in through .is-js, and the script skips it
	   under reduced motion. This is the belt to that braces. */
	.er-index.is-js .er-rise { opacity: 1; transform: none; }
}