/* ============================================================
   Elyon — Homepage stylesheet
   Editorial academy: oversized display serif, structured grids,
   clean rectangular photo frames with corner accents,
   maroon · forest · gold on warm ivory.
   ============================================================ */

.elyon-front {
	--c-text-strong: var(--c-text);
}

/* Italic-display emphasis — replaces the previous hand-drawn underline */
.elyon-front em {
	font-family: var(--ff-display);
	font-style: italic;
	font-weight: 500;
	font-variation-settings: "opsz" 144;
	color: var(--c-primary);
	font-synthesis: none;
}

/* Hide the legacy floating doodles & blob shapes — clean academic look. */
.elyon-front .elyon-h-hero__doodle,
.elyon-front .elyon-h-hero__deco,
.elyon-front .elyon-h-hero__blob,
.elyon-front .elyon-h-hero__blob--accent,
.elyon-front .elyon-h-principal__doodle,
.elyon-front .elyon-h-principal__blob,
.elyon-front .elyon-h-program__doodle,
.elyon-front .elyon-h-program__blob,
.elyon-front .elyon-h-blog__teaser-doodle,
.elyon-front .elyon-doodle { display: none !important; }

/* Front-page eyebrow — refined typographic mark, no decorative bullet */
.elyon-front__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--s-3);
	margin: 0 0 var(--s-4);
	font-family: var(--ff-sans);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--c-accent-deep);
}
.elyon-front__eyebrow::before {
	content: "";
	width: 28px;
	height: 1px;
	background: currentColor;
	opacity: 0.6;
}

/* Inline arrow link — used inside cards */
.elyon-h-arrow {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	font-family: var(--ff-sans);
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-primary-text);
	padding: var(--s-2) 0;
	border-bottom: 1.5px solid transparent;
	transition: color var(--t), border-color var(--t);
}
.elyon-h-arrow:hover, .elyon-h-arrow:focus-visible {
	color: var(--c-primary-hover);
	border-color: var(--c-accent);
	text-decoration: none;
}
.elyon-h-arrow .elyon-icon { width: 14px; height: 14px; transition: transform var(--t); }
.elyon-h-arrow:hover .elyon-icon, .elyon-h-arrow:focus-visible .elyon-icon { transform: translateX(4px); }

/* ============================================================
   1. HERO  —  full-width banner slider with text + CTA over photo
   ============================================================ */
.elyon-h-hero {
	position: relative;
	background: var(--c-dark-bg);
	color: #fff;
	overflow: hidden;
	/* Floor 480 covers 240–360px short-landscape phones; cap 820 keeps
	   ultra-tall desktops bounded; 78vh handles everything in between. */
	min-height: clamp(480px, 78vh, 820px);
	padding: 0;
	isolation: isolate;
}

.elyon-h-hero__slider {
	position: absolute;
	inset: 0;
	z-index: 1;
}
.elyon-h-hero__slides {
	position: absolute;
	inset: 0;
}
.elyon-h-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 900ms cubic-bezier(.4, 0, .2, 1), visibility 0s linear 900ms;
	pointer-events: none;
}
.elyon-h-hero__slide.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 900ms cubic-bezier(.4, 0, .2, 1), visibility 0s;
	pointer-events: auto;
}

/* Background photo */
.elyon-h-hero__slide-media {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: 1;
	isolation: isolate;
}
.elyon-h-hero__slide-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transform: scale(1.02);
	transition: transform 1200ms cubic-bezier(.4, 0, .2, 1);
}
/* Photos render clean — no brand tint, so real photography shows true colors.
   Brand cohesion is carried by the dark overlay below + gold accents on top. */
.elyon-h-hero__slide.is-active .elyon-h-hero__slide-media img {
	animation: elyon-hero-kenburns 9s ease-out forwards;
}
@keyframes elyon-hero-kenburns {
	from { transform: scale(1.02); }
	to   { transform: scale(1.10); }
}

/* Adaptive overlay strategy
   ---------------------------------------------------------------
   The hero text column sits on the LEFT and runs almost the full
   height of the hero (eyebrow at the top, CTAs near the bottom).
   So we need protection that covers the entire LEFT BAND, not just
   the bottom corner. Three layers:

   1. Left-band mask  — strong on far left, fades right. Protects
                        the eyebrow → headline → subhead → CTAs.
   2. Bottom floor    — full-width darkening for the slider chrome
                        (counter, dots, arrows).
   3. Top scrim       — gentle protection for any upper UI overlap.

   On the right half of the photo, all three layers are weak or
   zero, so real photography shows through. */
.elyon-h-hero__slide-overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	background:
		/* Left-band mask — covers the whole text column at 80–95% darkening,
		   then fades cleanly to 0 by 95% horizontal so the right 40% of every
		   photo remains fully visible. */
		linear-gradient(95deg,
			rgba(8, 5, 3, 0.95) 0%,
			rgba(8, 5, 3, 0.86) 18%,
			rgba(8, 5, 3, 0.72) 36%,
			rgba(8, 5, 3, 0.46) 56%,
			rgba(8, 5, 3, 0.18) 76%,
			rgba(8, 5, 3, 0)    95%),
		/* Bottom floor — covers the full width for slider chrome. */
		linear-gradient(to top,
			rgba(8, 5, 3, 0.62) 0%,
			rgba(8, 5, 3, 0.32) 14%,
			rgba(8, 5, 3, 0.12) 30%,
			rgba(8, 5, 3, 0)    50%),
		/* Top scrim — for header overlap on bright skies. */
		linear-gradient(180deg,
			rgba(8, 5, 3, 0.36) 0%,
			rgba(8, 5, 3, 0.10) 14%,
			rgba(8, 5, 3, 0)    32%);
}

@media (max-width: 768px) {
	/* On phones the text spans the full width, so we mask top-to-bottom
	   instead of left-to-right. The strong-dark zone covers the bottom
	   ~70% of the hero, where ALL text content (eyebrow, title, subhead,
	   CTAs) lives. The top 30% is photo-only so the photo still shines. */
	.elyon-h-hero__slide-overlay {
		background:
			linear-gradient(to top,
				rgba(8, 5, 3, 0.95) 0%,
				rgba(8, 5, 3, 0.88) 30%,
				rgba(8, 5, 3, 0.75) 50%,
				rgba(8, 5, 3, 0.62) 65%,
				rgba(8, 5, 3, 0.30) 80%,
				rgba(8, 5, 3, 0)    100%),
			linear-gradient(180deg,
				rgba(8, 5, 3, 0.40) 0%,
				rgba(8, 5, 3, 0.12) 14%,
				rgba(8, 5, 3, 0)    28%);
	}
}

/* Text content overlay — bottom-left, editorial.
   All paddings use clamp() so spacing scales smoothly from 240px to wide
   screens without breakpoint jumps. The bottom padding has a high floor
   (≈ 96px) so the slider chrome (counter, dots, arrows) never collides
   with the CTAs at any viewport width. */
.elyon-h-hero__slide-content {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	max-width: var(--w-wide);
	margin-inline: auto;
	padding-top:    clamp(var(--s-6), 6.5vw, var(--s-9));
	padding-right:  var(--pad-edge);
	/* Floor 72px clears the single-row pagination on mobile (16 + 24 + buffer). */
	padding-bottom: clamp(calc(var(--s-7) + 24px), 8vw, calc(var(--s-9) + var(--s-5)));
	padding-left:   var(--pad-edge);
	color: #fff;
}

/* Stagger reveal — children rise + fade when their slide becomes active */
.elyon-h-hero__slide-content > * {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 700ms cubic-bezier(.2, .7, .2, 1), transform 700ms cubic-bezier(.2, .7, .2, 1);
}
.elyon-h-hero__slide.is-active .elyon-h-hero__slide-content > * {
	opacity: 1;
	transform: translateY(0);
}
.elyon-h-hero__slide.is-active .elyon-h-hero__slide-content > *:nth-child(1) { transition-delay: 200ms; }
.elyon-h-hero__slide.is-active .elyon-h-hero__slide-content > *:nth-child(2) { transition-delay: 320ms; }
.elyon-h-hero__slide.is-active .elyon-h-hero__slide-content > *:nth-child(3) { transition-delay: 440ms; }
.elyon-h-hero__slide.is-active .elyon-h-hero__slide-content > *:nth-child(4) { transition-delay: 560ms; }

