/*
 * Ear Solutions Stories
 *
 * Design notes
 * - Palette: Ear Solutions blue #046bd2 (changeable in Settings), deep navy ink #12263A, soft mist #F2F6F7, one warm amber highlight.
 * - Type: Montserrat (sans-serif) for headings and text. Self-hosted (assets/fonts), so no request ever leaves the site.
 * - Paragraph text (p tags) is Rubik, 16px. Headings stay Montserrat.
 * - The one memorable moment is the hero sound-wave: muffled on the left, clear on the right. It draws itself once.
 * - Every selector starts with .ess so nothing leaks into the theme.
 */

/* ---------- Fonts (self-hosted, OFL licensed) ---------- */

@font-face {
	font-family: "Montserrat";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/montserrat-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */

.ess {
	--ess-ink: #12263a;
	--ess-accent: #046bd2;
	--ess-accent-strong: #0350a0;
	--ess-accent-soft: #e3effb;
	--ess-accent-light: #9cc6f2;
	--ess-warm: #f2b544;
	--ess-bg: #f2f6f7;
	--ess-surface: #ffffff;
	--ess-text: #12263a;
	--ess-muted: #46596a;
	--ess-line: rgba(18, 38, 58, 0.13);
	--ess-focus: #12263a;
	--ess-hero-bg: #046bd2;
	--ess-hero-text: #ffffff;
	--ess-hero-muted: #eaf3fd;
	--ess-wave: #a8d0f7;
	--ess-chip-on-bg: #12263a;
	--ess-chip-on-text: #ffffff;
	--ess-shadow-sm: 0 1px 2px rgba(18, 38, 58, 0.06), 0 6px 18px -10px rgba(18, 38, 58, 0.22);
	--ess-shadow-md: 0 2px 4px rgba(18, 38, 58, 0.07), 0 22px 40px -18px rgba(18, 38, 58, 0.34);
	--ess-radius: 20px;
	--ess-radius-lg: 28px;
	--ess-font-head: "Montserrat", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
	--ess-font-body: "Montserrat", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

	/* Colour family used when a story has no category colour of its own. */
	--ess-tone-bg: #e3effb;
	--ess-tone-fg: #03427f;
	--ess-tone-dot: #046bd2;
	--ess-tone-ph: #cfe3f8;
	--ess-tone-wave: #046bd2;

	/* 18px body text. max() keeps it right even where a theme shrinks the root font size. */
	font-family: var(--ess-font-body);
	font-size: max(18px, 1.125rem);
	line-height: 1.6;
	color: var(--ess-text);
	text-align: left;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

/* Category colour families. Text and background pairs all pass WCAG AA (4.5:1). */
.ess-tone-teal {
	--ess-tone-bg: #e3effb;
	--ess-tone-fg: #03427f;
	--ess-tone-dot: #046bd2;
	--ess-tone-ph: #cfe3f8;
	--ess-tone-wave: #046bd2;
}

.ess-tone-indigo {
	--ess-tone-bg: #e6e8fb;
	--ess-tone-fg: #3a3fa0;
	--ess-tone-dot: #5560d8;
	--ess-tone-ph: #d8dbf8;
	--ess-tone-wave: #4f57c9;
}

.ess-tone-amber {
	--ess-tone-bg: #fff0cc;
	--ess-tone-fg: #7a4b00;
	--ess-tone-dot: #e0a21b;
	--ess-tone-ph: #fce7b0;
	--ess-tone-wave: #c98a0a;
}

.ess-tone-rose {
	--ess-tone-bg: #fce4ee;
	--ess-tone-fg: #9b1f55;
	--ess-tone-dot: #d6457f;
	--ess-tone-ph: #f9d3e3;
	--ess-tone-wave: #c93a74;
}

.ess-tone-green {
	--ess-tone-bg: #ddf3e4;
	--ess-tone-fg: #1b6a3a;
	--ess-tone-dot: #2e9e5b;
	--ess-tone-ph: #cbebd5;
	--ess-tone-wave: #2a8f52;
}

/* ---------- Page frame ---------- */

.ess-page {
	display: block;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: clamp(16px, 3vw, 32px) 0 clamp(48px, 8vw, 96px);
	background: var(--ess-bg);
}

.ess-wrap {
	width: 100%;
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: clamp(16px, 4vw, 32px);
}

.ess .ess-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.ess .ess-nowrap {
	white-space: nowrap;
}

.ess :is(h1, h2, h3) {
	margin: 0;
	padding: 0;
	font-family: var(--ess-font-head);
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.15;
	text-transform: none;
	color: inherit;
}

.ess .ess-icon {
	flex: none;
	display: inline-block;
	vertical-align: middle;
}

.ess :focus-visible {
	outline: 3px solid var(--ess-focus);
	outline-offset: 3px;
}

.ess .ess-hero :focus-visible,
.ess .ess-cta :focus-visible {
	outline-color: var(--ess-warm);
}

/* ---------- Buttons ---------- */

:is(#ess-main, .ess) .ess-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 24px;
	border: 2px solid transparent;
	border-radius: 999px;
	font: 700 1em/1.2 var(--ess-font-body);
	letter-spacing: 0;
	text-decoration: none;
	text-transform: none;
	text-align: center;
	cursor: pointer;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

:is(#ess-main, .ess) .ess-btn--primary {
	background: var(--ess-accent);
	color: #ffffff;
}

:is(#ess-main, .ess) .ess-btn--primary:hover {
	background: var(--ess-accent-strong);
	color: #ffffff;
}

:is(#ess-main, .ess) .ess-btn--ghost {
	background: var(--ess-surface);
	border-color: var(--ess-line);
	color: var(--ess-text);
}

:is(#ess-main, .ess) .ess-btn--ghost:hover {
	border-color: var(--ess-text);
	color: var(--ess-text);
}

:is(#ess-main, .ess) .ess-btn--warm {
	min-height: 56px;
	padding-inline: 28px;
	background: var(--ess-warm);
	color: #12263a;
	font-size: 1.05em;
}

:is(#ess-main, .ess) .ess-btn--warm:hover {
	background: #f8c964;
	color: #12263a;
}

:is(#ess-main, .ess) .ess-btn--outline-light {
	min-height: 56px;
	padding-inline: 28px;
	background: transparent;
	border-color: rgba(255, 255, 255, 0.55);
	color: #ffffff;
	font-size: 1.05em;
}

:is(#ess-main, .ess) .ess-btn--outline-light:hover {
	background: rgba(255, 255, 255, 0.12);
	border-color: #ffffff;
	color: #ffffff;
}

:is(#ess-main, .ess) .ess-btn[data-ess-copy].is-done {
	border-color: var(--ess-accent);
	color: var(--ess-accent);
}

/* ---------- Tags and small meta ---------- */

.ess .ess-tag {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 0 13px;
	border-radius: 999px;
	background: var(--ess-tone-bg);
	color: var(--ess-tone-fg);
	font: 700 0.85em/1 var(--ess-font-body);
	text-decoration: none;
}

.ess a.ess-tag:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
	color: var(--ess-tone-fg);
}

.ess .ess-meta {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--ess-muted);
	font-size: 0.9em;
	line-height: 1.3;
}

/* ---------- Hero ---------- */

.ess .ess-hero {
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: center;
	min-height: clamp(300px, 36vw, 380px);
	overflow: hidden;
	padding: clamp(36px, 6vw, 80px) clamp(24px, 6vw, 72px);
	border-radius: var(--ess-radius-lg);
	background: var(--ess-hero-bg);
	color: var(--ess-hero-text);
}

.ess .ess-hero__content {
	position: relative;
	z-index: 1;
	max-width: 36rem;
}

.ess .ess-hero__back {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin: -8px 0 8px -4px;
	color: var(--ess-hero-muted);
	font-weight: 600;
	font-size: 0.95em;
	text-decoration: none;
}

.ess .ess-hero__back .ess-icon {
	transform: rotate(180deg);
	margin-right: 2px;
}

.ess .ess-hero__back:hover {
	color: #ffffff;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.ess .ess-hero__title {
	font-size: clamp(2.05em, 5.2vw, 3.45em);
	line-height: 1.04;
	letter-spacing: -0.028em;
	color: var(--ess-hero-text);
	text-wrap: balance;
}

.ess .ess-hero__intro {
	max-width: 31rem;
	margin: 18px 0 0;
	color: var(--ess-hero-muted);
	font-size: 1.15em;
	line-height: 1.55;
}

/* The wave: sound that starts muffled and resolves into clear lines. */
.ess .ess-wave {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 0;
	width: min(62%, 720px);
	height: 100%;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 18%);
	mask-image: linear-gradient(90deg, transparent 0, #000 18%);
}

.ess .ess-wave__line {
	fill: none;
	stroke: var(--ess-wave);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
	opacity: var(--o, 0.5);
}

.ess .ess-wave__line--warm {
	stroke: var(--ess-warm);
	stroke-width: 2.6;
	opacity: 0.95;
}

@media (prefers-reduced-motion: no-preference) {
	.ess .ess-hero .ess-wave__line {
		animation: ess-draw 2.4s cubic-bezier(0.2, 0.7, 0.2, 1) both;
		animation-delay: calc(var(--i, 0) * 150ms);
	}
}

@keyframes ess-draw {
	from {
		stroke-dashoffset: 1;
	}

	to {
		stroke-dashoffset: 0;
	}
}

/* ---------- Filters and search ---------- */

.ess .ess-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 28px;
	margin: 32px 0 28px;
}

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

