/*
 * Chalomot Chasidiyim — single frontend stylesheet.
 *
 * Implements docs/SPEC.md "Performance" (#3) and the design in docs/Home.pdf.
 *
 * Rules for this file:
 * - docs/Home.pdf is the source of truth for colour, shape and spacing.
 * - RTL-first. Logical properties only (margin-inline, inset-inline-start,
 *   border-inline-end, text-align: start/end). No `left` / `right`.
 * - Mobile-first. Media queries are min-width only.
 * - Every colour comes from a token in :root. No hardcoded colour below it.
 * - Greycliff Hebrew CF is loaded by the Adobe Fonts kit enqueued in
 *   inc/assets.php; there is no @font-face here on purpose.
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
	/* ---- Core palette, sampled from docs/Home.pdf ---- */
	--color-bg: #ffffff;
	--color-surface: #ecf5ff;
	--color-accent: #4dcf83;
	--color-accent-soft: #d2ffe5;
	--color-cta: #dada65;
	--color-highlight: #eded8f;
	--color-header-border: #ffffff;
	--color-divider-onbrand: #ffffff;
	--color-text: #000000;

	/* Night-sky artwork context ONLY — never a UI background. */
	--color-night: #26325e;

	/* ---- Panel tints ---- */
	--color-panel-cream: #fff3e3;
	--color-panel-blue: #e6efff;
	--color-panel-pink: #ffcccc;

	/* ---- Derived / supporting ---- */
	--color-card: #ffffff;
	--color-text-muted: #5a5a5a;
	--color-text-on-cta: #ffffff;
	--color-accent-ink: #146b3e;
	--color-cta-soft: #fdf4c9;
	--color-cta-ink: #866c21;
	--color-border: #efe6d8;
	--color-border-soft: #e2e9f6;
	--color-youtube: #f94a4a;
	--color-whatsapp: #25d366;
	--color-error: #b3413f;
	--color-overlay: rgba(38, 50, 94, 0.55);

	/* ---- Typography ---- */
	--chalomot-font: "greycliff-hebrew-cf", "noto-sans-hebrew", "Arial Hebrew",
		"Noto Sans Hebrew", system-ui, -apple-system, sans-serif;
	--chalomot-text-sm: 0.875rem;
	--chalomot-text-base: 1rem;
	--chalomot-text-lg: 1.125rem;
	--chalomot-text-xl: 1.375rem;
	--chalomot-text-2xl: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
	--chalomot-text-3xl: clamp(1.875rem, 1.4rem + 2.4vw, 2.75rem);
	--chalomot-leading: 1.7;
	--chalomot-leading-tight: 1.25;

	/* ---- Spacing ---- */
	--chalomot-space-3xs: 0.25rem;
	--chalomot-space-2xs: 0.5rem;
	--chalomot-space-xs: 0.75rem;
	--chalomot-space-sm: 1rem;
	--chalomot-space-md: 1.5rem;
	--chalomot-space-lg: 2rem;
	--chalomot-space-xl: 3rem;
	--chalomot-space-2xl: 4rem;

	/* ---- Section rhythm (mobile values; scaled up at the breakpoints) ---- */
	--space-section: var(--chalomot-space-lg);
	--space-panel: var(--chalomot-space-md);
	--space-stack: var(--chalomot-space-sm);
	--space-section-heading: var(--chalomot-space-md);
	--header-offset: 4.5rem;

	/* ---- Layout & shape (Home.pdf: soft, rounded, no hard borders) ---- */
	--chalomot-container: 72rem;
	--chalomot-container-narrow: 46rem;
	--chalomot-gutter: var(--chalomot-space-sm);
	--chalomot-radius: 1.25rem;
	--chalomot-radius-sm: 0.75rem;
	--chalomot-radius-lg: 1.75rem;
	--chalomot-radius-media: 1.5rem;
	--chalomot-radius-pill: 999px;
	--chalomot-shadow: 0 1px 3px rgba(38, 50, 94, 0.05), 0 10px 28px rgba(38, 50, 94, 0.07);
	--chalomot-shadow-sm: 0 1px 2px rgba(38, 50, 94, 0.05), 0 4px 12px rgba(38, 50, 94, 0.06);
	--chalomot-card-ratio: 16 / 9;
	--chalomot-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5 6.5 12 13 4.5'/%3E%3C/svg%3E");
}

@media (min-width: 48em) {
	:root {
		--chalomot-gutter: var(--chalomot-space-lg);
		--space-section: var(--chalomot-space-2xl);
		--space-panel: var(--chalomot-space-lg);
		--space-stack: var(--chalomot-space-lg);
		--space-section-heading: var(--chalomot-space-xl);
	}
}

/* Desktop rhythm: one step up again so sections do not read as scaled-up
   mobile (design refinement pass, item 2). */
@media (min-width: 64em) {
	:root {
		--space-section: 5rem;
		--space-panel: var(--chalomot-space-xl);
		--space-stack: var(--chalomot-space-xl);
	}
}

@media (min-width: 90em) {
	:root {
		--space-section: 6rem;
	}
}

/* ==========================================================================
   3. Reset
   ========================================================================== */

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

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

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd, ul, ol {
	margin: 0;
}

ul[class],
ol[class] {
	padding: 0;
	list-style: none;
}

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

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

button {
	cursor: pointer;
}

svg {
	fill: currentColor;
}

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

/* ==========================================================================
   4. Base typography
   ========================================================================== */

/*
 * Sticky footer. `min-block-size: 100vh` alone left short pages with the body
 * stretched to the viewport while the footer ended with the content — the page
 * background showed through underneath. The column layout makes the content
 * area absorb the slack instead, so the footer always ends the page.
 */
body {
	background-color: var(--color-bg);
	color: var(--color-text);
	font-family: var(--chalomot-font);
	font-size: var(--chalomot-text-base);
	line-height: var(--chalomot-leading);
	min-block-size: 100vh;
	display: flex;
	flex-direction: column;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	line-height: var(--chalomot-leading-tight);
	font-weight: 700;
	text-wrap: balance;
}

h1 { font-size: var(--chalomot-text-3xl); }
h2 { font-size: var(--chalomot-text-2xl); }
h3 { font-size: var(--chalomot-text-xl); }
h4 { font-size: var(--chalomot-text-lg); }

p {
	text-wrap: pretty;
}

a {
	color: inherit;
	text-underline-offset: 0.2em;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
	border-radius: var(--chalomot-radius-sm);
}

/* Latin runs (YouTube, URLs) inside Hebrew text. */
.chalomot-ltr {
	direction: ltr;
	unicode-bidi: isolate;
	display: inline-block;
}

/* ==========================================================================
   5. Layout helpers
   ========================================================================== */

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

.chalomot-container--narrow {
	max-inline-size: var(--chalomot-container-narrow);
}

.chalomot-section {
	padding-block: var(--chalomot-space-xl);
}

.site-content {
	display: block;
	flex: 1 0 auto;
}

.screen-reader-text {
	position: absolute !important;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	inset-block-start: var(--chalomot-space-2xs);
	inset-inline-start: var(--chalomot-space-2xs);
	z-index: 100;
	padding: var(--chalomot-space-2xs) var(--chalomot-space-sm);
	background-color: var(--color-card);
	color: var(--color-text);
	border-radius: var(--chalomot-radius-sm);
	transform: translateY(-200%);
}

.skip-link:focus {
	transform: translateY(0);
}

/* ==========================================================================
   6. Header
   ========================================================================== */

/* Home.pdf: the header sits on the cream hero panel, dark text. */
.site-header {
	display: flex;
	align-items: center;
	background-color: var(--color-panel-cream);
	color: var(--color-text);
	border-block-end: 1px solid var(--color-header-border);
}

/*
 * Three zones: brand at the RTL start, nav centred, call to action at the end.
 * On mobile the nav collapses and the row reads brand | CTA | menu glyph.
 */
.site-header__inner {
	display: flex;
	align-items: center;
	gap: var(--chalomot-space-sm);
	inline-size: 100%;
	padding-block: var(--chalomot-space-xs);
}

.site-header__brand {
	flex: 1 1 0;
	min-inline-size: 0;
}

.site-header__end {
	flex: 1 1 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: var(--chalomot-space-2xs);
}

.site-header__cta {
	white-space: nowrap;
}

.site-branding {
	display: flex;
	align-items: center;
	gap: var(--chalomot-space-2xs);
	min-inline-size: 0;
}

.site-branding img {
	block-size: auto;
	max-block-size: 3rem;
	inline-size: auto;
}

.site-title {
	font-size: 1.55em;
	font-weight: 700;
	margin: 0;
	line-height: 1.1;
}

.site-title a {
	text-decoration: none;
}

.site-description {
	font-size: var(--chalomot-text-sm);
	color: var(--color-text-muted);
}

.site-nav-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--chalomot-space-3xs);
	padding: var(--chalomot-space-3xs) var(--chalomot-space-2xs);
	background: none;
	border: 1px solid currentColor;
	border-radius: var(--chalomot-radius-sm);
	color: inherit;
	font-size: var(--chalomot-text-sm);
}

/* ==========================================================================
   7. Footer — full layout per the footer mockup, pastel-skinned
   ========================================================================== */

.site-footer {
	background-color: var(--color-panel-cream);
	color: var(--color-text);
	padding-block: var(--chalomot-space-xl) var(--chalomot-space-md);
	margin-block: 0;
	flex: 0 0 auto;
}

.site-footer a {
	text-decoration: none;
	color: inherit;
}

.site-footer a:hover {
	text-decoration: underline;
}

.site-footer__heading {
	font-size: var(--chalomot-text-lg);
	margin-block-end: var(--chalomot-space-2xs);
}

/* --- newsletter bar --- */

.chalomot-newsletter {
	background-color: var(--color-panel-blue);
	border-radius: var(--chalomot-radius-lg);
	padding: var(--chalomot-space-md);
}

.chalomot-newsletter__note {
	font-size: var(--chalomot-text-sm);
	color: var(--color-text-muted);
	margin-block-start: var(--chalomot-space-2xs);
}

.chalomot-newsletter__form {
	margin-block-start: var(--chalomot-space-sm);
}

/* --- brand block --- */

.site-footer__brand {
	margin-block-start: var(--chalomot-space-lg);
	padding-block-end: var(--chalomot-space-md);
	border-block-end: 1px solid var(--color-border);
}

.site-footer__brand-name {
	font-size: var(--chalomot-text-xl);
	font-weight: 700;
}

.site-footer__brand-tagline {
	color: var(--color-accent-ink);
}

.site-footer__brand-text {
	margin-block-start: var(--chalomot-space-2xs);
	max-inline-size: 46ch;
	color: var(--color-text-muted);
	font-size: var(--chalomot-text-sm);
}

/* --- link columns --- */

.site-footer__grid {
	display: grid;
	gap: var(--chalomot-space-lg);
	grid-template-columns: 1fr;
	margin-block-start: var(--chalomot-space-lg);
}

@media (min-width: 40em) {
	.site-footer__grid {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--chalomot-space-xl);
	}
}