/* Eyebrow — flex-wrap allows long eyebrow text to break gracefully at narrow
   widths instead of overflowing. Font-size, letter-spacing, gap, rule-width
   and margin all scale fluidly. */
.elyon-h-hero__eyebrow {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(var(--s-2), 0.6vw, var(--s-3));
	margin: 0 0 clamp(var(--s-3), 1.2vw, var(--s-5));
	padding: 0;
	font-family: var(--ff-sans);
	font-size: clamp(0.75rem, 0.95vw, 0.875rem);
	font-weight: 700;
	letter-spacing: clamp(0.16em, 0.3vw, 0.28em);
	text-transform: uppercase;
	color: var(--c-accent-bright);
	/* Two-layer shadow: tight + ambient. Halo of dark guarantees contrast on any photo. */
	text-shadow:
		0 1px 2px  rgba(0, 0, 0, 0.55),
		0 2px 14px rgba(0, 0, 0, 0.55);
}
.elyon-h-hero__eyebrow > span:last-child {
	display: inline-block;
}
.elyon-h-hero__eyebrow::before {
	content: "";
	display: inline-block;
	width: clamp(20px, 2.4vw, 36px);
	height: 1px;
	background: currentColor;
	opacity: 0.7;
}
.elyon-h-hero__eyebrow-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--c-accent-bright);
	box-shadow: 0 0 0 3px rgba(224, 174, 77, 0.22);
	flex-shrink: 0;
	display: none;
}

/* Title — oversized Fraunces with italic accent on em.
   Floor 2.25rem (36px) gives mobile readers a confident, professional
   headline; cap 5.5rem (88px) is hit around 1100px. The 8vw curve fills
   the gap smoothly. Line-height 1.1 gives narrow-screen wraps room to breathe. */
.elyon-h-hero__title {
	margin: 0 0 clamp(var(--s-3), 1.2vw, var(--s-5));
	font-family: var(--ff-display);
	font-size: clamp(2.25rem, 7vw, 4.75rem);
	font-weight: var(--fw-medium);
	line-height: var(--lh-display);
	letter-spacing: var(--ls-display);
	color: #fff;
	text-wrap: balance;
	max-width: 22ch;
	/* Two-layer shadow ensures the headline always has a dark halo, even
	   over the brightest photos (open sky, white walls). */
	text-shadow:
		0 1px 2px  rgba(0, 0, 0, 0.45),
		0 4px 28px rgba(0, 0, 0, 0.5);
}
.elyon-h-hero__title em {
	color: var(--c-accent-bright);
	font-weight: 400;
	font-style: italic;
	font-variation-settings: "opsz" 144, "SOFT" 80;
	display: inline-block;
}

/* Subhead — body-size text needs WCAG-AAA 7:1 contrast.
   95% white opacity + dual shadow halo. Floor 1rem (16px) is the
   browser default reading size, so the subhead never feels small on mobile. */
.elyon-h-hero__subtitle {
	margin: 0 0 clamp(var(--s-5), 2.5vw, var(--s-7));
	max-width: 580px;
	font-size: clamp(1rem, 1.6vw, 1.25rem);
	color: rgba(255, 255, 255, 0.95);
	line-height: 1.55;
	text-shadow:
		0 1px 2px  rgba(0, 0, 0, 0.5),
		0 2px 18px rgba(0, 0, 0, 0.55);
}

/* CTAs — fluid sizing means buttons feel right at every viewport. */
.elyon-h-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(var(--s-2), 1vw, var(--s-3));
	margin: 0;
}
.elyon-h-hero__ctas .elyon-btn {
	min-height: clamp(48px, 5vw, 56px);
	padding: 0 clamp(var(--s-4), 3vw, var(--s-7));
	font-size: clamp(0.875rem, 1vw, 0.9375rem);
	letter-spacing: 0.04em;
}
.elyon-h-hero__ctas .elyon-btn--primary {
	background: var(--c-accent-bright);
	color: var(--c-text);
	border-color: var(--c-accent-bright);
	box-shadow: 0 8px 24px -10px rgba(224, 174, 77, 0.5);
}
.elyon-h-hero__ctas .elyon-btn--primary:hover,
.elyon-h-hero__ctas .elyon-btn--primary:focus-visible {
	background: #fff;
	border-color: #fff;
	color: var(--c-text);
	box-shadow: 0 10px 28px -10px rgba(255, 255, 255, 0.45);
}
.elyon-h-hero__ctas .elyon-btn--primary svg {
	transition: transform var(--t);
}
.elyon-h-hero__ctas .elyon-btn--primary:hover svg,
.elyon-h-hero__ctas .elyon-btn--primary:focus-visible svg {
	transform: translateX(3px);
}
.elyon-h-hero__ctas .elyon-btn--ghost {
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	border-color: rgba(255, 255, 255, 0.4);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.elyon-h-hero__ctas .elyon-btn--ghost:hover,
.elyon-h-hero__ctas .elyon-btn--ghost:focus-visible {
	background: #fff;
	color: var(--c-text);
	border-color: #fff;
}

/* Right-aligned slide variant — content + overlay mirror to the right side
   of the hero. Lets a slide showcase a left-side photo subject by moving
   the dark mask to the opposite side. Mobile ignores alignment (text always
   reads left-to-right at full width). */
.elyon-h-hero__slide--align-right .elyon-h-hero__slide-overlay {
	transform: scaleX(-1);
}
.elyon-h-hero__slide--align-right .elyon-h-hero__slide-content {
	text-align: right;
}
.elyon-h-hero__slide--align-right .elyon-h-hero__eyebrow {
	flex-direction: row-reverse;
}
.elyon-h-hero__slide--align-right .elyon-h-hero__title,
.elyon-h-hero__slide--align-right .elyon-h-hero__subtitle {
	margin-left: auto;
	margin-right: 0;
}
.elyon-h-hero__slide--align-right .elyon-h-hero__ctas {
	justify-content: flex-end;
}

/* ----- Hero responsive layout ----------------------------------------
   Sizing is fluid via clamp() above, so we no longer need breakpoints
   for type/padding/height. Only TWO hard breakpoints remain — both for
   genuine layout SHIFTS that clamp can't express:

   1. 720px — mobile layout: overlay flips top-down (no left/right
              asymmetry), CTAs stretch full-width side-by-side, right-
              aligned slides revert to left (reading order matters more
              than visual balance on phones).

   2. 520px — compact mode: CTAs stack vertically (side-by-side gets
              cramped), eyebrow rule hides (text wraps cleanly without
              it), slider arrows + counter hide (pagination dots become
              the lone control, centered).
   --------------------------------------------------------------------- */

@media (max-width: 768px) {
	.elyon-h-hero__title { max-width: 100%; }
	.elyon-h-hero__ctas { width: 100%; }
	.elyon-h-hero__ctas .elyon-btn { flex: 1 1 auto; min-width: 0; }

	.elyon-h-hero__slide--align-right .elyon-h-hero__slide-overlay { transform: none; }
	.elyon-h-hero__slide--align-right .elyon-h-hero__slide-content { text-align: left; }
	.elyon-h-hero__slide--align-right .elyon-h-hero__eyebrow { flex-direction: row; }
	.elyon-h-hero__slide--align-right .elyon-h-hero__title,
	.elyon-h-hero__slide--align-right .elyon-h-hero__subtitle { margin-left: 0; margin-right: 0; }
	.elyon-h-hero__slide--align-right .elyon-h-hero__ctas { justify-content: flex-start; }
}

@media (max-width: 480px) {
	.elyon-h-hero__ctas { flex-direction: column; }
	.elyon-h-hero__ctas .elyon-btn { width: 100%; flex: 0 0 auto; }
	.elyon-h-hero__eyebrow::before { display: none; }
}

/* ============================================================
   STATS BAND  —  trust signals just below the hero.
   "Grid gap as background" trick: gold parent background, cream items,
   1px gap reveals hairline. Predictable column count avoids
   empty-cell artifacts from auto-fit row wrapping.
   ============================================================ */
.elyon-h-stats {
	background: var(--c-cream);
	padding: 0 var(--pad-edge);
	border-bottom: 1px solid var(--c-border);
}
.elyon-h-stats__list {
	max-width: var(--w-wide);
	margin: 0 auto;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: rgba(15, 15, 15, 0.32);
}
.elyon-h-stats__item {
	padding: var(--s-6) var(--s-5);
	background: var(--c-cream);
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	margin: 0;
}
@media (max-width: 1024px) { .elyon-h-stats__list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 380px)  { .elyon-h-stats__list { grid-template-columns: 1fr; } }
@media (max-width: 480px) {
	.elyon-h-stats__item { padding: var(--s-5) var(--s-4); }
	.elyon-h-stats__num  { font-size: clamp(1.5rem, 7vw, 2.5rem); }   /* floor 24px = 18pt — keeps "large text" AAA criterion */
}
.elyon-h-stats__num {
	font-family: var(--ff-display);
	font-size: clamp(1.875rem, 3vw, 2.5rem);
	font-weight: 500;
	font-variation-settings: "opsz" 144;
	color: var(--c-primary);
	line-height: 1;
	letter-spacing: -0.025em;
	font-variant-numeric: tabular-nums;
	margin: 0;
}
.elyon-h-stats__num-unit {
	font-style: italic;
	color: var(--c-accent-deep);
	margin-left: 1px;
}
.elyon-h-stats__label {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--c-muted);
	line-height: 1.45;
}
/* ============================================================
   2. PROGRAMMES  —  numbered editorial cards (I. II. III.)
   ============================================================ */