.ess .ess-chips > li {
	margin: 0;
	padding: 0;
}

.ess .ess-chip {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	padding: 0 20px;
	border: 1.5px solid var(--ess-line);
	border-radius: 999px;
	background: var(--ess-surface);
	color: var(--ess-text);
	font: 600 0.9em/1 var(--ess-font-body);
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.ess .ess-chip[class*="ess-tone-"]::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--ess-tone-dot);
}

.ess .ess-chip:hover {
	border-color: var(--ess-text);
	color: var(--ess-text);
}

.ess .ess-chip.is-active,
.ess .ess-chip.is-active:hover {
	background: var(--ess-chip-on-bg);
	border-color: var(--ess-chip-on-bg);
	color: var(--ess-chip-on-text);
}

.ess .ess-search {
	position: relative;
	display: flex;
	flex: 1 1 280px;
	align-items: center;
	width: 100%;
	max-width: 440px;
	margin: 0;
}

.ess .ess-search__icon {
	position: absolute;
	left: 18px;
	display: flex;
	color: var(--ess-muted);
	pointer-events: none;
}

:is(#ess-main, .ess) .ess-search__input {
	display: block;
	width: 100%;
	height: 52px;
	margin: 0;
	padding: 0 108px 0 50px;
	border: 1.5px solid var(--ess-line);
	border-radius: 999px;
	background: var(--ess-surface);
	color: var(--ess-text);
	font: inherit;
	font-size: 1em;
	line-height: normal;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

:is(#ess-main, .ess) .ess-search__input::placeholder {
	color: var(--ess-muted);
	opacity: 1;
}

:is(#ess-main, .ess) .ess-search__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	display: none;
}

:is(#ess-main, .ess) .ess-search__input:focus {
	border-color: var(--ess-accent);
}

:is(#ess-main, .ess) .ess-search__submit {
	position: absolute;
	right: 4px;
	height: 44px;
	margin: 0;
	padding: 0 18px;
	border: 0;
	border-radius: 999px;
	background: var(--ess-accent);
	color: #ffffff;
	font: 700 0.9em/1 var(--ess-font-body);
	cursor: pointer;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}

:is(#ess-main, .ess) .ess-search__submit:hover {
	background: var(--ess-accent-strong);
}

.ess .ess-results {
	transition: opacity 0.15s ease;
}

.ess .ess-results.is-loading {
	opacity: 0.55;
}

.ess .ess-results__summary {
	margin: 0 0 22px;
	color: var(--ess-muted);
}

.ess .ess-results__clear {
	margin-left: 12px;
	color: var(--ess-accent);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- Card grid ---------- */

.ess .ess-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ess .ess-grid__item {
	display: flex;
	min-width: 0;
	margin: 0;
	padding: 0;
}

.ess .ess-grid__item > .ess-card {
	width: 100%;
}

@media (min-width: 640px) {
	.ess .ess-grid--cols-2,
	.ess .ess-grid--cols-3,
	.ess .ess-grid--cols-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.ess .ess-grid--cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

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

@media (min-width: 1280px) {
	.ess .ess-grid--cols-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.ess .ess-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	margin: 0;
	border: 1px solid var(--ess-line);
	border-radius: var(--ess-radius);
	background: var(--ess-surface);
	box-shadow: var(--ess-shadow-sm);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ess .ess-card__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: var(--ess-radius) var(--ess-radius) 0 0;
	background: var(--ess-tone-ph);
}

.ess .ess-card__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	object-fit: cover;
	transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (hover: hover) {
	.ess .ess-card:hover {
		transform: translateY(-4px);
		box-shadow: var(--ess-shadow-md);
	}

	.ess .ess-card:hover .ess-card__img {
		transform: scale(1.05);
	}

	.ess .ess-card:hover .ess-card__more .ess-icon {
		transform: translateX(4px);
	}
}

.ess .ess-card__badge {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 2;
	padding: 9px 15px;
	border-radius: 999px;
	background: var(--ess-warm);
	color: #12263a;
	font: 700 0.85em/1 var(--ess-font-body);
}

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

.ess .ess-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
}

.ess .ess-card__title {
	margin: 0;
	font-size: 1.32em;
	font-weight: 650;
	line-height: 1.2;
	text-wrap: pretty;
}

.ess .ess-card__link {
	color: var(--ess-text);
	text-decoration: none;
}

.ess .ess-card__link:hover {
	color: var(--ess-text);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

/* One link per card, but the whole card is clickable. */
.ess .ess-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: var(--ess-radius);
}

.ess .ess-card__link:focus-visible {
	outline: none;
}

.ess .ess-card__link:focus-visible::after {
	outline: 3px solid var(--ess-focus);
	outline-offset: 3px;
}

.ess .ess-card__excerpt {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	color: var(--ess-text);
	font-size: 0.95em;
	line-height: 1.58;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.ess .ess-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var(--ess-line);
}

.ess .ess-card__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--ess-accent);
	font-size: 0.95em;
	font-weight: 700;
}