.site-footer__list {
	display: flex;
	flex-direction: column;
	gap: var(--chalomot-space-3xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer__social {
	display: inline-block;
}

/* --- bottom bar --- */

.site-footer__bottom {
	margin-block-start: var(--chalomot-space-lg);
	padding-block-start: var(--chalomot-space-sm);
	border-block-start: 1px solid var(--color-border);
	font-size: var(--chalomot-text-sm);
	color: var(--color-text-muted);
	display: flex;
	flex-wrap: wrap;
	gap: var(--chalomot-space-2xs) var(--chalomot-space-md);
	justify-content: space-between;
	align-items: center;
}

.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--chalomot-space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ==========================================================================
   8. Story card grid — skeleton (filled in Prompt 4)
   ========================================================================== */

/*
 * align-content: start packs the rows at the top of the track; align-items
 * must stay `stretch` so every card in a row matches the tallest one.
 */
.chalomot-grid {
	display: grid;
	align-content: start;
	align-items: stretch;
	gap: var(--chalomot-space-md);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * Home.pdf: a flat card, no shadow. The thumbnail runs to the card edges —
 * measured in the PDF, where the image span matches the card span exactly.
 */
.story-card {
	position: relative;
	display: flex;
	flex-direction: column;
	block-size: 100%;
	background-color: var(--color-card);
	border: 0;
	border-radius: var(--chalomot-radius-media);
	overflow: hidden;
	transition: transform 0.15s ease;
}

/* On a white background the card takes the pale blue surface, as in Home.pdf. */
.chalomot-grid--archive .story-card,
.home__latest .story-card,
.story__related .story-card {
	background-color: var(--color-surface);
}

.story-card:hover,
.story-card:focus-within {
	transform: translateY(-2px);
}

/* The only night-sky surface: the placeholder behind the thumbnail artwork. */
.story-card__media {
	position: relative;
	aspect-ratio: var(--chalomot-card-ratio);
	background-color: var(--color-night);
	border-radius: var(--chalomot-radius-media);
	overflow: hidden;
}

.story-card__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.story-card__duration {
	position: absolute;
	inset-block-end: var(--chalomot-space-2xs);
	inset-inline-end: var(--chalomot-space-2xs);
	padding: 0.1rem var(--chalomot-space-2xs);
	border-radius: var(--chalomot-radius-pill);
	background-color: var(--color-overlay);
	color: var(--color-card);
	font-size: var(--chalomot-text-sm);
}

.story-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: var(--chalomot-space-3xs);
	padding: var(--chalomot-space-sm);
}

/* The title sits above any meta line, which is pinned to the card's foot. */
.story-card__meta {
	margin-block-start: auto;
}

.story-card__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--chalomot-space-3xs);
	margin: 0 0 .5em;
	padding: 0;
	list-style: none;
}

.story-card__badge {
	padding: 0.15rem var(--chalomot-space-sm);
	border-radius: var(--chalomot-radius-pill);
	background-color: var(--color-accent-soft);
	background-color: var(--color-panel-pink);
	color: var(--color-text);
	font-size: var(--chalomot-text-sm);
	font-size: .85em;
	font-weight: 500;
}

.story-card__title {
	font-size: var(--chalomot-text-lg);
	margin: 0;
}

.story-card__title a {
	text-decoration: none;
}

/* Whole-card link target. */
.story-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.story-card__meta {
	font-size: var(--chalomot-text-sm);
	color: var(--color-text-muted);
}

/* ==========================================================================
   9. Breadcrumbs
   ========================================================================== */

.chalomot-breadcrumbs {
	padding-block: var(--chalomot-space-sm);
	font-size: var(--chalomot-text-sm);
	color: var(--color-text-muted);
}

.chalomot-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--chalomot-space-3xs) var(--chalomot-space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.chalomot-breadcrumbs__item + .chalomot-breadcrumbs__item::before {
	content: "›";
	margin-inline-end: var(--chalomot-space-2xs);
	color: var(--color-border);
}

.chalomot-breadcrumbs a {
	text-decoration: none;
}

.chalomot-breadcrumbs a:hover {
	text-decoration: underline;
}

/* ==========================================================================
   10. Section scaffolding
   ========================================================================== */

/*
 * Section headings: Home.pdf sets them well above body scale and centres them.
 * --space-section-heading adds air above each one.
 */
/* One step down from the previous round; still centred. */
.chalomot-section-title {
	font-size: var(--chalomot-text-xl);
	text-align: center;
	margin-block: var(--space-section-heading) var(--chalomot-space-md);
}

@media (min-width: 64em) {
	.chalomot-section-title {
		font-size: var(--chalomot-text-2xl);
	}
}

/* ==========================================================================
   11. YouTube facade
   ========================================================================== */

/* The night-sky artwork sits here — the one place --color-night is a surface. */
.chalomot-facade {
	position: relative;
	aspect-ratio: 16 / 9;
	background-color: var(--color-night);
	border-radius: var(--chalomot-radius);
	overflow: hidden;
}

.chalomot-facade__button {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	padding: 0;
	border: 0;
	background: none;
	position: relative;
}

.chalomot-facade__poster {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.chalomot-facade__play {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	transform: translate(50%, -50%);
	inline-size: 4rem;
	aspect-ratio: 1;
	pointer-events: none;
}

/* The icon is centred by a 50% inline shift; in LTR that shift shoots right. */
:dir(ltr) .chalomot-facade__play {
	transform: translate(-50%, -50%);
}

.chalomot-facade__play svg {
	inline-size: 100%;
	block-size: auto;
	display: block;
}

/* Home.pdf: a light circular play button sitting on the night-sky artwork. */
.chalomot-facade__play-bg {
	fill: var(--color-card);
	fill-opacity: 0.92;
	transition: fill-opacity 0.15s ease;
}

.chalomot-facade__play-arrow {
	fill: var(--color-night);
}

.chalomot-facade__button:hover .chalomot-facade__play-bg,
.chalomot-facade__button:focus-visible .chalomot-facade__play-bg {
	fill: var(--color-card);
	fill-opacity: 1;
}

.chalomot-facade__iframe {
	inline-size: 100%;
	block-size: 100%;
	border: 0;
	display: block;
}

/* ==========================================================================
   12. Single story
   ========================================================================== */

.story {
	padding-block-end: var(--chalomot-space-xl);
}

.story__header {
	padding-block-start: var(--chalomot-space-md);
}

.story__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--chalomot-space-3xs);
	margin: 0 0 var(--chalomot-space-2xs);
	padding: 0;
	list-style: none;
}

.story__badge {
	display: inline-block;
	padding: 0.15rem var(--chalomot-space-sm);
	border: 0;
	border-radius: var(--chalomot-radius-pill);
	font-size: var(--chalomot-text-sm);
	font-weight: 500;
	text-decoration: none;
	background-color: var(--color-accent-soft);
    background-color: var(--color-panel-pink);
    color: var(--color-text);
}

.story__badge:hover {
	background-color: var(--color-accent);
	color: var(--color-text);
}

/* The series chip is the warm counterpart to the mint topic pills. */
.story__badge--series {
	background-color: var(--color-cta-soft);
	color: var(--color-cta-ink);
	font-weight: 700;
}

.story__badge--series:hover {
	background-color: var(--color-cta);
	color: var(--color-text);
}

.story__title {
	margin-block: var(--chalomot-space-2xs);
}

.story__byline {
	color: var(--color-text-muted);
	font-size: var(--chalomot-text-sm);
}

.story__sep {
	margin-inline: var(--chalomot-space-3xs);
}

.story__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--chalomot-space-2xs);
	margin-block-start: var(--chalomot-space-sm);
}

.story__action {
	display: inline-flex;
	align-items: center;
	gap: var(--chalomot-space-3xs);
	padding: var(--chalomot-space-2xs) var(--chalomot-space-md);
	border: 0;
	border-radius: var(--chalomot-radius-pill);
	background-color: var(--color-panel-cream);
	color: var(--color-text);
	font-size: var(--chalomot-text-sm);
	font-weight: 500;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.story__action:hover {
	background-color: var(--color-accent-soft);
	color: var(--color-text);
}

.story__action.is-copied {
	background-color: var(--color-accent);
	color: var(--color-text);
}

.story__audio {
	margin-block-start: var(--chalomot-space-sm);
}

.story__audio audio {
	inline-size: 100%;
}

.story__summary,
.story__tips {
	margin-block-start: var(--chalomot-space-lg);
}

.story__section-title {
	font-size: var(--chalomot-text-xl);
	margin-block-end: var(--chalomot-space-2xs);
}

.story__summary p + p,
.story__message p + p {
	margin-block-start: var(--chalomot-space-sm);
}

/* Educational message: cream panel with a green accent rule, per the mockup. */
.story__message {
	margin-block-start: var(--chalomot-space-lg);
	padding: var(--chalomot-space-md);
	border-radius: var(--chalomot-radius);
	background-color: var(--color-panel-cream);
	border-inline-start: 4px solid var(--color-accent);
}

.story__message-title {
	font-size: var(--chalomot-text-lg);
	margin-block-end: var(--chalomot-space-2xs);
}

.story__tips-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--chalomot-space-2xs);
}

.story__tips-list li {
	position: relative;
	padding-inline-start: var(--chalomot-space-md);
}

.story__tips-list li::before {
	content: "";
	position: absolute;
	inset-block-start: 0.65em;
	inset-inline-start: 0;
	inline-size: 0.5rem;
	block-size: 0.5rem;
	border-radius: 50%;
	background-color: var(--color-accent);
}

/* --- series episode strip --- */

.story__episode-strip {
	display: flex;
	gap: var(--chalomot-space-2xs);
	margin: 0;
	padding: 0 0 var(--chalomot-space-2xs);
	list-style: none;
	overflow-x: auto;
	scroll-snap-type: inline mandatory;
	overscroll-behavior-inline: contain;
}

.story__episode {
	flex: 0 0 auto;
	scroll-snap-align: start;
	max-inline-size: 15rem;
}

.story__episode a {
	display: flex;
	align-items: baseline;
	gap: var(--chalomot-space-2xs);
	padding: var(--chalomot-space-2xs) var(--chalomot-space-sm);
	border: 0;
	border-radius: var(--chalomot-radius);
	background-color: var(--color-surface);
	text-decoration: none;
	block-size: 100%;
}

.story__episode.is-current a {
	background-color: var(--color-accent-soft);
}

.story__episode-number {
	flex: 0 0 auto;
	font-weight: 700;
	color: var(--color-accent-ink);
}

.story__episode.is-current .story__episode-number {
	color: var(--color-text);
}

.story__episode-title {
	flex: 1 1 auto;
}

.story__episode-time {
	flex: 0 0 auto;
	font-size: var(--chalomot-text-sm);
	color: var(--color-text-muted);
	white-space: nowrap;
}

/* ==========================================================================
   13. Archive
   ========================================================================== */

.stories-archive {
	padding-block-end: var(--chalomot-space-xl);
}

.stories-archive__header {
	margin-block-end: var(--chalomot-space-md);
}

.stories-archive__description {
	max-inline-size: var(--chalomot-container-narrow);
	color: var(--color-text-muted);
	margin-block-start: var(--chalomot-space-2xs);
}

.stories-archive__playlist {
	margin-block-start: var(--chalomot-space-2xs);
	font-size: var(--chalomot-text-sm);
}