.elyon-h-programs {
	background: var(--c-bg);
	padding: clamp(var(--s-6), 6vw, var(--s-8)) var(--pad-edge);
	border-block: 1px solid var(--c-rule);
}
.elyon-h-programs__head {
	text-align: center;
	max-width: 720px;
	margin: 0 auto var(--s-8);
}
.elyon-h-programs__title {
	margin: 0 0 var(--s-4);
	font-family: var(--ff-display);
	font-size: var(--fs-3xl);
	font-weight: 500;
	font-variation-settings: "opsz" 144;
	letter-spacing: -0.025em;
	line-height: 1.05;
	color: var(--c-text);
	text-wrap: balance;
}
.elyon-h-programs__lede {
	margin: 0;
	font-size: var(--fs-md);
	color: var(--c-muted);
	max-width: 580px;
	margin-inline: auto;
}

.elyon-h-programs__grid {
	list-style: none;
	max-width: var(--w-wide);
	margin: 0 auto;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: var(--s-6);
	counter-reset: program;
}
.elyon-h-program {
	position: relative;
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
	padding: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	transition: border-color var(--t), box-shadow var(--t);
	counter-increment: program;
}
.elyon-h-program:hover {
	border-color: var(--c-border-strong);
	box-shadow: 0 12px 24px -16px rgba(26, 22, 18, 0.14);
}

/* Programme image at top — branded gradient fallback if img fails to load. */
.elyon-h-program__media {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;          /* classical photo proportions — substantial height on every viewport */
	margin: 0;
	overflow: hidden;
	background: linear-gradient(135deg, var(--c-cream), var(--c-surface) 60%, var(--c-bg));
}
/* Subtle "Elyon" watermark for image-fail / placeholder state */
.elyon-h-program__media::before {
	content: "Elyon";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--ff-display);
	font-style: italic;
	font-size: clamp(1.5rem, 4vw, 2.25rem);
	color: var(--c-primary);
	opacity: 0.18;
	letter-spacing: 0.02em;
	z-index: 0;
	pointer-events: none;
}
.elyon-h-program__photo,
.elyon-h-program__photo-placeholder {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}
.elyon-h-program__photo-placeholder {
	background: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Programme number stamp — top right of photo, glassy white circle. */
.elyon-h-program__media::after {
	content: counter(program);
	position: absolute;
	top: var(--s-4);
	right: var(--s-4);
	z-index: 3;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	background: rgba(255, 255, 255, 0.94);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	color: var(--c-primary-text);   /* AAA on the glassy white circle */
	font-family: var(--ff-sans);
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0;
	border-radius: 50%;
	border: 1px solid var(--c-accent);
	box-shadow: 0 6px 18px -6px rgba(26, 22, 18, 0.32);
}

/* Age pill — bottom left of photo, gold accent for visibility on any image. */
.elyon-h-program__age {
	position: absolute;
	left: var(--s-4);
	bottom: var(--s-4);
	z-index: 3;
	display: inline-flex;
	align-items: center;
	padding: 8px var(--s-4);
	background: rgba(135, 48, 42, 0.95);
	color: #fff;
	font-family: var(--ff-sans);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	border-radius: var(--r-pill);
	border: 1px solid rgba(255, 255, 255, 0.18);
	box-shadow: 0 8px 20px -8px rgba(26, 22, 18, 0.45);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

/* Content block — title, body, CTA stacked vertically. */
.elyon-h-program__content {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: var(--s-3);
	padding: var(--s-6) var(--s-5) var(--s-5);
}

.elyon-h-program__title {
	margin: 0;
	font-family: var(--ff-display);
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	font-weight: 500;
	letter-spacing: -0.015em;
	color: var(--c-text);
	line-height: 1.2;
	text-align: left;
}

.elyon-h-program__body {
	margin: 0;
	color: var(--c-muted);
	font-size: 1rem;             /* 16px — card description floor for comfortable reading */
	line-height: 1.65;
	flex: 1;
	text-align: left;
}

/* CTA — pill button with maroon-on-cream default, fills on hover.
   Reads as a clear "click me" affordance, not a footnote-y link. */
.elyon-h-program__cta {
	align-self: flex-start;
	margin: var(--s-3) 0 0;
	padding: var(--s-3) var(--s-5);
	background: var(--c-cream);
	border: 1.5px solid var(--c-border-strong);
	border-radius: var(--r-pill);
	color: var(--c-primary-text);   /* AAA at 11px bold uppercase */
	font-family: var(--ff-sans);
	font-weight: 700;
	font-size: 0.7rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background var(--t), color var(--t), border-color var(--t), transform var(--t);
}
.elyon-h-program__cta:hover,
.elyon-h-program__cta:focus-visible {
	background: var(--c-primary);
	color: #fff;
	border-color: var(--c-primary);
	text-decoration: none;
}
.elyon-h-program__cta .elyon-icon {
	width: 14px;
	height: 14px;
	transition: transform var(--t);
}
.elyon-h-program__cta:hover .elyon-icon,
.elyon-h-program__cta:focus-visible .elyon-icon { transform: translateX(3px); }

/* ============================================================
   3. PRINCIPAL'S MESSAGE  —  portrait left, editorial right
   ============================================================ */
.elyon-h-principal {
	position: relative;
	background: var(--c-ivory);
	padding: clamp(var(--s-6), 6vw, var(--s-8)) var(--pad-edge);
}
.elyon-h-principal__inner {
	max-width: var(--w-wide);
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-8);
	align-items: start;
}
@media (min-width: 768px) {
	.elyon-h-principal__inner {
		grid-template-columns: 5fr 7fr;
		gap: var(--s-9);
		/* Portrait keeps its natural 4:5 aspect (no narrow stretching) and
		   floats vertically centered in its column — empty space sits
		   equally above and below, reading as intentional editorial spacing
		   rather than misalignment. */
		align-items: center;
	}
}

/* Portrait — clean rectangular frame with offset gold border + seal accent */
.elyon-h-principal__media {
	position: relative;
	aspect-ratio: 4 / 5;
	max-width: 460px;
	margin-inline: auto;
	width: 100%;
}
.elyon-h-principal__media::before {
	content: "";
	position: absolute;
	inset: 0;
	transform: translate(-18px, 18px);
	border: 1.5px solid var(--c-accent);
	border-radius: var(--r-sm);
	z-index: 0;
}
.elyon-h-principal__photo,
.elyon-h-principal__photo-placeholder {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--r-sm);
	box-shadow: var(--shadow-lg);
	background: var(--c-surface);
}
.elyon-h-principal__photo-placeholder {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: var(--s-5);
	color: var(--c-muted);
	font-family: var(--ff-serif);
	font-style: italic;
}

