/*
 * Eye Catching Room - main stylesheet
 *
 * Every colour, font, radius and spacing step lives in the token block at the
 * top of this file. Nothing below it hardcodes a colour, so re-skinning the site
 * means editing one place (or overriding the same custom properties from a child
 * theme or the Customizer accent setting).
 *
 * Contents
 *   1.  Design tokens
 *   2.  Reset and base elements
 *   3.  Accessibility utilities
 *   4.  Layout: container, sections, grids
 *   5.  Small shared components
 *   6.  Site header, navigation, search
 *   7.  Article cards
 *   8.  Homepage sections
 *   9.  Archives, search results, 404
 *   10. Single article and prose
 *   11. Sidebar, widgets, table of contents
 *   12. Advertisement slots
 *   13. Editorial components (shop, product, callout, newsletter)
 *   14. Comments
 *   15. Footer
 *   16. WordPress core classes and blocks
 *   17. Motion, print
 */

/* ------------------------------------------------------------------------
   1. Design tokens
   ------------------------------------------------------------------------ */

:root {
	/* Palette. Warm, restrained, paper-like. Mirrors theme.json. */
	--ecr-bg: #faf8f5;
	--ecr-surface: #ffffff;
	--ecr-sand: #f1ebe3;
	--ecr-sand-deep: #e8e0d5;
	--ecr-border: #e2dad0;
	--ecr-border-strong: #cfc4b6;
	--ecr-ink: #211f1d;
	--ecr-ink-soft: #4a4540;
	--ecr-muted: #6f675f;
	--ecr-taupe: #8b8279;
	--ecr-sage: #5f6b5c;

	/* Accent. Overridden inline by the Customizer colour setting. */
	--ecr-accent: #8f5c43;
	--ecr-accent-hover: #754b37;
	--ecr-accent-soft: #ede5e1;

	/* Typography */
	--ecr-font-display: Fraunces, "Iowan Old Style", "Palatino Linotype", Georgia, serif;
	--ecr-font-body: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	--ecr-fs-body: 1.0625rem;
	--ecr-fs-small: 0.875rem;
	--ecr-fs-tiny: 0.75rem;
	--ecr-fs-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
	--ecr-fs-h1: clamp(2rem, 1.45rem + 2.3vw, 3.25rem);
	--ecr-fs-h2: clamp(1.5rem, 1.3rem + 0.9vw, 2.125rem);
	--ecr-fs-h3: clamp(1.1875rem, 1.11rem + 0.4vw, 1.4375rem);
	--ecr-fs-h4: 1.125rem;
	--ecr-fs-card: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
	--ecr-fs-card-lg: clamp(1.375rem, 1.2rem + 0.9vw, 1.875rem);
	--ecr-fs-hero: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem);

	--ecr-lh-body: 1.75;
	--ecr-lh-tight: 1.16;
	--ecr-ls-kicker: 0.14em;

	/* Spacing scale */
	--ecr-space-1: 0.5rem;
	--ecr-space-2: 0.75rem;
	--ecr-space-3: 1.25rem;
	--ecr-space-4: 2rem;
	--ecr-space-5: 3rem;
	--ecr-space-6: clamp(3rem, 5.5vw, 5.5rem);

	/* Layout */
	--ecr-max: 1200px;
	--ecr-max-narrow: 780px;
	--ecr-gutter: clamp(1rem, 3.5vw, 2.25rem);
	--ecr-gap: clamp(1.25rem, 2.4vw, 2.125rem);
	--ecr-measure: 720px;
	--ecr-sidebar-w: 320px;
	--ecr-sticky-top: 5.75rem;

	/* Surface details. Deliberately light on radius and shadow. */
	--ecr-radius: 3px;
	--ecr-radius-md: 6px;
	--ecr-radius-pill: 999px;
	--ecr-shadow: 0 1px 2px rgba(33, 31, 29, 0.05);
	--ecr-shadow-lift: 0 10px 30px rgba(33, 31, 29, 0.09);
	--ecr-ease: cubic-bezier(0.2, 0.6, 0.3, 1);
	--ecr-t-fast: 140ms var(--ecr-ease);
	--ecr-t: 220ms var(--ecr-ease);
	--ecr-t-slow: 480ms var(--ecr-ease);
	--ecr-z-header: 60;
	--ecr-z-drawer: 90;
}

/* Web fonts switched off in the Customizer: fall back to system stacks. */
.ecr-system-fonts {
	--ecr-font-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
	--ecr-font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ------------------------------------------------------------------------
   2. Reset and base elements
   ------------------------------------------------------------------------ */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	background-color: var(--ecr-bg);
	color: var(--ecr-ink);
	font-family: var(--ecr-font-body);
	font-size: var(--ecr-fs-body);
	line-height: var(--ecr-lh-body);
	font-synthesis-weight: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-wrap: break-word;
}

/* Scroll lock while the mobile drawer is open. The body is pinned rather than
   just clipped - iOS Safari ignores overflow alone - and the script writes the
   matching negative `top` so the page does not appear to jump. */
body.ecr-drawer-open {
	position: fixed;
	left: 0;
	right: 0;
	width: 100%;
	overflow: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0 0 var(--ecr-space-2);
	font-family: var(--ecr-font-display);
	font-weight: 600;
	line-height: var(--ecr-lh-tight);
	letter-spacing: -0.012em;
	text-wrap: balance;
}

h1 {
	font-size: var(--ecr-fs-h1);
}

h2 {
	font-size: var(--ecr-fs-h2);
}

h3 {
	font-size: var(--ecr-fs-h3);
}

h4 {
	font-size: var(--ecr-fs-h4);
}

p,
ul,
ol,
dl,
figure,
pre,
table,
blockquote {
	margin: 0 0 var(--ecr-space-3);
}

p:last-child,
ul:last-child,
ol:last-child {
	margin-bottom: 0;
}

a {
	color: var(--ecr-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.16em;
	transition: color var(--ecr-t-fast);
}

a:hover,
a:focus {
	color: var(--ecr-accent-hover);
}

img,
picture,
video,
iframe,
svg {
	max-width: 100%;
	height: auto;
}

img {
	display: block;
	border-style: none;
}

svg.ecr-icon {
	flex: none;
	height: auto;
}

figure {
	margin-inline: 0;
}

figcaption {
	margin-top: var(--ecr-space-1);
	color: var(--ecr-muted);
	font-size: var(--ecr-fs-small);
	line-height: 1.5;
}

blockquote {
	padding-left: var(--ecr-space-3);
	border-left: 2px solid var(--ecr-accent);
	color: var(--ecr-ink-soft);
	font-family: var(--ecr-font-display);
	font-size: 1.1875rem;
	font-style: italic;
	line-height: 1.55;
}

blockquote cite {
	display: block;
	margin-top: var(--ecr-space-1);
	color: var(--ecr-muted);
	font-family: var(--ecr-font-body);
	font-size: var(--ecr-fs-small);
	font-style: normal;
}

code,
kbd,
pre,
samp {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.9em;
}

code {
	padding: 0.15em 0.4em;
	background-color: var(--ecr-sand);
	border-radius: var(--ecr-radius);
}

pre {
	padding: var(--ecr-space-3);
	overflow-x: auto;
	background-color: var(--ecr-sand);
	border-radius: var(--ecr-radius-md);
	line-height: 1.6;
}

pre code {
	padding: 0;
	background: none;
}

hr {
	height: 1px;
	margin: var(--ecr-space-5) 0;
	border: 0;
	background-color: var(--ecr-border);
}

table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--ecr-fs-small);
}

th,
td {
	padding: 0.625rem 0.75rem;
	border-bottom: 1px solid var(--ecr-border);
	text-align: left;
	vertical-align: top;
}

th {
	font-weight: 700;
}

/* Forms */
input,
select,
textarea,
button {
	font: inherit;
	color: inherit;
}

input[type="text"],
input[type="email"],
input[type="search"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="password"],
select,
textarea {
	width: 100%;
	max-width: 100%;
	padding: 0.6875rem 0.875rem;
	background-color: var(--ecr-surface);
	border: 1px solid var(--ecr-border-strong);
	border-radius: var(--ecr-radius);
	color: var(--ecr-ink);
	font-size: 1rem;
	line-height: 1.4;
	transition: border-color var(--ecr-t-fast), box-shadow var(--ecr-t-fast);
}

input::placeholder,
textarea::placeholder {
	color: var(--ecr-taupe);
	opacity: 1;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
	border-color: var(--ecr-accent);
	box-shadow: 0 0 0 3px var(--ecr-accent-soft);
	outline: none;
}

textarea {
	min-height: 9rem;
	resize: vertical;
}

button,
input[type="submit"],
input[type="button"] {
	cursor: pointer;
}

/* ------------------------------------------------------------------------
   3. Accessibility utilities
   ------------------------------------------------------------------------ */

/* Focus is always visible. Where the default ring would be clipped or unclear,
   the rules below replace it with a stronger indicator - never with nothing. */
:focus-visible {
	outline: 2px solid var(--ecr-accent);
	outline-offset: 3px;
	border-radius: var(--ecr-radius);
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	border: 0;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	display: block;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 100000;
	width: auto;
	height: auto;
	padding: 0.75rem 1.25rem;
	clip: auto !important;
	clip-path: none;
	background-color: var(--ecr-surface);
	border-radius: var(--ecr-radius);
	box-shadow: var(--ecr-shadow-lift);
	color: var(--ecr-ink);
	font-size: var(--ecr-fs-small);
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
}

.ecr-skip-link:focus {
	position: fixed !important;
}

/* ------------------------------------------------------------------------
   4. Layout: container, sections, grids
   ------------------------------------------------------------------------ */

.ecr-site {
	display: flex;
	min-height: 100vh;
	flex-direction: column;
}

.ecr-main {
	flex: 1 0 auto;
	padding-bottom: var(--ecr-space-6);
}

.ecr-container {
	width: 100%;
	max-width: var(--ecr-max);
	margin-inline: auto;
	padding-inline: var(--ecr-gutter);
}

.ecr-section {
	padding-block: clamp(2.25rem, 4.5vw, 3.75rem);
}

.ecr-section + .ecr-section {
	padding-top: 0;
}

.ecr-section--flush {
	padding-block: 0;
}

.ecr-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--ecr-space-3);
	margin-bottom: var(--ecr-space-4);
	padding-bottom: var(--ecr-space-2);
	border-bottom: 1px solid var(--ecr-border);
}

.ecr-section__head-text {
	min-width: 0;
}

.ecr-section__title {
	margin-bottom: 0;
	font-size: var(--ecr-fs-h2);
}