.stories-archive__empty {
	padding-block: var(--chalomot-space-xl);
	text-align: center;
	color: var(--color-text-muted);
}

.stories-archive__empty-link {
	text-align: center;
	padding-block-end: var(--chalomot-space-xl);
}

/* Filter bar — populated in Prompt 5; reserves no space while empty. */
.chalomot-filters:not(:empty) {
	display: flex;
	flex-wrap: wrap;
	gap: var(--chalomot-space-2xs);
	margin-block-end: var(--chalomot-space-md);
	padding: var(--chalomot-space-sm);
	border: 0;
	border-radius: var(--chalomot-radius);
	background-color: var(--color-surface);
}

/* --- pagination --- */

.pagination {
	margin-block-start: var(--chalomot-space-lg);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--chalomot-space-3xs);
	justify-content: center;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 2.5rem;
	padding: var(--chalomot-space-3xs) var(--chalomot-space-2xs);
	border: 0;
	border-radius: var(--chalomot-radius-pill);
	background-color: var(--color-surface);
	color: var(--color-text);
	text-decoration: none;
}

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

/* ==========================================================================
   14. Subscribe CTA
   ========================================================================== */

/*
 * Subscribe / YouTube CTA. The mockups show this block in dark navy; Home.pdf
 * puts the equivalent block on the pale pink panel, which is what ships.
 */
.chalomot-cta {
	margin-block-start: var(--chalomot-space-xl);
	padding: var(--chalomot-space-md);
	border-radius: var(--chalomot-radius-lg);
	background-color: var(--color-panel-pink);
	color: var(--color-text);
	text-align: center;
}

.chalomot-cta__title {
	font-size: var(--chalomot-text-xl);
}

.chalomot-cta__text {
	margin-block-start: var(--chalomot-space-2xs);
	color: var(--color-text-muted);
}

.chalomot-cta__form:not(:empty),
.chalomot-cta__whatsapp:not(:empty) {
	margin-block-start: var(--chalomot-space-sm);
}

@media (min-width: 48em) {
	.chalomot-cta {
		padding: var(--chalomot-space-lg);
	}
}

/* ==========================================================================
   15. Filter island — superseded by section 26 (design refinement pass)
   ========================================================================== */

[x-cloak] {
	display: none !important;
}

/* Grid keeps its height while a request is in flight — no layout shift. */
.chalomot-grid.is-loading {
	opacity: 0.45;
	transition: opacity 0.15s ease;
}

/* ==========================================================================
   16. Buttons
   ========================================================================== */

/*
 * Home.pdf primary button: chartreuse pill, bold label.
 * The mockup sets the label white, which measures 1.48:1 against the
 * chartreuse; dark text on the same fill is 14.2:1 and is what ships.
 */
.chalomot-button {
	display: inline-block;
	padding: var(--chalomot-space-2xs) var(--chalomot-space-lg);
	border: 0;
	border-radius: var(--chalomot-radius-pill);
	background-color: var(--color-cta);
	color: var(--color-text);
	font-weight: 700;
	text-decoration: none;
	transition: filter 0.15s ease;
}

.chalomot-button:hover {
	filter: brightness(0.94);
}

.chalomot-button--whatsapp {
	background-color: var(--color-whatsapp);
	color: var(--color-text);
}

.chalomot-button--youtube {
	background-color: var(--color-youtube);
	color: var(--color-text-on-cta);
	font-weight: 700;
}

/* ==========================================================================
   17. Content pages
   ========================================================================== */

.page {
	/*padding-block-end: var(--chalomot-space-xl);*/
}

.page__title {
	margin-block: var(--chalomot-space-2xs) var(--chalomot-space-md);
}

.page__lead {
	font-size: var(--chalomot-text-lg);
	color: var(--color-text-muted);
}

.page__section {
	margin-block-start: var(--chalomot-space-lg);
}

.page__section-title {
	font-size: var(--chalomot-text-xl);
	margin-block-end: var(--chalomot-space-2xs);
}

.page__prose > * + * {
	margin-block-start: var(--chalomot-space-sm);
}

.page__prose ul,
.page__prose ol {
	padding-inline-start: var(--chalomot-space-md);
}

.page__form {
	margin-block-start: var(--chalomot-space-lg);
}

.page__form-missing {
	margin-block-start: var(--chalomot-space-lg);
	padding: var(--chalomot-space-sm);
	border: 1px dashed var(--color-border);
	border-radius: var(--chalomot-radius);
	color: var(--color-text-muted);
}

/* ==========================================================================
   18. Homepage
   ========================================================================== */

/* Home.pdf hero: cream panel, dark text, chartreuse CTA. */
.home__hero {
	background-color: var(--color-panel-cream);
	color: var(--color-text);
	padding-block: var(--chalomot-space-xl);
	border-end-start-radius: var(--chalomot-radius-lg);
	border-end-end-radius: var(--chalomot-radius-lg);
}

.home__hero-inner {
	display: grid;
	gap: var(--chalomot-space-md);
	align-items: center;
}

@media (min-width: 48em) {
	.home__hero-inner {
		grid-template-columns: 1.1fr 0.9fr;
		gap: var(--chalomot-space-xl);
	}
}

.home__hero-title {
	font-size: var(--chalomot-text-3xl);
}

.home__hero-subtitle {
	margin-block: var(--chalomot-space-sm);
	font-size: var(--chalomot-text-lg);
	color: var(--color-text-muted);
	max-inline-size: 40ch;
}

.home__hero-image img {
	inline-size: 100%;
	block-size: auto;
	border-radius: var(--chalomot-radius);
}

/* Home.pdf: the weekly story sits in a pale blue panel holding a white card. */
.home__weekly {
	background-color: var(--color-panel-blue);
	border-radius: var(--chalomot-radius-lg);
	padding-block: var(--chalomot-space-lg);
	margin-inline: var(--chalomot-gutter);
}

.home__weekly-title {
	margin-block-start: var(--chalomot-space-sm);
	font-size: var(--chalomot-text-xl);
}

.home__weekly-title a {
	text-decoration: none;
}

.home__weekly-meta {
	font-size: var(--chalomot-text-sm);
	color: var(--color-text-muted);
}

.home__weekly-summary {
	margin-block-start: var(--chalomot-space-2xs);
}

.home__categories-intro {
	margin-block-end: var(--chalomot-space-md);
	color: var(--color-text-muted);
	max-inline-size: var(--chalomot-container-narrow);
}

.home__category-tiles {
	display: grid;
	justify-content: center;
	justify-items: center;
	gap: var(--chalomot-space-sm);
	margin-inline: auto;
	padding: 0;
	list-style: none;
}

.home__category-tile {
	inline-size: 100%;
}

/* Home.pdf: mint rounded tile, green line icon, label beneath, centred. */
.home__category-tile a {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: var(--chalomot-space-2xs);
	block-size: 100%;
	padding: var(--chalomot-space-md);
	border: 0;
	border-radius: var(--chalomot-radius);
	background-color: var(--color-accent-soft);
	color: var(--color-text);
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.home__category-tile a:hover {
	transform: translateY(-2px);
	box-shadow: var(--chalomot-shadow-sm);
}

.home__category-icon img {
	inline-size: 3rem;
	block-size: 3rem;
	object-fit: contain;
}

.home__category-name {
	font-size: var(--chalomot-text-lg);
	font-weight: 700;
}

.home__category-count {
	font-size: var(--chalomot-text-sm);
	color: var(--color-accent-ink);
}

.home__latest-more {
	margin-block-start: var(--chalomot-space-md);
	text-align: center;
}

.home__testimonial-list {
	display: grid;
	gap: var(--chalomot-space-md);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.home__testimonial figure {
	block-size: 100%;
	margin: 0;
	padding: var(--chalomot-space-md);
	border-radius: var(--chalomot-radius);
	background-color: var(--color-panel-cream);
	border: 0;
}

.home__testimonial blockquote {
	margin: 0;
	font-size: var(--chalomot-text-lg);
}

.home__testimonial blockquote::before {
	content: "„";
	color: var(--color-accent);
	font-size: 1.4em;
	line-height: 0;
	margin-inline-end: 0.1em;
}

.home__testimonial figcaption {
	margin-block-start: var(--chalomot-space-2xs);
	font-size: var(--chalomot-text-sm);
	color: var(--color-text-muted);
}

/* Home.pdf: the YouTube call to action is a pale pink panel with a red button. */
.home__youtube {
	text-align: center;
	background-color: var(--color-panel-pink);
	border-radius: var(--chalomot-radius-lg);
	margin-inline: var(--chalomot-gutter);
	padding-block: var(--chalomot-space-lg);
}

/* ==========================================================================
   19. Gravity Forms — minimal, inherits the theme tokens
   ========================================================================== */

.gform_wrapper form {
	margin: 0;
}

.gform_wrapper .gform_fields {
	display: grid;
	gap: var(--chalomot-space-sm);
}

.gform_wrapper .gfield_label {
	display: block;
	margin-block-end: var(--chalomot-space-3xs);
	font-size: var(--chalomot-text-sm);
	font-weight: 500;
}

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper select,
.gform_wrapper textarea {
	inline-size: 100%;
	padding: var(--chalomot-space-2xs) var(--chalomot-space-sm);
	border: 1px solid var(--color-border);
	border-radius: var(--chalomot-radius-sm);
	background-color: var(--color-card);
	color: var(--color-text);
}

.gform_wrapper .gform_footer {
	margin-block-start: var(--chalomot-space-sm);
}

.gform_wrapper .gform_button {
	padding: var(--chalomot-space-2xs) var(--chalomot-space-lg);
	border: 0;
	border-radius: var(--chalomot-radius-pill);
	background-color: var(--color-accent);
	color: var(--color-text);
	font-weight: 500;
}

.chalomot-cta .gform_wrapper .gfield_label {
	color: var(--color-text-muted);
}

/* The newsletter form is one field — lay it out inline where there is room. */
@media (min-width: 30em) {
	.chalomot-cta__form .gform_wrapper .gform_body,
	.chalomot-newsletter__form .gform_wrapper .gform_body {
		display: flex;
		gap: var(--chalomot-space-2xs);
	}

	.chalomot-cta__form .gform_wrapper .gform_fields,
	.chalomot-newsletter__form .gform_wrapper .gform_fields {
		flex: 1 1 auto;
	}
}

.chalomot-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--chalomot-space-3xs) var(--chalomot-space-sm);
	border-radius: var(--chalomot-radius-sm);
	background-color: var(--color-accent-soft);
	color: var(--color-text);
	font-size: var(--chalomot-text-sm);
	font-weight: 500;
	text-decoration: none;
}

.chalomot-social__link:hover {
	background-color: var(--color-cta);
	color: var(--color-text);
	text-decoration: none;
}

/* ==========================================================================
   20. Term icons
   ========================================================================== */

.home__category-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 3.25rem;
	block-size: 3.25rem;
	color: var(--color-accent);
}

.home__category-icon svg,
.home__category-icon img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
}

.stories-archive__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 4rem;
	block-size: 4rem;
	margin-block-end: var(--chalomot-space-2xs);
	padding: var(--chalomot-space-2xs);
	border-radius: var(--chalomot-radius);
	background-color: var(--color-accent-soft);
	color: var(--color-accent);
}