/* Vintage circular seal — overlaps photo bottom-right corner.
   Fluid size so it doesn't dominate the photo on small viewports. */
.elyon-h-principal__seal-wrap {
	position: absolute;
	bottom: clamp(-24px, -2vw, -16px);
	right: clamp(-24px, -2vw, -16px);
	width: clamp(80px, 12vw, 110px);
	height: clamp(80px, 12vw, 110px);
	z-index: 2;
	color: var(--c-accent);
	animation: elyon-rotate-slow 80s linear infinite;
	filter: drop-shadow(0 4px 12px rgba(26, 22, 18, 0.25));
}
@keyframes elyon-rotate-slow { to { transform: rotate(360deg); } }
.elyon-seal { width: 100%; height: 100%; display: block; }
@media (prefers-reduced-motion: reduce) {
	.elyon-h-principal__seal-wrap { animation: none; }
}

/* Content — uses global type sizes from main.css h2 + body. */
.elyon-h-principal__content { padding-top: 0; }
.elyon-h-principal__quote-mark {
	display: block;
	font-family: var(--ff-display);
	font-style: italic;
	font-size: 5rem;
	line-height: 0.4;
	color: var(--c-accent);
	opacity: 0.5;
	margin: 0 0 var(--s-3);
	font-weight: 500;
}
.elyon-h-principal__title {
	/* Inherits h2 size + display family from globals; only colour + balance here. */
	color: var(--c-text);
	text-wrap: balance;
	margin: 0 0 var(--s-4);
}
.elyon-h-principal__greeting {
	margin: 0 0 var(--s-4);
	font-family: var(--ff-display);
	font-style: italic;
	font-weight: 500;
	color: var(--c-secondary);
	/* Greeting reads as a slightly larger body line — no custom override. */
}
.elyon-h-principal__body {
	margin: 0 0 var(--s-5);
	color: var(--c-text-soft);
	/* Inherits global body font-size and line-height. */
}
.elyon-h-principal__body p { margin: 0 0 var(--s-4); }
.elyon-h-principal__body p:last-child { margin: 0; }
.elyon-h-principal__body strong { color: var(--c-text); font-weight: 600; }

.elyon-h-principal__signature {
	margin: 0 0 var(--s-5);
	padding-top: var(--s-4);
	border-top: 1px solid var(--c-rule);
}
.elyon-h-principal__sig-name {
	display: block;
	font-family: var(--ff-display);
	font-style: italic;
	font-weight: 500;
	font-size: 1.25rem;
	color: var(--c-primary);
	margin-bottom: var(--s-1);
	letter-spacing: -0.005em;
}
.elyon-h-principal__sig-role {
	display: block;
	color: var(--c-muted);
	font-size: 0.875rem;
	letter-spacing: 0.04em;
}

/* Stats — three vertical columns separated by hairlines (matches hero) */
.elyon-h-principal__stats {
	list-style: none;
	margin: 0 0 var(--s-4);
	padding: var(--s-3) 0;
	border-block: 1px solid var(--c-rule);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 0;
}
.elyon-h-principal__stat {
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
	padding: 0 var(--s-4);
	border-left: 1px solid var(--c-rule);
}
.elyon-h-principal__stat:first-child { padding-left: 0; border-left: 0; }
.elyon-h-principal__stat-num {
	font-family: var(--ff-display);
	font-weight: 500;
	font-variation-settings: "opsz" 144;
	font-size: 1.625rem;
	color: var(--c-primary);
	line-height: 1;
	letter-spacing: -0.02em;
}
.elyon-h-principal__stat-label {
	color: var(--c-muted);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

/* ============================================================
   4. PARENT VOICES  —  three editorial testimonial cards
   ============================================================ */
.elyon-h-voices {
	background: var(--c-bg);
	padding: clamp(var(--s-6), 6vw, var(--s-8)) var(--pad-edge);
	position: relative;
	border-bottom: 1px solid var(--c-rule);
}
.elyon-h-voices__head {
	text-align: center;
	max-width: 720px;
	margin: 0 auto var(--s-8);
}
.elyon-h-voices__title {
	margin: 0;
	font-family: var(--ff-display);
	font-size: var(--fs-3xl);
	font-weight: 500;
	font-variation-settings: "opsz" 144;
	letter-spacing: -0.025em;
	line-height: 1.05;
	color: var(--c-text);
	text-wrap: balance;
}
/* Multi-card grid: 3 testimonials per row on desktop, 2 on tablet, 1 on phone. */
.elyon-h-voices__grid {
	list-style: none;
	max-width: var(--w-wide);
	margin: 0 auto;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--s-5);
	align-items: stretch;
}
@media (max-width: 1024px) {
	.elyon-h-voices__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.elyon-h-voices__grid { grid-template-columns: 1fr; }
}

/* Card — cream background, gold accent stripe at top, italic quote. */
.elyon-h-voice {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
	padding: var(--s-7) var(--s-6) var(--s-6);
	background: var(--c-ivory);
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
	overflow: hidden;
	transition: transform var(--t), box-shadow var(--t), border-color var(--t);
}
.elyon-h-voice:hover {
	transform: translateY(-4px);
	border-color: var(--c-accent);
	box-shadow: 0 16px 32px -16px rgba(26, 22, 18, 0.16);
}
/* Gold accent stripe at the top of the card. */
.elyon-h-voice::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 64px;
	height: 3px;
	background: var(--c-accent);
}
/* Subtle watermark quote in the corner. */
.elyon-h-voice::after {
	content: "“";
	position: absolute;
	right: var(--s-4);
	bottom: -3rem;
	font-family: var(--ff-display);
	font-style: italic;
	font-size: 12rem;
	line-height: 0.6;
	color: rgba(135, 48, 42, 0.06);
	pointer-events: none;
	z-index: 0;
}

/* Decorative quote glyph at top-left. */
.elyon-h-voice__quote-mark {
	display: block;
	font-family: var(--ff-display);
	font-style: italic;
	font-weight: 500;
	font-size: 3rem;
	line-height: 0.5;
	color: var(--c-accent);
	margin: 0 0 var(--s-2);
	z-index: 1;
}

/* Star rating — gold row. */
.elyon-h-voice__rating {
	margin: 0;
	font-size: 1rem;
	letter-spacing: 5px;
	line-height: 1;
	z-index: 1;
}
.elyon-h-voice__star { color: var(--c-rule); }
.elyon-h-voice__star.is-on { color: var(--c-accent); }

/* The quote — italic display, dark text. */
.elyon-h-voice__quote {
	margin: 0;
	font-family: var(--ff-display);
	font-size: 1.0625rem;
	font-weight: 400;
	color: var(--c-text);
	line-height: 1.55;
	font-style: italic;
	flex: 1;
	letter-spacing: -0.005em;
	z-index: 1;
	position: relative;
}
.elyon-h-voice__quote p { margin: 0; }