.ecr-section__subtitle {
	margin: 0.375rem 0 0;
	max-width: 52ch;
	color: var(--ecr-muted);
	font-size: var(--ecr-fs-small);
	line-height: 1.55;
}

.ecr-section__link {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	flex: none;
	font-size: var(--ecr-fs-small);
	font-weight: 600;
	text-decoration: none;
}

.ecr-section__link:hover {
	text-decoration: underline;
}

.ecr-section__link .ecr-icon {
	transition: transform var(--ecr-t-fast);
}

.ecr-section__link:hover .ecr-icon {
	transform: translateX(3px);
}

/* Grid system. One class per shape, all of them single-column on phones. */
.ecr-grid {
	display: grid;
	gap: var(--ecr-gap);
	grid-template-columns: 1fr;
}

@media (min-width: 34.375em) {
	/* 550px */
	.ecr-grid--3,
	.ecr-grid--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 48em) {
	/* 768px */
	.ecr-grid--row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64em) {
	/* 1024px */
	.ecr-grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ecr-grid--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Spotlight: the first card leads, the rest sit beside it. */
@media (min-width: 56.25em) {
	/* 900px */
	.ecr-grid--spotlight {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ecr-grid--spotlight > :first-child {
		grid-column: span 2;
		grid-row: span 2;
	}
}

.ecr-grid--related {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--ecr-space-3) var(--ecr-gap);
}

@media (min-width: 56.25em) {
	.ecr-grid--related {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* ------------------------------------------------------------------------
   5. Small shared components
   ------------------------------------------------------------------------ */

.ecr-kicker {
	margin: 0 0 var(--ecr-space-1);
	color: var(--ecr-accent);
	font-family: var(--ecr-font-body);
	font-size: var(--ecr-fs-tiny);
	font-weight: 700;
	letter-spacing: var(--ecr-ls-kicker);
	line-height: 1.4;
	text-transform: uppercase;
}

.ecr-kicker a {
	color: inherit;
	text-decoration: none;
}

.ecr-kicker a:hover {
	text-decoration: underline;
}

.ecr-kicker--article {
	margin-bottom: var(--ecr-space-2);
}

.ecr-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4rem 0.5rem;
	margin: 0;
	color: var(--ecr-muted);
	font-size: var(--ecr-fs-small);
	line-height: 1.4;
}

.ecr-meta a {
	color: inherit;
	text-decoration-color: var(--ecr-border-strong);
}

.ecr-meta a:hover {
	color: var(--ecr-accent);
}

.ecr-meta__sep {
	color: var(--ecr-border-strong);
}

.ecr-meta__updated {
	font-style: italic;
}

.ecr-meta--card {
	margin-top: var(--ecr-space-1);
	font-size: var(--ecr-fs-tiny);
}

.ecr-meta--legal {
	color: var(--ecr-muted);
	font-size: var(--ecr-fs-small);
}

.ecr-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1.375rem;
	border: 1px solid transparent;
	border-radius: var(--ecr-radius);
	font-size: var(--ecr-fs-small);
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color var(--ecr-t-fast), border-color var(--ecr-t-fast), color var(--ecr-t-fast);
}

.ecr-button--primary {
	background-color: var(--ecr-accent);
	border-color: var(--ecr-accent);
	color: var(--ecr-surface);
}

.ecr-button--primary:hover,
.ecr-button--primary:focus {
	background-color: var(--ecr-accent-hover);
	border-color: var(--ecr-accent-hover);
	color: var(--ecr-surface);
}

.ecr-button--ghost {
	background-color: transparent;
	border-color: var(--ecr-border-strong);
	color: var(--ecr-ink);
}

.ecr-button--ghost:hover,
.ecr-button--ghost:focus {
	background-color: var(--ecr-sand);
	border-color: var(--ecr-ink);
	color: var(--ecr-ink);
}

.ecr-icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	background: none;
	border: 1px solid transparent;
	border-radius: var(--ecr-radius);
	color: var(--ecr-ink);
	transition: background-color var(--ecr-t-fast), color var(--ecr-t-fast);
}

.ecr-icon-button:hover {
	background-color: var(--ecr-sand);
	color: var(--ecr-accent);
}

.ecr-pill-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ecr-pill {
	display: inline-block;
	padding: 0.375rem 0.8125rem;
	background-color: var(--ecr-surface);
	border: 1px solid var(--ecr-border);
	border-radius: var(--ecr-radius-pill);
	color: var(--ecr-ink-soft);
	font-size: var(--ecr-fs-small);
	line-height: 1.35;
	text-decoration: none;
	transition: background-color var(--ecr-t-fast), border-color var(--ecr-t-fast), color var(--ecr-t-fast);
}

.ecr-pill:hover,
.ecr-pill:focus {
	background-color: var(--ecr-accent);
	border-color: var(--ecr-accent);
	color: var(--ecr-surface);
}

.ecr-breadcrumbs {
	margin-bottom: var(--ecr-space-2);
	color: var(--ecr-muted);
	font-size: var(--ecr-fs-tiny);
	letter-spacing: 0.02em;
}

.ecr-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ecr-breadcrumbs__item + .ecr-breadcrumbs__item::before {
	content: "/";
	margin-right: 0.5rem;
	color: var(--ecr-border-strong);
}

.ecr-breadcrumbs a {
	color: inherit;
	text-decoration: none;
}

.ecr-breadcrumbs a:hover {
	color: var(--ecr-accent);
	text-decoration: underline;
}

.ecr-breadcrumbs [aria-current="page"] {
	color: var(--ecr-ink-soft);
}

/* An SEO plugin renders the trail with its own markup - usually a <p> or a bare
   list - so normalise the shape without fighting its separators. */
.ecr-breadcrumbs--plugin > * {
	margin: 0;
	font-size: inherit;
}

.ecr-breadcrumbs--plugin ul,
.ecr-breadcrumbs--plugin ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.5rem;
	padding: 0;
	list-style: none;
}

.ecr-social {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ecr-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--ecr-radius-pill);
	color: var(--ecr-ink-soft);
	transition: background-color var(--ecr-t-fast), color var(--ecr-t-fast);
}

.ecr-social a:hover,
.ecr-social a:focus {
	background-color: var(--ecr-sand);
	color: var(--ecr-accent);
}

.ecr-pagination {
	margin-top: var(--ecr-space-5);
	padding-top: var(--ecr-space-4);
	border-top: 1px solid var(--ecr-border);
}

.ecr-pagination .nav-links {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.375rem;
}

.ecr-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	min-width: 2.5rem;
	min-height: 2.5rem;
	padding: 0 0.75rem;
	justify-content: center;
	background-color: var(--ecr-surface);
	border: 1px solid var(--ecr-border);
	border-radius: var(--ecr-radius);
	color: var(--ecr-ink-soft);
	font-size: var(--ecr-fs-small);
	font-weight: 600;
	text-decoration: none;
	transition: background-color var(--ecr-t-fast), border-color var(--ecr-t-fast), color var(--ecr-t-fast);
}

.ecr-pagination a.page-numbers:hover {
	border-color: var(--ecr-ink);
	color: var(--ecr-ink);
}

.ecr-pagination .page-numbers.current {
	background-color: var(--ecr-accent);
	border-color: var(--ecr-accent);
	color: var(--ecr-surface);
}

.ecr-pagination .page-numbers.dots {
	min-width: 1.5rem;
	padding: 0;
	background: none;
	border-color: transparent;
}

.ecr-pagination .ecr-icon--prev {
	transform: rotate(90deg);
}

.ecr-pagination .ecr-icon--next {
	transform: rotate(-90deg);
}

.ecr-page-links {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: var(--ecr-space-4);
	font-size: var(--ecr-fs-small);
}

.ecr-page-links__label {
	color: var(--ecr-muted);
	font-weight: 700;
}

.ecr-page-links a,
.ecr-page-links__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	min-height: 2rem;
	border: 1px solid var(--ecr-border);
	border-radius: var(--ecr-radius);
	text-decoration: none;
}

.ecr-page-links > .ecr-page-links__item {
	background-color: var(--ecr-accent);
	border-color: var(--ecr-accent);
	color: var(--ecr-surface);
}

.ecr-page-links a .ecr-page-links__item {
	min-width: 0;
	min-height: 0;
	border: 0;
	background: none;
	color: inherit;
}

/* Empty states */
.ecr-empty {
	max-width: 34rem;
	margin-inline: auto;
	padding-block: var(--ecr-space-5);
	text-align: center;
}

.ecr-empty__title {
	font-size: var(--ecr-fs-h2);
}

.ecr-empty__text {
	color: var(--ecr-muted);
}

.ecr-empty__search {
	margin: var(--ecr-space-4) auto;
	max-width: 26rem;
}

.ecr-empty__terms .ecr-pill-list {
	justify-content: center;
}

.ecr-subnav {
	margin-top: var(--ecr-space-3);
}

/* ------------------------------------------------------------------------
   6. Site header, navigation, search
   ------------------------------------------------------------------------ */

.ecr-header {
	position: sticky;
	top: 0;
	z-index: var(--ecr-z-header);
	background-color: var(--ecr-bg);
	border-bottom: 1px solid var(--ecr-border);
}

.ecr-header__inner {
	display: flex;
	align-items: center;
	gap: var(--ecr-space-2);
	min-height: 3.75rem;
}

.ecr-branding {
	display: flex;
	flex: 1 1 auto;
	min-width: 0;
	flex-direction: column;
	justify-content: center;
	gap: 0.125rem;
	padding-block: 0.625rem;
}

.ecr-branding__logo {
	margin: 0;
	font-family: var(--ecr-font-display);
	font-size: clamp(1.25rem, 1.05rem + 1vw, 1.75rem);
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.05;
}

.ecr-branding__link {
	color: var(--ecr-ink);
	text-decoration: none;
}

.ecr-branding__link:hover {
	color: var(--ecr-accent);
}

.ecr-branding__logo--image {
	display: flex;
	align-items: center;
}

.ecr-branding__logo--image img,
.custom-logo {
	width: auto;
	max-height: 2.75rem;
}

/* The tagline is present but deliberately quiet - it never competes with the
   wordmark or the headline of the page. */
.ecr-branding__tagline {
	margin: 0;
	color: var(--ecr-taupe);
	font-size: 0.6875rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	line-height: 1.3;
	text-transform: uppercase;
}

.ecr-header__actions {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	flex: none;
	margin-left: auto;
}

.ecr-header__toggle {
	flex: none;
	order: -1;
	margin-left: calc(var(--ecr-space-1) * -1);
}