.stories-archive__icon svg,
.stories-archive__icon img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
}

/* ==========================================================================
   21. Homepage intro + "מענה מקיף" panel
   ========================================================================== */

.home__intro-text {
	font-size: var(--chalomot-text-lg);
	text-align: center;
}

.home__answer-panel {
	padding: var(--chalomot-space-lg) var(--chalomot-space-md);
	border-radius: var(--chalomot-radius-lg);
	background-color: var(--color-panel-cream);
}

.home__answer-title {
	font-size: var(--chalomot-text-2xl);
	text-align: center;
}

.home__answer-intro {
	margin-block: var(--chalomot-space-sm);
	text-align: center;
}

.home__answer-item + .home__answer-item {
	margin-block-start: var(--chalomot-space-md);
}

.home__answer-item-title {
	font-size: var(--chalomot-text-lg);
	margin-block-end: var(--chalomot-space-2xs);
}

@media (min-width: 48em) {
	.home__answer-panel {
		padding: var(--chalomot-space-xl);
	}
}

/* ==========================================================================
   22. Editor prose — everything WordPress outputs inside .chalomot-prose
   ========================================================================== */

.chalomot-prose {
	max-inline-size: 65ch;
	margin-inline: auto;
	font-size: var(--chalomot-text-base);
	line-height: var(--chalomot-leading);
}

.chalomot-prose > * + * {
	margin-block-start: var(--chalomot-space-sm);
}

.chalomot-prose h2 {
	font-size: var(--chalomot-text-2xl);
	margin-block-start: var(--chalomot-space-lg);
}

.chalomot-prose h3 {
	font-size: var(--chalomot-text-xl);
	margin-block-start: var(--chalomot-space-md);
}

.chalomot-prose h4 {
	font-size: var(--chalomot-text-lg);
	margin-block-start: var(--chalomot-space-md);
}

.chalomot-prose a {
	color: var(--color-accent-ink);
	text-decoration: underline;
}

.chalomot-prose a:hover {
	text-decoration-thickness: 2px;
}

.chalomot-prose ul,
.chalomot-prose ol {
	padding-inline-start: var(--chalomot-space-md);
	display: grid;
	gap: var(--chalomot-space-2xs);
}

.chalomot-prose ul { list-style: disc; }
.chalomot-prose ol { list-style: decimal; }

.chalomot-prose li::marker {
	color: var(--color-accent);
}

.chalomot-prose blockquote {
	margin: 0;
	padding: var(--chalomot-space-sm) var(--chalomot-space-md);
	border-inline-start: 4px solid var(--color-accent);
	border-radius: var(--chalomot-radius-sm);
	background-color: var(--color-surface);
	font-size: var(--chalomot-text-lg);
}

.chalomot-prose blockquote cite {
	display: block;
	margin-block-start: var(--chalomot-space-2xs);
	font-size: var(--chalomot-text-sm);
	color: var(--color-text-muted);
	font-style: normal;
}

.chalomot-prose img,
.chalomot-prose figure {
	border-radius: var(--chalomot-radius);
	max-inline-size: 100%;
	block-size: auto;
}

.chalomot-prose figcaption {
	margin-block-start: var(--chalomot-space-3xs);
	font-size: var(--chalomot-text-sm);
	color: var(--color-text-muted);
	text-align: center;
}

.chalomot-prose hr {
	border: 0;
	border-block-start: 1px solid var(--color-border);
	margin-block: var(--chalomot-space-lg);
}

.chalomot-prose code {
	padding: 0.1em 0.35em;
	border-radius: var(--chalomot-radius-sm);
	background-color: var(--color-surface);
	font-size: 0.9em;
}

.chalomot-prose pre {
	overflow-x: auto;
	padding: var(--chalomot-space-sm);
	border-radius: var(--chalomot-radius-sm);
	background-color: var(--color-surface);
}

.chalomot-prose table {
	inline-size: 100%;
	border-collapse: collapse;
	display: block;
	overflow-x: auto;
}

.chalomot-prose th,
.chalomot-prose td {
	padding: var(--chalomot-space-2xs) var(--chalomot-space-sm);
	border-block-end: 1px solid var(--color-border);
	text-align: start;
}

.chalomot-prose thead th {
	background-color: var(--color-accent-soft);
}

/* ==========================================================================
   23. Generic page + post list
   ========================================================================== */

.page__panel {
	margin-block-start: var(--chalomot-space-md);
	padding: var(--chalomot-space-lg) var(--chalomot-space-md);
	border-radius: var(--chalomot-radius-lg);
	background-color: var(--color-panel-cream);
}

.page__figure {
	margin: var(--chalomot-space-md) 0 0;
}

.page__figure img {
	inline-size: 100%;
	block-size: auto;
	border-radius: var(--chalomot-radius);
}

.page__meta {
	font-size: var(--chalomot-text-sm);
	color: var(--color-text-muted);
}

.page__terms {
	display: flex;
	flex-wrap: wrap;
	gap: var(--chalomot-space-3xs);
	margin-block-start: var(--chalomot-space-md);
	padding: 0;
	list-style: none;
}

.post-list {
	display: grid;
	gap: var(--chalomot-space-sm);
	margin: var(--chalomot-space-md) 0 0;
	padding: 0;
	list-style: none;
}

.post-list__item {
	padding: var(--chalomot-space-md);
	border-radius: var(--chalomot-radius);
	background-color: var(--color-surface);
}

.post-list__title {
	font-size: var(--chalomot-text-lg);
	margin: 0;
}

.post-list__title a {
	text-decoration: none;
}

.post-list__meta {
	margin-block-start: var(--chalomot-space-3xs);
	font-size: var(--chalomot-text-sm);
	color: var(--color-text-muted);
}

.post-list__excerpt {
	margin-block-start: var(--chalomot-space-2xs);
}

.stories-archive__search {
	margin-block-start: var(--chalomot-space-sm);
	max-inline-size: 28rem;
}

.stories-archive__empty-panel {
	padding: var(--chalomot-space-xl) var(--chalomot-space-md);
	border-radius: var(--chalomot-radius-lg);
	background-color: var(--color-panel-cream);
	text-align: center;
}

.stories-archive__empty-panel > * + * {
	margin-block-start: var(--chalomot-space-sm);
}

/* search form — core markup, theme tokens */
.search-form {
	display: flex;
	gap: var(--chalomot-space-2xs);
}

.search-form label {
	flex: 1 1 auto;
}

.search-form .search-field {
	inline-size: 100%;
	padding: var(--chalomot-space-2xs) var(--chalomot-space-sm);
	border: 0;
	border-radius: var(--chalomot-radius-pill);
	background-color: var(--color-surface);
	color: var(--color-text);
}

.search-form .search-submit {
	padding: var(--chalomot-space-2xs) var(--chalomot-space-lg);
	border: 0;
	border-radius: var(--chalomot-radius-pill);
	background-color: var(--color-cta);
	color: var(--color-text);
	font-weight: 700;
}

/* ==========================================================================
   24. 404
   ========================================================================== */

.error404 {
	margin-block: var(--chalomot-space-lg);
	border-radius: var(--chalomot-radius-lg);
	background-color: var(--color-panel-cream);
	overflow: hidden;
}

.error404__sky {
	background-color: var(--color-night);
	padding-block: var(--chalomot-space-md);
}

.error404__art {
	display: block;
	inline-size: 100%;
	max-inline-size: 22rem;
	block-size: auto;
	margin-inline: auto;
}

.error404__moon {
	fill: var(--color-cta);
}

.error404__moon-cut {
	fill: var(--color-night);
}

.error404__stars circle {
	fill: var(--color-panel-cream);
	opacity: 0.85;
}

.error404__body {
	padding: var(--chalomot-space-lg) var(--chalomot-space-md);
	text-align: center;
}

.error404__code {
	font-size: var(--chalomot-text-sm);
	letter-spacing: 0.3em;
	color: var(--color-text-muted);
}

.error404__title {
	font-size: var(--chalomot-text-2xl);
	margin-block: var(--chalomot-space-2xs);
}

.error404__text {
	max-inline-size: 48ch;
	margin-inline: auto;
	color: var(--color-text-muted);
}

.error404__search {
	max-inline-size: 26rem;
	margin: var(--chalomot-space-md) auto 0;
}

.error404__links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--chalomot-space-2xs);
	margin: var(--chalomot-space-md) 0 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 48em) {
	.error404__body {
		padding: var(--chalomot-space-xl);
	}
}

/* ==========================================================================
   25. Series index
   ========================================================================== */

.series-index {
	display: grid;
	gap: var(--chalomot-space-sm);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
	margin: var(--chalomot-space-md) 0 0;
	padding: 0;
	list-style: none;
}

.series-index__item a {
	display: flex;
	align-items: flex-start;
	gap: var(--chalomot-space-sm);
	block-size: 100%;
	padding: var(--chalomot-space-md);
	border-radius: var(--chalomot-radius);
	background-color: var(--color-surface);
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.series-index__item a:hover {
	transform: translateY(-2px);
	box-shadow: var(--chalomot-shadow-sm);
}

.series-index__icon {
	flex: 0 0 auto;
	display: inline-flex;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	padding: var(--chalomot-space-3xs);
	border-radius: var(--chalomot-radius-sm);
	background-color: var(--color-accent-soft);
	color: var(--color-accent);
}

.series-index__icon svg,
.series-index__icon img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
}

.series-index__body {
	display: flex;
	flex-direction: column;
	gap: var(--chalomot-space-3xs);
}

.series-index__name {
	font-size: var(--chalomot-text-lg);
	font-weight: 700;
}

.series-index__desc {
	color: var(--color-text-muted);
	font-size: var(--chalomot-text-sm);
}

.series-index__count {
	font-size: var(--chalomot-text-sm);
	color: var(--color-accent-ink);
}

.chalomot-cta__link {
	margin-block-start: var(--chalomot-space-sm);
}

/* ==========================================================================
   26. Hero highlight bar
   ========================================================================== */

/*
 * Measured from docs/Home.pdf: a straight, square-cornered bar 30px tall
 * against a 93px glyph (0.32x), overlapping the lowest 16px of the letters and
 * extending 13px below them. Expressed in em so it scales with the heading.
 */
.chalomot-underline {
	position: relative;
	display: inline-block;
	white-space: nowrap;
	z-index: 0;
}

.chalomot-underline::after {
	content: "";
	position: absolute;
	inset-inline: -0.04em;
	inset-block-end: 0.06em;
	block-size: 0.22em;
	background-color: var(--color-highlight);
	z-index: -1;
}

/* ==========================================================================
   27. Section rhythm (item 2)
   ========================================================================== */

.chalomot-section {
	padding-block: var(--space-section);
}

.chalomot-section + .chalomot-section {
	padding-block-start: 0;
}

/* Full-bleed pastel bands vs contained panels, per Home.pdf. */
.home__hero,
.archive-hero {
	padding-block: var(--space-section);
}

.home__answer-panel,
.page__panel,
.stories-archive__empty-panel {
	padding: var(--space-panel);
}