.elyon-h-voice__author {
	display: flex;
	align-items: center;
	gap: var(--s-3);
	padding-top: var(--s-4);
	border-top: 1px solid var(--c-rule);
	margin-top: auto;
	z-index: 1;
	position: relative;
}
.elyon-h-voice__avatar {
	display: inline-block;
	width: 44px; height: 44px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
	background: var(--c-surface);
}
.elyon-h-voice__avatar img { width: 100%; height: 100%; object-fit: cover; }
.elyon-h-voice__name {
	margin: 0;
	font-family: var(--ff-display);
	font-size: 1rem;
	font-weight: 500;
	color: var(--c-text);
	letter-spacing: -0.005em;
}
.elyon-h-voice__role {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--c-accent-deep);
	letter-spacing: 0.04em;
	font-weight: 600;
}

/* ============================================================
   5. BLOG / NEWS  —  one large featured + list of 3
   ============================================================ */
.elyon-h-blog {
	background: var(--c-ivory);
	padding: clamp(var(--s-6), 6vw, var(--s-8)) var(--pad-edge);
}
.elyon-h-blog__head {
	text-align: center;
	max-width: 960px;
	margin: 0 auto var(--s-8);
}
.elyon-h-blog__title {
	margin: 0 0 var(--s-4);
	font-family: var(--ff-display);
	font-size: var(--fs-3xl);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-display);
	line-height: var(--lh-display);
	color: var(--c-text);
	text-wrap: nowrap;
}
@media (max-width: 720px) {
	.elyon-h-blog__title { text-wrap: balance; }
}
.elyon-h-blog__lede {
	margin: 0 auto;
	max-width: 580px;
	color: var(--c-muted);
	font-size: var(--fs-md);
}
/* Featured + list grid:
   Desktop: featured on left (1.4fr) + list of 3 stretched to equal column heights.
   Tablet/Phone: stacks vertically, featured on top, list below. */
.elyon-h-blog__grid {
	max-width: var(--w-wide);
	margin: 0 auto var(--s-7);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--s-7);
	align-items: stretch;
}
@media (min-width: 880px) {
	.elyon-h-blog__grid { grid-template-columns: 1fr 1fr; gap: var(--s-7); }
}
/* Solo layout (only 1 post, no list) — featured takes a constrained centered column. */
.elyon-h-blog--solo .elyon-h-blog__grid {
	grid-template-columns: 1fr;
	max-width: 880px;
}

/* ----- Featured post: standard stacked card.
   Image on top (16:10 aspect), content (meta, title, excerpt, CTA) below.
   No overlay — keeps text fully accessible regardless of photo content. ----- */
.elyon-h-blog__featured {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
	overflow: hidden;
	transition: border-color var(--t), box-shadow var(--t);
	min-width: 0;                           /* prevent grid-track blowout on narrow viewports */
}
.elyon-h-blog__featured:hover {
	border-color: var(--c-border-strong);
	box-shadow: 0 12px 24px -16px rgba(26, 22, 18, 0.14);
}

.elyon-h-blog__featured-media {
	position: relative;
	display: block;
	margin: 0;
	aspect-ratio: 3 / 1;
	overflow: hidden;
	background: var(--c-surface);
	border-radius: 0;
}
.elyon-h-blog__featured-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.elyon-h-blog__featured-media--placeholder::before {
	content: "Elyon";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--ff-display);
	font-style: italic;
	font-size: clamp(2rem, 5vw, 3rem);
	color: var(--c-primary);
	opacity: 0.4;
	letter-spacing: 0.02em;
}

/* Content sits cleanly below the image — compact so the whole card
   (image + content + CTA) fits within the right column's height. */
.elyon-h-blog__featured-body {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	padding: var(--s-3) clamp(var(--s-3), 4vw, var(--s-5)) var(--s-4);  /* tighter on narrow phones */
	flex: 1;
	min-width: 0;                           /* let inner content shrink; long words won't push card wider */
}

/* Reset meta to standard light-bg colors. */
.elyon-h-blog__featured .elyon-h-blog__meta { color: var(--c-muted); }
.elyon-h-blog__featured .elyon-h-blog__date { color: var(--c-secondary); }
.elyon-h-blog__featured .elyon-h-blog__meta-sep { color: var(--c-accent); }

.elyon-h-blog__featured-title {
	margin: 0;
	font-family: var(--ff-display);
	font-size: clamp(1.25rem, 2vw, 1.625rem);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--c-text);
	text-wrap: balance;
	overflow-wrap: anywhere;                /* break long words on tiny viewports */
	/* Cap at 2 lines so a long title can't push the card past the column height. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.elyon-h-blog__featured-title a { color: inherit; text-decoration: none; }
.elyon-h-blog__featured-title a:hover,
.elyon-h-blog__featured-title a:focus-visible { color: var(--c-primary); }

.elyon-h-blog__featured-excerpt {
	margin: 0;
	color: var(--c-muted);
	font-size: 1rem;             /* 16px floor for card descriptions */
	line-height: 1.5;
	/* Clamp excerpt to 1 line so the whole card fits the right column height. */
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* CTA: cream pill, fills maroon on hover. */
.elyon-h-blog__featured .elyon-h-blog__cta {
	align-self: flex-start;
	background: var(--c-cream);
	color: var(--c-primary-text);   /* AAA on cream */
	border-color: var(--c-border-strong);
	margin-top: 0;
}
.elyon-h-blog__featured .elyon-h-blog__cta:hover,
.elyon-h-blog__featured .elyon-h-blog__cta:focus-visible {
	background: var(--c-primary);
	border-color: var(--c-primary);
	color: #fff;
}

/* Category pill — bottom-left of the photo. */
.elyon-h-blog__featured-media .elyon-h-blog__category {
	bottom: var(--s-4);
	top: auto;
	left: var(--s-4);
}

/* Right column wrapper: list of posts + "View all posts" button.
   Flex column so the button sits below the list naturally. */
.elyon-h-blog__sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--s-5);
	height: 100%;
	min-width: 0;                           /* prevent grid-track blowout on narrow viewports */
}

/* ----- List of additional posts (right column) — items stay compact at natural
   size; right column extends to match featured height via the grid's stretch
   alignment, so any empty space below the items reads as "room for the next
   story" rather than stretched-out rows. ----- */
.elyon-h-blog__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
}
.elyon-h-blog__item {
	display: grid;
	grid-template-columns: 1fr;     /* stack on narrow phones — thumb on top, body below */
	gap: var(--s-3);
	align-items: start;
	padding: var(--s-4) 0 0;
	border-top: 1px solid var(--c-rule);
	transition: transform var(--t);
}
@media (min-width: 480px) {
	.elyon-h-blog__item {
		grid-template-columns: 120px 1fr;   /* side-by-side on phablets+ */
		gap: var(--s-4);
	}
}
.elyon-h-blog__item:first-child { border-top: 0; padding-top: 0; }
.elyon-h-blog__item:hover { transform: translateX(4px); }

.elyon-h-blog__item-thumb {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--r-sm);
	background: var(--c-surface);
}
.elyon-h-blog__item-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms cubic-bezier(.4, 0, .2, 1);
}
.elyon-h-blog__item:hover .elyon-h-blog__item-thumb img { transform: scale(1.06); }

.elyon-h-blog__item-body {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	justify-content: center;
	min-width: 0;                           /* allow body to shrink inside grid; long titles wrap instead of overflow */
	overflow-wrap: anywhere;
}
.elyon-h-blog__item-category {
	font-family: var(--ff-sans);
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-secondary);
}
.elyon-h-blog__item-title {
	margin: 0;
	font-family: var(--ff-display);
	font-size: 1.0625rem;
	font-weight: 500;
	color: var(--c-text);
	line-height: 1.3;
	letter-spacing: -0.005em;
}
.elyon-h-blog__item-title a { color: inherit; text-decoration: none; }
.elyon-h-blog__item-title a:hover,
.elyon-h-blog__item-title a:focus-visible { color: var(--c-primary); }
.elyon-h-blog__item-meta {
	margin: 0;
	font-family: var(--ff-sans);
	font-size: 0.75rem;
	color: var(--c-muted);
	letter-spacing: 0.04em;
}