.ecr-header__toggle-icon {
	display: inline-flex;
}

/* Icon swap driven by the button's own state - no extra classes to keep in sync. */
.ecr-header__toggle .ecr-icon--close,
.ecr-header__search-toggle .ecr-icon--close {
	display: none;
}

.ecr-header__toggle[aria-expanded="true"] .ecr-icon--menu,
.ecr-header__search-toggle[aria-expanded="true"] .ecr-icon--search {
	display: none;
}

.ecr-header__toggle[aria-expanded="true"] .ecr-icon--close,
.ecr-header__search-toggle[aria-expanded="true"] .ecr-icon--close {
	display: inline-block;
}

/* Without JavaScript the toggles do nothing, so they are not shown at all and
   the navigation plus the search panel are simply always visible. */
html:not(.ecr-js) .ecr-header__toggle,
html:not(.ecr-js) .ecr-header__search-toggle {
	display: none;
}

/* -- Navigation ---------------------------------------------------------- */

.ecr-nav {
	min-width: 0;
}

.ecr-menu {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0 var(--ecr-space-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ecr-menu__item {
	position: relative;
}

.ecr-menu__link {
	display: block;
	padding: 0.5rem 0;
	color: var(--ecr-ink);
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
}

.ecr-menu__link:hover,
.ecr-menu__item.current-menu-item > .ecr-menu__link,
.ecr-menu__item.current-menu-ancestor > .ecr-menu__link {
	color: var(--ecr-accent);
}

.ecr-submenu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	background: none;
	border: 0;
	border-radius: var(--ecr-radius);
	color: var(--ecr-muted);
}

.ecr-submenu-toggle:hover {
	color: var(--ecr-accent);
}

.ecr-submenu-toggle .ecr-icon {
	transition: transform var(--ecr-t-fast);
}

.ecr-submenu-toggle[aria-expanded="true"] .ecr-icon {
	transform: rotate(180deg);
}

.ecr-menu__submenu {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ecr-nav__hint {
	margin: var(--ecr-space-2) 0 0;
	color: var(--ecr-muted);
	font-size: var(--ecr-fs-tiny);
	font-style: italic;
}

/* Below the desktop breakpoint the phone drawer replaces this bar entirely
   (section 6b). Without JavaScript there is no drawer, so the bar stays and
   simply stacks - the same fallback 1.0.3 shipped. */
@media (max-width: 63.9375em) {
	html.ecr-js .ecr-nav {
		display: none;
	}

	/* Static, always-open navigation when JavaScript is unavailable. */
	html:not(.ecr-js) .ecr-nav {
		flex: 1 0 100%;
		order: 5;
		padding-bottom: var(--ecr-space-3);
	}

	.ecr-menu {
		display: block;
	}

	.ecr-menu__item {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		border-bottom: 1px solid var(--ecr-border);
	}

	.ecr-menu__link {
		flex: 1 1 auto;
		padding: 0.8125rem 0;
		font-size: 1.0625rem;
	}

	.ecr-menu__submenu {
		flex: 1 0 100%;
		padding: 0 0 var(--ecr-space-2) var(--ecr-space-3);
	}

	.ecr-menu__submenu .ecr-menu__item {
		border-bottom: 0;
	}

	.ecr-menu__submenu .ecr-menu__link {
		padding: 0.5rem 0;
		color: var(--ecr-ink-soft);
		font-size: var(--ecr-fs-small);
		font-weight: 500;
	}

	/* Submenus stay closed until their button is pressed. */
	.ecr-menu__submenu {
		display: none;
	}

	.ecr-submenu-toggle[aria-expanded="true"] ~ .ecr-menu__submenu {
		display: block;
	}
}

/* Desktop navigation bar. */
@media (min-width: 64em) {
	/* The drawer only exists below this breakpoint, and the menu is on screen in
	   full here, so the button has nothing left to open. The script already closes
	   the drawer on the way up to this width. */
	.ecr-header__toggle {
		display: none;
	}

	.ecr-header__inner {
		min-height: 4.5rem;
		gap: var(--ecr-space-4);
	}

	.ecr-branding {
		flex: none;
	}

	.ecr-nav {
		flex: 1 1 auto;
		display: flex;
		justify-content: flex-end;
	}

	.ecr-nav__hint {
		display: none;
	}

	.ecr-menu {
		flex-wrap: nowrap;
	}

	.ecr-menu__item {
		display: flex;
		align-items: center;
	}

	.ecr-menu__link {
		padding: 1.375rem 0;
	}

	.ecr-submenu-toggle {
		width: 1.5rem;
		height: 1.5rem;
	}

	.ecr-menu__submenu {
		position: absolute;
		top: 100%;
		left: -1rem;
		z-index: 5;
		width: max-content;
		min-width: 12rem;
		max-width: 18rem;
		padding: 0.5rem 0;
		background-color: var(--ecr-surface);
		border: 1px solid var(--ecr-border);
		border-radius: var(--ecr-radius-md);
		box-shadow: var(--ecr-shadow-lift);
		opacity: 0;
		visibility: hidden;
		transform: translateY(4px);
		transition: opacity var(--ecr-t-fast), transform var(--ecr-t-fast), visibility var(--ecr-t-fast);
	}

	.ecr-menu__submenu .ecr-menu__submenu {
		top: -0.5rem;
		left: 100%;
	}

	.ecr-menu__submenu .ecr-menu__link {
		padding: 0.5rem 1rem;
		font-size: var(--ecr-fs-small);
		font-weight: 500;
	}

	.ecr-menu__submenu .ecr-menu__link:hover {
		background-color: var(--ecr-sand);
	}

	.ecr-menu__item--has-children:focus-within > .ecr-menu__submenu,
	.ecr-submenu-toggle[aria-expanded="true"] ~ .ecr-menu__submenu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}
}

@media (min-width: 64em) and (hover: hover) {
	.ecr-menu__item--has-children:hover > .ecr-menu__submenu {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);
	}
}

/* -- Search ------------------------------------------------------------- */

.ecr-searchform {
	display: flex;
	align-items: stretch;
	gap: 0.5rem;
}

.ecr-searchform__input {
	flex: 1 1 auto;
}

.ecr-searchform__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 2.875rem;
	background-color: var(--ecr-ink);
	border: 1px solid var(--ecr-ink);
	border-radius: var(--ecr-radius);
	color: var(--ecr-surface);
	transition: background-color var(--ecr-t-fast), border-color var(--ecr-t-fast);
}

.ecr-searchform__submit:hover {
	background-color: var(--ecr-accent);
	border-color: var(--ecr-accent);
}

.ecr-search-panel {
	border-top: 1px solid var(--ecr-border);
	background-color: var(--ecr-sand);
}

.ecr-search-panel__inner {
	padding-block: var(--ecr-space-3);
}

.ecr-search-panel .ecr-searchform {
	max-width: 34rem;
}

.ecr-search-panel__suggest {
	margin-top: var(--ecr-space-3);
}

.ecr-search-panel__suggest .ecr-kicker {
	color: var(--ecr-muted);
}

/* Hidden only when JavaScript is available to reveal it again. */
html.ecr-js .ecr-search-panel {
	display: none;
}

html.ecr-js .ecr-search-panel.is-open {
	display: block;
	animation: ecr-slide-down var(--ecr-t) both;
}