.ess .ess-card__more .ess-icon {
	transition: transform 0.25s ease;
}

/* Featured (latest) story */
.ess .ess-featured {
	margin-bottom: 28px;
}

.ess .ess-card--featured .ess-card__title {
	font-size: clamp(1.5em, 3.4vw, 1.9em);
}

.ess .ess-card--featured .ess-card__media {
	aspect-ratio: 16 / 9;
}

@media (min-width: 900px) {
	.ess .ess-card--featured {
		flex-direction: row;
		align-items: stretch;
	}

	.ess .ess-card--featured .ess-card__media {
		flex: 0 0 54%;
		aspect-ratio: auto;
		min-height: 400px;
		border-radius: var(--ess-radius) 0 0 var(--ess-radius);
	}

	.ess .ess-card--featured .ess-card__body {
		justify-content: center;
		gap: 16px;
		padding: 44px 48px;
	}

	.ess .ess-card--featured .ess-card__title {
		font-size: 2.1em;
		line-height: 1.1;
	}

	.ess .ess-card--featured .ess-card__excerpt {
		font-size: 1.08em;
		-webkit-line-clamp: 4;
	}

	.ess .ess-card--featured .ess-card__foot {
		margin-top: 8px;
	}
}

/* Stand-in artwork when a story has no image */
.ess .ess-ph {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--ess-tone-ph);
}

.ess .ess-ph svg {
	display: block;
	width: 100%;
	height: 100%;
}

.ess .ess-ph__w {
	fill: none;
	stroke: var(--ess-tone-wave);
	stroke-linecap: round;
	stroke-width: 3;
}

.ess .ess-ph__w--1 {
	opacity: 0.55;
}

.ess .ess-ph__w--2 {
	opacity: 0.32;
	stroke-width: 2.5;
}

.ess .ess-ph__w--3 {
	opacity: 0.85;
	stroke-width: 3.5;
}

.ess .ess-ph__w--4 {
	opacity: 0.22;
}

/* ---------- Pagination and empty state ---------- */

.ess .ess-pagination {
	margin-top: 48px;
}

.ess .ess-pagination ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ess .ess-pagination li {
	margin: 0;
	padding: 0;
}

.ess .ess-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 14px;
	border: 1.5px solid var(--ess-line);
	border-radius: 12px;
	background: var(--ess-surface);
	color: var(--ess-text);
	font-weight: 700;
	text-decoration: none;
}

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

.ess .ess-pagination .page-numbers.current {
	background: var(--ess-chip-on-bg);
	border-color: var(--ess-chip-on-bg);
	color: var(--ess-chip-on-text);
}

.ess .ess-pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
}

.ess .ess-pagination .prev .ess-icon {
	transform: rotate(180deg);
}

.ess .ess-empty {
	padding: clamp(40px, 8vw, 80px) 24px;
	border: 1.5px dashed var(--ess-line);
	border-radius: var(--ess-radius-lg);
	background: var(--ess-surface);
	text-align: center;
}