/* Category tag — gold pill, bottom-left of the featured image */
.elyon-h-blog__category {
	position: absolute;
	left: var(--s-4);
	bottom: var(--s-4);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	padding: 6px var(--s-3);
	background: rgba(135, 48, 42, 0.95);
	color: #fff;
	font-family: var(--ff-sans);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	border-radius: var(--r-pill);
	border: 1px solid rgba(255, 255, 255, 0.18);
	box-shadow: 0 8px 20px -8px rgba(26, 22, 18, 0.45);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.elyon-h-blog__featured-body {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
}

/* Meta row: date · reading time */
.elyon-h-blog__meta {
	margin: 0;
	font-family: var(--ff-sans);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-muted);
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
}
.elyon-h-blog__meta-sep { color: var(--c-accent); font-weight: 400; }
.elyon-h-blog__date { color: var(--c-secondary); font-weight: 700; }
.elyon-h-blog__readtime { color: var(--c-muted); }

/* Featured title */
.elyon-h-blog__featured-title {
	margin: 0;
	font-family: var(--ff-display);
	font-size: clamp(1.5rem, 2.5vw, 2.125rem);
	font-weight: 500;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--c-text);
	text-wrap: balance;
}
.elyon-h-blog__featured-title a {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0% 1px;
	transition: background-size 300ms ease, color var(--t);
}
.elyon-h-blog__featured-title a:hover,
.elyon-h-blog__featured-title a:focus-visible {
	color: var(--c-primary);
	background-size: 100% 1px;
}

.elyon-h-blog__featured-excerpt {
	margin: 0;
	color: var(--c-muted);
	font-size: var(--fs-md);
	line-height: 1.65;
}

/* Featured CTA — pill button matching programme cards */
.elyon-h-blog__cta {
	align-self: flex-start;
	margin-top: var(--s-2);
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	padding: var(--s-3) var(--s-5);
	background: var(--c-cream);
	border: 1.5px solid var(--c-border-strong);
	border-radius: var(--r-pill);
	color: var(--c-primary-text);   /* AAA on cream pill */
	font-family: var(--ff-sans);
	font-weight: 700;
	font-size: 0.7rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background var(--t), color var(--t), border-color var(--t);
}
.elyon-h-blog__cta:hover,
.elyon-h-blog__cta:focus-visible {
	background: var(--c-primary);
	color: #fff;
	border-color: var(--c-primary);
	text-decoration: none;
}
.elyon-h-blog__cta .elyon-icon {
	width: 14px;
	height: 14px;
	transition: transform var(--t);
}
.elyon-h-blog__cta:hover .elyon-icon,
.elyon-h-blog__cta:focus-visible .elyon-icon { transform: translateX(3px); }

/* ----- Single-post layout — adjusts grid + teaser ----- */
.elyon-h-blog--single .elyon-h-blog__grid {
	grid-template-columns: 1fr;
	max-width: 880px;
}
@media (min-width: 768px) {
	.elyon-h-blog--single .elyon-h-blog__grid { grid-template-columns: 1.4fr 1fr; }
}

/* ----- Teaser scripture card (only when 1 post) ----- */
.elyon-h-blog__teaser {
	position: relative;
	background: linear-gradient(135deg, var(--c-cream), var(--c-surface));
	border: 1px solid var(--c-border);
	border-radius: var(--r-md);
	padding: var(--s-8) var(--s-6);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	min-height: 320px;
	overflow: hidden;
}
.elyon-h-blog__teaser::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 64px;
	height: 3px;
	background: var(--c-accent);
}
.elyon-h-blog__teaser-mark {
	display: block;
	font-family: var(--ff-display);
	font-style: italic;
	font-weight: 500;
	font-size: 5rem;
	line-height: 0.5;
	color: var(--c-accent);
	opacity: 0.6;
	margin: 0 0 var(--s-4);
}
.elyon-h-blog__teaser-quote {
	margin: 0 0 var(--s-3);
	font-family: var(--ff-display);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(1.125rem, 1.6vw, 1.375rem);
	color: var(--c-text);
	max-width: 36ch;
	line-height: 1.5;
	text-wrap: balance;
}
.elyon-h-blog__teaser-source {
	margin: 0 0 var(--s-5);
	font-family: var(--ff-sans);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--c-accent-deep);
}
.elyon-h-blog__teaser-rule {
	display: block;
	width: 32px;
	height: 1px;
	background: var(--c-accent);
	opacity: 0.5;
	margin: 0 0 var(--s-4);
}
.elyon-h-blog__teaser-note {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--c-muted);
	max-width: 36ch;
	line-height: 1.55;
}

/* ----- List of secondary posts (when more than 1) ----- */
.elyon-h-blog__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--s-4);
}
.elyon-h-blog__item {
	display: grid;
	grid-template-columns: 1fr;             /* stack on narrow phones (≤479px) — thumb on top, body below */
	gap: var(--s-3);
	padding: var(--s-4) 0;
	border-top: 1px solid var(--c-rule);
	transition: transform var(--t);
	min-width: 0;                           /* prevent grid blowout on tiny viewports */
}
.elyon-h-blog__item:first-child { border-top: 0; padding-top: 0; }
.elyon-h-blog__item:last-child { padding-bottom: 0; }
.elyon-h-blog__item:hover { transform: translateX(4px); }
@media (min-width: 480px) {
	.elyon-h-blog__item { grid-template-columns: 120px 1fr; gap: var(--s-4); }
}
@media (min-width: 720px) {
	.elyon-h-blog__item { grid-template-columns: 140px 1fr; gap: var(--s-5); }
}

.elyon-h-blog__item-thumb {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--r-sm);
	background: var(--c-surface);
}
.elyon-h-blog__item-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 600ms cubic-bezier(.4, 0, .2, 1);
}
.elyon-h-blog__item:hover .elyon-h-blog__item-thumb img { transform: scale(1.06); }

.elyon-h-blog__item-body {
	display: flex;
	flex-direction: column;
	gap: var(--s-2);
	justify-content: center;
	min-width: 0;                           /* allow body to shrink inside grid; long titles wrap instead of overflow */
	overflow-wrap: anywhere;
}
.elyon-h-blog__item-category {
	font-family: var(--ff-sans);
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--c-secondary);
}
.elyon-h-blog__item-title {
	margin: 0;
	font-family: var(--ff-display);
	font-size: 1.125rem;
	font-weight: 500;
	color: var(--c-text);
	line-height: 1.3;
	letter-spacing: -0.005em;
}
.elyon-h-blog__item-title a { color: inherit; text-decoration: none; }
.elyon-h-blog__item-title a:hover,
.elyon-h-blog__item-title a:focus-visible { color: var(--c-primary); }
.elyon-h-blog__item-meta {
	margin: 0;
	font-family: var(--ff-sans);
	font-size: 0.75rem;
	color: var(--c-muted);
	letter-spacing: 0.04em;
}

/* "View all posts" button — sits below the list, natural width, left-aligned.
   Auto top margin pushes it to the bottom if the column is taller than the list. */
.elyon-h-blog__more {
	display: flex;
	justify-content: flex-start;
	margin-top: auto;
}

/* ============================================================
   6. CLOSING CTA  —  homepage refinement to the shared .elyon-cta
   ============================================================ */
.elyon-front .elyon-cta {
	background: var(--c-dark-bg);
	position: relative;
	overflow: hidden;
}
.elyon-front .elyon-cta::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 80% 20%, rgba(15, 15, 15, 0.16), transparent 45%),
		radial-gradient(circle at 15% 85%, rgba(135, 48, 42, 0.28), transparent 50%);
	pointer-events: none;
	z-index: 0;
}
.elyon-front .elyon-cta__inner { position: relative; z-index: 1; }

/* ============================================================
   HERO REFINEMENTS  (vertical rail · caption tag · scroll cue)
   ============================================================ */