.home__weekly,
.home__youtube {
	padding-block: var(--space-panel);
}

.chalomot-cta {
	margin-block-start: var(--space-section);
	padding: var(--space-panel);
}

@media (min-width: 64em) {
	.home__intro-text {
		font-size: var(--chalomot-text-xl);
	}

	.home__hero-inner {
		gap: var(--chalomot-space-2xl);
	}

	/* Prose-led sections stay readable rather than stretching to the container. */
	.home__answer-panel {
		max-inline-size: 60rem;
		margin-inline: auto;
	}
}

/* ==========================================================================
   28. Archive hero (item 7)
   ========================================================================== */

.archive-hero {
	background-color: var(--color-panel-cream);
	border-end-start-radius: var(--chalomot-radius-lg);
	border-end-end-radius: var(--chalomot-radius-lg);
	margin-block-end: var(--space-stack);
}

.archive-hero .chalomot-breadcrumbs {
	padding-block: 0 var(--chalomot-space-sm);
}

.archive-hero__body {
	display: flex;
	align-items: flex-start;
	gap: var(--chalomot-space-md);
}

.archive-hero__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 4rem;
	block-size: 4rem;
	padding: var(--chalomot-space-2xs);
	border-radius: var(--chalomot-radius);
	background-color: var(--color-accent-soft);
	color: var(--color-accent);
}

.archive-hero__icon svg,
.archive-hero__icon img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: contain;
}

.archive-hero__title {
	font-size: var(--chalomot-text-3xl);
	margin: 0;
}

.archive-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--chalomot-space-3xs);
	margin-block-start: var(--chalomot-space-3xs);
	font-size: var(--chalomot-text-sm);
	color: var(--color-text-muted);
}

.archive-hero__description {
	max-inline-size: 60ch;
	margin-block-start: var(--chalomot-space-sm);
}

.archive-hero__playlist {
	margin-block-start: var(--chalomot-space-2xs);
	font-size: var(--chalomot-text-sm);
}

@media (min-width: 64em) {
	.archive-hero__icon {
		inline-size: 5.5rem;
		block-size: 5.5rem;
	}
}

/* ==========================================================================
   29. Archive layout — sidebar on desktop, drawer on mobile (items 3 + 5)
   ========================================================================== */

.stories-layout {
	display: block;
}

/* The bar is a thin control strip; it contributes no rhythm of its own. */
.stories-layout__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--chalomot-space-2xs);
	margin-block-end: var(--chalomot-space-2xs);
	min-block-size: 0;
}

.stories-layout__status {
	font-size: var(--chalomot-text-sm);
	color: var(--color-text-muted);
	margin: 0;
	min-block-size: 1.25em;
}

.filters-toggle {
	display: inline-flex;
	align-items: center;
	gap: var(--chalomot-space-2xs);
	padding: var(--chalomot-space-2xs) var(--chalomot-space-md);
	border: 0;
	border-radius: var(--chalomot-radius-pill);
	background-color: var(--color-accent-soft);
	color: var(--color-text);
	font-weight: 500;
}

.filters-toggle__icon {
	display: inline-flex;
	inline-size: 1.15rem;
	block-size: 1.15rem;
	color: var(--color-accent-ink);
}

.filters-toggle__icon svg {
	inline-size: 100%;
	block-size: 100%;
}

.filters-toggle__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 1.4rem;
	block-size: 1.4rem;
	border-radius: var(--chalomot-radius-pill);
	background-color: var(--color-accent);
	color: var(--color-text);
	font-size: var(--chalomot-text-sm);
}

/* ---- drawer (below 64em) ---- */

.filters-overlay {
	position: fixed;
	inset: 0;
	z-index: 90;
	background-color: var(--color-overlay);
}

.filters {
	position: fixed;
	inset-block: 0;
	inset-inline-start: 0;
	z-index: 91;
	display: flex;
	flex-direction: column;
	inline-size: min(22rem, 88vw);
	background-color: var(--color-bg);
	box-shadow: var(--chalomot-shadow);
	transform: translateX(-100%);
	transition: transform 0.2s ease;
	visibility: hidden;
}

:dir(rtl) .filters {
	transform: translateX(100%);
}

.filters.is-open {
	transform: translateX(0);
	visibility: visible;
}

.filters__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--chalomot-space-sm);
	padding: var(--chalomot-space-sm) var(--chalomot-space-md);
	border-block-end: 1px solid var(--color-border);
}

.filters__title {
	font-size: var(--chalomot-text-lg);
	margin: 0;
}

.filters__close {
	border: 0;
	background: none;
	font-size: var(--chalomot-text-lg);
	line-height: 1;
	padding: var(--chalomot-space-3xs);
	color: var(--color-text);
}

.filters__scroll {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--chalomot-space-md);
}

.filters__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--chalomot-space-sm);
	padding: var(--chalomot-space-sm) var(--chalomot-space-md);
	border-block-start: 1px solid var(--color-border);
	background-color: var(--color-bg);
}

.filters__apply {
	flex: 1 1 auto;
	text-align: center;
}

html.has-drawer-open,
html.has-drawer-open body {
	overflow: hidden;
}

/* ---- checkbox rows (item 4) ---- */

.filters__group {
	border: 0;
	margin: 0;
	padding: 0;
}

.filters__group + .filters__group {
	margin-block-start: var(--chalomot-space-md);
	padding-block-start: var(--chalomot-space-md);
	border-block-start: 1px solid var(--color-border-soft);
}

.filters__legend {
	padding: 0;
	margin-block-end: var(--chalomot-space-2xs);
	font-size: var(--chalomot-text-sm);
	font-weight: 700;
	color: var(--color-text);
}

.filters__list {
	display: grid;
	gap: var(--chalomot-space-3xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.filters__row {
	position: relative;
	display: flex;
	align-items: center;
}

.filters__checkbox {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	opacity: 0;
	pointer-events: none;
}

.filters__label {
	display: flex;
	align-items: center;
	gap: var(--chalomot-space-2xs);
	inline-size: 100%;
	padding: var(--chalomot-space-3xs) var(--chalomot-space-2xs);
	border-radius: var(--chalomot-radius-sm);
	cursor: pointer;
	transition: background-color 0.12s ease;
}

.filters__label::before {
	content: "";
	flex: 0 0 auto;
	inline-size: 1.25rem;
	block-size: 1.25rem;
	border: 2px solid var(--color-border-soft);
	border-radius: 0.4rem;
	background-color: var(--color-bg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 0.8rem;
	transition: background-color 0.12s ease, border-color 0.12s ease;
}

.filters__label:hover {
	background-color: var(--color-surface);
}

.filters__checkbox:checked + .filters__label {
	background-color: var(--color-accent-soft);
	font-weight: 700;
}

/*
 * The tick is a mask rather than a coloured data URI, so its colour comes from
 * a token instead of being baked into the SVG.
 */
.filters__label::after {
	content: "";
	position: absolute;
	inset-inline-start: var(--chalomot-space-2xs);
	inline-size: 1.25rem;
	block-size: 1.25rem;
	background-color: var(--color-card);
	opacity: 0;
	pointer-events: none;
	-webkit-mask-image: var(--chalomot-tick);
	mask-image: var(--chalomot-tick);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 0.8rem;
	mask-size: 0.8rem;
	transition: opacity 0.12s ease;
}

.filters__checkbox:checked + .filters__label::before {
	background-color: var(--color-accent);
	border-color: var(--color-accent);
}

.filters__checkbox:checked + .filters__label::after {
	opacity: 1;
}

.filters__checkbox:focus-visible + .filters__label {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

.filters__name {
	flex: 1 1 auto;
}

.filters__count {
	flex: 0 0 auto;
	font-size: var(--chalomot-text-sm);
	color: var(--color-text-muted);
}

.filters__checkbox:checked + .filters__label .filters__count {
	color: var(--color-accent-ink);
}

.filters__sort {
	display: inline-flex;
	border-radius: var(--chalomot-radius-pill);
	background-color: var(--color-surface);
	overflow: hidden;
}

.filters__sort button {
	padding: var(--chalomot-space-3xs) var(--chalomot-space-sm);
	border: 0;
	background: none;
	font-size: var(--chalomot-text-sm);
}

.filters__sort button.is-active {
	background-color: var(--color-accent);
	color: var(--color-text);
}

.filters__reset {
	border: 0;
	background: none;
	color: var(--color-text-muted);
	font-size: var(--chalomot-text-sm);
	text-decoration: underline;
}

.filters__error {
	margin-block-start: var(--chalomot-space-sm);
	font-size: var(--chalomot-text-sm);
	color: var(--color-error);
}

.filters__error button {
	margin-inline-start: var(--chalomot-space-2xs);
	border: 0;
	background: none;
	color: inherit;
	text-decoration: underline;
}

.filters__noscript-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--chalomot-space-3xs);
	margin: var(--chalomot-space-2xs) 0 0;
	padding: 0;
	list-style: none;
}

/* ---- desktop: sticky start sidebar (item 3) ---- */

@media (min-width: 64em) {
	/*
	 * Two columns, ONE row. Previously the sidebar spanned two rows, so a tall
	 * filter list stretched the results row and left dead space under a short
	 * grid. Each column now sizes itself and starts at the top.
	 */
	.stories-layout {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
	}

	.stories-layout__main {
		flex: 1 1 auto;
		min-inline-size: 0;
	}

	/*
	 * The sidebar flows at its natural height: no viewport cap and no inner
	 * scrollbar. `position: sticky` only engages while the column is shorter
	 * than the viewport, so a long filter list simply scrolls with the page.
	 */
	.filters {
		flex: 0 0 17rem;
		inline-size: 17rem;
		margin-inline-end: var(--chalomot-space-xl);
		align-self: flex-start;
		position: sticky;
		inset-block-start: var(--header-offset);
		inset-inline-start: auto;
		max-block-size: none;
		transform: none;
		visibility: visible;
		border-radius: var(--chalomot-radius);
		background-color: var(--color-surface);
		box-shadow: none;
	}

	:dir(rtl) .filters {
		transform: none;
	}

	.filters__head,
	.filters__close,
	.filters-toggle,
	.filters-overlay,
	.filters__apply {
		display: none;
	}

	.filters__scroll {
		overflow: visible;
		padding: var(--chalomot-space-md);
	}

	.filters__foot {
		border-block-start: 0;
		background: none;
		padding: 0 var(--chalomot-space-md) var(--chalomot-space-md);
	}

	.stories-layout__status {
		text-align: start;
	}

	.chalomot-grid--archive {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 80em) {
	.chalomot-grid--archive {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* ==========================================================================
   30. Single pagination region (item 6)
   ========================================================================== */

.chalomot-pagination {
	margin-block-start: var(--space-stack);
}

.chalomot-pagination .pagination {
	margin-block-start: 0;
}

.chalomot-pagination__island {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--chalomot-space-sm);
}

.chalomot-pagination__island button {
	padding: var(--chalomot-space-3xs) var(--chalomot-space-sm);
	border: 0;
	border-radius: var(--chalomot-radius-pill);
	background-color: var(--color-accent-soft);
	color: var(--color-accent-ink);
	font-weight: 500;
}

.chalomot-pagination__island button[disabled] {
	opacity: 0.4;
	cursor: not-allowed;
}


/* ==========================================================================
   31. Refinement pass — weekly panel, header, channel strip
   ========================================================================== */

/* B5. Home.pdf shows the weekly story as a compact centred panel. */
.home__weekly {
	max-inline-size: 62rem;
	margin-inline: auto;
}

@media (min-width: 64em) {
	.home__weekly {
		padding-inline: var(--chalomot-space-xl);
	}
}

/* B7. Menu glyph, traced from the mockup. */
.site-nav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--chalomot-space-2xs);
	border: 0;
	background: none;
	color: var(--color-text);
}

.site-nav-toggle__glyph {
	inline-size: 1.5rem;
	block-size: 1rem;
	display: block;
}

/* C10/C11. A filter option that would return nothing. */
.filters__row.is-empty .filters__label {
	opacity: 0.4;
	cursor: not-allowed;
}

.filters__row.is-empty .filters__label:hover {
	background-color: transparent;
}

.filters__count {
	font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   32. Live-review pass
   ========================================================================== */

/* Item 5. Denser tiles; exactly four per row on mobile. */
.home__category-tiles {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--chalomot-space-2xs);
}

.home__category-tile a {
	padding: var(--chalomot-space-2xs);
	gap: var(--chalomot-space-3xs);
	border-radius: var(--chalomot-radius-sm);
}

.home__category-icon {
	inline-size: 2rem;
	block-size: 2rem;
}

.home__category-name {
	font-size: var(--chalomot-text-sm);
	font-weight: 500;
	line-height: 1.2;
}

.home__category-count {
	display: none;
}

@media (min-width: 40em) {
	.home__category-tiles {
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr));
		gap: var(--chalomot-space-sm);
	}

	.home__category-tile a {
		padding: var(--chalomot-space-sm);
		border-radius: var(--chalomot-radius);
	}

	.home__category-icon {
		inline-size: 2.75rem;
		block-size: 2.75rem;
	}

	.home__category-name {
		font-size: var(--chalomot-text-base);
	}

	.home__category-count {
		display: block;
	}
}