.ess .ess-empty__art {
	display: inline-flex;
	margin-bottom: 18px;
	color: var(--ess-accent);
}

.ess .ess-empty__title {
	font-size: 1.7em;
}

.ess .ess-empty__text {
	max-width: 34rem;
	margin: 12px auto 26px;
	color: var(--ess-muted);
}

.ess .ess-empty__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

/* ---------- Single story ---------- */

.ess .ess-story__header {
	padding-top: clamp(4px, 1.5vw, 16px);
}

.ess .ess-crumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 2px;
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
	color: var(--ess-muted);
	font-size: 0.9em;
}

.ess .ess-crumbs__item {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin: 0;
	padding: 0;
}

.ess .ess-crumbs__item a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--ess-muted);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.ess .ess-crumbs__item a:hover {
	color: var(--ess-text);
}

.ess .ess-crumbs__item .ess-icon {
	opacity: 0.55;
}

.ess .ess-crumbs__item--current span {
	color: var(--ess-text);
	font-weight: 600;
}

.ess .ess-story__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 22px;
	margin-bottom: 22px;
}

.ess .ess-story__meta .ess-meta {
	font-size: 0.95em;
}

.ess .ess-story__title {
	max-width: 22em;
	font-size: clamp(1.95em, 4.4vw, 3.15em);
	line-height: 1.07;
	letter-spacing: -0.026em;
	text-wrap: balance;
}

.ess .ess-story__lede {
	max-width: 42rem;
	margin: 22px 0 0;
	color: var(--ess-muted);
	font-size: 1.3em;
	line-height: 1.5;
}

.ess .ess-story__hero {
	margin: 34px auto 0;
}

.ess .ess-story__img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	max-height: 560px;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--ess-radius-lg);
}

.ess .ess-story__caption {
	margin-top: 10px;
	color: var(--ess-muted);
	font-size: 0.85em;
}

.ess .ess-story__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 32px;
	padding-block: 40px 8px;
}

.ess .ess-story__aside {
	order: -1;
}

@media (min-width: 980px) {
	.ess .ess-story__layout {
		grid-template-columns: minmax(0, 704px) 312px;
		justify-content: center;
		align-items: start;
		gap: 64px;
		padding-top: 56px;
	}

	.ess .ess-story__layout--solo {
		grid-template-columns: minmax(0, 704px);
	}

	.ess .ess-story__aside {
		order: 0;
		position: sticky;
		top: 32px;
	}
}

/* Comfortable reading: 19.8px text, about 68 characters per line. */
.ess .ess-prose {
	max-width: 68ch;
	color: var(--ess-text);
	font-size: 1.1em;
	line-height: 1.75;
}

.ess .ess-prose > :first-child {
	margin-top: 0;
}

.ess .ess-prose p {
	margin: 0 0 1.4em;
}

.ess .ess-prose :is(h2, h3, h4) {
	margin: 2em 0 0.55em;
	font-family: var(--ess-font-head);
	line-height: 1.2;
	letter-spacing: -0.012em;
}

.ess .ess-prose h2 {
	font-size: 1.6em;
	font-weight: 700;
}

.ess .ess-prose h3 {
	font-size: 1.3em;
	font-weight: 650;
}

.ess .ess-prose h4 {
	font-size: 1.1em;
	font-weight: 650;
}

.ess .ess-prose :is(ul, ol) {
	margin: 0 0 1.5em;
	padding-left: 1.45em;
}

.ess .ess-prose li {
	margin: 0.55em 0;
	padding-left: 0.25em;
}

.ess .ess-prose li::marker {
	color: var(--ess-accent);
	font-weight: 700;
}

.ess .ess-prose a {
	color: var(--ess-accent);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}

.ess .ess-prose a:hover {
	color: var(--ess-accent-strong);
}

.ess .ess-prose strong {
	font-weight: 700;
}

.ess .ess-prose blockquote {
	margin: 2.1em 0;
	padding: 1.2em 1.5em 1.2em 1.6em;
	border: 0;
	border-left: 5px solid var(--ess-warm);
	border-radius: 0 var(--ess-radius) var(--ess-radius) 0;
	background: var(--ess-surface);
	font-family: var(--ess-font-head);
	font-size: 1.28em;
	font-weight: 550;
	line-height: 1.4;
	letter-spacing: -0.01em;
	box-shadow: var(--ess-shadow-sm);
}

.ess .ess-prose blockquote p {
	margin: 0;
}

.ess .ess-prose blockquote cite {
	display: block;
	margin-top: 0.7em;
	color: var(--ess-muted);
	font-family: var(--ess-font-body);
	font-size: 0.7em;
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0;
}

.ess .ess-prose :is(img, video, iframe) {
	max-width: 100%;
	height: auto;
	border-radius: var(--ess-radius);
}

.ess .ess-prose figure {
	margin: 2em 0;
}

.ess .ess-prose figcaption {
	margin-top: 0.6em;
	color: var(--ess-muted);
	font-size: 0.85em;
}

.ess .ess-prose table {
	display: block;
	width: 100%;
	margin: 0 0 1.5em;
	overflow-x: auto;
	border-collapse: collapse;
}

.ess .ess-prose :is(th, td) {
	padding: 0.6em 0.9em;
	border: 1px solid var(--ess-line);
	text-align: left;
}

.ess .ess-glance {
	padding: 24px 24px 12px;
	border: 1px solid var(--ess-line);
	border-top: 4px solid var(--ess-tone-dot);
	border-radius: var(--ess-radius);
	background: var(--ess-surface);
	box-shadow: var(--ess-shadow-sm);
}

.ess .ess-glance__title {
	margin-bottom: 8px;
	font-size: 1.2em;
}

.ess .ess-glance__list {
	margin: 0;
	padding: 0;
}