.elyon-h-hero { padding-top: var(--s-9); }

/* Vertical "EST. MMIII · MUTUNGO + NSANGI" mark on the left edge */
.elyon-h-hero__rail {
	position: absolute;
	left: var(--s-5);
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: none;
	pointer-events: none;
}
.elyon-h-hero__rail-text {
	display: inline-block;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-family: var(--ff-sans);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.45em;
	text-transform: uppercase;
	color: var(--c-accent-deep);
	padding: var(--s-3) 0;
	border-top: 1px solid var(--c-accent);
	border-bottom: 1px solid var(--c-accent);
}
@media (min-width: 1024px) {
	.elyon-h-hero__rail { display: block; }
}

/* Floating caption tag on the hero photo (bottom-left) */
.elyon-h-hero__caption {
	position: absolute;
	z-index: 3;
	left: -16px;
	bottom: 28px;
	display: grid;
	grid-template-columns: auto auto;
	align-items: center;
	column-gap: var(--s-3);
	row-gap: 2px;
	padding: var(--s-3) var(--s-4);
	background: #fff;
	border: 1px solid var(--c-border-strong);
	border-radius: var(--r-sm);
	box-shadow: var(--shadow-md);
	max-width: 240px;
}
.elyon-h-hero__caption-mark {
	grid-row: 1 / span 2;
	display: inline-block;
	width: 4px;
	height: 32px;
	background: var(--c-accent);
	border-radius: 2px;
}
.elyon-h-hero__caption-label {
	font-family: var(--ff-sans);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--c-secondary);
	line-height: 1;
}
.elyon-h-hero__caption-text {
	font-family: var(--ff-display);
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: -0.005em;
	color: var(--c-text);
	line-height: 1.3;
}
@media (max-width: 640px) {
	.elyon-h-hero__caption { left: 8px; bottom: 12px; padding: var(--s-2) var(--s-3); max-width: 200px; }
	.elyon-h-hero__caption-text { font-size: 0.8125rem; }
}
/* On very narrow viewports the caption + dots fight for the same space —
   hide caption (it's nice-to-have; dots are functional). */
@media (max-width: 560px) {
	.elyon-h-hero__caption { display: none; }
}

/* Scroll cue — base styles. Display behaviour and positioning are
   handled in the dedicated rule lower in this file (which hides on
   mobile and shows only at ≥1024px). */
.elyon-h-hero__scroll {
	flex-direction: column;
	align-items: center;
	gap: var(--s-3);
	padding: var(--s-2) 0;
	font-family: var(--ff-sans);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color var(--t);
	width: max-content;
	max-width: 100%;
}
.elyon-h-hero__scroll-line {
	display: block;
	width: 1px;
	height: 40px;
	background: var(--c-border-strong);
	position: relative;
	overflow: hidden;
}
.elyon-h-hero__scroll-line::after {
	content: "";
	position: absolute;
	left: 0;
	top: -100%;
	width: 100%;
	height: 50%;
	background: linear-gradient(180deg, transparent, var(--c-primary));
	animation: elyon-scroll-cue 2.4s ease-in-out infinite;
}
@keyframes elyon-scroll-cue {
	0%   { top: -50%; }
	100% { top: 100%; }
}

/* (Older "Refine hero title em" block — superseded by the full-width slider
   styles above. Kept as a no-op so older hero structures still resolve.) */

/* ============================================================
   VALUES MARQUEE  (between hero and programmes)
   ============================================================ */
.elyon-h-marquee {
	background: var(--c-cream);
	border-block: 1px solid var(--c-border);
	padding: var(--s-5) 0;
	overflow: hidden;
	position: relative;
}
.elyon-h-marquee::before,
.elyon-h-marquee::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	width: 80px;
	z-index: 2;
	pointer-events: none;
}
.elyon-h-marquee::before { left: 0; background: linear-gradient(90deg, var(--c-cream), transparent); }
.elyon-h-marquee::after  { right: 0; background: linear-gradient(270deg, var(--c-cream), transparent); }
.elyon-h-marquee__track {
	display: flex;
	width: max-content;
	animation: elyon-marquee 38s linear infinite;
	gap: 0;
}
.elyon-h-marquee:hover .elyon-h-marquee__track { animation-play-state: paused; }
.elyon-h-marquee__row {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0;
}
.elyon-h-marquee__row li {
	display: inline-flex;
	align-items: center;
	gap: var(--s-5);
	padding: 0 var(--s-5);
	white-space: nowrap;
}
.elyon-h-marquee__word {
	font-family: var(--ff-display);
	font-style: italic;
	font-weight: 400;
	font-variation-settings: "opsz" 144;
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	color: var(--c-primary);
	letter-spacing: -0.02em;
	line-height: 1;
}
.elyon-h-marquee__sep {
	display: inline-block;
	width: 8px;
	height: 8px;
	background: var(--c-accent);
	transform: rotate(45deg);
}
@keyframes elyon-marquee {
	to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.elyon-h-marquee__track { animation: none; gap: var(--s-4); flex-wrap: wrap; justify-content: center; padding: 0 var(--pad-edge); }
}

/* (Programme card refinements consolidated into the main programme block above.) */

/* ============================================================
   PRINCIPAL  —  dropcap on greeting + editorial pull quote
   ============================================================ */
/* Drop cap removed — greeting reads as a normal italic line. */