/* Item 6. Channel band, one per page, directly above the footer. */
.channel-cta {
	background-color: var(--color-panel-pink);
	padding-block: var(--space-section);
	text-align: center;
}

.channel-cta__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--chalomot-space-2xs);
}

.channel-cta__icon {
	display: inline-flex;
	inline-size: 3rem;
	color: var(--color-youtube);
}

.channel-cta__icon svg {
	inline-size: 100%;
	block-size: auto;
}

.channel-cta__title {
	font-size: var(--chalomot-text-2xl);
	max-inline-size: 30ch;
	margin: 0;
}

.channel-cta__name {
	font-weight: 700;
}

.channel-cta__stats {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--chalomot-space-3xs);
	color: var(--color-text-muted);
	font-size: var(--chalomot-text-sm);
}

.channel-cta__action {
	margin-block-start: var(--chalomot-space-2xs);
}

/* Item 10. Generic page prose container. */
.page .chalomot-prose,
.page__lead {
	max-inline-size: 65ch;
	margin-inline: auto;
}

/* Item 11. Testimonial card. */
.testimonial {
	block-size: 100%;
	margin: 0;
	padding: var(--chalomot-space-md);
	border-radius: var(--chalomot-radius);
	background-color: var(--color-panel-cream);
}

.testimonial__quote {
	margin: 0;
	font-size: var(--chalomot-text-lg);
}

.testimonial__quote::before {
	content: "„";
	color: var(--color-accent);
	font-size: 1.4em;
	line-height: 0;
	margin-inline-end: 0.1em;
}

.testimonial__by {
	margin-block-start: var(--chalomot-space-2xs);
	font-size: var(--chalomot-text-sm);
	color: var(--color-text-muted);
}

.testimonial__author {
	font-weight: 700;
	color: var(--color-text);
}

.testimonial__role::before {
	content: " · ";
}


/* ==========================================================================
   33. Fullscreen mobile menu (item 2)
   ========================================================================== */

/*
 * Mobile: hidden until the fullscreen panel opens.
 * Desktop: the centred zone of the three-zone header — restored below.
 */
.site-nav {
	display: none;
}

.site-nav ul {
	display: flex;
	flex-direction: column;
	gap: var(--chalomot-space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-nav a {
	display: block;
	text-decoration: none;
}

.site-nav a:hover,
.site-nav .current-menu-item > a {
	color: var(--color-accent-ink);
}

.site-nav__socials {
	display: none;
}

.site-nav-toggle__close {
	display: none;
}

.site-nav-toggle.is-open .site-nav-toggle__open {
	display: none;
}

.site-nav-toggle.is-open .site-nav-toggle__close {
	display: block;
	inline-size: 1.5rem;
	block-size: 1.5rem;
}

html.has-menu-open,
html.has-menu-open body {
	overflow: hidden;
}

@media (max-width: 47.999em) {
	/* The panel covers the viewport and sits under the header controls. */
	.site-nav.is-open {
		position: fixed;
		inset: 0;
		z-index: 80;
		display: flex;
		flex-direction: column;
		align-items: center;
		/*
		 * 3. The nav block sits near the middle, biased slightly upward by the
		 * heavier block-end padding. `safe` keeps the top reachable if the
		 * content ever outgrows a short viewport. The socials used to carry
		 * `margin-block-start: auto`, which ate the free space and pinned the
		 * menu to the top — that is what made it hug.
		 */
		justify-content: center;
		justify-content: safe center;
		gap: var(--chalomot-space-2xl);
		padding-inline: var(--chalomot-gutter);
		padding-block: var(--chalomot-space-2xl) calc( var(--chalomot-space-2xl) * 2 );
		background-color: var(--color-panel-cream);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.site-nav.is-open ul {
		align-items: center;
		gap: var(--chalomot-space-md);
	}

	.site-nav.is-open a {
		font-size: var(--chalomot-text-2xl);
		font-weight: 700;
	}

	/*
	 * 2. Socials as the footer's outline button: 1px border, transparent
	 * ground, pill radius, icon at the inline start of the label. Two columns
	 * of three, sized for the popup rather than the footer column.
	 */
	.site-nav.is-open .site-nav__socials {
		display: grid;
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		gap: var(--chalomot-space-2xs);
		inline-size: 100%;
		max-inline-size: 22rem;
	}

	.site-nav.is-open .site-nav__socials a {
		/* Mirrors .site-footer__social. */
		display: inline-flex;
		align-items: center;
		justify-content: flex-start;
		gap: var(--chalomot-space-2xs);
		inline-size: 100%;
		block-size: auto;
		padding: var(--chalomot-space-2xs) var(--chalomot-space-sm);
		border: 1px solid var(--color-cta-ink);
		border-radius: var(--chalomot-radius-pill);
		background-color: transparent;
		font-size: var(--chalomot-text-sm);
		font-weight: 500;
		transition: background-color 0.15s ease, border-color 0.15s ease;
	}

	.site-nav.is-open .site-nav__socials a:hover {
		background-color: var(--color-accent-soft);
		border-color: var(--color-accent-soft);
	}

	.site-nav.is-open .site-nav__socials .social-icon {
		inline-size: 1.15rem;
		block-size: 1.15rem;
		flex: 0 0 auto;
	}

	/* The toggle stays clickable above the panel. */
	.site-nav-toggle {
		position: relative;
		z-index: 81;
	}
}

/* Desktop: inline centred menu, no toggle, no fullscreen behaviour. */
@media (min-width: 48em) {
	.site-header__nav {
		display: flex;
		flex: 1 1 auto;
		justify-content: center;
		align-items: center;
	}

	.site-header__nav ul {
		flex-direction: row;
		align-items: center;
		gap: var(--chalomot-space-md);
	}

	.site-header__nav .site-nav__socials {
		display: none;
	}

	.site-nav-toggle {
		display: none;
	}
}

.social-icon {
	inline-size: 1.5rem;
	block-size: 1.5rem;
	display: block;
}

.social-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	border-radius: var(--chalomot-radius-pill);
	background-color: var(--color-card);
	color: var(--color-text);
}

.social-link:hover {
	background-color: var(--color-accent-soft);
	color: var(--color-accent-ink);
}

/* ==========================================================================
   34. Footer dividers + social rows (items 5, 6)
   ========================================================================== */

/*
 * Full-bleed rules: the line escapes the container to both viewport edges while
 * the content around it stays contained.
 */
.site-footer__rule {
	border: 0;
	border-block-start: 1px solid var(--color-divider-onbrand);
	block-size: 0;
	margin-block: var(--chalomot-space-lg);
	margin-inline: calc(50% - 50vw);
	inline-size: 100vw;
}

.site-footer__brand,
.site-footer__grid {
	border-block-end: 0;
}

.site-footer__bottom {
	border-block-start: 0;
	margin-block-start: 0;
	padding-block-start: 0;
}

.site-footer__social {
	display: inline-flex;
	align-items: center;
	gap: var(--chalomot-space-2xs);
}

.site-footer__social .social-icon {
	inline-size: 1.15rem;
	block-size: 1.15rem;
	flex: 0 0 auto;
}

/* ==========================================================================
   35. Channel section (item 7)
   ========================================================================== */

.channel-cta {
	background: none;
	padding-block: var(--space-section);
}

.channel-cta__inner {
	max-inline-size: var(--chalomot-container-narrow);
	margin-inline: auto;
	padding: var(--space-panel);
	border-radius: var(--chalomot-radius-lg);
	background-color: var(--color-panel-pink);
	text-align: center;
	gap: var(--chalomot-space-sm);
}

.channel-cta__title {
	font-size: var(--chalomot-text-xl);
	order: 3;
}

.channel-cta__icon {
	order: 1;
}

/* The numbers are the point: display scale, accent colour, label beneath. */
.channel-cta__stats {
	order: 2;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--chalomot-space-lg);
	font-size: inherit;
	color: inherit;
}

.channel-cta__stats > span[aria-hidden] {
	display: none;
}

.channel-cta__stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	line-height: 1.05;
}

.channel-cta__value {
	font-size: var(--chalomot-text-3xl);
	font-weight: 700;
	color: var(--color-youtube);
	font-variant-numeric: tabular-nums;
}

.channel-cta__label {
	font-size: var(--chalomot-text-sm);
	color: var(--color-text-muted);
}

.channel-cta__name {
	order: 4;
	font-weight: 700;
	font-size: var(--chalomot-text-sm);
	color: var(--color-text-muted);
}

.channel-cta__action {
	order: 5;
	margin-block-start: var(--chalomot-space-2xs);
}

/* ==========================================================================
   36. Homepage centring (items 8, 10)
   ========================================================================== */

/*
 * The panel padding was swallowing the heading's own margin, so the space has
 * to sit on the heading inside the panel as well as on the section.
 */
.home__weekly {
	margin-block-start: var(--space-section);
	scroll-margin-block-start: var(--header-offset);
	padding-block-start: var(--space-section-heading);
}

.home__weekly .chalomot-section-title {
	margin-block-start: 0;
}

.home .chalomot-container > .chalomot-section-title,
.home__intro-text,
.home__categories-intro,
.home__answer-intro,
.home__latest-more {
	text-align: center;
	margin-inline: auto;
}