.ess .ess-glance__row {
	padding: 14px 0;
	border-top: 1px solid var(--ess-line);
}

.ess .ess-glance__row:first-child {
	border-top: 0;
}

.ess .ess-glance dt {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 4px;
	color: var(--ess-muted);
	font-size: 0.9em;
}

.ess .ess-glance dd {
	margin: 0 0 0 28px;
	font-size: 1.05em;
	font-weight: 650;
	line-height: 1.4;
}

.ess .ess-share {
	margin-top: 48px;
	padding-top: 28px;
	border-top: 1px solid var(--ess-line);
}

.ess .ess-share__label {
	margin: 0 0 14px;
	font-weight: 700;
}

.ess .ess-share__buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* ---------- Call to action ---------- */

.ess .ess-cta {
	position: relative;
	isolation: isolate;
	margin-top: clamp(40px, 7vw, 72px);
	overflow: hidden;
	padding: clamp(32px, 6vw, 64px);
	border-radius: var(--ess-radius-lg);
	background: var(--ess-hero-bg);
	color: var(--ess-hero-text);
}

.ess .ess-cta .ess-wave {
	width: min(72%, 720px);
	opacity: 0.5;
}

.ess .ess-cta__inner {
	position: relative;
	z-index: 1;
	max-width: 38rem;
}

.ess .ess-cta__title {
	font-size: clamp(1.8em, 4vw, 2.6em);
	line-height: 1.08;
	letter-spacing: -0.025em;
	color: #ffffff;
}

.ess .ess-cta__text {
	margin: 14px 0 28px;
	color: var(--ess-hero-muted);
	font-size: 1.1em;
	line-height: 1.55;
}

.ess .ess-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

/* ---------- Related stories, previous / next ---------- */

.ess .ess-related {
	margin-top: clamp(48px, 8vw, 88px);
}

.ess .ess-section-title {
	margin-bottom: 24px;
	font-size: clamp(1.6em, 3vw, 2.05em);
	letter-spacing: -0.02em;
}

.ess .ess-pager {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
	margin-top: clamp(40px, 7vw, 64px);
}

@media (min-width: 640px) {
	.ess .ess-pager {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.ess .ess-pager__link--next {
		grid-column: 2;
	}
}

.ess .ess-pager__link {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-height: 44px;
	padding: 20px 24px;
	border: 1.5px solid var(--ess-line);
	border-radius: var(--ess-radius);
	background: var(--ess-surface);
	color: var(--ess-text);
	text-decoration: none;
	transition: border-color 0.15s ease;
}

.ess .ess-pager__link:hover {
	border-color: var(--ess-text);
	color: var(--ess-text);
}

.ess .ess-pager__link--next {
	align-items: flex-end;
	text-align: right;
}

.ess .ess-pager__label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--ess-muted);
	font-size: 0.9em;
	font-weight: 700;
}

.ess .ess-pager__link--prev .ess-icon {
	transform: rotate(180deg);
}

.ess .ess-pager__title {
	font-family: var(--ess-font-head);
	font-size: 1.15em;
	font-weight: 650;
	line-height: 1.25;
}

/* ---------- Shortcode ---------- */

.ess-embed {
	margin: 0;
}

.ess .ess-embed__more {
	margin: 28px 0 0;
	text-align: center;
}

.ess .ess-embed__notice {
	margin: 0;
	padding: 14px 18px;
	border-radius: 12px;
	background: #fff0cc;
	color: #7a4b00;
	font-size: 0.9em;
}

/* ---------- Dark mode ---------- */