@keyframes ecr-slide-down {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* On phones the drawer carries its own search field, so the icon is redundant. */
@media (max-width: 47.9375em) {
	html.ecr-js .ecr-header__search-toggle {
		display: none;
	}
}

.ecr-header-ad {
	padding-block: var(--ecr-space-2);
	border-bottom: 1px solid var(--ecr-border);
}

.ecr-header-ad .ecr-ad-slot {
	margin-block: 0;
}

/* ------------------------------------------------------------------------
   6b. Mobile navigation drawer

   A dedicated phone panel: brand, search, editorial category rows, secondary
   links, legal links, social icons, optional newsletter. It exists only below
   the desktop breakpoint, and only when JavaScript can open and close it -
   which is why every rule here is scoped to `.ecr-drawer` and nothing in this
   section can reach the desktop header.
   ------------------------------------------------------------------------ */

.ecr-drawer {
	position: relative;
	z-index: var(--ecr-z-drawer);
}

/* No script, no drawer: the static primary bar takes over instead. */
html:not(.ecr-js) .ecr-drawer {
	display: none;
}

.ecr-drawer__overlay {
	position: fixed;
	inset: 0;
	z-index: var(--ecr-z-drawer);
	background-color: rgba(33, 31, 29, 0.5);
	opacity: 0;
	visibility: hidden;
	/* Hiding waits for the fade to finish; showing happens at once. */
	transition: opacity var(--ecr-t), visibility 0s linear 220ms;
}

.ecr-drawer.is-open .ecr-drawer__overlay {
	opacity: 1;
	visibility: visible;
	transition: opacity var(--ecr-t), visibility 0s;
}

.ecr-drawer__panel {
	position: fixed;
	top: 0;
	left: 0;
	z-index: calc(var(--ecr-z-drawer) + 1);
	display: flex;
	flex-direction: column;
	width: min(90vw, 26.5rem);
	height: 100vh;
	height: 100dvh;
	padding: 0 var(--ecr-gutter) var(--ecr-space-4);
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	background-color: var(--ecr-bg);
	transform: translateX(-100%);
	visibility: hidden;
	/*
	 * `visibility` keeps the closed panel out of the tab order and the
	 * accessibility tree, but it must not be *animated*: a transitioned
	 * visibility only flips at the end, which would leave the panel
	 * unfocusable for the whole slide-in and swallow the focus move to the
	 * close button. So it is delayed on the way out and instant on the way in.
	 */
	transition: transform var(--ecr-t), visibility 0s linear 220ms;
}

.ecr-drawer.is-open .ecr-drawer__panel {
	transform: translateX(0);
	visibility: visible;
	box-shadow: var(--ecr-shadow-lift);
	transition: transform var(--ecr-t), visibility 0s;
}

/* -- Head ---------------------------------------------------------------- */

.ecr-drawer__head {
	display: flex;
	align-items: flex-start;
	gap: var(--ecr-space-2);
	padding-block: var(--ecr-space-3) var(--ecr-space-3);
}

.ecr-drawer__brand {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	flex: 1 1 auto;
	min-width: 0;
}

.ecr-drawer__logo {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border: 1px solid var(--ecr-border-strong);
	border-radius: 50%;
	color: var(--ecr-sage);
	text-decoration: none;
	overflow: hidden;
}

.ecr-drawer__logo-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ecr-drawer__logo-mark {
	font-family: var(--ecr-font-display);
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1;
}

/* The thin rule between mark and wordmark is the one piece of pure decoration
   in the panel, and it is what makes the header read as a masthead. */
.ecr-drawer__brand-text {
	display: flex;
	flex-direction: column;
	gap: 0.1875rem;
	min-width: 0;
	padding-left: 0.875rem;
	border-left: 1px solid var(--ecr-border);
}

.ecr-drawer__name {
	color: var(--ecr-ink);
	font-family: var(--ecr-font-display);
	font-size: clamp(1.125rem, 4.6vw, 1.4375rem);
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.1;
}

.ecr-drawer__tagline {
	color: var(--ecr-accent);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1.3;
	text-transform: uppercase;
}

/* No optical negative margin here: the panel is a scroll container, so pulling
   the button into the padding would give it 8px of horizontal scroll. */
.ecr-drawer__close {
	flex: none;
	color: var(--ecr-ink);
}

/* -- Search -------------------------------------------------------------- */

.ecr-drawer__search {
	padding-bottom: var(--ecr-space-3);
	border-bottom: 1px solid var(--ecr-border);
}

.ecr-drawer__search .ecr-searchform__input {
	padding-left: 2.625rem;
	border-radius: var(--ecr-radius-pill);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238b8279'%3E%3Cpath d='M11 4a7 7 0 1 0 4.19 12.6l3.6 3.6 1.42-1.42-3.6-3.6A7 7 0 0 0 11 4Zm0 2a5 5 0 1 1 0 10 5 5 0 0 1 0-10Z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 0.875rem center;
	background-size: 1.125rem 1.125rem;
}

.ecr-drawer__search .ecr-searchform__submit {
	width: 3.25rem;
	background-color: var(--ecr-sage);
	border-color: var(--ecr-sage);
	border-radius: var(--ecr-radius-md);
}

/* -- Category groups ----------------------------------------------------- */

.ecr-drawer__groups,
.ecr-drawer__secondary,
.ecr-drawer__children,
.ecr-drawer__legal {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ecr-drawer__group + .ecr-drawer__group {
	border-top: 1px solid var(--ecr-border);
}

.ecr-drawer__row {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.ecr-drawer__link {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	flex: 1 1 auto;
	min-width: 0;
	padding-block: 0.6875rem;
	color: var(--ecr-ink);
	text-decoration: none;
}

.ecr-drawer__media {
	position: relative;
	flex: none;
	display: block;
	width: 3.25rem;
	height: 3.25rem;
	overflow: hidden;
	background-color: var(--ecr-sand);
	border-radius: var(--ecr-radius);
}

.ecr-drawer__media img,
.ecr-drawer__media .ecr-thumb-fallback {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ecr-drawer__media .ecr-thumb-fallback__mark {
	font-size: 0.9375rem;
}

.ecr-drawer__text {
	display: flex;
	flex-direction: column;
	gap: 0.0625rem;
	min-width: 0;
}

.ecr-drawer__title {
	font-family: var(--ecr-font-display);
	font-size: clamp(1.0625rem, 4.4vw, 1.3125rem);
	font-weight: 600;
	letter-spacing: -0.012em;
	line-height: 1.15;
}

.ecr-drawer__sub {
	color: var(--ecr-muted);
	font-size: 0.8125rem;
	font-weight: 400;
	line-height: 1.35;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ecr-drawer__chevron {
	display: inline-flex;
	flex: none;
	color: var(--ecr-taupe);
	transition: transform var(--ecr-t-fast);
}

.ecr-drawer__link .ecr-drawer__chevron {
	margin-left: auto;
	padding-left: 0.5rem;
}

.ecr-drawer__link:hover,
.ecr-drawer__group.is-current > .ecr-drawer__row > .ecr-drawer__link {
	color: var(--ecr-accent);
}

.ecr-drawer__link:hover .ecr-drawer__chevron {
	color: var(--ecr-accent);
}

/* A 44px target of its own, so opening the children and following the parent
   link are two deliberate, separate taps. */
.ecr-drawer__expand {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	background: none;
	border: 0;
	border-radius: var(--ecr-radius);
	color: var(--ecr-taupe);
}

.ecr-drawer__expand:hover {
	background-color: var(--ecr-sand);
	color: var(--ecr-accent);
}

.ecr-drawer__expand[aria-expanded="true"] .ecr-drawer__chevron {
	transform: rotate(90deg);
}

.ecr-drawer__children {
	padding: 0 0 var(--ecr-space-2) calc(3.25rem + 0.875rem);
}

.ecr-drawer__children:not([hidden]) {
	animation: ecr-drawer-reveal var(--ecr-t) both;
}

.ecr-drawer__child {
	display: block;
	padding-block: 0.4375rem;
	color: var(--ecr-ink-soft);
	font-size: var(--ecr-fs-small);
	font-weight: 500;
	text-decoration: none;
}

.ecr-drawer__child:hover {
	color: var(--ecr-accent);
}

.ecr-drawer__child--all {
	color: var(--ecr-accent);
	font-weight: 600;
}

.ecr-drawer__hint {
	margin: var(--ecr-space-3) 0 0;
	color: var(--ecr-muted);
	font-size: var(--ecr-fs-tiny);
	font-style: italic;
}

/* -- Secondary links ----------------------------------------------------- */

.ecr-drawer__secondary {
	margin-top: var(--ecr-space-2);
	padding-top: var(--ecr-space-2);
	border-top: 1px solid var(--ecr-border);
}

.ecr-drawer__secondary-link {
	display: flex;
	align-items: center;
	gap: 0.875rem;
	padding-block: 0.625rem;
	color: var(--ecr-ink);
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: none;
}

.ecr-drawer__secondary-icon {
	display: inline-flex;
	flex: none;
	color: var(--ecr-sage);
}

.ecr-drawer__secondary-text {
	flex: 1 1 auto;
	min-width: 0;
}

.ecr-drawer__secondary-link:hover {
	color: var(--ecr-accent);
}

.ecr-drawer__secondary-link:hover .ecr-drawer__secondary-icon,
.ecr-drawer__secondary-link:hover .ecr-drawer__chevron {
	color: var(--ecr-accent);
}

/* -- Foot: legal, social, newsletter ------------------------------------- */

.ecr-drawer__foot {
	margin-top: var(--ecr-space-3);
	padding-top: var(--ecr-space-3);
	border-top: 1px solid var(--ecr-border);
}

.ecr-drawer__legal {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.375rem 0.5rem;
}

.ecr-drawer__legal a {
	color: var(--ecr-muted);
	font-size: var(--ecr-fs-small);
	text-decoration: none;
}

.ecr-drawer__legal a:hover {
	color: var(--ecr-accent);
}

.ecr-drawer__legal li {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.ecr-drawer__legal li:not(:last-child)::after {
	content: "";
	width: 1px;
	height: 0.75rem;
	background-color: var(--ecr-border-strong);
}

.ecr-social--drawer {
	justify-content: center;
	gap: 0.75rem;
	margin-top: var(--ecr-space-3);
}

.ecr-social--drawer a {
	width: 2.75rem;
	height: 2.75rem;
	background-color: var(--ecr-surface);
	border: 1px solid var(--ecr-border);
	border-radius: 50%;
}

.ecr-newsletter--drawer {
	display: flex;
	flex-direction: column;
	gap: var(--ecr-space-2);
	margin-top: var(--ecr-space-3);
	padding: var(--ecr-space-3);
	background-color: var(--ecr-sand);
	border-radius: var(--ecr-radius-md);
}

.ecr-newsletter--drawer .ecr-newsletter__title {
	margin: 0;
	font-size: 1.1875rem;
}

.ecr-newsletter--drawer .ecr-newsletter__desc,
.ecr-newsletter--drawer .ecr-newsletter__note {
	margin: 0.25rem 0 0;
	font-size: var(--ecr-fs-small);
}

.ecr-newsletter--drawer .ecr-subscribe {
	flex-direction: column;
}

@keyframes ecr-drawer-reveal {
	from {
		opacity: 0;
		transform: translateY(-4px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Very small phones: keep the same hierarchy, just tighter. */
@media (max-width: 22.5em) {
	.ecr-drawer__panel {
		width: 92vw;
		padding-inline: 1rem;
	}

	.ecr-drawer__media {
		width: 2.75rem;
		height: 2.75rem;
	}

	.ecr-drawer__children {
		padding-left: calc(2.75rem + 0.75rem);
	}

	.ecr-drawer__logo {
		width: 2.625rem;
		height: 2.625rem;
	}
}

/* The drawer is a phone pattern only: above this width it does not exist, so
   the desktop header cannot be affected by anything in this section. */
@media (min-width: 64em) {
	.ecr-drawer {
		display: none;
	}
}

/* ------------------------------------------------------------------------
   7. Article cards
   ------------------------------------------------------------------------ */

/* Cards are typographic, not boxed: image, small category label, headline.
   No border, no shadow, no rounded panel - the photography does the work. */
.ecr-card {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 0.875rem;
}

.ecr-card__media {
	position: relative;
	overflow: hidden;
	background-color: var(--ecr-sand);
	border-radius: var(--ecr-radius-md);
	aspect-ratio: 4 / 3;
}

.ecr-card__media-link {
	display: block;
	height: 100%;
}

.ecr-card__media img,
.ecr-card__media .ecr-thumb-fallback {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--ecr-t-slow);
}

.ecr-card:hover .ecr-card__media img {
	transform: scale(1.035);
}

.ecr-card__body {
	display: flex;
	min-width: 0;
	flex-direction: column;
}

/* A post with no featured image still gets .ecr-card__media - ecr_get_thumbnail()
   fills it with the lettermark placeholder - so the card keeps its height and
   needs no compensating rule here. The class stays available for anyone who wants
   to restyle those cards from a child theme. */

.ecr-card__title {
	margin: 0;
	font-size: var(--ecr-fs-card);
	line-height: 1.28;
}

.ecr-card__title a {
	color: var(--ecr-ink);
	text-decoration: none;
	text-decoration-color: var(--ecr-border-strong);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.14em;
}

.ecr-card__title a:hover,
.ecr-card__title a:focus {
	color: var(--ecr-accent);
	text-decoration: underline;
}

.ecr-card__excerpt {
	margin: 0.5rem 0 0;
	color: var(--ecr-ink-soft);
	font-size: var(--ecr-fs-small);
	line-height: 1.6;
}

.ecr-thumb-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background-color: var(--ecr-sand-deep);
}

.ecr-thumb-fallback__mark {
	font-family: var(--ecr-font-display);
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: var(--ecr-taupe);
}

/* Pinterest save button: revealed on hover, always reachable by keyboard. */
.ecr-pin-btn {
	position: absolute;
	top: 0.625rem;
	right: 0.625rem;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0.4375rem 0.75rem;
	background-color: var(--ecr-surface);
	border-radius: var(--ecr-radius-pill);
	box-shadow: var(--ecr-shadow);
	color: var(--ecr-ink);
	font-size: var(--ecr-fs-tiny);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-decoration: none;
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity var(--ecr-t-fast), transform var(--ecr-t-fast), background-color var(--ecr-t-fast), color var(--ecr-t-fast);
}

.ecr-card:hover .ecr-pin-btn,
.ecr-card:focus-within .ecr-pin-btn,
.ecr-pin-btn:focus-visible {
	opacity: 1;
	transform: translateY(0);
}

.ecr-pin-btn:hover,
.ecr-pin-btn:focus {
	background-color: var(--ecr-accent);
	color: var(--ecr-surface);
}

/* Touch devices never hover, so the button is simply always visible. */
@media (hover: none) {
	.ecr-pin-btn {
		opacity: 1;
		transform: none;
	}
}

/* -- Variants ----------------------------------------------------------- */

.ecr-card--hero .ecr-card__media {
	aspect-ratio: 16 / 10;
}

.ecr-card--hero .ecr-card__title {
	font-size: var(--ecr-fs-hero);
	line-height: 1.14;
}

.ecr-card--hero .ecr-card__excerpt {
	max-width: 46ch;
	font-size: var(--ecr-fs-body);
}

.ecr-card--featured .ecr-card__media {
	aspect-ratio: 3 / 2;
}

.ecr-card--featured .ecr-card__title {
	font-size: var(--ecr-fs-card-lg);
	line-height: 1.18;
}

.ecr-card--compact {
	flex-direction: row;
	align-items: flex-start;
	gap: var(--ecr-space-2);
}

.ecr-card--compact .ecr-card__media {
	flex: none;
	width: 5.5rem;
	aspect-ratio: 1 / 1;
}

.ecr-card--compact .ecr-card__title {
	font-size: 0.9375rem;
	line-height: 1.35;
}

.ecr-card--compact .ecr-kicker {
	font-size: 0.625rem;
}

.ecr-card--related .ecr-card__title {
	font-size: 1rem;
	line-height: 1.32;
}

@media (min-width: 35em) {
	.ecr-card--horizontal {
		flex-direction: row;
		align-items: center;
		gap: var(--ecr-space-3);
	}

	.ecr-card--horizontal .ecr-card__media {
		flex: none;
		width: 42%;
		aspect-ratio: 4 / 3;
	}

	.ecr-card--horizontal .ecr-card__body {
		flex: 1 1 auto;
	}
}

/* In the spotlight grid the lead card fills its taller cell. */
@media (min-width: 56.25em) {
	.ecr-grid--spotlight > .ecr-card--featured {
		gap: var(--ecr-space-3);
	}

	.ecr-grid--spotlight > .ecr-card--featured .ecr-card__media {
		aspect-ratio: auto;
		height: 100%;
		min-height: 22rem;
	}
}

/* ------------------------------------------------------------------------
   8. Homepage sections
   ------------------------------------------------------------------------ */

.ecr-front-intro {
	padding-block: var(--ecr-space-4) 0;
}

.ecr-front-intro .ecr-prose {
	margin-inline: auto;
}

.ecr-hero {
	padding-top: clamp(1.75rem, 3.5vw, 3rem);
}

.ecr-hero__inner {
	display: grid;
	gap: var(--ecr-gap);
	grid-template-columns: 1fr;
}

.ecr-hero__main,
.ecr-hero__aside {
	min-width: 0;
}

.ecr-hero__aside-title {
	margin-bottom: var(--ecr-space-3);
	padding-bottom: var(--ecr-space-1);
	border-bottom: 1px solid var(--ecr-border);
	font-family: var(--ecr-font-body);
	font-size: var(--ecr-fs-tiny);
	font-weight: 700;
	letter-spacing: var(--ecr-ls-kicker);
	text-transform: uppercase;
}

.ecr-hero__list {
	display: grid;
	gap: var(--ecr-space-3);
}

@media (min-width: 48em) {
	.ecr-hero__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 64em) {
	.ecr-hero__inner {
		grid-template-columns: minmax(0, 1.8fr) minmax(17rem, 1fr);
		gap: clamp(2rem, 3vw, 3.25rem);
	}

	.ecr-hero__list {
		grid-template-columns: 1fr;
		gap: var(--ecr-space-3);
	}

	.ecr-hero__list > .ecr-card + .ecr-card {
		padding-top: var(--ecr-space-3);
		border-top: 1px solid var(--ecr-border);
	}

	/* No secondary picks to show, so drop the second track rather than leave it
	   standing empty. The full container width is too wide for a 16/10 frame and
	   far too wide for a headline, so the frame flattens and the text keeps a
	   readable measure. */
	.ecr-hero__inner--solo {
		grid-template-columns: minmax(0, 1fr);
	}

	.ecr-hero__inner--solo .ecr-card--hero .ecr-card__media {
		aspect-ratio: 2 / 1;
	}

	.ecr-hero__inner--solo .ecr-card--hero .ecr-card__body {
		max-width: var(--ecr-max-narrow);
	}
}

/* Room tiles: image above, label below, so text contrast never depends on the
   photograph. */
.ecr-rooms {
	display: grid;
	gap: var(--ecr-space-3);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 35em) {
	.ecr-rooms {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (min-width: 64em) {
	.ecr-rooms {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.ecr-rooms__link {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	color: var(--ecr-ink);
	text-decoration: none;
}

.ecr-rooms__media {
	display: block;
	overflow: hidden;
	background-color: var(--ecr-sand);
	border-radius: var(--ecr-radius-md);
	aspect-ratio: 5 / 4;
}

.ecr-rooms__media img,
.ecr-rooms__media .ecr-thumb-fallback {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform var(--ecr-t-slow);
}

.ecr-rooms__link:hover .ecr-rooms__media img {
	transform: scale(1.04);
}

.ecr-rooms__body {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.ecr-rooms__name {
	font-family: var(--ecr-font-display);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.25;
}

.ecr-rooms__link:hover .ecr-rooms__name {
	color: var(--ecr-accent);
}

.ecr-rooms__count {
	color: var(--ecr-muted);
	font-size: var(--ecr-fs-tiny);
	letter-spacing: 0.02em;
}

/* A quiet tint separates the shopping band from the editorial sections. */
.ecr-section--rooms,
.ecr-section--shop {
	position: relative;
}

.ecr-section--shop {
	margin-top: clamp(2.25rem, 4.5vw, 3.75rem);
	padding-block: clamp(2.5rem, 5vw, 4rem);
	background-color: var(--ecr-sand);
}

.ecr-section--shop + .ecr-section {
	padding-top: clamp(2.25rem, 4.5vw, 3.75rem);
}

.ecr-section--shop .ecr-section__head {
	border-bottom-color: var(--ecr-border-strong);
}

/* ------------------------------------------------------------------------
   9. Archives, search results, 404
   ------------------------------------------------------------------------ */

.ecr-page-header {
	max-width: 46rem;
	margin-block: clamp(1.75rem, 4vw, 3rem) clamp(1.75rem, 3.5vw, 2.75rem);
}

.ecr-page-header__title {
	margin-bottom: var(--ecr-space-2);
}

.ecr-page-header__intro {
	color: var(--ecr-ink-soft);
	font-size: var(--ecr-fs-lead);
}

.ecr-page-header__count {
	margin: var(--ecr-space-2) 0 0;
	color: var(--ecr-muted);
	font-size: var(--ecr-fs-tiny);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ecr-page-header__search {
	margin-top: var(--ecr-space-3);
	max-width: 26rem;
}

.ecr-page-header--search .ecr-page-header__title {
	font-size: var(--ecr-fs-h2);
}

.ecr-author-head {
	display: flex;
	align-items: flex-start;
	gap: var(--ecr-space-3);
	margin-top: var(--ecr-space-3);
}

.ecr-author-head__avatar img {
	border-radius: var(--ecr-radius-pill);
}

.ecr-author-head__bio {
	margin: 0;
	color: var(--ecr-ink-soft);
	font-size: var(--ecr-fs-small);
}

.ecr-404 {
	padding-block: clamp(2rem, 5vw, 4rem);
}

.ecr-404__header {
	max-width: 40rem;
	margin-inline: auto;
	text-align: center;
}

.ecr-404__title {
	font-size: var(--ecr-fs-h1);
}

.ecr-404__text {
	color: var(--ecr-ink-soft);
	font-size: var(--ecr-fs-lead);
}

.ecr-404__search {
	max-width: 26rem;
	margin: var(--ecr-space-4) auto 0;
}

.ecr-404__terms {
	margin-top: var(--ecr-space-4);
}

.ecr-404__terms .ecr-pill-list {
	justify-content: center;
}

.ecr-404__posts {
	margin-top: var(--ecr-space-6);
}

/* ------------------------------------------------------------------------
   10. Single article and prose
   ------------------------------------------------------------------------ */

.ecr-single {
	padding-top: clamp(1.5rem, 3vw, 2.5rem);
}

/* Static pages share the article's vertical rhythm. */
.ecr-page {
	padding-top: clamp(1.5rem, 3vw, 2.5rem);
}

.ecr-page--wide {
	padding-top: 0;
}

/* Legal and policy pages: a slightly tighter measure and quieter headings, since
   nobody reads a privacy policy for pleasure. */
.ecr-article__body--legal .ecr-prose {
	max-width: 44rem;
	font-size: var(--ecr-fs-small);
}

.ecr-article__body--legal .ecr-prose h2 {
	font-size: var(--ecr-fs-h4);
}

.ecr-article__header {
	max-width: var(--ecr-max-narrow);
	margin-bottom: var(--ecr-space-4);
}

/* No featured image: the header carries the whole opening, so give the title a
   little more air above and pull the body closer underneath. */
.ecr-no-hero .ecr-single {
	padding-top: clamp(2rem, 4vw, 3.25rem);
}

.ecr-no-hero .ecr-article__header {
	margin-bottom: var(--ecr-space-3);
}

.ecr-article__title {
	margin-bottom: var(--ecr-space-3);
	font-size: var(--ecr-fs-h1);
}

.ecr-article__deck {
	margin-bottom: var(--ecr-space-3);
	color: var(--ecr-ink-soft);
	font-size: var(--ecr-fs-lead);
	line-height: 1.55;
	text-wrap: pretty;
}

.ecr-article__byline {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--ecr-space-2) var(--ecr-space-3);
	justify-content: space-between;
	padding-block: var(--ecr-space-2);
	border-top: 1px solid var(--ecr-border);
	border-bottom: 1px solid var(--ecr-border);
}

.ecr-article__hero {
	position: relative;
	margin: 0 0 var(--ecr-space-4);
}

.ecr-article__hero .ecr-thumb,
.ecr-article__hero img {
	width: 100%;
	border-radius: var(--ecr-radius-md);
}

.ecr-article__hero .ecr-pin-btn--hero {
	top: auto;
	bottom: 0.875rem;
	right: 0.875rem;
	opacity: 1;
	transform: none;
}

.ecr-article__hero-caption {
	margin-top: var(--ecr-space-1);
}

.ecr-article__hero--full {
	margin-bottom: var(--ecr-space-5);
	border-radius: 0;
}

.ecr-article__hero--full img {
	max-height: 32rem;
	object-fit: cover;
	border-radius: 0;
}

.ecr-single__layout {
	display: grid;
	gap: var(--ecr-gap);
	grid-template-columns: 1fr;
}

.ecr-article__body {
	min-width: 0;
}

/* Reading measure: roughly 680-760px of text at the default font size. */
.ecr-prose {
	max-width: var(--ecr-measure);
	font-size: var(--ecr-fs-body);
	line-height: var(--ecr-lh-body);
}

.ecr-prose > * + * {
	margin-top: var(--ecr-space-3);
}

.ecr-prose > h2 {
	margin-top: var(--ecr-space-5);
	font-size: var(--ecr-fs-h2);
}

.ecr-prose > h3 {
	margin-top: var(--ecr-space-4);
	font-size: var(--ecr-fs-h3);
}

.ecr-prose > h4 {
	margin-top: var(--ecr-space-4);
	font-size: var(--ecr-fs-h4);
}

.ecr-prose h2,
.ecr-prose h3,
.ecr-prose h4 {
	margin-bottom: 0;
	scroll-margin-top: 5.5rem;
}

.ecr-prose p,
.ecr-prose ul,
.ecr-prose ol {
	margin-bottom: 0;
}

.ecr-prose ul,
.ecr-prose ol {
	padding-left: 1.375rem;
}

.ecr-prose li + li {
	margin-top: 0.375rem;
}

.ecr-prose a {
	text-decoration: underline;
}

.ecr-prose img,
.ecr-prose figure img {
	border-radius: var(--ecr-radius-md);
}

.ecr-prose figure {
	margin-inline: 0;
}

.ecr-prose--wide {
	max-width: 100%;
}

.ecr-prose--wide > * {
	max-width: var(--ecr-measure);
	margin-inline: auto;
}

.ecr-prose--wide > .alignwide,
.ecr-prose--wide > .alignfull,
.ecr-prose--wide > .wp-block-columns,
.ecr-prose--wide > .wp-block-gallery,
.ecr-prose--wide > .ecr-shop {
	max-width: min(64rem, 100%);
}

/* Wide blocks may break the measure only where there is room for them. */
.ecr-single:not(.ecr-single--sidebar) .ecr-prose > .alignwide,
.ecr-page:not(.ecr-page--legal) .ecr-prose > .alignwide {
	width: min(64rem, calc(100vw - 2 * var(--ecr-gutter)));
	max-width: none;
}

.ecr-prose > .alignfull {
	max-width: none;
}

.ecr-article__footer {
	margin-top: var(--ecr-space-5);
}

.ecr-article__tags {
	margin-bottom: var(--ecr-space-4);
}

.ecr-share {
	display: flex;
	align-items: center;
	gap: var(--ecr-space-2);
	flex-wrap: wrap;
}

.ecr-share__label {
	color: var(--ecr-muted);
	font-size: var(--ecr-fs-tiny);
	font-weight: 700;
	letter-spacing: var(--ecr-ls-kicker);
	text-transform: uppercase;
}

.ecr-share__list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ecr-share__link {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.4375rem 0.75rem;
	background-color: var(--ecr-surface);
	border: 1px solid var(--ecr-border);
	border-radius: var(--ecr-radius-pill);
	color: var(--ecr-ink-soft);
	font-size: var(--ecr-fs-tiny);
	font-weight: 700;
	text-decoration: none;
	transition: background-color var(--ecr-t-fast), border-color var(--ecr-t-fast), color var(--ecr-t-fast);
}

.ecr-share__link:hover,
.ecr-share__link:focus {
	background-color: var(--ecr-ink);
	border-color: var(--ecr-ink);
	color: var(--ecr-surface);
}

.ecr-share__link--pinterest:hover,
.ecr-share__link--pinterest:focus {
	background-color: var(--ecr-accent);
	border-color: var(--ecr-accent);
}

.ecr-share--top .ecr-share__label,
.ecr-share--top .ecr-share__text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
}

.ecr-share--top .ecr-share__link {
	padding: 0.4375rem;
}

.ecr-share--bottom {
	margin-bottom: var(--ecr-space-4);
}

.ecr-postnav {
	display: grid;
	gap: var(--ecr-space-3);
	margin-top: var(--ecr-space-4);
	padding-top: var(--ecr-space-4);
	border-top: 1px solid var(--ecr-border);
}

@media (min-width: 35em) {
	.ecr-postnav {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.ecr-postnav__link {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	text-decoration: none;
}

.ecr-postnav__link--next {
	text-align: right;
}

/* When only one neighbour exists, keep "Next" in the right-hand column. */
@media (min-width: 35em) {
	.ecr-postnav__link--next:only-child {
		grid-column: 2;
	}
}

.ecr-postnav__label {
	color: var(--ecr-muted);
	font-size: var(--ecr-fs-tiny);
	font-weight: 700;
	letter-spacing: var(--ecr-ls-kicker);
	text-transform: uppercase;
}

.ecr-postnav__title {
	color: var(--ecr-ink);
	font-family: var(--ecr-font-display);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
}

.ecr-postnav__link:hover .ecr-postnav__title {
	color: var(--ecr-accent);
}

.ecr-authorbox {
	display: flex;
	align-items: flex-start;
	gap: var(--ecr-space-3);
	margin-top: var(--ecr-space-4);
	padding: var(--ecr-space-3);
	background-color: var(--ecr-sand);
	border-radius: var(--ecr-radius-md);
}

.ecr-authorbox__avatar {
	flex: none;
}

.ecr-authorbox__img,
.ecr-authorbox img {
	border-radius: var(--ecr-radius-pill);
}

.ecr-authorbox__name {
	margin-bottom: 0.375rem;
	font-size: 1.125rem;
}

.ecr-authorbox__name a {
	color: var(--ecr-ink);
	text-decoration: none;
}

.ecr-authorbox__name a:hover {
	color: var(--ecr-accent);
}

.ecr-authorbox__bio {
	margin: 0 0 0.5rem;
	color: var(--ecr-ink-soft);
	font-size: var(--ecr-fs-small);
	line-height: 1.6;
}

.ecr-authorbox__more {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: var(--ecr-fs-tiny);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-decoration: none;
	text-transform: uppercase;
}

.ecr-authorbox__more:hover {
	text-decoration: underline;
}

/* Mid-article suggestion. Small, single item, clearly an aside. */
.ecr-inline-related {
	margin-block: var(--ecr-space-4);
	padding: var(--ecr-space-2) var(--ecr-space-3);
	background-color: var(--ecr-accent-soft);
	border-left: 2px solid var(--ecr-accent);
	border-radius: 0 var(--ecr-radius-md) var(--ecr-radius-md) 0;
}

.ecr-inline-related__link {
	display: flex;
	align-items: center;
	gap: var(--ecr-space-2);
	color: var(--ecr-ink);
	text-decoration: none;
}

.ecr-inline-related__media {
	flex: none;
	width: 3.5rem;
	overflow: hidden;
	border-radius: var(--ecr-radius);
}

.ecr-inline-related__media img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.ecr-inline-related__title {
	font-family: var(--ecr-font-display);
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
}

.ecr-inline-related__link:hover .ecr-inline-related__title {
	color: var(--ecr-accent);
	text-decoration: underline;
}

/* "More ideas you'll love" - the most important block after the article. */
.ecr-related {
	margin-top: var(--ecr-space-6);
	padding-top: var(--ecr-space-4);
	border-top: 2px solid var(--ecr-ink);
}

.ecr-related__head {
	margin-bottom: var(--ecr-space-4);
}

.ecr-related__title {
	margin: 0;
	font-size: var(--ecr-fs-h2);
}

.ecr-comments-wrap {
	max-width: var(--ecr-max-narrow);
	margin-top: var(--ecr-space-6);
}

/* Two-column reading layout on wide screens only. */
@media (min-width: 64em) {
	.ecr-single--sidebar .ecr-single__layout {
		grid-template-columns: minmax(0, 1fr) var(--ecr-sidebar-w);
		gap: clamp(2.5rem, 4vw, 4rem);
		align-items: start;
	}
}

/* ------------------------------------------------------------------------
   11. Sidebar, widgets, table of contents
   ------------------------------------------------------------------------ */

.ecr-sidebar {
	min-width: 0;
	margin-top: var(--ecr-space-5);
}

.ecr-sidebar__inner {
	display: flex;
	flex-direction: column;
	gap: var(--ecr-space-4);
}

.ecr-sidebar__title,
.ecr-widget__title {
	margin-bottom: var(--ecr-space-2);
	padding-bottom: var(--ecr-space-1);
	border-bottom: 1px solid var(--ecr-border);
	font-family: var(--ecr-font-body);
	font-size: var(--ecr-fs-tiny);
	font-weight: 700;
	letter-spacing: var(--ecr-ls-kicker);
	text-transform: uppercase;
}

.ecr-sidebar__list {
	display: flex;
	flex-direction: column;
	gap: var(--ecr-space-2);
}

.ecr-sidebar__list > .ecr-card + .ecr-card {
	padding-top: var(--ecr-space-2);
	border-top: 1px solid var(--ecr-border);
}

.ecr-widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--ecr-fs-small);
}

.ecr-widget li + li {
	margin-top: 0.5rem;
}

.ecr-widget a {
	text-decoration: none;
}

.ecr-widget a:hover {
	text-decoration: underline;
}

@media (min-width: 64em) {
	.ecr-sidebar {
		margin-top: 0;
	}

	.ecr-sidebar__inner {
		position: sticky;
		top: var(--ecr-sticky-top);
		max-height: calc(100vh - var(--ecr-sticky-top) - 1rem);
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: thin;
	}
}

/* -- Table of contents -------------------------------------------------- */

.ecr-toc__list {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--ecr-fs-small);
}

.ecr-toc__item {
	margin: 0;
}

.ecr-toc__item--h3 {
	padding-left: var(--ecr-space-3);
}

.ecr-toc__link {
	display: block;
	padding: 0.3125rem 0 0.3125rem 0.75rem;
	border-left: 2px solid var(--ecr-border);
	color: var(--ecr-ink-soft);
	line-height: 1.4;
	text-decoration: none;
	transition: border-color var(--ecr-t-fast), color var(--ecr-t-fast);
}

.ecr-toc__link:hover {
	border-left-color: var(--ecr-accent);
	color: var(--ecr-accent);
}

.ecr-toc__link.is-current {
	border-left-color: var(--ecr-accent);
	color: var(--ecr-ink);
	font-weight: 700;
}

.ecr-toc--inline {
	margin-bottom: var(--ecr-space-4);
	padding: var(--ecr-space-2) var(--ecr-space-3);
	background-color: var(--ecr-sand);
	border-radius: var(--ecr-radius-md);
}

.ecr-toc__summary {
	cursor: pointer;
	font-family: var(--ecr-font-body);
	font-size: var(--ecr-fs-tiny);
	font-weight: 700;
	letter-spacing: var(--ecr-ls-kicker);
	list-style: none;
	text-transform: uppercase;
}

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

.ecr-toc__summary::after {
	content: "";
	display: inline-block;
	width: 0.4rem;
	height: 0.4rem;
	margin-left: 0.5rem;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform var(--ecr-t-fast);
}

.ecr-toc--inline[open] .ecr-toc__summary::after {
	transform: translateY(1px) rotate(-135deg);
}

.ecr-toc__list--inline {
	margin-top: var(--ecr-space-2);
}

/* The sidebar copy is for wide screens; the collapsible copy is for narrow
   ones. Only one of the two is ever visible. */
.ecr-toc--sidebar {
	display: none;
}

@media (min-width: 64em) {
	.ecr-toc--sidebar {
		display: block;
	}

	.ecr-has-sidebar.ecr-default-sidebar .ecr-toc--inline {
		display: none;
	}
}

/* ------------------------------------------------------------------------
   12. Advertisement slots
   ------------------------------------------------------------------------ */

/* Space is reserved from the slot definition in inc/ads.php, which sets
   --ecr-ad-h and --ecr-ad-h-m inline. That reservation is what keeps ads from
   shifting the layout when they load. */
.ecr-ad-slot {
	display: block;
	margin-block: var(--ecr-space-5);
	text-align: center;
}

.ecr-ad-slot__label {
	display: block;
	margin-bottom: 0.375rem;
	color: var(--ecr-taupe);
	font-size: 0.625rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	line-height: 1;
	text-transform: uppercase;
}

.ecr-ad-slot__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--ecr-ad-h-m, 0);
	overflow: hidden;
}

.ecr-ad-slot__inner > * {
	max-width: 100%;
}

@media (min-width: 64em) {
	.ecr-ad-slot__inner {
		min-height: var(--ecr-ad-h, 0);
	}
}

.ecr-ad-slot.is-placeholder .ecr-ad-slot__inner {
	background-color: var(--ecr-sand);
	border: 1px dashed var(--ecr-border-strong);
	border-radius: var(--ecr-radius-md);
}

.ecr-ad-slot__placeholder {
	padding: var(--ecr-space-2);
	color: var(--ecr-muted);
	font-size: var(--ecr-fs-small);
	font-style: italic;
}

.ecr-ad-slot--sidebar {
	margin-block: 0;
}

.ecr-ad-slot--in-content,
.ecr-ad-slot--after-content {
	max-width: var(--ecr-measure);
}

.ecr-ad-slot--related,
.ecr-ad-slot--footer,
.ecr-ad-slot--header {
	margin-block: var(--ecr-space-4);
}

/* ------------------------------------------------------------------------
   13. Editorial components (shop, product, callout, newsletter)
   ------------------------------------------------------------------------ */

/* "Get the look" - a product block that reads as editorial recommendation,
   never as a storefront widget. Retailer-agnostic by design. */
.ecr-shop {
	margin-block: var(--ecr-space-5);
	padding: var(--ecr-space-3);
	background-color: var(--ecr-surface);
	border: 1px solid var(--ecr-border);
	border-radius: var(--ecr-radius-md);
}

.ecr-shop__head {
	margin-bottom: var(--ecr-space-3);
	padding-bottom: var(--ecr-space-2);
	border-bottom: 1px solid var(--ecr-border);
}

.ecr-shop__title {
	margin: 0;
	font-size: var(--ecr-fs-h3);
}

.ecr-shop__subtitle {
	margin: 0.375rem 0 0;
	color: var(--ecr-muted);
	font-size: var(--ecr-fs-small);
}

.ecr-shop__grid {
	display: grid;
	gap: var(--ecr-space-3);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ecr-shop__grid--1 {
	grid-template-columns: 1fr;
}

@media (min-width: 35em) {
	.ecr-shop__grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.ecr-shop__grid--4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.ecr-shop__disclosure {
	margin: var(--ecr-space-3) 0 0;
	padding-top: var(--ecr-space-2);
	border-top: 1px solid var(--ecr-border);
	color: var(--ecr-muted);
	font-size: var(--ecr-fs-tiny);
	line-height: 1.5;
}

.ecr-product {
	display: flex;
	min-width: 0;
	flex-direction: column;
	gap: 0.625rem;
}

.ecr-product__media {
	position: relative;
	overflow: hidden;
	background-color: var(--ecr-sand);
	border-radius: var(--ecr-radius);
	aspect-ratio: 1 / 1;
}

.ecr-product__media img,
.ecr-product__media .ecr-thumb-fallback {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ecr-product__badge {
	position: absolute;
	top: 0.5rem;
	left: 0.5rem;
	padding: 0.1875rem 0.5rem;
	background-color: var(--ecr-ink);
	border-radius: var(--ecr-radius-pill);
	color: var(--ecr-surface);
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ecr-product__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
}

.ecr-product__name {
	margin: 0;
	font-size: 1rem;
	line-height: 1.3;
}

.ecr-product__note {
	margin: 0.375rem 0 0;
	color: var(--ecr-ink-soft);
	font-size: var(--ecr-fs-small);
	line-height: 1.5;
}

.ecr-product__foot {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: auto;
	padding-top: var(--ecr-space-2);
}

.ecr-product__price {
	font-weight: 700;
}

.ecr-product__cta {
	padding: 0.5rem 0.875rem;
	font-size: var(--ecr-fs-tiny);
}

.ecr-callout {
	margin-block: var(--ecr-space-4);
	padding: var(--ecr-space-3);
	background-color: var(--ecr-sand);
	border-radius: var(--ecr-radius-md);
}

.ecr-callout--tip {
	background-color: var(--ecr-accent-soft);
}

/* The "quick answer" box near the top of a post: flatter than a tip, marked with
   a rule rather than a fill so it does not compete with the hero image. */
.ecr-callout--summary {
	padding-left: var(--ecr-space-3);
	background-color: transparent;
	border-left: 2px solid var(--ecr-accent);
	border-radius: 0;
}

.ecr-callout--summary .ecr-callout__title {
	color: var(--ecr-accent);
}

.ecr-callout__body ul,
.ecr-callout__body ol {
	margin: 0 0 var(--ecr-space-2);
	padding-left: 1.25rem;
	font-size: var(--ecr-fs-small);
}

.ecr-callout__body li + li {
	margin-top: 0.35rem;
}

.ecr-callout__title {
	margin: 0 0 0.5rem;
	font-family: var(--ecr-font-body);
	font-size: var(--ecr-fs-tiny);
	font-weight: 700;
	letter-spacing: var(--ecr-ls-kicker);
	text-transform: uppercase;
}

.ecr-callout__body > *:last-child {
	margin-bottom: 0;
}

.ecr-callout__body p {
	margin-bottom: var(--ecr-space-2);
	font-size: var(--ecr-fs-small);
	line-height: 1.65;
}

/* -- Newsletter --------------------------------------------------------- */

.ecr-newsletter {
	display: grid;
	gap: var(--ecr-space-3);
}

.ecr-newsletter__title {
	margin: 0;
	font-size: var(--ecr-fs-h3);
}

.ecr-newsletter__desc {
	margin: 0.5rem 0 0;
	color: var(--ecr-ink-soft);
	font-size: var(--ecr-fs-small);
	line-height: 1.6;
}

.ecr-newsletter__note,
.ecr-newsletter__setup {
	margin: 0.625rem 0 0;
	color: var(--ecr-muted);
	font-size: var(--ecr-fs-tiny);
	line-height: 1.5;
}

.ecr-newsletter__setup {
	font-style: italic;
}

.ecr-subscribe {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.ecr-subscribe__input {
	flex: 1 1 12rem;
}

.ecr-subscribe__button {
	flex: none;
}

/* The band is a full-bleed strip that centres its own children, so it needs no
   extra wrapper markup: the side padding grows to keep content inside --ecr-max. */
.ecr-newsletter--band {
	display: flex;
	flex-direction: column;
	gap: var(--ecr-space-3);
	padding-block: clamp(2.25rem, 4.5vw, 3.5rem);
	padding-inline: max(var(--ecr-gutter), calc((100% - var(--ecr-max)) / 2));
	background-color: var(--ecr-sand);
	border-top: 1px solid var(--ecr-border);
}

.ecr-newsletter--card {
	max-width: var(--ecr-max-narrow);
	margin-top: var(--ecr-space-6);
	padding: var(--ecr-space-4) var(--ecr-space-3);
	background-color: var(--ecr-sand);
	border-radius: var(--ecr-radius-md);
	text-align: center;
}

.ecr-newsletter--card .ecr-subscribe {
	max-width: 26rem;
	margin-inline: auto;
}

.ecr-newsletter--inline {
	margin-block: var(--ecr-space-4);
	padding: var(--ecr-space-3);
	background-color: var(--ecr-accent-soft);
	border-radius: var(--ecr-radius-md);
}

.ecr-newsletter--aside .ecr-newsletter__title {
	font-size: 1.125rem;
}

.ecr-newsletter--aside {
	padding: var(--ecr-space-3);
	background-color: var(--ecr-sand);
	border-radius: var(--ecr-radius-md);
	gap: var(--ecr-space-2);
}

.ecr-newsletter--aside .ecr-subscribe {
	flex-direction: column;
}

.ecr-newsletter--aside .ecr-subscribe__button {
	width: 100%;
}

@media (min-width: 48em) {
	.ecr-newsletter--band {
		align-items: center;
		flex-direction: row;
		gap: clamp(1.5rem, 4vw, 4rem);
	}

	.ecr-newsletter--band > .ecr-newsletter__text {
		flex: 1 1 55%;
	}

	.ecr-newsletter--band > .ecr-newsletter__form {
		flex: 1 1 40%;
		max-width: 28rem;
	}

	.ecr-newsletter--band .ecr-newsletter__title {
		font-size: var(--ecr-fs-h2);
	}
}

/* ------------------------------------------------------------------------
   14. Comments
   ------------------------------------------------------------------------ */

.ecr-comments {
	padding-top: var(--ecr-space-4);
	border-top: 1px solid var(--ecr-border);
}

.ecr-comments__title {
	font-size: var(--ecr-fs-h3);
}

.ecr-comments__list,
.ecr-comments__list .children {
	margin: 0 0 var(--ecr-space-4);
	padding: 0;
	list-style: none;
}

.ecr-comments__list .children {
	margin-bottom: 0;
	padding-left: var(--ecr-space-3);
	border-left: 1px solid var(--ecr-border);
}

.ecr-comments__list li.comment {
	margin-bottom: var(--ecr-space-3);
}

.ecr-comments__list .comment-body {
	padding-bottom: var(--ecr-space-3);
	border-bottom: 1px solid var(--ecr-border);
	font-size: var(--ecr-fs-small);
	line-height: 1.65;
}

.ecr-comments__list .comment-author {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	font-weight: 700;
}

.ecr-comments__list .comment-author img {
	border-radius: var(--ecr-radius-pill);
}

.ecr-comments__list .comment-author .says {
	display: none;
}

.ecr-comments__list .comment-meta,
.ecr-comments__list .comment-metadata {
	margin-bottom: var(--ecr-space-2);
	color: var(--ecr-muted);
	font-size: var(--ecr-fs-tiny);
}

.ecr-comments__list .comment-metadata a {
	color: inherit;
	text-decoration: none;
}

.ecr-comments__list .reply {
	margin-top: 0.5rem;
	font-size: var(--ecr-fs-tiny);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.ecr-comments__list .comment-respond {
	margin-top: var(--ecr-space-3);
}

.ecr-comments__closed {
	color: var(--ecr-muted);
	font-size: var(--ecr-fs-small);
	font-style: italic;
}

.comment-respond {
	margin-top: var(--ecr-space-4);
}

.ecr-comment-form p {
	margin-bottom: var(--ecr-space-2);
}

.ecr-comment-form label {
	display: block;
	margin-bottom: 0.25rem;
	font-size: var(--ecr-fs-small);
	font-weight: 700;
}

.ecr-comment-form__notes,
.comment-form .comment-notes,
.comment-form .form-submit + p {
	color: var(--ecr-muted);
	font-size: var(--ecr-fs-tiny);
}

.comment-form .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: var(--ecr-fs-tiny);
}

.comment-form .comment-form-cookies-consent input {
	width: auto;
	margin-top: 0.2rem;
}

.comment-form .comment-form-cookies-consent label {
	font-weight: 400;
}

@media (min-width: 35em) {
	.ecr-comment-form .comment-form-author,
	.ecr-comment-form .comment-form-email {
		display: inline-block;
		width: calc(50% - 0.375rem);
	}

	.ecr-comment-form .comment-form-author {
		margin-right: 0.625rem;
	}
}

/* ------------------------------------------------------------------------
   15. Footer
   ------------------------------------------------------------------------ */

.ecr-footer {
	margin-top: auto;
	background-color: var(--ecr-surface);
	border-top: 1px solid var(--ecr-border);
	color: var(--ecr-ink);
}

.ecr-footer__ad {
	padding-top: var(--ecr-space-3);
}

.ecr-footer__top {
	display: grid;
	gap: var(--ecr-space-4);
	padding-block: clamp(2.25rem, 4.5vw, 3.5rem);
}

.ecr-footer__name {
	margin: 0 0 0.375rem;
	font-family: var(--ecr-font-display);
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.1;
}

.ecr-footer__name a {
	color: var(--ecr-ink);
	text-decoration: none;
}

.ecr-footer__logo img {
	max-height: 2.5rem;
	width: auto;
	margin-bottom: 0.625rem;
}

.ecr-footer__tagline {
	margin: 0 0 var(--ecr-space-2);
	max-width: 34ch;
	color: var(--ecr-muted);
	font-size: var(--ecr-fs-small);
	line-height: 1.5;
}

.ecr-footer__heading {
	margin-bottom: var(--ecr-space-2);
	font-family: var(--ecr-font-body);
	font-size: var(--ecr-fs-tiny);
	font-weight: 700;
	letter-spacing: var(--ecr-ls-kicker);
	text-transform: uppercase;
}

.ecr-footer__list {
	display: grid;
	gap: 0.5rem var(--ecr-space-3);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--ecr-fs-small);
}

.ecr-footer__list a {
	color: var(--ecr-ink-soft);
	text-decoration: none;
}

.ecr-footer__list a:hover {
	color: var(--ecr-accent);
	text-decoration: underline;
}

.ecr-footer__widgets {
	display: grid;
	gap: var(--ecr-space-3);
}

.ecr-footer__bottom {
	border-top: 1px solid var(--ecr-border);
}

.ecr-footer__bottom-inner {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--ecr-space-2) var(--ecr-space-3);
	justify-content: space-between;
	padding-block: var(--ecr-space-3);
}

.ecr-footer__copy {
	margin: 0;
	color: var(--ecr-muted);
	font-size: var(--ecr-fs-tiny);
}

.ecr-footer__legal-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem var(--ecr-space-2);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--ecr-fs-tiny);
}

.ecr-footer__legal-list a {
	color: var(--ecr-muted);
	text-decoration: none;
}

.ecr-footer__legal-list a:hover {
	color: var(--ecr-accent);
	text-decoration: underline;
}

@media (min-width: 48em) {
	.ecr-footer__top {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	}

	.ecr-footer__widgets {
		grid-column: 1 / -1;
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64em) {
	.ecr-footer__top {
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
	}

	.ecr-footer__widgets {
		grid-column: auto;
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------------------------------
   16. WordPress core classes and blocks
   ------------------------------------------------------------------------ */

.alignleft {
	float: left;
	margin: 0.375rem var(--ecr-space-3) var(--ecr-space-2) 0;
}

.alignright {
	float: right;
	margin: 0.375rem 0 var(--ecr-space-2) var(--ecr-space-3);
}

.aligncenter {
	display: block;
	margin-inline: auto;
}

.alignnone {
	margin: 0;
}

@media (max-width: 34.9375em) {
	.alignleft,
	.alignright {
		float: none;
		margin-inline: 0;
	}
}

.wp-caption {
	max-width: 100%;
}

.wp-caption img {
	width: 100%;
}

.wp-caption-text,
.gallery-caption,
.wp-element-caption,
.wp-block-image figcaption {
	margin-top: 0.5rem;
	color: var(--ecr-muted);
	font-size: var(--ecr-fs-small);
	line-height: 1.5;
	text-align: left;
}

.sticky {
	position: relative;
}

.bypostauthor > .comment-body .comment-author::after {
	content: "";
	display: inline-block;
	width: 0.375rem;
	height: 0.375rem;
	background-color: var(--ecr-accent);
	border-radius: var(--ecr-radius-pill);
}

.gallery {
	display: grid;
	gap: var(--ecr-space-2);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gallery-columns-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gallery-item {
	margin: 0;
}

.gallery-item img {
	width: 100%;
	border-radius: var(--ecr-radius);
}

/* Blocks that need a nudge to match the editorial rhythm. */
.wp-block-image {
	margin-bottom: 0;
}

.wp-block-quote {
	padding-left: var(--ecr-space-3);
	border-left: 2px solid var(--ecr-accent);
	font-family: var(--ecr-font-display);
	font-size: 1.1875rem;
	font-style: italic;
	line-height: 1.55;
}

.wp-block-pullquote {
	padding: var(--ecr-space-3) 0;
	border-top: 2px solid var(--ecr-ink);
	border-bottom: 2px solid var(--ecr-ink);
	font-family: var(--ecr-font-display);
	text-align: center;
}

.wp-block-separator {
	max-width: 6rem;
	height: 1px;
	margin-inline: auto;
	border: 0;
	background-color: var(--ecr-border-strong);
}

.wp-block-button__link {
	padding: 0.75rem 1.375rem;
	background-color: var(--ecr-accent);
	border-radius: var(--ecr-radius);
	color: var(--ecr-surface);
	font-size: var(--ecr-fs-small);
	font-weight: 700;
	text-decoration: none;
}

.wp-block-button__link:hover {
	background-color: var(--ecr-accent-hover);
	color: var(--ecr-surface);
}

.wp-block-table td,
.wp-block-table th {
	border-color: var(--ecr-border);
}

.wp-block-columns {
	gap: var(--ecr-gap);
}

/* Before / after makeover pattern. */
.ecr-beforeafter figcaption {
	font-family: var(--ecr-font-body);
	font-size: var(--ecr-fs-tiny);
	font-weight: 700;
	letter-spacing: var(--ecr-ls-kicker);
	text-align: center;
	text-transform: uppercase;
}

.ecr-beforeafter img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--ecr-radius-md);
}

/* ------------------------------------------------------------------------
   17. Motion, print
   ------------------------------------------------------------------------ */

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

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	.ecr-card:hover .ecr-card__media img,
	.ecr-rooms__link:hover .ecr-rooms__media img {
		transform: none;
	}
}

/* Honour the operating system's high-contrast setting. */
@media (prefers-contrast: more) {
	:root {
		--ecr-muted: #3d3833;
		--ecr-border: #b9ada0;
		--ecr-border-strong: #8b8279;
	}
}

@media print {
	.ecr-header,
	.ecr-header-ad,
	.ecr-nav,
	.ecr-drawer,
	.ecr-search-panel,
	.ecr-sidebar,
	.ecr-share,
	.ecr-pin-btn,
	.ecr-ad-slot,
	.ecr-newsletter,
	.ecr-related,
	.ecr-inline-related,
	.ecr-postnav,
	.ecr-comments,
	.ecr-footer,
	.ecr-pagination {
		display: none !important;
	}

	body {
		background: none;
		font-size: 12pt;
	}

	.ecr-prose,
	.ecr-article__header {
		max-width: none;
	}

	a {
		color: inherit;
		text-decoration: underline;
	}
}