.home__intro-text,
.home__categories-intro {
	max-inline-size: 60ch;
}

.home__hero-inner {
	/*text-align: center;*/
	/*justify-items: center;*/
}

.home__hero-subtitle {
	margin-inline: auto;
}

.home__weekly .chalomot-container,
.home__weekly-title,
.home__weekly-meta,
.home__weekly-summary {
	text-align: center;
}

/* Long prose keeps its natural alignment; only the block is centred. */
.home__answer-item {
	max-inline-size: 60ch;
	margin-inline: auto;
}

.home__testimonial-list {
	justify-content: center;
}

@media (min-width: 48em) {
	.home__hero-inner {
		text-align: start;
		justify-items: stretch;
	}

	.home__hero-subtitle {
		margin-inline: 0;
	}
}

/* ==========================================================================
   37. Story page (items 11, 12, 13)
   ========================================================================== */

/* 11. The player fills the content width; square top, generous bottom radius. */
/*
 * True full bleed: the player is the first thing on the page, edge to edge.
 * The player is a full-viewport cream band now; its shape and sizing live in
 * section 41, which supersedes what used to sit here.
 */

/* The wrapper clips the injected iframe to the same shape; the aspect-ratio
   box is on .chalomot-facade, so swapping poster for iframe shifts nothing. */
.story__player .chalomot-facade__iframe,
.story__player .chalomot-facade__poster {
	inline-size: 100%;
	block-size: 100%;
	display: block;
}

/* 12. Audio block, always present when a file exists. */
.story__audio {
	margin-block-start: var(--chalomot-space-md);
	padding: var(--chalomot-space-sm);
	border-radius: var(--chalomot-radius);
	background-color: var(--color-surface);
}

.story__audio-label {
	margin-block-end: var(--chalomot-space-2xs);
	font-size: var(--chalomot-text-sm);
	font-weight: 700;
	color: var(--color-accent-ink);
}

.story__audio-player {
	inline-size: 100%;
	block-size: 2.5rem;
}

/* 13. Identity line above the title. */
.story__identity {
	display: flex;
	flex-wrap: wrap;
	gap: var(--chalomot-space-3xs);
	margin-block-end: var(--chalomot-space-2xs);
}

.story__ages {
	color: var(--color-text-muted);
}

/* 13. Topics at the end, tag-style. */
.story__topics {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--chalomot-space-2xs);
	margin-block-start: var(--chalomot-space-lg);
	padding-block-start: var(--chalomot-space-md);
	border-block-start: 1px solid var(--color-border);
}

.story__topics-label {
	font-size: var(--chalomot-text-sm);
	font-weight: 700;
	margin: 0;
}

.story__topics-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--chalomot-space-3xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.story__topics-more {
	cursor: pointer;
}

.story__topics-toggle {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	opacity: 0;
}

.story__topics-list:has(.story__topics-toggle:checked) .story__topics-extra {
	display: list-item;
}

.story__topics-list:has(.story__topics-toggle:checked) .story__topics-more {
	display: none;
}

/* ==========================================================================
   38. Series experience (items 15, 16, 17)
   ========================================================================== */

.series-hero {
	padding-block: var(--space-section) 0;
}

.series-hero__panel {
	display: grid;
	gap: var(--chalomot-space-md);
	padding: var(--space-panel);
	border-radius: var(--chalomot-radius-lg);
	background-color: var(--color-panel-blue);
}

.series-hero__media img {
	inline-size: 100%;
	block-size: auto;
	border-radius: var(--chalomot-radius-media);
}

.series-hero__eyebrow {
	font-size: var(--chalomot-text-sm);
	font-weight: 700;
	color: var(--color-accent-ink);
}

.series-hero__title {
	font-size: var(--chalomot-text-3xl);
	margin-block: var(--chalomot-space-3xs);
}

.series-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--chalomot-space-3xs);
	color: var(--color-text-muted);
	font-size: var(--chalomot-text-sm);
}

.series-hero__description {
	margin-block-start: var(--chalomot-space-sm);
	max-inline-size: 60ch;
}

.series-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--chalomot-space-2xs);
	margin-block-start: var(--chalomot-space-md);
}

.chalomot-button--ghost {
	background-color: transparent;
	box-shadow: inset 0 0 0 2px var(--color-cta);
}

@media (min-width: 48em) {
	.series-hero__panel {
		grid-template-columns: 22rem minmax(0, 1fr);
		align-items: center;
		gap: var(--chalomot-space-xl);
	}
}

/* Episode rows */
.episode-list {
	display: grid;
	gap: var(--chalomot-space-2xs);
	margin: 0 0 var(--space-section);
	padding: 0;
	list-style: none;
	counter-reset: episode;
}

.episode-row__inner {
	display: flex;
	align-items: center;
	gap: var(--chalomot-space-sm);
	padding: var(--chalomot-space-2xs);
	border-radius: var(--chalomot-radius);
	background-color: var(--color-surface);
	text-decoration: none;
	color: inherit;
	transition: background-color 0.15s ease;
}

a.episode-row__inner:hover {
	background-color: var(--color-accent-soft);
}

.episode-row.is-current .episode-row__inner {
	background-color: var(--color-accent-soft);
}

.episode-row__number {
	flex: 0 0 auto;
	inline-size: 2.25rem;
	text-align: center;
	font-size: var(--chalomot-text-xl);
	font-weight: 700;
	color: var(--color-accent-ink);
	font-variant-numeric: tabular-nums;
}

.episode-row__media {
	flex: 0 0 auto;
	inline-size: 5.5rem;
	aspect-ratio: var(--chalomot-card-ratio);
	border-radius: var(--chalomot-radius-sm);
	overflow: hidden;
	background-color: var(--color-night);
}

.episode-row__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.episode-row__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-inline-size: 0;
}

.episode-row__title {
	font-weight: 700;
}

.episode-row__meta {
	display: flex;
	gap: var(--chalomot-space-2xs);
	font-size: var(--chalomot-text-sm);
	color: var(--color-text-muted);
}

.episode-row__here {
	color: var(--color-accent-ink);
	font-weight: 700;
}

.episode-row__chevron {
	flex: 0 0 auto;
	inline-size: 0.75rem;
	color: var(--color-text-muted);
}

.episode-row__chevron svg {
	inline-size: 100%;
	block-size: auto;
	display: block;
}

:dir(ltr) .episode-row__chevron {
	transform: scaleX(-1);
}

.episode-row--compact .episode-row__media {
	inline-size: 4rem;
}

.episode-row--compact .episode-row__number {
	font-size: var(--chalomot-text-lg);
}

/* 16. Next-episode hook */
.next-episode {
	margin-block: var(--chalomot-space-md);
	padding: var(--chalomot-space-sm);
	border-radius: var(--chalomot-radius);
	background-color: var(--color-panel-blue);
}

.next-episode__label {
	font-size: var(--chalomot-text-sm);
	font-weight: 700;
	color: var(--color-accent-ink);
	margin-block-end: var(--chalomot-space-2xs);
}

.next-episode__card {
	display: flex;
	align-items: center;
	gap: var(--chalomot-space-sm);
	padding: var(--chalomot-space-2xs);
	border-radius: var(--chalomot-radius-sm);
	background-color: var(--color-card);
	text-decoration: none;
	color: inherit;
}

.next-episode__card:hover {
	background-color: var(--color-accent-soft);
}

.next-episode__media {
	flex: 0 0 auto;
	inline-size: 6rem;
	aspect-ratio: var(--chalomot-card-ratio);
	border-radius: var(--chalomot-radius-sm);
	overflow: hidden;
	background-color: var(--color-night);
}

.next-episode__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.next-episode__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}

.next-episode__number {
	font-size: var(--chalomot-text-sm);
	color: var(--color-accent-ink);
	font-weight: 700;
}

.next-episode__title {
	font-weight: 700;
}

.next-episode__chevron {
	flex: 0 0 auto;
	inline-size: 0.75rem;
	color: var(--color-text-muted);
}

.next-episode__chevron svg {
	inline-size: 100%;
	block-size: auto;
	display: block;
}

:dir(ltr) .next-episode__chevron {
	transform: scaleX(-1);
}

/* 17. Series index cards */
.series-grid {
	display: grid;
	gap: var(--chalomot-space-md);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
	margin: var(--chalomot-space-md) 0 0;
	padding: 0;
	list-style: none;
}

.series-grid__item a {
	display: flex;
	flex-direction: column;
	block-size: 100%;
	border-radius: var(--chalomot-radius-media);
	background-color: var(--color-surface);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform 0.15s ease;
}

.series-grid__item a:hover {
	transform: translateY(-2px);
}

.series-grid__media {
	aspect-ratio: var(--chalomot-card-ratio);
	background-color: var(--color-accent-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.series-grid__media img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.series-grid__icon {
	inline-size: 3rem;
	block-size: 3rem;
	color: var(--color-accent);
}

.series-grid__icon svg {
	inline-size: 100%;
	block-size: 100%;
}

.series-grid__body {
	display: flex;
	flex-direction: column;
	gap: var(--chalomot-space-3xs);
	padding: var(--chalomot-space-sm);
}

.series-grid__name {
	font-size: var(--chalomot-text-lg);
	font-weight: 700;
}

.series-grid__count {
	font-size: var(--chalomot-text-sm);
	color: var(--color-accent-ink);
}

.series-grid__desc {
	font-size: var(--chalomot-text-sm);
	color: var(--color-text-muted);
}

/* ==========================================================================
   39. Pagination (item 18)
   ========================================================================== */

.chalomot-pagination .page-numbers {
	font: inherit;
	cursor: pointer;
}

/* ==========================================================================
   40. Refinement round — channel stats, footer socials, player, series
   ========================================================================== */

/* 5. Stats get room to breathe; the icon now lives in the button. */
.channel-cta__stats {
	gap: var(--chalomot-space-2xl);
	margin-block: 1em;
}

.chalomot-button--icon {
	display: inline-flex;
	align-items: center;
	gap: var(--chalomot-space-2xs);
}

.chalomot-button__icon {
	display: inline-flex;
	inline-size: 1.15rem;
	flex: 0 0 auto;
}

.chalomot-button__icon svg {
	inline-size: 100%;
	block-size: auto;
	display: block;
}

/* 6. Footer socials as outline buttons, two columns of three. */
.site-footer__col .site-footer__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--chalomot-space-2xs);
}

.site-footer__col:not(:has(.site-footer__social)) .site-footer__list {
	grid-template-columns: 1fr;
}