@media (prefers-color-scheme: dark) {
	body:not(.ess-no-dark) .ess {
		--ess-accent: var(--ess-accent-light);
		--ess-accent-strong: #ffffff;
		--ess-bg: #0d1b29;
		--ess-surface: #152a3d;
		--ess-text: #e8f0f4;
		--ess-muted: #a9bdc9;
		--ess-line: rgba(255, 255, 255, 0.13);
		--ess-focus: #f2b544;
		--ess-hero-bg: #03408a;
		--ess-chip-on-bg: #e8f0f4;
		--ess-chip-on-text: #12263a;
		--ess-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 20px -12px rgba(0, 0, 0, 0.6);
		--ess-shadow-md: 0 2px 4px rgba(0, 0, 0, 0.4), 0 24px 44px -20px rgba(0, 0, 0, 0.8);
		--ess-tone-bg: rgba(110, 170, 240, 0.18);
		--ess-tone-fg: #b5d6f8;
		--ess-tone-dot: #6aaaf0;
		--ess-tone-ph: #12335c;
		--ess-tone-wave: #6aaaf0;
	}

	body:not(.ess-no-dark) :is(#ess-main, .ess) .ess-btn--primary,
	body:not(.ess-no-dark) :is(#ess-main, .ess) .ess-search__submit {
		background: var(--ess-accent-light);
		color: #0b1f2f;
	}

	body:not(.ess-no-dark) :is(#ess-main, .ess) .ess-btn--primary:hover,
	body:not(.ess-no-dark) :is(#ess-main, .ess) .ess-search__submit:hover {
		background: #ffffff;
		color: #0b1f2f;
	}

	body:not(.ess-no-dark) :is(#ess-main, .ess) .ess-btn[data-ess-copy].is-done {
		border-color: var(--ess-accent-light);
		color: var(--ess-accent-light);
	}

	body:not(.ess-no-dark) .ess .ess-tone-teal {
		--ess-tone-bg: rgba(110, 170, 240, 0.18);
		--ess-tone-fg: #b5d6f8;
		--ess-tone-dot: #6aaaf0;
		--ess-tone-ph: #12335c;
		--ess-tone-wave: #6aaaf0;
	}

	body:not(.ess-no-dark) .ess .ess-tone-indigo {
		--ess-tone-bg: rgba(140, 150, 255, 0.18);
		--ess-tone-fg: #bcc1ff;
		--ess-tone-dot: #8a93ff;
		--ess-tone-ph: #1e2a55;
		--ess-tone-wave: #8a93ff;
	}

	body:not(.ess-no-dark) .ess .ess-tone-amber {
		--ess-tone-bg: rgba(255, 200, 80, 0.16);
		--ess-tone-fg: #ffd98a;
		--ess-tone-dot: #f2b544;
		--ess-tone-ph: #3a3118;
		--ess-tone-wave: #f2b544;
	}

	body:not(.ess-no-dark) .ess .ess-tone-rose {
		--ess-tone-bg: rgba(255, 120, 170, 0.16);
		--ess-tone-fg: #ffb5d0;
		--ess-tone-dot: #ff7fae;
		--ess-tone-ph: #3c1f32;
		--ess-tone-wave: #ff7fae;
	}

	body:not(.ess-no-dark) .ess .ess-tone-green {
		--ess-tone-bg: rgba(100, 220, 150, 0.15);
		--ess-tone-fg: #a5e8bf;
		--ess-tone-dot: #5cd28d;
		--ess-tone-ph: #17382a;
		--ess-tone-wave: #5cd28d;
	}

	body:not(.ess-no-dark) .ess .ess-embed__notice {
		background: #3a3118;
		color: #ffd98a;
	}
}

/* ---------- Small screens ---------- */

@media (max-width: 639px) {
	.ess .ess-hero {
		min-height: 0;
		padding: 32px 22px 44px;
	}

	.ess .ess-wave {
		width: 100%;
		opacity: 0.55;
		-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 55%);
		mask-image: linear-gradient(180deg, transparent 0, #000 55%);
	}

	.ess .ess-toolbar {
		margin: 24px 0 22px;
	}

	.ess .ess-search {
		max-width: none;
	}

	.ess .ess-card__body {
		padding: 20px 20px 20px;
	}

	.ess .ess-cta__actions .ess-btn {
		width: 100%;
	}

	.ess .ess-share__buttons .ess-btn {
		flex: 1 1 140px;
	}
}

/* ---------- Respect "reduce motion" ---------- */

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

/* =========================================================================
   Patient story extras: pull quote, star rating, video, FAQ
   ====================================================================== */

/* ---------- Pull quote (top of a story) ---------- */

.ess .ess-pullquote {
	position: relative;
	max-width: 760px;
	margin: clamp(24px, 4vw, 40px) 0 0;
	padding: 0 0 0 clamp(20px, 3vw, 32px);
	border-left: 5px solid var(--ess-warm);
}

.ess .ess-pullquote__text {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
}

.ess .ess-pullquote__text p {
	margin: 0;
	color: var(--ess-accent-strong);
	font-family: var(--ess-font-head);
	font-size: clamp(1.35rem, 3vw, 2rem);
	font-weight: 600;
	line-height: 1.28;
	letter-spacing: -0.01em;
}

.ess .ess-pullquote__text p::before {
	content: "\201C";
}

.ess .ess-pullquote__text p::after {
	content: "\201D";
}

.ess .ess-pullquote__by {
	margin-top: 12px;
	color: var(--ess-muted);
	font-size: 1rem;
	font-weight: 650;
}

/* ---------- Star rating ---------- */

.ess .ess-stars {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	vertical-align: middle;
}

.ess .ess-stars__star {
	display: inline-flex;
}

.ess .ess-stars__star .ess-icon {
	stroke: var(--ess-muted);
	opacity: 0.5;
}

.ess .ess-stars__star.is-on .ess-icon {
	fill: var(--ess-warm);
	stroke: #b7790a;
	opacity: 1;
}

/* ---------- Block headings inside the story column ---------- */

.ess .ess-block-title {
	margin: 0 0 18px;
	font-family: var(--ess-font-head);
	font-size: clamp(1.35rem, 2.6vw, 1.75rem);
	line-height: 1.2;
	letter-spacing: -0.01em;
}

/* ---------- Video (loads from YouTube only after a click) ---------- */

.ess .ess-video-block {
	margin-top: clamp(40px, 6vw, 56px);
}

.ess .ess-video {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	border-radius: var(--ess-radius);
	background: linear-gradient(135deg, var(--ess-hero-bg), var(--ess-accent-strong));
	box-shadow: var(--ess-shadow-sm);
}

.ess .ess-video__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
}

.ess .ess-video__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.8;
}

.ess .ess-video__badge {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 24px 14px 18px;
	border-radius: 999px;
	background: var(--ess-surface);
	color: var(--ess-ink);
	font-weight: 700;
	box-shadow: var(--ess-shadow-md);
}

.ess .ess-video__badge .ess-icon {
	fill: currentColor;
	stroke: none;
}

.ess .ess-video__play:hover .ess-video__badge {
	background: var(--ess-warm);
}

.ess .ess-video__play:focus-visible {
	outline: 3px solid var(--ess-warm);
	outline-offset: -6px;
}

.ess .ess-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.ess .ess-video__alt {
	margin: 12px 0 0;
	font-size: 0.95em;
}

.ess .ess-video__alt a {
	color: var(--ess-accent-strong);
	font-weight: 650;
	text-underline-offset: 3px;
}

/* ---------- Questions and answers ---------- */

.ess .ess-faq {
	margin-top: clamp(40px, 6vw, 56px);
}

.ess .ess-faq__list {
	border-top: 1px solid var(--ess-line);
}

.ess .ess-faq__item {
	border-bottom: 1px solid var(--ess-line);
}

.ess .ess-faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 0;
	font-size: 1.08em;
	font-weight: 650;
	line-height: 1.4;
	cursor: pointer;
	list-style: none;
}

.ess .ess-faq__q::-webkit-details-marker {
	display: none;
}