.elyon-h-principal__pull {
	margin: var(--s-4) 0;
	padding: 0 var(--s-5);
	border: 0;
	border-left: 2px solid var(--c-accent);
	font-family: var(--ff-display);
	font-style: italic;
	font-weight: 400;
	font-variation-settings: "opsz" 144, "SOFT" 30;
	font-size: clamp(1.25rem, 1.6vw, 1.4rem);
	line-height: 1.35;
	color: var(--c-text);
	letter-spacing: -0.015em;
	position: relative;
}
.elyon-h-principal__pull p { margin: 0; text-wrap: balance; }
.elyon-h-principal__pull::before {
	content: """;
	position: absolute;
	top: -28px;
	left: -8px;
	font-size: 5rem;
	color: var(--c-accent);
	line-height: 1;
	font-style: italic;
	opacity: 0.6;
	pointer-events: none;
}

/* ============================================================
   VOICES  —  asymmetric layout with star-field backdrop
   ============================================================ */
.elyon-h-voices {
	position: relative;
	background:
		radial-gradient(circle at 12% 18%, rgba(15, 15, 15, 0.10) 0, transparent 1px),
		radial-gradient(circle at 78% 64%, rgba(15, 15, 15, 0.08) 0, transparent 1px),
		radial-gradient(circle at 32% 78%, rgba(135, 48, 42, 0.06) 0, transparent 1px),
		radial-gradient(circle at 88% 24%, rgba(15, 15, 15, 0.07) 0, transparent 1px),
		var(--c-bg);
	background-size: 4px 4px, 6px 6px, 5px 5px, 7px 7px, auto;
	background-position: 0 0, 80px 40px, 160px 100px, 220px 60px, 0 0;
}
@media (min-width: 1024px) {
	.elyon-h-voices__grid {
		grid-template-columns: repeat(3, 1fr);
		align-items: stretch;
	}
}

/* ============================================================
   HERO SLIDER CONTROLS  —  arrows · counter · dots · progress
   ============================================================ */

/* ---- Arrow controls: bottom-right pair ---- */
.elyon-h-hero__slider-controls {
	position: absolute;
	right: var(--pad-edge);
	bottom: clamp(var(--s-7), 8vw, var(--s-9));
	z-index: 5;
	display: inline-flex;
	gap: var(--s-2);
}
.elyon-h-hero__slider-arrow {
	width: 56px;
	height: 56px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* High-opacity dark glass — guarantees ≥ 5:1 contrast with the white
	   chevron on any photo, including bright skies and white walls.
	   Backdrop blur softens the tile underneath without lightening it. */
	background: rgba(0, 0, 0, 0.7);
	-webkit-backdrop-filter: blur(10px) saturate(140%);
	backdrop-filter: blur(10px) saturate(140%);
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	transition: background-color var(--t), border-color var(--t), color var(--t), transform var(--t);
	padding: 0;
}
.elyon-h-hero__slider-arrow:hover,
.elyon-h-hero__slider-arrow:focus-visible {
	background: var(--c-accent-bright);
	color: var(--c-text);
	border-color: var(--c-accent-bright);
	outline: none;
}
.elyon-h-hero__slider-arrow:active { transform: scale(0.94); }
.elyon-h-hero__slider-arrow:focus-visible { box-shadow: 0 0 0 3px rgba(224, 174, 77, 0.45); }

/* ---- Pagination wrapper: counter + dots, bottom-right area ---- */
.elyon-h-hero__slider-pagination {
	position: absolute;
	left: var(--pad-edge);
	right: var(--pad-edge);
	max-width: var(--w-wide);
	margin-inline: auto;
	bottom: clamp(var(--s-5), 4vw, var(--s-6));
	z-index: 5;
	display: flex;
	align-items: center;
	gap: var(--s-5);
	pointer-events: none;
}
.elyon-h-hero__slider-pagination > * { pointer-events: auto; }

.elyon-h-hero__slider-counter {
	display: inline-flex;
	align-items: center;
	gap: var(--s-2);
	font-family: var(--ff-display);
	font-size: 0.875rem;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.92);
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
.elyon-h-hero__slider-counter-current {
	color: var(--c-accent-bright);
	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1;
	text-shadow:
		0 1px 2px  rgba(0, 0, 0, 0.55),
		0 2px 12px rgba(0, 0, 0, 0.55);
}
.elyon-h-hero__slider-counter-divider {
	display: inline-block;
	width: 28px;
	height: 1px;
	background: rgba(255, 255, 255, 0.5);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.elyon-h-hero__slider-counter-total {
	color: rgba(255, 255, 255, 0.72);
	font-size: 0.875rem;
}

/* ---- Dots: hairline bars on the bottom-right ---- */
.elyon-h-hero__slider-dots {
	display: inline-flex;
	gap: var(--s-3);
	margin: 0;
	padding: 0;
	list-style: none;
	flex: 1;
	justify-content: flex-end;
	max-width: 320px;
	margin-left: auto;
}
.elyon-h-hero__slider-dots > li {
	flex: 1;
	min-width: 24px;
	max-width: 60px;
}
.elyon-h-hero__slider-dot {
	display: block;
	position: relative;
	width: 100%;
	height: 3px;
	padding: 12px 0;
	background: transparent;
	border: 0;
	cursor: pointer;
	overflow: visible;
	transition: opacity var(--t);
}
.elyon-h-hero__slider-dot::before {
	content: "";
	position: absolute;
	left: 0; right: 0;
	top: 50%;
	transform: translateY(-50%);
	height: 3px;
	/* Solid white bar with a dark outline ring — readable against any
	   photo, AAA UI ≥ 3:1 even on sun-bright skies. */
	background: rgba(255, 255, 255, 0.92);
	border-radius: 2px;
	box-shadow:
		0 0 0 1px rgba(0, 0, 0, 0.55),
		0 1px 3px rgba(0, 0, 0, 0.45);
	transition: background-color var(--t);
}
.elyon-h-hero__slider-dot:hover::before { background: #fff; }
/* Inactive non-current dots stay readable but slightly recessed.
   Active dot uses the gold fill (.elyon-h-hero__slider-dot-fill) on top. */
.elyon-h-hero__slider-dot.is-active::before { background: rgba(255, 255, 255, 0.55); }
.elyon-h-hero__slider-dot-fill {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%) scaleX(0);
	height: 2px;
	width: 100%;
	background: var(--c-accent-bright);
	transform-origin: left center;
	border-radius: 2px;
	pointer-events: none;
}
.elyon-h-hero__slider-dot.is-active .elyon-h-hero__slider-dot-fill {
	animation: elyon-dot-progress 6.5s linear forwards;
}
.elyon-h-hero__slider:hover .elyon-h-hero__slider-dot.is-active .elyon-h-hero__slider-dot-fill,
.elyon-h-hero__slider:focus-within .elyon-h-hero__slider-dot.is-active .elyon-h-hero__slider-dot-fill {
	animation-play-state: paused;
}
@keyframes elyon-dot-progress {
	from { transform: translateY(-50%) scaleX(0); }
	to   { transform: translateY(-50%) scaleX(1); }
}
.elyon-h-hero__slider-dot:focus-visible {
	outline: none;
}
.elyon-h-hero__slider-dot:focus-visible::before {
	background: var(--c-accent-bright);
	box-shadow: 0 0 0 4px rgba(224, 174, 77, 0.32);
}

/* ----- Slider chrome responsive layout ----------------------------- */

/* ≤720px — arrows tuck into the bottom-right corner; pagination stays a
   single row at bottom-left, leaving room for the arrows. Keeping the
   pagination as a row at all mobile widths means the content's
   padding-bottom doesn't need to vary by breakpoint. */
@media (max-width: 768px) {
	.elyon-h-hero__slider-controls {
		bottom: var(--s-3);
		right: var(--s-3);
		gap: 6px;
	}
	.elyon-h-hero__slider-arrow {
		width: 44px;
		height: 44px;
	}
	.elyon-h-hero__slider-pagination {
		flex-direction: row;
		align-items: center;
		bottom: var(--s-4);
		left: var(--s-4);
		right: calc(2 * 44px + var(--s-3) + var(--s-4));
		gap: var(--s-3);
	}
	.elyon-h-hero__slider-dots {
		max-width: 100%;
		margin-left: var(--s-2);
		gap: var(--s-2);
		justify-content: flex-start;
	}
}

/* ≤520px — compact mode: arrows + counter hide so the dots can take the
   full bottom row, centred. Auto-advance + touch swipe still navigate. */
@media (max-width: 480px) {
	.elyon-h-hero__slider-controls,
	.elyon-h-hero__slider-counter { display: none; }
	.elyon-h-hero__slider-pagination {
		right: var(--s-4);
		justify-content: center;
		gap: 0;
	}
	.elyon-h-hero__slider-dots {
		margin-left: 0;
		justify-content: center;
		max-width: 100%;
	}
	.elyon-h-hero__slider-dots > li {
		min-width: 18px;
		max-width: 48px;
	}
}

/* ---- Reduced motion: no Ken Burns, no progress, instant slide ---- */
@media (prefers-reduced-motion: reduce) {
	.elyon-h-hero__slide.is-active .elyon-h-hero__slide-media img { animation: none; transform: none; }
	.elyon-h-hero__slider-dot.is-active .elyon-h-hero__slider-dot-fill { animation: none; transform: translateY(-50%) scaleX(1); }
	.elyon-h-hero__slide { transition-duration: 0.01ms; }
	.elyon-h-hero__slide-content > * { transition-duration: 0.01ms; transition-delay: 0ms !important; }
}

/* ---- Scroll cue stays anchored bottom-center of hero ---- */
.elyon-h-hero__scroll {
	position: absolute;
	left: 50%;
	bottom: var(--s-3);
	transform: translateX(-50%);
	z-index: 5;
	color: rgba(255, 255, 255, 0.7);
	display: none;
}
.elyon-h-hero__scroll:hover, .elyon-h-hero__scroll:focus-visible {
	color: #fff;
}
.elyon-h-hero__scroll-line { background: rgba(255, 255, 255, 0.32); }
.elyon-h-hero__scroll-line::after { background: linear-gradient(180deg, transparent, var(--c-accent-bright)); }
@media (min-width: 1024px) {
	.elyon-h-hero__scroll { display: inline-flex; }
}

/* ============================================================
   FOOTER MONOGRAM (homepage doesn't need overrides — main.css handles)
   ============================================================ */