.site-footer__social {
	display: inline-flex;
	align-items: center;
	gap: var(--chalomot-space-2xs);
	padding: var(--chalomot-space-3xs) var(--chalomot-space-sm);
	border: 1px solid var(--color-border);
	border: 1px solid var(--color-cta-ink);
	border-radius: var(--chalomot-radius-pill);
	background-color: transparent;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.site-footer__social:hover {
	background-color: var(--color-accent-soft);
	border-color: var(--color-accent-soft);
	text-decoration: none;
}

/* ---- Plyr, themed with our tokens ---- */

.plyr {
	--plyr-color-main: var(--color-accent);
	--plyr-font-family: var(--chalomot-font);
	--plyr-font-size-base: 14px;
	--plyr-font-size-small: 13px;
	--plyr-control-radius: var(--chalomot-radius-sm);
	--plyr-range-track-height: 6px;
	--plyr-audio-controls-background: var(--color-card);
	--plyr-audio-control-color: var(--color-text);
	--plyr-audio-control-color-hover: var(--color-text-on-cta);
	--plyr-menu-background: var(--color-card);
	--plyr-menu-color: var(--color-text);
	--plyr-badge-background: var(--color-accent);
	--plyr-badge-text-color: var(--color-text);
	border-radius: var(--chalomot-radius-sm);
}

.plyr--audio .plyr__controls {
	border-radius: var(--chalomot-radius-sm);
}

.plyr--video {
	border-radius: var(--chalomot-radius-media);
	overflow: hidden;
}

.story__audio .plyr {
	--plyr-audio-controls-background: transparent;
}

/* ---- 7-10. Playable episode rows ---- */

.episode-row--playable .episode-row__inner {
	inline-size: 100%;
	border: 0;
	font: inherit;
	text-align: start;
	cursor: pointer;
}

.episode-row__media {
	position: relative;
}

.episode-row__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-card);
	background-color: var(--color-overlay);
	opacity: 0;
	transition: opacity 0.15s ease;
}

.episode-row__play svg {
	inline-size: 1.5rem;
	block-size: 1.5rem;
}

:dir(rtl) .episode-row__play svg {
	transform: scaleX(-1);
}

.episode-row--playable:hover .episode-row__play,
.episode-row.is-open .episode-row__play,
.episode-row.is-playing .episode-row__play {
	opacity: 1;
}

.episode-row.is-open .episode-row__inner {
	background-color: var(--color-accent-soft);
	border-end-start-radius: 0;
	border-end-end-radius: 0;
}

.episode-row.is-playing .episode-row__number {
	color: var(--color-youtube);
}

.episode-row__status {
	color: var(--color-accent-ink);
	font-weight: 700;
}

.episode-row__panel {
	padding: var(--chalomot-space-sm);
	border-end-start-radius: var(--chalomot-radius);
	border-end-end-radius: var(--chalomot-radius);
	background-color: var(--color-accent-soft);
}

.episode-row__media-mount .plyr--video {
	aspect-ratio: var(--chalomot-card-ratio);
}

.episode-row__link {
	margin-block-start: var(--chalomot-space-2xs);
	font-size: var(--chalomot-text-sm);
	text-align: center;
}

.episode-row.is-open .episode-row__chevron {
	transform: rotate(-90deg);
}

:dir(ltr) .episode-row.is-open .episode-row__chevron {
	transform: rotate(90deg) scaleX(-1);
}

/* ---- 12. The calm series note on a story ---- */

.series-note {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--chalomot-space-sm);
	margin-block-start: var(--space-section);
	padding: var(--chalomot-space-sm) var(--chalomot-space-md);
	border-radius: var(--chalomot-radius);
	background-color: var(--color-surface);
}

.series-note__text {
	margin: 0;
	font-size: var(--chalomot-text-sm);
}

.series-note__action {
	margin: 0;
}

/* ==========================================================================
   41. Story player, series rows, CTA tones
   ========================================================================== */

/*
 * The player sits in the content container at its natural width. The aspect
 * box lives on .chalomot-facade (16 / 9), and both states — poster and the
 * injected Plyr/iframe — fill it completely, so the box never changes size
 * between them and the swap costs no layout shift.
 */
.story__player {
	margin-block: var(--space-stack);
	border-radius: var(--chalomot-radius-media);
	overflow: hidden;
}

/* The wrapper owns the shape; the facade fills it square so both clip alike. */
.story__player .chalomot-facade {
	border-radius: 0;
	inline-size: 100%;
}

/*
 * Pin the injected player to the same 16:9 box the poster occupied, rather than
 * relying on Plyr's own ratio happening to match — that is what makes the swap
 * cost exactly zero layout shift.
 */
.story__player .plyr--video {
	border-radius: 0;
	inline-size: 100%;
	aspect-ratio: 16 / 9;
}

/* 4. Chevron needs room from the row edge. */
.episode-row__inner {
	padding-inline-end: var(--chalomot-space-sm);
}

.episode-row__chevron {
	margin-inline-start: var(--chalomot-space-2xs);
}

/* 9. The subscribe block moves to the green family. */
.chalomot-cta {
	background-color: var(--color-accent-soft);
	max-inline-size: var(--chalomot-container-narrow);
	margin-inline: auto;
	padding: var(--space-panel);
	border-radius: var(--chalomot-radius-lg);
}

.chalomot-cta__title {
	color: var(--color-text);
}

.chalomot-cta__text {
	color: var(--color-accent-ink);
}

.chalomot-button--whatsapp {
	background-color: var(--color-accent);
	color: var(--color-text);
}

/* 10. The YouTube glyph reads at label size. */
.chalomot-button__icon {
	inline-size: 1.35rem;
}

/* ==========================================================================
   42. Mobile spacing pass + CTA panels above the footer (items 7 + 8)
   ========================================================================== */

/*
 * Item 7. Both panels are centred blocks that keep a gutter at every width,
 * so the rounded corners never touch the screen edge on a phone.
 */
.chalomot-cta,
.channel-cta__inner {
	max-inline-size: min( var(--chalomot-container-narrow), calc( 100% - 2 * var(--chalomot-gutter) ) );
	margin-inline: auto;
}

/* The CTA is now a page-level band of its own, directly above the channel. */
.chalomot-cta {
	/*margin-block: var(--space-section) 0;*/
}

/* …and the channel band follows it immediately: one gap, not two. */
.channel-cta {
	padding-block: var(--space-section) var(--space-section);
}

.chalomot-cta + .channel-cta {
	padding-block-start: var(--space-stack);
}

/*
 * Item 8. Section padding and the heading's own top margin were stacking, so
 * every section opened with ~80px of dead air on a phone. The heading keeps
 * its margin only when it follows content inside the same section.
 */
.chalomot-section > .chalomot-section-title:first-child,
.chalomot-section > .chalomot-container > .chalomot-section-title:first-child {
	margin-block-start: 0;
}

/*
 * One exception: the weekly story is the only section that is a tinted, rounded
 * panel rather than a plain band, so its heading needs interior space off the
 * panel's top edge that a plain section gets from its own padding. Padding, not
 * margin, so it sits inside the tint and cannot collapse; 1em so it tracks the
 * title's own size as that scales across the breakpoints.
 */
.home__weekly .chalomot-section-title {
	padding-block-start: 1em;
}

/* ==========================================================================
   43. Mobile scroll-snap carousels (.chalomot-scroller)
   ========================================================================== */

/*
 * CSS-only peek carousel, mobile only — no slider script, so nothing to boot
 * and no layout shift on load. Applied to the homepage testimonials, the
 * homepage "latest stories" strip and the related-stories strip on a story.
 * The archive/taxonomy grid deliberately stays a vertical grid: it is a
 * filtering context where results must be scannable, not swiped.
 *
 * Every offset is a logical property, so RTL needs no override: `inline-end`
 * resolves to the left, which is the trailing side in Hebrew, and
 * `scroll-snap-align: start` snaps to each card's right edge.
 */
@media (max-width: 63.999em) {
	.chalomot-scroller {
		--scroller-gap: var(--chalomot-space-sm);

		display: flex;
		flex-wrap: nowrap;
		align-items: stretch;
		/*
		 * The testimonial list is centred when it is a grid; centring a flex
		 * scroller would push the first card into unreachable leading overflow,
		 * so the scroller pins its content to the start.
		 */
		justify-content: flex-start;
		gap: var(--scroller-gap);
		margin-block: 0;
		padding-block: 0;
		list-style: none;

		overflow-x: auto;
		overflow-y: hidden;
		overscroll-behavior-x: contain;
		-webkit-overflow-scrolling: touch;

		scroll-snap-type: x mandatory;
		/*
		 * The scroller's content box already begins at the container's content
		 * edge, so a snapped card lands flush with the page text above it.
		 */
		scroll-padding-inline-start: 0;

		/*
		 * Bleed the trailing side out to the screen edge so a partial card runs
		 * under it, while the first card stays on the content margin. The
		 * negative margin and the padding cancel, so `100%` below still measures
		 * the container's content width.
		 */
		margin-inline-end: calc( -1 * var(--chalomot-gutter) );
		padding-inline-end: var(--chalomot-gutter);

		/* Scrollbar hidden visually; touch and trackpad scrolling are untouched. */
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.chalomot-scroller::-webkit-scrollbar {
		display: none;
	}

	/*
	 * Children are flex items that never shrink, so the peek ratio holds. The
	 * inner flex makes the card fill its item in both axes, which is what keeps
	 * every card in the row the same height.
	 */
	.chalomot-scroller > li {
		flex: 0 0 auto;
		scroll-snap-align: start;
		display: flex;
	}

	/*
	 * The last card's `start` position sits past the maximum scroll offset, so
	 * under `mandatory` the browser would pull the user back off the end of the
	 * list. Aligning the final card to the end gives that extreme a reachable
	 * snap position, which is what lets us keep mandatory's crisp feel.
	 */
	.chalomot-scroller > li:last-child {
		scroll-snap-align: end;
	}

	.chalomot-scroller > li > * {
		inline-size: 100%;
	}

	/* Peek: 2.35 story cards, so a third is always part-visible. */
	.chalomot-scroller--stories > li {
		inline-size: calc( ( 100% - 1.35 * var(--scroller-gap) ) / 1.35 );
	}

	/* Peek: 1.45 testimonials — they carry more text, so they need the width. */
	.chalomot-scroller--testimonials > li {
		inline-size: calc( ( 100% - 0.45 * var(--scroller-gap) ) / 1.35 );
	}


    section#chalomot-weekly{
        margin: 2em 1em;
    }
}

@media (min-width: 48em) {
    .home__hero-inner {
        align-items: flex-end;
    }

    .home__hero-text{
        margin-bottom: 5em;
    }

    .story__player{
        margin: 0 -10em;
    }
}

.site-footer__brand{
    margin: 0;
    padding: 0;
}

section.home__hero{
    padding-bottom: 0;
}

.home__intro{
    padding-bottom: 0;
}

.home__categories{
    padding-top: var(--space-section) !important;
}

section.home__testimonials.chalomot-section {
    padding: 0;
}
/* ==========================================================================
   44. Header call to action — shared icon + label pattern
   ========================================================================== */

/*
 * 1. The header button now carries the same glyph as the channel section's
 * button. The icon is sized in `em` so it tracks the button's own text rather
 * than a fixed rem, which is what keeps it inside the shorter header row.
 */
.site-header__cta .chalomot-button__icon {
	inline-size: 1.1em;
}

/*
 * The header row is tight on a phone once the glyph is in, so the button
 * trades some inline padding rather than letting the brand collapse. It never
 * wraps: `.site-header__cta` keeps `white-space: nowrap`.
 */
@media (max-width: 47.999em) {
	.site-header__cta {
		padding-inline: var(--chalomot-space-md);
	}

    .channel-cta__stats{
        gap: 2.2rem;
    }
}