.ess .ess-faq__q::marker {
	content: "";
}

.ess .ess-faq__sign {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--ess-accent-soft);
	color: var(--ess-accent-strong);
}

.ess .ess-faq__item[open] .ess-faq__sign {
	transform: rotate(45deg);
}

.ess .ess-faq__q:hover .ess-faq__q-text {
	color: var(--ess-accent-strong);
}

.ess .ess-faq__a {
	max-width: 64ch;
	padding: 0 52px 20px 0;
}

.ess .ess-faq__a p {
	margin: 0 0 0.8em;
}

.ess .ess-faq__a p:last-child {
	margin-bottom: 0;
}

.ess .ess-faq__a a {
	color: var(--ess-accent-strong);
	text-underline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
	.ess .ess-faq__sign {
		transition: transform 0.2s ease;
	}

	.ess .ess-video__badge {
		transition: background-color 0.15s ease;
	}
}

/* =========================================================================
   Version 1.2: 14px paragraphs, Montserrat sizing, Insono-style story header,
   designed snapshot card and designed tables inside the story text
   ====================================================================== */

/* ---------- Paragraph text: Rubik, 16px (the normal p size) ---------- */

.ess p,
.ess p[class],
.ess .ess-prose,
.ess .ess-prose p,
.ess .ess-prose li,
.ess .ess-faq__a p {
	font-family: "Rubik", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.75;
}

/* Quotes keep their larger type. */
.ess .ess-pullquote__text p {
	font-size: clamp(1.25rem, 2.8vw, 1.75rem);
	line-height: 1.35;
}

.ess .ess-prose blockquote p {
	font-size: inherit;
	line-height: 1.5;
}

/* Headings inside the story text, sized against 14px body text. */
.ess .ess-prose h2 {
	font-size: 22px;
}

.ess .ess-prose h3 {
	font-size: 18px;
}

.ess .ess-prose h4 {
	font-size: 16px;
}

.ess .ess-prose :is(h2, h3) {
	padding-left: 14px;
	border-left: 4px solid var(--ess-accent);
}

/* ---------- Montserrat is wide, so headings are a little smaller ---------- */

.ess .ess-hero__title {
	font-size: clamp(1.8em, 4.6vw, 3em);
	line-height: 1.12;
	letter-spacing: -0.02em;
}

.ess .ess-story__title {
	max-width: 26em;
	font-size: clamp(1.5em, 3.4vw, 2.35em);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.015em;
}

/* ---------- Story header: picture first, then back link, tag, place, date, title ---------- */

.ess .ess-story__hero {
	margin: 8px auto 0;
}

.ess .ess-story__img {
	aspect-ratio: 21 / 9;
	max-height: 460px;
}

.ess .ess-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	margin: 18px 0 6px;
	color: var(--ess-accent-strong);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
}

.ess .ess-back .ess-icon {
	transform: scaleX(-1);
}

.ess .ess-back:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.ess .ess-story__meta {
	margin-bottom: 16px;
}

/* ---------- Patient snapshot card (from the story details fields) ---------- */

.ess .ess-glance {
	padding: 0;
	border: 1px solid var(--ess-line);
	border-radius: 18px;
	overflow: hidden;
	background: var(--ess-surface);
	box-shadow: var(--ess-shadow-md);
}

.ess .ess-glance__title {
	margin: 0;
	padding: 16px 22px;
	background: var(--ess-accent);
	color: #ffffff;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0;
}

.ess .ess-glance__list {
	padding: 4px 22px 10px;
}

.ess .ess-glance__row {
	padding: 14px 0;
}

.ess .ess-glance dt {
	gap: 12px;
	margin: 0 0 2px;
	color: var(--ess-muted);
	font-size: 12px;
	font-weight: 600;
}

.ess .ess-glance dt .ess-icon {
	box-sizing: content-box;
	flex: 0 0 auto;
	padding: 7px;
	border-radius: 50%;
	background: var(--ess-accent-soft);
	color: var(--ess-accent-strong);
}

.ess .ess-glance dd {
	margin: 0 0 0 46px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.45;
}

/* ---------- Tables inside the story text (for example a pasted Patient Snapshot) ---------- */

.ess .ess-prose figure.wp-block-table {
	margin: 1.4em 0 2em;
	overflow-x: auto;
}

.ess .ess-prose table {
	display: table;
	width: 100%;
	max-width: 560px;
	margin: 1.2em 0 2em;
	border: 1px solid var(--ess-line);
	border-collapse: separate;
	border-spacing: 0;
	border-radius: 14px;
	overflow: hidden;
	background: var(--ess-surface);
	box-shadow: var(--ess-shadow-sm);
	font-size: 14px;
}

.ess .ess-prose figure.wp-block-table table {
	margin: 0;
}

.ess .ess-prose table thead th {
	padding: 13px 18px;
	border: 0;
	background: var(--ess-accent);
	color: #ffffff;
	font-weight: 700;
	text-align: left;
}

.ess .ess-prose table td,
.ess .ess-prose table tbody th {
	padding: 12px 18px;
	border: 0;
	border-top: 1px solid var(--ess-line);
	line-height: 1.5;
	vertical-align: top;
}

.ess .ess-prose table tbody tr:first-child td,
.ess .ess-prose table tbody tr:first-child th {
	border-top: 0;
}

.ess .ess-prose table tbody td:first-child,
.ess .ess-prose table tbody th {
	width: 38%;
	background: var(--ess-accent-soft);
	color: var(--ess-accent-strong);
	font-weight: 700;
}

/* Photos added with the editor's gallery block. */
.ess .ess-prose .wp-block-gallery {
	gap: 12px;
	margin: 1.6em 0;
}

.ess .ess-prose .wp-block-gallery img {
	border-radius: 14px;
}

/* Story column: text, video and questions share one width. */
.ess .ess-prose {
	max-width: none;
}

@media (min-width: 980px) {
	.ess .ess-story__layout {
		grid-template-columns: minmax(0, 640px) 312px;
	}

	.ess .ess-story__layout--solo {
		grid-template-columns: minmax(0, 640px);
	}
}

/* A pasted table whose first row holds header cells inside the body (no thead) still gets the blue header. */
.ess .ess-prose table:not(:has(thead)) tbody tr:first-child:has(> th + th) > th {
	border: 0;
	background: var(--ess-accent);
	color: #ffffff;
	text-align: left;
}

/* =========================================================================
   Version 1.2.1: one shared column for the whole story
   Picture, back link, tag, title, text, video, questions and the call to action
   all start at the same left edge and share the same width.
   ====================================================================== */

.ess .ess-story--solo :is(.ess-story__hero, .ess-story__header, .ess-story__layout, .ess-story__cta) {
	max-width: 880px;
}

.ess .ess-story--solo .ess-story__layout {
	grid-template-columns: minmax(0, 1fr);
	justify-content: stretch;
}

.ess .ess-story--solo :is(.ess-story__title, .ess-story__lede, .ess-pullquote) {
	max-width: none;
}

/* With the snapshot card beside the text, the text column still starts where the heading starts. */
@media (min-width: 980px) {
	.ess .ess-story:not(.ess-story--solo) .ess-story__layout {
		justify-content: start;
	}
}

/* ---------- Call to action: every word starts with a capital letter ---------- */

.ess .ess-cta__title,
.ess .ess-cta .ess-btn,
.ess .ess-btn--warm,
.ess .ess-btn--primary {
	text-transform: capitalize;
}


/* =========================================================================
   Version 1.3.0: Rubik for p tags, back link above the picture, clinical review line,
   highlight heading (H2), capitalised snapshot labels
   ====================================================================== */

@font-face {
	font-family: "Rubik";
	font-style: normal;
	font-weight: 300 900;
	font-display: swap;
	src: url("../fonts/rubik-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Back link sits above the story picture. */
.ess .ess-story__backbar {
	padding-top: clamp(4px, 1.5vw, 16px);
}

.ess .ess-story__backbar .ess-back {
	margin: 8px 0 6px;
}

.ess .ess-story--solo :is(.ess-story__backbar, .ess-story__review) {
	max-width: 880px;
}

/* "Clinically Reviewed by ..." line, directly under the picture. */
.ess .ess-story__review {
	margin-top: 14px;
}

.ess .ess-review {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 12px 16px;
	border-radius: 12px;
	background: var(--ess-accent-soft);
	color: var(--ess-accent-strong);
}

.ess .ess-review .ess-icon {
	flex: 0 0 auto;
	margin-top: 2px;
}

.ess .ess-review .ess-review__text {
	margin: 0;
	color: inherit;
	font-family: "Rubik", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.55;
}

.ess .ess-review__date {
	display: inline-block;
	font-weight: 700;
}

/* Highlight heading (H2) under the title. */
.ess .ess-story__highlight {
	max-width: none;
	margin: 26px 0 0;
	padding-left: clamp(16px, 2.5vw, 24px);
	border-left: 5px solid var(--ess-warm);
	color: var(--ess-accent-strong);
	font-size: clamp(1.2rem, 2.6vw, 1.65rem);
	font-style: normal;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
}

/* Snapshot title and labels start with capital letters. */
.ess .ess-glance__title,
.ess .ess-glance dt {
	text-transform: capitalize;
}


/* Snapshot card: stays in view while the story is read (the script adjusts it for themes that get in the way). */
@media (min-width: 980px) {
	.ess .ess-story__aside {
		align-self: start;
	}
}

/* Values keep their own capitalisation, whatever the theme does to definition lists. */
.ess .ess-glance dd {
	text-transform: none;
}


/* =========================================================================
   Version 1.3.3: smaller snapshot card that always fits on screen
   ====================================================================== */

@media (min-width: 980px) {
	.ess .ess-story__layout {
		grid-template-columns: minmax(0, 660px) minmax(240px, 280px);
		gap: clamp(28px, 4vw, 48px);
	}

	/* Sticky card: stays under any fixed header (the script sets the offset). It never scrolls inside itself,
	   and on a screen too short to show it whole it simply scrolls with the page. */
	.ess .ess-story__aside {
		top: var(--ess-sticky-top, 32px);
	}

}

.ess .ess-glance {
	border-radius: 16px;
}

.ess .ess-glance__title {
	padding: 12px 18px;
	font-size: 15px;
}

.ess .ess-glance__list {
	padding: 2px 18px 6px;
}

.ess .ess-glance__row {
	padding: 10px 0;
}

.ess .ess-glance dt {
	gap: 10px;
	margin: 0;
	font-size: 12px;
}

.ess .ess-glance dt .ess-icon {
	width: 16px;
	height: 16px;
	padding: 5px;
}

.ess .ess-glance dd {
	margin: 2px 0 0 36px;
	font-size: 14px;
	line-height: 1.35;
}

.ess .ess-glance .ess-stars__star .ess-icon {
	width: 16px;
	height: 16px;
}


/* Tighter snapshot card, used by the script when the screen is too short for the full card. */
.ess .ess-story__aside--tight .ess-glance__title {
	padding: 9px 16px;
	font-size: 14px;
}

.ess .ess-story__aside--tight .ess-glance__list {
	padding: 0 16px 2px;
}

.ess .ess-story__aside--tight .ess-glance__row {
	padding: 7px 0;
}

.ess .ess-story__aside--tight .ess-glance dt {
	font-size: 11.5px;
}

.ess .ess-story__aside--tight .ess-glance dt .ess-icon {
	display: none;
}

.ess .ess-story__aside--tight .ess-glance dd {
	margin: 1px 0 0;
	font-size: 13.5px;
}